/* El Aleph — sistema visual (propiedad de disenador). */

:root {
  /* Base */
  --bg: #eef2f5;
  --surface: #ffffff;
  --ink: #1f2a33;
  --ink-soft: #5c6b76;
  --muted: #5f6c78;
  --line: #dde4e9;
  --line-strong: #b9c2cb;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(31, 42, 51, .08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Accent azul */
  --accent: #155e8d;
  --accent-hi: #1c74ab;
  --accent-dark: #0f4568;
  --accent-ink: #ffffff;
  --accent-soft: #e4eef5;
  --focus: 0 0 0 3px rgba(21, 94, 141, .35);
  /* Marino opaco: superficies contextuales y selección de instrumentos */
  --navy-muted: #435a6c;
  --navy-muted-dark: #354b5c;
  --navy-pastel: #e5eaee;
  --navy-pastel-hover: #dce4e9;
  --navy-muted-line: #c7d2d9;
  /* Semánticos */
  --danger: #b3403a;
  --warn: #806000;
  --ok: #2f855a;
  /* Shell */
  --side-bg: #13202c;
  --side-bg-2: #0d1722;
  --side-ink: #a9b7c4;
  --paper: #f8f9f6;
  --rule: rgba(21, 94, 141, .08);
  --rule-margin: rgba(21, 94, 141, .18);
}

/* Oculta visualmente sin ocultar de lectores de pantalla — para encabezados de
   nivel obligatorio (h1/h2) que la jerarquía semántica exige pero que
   duplicarían un título visual ya presente en otro elemento (breadcrumb, etc). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100vh; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Desactiva las animaciones puramente decorativas (diálogos, modales, overlay/
   panel de feedback de RMET, barra de tiempo de la pantalla de carga manual de
   Stroop) para quien prefiere movimiento reducido. No incluye el pulso del
   estímulo de Go/No-Go (style/tests/go-no-go.css): ahí la animación ES la
   señal del estímulo, no decoración — reducirla cambiaría la tarea en sí. */
@media (prefers-reduced-motion: reduce) {
  .confirm-dialog,
  .confirm-dialog--closing,
  .confirm-dialog::backdrop,
  .modal__box,
  .rmet-feedback-overlay,
  .rmet-feedback-panel,
  .stroop-golden__progress span {
    animation: none !important;
  }
}