/* =========================================================
   Misterio SQL en Montevideo — tema "detective / expediente"
   Accesible: alto contraste (AA), tipografia grande, foco visible.
   ========================================================= */

:root {
  --antracita-950: #0d0f12;
  --antracita-900: #14171c;
  --antracita-800: #1c2029;
  --antracita-700: #262b36;
  --antracita-600: #333a48;
  --borde: #3c4353;
  --papel: #f4ecd8;
  --papel-oscuro: #e7dcc0;
  --texto: #ecebe4;
  --texto-suave: #b9bdc9;
  --texto-sobre-papel: #201c12;
  --ambar: #e3a640;
  --ambar-fuerte: #f0b74f;
  --ambar-oscuro: #8a5d1a;
  --cian: #5fc9d8;
  --verde-ok: #4caf6f;
  --rojo-error: #e2665a;
  --radio: 12px;
  font-size: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse at top, rgba(227, 166, 64, 0.06), transparent 55%),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    var(--antracita-950);
  background-size: auto, 42px 42px, 42px 42px, auto;
  color: var(--texto);
  font-family: "Atkinson Hyperlegible", "Segoe UI", Verdana, Arial, sans-serif;
  line-height: 1.65;
}

a { color: var(--ambar-fuerte); }
a:focus, button:focus, input:focus, textarea:focus, select:focus, summary:focus {
  outline: 3px solid var(--cian);
  outline-offset: 2px;
}

.envoltorio {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 1.2rem 4rem;
}

/* ---------- Encabezado ---------- */
header.cabecera {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0)),
    linear-gradient(135deg, var(--antracita-900), var(--antracita-800));
  border-bottom: 3px solid var(--ambar-oscuro);
  color: var(--texto);
  padding: 1.1rem 0 1.5rem;
  margin-bottom: 2rem;
}

.cabecera-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.cabecera-titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--texto);
  letter-spacing: 0.02em;
}
.cabecera-titulo em { color: var(--ambar-fuerte); font-style: normal; }
.cabecera-titulo .lupa { font-size: 1.6rem; }

nav.migas {
  margin-top: 0.7rem;
}
.boton-volver-mapa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--antracita-700);
  border: 1px solid var(--borde);
  color: var(--texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.boton-volver-mapa:hover {
  border-color: var(--cian);
  transform: translateX(-2px);
  color: var(--cian);
}

.marcador {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(227, 166, 64, 0.12);
  border: 1px solid var(--ambar-oscuro);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ambar-fuerte);
}

/* ---------- Barra de progreso ---------- */
.barra-progreso-fondo {
  background: var(--antracita-700);
  border: 1px solid var(--borde);
  border-radius: 999px;
  height: 14px;
  margin-top: 0.9rem;
  overflow: hidden;
}
.barra-progreso-relleno {
  background: linear-gradient(90deg, var(--ambar-oscuro), var(--ambar-fuerte));
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
  width: 0%;
}

/* ---------- Tarjetas / secciones (estilo carpeta de expediente) ---------- */
.tarjeta {
  background: var(--antracita-800);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--ambar-oscuro);
  border-radius: var(--radio);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.encabezado-caso { border-top-color: var(--ambar-fuerte); }
.numero-expediente {
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin: 0 0 0.4rem;
}
.insignia-preview {
  background: rgba(227, 166, 64, 0.1);
  border: 1px dashed var(--ambar-oscuro);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  display: inline-block;
  color: var(--texto);
}

h1, h2, h3, h4 { color: var(--texto); line-height: 1.3; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.35rem; margin-top: 0; }
h3 { font-size: 1.1rem; color: var(--ambar-fuerte); }

p { max-width: 68ch; }

.etiqueta-seccion {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ambar-fuerte);
  margin: 0 0 0.3rem;
}

.aviso-lectura-facil {
  background: rgba(95, 201, 216, 0.08);
  border-left: 5px solid var(--cian);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 0.98rem;
  color: var(--texto-suave);
  margin-bottom: 1.4rem;
}

code {
  background: rgba(227, 166, 64, 0.12);
  color: var(--ambar-fuerte);
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: 0.92em;
}

/* ---------- Caja de sintaxis de ejemplo ---------- */
.caja-concepto pre {
  margin: 0;
}
.sintaxis-caja {
  background: var(--antracita-950);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  margin: 1rem 0;
}
.sintaxis-rotulo {
  background: var(--antracita-700);
  color: var(--texto-suave);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-bottom: 1px solid var(--borde);
}
.sintaxis-caja pre {
  padding: 0.9rem 1rem;
  overflow-x: auto;
}
.sintaxis-caja code {
  background: none;
  color: #ffe9b3;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Desplegable "¿Querés profundizar?" ---------- */
details.profundizar {
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  padding: 0.2rem 1rem;
  margin-top: 0.8rem;
}
details.profundizar summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cian);
  padding: 0.7rem 0.2rem;
  list-style: none;
}
details.profundizar summary::-webkit-details-marker { display: none; }
details.profundizar summary::before {
  content: "▸ ";
}
details.profundizar[open] summary::before {
  content: "▾ ";
}
.profundizar-contenido {
  padding: 0.2rem 0.2rem 1rem;
  border-top: 1px dashed var(--borde);
  margin-top: 0.3rem;
}
.profundizar-contenido pre {
  background: var(--antracita-950);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  overflow-x: auto;
  color: #ffe9b3;
}

/* ---------- Bandeja de mensajes (narrativa) ---------- */
.bandeja-mensajes {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.8rem;
}
.mensaje-tarjeta {
  background: var(--papel);
  color: var(--texto-sobre-papel);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  border-left: 5px solid var(--ambar-oscuro);
}
.mensaje-tarjeta.mensaje-chat {
  background: var(--antracita-700);
  color: var(--texto);
  border-left-color: var(--cian);
}
.mensaje-cabecera {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.mensaje-avatar {
  font-size: 1.4rem;
  background: rgba(0,0,0,0.08);
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mensaje-chat .mensaje-avatar { background: rgba(255,255,255,0.08); }
.mensaje-remitente { font-weight: 700; }
.mensaje-rol {
  font-size: 0.82rem;
  opacity: 0.75;
}
.mensaje-cuando {
  margin-left: auto;
  font-size: 0.78rem;
  font-family: "Courier New", Courier, monospace;
  opacity: 0.7;
  white-space: nowrap;
}
.mensaje-asunto {
  font-weight: 700;
  margin-bottom: 0.35rem;
  text-decoration: underline;
  text-decoration-color: var(--ambar-oscuro);
  text-underline-offset: 3px;
}
.mensaje-cuerpo { line-height: 1.6; }
.mensaje-tarjeta.mensaje-chat .mensaje-cuerpo strong { color: var(--ambar-fuerte); }

/* ---------- Pizarra de investigacion: nodos pinchados + hilos ---------- */
.pizarra {
  position: relative;
  background:
    radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.4px) 0 0/14px 14px,
    linear-gradient(160deg, #5a4326, #3f2f1b);
  border: 10px solid #2a1f10;
  border-radius: 10px;
  padding: 2rem 1.4rem;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.45);
}
.pizarra svg.hilos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hilo-rojo {
  fill: none;
  stroke: #c0392b;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.8;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

/* ---------- Mapa de misiones (index) ---------- */
.mapa-misiones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem 1.2rem;
}

.mision-tarjeta {
  display: block;
  background: var(--papel);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--texto-sobre-papel);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mision-tarjeta::before {
  content: "📌";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.mapa-misiones .mision-tarjeta:nth-child(6n+1) { transform: rotate(-2deg); }
.mapa-misiones .mision-tarjeta:nth-child(6n+2) { transform: rotate(1.5deg); }
.mapa-misiones .mision-tarjeta:nth-child(6n+3) { transform: rotate(-1deg); }
.mapa-misiones .mision-tarjeta:nth-child(6n+4) { transform: rotate(2deg); }
.mapa-misiones .mision-tarjeta:nth-child(6n+5) { transform: rotate(-1.5deg); }
.mapa-misiones .mision-tarjeta:nth-child(6n+6) { transform: rotate(1deg); }
.mision-tarjeta:hover, .mision-tarjeta:focus {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.45);
  z-index: 2;
}
.mision-tarjeta.completada {
  border-color: var(--verde-ok);
  background: #e4f3e8;
}
.mision-tarjeta .numero {
  display: inline-block;
  background: var(--ambar-oscuro);
  color: #14171c;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.mision-tarjeta.completada .numero { background: var(--verde-ok); color: #0d1f14; }
.mision-tarjeta .insignia-check {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  font-size: 1.3rem;
}
.mision-tarjeta .titulo-mision { font-weight: 700; font-size: 1.05rem; }
.mision-tarjeta .resumen-mision { font-size: 0.87rem; color: #4a4630; margin-top: 0.3rem; }

/* ---------- Insignias ---------- */
.insignias-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.insignia {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(227, 166, 64, 0.12);
  border: 1px solid var(--ambar-oscuro);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ambar-fuerte);
}
.insignia.bloqueada {
  opacity: 0.4;
  filter: grayscale(1);
  border-style: dashed;
  color: var(--texto-suave);
}

/* ---------- Ejercicios / consola SQL ---------- */
.caja-consola { border-top-color: var(--cian); }
.ejercicio {
  background: var(--antracita-900);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.1rem 1.2rem;
  margin: 1.2rem 0;
}
.ejercicio.correcto { border-color: var(--verde-ok); }
.ejercicio .pregunta { font-weight: 700; margin-bottom: 0.3rem; }
.ejercicio .pista { font-size: 0.92rem; color: var(--texto-suave); margin-bottom: 0.7rem; }
.ejercicio .pista-extra { color: var(--ambar-fuerte); margin-top: 0.6rem; margin-bottom: 0; }
.ejercicio textarea {
  width: 100%;
  min-height: 5.5rem;
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: 0.98rem;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--borde);
  resize: vertical;
  background: #0a0c0f;
  color: #d9f7dc;
}
.fila-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

button.boton {
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}
button.boton.primario { background: var(--ambar-fuerte); color: #201c12; }
button.boton.secundario { background: var(--antracita-600); color: var(--texto); }
button.boton.terciario { background: transparent; color: var(--cian); text-decoration: underline; }
button.boton:disabled { opacity: 0.5; cursor: not-allowed; }

.resultado { margin-top: 0.9rem; }
.resultado .veredicto {
  display: inline-block;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  margin-bottom: 0.6rem;
}
.veredicto.ok { background: rgba(76, 175, 111, 0.18); color: var(--verde-ok); }
.veredicto.mal { background: rgba(226, 102, 90, 0.18); color: var(--rojo-error); }
.resultado .error {
  background: rgba(226, 102, 90, 0.15);
  color: var(--rojo-error);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-family: monospace;
}

table.tabla-resultado {
  border-collapse: collapse;
  width: 100%;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}
table.tabla-resultado th, table.tabla-resultado td {
  border: 1px solid var(--borde);
  padding: 0.4rem 0.6rem;
  text-align: left;
}
table.tabla-resultado th { background: var(--antracita-700); color: var(--ambar-fuerte); }
table.tabla-resultado tr:nth-child(even) { background: rgba(255,255,255,0.03); }
.tabla-scroll { overflow-x: auto; }

/* ---------- Glosario ---------- */
.glosario {
  border-top-color: var(--cian);
}
.glosario dt {
  font-weight: 700;
  margin-top: 0.8rem;
  color: var(--ambar-fuerte);
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
}
.glosario dt:first-of-type { margin-top: 0; }
.glosario dd { margin: 0.2rem 0 0; color: var(--texto-suave); }

/* ---------- Navegacion inferior ---------- */
.nav-inferior {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* ---------- Utilidades ---------- */
.centro { text-align: center; }
.oculto { display: none !important; }
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.estado-carga {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--texto-suave);
  font-style: italic;
}

footer.pie {
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.88rem;
  margin-top: 2.5rem;
}

/* ---------- Pizarra de tablas de cada misión ---------- */
.pizarra-tablas {
  min-height: 130px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.6rem 2rem;
  justify-content: center;
}
.nodo-tabla {
  position: relative;
  z-index: 1;
  background: var(--papel);
  color: var(--texto-sobre-papel);
  border-radius: 6px;
  padding: 0.7rem 0.95rem;
  min-width: 150px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.35);
  font-size: 0.9rem;
}
.nodo-tabla::before {
  content: "📌";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.pizarra-tablas .nodo-tabla:nth-child(5n+1) { transform: rotate(-1.5deg); }
.pizarra-tablas .nodo-tabla:nth-child(5n+2) { transform: rotate(1deg); }
.pizarra-tablas .nodo-tabla:nth-child(5n+3) { transform: rotate(-1deg); }
.pizarra-tablas .nodo-tabla:nth-child(5n+4) { transform: rotate(1.5deg); }
.pizarra-tablas .nodo-tabla:nth-child(5n+5) { transform: rotate(-0.5deg); }
.nodo-tabla .nombre-tabla {
  display: block;
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.nodo-tabla .detalle-tabla {
  display: block;
  font-size: 0.82rem;
  color: #4a4630;
}
.nodo-tabla.nodo-secreto {
  border: 1px dashed var(--rojo-error);
}

/* ---------- Panel flotante de objetivos ---------- */
.boton-flotante {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 40;
  background: var(--ambar-fuerte);
  color: #201c12;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.panel-flotante {
  position: fixed;
  right: 1.2rem;
  bottom: 4.6rem;
  z-index: 41;
  width: min(320px, calc(100vw - 2.4rem));
  background: var(--antracita-800);
  border: 1px solid var(--ambar-oscuro);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  display: none;
}
.panel-flotante.panel-abierto { display: block; }
.panel-flotante h2 {
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
  color: var(--ambar-fuerte);
}
.panel-flotante ul { margin: 0; padding-left: 1.2rem; }
.panel-flotante li { margin-bottom: 0.4rem; font-size: 0.94rem; }

/* ---------- Pestañas de la portada ---------- */
.pestanas-portada {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 1.6rem;
}
.pestana-boton {
  flex: 1 1 200px;
  background: var(--antracita-700);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  padding: 1rem 1.1rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.pestana-boton .titulo-pestana {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.pestana-boton .detalle-pestana {
  display: block;
  font-size: 0.86rem;
  color: var(--texto-suave);
}
.pestana-boton.activa {
  border-color: var(--ambar-fuerte);
  background: rgba(227, 166, 64, 0.1);
}
.pestana-boton:hover { border-color: var(--cian); }