/* ============================================================
   SQLearning · Inicio: prólogo + hoja de ruta del caso
   Ambiente «historia» (ver docs/ESTILO.md).
   ============================================================ */
body { background: transparent; min-height: 100vh; }
[hidden] { display: none !important; }

/* --- Prólogo ---------------------------------------------------- */
.prologo {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px 20px;
  cursor: pointer;
  outline: none;
  /* Velo del color del fondo del tema: oscuro de noche, lavanda de día */
  background: radial-gradient(ellipse 60% 55% at 50% 45%, color-mix(in srgb, var(--fondo) 88%, transparent),
    color-mix(in srgb, var(--fondo) 55%, transparent) 70%, color-mix(in srgb, var(--fondo) 25%, transparent));
}
.prologo-marca {
  margin: 0 0 8px;
  font: 900 clamp(22px, 3vw, 34px)/1 var(--fuente-titulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cian);
  text-shadow: var(--texto-neon-cian);
}
.prologo-marca strong { color: var(--acento); text-shadow: var(--texto-neon-magenta); }
.prologo-texto { width: min(640px, 100%); display: flex; flex-direction: column; gap: 14px; }
.prologo-frase, .prologo-antes {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--texto);
  animation: aparecer 1.2s ease-out both;
}
.prologo-frase strong { color: var(--acento); font-weight: 600; text-shadow: var(--texto-neon-magenta); }
.prologo-antes {
  padding: 14px 18px;
  border-left: 2px solid var(--cian);
  background: var(--cian-fondo);
  font-size: 15px;
}
.prologo-antes p { margin: 4px 0; }
.prologo-antes-titulo { font: 700 13px var(--fuente-titulo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cian); }
.prologo-pistas { margin: 6px 0; padding-left: 18px; }
.prologo-pista { color: var(--texto); }
.prologo-ultimo { color: var(--texto-suave); }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
@keyframes fundido { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* Prólogo: frase a frase con un fundido, sin movimiento (la regla general de tema.css dejaría la duración en 0) */
  .prologo-frase, .prologo-antes, .prologo-sello { animation-name: fundido !important; animation-duration: 0.8s !important; }
}

.prologo-sello {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 26px;
  border: 2px solid var(--acento);
  border-radius: 4px;
  transform: rotate(-4deg);
  font: 900 clamp(20px, 2.6vw, 30px)/1.1 var(--fuente-titulo);
  letter-spacing: 0.14em;
  color: var(--acento);
  text-shadow: var(--texto-neon-magenta);
  box-shadow: var(--neon-magenta);
  animation: sellar 0.5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.prologo-sello small { font: 600 12px var(--fuente-titulo); letter-spacing: 0.3em; text-transform: uppercase; color: var(--texto); margin-top: 6px; }
@keyframes sellar { from { opacity: 0; transform: rotate(-4deg) scale(1.6); } }
.prologo-continuar {
  font: 700 14px var(--fuente-titulo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 26px;
  animation: aparecer 0.8s ease-out both;
}
.prologo-final { animation: aparecer 0.8s ease-out both; }
.prologo-ayuda { position: absolute; bottom: 18px; margin: 0; font-size: 12px; color: var(--texto-suave); letter-spacing: 0.1em; }

/* --- Prueba de fuentes en el prólogo (pedida por el usuario) ------
   VT323 (terminal retro, estática: un solo grosor) para el texto; Sixtyfour para el nombre.
   Para deshacerla, borrar este bloque. */
.prologo-marca {
  font-family: "Sixtyfour", var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 36px);
  letter-spacing: 0.02em;
}
.prologo-marca strong { font-weight: 400; }
.prologo-frase, .prologo-antes, .prologo-ayuda {
  font-family: "VT323", var(--fuente-codigo);
  font-size: clamp(19px, 1.75vw, 23px);
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.prologo-texto { gap: 10px; }
/* Si no cabe (pantallas bajas), se desplaza en vez de recortarse */
.prologo { overflow-y: auto; justify-content: safe center; gap: 16px; }
.prologo-antes-titulo { font-family: "VT323", var(--fuente-codigo); font-size: 24px; letter-spacing: 0.08em; }
.prologo-ayuda { font-size: 18px; }
.prologo-sello { font-family: "VT323", var(--fuente-codigo); font-size: clamp(34px, 3.6vw, 44px); letter-spacing: 0.12em; }
.prologo-sello small { font-family: "VT323", var(--fuente-codigo); font-size: 18px; }

/* Entrada al prólogo y sonido */
.prologo-entrar {
  font: 700 16px var(--fuente-titulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 30px;
  animation: aparecer 0.8s ease-out both;
}
.prologo-sonido { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 10px; }
.prologo-voz { white-space: nowrap; }

/* --- Cabecera del tablero --------------------------------------- */
.tablero-cabecera {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 10px 24px;
  background: var(--superficie);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 55%, var(--borde));
  box-shadow: 0 4px 22px var(--acento-fondo);
}
.aut { display: flex; align-items: center; gap: 10px; }
.aut-nivel {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font: 900 15px var(--fuente-titulo);
  color: var(--cian);
  border: 1px solid var(--cian);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 0 12px var(--cian-fondo);
}
.aut-texto { display: flex; flex-direction: column; gap: 3px; min-width: 170px; }
.aut-nombre { font: 700 13px var(--fuente-titulo); letter-spacing: 0.08em; text-transform: uppercase; }
.aut-barra { display: block; height: 4px; background: var(--superficie-2); border-radius: 2px; overflow: hidden; }
.aut-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--cian), var(--acento)); }
.aut-texto small { font-size: 11px; color: var(--texto-suave); }
.stats { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font-family: var(--fuente-codigo); font-size: 14px; color: var(--texto-suave); }
.stat { display: flex; align-items: center; gap: 6px; }
.stat b { color: var(--texto); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.boton-enlace {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto);
  text-decoration: none;
}
.boton-enlace:hover { border-color: var(--acento); box-shadow: var(--neon-magenta); }

/* --- Bloques verificados ---------------------------------------- */
.bloques { display: inline-flex; gap: 3px; vertical-align: middle; }
.bloques i {
  width: 11px;
  height: 7px;
  transform: skewX(-20deg);
  border: 1px solid var(--borde);
  background: transparent;
}
.bloques i.b-lleno { background: var(--cian); border-color: var(--cian); box-shadow: 0 0 6px var(--cian-fondo), 0 0 3px var(--cian); }

/* --- Hoja de ruta ----------------------------------------------- */
.tablero-main { max-width: 1240px; margin: 0 auto; padding: 32px 24px 120px; }
.tablero-intro { max-width: 760px; margin-bottom: 36px; }
.tablero-intro h1 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase;
  color: var(--texto);
  outline: none;
}
.tablero-intro p { margin: 0; color: var(--texto-suave); font: 500 14px/1.6 var(--fuente-titulo); letter-spacing: 0.03em; }

.expedientes { display: flex; flex-direction: column; gap: 56px; }
.exp {
  position: relative;
  padding: 18px 22px 22px;
  background: color-mix(in srgb, var(--superficie-solida) 82%, transparent);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(6px);
  box-shadow: var(--sombra);
}
/* Hilo vertical que une un expediente con el siguiente */
.exp + .exp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -57px;
  height: 56px;
  border-left: 2px solid color-mix(in srgb, var(--acento) 60%, transparent);
  box-shadow: 0 0 10px var(--acento-fondo);
}
.exp--abierto { border-color: color-mix(in srgb, var(--acento) 50%, var(--borde)); box-shadow: var(--sombra), 0 0 30px var(--acento-fondo); }
.exp--cerrado { border-color: color-mix(in srgb, var(--cian) 45%, var(--borde)); }
.exp--clasificado { opacity: 0.72; }
.exp--opcional { border-style: dashed; }

.exp-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; cursor: pointer; user-select: none; }
.exp--plegado { padding-bottom: 18px; }
.exp--plegado .exp-cabecera { margin-bottom: 0; }
.exp-flecha {
  align-self: center; width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  font-size: 14px; color: var(--texto-suave); background: transparent; border-color: var(--borde);
}
.exp-cabecera:hover .exp-flecha { color: var(--cian); border-color: var(--cian); }
.tablero-plegar { display: flex; gap: 8px; margin-top: 14px; }
.tablero-plegar button { font-size: 13px; padding: 4px 12px; }
.exp-num { font: 900 13px var(--fuente-titulo); letter-spacing: 0.16em; color: var(--acento); text-shadow: var(--texto-neon-magenta); }
.exp-cabecera h2 { margin: 0; font-size: 20px; text-transform: uppercase; }
.exp-dep { color: var(--texto-suave); font-size: 13px; }
.exp-estado {
  margin-left: auto;
  font: 700 11px var(--fuente-titulo);
  letter-spacing: 0.14em;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--texto-suave);
}
.exp--abierto .exp-estado { color: var(--acento); }
.exp--cerrado .exp-estado { color: var(--cian); }
.tachado { letter-spacing: -0.05em; color: var(--texto-suave); opacity: 0.6; }

.exp-cuerpo { position: relative; }
.exp-hilos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hilo { fill: none; stroke: color-mix(in srgb, var(--texto-suave) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 3 6; }
.hilo--hecho { stroke: var(--cian); stroke-dasharray: none; stroke-width: 2; filter: drop-shadow(0 0 4px var(--cian)); }
.hilo--siguiente { stroke: var(--acento); stroke-dasharray: 6 6; stroke-width: 2; filter: drop-shadow(0 0 4px var(--acento)); animation: fluir 1.6s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -24; } }

.exp-nodos { position: relative; display: grid; gap: 28px 40px; margin: 0; padding: 0; list-style: none; }
.nodo > a, .nodo > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  padding: 10px 14px;
  color: var(--texto);
  text-decoration: none;
  background: var(--superficie-solida);
  border: 1px solid var(--borde);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.nodo--clasificado > li, .nodo--clasificado { min-height: 92px; padding: 10px 14px; background: var(--superficie-solida); border: 1px dashed var(--borde); display: flex; flex-direction: column; gap: 4px; }
.nodo-cod { font: 700 12px var(--fuente-titulo); letter-spacing: 0.12em; color: var(--texto-suave); }
.nodo-titulo { font-size: 14px; line-height: 1.3; }
.nodo-marca { margin-top: auto; font: 600 11px var(--fuente-codigo); color: var(--texto-suave); letter-spacing: 0.04em; }
.nodo .bloques { margin-top: auto; }

.nodo--hecho > * { border-color: color-mix(in srgb, var(--cian) 55%, var(--borde)); }
.nodo--hecho .nodo-cod { color: var(--cian); }
.nodo--disponible > * {
  border-color: var(--acento);
  box-shadow: inset 0 0 18px var(--acento-fondo);
}
.nodo--disponible .nodo-cod, .nodo--disponible .nodo-marca { color: var(--acento); }
.nodo--disponible > a { animation: latido 3s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: inset 0 0 26px color-mix(in srgb, var(--acento) 30%, transparent); } }
.nodo--bloqueado > * { opacity: 0.55; }
.nodo--caso .nodo-cod { color: var(--oro); }
.nodo--caso > * { border-width: 1px 1px 1px 3px; border-left-color: var(--oro); }
.nodo > a:hover, .nodo > a:focus-visible { transform: translateY(-2px); border-color: var(--cian); box-shadow: var(--neon-cian); }

.exp-sello {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 6px 20px;
  transform: translate(-50%, -50%) rotate(-6deg);
  font: 900 clamp(22px, 3vw, 34px) var(--fuente-titulo);
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--acento) 70%, transparent);
  border: 3px solid color-mix(in srgb, var(--acento) 60%, transparent);
  border-radius: 4px;
  pointer-events: none;
}
/* Al resolver el caso final: acceso al expediente final, con el aire del sello */
.exp-final {
  display: inline-block;
  margin: 14px 0 4px;
  padding: 6px 16px;
  font: 900 13px var(--fuente-titulo);
  letter-spacing: 0.14em;
  color: var(--acento);
  text-decoration: none;
  border: 2px solid var(--acento);
  border-radius: 4px;
  text-shadow: var(--texto-neon-magenta);
  box-shadow: var(--neon-magenta);
}
.exp-final:hover, .exp-final:focus-visible { background: var(--acento-fondo); }

/* --- Diálogos: expediente, credenciales, ajustes ----------------- */
.dialogo {
  width: min(760px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0;
  color: var(--texto);
  background: var(--superficie-solida);
  border: 1px solid color-mix(in srgb, var(--acento) 50%, var(--borde));
  border-radius: var(--radio);
  box-shadow: var(--sombra), 0 0 40px var(--acento-fondo);
}
.dialogo--estrecho { width: min(460px, calc(100vw - 32px)); }
.dialogo::backdrop { background: color-mix(in srgb, var(--fondo) 70%, transparent); backdrop-filter: blur(3px); }
.dialogo > header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
}
.dialogo h2 { margin: 0; font-size: 16px; text-transform: uppercase; }
.dialogo > p, .dialogo > hr { margin: 16px 20px; }
.dialogo hr { border: 0; border-top: 1px solid var(--borde); }
.boton-peligro { border-color: var(--error); color: var(--error); }
.boton-peligro:hover { box-shadow: 0 0 12px var(--error-fondo); border-color: var(--error); }

.pistas { list-style: none; margin: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.pista { padding: 12px 16px; border-left: 2px solid var(--acento); background: var(--acento-fondo); }
.pista-num { font: 700 11px var(--fuente-titulo); letter-spacing: 0.16em; color: var(--acento); }
.pista h3 { margin: 4px 0; font-size: 15px; }
.pista p { margin: 0; color: var(--texto-suave); }
.pista-vacia { color: var(--texto-suave); padding: 8px 0; }

.credenciales {
  list-style: none;
  margin: 0;
  padding: 16px 20px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.credencial {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--superficie-2), var(--superficie-solida));
  opacity: 0.55;
}
.credencial--activa { opacity: 1; border-color: color-mix(in srgb, var(--acento) 60%, var(--borde)); box-shadow: 0 0 16px var(--acento-fondo); }
.credencial-chip {
  grid-row: 1 / 3;
  align-self: center;
  width: 30px;
  height: 22px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 45%, rgb(0 0 0 / 0.35) 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 30%, rgb(0 0 0 / 0.3) 30% 38%, transparent 38% 62%, rgb(0 0 0 / 0.3) 62% 70%, transparent 70%),
    #8a8496;
}
.credencial--activa .credencial-chip { background-color: #c9a66b; box-shadow: 0 0 8px rgb(201 166 107 / 0.4); }
.credencial-nombre { font: 700 13px var(--fuente-titulo); letter-spacing: 0.04em; }
.credencial-desc { font-size: 12px; color: var(--texto-suave); }

@media (max-width: 700px) {
  .tablero-cabecera { padding: 10px 16px; }
  .acciones { margin-left: 0; }
  .tablero-main { padding: 24px 16px 80px; }
  .exp { padding: 14px; }
  .exp-nodos { gap: 18px 22px; }
}

/* El Fantasma: silueta encapuchada y borrosa que aparece y desaparece detrás de las pistas */
.fantasma {
  position: absolute; right: 24px; bottom: 0; width: 96px; height: 134px; z-index: 0; pointer-events: none;
  color: var(--acento); filter: blur(1.5px); opacity: 0;
  animation: fantasma 11s ease-in-out infinite;
}
.pistas { position: relative; z-index: 1; }
[data-dialogo-expediente] { min-height: 240px; }
@keyframes fantasma {
  0%, 30%, 100% { opacity: 0; transform: translateY(6px); }
  55% { opacity: 0.32; transform: translateY(0); }
  75% { opacity: 0.12; }
}
@media (prefers-reduced-motion: reduce) { .fantasma { opacity: 0.18; } }