/* Rivales — capa sobre estadio.css */

/* las cards de rival son clickeables (abren el detalle): que respondan al hover en desktop */
/* OLA 1 — duraciones a tokens de estadio.css (--mo-fast/--mo) + curva común --ease-out. */
.page-rivales .tile[data-key] { transition: transform var(--mo-fast) var(--ease-out), box-shadow var(--mo) var(--ease-out), border-color var(--mo) var(--ease-out); }
@media (hover: hover) {
    .page-rivales .tile[data-key]:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 0, 0, .42); border-color: rgba(255, 194, 51, .35); }
}
.page-rivales .tile[data-key]:active { transform: scale(.99); }

/* accento de favorabilidad: la grilla se lee como un mapa de rivalidades
   (verde = favorable · neutro = parejo · rojo = cuesta arriba)

   OLA 3 — política de color. El tramo medio era DORADO (#ffc233 = var(--gold)), y ese mismo
   dorado significa "premium / destacado" en Inicio y en el Álbum: el color decía dos cosas
   opuestas dentro de la misma app, y acá la peor de las dos ("tu rendimiento es mediocre")
   era la que se llevaba el énfasis visual más fuerte de la card.
   Ahora usa `--draw`, el token neutral que YA existe en estadio.css y que esta misma card usa
   para el empate en la barra W/D/L de abajo: parejo = ni victoria ni derrota = neutro. La card
   queda internamente coherente (el color del %V es el color del tramo del medio de su barra) y
   el dorado vuelve a ser sólo marca / destacado positivo. Cambio local: no se tocó ningún token
   global ni el Álbum. */
.page-rivales .rcard { border-left: 3px solid var(--rc, var(--line-2)); }
.page-rivales .rcard--fav { --rc: #28c281; }
.page-rivales .rcard--par { --rc: var(--draw); }
.page-rivales .rcard--cst { --rc: #ff5a6a; }
@media (hover: hover) {
    .page-rivales .rcard:hover { border-left-color: var(--rc); border-color: color-mix(in srgb, var(--rc) 45%, transparent); }
    .page-rivales .rcard:hover .rcrest { transform: scale(1.05); }
}

/* ============================================================
   ESTRUCTURA DE LA CARD (OLA 3) — el nombre tiene FILA PROPIA

   Antes: `.rcard__hd` era un flex y el nombre vivía DENTRO de `.rcard__id`, compartiendo la
   fila con el escudo. Medido: card 172px a 390 → 172 − 26 de padding − 36 de escudo − 11 de gap
   = **95px de caja de nombre**; a 320 la card mide 137px y la caja caía a **60px**. Con eso
   "UNIVERSITARIO" no entra en ninguna línea y el navegador parte a mitad de palabra
   ("UNIVERSITAR/IO", "MONTEVIDE/O"). El fix anterior (`.rcard__id { flex: 1 1 100% }`) hizo
   full-width al CONTENEDOR, pero adentro el escudo seguía comiéndose la fila: por eso no
   cambió nada. Bajar la tipografía, apretar el tracking o `break-all` sólo disimulan.

   Ahora `.rcard__hd` es una grilla de áreas:
       fila 1:  [escudo]  [%V + cruces (+ tendencia en ≥760)]
       fila 2:  [ nombre, ancho completo, wrap por palabras ]
   El nombre nunca comparte fila con una métrica, así que ninguna métrica puede empujarlo.
   `.rcard` pasa a flex-column con `margin-top:auto` en la barra: las barras y la leyenda
   quedan pegadas al fondo, así que en una misma fila de la grilla (las cards ya se estiran a
   la altura de fila) todas las bases se alinean aunque un nombre ocupe 1, 2 o 3 líneas. */
.page-rivales .rcard { display: flex; flex-direction: column; }
.page-rivales .rcard__hd {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "crest perf" "nm nm";
    align-items: center; column-gap: 10px; row-gap: 10px;
    margin-bottom: 12px;
}
.page-rivales .rcard .rcrest { grid-area: crest; }
.page-rivales .rcard__perf { grid-area: perf; justify-self: end; }
.page-rivales .rcard__nm { grid-area: nm; }
/* la barra empuja hacia abajo el sobrante: bases alineadas entre cards de la misma fila */
.page-rivales .rcard .wdlbar { margin-top: auto; }

/* nombre del rival: ancho completo, corte SÓLO entre palabras. `break-word` acá es la red de
   seguridad para una palabra sola más ancha que la caja (no es `break-all`: no parte palabras
   que sí entran). */
.page-rivales .rcard__nm { font-family: var(--disp, Anton), sans-serif; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.12;
    overflow-wrap: break-word; word-break: normal; hyphens: none; }

/* %V número-ancla: el rendimiento vs el rival, grande y coloreado por favorabilidad
   (verde / neutro / rojo). Es lo que el hincha busca; antes vivía sólo en la barrita fina.
   "N cruces" es el subtítulo del porcentaje (su contexto: 35% ¿sobre cuántos?), no otro
   metadato suelto — por eso vive acá y no en una cuarta línea de la card. */
.page-rivales .rcard__perf { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.page-rivales .rcard__wp { font-family: var(--disp, Anton), sans-serif; font-size: 1.75rem; line-height: .85; color: var(--rc, var(--tx)); font-variant-numeric: tabular-nums; }
.page-rivales .rcard__wp small { font-family: Barlow, sans-serif; font-size: .5rem; font-weight: 800; letter-spacing: .08em; color: var(--tx-3); margin-left: 1px; vertical-align: top; }
.page-rivales .rcard__pj { font-size: .6rem; font-weight: 700; letter-spacing: .04em; color: var(--tx-3); white-space: nowrap; }
/* única línea de metadatos de la card: el balance. Cada bloque entero o nada (nunca "G" arriba
   y "6" abajo, que es lo que pasaba a 320). */
.page-rivales .rcard .wdlleg { gap: 10px; }
.page-rivales .rcard .wdlleg > span { white-space: nowrap; }
.page-rivales .rcard__dg { margin-left: auto; }
@media (max-width: 759px) {
    /* en la card de 2-col no sobrecargamos: el %V manda (su color ya dice la favorabilidad),
       la pill de tendencia se oculta para no apilar otra fila. */
    .page-rivales .rcard__perf .rcard__trend { display: none; }
    .page-rivales .rcard__wp { font-size: 1.5rem; }
    /* reserva de 2 líneas SÓLO en mobile, donde la caja mide 111–162px y dos líneas son la
       norma: así una card de nombre corto no queda hueca al lado de una de dos líneas. */
    .page-rivales .rcard__nm { min-height: 2.24em; display: flex; align-items: flex-start; }
}
@media (min-width: 760px) {
    /* Desktop/tablet. Con el nombre en fila propia, la fila 1 quedaba con el escudo solo a la
       izquierda y ~180px de aire muerto en el medio, y la card pasaba de 166 a 201px de alto
       (la tendencia apilaba una tercera línea bajo el %V). Dos correcciones de composición:
         · la pill de tendencia se pone AL LADO del %V, no debajo → el bloque derecho vuelve a
           la altura del escudo y de paso ocupa el hueco.
         · el nombre sube a 1.35rem: en una card de ~333px de caja, a 1.05rem quedaba más chico
           que su propia métrica; ahora es el titular de la card, que es lo que la página promete. */
    .page-rivales .rcard__perf {
        display: grid; grid-template-columns: auto auto;
        grid-template-areas: "trend wp" "trend pj";
        align-items: center; column-gap: 10px; row-gap: 4px;
    }
    .page-rivales .rcard__wp { grid-area: wp; justify-self: end; }
    .page-rivales .rcard__pj { grid-area: pj; justify-self: end; }
    .page-rivales .rcard__trend { grid-area: trend; align-self: center; }
    .page-rivales .rcard__nm { font-size: 1.35rem; }
}

/* Mobile: las cards traían .b2 (span 2) → 1 por fila = 133 cards en una tirada vertical eterna.
   Acá las pasamos a 2 columnas (span 1 sobre la grilla base de 2-col) y compactamos lo justo
   para que entren cómodas. El cap + "Ver más" (en el JS) corta el resto del scroll. */
@media (max-width: 759px) {
    .page-rivales #grid > .rcard.b2 { grid-column: span 1; padding: 13px; }
    .page-rivales #grid .rcrest { width: 36px; height: 36px; font-size: .9rem; }
    /* .86rem → .94rem: al recuperar la fila completa el nombre ya no necesita achicarse, y con
       el %V a 1.5rem al lado un nombre de .86 dejaba al SUJETO de la card por debajo de su
       propia métrica. Verificado a 320 (caja de 111px) con el nombre más largo del padrón. */
    .page-rivales #grid .rcard__nm { font-size: .94rem; }
    .page-rivales #grid .rcard .pill8 { font-size: .58rem; padding: 3px 7px; }
    .page-rivales #grid .rcard .wdlleg { font-size: .62rem; gap: 7px; }
}
/* 320–359: la card queda en ~137px de ancho (111 de contenido). Se aprieta sólo el gap de la
   leyenda y el padding — NO el nombre, que es justamente lo que había que dejar de castigar. */
@media (max-width: 359px) {
    .page-rivales #grid > .rcard.b2 { padding: 11px; }
    .page-rivales #grid .rcard .wdlleg { gap: 5px; letter-spacing: -.01em; }
    .page-rivales .rcard__hd { column-gap: 6px; }
}

/* crest de iniciales: identidad visual del rival (no hay escudos reales), color por favorabilidad */
.page-rivales .rcrest { flex: none; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    /* fallback `var(--ease-out, ease)` eliminado: estadio.css carga siempre antes que rivales.css
       (Rivales.html), así que la rama del fallback nunca se evaluaba. */
    font-family: var(--disp, Anton), sans-serif; font-size: 1rem; letter-spacing: .02em; color: var(--rc, #9fb2d8); transition: transform var(--mo-fast) var(--ease-out);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rc, #6f86b8) 22%, #0e1f44), #0a1733);
    border: 1.5px solid color-mix(in srgb, var(--rc, #6f86b8) 48%, transparent); }
/* badge con escudo real (biblioteca team-crests): fondo neutro para que el escudo lea bien */
.page-rivales .rcrest--img { background: #fff; border-color: rgba(255,255,255,.18); overflow: hidden; }
.page-rivales .rcrest--img img { width: 86%; height: 86%; object-fit: contain; display: block; }