/* ============================================================
   Sesión Magistral — Prototipo v3 · "Sala oscura"
   Fase 1 · Cimientos: tokens (plan §11), base tipográfica,
   retícula, hairlines, anillo de foco. Sin componentes nuevos.
   ============================================================ */

/* ---------- Fuentes ---------- */
/* Square 721 Extended Bold: tipografía del manual para el lockup.
   Archivo provisto el 1 sep 2026 (origen fontsgeek.com, sin licencia
   adjunta): confirmar licenciamiento web antes de producción. */
@font-face{font-family:'Square721 BT';src:url(../assets/fonts/Square721BT-ExtendedBold.otf) format('opentype');font-display:swap}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Michroma-Regular.woff2) format('woff2')}
/* Fraunces variable (OFL). Instanciada con SOFT=0 y WONK=0; conserva opsz 9–144 y wght 100–900. */
@font-face{font-family:'Fraunces';font-weight:100 900;font-display:swap;src:url(../assets/fonts/Fraunces-var.woff2) format('woff2')}
/* Archivo variable (OFL) con eje de ancho 62–125: la condensada sale de aquí, sin segunda familia. */
@font-face{font-family:'Archivo';font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../assets/fonts/Archivo-var.woff2) format('woff2')}

/* ============================================================
   Tokens — plan §11, verificados sobre --ink-900
   ============================================================ */
:root{
  color-scheme:dark;

  /* ---------- Tinta (fondos) ---------- */
  --ink-1000:#080D15; --ink-950:#0E1520; --ink-900:#131B27;
  --ink-850:#1D2836;  --ink-800:#24303F; --ink-700:#313F51; --ink-600:#405264;

  /* ---------- Texto sobre oscuro ---------- */
  --txt-alto:#FFFFFF;   /* 18.49:1 */
  --txt-base:#EDF1F6;   /* 16.30:1 */
  --txt-medio:#C2CCD8;  /* 11.38:1 */
  --txt-suave:#A6B3C2;  /*  8.12:1 sobre --ink-900 */
  --txt-tenue:#8795A6;  /*  5.67:1 — piso absoluto (4.28:1 sobre --ink-800: ahí usar --txt-suave) */

  /* ---------- Dorado: acento y avance. Nunca fondo de botón, tarjeta ni sección ---------- */
  --oro-200:#EEDCB8; --oro-300:#E2CA9C; --oro-400:#C9AC75; --oro-500:#B08D57;
  --oro-star-claro:#8A6A34;              /* 5.01:1 sobre blanco */

  /* ---------- Azul institucional (540 C) ---------- */
  --azul-300:#8FC2E8; --azul-400:#5FA3D6; --azul-500:#3A82BC;
  --azul-600:#2A6795; --azul-800:#002A4C; /* solo gradientes y superficies claras */

  /* ---------- Semánticos apagados ---------- */
  --exito-300:#7FD1A8; --aviso-300:#E8C57A; --error-300:#E39B87;

  /* ---------- Superficies y bordes ---------- */
  --sup-pagina:var(--ink-900);
  --sup-elevada:var(--ink-850);
  --sup-hover:var(--ink-800);
  --hairline:rgba(255,255,255,.12);
  --hairline-fuerte:rgba(255,255,255,.24);
  --foco:0 0 0 2px var(--ink-900),0 0 0 4px var(--azul-400);
  --foco-sobre-foto:0 0 0 2px rgba(255,255,255,.6),0 0 0 4px var(--azul-400);

  /* ---------- Gradientes (los únicos cuatro, más la barra de avance) ---------- */
  --scrim-abajo:linear-gradient(0deg,var(--ink-900) 0%,rgba(19,27,39,.48) 45%,rgba(19,27,39,0) 88%);
  --scrim-lado:linear-gradient(90deg,rgba(8,13,21,.88) 0%,rgba(8,13,21,.62) 38%,rgba(8,13,21,0) 72%);
  --scrim-hover:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.38));
  --halo-navy:radial-gradient(120% 80% at 50% 0%,rgba(23,80,121,.42) 0%,rgba(19,27,39,0) 72%);
  --avance:linear-gradient(90deg,var(--oro-500),var(--oro-300));

  /* ---------- Tipografía ---------- */
  --f-display:'Fraunces','Georgia','Times New Roman',serif;
  --f-ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-logo:'Square721 BT','Square 721 Extended','Michroma','Archivo',system-ui,sans-serif;

  --t-hero:clamp(34px,6vw,68px);
  --t-h1:clamp(28px,4vw,44px);
  --t-h2:30px; --t-h3:19px;
  --t-body:16px; --t-meta:14px; --t-label:13px;
  --t-cifra:44px;

  --p-regular:400; --p-medio:500; --p-fuerte:600;
  --lh-display:1.05; --lh-titulo:1.2; --lh-body:1.6;
  --ls-display:-.01em; --ls-body:.01em; --ls-label:.14em;
  --condensada:75%; /* font-stretch de las etiquetas en Archivo */

  /* ---------- Espaciado (base 4) ---------- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-6:24px;
  --e-8:32px; --e-12:48px; --e-16:64px; --e-24:96px; --e-32:128px;
  --seccion:var(--e-24);

  /* ---------- Retícula ---------- */
  --cont-lectura:min(760px,62ch); --cont-max:1200px; --cont-ancho:1440px;
  --gutter:32px;
  --nav-h:64px;

  /* ---------- Radios ---------- */
  --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px;

  /* ---------- Sombras (solo flotantes: menús, diálogos) ---------- */
  --shadow-lift:0 18px 48px -24px rgba(0,0,0,.8);
  --shadow-tarjeta:0 10px 28px -20px rgba(0,0,0,.85);

  /* ---------- Tamaños de tarjeta y miniatura ---------- */
  --card-sesion:300px;   --card-bloque-w:240px; --card-bloque-h:320px;
  --thumb-fila:160px;    --thumb-lista:64px;    --thumb-avatar:88px;
  --ar-sesion:16/9;      --ar-bloque:3/4;       --ar-portada:21/9;

  /* ---------- Movimiento ---------- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-rapida:160ms; --dur-media:280ms; --dur-lenta:400ms;

  /* ============================================================
     Capa de alias v2 → v3. Los componentes heredados de la v2 leen
     estos nombres; aquí resuelven al sistema oscuro. El ámbito
     .tema-claro (Admin) los redefine con los valores claros de la v2.
     Los componentes que deban funcionar en ambos temas usan SOLO
     nombres de esta capa; los exclusivamente oscuros (hero, nav,
     pie) usan los tokens nuevos directamente.
     ============================================================ */
  --navy-950:var(--ink-1000); --navy-900:var(--ink-950); --navy-800:var(--ink-800);
  --navy-700:var(--ink-700);  --navy-600:var(--oro-400);  --navy-500:var(--azul-400);
  --navy-200:var(--txt-medio); --navy-100:var(--ink-700); --navy-50:var(--ink-800);

  --gray-900:var(--txt-alto); --gray-800:var(--txt-base); --gray-700:var(--txt-medio);
  --gray-600:var(--txt-suave); --gray-500:var(--txt-tenue); --gray-400:var(--ink-600);
  --gray-300:var(--ink-700); --gray-200:rgba(255,255,255,.14); --gray-100:var(--ink-800); --gray-50:var(--ink-850);

  --brass-600:var(--oro-400); --brass-500:var(--oro-400); --brass-400:var(--oro-300);
  --brass-star:var(--oro-300);

  --success-600:var(--exito-300); --success-100:rgba(127,209,168,.14);
  --danger-600:var(--error-300);  --danger-100:rgba(227,155,135,.14);
  --warning-600:var(--aviso-300); --warning-100:rgba(232,197,122,.14);

  --surface-page:var(--sup-pagina); --surface-card:var(--sup-elevada);
  --surface-sunken:var(--sup-hover); --surface-inverse:var(--ink-950);
  --surface-inverse-raised:var(--ink-850); --surface-inverse-deep:var(--ink-1000);

  --text-heading:var(--txt-alto); --text-body:var(--txt-base);
  --text-muted:var(--txt-suave); --text-faint:var(--txt-tenue);
  --text-on-inverse:#FFFFFF; --text-on-inverse-muted:var(--txt-suave);

  --border-subtle:var(--hairline); --border-strong:rgba(255,255,255,.2);
  --border-on-inverse:var(--hairline-fuerte);
  --focus-ring:var(--foco);

  --action:#FFFFFF; --action-text:var(--ink-900); --action-hover:var(--txt-base); --action-active:var(--txt-medio);
  --link:var(--azul-300); --link-hover:var(--txt-alto);

  --star:var(--oro-500); --star-empty:rgba(255,255,255,.18);
  --caret:var(--azul-300);
  --overlay:rgba(8,13,21,.6);
  --input-bg:var(--ink-800);

  --font-display:var(--f-display); --font-sans:var(--f-ui); --font-logo:var(--f-logo);

  --text-xs:13px; --text-sm:var(--t-meta); --text-base:var(--t-body); --text-md:18px;
  --text-lg:var(--t-h3); --text-xl:24px; --text-2xl:var(--t-h2); --text-3xl:38px;
  --text-hero:var(--t-hero); --text-h1-cat:var(--t-h1);

  --tracking-eyebrow:var(--ls-label); --tracking-logo:.14em;
  --container-max:var(--cont-max); --container-pad:var(--gutter);
  --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --radius-pill:var(--r-pill);
  --shadow-sm:none; --shadow-lg:var(--shadow-lift);
}
/* `color-scheme` en la raíz para que la barra de desplazamiento, que pinta el
   navegador y no el documento, acompañe al tema de la pantalla activa. */
html[data-tema="claro"]{color-scheme:light}

@media (max-width:1080px){
  :root{ --gutter:24px; --seccion:var(--e-16); --t-h2:28px;
         --card-sesion:260px; --card-bloque-w:200px; --card-bloque-h:267px;
         --thumb-fila:132px; }
}
@media (max-width:620px){
  :root{ --gutter:16px; --seccion:var(--e-12); --t-h2:26px; --t-cifra:34px;
         --card-sesion:78vw; --card-bloque-w:60vw; --card-bloque-h:80vw;
         --thumb-fila:112px; --ar-portada:4/5; }
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   Tema claro — solo Administración (tokens de la v2, sin cambio)
   ============================================================ */
.tema-claro{
  color-scheme:light;
  --navy-950:#00101F; --navy-900:#001B31; --navy-800:#002A4C;
  --navy-700:#0B3A61; --navy-600:#175079; --navy-500:#2A6795;
  --navy-200:#B7C9D8; --navy-100:#D9E2EA; --navy-50:#EEF2F6;
  --gray-900:#26282A; --gray-800:#393C3D; --gray-700:#4E5152;
  --gray-600:#646666; --gray-500:#7E8081; --gray-400:#9A9C9D;
  --gray-300:#C0C2C2; --gray-200:#DBDCDC; --gray-100:#ECEDED; --gray-50:#F6F7F7;
  --brass-600:#96733F; --brass-500:#B08D57; --brass-400:#C4A472; --brass-star:#8A6A34;
  --success-600:#2E6B4F; --success-100:#DCEBE3;
  --danger-600:#A63D2A;  --danger-100:#F4E0DB;
  --warning-600:#7A6129; --warning-100:#F2EAD4;
  --surface-page:#F6F7F7; --surface-card:#FFFFFF; --surface-sunken:#ECEDED;
  --surface-inverse:#002A4C; --surface-inverse-raised:#0B3557; --surface-inverse-deep:#001B31;
  --text-heading:#002A4C; --text-body:#2B3540; --text-muted:#646666; --text-faint:#717374;
  --text-on-inverse:#FFFFFF; --text-on-inverse-muted:#9DB2C4;
  --border-subtle:#E3E6E7; --border-strong:#C7CCCE; --border-on-inverse:rgba(255,255,255,.16);
  --focus-ring:0 0 0 2px #FFFFFF,0 0 0 4px #2A6795;
  --action:#002A4C; --action-text:#FFFFFF; --action-hover:#0B3A61; --action-active:#001B31;
  --link:#175079; --link-hover:#002A4C;
  --star:#8A6A34; --star-empty:#DBDCDC;
  --caret:#175079;
  --overlay:rgba(0,16,31,.55);
  --input-bg:#FFFFFF;
  --avance:linear-gradient(90deg,#96733F,#B08D57);
  --shadow-sm:none; --shadow-lg:0 12px 32px -16px rgba(0,16,31,.35);
  background:var(--surface-page); color:var(--text-body);
}