/* TrailLab v312 · cierre visual de las pantallas reales
   =================================================================================================
   Esta capa nace de una revisión con capturas reales de escritorio, no de componentes aislados.

   Causa común de los textos que desaparecían en tema claro:
     1. muchas piezas modernas escriben `color:var(--tl-text-1)`, pero esa variable nunca llegó a
        formar parte del contrato de tema;
     2. v290/v291 convertían los paneles oscuros en «islas» oscuras, pero tampoco definían esa
        variable y dependían de que todos los hijos usaran exactamente las seis variables listadas;
     3. los estáticos son cache-first. Aunque el CSS se corrigiera en un fichero viejo, un dispositivo
        podía seguir viendo la copia anterior. Por eso ésta es una hoja NUEVA y va la última.

   El tema oscuro no se rediseña. Los fondos oscuros que son piezas de acento siguen oscuros; lo que
   cambia es el contrato de tinta dentro de ellos. El resto de esta hoja alinea los tres detalles de
   sesión, escala el árbol de Progresión y devuelve peso visual a Clubes/Competiciones. */

/* =============================================================== 1 · contrato de texto completo */
:root,
html[data-theme="dark"],
html[data-theme="light"]{
  --tl-text-1:var(--tl-text);
}

/* Una isla oscura dentro de la página clara tiene que heredar TODA la paleta oscura, no una lista
   parcial. Se incluyen las superficies vistas en las capturas y sus raíces reutilizables: la tarjeta
   base cubre Estadísticas/Objetivos/Resumen; las raíces específicas cubren PRO, Logros, Cimas, Rutas
   y Rendimiento incluso antes de que `polishViewV221()` llegue a estampar data-visual-system. */
html[data-theme="light"] :is(
  [data-visual-system="v221"] .card,
  [data-visual-system="v221"] .st-card,
  [data-visual-system="v221"] .estado-block,
  [data-visual-system="v221"] .ef-card,
  [data-visual-system="v221"] .estado-hero,
  [data-analytics-release="v221"] .tl-chart-card,
  .tl-chart-frame,
  .pf-head,
  .pf-detail-grid > div,
  .ach-metrics-v221,
  .achm-cats article,
  .ach-main-hero,
  .ach-hub-nav,
  .achv-qnav,
  .summit-passport,
  .summit-atlas-v223,
  .pro-compare-card,
  .pd-head,
  .hm-hero,
  .hm-focus,
  .mn-hero,
  .elev-v232,
  .ep-tooltip,
  .routes-map-badge,
  .account-shield-card,
  .auth-confirm,
  #view-forma .gz-card,
  #view-estadisticas .rp-tile,
  #view-estadisticas .rpx
){
  --ink:#eefaf5;
  --muted:#aac2b8;
  --surface:rgba(255,255,255,.055);
  --surface2:rgba(255,255,255,.09);
  --line:rgba(220,242,234,.16);
  --tl-text:#eefaf5;
  --tl-text-1:#eefaf5;
  --tl-text-2:#d2e4dd;
  --tl-text-3:#a6beb5;
  --tl-border:rgba(220,242,234,.14);
  --tl-border-strong:rgba(220,242,234,.25);
  --tl-panel:#0c1b23;
  --tl-panel-raised:#10232c;
  --tl-panel-soft:rgba(20,46,55,.86);
  --tl-canvas:rgba(3,14,19,.42);
  --lime:#b8f13a;
  --lime2:#9cda2c;
  --tl-soft:rgba(255,255,255,.055);
  --tl-soft2:rgba(255,255,255,.09);
  --tl-track:rgba(255,255,255,.14);
  color:var(--tl-text);
}

/* Los títulos no pueden depender de una declaración histórica más específica. Los acentos, cifras y
   estados conservan sus colores propios porque no se repintan `b`, `strong` ni los chips. */
html[data-theme="light"] :is(
  [data-visual-system="v221"] .card,
  [data-visual-system="v221"] .st-card,
  [data-visual-system="v221"] .estado-block,
  [data-analytics-release="v221"] .tl-chart-card,
  .pf-head,.ach-metrics-v221,.summit-atlas-v223,.pro-compare-card,.pd-head,.hm-hero
) :where(h1,h2,h3,h4){
  color:var(--tl-text)!important;
}

/* SVG no hereda `color` en los atributos `fill`. Se toca solo el texto; las series mantienen su
   verde, naranja, cian y violeta. */
html[data-theme="light"] :is(
  [data-visual-system="v221"] .card,
  [data-visual-system="v221"] .st-card,
  [data-analytics-release="v221"] .tl-chart-card,
  .tl-chart-frame,
  .elev-v232
) svg text{
  fill:#a9c3b9!important;
}
html[data-theme="light"] :is(.tl-chart-frame,.elev-v232) :is(.tl-axis-label,.tl-month-label,.tl-empty-label){
  fill:#bdd2ca!important;
}

/* Las tarjetas claras siguen siendo claras. Esta excepción evita que una `.card` que solo sirve de
   envoltorio herede una isla antes de que la vista tenga el sistema v221. */
html[data-theme="light"] :is(.pf-kpis article,.pf-card,.hm-week article,.hm-lower>article,.pd-products article){
  color:var(--tl-text);
}

/* =========================================================== 2 · una sola familia de fichas */
.session-modal{
  --sd-accent:var(--tl-teal);
  border:1px solid color-mix(in srgb,var(--sd-accent) 34%,var(--tl-border))!important;
  border-radius:22px!important;
  background:var(--tl-panel)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.42)!important;
}
.session-modal .sd-hero{
  position:sticky;
  overflow:hidden;
  padding:25px 27px 17px;
  background:
    radial-gradient(circle at 86% -20%,color-mix(in srgb,var(--sd-accent) 15%,transparent),transparent 43%),
    linear-gradient(145deg,color-mix(in srgb,var(--sd-accent) 7%,var(--tl-panel-raised)),var(--tl-panel));
}
.session-modal .sd-hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--sd-accent);
}
.session-modal .sd-hero .m-title{
  font-family:var(--tl-font-display);
  font-size:clamp(1.55rem,2.5vw,2rem);
  letter-spacing:.035em;
}
.session-modal .sd-date{
  margin-top:3px;
  font-size:var(--tl-type-kicker, 12px);
  font-weight:750;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.session-modal .sd-nav{gap:8px;margin-top:16px}
.session-modal .sd-nav button{min-height:34px;padding:0 13px}
.session-modal .sd-nav button.active{
  border-color:var(--sd-accent);
  background:color-mix(in srgb,var(--sd-accent) 12%,var(--tl-panel));
  color:var(--sd-accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sd-accent) 20%,transparent);
}
.session-modal .sd-body{background:linear-gradient(180deg,var(--tl-panel),var(--tl-canvas));padding:21px 27px 27px}
.session-modal .sd-body .sd-stats{
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr))!important;
  gap:9px;
}
.session-modal .sd-stat{
  display:grid;
  align-content:center;
  min-height:66px;
  padding:11px 12px;
  border-color:color-mix(in srgb,var(--sd-accent) 18%,var(--tl-border));
  background:linear-gradient(145deg,color-mix(in srgb,var(--sd-accent) 6%,var(--tl-panel-soft)),var(--tl-panel-soft));
}
.session-modal .sd-stat .v{font-size:var(--tl-type-subsection, 20px);color:var(--tl-text)}
.session-modal .sd-stat .l{margin-top:5px;color:var(--tl-text-3);font-size:var(--tl-type-kicker, 12px);font-weight:800}
.session-modal .sd-panel-title{margin-top:27px;font-size:var(--tl-type-subsection, 20px)}
.session-modal .sd-actions{align-items:center;margin-top:22px;padding-top:18px}
.session-modal .sd-actions .btn-prim{min-width:210px;min-height:44px}

/* Las fichas del catálogo y del calendario comparten el mismo armazón y nunca vuelven a quedar
   cortadas por abajo. El cuerpo es el único scroll y las acciones permanecen alcanzables. */
.ts-detail-modal{
  width:min(720px,calc(100vw - 28px))!important;
  max-height:min(92dvh,900px)!important;
  border:1px solid color-mix(in srgb,var(--c) 32%,var(--tl-border))!important;
  border-radius:22px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.42)!important;
}
.ts-detail-body{overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:0}
.ts-detail-actions{
  position:sticky;
  z-index:3;
  bottom:0;
  margin:22px -25px 0;
  padding:14px 25px 18px;
  border-top:1px solid var(--tl-border);
  background:color-mix(in srgb,var(--tl-panel) 94%,transparent);
  backdrop-filter:blur(14px);
}
.ts-detail-step{min-height:48px;padding:11px 12px}.ts-detail-step b{font-size:var(--tl-type-meta, 13px)}

/* Biblioteca: las tarjetas dejan de encogerse hasta parecer miniaturas en escritorio ancho. */
#view-tipos .ts-band-grid,
#view-tipos #typesGrid:not(.ts-banded){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))!important;
}
#view-tipos .ts-type-card{min-height:380px}
#view-tipos .ts-card-description{font-size:var(--tl-type-kicker, 12px)}
#view-tipos .ts-step{font-size:var(--tl-type-kicker, 12px)}

/* ============================================================= 3 · Progresión que se puede leer */
#view-atleta .prog-tree{
  width:min(100%,1120px);
  margin:10px auto 0;
  gap:clamp(28px,5vw,78px);
}
#view-atleta .prog-bh{margin-bottom:14px}
#view-atleta .prog-be{width:36px;height:36px;border-radius:11px;font-size:var(--tl-type-subsection, 20px)}
#view-atleta .prog-bn{font-size:var(--tl-type-subsection, 20px)}
#view-atleta .prog-bp{font-size:var(--tl-type-kicker, 12px)}
#view-atleta .prog-circ{width:64px;height:64px}
#view-atleta .prog-circ>svg:not(.prog-ring){width:29px;height:29px}
#view-atleta .prog-lb{max-width:132px;font-size:var(--tl-type-kicker, 12px);line-height:1.2}
#view-atleta .prog-sub{max-width:140px;font-size:var(--tl-type-kicker, 12px);line-height:1.25}
#view-atleta .prog-pct{font-size:var(--tl-type-kicker, 12px)}
#view-atleta .prog-link{height:28px}

/* ========================================================== 4 · Clubes y competiciones con peso */
#view-manada .mn-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),390px));
  gap:16px;
}
#view-manada .mn-club-v295{min-height:320px;box-shadow:var(--tl-shadow-sm)}
#view-manada .mn-banner{padding:18px 18px 38px}
#view-manada .mn-banner .em{font-size:var(--tl-type-hero, 40px)}
#view-manada .mn-banner b{font-size:var(--tl-type-card-title, 16px)}
#view-manada .mn-club-b{padding:7px 17px 17px}
#view-manada .mn-comp-flip{margin-bottom:14px}
#view-manada .mn-comp-v295{padding:18px 20px;border-radius:16px;box-shadow:0 8px 22px rgba(31,61,49,.06)}
#view-manada .mn-comp-id b{font-size:var(--tl-type-card-title, 16px)}
#view-manada .mn-comp-kpis{gap:9px;margin-top:14px}
#view-manada .mn-comp-kpis article{padding:11px 9px}

/* =========================================================================== 5 · responsive */
@media(max-width:760px){
  .session-modal{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;margin:6px!important;border-radius:18px!important}
  .session-modal .sd-hero{padding:20px 17px 13px}
  .session-modal .sd-body{padding:16px 15px 20px}
  .session-modal .sd-body .sd-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .session-modal .sd-actions,.ts-detail-actions{display:grid;grid-template-columns:1fr}
  .session-modal .sd-actions>* ,.ts-detail-actions button{width:100%;min-width:0!important}
  .ts-detail-modal{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;border-radius:18px!important}
  .ts-detail-body{padding:18px 17px 0}
  .ts-detail-actions{margin:20px -17px 0;padding:12px 17px 17px}
  #view-atleta .prog-tree{gap:14px}
  #view-atleta .prog-circ{width:56px;height:56px}
  #view-atleta .prog-lb{font-size:var(--tl-type-kicker, 12px)}
}

@media(max-width:560px){
  #view-atleta .prog-tree{grid-template-columns:1fr;gap:28px}
  #view-atleta .prog-sub{display:block}
  #view-manada .mn-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  #view-tipos .ts-type-card,#view-manada .mn-club-v295{transition:none!important}
}
/* v389 · el aviso de GPS mantiene una isla oscura deliberada también si reaparece el tema claro. */
[data-theme="light"] .tl-gps-paused-backdrop,
[data-theme="light"] .tl-gps-paused-card,
[data-theme="light"] .tl-gps-paused-flow,
[data-theme="light"] .tl-gps-paused-secondary{
  --ink:#f5f8ef;--muted:#abc0b9;--tl-text:#f5f8ef;--tl-text-2:#c0d0cb;--tl-text-3:#abc0b9;
  color:var(--tl-text);
}