/* ==========================================================================
   tokens.css — ÚNICO lugar con valores de diseño (colores, tipografía, espacios,
   radios, sombras, capas, movimiento). Las demás hojas SOLO usan var(--token).
   Cache-busting manual: al editar este archivo, subir su ?v=N en TODAS sus
   referencias (HTML y CSS). Contraste verificado por tests/panel/test_panel_real.py.
   ========================================================================== */

:root {
  /* ---- Paleta: rosa bebé de marca (del tema de la app anterior, APEX) ---- */
  --blanco: #FFFFFF;
  --rosa-bebe: #FFC0CB;   /* marca como ACENTO: avatares, ilustraciones, detalles. NUNCA texto blanco encima */
  --rosa-50: #FFF5F8;     /* superficies rosadas suaves (hover, notas, tarjetas inactivas) */
  --neutro-50: #FBF8F9;   /* fondo de página: blanco cálido con un toque de rosa (re-marca C-18) */
  --neutro-200: #F0E1E6;  /* bordes finos decorativos (barra lateral, barra superior) */
  --rosa-100: #FDE4EB;    /* superficies secundarias, ítem activo, skeleton */
  --rosa-200: #FFD1DC;    /* hover suave */
  --rosa-300: #F8A4C8;    /* decoración, labio de botón secundario (solo no-texto) */
  --rosa-600: #D81B60;    /* acción: botón primario (blanco encima 4.95:1) */
  --rosa-700: #AD1457;    /* enlaces, hover/presionado del primario */
  --rosa-800: #8A1C47;    /* "labio" del botón primario */

  /* ---- Crema del logo (C-28). La dueña: "el cremita era solo para logos y algunos botones
     pero que no sea el principal". SOLO para el botón crema (.boton--crema: cancelar, cerrar,
     volver, descargar Excel); el logo lo trae en sus propios archivos. Nunca fondo de página,
     de tarjeta ni de banda (hay un test). ---- */
  --crema-200: #E8DDD1;   /* cara del botón crema (su muestra) */
  --crema-300: #DCCDBD;   /* cara del botón crema en hover */
  --crema-400: #C9B8A4;   /* borde y labio del botón crema (solo no-texto) */

  /* ---- Tintas ---- */
  --tinta-marca: #6E2438; /* títulos, íconos, anillo de foco */
  --tinta: #3A1F2B;       /* texto de cuerpo */
  --tinta-suave: #8A4A5E; /* texto secundario SOLO sobre blanco / rosa-50 */
  --borde-control: #A06A7E; /* borde de inputs (>= 3:1) */

  /* ---- Semánticos: siempre acompañados de ícono o texto ---- */
  --exito: #1E7F4F;
  --exito-fondo: #EEF8F2;
  --alerta: #8A5A00;
  --alerta-fondo: #FFF3DC;
  --peligro: #B42318;
  --peligro-fondo: #FDECEA;
  --peligro-labio: #8E1B12;
  --info: #1D5FB4;
  --info-fondo: #E7F0FB;

  /* ---- Roles semánticos (listos para un modo oscuro futuro, U11) ---- */
  --fondo: var(--neutro-50);
  --nav-fondo: var(--blanco);   /* barra lateral y barra superior: blancas, el rosa es acento */
  --borde-sutil: var(--neutro-200);
  --superficie: var(--blanco);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --titulo: var(--tinta-marca);
  --acento: var(--rosa-600);
  --acento-hover: var(--rosa-700);
  --acento-labio: var(--rosa-800);
  --enlace: var(--rosa-700);
  --foco: var(--tinta-marca);

  /* ---- Urgencia del tablero y categorías de desempeño (C-20, U3): alias de los semánticos
     ya verificados por contraste; siempre con ícono y texto, nunca solo color ---- */
  --urgencia-hoy: var(--alerta);
  --urgencia-hoy-fondo: var(--alerta-fondo);
  --urgencia-semana: var(--rosa-700);
  --urgencia-semana-fondo: var(--rosa-100);
  --urgencia-vencido: var(--peligro);
  --urgencia-vencido-fondo: var(--peligro-fondo);
  --categoria-excelente: var(--exito);
  --categoria-bueno: var(--info);
  --categoria-irregular: var(--alerta);
  --categoria-vencido: var(--peligro);
  --categoria-en-curso: var(--rosa-300);

  /* ---- Tipografía (Nunito variable auto-hospedada, ver base.css) ---- */
  --fuente: "Nunito Variable", ui-rounded, "Segoe UI", system-ui, sans-serif;
  /* Ancho fijo solo para datos que se dictan carácter por carácter (contraseña temporal). */
  --fuente-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-base: 1rem;
  --texto-md: 1.125rem;
  --texto-lg: 1.375rem;
  --texto-xl: 1.75rem;
  --texto-2xl: 2.25rem;
  --peso-normal: 500;
  --peso-fuerte: 700;
  --peso-extra: 800;
  --peso-negro: 900;

  /* ---- Espaciado (base 4 px) ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.25rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-10: 2.5rem;
  --esp-12: 3rem;
  --esp-16: 4rem;

  /* ---- Radios ---- */
  --radio-sm: 0.625rem;
  --radio-md: 0.875rem;
  --radio-lg: 1rem;
  --radio-pildora: 999px;

  /* ---- Sombras (con desplazamiento y desenfoque, tono vino) ---- */
  --sombra-tarjeta: 0 1px 2px rgba(110, 36, 56, 0.06), 0 8px 24px rgba(110, 36, 56, 0.1);
  --sombra-flotante: 0 4px 8px rgba(110, 36, 56, 0.08), 0 16px 40px rgba(110, 36, 56, 0.18);
  --velo: rgba(58, 31, 43, 0.45);
  --labio: 0.25rem; /* alto del "labio" de los botones */

  /* ---- Capas ---- */
  --z-barra: 20;
  --z-velo: 25;
  --z-nav: 30;
  --z-menu: 35;
  --z-toast: 50;
  --z-saltar: 100;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-presion: 100ms;
  --dur-rapida: 150ms;
  --dur-base: 200ms;
  --dur-menu: 250ms;
  --dur-lenta: 280ms;
  --dur-latido: 240ms;   /* latido de la fila al confirmar un marcado */
  --dur-conteo: 450ms;   /* conteo de los contadores (lo usa ui/contador.js; única animación por JS) */
  --dur-giro: 700ms;     /* infinitas: solo bajo prefers-reduced-motion: no-preference */
  --dur-brillo: 1400ms;
  --dur-flotar: 7s;
  --escalon: 30ms;       /* paso de una entrada escalonada (máx. 4 pasos) */
  --escalon-2: 60ms;
  --escalon-3: 90ms;
  --retraso-1: 20ms;     /* destellos de la celebración */
  --retraso-2: 30ms;
  --retraso-3: 40ms;
  --retraso-4: 50ms;
  --retraso-5: 60ms;

  /* ---- Medidas de layout ---- */
  --ancho-nav: 17rem;
  --ancho-contenido: 72rem;
  --alto-control: 3rem;
  --tactil: 2.75rem;
}