/* Estratos — sistema visual de Cimiento (D-05, 05-UI-SPEC.md).
   Mundo visual: cimiento/ladrillos/descenso/sellar grietas. */

:root {
  /* Color (60/30/10, D-05 + UI-SPEC §Color) */
  --color-fondo: #1B2240;            /* indigo-roca — dominante 60% */
  --color-superficie: #2A3358;       /* estratos base */
  --color-superficie-activa: #3A4575; /* estratos elevado — solo el elemento en foco */
  --color-texto: #F0F2F8;            /* tiza */
  --color-ambar: #FFB23E;            /* ámbar-sellado — solo CTA/sellado */
  --color-menta: #5BD6C0;            /* menta-activo — solo activo/:focus-visible */
  --color-error: #E5484D;            /* rojo-grieta */
  --color-por-lograr: #4A5578;       /* gris-por-lograr — solo Pantalla 4 */

  /* Spacing scale (múltiplos de 4) */
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 16px;
  --espacio-lg: 24px;
  --espacio-xl: 32px;
  --espacio-2xl: 48px;
  --espacio-3xl: 64px;

  /* Touch target mínimo (mobile-first, D-04) */
  --touch-min: 44px;

  /* Tipografía (D-05) */
  --fuente-display: "Bricolage Grotesque", "Inter", sans-serif;
  --fuente-cuerpo: "Inter", sans-serif;
  --fuente-mate: "JetBrains Mono", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, .heading, .display {
  font-family: var(--fuente-display);
  font-weight: 600;
  margin: 0 0 var(--espacio-md) 0;
}

.display {
  font-size: 28px;
  line-height: 1.15;
}

.heading {
  font-size: 20px;
  line-height: 1.2;
}

.body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  display: block;
  margin-top: var(--espacio-md);
  margin-bottom: var(--espacio-xs);
}

.mate {
  font-family: var(--fuente-mate);
}

.pantalla {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-lg);
}

.tarjeta {
  background: var(--color-superficie);
  border-radius: var(--espacio-sm);
  padding: var(--espacio-xl);
  width: 100%;
  max-width: 420px;
}

.tarjeta-activa {
  background: var(--color-superficie-activa);
}

.campo {
  width: 100%;
  min-height: var(--touch-min);
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-por-lograr);
  border-radius: var(--espacio-xs);
  padding: var(--espacio-sm) var(--espacio-md);
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-min);
  margin-top: var(--espacio-lg);
  background: var(--color-ambar);
  color: var(--color-fondo);
  border: none;
  border-radius: var(--espacio-xs);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.cta:disabled {
  background: var(--color-por-lograr);
  color: var(--color-texto);
  cursor: not-allowed;
  opacity: 0.6;
}

.mensaje-error {
  color: var(--color-error);
  font-size: 14px;
  margin: var(--espacio-sm) 0;
}

/* --- Pantalla 2: ciclo (ejercicio -> razonamiento -> corrección -> mini-clase inline) --- */

.tarjeta-ciclo {
  max-width: 560px;
  text-align: left;
}

.enunciado {
  margin: 0 0 var(--espacio-lg) 0;
  font-size: 18px;
}

.alternativas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-lg);
}

.alternativa {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  min-height: var(--touch-min);
  width: 100%;
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-por-lograr);
  border-radius: var(--espacio-xs);
  padding: var(--espacio-sm) var(--espacio-md);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.alternativa-letra {
  font-weight: 600;
  min-width: 1.5em;
}

.alternativa-seleccionada {
  border-color: var(--color-menta);
  background: var(--color-superficie-activa);
}

.zona-espera {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
  margin: var(--espacio-lg) 0;
}

.ladrillo-espera {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--color-menta);
  flex-shrink: 0;
}

.ladrillo-espera-pulso {
  animation: pulso-ladrillo 2s ease-in-out infinite;
}

@keyframes pulso-ladrillo {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* prefers-reduced-motion (D-06 no negociable): punto menta estático, sin animación,
   nunca "reducir intensidad" — el bloque genérico de abajo ya anula la animación-duration,
   esta clase además fuerza forma estática (punto) y opacidad fija. */
.ladrillo-espera-estatico {
  border-radius: 50%;
  opacity: 1;
  animation: none;
}

.zona-correccion {
  margin: var(--espacio-lg) 0;
}

.correccion {
  padding: var(--espacio-md);
  border-radius: var(--espacio-xs);
  background: var(--color-superficie);
}

.correccion-error {
  border-left: 4px solid var(--color-error);
}

.correccion-ok {
  border-left: 4px solid var(--color-ambar);
}

.mini-clase {
  margin-top: var(--espacio-lg);
}

.ejemplo {
  background: var(--color-fondo);
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: var(--espacio-xs);
}

.zona-siguiente {
  margin-top: var(--espacio-xl);
}

/* --- Pantalla 3: "En qué quedamos" (tarjeta breve + Seguir) --- */

.tarjeta-remediacion,
.tarjeta-remediacion-vacia {
  max-width: 420px;
  text-align: left;
}

.remediacion-componente {
  font-size: 14px;
  color: var(--color-menta);
  margin: 0 0 var(--espacio-sm) 0;
}

/* --- Pantalla 4: torre híbrida (espina + escalera + % M1, D-08) --- */

.tarjeta-torre {
  max-width: 560px;
  text-align: left;
}

.torre-resumen {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-xl);
}

.torre-porcentaje {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-ambar);
}

.torre-porcentaje-label {
  margin: 0;
}

.espina {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-xl);
}

.ladrillo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--espacio-sm) var(--espacio-md);
  border: none;
  border-radius: var(--espacio-xs);
  font-size: 13px;
  cursor: pointer;
}

.ladrillo-ambar {
  background: var(--color-ambar);
  color: var(--color-fondo);
  box-shadow: 0 0 8px var(--color-ambar);
}

.ladrillo-menta {
  background: var(--color-menta);
  color: var(--color-fondo);
  animation: pulso-ladrillo 2.4s ease-in-out infinite;
}

.ladrillo-rojo {
  background: var(--color-error);
  color: var(--color-texto);
}

.ladrillo-gris {
  background: var(--color-por-lograr);
  color: var(--color-texto);
}

.escalera {
  list-style: none;
  margin: 0 0 var(--espacio-lg) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
}

.escalera-paso {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: var(--espacio-xs);
}

.torre-delta {
  margin: var(--espacio-lg) 0;
  padding: var(--espacio-md);
  border-radius: var(--espacio-xs);
}

.torre-vacio {
  margin-bottom: var(--espacio-lg);
}

/* Foco de teclado siempre visible (D-06, no negociable) */
:focus-visible {
  outline: 2px solid var(--color-menta);
  outline-offset: 2px;
}

/* prefers-reduced-motion: anula toda transición/animación (D-06, no negociable) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Chips de razonamiento (1 toque en teléfono; texto libre pasa a opcional).
   Mismo lenguaje visual que .alternativa: fondo roca, borde por-lograr,
   selección = borde menta + superficie activa. */
.chips-razonamiento {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-sm);
}

.chip {
  min-height: var(--touch-min);
  background: var(--color-fondo);
  color: var(--color-texto);
  border: 1px solid var(--color-por-lograr);
  border-radius: 999px;
  padding: var(--espacio-xs) var(--espacio-md);
  font-size: 15px;
  cursor: pointer;
}

.chip-activo {
  border-color: var(--color-menta);
  background: var(--color-superficie-activa);
}