/* estadigol-componentes.css — componentes compartidos: navbar, botones, footer, skeletons */

/* Barra de acento superior */
.top-accent-bar{
  height:3px;width:100%;
  background:linear-gradient(90deg,#0a3d1f,var(--accent),var(--accent-bright),var(--accent),#0a3d1f);
  background-size:200% 100%;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{0%{background-position:0% 0;}100%{background-position:200% 0;}}

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

:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:4px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-bright);
}
.eyebrow::before{content:'';width:3px;height:13px;background:var(--accent-bright);border-radius:2px;}

/* Navbar */
.navbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:rgba(8,8,8,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-subtle);
}
.navbar-inner{width:100%;max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;}
@media(min-width:1024px){ .navbar-inner{padding:4px 8px;} }

.navbar .eg-logo{font-size:24px;}
@media(min-width:1024px){.navbar .eg-logo{font-size:28px;}}
@media(max-width:480px){.navbar .eg-logo{font-size:21px;}}

/* Botones / CTA */
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 14px;border-radius:var(--radius-pill);font-weight:800;font-size:13px;
  transition:all .22s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cta-btn svg{width:17px;height:17px;flex-shrink:0;}
.cta-btn.featured{background:var(--accent);color:var(--accent-ink);}
.cta-btn.featured:hover{background:var(--accent-bright);box-shadow:0 0 0 6px var(--accent-glow);transform:translateY(-2px);}
.cta-btn.outline{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong);}
.cta-btn.outline:hover{border-color:var(--accent-bright);color:var(--accent-bright);box-shadow:0 0 0 4px var(--accent-dim);transform:translateY(-2px);}
.cta-btn.whatsapp{background:var(--accent);color:var(--accent-ink);grid-column:span 2;}
.cta-btn.whatsapp:hover{background:var(--accent-bright);box-shadow:0 0 0 6px var(--accent-glow);transform:translateY(-2px);}
@media(min-width:480px){.cta-btn.whatsapp{grid-column:span 1;}}

.pick-btn{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  background:var(--accent-dim);color:var(--accent-bright);
  border:1px solid var(--accent-glow);
  padding:8px 10px;border-radius:var(--radius-pill);
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  transition:all .2s var(--ease);
}
.pick-btn:hover{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px var(--accent-glow);}
.pick-btn svg{width:13px;height:13px;flex-shrink:0;}
.pick-btn span{display:none;}
@media(min-width:400px){.pick-btn span{display:inline;}}
/* La de la tarjeta de la destacada tiene sitio: el texto se ve también en el
   teléfono, y mide 44 px como el «Guardar» de al lado (ronda "guardar picks";
   solo con el icono no se reconocía como botón). Las compactas de las filas
   de la jornada siguen solo con el icono por debajo de 400 px. */
.pick-btn--full{width:100%;justify-content:center;padding:10px;font-size:12px;min-height:var(--tap-min);}
.pick-btn--full span{display:inline;}
@media(min-width:1024px){.pick-btn--full{padding:13px;font-size:12.5px;}}

/* Skeletons de carga */
.skel{
  display:inline-block;
  background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:6px;
  vertical-align:middle;
}
.skel-circle{width:24px;height:24px;border-radius:50%;flex-shrink:0;}

/* ============ CABECERA COMUN (ronda 4.3) ============
   La pinta menu-comun.js dentro de <header class="eg-menu">. Sin JavaScript
   queda el <noscript> del marcador, con el logo.
   La altura minima reserva el hueco antes de pintar, para que la pagina no
   salte: dos filas en el telefono (logo y cuenta; pestañas) y una desde
   720 px. Cortes y ancho de escritorio.md: telefono, y tableta y escritorio
   desde 720 px, con el ancho de pagina de 1080 px.
   El verde solo marca la pestaña activa, como en la maqueta; los enlaces van
   en blanco o gris (manual de marca, seccion 3). Premium, como enlace neutro
   hasta la ronda 10. */
.eg-menu{
  position:sticky;top:0;z-index:50;
  min-height:calc(var(--tap-min) * 2 + var(--sp-4) + 1px);
  background:var(--bg-elevated);
  border-bottom:1px solid var(--border-subtle);
}
.eg-menu a{text-decoration:none;}
.eg-menu-interior{
  position:relative;
  max-width:1080px;margin:0 auto;padding:0 var(--sp-4);
  min-height:calc(var(--tap-min) * 2 + var(--sp-4));
  display:grid;align-items:center;align-content:center;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"logo cuenta" "pestanas pestanas";
}
.eg-menu .eg-logo{grid-area:logo;justify-self:start;min-height:var(--tap-min);font-size:var(--fs-xl);}
.eg-menu-cuenta{
  grid-area:cuenta;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) 0;
}
.eg-menu-premium{
  display:flex;align-items:center;min-height:var(--tap-min);padding:0 var(--sp-2);
  font-size:var(--fs-sm);font-weight:700;color:var(--text-primary);
}
.eg-menu-premium:hover{text-decoration:underline;}
.eg-menu-usuario{
  width:var(--tap-min);height:var(--tap-min);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  color:var(--text-primary);
}
.eg-menu-usuario:hover{border-color:var(--border-strong);}
.eg-menu-usuario svg{width:20px;height:20px;}
.eg-menu-pestanas{grid-area:pestanas;display:flex;}
.eg-menu-pestana{
  flex:1 1 0;min-height:var(--tap-min);
  display:flex;align-items:center;justify-content:center;gap:var(--sp-1);
  margin:0;padding:0 var(--sp-1);
  background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  font:inherit;font-size:var(--fs-sm);font-weight:700;
  color:var(--text-secondary);cursor:pointer;
}
.eg-menu-pestana:hover{color:var(--text-primary);}
.eg-menu-pestana.es-activa,
.eg-menu-pestana[aria-expanded="true"]{color:var(--text-primary);border-bottom-color:var(--accent-bright);}
.eg-menu-flecha{width:14px;height:14px;}
.eg-menu-pestana[aria-expanded="true"] .eg-menu-flecha{transform:rotate(180deg);}
/* El panel de Ligas: en el telefono, a todo el ancho bajo la cabecera. */
.eg-menu-panel{
  position:absolute;top:100%;left:0;right:0;z-index:1;
  display:grid;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  max-height:calc(100vh - var(--tap-min) * 3);overflow-y:auto;
  background:var(--bg-elevated);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-strong);
}
.eg-menu-panel[hidden],.eg-menu-velo[hidden]{display:none;}
.eg-menu-panel-titulo{
  margin:0;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.eg-menu-ligas{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);}
.eg-menu-ligas a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  min-height:var(--tap-min);padding:0 var(--sp-3);
  border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--border-subtle);
  font-size:var(--fs-sm);font-weight:700;color:var(--text-primary);
}
.eg-menu-ligas a:hover{background:var(--bg-card-hover);border-color:var(--border-strong);}
.eg-menu-pais{font-size:var(--fs-micro);font-weight:700;color:var(--text-tertiary);}
.eg-menu-todos{
  justify-self:start;
  display:flex;align-items:center;min-height:var(--tap-min);
  font-size:var(--fs-sm);font-weight:700;color:var(--text-primary);
}
.eg-menu-todos:hover{text-decoration:underline;}
/* El velo oscurece la pagina mientras el panel esta abierto. */
.eg-menu-velo{
  position:absolute;top:100%;left:0;right:0;height:100vh;z-index:-1;
  background:var(--bg-void);opacity:.65;
}
/* Esconderse al bajar (solo en el telefono; lo decide menu-comun.js). El
   deslizamiento, solo si el sistema no pide reducir el movimiento: con esa
   preferencia, la cabecera aparece y desaparece sin animacion. */
.eg-menu[data-oculto]{transform:translateY(-100%);}
@media(prefers-reduced-motion:no-preference){
  .eg-menu{transition:transform .25s var(--ease);}
  .eg-menu-flecha{transition:transform .2s var(--ease);}
}
@media(min-width:720px){
  .eg-menu{min-height:calc(var(--tap-min) + var(--sp-5) + 1px);}
  .eg-menu-interior{
    min-height:calc(var(--tap-min) + var(--sp-5));
    padding:0 var(--sp-6);column-gap:var(--sp-6);
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"logo pestanas cuenta";
  }
  .eg-menu .eg-logo{font-size:var(--fs-xxl);}
  .eg-menu-cuenta{padding:0;}
  .eg-menu-pestanas{position:relative;gap:var(--sp-5);}
  .eg-menu-pestana{
    flex:0 0 auto;min-height:calc(var(--tap-min) + var(--sp-5));
    font-size:var(--fs-base);
  }
  .eg-menu-panel{
    right:auto;width:520px;margin-top:var(--sp-1);
    max-height:none;overflow-y:visible;
    border:1px solid var(--border-strong);border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
  }
  .eg-menu-ligas{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* Con poca altura (un telefono en horizontal) nada se queda fijo
   (escritorio.md, regla 6). */
@media(max-height:499px){
  .eg-menu{position:relative;}
}

/* ============ PIE COMUN (ronda 4) ============
   Lo pinta menu-comun.js dentro de <footer class="eg-pie">. Sin JavaScript
   queda el <noscript> del marcador, que usa .eg-pie-interior, .eg-pie-base,
   .eg-pie-legales y .eg-pie-aviso: por eso esas cuatro no dependen de nada
   que pinte el script.
   Enlaces en blanco o gris, nunca en verde: el verde es del Modelo EIG
   (manual de marca, seccion 3).
   Anchos y cortes de escritorio.md: telefono, tableta desde 720 px y
   escritorio desde 1024 px, con el ancho de pagina de 1080 px. */
.eg-pie{
  margin-top:var(--sp-8);
  padding:var(--sp-7) var(--sp-4) var(--sp-8);
  background:var(--bg-elevated);
  border-top:1px solid var(--border-subtle);
}
.eg-pie a{text-decoration:none;}
.eg-pie a:hover{color:var(--text-primary);text-decoration:underline;}
.eg-pie-interior{
  max-width:1080px;margin:0 auto;
  display:grid;gap:var(--sp-6);
}
.eg-pie-lema{
  margin:var(--sp-2) 0 0;max-width:340px;
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-secondary);
}
.eg-pie-titulo{
  margin:0 0 var(--sp-1);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.eg-pie-columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}
.eg-pie-lista{list-style:none;margin:0;padding:0;}
.eg-pie-lista a{
  display:flex;align-items:center;min-height:var(--tap-min);
  font-size:var(--fs-sm);font-weight:700;color:var(--text-primary);
}
.eg-pie-redes-lista{
  list-style:none;margin:var(--sp-1) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,var(--tap-min));gap:var(--sp-2);
}
.eg-pie-redes-lista a{
  width:var(--tap-min);height:var(--tap-min);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  color:var(--text-secondary);
}
.eg-pie-redes-lista a:hover{color:var(--text-primary);border-color:var(--border-strong);}
.eg-pie-redes-lista svg{width:18px;height:18px;}
.eg-pie-base{display:grid;gap:var(--sp-2);}
.eg-pie-legales{display:flex;flex-wrap:wrap;column-gap:var(--sp-4);}
.eg-pie-legales a{
  display:flex;align-items:center;min-height:var(--tap-min);
  font-size:var(--fs-xs);color:var(--text-secondary);
}
.eg-pie-aviso,.eg-pie-copy{margin:0;font-size:var(--fs-xs);line-height:1.6;color:var(--text-tertiary);}
.eg-pie-aviso{max-width:720px;}
@media(min-width:720px){
  .eg-pie{padding:var(--sp-8) var(--sp-6);}
  .eg-pie-interior{
    grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-8);
    grid-template-areas:"marca marca" "columnas redes" "base base";
  }
  .eg-pie-marca{grid-area:marca;}
  .eg-pie-columnas{grid-area:columnas;}
  .eg-pie-redes{grid-area:redes;}
  .eg-pie-base{grid-area:base;padding-top:var(--sp-4);border-top:1px solid var(--border-subtle);}
}
@media(min-width:1024px){
  .eg-pie-interior{
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;
    grid-template-areas:"marca columnas redes" "base base base";
  }
}

/* ============ LEAGUE PILLS (consolidado desde index.html y resultados.html) ============ */
.league-nav{padding:16px 0 4px;}
.league-pills-wrap{position:relative;}
.league-pills{
  display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.league-pills::-webkit-scrollbar{display:none;}
.pill{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:700;
  border:1px solid var(--border-subtle);color:var(--text-secondary);background:var(--bg-card);
  transition:all .2s var(--ease);white-space:nowrap;
}
.pill.active{
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-dim);
}
.pill.disabled{
  opacity:.35;cursor:not-allowed;pointer-events:none;
  font-weight:500;background:transparent;
}
.soon-tag{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,0.1);color:var(--text-secondary);
  padding:2.5px 6px;border-radius:6px;
}
.pill.active .soon-tag{
  background:rgba(8,21,13,0.25);color:var(--accent-ink);
}
.league-scroll-arrow{
  display:none;
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  color:var(--text-secondary);font-size:18px;
  align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  transition:all .2s var(--ease);
}
.league-scroll-arrow.visible{display:flex;}
.league-scroll-arrow:hover:not(:disabled){background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.league-scroll-arrow:disabled{opacity:.3;cursor:not-allowed;}
.league-scroll-left{left:4px;}
.league-scroll-right{right:4px;}

/* Boton de guardar pick (portada y partido: el parlay, el 1X2 y la doble
   oportunidad; el marcado y el manejador, en guardar-pick.js). Desde la ronda
   "guardar picks" (variante A de la maqueta del 16-oct) dice «Guardar» con el
   marcador delante, en contorno y con 44 px de alto como minimo: un icono
   solo no se reconocia como boton. Guardado dice «Guardado», con el texto, el
   icono relleno y el borde en verde, para distinguirlo a simple vista. Sin
   sesion (html[data-sesion="no"]) lleva un candado pequeño detras del texto,
   y al pulsarlo sale .pick-guardar-aviso debajo de la fila del boton. */
.pick-guardar-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:var(--tap-min);padding:6px 16px;flex-shrink:0;border-radius:var(--radius-pill);
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:700;line-height:1.2;
  cursor:pointer;
}
.pick-guardar-btn:hover{border-color:var(--text-tertiary);}
.pick-guardar-btn:disabled{opacity:.6;cursor:default;}
.pick-guardar-linea{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.pick-guardar-icono{width:16px;height:16px;flex-shrink:0;}
.pick-guardar-detalle{font-size:10.5px;font-weight:600;color:var(--text-tertiary);white-space:nowrap;}
.pick-guardar-btn.guardado{background:transparent;color:var(--accent-bright);border-color:var(--accent-border);}
.pick-guardar-btn.guardado .pick-guardar-icono{fill:currentColor;}
.pick-guardar-btn.guardado .pick-guardar-detalle{color:var(--accent);}
/* Las del parlay y las de las casillas llenan su hueco. */
.pick-guardar-btn--pata,.pick-guardar-btn--casilla{width:100%;}
/* En una casilla estrecha, el marcador va encima del texto. */
.pick-guardar-btn--casilla{margin-top:10px;padding:6px 4px;border-radius:var(--radius-md);}
.pick-guardar-btn--casilla .pick-guardar-linea{flex-direction:column;gap:2px;}
.pick-guardar-candado{display:none;width:13px;height:13px;flex-shrink:0;color:var(--text-secondary);}
html[data-sesion="no"] .pick-guardar-candado{display:block;}
.pick-guardar-aviso{
  margin-top:var(--sp-2);
  font-size:var(--fs-sm);line-height:1.45;color:var(--text-primary);
}
.pick-guardar-aviso a{color:var(--accent);font-weight:700;}

.mp-premium-cta{
  text-align:center;background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:24px 16px;
}
.mp-premium-cta p{font-size:13px;color:var(--text-secondary);margin-bottom:14px;}
.mp-premium-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:var(--radius-pill);font-weight:800;font-size:13px;
  background:var(--accent);color:var(--accent-ink);transition:all .22s var(--ease);
}
.mp-premium-btn:hover{background:var(--accent-bright);box-shadow:0 0 0 6px var(--accent-glow);}

/* Etiqueta de liga. Vivia solo en el <style> de index.html, pero
   resultados.html la necesita para el chip por tarjeta cuando esta
   seleccionado "Todas las ligas". Se mueve aqui, que es la hoja que
   ambas paginas cargan, en vez de duplicar la regla. */
.pick-league-tag{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,0.1);color:var(--text-secondary);
  padding:2.5px 6px;border-radius:6px;
}

/* Banner de consentimiento. Lo inyecta consentimiento.js; el CSS vive aqui
   porque lo comparten las 11 paginas estaticas y las 151 generadas. */
.consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:var(--bg-elevated);
  border-top:1px solid var(--border-strong);
  box-shadow:0 -10px 30px rgba(0,0,0,0.45);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
}
.consent-inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.consent-texto{
  flex:1 1 320px;min-width:0;
  font-size:13px;line-height:1.5;color:var(--text-secondary);
}
.consent-texto a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:2px;}
.consent-acciones{display:flex;gap:10px;flex:0 0 auto;}
.consent-btn{
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  padding:10px 20px;min-height:44px;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);background:transparent;color:var(--text-primary);
  transition:all .2s var(--ease);
}
.consent-btn:hover{background:var(--bg-card-hover);border-color:var(--text-tertiary);}
.consent-btn.aceptar{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.consent-btn.aceptar:hover{background:var(--accent-bright);box-shadow:0 0 0 5px var(--accent-glow);}
.consent-btn:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}

@media (max-width:560px){
  .consent-inner{gap:12px;}
  .consent-acciones{width:100%;}
  .consent-btn{flex:1 1 0;padding:10px 12px;}
}

/* ============================================================
   PIEZAS DE DATOS (ronda 2 del sistema de diseño, 23-sep)

   Cinco componentes con prefijo eg-. Ninguna pagina los usa todavia: la
   adopcion va despues, de una pagina a la vez, para que cada cambio visible
   se pueda revisar por separado.

   Regla 2.4 del sistema: un valor literal de tamaño o espaciado es un error,
   salvo excepcion comentada. Aqui hay tres tipos de excepcion, y cada una
   dice por que en su sitio:
     - los anchos y alturas que salen de un DATO (probabilidad, goles), que
       los pone quien usa la pieza y no la hoja;
     - el 1px de las lineas, que es el de todos los bordes del sitio;
     - las tres medidas de .eg-ficha-forma, que se conservan tal cual para
       no cambiar el aspecto de las 148 paginas de equipo.
   ============================================================ */

/* ---------- 1. Barra 1X2 proporcional ----------
   Sustituye a las tres columnas IGUALES de .mp-comparacion-grid cuando lo
   que se muestra es un 1X2: que el ancho sea la probabilidad es justo el
   cambio de fondo de la estratificacion. Un 52/27/21 se lee sin leer los
   numeros.

   Estructura:
     .eg-barra-1x2 > .eg-barra-1x2-col (una por lado, con su flex-grow)
                       > .eg-barra-1x2-celda   el rectangulo de color
                       > .eg-barra-1x2-etiqueta  debajo, alineada con el
                       > .eg-insignia-ocurrio    (opcional)              */
.eg-barra-1x2{display:flex;gap:var(--sp-1);align-items:flex-start;}

.eg-barra-1x2-col{
  /* flex-grow lo pone quien la usa, con la probabilidad: es un DATO, no una
     decision de diseño (excepcion de la regla 2.4). flex-basis en 0 para
     que el ancho sea SOLO proporcion y no dependa del texto de dentro.

     min-width es --tap-min: sin el, un 2.1% quedaria en una tira ilegible
     de 6px. Con el, esa celda mide 44px y su texto todavia cabe. */
  flex:0 1 0;
  min-width:var(--tap-min);
  display:flex;flex-direction:column;align-items:stretch;
}

.eg-barra-1x2-celda{
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-3) var(--sp-1);
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:var(--neutral-soft);color:var(--text-secondary);
  font-size:var(--fs-base);font-weight:700;
  font-variant-numeric:tabular-nums;
  overflow:hidden;
}
.eg-barra-1x2-celda.es-favorito{
  background:var(--accent-dim);color:var(--accent-bright);font-weight:900;
}

/* Variante neutra, para el modelo externo. NINGUNA celda en verde: el verde
   es del Modelo EIG y pintarlo aqui sugeriria que la casa respalda ese
   numero. El favorito se distingue solo por el peso del texto. */
.eg-barra-1x2--neutra .eg-barra-1x2-celda.es-favorito{
  background:var(--neutral-soft);color:var(--text-primary);font-weight:900;
}

/* Lo que de verdad paso. Borde blanco y no un color: el resultado no es ni
   acierto ni error de nadie, es el hecho. */
.eg-barra-1x2-celda.ocurrio{border-color:var(--text-primary);}

.eg-barra-1x2-etiqueta{
  margin-top:var(--sp-2);text-align:center;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-tertiary);
}

/* Relevo de .mp-ocurrio de partido.html, con tokens. Se escribio aparte en
   vez de mover .mp-ocurrio aqui para no tener dos definiciones vivas de lo
   mismo; .mp-ocurrio ya se retiro, con el resto del CSS viejo de la pagina. */
.eg-insignia-ocurrio{
  display:block;align-self:center;margin-top:var(--sp-2);
  padding:var(--sp-1) var(--sp-2);
  background:var(--neutral-soft);border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-primary);
}
/* En los extremos, la insignia se alinea con el borde y no con el centro de
   su columna: una columna puede medir solo --tap-min (44px, un 2% de
   probabilidad) y la insignia es mas ancha, asi que centrada sobresalia del
   bloque (visto el 25-sep con Toluca-Santos: gano Santos con un 2.1%). */
.eg-barra-1x2-col:first-child .eg-insignia-ocurrio{align-self:flex-start;}
.eg-barra-1x2-col:last-child .eg-insignia-ocurrio{align-self:flex-end;}

/* ---------- 2. Rejilla de evidencia ----------
   Releva a .mp-comparacion-grid / -col / -valor. Lo nuevo es la SEGUNDA
   linea de texto: hoy una casilla dice "68%" y "Acierto", y el lector tiene
   que adivinar de que. Con la aclaracion dice de que.

   El numero usa --fs-xxl, que son los mismos 24px de .mp-comparacion-valor,
   asi que la adopcion no mueve ningun tamaño.

   flex con flex:1 1 0 en vez de una rejilla de 3 columnas: con 2 casillas o
   con 3 se reparte igual, sin clase aparte ni ancho minimo inventado.      */
.eg-casillas{display:flex;gap:var(--sp-3);}

.eg-casilla{
  flex:1 1 0;min-width:0;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-2);
  text-align:center;
}
.eg-casilla-numero{
  display:block;line-height:1.1;
  font-size:var(--fs-xxl);font-weight:900;color:var(--accent-bright);
  font-variant-numeric:tabular-nums;
}
.eg-casilla-numero.secundario{color:var(--text-primary);}
.eg-casilla-etiqueta{
  display:block;margin-top:var(--sp-2);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.eg-casilla-aclaracion{
  display:block;margin-top:var(--sp-1);
  font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.35;
}

/* Casilla bloqueada. Lo que NO lleva es el valor: donde iria el numero va
   un candado, y el numero real no se emite, asi que no llega al navegador de
   quien no lo pago. Nunca un numero difuminado -un numero borroso sigue
   siendo un numero, y el lector intenta leerlo- ni un texto inventado.

   El candado es un <svg> del marcado y no un emoji ni una imagen de fondo,
   igual que los demas iconos del sitio: el CSS dimensiona y el marcado
   aporta, como .cta-btn svg y .pick-btn svg. Un emoji lo
   dibuja cada sistema a su manera -amarillo en Windows, otro en Android,
   otro en iOS- y no hereda el color.

   El alto va en em y no en px: 1.1em del propio .eg-casilla-numero es
   exactamente su caja de linea, asi que una casilla bloqueada mide lo mismo
   que una con numero y la fila no se mueve.

   Marcado esperado:
     <div class="eg-casilla bloqueada">
       <span class="eg-casilla-numero">
         <svg class="eg-casilla-candado" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
              aria-hidden="true">
           <rect x="4.5" y="10.5" width="15" height="10.5" rx="2.5"/>
           <path d="M8.2 10.5V7.4a3.8 3.8 0 0 1 7.6 0v3.1"/>
         </svg>
       </span>
       <span class="eg-casilla-etiqueta">Respaldo</span>
       <span class="eg-casilla-aclaracion">solo con Premium</span>
     </div>                                                               */
.eg-casilla.bloqueada .eg-casilla-numero{color:var(--text-tertiary);}
.eg-casilla-candado{display:block;margin:0 auto;width:1.1em;height:1.1em;}

/* ---------- 3. Lista de datos clave ----------
   Une .mp-context-list (partido.html) con .premium-feature .dot
   (premium.html), que hoy son dos cosas distintas para lo mismo.

   La viñeta es un ::before y no un <span class="dot">, asi que el marcado
   se queda en <li>texto</li>. Y su margen superior se CALCULA a partir del
   interlineado en vez de los 5px a mano de .premium-feature .dot: si cambia
   el tamaño del texto, la viñeta sigue alineada con la primera linea.     */
.eg-lista-datos{display:flex;flex-direction:column;gap:var(--sp-3);}
/* Las frases van en --text-primary: son lo que la gente viene a leer, y en
   gris se leian como notas al pie (revision del 25-sep). */
.eg-lista-datos li{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--text-primary);line-height:1.5;
}
.eg-lista-datos li::before{
  content:'';flex-shrink:0;
  width:var(--sp-2);height:var(--sp-2);border-radius:50%;
  background:var(--accent-bright);
  margin-top:calc((1.5em - var(--sp-2)) / 2);
}
.eg-lista-datos strong{color:var(--text-primary);}

/* ---------- 4. Ficha de forma ----------
   Trae .form-pill (win/draw/loss) de las 148 paginas de equipo SIN cambiar
   su aspecto, que es lo que pide la ronda. De sus tres medidas, una ya tiene
   token y las otras dos siguen literales:
     44px  es --tap-min, el token nuevo de esta ronda: mismo valor, cero
           cambio visible
     12px  de redondeo, entre --radius-sm (8) y --radius-md (14)
     14px  de texto, y --fs-base es 14.5
   Pasar esas dos a tokens moveria el redondeo +2px y el texto +0.5px. Es una
   decision de la ronda de adopcion, no de esta.

   Lo que SI cambia es el fondo del empate: .form-pill.draw usa
   rgba(255,255,255,.06) y aqui va --neutral-soft (0.08), que es la
   unificacion ya aprobada en la ronda 1.

   Nombres en español -victoria/empate/derrota- y no win/draw/loss: el
   generador emite los tres desde Python y no hay razon para el ingles.    */
.eg-fila-forma{display:flex;gap:var(--sp-2);}
.eg-ficha-forma{
  width:var(--tap-min);height:var(--tap-min);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  font-size:14px;font-weight:800;
}
.eg-ficha-forma.victoria{background:var(--accent-dim);color:var(--accent-bright);border:1px solid var(--accent-border);}
.eg-ficha-forma.empate{background:var(--neutral-soft);color:var(--text-secondary);border:1px solid var(--border-subtle);}
.eg-ficha-forma.derrota{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border);}

/* ---------- 5. Mini grafica divergente de goles ----------
   La unica de las cinco sin precedente en el repo. Por partido: una barra
   hacia arriba (goles a favor) y otra hacia abajo (en contra), separadas por
   la linea base, con el rival debajo y el numero sobre cada barra.

   El contrato con quien la usa es un PORCENTAJE, no pixeles: la altura de
   cada barra es su proporcion respecto del maximo de la serie. Asi la pieza
   se queda con los pixeles y quien la usa solo aporta el dato (excepcion de
   la regla 2.4).

   Las dos pistas miden lo mismo y tienen alto fijo, para que la linea base
   quede a la MISMA altura en los cinco partidos; si cada partido pusiera su
   base donde acabara su barra, la grafica no se podria leer de un vistazo.
   El alto se puede ajustar con --eg-alto-pista-goles.

   El numero va en una fila constante encima de la pista, no pegado al borde
   de la barra: asi los cinco numeros se comparan entre si, que es para lo
   que sirve la grafica.

   Cinco partidos en 390px: 5 barras de --sp-5 (20px) mas 4 huecos de --sp-2
   (8px) son 132px de tinta en 390 de ancho; cada columna se queda con unos
   71px, de sobra para el nombre corto del rival.                          */
.eg-barras-goles{display:flex;gap:var(--sp-2);align-items:flex-start;}
.eg-barras-goles-partido{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;
}
.eg-barras-goles-pista{
  height:var(--eg-alto-pista-goles, var(--sp-8));
  width:100%;
  display:flex;justify-content:center;
}
.eg-barras-goles-pista.arriba{align-items:flex-end;}
.eg-barras-goles-pista.abajo{align-items:flex-start;}

.eg-barras-goles-barra{
  /* La ALTURA la pone quien la usa, en % de la pista, a partir de los goles.
     El ancho si es del sistema.

     min-height existe para que un 0 se siga VIENDO: una marca de --sp-1 se
     lee como "cero goles", y nada se leeria como "no hay dato". Son dos
     cosas distintas y la grafica no puede confundirlas. */
  width:var(--sp-5);
  min-height:var(--sp-1);
}
.eg-barras-goles-barra.a-favor{
  background:var(--accent-bright);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.eg-barras-goles-barra.en-contra{
  background:var(--neutral-bar);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}

/* La linea base va por partido y no de lado a lado: con el hueco del
   sistema se lee como una linea discontinua, que ademas separa los partidos.
   1px es el mismo grosor de todos los bordes de esta hoja. */
.eg-barras-goles-base{width:100%;height:1px;background:var(--border-strong);margin:var(--sp-1) 0;}

.eg-barras-goles-num{
  font-size:var(--fs-micro);font-weight:800;line-height:1;
  color:var(--text-secondary);font-variant-numeric:tabular-nums;
  padding:var(--sp-1) 0;
}
.eg-barras-goles-rival{
  margin-top:var(--sp-2);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-tertiary);
}

/* ============================================================
   PIEZAS DE ESTRUCTURA (ronda 2 del sistema de diseño, 23-sep)

   Cuatro componentes con prefijo eg-. Igual que las cinco piezas de datos:
   ninguna pagina los usa todavia, y la adopcion va despues, de una pagina a
   la vez.

   Los literales que quedan estan todos en .eg-hero-partido y en una medida
   de .eg-grupo, y cada uno dice en su sitio por que. El resto es token.
   ============================================================ */

/* ---------- 6. Tarjeta del veredicto ----------
   La tarjeta grande de la zona 1. Releva a .mp-sugerencia-card de
   partido.html, con su degradado y su borde de acento.

   SIN VARIANTE DE ESTADO, a proposito. Los tres estados de la pagina -antes,
   en vivo y terminado- no cambian el marco de la tarjeta: cambian QUE
   bloques hay dentro. Antes del partido no hay pie; en vivo hay aviso;
   terminado hay pie y no hay aviso. Una clase .en-vivo o .terminado
   codificaria el estado DOS veces -en la clase y en la presencia de los
   bloques- y las dos se pueden desincronizar. Es el mismo problema que las
   dos definiciones vivas de lo mismo que este sistema viene a quitar.

   Los tres bloques opcionales son .eg-veredicto-vivo, -respaldo y -pie.   */
.eg-veredicto{
  background:linear-gradient(160deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--accent-dim);border-radius:var(--radius-lg);
  padding:var(--sp-5);
}
.eg-veredicto-titulo{
  font-size:var(--fs-xl);font-weight:800;line-height:1.25;
  margin-bottom:var(--sp-2);
}
.eg-veredicto-texto{
  font-size:var(--fs-base);color:var(--text-secondary);line-height:1.55;
}

/* El aviso de "esto se registro con el partido ya empezado". Ambar porque en
   el sitio el ambar significa atencion, igual que en la vuelta del pago. */
.eg-veredicto-vivo{
  margin-top:var(--sp-3);
  font-size:var(--fs-sm);font-weight:600;color:var(--amber);
}

/* Fila del respaldo estadistico. El icono va en el marcado con
   stroke="currentColor", igual que el candado: el CSS dimensiona y el
   marcado aporta. El alto en em iguala la caja de linea del texto. */
.eg-veredicto-respaldo{
  display:flex;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-3);
  font-size:var(--fs-sm);font-weight:700;color:var(--accent-bright);
}
.eg-veredicto-respaldo-icono{flex-shrink:0;width:1.15em;height:1.15em;}
.eg-veredicto-respaldo.medio{color:var(--amber);}
.eg-veredicto-respaldo.bajo{color:var(--red-text);}

/* Pie de "Lo que ya paso", separado por una linea. Solo aparece cuando hay
   un hecho que contar, asi que la linea no puede ser un borde de la tarjeta:
   va aqui, y si no hay pie no hay linea. */
.eg-veredicto-pie{
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle);
}
.eg-veredicto-pie-etiqueta{
  display:block;margin-bottom:var(--sp-1);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.eg-veredicto-pie-texto{
  font-size:var(--fs-sm);color:var(--text-primary);line-height:1.5;
}

/* ---------- 7. Grupo del detalle ----------
   Releva a .eig-accordion / .eig-item* de partido.html. El titulo va ENCIMA
   de la tarjeta y las filas pulsables dentro.

   Dos diferencias con el precedente, las dos por un motivo:

   1) EL CONTENIDO PLEGADO NO ES ALCANZABLE CON EL TECLADO. Hoy
      .eig-item-body usa max-height:0 con overflow:hidden, y eso esconde a la
      vista pero NO saca del orden de tabulacion: con la fila cerrada, el
      tabulador entra en ella y el foco se va a botones invisibles. Con las
      filas pulsables que la maqueta mete dentro del grupo, eso son varias
      paradas a ciegas por grupo. Aqui se añade visibility:hidden, que si
      saca a los descendientes del orden de tabulacion, con la transicion
      retrasada para que el plegado se siga viendo antes de desaparecer.

      QUIEN LA ADOPTE tiene que hacer ademas dos cosas que el CSS no puede:
        - poner aria-expanded en el boton de la cabecera y mantenerlo al dia
          al abrir y cerrar, que es lo que anuncia el estado al lector de
          pantalla;
        - no meter en el cuerpo nada que tenga que ser alcanzable estando
          cerrado (un enlace de "ver mas", por ejemplo).
      El pintado al abrir -cargar el contenido solo cuando se abre- es de la
      ronda de adopcion, no de esta.

   2) SIN EL TECHO DE max-height:3000px. El precedente anima hasta un maximo
      inventado, y un grupo mas alto que eso se recorta sin aviso. Aqui la
      animacion va con grid-template-rows de 0fr a 1fr, que no necesita saber
      el alto. En un navegador que no lo anime, el grupo abre y cierra igual,
      solo sin transicion.                                                 */
.eg-grupo{margin-bottom:var(--sp-5);}
.eg-grupo-titulo{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:var(--sp-2);
}
.eg-grupo-caja{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);overflow:hidden;
}
.eg-grupo-item{border-top:1px solid var(--border-subtle);}
.eg-grupo-item:first-child{border-top:none;}

.eg-grupo-cabecera{
  width:100%;min-height:var(--tap-min);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:none;border:none;color:var(--text-primary);
  font-family:inherit;text-align:left;cursor:pointer;
}
.eg-grupo-cabecera:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-2px;}
.eg-grupo-etiqueta{
  display:block;font-size:var(--fs-base);font-weight:700;
}
.eg-grupo-aclaracion{
  display:block;margin-top:var(--sp-1);
  font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.35;
}
.eg-grupo-chevron{
  flex-shrink:0;width:1.4em;height:1.4em;
  color:var(--text-tertiary);transition:transform .2s var(--ease),color .2s var(--ease);
}
.eg-grupo-item[data-abierto="true"] .eg-grupo-chevron{
  transform:rotate(180deg);color:var(--accent-bright);
}

.eg-grupo-cuerpo{
  display:grid;grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .25s var(--ease),visibility 0s linear .25s;
}
.eg-grupo-cuerpo > *{overflow:hidden;}
.eg-grupo-item[data-abierto="true"] .eg-grupo-cuerpo{
  grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .25s var(--ease),visibility 0s;
}

/* El relleno VERTICAL solo existe con la fila abierta, y esto no es un
   detalle: es lo que hace que una fila cerrada mida 0.

   overflow:hidden anula la contribucion del CONTENIDO a la altura minima del
   elemento de rejilla, pero no la del RELLENO. Con padding-bottom fijo,
   grid-template-rows:0fr dejaba la pista en 0 y la fila seguia midiendo 16px
   -medido-: invisible por el visibility, pero 16px de hueco muerto por fila
   cerrada, que con ocho filas son 128px de nada. Probadas tres salidas:
     minmax(0,0fr) en la pista      -> sigue midiendo 16px
     el relleno en un nivel mas     -> 0px, pero cuesta un <div> por fila
     el relleno vertical al abrir   -> 0px, y sin tocar el marcado
   El relleno HORIZONTAL se queda siempre: no contribuye a la altura.        */
.eg-grupo-cuerpo-inner{
  padding:0 var(--sp-4);
  transition:padding-bottom .25s var(--ease);
}
.eg-grupo-item[data-abierto="true"] .eg-grupo-cuerpo-inner{padding-bottom:var(--sp-4);}

/* Fila bloqueada. NO es un boton: no hay nada que abrir, y un boton que no
   hace nada es peor que no tenerlo -se puede tabular hasta el, se anuncia
   como pulsable y al pulsarlo no pasa nada-. Por eso la cabecera bloqueada
   se emite como <div> y sin cursor de mano.

   El candado es un <svg> del marcado, igual que en la casilla bloqueada de
   las piezas de datos. */
.eg-grupo-item.bloqueado .eg-grupo-cabecera{cursor:default;}
.eg-grupo-item.bloqueado .eg-grupo-etiqueta{color:var(--text-secondary);}
.eg-grupo-premium{
  flex-shrink:0;display:flex;align-items:center;gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-pill);
  background:var(--accent-dim);color:var(--accent-bright);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.eg-grupo-candado{flex-shrink:0;width:1.2em;height:1.2em;}

/* ---------- 8. Encabezado del partido ----------
   Promocion de .mp-hero, .mp-comp, .mp-teams-row, .mp-team, .mp-badge,
   .mp-team-name, .mp-score-block, .mp-score, .mp-vs, .mp-status
   (upcoming/live/finished), .live-dot con su animacion y .mp-kickoff.

   SIN CAMBIAR SU ASPECTO: es el bloque mas visible del sitio. Se tokeniza
   solo lo que coincide EXACTO con un escalon; lo que no, se queda literal.
   Los literales que quedan, y por que ninguno tiene escalon:
     22px 18px  padding del marco        la escala tiene 20 y 24
     60/260/180 la geometria del brillo  es un degradado, no un espaciado
     10px       hueco de la fila         la escala tiene 8 y 12
     52px       diametro del escudo      una dimension, no un tamaño de texto
     15px       texto del escudo         la escala tiene 14.5 y 17
     13.5px     nombre del equipo        la escala tiene 13 y 14.5
     6px        hueco del marcador       la escala tiene 4 y 8
     90px       ancho minimo del bloque  una dimension
     16px       el "vs"                  la escala tiene 14.5 y 17
     10.5px     texto del estado         --fs-micro es 10
     10px       relleno lateral del estado
     5px        hueco del punto en vivo
     6px        diametro del punto en vivo
     12px       texto de la hora         la escala tiene 11.5 y 13
     14px       margen de la hora        la escala tiene 12 y 16
   Y lo que SI se tokeniza, sin mover un pixel:
     margin:12px 0 20px       -> --sp-3 y --sp-5
     gap:8px del equipo       -> --sp-2
     font-size:34px           -> --fs-3xl
     margin:0 4px del sep     -> --sp-1
     color:#fff del escudo    -> --text-primary
     rgba(255,255,255,0.08)   -> --neutral-soft, en upcoming y en finished
     padding 4px del estado   -> --sp-1

   La animacion se llama eg-pulso y no pulse: en el repo hay SEIS
   @keyframes pulse, y el ultimo en orden de documento gana para todos. Como
   las paginas definen el suyo en su <style>, que va despues de esta hoja,
   un @keyframes pulse aqui quedaria pisado sin aviso.                     */
.eg-hero-partido{
  background:linear-gradient(160deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:22px 18px;margin:var(--sp-3) 0 var(--sp-5);
  position:relative;overflow:hidden;box-shadow:var(--shadow-card);
}
.eg-hero-partido::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:260px;height:180px;
  background:radial-gradient(ellipse,var(--accent-glow),transparent 70%);
  opacity:.3;pointer-events:none;
}
.eg-hero-competicion{
  position:relative;text-align:center;margin-bottom:var(--sp-4);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.eg-hero-competicion .acento{color:var(--accent-bright);}
.eg-hero-equipos{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.eg-hero-equipo{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);flex:1;min-width:0;}
/* El color del monograma lo decide quien usa la pieza, con
   colorTextoSobre() de equipos.js: sobre un color de equipo claro -amarillo
   de Villarreal, celeste de Lazio- el blanco se queda en 1.3:1 y no se lee.
   Por defecto sigue siendo blanco, que es lo correcto para 117 de los 148
   colores del mapa y lo que hacia .mp-badge. */
.eg-hero-escudo{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;
  color:var(--eg-escudo-tinta, var(--text-primary));
}
/* Sombra suave bajo un monograma blanco. La pone claseSombraEscudo() de
   equipos.js, solo cuando la letra va en blanco. Es para los rojos puros
   (Arsenal, Sunderland, Union Berlin, FC Köln, Nice), que se quedan entre
   4.38 y 4.49:1: afianza el borde de la letra sin tocar el color del equipo.
   Sirve igual en el escudo del encabezado y en el de la portada. */
.eg-escudo-letra-blanca{text-shadow:0 1px 2px rgba(0,0,0,0.4);}
.eg-hero-equipo-nombre{font-size:13.5px;font-weight:700;text-align:center;line-height:1.25;}
.eg-hero-marcador-bloque{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;min-width:90px;
}
.eg-hero-marcador{
  font-size:var(--fs-3xl);font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.eg-hero-marcador .sep{color:var(--text-tertiary);margin:0 var(--sp-1);}
.eg-hero-vs{font-size:16px;font-weight:800;color:var(--text-tertiary);}

.eg-hero-estado{
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:var(--sp-1) 10px;border-radius:var(--radius-pill);
}
.eg-hero-estado.proximo{background:var(--neutral-soft);color:var(--text-secondary);}
.eg-hero-estado.vivo{
  background:var(--accent-dim);color:var(--accent-bright);
  display:flex;align-items:center;gap:5px;
}
.eg-hero-estado.terminado{background:var(--neutral-soft);color:var(--text-tertiary);}
/* Sin resultado: aplazado, cancelado, abandonado, suspendido... Ambar porque
   en el sitio el ambar significa atencion: el partido no siguio su curso. El
   rotulo concreto lo pone quien usa la pieza. */
.eg-hero-estado.sin-resultado{background:var(--amber-dim);color:var(--amber);}

.eg-hero-punto-vivo{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-bright);animation:eg-pulso 1.3s infinite;
}
@keyframes eg-pulso{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.4;transform:scale(.7);}
}
/* Quien pide menos animacion no ve un punto latiendo. La regla global del
   principio de esta hoja ya lo frena, pero lo hace por la fuerza -acorta
   toda animacion a .001ms- y el resultado depende de cual sea el ultimo
   fotograma. Aqui se apaga a proposito, que es lo legible. */
@media (prefers-reduced-motion:reduce){
  .eg-hero-punto-vivo{animation:none;}
}

.eg-hero-hora{
  text-align:center;margin-top:14px;
  font-size:12px;font-weight:600;color:var(--text-tertiary);
}

/* ---------- 9. Tira de confianza ----------
   Unifica las DOS copias que hoy viven en resultados.html: .sgp-stats* y
   .roi-stat* / .roi-sub*. Aqui no aplica el "sin cambiar su aspecto" del
   encabezado, justo al contrario: las dos copias difieren y el sentido de la
   pieza es que dejen de diferir. Lo que cambia respecto de cada una:

     cifra grande     56px (sgp) y 52px (roi)  ->  --fs-display (52)
     frase            14px las dos             ->  --fs-base (14.5)
     numero de caja   19px (roi-sub-num)       ->  --fs-lg (17)
     etiqueta de caja 11.5px                   ->  --fs-xs, exacto
     hueco entre cajas 28px                    ->  --sp-7, exacto
     margen superior   20px                    ->  --sp-5, exacto

   Los dos escalones que se mueven son la cifra (-4px solo en la copia de
   sgp, que era la desalineada) y el numero de las cajas (-2px). El de 19px
   cae justo entre --fs-lg (17) y --fs-xl (21); se elige el de abajo para que
   la jerarquia contra la cifra de 52px quede mas clara, no por redondeo.

   Sirve con una cifra sola o con las dos cajas: si no hay cajas no hay
   linea, porque la linea la trae .eg-confianza-cajas y no la tira.

   Los niveles medio y bajo repiten los de .roi-stat-pct, ahora con token:
   el bajo pasa de --red a --red-text, que es el rojo pensado para leerse.  */
.eg-confianza{text-align:center;}
.eg-confianza-cifra{
  font-size:var(--fs-display);font-weight:900;line-height:1;
  color:var(--accent-bright);font-variant-numeric:tabular-nums;
}
.eg-confianza-cifra.medio{color:var(--amber);}
.eg-confianza-cifra.bajo{color:var(--red-text);}
.eg-confianza-frase{
  margin-top:var(--sp-2);
  font-size:var(--fs-base);font-weight:600;color:var(--text-secondary);line-height:1.45;
}
.eg-confianza-sindatos{
  margin-top:var(--sp-2);
  font-size:var(--fs-base);font-style:italic;color:var(--text-tertiary);
}
.eg-confianza-cajas{
  display:flex;justify-content:center;gap:var(--sp-7);
  margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle);
}
.eg-confianza-caja{text-align:center;}
.eg-confianza-caja-num{display:block;font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums;}
.eg-confianza-caja-eti{
  display:block;margin-top:var(--sp-1);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-tertiary);
}
.eg-confianza-enlace{
  display:inline-block;margin-top:var(--sp-4);
  font-size:var(--fs-sm);font-weight:700;color:var(--accent-bright);
}
.eg-confianza-enlace:hover{text-decoration:underline;}