/* Inicio — capa sobre estadio.css (componentes propios del home) */

/* ============================================================
   RESERVA DE ESPACIO (anti-CLS)
   Inicio se pinta en tres tandas asincrónicas (/ultimos, /goleadores, /proximos) y
   cada bloque que se llenaba empujaba hacia abajo todo lo que tenía debajo: medido
   con PerformanceObserver daba CLS 0,31 (390) a 0,91 (1280). Acá se reserva el hueco
   de cada bloque ANTES de que responda la API; home.js lo libera (--hold-*: 0px) en
   el mismo frame en que lo llena y memoriza la altura real para la próxima visita
   (script inline del <head> de Inicio.html).
   Los defaults son alturas MEDIDAS con datos reales (2 próximos, 6 goleadores,
   4 últimos). No hace falta que sean exactas: Chrome ignora desplazamientos de menos
   de 3 px, y a partir de la segunda visita manda la altura memorizada.
   ============================================================ */
/* Esqueleto del hueco reservado. Normalmente NO se ve (el loader de la pelota tapa la
   pantalla hasta que los bloques ya están llenos); aparece solo si la API tarda más que
   el loader, y ahí un rectángulo navy vacío leería como card rota. Cada barra es más
   baja que la reserva, así que el esqueleto nunca la agranda. */
.page-inicio .sk { display: grid; gap: 8px; }
.page-inicio .sk > span { display: block; height: 54px; border-radius: 14px; background-size: 220% 100%;
    background-image: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 70%);
    animation: sk-pulse 1.4s linear infinite; }
.page-inicio .sk--hero > span:first-child { height: 186px; }
@keyframes sk-pulse { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .page-inicio .sk > span { animation: none; } }

.page-inicio #tape { min-height: var(--hold-tape, 42px); }
.page-inicio #proxCard { min-height: var(--hold-prox, 476px); }
.page-inicio .poster { min-height: var(--hold-poster, 210px); }
.page-inicio #tileScorers { min-height: var(--hold-scorers, 574px); }
.page-inicio #tileRecent { min-height: var(--hold-recent, 403px); }
@media (max-width: 719.98px) {
    .page-inicio #proxCard { min-height: var(--hold-prox, 557px); }
    .page-inicio .poster { min-height: var(--hold-poster, 235px); }
    .page-inicio #tileScorers { min-height: var(--hold-scorers, 620px); }
}

/* accesos rápidos: portada de app deportiva */
.quicknav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 720px) { .quicknav { grid-template-columns: repeat(4, 1fr); } }
.qa { --g: #ffc233; display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 16px; text-decoration: none; color: inherit; position: relative; overflow: hidden;
    background: linear-gradient(150deg, color-mix(in srgb, var(--g) 16%, #0e1f44), #0a1733); border: 1px solid color-mix(in srgb, var(--g) 28%, transparent);
    transition: transform var(--mo-fast) ease, box-shadow var(--mo) ease, border-color var(--mo) ease; }
.qa--fantasy { --g: #ffc233; } .qa--part { --g: #3d7bff; } .qa--plantel { --g: #28c281; } .qa--stats { --g: #ff5a6a; }
@media (hover: hover) { .qa:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .42); border-color: color-mix(in srgb, var(--g) 55%, transparent); } }
.qa:active { transform: scale(.98); }
.qa__ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #0a1430;
    background: linear-gradient(180deg, color-mix(in srgb, var(--g) 80%, #fff), var(--g)); box-shadow: 0 6px 16px color-mix(in srgb, var(--g) 36%, transparent); }
.qa__tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qa__t { font-weight: 800; font-size: 1rem; line-height: 1.05; }
.qa__d { font-size: var(--fs-body-sm); color: var(--tx-2); }
.qa::after { content: "›"; margin-left: auto; font-family: var(--disp, Anton), sans-serif; font-size: 1.5rem; line-height: 1; color: var(--g); opacity: .45; transition: transform var(--mo-fast) var(--ease-out), opacity var(--mo-fast) ease; }
@media (hover: hover) { .qa:hover::after { transform: translateX(3px); opacity: 1; } }
/* OLA 4 (rediseño integral 2026-06): en mobile la quicknav repetía 3 de sus 4 destinos
   con el dock fijo (Partidos/Plantel/Stats) y comía el above-the-fold. Se compacta a una
   fila de accesos tipo chip (sin descripción ni alto extra) para cederle protagonismo al
   contenido (póster + próximo + efectividad). Mantiene los 4 accesos, incluido Fantasy
   (el único que no está en el dock). En desktop queda igual (el dock no existe ahí). */
@media (max-width: 719.98px) {
    .quicknav { gap: 8px; margin-top: 12px; }
    .qa { padding: 9px 12px; gap: 9px; border-radius: 13px; }
    .qa__ic { width: 34px; height: 34px; font-size: 1.05rem; border-radius: 9px; }
    .qa__d { display: none; }
    .qa::after { font-size: 1.2rem; }
}

/* Póster degradado: cuando hay próximo partido, el último resultado baja a franja
   secundaria (más chica, sin fantasma gigante) para no robarle el hero al próximo. */
.page-inicio .poster--demoted { margin-top: 0; padding: 16px 18px 22px; }
.page-inicio .poster--demoted .poster__ghost { display: none; }
.page-inicio .poster--demoted .poster__lines { opacity: .5; transform: scale(.7); }
.page-inicio .poster--demoted .poster__title { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-top: 6px; }
.page-inicio .poster--demoted .poster__title .vs { font-size: .5em; margin-top: 4px; }
.page-inicio .poster--demoted .poster__sub { font-size: var(--fs-body); margin-top: 8px; }
.page-inicio .poster--demoted .poster__row { margin-top: 12px; }

/* Próximo partido: HERO (escudos + countdown grande) en vez de fila sparse */
.nextmatch { display: block; position: relative; overflow: hidden; text-decoration: none; color: inherit;
    background: linear-gradient(160deg, #0e1f44, #0a1733); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px; }
.nextmatch::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 70% at 50% -10%, rgba(255, 194, 51, .09), transparent 60%); }
.nextmatch > * { position: relative; }
.nextmatch.tap { cursor: pointer; transition: transform var(--mo-fast) var(--ease-out), box-shadow var(--mo) ease; }
@media (hover: hover) { .nextmatch.tap:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, .4); } }
.nextmatch__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--fs-body-sm); }
.nextmatch__date { color: var(--tx-2); text-transform: capitalize; font-weight: 600; }
.nextmatch__vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 16px 0 4px; }
@media (min-width: 720px) { .nextmatch__vs { max-width: 520px; margin-inline: auto; } .nextmatch__cd { font-size: 2.2rem; } }
.nm__team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.nm__crest { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.nm__crest img { width: 100%; height: 100%; object-fit: cover; }
/* escudo real (biblioteca team-crests): fondo claro + contain para no recortar el escudo */
.nm__crest--img { background: #fff; }
.nm__crest--img img { width: 84%; height: 84%; object-fit: contain; }
.nm__crest--ini { font-family: Anton, sans-serif; font-size: 1.15rem; color: #cdd7ee; }
.nm__nm { font-weight: 800; font-size: var(--fs-body); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.nm__nm.ol { color: var(--gold-2); }
.nextmatch__cd { font-family: Anton, sans-serif; font-size: 1.75rem; line-height: 1; color: var(--gold-2); text-align: center; font-variant-numeric: tabular-nums; min-width: 92px; }
.nextmatch__rec { text-align: center; font-size: var(--fs-body-sm); color: var(--tx-3); margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .06); }
.nextmatch__rec b.g { color: var(--win-t); } .nextmatch__rec b.e { color: var(--draw); } .nextmatch__rec b.l { color: var(--loss-t); }

/* Día de partido: "HOY"/"EN JUEGO" es el dato del día — badge dorado en la fecha y
   borde con más presencia para que el hero del partido se distinga de una previa común. */
.nextmatch--today { border-color: rgba(255, 194, 51, .45); }
.nextmatch__today {
    display: inline-block; padding: 3px 8px; border-radius: 7px;
    font-weight: 800; letter-spacing: .06em; font-size: .7rem;
    color: var(--gold-ink, #241a00); background: linear-gradient(180deg, var(--gold-2, #ffd45e), var(--gold, #ffc233));
}

/* Resultado fresco (postpartido ≤36h): el póster recupera protagonismo con acento dorado
   sutil; un resultado de hace meses queda con el tratamiento neutro de siempre. */
.page-inicio .poster--fresh { border-color: rgba(255, 194, 51, .35); }
.page-inicio .poster--fresh .poster__kick { color: var(--gold-2); }

/* resto de próximos: grilla densa (en desktop 2 col -> no sparse).
   minmax(0,1fr): sin el min-width:0 la celda no puede achicarse y los nombres largos
   desbordaban con corte duro ("INDEPENDIENT") en vez del ellipsis ya declarado en .tm. */
.proxrest { display: grid; gap: 8px; margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .proxrest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* plantel rail: card coleccionable con FOTO LIMPIA arriba (cuadrada) + footer sólido abajo.
   Sin texto sobre la cara; nombre 1 línea truncado → consistente sin importar el largo. */
.page-inicio .trail .tcard { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
    background: linear-gradient(180deg, #14274f, #0a1733); border: 1px solid var(--line-2); }
.page-inicio .trail .tcard__ph { position: relative; aspect-ratio: 1 / 1; height: auto; overflow: hidden; display: block; }
.page-inicio .trail .tcard__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform: none; }
.page-inicio .trail .tcard__ph::after { display: none; }
.page-inicio .trail .tcard__b { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 9px 8px; }
.page-inicio .trail .tcard__nm { width: 100%; color: #fff; font-size: var(--fs-body-sm); font-weight: 800; line-height: 1.12;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.24em; }
.page-inicio .trail .tcard__pos { color: #9fb2d8; font-size: .6rem; }
.page-inicio .trail .tcard { transition: transform var(--mo-fast) ease, box-shadow var(--mo) ease; }
@media (hover: hover) { .page-inicio .trail .tcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); } }

/* A1 — labels del bento más legibles: antes .6rem / var(--tx-3) (chico y apagado). */
/* el eyebrow del bento de Inicio sube un paso de la escala (--fs-label, no --fs-caption):
   sigue siendo un eyebrow, pero acá encabeza el KPI de la portada y tiene que leerse de lejos. */
.page-inicio .bento .tile__k { font-size: var(--fs-label); letter-spacing: .1em; color: #d7e0f5; }
.page-inicio .bento .tile__k i { font-size: var(--fs-body-strong); }

/* A2 — "Un día como hoy": con un solo partido el ticket se estiraba full-width
   (fila huérfana). Lo limitamos a tarjetas de ancho fijo; pero alineadas a la
   izquierda dejaban un vacío navy enorme a la derecha (seguía leyéndose huérfano).
   Ahora las tarjetas se CENTRAN: con 1 efeméride el aire queda repartido a los lados
   (margen intencional, no media sección vacía) y varias tilean centradas. Mobile
   sin cambios. */
@media (min-width: 720px) {
    .page-inicio #onthisList { display: flex; flex-flow: row wrap; gap: 12px; justify-content: center; }
    .page-inicio #onthisList .ticket { width: 360px; max-width: 100%; }
}

/* "Jugar la penca": en desktop deja de ser una barra dorada full-width (pesaba más que el
   propio partido) → botón contenido alineado a la derecha del card. Mobile sigue full-width
   (target táctil). Fase 3: composición desktop más integrada. */
@media (min-width: 720px) {
    .page-inicio #proxCta { display: flex; width: fit-content; margin-left: auto; }
    /* mismo tratamiento para los CTA del slot de la fecha: dos barras de 1100px apiladas
       (compartir previa + login/acción) leían como formulario, no como card de matchday */
    .page-inicio #proxShare.btn8--block,
    .page-inicio #fechaSlot > .btn8--block { display: inline-flex; width: fit-content; margin-left: auto; padding-inline: 22px; }
    .page-inicio #proxShare.btn8--block { display: flex; }
}

/* ============================================================
   ÚLTIMOS PARTIDOS (home) — LISTA limpia (no cards anidadas).
   Rediseño: en vez de un ticket con bordes/cajas por fila, una lista escaneable
   dentro del tile: cada fila = fecha · escudo · rival · meta · marcador (color por
   resultado). Separador sutil entre filas, sin borde por fila. Solo carga en el
   home (inicio.css), no afecta Partidos.html.
   ============================================================ */
#recentList { display: flex; flex-direction: column; }
.rgame {
    display: grid; grid-template-columns: 30px 34px 1fr auto; align-items: center; gap: 11px;
    padding: 11px 6px; text-decoration: none; color: inherit; border-radius: 9px;
    border-bottom: 1px solid var(--line); transition: background var(--mo-fast);
}
.rgame:last-child { border-bottom: none; }
@media (hover: hover) { .rgame:hover { background: rgba(61, 123, 255, .07); } }
.rgame:active { background: rgba(61, 123, 255, .12); }
.rgame__date { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rgame__date b { font-family: var(--disp, Anton), sans-serif; font-weight: 400; font-size: 1.22rem; color: var(--tx); }
.rgame__date small { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); margin-top: 3px; }
.rgame__crest { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: #fff; padding: 3px; box-sizing: border-box; flex: 0 0 auto; }
.rgame__crest--ph { display: inline-flex; align-items: center; justify-content: center; padding: 0;
    background: linear-gradient(180deg, #1a2c52, #0f1f40); color: #cdd7ee; border: 1px solid var(--line-2);
    font-family: var(--disp, Anton), sans-serif; font-size: 1rem; }
.rgame__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rgame__rival { font-weight: 800; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgame__meta { font-size: .68rem; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rgame__sc { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-left: 10px; }
.rgame__num { font-family: var(--disp, Anton), sans-serif; font-size: 1.4rem; font-variant-numeric: tabular-nums; line-height: 1; }
.rgame__res { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rgame.w .rgame__num, .rgame.w .rgame__res { color: var(--win-t, #7ef0ad); }
.rgame.l .rgame__num, .rgame.l .rgame__res { color: var(--loss-t, #ff9fb0); }
.rgame.n .rgame__num { color: var(--tx); } .rgame.n .rgame__res { color: var(--tx-3); }
/* Item 8: chip "estadísticas pendientes" en la fila (ámbar/info, no error) */
.rgame__pend { color: var(--gold-2); font-weight: 700; }

/* ============================================================
   FASE 5 (B2) — composición desktop del home
   ============================================================ */
/* Tiles de número (Goles / Momento) centran su contenido en la altura que el grid
   les estira (la fila iguala al alto del tile del donut de Efectividad). Sin esto,
   el número queda arriba y deja una banda navy muerta abajo (vacío de composición). */
@media (min-width: 1180px) {
    .page-inicio #tileGoles, .page-inicio #tileRacha { display: flex; flex-direction: column; justify-content: center; }
    .page-inicio #tileGoles .tile__k, .page-inicio #tileRacha .tile__k { margin-bottom: 6px; }
    /* Goleadores (6 filas) y Últimos partidos (4 filas) tienen alturas naturales distintas:
       sin esto el grid las iguala y la más corta queda con ~200px de card vacía adentro.
       align-self:start = cada card con su altura (patrón dashboard estándar). */
    .page-inicio #tileRecent, .page-inicio #tileScorers { align-self: start; }
}

/* Póster "último resultado": en desktop el contenido quedaba pegado a la izquierda con la
   mitad derecha vacía. Lo pasamos a 2 columnas: izquierda = kicker + marcador + sub; derecha =
   estado + últimos 5 + CTA Match center, centrado vertical → la mitad derecha pasa a ser bloque
   intencional, no vacío. Aplica TAMBIÉN al demoted (la variante visible el 90% del tiempo tenía
   el mismo vacío y quedó excluida en la primera pasada). Mobile (<880px) intacto. */
@media (min-width: 880px) {
    .page-inicio .poster {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        align-items: center; column-gap: 36px;
    }
    .page-inicio .poster > .poster__kick { grid-column: 1; grid-row: 1; align-self: end; }
    .page-inicio .poster > .poster__title { grid-column: 1; grid-row: 2; }
    .page-inicio .poster > .poster__sub { grid-column: 1; grid-row: 3; align-self: start; max-width: 52ch; }
    .page-inicio .poster > .poster__row {
        grid-column: 2; grid-row: 1 / 4; margin-top: 0;
        flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px;
    }
}

/* Módulo Álbum en Inicio (descubrimiento). Compacto, no compite con la fecha urgente. */
.albm { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.albm__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--raise); color: var(--gold-2); font-size: 1.3rem; flex: 0 0 auto; }
.albm__body { flex: 1 1 180px; min-width: 0; }
.albm__t { font-weight: 800; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.albm__col { font-family: var(--disp); font-size: var(--fs-body-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); background: rgba(255,194,51,.1); border: 1px solid rgba(255,194,51,.28); padding: 2px 8px; border-radius: 999px; }
.albm__sub { font-size: var(--fs-body); color: var(--tx-2); margin-top: 3px; }
.albm__sub b { color: var(--gold-2); }
.albm__bar { height: 6px; border-radius: 999px; background: var(--raise); overflow: hidden; margin-top: 8px; }
.albm__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 999px; }
.albm__cta { flex: 0 0 auto; }