/* ============================================================
   SQLearning · Tema cyberpunk / retrowave
   Por defecto: noche neón (magenta + cian sobre morado profundo).
   Alternativo: <html data-theme="light"> «amanecer pastel».
   El neón va en bordes, títulos y detalles; el texto largo siempre
   con contraste alto.
   ============================================================ */
:root {
  /* Noche: luces de neón lejanas entre la niebla (poco saturado, contraste contenido) */
  --fondo: #04030a;
  --fondo-alto: #0b0818;          /* parte alta del cielo */
  --horizonte: #6e2350;           /* resplandor del horizonte, apagado */
  --superficie: rgb(10 9 20 / 0.9);
  --superficie-solida: #0a0914;
  --superficie-2: #13111f;
  --borde: #2b2642;
  --texto: #c4bfd6;
  --texto-suave: #857f9e;
  --acento: #c0508f;              /* magenta polvoriento */
  --acento-fondo: rgb(192 80 143 / 0.1);
  /* Fichas de cartulina del archivo de 1998 (pasos «sobre el papel»): iguales en los dos temas */
  --papel: #e6dbc1;
  --papel-tinta: #2b2333;
  --papel-borde: #b8a882;
  --laton: #c9a66b;               /* etiqueta de los cajones del archivo */
  --cian: #4fa3b3;                /* cian de niebla */
  --cian-fondo: rgb(79 163 179 / 0.1);
  --primario: #2c6772;
  --primario-texto: #e6f2f4;
  --primario-hover: #347682;
  --ok: #5fb98a;
  --ok-fondo: rgb(95 185 138 / 0.1);
  --error: #d0607a;
  --error-fondo: rgb(208 96 122 / 0.1);
  --foco: #4fa3b3;
  --oro: #c9a66b;                 /* casos y créditos */

  --neon-magenta: 0 0 2px rgb(192 80 143 / 0.6), 0 0 12px rgb(192 80 143 / 0.22);
  --neon-cian: 0 0 2px rgb(79 163 179 / 0.6), 0 0 12px rgb(79 163 179 / 0.2);
  --texto-neon-magenta: 0 0 8px rgb(192 80 143 / 0.45);
  --texto-neon-cian: 0 0 8px rgb(79 163 179 / 0.4);
  --rejilla: rgb(192 80 143 / 0.28);
  --rejilla-2: rgb(79 163 179 / 0.16);

  /* Editor y código */
  --codigo-fondo: rgb(4 3 10 / 0.94);
  --codigo-texto: #c4bfd6;
  --codigo-numeros: #7a7496;
  --sql-clave: #c76aa3;
  --sql-funcion: #5fa9b7;
  --sql-texto: #c9a66b;
  --sql-numero: #9585c2;
  --sql-comentario: #7d7699;
  --sql-tabla: #6fae8f;
  --sql-signo: #857f9e;

  --radio: 6px;
  --sombra: 0 8px 32px rgb(0 0 0 / 0.6);
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --fuente-codigo: "JetBrains Mono", "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;
  color-scheme: dark;
}

/* Ambiente de historia (inicio, mapa, tickets, expediente, casos): mismo misterio,
   neón un punto más vivo. Las pantallas de código no lo usan. */
:root[data-ambiente="historia"]:not([data-theme="light"]) {
  --fondo-alto: #100a24;
  --horizonte: #9a2c6e;
  --borde: #2e2748;
  --texto: #d2cde4;
  --acento: #db5aa6;
  --acento-fondo: rgb(219 90 166 / 0.13);
  --cian: #4fc0d2;
  --cian-fondo: rgb(79 192 210 / 0.12);
  --primario: #2d6f7b;
  --primario-hover: #357d8a;
  --neon-magenta: 0 0 3px rgb(219 90 166 / 0.75), 0 0 16px rgb(219 90 166 / 0.32);
  --neon-cian: 0 0 3px rgb(79 192 210 / 0.75), 0 0 16px rgb(79 192 210 / 0.3);
  --texto-neon-magenta: 0 0 10px rgb(219 90 166 / 0.55);
  --texto-neon-cian: 0 0 10px rgb(79 192 210 / 0.5);
  --rejilla: rgb(219 90 166 / 0.6);
  --rejilla-2: rgb(79 192 210 / 0.38);
}

:root[data-theme="light"] {
  /* Amanecer pastel: lavanda y crema rosada, nada de blanco puro; acentos apagados (rosa empolvado,
     verde azulado). Texto ≥ 4,5:1 sobre todas las superficies (también la cabecera translúcida). */
  --fondo: #ece6f2;
  --fondo-alto: #e2d9ee;
  --horizonte: #f0bccb;
  --superficie: rgb(247 242 245 / 0.9);
  --superficie-solida: #f7f2f5;
  --superficie-2: #ede5ee;
  --borde: #d8cce0;
  --texto: #2e2a3d;
  --texto-suave: #5f5874;
  --acento: #963a62;
  --acento-fondo: rgb(163 67 107 / 0.09);
  --cian: #256470;
  --cian-fondo: rgb(44 111 124 / 0.09);
  --primario: #3d7480;
  --primario-texto: #fbf7f9;
  --primario-hover: #356873;
  --ok: #286a47;
  --ok-fondo: #e3efe6;
  --error: #ad3c5a;
  --error-fondo: #f6e3e8;
  --foco: #3d7480;
  --oro: #76591f;
  --neon-magenta: 0 0 0 1px rgb(163 67 107 / 0.16), 0 4px 16px rgb(163 67 107 / 0.1);
  --neon-cian: 0 0 0 1px rgb(44 111 124 / 0.16), 0 4px 16px rgb(44 111 124 / 0.09);
  --texto-neon-magenta: none;
  --texto-neon-cian: none;
  --rejilla: rgb(163 67 107 / 0.2);
  --rejilla-2: rgb(92 74 156 / 0.14);
  --codigo-fondo: #faf6f8;
  --codigo-texto: #2e2a3d;
  --codigo-numeros: #6f6885;
  --sql-clave: #a03f6e;
  --sql-funcion: #2c6f7c;
  --sql-texto: #87591c;
  --sql-numero: #5c4a9c;
  --sql-comentario: #6b6480;
  --sql-tabla: #2f6f4a;
  --sql-signo: #5f5874;
  --sombra: 0 6px 24px rgb(80 60 110 / 0.09);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
}
code, pre, kbd { font-family: var(--fuente-codigo); }
h1, h2, h3 { font-family: var(--fuente-titulo); letter-spacing: 0.04em; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--acento) 45%, transparent); color: var(--texto); }

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  padding: 6px 14px;
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}
button:hover { border-color: var(--acento); box-shadow: var(--neon-magenta); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.boton-principal {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--primario-texto);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--neon-cian);
}
.boton-principal:hover { background: var(--primario-hover); border-color: var(--primario-hover); box-shadow: var(--neon-cian); }
kbd {
  font-size: 0.8em;
  padding: 1px 5px;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--superficie-2);
}

/* Compartido por todas las páginas */
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Marca (la luz del faro) ----------------------------------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cian);
  text-decoration: none;
  /* Sixtyfour, la del prólogo y el icono (cada página la carga de Google Fonts) */
  font: 400 19px/1 "Sixtyfour", var(--fuente-titulo);
  /* A tamaño pequeño los trazos se ven gruesos: un borde del color del fondo se come el
     contorno de cada «píxel» (más fino sin cambiar el tamaño) */
  -webkit-text-stroke: 0.5px var(--superficie-solida);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: var(--texto-neon-cian);
}
:root[data-theme="light"] .marca { -webkit-text-stroke-width: 0; }  /* letras oscuras sobre claro: ya se ven finas */
.marca strong { color: var(--acento); font-weight: 400; text-shadow: var(--texto-neon-magenta); }
.marca-faro {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9a66b;
  box-shadow: 0 0 0 3px rgb(201 166 107 / 0.15), 0 0 12px 3px rgb(201 166 107 / 0.35);
}
.marca-faro.grande { width: 26px; height: 26px; animation: destello 3s ease-in-out infinite; }
@keyframes destello {
  50% { box-shadow: 0 0 0 7px rgb(201 166 107 / 0.1), 0 0 36px 12px rgb(201 166 107 / 0.3); }
}

.aviso-prueba {
  margin: 0; padding: 6px; text-align: center;
  font: 700 12px var(--fuente-titulo); letter-spacing: 0.12em; color: #2e2a3d;   /* oscuro en los dos temas: el oro es el mismo */
  background: repeating-linear-gradient(-45deg, #c9a66b 0 14px, #b08f55 14px 28px);
}
.lec-final-aviso { color: var(--error); }

/* Control de la música de fondo (js/musica.js) */
.musica { display: inline-flex; align-items: center; gap: 6px; }
.musica-boton { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.musica-nota { color: var(--texto-suave); }
.musica-volumen { width: 84px; accent-color: var(--acento); }

/* Panel de cristal oscuro con borde neón */
.panel-neon {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  /* Duración 0 (no 0.01ms): con 0.01ms, CUALQUIER cambio de estilo pasa a ser una transición diminuta */
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}

/* El botón de tema no se parte en dos líneas en cabeceras apretadas (1024 px) */
.boton-tema { white-space: nowrap; }