/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — la fuente de verdad de todo valor de diseño.
   Los valores y el porqué de cada decisión están en docs/FRONTEND.md §2.
   Regla: ningún color, medida, duración o tamaño se escribe suelto en un
   componente. Si falta uno, se agrega acá con nombre semántico primero.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Marca ── */
  --brand-900: #0E3157;
  --brand-700: #133974;
  --brand-600: #1B4F8A;   /* azul Viale — la identidad, no se toca */
  --brand-300: #7FA5D0;
  --brand-100: #E3ECF7;
  --brand-50:  #F2F7FC;

  /* ── Neutros (tintados en azul, no grises puros: es lo que deja separar
        superficies sin sombras) ── */
  --ink-900:   #131A2B;
  --ink-700:   #3B4560;
  --ink-500:   #626C8A;
  --ink-300:   #98A1BC;
  --line-200:  #D7DDEA;
  --line-100:  #E6EAF2;
  --surface:   #FFFFFF;
  --canvas:    #EDF1F7;
  --canvas-soft: #F5F8FC;

  /* ── Semánticos: cada estado es un par trazo + fondo. No se inventa un color
        nuevo para un estado nuevo, se reusa el par que corresponda. ── */
  --urgente:    #C93A3A;  --urgente-bg: #FBEBEB;
  --evento:     #C07A12;  --evento-bg:  #FCF3E3;
  --logro:      #1B8F5A;  --logro-bg:   #E6F5ED;
  --info:       var(--brand-600); --info-bg: var(--brand-100);
  --neutro:     var(--ink-300);   --neutro-bg: var(--line-100);

  /* ── Tipografía. Cero webfonts a propósito (red corporativa + celulares de
        tienda): la personalidad sale del contraste de peso y escala. ── */
  --font: 'Segoe UI', system-ui, -apple-system, 'Roboto', 'Helvetica Neue', sans-serif;
  --fs-eyebrow: 0.69rem;
  --fs-xs:  0.75rem;
  --fs-sm:  0.8125rem;
  --fs-md:  0.875rem;
  --fs-lg:  1rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --lh-tight: 1.15;
  --lh-base:  1.55;
  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.02em;

  /* ── Espaciado: escala de 4px multiplicada por la densidad del usuario.
        Esto es lo que hace REAL la preferencia "Densidad de información". ── */
  --densidad: 1;
  --sp-1: calc(4px  * var(--densidad));
  --sp-2: calc(8px  * var(--densidad));
  --sp-3: calc(12px * var(--densidad));
  --sp-4: calc(16px * var(--densidad));
  --sp-5: calc(20px * var(--densidad));
  --sp-6: calc(24px * var(--densidad));
  --sp-7: calc(32px * var(--densidad));
  --sp-8: calc(48px * var(--densidad));

  /* ── Forma ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ── Elevación: solo para lo que de verdad flota sobre el contenido.
        No existe una sombra de uso general, y es a propósito. ── */
  --elev-1: 0 4px 16px rgba(19, 26, 43, .10);
  --elev-2: 0 12px 40px rgba(19, 26, 43, .18);

  /* ── Movimiento ── */
  --dur-1: 130ms;   /* micro-interacción */
  --dur-2: 220ms;   /* componente */
  --dur-3: 340ms;   /* entrada de página */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.28, .64, 1);

  /* ── Layout ── */
  --sidebar-w: 248px;
  --sidebar-w-colapsado: 76px;
  --topbar-h: 60px;
  --content-max: 1280px;

  --focus-ring: 0 0 0 3px rgba(27, 79, 138, .30);
}

/* Densidad: la preferencia guardada en /config/preferencias se aplica como
   atributo sobre #app y reescala TODO el espaciado de una sola vez, porque cada
   --sp-* es un calc() sobre --densidad. Ver modulos/config.js. */
#app[data-densidad="compacta"] { --densidad: .82; }
#app[data-densidad="amplia"]   { --densidad: 1.18; }

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  background: var(--canvas);
  color: var(--ink-900);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Foco de teclado consistente en TODO elemento interactivo — no depende de que
   cada componente lo redefina. :focus-visible (no :focus a secas) para no
   mostrar el anillo en un clic de mouse, solo en navegación real por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Visible solo para lectores de pantalla — oculta visualmente sin display:none
   (que también la ocultaría de tecnología asistiva). */
.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;
}

/* Saltar al contenido (WCAG 2.4.1): primer elemento enfocable de la página, hay
   ~12 ítems de navegación antes del contenido real. Solo aparece al enfocarlo. */
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 999;
  transform: translateY(-200%);
  background: var(--brand-600); color: #fff;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 600; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-200); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Movimiento reducido: se respeta el ajuste del sistema operativo. Va al final
   de este archivo para ganarle por orden a cualquier animación declarada luego. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}