/* ==========================================================================
   DEvImmQuiz — paleta pastel
   Lavanda #F3EEFB / #E4D9F7  ·  Menta (básico) #A8E6CF / #6FCF9E
   Amarillo pastel (intermedio) #FFE29A / #F5C451
   Lila (avanzado) #D9C2F0 / #A87FDB  ·  Coral (mixto) #FFC9D6 / #FF8FA3
   Texto ciruela #4A3B5C  ·  Superficie #FFFFFF
   ========================================================================== */

:root {
  --lavanda-100: #F6F2FC;
  --lavanda-200: #E9DFF9;
  --lavanda-300: #D9C7F2;

  --menta-200: #BFF0DC;
  --menta-400: #6FCF9E;
  --menta-600: #3FA57A;

  --amarillo-200: #FFEDB8;
  --amarillo-400: #F5C451;
  --amarillo-600: #D99A1F;

  --lila-200: #E4D3F7;
  --lila-400: #B79CE0;
  --lila-600: #8A63C4;

  --coral-200: #FFDCE4;
  --coral-400: #FF9FB2;
  --coral-600: #E85D7A;

  --ciruela-900: #3B2E4D;
  --ciruela-700: #5A4A70;
  --ciruela-500: #8677A0;

  --superficie: #FFFFFF;
  --superficie-suave: #FBF9FE;
  --borde: #EAE1F7;

  --exito: #6FCF9E;
  --error: #FF8FA3;

  --fuente-display: 'Fredoka', system-ui, sans-serif;
  --fuente-codigo: 'JetBrains Mono', 'Fira Code', monospace;

  --radio: 20px;
  --sombra: 0 10px 30px -12px rgba(90, 60, 130, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--fuente-display);
  color: var(--ciruela-900);
  background: linear-gradient(160deg, var(--lavanda-100) 0%, #FDF6FB 45%, var(--lavanda-100) 100%);
  overflow-x: hidden;
  position: relative;
}

/* Blobs de fondo decorativos, quietos (sin animación excesiva) */
.fondo-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.blob.b1 { width: 380px; height: 380px; background: var(--menta-200); top: -120px; left: -100px; }
.blob.b2 { width: 420px; height: 420px; background: var(--coral-200); bottom: -160px; right: -120px; }
.blob.b3 { width: 300px; height: 300px; background: var(--amarillo-200); top: 40%; right: 15%; opacity: 0.35; }

/* ---------- Encabezado ---------- */
.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px clamp(18px, 5vw, 56px);
}
.marca { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 500; }
.marca-logo { height: 44px; width: auto; display: block; }
.marca-texto strong { color: var(--lila-600); font-weight: 700; }
.header-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.contador-banco {
  font-size: 0.85rem;
  color: var(--ciruela-500);
  background: var(--superficie);
  border: 1px solid var(--borde);
  padding: 6px 14px;
  border-radius: 999px;
}

/* ---------- Layout general ---------- */
.contenedor {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 20px 60px;
}

.pantalla { display: none; animation: aparecer 0.35s ease; }
.pantalla.activa { display: block; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; margin: 10px 0 6px; text-align: center; }
.subtitulo { text-align: center; color: var(--ciruela-500); font-size: 1rem; margin: 0 auto 28px; max-width: 480px; line-height: 1.5; }

.tarjeta {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: clamp(20px, 4vw, 34px);
}

/* ---------- Configuración ---------- */
.campo { margin-bottom: 26px; }
.campo label { display: block; font-weight: 500; margin-bottom: 12px; color: var(--ciruela-700); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--fuente-display);
  border: 2px solid var(--borde);
  background: var(--superficie-suave);
  color: var(--ciruela-700);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip.activo.chip-basico { background: var(--menta-200); border-color: var(--menta-400); }
.chip.activo.chip-intermedio { background: var(--amarillo-200); border-color: var(--amarillo-400); }
.chip.activo.chip-avanzado { background: var(--lila-200); border-color: var(--lila-400); }
.chip.activo.chip-todos { background: var(--coral-200); border-color: var(--coral-400); }

input[type="range"] {
  width: 100%;
  accent-color: var(--lila-400);
  height: 6px;
}
.rango-valor { text-align: center; margin-top: 10px; color: var(--ciruela-700); font-weight: 500; }
.rango-valor span { color: var(--lila-600); font-weight: 700; font-size: 1.1rem; }

.boton-primario {
  width: 100%;
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  padding: 15px;
  background: linear-gradient(135deg, var(--lila-400), var(--coral-400));
  color: white;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(138, 99, 196, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.boton-primario:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(138, 99, 196, 0.6); }
.boton-primario:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.boton-secundario {
  font-family: var(--fuente-display);
  font-size: 1rem;
  font-weight: 500;
  border: 2px solid var(--borde);
  border-radius: 14px;
  padding: 13px 20px;
  background: var(--superficie);
  color: var(--ciruela-700);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.boton-secundario:hover:not(:disabled) { border-color: var(--lila-400); transform: translateY(-2px); }
.boton-secundario:disabled { opacity: 0.4; cursor: not-allowed; }

.mensaje-error { color: var(--coral-600); text-align: center; min-height: 20px; margin-top: 14px; font-size: 0.9rem; }

/* ---------- Barra de progreso "serpiente" (elemento distintivo) ---------- */
.barra-progreso-wrap { margin-bottom: 22px; }
.serpiente-progreso {
  display: flex;
  gap: 6px;
  align-items: center;
}
.serpiente-progreso .segmento {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--lavanda-200);
  position: relative;
  overflow: hidden;
}
.serpiente-progreso .segmento.hecho { background: linear-gradient(90deg, var(--menta-400), var(--lila-400)); }
.serpiente-progreso .segmento.actual::after {
  content: "🐍";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
.progreso-texto { text-align: center; margin-top: 10px; color: var(--ciruela-500); font-size: 0.9rem; }

/* ---------- Pregunta ---------- */
.pregunta-meta { display: flex; gap: 10px; margin-bottom: 14px; }
.etiqueta-nivel, .etiqueta-categoria {
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 500;
  text-transform: capitalize;
}
.etiqueta-nivel { background: var(--lila-200); color: var(--lila-600); }
.etiqueta-nivel.n-basico { background: var(--menta-200); color: var(--menta-600); }
.etiqueta-nivel.n-intermedio { background: var(--amarillo-200); color: var(--amarillo-600); }
.etiqueta-nivel.n-avanzado { background: var(--lila-200); color: var(--lila-600); }
.etiqueta-categoria { background: var(--superficie-suave); color: var(--ciruela-500); border: 1px solid var(--borde); }

.enunciado { font-size: 1.2rem; font-weight: 500; line-height: 1.45; margin: 0 0 18px; }

.bloque-codigo {
  background: #2E2740;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.codigo-topbar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: rgba(255,255,255,0.05); }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto-r { background: var(--coral-400); }
.punto-y { background: var(--amarillo-400); }
.punto-g { background: var(--menta-400); }
.codigo-titulo { margin-left: 8px; color: #B7ACD6; font-size: 0.78rem; font-family: var(--fuente-codigo); }
.codigo-contenido {
  margin: 0;
  padding: 16px 18px 20px;
  font-family: var(--fuente-codigo);
  font-size: 0.92rem;
  line-height: 1.6;
  color: #F1EAFF;
  white-space: pre-wrap;
  word-break: break-word;
}

.opciones { display: flex; flex-direction: column; gap: 12px; }
.opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 2px solid var(--borde);
  background: var(--superficie-suave);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--fuente-display);
  font-size: 1rem;
  color: var(--ciruela-900);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.opcion:hover { border-color: var(--lila-400); transform: translateX(2px); }
.opcion .letra {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--lavanda-200);
  color: var(--ciruela-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.85rem;
}
.opcion code { font-family: var(--fuente-codigo); background: var(--lavanda-100); padding: 1px 6px; border-radius: 6px; }
.opcion.seleccionada { border-color: var(--lila-400); background: var(--lila-200); }
.opcion.seleccionada .letra { background: var(--lila-400); color: white; }

.opcion.correcta { border-color: var(--menta-400); background: var(--menta-200); }
.opcion.correcta .letra { background: var(--menta-400); color: white; }
.opcion.incorrecta { border-color: var(--coral-400); background: var(--coral-200); }
.opcion.incorrecta .letra { background: var(--coral-400); color: white; }
.opcion:disabled { cursor: default; }

.nav-quiz { display: flex; gap: 12px; margin-top: 22px; }
.nav-quiz .boton-secundario { flex: 1; }
.nav-quiz .boton-primario { flex: 2; }

/* ---------- Resultados ---------- */
.resultado-resumen { text-align: center; }
.resultado-emoji { font-size: 3rem; margin-bottom: 4px; }
.resultado-porcentaje { font-size: 3rem; font-weight: 700; color: var(--lila-600); margin: 6px 0; }
#resultado-detalle-texto { color: var(--ciruela-500); margin-bottom: 6px; }
#resultado-tiempo { color: var(--ciruela-500); font-size: 0.9rem; margin: 0 0 18px; }

.analisis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
  margin-bottom: 22px;
}
.analisis-bloque {
  background: var(--superficie-suave);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 16px 18px;
}
.analisis-bloque h3 { margin: 0 0 12px; font-size: 0.95rem; color: var(--ciruela-700); text-align: center; }
.desglose { display: flex; flex-direction: column; gap: 10px; }
.desglose-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: 0.85rem;
}
.desglose-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ciruela-700);
  font-weight: 500;
  text-transform: capitalize;
}
.desglose-rotulo .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.desglose-rotulo .dot.n-basico { background: var(--menta-400); }
.desglose-rotulo .dot.n-intermedio { background: var(--amarillo-400); }
.desglose-rotulo .dot.n-avanzado { background: var(--lila-400); }
.desglose-barra { height: 8px; border-radius: 999px; background: var(--lavanda-200); overflow: hidden; }
.desglose-lleno { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--menta-400), var(--lila-400)); }
.desglose-lleno.n-basico { background: var(--menta-400); }
.desglose-lleno.n-intermedio { background: var(--amarillo-400); }
.desglose-lleno.n-avanzado { background: var(--lila-400); }
.desglose-lleno.cat { background: var(--coral-400); }
.desglose-valor { text-align: right; color: var(--ciruela-500); font-weight: 500; }
.desglose-rotulo.cat { text-transform: none; }

.resultado-acciones { display: flex; gap: 12px; }

.lista-revision { margin-top: 22px; display: none; flex-direction: column; gap: 14px; }
.item-revision {
  background: var(--superficie);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--sombra);
  border-left: 6px solid var(--menta-400);
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.item-revision.fallo { border-left-color: var(--coral-400); }
.rev-cuerpo { flex: 1; min-width: 0; }
.rev-codigo { flex: 0 0 300px; max-width: 340px; }
.item-revision .pregunta-rev { font-weight: 500; margin-bottom: 8px; }
.item-revision .linea-rev { font-size: 0.9rem; color: var(--ciruela-700); margin: 4px 0; }
.item-revision .linea-rev.ok { color: var(--menta-600); }
.item-revision .linea-rev.mal { color: var(--coral-600); }
.item-revision .explicacion-rev { font-size: 0.88rem; color: var(--ciruela-500); margin-top: 8px; font-style: italic; }
.bloque-codigo.compacto { margin: 0; box-shadow: none; }
.bloque-codigo.compacto .codigo-contenido { padding: 12px 14px; font-size: 0.8rem; line-height: 1.55; }
.bloque-codigo.compacto .codigo-topbar { padding: 8px 14px; }

.pie {
  text-align: center;
  color: var(--ciruela-500);
  font-size: 0.82rem;
  padding: 30px 20px 40px;
}
.pie code { background: var(--lavanda-200); padding: 2px 8px; border-radius: 6px; font-family: var(--fuente-codigo); }

@media (max-width: 480px) {
  .nav-quiz { flex-direction: column; }
  .nav-quiz .boton-secundario, .nav-quiz .boton-primario { flex: none; }
  .analisis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .item-revision { flex-direction: column; }
  .rev-codigo { flex: none; width: 100%; max-width: none; }
}