/* ═══════════════════════════════════════════════════════════════
   NEXTWORK · TOKENS DE DISEÑO (app)
   Fuente única de verdad de colores, radio y estados para las páginas
   de la APLICACIÓN (dashboard, buscar, perfil, mensajes, crear-perfil,
   login, admin, privacidad, reset, que-es).

   Antes cada una repetía este mismo bloque :root en su <style> inline
   (9 copias, y ya con drift: privacidad.html se había quedado sin
   --glow2 ni --r). Cambiar un color obligaba a editar 9 archivos y era
   cuestión de tiempo que divergieran. Ahora se cambia acá y punto.

   OJO — DIVERGENCIA CONOCIDA: la LANDING (index.html) usa styles.css,
   que tiene su PROPIO sistema con otros valores y otra convención de
   nombres (--ink:#16140f, --ink-2 con guion). No se toca desde acá:
   reconciliar landing + app es un refactor aparte, con revisión visual,
   porque cambiaría colores del landing.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Tinta (texto) ──
     ink  = titulares y texto principal      · 17.3:1 sobre --cream (AAA)
     ink2 = texto secundario                 · 10.0:1 sobre --cream (AAA)
     ink3 = metadatos, hints                 · 3.96:1 sobre --cream (NO
            cumple AA para texto normal — usar solo en ≥24px o sobre
            blanco, o preferir #6e6c64 que sí pasa. Ver nota abajo). */
  --ink: #0f0e0c;
  --ink2: #3d3b36;
  --ink3: #7a7870;

  /* ── Crema (fondos claros) ── */
  --cream: #f5f2eb;   /* fondo base de la marca */
  --cream2: #ede9e0;  /* fondo alterno / superficies hundidas */
  --cream3: #dedad1;  /* bordes, líneas divisorias */

  /* ── Verde de marca (acento) ── */
  --accent: #1a3a2a;   /* verde bosque, el más oscuro (fondos, CTA) */
  --accent2: #2d6b4a;  /* verde medio (acentos, links)     · 5.67:1 sobre crema */
  --accent3: #4d9e72;  /* verde claro (detalles, hovers) */

  /* ── Mint (sobre verde) ── */
  --glow: #c8f0d8;    /* texto/detalle sobre --accent · 10.05:1 (AAA) */
  --glow2: #e8f7ef;   /* mint muy claro (fondos suaves) */

  /* ── Superficie y forma ── */
  --surface: #ffffff; /* tarjetas, inputs */
  --r: 14px;          /* radio estándar de tarjeta */

  /* ── Estados ── */
  --err: #c0392b;     /* texto/borde de error (validación de formularios) */
  --err-bg: #fef9f9;  /* fondo de mensaje de error */
}

/* ── NOTA DE ACCESIBILIDAD (para vídeo/compresión y texto chico) ──
   --ink3 (#7a7870) da 3.96:1 sobre crema: por debajo del mínimo AA
   (4.5:1) para texto normal. Donde importe el contraste real (labels,
   texto pequeño), usar #6e6c64 (4.71:1). No se cambia --ink3 acá para
   no alterar el look de todo el producto de golpe; es una mejora a
   aplicar por superficie. */

/* ── prefers-reduced-motion (WCAG 2.3.3 / 2.2.2) ──
   Una sola regla acá cubre TODAS las páginas de la app (todas linkean
   tokens.css). Quien pide menos movimiento en su sistema recibe las
   animaciones/transiciones casi instantáneas (llegan al estado final sin
   moverse) y el scroll deja de ser suave. El landing (styles.css) ya lo
   respeta por su cuenta. */
@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;
  }
}

/* ── HELPERS DE ACCESIBILIDAD (§42) ──
   .sr-only: visible solo para lectores de pantalla (WCAG 1.3.1/2.4.6:
   permite un H1 por página sin cambiar el diseño). .skip-link: enlace
   "saltar al contenido" oculto hasta recibir foco (WCAG 2.4.1). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--accent); color: var(--glow);
  padding: 10px 18px; border-radius: 10px; font-weight: 600;
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--glow); outline-offset: 2px; }