/* ============================================================
   CURIOSITY KAIROS
   CURIOSITY LECTURA - ESTILOS V18.1
   ------------------------------------------------------------
   Interfaz clara, lectura ergonómica y compatibilidad
   con Motor Ocular V18.1
   ============================================================ */


/* ============================================================
   1. VARIABLES INSTITUCIONALES
   ============================================================ */

:root {

  --ck-fondo: #f8fafc;

  --ck-blanco: #ffffff;

  --ck-texto: #1e293b;

  --ck-texto-fuerte: #0f172a;

  --ck-texto-suave: #64748b;

  --ck-borde: #e2e8f0;

  --ck-borde-input: #cbd5e1;

  --ck-purple: #7c3aed;

  --ck-purple-soft: rgba(124, 58, 237, 0.15);

  --ck-cyan: #00e5ff;

  --ck-cyan-soft: rgba(0, 229, 255, 0.18);

  --ck-emerald: #10b981;

  --ck-amber: #f59e0b;

  --ck-error: #ef4444;
}


/* ============================================================
   2. DOCUMENTO GENERAL
   ============================================================ */

html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;
}


body {

  margin: 0;

  background-color: var(--ck-fondo);

  color: var(--ck-texto);

  min-height: 100vh;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ============================================================
   3. TARJETAS Y MÓDULOS
   ============================================================ */

.tarjeta-curiosity {

  background-color: var(--ck-blanco);

  border: 1px solid var(--ck-borde);

  box-shadow:
    0 10px 25px -5px rgba(15, 23, 42, 0.05),
    0 8px 10px -6px rgba(15, 23, 42, 0.03);
}


/* ============================================================
   4. INPUTS
   ============================================================ */

.input-curiosity {

  background-color: var(--ck-fondo);

  border: 1px solid var(--ck-borde-input);

  color: var(--ck-texto-fuerte);

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}


.input-curiosity:hover {

  border-color: #94a3b8;
}


.input-curiosity:focus {

  background-color: var(--ck-blanco);

  border-color: var(--ck-purple);

  box-shadow:
    0 0 0 3px var(--ck-purple-soft);

  outline: none;
}


/* ============================================================
   5. PANTALLA DE LECTURA
   ============================================================ */

/*
 * Esta clase debe aplicarse al:
 *
 * <article id="lectura-cuerpo" class="texto-lectura">
 *
 * El objetivo es mantener una geometría estable durante
 * toda la sesión de eye tracking.
 */

.texto-lectura {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.22rem;

  line-height: 1.9;

  letter-spacing: 0.002em;

  color: var(--ck-texto);

  user-select: none;

  -webkit-user-select: none;

  text-rendering: optimizeLegibility;
}


/*
 * Separación vertical estable entre párrafos.
 */

.texto-lectura p {

  margin-top: 0;

  margin-bottom: 1rem;
}


/*
 * Las AOI de lectura NO deben moverse,
 * escalarse ni transformarse durante el registro.
 *
 * camara.js V18.1 y motor-lectura.js V18.1
 * usan estos rectángulos DOM como zonas de interés.
 */

#parrafo1,
#parrafo2,
#parrafo3,
#p-1,
#p-2,
#p-3 {

  transform: none;

  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}


/* ============================================================
   6. ESCENARIO DE CALIBRACIÓN
   ============================================================ */

#escenario-puntos {

  position: relative;

  isolation: isolate;
}


/*
 * La posición de la burbuja es controlada
 * matemáticamente por camara.js V18.1.
 *
 * No modificar transform mediante animaciones.
 */

#burbuja-objetivo {

  z-index: 20;

  pointer-events: none;

  will-change:
    left,
    top;
}


/*
 * El núcleo sí puede animarse.
 *
 * Como es un elemento hijo de la burbuja,
 * su scale no altera las coordenadas matemáticas
 * del punto de calibración.
 */

#nucleo-burbuja {

  position: relative;

  border:
    2px solid
    rgba(255, 255, 255, 0.75);

  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}


/* ============================================================
   7. PULSO DE CALIBRACIÓN
   ============================================================ */

@keyframes pulso-calibracion {

  0%,
  100% {

    transform: scale(0.92);

    opacity: 0.85;
  }

  50% {

    transform: scale(1.08);

    opacity: 1;
  }
}


#nucleo-burbuja {

  animation:
    pulso-calibracion
    1s
    ease-in-out
    infinite;
}


/* ============================================================
   8. ANILLO DE PROGRESO
   ============================================================ */

#anillo-progreso {

  transition:
    stroke-dashoffset
    80ms
    linear;
}


/* ============================================================
   9. BARRA DE PROGRESO TOTAL
   ============================================================ */

#barra-progreso-total {

  transition:
    width
    180ms
    linear;
}


/* ============================================================
   10. ALERTA VISUAL
   ============================================================ */

/*
 * IMPORTANTE:
 *
 * Esta animación NO modifica transform.
 *
 * Así no interfiere con:
 *
 * transform: translate(-50%, -50%)
 *
 * que utiliza la burbuja para quedar centrada
 * exactamente sobre la coordenada de calibración.
 */

@keyframes alerta-visual {

  0%,
  100% {

    box-shadow:
      0 0 0 0
      rgba(239, 68, 68, 0.15);
  }

  50% {

    box-shadow:
      0 0 0 8px
      rgba(239, 68, 68, 0.20);
  }
}


.vibrando {

  animation:
    alerta-visual
    0.55s
    ease-in-out
    infinite;
}


/*
 * El supuesto retraso de 4 segundos
 * NO debe programarse en CSS.
 *
 * JavaScript debe decidir cuándo agregar
 * o eliminar la clase .vibrando.
 */


/* ============================================================
   11. SENSOR ACTIVO
   ============================================================ */

.sensor-activo {

  position: relative;
}


.sensor-activo::before {

  content: "";

  display: inline-block;

  width: 0.5rem;

  height: 0.5rem;

  margin-right: 0.35rem;

  border-radius: 999px;

  background-color:
    var(--ck-emerald);

  box-shadow:
    0 0 0 3px
    rgba(16, 185, 129, 0.12);
}


/* ============================================================
   12. ESTADOS DE CALIBRACIÓN
   ============================================================ */

.calibracion-entrenamiento {

  color: #38bdf8;
}


.calibracion-validacion {

  color: #f97316;
}


.calibracion-correcta {

  color: var(--ck-emerald);
}


.calibracion-advertencia {

  color: var(--ck-amber);
}


.calibracion-error {

  color: var(--ck-error);
}


/* ============================================================
   13. PREVIEW DE CÁMARA
   ============================================================ */

#borde-ovalo-preview {

  position: relative;

  isolation: isolate;
}


#video-preview-cara {

  object-fit: cover;
}


#canvas-preview-face {

  pointer-events: none;

  object-fit: cover;
}


/* ============================================================
   14. ESTADO DE ENCUADRE
   ============================================================ */

#badge-estado-rostro {

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}


/* ============================================================
   15. BOTÓN DE CALIBRACIÓN
   ============================================================ */

#btn-iniciar-calibracion-manual {

  transition:
    background-color 180ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}


#btn-iniciar-calibracion-manual:not(:disabled):active {

  transform: scale(0.99);
}


/* ============================================================
   16. PANTALLA DE LECTURA
   ============================================================ */

#pantalla-lectura {

  background-color: #ffffff;
}


/*
 * El contenedor principal de lectura no debe cambiar
 * de tamaño mientras se registra eye tracking.
 */

#contenedor-texto-lectura {

  position: relative;
}


/*
 * El título queda fuera de las AOI de los párrafos.
 */

#lectura-titulo {

  color: var(--ck-texto-fuerte);
}


/* ============================================================
   17. ZONA DE SALIDA DE LECTURA
   ============================================================ */

#zona-salida-lectura {

  position: relative;

  z-index: 5;
}


/*
 * El botón final se mantiene claramente separado
 * de las AOI del texto.
 */

#btn-forzar-fin-lectura {

  white-space: nowrap;
}


/* ============================================================
   18. ACCESIBILIDAD DE FOCO
   ============================================================ */

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {

  outline:
    3px solid
    rgba(124, 58, 237, 0.35);

  outline-offset:
    2px;
}


/* ============================================================
   19. REDUCCIÓN DE MOVIMIENTO
   ============================================================ */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }
}


/* ============================================================
   20. RESPONSIVE - TABLET
   ============================================================ */

@media (
  max-width: 900px
) {

  .texto-lectura {

    font-size: 1.15rem;

    line-height: 1.85;
  }
}


/* ============================================================
   21. RESPONSIVE - MÓVIL
   ============================================================ */

@media (
  max-width: 768px
) {

  .texto-lectura {

    font-size: 1.08rem;

    line-height: 1.8;
  }


  #zona-salida-lectura {

    gap: 0.75rem;
  }


  #btn-forzar-fin-lectura {

    width: 100%;
  }
}


/* ============================================================
   22. PANTALLAS PEQUEÑAS
   ============================================================ */

@media (
  max-width: 480px
) {

  .texto-lectura {

    font-size: 1rem;

    line-height: 1.72;
  }


  #borde-ovalo-preview {

    max-width: 210px;

    max-height: 210px;
  }
}


/* ============================================================
   23. IMPRESIÓN
   ============================================================ */

@media print {

  body {

    background-color:
      #ffffff !important;

    color:
      #000000 !important;
  }


  .tarjeta-curiosity {

    box-shadow:
      none !important;

    border:
      1px solid
      #d1d5db !important;
  }


  .no-print {

    display:
      none !important;
  }


  #pantalla-diagnostico {

    box-shadow:
      none !important;
  }
}