/* Fantasy Olimar - estilos (capa sobre estadio.css) */

/* color por posicion (siempre acompañado de la sigla, nunca color solo) */
.pos-GK { --pc: var(--pos-gk); } .pos-DEF { --pc: var(--pos-def); } .pos-MED { --pc: var(--pos-med); } .pos-ATA { --pc: var(--pos-ata); }

/* fTabs: en mobile = pills scrollables (legibles, activo dorado claro); en >=680 = segmentos iguales que llenan el ancho.
   Antes era flex:1 con basis auto -> anchos desiguales (ragged). */
.page-fantasy .fseg.fseg { display: flex; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    /* fade lateral: insinúa que hay más pestañas a la derecha (Reglas) en mobile (Fase 4) */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 22px), transparent); }
.page-fantasy .fseg.fseg::-webkit-scrollbar { display: none; }
.page-fantasy .fseg button { flex: 0 0 auto; font-size: var(--fs-body); padding: 9px 16px; white-space: nowrap; scroll-snap-align: center; }
@media (min-width: 680px) { .page-fantasy .fseg button { flex: 1 1 0; min-width: 0; padding: 10px 8px; }
    /* en desktop las 5 pestañas llenan el ancho (sin scroll) → sin máscara */
    .page-fantasy .fseg.fseg { -webkit-mask-image: none; mask-image: none; } }

/* Fase 6 (B): tabs premium — ícono por pestaña, activo dorado claro, inactivo con chip sutil,
   tap target ≥44px. Reusa .seg8/.fseg: el JS lee #fTabs/data-tab/.on, NO estas clases. Solo visual. */
/* Sin `transition` propia: `body.est .fseg button` (estadio.css) tiene más especificidad
   (2 clases + 2 elementos vs 2 + 1) y ya declara el feedback táctil con los mismos tokens.
   La de acá nunca se aplicó; se elimina en vez de escalar una guerra de especificidad. */
.page-fantasy .fseg button { min-height: 44px; gap: 7px; font-weight: 700; border-radius: 999px; }
.page-fantasy .fseg button i { font-size: var(--fs-body-strong); opacity: .8; }
.page-fantasy .fseg button:not(.on) { background: rgba(151,177,232,.06); }
@media (hover: hover) { .page-fantasy .fseg button:not(.on):hover { background: rgba(61,123,255,.14); color: var(--tx); } }
.page-fantasy .fseg button.on i { opacity: 1; }
.page-fantasy .fseg button:active { transform: scale(.96); }
/* Fase 1A: en mobile chico las 4 pestañas públicas (Reglas incluida) entran en 390 sin scroll;
   el fade queda como red de seguridad si aparece una 5.ª (Ligas, admin). Va DESPUÉS del bloque
   Fase 6 para ganar el gap/padding en cascada (misma especificidad). */
@media (max-width: 480px) {
    .page-fantasy .fseg.fseg { gap: 4px; }
    .page-fantasy .fseg button { font-size: var(--fs-body-sm); padding: 9px 10px; gap: 5px; }
    .page-fantasy .fseg button i { font-size: var(--fs-body); }
}

/* HERO COMPACTO logueado (Fase 4): el que ya juega no necesita el poster gigante cada visita.
   Cuando hay sesión (body.fy-logged), el hero pasa a barra fina y la cancha es la protagonista;
   el gate deslogueado mantiene el hero completo (onboarding). */
body.fy-logged.page-fantasy .poster { padding: 13px 18px 15px; }
body.fy-logged.page-fantasy .poster .poster__ghost { display: none; }
body.fy-logged.page-fantasy .poster .poster__lines { opacity: .45; }
body.fy-logged.page-fantasy .poster .poster__title { font-size: clamp(1.45rem, 4vw, 1.95rem); margin-top: 4px; }
body.fy-logged.page-fantasy .poster .poster__sub { display: none; }

/* textos de ayuda (microcopy) */
/* A5 — banner del equipo: antes era una linea corrida con puntos (apretada en 390).
   Ahora cada regla es un chip aireado + "Ver reglas" a la derecha; wrappea legible. */
.fintro { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 2px 8px; }
.fintro__chip { font-size: var(--fs-body-sm); font-weight: 700; color: #cdd7ee; background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; padding: 4px 11px; line-height: 1.25; }
.fintro__chip b { color: var(--gold); font-weight: 800; }
.fintro .flink { margin-left: auto; }
/* OLA 3 (rediseño integral 2026-06): el helper del Banco es la ÚNICA explicación de la
   mecánica de autosuplentes. Se sube contraste (#9fb2d8→--tx-2), tamaño (.76→.82rem) y se
   resaltan las palabras clave en gold para que sea escaneable, no un párrafo gris que se saltea. */
/* Ola 0B: era `display:flex` (pensado para ícono + texto), pero ninguno de los dos usos tiene
   ícono: son párrafos con <b> adentro. En un contenedor flex cada <b> y cada nodo de texto se
   vuelve un flex item independiente, así que a 320px el hint del banco se partía en un bloque
   pseudo-3-columnas con paréntesis huérfanos. Como párrafo normal el texto fluye y se lee.
   El ícono sigue soportado (si vuelve a usarse) con margen inline en vez de `gap`. */
/* RESERVA DE ALTO (CLS): `#fLockHint` nace vacío y recibe una línea ("Abierta · cierra en
   2d 19h · Cambios 0/2") recién cuando responde /api/fantasy/mi-equipo. En mobile vive
   ARRIBA de la cancha (`.fteam__side{order:-1}`), así que esa línea empujaba todo 31 px
   —19,2 de caja de línea + 12 de margen, medido—. `min-height: 1.5em` = exactamente una
   línea con este `line-height`, reservada desde el primer pintado. */
.fhint { font-size: var(--fs-body); color: var(--tx-2); line-height: 1.5; margin: 2px 2px 10px; display: block; min-height: 1.5em; }
.fhint .bi { color: var(--gold); margin-right: 6px; }
.fhint b, .fhint strong { color: var(--gold-2); font-weight: 700; }
.bench-lbl { font-family: Anton, sans-serif; font-size: 1rem; letter-spacing: .03em; margin: 16px 0 4px; display: flex; align-items: baseline; gap: 8px; }
.bench-sub { font-family: Barlow, sans-serif; color: #9fb2d8; }   /* tipografía: .kick8 */
.bench .bslot:first-child { border-color: rgba(255, 194, 51, .42); box-shadow: inset 0 0 0 1px rgba(255, 194, 51, .12); }
.bench .bslot:first-child .bslot__n { box-shadow: 0 0 0 3px rgba(255, 194, 51, .18); }

.fhead { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fhead .inp8 { min-width: 180px; font-weight: 700; }
.fhead__meta { display: flex; gap: 8px; align-items: center; }
.fchip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-body-sm); font-weight: 800;
    background: rgba(255, 255, 255, .08); color: #d7e0f5; letter-spacing: .04em; }
.fchip.ok { background: rgba(80, 220, 140, .16); color: #6ef0a6; }
.fchip.bad { background: rgba(255, 120, 120, .16); color: #ff9b9b; }

.fform { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 8px; }
.fform .inp8 { width: auto; min-width: 110px; }
.fcuota { display: flex; flex-direction: column; gap: 5px; margin-left: auto; align-items: flex-start; font-size: var(--fs-body-sm); font-weight: 800; }
.cuotarow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cuotalbl { color: var(--tx-3); font-size: .66rem; letter-spacing: .04em; }
.fcuota span:not(.cuotalbl) { padding: 4px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.fcuota .ok { background: rgba(80, 220, 140, .16); color: #6ef0a6; }
.fcuota .ok::before { content: "\2713"; }
.fcuota .bad { background: rgba(255, 255, 255, .07); color: #cdd7ee; }

/* ---- holder de foto (circular, fallback camiseta+iniciales detras) ---- */
.fph { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: block;
    background: #0c1a38; box-shadow: 0 0 0 2.5px var(--pc, #2a3c56), 0 3px 8px rgba(0, 0, 0, .35); }
.fph__fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fph__fb svg { position: absolute; width: 78%; height: 78%; opacity: .5; }
.fph__fb b { position: relative; font-family: Anton, sans-serif; font-size: 1rem; letter-spacing: .02em; color: #cdd7ee; }
.fph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- cancha "estadio" ---- */
.pitch { position: relative; border-radius: 18px; padding: 18px 10px 22px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
        repeating-linear-gradient(180deg, #0f4429 0 38px, #0c3a23 38px 76px);
    border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 0 60px rgba(0, 0, 0, .35); }
/* lineas de cancha: campo completo (area, circulo central, mitad, punto) via SVG */
.pitch::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='0.7'%3E%3Crect x='2.5' y='2.5' width='95' height='145'/%3E%3Cline x1='2.5' y1='75' x2='97.5' y2='75'/%3E%3Ccircle cx='50' cy='75' r='12'/%3E%3Crect x='30' y='2.5' width='40' height='18'/%3E%3Crect x='40' y='2.5' width='20' height='7'/%3E%3Crect x='30' y='129.5' width='40' height='18'/%3E%3Crect x='40' y='140.5' width='20' height='7'/%3E%3C/g%3E%3Ccircle cx='50' cy='75' r='1' fill='%23ffffff' fill-opacity='0.28'/%3E%3C/svg%3E"); }
.pitch::after { content: none; }
.prow { position: relative; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; z-index: 1; }

.pslot { width: 86px; border: 0; background: transparent; cursor: pointer; position: relative; display: flex; flex-direction: column;
    align-items: center; gap: 4px; padding: 2px; transition: transform var(--mo-xfast) var(--ease-spring); touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; }
.pslot:active { transform: scale(.93); }
.pslot__ph { width: 54px; display: block; }     /* contiene .fph */
.pslot .fph { animation: fpop var(--mo) var(--ease-out); }
@keyframes fpop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pslot__nm { font-size: var(--fs-body-sm); font-weight: 800; color: #fff; line-height: 1.05; text-align: center; max-width: 86px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.pslot__cat { font-size: .58rem; font-weight: 800; color: #0a1430; background: var(--pc, #ffc233); padding: 1px 6px; border-radius: 999px; }
.pslot__arm { position: absolute; top: -5px; right: 12px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-family: Anton, sans-serif; font-size: var(--fs-body); color: #0a1430; border: 2px solid #0a1430; z-index: 2; box-shadow: 0 2px 7px rgba(0, 0, 0, .5); }
.pslot__arm.cap { background: linear-gradient(180deg, #ffce5c, #ffc233); }
.pslot__arm.sub { background: linear-gradient(180deg, #bfe0ff, #6fb4ff); color: #07274d; }
/* slot vacio
   RESERVA DE ALTO (CLS): el círculo mide `100%` — el MISMO ancho que `.fph` del slot lleno—
   y no 54 px fijos, y el slot vacío repite las tres cajas de línea del lleno (círculo,
   nombre, píldora). Así un slot vacío y uno lleno miden igual en los tres breakpoints
   (64 / 86 / 96 px) sin ningún número mágico, y montar el equipo no estira la cancha.
   Si alguien vuelve a poner un ancho fijo acá, vuelve el shift de 173 px. */
.pslot.empty .pslot__add { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--pc, #fff) 55%, transparent);
    display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .18); }
.pslot.empty .pslot__add .bi { font-size: 1.25rem; color: var(--pc, #fff); }
/* `.pslot__pos` va SIEMPRE junto a `.pslot__nm` (ver emptySlot en fantasy.js): sólo cambia
   color y espaciado, el alto de la línea lo manda `.pslot__nm` para que sea idéntico. */
.pslot.empty .pslot__pos { font-weight: 800; letter-spacing: .06em; color: var(--pc, #cdd7ee); }
/* píldora fantasma: ocupa la línea de la categoría sin dibujarla */
.pslot__cat--ghost, .bslot__pos--ghost, .bslot__cat--ghost { visibility: hidden; }
/* Foto fantasma del banco: mismo box que `.fph` (aspect-ratio 1 sobre el mismo ancho), pero
   con el MISMO lenguaje que el círculo vacío de la cancha — borde punteado y fondo hundido.
   Con el disco lleno de `.fph` se leía como "la foto no cargó" en vez de "slot vacío"
   (visto en la captura de la estructura vacía a 390). */
.fph--ghost { background: rgba(0, 0, 0, .18); box-shadow: none;
    border: 2px dashed color-mix(in srgb, var(--pc, #fff) 45%, transparent); }

/* ---- banco ---- */
.benchwrap { margin-top: 8px; }
/* minmax(0,1fr) + min-width:0: con 1fr el minimo automatico de la pista es el min-content
   del slot, o sea el nombre entero sin cortar (white-space:nowrap). A 320px eso hace que la
   grilla mida mas que el viewport (blowout) y desborde en horizontal. */
.bench { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bslot { position: relative; min-width: 0; border: 1px solid rgba(255, 255, 255, .09); background: #0b1a36; border-radius: 12px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; transition: transform var(--mo-xfast); touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; }
.bslot:active { transform: scale(.96); }
.bslot__n { position: absolute; top: 5px; left: 6px; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 194, 51, .9);
    color: #0a1430; font-weight: 800; font-size: .64rem; display: flex; align-items: center; justify-content: center; }
.bslot__ph, .bslot .fph { width: 40px; }
.bslot__nm { font-size: .64rem; font-weight: 800; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bslot__pos { font-size: .54rem; font-weight: 800; color: #0a1430; background: var(--pc, #fff); padding: 0 5px; border-radius: 999px; }
.bslot__cat { font-size: .56rem; color: #cdd7ee; font-weight: 700; }
/* RESERVA DE ALTO (CLS): el slot vacío ya NO se centra ni declara `min-height: 92px`. Tenía
   que hacerlo cuando su contenido era una sola línea ("+ Suplente 1"); ahora repite la
   estructura del lleno (círculo + nombre + posición + categoría, las dos últimas en
   fantasma), así que su alto natural ES el del lleno. Un `min-height` propio acá volvería a
   desincronizar los dos estados: el banco crecería al llegar los suplentes. */
.bslot.empty { color: rgba(255, 255, 255, .5); border-style: dashed; }

.fsave { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.fmsg { font-size: var(--fs-body); font-weight: 700; }
.fmsg.ok { color: #6ef0a6; } .fmsg.bad { color: #ff9b9b; }

/* ---- board / leaderboard (tabla, destacados) ---- */
.board { display: flex; flex-direction: column; gap: 4px; }
.brow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #0b1a36; border: 1px solid rgba(255, 255, 255, .06); }
.brow__p { width: 26px; text-align: center; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.brow__n { flex: 1; font-weight: 700; }
.brow__v { font-weight: 800; font-variant-numeric: tabular-nums; }

.brow__ph { width: 30px; flex: none; }
.brow__n small { font-weight: 600; }
/* avatar (iniciales) + resaltado de TU equipo en las filas */
.brow__av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; background: rgba(255, 255, 255, .07); color: #cdd7ee; }
.brow.mine { border-color: rgba(255, 194, 51, .5); background: rgba(255, 194, 51, .08); }
.brow__you { font-size: .56rem; font-weight: 800; color: #0a1430; background: var(--gold); border-radius: 5px; padding: 1px 5px; margin-left: 5px; text-transform: uppercase; }

/* podio top-3: 2º izq · 1º centro (mas alto, dorado, trofeo) · 3º der */
.podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 8px; align-items: end; margin-bottom: 12px; }
.podium--few { display: flex; justify-content: center; }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 16px 8px 12px; border-radius: 16px;
    background: #0e1f44; border: 1px solid rgba(255, 255, 255, .08); position: relative; min-width: 0; }
.podium--few .pcard { min-width: 200px; }
.pcard.tap { cursor: pointer; }
.pcard--1 { padding-top: 22px; background: linear-gradient(180deg, rgba(255, 194, 51, .22), rgba(255, 194, 51, .04)); border-color: rgba(255, 194, 51, .55); box-shadow: 0 10px 30px rgba(255, 194, 51, .12); }
.pcard--2 { background: linear-gradient(180deg, rgba(200, 214, 235, .16), rgba(200, 214, 235, .03)); border-color: rgba(200, 214, 235, .3); }
.pcard--3 { background: linear-gradient(180deg, rgba(214, 154, 92, .16), rgba(214, 154, 92, .03)); border-color: rgba(214, 154, 92, .32); }
.pcard__rk { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: Anton, sans-serif; font-size: var(--fs-body); color: #0a1430; background: #97b1e8; }
.pcard--1 .pcard__rk { background: var(--gold); } .pcard--2 .pcard__rk { background: #c8d6eb; } .pcard--3 .pcard__rk { background: #d69a5c; }
.pcard__av { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-body); background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .14); color: #e6edff; }
.pcard--1 .pcard__av { width: 54px; height: 54px; border-color: var(--gold); }
.pcard__n { font-weight: 800; font-size: var(--fs-body-sm); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__v { font-family: Anton, sans-serif; font-size: 1.3rem; line-height: 1; }
.pcard--1 .pcard__v { font-size: 1.6rem; color: var(--gold); }
.pcard__v small { font-family: Barlow, sans-serif; font-size: .55rem; color: #9fb2d8; margin-left: 2px; }
.pcard.mine { outline: 2px solid #ffc233; outline-offset: -2px; }

/* destacados: card especial + mini cards */
.dstar2 { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 20px 14px;
    border-radius: 18px; background: radial-gradient(120% 80% at 50% 0%, rgba(255, 194, 51, .2), rgba(255, 194, 51, .03) 70%);
    border: 1px solid rgba(255, 194, 51, .3); }
.dstar2__k { color: var(--gold); }   /* tipografía: .kick8--lg — el oro acá es premio, no decoración */
.dstar2__ph { width: 92px; margin: 6px 0; } .dstar2__ph .fph { --pc: #ffc233; }
.dstar2__nm { font-family: Anton, sans-serif; font-size: 1.35rem; line-height: 1.05; }
.dstar2__v { color: #d7e0f5; font-weight: 700; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.dmini { background: #0b1a36; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 12px; text-align: center; }
.dmini__ph { width: 50px; display: inline-block; } .dmini__ph .fph { --pc: #3d7bff; }
.dmini__k { color: #9fb2d8; margin-top: 4px; }   /* tipografía: .kick8--lg */
.dmini__n { font-weight: 800; font-size: var(--fs-body); }
.dmini__v { color: var(--gold); font-weight: 700; font-size: var(--fs-body-sm); }

/* ---- "Mi temporada": reserva de alto (CLS) ----
   La tarjeta está ARRIBA de la cancha en mobile (`.fteam__side{order:-1}`), así que cualquier
   crecimiento suyo empuja los 11 titulares. `.mtbody` reserva el alto de las DOS filas que
   tiene el estado con datos, y ahí adentro entran los otros tres estados (esqueleto, "todavía
   no hay fecha" y fallo). El valor NO es un número inventado: es el box model real de `.lrow`
   —11 px de padding arriba + 11 abajo + una línea de `.lrow__v` (1.15rem)— por dos filas. */
.mtbody { min-height: calc(2 * (22px + 1.15rem * 1.2)); }
/* barra del esqueleto: inline-block con `&nbsp;` adentro, así su caja de línea es
   EXACTAMENTE la de la cifra que la reemplaza (nada de height en px). */
.mt-sk { display: inline-block; width: 3.2em; border-radius: 8px; }
.mtnota { display: flex; align-items: flex-start; gap: 8px; padding: 10px 2px; font-size: var(--fs-body-sm); color: var(--tx-2); line-height: 1.45; }
.mtnota .bi { color: var(--gold); margin-top: 1px; flex: none; }

/* mini-ligas */
.ligahd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.copycode { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed rgba(255, 194, 51, .5); background: rgba(255, 194, 51, .08);
    color: var(--gold); font-weight: 800; letter-spacing: .08em; border-radius: 10px; padding: 6px 12px; cursor: pointer; font-size: var(--fs-body); }
.copycode:active { transform: scale(.97); }
/* Hueco donde se pinta el `.secerr8` de una liga cuya tabla falló. Ocupa el lugar exacto
   del `.empty8 style="margin:8px 0"` que antes mentía diciendo "Sin puntajes aún", así
   que el alto de la card no cambia entre el caso bueno y el caso roto. */
.ligaerr { margin: 8px 0; }

/* ---- overlays (picker + action sheet), self-contained ---- */
#picker, #slotMenu { position: fixed; inset: 0; z-index: 120; display: none; }
#picker.open, #slotMenu.open { display: block; }
#picker::before, #slotMenu::before { content: ""; position: absolute; inset: 0; background: rgba(2, 6, 18, .62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#picker .sheet8__panel, #slotMenu .sheet8__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh;
    background: linear-gradient(180deg, #13265a, #0b1a40); border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 20px 20px 0 0;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, .6); animation: sheetup var(--mo-slow) var(--ease-out); }
@keyframes sheetup { from { transform: translateY(102%); } to { transform: translateY(0); } }
/* desktop/tablet: picker y action sheet = modal centrado (no bottom-sheet full-width = se veia mal en web) */
@media (min-width: 720px) {
    #picker .sheet8__panel { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, 92vw); border-radius: 18px; bottom: 4vh; max-height: 88vh; }
    #slotMenu .sheet8__panel { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); border-radius: 18px; max-height: 86vh; animation: none; }
}
#picker .sheet8__head, #slotMenu .sheet8__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#picker .sheet8__x, #slotMenu .sheet8__x { background: rgba(255, 255, 255, .1); border: none; color: #fff; width: 34px; height: 34px;
    border-radius: 50%; cursor: pointer; flex: none; }

.pfilters { display: flex; flex-direction: column; gap: 6px; }
.pfrow { display: flex; gap: 6px; flex-wrap: wrap; }
/* chip de posición activo: usa el color de la posición */
.pfchip--pos.on { background: var(--pc, #ffc233); border-color: var(--pc, #ffc233); color: #0a1430; }
.pfchip { display: inline-flex; align-items: center; min-height: 44px;   /* P3.6: medía 25 */
    border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #cdd7ee; border-radius: 999px;
    padding: 5px 14px; font-size: var(--fs-body-sm); font-weight: 700; cursor: pointer; }
.pfchip.on { background: var(--gold); color: #0a1430; border-color: var(--gold); }

.picklist { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; }
.pickrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .03); color: #fff; cursor: pointer; text-align: left; width: 100%; }
.pickrow:active { transform: scale(.99); }
.pickrow__ph { width: 38px; flex: none; }
.pickrow__nm { flex: 1; min-width: 0; font-weight: 700; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickrow__pos { width: 38px; text-align: center; font-size: .62rem; font-weight: 800; border-radius: 6px; padding: 3px 0;
    background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); }
.pickrow__cat { font-size: .68rem; color: var(--gold); font-weight: 700; min-width: 38px; text-align: right; }
/* stat comparativa (PJ · G) para elegir informado; datos de los endpoints del plantel */
.pickrow__stat { flex: none; font-size: .66rem; font-weight: 700; color: var(--tx-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .pickrow__stat { display: none; } }   /* en pantallas muy chicas prioriza nombre+pos+cat */

/* action sheet buttons */
.smbtns { display: flex; flex-direction: column; gap: 8px; }
.smbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #fff; font-weight: 700; font-size: var(--fs-body-strong); cursor: pointer; }
.smbtn:active { transform: scale(.99); }
.smbtn .bi { font-size: 1.05rem; color: var(--gold); }
.smbtn.danger { color: #ff9b9b; } .smbtn.danger .bi { color: #ff6a6a; }

body.noscroll8 { overflow: hidden; }

/* ============================================================
   HOVER EN DESKTOP (OLA 3 · P3.8)
   `.pslot`, `.bslot`, `.pfchip` y `.copycode` declaraban `:active` y NINGÚN `:hover`:
   en 1280/1440, donde el gesto es el mouse y no el dedo, los cuatro se veían inertes —
   nada respondía hasta hacer clic. Se agrega hover SOLO dentro de `@media (hover:hover)`
   (que touch no matchea, así que ningún teléfono queda con un estado pegado), sin escalar
   cards ni mover layout: cambia el anillo/el fondo, no la posición.
   El foco de teclado sigue siendo el anillo dorado global de `:focus-visible`, aparte.
   ============================================================ */
@media (hover: hover) {
    /* slot de la cancha: se ilumina el anillo de la foto, la card no se mueve
       (moverla desplazaría al jugador de su posición en la formación). */
    .pslot:hover .fph { box-shadow: 0 0 0 2.5px var(--gold-2), 0 6px 14px rgba(0, 0, 0, .45); }
    .pslot:hover .pslot__nm { color: var(--gold-2); }
    .pslot.empty:hover .pslot__add { border-color: var(--gold-2); background: rgba(255, 194, 51, .12); }
    .bslot:hover { border-color: rgba(255, 194, 51, .4); background: #10224a; }
    .pfchip:not(.on):hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
    .copycode:hover { background: rgba(255, 194, 51, .16); border-style: solid; color: var(--gold-2); }
}
.pslot .fph, .bslot, .pfchip, .copycode {
    transition: box-shadow var(--mo-fast) var(--ease-out), background var(--mo-fast) var(--ease-out),
        border-color var(--mo-fast) var(--ease-out), color var(--mo-fast) var(--ease-out);
}
.copycode { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
    .pslot .fph, .bslot, .pfchip, .copycode { transition: none; }
}

/* ---- microinteracciones ---- */
/* capitan: pulso sutil sobre el badge */
/* AMBIENTAL: latido continuo del brazalete, no es la respuesta a un gesto. La duración queda
   LITERAL a propósito — la escala de tokens llega a --mo-bar (700ms) y describe transiciones;
   meter un loop de 2,4s adentro rompería el significado de la escala. */
.pslot__arm.cap { animation: cappulse 2.4s ease-in-out infinite; }
@keyframes cappulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,194,51,.55); } 50% { box-shadow: 0 0 0 6px rgba(255,194,51,0); } }
/* guardar: flash de exito */
.btn8.ok-flash { animation: okflash var(--mo-enter) var(--ease-spring); }
@keyframes okflash { 0% { transform: scale(1); } 35% { transform: scale(1.06); background: var(--win); color: #062013; } 100% { transform: scale(1); } }
/* guardar equipo = pico emocional: destello dorado + check + reacción escalonada de la cancha.
   Es la celebración (sobre el okflash del botón). Con reduced-motion degrada al flash simple.
   .9s / .95s quedan LITERALES: son una coreografía de celebración, no una transición de UI, y
   la escala de tokens termina en --mo-bar (700ms) — no hay token que las represente sin
   acortarlas. fantasy.js NO las duplica más: espera el animationend de .savecele__check. */
.savecele { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; }
.savecele__burst { position: absolute; inset: -12%;
    background: radial-gradient(circle at 50% 46%, rgba(255,194,51,.5), rgba(255,194,51,.1) 42%, transparent 68%);
    animation: celeburst .9s var(--ease-out) forwards; }
@keyframes celeburst { 0% { opacity: 0; transform: scale(.45); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.savecele__check { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 32%, #ffe08a, var(--gold)); color: #06210f;
    box-shadow: 0 14px 36px rgba(255,194,51,.5), 0 0 0 7px rgba(255,194,51,.16);
    animation: celecheck .95s var(--ease-spring) forwards; }
.savecele__check svg { width: 48px; height: 48px; }
@keyframes celecheck { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 30% { opacity: 1; transform: scale(1.14) rotate(0); } 72% { transform: scale(1); } 100% { opacity: 0; transform: scale(1.03); } }
/* la cancha "responde": pop escalonado por línea (GK→DEF→MED→ATA).
   Los animation-delay quedan literales: son OFFSETS de un escalonado (60/120/180ms es una
   escalera regular, no tres duraciones distintas). Tokenizar sólo los dos que casualmente
   coinciden con --mo-xfast rompería la lectura de la escalera. */
.pitch.celebrate .pslot { animation: celepop var(--mo-enter) var(--ease-spring); }
.pitch.celebrate .prow:nth-child(2) .pslot { animation-delay: .06s; }
.pitch.celebrate .prow:nth-child(3) .pslot { animation-delay: .12s; }
.pitch.celebrate .prow:nth-child(4) .pslot { animation-delay: .18s; }
@keyframes celepop { 0% { transform: none; } 42% { transform: translateY(-5px) scale(1.05); } 100% { transform: none; } }

/* entrada de destacados + crossfade de tab */
.dstar2 { animation: rvpop var(--mo-enter) var(--ease-out); }
@keyframes rvpop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.ftab.show-in { animation: tabin var(--mo-slow) var(--ease-out); }
@keyframes tabin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .pslot__arm.cap, .pslot.needs-cap, .btn8.ok-flash, .dstar2, .ftab.show-in,
    .savecele__burst, .savecele__check, .pitch.celebrate .pslot,
    .pslot .fph, #picker .sheet8__panel, #slotMenu .sheet8__panel, #verEquipo .sheet8__panel { animation: none !important; }
    .pslot.needs-cap { box-shadow: 0 0 0 2px rgba(255,194,51,.5); }   /* sin animación: anillo fijo */
    .savecele { display: none; }
}

/* ============================================================
   Fase2 (rediseño integral) — descubribilidad del capitán + guía de cuota en el picker.
   ============================================================ */
/* Equipo completo sin capitán: los titulares sin brazalete laten un anillo dorado ("tocame"). */
/* AMBIENTAL: mismo criterio que cappulse — loop infinito de 1,9s, fuera de la escala. */
.pslot.needs-cap { animation: needscap 1.9s ease-in-out infinite; border-radius: 14px; }
@keyframes needscap {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,194,51,0); }
    50% { box-shadow: 0 0 0 3px rgba(255,194,51,.5); }
}
/* Línea-guía de cuota arriba de la lista del picker (solo orientación, no bloquea). */
.pickguide {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: var(--fs-body-sm); line-height: 1.35; color: var(--tx-2);
    background: rgba(255,194,51,.08); border: 1px solid rgba(255,194,51,.25);
    border-radius: 10px; padding: 8px 11px; margin: 0 2px 10px;
}
.pickguide .bi { color: var(--gold); margin-top: 1px; flex: none; }
.pickguide b { color: var(--gold-2); font-weight: 700; }

@media (min-width: 860px) {
    .pslot { width: 96px; } .pslot__ph { width: 60px; }
    .bench { max-width: 720px; margin: 0 auto; }
}
/* mobile angosto: que entre la fila de 5 sin wrap */
@media (max-width: 460px) {
    .pitch { padding: 14px 4px 18px; gap: 8px; }
    .prow { gap: 4px; }
    .pslot { width: 64px; } .pslot__ph { width: 46px; }
    .pslot__nm { font-size: .6rem; max-width: 64px; }
    .pslot__arm { right: 8px; width: 19px; height: 19px; font-size: .68rem; }
    /* ojo: esta regla pisa la de arriba, tiene que repetir minmax(0,...) o vuelve el blowout */
    .bench { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .bslot { padding: 7px 2px; } .bslot__ph, .bslot .fph { width: 34px; }
    .bslot__cat { display: none; }
    .fcuota { margin-left: 0; width: 100%; }
}

/* ============================================================
   Estado del equipo (card jerárquica; reemplaza la fila de chips)
   ============================================================ */
/* P3.6 — "Ver reglas" medía 17px de alto. Es un link dentro de una fila de chips: subirlo
   a 44 de caja empujaría toda la fila, así que el área de toque va en un pseudo-elemento
   que crece SOLO en vertical. El texto y el subrayado no se mueven. */
.flink { position: relative; background: none; border: none; color: var(--gold); font-weight: 800; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.flink::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.estadobox { display: block; width: 100%; }
.estado { border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 11px; }
.estado--ok { border-color: rgba(80, 220, 140, .35); background: rgba(80, 220, 140, .07); }
.estado--warn { border-color: rgba(255, 194, 51, .38); background: rgba(255, 194, 51, .07); }
.estado__hd { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-body); line-height: 1.25; }
.estado--ok .estado__hd { color: #7af0ad; }
.estado--warn .estado__hd { color: #ffd277; }
.estado__hd .bi { font-size: 1.1rem; flex: none; }
.cuotagrp { display: flex; flex-direction: column; gap: 6px; }
.cuotagrp__t { color: #9fb2d8; display: flex; gap: 6px; align-items: baseline; }   /* tipografía: .kick8 */
.cuotagrp__t em { font-style: normal; color: #e6edff; letter-spacing: 0; font-size: var(--fs-body-sm); }
.cuotabars { display: flex; gap: 6px; flex-wrap: wrap; }
.cbar { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: var(--fs-body-sm); font-weight: 800; }
.cbar .bi { font-size: var(--fs-body); }
.cbar.ok { background: rgba(80, 220, 140, .16); color: #6ef0a6; }
.cbar.bad { background: rgba(255, 255, 255, .07); color: #cdd7ee; }
/* P3.9 — estos cinco selectores pedían 900 y Barlow se carga 400-800: el browser
   sintetizaba/redondeaba a 800 y la diferencia que el autor quiso NUNCA existió.
   Se declara el peso real que se usa, para que el CSS deje de mentir. */
.cbar b { font-weight: 800; }

/* checklist discreto (jugadores / capitán / subcapitán) */
.ckrow { display: flex; flex-wrap: wrap; gap: 6px; }
.ckitem { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: var(--fs-body-sm); font-weight: 800; }
.ckitem .bi { font-size: var(--fs-body); }
.ckitem.ok { background: rgba(80, 220, 140, .14); color: #7af0ad; }
.ckitem.bad { background: rgba(255, 255, 255, .06); color: #cdd7ee; }
.ckitem.bad .bi { color: #ffd277; }
.ckitem b { font-weight: 800; opacity: .9; }   /* P3.9 */
/* onboarding del primer armado */
.estado__onb { display: flex; gap: 8px; font-size: var(--fs-body-sm); line-height: 1.35; color: #dbe6ff; background: rgba(61, 123, 255, .12);
    border: 1px solid rgba(61, 123, 255, .3); border-radius: 11px; padding: 9px 11px; }
.estado__onb .bi { color: #6fb4ff; font-size: 1rem; flex: none; margin-top: 1px; }
/* tip de capitán/subcapitán cuando el equipo está completo */
.estado__tip { display: flex; gap: 8px; align-items: center; font-size: var(--fs-body-sm); color: #ffe1a6; background: rgba(255, 194, 51, .1);
    border: 1px dashed rgba(255, 194, 51, .4); border-radius: 11px; padding: 8px 11px; }
.estado__tip .bi { color: var(--gold); flex: none; }
/* countdown al cierre */
#fLockCd { font-variant-numeric: tabular-nums; color: #ffd277; }

/* picker: jugador ya elegido (atenuado, no clickeable) */
.pickrow.used { opacity: .5; cursor: default; }
.pickrow.used:hover { background: transparent; border-color: rgba(255, 255, 255, .06); }
.pickrow__stat.used { display: inline-flex; align-items: center; gap: 4px; color: #7af0ad; font-weight: 800; }

/* ============================================================
   Layout equipo: cancha (principal) + panel lateral en desktop
   ============================================================ */
/* mobile: controles (nombre/formación/estado) ARRIBA de la cancha, guardar al final — igual que antes */
.fteam { display: flex; flex-direction: column; }
.fteam__side { order: -1; }
.fteam__side > * { margin-top: 10px; }
.fteam__side > :first-child { margin-top: 0; }
/* tablet + desktop: cancha (principal) + panel lateral. Antes era >=980 → tablet quedaba mobile estirado. */
@media (min-width: 768px) {
    .fteam { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 340px); gap: 18px; align-items: start; }
    .fteam__main { grid-column: 1; min-width: 0; }
    .fteam__main .pitch { max-width: 680px; margin: 0 auto; }
    .fteam__main .fsave { max-width: 680px; margin: 14px auto 0; }
    .fteam__side { grid-column: 2; order: 0; position: sticky; top: 14px; display: flex; flex-direction: column; gap: 10px; }
    .fteam__side .fhead, .fteam__side .fform { margin: 0; }
}
/* desktop grande: cancha mas protagonista (slots/fotos mas grandes, menos espacio muerto) */
@media (min-width: 1280px) {
    .fteam { grid-template-columns: minmax(0, 1fr) 340px; }
    .fteam__main .pitch, .fteam__main .fsave { max-width: 720px; }
    .fteam__main .pslot { width: 106px; } .fteam__main .pslot__ph { width: 68px; }
    .fteam__main .prow { gap: 12px; }
}

/* tablet+desktop: tabla / destacados / ligas en columna centrada (no estiradas a todo el ancho = sparse) */
@media (min-width: 760px) {
    #tab-tabla, #tab-ligas { max-width: 680px; margin-inline: auto; }
    #tab-destacados { max-width: 940px; margin-inline: auto; }
}
/* destacados a 2 columnas en desktop: destacados | top de la fecha */
.destgrid { display: grid; gap: 14px; }
@media (min-width: 980px) { .destgrid { grid-template-columns: 1.05fr .95fr; align-items: start; } .destgrid__side { position: sticky; top: 14px; } }
.destgrid__side .muted { margin-top: 0 !important; }

/* ============================================================
   Reglas (guía visual)
   ============================================================ */
.rules { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .rules { grid-template-columns: 1fr 1fr; } .rule--wide { grid-column: 1 / -1; } }
.rule { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .10); border-radius: 16px; padding: 14px 16px; }
.rule__h { display: flex; align-items: center; gap: 8px; font-family: Anton, sans-serif; font-size: 1.05rem; letter-spacing: .02em; margin: 0 0 10px; color: #fff; }
.rule__h .bi { color: var(--gold); }
.rule__steps, .rule__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-body); color: #cdd7ee; line-height: 1.4; }
.rule__steps b, .rule__list b, .rule__p b { color: var(--gold); font-weight: 800; }
.rule__p { font-size: var(--fs-body); color: #cdd7ee; line-height: 1.45; margin: 8px 0 0; }
.rule__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rstat { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px 4px; text-align: center; }
.rstat b { display: block; font-family: Anton, sans-serif; font-size: 1.4rem; color: var(--gold); line-height: 1; }
.rstat span { font-size: .64rem; color: #9fb2d8; text-transform: uppercase; letter-spacing: .03em; }
.rtag { display: inline-block; background: rgba(61, 123, 255, .16); color: #9cc3ff; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-body-sm); font-weight: 700; margin: 0 2px; }
.rtable { display: block; max-width: 560px; }
/* en desktop la tabla de puntajes usa 2 columnas (antes quedaba angosta a la izq con vacio a la derecha) */
@media (min-width: 760px) { .rule--wide .rtable { max-width: none; column-count: 2; column-gap: 34px; } }
.rtable__grp { color: #9fb2d8; margin: 12px 0 4px; break-after: avoid; }   /* tipografía: .kick8 */
.rtable__grp:first-child { margin-top: 0; }
.rrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: var(--fs-body); color: #e6edff; break-inside: avoid; }
.rrow > span { flex: 1; }
.rrow b { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }   /* P3.9 */
.rrow small { color: #9fb2d8; font-size: .66rem; }
.rrow b.pos { color: #6ef0a6; } .rrow b.neg { color: #ff8a93; } .rrow b.neu { color: #cdd7ee; }

/* selector de fecha (historial) */
.fechabar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fechabar .muted { font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: .04em; }
.fechabar .fechasel { width: auto; min-width: 150px; flex: 1; max-width: 280px; }
/* filas de leaderboard clickeables */
.brow.tap, .pod.tap { cursor: pointer; }
@media (hover: hover) { .brow.tap:hover { background: rgba(255, 255, 255, .06); } }

/* ====== sheet: ver equipo de un manager (puntos por jugador) ====== */
#verEquipo { position: fixed; inset: 0; z-index: 120; display: none; }
#verEquipo.open { display: block; }
#verEquipo::before { content: ""; position: absolute; inset: 0; background: rgba(2, 6, 18, .62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#verEquipo .sheet8__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto;
    background: linear-gradient(180deg, #13265a, #0b1a40); border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 20px 20px 0 0;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, .6); animation: sheetup var(--mo-slow) var(--ease-out); }
#verEquipo .sheet8__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#verEquipo .sheet8__x { background: rgba(255, 255, 255, .1); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: none; }
@media (min-width: 720px) { #verEquipo .sheet8__panel { left: 50%; right: auto; transform: translateX(-50%); width: 560px; border-radius: 20px; bottom: 4vh; max-height: 90vh; } }
.venotas { display: flex; flex-wrap: wrap; gap: 6px; }
.venotas span { background: rgba(255, 194, 51, .14); color: #ffd277; border-radius: 999px; padding: 4px 10px; font-size: var(--fs-body-sm); font-weight: 800; }
.velist { display: flex; flex-direction: column; gap: 4px; }
.ve-blbl { color: #9fb2d8; margin-top: 8px; }   /* tipografía: .kick8--lg */
.veplayer { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .03); border-left: 3px solid var(--pos, #97b1e8); }
.veplayer.pos-GK { --pos: var(--pos-gk); } .veplayer.pos-DEF { --pos: var(--pos-def); } .veplayer.pos-MED { --pos: var(--pos-med); } .veplayer.pos-ATA { --pos: var(--pos-ata); }
.veplayer.dim { opacity: .5; }
.veplayer__ph { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; position: relative; }
.veplayer__ph .fph { width: 30px; height: 30px; }
.veplayer__nm { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 700; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.veplayer__nm small { color: #9fb2d8; font-weight: 600; font-size: .66rem; }
.veplayer__v { font-weight: 800; font-variant-numeric: tabular-nums; }   /* P3.9 */
.veplayer__v small { color: #9fb2d8; font-weight: 600; font-size: .62rem; }
.vebadge { font-size: .6rem; font-weight: 800; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); }   /* P3.9 */
.vebadge.cap { background: var(--gold); color: #0a1430; } .vebadge.star { background: rgba(255, 194, 51, .9); color: #0a1430; }
.vebadge.sub { background: rgba(80, 220, 140, .2); color: #6ef0a6; } .vebadge.bad { background: rgba(255, 90, 106, .2); color: #ff8a93; }

/* Resumen de la fecha (Destacados) */
.dsum { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.dsum__hd { color: #9fb2d8; margin-bottom: 8px; }   /* tipografía: .kick8--lg */
.dsum__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dsum__c { text-align: center; }
.dsum__c b { display: block; font-family: Anton, sans-serif; font-size: 1.5rem; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.dsum__c b.pos { color: #6ef0a6; } .dsum__c b.neg { color: #ff8a93; }
.dsum__c span { font-size: .62rem; color: #9fb2d8; text-transform: uppercase; letter-spacing: .03em; }

/* ============================================================
   Polish visual v2 (auditoría pixel-level)
   ============================================================ */
/* poster compacto en Fantasy: el hero gigante comía 1/3 de pantalla en cada tab */
.page-fantasy .poster { padding: 18px 20px 16px; margin-top: 12px; }
.page-fantasy .poster__title { font-size: clamp(1.8rem, 6.4vw, 2.9rem); }
.page-fantasy .poster__ghost { display: none; }
.page-fantasy .poster__sub { font-size: var(--fs-body); margin-top: 8px; }
@media (min-width: 768px) { .page-fantasy .poster { padding: 22px 26px; } .page-fantasy .poster__title { font-size: clamp(2.4rem, 4vw, 3.2rem); } }

/* racha: distinta del pill de fecha (las dos en verde se confundían) */
#eqRacha.fchip { background: rgba(255, 194, 51, .16); color: #ffd277; }

/* guardar protagonista en mobile (antes quedaba chico abajo-derecha) */
@media (max-width: 767px) {
    /* Fase2: se PROBÓ Guardar sticky al pie pero tapaba los slots vacíos de la cancha durante el
       armado (verificado en QA: el botón cubría .pslot.empty). Se descartó; Guardar queda al final
       del flujo (no estorba el core de armar el equipo). */
    .fteam__main .fsave { flex-wrap: wrap; justify-content: stretch; gap: 8px; }
    .fteam__main .fsave .btn8 { width: 100%; order: 2; }
    .fteam__main .fsave .fmsg { order: 1; width: 100%; text-align: center; }
}

/* ============================================================
   Polish premium v3: fhead (header de equipo), action sheet, modal mis-puntos
   ============================================================ */
/* fhead: antes era un input plano; ahora header con crest + label + meta */
.fhead { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; justify-content: flex-start; }
.fhead__crest { width: 46px; height: 46px; flex: none; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
    font-family: Anton, sans-serif; font-size: 1.1rem; color: #0a1430; background: linear-gradient(180deg, #ffce5c, #ffc233); box-shadow: 0 4px 14px rgba(255, 194, 51, .25); }
.fhead__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fhead__lbl { color: #9fb2d8; }   /* tipografía: .kick8 */
.fhead .fhead__name.inp8 { min-width: 0; font-weight: 800; font-size: 1rem; padding: 6px 10px; }
.fhead__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* action sheet: foto del jugador en el header */
.smph { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .06); }
.smph .fph { width: 40px; height: 40px; }

/* modal "mis puntos": total hero + puntos por jugador coloreados por signo */
.vehero { display: flex; align-items: baseline; gap: 9px; padding: 4px 2px 2px; }
.vehero__v { font-family: Anton, sans-serif; font-size: 2.4rem; line-height: 1; color: var(--gold); }
.vehero__l { color: #9fb2d8; }   /* tipografía: .kick8--lg */
.veplayer__nm b { font-weight: 800; }
.veplayer__v.pos { color: #6ef0a6; } .veplayer__v.neg { color: #ff8a93; }
.venotas span .bi { margin-right: 3px; }

/* empty states premium: icono en circulo + texto */
.page-fantasy .empty8 { padding: 30px 18px; gap: 6px; }
/* P3.7 — el disco se queda (es la forma del empty premium de Fantasy), el ORO se va:
   "todavía no hay fecha resuelta" no es un premio ni una alerta, es un vacío válido.
   El oro sigue reservado para el gate de onboarding (.fgate__ic), que sí invita. */
.page-fantasy .empty8 > i:first-child { font-size: 1.7rem; opacity: 1; width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(151, 177, 232, .07); border: 1px solid var(--line-2); margin-bottom: 4px; }

/* Gate deslogueado como onboarding: no es un muro, invita a entrar y avisa que Tabla/Destacados/
   Reglas son públicas (links data-goto que cambian de tab sin login). */
.page-fantasy .fgate__ic { width: 74px; height: 74px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 194, 51, .1); border: 1px solid rgba(255, 194, 51, .3); color: var(--gold); margin-bottom: 8px; }
.page-fantasy .fgate__ic svg { width: 34px; height: 34px; }
.page-fantasy .fgate__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.page-fantasy .fgate__step { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--tx-2);
    background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2, rgba(255, 255, 255, .08)); border-radius: 999px; padding: 6px 13px 6px 7px; }
.page-fantasy .fgate__step b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--gold); color: #0a1430; font-size: var(--fs-body-sm); font-weight: 800; }
.page-fantasy .fgate__h { font-family: var(--disp, Anton), sans-serif; font-size: 1.5rem; line-height: 1.05; margin: 2px 0 0; }
.page-fantasy .fgate__s { color: var(--tx-2); font-size: var(--fs-body); max-width: 32ch; margin: 2px auto 0; line-height: 1.35; }
.page-fantasy .fgate__pub { margin-top: 16px; font-size: var(--fs-body); color: var(--tx-3); }
.page-fantasy .fgate__pub a { color: var(--gold-2); text-decoration: none; font-weight: 700; white-space: nowrap; }
.page-fantasy .fgate__pub a:hover { text-decoration: underline; }
/* gate deslogueado: card acotada y centrada (antes el contenido flotaba angosto en un panel
   ancho con vacíos negros a los costados en desktop). Fase 5: onboarding limpio, no parece vacío. */
.page-fantasy .fgate { max-width: 600px; margin-inline: auto; }
.page-fantasy .fgate__s { max-width: 40ch; }

/* Jugador de la fecha: card mas trofeo (oro) + foto mas grande; minis con foto mas grande */
.dstar2 { background: linear-gradient(180deg, rgba(255, 194, 51, .15), rgba(255, 194, 51, .02)); border: 1px solid rgba(255, 194, 51, .32); }
.dstar2__ph { width: 106px; }
.dstar2__nm { font-size: 1.5rem; }
.dstar2__v { color: var(--gold); font-weight: 800; }
.dmini { padding: 14px 12px; }
.dmini__ph { width: 62px; }

/* ============================================================
   FASE 2 — Confiabilidad de guardado: estado del boton Guardar,
   indicador de cambios sin guardar, bloqueo por fecha cerrada.
   ============================================================ */
/* boton Guardar: incompleto = ambar apagado · cerrado = gris con candado.
   (usamos aria-disabled, no [disabled], para que el tap siga llevando al checklist) */
.page-fantasy .btn8.is-incomplete { background: rgba(255, 194, 51, .14); color: #ffd277; box-shadow: none; }
.page-fantasy .btn8.is-locked { background: rgba(255, 255, 255, .07); color: #9fb2d8; box-shadow: none; cursor: default; }
.page-fantasy .btn8[aria-disabled="true"] { filter: saturate(.9); }

/* indicador "Cambios sin guardar" en la barra de guardar */
.dirtynote { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: 800; color: #ffd277; }
.dirtynote .bi { font-size: var(--fs-body-strong); }
@media (max-width: 767px) { .fteam__main .fsave .dirtynote { order: 0; width: 100%; text-align: center; justify-content: center; } }

/* punto en la pestaña "Mi equipo" cuando hay cambios sin guardar */
#fTabs button.has-dirty { position: relative; }
#fTabs button.has-dirty::after { content: ""; position: absolute; top: 5px; right: 8px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #0b1a40; }

/* flash del checklist cuando el tap a Guardar (incompleto) hace scroll hacia el */
/* El fallback `var(--ease-out, ease)` era código muerto: fantasy.css SIEMPRE se carga junto a
   estadio.css (Fantasy.html linkea estadio antes), así que el token nunca queda indefinido.
   Un fallback que nunca se usa hace creer que el archivo es autónomo, y no lo es. */
.estado-flash { animation: estadoflash var(--mo-bar) var(--ease-out); }
@keyframes estadoflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 51, 0); } 30% { box-shadow: 0 0 0 3px rgba(255, 194, 51, .55); } }

/* bloqueo visual de edicion cuando la fecha esta cerrada */
#equipoWrap.is-locked .pitch, #equipoWrap.is-locked .bench { opacity: .9; }
#equipoWrap.is-locked .pslot, #equipoWrap.is-locked .bslot { cursor: default; }

/* toast (aviso de cambios sin guardar al cambiar de pestaña) */
.ftoast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(10px);
    background: #13265a; border: 1px solid rgba(255, 194, 51, .42); color: #ffe1a6; font-weight: 800; font-size: var(--fs-body-sm);
    padding: 10px 16px; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none;
    transition: opacity var(--mo) var(--ease-out), transform var(--mo) var(--ease-out); z-index: 200; max-width: 90vw; text-align: center; }
.ftoast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 720px) { .ftoast { bottom: 26px; } }
@media (prefers-reduced-motion: reduce) { .estado-flash, .ftoast { animation: none; transition: none; } }

/* ============================================================
   B — Pitch-first en mobile: nombre + formación + Estado dentro de un
   "Detalles del equipo" colapsable arriba de la cancha. Desktop NO cambia:
   el summary se oculta y el cuerpo se muestra completo (panel lateral de siempre).
   ============================================================ */
.fdetails { border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.fdetails__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; font-weight: 800; -webkit-tap-highlight-color: transparent; }
.fdetails__sum::-webkit-details-marker { display: none; }
.fdetails__t { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-body-strong); }
.fdetails__t .bi { color: var(--gold); }
.fdetails__hint { margin-left: auto; font-size: var(--fs-body-sm); font-weight: 800; color: #9fb2d8; }
.fdetails__hint.ok { color: #6ef0a6; } .fdetails__hint.warn { color: #ffd277; }
.fdetails__chev { color: #9fb2d8; transition: transform var(--mo) var(--ease-out); flex: none; }
.fdetails[open] .fdetails__chev { transform: rotate(180deg); }
.fdetails__body { display: flex; flex-direction: column; gap: 12px; padding: 2px 12px 14px; }

@media (min-width: 768px) {
    /* El panel lateral leía navy-sobre-navy: en desktop el <details> va cerrado (equipo
       completo) y su cuerpo, mostrado vía CSS, pintaba FUERA de la caja del <details>
       (medía 0), así que .fteam__side no podía envolverlo. Con ::details-content lo
       mantenemos en flujo aunque esté cerrado; así .fteam__side lo contiene y pasa a ser
       un panel real —un tono sobre el fondo, con borde y sombra. En navegadores sin
       ::details-content degrada al estado actual, sin empeorar. Mobile (<768) intacto. */
    .fdetails::details-content { content-visibility: visible; }
    .fdetails { border: 0; border-radius: 0; background: none; }
    .fdetails__sum { display: none; }
    .fteam__side .fdetails__body { display: flex !important; padding: 0; gap: 10px; }
    .fteam__side {
        background: linear-gradient(168deg, #16294f 0%, #0e1f44 100%);
        border: 1px solid rgba(151, 177, 232, .20);
        border-radius: 16px;
        box-shadow: 0 22px 50px -26px rgba(2, 6, 23, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
        padding: 14px;
    }
    /* fhead aplanado: encabezado del panel, con divisor inferior (sin doble card). */
    .fteam__side .fhead {
        background: none; border: 0; box-shadow: none; border-radius: 0;
        padding: 0 0 12px; border-bottom: 1px solid rgba(151, 177, 232, .12);
    }
}

/* #8 destacados: desglose de puntos por jugador + "ver todos" (card con foto + jerarquía) */
.dvertodos { margin-top: 14px; }
.djuglist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.djug { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; column-gap: 11px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line, rgba(156,195,255,.16)); border-radius: 14px;
  padding: 10px 12px; border-left: 3px solid transparent; }
.djug.is-tit { border-left-color: rgba(126,240,173,.55); }
.djug.is-sub { border-left-color: rgba(156,195,255,.4); }
.djug.is-out { opacity: .68; }
.djug__ph { grid-row: 1 / span 2; }
.djug__ph .fph { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; }
.djug__ph .fph__img { border-radius: 11px; }
.djug__body { min-width: 0; }
.djug__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.djug__nm { font-weight: 800; font-size: var(--fs-body-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.djug__pos { font-size: .6rem; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px;
  background: rgba(156,195,255,.14); color: var(--tx-2, #b8c6ea); }
.djug__pos.pos-GK { background: rgba(255,209,102,.18); color: #ffd166; }
.djug__pos.pos-DEF { background: rgba(126,240,173,.16); color: #7ef0ad; }
.djug__pos.pos-MED { background: rgba(132,191,255,.18); color: #9cc3ff; }
.djug__pos.pos-ATA { background: rgba(255,159,176,.18); color: #ff9fb0; }
.djug__cat { font-size: .62rem; color: var(--tx-3, #8093c0); }
.djug__meta { font-size: .7rem; color: var(--tx-3, #8093c0); margin-top: 3px; }
.djug__est { font-weight: 800; }
.djug__est.is-tit { color: var(--win-t, #7ef0ad); } .djug__est.is-sub { color: #9cc3ff; } .djug__est.is-out { color: var(--tx-3, #8093c0); }
.djug__own { color: var(--tx-3, #8093c0); }
.djug__cap { color: #ffd166; font-weight: 800; white-space: nowrap; }
.djug__pts { font-family: var(--disp, Anton), sans-serif; font-size: 1.35rem; line-height: 1; text-align: right; color: var(--tx-2, #b8c6ea); }
.djug__pts small { display: block; font-family: inherit; font-size: .42em; color: var(--tx-3, #8093c0); letter-spacing: .08em; }
.djug__pts.pos { color: var(--win-t, #7ef0ad); } .djug__pts.neg { color: var(--loss-t, #ff9fb0); } .djug__pts.zero { color: var(--tx-3, #8093c0); }
.djug__comps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; grid-column: 2 / span 2; }
.djug__c { font-size: .68rem; color: var(--tx-2, #b8c6ea); background: rgba(255,255,255,.04); border: 1px solid var(--line, rgba(156,195,255,.14)); border-radius: 999px; padding: 3px 9px; }
.djug__c b.pos { color: var(--win-t, #7ef0ad); } .djug__c b.neg { color: var(--loss-t, #ff9fb0); }

/* ============================================================
   COMPARTIR MI EQUIPO — el overlay ahora es el compartido del sistema
   (share-core.js + share-card.css, clases oshare-*). Acá queda solo el
   botón que vive junto a Guardar.
   ============================================================ */
.fshare-btn { gap: 7px; }
.fshare-btn i { font-size: .95em; }