html, body { font-family: 'Inter', system-ui, sans-serif; }
        [x-cloak] { display: none !important; }
        .font-display { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
        .spinner { animation: spin 0.8s linear infinite; }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .toast-enter { animation: slideIn 0.25s ease-out; }
        @keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .gradient-brand {
            background:
                radial-gradient(ellipse at top right, rgba(255,255,255,0.08) 0%, transparent 60%),
                linear-gradient(135deg, #0d2a47 0%, #164d80 45%, #1e6cb5 100%);
        }
        .grain { position: relative; }
        .grain::after {
            content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
            background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
            background-size: 24px 24px;
        }
        .gradient-subtle {
            background: linear-gradient(180deg, #f8fafc 0%, #eff7fd 100%);
        }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .nav-link { transition: all 0.15s ease; }
        .nav-link:hover { transform: translateX(2px); }
    
/* ==== 642/F0: tokens de diseño (base para UI-GUIDELINES; aún sin re-estilizar) ==== */
:root {
  --oaj-azul: #1F3D7A;        /* acento ASV / theme_color existente */
  --oaj-azul-claro: #3B82F6;  /* blue-500 Tailwind (activo actual) */
  --oaj-verde: #16A34A;       /* devengado / éxito (green-600) */
  --oaj-ambar: #D97706;       /* en proceso (amber-600) */
  --oaj-rojo: #DC2626;        /* error / destructivo (red-600) */
  --oaj-texto: #0F172A;       /* slate-900 */
  --oaj-texto-suave: #475569; /* slate-600 — mínimo para texto informativo (AA) */
  --oaj-borde: #E2E8F0;       /* slate-200 */
  --oaj-fondo: #F8FAFC;       /* slate-50 */
  --oaj-radio: 0.75rem;
  --oaj-sombra: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
  --oaj-focus: 0 0 0 2px #fff, 0 0 0 4px var(--oaj-azul-claro);
}
@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;
  }
}