/* ==========================================================================
   examenradioaficionado.com — tokens de diseño
   --------------------------------------------------------------------------
   La web tiene dos fondos a la vez:

   · La foto (boafengweb.webp), fija detrás de todo y oscura en los dos modos.
     Lo que va directamente encima (cabecera, titulares, menús laterales,
     pie) usa SIEMPRE la paleta oscura, para que se lea también en modo claro.
     Es el ámbito de .app.

   · Las superficies (tarjetas, paneles, tablas, modales): siguen el modo
     elegido en Configuración › Apariencia. Llevan la clase .surface, o una de
     las clases antiguas de panel listadas abajo, y vuelven a declarar la
     paleta del tema sobre sí mismas.

   Las variables se heredan, así que cada elemento toma la paleta de la
   superficie más cercana. El color de texto (que se hereda ya calculado) se
   vuelve a fijar en cada superficie por el mismo motivo.

   El acento lo calcula theme.js en dos juegos (-theme y -photo) y aquí se
   asignan a --accent, --accent-ink y --on-accent según el ámbito.
   ========================================================================== */

/* Fuentes de Pangram Pangram servidas desde la propia web (carpeta fonts/).
   PP Rader para titulares y PP Monument Narrow para el texto. */
@font-face { font-family: 'PP Rader'; src: url('fonts/pp-rader-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Rader'; src: url('fonts/pp-rader-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Rader'; src: url('fonts/pp-rader-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Monument Narrow'; src: url('fonts/pp-monument-narrow-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Monument Narrow'; src: url('fonts/pp-monument-narrow-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Monument Narrow'; src: url('fonts/pp-monument-narrow-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Monument Narrow'; src: url('fonts/pp-monument-narrow-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Tipografía (no depende del tema) */
  --font-rader: 'PP Rader', 'Helvetica Neue', system-ui, sans-serif;
  --font-monument: 'PP Monument Narrow', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
  --font-sans: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font: var(--font-monument);      /* por defecto de la web: texto en Monument Narrow */
  --font-display: var(--font-rader); /* y titulares en Rader */
  --tracking: .4;                    /* cuánto se aplica el apretado negativo de los titulares;
                                        Rader ya es estrecha y con el valor completo se amontona */
  --stretch: 100%;                   /* anchura de titulares (solo Archivo la usa) */
  --stretch-xl: 100%;

  /* Medidas */
  --radius: 10px;                    /* botones, opciones */
  --radius-2: 14px;                  /* tarjetas, paneles */
  --radius-3: 16px;                  /* contenedores grandes */
  --tap: 44px;                       /* objetivo táctil mínimo */
  --wrap: 1240px;                    /* ancho del contenido */
  --gutter: 32px;

  /* Acento: respaldo para el ámbar por defecto hasta que corre theme.js */
  --accent-theme: #F2A93B;  --accent-ink-theme: #8A5A0E;  --on-accent-theme: #1A1406;
  --accent-photo: #F2A93B;  --accent-ink-photo: #F2A93B;  --on-accent-photo: #1A1406;

  /* Fijos: no cambian con el tema */
  --paper: #FEFDF8;                  /* hoja de corrección */
  --paper-ink: #1A1A1A;
  --paper-line: #D8D2C5;
  --paper-muted: #666666;
  --paper-ok: #2C7A3A;  --paper-ok-bg: #E7F2E9;  --paper-ok-ink: #14451F;
  --paper-no: #C0392B;  --paper-no-bg: #FBE9E7;  --paper-no-ink: #6B1A12;
  --medal-1: #E7B547;  --medal-1-ink: #1A1406;
  --medal-2: #C9CDD3;  --medal-2-ink: #14161A;
  --medal-3: #C98A55;  --medal-3-ink: #1A0F06;
}

/* ---------- Paleta clara: raíz y superficies ---------- */
:root,
.surface,
.modal, .settings-pane, .screen-body,
.stat-card, .exam-table, .examiner-empty, .examiner-settings, .examiner-nav-btn,
.review-item, .info-table, .icao-cell, .buro-step, .report-note,
.stats-hard, .teacher-req, .duda, .revlog-item, .bank-detail,
.stx-chart, .stx-table, .side-menu {
  --bg: #F6F4EE;                     /* fondo de página (respaldo de la foto) */
  --bg-2: #FFFFFF;                   /* superficies */
  --bg-3: #EEEBE3;                   /* elevado: hover, pestaña activa, chips */
  --bg-4: #E7E3DA;
  --bg-inset: #EFECE4;               /* pozos: segmented, temporizador */
  --hover: #F3F0E9;

  --text: #1C1B17;
  --text-2: #4D4A42;
  --text-3: #6B675D;                 /* mínimo para texto informativo */
  --text-faint: #9A958A;             /* solo decoración / deshabilitado */

  --border: #E4E0D6;
  --border-2: #D6D1C5;
  --border-3: #B9B3A5;
  --rowline: #EDEAE2;

  --near-black: #1C1B17;             /* CTA invertido ("Siguiente →") */
  --ok: #2C7A3A;   --ok-bg: rgba(44,122,58,.10);
  --no: #C0392B;   --no-bg: rgba(192,57,43,.10);
  --no-ink: #A93226;
  --warn: #9A6A12; --warn-bg: rgba(154,106,18,.12);
  --mark: #1D6FB8; --mark-bg: #DCEBF8;

  --shadow: 0 1px 0 rgba(40,35,20,.04), 0 20px 40px -24px rgba(40,35,20,.25);
  --shadow-deep: 0 25px 50px -12px rgba(40,35,20,.25);

  --accent: var(--accent-theme);
  --accent-ink: var(--accent-ink-theme);
  --on-accent: var(--on-accent-theme);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg-2));

  color: var(--text-2);
}

/* ---------- Paleta oscura: modo oscuro y, siempre, sobre la foto ---------- */
html.dark,
html.dark .surface,
html.dark :is(.modal, .settings-pane, .screen-body,
  .stat-card, .exam-table, .examiner-empty, .examiner-settings, .examiner-nav-btn,
  .review-item, .info-table, .icao-cell, .buro-step, .report-note,
  .stats-hard, .teacher-req, .duda, .revlog-item, .bank-detail,
  .stx-chart, .stx-table, .side-menu),
.app {
  --bg: #12110E;
  --bg-2: #17150F;
  --bg-3: #23211C;
  --bg-4: #2A2822;
  --bg-inset: #0B0B09;
  --hover: #1F1E19;

  --text: #EDE9DF;
  --text-2: #B9B3A5;
  --text-3: #8F897B;
  --text-faint: #6B6658;

  --border: #2A2822;
  --border-2: #34312A;
  --border-3: #4A463C;
  --rowline: #221F1A;

  --near-black: #EDE9DF;             /* el CTA invertido pasa a claro */
  --ok: #5BC98C;   --ok-bg: rgba(91,201,140,.12);
  --no: #F06A5E;   --no-bg: rgba(240,106,94,.12);
  --no-ink: #F59A90;
  --warn: #F2B84B; --warn-bg: rgba(242,184,75,.12);
  --mark: #5EC2F2; --mark-bg: #2B4A6B;

  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.8);
  --shadow-deep: 0 25px 50px -12px rgba(0,0,0,.6);

  /* En modo oscuro los dos juegos de acento coinciden; sobre la foto se usa
     siempre el -photo. */
  --accent: var(--accent-photo);
  --accent-ink: var(--accent-ink-photo);
  --on-accent: var(--on-accent-photo);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg-2));

  color: var(--text-2);
}

/* ---------- Tipografía elegida ---------- */
/* «Estrecha» es la de por defecto: dos familias, una para titulares y otra
   para el texto. Con Mono, Sans o Serif los titulares usan la misma que el texto. */
html[data-font="estrecha"] { --font: var(--font-monument); --font-display: var(--font-rader); --tracking: .4; }
html[data-font="mono"]  { --font: var(--font-mono); --font-display: var(--font); --tracking: 1; }
html[data-font="sans"]  { --font: var(--font-sans); --font-display: var(--font); --tracking: 1; --stretch: 110%; --stretch-xl: 118%; }
html[data-font="serif"] { --font: var(--font-serif); --font-display: var(--font); --tracking: 1; }
/* Rader en negrita por debajo de unos 22 px queda apretada: un poco de aire
   en los titulares pequeños (logo, cabecera del examen, h3 y h4). */
html[data-font="estrecha"] :is(h3, h4, .brand-name, .exam-title-name, .crt-preview-q) { letter-spacing: .01em; }

/* Cifras, códigos de tema, temporizador y etiquetas: SIEMPRE mono,
   se elija la fuente que se elija. */
.num, .mono, .timer, .eyebrow, .topic-code, .label-mono { font-family: var(--font-mono); }

/* ---------- Tamaño de fuente (zoom en body, valores de siempre) ---------- */
html[data-font-size="xs"] body { zoom: .85; }
html[data-font-size="s"]  body { zoom: .92; }
html[data-font-size="m"]  body { zoom: 1; }
html[data-font-size="l"]  body { zoom: 1.10; }
html[data-font-size="xl"] body { zoom: 1.20; }