/* EducaQuix · Sitio v2 · Tema oscuro (v2)
   Base pizarra-navy suave (no casi negra), 4 niveles de superficie bien separados, bordes visibles pero sutiles,
   texto blanco al ~90 % y acentos turquesa/dorado ajustados para oscuro (no los valores del tema claro).
   Todo lo que cambia entre temas es una variable: los componentes no llevan reglas propias de tema.
   Se activa con prefers-color-scheme: dark (si el usuario no eligió) o con html[data-theme="dark"].
   Los dos bloques de variables son idénticos a propósito: mantenerlos sincronizados. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Superficies: 0 página · 1 secciones alternas · 2 tarjetas · 3 elevado (menús, campos, dígitos) */
    --bg: #1A2634;
    --bg-alt: #1F2D3D;
    --surface: #26374A;
    --surface-2: #2F4257;
    /* Texto */
    --ink: #E7EDF2;
    --ink-2: #BAC6D1;
    --ink-3: #A3B1BE;
    /* Líneas y bordes */
    --line: rgba(214, 228, 240, .14);
    --line-2: rgba(214, 228, 240, .28);
    --rule-strong: rgba(231, 237, 242, .55);
    --control-edge: #8193A4;
    --track-off: #6E8093;
    --frame-edge: rgba(214, 228, 240, .22);
    /* Acentos para oscuro */
    --accent: #6ADBCB;
    --accent-ink: #6ADBCB;
    --accent-fill: #3FCDBB;
    --on-accent: #10202C;
    --gold: #F2C86B;
    --btn-bg: #3FCDBB;
    --btn-ink: #10202C;
    --btn-bg-hover: #6ADBCB;
    --err: #FFA3B1;
    --focus: #8DE9DC;
    /* Marca */
    --mark: #FFFFFF;
    --wordmark: #3FCDBB;
    /* Piezas que antes se perdían */
    --note-bg: #EBC870;
    --note-ink: #1B2632;
    --receipt-bg: #F2EFE7;
    --receipt-ink: #1B2632;
    --receipt-mute: #56626E;
    --receipt-accent: #0B7A6E;
    --logo-tile: #E6ECF0;
    --band-bg: #22364B;
    --band-edge: rgba(214, 228, 240, .20);
    --menu-bg: #2F4257;
    --sticker-edge: #8DE9DC;
    --bezel: #0F1B27;
    --bezel-edge: rgba(214, 228, 240, .30);
    --shot-light-bg: #E9EEF2;
    --shot-light-bar: #D9E1E8;
    --shot-light-ink: #34465A;
    --ico-filter: brightness(1.9) saturate(.7);
    --shadow-frame: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -28px rgba(4, 10, 18, .7);
    --shadow-soft: 0 18px 36px -24px rgba(4, 10, 18, .65);
    --shot-filter: none;
  }
  :root:not([data-theme="light"]) .solo-claro { display: none !important; }
  :root:not([data-theme="light"]) .solo-oscuro { display: block !important; }
  :root:not([data-theme="light"]) .theme-btn .i-sol { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-luna { display: none; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1A2634;
  --bg-alt: #1F2D3D;
  --surface: #26374A;
  --surface-2: #2F4257;
  --ink: #E7EDF2;
  --ink-2: #BAC6D1;
  --ink-3: #A3B1BE;
  --line: rgba(214, 228, 240, .14);
  --line-2: rgba(214, 228, 240, .28);
  --rule-strong: rgba(231, 237, 242, .55);
  --control-edge: #8193A4;
  --track-off: #6E8093;
  --frame-edge: rgba(214, 228, 240, .22);
  --accent: #6ADBCB;
  --accent-ink: #6ADBCB;
  --accent-fill: #3FCDBB;
  --on-accent: #10202C;
  --gold: #F2C86B;
  --btn-bg: #3FCDBB;
  --btn-ink: #10202C;
  --btn-bg-hover: #6ADBCB;
  --err: #FFA3B1;
  --focus: #8DE9DC;
  --mark: #FFFFFF;
  --wordmark: #3FCDBB;
  --note-bg: #EBC870;
  --note-ink: #1B2632;
  --receipt-bg: #F2EFE7;
  --receipt-ink: #1B2632;
  --receipt-mute: #56626E;
  --receipt-accent: #0B7A6E;
  --logo-tile: #E6ECF0;
  --band-bg: #22364B;
  --band-edge: rgba(214, 228, 240, .20);
  --menu-bg: #2F4257;
  --sticker-edge: #8DE9DC;
  --bezel: #0F1B27;
  --bezel-edge: rgba(214, 228, 240, .30);
  --shot-light-bg: #E9EEF2;
  --shot-light-bar: #D9E1E8;
  --shot-light-ink: #34465A;
  --ico-filter: brightness(1.9) saturate(.7);
  --shadow-frame: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -28px rgba(4, 10, 18, .7);
  --shadow-soft: 0 18px 36px -24px rgba(4, 10, 18, .65);
  --shot-filter: none;
}
:root[data-theme="dark"] .solo-claro { display: none !important; }
:root[data-theme="dark"] .solo-oscuro { display: block !important; }
:root[data-theme="dark"] .theme-btn .i-sol { display: block; }
:root[data-theme="dark"] .theme-btn .i-luna { display: none; }

/* Transición suave al cambiar de tema con el botón (la clase la pone theme.js un instante) */
.theme-anim, .theme-anim * { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease) !important; }