/* ============================================================
   MI OLIMAR — estilos de la página (sobre estadio.css).
   Columna única mobile-first; en desktop se mantiene angosta (560px) para
   conservar la sensación de app, no de dashboard. Reusa tokens de estadio.css.
   ============================================================ */

.page-miolimar .arena__in.mio { max-width: 560px; margin-inline: auto; }

/* --- A. encabezado personal --- */
.mio-head {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) 0 var(--sp-1);
    margin-top: var(--sp-2);
}
.mio-head__av {
    flex: 0 0 auto; display: block; width: 54px; height: 54px; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 194, 51, .25);   /* anillo dorado: ancla el avatar a la identidad */
}
/* el avatar lo dibuja E.avatar (span .av / .avph o img): que cualquier hijo llene el círculo */
.mio-head__av > * { width: 54px; height: 54px; border-radius: 50%; }
.mio-head__id { flex: 1 1 auto; min-width: 0; }
.mio-head__hi {
    font-family: var(--disp); font-weight: 400; letter-spacing: .01em;
    /* un toque más chico que antes: el hero (acción principal) debe ganar, el header es contexto */
    font-size: clamp(1.25rem, 5.5vw, 1.55rem); line-height: 1.05; margin: 0;
    color: var(--tx); text-transform: uppercase;
}
.mio-head__pos {
    margin: 3px 0 0; font-size: var(--fs-body); color: var(--tx-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- B. acción principal (hero) --- */
.mio-act {
    position: relative; margin-top: var(--sp-4);
    border-radius: var(--r-lg); padding: var(--sp-4);
    background: var(--card); border: 1px solid var(--line-2);
    box-shadow: var(--sh);
}
.mio-act--todo {
    border-color: rgba(255,194,51,.55);
    box-shadow: var(--sh-gold), var(--sh);
}
.mio-act--todo::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255,194,51,.10), transparent 60%);
}
/* tipografía: .kick8--lg (estadio.css). El COLOR sí es propio: dorado = "te toca algo",
   gris = "estás al día". Es estado, no decoración. */
.mio-act__kick { display: inline-block; color: var(--gold); margin-bottom: var(--sp-2); }
.mio-act--ok .mio-act__kick { color: var(--tx-3); }
.mio-act__msg {
    margin: 0 0 var(--sp-3); font-size: 1.02rem; font-weight: 600;
    line-height: 1.35; color: var(--tx);
}
.mio-act--ok .mio-act__msg { font-weight: 500; color: var(--tx-2); }
.mio-act--ok .mio-act__msg .bi { color: var(--win); margin-right: 4px; }
.mio-act__cta { font-size: 1rem; }
/* `hidden` NO oculta un .btn8: la clase declara `display: inline-flex` y una regla de
   autor le gana a la hoja del navegador. Sin esto, cada `cta.hidden = true` de
   mi-olimar.js —el skeleton de la acción y los estados "Estás al día" / "Sin fecha
   abierta"— dejaba una barra dorada VACÍA en pantalla, que es justo lo que el código
   dice estar evitando. Se vio en la captura del estado "cargando". Mismo patrón que
   `.installcard__steps[hidden]` en estadio.css; acotado a esta página. */
.mio-act__cta[hidden], .mio-fy__cta[hidden] { display: none; }
.mio-act__note { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.35; }
.mio-act__chips {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

/* --- secciones (blk reutilizado) --- */
.mio-sec { margin-top: var(--sp-5); }
.mio-foot { text-align: center; font-size: var(--fs-body-sm); margin: var(--sp-6) 0 var(--sp-3); }

/* --- C. mi fantasy ------------------------------------------------------------
   P1-2. Antes esto era UNA FILA (escudo + "Mi equipo" + "cambios 0/2"): 114px de
   alto y 60.438 px² de área, el bloque MÁS CHICO de la página, siendo el producto
   principal del inicio personal. Ahora es un módulo con las cuatro cosas que el
   usuario necesita saber de un vistazo — estado de la jornada, marcador, equipo y
   acción — todas con datos que YA venían en el bundle (/api/mi-olimar/resumen):
   Jornada{Numero,CierreUtc,Cerrada}, Plantel[], Capitán/Subcapitán, Cambios,
   Racha, Chip y la fila de leaderboard. Cero requests nuevas, cero endpoints. */

/* panel: el ÚNICO bloque de la página con tratamiento de card, y es el mismo
   --card/--line-2 que ya usa .mio-act. No hay dorado extra ni borde nuevo: el
   rango se lee por composición (columna principal + panel), no por brillo. */
.mio-sec--hero {
    background: var(--card); border: 1px solid var(--line-2);
    border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh);
}
.mio-sec--hero .blk__hd { margin-bottom: var(--sp-2); }

.mio-fy { margin-top: var(--sp-2); }

/* tira de estado de la jornada: número de fecha + cierre real (OlimarState) + si el
   equipo está listo. El color es ESTADO, no decoración: dorado = fecha abierta,
   gris = cerrada/sin fecha, y el "resolviendo" mantiene su propio tono. */
.mio-fy__jor {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-3); border-radius: 999px;
    background: var(--raise); border: 1px solid var(--line);
    font-size: var(--fs-body); font-weight: 700; color: var(--tx-2);
}
.mio-fy__jor .bi { font-size: var(--fs-body-strong); color: var(--tx-3); }
.mio-fy__jor--open { border-color: rgba(255,194,51,.28); color: var(--tx); }
.mio-fy__jor--open .bi { color: var(--gold); }
.mio-fy__jor-eq { margin-left: auto; font-weight: 800; color: var(--tx-3); font-size: var(--fs-body-sm); }
.mio-fy__jor--open .mio-fy__jor-eq { color: var(--win); }
.mio-fy__jor--open .mio-fy__jor-eq.is-todo { color: var(--gold-2); }

/* identidad del equipo + marcador */
.mio-fy__top { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.mio-fy__crest {
    width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
    background: var(--raise); color: var(--gold); font-size: 1.2rem; flex: 0 0 auto;
}
.mio-fy__id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mio-fy__nm {
    font-family: var(--disp); font-weight: 400; letter-spacing: .02em; text-transform: uppercase;
    font-size: 1.18rem; line-height: 1.1; color: var(--tx);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mio-fy__sq { font-size: var(--fs-body-sm); color: var(--tx-3); margin-top: 3px; }
/* marcador: sólo aparece cuando el leaderboard trae la fila del equipo. No hay
   número de relleno — si la fecha todavía no se resolvió, este bloque no existe. */
.mio-fy__score { flex: 0 0 auto; display: flex; align-items: baseline; gap: 5px; }
.mio-fy__score b {
    font-family: var(--disp); font-weight: 400; font-size: 1.75rem; line-height: 1;
    color: var(--gold); letter-spacing: .01em;
}
.mio-fy__score span { font-size: var(--fs-body-sm); font-weight: 800; color: var(--tx-3); text-transform: uppercase; }
.mio-fy__score em {
    font-style: normal; font-weight: 800; font-size: var(--fs-body); color: var(--tx-2);
    padding-left: var(--sp-2); margin-left: var(--sp-1); border-left: 1px solid var(--line);
}

/* grilla de datos del equipo: sólo celdas con dato real (capitán, subcapitán,
   cambios, racha, chip, puesto). auto-fit con `minmax(min(112px, 100%), 1fr)`:
   el `min(…, 100%)` es lo que evita el overflow por min-content cuando el track
   pedido no entra (320). Con 112 entran 2 columnas ya en 320 —Capitán y
   Subcapitán en la misma línea, como se leen— 3 a 1024 y 4 en la columna
   principal de 1440, sin un solo número de breakpoint escrito a mano. */
.mio-fy__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
    gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3);
    padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.mio-fy__cell { display: flex; flex-direction: column; min-width: 0; }
.mio-fy__k { font-size: var(--fs-body-sm); color: var(--tx-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.mio-fy__v {
    font-size: var(--fs-body-strong); font-weight: 700; color: var(--tx); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mio-fy__resol {
    margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 12px;
    background: rgba(255,194,51,.08); border: 1px solid rgba(255,194,51,.25);
    font-size: var(--fs-body); color: var(--gold-2);
}
.mio-fy__cta { margin-top: var(--sp-3); }

/* --- D. mi lugar --- */
.mio-rank { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 1px; }
.mio-rk {
    display: grid; grid-template-columns: 1fr auto auto auto; align-items: center;
    gap: var(--sp-3); padding: var(--sp-3) var(--sp-1);
    border-bottom: 1px solid var(--line);
}
.mio-rk:last-child { border-bottom: 0; }
.mio-rk__t { font-weight: 600; font-size: var(--fs-body); color: var(--tx); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mio-rk__p { font-weight: 800; font-size: var(--fs-body-strong); color: var(--tx); }
.mio-rk__p small { color: var(--tx-3); font-weight: 600; }
.mio-rk__v { font-size: var(--fs-body); color: var(--tx-2); }
.mio-rk__v small { color: var(--tx-3); }
.mio-rk__d { font-size: var(--fs-body-sm); font-weight: 800; display: inline-flex; align-items: center; gap: 2px; }
.mio-rk__d.up { color: var(--win); }
.mio-rk__d.down { color: var(--loss); }

/* --- E. el club --- */
.mio-next {
    display: block; padding: var(--sp-3); border-radius: 14px;
    background: var(--card-flat); border: 1px solid var(--line); text-decoration: none;
}
.mio-next__hd { font-size: var(--fs-body-sm); color: var(--tx-2); text-transform: capitalize; }
.mio-next__vs { font-family: var(--disp); font-size: 1.15rem; color: var(--tx); margin: 4px 0 2px; }
.mio-next__cd { font-size: var(--fs-body); color: var(--gold); font-weight: 700; }
.mio-last {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    margin-top: var(--sp-2); padding: var(--sp-3); border-radius: 14px;
    background: var(--card-flat); border: 1px solid var(--line); text-decoration: none;
}
.mio-last__lb { color: var(--tx-3); flex-basis: 100%; }   /* tipografía: .kick8--lg */
.mio-last__sc { font-weight: 700; color: var(--tx); flex: 1 1 auto; }
.mio-last__sc b { color: var(--gold); }

/* --- estados vacíos --- */
.mio-empty {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-4); border-radius: 14px; margin-top: var(--sp-2);
    /* P3.7 — borde SÓLIDO: en el sistema el punteado pasó a significar "falta algo que
       completar", y esto es un vacío válido (todavía no hay datos), no un pendiente. */
    background: var(--card-flat); border: 1px solid var(--line-2);
    color: var(--tx-2); font-size: var(--fs-body); line-height: 1.4;
}
.mio-empty .bi { font-size: 1.3rem; color: var(--tx-3); }

/* empty state COMPACTO (Mi lugar sin números): una tira liviana, no un panel. Explica + orienta. */
.mio-empty--slim { padding: var(--sp-3); border-style: solid; border-color: var(--line); gap: var(--sp-3); font-size: var(--fs-body); }
.mio-empty--slim .bi { font-size: 1.15rem; }
.mio-empty__tx { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mio-empty__tx b { color: var(--tx); font-weight: 700; font-size: var(--fs-body); }
.mio-empty__tx span { font-size: var(--fs-body-sm); color: var(--tx-3); line-height: 1.35; }
/* P3.6 — medía 17px de alto. Igual que `.flink`: el área crece en vertical con un
   pseudo-elemento para no empujar la tira, que es deliberadamente compacta. */
.mio-empty__go { position: relative; flex: none; font-size: var(--fs-body); font-weight: 700; color: var(--gold-2); white-space: nowrap; text-decoration: none; }
.mio-empty__go::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* --- .mio-cols / .mio-col: los envoltorios de columna ---------------------------
   En mobile NO EXISTEN (`display: contents`): el flujo vertical y el orden del DOM
   son idénticos a los de antes de la composición de columnas — acción · Mi Fantasy ·
   Mi lugar · Mi Álbum · pie — y cada hijo sigue manejando su propio margen. */
.mio-cols, .mio-col { display: contents; }

/* --- desktop (OLA 3 · P3.1 + P1-2): composición principal / secundaria ----------
   P3.1 sacó el hueco de 47% que dejaba el ancho a mano (700px dentro de un `.arena`
   de 1180) adoptando --arena y dos columnas. Pero repartió mal los roles: el rail
   derecho se llevó Mi Fantasy JUNTO con el ranking, y Mi Álbum se quedó en la
   columna ancha. Resultado medido a 1440: Mi Fantasy 532×114 = 60.438 px², el bloque
   MÁS CHICO de la página, contra 126.668 de "Mi lugar" y 100.804 de "Mi Álbum"; el
   rail moría en y=466 y dejaba 434px de fondo plano (48% de su alto) mientras la
   izquierda seguía hasta y=667.
   P1-2 cambia el REPARTO, no el ancho: la columna principal es Tu próxima jugada +
   Mi Fantasy (acción y producto, en ese orden), y la secundaria es Mi lugar, Mi
   Álbum y el pie. Sin masonry, sin alturas por JS, sin position:absolute: dos flex
   columns dentro de un grid de dos tracks con minmax(0,…) en ambos, que es lo que
   impide que una palabra larga (nombre de equipo, título de ranking) empuje el
   track por min-content y desborde. */
@media (min-width: 1024px) {
    .page-miolimar .arena__in.mio { max-width: var(--arena); }
    .mio-cols {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        column-gap: var(--sp-5);
        align-items: start;
        margin-top: var(--sp-4);
    }
    .mio-col { display: flex; flex-direction: column; min-width: 0; gap: var(--sp-5); }
    /* el ritmo vertical lo da el `gap` de la columna: los márgenes mobile de cada
       bloque sumarían encima y descuadrarían las dos columnas entre sí. */
    .mio-col > .mio-act, .mio-col > .mio-sec, .mio-col > .mio-foot { margin: 0; }
    .mio-col--side > .mio-foot { text-align: left; }
    .mio-col--side > .mio-foot:last-child { margin-top: calc(var(--sp-2) * -1); }

    /* SIN equipo Fantasy la columna principal se queda sólo con la acción, y las dos
       columnas quedan a 359 contra 600: un hueco de 241px debajo del hero, peor que el
       que esta corrección vino a arreglar (medido). En ese caso la página vuelve a la
       columna de lectura del sistema — la misma salida que ya usaba P3.1 cuando el rail
       quedaba vacío, sólo que ahora la dispara la ausencia del producto principal. El
       grid sigue siendo el mismo: pasa a UN track, así los dos envoltorios se apilan sin
       tocar el orden del DOM ni los márgenes ya normalizados.

       La condición es una CLASE que pone mi-olimar.js cuando YA SABE que no hay equipo,
       no un `:has(#mioFantasy:not([hidden]))`. Medido: con `:has()` la regla también se
       cumple en los ~200 ms iniciales —cuando todavía TODAS las secciones están hidden—,
       la página arranca a 720 y salta a 1180 al aparecer los skeletons: el CLS pasaba de
       0,052 a 0,208 a 1440 y de 0,090 a 0,355 a 1024. La clase sólo existe después del
       dato, así que ese salto no puede ocurrir. */
    .page-miolimar .arena__in.mio.mio--sin-fy { max-width: var(--arena-narrow); }
    .page-miolimar .arena__in.mio.mio--sin-fy .mio-cols {
        grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5);
    }
    .page-miolimar .arena__in.mio.mio--sin-fy .mio-col--side > .mio-foot { text-align: center; }
}

/* Bloque Mi Álbum (descubrimiento permanente). */
.mio-alb { margin-top: var(--sp-2); }
.mio-alb__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.mio-alb__col { font-family: var(--disp); font-size: var(--fs-body-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); }
.mio-alb__sob { font-size: var(--fs-body-sm); font-weight: 800; color: var(--gold-ink); background: linear-gradient(180deg,var(--gold-2),var(--gold)); padding: 2px 9px; border-radius: 999px; }
.mio-alb__bar { height: 8px; border-radius: 999px; background: var(--raise); overflow: hidden; margin-top: 8px; box-shadow: var(--inlight); }
.mio-alb__bar span { display: block; height: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-2)); border-radius: 999px; }
.mio-alb__meta { font-size: var(--fs-body-sm); color: var(--tx-2); margin-top: 6px; }
.mio-alb__cta { margin-top: var(--sp-3); }