/* =========================================================================
 * Histórico de la Liga — parte pública
 *
 * Mismo aspecto que /clasificacion/ (php/clasificaciones.php): cabecera con
 * su punto verde, tarjeta blanca, la posición en una chapita redonda y el
 * equipo de quien mira resaltado. Aquel archivo usa el prefijo .mcl- y este
 * el .mhi-, para que puedan convivir en la misma página sin pisarse.
 * ====================================================================== */

/* ---------------------------------------------------------------------
 * CABECERA
 * ------------------------------------------------------------------ */

.mhi-wrap {
    /* Lo ancho que se pinta todo. Una tabla de tres columnas (puesto, equipo
       y puntos) estirada a 1180px como la de /clasificacion/ deja los puntos
       a kilómetros del nombre y no hay quien la lea: allí son tres tarjetas
       en paralelo y aquí es una sola. Se puede cambiar en los Ajustes de la
       funcionalidad o por shortcode: [ivanivi-historico ancho="520"]. */
    --mhi-ancho: 620px;

    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

.mhi-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    max-width: var(--mhi-ancho);
    margin: 0 auto 18px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(7, 138, 85, .14);
}

.mhi-head__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
    color: #078a55;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mhi-head__kicker:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48a348;
    box-shadow: 0 0 0 4px rgba(72, 163, 72, .12);
}

.mhi-head h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #07111f;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.5px;
}

.mhi-head__count {
    padding: 7px 11px;
    border-radius: 999px;
    background: #f3faf5;
    color: #078a55;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * LA TARJETA
 * ------------------------------------------------------------------ */

.mhi-card {
    max-width: var(--mhi-ancho);
    margin: 0 auto;
    padding: 14px 12px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
}

/* ---------------------------------------------------------------------
 * LOS FILTROS
 * ------------------------------------------------------------------ */

.mhi-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
    padding: 0 2px 14px;
    border-bottom: 1px solid rgba(7, 138, 85, .14);
}

.mhi-campo {
    display: block;
    min-width: 0;
}

.mhi-campo__et {
    display: block;
    margin: 0 0 5px;
    color: #078a55;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mhi-sel {
    display: block;
    width: 100%;
    margin: 0;
    padding: .45em 2em .45em .8em;
    box-sizing: border-box;
    border: 1px solid #c9d4ce;
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23078a55%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
    background-size: .6em auto;
    color: #24312a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.mhi-sel::-ms-expand { display: none; }
.mhi-sel:hover { border-color: #9fb3a8; }

.mhi-sel:focus {
    border-color: #48a348;
    box-shadow: 0 0 0 3px rgba(72, 163, 72, .18);
    outline: none;
}

/* ---------------------------------------------------------------------
 * LA TABLA
 * ------------------------------------------------------------------ */

.mhi-tabla {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.mhi-tabla tr { background: none; }

.mhi-tabla thead th {
    padding: 0 6px 8px;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
    color: #7d8d84;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
}

.mhi-tabla thead th.mhi-pts { text-align: right; }

.mhi-tabla td {
    padding: 4px 6px;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 14px;
    line-height: 1.35;
    color: #24312a;
}

.mhi-tabla tbody tr:last-child td { border-bottom: 0; }

.mhi-c1  { width: 42px; text-align: center; }
.mhi-nom { width: 100%; overflow-wrap: anywhere; }
.mhi-pts { text-align: right; font-weight: 700; white-space: nowrap; }

/* Un respiro entre los puntos y el borde de la tarjeta: pegados a la
   derecha se leen mal, sobre todo en el movil. Hace falta nombrar la
   tabla porque las reglas de arriba (.mhi-tabla td) pesan mas. */
.mhi-tabla thead th.mhi-pts,
.mhi-tabla td.mhi-pts { padding-right: 12px; }

/* La posición, en una chapita redonda */
.mhi-pos {
    display: inline-block;
    min-width: 26px;
    padding: 1px 7px;
    border-radius: 20px;
    background: #f2f2f2;
    color: #555;
    font-size: 13px;
    font-weight: 700;
}

.mhi-pos.es-sube { background: #48a348; color: #fff; }
.mhi-pos.es-baja { background: #d9534f; color: #fff; }

/* Tu equipo, para encontrarlo de un vistazo */
.mhi-tabla tr.es-mio td {
    background-color: rgba(72, 163, 72, .18);
    color: #222;
    font-weight: 700;
}

/* Los puntos que no se conservan */
.mhi-sinpts {
    color: #9aa8a0;
    font-weight: 700;
    cursor: help;
}

/* La explicación de las temporadas de las que solo se guardó el campeón.
   Va debajo de la tabla y solo aparece en esas temporadas. */
.mhi-nota {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 8px;
    background: #f7f9f8;
    border-left: 3px solid #c9d4ce;
    color: #5c6b63;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}

.mhi-nota:before {
    content: "i";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: #9aa8a0;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    font-style: italic;
    line-height: 16px;
    text-align: center;
}

.mhi-nota strong {
    color: #3f4b45;
    font-weight: 800;
}

/* Lo que se oculta con `hidden` no puede reaparecer por el display:flex. */
.mhi-nota[hidden] {
    display: none !important;
}

/* Cuántas competiciones hay guardadas. Va entre los filtros y la tabla, y
   no cambia al elegir temporada: es el total del histórico. */
.mhi-resumen {
    margin: 0 0 12px;
    padding: 0 2px;
    color: #7d8d84;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

.mhi-resumen strong {
    color: #078a55;
    font-weight: 900;
}

/* Cuando no hay nada que enseñar */
.mhi-vacio {
    margin: 0;
    padding: 18px 6px;
    color: #7d8d84;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 600px) {
    .mhi-head h2   { font-size: 22px; }
    .mhi-tabla td  { font-size: 13px; }
    .mhi-filtros   { gap: 10px; }
}

/* =========================================================================
 * EL PALMARÉS  —  [ivanivi-palmares]
 *
 * Tarjetas en rejilla, una por equipo, ordenadas de más títulos a menos.
 * Reaprovecha la cabecera (.mhi-head) del histórico, para que las dos
 * piezas se vean de la misma familia.
 * ====================================================================== */

.mhp-wrap {
    --mhi-ancho: 1180px;

    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------------
 * COLORES DE CADA COMPETICIÓN
 * ------------------------------------------------------------------ */

.mhp-wrap {
    --mhp-oro:   #d99e0b;
    --mhp-azul:  #2f6fb8;
    --mhp-verde: #078a55;
}

.mhp-trofeo       { width: 19px; height: 19px; flex: 0 0 auto; }
.mhp-trofeo.es-oro   { fill: var(--mhp-oro); }
.mhp-trofeo.es-azul  { fill: var(--mhp-azul); }
.mhp-trofeo.es-verde { fill: var(--mhp-verde); }

/* ---------------------------------------------------------------------
 * LEYENDA
 * ------------------------------------------------------------------ */

.mhp-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--mhi-ancho);
    margin: -6px auto 18px;
    padding: 0 2px;
}

.mhp-ley {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7d8d84;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * LA REJILLA
 * ------------------------------------------------------------------ */

.mhp-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 14px;
    align-items: start;
    max-width: var(--mhi-ancho);
    margin: 0 auto;
}

.mhp-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 15px 15px 14px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top: 3px solid #e6e6e6;
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mhp-card:hover {
    border-color: #d3ded7;
    border-top-color: #9fb3a8;
    box-shadow: 0 2px 10px rgba(7, 17, 31, .06);
}

/* El que más títulos tiene */
.mhp-card.es-lider {
    border-top-color: var(--mhp-oro);
    background: linear-gradient(180deg, #fffdf6 0%, #fff 60%);
}

/* ---------------------------------------------------------------------
 * LOS TROFEOS
 * ------------------------------------------------------------------ */

.mhp-trofeos {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-height: 19px;
}

/* ---------------------------------------------------------------------
 * NOMBRE Y TOTAL
 * ------------------------------------------------------------------ */

.mhp-nombre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    color: #07111f;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}

.mhp-total {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f3faf5;
    color: #078a55;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.mhp-card.es-lider .mhp-total {
    background: var(--mhp-oro);
    color: #fff;
}

/* ---------------------------------------------------------------------
 * LA LISTA DE TÍTULOS
 * ------------------------------------------------------------------ */

.mhp-lista {
    list-style: none !important;
    margin: 0 !important;
    padding: 9px 0 0 !important;
    border-top: 1px solid #f1f1f1;
}

.mhp-lista li {
    margin: 0 0 5px;
    padding: 0;
    line-height: 1.45;
}

.mhp-lista li:last-child { margin-bottom: 0; }

.mhp-et {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.mhp-et.es-oro   { background: rgba(217, 158, 11, .13); color: #9a7008; }
.mhp-et.es-azul  { background: rgba(47, 111, 184, .12); color: #2f6fb8; }
.mhp-et.es-verde { background: rgba(7, 138, 85, .11);   color: #078a55; }

.mhp-anios {
    color: #5c6b63;
    font-size: 12.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .mhp-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
    .mhp-card    { padding: 13px; }
    .mhp-nombre  { font-size: 15.5px; }
}

/* ---------------------------------------------------------------------
 * LAS MARCAS DE CADA EQUIPO
 *
 * «En activo» / «Retirado» sale de cruzar el nombre del equipo con los
 * usuarios de WordPress; «Con equipo» sale además de la tabla de equipos
 * dados de alta esta temporada. Verde = está; gris = se retiró.
 * ------------------------------------------------------------------ */

.mhp-estado {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: -3px 0 0;
}

.mhp-marca {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.6;
    white-space: nowrap;
    cursor: help;
}

.mhp-marca:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Sigue teniendo usuario en la web */
.mhp-marca.es-activo {
    background: #e9f6ee;
    color: #0b6b43;
}
.mhp-marca.es-activo:before { background: #48a348; }

/* Ya no está */
.mhp-marca.es-retirado {
    background: #f1f2f1;
    color: #78837c;
}
.mhp-marca.es-retirado:before { background: #adb5b0; }

/* Y además juega esta temporada: la más fuerte de las tres */
.mhp-marca.es-juega {
    background: #078a55;
    color: #fff;
}
.mhp-marca.es-juega:before { background: rgba(255, 255, 255, .85); }

/* =========================================================================
 * EL CUADRO DE HONOR  —  [ivanivi-campeones]
 *
 * Los campeones en fila, del más reciente al más antiguo. Es la otra
 * lectura del palmarés: aquel agrupa por equipo y este va año a año.
 * ====================================================================== */

.mhc-wrap {
    --mhi-ancho: 620px;

    --mhp-oro:   #d99e0b;
    --mhp-azul:  #2f6fb8;
    --mhp-verde: #078a55;

    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

.mhc-lista {
    list-style: none !important;
    max-width: var(--mhi-ancho);
    margin: 0 auto !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
}

.mhc-fila {
    display: grid;
    grid-template-columns: 96px 78px 1fr;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 9px 14px 9px 11px;
    border-bottom: 1px solid #f1f1f1;
    /* La barra de color de la izquierda dice de qué competición es. */
    border-left: 3px solid #e6e6e6;
}

.mhc-fila:last-child { border-bottom: 0; }
.mhc-fila:hover      { background: #fafbfa; }

.mhc-fila.es-oro   { border-left-color: var(--mhp-oro); }
.mhc-fila.es-azul  { border-left-color: var(--mhp-azul); }
.mhc-fila.es-verde { border-left-color: var(--mhp-verde); }

/* La competición */
.mhc-comp {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
}

.mhc-fila.es-oro   .mhc-comp { background: rgba(217, 158, 11, .13); color: #9a7008; }
.mhc-fila.es-azul  .mhc-comp { background: rgba(47, 111, 184, .12); color: #2f6fb8; }
.mhc-fila.es-verde .mhc-comp { background: rgba(7, 138, 85, .11);   color: #078a55; }

/* La temporada */
.mhc-anio {
    color: #7d8d84;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* El campeón */
.mhc-quien {
    color: #07111f;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mhc-y {
    color: #9aa8a0;
    font-size: 12px;
    font-weight: 600;
}

/* El puntito de si sigue en la web */
.mhc-punto {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: 1px;
    cursor: help;
}

.mhc-punto.es-juega    { background: #078a55; box-shadow: 0 0 0 3px rgba(7, 138, 85, .14); }
.mhc-punto.es-activo   { background: #9ccfae; }
.mhc-punto.es-retirado { background: #d8dcd9; }

@media (max-width: 600px) {
    .mhc-fila  { grid-template-columns: 80px 66px 1fr; gap: 8px; padding: 8px 10px 8px 9px; }
    .mhc-quien { font-size: 14px; }
    .mhc-comp  { font-size: 9px; padding: 2px 6px; }
}