/* efectoGlassy · hoja base del portal (copiada de la skill efectoGlassy). Tres temas (vidrio por
   defecto, día, noche), tokens en un solo lugar, atmósfera detrás del vidrio, paneles, barra,
   botones e interruptor. NUNCA un color fijo fuera de acá: cop.css solo usa estos tokens.
   Lo propio de eClass va en los bloques «proyecto» de cada tema: el rojo de marca (solo logo y
   filete, nunca botones ni errores), el primario navy también de noche, y los cinco colores de
   criterio del subrayado (≥ 3:1 sobre el vidrio compuesto en los tres temas; lo comprueba
   tests/js/tokens.test.mjs).
   Fuentes: autoalojadas (@font-face a woff2 propios), jamás Google Fonts ni CDN. */

@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('fonts/bigshoulders-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700-latin.woff2') format('woff2'); }

/* ---------- Tokens · día ---------- */
:root {
  color-scheme: light;
  --bg: #f3efe6;
  --bg-blob-1: rgba(126, 176, 179, 0.42);   /* campos de color de la atmósfera */
  --bg-blob-2: rgba(28, 56, 83, 0.12);
  --bg-blob-3: rgba(255, 255, 255, 0.9);
  --photo: none;                             /* solo el tema vidrio pone una foto */
  --glass: rgba(255, 255, 255, 0.56);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 18px 50px -28px rgba(28, 56, 83, 0.35), 0 2px 6px -3px rgba(28, 56, 83, 0.12);
  --blur: 18px;
  --ink: #1c3853;        /* ≥ 7:1 sobre el vidrio compuesto */
  --ink-2: #3f556c;
  --ink-3: #566b82;      /* ≥ 4.5:1: es el mínimo para texto secundario */
  --accent: #477477;     /* enlaces y foco: también ≥ 4.5:1 */
  --accent-2: #7eb0b3;   /* solo relleno (barras, puntos), nunca texto */
  --accent-soft: rgba(126, 176, 179, 0.2);
  --navy: #1c3853; --navy-d: #142a3f;
  --btn-primary-bg: linear-gradient(135deg, #1c3853, #142a3f);
  --btn-primary-ink: #fff;
  --on-dark: #fff;       /* texto sobre navy / ámbar / teal, igual en los tres temas */
  --ctl-border: rgba(28, 56, 83, 0.22); /* borde de botones secundarios: visible sobre vidrio claro */
  --ok: #3d8a5e; --ok-soft: rgba(61, 138, 94, 0.16);
  --err: #b54a4a; --err-soft: rgba(181, 74, 74, 0.14);
  --warn: #b7761f; --warn-soft: rgba(201, 141, 62, 0.18);
  --sand: #e8e2d4; --sand-soft: rgba(232, 226, 212, 0.5);
  --stripe: #faf7ef; --stripe-2: #f1ece1;   /* filas alternas de tablas */
  --sel: rgba(126, 176, 179, 0.35);
  --radius-card: 18px; --radius-ctl: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --logo-dia: inline; --logo-noche: none;   /* dos logos en el HTML, uno visible por tema */
  /* proyecto · eClass */
  --marca: #cc1517;                          /* rojo eClass: logo y filete del encabezado, nada más */
  --btn-primary-border: transparent;
  --btn-primary-shadow: 0 10px 24px -12px rgba(28, 56, 83, 0.55);
  --scrim: rgba(15, 28, 43, 0.45);           /* el velo detrás de un modal */
  --crit-representatividad: #2a5db0;         /* azul */
  --crit-neutralidad: #8048a8;               /* violeta */
  --crit-resultados: #a8580c;                /* ámbar */
  --crit-coherencia: #1f7a80;                /* verde azulado */
  --crit-vigencia: #b03a74;                  /* frambuesa */
  --on-crit: #fff;                           /* texto sobre un color de criterio */
}

/* ---------- Tokens · noche (sin JS, por preferencia del sistema; el tema vidrio no entra acá) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="glass"]) {
    color-scheme: dark;
    --bg: #0f1c2b;
    --bg-blob-1: rgba(126, 176, 179, 0.16); --bg-blob-2: rgba(28, 56, 83, 0.9); --bg-blob-3: rgba(90, 138, 141, 0.12);
    --glass: rgba(255, 255, 255, 0.07); --glass-strong: rgba(255, 255, 255, 0.11); --glass-border: rgba(255, 255, 255, 0.13);
    --glass-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
    --ink: #f0ece3; --ink-2: #c6d0da; --ink-3: #93a5b8;
    --accent: #9cc7c9; --accent-2: #7eb0b3; --accent-soft: rgba(126, 176, 179, 0.18);
    --btn-primary-bg: linear-gradient(135deg, #2f5a83, #23466a); --btn-primary-ink: #0f1c2b; /* eClass: navy también de noche; el texto del primario es --on-dark */
    --ok: #7fcf9f; --ok-soft: rgba(127, 207, 159, 0.16); --err: #f08f8f; --err-soft: rgba(240, 143, 143, 0.14);
    --warn: #e8b06a; --warn-soft: rgba(232, 176, 106, 0.16);
    --sand: rgba(255, 255, 255, 0.14); --sand-soft: rgba(255, 255, 255, 0.08);
    --stripe: rgba(255, 255, 255, 0.035); --stripe-2: rgba(255, 255, 255, 0.06);
    --sel: rgba(126, 176, 179, 0.45);
    --ctl-border: rgba(255, 255, 255, 0.24);
    --logo-dia: none; --logo-noche: inline;
    /* proyecto · eClass: el primario navy de noche lleva borde, o se pierde contra el fondo */
    --btn-primary-border: rgba(255, 255, 255, 0.28);
    --crit-representatividad: #8fb4f5; --crit-neutralidad: #c6a3ec; --crit-resultados: #eab36e;
    --crit-coherencia: #74c7cc; --crit-vigencia: #f0a0c4; --on-crit: #0f1c2b;
  }
}
/* El mismo bloque, elegido a mano. Mantener los dos idénticos. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1c2b;
  --bg-blob-1: rgba(126, 176, 179, 0.16); --bg-blob-2: rgba(28, 56, 83, 0.9); --bg-blob-3: rgba(90, 138, 141, 0.12);
  --glass: rgba(255, 255, 255, 0.07); --glass-strong: rgba(255, 255, 255, 0.11); --glass-border: rgba(255, 255, 255, 0.13);
  --glass-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
  --ink: #f0ece3; --ink-2: #c6d0da; --ink-3: #93a5b8;
  --accent: #9cc7c9; --accent-2: #7eb0b3; --accent-soft: rgba(126, 176, 179, 0.18);
  --btn-primary-bg: linear-gradient(135deg, #2f5a83, #23466a); --btn-primary-ink: #0f1c2b; /* eClass: navy también de noche; el texto del primario es --on-dark */
  --ok: #7fcf9f; --ok-soft: rgba(127, 207, 159, 0.16); --err: #f08f8f; --err-soft: rgba(240, 143, 143, 0.14);
  --warn: #e8b06a; --warn-soft: rgba(232, 176, 106, 0.16);
  --sand: rgba(255, 255, 255, 0.14); --sand-soft: rgba(255, 255, 255, 0.08);
  --stripe: rgba(255, 255, 255, 0.035); --stripe-2: rgba(255, 255, 255, 0.06);
  --sel: rgba(126, 176, 179, 0.45);
  --ctl-border: rgba(255, 255, 255, 0.24);
  --logo-dia: none; --logo-noche: inline;
  /* proyecto · eClass: el primario navy de noche lleva borde, o se pierde contra el fondo */
  --btn-primary-border: rgba(255, 255, 255, 0.28);
  --crit-representatividad: #8fb4f5; --crit-neutralidad: #c6a3ec; --crit-resultados: #eab36e;
  --crit-coherencia: #74c7cc; --crit-vigencia: #f0a0c4; --on-crit: #0f1c2b;
}

/* ---------- Tokens · vidrio (predeterminado): foto desenfocada detrás de paneles más transparentes ---------- */
:root[data-theme="glass"] {
  color-scheme: light;
  --bg: #d8d1c4;                 /* color de respaldo mientras carga la foto */
  --photo: url('bg-glass.webp'); /* hecha con make_bg.mjs: desenfoque fuerte, ~15-60 KB */
  --glass: rgba(255, 255, 255, 0.46);
  --glass-strong: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 26px 60px -28px rgba(28, 56, 83, 0.5), 0 2px 6px -3px rgba(28, 56, 83, 0.18);
  --blur: 28px;
  --ink-3: #4a6077;              /* un paso más oscuro que de día: el vidrio es más transparente */
  --accent: #3e696c;
  --sand: rgba(28, 56, 83, 0.12); --sand-soft: rgba(255, 255, 255, 0.3);
  --stripe: rgba(255, 255, 255, 0.3); --stripe-2: rgba(255, 255, 255, 0.45);
  --logo-dia: inline; --logo-noche: none;
}

/* ---------- Tokens · impresión (proyecto): tinta navy sobre blanco, cualquiera sea el tema elegido ---------- */
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --bg: #fff; --photo: none; --glass: #fff; --glass-strong: #fff; --glass-border: #d9d9d9; --glass-shadow: none;
    --ink: #1c3853; --ink-2: #3f556c; --ink-3: #566b82; --accent: #477477;
    --sand: #e8e2d4; --sand-soft: #f6f3ec; --stripe: #faf7ef; --stripe-2: #f1ece1;
    --logo-dia: inline; --logo-noche: none;
  }
}

/* ---------- Base y atmósfera ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-size: 16px; line-height: 1.55;
  background: var(--bg); color: var(--ink);
  min-height: 100vh; min-height: 100svh;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Dos campos de color y una luz, fijos, detrás del vidrio (día y noche). */
body::before {
  content: ''; position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 8%, var(--bg-blob-1), transparent 70%),
    radial-gradient(55% 60% at 88% 92%, var(--bg-blob-2), transparent 72%),
    radial-gradient(40% 40% at 60% 40%, var(--bg-blob-3), transparent 70%);
  filter: blur(0.5px);
}
/* En vidrio, la foto ocupa ese mismo lugar y un velo la aquieta. */
html[data-theme="glass"] body::before { background: var(--photo) center / cover no-repeat, var(--bg); inset: 0; filter: none; }
html[data-theme="glass"] body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(243, 239, 230, 0.18), rgba(28, 56, 83, 0.16)); }
body > * { position: relative; z-index: 1; }
::selection { background: var(--sel); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }

/* ---------- Vidrio ---------- */
.glass, .glass-strong {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border-radius: var(--radius-card);
}
.glass-strong { background: var(--glass-strong); }
.card { padding: 22px 24px; }

/* ---------- Barra ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 22px; border-radius: 16px; }
.topbar.sticky { position: sticky; top: 10px; z-index: 20; margin: 10px 16px 0; }
.topbar .spacer { flex: 1; }
.logo-dia { display: var(--logo-dia); }
.logo-noche { display: var(--logo-noche); }

/* ---------- Controles (≥ 44 px de alto: objetivo táctil) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--radius-ctl);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  color: var(--ink); background: transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s, border-color .2s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--btn-primary-bg); color: var(--on-dark); border-color: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); } /* eClass: navy con --on-dark en los tres temas */
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-ghost { background: var(--glass-strong); border-color: var(--ctl-border); color: var(--ink); }
.btn-link { background: transparent; color: var(--accent); min-height: 36px; padding: 6px 10px; font-size: 13px; }
.btn-link:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); }
/* Un <label> que hace de botón (input de archivo) se ve como botón, no como rótulo. */
label.btn { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; margin: 0; display: inline-flex; cursor: pointer; }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--glass); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius-ctl); padding: 10px 12px; min-height: 44px; }

/* ---------- Interruptor de tema: un botón, tres estados en rueda ---------- */
.toggle-theme { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-strong); cursor: pointer; position: relative; flex: 0 0 auto; }
.toggle-theme::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--accent); box-shadow: inset -5px -4px 0 0 var(--glass-strong); transition: box-shadow .3s var(--ease), background .3s; }
html[data-theme="dark"] .toggle-theme::before { box-shadow: inset 0 0 0 0 transparent; background: #f0ece3; }
html[data-theme="glass"] .toggle-theme::before { box-shadow: none; background: radial-gradient(circle at 32% 30%, #fff 0 18%, #d9b995 20% 52%, #477477 54%); }

/* ---------- Tablas: anchas se desplazan dentro de su marco, nunca la página ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--glass-border); }
table.table td { padding: 9px 10px; border-bottom: 1px solid var(--glass-border); }
table.table tbody tr:nth-child(even) td { background: var(--stripe); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }