/*
  FutbolScore — estilo "transmisión deportiva".
  La idea sale del propio fútbol en la TV: el marcador de esquina, los rótulos de abajo y la barra roja de "EN VIVO".
  Fondo grafito neutro, un solo color de marca (verde lima, como el ícono), letra angosta y alta para números y
  titulares, esquinas casi rectas. El rojo se guarda para lo que avisa algo: en vivo, fallos, errores, descenso.
*/
:root {
  --fondo: #0e0f11;
  --capa: #141518;
  --tarjeta: #18191c;
  --tarjeta-2: #212327;
  --tarjeta-3: #2b2d32;
  --borde: #33363c;
  --borde-suave: #232529;
  --texto: #f3f2ef;
  --suave: #a4a6ab;
  --tenue: #6f7279;
  /* Color de la marca FutbolScore (verde, como el ícono) y rojo solo para lo que avisa algo: en vivo, fallos, errores, descenso. */
  --marca: #d7ff3a;
  --marca-oscuro: #c2ec1f;
  --marca-2: #d7ff3a;
  --marca-fondo: rgba(215, 255, 58, 0.14);
  --sobre-marca: #121417; /* texto sobre el lima: negro (el blanco casi no se ve) */
  --peligro: #d9222c;
  --peligro-oscuro: #b21a23;
  --peligro-2: #ff5a5f;
  --peligro-fondo: rgba(217, 34, 44, 0.16);
  --peligro-texto: #ffbcbf;
  --verde: #2fbf68;
  --verde-fondo: rgba(47, 191, 104, 0.14);
  --ambar: #f0ad2e;
  --ambar-fondo: rgba(240, 173, 46, 0.14);
  --visita: #c9ccd2;
  --texto-2: #dcdcd8;
  --ambar-texto: #ffd796;
  --marca-texto: #ecffa8;
  --nav: #0a0b0c;
  --dorado: #f4c400;
  --cancha: #1d7a46;
  --cancha-2: #1a6f40;
  --azul: var(--visita);
  --empate: #5d6067;
  --radio: 6px;
  --radio-s: 4px;
  --sombra: 0 0 0 1px var(--borde);
  --corte: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  --titulo: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cuerpo: 'Inter Tight', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); font-size: 15px; line-height: 1.45; }
body { min-height: 100dvh; overscroll-behavior-y: none; font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; }
a { color: inherit; text-decoration: none; }
.oculto { display: none !important; }
:focus-visible { outline: 2px solid var(--marca-2); outline-offset: 2px; }
::selection { background: var(--marca); color: var(--sobre-marca); }

.app { max-width: 760px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }

/* ---------- barra superior: la franja de la transmisión ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  margin: 0 -16px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--fondo); border-bottom: 3px solid var(--marca);
  display: flex; align-items: center; gap: 10px;
}
.marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden; }
.marca > div:last-child { min-width: 0; }
.marca-logo {
  width: 36px; height: 36px; border-radius: var(--radio-s); flex: none;
  background: var(--marca); display: grid; place-items: center;
}
.marca-logo svg { width: 22px; height: 22px; }
.marca-nombre { font-family: var(--titulo); font-weight: 800; font-size: 25px; letter-spacing: 0.2px; text-transform: uppercase; line-height: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-nombre span { color: var(--marca-2); margin-left: 2px; }
.marca-sub { font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastilla {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--radio-s);
  background: var(--tarjeta-2); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background 0.18s ease, transform 0.12s ease;
}
.pastilla:active { transform: translateY(1px); }
@media (hover: hover) { .pastilla:hover { background: var(--tarjeta-3); } }
.pastilla.vivo { color: #fff; background: var(--peligro); font-family: var(--titulo); font-size: 15px; letter-spacing: 0.4px; text-transform: uppercase; clip-path: var(--corte); padding-right: 16px; }
@media (hover: hover) { .pastilla.vivo:hover { background: var(--peligro-oscuro); } }
.punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: parpadeo 1.4s steps(2, jump-none) infinite; }
@keyframes parpadeo { 50% { opacity: 0.25; } }

/* ---------- pestañas de días ---------- */
.dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 8px 0 12px; background: var(--capa); border-radius: var(--radio-s); }
.dia { padding: 12px 4px 10px; font-family: var(--titulo); font-weight: 700; font-size: 17px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--suave); position: relative; transition: color 0.18s ease; }
@media (hover: hover) { .dia:hover { color: var(--texto); } }
.dia.activo { color: var(--texto); }
.dia.activo::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--marca); }
.dia .n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 4px; border-radius: 3px; font-size: 13px; color: #fff; background: var(--peligro); vertical-align: 2px; }
.dia .n:empty { display: none; }

.fechas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px -16px 12px; padding: 0 16px; }
.fechas::-webkit-scrollbar, .ligas::-webkit-scrollbar { display: none; }
.fecha-chip { flex: none; padding: 7px 12px 6px; border-radius: var(--radio-s); background: var(--tarjeta); text-align: center; min-width: 56px; transition: background 0.18s ease; }
@media (hover: hover) { .fecha-chip:hover { background: var(--tarjeta-2); } }
.fecha-chip b { display: block; font-family: var(--titulo); font-size: 24px; font-weight: 700; line-height: 1; }
.fecha-chip small { font-size: 11.5px; font-weight: 600; color: var(--suave); text-transform: uppercase; }
.fecha-chip.activo { background: var(--marca); color: var(--sobre-marca); }
.fecha-chip.activo small { color: #ffe3e4; }

/* ---------- ligas ---------- */
.ligas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px; }
.liga-chip { flex: none; height: 34px; padding: 0 13px; border-radius: var(--radio-s); background: var(--tarjeta); font-size: 13.5px; font-weight: 600; color: var(--suave); transition: background 0.18s ease, color 0.18s ease; }
@media (hover: hover) { .liga-chip:hover { background: var(--tarjeta-2); color: var(--texto); } }
.liga-chip:active, .fecha-chip:active, .pestana:active { transform: translateY(1px); }
.liga-chip.activo { color: var(--sobre-marca); background: var(--marca); }

/* ---------- títulos de sección: el zócalo ---------- */
.seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; margin: 24px 0 10px; }
.seccion-titulo h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-size: 26px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.2px; }
.seccion-titulo h2::before { content: ''; width: 14px; height: 22px; background: var(--marca); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); flex: none; }
.seccion-titulo small { color: var(--suave); font-size: 13px; }

/* ---------- jugadas del día ---------- */
.jugadas { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.jugadas::-webkit-scrollbar { display: none; }
.jugada {
  flex: none; width: min(82%, 300px); scroll-snap-align: start; border-radius: var(--radio); padding: 14px;
  background: var(--tarjeta); border-top: 3px solid var(--tarjeta-3); text-align: left; transition: background 0.18s ease;
}
@media (hover: hover) { .jugada:hover { background: var(--tarjeta-2); } }
.jugada .etiqueta { font-family: var(--titulo); font-size: 25px; font-weight: 700; line-height: 1.05; margin-bottom: 12px; text-wrap: balance; }
.jugada .fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jugada .fila > b { font-family: var(--titulo); font-size: 20px; font-weight: 800; }
.combinada { background: var(--tarjeta-2); border-top-color: var(--marca); }

.porcentaje { font-family: var(--titulo); font-weight: 800; font-size: 34px; line-height: 1; }
.porcentaje small { font-size: 17px; margin-left: 1px; }

/* ---------- tarjetas de partido: el marcador de esquina ---------- */
.grupo-liga { margin-bottom: 20px; }
.grupo-liga-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; font-family: var(--titulo); font-size: 17px; font-weight: 700; color: var(--texto); text-transform: uppercase; letter-spacing: 0.3px; }
.grupo-liga-titulo span[style] { font-family: var(--cuerpo); font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--suave) !important; font-weight: 500 !important; }
.grupo-liga-titulo .icono-liga { width: 22px; height: 22px; border-radius: 3px; background: var(--tarjeta-3); display: grid; place-items: center; }
.grupo-liga-titulo .icono-liga svg { width: 13px; height: 13px; }

.partido {
  display: block; width: 100%; text-align: left; background: var(--tarjeta);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 6px; transition: background 0.18s ease, transform 0.12s ease;
}
.partido:active { transform: translateY(1px); }
@media (hover: hover) { .partido:hover { background: var(--tarjeta-2); } }
.partido-cab { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--suave); margin-bottom: 10px; }
.estado-vivo { color: #fff; background: var(--peligro); font-family: var(--titulo); font-size: 14px; font-weight: 700; letter-spacing: 0.4px; padding: 1px 12px 0 7px; clip-path: var(--corte); display: inline-flex; align-items: center; gap: 6px; }
.partido-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.equipo-fila { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.equipo-fila + .equipo-fila { margin-top: 4px; }
.escudo { width: 26px; height: 26px; object-fit: contain; flex: none; }
.escudo-vacio { width: 26px; height: 26px; border-radius: 3px; background: var(--tarjeta-3); flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--suave); }
.equipo-nombre { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marcador-col { display: flex; flex-direction: column; gap: 4px; align-items: stretch; font-family: var(--titulo); font-size: 22px; font-weight: 800; min-width: 30px; }
.marcador-col span { line-height: 28px; text-align: center; background: var(--fondo); border-radius: 3px; }
.probs-mini { display: grid; grid-template-columns: repeat(3, 44px); gap: 3px; text-align: center; }
.probs-mini div { background: var(--tarjeta-2); border-radius: 3px; padding: 5px 0 3px; }
.probs-mini b { display: block; font-family: var(--titulo); font-size: 19px; font-weight: 700; line-height: 1.05; }
.probs-mini small { font-size: 10.5px; color: var(--tenue); font-weight: 700; }
.probs-mini .max { background: var(--marca); }
.probs-mini .max b, .probs-mini .max small { color: #fff; }
.semaforo { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.semaforo.alta { background: var(--verde); }
.semaforo.media { background: var(--ambar); }
.semaforo.baja { background: var(--peligro-2); }
.pick-prob { font-family: var(--titulo); font-size: 20px; font-weight: 700; }
.etiqueta-valor { font-size: 11px; font-weight: 800; color: #06140b; background: var(--verde); padding: 2px 7px; border-radius: 3px; }

/* ---------- vacío / cargando ---------- */
.vacio { text-align: center; color: var(--suave); padding: 40px 18px; background: var(--tarjeta); border-radius: var(--radio); text-wrap: pretty; }
.vacio b { display: block; color: var(--texto); font-family: var(--titulo); font-size: 22px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.esqueleto { background: linear-gradient(90deg, var(--tarjeta) 0%, var(--tarjeta-2) 50%, var(--tarjeta) 100%); background-size: 200% 100%; animation: brillo 1.3s infinite linear; border-radius: var(--radio); }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.progreso { height: 6px; border-radius: 2px; background: var(--tarjeta-2); overflow: hidden; margin-top: 14px; }
.progreso div { height: 100%; background: var(--marca); transition: width 0.4s ease; }

/* ---------- detalle: el marcador grande ---------- */
.detalle-cab { margin: 0 -16px; padding: 8px 16px 18px; background: var(--capa); }
.volver { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px; border-radius: var(--radio-s); background: var(--tarjeta-2); font-weight: 600; font-size: 13.5px; transition: background 0.18s ease; }
@media (hover: hover) { .volver:hover { background: var(--tarjeta-3); } }
.detalle-liga { text-align: center; color: var(--suave); font-size: 13px; margin: 14px 0 14px; }
.detalle-liga b { color: var(--texto); font-family: var(--titulo); font-size: 16px; text-transform: uppercase; letter-spacing: 0.3px; }
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.duelo-equipo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.duelo-equipo img, .duelo-equipo .escudo-vacio { width: 64px; height: 64px; }
.duelo-equipo b { font-family: var(--titulo); font-size: 20px; font-weight: 700; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.duelo-equipo small { color: var(--suave); font-size: 12px; }
.duelo-centro { text-align: center; min-width: 96px; }
.duelo-marcador { display: inline-block; font-family: var(--titulo); font-size: 48px; font-weight: 800; line-height: 1; padding: 6px 14px 4px; background: var(--fondo); border-radius: var(--radio-s); letter-spacing: 1px; }
.duelo-hora { display: inline-block; font-family: var(--titulo); font-size: 34px; font-weight: 800; line-height: 1; padding: 6px 12px 4px; background: var(--fondo); border-radius: var(--radio-s); }
.duelo-sub { font-size: 12.5px; color: var(--suave); margin-top: 6px; }
.duelo-sub::first-letter { text-transform: uppercase; }

.barra-1x2 { display: flex; height: 8px; overflow: hidden; gap: 2px; margin-top: 18px; }
.barra-1x2 div { border-radius: 1px; }
.barra-1x2-leyenda { display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 8px; font-size: 13px; color: var(--suave); }
.barra-1x2-leyenda b { font-family: var(--titulo); font-size: 24px; font-weight: 800; color: var(--texto); margin-right: 4px; }
.barra-1x2-leyenda > :nth-child(2) { text-align: center; }
.barra-1x2-leyenda > :nth-child(3) { text-align: right; }

.pestanas { position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 15; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; background: var(--fondo); }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; height: 44px; padding: 0 14px; font-family: var(--titulo); font-weight: 700; font-size: 17px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--suave); position: relative; transition: color 0.18s ease; }
@media (hover: hover) { .pestana:hover { color: var(--texto); } }
.pestana.activo { color: var(--texto); }
.pestana.activo::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: var(--marca); }

.caja { background: var(--tarjeta); border-radius: var(--radio); padding: 16px; margin-bottom: 10px; }
.caja h3 { margin: 0 0 12px; font-family: var(--titulo); font-size: 22px; font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.2px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.caja h3 small { font-family: var(--cuerpo); font-size: 12.5px; font-weight: 500; color: var(--suave); text-transform: none; letter-spacing: 0; }
.caja p { margin: 0 0 10px; color: var(--texto-2); max-width: 68ch; }
.caja p:last-child { margin-bottom: 0; }

/* la apuesta del analista: rótulo de transmisión */
.principal { position: relative; overflow: hidden; background: var(--tarjeta-2); border-left: 5px solid var(--marca); }
.principal-etiq { display: inline-block; font-family: var(--titulo); font-size: 14px; font-weight: 700; color: var(--sobre-marca); background: var(--marca); letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 14px 1px 8px; clip-path: var(--corte); }
.principal-texto { font-family: var(--titulo); font-size: 36px; font-weight: 800; line-height: 1; margin: 10px 0 14px; text-wrap: balance; }
.principal-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dato { background: var(--tarjeta-3); border-radius: var(--radio-s); padding: 9px 10px 8px; }
.caja:not(.principal) .dato, .historial-cab .dato { background: var(--tarjeta-2); }
.dato small { display: block; font-size: 11.5px; color: var(--suave); margin-bottom: 1px; }
.dato b { font-family: var(--titulo); font-size: 26px; font-weight: 800; line-height: 1.05; }
.confianza { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 3px; }
.confianza.alta { color: var(--verde); background: var(--verde-fondo); }
.confianza.media { color: var(--ambar); background: var(--ambar-fondo); }
.confianza.baja { color: var(--peligro-2); background: var(--peligro-fondo); }

.ia-titular { font-family: var(--titulo); font-size: 28px; font-weight: 800; line-height: 1.05; margin: 0 0 10px; text-wrap: balance; }
.ia-firma { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 12.5px; font-weight: 600; margin-bottom: 12px; }
.ia-firma .marca-logo { width: 24px; height: 24px; border-radius: 3px; }
.ia-firma .marca-logo svg { width: 14px; height: 14px; }
.lista-claves { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista-claves li { position: relative; padding: 10px 12px 10px 30px; border-radius: var(--radio-s); background: var(--tarjeta-2); font-size: 14px; }
.lista-claves li::before { content: ''; position: absolute; left: 12px; top: 15px; width: 8px; height: 8px; background: var(--marca); }
.lista-claves.riesgos li::before { background: var(--ambar); }
.sub { font-family: var(--titulo); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--texto); margin: 20px 0 8px; letter-spacing: 0.2px; }
.jugador-ia { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borde-suave); }
.jugador-ia:first-of-type { border-top: 0; }
.jugador-ia .avatar { width: 34px; height: 34px; border-radius: var(--radio-s); background: var(--tarjeta-3); display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: 15px; color: var(--texto); flex: none; }
.jugador-ia b { display: block; font-size: 14px; }
.jugador-ia small { color: var(--suave); font-size: 13px; }
.veredicto { margin-top: 16px; padding: 14px 16px; border-radius: var(--radio-s); background: var(--tarjeta-2); border-left: 5px solid var(--marca); font-weight: 600; font-size: 15px; }

/* ticket */
.ticket-cab { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--suave); padding-bottom: 12px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 4px; }
.ticket-cab b { color: var(--texto); }
.sel { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; position: relative; }
.sel + .sel { border-top: 1px solid var(--borde-suave); }
.sel-icono { width: 38px; height: 38px; border-radius: var(--radio-s); background: var(--tarjeta-2); display: grid; place-items: center; }
.sel-icono svg { width: 20px; height: 20px; color: var(--marca-2); }
.sel-mercado { font-size: 12px; font-weight: 600; color: var(--suave); }
.sel-texto { font-weight: 700; font-size: 15px; }
.sel-barra { height: 4px; border-radius: 1px; background: var(--tarjeta-2); margin-top: 6px; overflow: hidden; }
.sel-barra div { height: 100%; background: var(--marca); }
.sel-estado { width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.sel-estado.acierto { background: var(--verde); color: #04140b; }
.sel-estado.fallo { background: var(--peligro); color: #fff; }

/* barras de mercados */
.mercado { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; }
.mercado + .mercado { border-top: 1px solid var(--borde-suave); }
.mercado-nombre { font-size: 14px; }
.mercado-valor { font-family: var(--titulo); font-size: 22px; font-weight: 800; text-align: right; }
.mercado-valor small { font-family: var(--cuerpo); font-size: 11.5px; color: var(--tenue); font-weight: 500; margin-left: 4px; }
.mercado-barra { grid-column: 1 / -1; height: 5px; background: var(--tarjeta-2); border-radius: 1px; overflow: hidden; }
.mercado-barra div { height: 100%; background: var(--visita); }
.mercado-barra div.alto { background: var(--verde); }
.mercado-barra div.bajo { background: var(--empate); }

.marcadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.marcadores div { text-align: center; padding: 10px 4px 8px; border-radius: var(--radio-s); background: var(--tarjeta-2); }
.marcadores div:first-child { background: var(--fondo); }
.marcadores b { display: block; font-family: var(--titulo); font-size: 28px; font-weight: 800; line-height: 1.05; }
.marcadores small { color: var(--suave); font-size: 12.5px; }

/* comparativas: local en rojo, visitante en blanco hueso */
.compara { display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px; align-items: center; padding: 8px 0; }
.compara + .compara { border-top: 1px solid var(--borde-suave); }
.compara-val { font-family: var(--titulo); font-size: 21px; font-weight: 800; }
.compara-val:last-child { text-align: right; }
.compara-centro { text-align: center; font-size: 12.5px; color: var(--suave); }
.compara-barras { display: flex; gap: 2px; height: 5px; margin-top: 5px; }
.compara-barras div { border-radius: 1px; }
.compara-barras .l { background: var(--marca); }
.compara-barras .v { background: var(--visita); }
.leyenda-equipos { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.leyenda-equipos span:first-child { color: var(--marca-2); }
.leyenda-equipos span:last-child { color: var(--visita); }

.forma { display: flex; gap: 3px; }
.forma i { width: 26px; height: 26px; border-radius: 3px; display: grid; place-items: center; font-style: normal; font-family: var(--titulo); font-size: 15px; font-weight: 800; }
.forma .G { background: var(--verde); color: #06140b; }
.forma .E { background: var(--tarjeta-3); color: var(--texto); }
.forma .P { background: var(--peligro); color: #fff; }
.forma-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; }
.forma-fila + .forma-fila { border-top: 1px solid var(--borde-suave); }
.lista-partidos { font-size: 13px; color: var(--suave); margin-top: 6px; }
.lista-partidos div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; }
.lista-partidos div b { color: var(--texto); font-weight: 600; }

.situacion { padding: 12px; border-radius: var(--radio-s); background: var(--tarjeta-2); margin-bottom: 4px; font-size: 14px; }
.situacion b { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.urgencia { font-family: var(--titulo); font-size: 13px; font-weight: 700; padding: 1px 12px 0 7px; letter-spacing: 0.3px; text-transform: uppercase; clip-path: var(--corte); }
.urgencia.alta { background: var(--peligro); color: #fff; }
.urgencia.media { background: var(--ambar); color: #1c1403; }
.urgencia.baja { background: var(--tarjeta-3); color: var(--suave); }

.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.dos-col > * { min-width: 0; overflow-wrap: anywhere; }
.dos-col h4 { margin: 0 0 8px; font-size: 13.5px; color: var(--texto); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.dos-col h4 img { width: 18px; height: 18px; }
.jug { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--borde-suave); }
.jug:first-of-type { border-top: 0; }
.jug span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jug b { font-family: var(--titulo); font-size: 18px; font-weight: 700; }
.aviso { padding: 12px 14px; border-radius: var(--radio-s); background: var(--ambar-fondo); border-left: 4px solid var(--ambar); color: var(--ambar-texto); font-size: 13.5px; margin-bottom: 10px; }
.aviso.rojo { background: var(--peligro-fondo); border-left-color: var(--peligro); color: var(--peligro-texto); }

/* ---------- chat ---------- */
.boton-chat {
  position: fixed; z-index: 30; right: max(16px, calc(50% - 364px)); bottom: calc(80px + env(safe-area-inset-bottom));
  height: 50px; padding: 0 18px 0 14px; border-radius: var(--radio-s); background: var(--marca); color: var(--sobre-marca); font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 0 3px var(--fondo); transition: background 0.18s ease, transform 0.12s ease;
}
.boton-chat:active { transform: translateY(1px); }
@media (hover: hover) { .boton-chat:hover { background: var(--marca-oscuro); } }
.boton-chat svg { width: 20px; height: 20px; }
.hoja-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(5, 5, 6, 0.7); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.hoja-fondo.abierta { opacity: 1; pointer-events: auto; }
.hoja {
  position: fixed; z-index: 41; left: 50%; bottom: 0; width: min(100%, 760px); height: min(82dvh, 680px);
  transform: translate(-50%, 100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  background: var(--capa); border-top: 3px solid var(--marca); border-radius: 8px 8px 0 0;
  display: flex; flex-direction: column;
}
.hoja.abierta { transform: translate(-50%, 0); }
.hoja-cab { padding: 14px 16px; display: flex; align-items: center; gap: 10px; background: var(--tarjeta); }
.hoja-cab b { flex: 1; font-family: var(--titulo); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.hoja-cab .marca-logo { border-radius: 3px !important; }
.cerrar { width: 36px; height: 36px; border-radius: var(--radio-s); background: var(--tarjeta-2); display: grid; place-items: center; }
.mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: var(--radio); font-size: 14.5px; white-space: pre-wrap; }
.msg.usuario { align-self: flex-end; background: var(--marca); color: var(--sobre-marca); }
.msg.analista { align-self: flex-start; background: var(--tarjeta-2); border-left: 3px solid var(--tarjeta-3); }
.sugerencias { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.sugerencias button { flex: none; padding: 8px 12px; border-radius: var(--radio-s); background: var(--tarjeta-2); font-size: 13px; font-weight: 600; transition: background 0.18s ease; }
@media (hover: hover) { .sugerencias button:hover { background: var(--tarjeta-3); } }
.redactar { display: flex; gap: 6px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--tarjeta); }
.redactar input { flex: 1; height: 46px; border-radius: var(--radio-s); border: 2px solid transparent; background: var(--tarjeta-2); color: var(--texto); padding: 0 14px; font: inherit; font-size: 16px; outline: none; }
.redactar input:focus { border-color: var(--marca); }
.redactar button { width: 46px; height: 46px; border-radius: var(--radio-s); background: var(--marca); display: grid; place-items: center; }
.escribiendo span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 1px; background: var(--suave); animation: rebote 1s infinite; }
.escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebote { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---------- navegación inferior ---------- */
.nav {
  position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 0 16px env(safe-area-inset-bottom);
  background: var(--nav); border-top: 1px solid var(--borde-suave);
}
.nav-interior { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0 9px; color: var(--tenue); font-size: 12px; font-weight: 600; position: relative; transition: color 0.18s ease; }
@media (hover: hover) { .nav a:hover { color: var(--suave); } }
.nav a svg { width: 22px; height: 22px; }
.nav a.activo { color: var(--texto); }
.nav a.activo::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--marca); }
.nav a.activo svg { color: var(--marca-2); }

/* ---------- historial ---------- */
.historial-cab { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 4px; }
.historial-cab .dato b { font-size: 34px; }
.historial-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--borde-suave); }
.historial-item:first-child { border-top: 0; }
.historial-item small { color: var(--suave); font-size: 12.5px; }

.legal { text-align: center; color: var(--tenue); font-size: 12px; margin: 28px 8px 0; line-height: 1.55; text-wrap: balance; }
.legal b { color: var(--suave); }
.legal a { color: var(--suave); text-decoration: underline; text-underline-offset: 2px; }

.toast { position: fixed; z-index: 60; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translate(-50%, -160%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); background: var(--tarjeta-3); border-left: 5px solid var(--marca); border-radius: var(--radio-s); padding: 12px 16px; font-weight: 600; max-width: calc(100% - 32px); display: flex; gap: 10px; align-items: center; }
.toast.visible { transform: translate(-50%, 0); }

@media (min-width: 700px) {
  .app { padding-left: 24px; padding-right: 24px; }
  .barra, .detalle-cab { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .duelo-equipo img, .duelo-equipo .escudo-vacio { width: 84px; height: 84px; }
  .duelo-marcador { font-size: 62px; }
  .duelo-equipo b { font-size: 24px; }
}
@media (max-width: 380px) {
  .probs-mini { grid-template-columns: repeat(3, 38px); }
  .principal-texto { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body.con-chat .app { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }

/* apuesta del analista en cada tarjeta */
.apuesta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radio-s); background: var(--tarjeta-2); border-left: 4px solid var(--marca); }
.apuesta.acierto { border-left-color: var(--verde); }
.apuesta.fallo { opacity: 0.7; border-left-color: var(--tenue); }
.apuesta.sin { border-left-color: var(--tarjeta-3); }
.apuesta.sin b { color: var(--suave); font-size: 15px; }
.apuesta-izq { min-width: 0; }
.apuesta-izq small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--marca-2); }
.apuesta.acierto .apuesta-izq small { color: var(--verde); }
.apuesta-izq b { display: block; font-family: var(--titulo); font-size: 23px; font-weight: 800; line-height: 1.05; margin-top: 2px; }
.apuesta-der { display: flex; align-items: center; gap: 10px; text-align: right; flex: none; }
.apuesta-der b { display: block; font-family: var(--titulo); font-size: 32px; font-weight: 800; line-height: 1; }
.apuesta-der small { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--suave); font-weight: 600; }
.ahora { margin-top: 10px; font-size: 13px; color: var(--suave); }
.once { font-size: 12px; font-weight: 700; color: var(--ambar); }
.once.ok { color: var(--verde); }
.once-caja.ok { border-left: 5px solid var(--verde); }
.once-caja.ok h3 small { color: var(--verde); font-weight: 700; }
.once-equipo { padding: 10px 0; border-top: 1px solid var(--borde-suave); }
.once-equipo:first-of-type { border-top: 0; padding-top: 0; }
.once-equipo h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.once-equipo h4 img, .once-equipo h4 .escudo-vacio { width: 20px; height: 20px; }
.once-equipo h4 small { color: var(--suave); font-weight: 600; }
.once-lista { font-size: 13.5px; color: var(--texto-2); margin-top: 4px; }
.once-lista small { color: var(--suave); }
.once-efecto { font-size: 13px; color: var(--ambar); margin-top: 6px; font-weight: 600; }

/* tendencias */
.tendencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tendencias li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radio-s); background: var(--tarjeta-2); font-size: 14px; }
.tendencias li small { display: block; color: var(--verde); font-size: 12px; font-weight: 700; margin-top: 2px; }
.tend-icono { flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-weight: 800; color: var(--verde); }
.tend-icono img, .tend-icono .escudo-vacio { width: 22px; height: 22px; }
.tendencias li.apoya { box-shadow: inset 4px 0 0 var(--verde); }
.tendencias li.contradice { box-shadow: inset 4px 0 0 var(--ambar); }
.tendencias li.contradice .tend-icono { color: var(--ambar); }
.tendencias li.otra { opacity: 0.9; }

/* votación */
.votar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.votar button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--radio-s); background: var(--tarjeta-2); transition: background 0.18s ease, transform 0.12s ease; }
.votar button:active { transform: translateY(1px); }
@media (hover: hover) { .votar button:hover { background: var(--tarjeta-3); } }
.votar button img, .votar button .escudo-vacio { width: 34px; height: 34px; }
.votar button b { font-size: 13px; text-align: center; line-height: 1.2; }
.voto-fila { padding: 8px 0; }
.voto-fila + .voto-fila { border-top: 1px solid var(--borde-suave); }
.voto-fila.mio .voto-cab > span:first-child { color: var(--texto); font-weight: 700; }
.voto-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--suave); margin-bottom: 6px; }
.voto-cab b { color: var(--texto); }
.voto-barras { height: 5px; border-radius: 1px; background: var(--tarjeta-2); overflow: hidden; margin-top: 3px; }
.voto-barras .publico { height: 100%; background: var(--visita); }
.voto-barras .analista { height: 100%; background: var(--marca); }

/* presión */
.presion { width: 100%; height: auto; display: block; margin-top: 6px; }
.presion-ejes { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tenue); margin-top: 2px; }
.seguimiento { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 12px; padding: 5px 10px; border-radius: 3px; font-size: 13px; font-weight: 700; background: var(--ambar-fondo); color: var(--ambar); }
.seguimiento.cumplida { background: var(--verde-fondo); color: var(--verde); }
.seguimiento.perdida { background: var(--peligro-fondo); color: var(--peligro-2); }
.seguimiento.mini { margin: 4px 0 0; padding: 2px 8px; font-size: 12px; }

/* tres niveles */
.niveles { display: grid; gap: 4px; }
.nivel { border-radius: var(--radio-s); padding: 12px 14px; background: var(--tarjeta-2); border-left: 5px solid var(--tarjeta-3); }
.nivel.fuerte { border-left-color: var(--verde); }
.nivel.media { border-left-color: var(--ambar); }
.nivel.arriesgada { border-left-color: var(--peligro); }
.nivel-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nivel-cab small { color: var(--suave); font-size: 12px; }
.nivel-chip { font-family: var(--titulo); font-size: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 1px 12px 0 7px; clip-path: var(--corte); }
.fuerte .nivel-chip { background: var(--verde); color: #06140b; }
.media .nivel-chip { background: var(--ambar); color: #1c1403; }
.arriesgada .nivel-chip { background: var(--peligro); color: #fff; }
.nivel-cuerpo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nivel-cuerpo b { font-family: var(--titulo); font-size: 23px; font-weight: 800; line-height: 1.05; }
.nivel-num { text-align: right; flex: none; }
.nivel-num span { display: block; font-family: var(--titulo); font-size: 30px; font-weight: 800; line-height: 1; }
.nivel-num small { font-size: 11.5px; color: var(--suave); }
.nivel-texto { margin: 8px 0 0 !important; font-size: 13.5px; color: var(--suave) !important; }
.otros-niveles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mini-nivel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); background: var(--tarjeta-2); border-radius: 3px; padding: 4px 8px; }
.mini-nivel i { font-style: normal; font-family: var(--titulo); font-weight: 700; font-size: 13px; text-transform: uppercase; }
.mini-nivel.media i { color: var(--ambar); }
.mini-nivel.arriesgada i { color: var(--peligro-2); }
.mini-nivel b { color: var(--texto); }

/* por qué y factores */
.lista-claves.a-favor li::before { background: var(--verde); }
.pero { padding: 11px 13px; border-radius: var(--radio-s); background: var(--tarjeta-2); margin-bottom: 4px; font-size: 13.5px; border-left: 4px solid var(--ambar); }
.pero b { display: block; color: var(--ambar); font-weight: 700; margin-bottom: 3px; }
.pero span { color: var(--texto-2); }
.porcentaje-explicado { margin-top: 10px; padding: 12px 14px; border-radius: var(--radio-s); background: var(--fondo); font-size: 13.5px; color: var(--texto-2); }
.factores { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 600px) { .factores { grid-template-columns: 1fr 1fr; } }
.factor { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--radio-s); background: var(--tarjeta-2); }
.factor b { display: block; font-size: 13.5px; }
.factor small { display: block; font-size: 12.5px; color: var(--suave); line-height: 1.38; margin-top: 2px; }
.factor-icono { flex: none; width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.factor.si .factor-icono { background: var(--verde); color: #06140b; }
.factor.no .factor-icono { background: var(--ambar); color: #1c1403; }
.factor.neutro .factor-icono { background: var(--tarjeta-3); color: var(--suave); }
.historial-cab .dato:nth-child(1) .nivel-chip { background: var(--verde); color: #06140b; }
.historial-cab .dato:nth-child(2) .nivel-chip { background: var(--ambar); color: #1c1403; }
.historial-cab .dato:nth-child(3) .nivel-chip { background: var(--peligro); color: #fff; }
.liga-chip.ecuador { color: var(--texto); }
.liga-chip.ecuador.activo { background: #f4c400; color: #151000; }
.grupo-ecuador .grupo-liga-titulo { color: #f4c400; font-size: 19px; }
.chip-comp { font-size: 11px; font-weight: 700; color: var(--suave); background: var(--tarjeta-2); padding: 2px 7px; border-radius: 3px; }
.calc { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde-suave); }
.calc label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--suave); font-weight: 600; }
.calc input { width: 86px; height: 38px; border-radius: var(--radio-s); border: 2px solid transparent; background: var(--fondo); color: var(--texto); font-family: var(--titulo); font-size: 20px; font-weight: 700; text-align: center; outline: none; }
.calc input:focus { border-color: var(--marca); }
.calc-res { display: block; margin-top: 8px; font-size: 13px; color: var(--suave); }
.calc-res.si { color: var(--verde); }
.calc-res.justo { color: var(--ambar); }
.calc-res.no { color: var(--peligro-2); }
.apuesta.estrella { border-left-color: #f4c400; }
.apuesta.estrella .apuesta-izq small { color: #f4c400; }
.sello-estrella { display: inline-block; margin: 6px 0 2px; padding: 2px 14px 1px 8px; background: #f4c400; color: #151000; font-family: var(--titulo); font-size: 15px; font-weight: 700; text-transform: uppercase; clip-path: var(--corte); }
.terminados { margin-top: 20px; border-radius: var(--radio); background: var(--capa); }
.terminados summary { cursor: pointer; padding: 14px 16px; font-family: var(--titulo); font-weight: 700; font-size: 17px; text-transform: uppercase; color: var(--suave); list-style: none; display: flex; align-items: center; gap: 8px; }
.terminados summary::-webkit-details-marker { display: none; }
.terminados summary::before { content: ''; width: 0; height: 0; border-left: 7px solid var(--marca); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform 0.15s ease; }
.terminados[open] summary::before { transform: rotate(90deg); }
.terminados-lista { padding: 0 10px 4px; opacity: 0.85; }

/* cuentas y suscripción */
.pastilla.cuenta { text-decoration: none; }
.pastilla.cuenta.pagar { background: var(--marca); color: var(--sobre-marca); }
@media (hover: hover) { .pastilla.cuenta.pagar:hover { background: var(--marca-oscuro); } }
.pastilla.cuenta.premium { background: var(--marca); color: var(--sobre-marca); }
#pastilla-aciertos { display: none; }
@media (min-width: 480px) { #pastilla-aciertos:not(.oculto) { display: inline-flex; } }
.aviso-vence { margin: 8px 0; padding: 10px 12px; border-radius: var(--radio-s); background: var(--ambar-fondo); border-left: 4px solid var(--ambar); color: var(--ambar-texto); font-size: 13.5px; }
.aviso-vence a { color: #fff; font-weight: 800; }
.formulario { max-width: 480px; margin: 10px auto 0; }
.titulo-pagina { display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-size: 32px; font-weight: 800; line-height: 1; text-transform: uppercase; margin: 12px 0 16px; }
.titulo-pagina::before { content: ''; width: 16px; height: 26px; background: var(--marca); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); flex: none; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--suave); margin-bottom: 12px; }
.formulario input:not([type=checkbox]):not([type=file]) { height: 48px; border-radius: var(--radio-s); border: 2px solid transparent; background: var(--tarjeta-2); color: var(--texto); padding: 0 14px; font: inherit; font-size: 16px; outline: none; transition: border-color 0.18s ease; }
.formulario input:focus { border-color: var(--marca); }
.formulario label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--texto); }
.formulario label.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--marca); }
.formulario a { color: var(--marca-2); }
.cambio-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border-radius: var(--radio-s); background: var(--tarjeta); margin-bottom: 12px; overflow: hidden; }
.cambio-modo button { height: 44px; font-family: var(--titulo); font-size: 17px; font-weight: 700; text-transform: uppercase; color: var(--suave); position: relative; transition: color 0.18s ease; }
.cambio-modo button.activo { color: var(--texto); background: var(--tarjeta-2); }
.cambio-modo button.activo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--marca); }
.boton-grande { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: var(--radio-s); background: var(--marca); color: var(--sobre-marca); font-family: var(--titulo); font-weight: 800; font-size: 20px; letter-spacing: 0.3px; text-transform: uppercase; text-decoration: none; transition: background 0.18s ease, transform 0.12s ease; }
@media (hover: hover) { .boton-grande:hover { background: var(--marca-oscuro); } }
.boton-grande:active { transform: translateY(1px); }
.boton-grande.secundario { background: var(--tarjeta-2); color: var(--texto); margin-top: 6px; }
@media (hover: hover) { .boton-grande.secundario:hover { background: var(--tarjeta-3); } }
.boton-grande:disabled { opacity: 0.6; }
.boton-mini { font-size: 12.5px; font-weight: 800; color: var(--sobre-marca); background: var(--marca); padding: 5px 10px; border-radius: 3px; }
.error { color: var(--peligro-2); font-size: 13.5px; margin: 0 0 10px; }
.muro { text-align: center; background: var(--tarjeta-2); border-top: 4px solid var(--marca); }
.muro-candado { font-size: 30px; margin-bottom: 4px; }
.muro-lista { list-style: none; padding: 0; margin: 12px 0 16px; text-align: left; display: grid; gap: 6px; font-size: 14px; }
.muro-lista li { padding: 8px 12px; background: var(--tarjeta); border-radius: var(--radio-s); }
.apuesta.bloqueada { border-left-color: var(--tarjeta-3); }
.apuesta.bloqueada b { color: var(--suave); font-size: 19px; }
.plan .precio { font-family: var(--titulo); font-size: 52px; font-weight: 800; line-height: 1; margin: 8px 0; }
.plan .precio small { font-size: 18px; color: var(--suave); }
.datos-pago { white-space: normal; background: var(--fondo); border-radius: var(--radio-s); padding: 12px 14px; font-size: 14.5px; line-height: 1.6; user-select: all; }
.subir { background: var(--tarjeta-2); border-radius: var(--radio-s); padding: 14px; text-align: center; cursor: pointer; }
.subir input { margin-top: 8px; color: var(--suave); }
.vista-previa { max-width: 100%; max-height: 260px; border-radius: var(--radio-s); margin: 0 auto 12px; }
.estado-pago { font-family: var(--cuerpo) !important; font-size: 13px !important; }
.estado-pago.aprobado { color: var(--verde); }
.estado-pago.rechazado { color: var(--peligro-2); }
.estado-pago.pendiente { color: var(--ambar); }
.texto-legal p { font-size: 14px; }
.fecha-prox { font-size: 13px; font-weight: 700; color: var(--suave); margin: 14px 0 6px; }
.fecha-prox::first-letter { text-transform: uppercase; }
.enlace-texto { display: block; margin: 12px auto 0; color: var(--suave); font-size: 13.5px; text-decoration: underline; text-underline-offset: 2px; }
.tipo-baja { font-family: var(--cuerpo) !important; font-size: 12px !important; color: var(--peligro-2); }
.tipo-duda { font-family: var(--cuerpo) !important; font-size: 12px !important; color: var(--ambar); }
.fila-volver { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.campana { height: 36px; padding: 0 12px; border-radius: var(--radio-s); background: var(--tarjeta-2); font-weight: 700; font-size: 13px; color: var(--suave); transition: background 0.18s ease; }
@media (hover: hover) { .campana:hover { background: var(--tarjeta-3); } }
.campana.activo { background: var(--marca); color: var(--sobre-marca); }
.campana.mini { height: 28px; padding: 0 10px; font-family: var(--cuerpo); font-size: 12px; margin-left: auto; text-transform: none; letter-spacing: 0; }

/* tablas de posiciones */
.tabla-pos { overflow-x: auto; }
.tabla-pos table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-pos th { font-size: 12px; font-weight: 700; color: var(--tenue); padding: 6px 4px; text-align: center; }
.tabla-pos td { padding: 8px 4px; text-align: center; font-variant-numeric: tabular-nums; }
.tabla-pos tbody tr:nth-child(odd) td { background: var(--capa); }
.tabla-pos .izq { text-align: left; }
.tabla-pos .pos { width: 32px; font-family: var(--titulo); font-size: 16px; font-weight: 700; color: var(--suave); box-shadow: inset 4px 0 0 transparent; }
.tabla-pos tr.z-copa .pos { box-shadow: inset 4px 0 0 var(--verde); color: var(--verde); }
.tabla-pos tr.z-media .pos { box-shadow: inset 4px 0 0 var(--ambar); color: var(--ambar); }
.tabla-pos tr.z-desc .pos { box-shadow: inset 4px 0 0 var(--peligro); color: var(--peligro-2); }
.equipo-celda { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.equipo-celda img, .equipo-celda .escudo-vacio { width: 20px; height: 20px; }
.equipo-celda span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-weight: 600; }
.tabla-pos .pts { font-family: var(--titulo); font-size: 19px; font-weight: 800; }
.forma.mini { gap: 2px; justify-content: center; }
.forma.mini i { width: 18px; height: 18px; border-radius: 2px; font-size: 12px; }
@media (max-width: 480px) { .tabla-pos .forma-col { display: none; } }
.leyenda-zonas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 10px 2px; font-size: 12.5px; color: var(--suave); }
.leyenda-zonas i { display: inline-block; width: 10px; height: 10px; border-radius: 1px; margin-right: 6px; vertical-align: -1px; }
.leyenda-zonas i.z-copa { background: var(--verde); }
.leyenda-zonas i.z-media { background: var(--ambar); }
.leyenda-zonas i.z-desc { background: var(--peligro); }
@media (max-width: 480px) {
  .tabla-pos .gep { display: none; }
  .equipo-celda { min-width: 0; }
  .equipo-celda span { max-width: 46vw; }
}
.msg.error { color: var(--suave); font-style: italic; }

/* Celulares chicos: en la cabecera manda la pastilla de "en vivo" y la cuenta; el nombre se acorta. */
@media (max-width: 400px) {
  .marca-sub { display: none; }
  .marca-nombre { font-size: 21px; }
  .pastilla { padding: 0 9px; font-size: 12.5px; }
  .pastilla.vivo { padding-right: 14px; font-size: 14px; }
}
@media (max-width: 360px) {
  .marca-nombre { font-size: 18px; }
  .marca-logo { width: 30px; height: 30px; }
}

/* íconos dibujados (reemplazan a los emojis) */
.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; display: inline-block; }
.ico-estrella { font-style: normal; color: var(--dorado); font-family: system-ui, sans-serif; }
.sello-estrella .ico-estrella { color: #151000; }
.campana { display: inline-flex; align-items: center; gap: 6px; }
.muro-candado .ico { width: 34px; height: 34px; color: var(--marca-2); }
.muro-lista li { position: relative; padding-left: 28px; }
.muro-lista li::before { content: ''; position: absolute; left: 12px; top: 15px; width: 7px; height: 7px; background: var(--marca); }
.aviso.verde { background: var(--verde-fondo); border-left-color: var(--verde); color: var(--verde); }
.toast-gol { font-family: var(--titulo); font-size: 18px; font-weight: 800; color: var(--sobre-marca); background: var(--marca); padding: 0 10px 0 6px; clip-path: var(--corte); }
/* En celulares chicos el ícono se queda (es la marca): solo se achica un poco. */
@media (max-width: 400px) { .barra .marca-logo { width: 32px; height: 32px; } .marca-nombre { font-size: 22px; } }
.principal-nota { font-size: 12.5px; color: var(--suave); margin-top: 6px; }
.principal-etiq .ico { margin-right: 4px; }
/* La celda del equipo sigue siendo celda de tabla (si es flex, la fila se desalinea y la franja se corta). */
.tabla-pos td.equipo-celda { display: table-cell; white-space: nowrap; }
.tabla-pos td.equipo-celda img, .tabla-pos td.equipo-celda .escudo-vacio { display: inline-block; vertical-align: middle; margin-right: 8px; }
.tabla-pos td.equipo-celda .escudo-vacio { line-height: 20px; text-align: center; }
.tabla-pos td.equipo-celda span { display: inline-block; vertical-align: middle; }

/* ---------- noticias ---------- */
.nav-interior { grid-template-columns: repeat(5, 1fr); }
.nav a { font-size: 11.5px; }
.noticia { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: start; padding: 10px; border-radius: var(--radio); background: var(--tarjeta); transition: background 0.18s ease, transform 0.12s ease; }
.noticia:active { transform: translateY(1px); }
@media (hover: hover) { .noticia:hover { background: var(--tarjeta-2); } }
.noticia.sin-foto { grid-template-columns: minmax(0, 1fr); border-left: 4px solid var(--tarjeta-3); }
.noticia-foto { order: 2; aspect-ratio: 4 / 3; border-radius: var(--radio-s); overflow: hidden; background: var(--tarjeta-2); }
.noticia-foto img { width: 100%; height: 100%; object-fit: cover; }
.noticia-texto b { display: block; font-family: var(--titulo); font-size: 19px; font-weight: 700; line-height: 1.1; text-wrap: pretty; }
.noticia-texto small { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12px; color: var(--suave); }
.noticia-medio { font-weight: 700; color: var(--texto); }
.noticia-medio::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--marca); margin-right: 6px; vertical-align: 1px; }
.noticias-lista { display: grid; gap: 6px; }
.caja .noticias-lista .noticia { background: var(--tarjeta-2); }
@media (hover: hover) { .caja .noticias-lista .noticia:hover { background: var(--tarjeta-3); } }
.noticia.grande { grid-template-columns: 1fr; padding: 0; overflow: hidden; margin-bottom: 6px; border-left: 0; }
.noticia.grande .noticia-foto { order: 0; aspect-ratio: 16 / 9; border-radius: 0; }
.noticia.grande .noticia-texto { padding: 12px 14px 14px; border-left: 5px solid var(--marca); }
.noticia.grande .noticia-texto b { font-size: 27px; line-height: 1.02; }
.noticia.grande .noticia-texto p { margin: 8px 0 0; color: var(--texto-2); font-size: 14px; }
.nota-noticias { color: var(--tenue); font-size: 12px; text-align: center; margin: 14px 8px 0; }
@media (max-width: 360px) { .noticia { grid-template-columns: minmax(0, 1fr) 84px; } .nav a { font-size: 10.5px; } }

/* =====================================================================
   Estilo limpio (como FotMob): tarjetas redondeadas, títulos en letra normal,
   modo claro y oscuro. Las letras altas quedan solo para marcadores y números.
   ===================================================================== */
:root { --radio: 16px; --radio-s: 10px; --corte: none; }

/* Modo claro: automático si el celular está en claro, o elegido a mano. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --fondo: #f1f2f4; --capa: #ffffff; --tarjeta: #ffffff; --tarjeta-2: #f1f2f4; --tarjeta-3: #e4e6ea;
    --borde: #d9dce1; --borde-suave: #eceef1; --texto: #121417; --texto-2: #2f343b; --suave: #5f656e; --tenue: #8d929a;
    --marca-2: #14161b; --marca-fondo: rgba(200, 240, 30, 0.28); --marca-texto: #14161b; --peligro-2: #c81e28; --peligro-fondo: rgba(217, 34, 44, 0.09); --peligro-texto: #a3141d;
    --verde: #12864a; --verde-fondo: rgba(18, 134, 74, 0.1); --ambar: #b5760a; --ambar-fondo: rgba(240, 173, 46, 0.16); --ambar-texto: #7a4f00;
    --visita: #30353c; --empate: #b9bdc3; --nav: #ffffff; --dorado: #c99700;
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --fondo: #f1f2f4; --capa: #ffffff; --tarjeta: #ffffff; --tarjeta-2: #f1f2f4; --tarjeta-3: #e4e6ea;
  --borde: #d9dce1; --borde-suave: #eceef1; --texto: #121417; --texto-2: #2f343b; --suave: #5f656e; --tenue: #8d929a;
  --marca-2: #14161b; --marca-fondo: rgba(200, 240, 30, 0.28); --marca-texto: #14161b; --peligro-2: #c81e28; --peligro-fondo: rgba(217, 34, 44, 0.09); --peligro-texto: #a3141d;
  --verde: #12864a; --verde-fondo: rgba(18, 134, 74, 0.1); --ambar: #b5760a; --ambar-fondo: rgba(240, 173, 46, 0.16); --ambar-texto: #7a4f00;
  --visita: #30353c; --empate: #b9bdc3; --nav: #ffffff; --dorado: #c99700;
  color-scheme: light;
}

/* Tarjetas: en claro se separan del fondo con una sombra muy suave. */
.caja, .partido, .jugada, .noticia, .vacio, .terminados { box-shadow: 0 1px 2px rgba(16, 18, 22, 0.06); }
.caja h3, .seccion-titulo h2, .titulo-pagina, .hoja-cab b, .sub, .vacio b, .grupo-liga-titulo, .terminados summary {
  font-family: var(--cuerpo); text-transform: none; letter-spacing: -0.2px;
}
.seccion-titulo h2 { font-size: 22px; font-weight: 800; }
.seccion-titulo h2::before, .titulo-pagina::before { width: 5px; height: 20px; border-radius: 3px; clip-path: none; }
.titulo-pagina { font-size: 26px; font-weight: 800; }
.caja h3 { font-size: 17px; font-weight: 800; }
.sub { font-size: 14px; font-weight: 800; }
.vacio b { font-size: 17px; font-weight: 800; }
.grupo-liga-titulo { font-size: 14px; font-weight: 800; }
.grupo-ecuador .grupo-liga-titulo { font-size: 15px; }
.terminados summary { font-size: 14px; font-weight: 700; }
.hoja-cab b { font-size: 16px; font-weight: 800; }
.dia, .pestana, .cambio-modo button { font-family: var(--cuerpo); text-transform: none; font-size: 14.5px; font-weight: 700; letter-spacing: 0; }
.dia.activo::after, .pestana.activo::after { border-radius: 3px 3px 0 0; }
.dias { border-radius: var(--radio-s); }
.liga-chip, .fecha-chip, .pastilla, .campana, .volver, .sugerencias button, .boton-mini, .cerrar { border-radius: 999px; }
.boton-grande { border-radius: 14px; font-family: var(--cuerpo); text-transform: none; font-size: 16px; letter-spacing: 0; }
.boton-chat { border-radius: 999px; }
.estado-vivo, .pastilla.vivo, .principal-etiq, .urgencia, .nivel-chip, .sello-estrella, .toast-gol { clip-path: none; border-radius: 6px; padding-right: 8px; }
.pastilla.vivo { padding-right: 12px; border-radius: 999px; }
.principal-etiq, .nivel-chip, .urgencia, .sello-estrella { font-family: var(--cuerpo); text-transform: none; font-size: 12.5px; font-weight: 800; letter-spacing: 0; padding: 3px 9px; }
.marcador-col span, .duelo-marcador, .duelo-hora, .marcadores div:first-child { border-radius: 8px; }
.principal, .veredicto, .nivel, .apuesta, .pero, .aviso, .aviso-vence, .once-caja.ok { border-left-width: 4px; }
.barra { border-bottom-width: 2px; }
.ico-estrella { color: var(--dorado); }
.liga-chip.ecuador.activo { background: var(--dorado); }
.grupo-ecuador .grupo-liga-titulo { color: var(--dorado); }
.apuesta.estrella { border-left-color: var(--dorado); }
.apuesta.estrella .apuesta-izq small { color: var(--dorado); }
.sello-estrella { background: var(--dorado); }

/* En claro: lo que era "negro sobre gris" pasa a gris claro. */
:root[data-tema="claro"] .marcador-col span, :root[data-tema="claro"] .duelo-marcador, :root[data-tema="claro"] .duelo-hora,
:root[data-tema="claro"] .marcadores div:first-child, :root[data-tema="claro"] .porcentaje-explicado, :root[data-tema="claro"] .datos-pago, :root[data-tema="claro"] .calc input { background: var(--tarjeta-2); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .marcador-col span, :root:not([data-tema="oscuro"]) .duelo-marcador, :root:not([data-tema="oscuro"]) .duelo-hora,
  :root:not([data-tema="oscuro"]) .marcadores div:first-child, :root:not([data-tema="oscuro"]) .porcentaje-explicado, :root:not([data-tema="oscuro"]) .datos-pago, :root:not([data-tema="oscuro"]) .calc input { background: var(--tarjeta-2); }
}

/* Selector de tema (al pie de cada página) */
.tema { display: inline-flex; gap: 2px; padding: 3px; margin-top: 12px; border-radius: 999px; background: var(--tarjeta-2); }
.tema button { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--suave); }
.tema button.activo { background: var(--tarjeta); color: var(--texto); box-shadow: 0 1px 2px rgba(16, 18, 22, 0.12); }

/* =====================================================================
   Cancha con notas (alineación como FotMob)
   ===================================================================== */
.jdp { display: flex; align-items: center; gap: 14px; }
.jdp-foto { position: relative; flex: none; }
.jdp-foto img, .jdp-foto .sin-cara { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; background: var(--tarjeta-2); }
.jdp b { display: block; font-size: 17px; font-weight: 800; }
.jdp small { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 13px; margin-top: 2px; }
.jdp small img { width: 16px; height: 16px; }

.nota { display: inline-flex; align-items: center; gap: 2px; min-width: 30px; justify-content: center; padding: 1px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: #8a8f97; font-variant-numeric: tabular-nums; line-height: 1.5; }
.nota.n8 { background: #1f6fe0; }
.nota.n7 { background: #1a9a52; }
.nota.n6 { background: #e0861a; }
.nota.n5 { background: #d9302f; }
.jdp-foto .nota { position: absolute; top: -4px; right: -10px; }

.cancha-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 10px; }
.cancha-cab b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.cancha-cab b img { width: 20px; height: 20px; }
.cancha-cab small { color: var(--suave); font-size: 13px; font-weight: 600; }
.cancha {
  position: relative; border-radius: 14px; overflow: hidden; color: #fff;
  background: repeating-linear-gradient(180deg, var(--cancha) 0 9%, var(--cancha-2) 9% 18%);
  aspect-ratio: 68 / 105; max-height: 760px; margin: 0 auto;
}
.cancha::before { content: ''; position: absolute; inset: 10px; border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 4px; pointer-events: none; }
.cancha-linea { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: rgba(255, 255, 255, 0.28); }
.cancha-circulo { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 50%; transform: translate(-50%, -50%); }
.cancha-area { position: absolute; left: 30%; right: 30%; height: 9%; border: 2px solid rgba(255, 255, 255, 0.28); }
.cancha-area.arriba { top: 10px; border-top: 0; }
.cancha-area.abajo { bottom: 10px; border-bottom: 0; }
.mitad { position: absolute; left: 0; right: 0; height: 50%; display: flex; flex-direction: column; justify-content: space-around; padding: 3% 2%; }
.mitad.arriba { top: 0; }
.mitad.abajo { bottom: 0; flex-direction: column-reverse; }
.jug-cancha { position: relative; display: flex; flex-direction: column; align-items: center; width: 19%; min-width: 0; text-align: center; }
.jug-cara { position: relative; width: 40px; height: 40px; }
.jug-cara img, .jug-cara .sin-cara { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.85); border: 2px solid rgba(255, 255, 255, 0.9); }
.sin-cara { display: grid; place-items: center; color: #1d2025; font-weight: 800; font-size: 13px; }
.jug-cara .nota { position: absolute; top: -6px; right: -16px; font-size: 10.5px; min-width: 26px; padding: 0 5px; }
.jug-cara .marcas { position: absolute; bottom: -4px; left: -8px; display: flex; gap: 1px; }
.jug-cara .salio { position: absolute; top: -8px; left: -14px; font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, 0.55); border-radius: 999px; padding: 0 5px; line-height: 1.6; }
.marca-tarjeta { width: 8px; height: 11px; border-radius: 1.5px; background: #f6c400; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.marca-tarjeta.roja { background: #e5262d; }
.marca-gol { width: 14px; height: 14px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.marca-gol svg { width: 12px; height: 12px; }
.jug-nombre { margin-top: 5px; font-size: 11.5px; font-weight: 600; line-height: 1.15; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.jug-nombre i { font-style: normal; opacity: 0.75; margin-right: 3px; }
.jug-cancha.mejor .jug-cara img, .jug-cancha.mejor .jug-cara .sin-cara { border-color: #7fb6ff; }
.cancha-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px 0; }
.cancha-pie b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.cancha-pie b img { width: 20px; height: 20px; }
.cambios { display: grid; gap: 4px; }
.cambio { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radio-s); background: var(--tarjeta-2); font-size: 13.5px; }
.cambio img, .cambio .sin-cara { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--tarjeta-3); }
.cambio small { display: block; color: var(--suave); font-size: 12px; }
@media (min-width: 600px) { .jug-cara, .jug-cara img, .jug-cara .sin-cara { width: 48px; height: 48px; } .jug-nombre { font-size: 12.5px; } }
.jug-cancha { width: 24%; flex: 0 1 24%; }
.jug-nombre { font-size: 11px; letter-spacing: -0.2px; }
/* Jugadores ubicados por coordenadas dentro de la cancha (la cara queda centrada en su punto). */
.cancha { aspect-ratio: 68 / 118; }
.jug-cancha { position: absolute; width: 23%; transform: translate(-50%, -20px); }
.jug-cara, .jug-cara img, .jug-cara .sin-cara { width: 38px; height: 38px; }
@media (min-width: 600px) { .jug-cara, .jug-cara img, .jug-cara .sin-cara { width: 46px; height: 46px; } .jug-cancha { transform: translate(-50%, -24px); } }
.cancha { aspect-ratio: 68 / 142; }
.jug-cara .nota { top: -2px; right: -20px; }

/* ---------- goleadores bajo el marcador ---------- */
.goleadores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; margin-top: 12px; font-size: 12.5px; color: var(--suave); }
.goleadores .izq { text-align: right; }
.goleadores .der { text-align: left; }
.goleadores span { font-weight: 700; color: var(--texto); margin-left: 3px; }
.goleadores .balon .hecho-ico { width: 16px; height: 16px; margin-top: 1px; }

/* ---------- minuto a minuto ---------- */
.hechos { display: grid; gap: 4px; }
.hecho { display: grid; grid-template-columns: 38px 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radio-s); background: var(--tarjeta-2); }
.hecho.es-gol { background: var(--marca-fondo); }
.hecho-min { font-family: var(--titulo); font-size: 17px; font-weight: 800; color: var(--suave); }
.hecho-texto b { display: block; font-size: 14px; font-weight: 700; }
.hecho-texto small { display: block; font-size: 12.5px; color: var(--suave); }
.hecho-marcador { font-family: var(--titulo); font-size: 19px; font-weight: 800; padding: 1px 8px; border-radius: 8px; background: var(--tarjeta); }
.hecho .escudo, .hecho .escudo-vacio { width: 22px; height: 22px; }
.hecho-corte { text-align: center; font-size: 12px; font-weight: 700; color: var(--tenue); padding: 4px 0; }
.hecho-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; position: relative; }
.hecho-ico svg { width: 20px; height: 20px; }
.hecho-ico.gol { color: var(--texto); }
.hecho-ico.autogol { color: var(--peligro-2); }
.hecho-ico.fallado { opacity: 0.45; }
.hecho-ico.var { font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px; background: var(--texto); color: var(--fondo); border-radius: 4px; width: 26px; height: 16px; }
.tarjeta-ico { display: block; width: 11px; height: 15px; border-radius: 2px; background: #f6c400; }
.tarjeta-ico.roja { background: #e5262d; }
.tarjeta-ico.dos { position: absolute; left: 10px; top: 5px; }

/* ---------- estadísticas como FotMob ---------- */
.est-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
.est-cab span { display: flex; align-items: center; gap: 8px; }
.est-cab .escudo, .est-cab .escudo-vacio { width: 22px; height: 22px; }
.posesion { display: flex; gap: 3px; height: 32px; border-radius: 999px; overflow: hidden; font-weight: 800; font-size: 14px; color: #fff; }
.posesion div { display: flex; align-items: center; padding: 0 12px; min-width: 52px; }
.posesion .l { background: var(--marca); }
.posesion .v { background: var(--visita); color: var(--fondo); justify-content: flex-end; }
.est-titulo { text-align: center; font-size: 13px; color: var(--suave) !important; margin: 6px 0 8px !important; }
.est-fila { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 7px 0; }
.est-fila b { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.est-fila span { justify-self: start; font-weight: 700; font-size: 14.5px; padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.est-fila span:last-child { justify-self: end; }
.est-fila span.gana.local { background: var(--marca); color: var(--sobre-marca); }
.est-fila span.gana.visita { background: var(--visita); color: var(--fondo); }

/* ---------- ficha del jugador ---------- */
.jug-cancha { cursor: pointer; }
.jug-cancha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
.cambio { cursor: pointer; }
.hoja-jugador { height: min(86dvh, 720px); }
.hoja-jug-cuerpo { flex: 1; overflow-y: auto; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.ficha-jug-cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 6px; }
.ficha-jug-cab > b { font-size: 20px; font-weight: 800; }
.ficha-jug-cab .jdp-foto img, .ficha-jug-cab .jdp-foto .sin-cara { width: 84px; height: 84px; }
.ficha-jug-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 6px; }
.ficha-jug-datos div { padding: 8px 4px; border-radius: var(--radio-s); background: var(--tarjeta-2); }
.ficha-jug-datos b { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 700; }
.ficha-jug-datos b .escudo, .ficha-jug-datos b .escudo-vacio { width: 18px; height: 18px; }
.ficha-jug-datos small { color: var(--suave); font-size: 12px; }
.ficha-jug-pais { color: var(--suave); font-size: 13px; margin: 2px 0 0; min-height: 1em; }

/* ---------- seguir, compartir y página de liga ---------- */
.acciones-partido { display: inline-flex; gap: 6px; }
.escudo-seguir { position: relative; }
.seguir-eq { position: absolute; right: -14px; top: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tarjeta); color: var(--tenue); box-shadow: 0 1px 3px rgba(16, 18, 22, 0.18); transition: color 0.18s ease, transform 0.12s ease; }
.seguir-eq:active { transform: scale(0.94); }
.seguir-eq.activo { color: var(--dorado); }
.seguir-eq .ico { width: 17px; height: 17px; }
.grupo-liga-titulo a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.grupo-liga-titulo a .ico { color: var(--dorado); width: 14px; height: 14px; }
@media (hover: hover) { .grupo-liga-titulo a:hover { color: var(--marca-2); } }
.icono-liga.mios { background: var(--dorado) !important; color: #151000; }
.icono-liga.mios .ico { width: 13px; height: 13px; }
.liga-chip.mios { display: inline-flex; align-items: center; gap: 6px; }
.liga-chip.mios .ico { color: var(--dorado); }
.liga-chip.mios.activo .ico { color: #fff; }
.detalle-liga a { color: inherit; text-decoration: underline; text-decoration-color: var(--borde); text-underline-offset: 3px; }
.liga-cab { margin: 0 -16px 4px; padding: 10px 16px 16px; background: var(--capa); }
.liga-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.liga-titulo h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.3px; }
.liga-titulo small { color: var(--suave); font-size: 13.5px; }
.boton-seguir { flex: none; height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 1.5px solid var(--texto); color: var(--texto); transition: background 0.18s ease; }
.boton-seguir.activo { background: var(--texto); color: var(--fondo); }
.enlace-liga { display: block; margin: 12px 4px 0; color: var(--marca-2); font-weight: 700; font-size: 14px; }
.tabla-pos tr.seguido td { font-weight: 800; }
.goleadores-lista { padding: 6px 12px; }
.goleador { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; }
.goleador + .goleador { border-top: 1px solid var(--borde-suave); }
.goleador-pos { font-weight: 700; color: var(--suave); text-align: center; }
.goleador > img, .goleador > .sin-cara { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--tarjeta-2); }
.goleador b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goleador small { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.goleador small img { width: 16px; height: 16px; }
.goleador-num { font-family: var(--titulo); font-size: 24px; font-weight: 800; }
@media (min-width: 700px) { .liga-cab { margin: 0 -24px 4px; padding-left: 24px; padding-right: 24px; } }
.hecho-ico.ico-cambio svg { width: 20px; height: 20px; }
.pais { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--suave); }
.pais select { font: inherit; font-weight: 700; color: var(--texto); background: var(--tarjeta-2); border: 0; border-radius: 999px; padding: 6px 12px; }
/* "Ver más" de cada liga */
.ver-mas { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: -2px 0 4px; padding: 10px; border-radius: var(--radio-s); border-top: 1px solid var(--borde-suave); font-size: 13.5px; font-weight: 700; color: var(--marca-2); background: transparent; transition: background 0.18s ease; }
@media (hover: hover) { .ver-mas:hover { background: var(--tarjeta-2); } }

/* ---------- lista compacta de partidos (estilo BeSoccer / 365) ---------- */
.caja-filas { background: var(--tarjeta); border-radius: var(--radio); overflow: hidden; box-shadow: 0 1px 2px rgba(16, 18, 22, 0.06); margin-bottom: 4px; }
.fila-partido { display: block; padding: 11px 12px 10px; transition: background 0.15s ease; }
.fila-partido + .fila-partido, .partido-extra .fila-partido, .caja-filas .ver-mas { border-top: 1px solid var(--borde-suave); }
.fila-partido:active { background: var(--tarjeta-2); }
@media (hover: hover) { .fila-partido:hover { background: var(--tarjeta-2); } }
.fp-linea { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.fp-eq { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-eq.local { justify-content: flex-end; text-align: right; }
.fp-eq .escudo, .fp-eq .escudo-vacio { width: 22px; height: 22px; flex: none; }
.fp-nombre { font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-centro { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.fp-hora { font-size: 15px; font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; }
.fp-marcador { font-family: var(--titulo); font-size: 21px; font-weight: 800; letter-spacing: 0.5px; }
.fp-centro small { font-size: 11px; font-weight: 700; color: var(--suave); margin-top: 2px; }
.fp-centro small.fp-vivo { color: var(--peligro-2); }
.fila-partido.en-vivo .fp-marcador { color: var(--peligro-2); }
.caja-filas .ver-mas { margin: 0; border-radius: 0; }
.terminados-lista .caja-filas { box-shadow: none; }
.grupo-liga { margin-bottom: 16px; }
@media (max-width: 360px) { .fp-linea { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); } .fp-nombre { font-size: 13px; } }
/* Nombres largos: hasta dos líneas en vez de cortarse ("Atlético Nacional", "Internacional de Bogotá"). */
.fp-nombre { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; overflow-wrap: anywhere; }
.fp-linea { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); gap: 6px; }
.bandera-grupo { font-size: 16px; line-height: 1; }
/* Partidos por jugarse agrupados por hora */
.fp-vs { font-size: 13px; font-weight: 700; color: var(--tenue); }

/* ---------- fases, global, rojas y pie de cada liga ---------- */
.grupo-nombres { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.grupo-nombres small { font-size: 12px; font-weight: 600; color: var(--tenue); }
.fp-global { font-size: 10.5px !important; font-weight: 700; color: var(--suave) !important; margin-top: 1px; white-space: nowrap; }
.fp-rojas { display: inline-flex; gap: 2px; flex: none; }
.fp-rojas i { width: 7px; height: 10px; border-radius: 1.5px; background: #e5262d; }
.pie-grupo { display: flex; justify-content: center; gap: 4px; padding: 8px; font-size: 13px; font-weight: 700; color: var(--suave); }
@media (hover: hover) { .pie-grupo:hover { color: var(--marca-2); } }

/* ---------- pestañas de días con favoritos y calendario ---------- */
.dias { display: flex; }
.dias .dia { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding-left: 2px; padding-right: 2px; font-size: 13.5px; }
.dias .dia-fav, .dias .dia-cal { flex: 0 0 44px; }
.dias .dia .ico { width: 19px; height: 19px; }
.dias .dia-fav.activo { color: var(--dorado); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fecha-elegida { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 12px; padding: 10px 14px; border-radius: var(--radio-s); background: var(--tarjeta); }
.fecha-elegida b { font-size: 14px; }
.fecha-elegida b::first-letter { text-transform: uppercase; }
.fecha-elegida button { font-size: 13px; font-weight: 700; color: var(--marca-2); }

/* calendario */
.calendario { position: fixed; z-index: 45; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 380px); padding: 14px; border-radius: var(--radio); background: var(--tarjeta); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-cab > div { display: flex; align-items: center; gap: 8px; }
.cal-cab b { font-size: 15px; text-transform: capitalize; min-width: 130px; text-align: center; }
.cal-cab button { font-weight: 800; color: var(--marca-2); padding: 4px 8px; border-radius: 8px; }
.cal-cab #cal-ant, .cal-cab #cal-sig { font-size: 20px; color: var(--texto); }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-sem span { font-size: 11.5px; font-weight: 700; color: var(--tenue); }
.cal-dias button { aspect-ratio: 1; border-radius: 10px; font-weight: 700; font-size: 14px; background: var(--tarjeta-2); }
.cal-dias button:disabled { opacity: 0.3; cursor: default; }
.cal-dias button.hoy { color: var(--marca-2); box-shadow: inset 0 0 0 2px var(--marca); }
.cal-dias button.elegido { background: var(--marca); color: var(--sobre-marca); }

/* favoritos */
.mis-fav { margin-bottom: 12px; padding: 12px; border-radius: var(--radio); background: var(--tarjeta); }
.mis-fav-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mis-fav-cab a { font-size: 13px; font-weight: 700; color: var(--marca-2); }
.mis-fav-lista { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.mis-fav-lista::-webkit-scrollbar { display: none; }
.fav-item { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.fav-item .escudo, .fav-item .escudo-vacio { width: 40px; height: 40px; }
.fav-item small { font-size: 11.5px; font-weight: 600; color: var(--texto-2); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-item.buscar span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--marca); color: var(--marca-2); font-size: 22px; font-weight: 700; }
.fav-liga { width: 40px; height: 40px; border-radius: 12px; background: var(--marca); color: var(--sobre-marca); display: grid; place-items: center; flex: none; }
.fav-liga svg { fill: currentColor; }
.fav-liga svg { width: 20px; height: 20px; }
.dia-fav-titulo { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 2px 6px; }
.dia-fav-titulo span { font-weight: 800; font-size: 15px; }
.dia-fav-titulo span::first-letter { text-transform: uppercase; }
.dia-fav-titulo small { color: var(--tenue); font-size: 12px; font-weight: 600; }

/* siguiendo */
.buscador { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border-radius: 999px; background: var(--tarjeta); margin-bottom: 10px; color: var(--suave); }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--texto); font: inherit; font-size: 16px; outline: none; }
.resultado-seg { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; }
.resultado-seg + .resultado-seg { border-top: 1px solid var(--borde-suave); }
.resultado-seg .escudo, .resultado-seg .escudo-vacio, .resultado-seg .fav-liga { width: 32px; height: 32px; }
.resultado-seg b { display: block; font-size: 14.5px; }
.resultado-seg small { color: var(--suave); font-size: 12.5px; }
.grilla-seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.seg-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: var(--radio-s); background: var(--tarjeta); }
.seg-item .escudo, .seg-item .escudo-vacio, .seg-item .fav-liga { width: 38px; height: 38px; }
.seg-item small { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.seg-quitar { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; color: var(--tenue); }
.alerta-fila { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }
.alerta-fila + .alerta-fila { border-top: 1px solid var(--borde-suave); }
.alerta-fila span, .alerta-fila b { flex: 1; font-size: 14.5px; }
.alerta-fila .escudo, .alerta-fila .escudo-vacio { width: 26px; height: 26px; }
.interruptor { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--tarjeta-3); position: relative; cursor: pointer; transition: background 0.18s ease; flex: none; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease; }
.interruptor:checked { background: var(--verde); }
.interruptor:checked::after { transform: translateX(18px); }

/* ligas por país */
.pais-ligas { margin-bottom: 14px; }
.pais-cab { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; font-weight: 800; font-size: 14.5px; }
.pais-cab small { margin-left: auto; color: var(--tenue); font-weight: 700; }
.liga-fila { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; }
.liga-fila + .liga-fila { border-top: 1px solid var(--borde-suave); }
.liga-fila .fav-liga { width: 30px; height: 30px; border-radius: 9px; }
.liga-fila .fav-liga svg { width: 16px; height: 16px; }
.liga-fila b { font-size: 14.5px; font-weight: 700; }
.liga-fila-est { color: var(--dorado); }
.liga-chip.todas-ligas { display: inline-flex; align-items: center; color: var(--marca-2); font-weight: 700; }

/* llaves */
.llaves { display: grid; gap: 6px; }
.llave { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 4px 10px; padding: 10px 12px; border-radius: var(--radio-s); background: var(--tarjeta); }
.llave-eq { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
.llave-eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llave-eq.gana { font-weight: 800; }
.llave-eq .escudo, .llave-eq .escudo-vacio { width: 22px; height: 22px; }
.llave-res { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-around; align-items: center; font-family: var(--titulo); font-size: 18px; }
.llave-res small { font-family: var(--cuerpo); font-size: 12px; color: var(--tenue); }
.llave-partidos { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.llave-partidos a { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--tarjeta-2); color: var(--suave); }

/* compartir noticia */
.compartir-noticia { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--suave); padding: 2px 6px; border-radius: 999px; }
.compartir-noticia .ico { width: 14px; height: 14px; }
@media (hover: hover) { .compartir-noticia:hover { color: var(--marca-2); } }
.cal-cab b { text-transform: none; }
.cal-cab b::first-letter { text-transform: uppercase; }
.dias .dia { white-space: nowrap; font-size: 13px; }
.dias .dia .n { margin-left: 3px; }
@media (max-width: 380px) { .dias .dia { font-size: 12.5px; } .dias .dia-fav, .dias .dia-cal { flex-basis: 38px; } }
.fp-nombre { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
/* El minuto del cambio va abajo a la derecha de la foto, para no tapar el nombre de la fila de arriba. */
.jug-cara .salio { top: auto; left: auto; bottom: -2px; right: -18px; }

/* ---------- Siguiendo: tocar un equipo abre su página; la ✕ es aparte ---------- */
.seg-item > a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; width: 100%; }
.seg-item .seg-quitar { top: 2px; right: 2px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 50%; font-size: 12px; }
.seg-item .seg-quitar:hover { background: var(--tarjeta-2); color: var(--texto); }
.resultado-enlace { display: contents; color: inherit; text-decoration: none; }
#sugeridos .caja-filas { margin-bottom: 6px; }
#sugeridos .sub:first-child { margin-top: 18px; }

/* ---------- página del equipo ---------- */
.equipo-titulo { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; }
.equipo-titulo > .escudo, .equipo-titulo > .escudo-vacio { width: 56px; height: 56px; }
.equipo-titulo h1 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.3px; }
.equipo-titulo small { display: block; color: var(--suave); font-size: 13.5px; margin-top: 2px; }
.equipo-forma { justify-content: flex-start; margin-top: 8px; }
.numeros-grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.numeros-grilla div { padding: 10px 4px; border-radius: var(--radio-s); background: var(--tarjeta-2); text-align: center; }
.numeros-grilla b { display: block; font-family: var(--titulo); font-size: 24px; font-weight: 800; line-height: 1; }
.numeros-grilla small { display: block; margin-top: 4px; color: var(--suave); font-size: 11.5px; }
.numeros-grilla .g b { color: var(--verde); }
.numeros-grilla .p b { color: var(--marca); }
.numeros-lectura { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
.numero-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--borde-suave); font-size: 14px; }
.numero-fila:first-of-type { border-top: 0; }
.numero-fila .mercado-barra { grid-column: 1 / -1; }
.tabla-pos tr.propio td { background: var(--marca-fondo); }
.tabla-pos tr.propio td.pos { box-shadow: inset 3px 0 0 var(--marca); }
.equipo-celda a { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.duelo-nombre { color: inherit; text-decoration: none; }

/* Cuenta regresiva en la cabecera del partido */
.duelo-cuenta { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; min-width: 5.2ch; }
.duelo-cuenta.ya { color: var(--peligro); font-size: 24px; }
.duelo-dia { margin: 0 0 6px; font-weight: 700; color: var(--texto-2); }
.tabla-pos tr[data-ir] { cursor: pointer; }

/* Calendario completo de una liga */
.aviso-dia { margin: 6px 2px 4px; color: var(--suave); font-size: 14.5px; }
.ver-mas-fechas { width: 100%; margin: 10px 0 4px; border-radius: var(--radio-s); background: var(--tarjeta); }
.por-definir .definir-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; }
.por-definir .definir-fila + .definir-fila { border-top: 1px solid var(--borde-suave); }
.por-definir .definir-fila b { font-size: 15px; }
.por-definir .definir-fila small { color: var(--ambar-texto, var(--suave)); background: var(--ambar-fondo, var(--tarjeta-2)); padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.toast-accion { flex-shrink: 0; border: 0; border-radius: 999px; padding: 7px 12px; background: var(--marca); color: var(--sobre-marca); font-weight: 700; font-size: 13px; cursor: pointer; }
.toast { width: min(calc(100% - 32px), 460px); justify-content: space-between; }

/* ---------- Creador del analista ---------- */
.creador-intro { margin: -2px 0 12px; color: var(--suave); font-size: 13.5px; line-height: 1.45; }
.creador-tarjeta { border-radius: var(--radio-s); background: var(--tarjeta-2); padding: 12px 14px; margin-bottom: 10px; border-left: 4px solid var(--verde); }
.creador-tarjeta.potente { border-left-color: var(--peligro); }
.creador-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.creador-cab b { font-size: 15px; }
.creador-cab small { color: var(--suave); font-size: 12px; text-align: right; }
.creador-pata { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; font-size: 14.5px; font-weight: 600; }
.creador-pata + .creador-pata { border-top: 1px solid var(--borde-suave); }
.creador-pata small { color: var(--suave); font-weight: 700; }
.creador-pata i { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-2); }
.creador-pata i.pata-jugador { background: var(--marca); }
.creador-pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--borde); font-size: 13.5px; color: var(--suave); }
.creador-pie b { color: var(--texto); font-family: var(--titulo); font-size: 19px; }
.creador-nota { margin: 4px 0 0; font-size: 12.5px; color: var(--tenue); }

/* ---------- Apuestas de jugadores (pestaña Mercados) ---------- */
#caja-jugadores .ligas { margin: 0 0 10px; }
.jug-mercado-eq h4 { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 14px; }
.jug-mercado-eq h4 .escudo, .jug-mercado-eq h4 .escudo-vacio { width: 20px; height: 20px; }
.jug-mercado { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--borde-suave); }
.jug-mercado b { display: block; font-size: 13.5px; }
.jug-mercado small { display: block; color: var(--suave); font-size: 11.5px; margin-top: 1px; }
.jug-mercado > span { text-align: right; font-family: var(--titulo); font-size: 18px; font-weight: 800; }
.jug-mercado > span small { font-family: var(--cuerpo); font-size: 11px; font-weight: 600; }
.creador-enlace { display: block; color: inherit; text-decoration: none; }
.jug-mercado-eq + .jug-mercado-eq { margin-top: 12px; }
.jug-mercado > span { flex-shrink: 0; min-width: 64px; white-space: nowrap; }
.jug-mercado > div { min-width: 0; }

/* ---------- Revisa tu apuesta ---------- */
.revisar-entrada { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; color: inherit; text-decoration: none; border-left: 4px solid var(--marca); }
.revisar-entrada b { font-size: 17px; }
.revisar-entrada span { grid-column: 1; color: var(--suave); font-size: 13.5px; line-height: 1.4; }
.revisar-entrada i { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 22px; color: var(--marca); }
.ticket-cuota { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--suave); }
.ticket-cuota input { width: 100%; font: inherit; font-size: 16px; font-weight: 700; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borde); background: var(--tarjeta-2); color: var(--texto); }
.ticket-quitar { border: 0; background: none; color: var(--tenue); font-size: 14px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.ticket-quitar:hover { background: var(--tarjeta-2); }
.boton-secundario { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 10px; border-radius: 999px; border: 1.5px solid var(--texto); background: none; color: var(--texto); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-align: center; }
.enlace-simple { display: block; margin: 10px auto 0; border: 0; background: none; color: var(--suave); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.ticket-veredicto { border-left: 5px solid var(--ambar); }
.ticket-veredicto.verde { border-left-color: var(--verde); }
.ticket-veredicto.rojo { border-left-color: var(--peligro); }
.ticket-veredicto.verde .principal-texto { color: var(--verde); }
.ticket-veredicto.rojo .principal-texto { color: var(--peligro); }
.ticket-valor { margin: 10px 0 0; font-size: 14px; }
.ticket-comentario { margin-top: 12px; padding: 12px 14px; border-radius: var(--radio-s); background: var(--tarjeta-2); font-size: 14.5px; line-height: 1.5; }
.ticket-nota { padding: 10px 12px; border-radius: var(--radio-s); margin-bottom: 6px; font-size: 13.5px; background: var(--tarjeta-2); border-left: 4px solid var(--borde); }
.ticket-nota.contradice, .ticket-nota.repetida { border-left-color: var(--peligro); }
.ticket-nota.de_la_mano { border-left-color: var(--verde); }
.ticket-sugerencia { border-left: 4px solid var(--verde); }
.t-badge { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--tarjeta-3); color: var(--texto-2); }
.t-badge.verde { background: var(--verde-fondo); color: var(--verde); }
.t-badge.rojo { background: var(--peligro-fondo); color: var(--peligro-texto); }

/* ---------- Casa de apuestas del analista ---------- */
.ticket-foto.ancho { width: 100%; margin: 4px 0 12px; }
.casa-liga { margin-bottom: 12px; border-radius: var(--radio); overflow: hidden; background: var(--tarjeta); }
.casa-liga-cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--tarjeta-2); font-weight: 800; font-size: 14px; }
.casa-liga-cab small { display: grid; grid-template-columns: repeat(3, 52px); gap: 4px; margin-right: 46px; text-align: center; color: var(--suave); font-weight: 700; }
.casa-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto 42px; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--borde-suave); }
.casa-equipos { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
.casa-equipos small { color: var(--suave); font-size: 12px; font-weight: 700; }
.casa-equipos b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.casa-equipos .escudo, .casa-equipos .escudo-vacio { width: 18px; height: 18px; flex-shrink: 0; }
.casa-cuotas { display: grid; grid-template-columns: repeat(3, 52px); gap: 4px; }
.casa-cuota { height: 44px; border: 0; border-radius: 8px; background: var(--tarjeta-2); color: var(--texto); font-family: var(--titulo); font-size: 17px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s; }
.casa-cuota:hover { background: var(--tarjeta-3); }
.casa-cuota.activo, .casa-sel.activo { background: var(--marca); color: var(--sobre-marca); }
.casa-mas { display: grid; place-items: center; height: 44px; border-radius: 8px; color: var(--marca); font-weight: 800; font-size: 13px; text-decoration: none; }
.casa-cab { margin: 0 -16px 4px; padding: 10px 16px 14px; background: var(--capa); }
.casa-duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; text-align: center; }
.casa-duelo > div:not(.casa-hora) { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.casa-duelo .escudo, .casa-duelo .escudo-vacio { width: 44px; height: 44px; }
.casa-duelo b { font-size: 15px; }
.casa-hora small { display: block; color: var(--suave); font-size: 12px; }
.casa-hora b { font-family: var(--titulo); font-size: 26px; }
.casa-cats { position: sticky; top: 56px; z-index: 5; background: var(--fondo); padding: 8px 0; margin: 0; }
.casa-mercado h3 { font-size: 15px; margin-bottom: 10px; }
.casa-grilla { display: grid; gap: 6px; }
.casa-grilla.c2 { grid-template-columns: 1fr 1fr; }
.casa-grilla.c3 { grid-template-columns: 1fr 1fr 1fr; }
.casa-sel { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--tarjeta-2); color: var(--texto); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.casa-grilla.c3 .casa-sel { flex-direction: column; justify-content: center; text-align: center; gap: 2px; }
.casa-sel b { font-family: var(--titulo); font-size: 17px; font-weight: 800; white-space: nowrap; }
.casa-sel:hover { background: var(--tarjeta-3); }
.boleto-barra { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 520px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #121417; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.boleto-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-weight: 800; }
.boleto-barra b { display: block; font-size: 15px; }
.boleto-barra small { display: block; font-size: 12px; opacity: .75; }
.boleto-ir { font-weight: 800; color: #ff8a8f; }
.boleto-totales { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 4px; border-top: 1px dashed var(--borde); margin-top: 6px; font-size: 13.5px; color: var(--suave); }
.boleto-totales b { color: var(--texto); font-family: var(--titulo); font-size: 19px; margin-left: 4px; }

/* Boleto agrupado por partido ("crea tu apuesta") */
.bloque { border-radius: var(--radio-s); background: var(--tarjeta-2); padding: 10px 12px; margin-bottom: 10px; }
.bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.bloque-cab b { font-size: 14.5px; }
.bloque-tipo { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: var(--marca); background: var(--marca-fondo); padding: 3px 8px; border-radius: 999px; }
.bloque-pata { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--borde-suave); font-size: 14px; font-weight: 600; }
.bloque.revisado .bloque-pata { grid-template-columns: 8px minmax(0, 1fr) auto; }
.bloque-pata i { width: 8px; height: 8px; border-radius: 50%; background: var(--marca); }
.bloque-pata small { color: var(--suave); font-weight: 700; }
.bloque-pata .ticket-quitar { width: 28px; height: 28px; }
.bloque-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--borde); margin-top: 4px; font-size: 13px; color: var(--suave); }
.bloque-pie b { color: var(--texto); font-family: var(--titulo); font-size: 18px; }
.bloque-pie .ticket-cuota { width: 120px; }
.bloque-pie.revisado { flex-wrap: wrap; align-items: center; }

/* Cuotas reales de la casa */
.casa-fuente { margin: 4px 2px 10px; font-size: 12.5px; color: var(--suave); }
.casa-vale-ej { color: var(--verde); font-weight: 700; }
.casa-cuota.vale, .casa-sel.vale { box-shadow: inset 0 0 0 2px var(--verde); }
.casa-cuota.vale:not(.activo), .casa-sel.vale:not(.activo) b { color: var(--verde); }
.casa-sel b small { display: block; font-family: var(--cuerpo, inherit); font-size: 10.5px; font-weight: 600; color: var(--suave); text-align: right; }
.casa-grilla.c3 .casa-sel b small { text-align: center; }
.casa-sel.activo b small { color: rgba(255,255,255,.8); }
.ticket-casa { font-size: 13px; color: var(--suave); }
.ticket-casa b { color: var(--texto); font-family: var(--titulo); font-size: 17px; }
.ticket-casa .enlace-simple { display: inline; margin: 0 0 0 6px; padding: 0; font-size: 12px; }
.calc .calc-res.si, .calc .calc-res.justo, .calc .calc-res.no { margin-top: 0; }
.pata-casa { text-align: right; font-weight: 700; color: var(--texto); }
.pata-casa em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--suave); }
.sel-casa { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--suave); }
.casa-sel.activo .sel-casa { color: rgba(255,255,255,.8); }
.t-badge.ambar { background: color-mix(in srgb, var(--ambar) 16%, transparent); color: var(--ambar); }
.bloque-pata .t-badge { margin-left: 4px; font-size: 10.5px; vertical-align: middle; }
.mejora-compara { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 12px 0 14px; }
.mejora-compara > div:not(.mejora-flecha) { padding: 10px 12px; border-radius: 10px; background: var(--tarjeta-2); }
.mejora-compara small { display: block; font-size: 11.5px; color: var(--suave); }
.mejora-compara b { display: block; font-family: var(--titulo); font-size: 22px; font-weight: 800; }
.mejora-compara span { display: block; font-size: 12px; color: var(--suave); }
.mejora-compara .nuevo { box-shadow: inset 0 0 0 2px var(--verde); }
.mejora-compara .nuevo b { color: var(--verde); }
.mejora-flecha { font-size: 20px; color: var(--suave); }

/* Logos oficiales de las competiciones: sobre fondo blanco para que se vean igual en modo claro y oscuro */
.fav-liga.con-logo, .icono-liga.con-logo { background: #fff !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.fav-liga.con-logo img { width: 74%; height: 74%; object-fit: contain; }
.grupo-liga-titulo .icono-liga.con-logo img { width: 18px; height: 18px; object-fit: contain; }
.liga-titulo-logo { width: 52px !important; height: 52px !important; border-radius: 14px !important; }
.liga-titulo > .liga-titulo-logo + div { flex: 1; }
.liga-fila { grid-template-columns: 40px 1fr auto auto; padding: 9px 12px; }
.liga-fila .fav-liga.con-logo { width: 40px; height: 40px; border-radius: 11px; }
.fav-liga.con-logo img { width: 82%; height: 82%; }

/* Mapa de tiros */
.cancha-svg { display: block; width: 100%; height: auto; border-radius: 10px; margin: 6px 0 10px; }
.tiros-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.tiros-resumen > div { padding: 10px 12px; border-radius: 10px; background: var(--tarjeta-2); }
.tiros-resumen b { font-family: var(--titulo); font-size: 26px; font-weight: 800; margin-right: 4px; }
.tiros-resumen small { font-size: 12px; color: var(--suave); }
.tiros-resumen span { display: block; font-size: 12.5px; }
.tiros-resumen em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--suave); margin-top: 2px; }
.tiros-filtro { margin-bottom: 4px; }
.tiro { cursor: pointer; }
.tiros-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--suave); }
.tiros-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ley { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.ley.gol { background: #fff; box-shadow: inset 0 0 0 2px var(--texto), inset 0 0 0 4px #fff, inset 0 0 0 6px var(--texto); }
.ley.arco { background: var(--texto); }
.ley.afuera { box-shadow: inset 0 0 0 2px var(--texto); }
.ley.bloq { position: relative; border-radius: 0; }
.ley.bloq::before, .ley.bloq::after { content: ''; position: absolute; left: 5px; top: -1px; width: 2px; height: 13px; background: var(--texto); transform: rotate(45deg); }
.ley.bloq::after { transform: rotate(-45deg); }
.tiro-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border-left: 4px solid; border-radius: 8px; background: var(--tarjeta-2); }
.tiro-info small { display: block; font-size: 11.5px; color: var(--suave); }
.tiro-info b { font-size: 14px; }
.mini-arco { position: relative; flex: none; width: 92px; height: 38px; border: 3px solid var(--texto); border-bottom: 0; border-radius: 3px 3px 0 0; }
.mini-arco .red { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, var(--linea) 7px 8px), repeating-linear-gradient(0deg, transparent 0 7px, var(--linea) 7px 8px); }
.mini-arco .balon { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--texto); box-shadow: 0 0 0 2px var(--tarjeta-2); }
.mini-arco .balon.gol { background: var(--verde); }
.mini-arco .balon.afuera, .mini-arco .balon.palo { background: var(--ambar); }

/* Buscador de arriba */
.boton-lupa { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tarjeta-2); color: var(--texto); display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .12s; }
.boton-lupa svg { width: 19px; height: 19px; }
.boton-lupa:hover { background: var(--tarjeta-3); }
.boton-lupa:active { transform: scale(.95); }
body.sin-scroll { overflow: hidden; }
.buscador-capa { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.35); display: flex; justify-content: center; animation: aparecer .15s ease; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.buscador-panel { width: 100%; max-width: 640px; height: 100%; background: var(--fondo); display: flex; flex-direction: column; }
.buscador-barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--linea); background: var(--tarjeta); }
.buscador-barra .ico { width: 20px; height: 20px; color: var(--suave); flex: none; }
.buscador-barra input { flex: 1; min-width: 0; height: 42px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--tarjeta-2); color: var(--texto); font: inherit; font-size: 16px; outline: none; }
.buscador-barra input:focus { box-shadow: 0 0 0 2px var(--marca); }
.buscador-cerrar { border: 0; background: none; color: var(--marca-2); font: inherit; font-weight: 700; cursor: pointer; padding: 8px 4px; }
.buscador-resultados { flex: 1; overflow-y: auto; padding: 6px 16px 30px; }
.buscador-sub { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--suave); }
.buscador-item { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.buscador-item:hover, .buscador-item:focus-visible { background: var(--tarjeta-2); outline: none; }
.buscador-item .escudo, .buscador-item .escudo-vacio, .buscador-item .fav-liga { width: 40px; height: 40px; }
.buscador-item b { display: block; font-size: 15px; }
.buscador-item small { display: block; font-size: 12.5px; color: var(--suave); }
.buscador-item i { font-style: normal; color: var(--suave); font-size: 20px; }
.buscador-vacio { padding: 30px 10px; text-align: center; color: var(--suave); }

/* Jugada gratis del día y el analista con candado */
.jugada-gratis { border: 2px solid var(--marca); }
.jg-res { font-size: 12.5px; font-weight: 800; color: var(--suave); }
.jg-res.acierto { color: var(--verde); }
.jg-res.fallo { color: var(--peligro-2); }
.jg-pata { display: block; padding: 10px 0; border-top: 1px solid var(--linea); color: inherit; text-decoration: none; }
.jg-apuesta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; }
.jg-apuesta b { font-size: 15.5px; }
.jg-apuesta em { font-style: normal; font-family: var(--titulo); font-size: 20px; font-weight: 800; }
.jg-puntos { display: inline-flex; gap: 4px; }
.jg-puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--peligro-2); }
.jg-puntos i.acierto { background: var(--verde); }
.analista-bloqueado .jg-candado { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; margin-bottom: 6px; border: 1px solid var(--linea); border-radius: 10px; font-size: 14px; }
.analista-bloqueado .jg-candado svg { width: 16px; height: 16px; color: var(--suave); flex: none; }
.analista-bloqueado .boton-grande { margin-top: 12px; }

/* Escalera de la combinada */
.escalera h3 small { font-weight: 500; }
.escalon { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 34px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.escalon-txt b { display: block; font-size: 13.5px; }
.escalon-txt small { font-size: 12px; color: var(--suave); }
.escalon-barra { height: 10px; border-radius: 5px; background: var(--tarjeta-2); overflow: hidden; }
.escalon-barra i { display: block; height: 100%; border-radius: 5px; background: var(--verde); transition: width .4s ease; }
.escalon-n { font-family: var(--titulo); font-size: 18px; text-align: right; }
.escalon.debil .escalon-txt small { color: var(--ambar); font-weight: 700; }
.escalon.debil .escalon-barra i { background: var(--ambar); }
.escalera-pie { margin: 10px 0 0; font-size: 13.5px; }
.segura { margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ambar) 10%, var(--tarjeta-2)); font-size: 13.5px; }
.segura p { margin: 0 0 6px; }
.segura .boton-secundario { margin-top: 4px; }

/* Jugada gratis del día (rediseño) */
.caja.jg { padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--marca) 55%, transparent); }
.jg-banda { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: var(--marca); color: var(--sobre-marca); }
.jg-banda h3 { margin: 2px 0 0; font-family: var(--titulo); font-size: 22px; font-weight: 800; color: var(--sobre-marca); }
.jg-etq { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--sobre-marca); color: var(--marca); font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.jg-banda .jg-res { padding: 4px 10px; border-radius: 999px; background: var(--sobre-marca); color: var(--marca); font-size: 12.5px; font-weight: 800; }
.jg-banda .jg-res.fallo { color: #ff6b73; }
.jg-cuerpo { padding: 14px 16px 12px; }
.jg-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.jg-cifra { padding: 10px 6px; border-radius: 10px; background: var(--tarjeta-2); text-align: center; }
.jg-cifra b { display: block; font-family: var(--titulo); font-size: 26px; font-weight: 800; line-height: 1.1; }
.jg-cifra:first-child b { color: var(--marca-2); }
.jg-cifra small { font-size: 11.5px; color: var(--suave); }
.jg-pata { display: block; padding: 11px 12px; margin-bottom: 8px; border: 1px solid var(--linea); border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; }
.jg-pata:hover { background: var(--tarjeta-2); }
.jg-meta { display: block; font-size: 11.5px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; }
.jg-equipos { display: grid; gap: 4px; margin: 7px 0 9px; }
.jg-equipos > span { display: flex; align-items: center; gap: 8px; }
.jg-equipos .escudo, .jg-equipos .escudo-vacio { width: 22px; height: 22px; }
.jg-equipos b { font-size: 14.5px; font-weight: 700; }
.jg-apuesta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.jg-pick { padding: 5px 11px; border-radius: 8px; background: var(--marca-fondo); color: var(--marca-2); font-size: 13.5px; font-weight: 800; }
.jg-num { text-align: right; line-height: 1.1; }
.jg-num b { font-family: var(--titulo); font-size: 22px; font-weight: 800; }
.jg-num small { display: block; font-size: 11.5px; color: var(--suave); }
.jg-hist { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 9px 12px; border-radius: 10px; background: var(--tarjeta-2); font-size: 13px; }
.jg-nuevo { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--marca-fondo); color: var(--marca-2); font-size: 11.5px; font-weight: 800; }
.jg-vacia { margin: 0 0 10px; color: var(--suave); }
.jg-como { margin-top: 8px; font-size: 13px; color: var(--suave); }
.jg-como summary { cursor: pointer; font-weight: 700; }
.jg-como p { margin: 6px 0 0; }

/* Análisis previo (partidos de otro día) */
.caja.previo { border-left: 4px solid var(--azul, #3ea8ff); }
.previo-fila { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.previo-fila small { color: var(--suave); }
.caja.previo p { font-size: 13.5px; margin: 10px 0 6px; }
.previo-ok { color: var(--verde); font-weight: 700; }

/* Logo FutbolScore: el ícono completo (fondo oscuro con "vivo" y el punto rojo) */
.marca-logo { background: none !important; padding: 0; overflow: hidden; }
.marca-logo svg { width: 100% !important; height: 100% !important; display: block; }

/* Íconos dentro de botones lima: en negro */
.redactar button svg, .boton-chat svg, .boton-grande svg { stroke: var(--sobre-marca); color: var(--sobre-marca); }

/* Nombre VIVOSCORE entero en lima. La barra de arriba es siempre oscura (como OneFootball), así el lima se lee
   igual en modo claro y oscuro: dentro de la barra se usan los colores del modo oscuro. */
.barra {
  --fondo: #0e0f11; --texto: #f3f2ef; --suave: #a4a6ab; --tarjeta-2: #212327; --tarjeta-3: #2b2d32; --borde: #33363c;
  background: #0e0f11; color: #f3f2ef;
}
.marca-nombre, .marca-nombre span { color: #d7ff3a !important; }
.barra .marca-sub { color: #a4a6ab; }
/* El nombre se escribe como la marca: FutbolScore (no todo en mayúsculas). */
.marca-nombre { text-transform: none !important; letter-spacing: 0 !important; }
.marca-nombre span { margin-left: 0 !important; }

/* Tablas: al cambiar de liga solo cambia la tabla, sin parpadeo */
.tabla-liga { transition: opacity .18s ease; }
.tabla-liga.cargando { opacity: .45; pointer-events: none; }
.tabla-liga.aparece { animation: tabla-entra .22s ease; }
@keyframes tabla-entra { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabla-liga.aparece { animation: none; } }

/* Favoritos agrupados por liga */
.fav-grupo { margin-bottom: 12px; }
.fav-grupo-cab { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; color: var(--texto); text-decoration: none; font-family: var(--titulo); font-size: 16px; font-weight: 700; }
.fav-grupo-cab .icono-liga { width: 24px; height: 24px; border-radius: 6px; background: var(--tarjeta-3); display: grid; place-items: center; flex: none; }
.fav-grupo-cab .icono-liga.con-logo img { width: 19px; height: 19px; object-fit: contain; }
.fav-grupo-cab .icono-liga svg { width: 13px; height: 13px; }
.fav-grupo-cab small { font-family: var(--cuerpo); font-size: 12.5px; font-weight: 500; color: var(--suave); }
.fav-grupo-cab > span:last-child { margin-left: auto; color: var(--suave); font-size: 18px; }
.fav-grupo-cab { justify-content: flex-start !important; text-align: left; width: 100%; }

/* Desde el análisis del analista (en Jugadas) se puede ir a la pantalla del partido. */
.ver-partido { display: block; margin-top: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--marca-2); text-decoration: none; padding: 8px; border-radius: 10px; background: var(--tarjeta-2); }
.ver-partido:hover { filter: brightness(1.08); }

/* Botón del chat: al bajar se encoge a un círculo (solo el ícono). */
.boton-chat span { white-space: nowrap; overflow: hidden; max-width: 200px; transition: max-width 0.22s ease, opacity 0.18s ease; }
.boton-chat.mini { padding: 0; width: 50px; justify-content: center; gap: 0; }
.boton-chat.mini span { max-width: 0; opacity: 0; }

/* "Gana Santos Laguna": el número arriba y el nombre debajo, en una línea (con … si es muy largo). */
.barra-1x2-leyenda { gap: 8px; }
.barra-1x2-leyenda > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.barra-1x2-leyenda > span:nth-child(3) { align-items: flex-end; }
.barra-1x2-leyenda > span:nth-child(2) { align-items: center; }
.barra-1x2-leyenda b { margin-right: 0; }
.barra-1x2-leyenda small { display: block; max-width: 100%; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Minuto a minuto (relato narrado, como OneFootball) */
.relato-lista { display: grid; }
.relato-fila { display: grid; grid-template-columns: 40px 24px 1fr 20px; gap: 8px; align-items: start; padding: 10px 2px; border-bottom: 1px solid var(--linea); }
.relato-fila:last-child { border-bottom: 0; }
.relato-fila p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto); }
.relato-min { font-family: var(--titulo); font-weight: 800; font-size: 15px; color: var(--suave); padding-top: 1px; }
.relato-ico { text-align: center; font-size: 15px; line-height: 1.4; }
.relato-escudo { width: 20px; height: 20px; object-fit: contain; margin-top: 1px; }
.relato-fila .escudo-vacio { width: 20px; height: 20px; font-size: 7px; }
.relato-fila.clave p { font-weight: 600; }
.relato-fila.gol { background: var(--marca-fondo); border-radius: 12px; border-bottom-color: transparent; padding: 12px 8px; margin: 4px -6px; }
.relato-fila.gol p { font-weight: 700; }
.relato-fila.gol p b { font-family: var(--titulo); font-size: 17px; letter-spacing: 0.02em; }
.relato-fila.nueva { animation: relato-entra 0.5s ease; }
@keyframes relato-entra { from { opacity: 0; transform: translateY(-6px); } }
.relato-corte { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--suave); padding: 10px 0; margin: 4px 0; background: var(--tarjeta-2); border-radius: 10px; }

/* Borrar la cuenta (Mi cuenta) y página que no existe */
.borrar-cuenta summary { cursor: pointer; font-weight: 700; color: var(--peligro-2); list-style: none; }
.borrar-cuenta summary::-webkit-details-marker { display: none; }
.borrar-cuenta summary::after { content: ' ›'; }
.borrar-cuenta[open] summary { margin-bottom: 10px; }
.borrar-cuenta p { color: var(--suave); font-size: 14px; }
.boton-grande.peligro { background: var(--peligro); color: #fff; }
.boton-grande:disabled { opacity: 0.6; }
.no-encontrada { margin-top: 24px; }
.no-encontrada b { display: block; margin-bottom: 6px; font-family: var(--titulo); font-size: 26px; color: var(--texto); }

/* Tabla al instante: el equipo que cambió de puesto o de puntos se ilumina un momento en lima. */
.tabla-pos tr.cambio-puesto td { animation: cambio-puesto 2.4s ease-out both; }
@keyframes cambio-puesto { 0%, 35% { background: var(--marca-fondo); } 100% { background: transparent; } }

/* Ventanas pequeñas (permiso de la IA, reportar) y el botón "Reportar" de las respuestas de la IA. */
.dialogo-fondo { z-index: 60; }
.dialogo { z-index: 61; }
.dialogo h3 { margin: 2px 0 8px; font-family: var(--titulo); font-size: 20px; }
.dialogo p { font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; }
.dialogo-botones { display: grid; gap: 8px; margin-top: 14px; }
.reportar-ia { display: block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--tenue); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.msg .reportar-ia { margin-top: 6px; }

/* Modo sin spoilers: marcadores borrosos en las listas; en el partido, todo lo que diga el resultado se tapa hasta tocar "Ver resultado". */
html.sin-spoilers .fp-marcador, html.sin-spoilers .marcador-col span { filter: blur(7px); }
html.sin-spoilers .fp-rojas, html.sin-spoilers .fp-global { visibility: hidden; }
#vista.oculta-spoiler .duelo-marcador, #vista.oculta-spoiler .duelo-sub, #vista.oculta-spoiler .goleadores { filter: blur(9px); pointer-events: none; user-select: none; }
#vista.oculta-spoiler > *:not(.detalle-cab) { filter: blur(10px); pointer-events: none; user-select: none; }
.ver-spoiler { margin-top: 8px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--marca); color: var(--sobre-marca); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.alerta-ayuda { display: block; margin-top: 3px; color: var(--suave); font-size: 12.5px; font-weight: 400; line-height: 1.4; }

/* Top de tarjetas: el número va sobre una tarjetita del color. */
.goleador-num.num-amarillas, .goleador-num.num-rojas { min-width: 26px; padding: 3px 0; border-radius: 4px; text-align: center; color: #121417; }
.goleador-num.num-amarillas { background: #ffd23f; }
.goleador-num.num-rojas { background: #e23c45; color: #fff; }

/* ---------- Comunidad: pronósticos, ranking, grupos, logros, encuestas, jugador del partido, comentarios ---------- */
a.boton-lupa { display: grid; place-items: center; color: inherit; text-decoration: none; }
.pr-fila { padding: 12px 14px; }
.pr-meta { font-size: 11.5px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.pr-marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pr-lado { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pr-lado .escudo, .pr-lado .escudo-vacio { width: 30px; height: 30px; }
.pr-nombre { font-size: 13px; font-weight: 700; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-pasos { display: flex; align-items: center; gap: 8px; }
.pr-boton { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--linea); background: var(--tarjeta-2); color: var(--texto); font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; transition: transform .1s ease; }
.pr-boton:active { transform: scale(.92); }
.pr-num { min-width: 26px; text-align: center; font-family: var(--titulo); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr-marcador.sin-guardar .pr-num { color: var(--tenue); }
.pr-marcador.guardado .pr-num { color: var(--marca-2); }
.pr-guion { font-family: var(--titulo); font-size: 24px; color: var(--tenue); padding-top: 40px; }
.pr-estado { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--suave); }
.pr-resultado { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pr-resultado > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-resultado .escudo { width: 20px; height: 20px; }
.pr-puntos { padding: 1px 7px; border-radius: 6px; background: var(--tarjeta-2); }
.pr-puntos.p3 { background: var(--marca); color: var(--sobre-marca); }
.pr-puntos.p1 { background: var(--marca-fondo); color: var(--marca-2); }
.pr-yo { display: flex; align-items: baseline; gap: 10px; }
.pr-yo b { font-family: var(--titulo); font-size: 30px; color: var(--marca-2); }
.pr-yo small { color: var(--suave); }
.pr-ranking { padding: 4px 12px; }
.pr-pos { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.pr-pos:last-child { border-bottom: 0; }
.pr-pos .pr-n { grid-row: 1 / 3; font-family: var(--titulo); font-size: 18px; font-weight: 800; text-align: center; }
.pr-pos b { font-size: 14.5px; }
.pr-pos small { grid-column: 2; color: var(--suave); font-size: 12px; }
.pr-pos .pr-pts { grid-row: 1 / 3; grid-column: 3; font-family: var(--titulo); font-size: 22px; font-weight: 800; }
.pr-pos.yo { background: var(--marca-fondo); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.pr-mio { display: flex; align-items: center; gap: 10px; }
.pr-mio b:first-of-type { font-family: var(--titulo); font-size: 22px; }
.grupo-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.grupo-fila small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.grupo-codigo { letter-spacing: 1.5px; color: var(--marca-2); }
.grupo-acciones { display: flex; gap: 6px; }
.logros-cab { text-align: center; }
.racha { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.racha-fuego { font-size: 28px; }
.racha b { font-family: var(--titulo); font-size: 44px; line-height: 1; }
.racha small { color: var(--suave); }
.logros-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.logros-datos div { padding: 8px 4px; border-radius: 10px; background: var(--tarjeta-2); }
.logros-datos b { display: block; font-family: var(--titulo); font-size: 22px; }
.logros-datos small { font-size: 11px; color: var(--suave); }
.insignias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.insignia { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--tarjeta); opacity: .55; }
.insignia span { grid-row: 1 / 3; font-size: 24px; }
.insignia b { font-size: 13.5px; }
.insignia small { font-size: 11.5px; color: var(--suave); }
.insignia.si { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--marca); }
.encuesta-opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.encuesta-opciones .boton-mini { flex: 1; min-height: 40px; }
.mvp-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mvp-jug { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta-2); color: inherit; font: inherit; cursor: pointer; }
.mvp-jug img, .mvp-jug .escudo-vacio { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--tarjeta); }
.mvp-jug b { font-size: 12.5px; text-align: center; line-height: 1.2; }
.mvp-jug small { font-size: 11px; color: var(--suave); }
.mvp-jug[disabled] { cursor: default; }
.mvp-jug.mio { box-shadow: inset 0 0 0 2px var(--marca); }
.mvp-jug.ganador { background: var(--marca-fondo); }
.mvp-pct { font-family: var(--titulo); font-size: 18px; font-weight: 800; color: var(--marca-2); }
.video-resumen { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.video-resumen small { display: block; color: var(--suave); font-size: 12.5px; }
.video-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e23c45; color: #fff; font-size: 16px; flex: none; }
.tv-caja { display: flex; align-items: center; gap: 12px; }
.tv-caja small { display: block; color: var(--suave); font-size: 12px; }
.tv-ico { font-size: 24px; }
.comentar textarea { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--tarjeta-2); color: var(--texto); font: inherit; font-size: 15px; resize: vertical; }
.comentarios { display: grid; gap: 8px; margin: 10px 0; }
.comentario { padding: 10px 12px; border-radius: 12px; background: var(--tarjeta); }
.com-cab { display: flex; align-items: baseline; gap: 8px; }
.com-cab small { color: var(--tenue); font-size: 12px; }
.com-acciones { margin-left: auto; display: flex; gap: 10px; }
.com-acciones button { border: 0; background: none; color: var(--tenue); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.comentario p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
#seguir-jugador { margin-top: 10px; }
.jug-mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--tarjeta-2); flex: none; }
.jug-mini.grande { width: 56px; height: 56px; }
.plantel-fila { display: grid; grid-template-columns: 26px 32px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.plantel-fila:last-child { border-bottom: 0; }
.plantel-num { font-family: var(--titulo); font-weight: 800; color: var(--suave); text-align: center; }
.plantel-fila small { color: var(--suave); font-size: 12.5px; }
.fichaje { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.fichaje:last-child { border-bottom: 0; }
.fichaje small { display: flex; align-items: center; gap: 4px; color: var(--suave); font-size: 12.5px; }
.fichaje small img { width: 16px; height: 16px; object-fit: contain; }
.fichaje-tipo { text-align: right; font-size: 12.5px; font-weight: 700; }
.fichaje-tipo small { display: block; font-weight: 400; }
.club-dt, .club-estadio { display: flex; align-items: center; gap: 12px; }
.club-dt small, .club-estadio small { display: block; color: var(--suave); font-size: 12.5px; }
.club-estadio { flex-direction: column; align-items: stretch; }
.club-estadio img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; }
.semana-cancha { display: grid; gap: 14px; padding: 16px 8px; background: linear-gradient(180deg, #1d5a2f, #17482a); color: #fff; }
.semana-linea { display: flex; justify-content: space-around; gap: 4px; }
.semana-jug { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 25%; text-align: center; }
.semana-foto { position: relative; }
.semana-foto img, .semana-foto .escudo-vacio { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.15); }
.semana-nota { position: absolute; right: -8px; top: -4px; padding: 1px 5px; border-radius: 6px; background: var(--marca); color: #121417; font-size: 11px; font-weight: 800; }
.semana-jug b { font-size: 11.5px; line-height: 1.15; }
.semana-jug small { display: flex; align-items: center; gap: 3px; font-size: 10px; opacity: .85; }
.semana-jug small img { width: 12px; height: 12px; object-fit: contain; }
@media (max-width: 380px) { .logros-datos { grid-template-columns: repeat(2, 1fr); } .pr-boton { width: 34px; height: 34px; } }

/* Debajo de la alineación: entrenadores, banco y no disponibles. */
.dt-fila, .baja-fila { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.dt-fila:last-child, .baja-fila:last-child { border-bottom: 0; }
.dt-fila small, .baja-fila small { display: flex; align-items: center; gap: 5px; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.dt-fila small .escudo, .baja-fila small .escudo { width: 16px; height: 16px; }
.baja-fila > div { flex: 1; min-width: 0; }
.baja-fila .tipo-baja, .baja-fila .tipo-duda { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.baja-fila .tipo-baja { background: rgba(226, 60, 69, .14); color: var(--peligro-2); }
.baja-fila .tipo-duda { background: var(--marca-fondo); color: var(--marca-2); }
.banco-eq { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; font-size: 14px; }
.banco-eq .escudo { width: 18px; height: 18px; }
.banco-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 6px; }
.banco-jug { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; }
.banco-foto { position: relative; }
.banco-foto img, .banco-foto .escudo-vacio { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--tarjeta-2); }
.banco-foto span { position: absolute; left: -6px; top: -4px; min-width: 20px; padding: 1px 4px; border-radius: 999px; background: var(--tarjeta); box-shadow: 0 0 0 1px var(--linea); font-size: 11px; font-weight: 800; }
.banco-jug b { font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banco-jug small { font-size: 11px; color: var(--suave); }

/* ---------- artículos de nuestra redacción dentro de la app ---------- */
.art-portada { display: flex; align-items: center; justify-content: center; gap: 12px; height: 110px; background: radial-gradient(circle at 30% 20%, #2a2f12, #0e0f11 70%); color: var(--marca); font-family: var(--titulo); font-size: 18px; font-weight: 800; }
.art-portada img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.art-seccion { margin: 4px 0 16px; }
.art-seccion-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.art-seccion-cab b { font-family: var(--titulo); font-size: 18px; }
.art-carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.art-carrusel::-webkit-scrollbar { display: none; }
.art-tarjeta { display: block; scroll-snap-align: start; border-radius: var(--radio); overflow: hidden; background: var(--tarjeta); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--linea); }
.art-texto { padding: 10px 12px 12px; }
.art-texto small { display: block; color: var(--suave); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.art-texto b { display: block; margin: 4px 0 6px; font-size: 15px; line-height: 1.3; }
.art-texto p { margin: 0 0 8px; color: var(--suave); font-size: 14px; line-height: 1.45; }
.art-firma { color: var(--tenue); font-size: 12px; }
.art-rumor { padding: 1px 6px; border-radius: 999px; background: var(--marca); color: var(--sobre-marca); }
.art-tarjeta.grande .art-portada { height: 170px; }
.art-tarjeta.grande .art-portada img { width: 80px; height: 80px; }
.art-tarjeta.grande b { font-family: var(--titulo); font-size: 24px; line-height: 1.08; }
.art-lista { display: grid; gap: 10px; margin-top: 10px; }
.art-lista .art-tarjeta { display: grid; grid-template-columns: 110px 1fr; }
.art-lista .art-portada { height: auto; min-height: 100px; }
.art-lista .art-portada img { width: 34px; height: 34px; }
.art-lista .art-portada span { font-size: 12px; }
.liga-chip.redaccion { box-shadow: inset 0 0 0 1.5px var(--marca); }
.art-pagina .art-portada { height: 180px; border-radius: var(--radio); margin: 6px 0 14px; }
.art-pagina .art-portada img { width: 86px; height: 86px; }
.art-sec { margin: 0; color: var(--suave); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.art-pagina h1 { margin: 6px 0 8px; font-family: var(--titulo); font-size: 32px; line-height: 1.05; text-wrap: balance; }
.art-bajada { margin: 0 0 8px; color: var(--suave); font-size: 17px; line-height: 1.5; }
.art-meta { margin: 0 0 12px; color: var(--tenue); font-size: 13px; }
.art-equipos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.art-equipos a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--tarjeta); color: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.art-equipos .escudo { width: 20px; height: 20px; }
.art-cuerpo { font-size: 17px; line-height: 1.65; }
.art-cuerpo p { margin: 0 0 15px; }
.art-cuerpo h2 { margin: 22px 0 6px; font-family: var(--titulo); font-size: 22px; }
.art-fuentes { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linea); color: var(--suave); font-size: 13.5px; }
/* ---------- Campo en vivo (arriba de la pestaña En vivo, solo mientras se juega) ---------- */
.cv { margin-bottom: 14px; }
.cv[hidden] { display: none; }
.cv-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.cv-vivo { display: inline-flex; align-items: center; gap: 7px; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .3px; }
.cv-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d57; box-shadow: 0 0 8px #ff4d57; animation: cv-late 1.2s infinite; }
@keyframes cv-late { 50% { opacity: .25; } }
.cv-cab small { color: var(--suave); font-size: 12px; font-weight: 600; }
.cv-campo { position: relative; border-radius: 18px; overflow: hidden; background: #0b3d1f; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.35); }
.cv-svg { display: block; width: 100%; height: auto; }
.cv-franjas .a { fill: #1f7a3c; } .cv-franjas .b { fill: #1c7037; }
.cv-cal * { fill: none; stroke: rgba(255,255,255,.82); stroke-width: .28; stroke-linecap: round; } .cv-cal .p { fill: rgba(255,255,255,.85); stroke: none; }
.cv-red { fill: url(#cv-red); stroke: rgba(255,255,255,.9); stroke-width: .25; transform-box: fill-box; }
.cv-red-d { transform-origin: 0% 50%; } .cv-red-i { transform-origin: 100% 50%; }
.cv-red.mueve { animation: cv-red .9s ease-out; }
@keyframes cv-red { 25% { transform: scaleX(1.7); } 55% { transform: scaleX(.8); } 100% { transform: scaleX(1); } }
.cv-zona { transition: opacity .7s ease; } .cv-zona.peligro { animation: cv-zona 1.1s ease-in-out infinite; }
@keyframes cv-zona { 50% { opacity: .45; } }
.cv-onda { fill: none; stroke-width: .5; animation: cv-onda 1.3s ease-out forwards; }
@keyframes cv-onda { from { r: .6; opacity: .8; } to { r: 5; opacity: 0; } }
.cv-letrero { position: absolute; top: 9px; left: 50%; translate: -50% 0; max-width: 86%; padding: 5px 12px; border-radius: 999px; background: rgba(7,8,10,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(-6px); transition: opacity .45s, transform .45s; }
.cv-letrero.si { opacity: 1; transform: none; }
.cv-estado { position: absolute; top: 52%; display: grid; justify-items: center; gap: 2px; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .5s, transform .5s; }
.cv-estado.si { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cv-estado b { white-space: nowrap; font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: clamp(14px, 4.2vw, 24px); letter-spacing: 1px; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.cv-estado span { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.cv-estado.peligro b { animation: cv-late 1.1s ease-in-out infinite; }
.cv-estado.domina b { font-size: clamp(12px, 3.4vw, 18px); opacity: .85; } /* entre jugadas: quién domina, más discreto */
.cv-estado.domina { top: 22%; }
.cv-var { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(7,8,10,.85) 20%, rgba(7,8,10,.85) 80%, transparent); opacity: 0; transition: opacity .3s; color: #fff; }
.cv-var.si { opacity: 1; } .cv-var b { font-family: 'Saira Condensed', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 6px; } .cv-var small { color: #c8ccd2; font-weight: 700; }
.cv-gol { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(7,8,10,.72)); opacity: 0; transition: opacity .6s ease; }
.cv-gol.si { opacity: 1; }
.cv-gol-caja { display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 11px; border-radius: 14px; background: rgba(7,8,10,.8); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), inset 4px 0 0 rgb(var(--c)); transform: translateY(12px); transition: transform .6s cubic-bezier(.2,.9,.3,1); }
.cv-gol.si .cv-gol-caja { transform: none; }
.cv-gol img { width: 32px; height: 32px; object-fit: contain; }
.cv-gol b { display: block; font-family: 'Saira Condensed', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: 1.5px; color: rgb(var(--c)); line-height: 1; }
.cv-gol-quien { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .cv-estado.peligro b, .cv-zona.peligro, .cv-vivo i { animation: none; } }

/* ---------- ficha completa del jugador (equipos populares) ---------- */
.equipo-titulo > .jug-ficha-foto, .equipo-titulo > .sin-cara { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--tarjeta-2); border: 2px solid var(--marca); }
.jug-ficha-equipo { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; font-weight: 700; }
.jug-ficha-equipo .escudo { width: 18px; height: 18px; }
.equipo-titulo small.jug-ficha-sub { margin-top: 4px; }
.jug-ficha-estado { border-left: 4px solid #e23c45; }
.jug-ficha-estado.duda { border-left-color: #ffd23f; }
.jug-partido { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); color: inherit; text-decoration: none; }
.jug-partido:last-child { border-bottom: 0; }
.jug-res { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--tarjeta-2); font-size: 12px; font-weight: 800; }
.jug-res.G { background: #1f9d55; color: #fff; } .jug-res.P { background: #e23c45; color: #fff; }
.jug-par { display: grid; gap: 1px; min-width: 0; }
.jug-par b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jug-par small { color: var(--suave); font-size: 12px; }
.jug-nota { min-width: 36px; padding: 3px 6px; border-radius: 6px; background: var(--tarjeta-2); text-align: center; font-weight: 800; font-size: 13.5px; }
a.plantel-fila.con-ficha, a.goleador.con-ficha { color: inherit; text-decoration: none; }
#ver-ficha-jugador { display: inline-block; margin-top: 8px; text-decoration: none; }

/* Filas que se deslizan de lado: en la computadora se agarran con el mouse (deslizar.js) */
.arrastrando, .arrastrando * { cursor: grabbing !important; user-select: none; }

/* Previa como la de 365 (pestaña Previa del partido): información del juego, noticias, tabla, cara a cara, clave, últimos */
.pv-fila { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borde-suave); }
.pv-info h3 + .pv-fila { border-top: 0; padding-top: 2px; }
.pv-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tarjeta-2); color: var(--marca); }
.pv-ico svg { width: 19px; height: 19px; }
.pv-fila b { display: block; font-size: 15px; line-height: 1.25; }
.pv-fila small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.pv-cal { font-size: 12.5px; font-weight: 800; color: var(--marca); text-decoration: none; white-space: nowrap; }
.pv-nota { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde-suave); color: inherit; text-decoration: none; }
.pv-noticias h3 + .pv-nota { border-top: 0; padding-top: 0; }
.pv-nota img { width: 112px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: var(--tarjeta-2); }
.pv-nota.grande { grid-template-columns: 1fr; }
.pv-nota.grande img { width: 100%; aspect-ratio: 16 / 9; }
.pv-nota b { display: block; font-size: 14.5px; line-height: 1.3; }
.pv-nota.grande b { font-size: 16px; }
.pv-nota small { display: block; margin-top: 4px; color: var(--suave); font-size: 12px; }
.pv-tabla table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.pv-tabla th { color: var(--suave); font-size: 12px; font-weight: 700; text-align: center; padding: 4px 4px 8px; }
.pv-tabla td { text-align: center; padding: 9px 4px; border-top: 1px solid var(--borde-suave); }
.pv-tabla td:nth-child(2) { text-align: left; width: 100%; }
.pv-eq { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pv-eq img { width: 22px; height: 22px; object-fit: contain; }
.pv-mas { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde-suave); text-align: center; color: var(--suave); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; list-style: none; }
.pv-mas::-webkit-details-marker { display: none; }
.pv-h2h-n { display: grid; grid-template-columns: 44px 1fr 1px 1fr 1px 1fr 44px; align-items: center; gap: 6px; text-align: center; padding: 6px 0 2px; }
.pv-h2h-n .escudo, .pv-h2h-n .escudo-vacio { width: 40px; height: 40px; }
.pv-h2h-n b { display: block; font-family: var(--titulo); font-size: 30px; line-height: 1; }
.pv-h2h-n small { color: var(--suave); font-size: 12px; }
.pv-h2h-n i { height: 34px; background: var(--borde-suave); }
.pv-h2h-p { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde-suave); font-size: 13.5px; }
.pv-h2h-p small { color: var(--suave); }
.pv-puestos { margin: 0 0 12px; padding: 0; }
.pv-clave-p { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 8px; }
.pv-clave-p[hidden] { display: none; }
.pv-jug { display: grid; justify-items: center; gap: 6px; text-align: center; color: inherit; text-decoration: none; font-size: 13px; }
.pv-jug.vacio { color: var(--tenue); }
.pv-foto { position: relative; display: block; }
.pv-foto img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; background: var(--tarjeta-2); border: 2px solid var(--borde-suave); }
.pv-foto em { position: absolute; left: -4px; bottom: 0; padding: 1px 6px; border-radius: 6px; font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--verde); color: #fff; }
.pv-foto em.n5 { background: #c0392b; } .pv-foto em.n6 { background: #d38b12; } .pv-foto em.n8 { background: #1e7bd6; }
.pv-clave-n > div { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; padding: 4px 0; text-align: center; }
.pv-clave-n b { padding: 5px 0; border-radius: 8px; background: var(--tarjeta-2); font-size: 15px; }
.pv-clave-n small { color: var(--suave); font-size: 12px; }
.pv-nota-pie { margin: 10px 0 0; color: var(--tenue); font-size: 11.5px; text-align: center; }
.pv-ult-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-ult-fila > div { display: flex; justify-content: space-between; gap: 2px; }
.pv-ult-fila > div + div { padding-left: 10px; border-left: 1px solid var(--borde-suave); }
.pv-ult { display: grid; justify-items: center; gap: 4px; }
.pv-ult img, .pv-ult i { width: 24px; height: 24px; object-fit: contain; }
.pv-ult em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 3px; border-radius: 6px; border: 1.5px solid; white-space: nowrap; letter-spacing: -.2px; }
.pv-ult.G em { color: var(--verde); border-color: var(--verde); } .pv-ult.E em { color: #d38b12; border-color: #d38b12; } .pv-ult.P em { color: #e5484d; border-color: #e5484d; }
.pv-ult-tit { display: flex; justify-content: space-between; margin: 12px 0 2px; color: var(--suave); font-size: 12.5px; }
.pv-ult-tit span { display: flex; align-items: center; gap: 6px; }
.pv-ult-tit .escudo, .pv-ult-tit .escudo-vacio { width: 18px; height: 18px; }
.pv-ult-dato { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde-suave); text-align: center; font-size: 14px; }
.pv-ult-dato b:first-child { text-align: left; } .pv-ult-dato b:last-child { text-align: right; }
.pv-ult-dato span { color: var(--suave); }