/* ════════════════════════════════════════════════════════════════════
   web.css — LA ÚNICA FUENTE DE VERDAD del lenguaje visual de la web
   pública. Antes esto vivía copiado dentro de los 8 HTML, y los valores
   ya habían DIVERGIDO entre ellos (--line valía .08 en index y .10 en
   las interiores). Un archivo, ocho páginas.

   TRES DECISIONES DE ESTA VERSIÓN (Pedro, 2026-08-20):
   1. El VERDE de la casa es el acento. El oro baja a celebración
      (campeones, palmarés, medallero) — antes vestía el sitio entero y
      no era la marca de nadie: los PDF y el sistema interno son verdes.
   2. Los NEUTROS se DERIVAN del verde #123D2C, no son grises puros.
      Es lo que hace la Premier League con su morado: la página cohesiona
      sin un solo bloque de color.
   3. La TIPOGRAFÍA es un token. Cambiarla en todo el sitio son las dos
      líneas de --f-ui / --f-cond, aquí abajo.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── TIPOGRAFÍA ────────────────────────────────────────────────────
     Archivo (Omnibus-Type, Buenos Aires) tiene EJE DE ANCHO variable:
     una sola familia da el condensado del titular y el ancho normal de
     la interfaz — sin segunda fuente y sin riesgo de que desafinen.

     ¿Cambiar de tipografía? Se editan estas dos líneas y el <link> de
     Google Fonts en chrome.js. Alternativas ya evaluadas:
       Sofia Sans:  --f-ui:'Sofia Sans'  --f-cond:'Sofia Sans Condensed'
                    (lo que corre LiveScore; hay que cargar 2 familias)
       Saira:       --f-ui:'Saira'       --f-cond:'Saira Condensed'
                    (lo que teníamos hasta hoy)                        */
  --f-ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-cond:'Archivo','Arial Narrow',sans-serif;
  --wd-cond:80;        /* ancho del condensado (62–125) */
  --wd-ui:100;

  /* ── NEUTROS, derivados del verde de la casa ─────────────────────── */
  --bg:#FFFFFF; --bg2:#F7F9F8; --panel:#FFFFFF;
  --ink:#101512; --mut:#5E6A63; --head:#7C8880;
  --line:rgba(16,21,18,.09); --line2:rgba(16,21,18,.14); --line3:rgba(16,21,18,.24);

  /* ── ACENTO: el verde de la casa ──────────────────────────────────
     Dos verdes con ROLES distintos, porque uno solo no alcanza:
       --acc      objeto (chips, barras, bordes). 3.39:1 → JAMÁS texto
       --acc-ink  texto y enlaces. Mismo tono, más oscuro. 4.59:1 ✓
       --brand    texto denso y bandas. 12.14:1 — el de los PDF        */
  --acc:#1D9E75; --acc-ink:#188562; --brand:#123D2C;
  --acc-b:rgba(29,158,117,.42); --acc-bg:rgba(29,158,117,.07);
  --acc-chip:#EAF4F0;

  /* Alias de compatibilidad: las 8 páginas nombran el acento '--oro'
     en ~94 sitios. Apuntarlo al verde vuelve verde todo el sitio sin
     reescribir 94 reglas. Se irán renombrando a --acc con el tiempo. */
  --oro:var(--acc-ink); --oro2:var(--brand); --oro-ink:#FFFFFF;
  --orob:var(--acc-b); --orobg:var(--acc-bg); --chip:var(--acc-chip);

  /* ── FIRMA DEL TORNEO ─────────────────────────────────────────────
     El sistema entero es verde en los dos torneos (arriba). Lo que
     distingue a la Súper Liga de Calimaderas es su FIRMA: el hero, el
     logo, su punto en el selector y los acentos de CELEBRACIÓN
     (campeones, palmarés, medallero). Nunca el menú ni un marcador.

     torneos.js las inyecta por torneo con mayor especificidad; estos
     son el respaldo — el dorado de la Súper Liga, que es el torneo
     principal y el que ve quien llega sin elegir nada.               */
  --firma:#B4831F; --firma2:#8A6A24; --firma-chip:#F6EFDC;
  --firma-b:rgba(180,131,31,.42); --firma-bg:rgba(180,131,31,.07);
  --firma-ink:#FFFFFF;
  /* Dark: el respaldo de la firma también se aclara (torneos.js hace lo
     mismo por torneo). Sin esto, el dorado oscuro quedaría ilegible. */

  /* Alias viejo del oro. Se conserva mientras queden usos sin migrar. */
  --gold:var(--firma); --gold-2:var(--firma2); --gold-chip:var(--firma-chip);
  --gold-b:var(--firma-b);

  /* ── ESTADOS ──────────────────────────────────────────────────────
     El rojo de EN VIVO es EXCLUSIVO: el verde significa 'la marca', no
     puede significar 'jugando'. Va sobre el TEXTO (minuto y dígitos),
     nunca como etiqueta de fondo, y SIN animación — el color basta.   */
  --live:#E01B41; --warn:#B45309;
  /* El ámbar del aviso, en tokens propios: los pide el detalle de la medalla
     cuando el acta todavía no tiene los goles de ese niño. Van con su pareja
     oscura más abajo — un color declarado solo aquí deja el aviso ilegible en
     el tema oscuro, que es medio sitio. */
  --warning-soft:#FEF3C7; --warning-ink:#8A4B00;
  /* APLAZADO (Pedro 2026-09-04, eligió azul: es el que más se separa del verde de la
     marca). Tinta / fondo / franja. El texto y el ícono llevan el mensaje; el color
     solo acompaña. */
  --apl-ink:#1D4E8F; --apl-bg:#E9F0FB; --apl-line:#2F66B5;
  --dim:.5;            /* opacidad del perdedor */

  /* El hero va SIEMPRE sobre video oscuro: su acento no sigue al tema
     claro. torneos.js los redefine por torneo; estos son el respaldo. */
  --oro-hero:#2DB68A; --oro2-hero:#7FD9BC;

  --ease:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  /* ── EL DIALECTO DEL SISTEMA ──────────────────────────────────────
     Hay componentes que las DOS superficies dibujan con el mismo archivo
     (la ficha del deportista, la medalla). Están escritos en el vocabulario
     de static/css/tokens.css —--surface, --text, --border, --tms-accent—
     y la web nunca cargó esa hoja: sus `var()` no resolvían y el componente
     salía desnudo (fondos transparentes, bordes del color del texto).

     No se copia tokens.css: se TRADUCE. Aquí la web declara su dialecto una
     sola vez y cualquier componente prestado del sistema aterriza vestido
     con la paleta de la web —y sigue su tema oscuro solo, porque cada token
     apunta a uno que ya cambia con [data-theme]. Es la alternativa a cargar
     389 líneas de overrides de Bootstrap que aquí no sirven de nada.

     El sistema JAMÁS carga esta hoja, así que este :root no lo alcanza. */
  --surface:var(--panel); --surface-2:var(--bg2); --surface-3:var(--bg2);
  --text:var(--ink); --text-muted:var(--mut); --text-faint:var(--head);
  --border:var(--line2); --border-soft:var(--line);
  --tms-accent:var(--acc-ink); --tms-accent-soft:var(--acc-bg);
  --accent-ink:var(--acc-ink);
  --shadow-card:0 1px 2px rgba(16,21,18,.06);
}

/* ── LA OTRA MITAD DEL DIALECTO: LAS UTILIDADES ───────────────────────
   El componente prestado también está escrito con las clases de Bootstrap
   (`d-flex`, `gap-2`, `text-muted`) y con Bootstrap Icons, porque nació
   dentro del sistema, que los carga. La web no carga ninguno de los dos:
   sin esto la ficha del deportista se apila en vertical, los escudos y los
   chevrones salen en blanco y el resultado no se parece en nada a lo que
   Pedro ve en el sistema —que era justamente lo que pedía.

   Es la lista EXACTA que usa el camino público de player_card.js, no un
   Bootstrap de bolsillo: si el componente empieza a usar otra clase, se
   agrega aquí y se nota en la misma pasada. Traer Bootstrap entero a una
   página de torneo para nueve reglas sería pagar 200 KB por esto. */
/* Ninguno de estos nombres existe en las 8 páginas (se verificó: cero usos),
   así que van SIN envoltorio: cualquier página que preste un componente del
   sistema los tiene, incluida la que venga después. */
.d-flex{display:flex}
.d-block{display:block}
.align-items-center{align-items:center}
.justify-content-center{justify-content:center}
.justify-content-between{justify-content:space-between}
.flex-column{flex-direction:column}
.flex-grow-1{flex-grow:1;min-width:0}
.gap-1{gap:4px}
.gap-2{gap:8px}
.mt-1{margin-top:4px}
.ms-auto{margin-left:auto}
.text-muted{color:var(--mut)}
.badge{display:inline-block;padding:3px 7px;border-radius:6px;
  font:600 10px var(--f-ui);letter-spacing:.04em;text-transform:uppercase}
.bg-primary{background:var(--acc);color:#fff}
/* Los íconos que sí aparecen en público. Un <i> vacío de una fuente que no
   existe es un hueco: los que se ven se dibujan con un carácter, y el escudo
   —relleno del que no tiene foto ni logo— se calla, que ya lo dice la caja.
   Los tres últimos entraron con el detalle de la medalla (2026-09-10): el
   chevrón de «Volver», el chulo de cada nivel ya alcanzado y la estrella de la
   rareza. Sin ellos la escalera sale con tres huecos justo donde el niño mira
   qué le falta. */
.bi{font-style:normal;display:inline-block}
.bi-chevron-right::before{content:'\203A'}
.bi-chevron-left::before{content:'\2039'}
.bi-check-lg::before{content:'\2713'}
.bi-star-fill::before{content:'\2605'}
/* Este NO se dibuja, se CALLA a propósito: va pegado a «La ganó el plantel: son
   los partidos del equipo», que ya lo dice entero. Se declara igual para que
   quede DECIDIDO y no se confunda con uno que se nos olvidó. */
.bi-people::before{content:''}

[data-theme="dark"]{
  --bg:#0E1311; --bg2:#0B0F0D; --panel:#161C19;
  --ink:#F2F5F3; --mut:#98A29C;
  /* Antes #6E7168: daba 3.77:1 sobre el panel — y es el color del equipo
     perdedor y de TODA la metainformación. Ahora 4.6:1. */
  --head:#8E9891;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.12); --line3:rgba(255,255,255,.26);

  --acc:#1D9E75; --acc-ink:#2DB68A; --brand:#2DB68A;
  --acc-b:rgba(45,182,138,.40); --acc-bg:rgba(45,182,138,.09);
  --acc-chip:#16241E;
  --oro-ink:#08120D;

  --warning-soft:#3A2A12; --warning-ink:#F0B27A;

  --firma:#E6B450; --firma2:#F2CE7E; --firma-chip:#241D0C;
  --firma-b:rgba(230,180,80,.45); --firma-bg:rgba(230,180,80,.08);
  --firma-ink:#141105;

  --live:#FF5A72;
  --apl-ink:#A9C4EE; --apl-bg:#182638; --apl-line:#5A8BD6;
}

/* ── BASE ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-ui);font-variation-settings:'wdth' var(--wd-ui);
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;overflow-x:hidden;
}
a{text-decoration:none;color:var(--acc-ink)}
img{max-width:100%}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.cond{font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}

/* Toda cifra alineada en columna va tabular. Antes esto existía UNA vez
   en todo el sitio, y no estaba ni en resultados ni en tablas — las dos
   páginas que son puro número. */
table td,table th,.num,.sc,.mr-sc,.pg-h{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ════════════════════════════════════════════════════════════════════
   LA FILA DE MARCADOR — la gramática de FlashScore/Sofascore, que es la
   misma que ya usaba el panel del home. Antes /resultados pintaba el
   marcador EN ORO DENTRO DE UN CHIP y el home lo pintaba neutro: la
   misma web con dos criterios opuestos.

   Reglas: equipos APILADOS (cada nombre recibe el ancho completo, así
   'CD JULIAN VASQUEZ A' deja de partirse) · marcador NEUTRO y del mismo
   tamaño que el nombre, distinguido por PESO · perdedor APAGADO al 50%
   (nunca resaltar al ganador) · empate = los dos apagados · separador de
   1px en vez de tarjeta (una tarjeta cuesta 30% de densidad) · columna
   del marcador de ancho FIJO, que es como alinean los seis sitios
   medidos, con tabular-nums de refuerzo.
   ════════════════════════════════════════════════════════════════════ */
.mr-grp{
  font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond);
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);background:var(--bg2);padding:9px 12px;border-radius:6px;
  margin:18px 0 2px;
}
.mr-row{
  display:flex;align-items:stretch;gap:12px;padding:9px 12px;
  border-bottom:1px solid var(--line);min-height:56px;
  background:none;border-radius:0;cursor:pointer;width:100%;text-align:left;
  border-left:0;border-right:0;border-top:0;color:inherit;font:inherit;
}
/* La última fila no muestra separador, pero CONSERVA su píxel: quitarlo
   la dejaba 1px más baja que sus hermanas (medido: 63 contra 64). */
.mr-row:last-child{border-bottom-color:transparent}
.mr-row:hover{background:var(--bg2)}
.mr-rail{
  width:56px;flex:none;display:flex;flex-direction:column;justify-content:center;
  gap:2px;border-right:1px solid var(--line);padding-right:10px;
}
.mr-h{font-size:14px;font-weight:500;color:var(--mut);font-variant-numeric:tabular-nums}
.mr-st{
  font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--head);
}
.mr-st.live{color:var(--live)}
/* ── APLAZADOS (opción C): separador por fecha + nota en la categoría ──
   El partido con fecha propia no se tiñe: vive bajo su propio separador. */
.mr-dia{
  display:flex;align-items:center;gap:8px;margin:12px 0 2px;padding:7px 12px;border-radius:7px;
  background:var(--apl-bg);color:var(--apl-ink);box-shadow:inset 4px 0 0 var(--apl-line);
  font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
}
.mr-nota{padding:8px 12px 4px;color:var(--apl-ink);font-size:12.5px;font-weight:600}
/* El rail crece para que «Miércoles 10» quepa en UNA línea. */
.mr-row.aplazado .mr-rail{width:auto;min-width:56px}
.mr-st.od{color:var(--apl-ink);white-space:nowrap;letter-spacing:.04em}
.mr-teams{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}
.mr-t{display:flex;align-items:center;gap:9px}
.mr-lg{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--bg2);border:1px solid var(--line);
}
/* line-height FIJO, no 'normal'. Con 'normal' la altura la deciden los
   glifos, así que en español las filas con tilde («MI SELECCIÓN») medían
   64px y las sin tilde («LATINOS FC») 63px: filas hermanas desiguales por
   culpa de un acento. Medido, no supuesto. */
.mr-nm{
  font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond);
  font-size:15.5px;font-weight:500;line-height:20px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}
/* EN EL CELULAR el nombre puede ocupar DOS líneas (Pedro 2026-09-16, pasada móvil): con
   161 px por nombre, «INTERNACIONAL DE PALMIRA (MADERO)» y «… (TORO)» se cortaban en el
   mismo «INTERNACIONAL DE PALM…» y eran indistinguibles — lo que distingue va al final. */
@media(max-width:640px){
  .mr-nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:18px;font-size:14.5px}
  /* Sin recorte, la letra del equipo vuelve a ir pegada al nombre (ver `data-let` en chrome.js). */
  .mr-nm[data-let]::after{content:" " attr(data-let);font-weight:600}
  .mr-let{display:none}
}
.mr-sc{
  font-size:15.5px;font-weight:700;line-height:20px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:22px;text-align:right;flex:none;
}
.mr-t.lose{opacity:var(--dim)}
.mr-t.pend .mr-sc{color:var(--head);font-weight:500}
/* EN VIVO: el rojo va sobre el dígito, no en una etiqueta */
.mr-row.live .mr-sc{color:var(--live)}
.mr-vid{
  font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc-ink);border:1px solid var(--acc-b);border-radius:4px;
  padding:1px 7px;margin-left:8px;flex:none;align-self:center;
}

/* ── EL DESPLEGABLE DE CATEGORÍAS (helper slCatsCompacta de chrome.js) ────────
   Aparece en TODAS las pantallas cuando hay muchas categorías (decisión de
   Pedro 2026-08-31: «sí, también en el escritorio» — la misma cara en el
   computador y en el teléfono). Con pocas, los chips se quedan.
   Ver la nota larga en chrome.js. */
.sl-catsel{display:block;margin:22px 0 0;max-width:340px}
.sl-catsel label{
  display:block;font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--head);margin:0 0 7px;
}
.sl-catsel select{
  width:100%;box-sizing:border-box;min-height:46px;padding:12px 14px;
  border-radius:11px;border:1px solid var(--line2);background:var(--panel);
  color:var(--ink);font:500 14px var(--f-ui);
}
.sl-catsel select:focus{outline:2px solid var(--oro);outline-offset:1px}
.sl-cats-oculto{display:none !important}
/* En el teléfono ocupa el ancho completo; en escritorio se queda del tamaño de
   un control, no de una barra. */
@media(max-width:720px){
  .sl-catsel{max-width:none}
}

/* ── ESTILO DE LA FILA COMPARTIDA (helper slFilaPartido de chrome.js) ────────
   Vive aquí, no en una página: la usan Partidos y la pestaña Fechas de Tablas.
   Estaba en el <style> de partidos.html y por eso Fechas heredaba la fila pero
   no su comportamiento — los chips no bajaban de línea y el nombre quedaba en
   70px (medido). */
/* LA LETRA DEL EQUIPO NO SE TRUNCA NUNCA. «INTERNACIONAL DE PALMIRA A» y
     «…B» se recortaban los dos a «INTERNACIONAL DE PA…»: dos filas seguidas
     idénticas, y justo la letra que las distingue era la que se perdía. El
     nombre encoge; su letra final va aparte y siempre se lee. */
.mr-let{flex:none;font-family:var(--f-cond);font-weight:600;color:var(--ink);
    margin-left:-4px}
.mr-t.lose .mr-let{color:var(--head);font-weight:500}
/* Chips de la fila: la CANCHA (que solo traía Programación) y, en los
     resultados de búsqueda, la categoría a la que pertenece el partido. */
.pt-chips-fila{display:flex;gap:6px;align-items:center;flex:none}
.pt-chips-fila:empty{display:none}
.pt-chip-cat,.pt-chip-cancha{
    font:500 11px var(--f-cond);letter-spacing:1.4px;text-transform:uppercase;
    padding:3px 9px;border-radius:5px;border:1px solid var(--line2);
    color:var(--head);white-space:nowrap;
  }
.pt-chip-cat{border-color:var(--orob);color:var(--oro2)}
/* «pts 6–4»: la segunda lectura del marcador en las categorías que puntúan
   protocolo y actitud (misma familia que los chips del cuadro «pts 2-0»). */
.pt-chip-pts{
    font:600 11px var(--f-ui);letter-spacing:.2px;padding:3px 9px;border-radius:999px;
    border:1px solid var(--acc-b);background:var(--acc-chip);color:var(--acc-ink);white-space:nowrap;
  }
/* EN EL TELÉFONO los chips bajan a SU PROPIA LÍNEA. Puestos al lado (flex:none)
     se quedaban con el ancho y el NOMBRE —que es el contenido— se truncaba en
     «ACADEMIA S…»: el anti-patrón de la casa. Alineados con los equipos, no bajo
     el rail de la hora. */

  @media(max-width:720px){
  .mr-row{flex-wrap:wrap}
  /* El badge de VIDEO baja con los chips: suelto (flex:none) se quedaba con el
       ancho y dejaba el nombre en 79px — el mismo anti-patrón, cazado por el
       probador en la fila que sí trae video. */
  .pt-chips-fila{width:100%;margin-top:4px;padding-left:68px;flex-wrap:wrap}
  /* flex-basis 100% fuerza el salto de línea; max-width lo deja del tamaño de
       su texto, no una barra estirada. */
  .mr-vid{flex:0 0 100%;max-width:fit-content;margin:4px 0 0 68px;align-self:flex-start}
  }

/* ── LA FILA EN ESCRITORIO: UNA LÍNEA, UN EQUIPO A CADA LADO ─────────────────
   Pedro 2026-09-04: «esta visual funciona muy bien en el celular (resultados
   pequeños tipo ESPN) pero en el computador no; tal vez quede mejor poner un
   equipo a cada lado». En ≥860px la fila deja el apilado y se lee como un
   marcador (Flashscore/Promiedos): hora · estado | LOCAL escudo [6] [2] escudo
   VISITANTE | chips | video. El DOM es EL MISMO que en el teléfono (helper
   slFilaPartido): solo cambia el orden por CSS gracias a las clases .h/.a de cada
   lado. Va bajo .mr-lin para no tocar las filas propias de la ficha de equipo. */
@media(min-width:860px){
  /* El ancho de la columna de chips manda en DOS sitios: la fila y el título de la
     jornada, que tiene que quedar centrado sobre el MARCADOR y no sobre el
     contenedor (Juan 2026-09-07: «los resultados deberían estar alineados donde
     dice Fecha X»). Como la columna de chips corre el centro de la fila hacia la
     izquierda, el rótulo se corre lo mismo. Una variable, no el número repetido:
     el día que la columna cambie de ancho, el título la sigue solo (T10). */
  :root{--mr-chips:250px; --mr-rail:76px}
  /* El rótulo se centra sobre el MISMO tramo que ocupan los equipos en la fila:
     a la izquierda lo come el rail (F2 · Final) y a la derecha la columna de
     chips. Con esas dos medidas el centro coincide POR CONSTRUCCIÓN — nada de
     un número calibrado a ojo, que sería correcto hoy y falso el día que
     cualquiera de las dos cambie de ancho. */
  .pt-jornada-tit{padding-left:var(--mr-rail);padding-right:var(--mr-chips)}
  .mr-row.mr-lin{align-items:center;min-height:54px;padding:8px 12px}
  /* El rail crece para que «POR JUGAR» quepa en UNA línea (medido: en 56px partía). */
  .mr-row.mr-lin .mr-rail{width:var(--mr-rail)}
  .mr-row.mr-lin .mr-st{white-space:nowrap}
  .mr-row.mr-lin .mr-teams{flex-direction:row;align-items:center;gap:0}
  /* La letra del equipo pega al nombre: el gap del flex más su &nbsp; la dejaban
     flotando («MUSTANG FC  A»). */
  .mr-row.mr-lin .mr-let{margin-left:-7px}
  .mr-row.mr-lin .mr-t{flex:1 1 0;min-width:0;gap:10px}
  .mr-row.mr-lin .mr-t .mr-nm{flex:0 1 auto}
  .mr-row.mr-lin .mr-t.h{justify-content:flex-end;text-align:right}
  .mr-row.mr-lin .mr-t.h .mr-nm{order:1}
  .mr-row.mr-lin .mr-t.h .mr-let{order:2}
  .mr-row.mr-lin .mr-t.h .mr-lg{order:3}
  .mr-row.mr-lin .mr-t.h .mr-sc{order:4;margin-left:2px}
  .mr-row.mr-lin .mr-t.a .mr-sc{order:-1;margin-right:2px}
  .mr-row.mr-lin .mr-lg{width:24px;height:24px}
  /* EL MARCADOR: negrilla el que gana, apagado el que pierde — el MISMO trato que
     el teléfono (Juan 2026-09-07: «no es necesario colorear de negro el resultado…
     pierde limpieza y minimalismo»; Pedro: «en negrilla el que gana y opaco el que
     pierde, mucho mejor a lo que tenemos»). Antes el ganador llevaba una placa
     LLENA del color de marca, que en una lista de 84 partidos pesa demasiado.
     ⚠️ La segunda señal SIGUE puesta (T34 — Pedro es daltónico): el peso de la
     tipografía y la opacidad no son color, así que la fila se lee igual en escala
     de grises. Lo que se conserva de la placa es solo la caja de ancho FIJO, que es
     lo que mantiene el marcador en la misma columna en todas las filas. */
  .mr-row.mr-lin .mr-sc{
    min-width:32px;text-align:center;padding:3px 0;
    font-family:var(--f-cond);font-variation-settings:'wdth' var(--wd-cond);font-size:16px;
  }
  .mr-row.mr-lin .mr-t:not(.lose):not(.pend) .mr-sc{font-weight:700;color:var(--ink)}
  .mr-row.mr-lin .mr-t.lose{opacity:var(--dim)}
  .mr-row.mr-lin .mr-t.lose .mr-sc{font-weight:500}
  /* El MARCADOR queda en la misma columna en todas las filas (Pedro 2026-09-04: «no
     se ve centrado»). La causa: la caja de chips tenía ANCHO VARIABLE (categoría,
     cancha, puntos, video, o nada) y corría el centro fila por fila. Ahora es una
     columna FIJA, presente aunque venga vacía — como la grilla del sistema. */
  .mr-row.mr-lin .pt-chips-fila{flex:0 0 var(--mr-chips);justify-content:flex-end;flex-wrap:wrap;
    display:flex;row-gap:4px;margin:0;padding:0}
  .mr-row.mr-lin .mr-vid{margin:0}
}

/* ── ÚLTIMOS 5: cada resultado es PUERTA a su partido ──────────────────────
   Pedro 2026-09-07: «es cierto que lo muestra pero se ve muy feo y debería yo
   poder darle click y que me abra el partido; también se demora mucho en cargar».
   Lo que se demoraba era el `title` del navegador (~1 s, y se pinta como globo
   del sistema operativo). El aviso propio sale al instante y con la piel del
   sitio. En pantallas TÁCTILES no hay hover: ahí el toque abre el partido, que
   es justo lo que faltaba. */
.f5{display:block;position:relative;flex:0 0 auto}
.f5:hover{transform:scale(1.35)}
.f5:hover::after,.f5:focus-visible::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);white-space:nowrap;z-index:40;pointer-events:none;
  background:var(--ink);color:var(--bg);
  font:500 11.5px/1.4 var(--f-ui);letter-spacing:.02em;
  padding:5px 9px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.f5:focus-visible{outline:2px solid var(--oro2);outline-offset:2px}
@media (hover:none){ .f5:hover::after{content:none} .f5:hover{transform:none} }

/* ── CHIPS (selector de categoría en la portada, tipo de competencia en los récords) ── */
.chips{display:flex;gap:8px;overflow-x:auto;padding:26px 2px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* En el celular los chips se ENVUELVEN: una fila con scroll lateral esconde los de la
   derecha sin ninguna pista («Festival queda escondido», Pedro 2026-09-16). */
@media(max-width:640px){ .chips{flex-wrap:wrap;overflow-x:visible} }
.chip{flex:0 0 auto;font:500 13px var(--f-cond);letter-spacing:2px;padding:9px 16px;
  border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--mut);cursor:pointer;
  transition:transform .16s var(--ease),background .2s ease,color .2s ease,border-color .2s ease}
.chip:active{transform:scale(.96)}
.chip.act{background:var(--oro);border-color:var(--oro);color:var(--oro-ink)}
@media(hover:hover){.chip:not(.act):hover{border-color:var(--oro);color:var(--oro)}}

/* ── LA FILA DE UN RÉCORD (.sem-row) — portada «Lo que dejó la cancha» y Rankings ──
   Un empate real se dice: escudos apilados + «Compartido por N» y la lista al clic. */
.sem-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sem-row:last-child{border-bottom:0}
.sem-row img{height:24px;width:24px;object-fit:contain;flex:0 0 auto}
.sem-row .med{font-size:17px;flex:0 0 auto}
.sem-row .gr{flex:1;min-width:0}
.sem-row .gr b{display:block;font-size:13.5px;line-height:1.3}
.sem-row .gr small{color:var(--mut);font-size:11.5px}
.sem-row .val{font:700 16px var(--f-cond);color:var(--oro);white-space:nowrap}
/* En el celular un dato largo («14 goles en un partido») baja a su propia línea, a la
   derecha, en vez de estrujar el nombre a tres líneas (pasada móvil, Pedro 2026-09-16). */
@media(max-width:640px){
  .sem-row{flex-wrap:wrap}
  .sem-row .gr{flex:1 1 100%}   /* siempre en dos líneas: filas hermanas iguales */
  .sem-row .val{margin-left:auto}
}
.sem-emp summary{list-style:none;cursor:pointer}
.sem-emp summary::-webkit-details-marker{display:none}
.sem-emp summary .gr b::after{content:' ▾';color:var(--mut);font-weight:400}
.sem-emp[open] summary .gr b::after{content:' ▴'}
.sem-stack{display:flex;flex:0 0 auto}
.sem-stack img{margin-left:-9px;border-radius:50%;background:var(--panel);border:1px solid var(--line)}
.sem-stack img:first-child{margin-left:0}
.sem-stack .mas{width:24px;height:24px;margin-left:-9px;border-radius:50%;background:var(--bg2);
  border:1px solid var(--line);font:600 10px var(--f-ui);display:flex;align-items:center;justify-content:center;color:var(--mut)}
.sem-emp-list{padding:2px 0 8px 34px;border-bottom:1px solid var(--line)}
.sem-emp-list div{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
.sem-emp-list img{height:18px;width:18px;object-fit:contain}
.sem-emp-list small{color:var(--mut)}

/* ── EL DETALLE DEL PARTIDO (.pd-*) — calcado del mockup v3, tipo ESPN ────────
   Pedro 2026-09-04. UN encabezado: escudo · marcador · escudo; nombre, formación y
   puntos bajo cada escudo; los eventos de cada lado debajo, en dos columnas con
   divisor; fecha · hora · cancha · sede al pie. Las tarjetas de abajo (puntos,
   formación, alineaciones, terna, tabla-ventana, goleadores, cómo llegaban) usan
   la misma tarjeta .pd-card. Mismo DOM en teléfono y escritorio. */
.pd-wrap{max-width:1180px;margin:0 auto;padding:30px 26px 80px}
.pd-mig{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.pd-mig .bc{font:400 14px var(--f-cond);letter-spacing:3px;color:var(--oro)}
.pd-back{margin-left:auto;font:400 14px var(--f-cond);letter-spacing:2px;background:transparent;border:0;color:var(--oro);cursor:pointer;padding:0;min-height:44px}
.pd-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-top:16px}
.pd-card h4{font:400 18px var(--f-cond);letter-spacing:2.5px;color:var(--mut);margin:0 0 12px}
.pd-card h4 b{color:var(--oro2)}
.pd-vacio{color:var(--head);font-size:13px;line-height:1.6;padding:2px 0}
.pd-mas{display:inline-flex;align-items:center;min-height:40px;font:400 12px var(--f-cond);letter-spacing:1.5px;color:var(--acc-ink);margin-top:6px}
.pd-sep{font:400 12px var(--f-cond);letter-spacing:2px;color:var(--head);margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
/* hero */
.pd-hero{background:var(--panel);border:1px solid var(--acc-b);border-radius:16px;padding:22px 24px 14px}
.pd-top{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.pd-eq{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.pd-lg{width:74px;height:82px;flex:0 0 auto;display:block;background-size:contain;background-position:center;background-repeat:no-repeat}
.pd-nm{font:700 22px/1.1 var(--f-cond);letter-spacing:.5px;color:var(--ink);margin-top:6px;text-decoration:none}
.pd-fq{font:600 13px var(--f-ui);color:var(--mut);letter-spacing:.5px;min-height:16px}
.pd-pts{display:inline-flex;margin-top:4px;font:700 12.5px var(--f-ui);color:var(--brand);background:var(--acc-chip);border:1px solid var(--acc-b);border-radius:999px;padding:3px 11px}
.pd-pts.lose{background:var(--bg2);border-color:var(--line2);color:var(--mut)}
.pd-mid{text-align:center;min-width:170px;padding-top:16px}
.pd-sc{font:700 60px/1 var(--f-cond);letter-spacing:2px;display:flex;justify-content:center;gap:14px;align-items:center;font-variant-numeric:tabular-nums}
.pd-sc b{font-weight:700;color:var(--mut)}
.pd-sc b.w{color:var(--brand)}
.pd-sc .l{color:var(--line3);font-size:34px}
.pd-sc .vs{font-size:34px;color:var(--head);letter-spacing:4px}
.pd-est{font:400 12px var(--f-cond);letter-spacing:3px;color:var(--acc-ink);margin-top:8px}
/* eventos por lado: la mitad izquierda es del local, la derecha del visitante;
   los íconos se pegan al divisor (así lo lee ESPN) */
.pd-ev{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;display:grid;grid-template-columns:1fr 1fr;position:relative}
/* `hidden` tiene que ganarle al display:grid — si no, el bloque vacío deja dos
   rayas con aire en medio en un partido sin eventos (cazado en el por-jugar). */
.pd-ev[hidden]{display:none}
.pd-ev:before{content:'';position:absolute;left:50%;top:12px;bottom:0;width:1px;background:var(--line2)}
.pd-ev .col{display:flex;flex-direction:column;gap:7px;padding:0 16px;min-width:0}
.pd-ev .col.h{align-items:flex-end;text-align:right}
.pd-ev .col.a{align-items:flex-start;text-align:left}
.pd-ev .r{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);min-width:0}
.pd-ev .t b{color:var(--acc-ink)} .pd-ev .t.og{font-style:italic;color:var(--mut)}
.pd-ev .t small{color:var(--head)}
.pd-ev .ic{flex:0 0 auto;font-size:14px;line-height:1;display:inline-flex;align-items:center}
/* la línea de tiempo: una columna, el minuto al centro (sin el divisor de las dos columnas) */
.pd-ev.tl{display:block}
.pd-ev.tl:before{display:none}
.pd-tl .tl-row{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;gap:8px;padding:4px 0;font-size:13.5px;color:var(--ink)}
.pd-tl .tl-h{text-align:right;min-width:0} .pd-tl .tl-a{text-align:left;min-width:0}
.pd-tl .tl-min{text-align:center;font:600 12px var(--f-cond);color:var(--head);border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
.pd-tl .og{color:var(--mut)}
.pd-tl .tl-sin{margin-top:8px;font-size:12.5px;color:var(--mut)} .pd-tl .tl-sin b{color:var(--head);font-weight:600}
.pd-tj{display:inline-block;width:11px;height:14px;border-radius:2px}
.pd-tj.y{background:#F5C518} .pd-tj.r{background:#D93025}
.pd-meta{text-align:center;font:400 13px var(--f-cond);letter-spacing:2px;color:var(--head);margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.pd-meta b{color:var(--ink);font-weight:600}
/* puntos */
.pd-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.pd-tbl th{font:400 12px var(--f-cond);letter-spacing:2px;color:var(--head);text-align:center;padding:6px 4px;border-bottom:1px solid var(--line)}
.pd-tbl th:first-child{text-align:left}
.pd-tbl td{text-align:center;padding:9px 4px;border-bottom:1px solid var(--line)}
.pd-tbl td:first-child{text-align:left;font-weight:600}
.pd-tbl .tot{font-weight:700;color:var(--brand);background:var(--acc-bg);border-radius:6px}
.pd-tbl .shrt{display:none}
.pd-nota-res{margin-top:10px;font-size:13px;color:var(--brand);background:var(--acc-bg);border:1px solid var(--acc-b);border-radius:8px;padding:8px 12px}
.sl-nota-pts{font-size:13px;color:var(--mut);line-height:1.65;margin:12px 2px 0;max-width:70ch}
/* cancha */
.pd-esq{display:flex;justify-content:space-between;gap:12px;font:600 14px var(--f-ui);margin-bottom:10px}
.pd-esq b{font:700 15px var(--f-cond);letter-spacing:1px;color:var(--brand);background:var(--acc-chip);border:1px solid var(--acc-b);border-radius:6px;padding:1px 9px;white-space:nowrap}
.pd-cancha{display:flex;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 60px,rgba(0,0,0,.04) 60px 120px),linear-gradient(180deg,#1E5A31,#25683B 50%,#1E5A31);border-radius:12px;min-height:340px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.12)}
.pd-cancha:before,.pd-cancha:after{content:'';position:absolute;top:50%;transform:translateY(-50%);width:52px;height:150px;border:1.5px solid rgba(255,255,255,.4)}
.pd-cancha:before{left:0;border-left:0} .pd-cancha:after{right:0;border-right:0}
.pd-cancha .c-linea{position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:rgba(255,255,255,.4)}
.pd-cancha .c-circ{position:absolute;left:50%;top:50%;width:92px;height:92px;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;transform:translate(-50%,-50%)}
.pd-mitad{flex:1;display:flex;justify-content:space-around;padding:16px 8px;position:relative;z-index:1;min-width:0}
.pd-lin{display:flex;flex-direction:column;justify-content:space-around;gap:16px;min-width:0}
.pd-pl{text-align:center}
.pd-pl .d{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#14300F;font:700 13px var(--f-ui);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pd-pl.v .d{background:#0F1E17;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.pd-pl .n{font:600 10px var(--f-ui);letter-spacing:.5px;color:#EAF3E6;margin-top:4px;text-transform:uppercase;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* alineaciones */
.pd-two{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.pd-al-h{font-size:12px;color:var(--head)}
.pd-sub{font:400 11px var(--f-cond);letter-spacing:2px;color:var(--oro);margin:10px 0 4px}
.pd-al{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:13px;min-width:0}
.pd-al .dor{font:400 13px var(--f-cond);color:var(--head);min-width:20px;flex:0 0 auto}
.pd-al .n{min-width:0}
.pd-al .cap{color:var(--oro2)} .pd-al .mk{font-size:11px}
.pd-al .pos{font:400 10px var(--f-cond);letter-spacing:1px;color:var(--head);border:1px solid var(--line);padding:1px 6px;border-radius:4px}
.pd-al .ph,.pd-of .ph{width:26px;height:26px;border-radius:50%;flex:0 0 auto;object-fit:cover;border:1px solid var(--line2);background:var(--bg2)}
.pd-of .ph{width:34px;height:34px}
.ph.ini{display:inline-grid;place-items:center;font:700 10px var(--f-ui);color:var(--mut);text-transform:uppercase}
/* `hidden` tiene que ganarle al inline-grid — si no, las iniciales se pintan AL LADO de
   cada foto que sí cargó (cazado por el probador de staging, 2026-09-05; hermana de .pd-ev). */
.ph.ini[hidden]{display:none}
.pd-camb{font-size:12.5px;padding:4px 0;color:var(--mut)}
.pd-camb small{color:var(--head)} .pd-camb .in{color:var(--acc-ink);font-weight:600} .pd-camb .out{color:#B65C4E;font-weight:600}
.pd-terna{display:flex;flex-wrap:wrap;gap:10px 26px}
.pd-of{display:flex;align-items:center;gap:10px;font-size:13.5px}
/* tabla-ventana · goleadores · cómo llegaban */
.pd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start}
.pd-grid2 .pd-card{margin-top:0}
.pd-col{display:flex;flex-direction:column;gap:16px}
.pd-trow{display:grid;grid-template-columns:26px 26px 1fr 34px 40px;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:13.5px;border-radius:8px;color:inherit;text-decoration:none;border:1px solid transparent;border-bottom-color:var(--line)}
.pd-trow.me{background:var(--acc-bg);border-color:var(--acc-b);font-weight:700}
.pd-trow .pos{font:400 14px var(--f-cond);color:var(--head)}
.pd-trow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-trow .p2{text-align:center;font:700 14px var(--f-ui)}
.pd-trow .pj{text-align:center;font:400 13px var(--f-cond);color:var(--head)}
.pd-gol{display:flex;align-items:center;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px}
.pd-gol .n{width:30px;height:30px;border-radius:50%;background:var(--chip);border:1px solid var(--orob);display:grid;place-items:center;font:400 14px var(--f-cond);color:var(--oro2);flex:0 0 auto}
.pd-gol small{display:block;font-size:10.5px;color:var(--head);letter-spacing:1px;text-transform:uppercase}
.pd-racha{display:flex;align-items:center;gap:12px;font-size:13.5px;padding:7px 0}
.pd-racha b{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-racha .chips{display:flex;gap:6px;flex:0 0 auto}
.pd-rc{width:30px;height:30px;border-radius:50%;border:0;display:grid;place-items:center;font:700 12px var(--f-ui);color:#fff;cursor:pointer;padding:0}
.pd-rc.G{background:var(--acc)} .pd-rc.E{background:#B9A15B} .pd-rc.P{background:#B65C4E}
.pd-rc-vacio{font-size:12px;color:var(--head)}
.pd-h2h{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 2px;font:inherit;font-size:13px;color:inherit;cursor:pointer}
.pd-h2h .f{font:400 12px var(--f-cond);color:var(--head);letter-spacing:1px;min-width:26px}
.pd-pie{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.pd-video{display:inline-flex;align-items:center;gap:9px;min-height:44px;font:600 14px var(--f-ui);color:var(--acc-ink)}
/* ── EL PARTIDO GRABADO, DENTRO DE LA PÁGINA (Pedro 2026-09-10) ──────────────
   Se pinta la PORTADA de YouTube con su botón, y el reproductor real solo entra
   al hacer clic: un <iframe> de YouTube son ~900 KB y su cargador arranca en
   cuanto existe, así que ponerlo de una lo paga TODO el que abre un detalle,
   vea o no el video. Las vistas del reproductor incrustado le cuentan igual al
   canal, así que quedarse aquí no le quita nada al contador. */
.pd-vid{position:relative;margin-top:18px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line2);background:#000;aspect-ratio:16/9;width:100%}
.pd-vid img,.pd-vid iframe{width:100%;height:100%;display:block;border:0}
.pd-vid img{object-fit:cover}
.pd-vid button{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;padding:0}
.pd-vid .pl{width:74px;height:52px;border-radius:14px;background:rgba(0,0,0,.72);
  display:grid;place-items:center;transition:background .18s ease}
.pd-vid .pl::after{content:'';border-left:20px solid #fff;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px}
@media(hover:hover){.pd-vid button:hover .pl{background:#FF0000}}
.pd-vid button:focus-visible{outline:3px solid var(--oro);outline-offset:-3px}
.pd-vid .rot{position:absolute;left:12px;top:12px;font:600 10.5px var(--f-cond);
  letter-spacing:.16em;background:rgba(0,0,0,.72);color:#fff;padding:5px 10px;border-radius:5px}
.pd-video .play{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--acc-bg);border:1px solid var(--acc-b);align-items:center;justify-content:center;font-size:11px}
.pd-pie-txt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.6}
.pd-pie-txt a{color:var(--acc-ink);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
@media(max-width:760px){
  .pd-wrap{padding:20px 14px 60px}
  .pd-mig .bc{font-size:12px;letter-spacing:2px}
  .pd-card{padding:16px 14px}
  .pd-card h4{font-size:16px;letter-spacing:1.5px}
  .pd-hero{padding:14px 8px 10px}
  .pd-top{gap:6px}
  .pd-lg{width:52px;height:58px}
  .pd-nm{font-size:14px;margin-top:4px}
  .pd-fq{font-size:11.5px}
  .pd-pts{font-size:10.5px;padding:2px 8px}
  .pd-mid{min-width:0;padding-top:10px}
  .pd-sc{font-size:40px;gap:10px}
  .pd-sc .l,.pd-sc .vs{font-size:24px}
  .pd-ev{margin-top:12px;padding-top:10px}
  .pd-ev .col{padding:0 8px;gap:6px}
  .pd-ev .r{font-size:11.5px;gap:6px}
  .pd-meta{font-size:11px;letter-spacing:1.5px}
  .pd-tbl{font-size:12.5px}
  .pd-tbl .full{display:none} .pd-tbl .shrt{display:inline}
  .pd-esq{font-size:12px}
  .pd-esq b{white-space:nowrap}
  .pd-mitad{padding:8px 0}
  .pd-lin{gap:5px}
  .pd-pl .d{width:24px;height:24px;font-size:10px}
  .pd-pl .n{max-width:34px;font-size:7.5px}
  .pd-cancha{min-height:230px}
  .pd-grid2,.pd-two{grid-template-columns:1fr}
}

/* Los elementos que solo existen en ciertos modos de WhatsApp (data-wa-solo) se
   apagan con ESTA clase, no con style.display: escribir el display desde el JS
   borraba el que el elemento traía suyo — así el botón de inscripción perdía su
   inline-flex y se montaba sobre el párrafo (Pedro 2026-09-01). */
.sl-wa-off{display:none !important}
/* Puente hasta el panel de Contenido (2026-08-29): lo que solo es cierto en
   Superbowl (ambulancia, Veo Cam) se apaga cuando el visitante mira Calimaderas.
   El atributo lo pone applyIdent (torneos.js) y desaparece al promover el panel. */
html[data-sb-off] [data-solo-superbowl]{display:none !important}

/* INSCRIPCIONES cerradas (Pedro 2026-09-03): el estado viene de /paginas por torneo
   y torneos.js lo pone en <body data-insc>. Lo marcado data-insc-abiertas (botones de
   inscribir del hero, el nav y el cajón) desaparece; lo data-insc-cerradas aparece. */
body[data-insc="cerradas"] [data-insc-abiertas]{display:none!important}
body:not([data-insc="cerradas"]) [data-insc-cerradas]{display:none!important}

/* LA CARA DEL DEPORTISTA (slCara, chrome.js): foto en círculo; sin foto —o si no carga—
   las iniciales en el mismo círculo, para que las filas no bailen (2026-09-22). */
.sl-cara{position:relative;flex:none;display:inline-grid;place-items:center;overflow:hidden;
  width:var(--sz,40px);height:var(--sz,40px);border-radius:50%;background:var(--chip);
  border:1px solid var(--line2);vertical-align:middle}
.sl-cara::before{content:attr(data-ini);font:600 calc(var(--sz,40px)*.36) var(--f-ui);
  letter-spacing:.5px;color:var(--head)}
.sl-cara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.sl-cara.sin img{display:none}

/* LA TARJETA DE RED CON FOTO (portada «Los protagonistas del sábado» y Multimedia).
   Se mudó de index.html el 2026-09-22 para que las dos páginas sean la misma pieza. */
.socc{position:relative;height:290px;border-radius:14px;overflow:hidden;display:block;color:#fff}
.socc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
@media(hover:hover){.socc:hover img{transform:scale(calc(var(--fz,1)*1.05)) translate(var(--ftx,0%),var(--fty,0%))}}
.socc .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,7,.1) 30%,rgba(8,9,7,.85))}
.socc .tx{position:absolute;left:0;right:0;bottom:0;padding:20px 22px}
.socc .k{font:500 10.5px var(--f-cond);letter-spacing:3px;color:var(--oro2-hero)}
.socc .k svg{width:13px;height:13px;vertical-align:-2.5px;margin-right:6px}
.socc .t{font:600 22px var(--f-cond);letter-spacing:1px;margin-top:5px;text-transform:uppercase}
.socc .d{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:4px;line-height:1.45}