/* ==========================================================================
   STYLE.CSS · estilo base de TODO el proyecto
   --------------------------------------------------------------------------
   Aquí viven los colores, las tipografías y los componentes comunes
   (botones, paneles, formularios, cabecera...).

   Se cambia de tema con una sola clase en <body>:
     class="averiada"   -> web rota  (oscura, estilo terminal, verde lima y rojo)
     class="restaurada" -> web arreglada (clara y sobria, como una página de estado)

   NOTA DE DISEÑO: se han quitado los brillos de neón, los degradados y las
   formas recortadas. Una web hecha a mano usa colores planos, bordes de 1px
   y pocas sombras. Referencias: HackTheBox, GitHub (modo oscuro), páginas de estado.
   ========================================================================== */


/* ---------- 1. VARIABLES GENERALES (tipografías y medidas) ---------- */
:root {
  /* JetBrains Mono: títulos, glitch y textos de las animaciones (NO cambiar: es la letra "de hacker") */
  --font-title: "JetBrains Mono", "Courier New", Courier, monospace;
  /* IBM Plex Sans: texto corrido. Se ve menos "plantilla" que Inter */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-maquina: "Special Elite", "Courier New", monospace;   /* máquina de escribir (documentos) */
  --font-mano: "Caveat", "Segoe Print", cursive;                /* letra a mano (post-its) */

  --radio: 3px;               /* esquinas casi rectas: menos "app moderna" */
  --papel: #ebe4d1;           /* papel de los expedientes */
  --tinta: #1d1b17;
  --manila: #c49a5a;
  --cinta: #f2c230;           /* amarillo de la cinta policial (NO cambiar) */
}


/* ---------- 2. TEMAS DE COLOR ---------- */

/* Web ROTA: gris azulado muy oscuro (como GitHub dark) + verde lima + rojo */
body.averiada {
  --fondo: #0d1117;
  --fondo-2: #131a24;
  --panel: #111822;
  --borde: #2a3442;
  --texto: #c9d4e3;
  --texto-suave: #7e8ba0;
  --acento: #9fef00;          /* verde lima: lo que funciona */
  --alerta: #ff4d5e;          /* rojo: lo que está roto */
  --sobre-acento: #0b1200;    /* color del texto encima de un fondo --acento */
}

/* Web RESTAURADA: escritorio de papel cálido, tinta oscura y verde "tinta de sello".
   (Idea: el caso se cierra y el expediente queda archivado sobre la mesa) */
body.restaurada {
  --fondo: #ece7da;
  --fondo-2: #e4ddcc;
  --panel: #fbf8ef;
  --borde: #cdc4ae;
  --texto: #2a2620;
  --texto-suave: #6d6556;
  --acento: #2b7a4b;
  --alerta: #b3261e;
  --sobre-acento: #ffffff;
  /* cuaderno de puntos de fondo */
  background: radial-gradient(rgba(60, 50, 30, .13) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--fondo);
}


/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* el atributo hidden manda siempre, aunque el elemento tenga display propio */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Efecto monitor CRT: líneas finas + grano. Va encima de todo pero NO bloquea clics.
   Está mucho más suave que antes para que no cansé la vista. */
body.averiada::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.07'/></svg>");
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  body.averiada::after { animation: grano .4s steps(2) infinite; }
}
@keyframes grano {
  0%   { background-position: 0 0, 0 0; }
  50%  { background-position: 0 1px, -40px 30px; }
  100% { background-position: 0 0, 25px -50px; }
}

h1, h2, h3 { font-family: var(--font-title); line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); letter-spacing: -.01em; }
p { max-width: 65ch; }
a { color: var(--acento); }
::selection { background: var(--acento); color: var(--sobre-acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.contenedor { width: min(1160px, 100% - 2rem); margin-inline: auto; }


/* ---------- 4. CABECERA (barra fija de arriba) ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--borde);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(6px);
}
.cabecera .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .8rem; flex-wrap: wrap;
}
.marca {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-title); font-weight: 800; letter-spacing: .02em;
  text-decoration: none; color: var(--texto);
}
.marca svg { width: 20px; height: 20px; color: var(--acento); }

/* Indicador de estado del sistema (punto + texto) */
.estado-sistema {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-title); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--alerta);
}
.estado-sistema::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  body.averiada .estado-sistema::before { animation: parpadeo 1s steps(2) infinite; }
}
@keyframes parpadeo { 50% { opacity: .15; } }
body.restaurada .estado-sistema { color: var(--acento); }


/* ---------- 5. TÍTULO CON GLITCH (el elemento más reconocible) ----------
   El texto se duplica con ::before y ::after (leen data-text) y se mueven
   cortados para simular una señal estropeada. glitch.js dispara el "estallido". */
.glitch {
  position: relative;
  display: inline-block;
  font-family: var(--font-title);
  font-size: clamp(3.4rem, 15vw, 10rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .9;
  margin: 0;
  color: var(--texto);
}
body.averiada .glitch::before,
body.averiada .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
}
body.averiada .glitch::before { color: var(--alerta); transform: translateX(5px); clip-path: inset(0 0 60% 0); mix-blend-mode: screen; }
body.averiada .glitch::after  { color: var(--acento); transform: translateX(-5px); clip-path: inset(60% 0 0 0); mix-blend-mode: screen; }

@media (prefers-reduced-motion: no-preference) {
  body.averiada .glitch { animation: temblor 4s steps(1) infinite; }
  body.averiada .glitch::before { animation: corte-a 2.4s steps(1) infinite; }
  body.averiada .glitch::after  { animation: corte-b 1.9s steps(1) infinite; }
  body.averiada .glitch.estallido { animation: estallido .45s steps(1) 1; }
  body.averiada .glitch.estallido::before { animation: estallido-a .45s steps(1) 1; }
  body.averiada .glitch.estallido::after  { animation: estallido-b .45s steps(1) 1; }
}
@keyframes temblor {
  0%, 100% { transform: none; }
  31%      { transform: translate(-3px, 1px) skewX(-6deg); }
  32%      { transform: none; }
  77%      { transform: translate(4px, 0) skewX(8deg); }
  78%      { transform: translate(-2px, 0); }
  79%      { transform: none; }
}
@keyframes corte-a {
  0%   { clip-path: inset(0 0 60% 0);   transform: translateX(5px); }
  10%  { clip-path: inset(22% 0 50% 0); transform: translateX(-14px); }
  14%  { clip-path: inset(0 0 60% 0);   transform: translateX(5px); }
  45%  { clip-path: inset(70% 0 8% 0);  transform: translateX(18px); }
  48%  { clip-path: inset(0 0 60% 0);   transform: translateX(5px); }
  80%  { clip-path: inset(40% 0 42% 0); transform: translateX(-22px); }
  83%  { clip-path: inset(0 0 60% 0);   transform: translateX(5px); }
}
@keyframes corte-b {
  0%   { clip-path: inset(60% 0 0 0);   transform: translateX(-5px); }
  25%  { clip-path: inset(10% 0 75% 0); transform: translateX(16px); }
  29%  { clip-path: inset(60% 0 0 0);   transform: translateX(-5px); }
  60%  { clip-path: inset(48% 0 30% 0); transform: translateX(-20px); }
  64%  { clip-path: inset(60% 0 0 0);   transform: translateX(-5px); }
}
@keyframes estallido {
  0%  { transform: translate(-12px, 2px) skewX(18deg); filter: blur(.5px); }
  20% { transform: translate(14px, -3px) skewX(-22deg); }
  40% { transform: translate(-6px, 0) scaleY(1.15); }
  60% { transform: translate(20px, 2px) skewX(10deg); opacity: .6; }
  80% { transform: translate(-3px, 0); opacity: 1; }
}
@keyframes estallido-a {
  0%  { clip-path: inset(5% 0 70% 0);  transform: translateX(-40px); }
  25% { clip-path: inset(55% 0 20% 0); transform: translateX(35px); }
  50% { clip-path: inset(30% 0 45% 0); transform: translateX(-55px); }
  75% { clip-path: inset(80% 0 2% 0);  transform: translateX(25px); }
}
@keyframes estallido-b {
  0%  { clip-path: inset(65% 0 10% 0); transform: translateX(45px); }
  25% { clip-path: inset(15% 0 60% 0); transform: translateX(-30px); }
  50% { clip-path: inset(40% 0 35% 0); transform: translateX(50px); }
  75% { clip-path: inset(0 0 85% 0);   transform: translateX(-35px); }
}


/* En las páginas internas el título es más modesto (evita que "Identifícate" o "Anonymous" se salgan en móvil) */
.pagina .glitch { font-size: clamp(2.2rem, 9vw, 4.6rem); max-width: 100%; overflow-wrap: anywhere; }


/* ---------- 6. PANELES Y FORMULARIOS ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
}

label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; }
input[type="text"], input[type="password"] {
  width: 100%;
  padding: .65rem .8rem;
  margin-bottom: 1rem;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font: inherit;
  font-family: var(--font-title);
  font-size: .95rem;
}
input[type="text"]:focus, input[type="password"]:focus { outline: none; border-color: var(--acento); }


/* ---------- 7. BOTONES ----------
   Rectángulo plano de color. Al pasar el ratón se invierte (borde + texto).
   Variantes: .btn--fantasma (solo borde), .btn-peligro (rojo), .btn--mini, .btn--grande */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.4rem;
  background: var(--acento);
  color: var(--sobre-acento);
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: transparent; color: var(--acento); }
.btn--fantasma { background: transparent; color: var(--texto); border-color: var(--borde); }
.btn--fantasma:hover { color: var(--acento); border-color: var(--acento); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--borde); border-color: var(--borde); color: var(--texto-suave); cursor: not-allowed;
}
.btn-peligro { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.btn-peligro:hover { color: var(--alerta); }

.mensaje-error { color: var(--alerta); font-weight: 600; }


/* ---------- 8. CRONÓMETRO ---------- */
.cronometro {
  font-family: var(--font-title);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.cronometro small { display: block; font-size: .85rem; color: var(--texto-suave); font-weight: 400; }


/* ---------- 9. LISTA DE SALAS (rejilla simple de pruebas) ---------- */
.mapa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .8rem;
  list-style: none; padding: 0; margin: 0;
}
.sala {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--texto);
  text-decoration: none;
}
.sala strong { font-family: var(--font-title); font-size: 1.5rem; }
.sala span { font-size: .85rem; color: var(--texto-suave); }
.sala--bloqueada { border-style: dashed; opacity: .55; cursor: not-allowed; }
.sala--actual { border-color: var(--acento); }
.sala--actual span { color: var(--acento); font-weight: 700; }
.sala--hecha { border-color: var(--acento); }
.sala--hecha span::before { content: "✓ "; color: var(--acento); }


/* ---------- 10. TARJETA DE PISTA (papel pegado con cinta adhesiva) ---------- */
.tarjeta-pista {
  position: relative;
  max-width: 440px;
  padding: 2.2rem 1.8rem 1.8rem;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(60, 90, 140, .18) 31px 32px),
    linear-gradient(160deg, #f1ead8, #e2d9c2);
  background-position: 0 14px, 0 0;
  color: var(--tinta);
  font-family: var(--font-maquina);
  transform: rotate(-2deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 14px 30px -8px rgba(0, 0, 0, .6);
}
.tarjeta-pista::before {            /* trozo de cinta adhesiva arriba */
  content: "";
  position: absolute; top: -14px; left: 50%;
  width: 120px; height: 30px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(235, 230, 210, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}
.tarjeta-pista h3 { font-family: var(--font-maquina); font-size: 1.1rem; border-bottom: 1px solid var(--tinta); padding-bottom: .4rem; }
.tarjeta-pista p { margin: 0; font-size: 1.15rem; line-height: 32px; }
body.restaurada .tarjeta-pista { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }


/* ---------- 11. TABLAS (panel del anfitrión) ---------- */
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .6rem .8rem; border-bottom: 1px solid var(--borde); text-align: left; }
th { font-family: var(--font-title); }


/* ---------- 12. UTILIDADES ---------- */
.rejilla-2 { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }
.seccion { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.solo-lectores { position: absolute; left: -9999px; }