/* ============================================
DIGER · Design Tokens
Sistema de tokens semánticos del rediseño 2026.
Basado en el Manual de Marca DIGER (mayo 2026).
Este archivo declara las variables CSS oficiales.
Se carga ANTES que styles.css en ambos layouts
(app.blade.php y admin.blade.php).
Convivencia con tokens legados:
- Las variables del manual (--brand-*) son las
oficiales y deben usarse en todo código nuevo.
- Las variables históricas (--azul-primario, --dorado,
etc.) se mantienen en styles.css y migrarán
progresivamente a aliases de las nuevas.
- Cero cambio visual al solo introducir este archivo.
Versión: 1.0 · 15-may-2026
============================================ */
:root {
/* ============================================
1. MARCA · Manual DIGER (mayo 2026)
============================================ */
/* Azul marino — identidad principal, header, firma institucional */
--brand-primary: #02395e;
--brand-primary-hover: #051f33;
--brand-primary-active: #03283e;
--brand-primary-soft: rgba(2, 57, 94, 0.06);
/* Azul medio / corporativo — botones primarios, acentos analíticos */
--brand-secondary: #1a65a3;
--brand-secondary-hover: #155082;
--brand-secondary-active: #103f66;
--brand-secondary-soft: rgba(26, 101, 163, 0.08);
/* Celeste — highlights, focus rings, separadores frescos */
--brand-accent: #7acbdd;
--brand-accent-hover: #5fb6cb;
--brand-accent-active: #4fa3b9;
--brand-accent-soft: rgba(122, 203, 221, 0.18);
--brand-accent-pale: #c8e4ee;
/* ============================================
2. ACENTO PREMIUM · heredado DIGER (uso minoritario)
============================================ */
/* Dorado institucional — sello presidencial, badges premium, hovers selectos */
--accent-gold: #ad8411;
--accent-gold-hover: #936f0e;
--accent-gold-luminous: #d4a833;
--accent-gold-bright: #c49a2a;
--accent-gold-soft: rgba(173, 132, 17, 0.08);
/* ============================================
3. ESTADOS SEMÁNTICOS
============================================ */
--success: #16a34a;
--success-hover: #128a3d;
--success-soft: #dcfce7;
--success-text: #14532d;
--warning: #d97706;
--warning-hover: #b65f04;
--warning-soft: #fef3c7;
--warning-text: #78350f;
--danger: #dc2626;
--danger-hover: #b91c1c;
--danger-soft: #fee2e2;
--danger-text: #7f1d1d;
--info: var(--brand-accent);
--info-hover: var(--brand-accent-hover);
--info-soft: var(--brand-accent-soft);
--info-text: var(--brand-secondary);
/* ============================================
4. ESCALA NEUTRA · grises (Tailwind-like, coherente con la actual)
============================================ */
--neutral-0: #ffffff;
--neutral-50: #f8fafc;
--neutral-100: #f1f5f9;
--neutral-200: #e2e8f0;
--neutral-300: #cbd5e1;
--neutral-400: #94a3b8;
--neutral-500: #64748b;
--neutral-600: #475569;
--neutral-700: #334155;
--neutral-800: #1e293b;
--neutral-900: #0f172a;
--neutral-950: #030712;
/* ============================================
5. SEMÁNTICOS DE INTERFAZ
============================================ */
/* Superficies (fondos) */
--surface: var(--neutral-0); /* fondo de tarjeta, modal */
--surface-subtle: var(--neutral-50); /* fondo de sección alternada */
--surface-muted: var(--neutral-100); /* fondo de input deshabilitado */
--surface-strong: var(--brand-primary); /* fondo institucional oscuro */
--surface-inverse: var(--neutral-900); /* fondo dark contraste */
/* Texto */
--text-primary: var(--neutral-900);
--text-secondary: var(--neutral-700);
--text-muted: var(--neutral-500);
--text-subtle: var(--neutral-400);
--text-inverse: var(--neutral-0); /* texto sobre fondo oscuro */
--text-brand: var(--brand-primary);
--text-link: var(--brand-secondary);
--text-link-hover: var(--brand-primary);
/* Bordes */
--border: var(--neutral-200);
--border-strong: var(--neutral-300);
--border-subtle: var(--neutral-100);
--border-brand: var(--brand-accent);
--border-focus: var(--brand-accent);
/* Anillos de foco (accesibilidad) */
--ring: var(--brand-accent);
--ring-offset: var(--neutral-0);
--ring-width: 3px;
/* ============================================
6. TIPOGRAFÍA · Poppins (manual de marca)
============================================ */
--font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Monaco, Consolas, monospace;
/* Pesos disponibles (todos cargados desde Google Fonts) */
--weight-regular: 400;
--weight-medium: 500; /* cuerpo según manual */
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800; /* titulares según manual */
/* Escala de tamaños (modular, base 16px) */
--text-xs: 0.75rem; /* 12px - captions, overline */
--text-sm: 0.875rem; /* 14px - small, helper */
--text-base: 1rem; /* 16px - body */
--text-lg: 1.125rem; /* 18px - lead-sm */
--text-xl: 1.25rem; /* 20px - lead, h4 */
--text-2xl: 1.5rem; /* 24px - h3 */
--text-3xl: 1.875rem; /* 30px - h2 sm */
--text-4xl: 2.25rem; /* 36px - h2 */
--text-5xl: 3rem; /* 48px - h1 */
--text-6xl: 3.75rem; /* 60px - hero md */
--text-7xl: 4.5rem; /* 72px - hero lg */
/* Line heights por contexto */
--leading-none: 1;
--leading-tight: 1.15; /* headings */
--leading-snug: 1.35; /* h4-h5 */
--leading-normal: 1.55; /* body */
--leading-relaxed: 1.65; /* cuerpo largo */
--leading-loose: 1.8; /* listas, microcopy */
/* Letter spacing */
--tracking-tighter: -0.04em; /* hero display */
--tracking-tight: -0.02em; /* h1-h2 */
--tracking-normal: 0; /* body */
--tracking-wide: 0.025em; /* small/buttons */
--tracking-wider: 0.05em; /* small caps */
--tracking-widest: 0.15em; /* OVERLINE UPPERCASE */
/* ============================================
7. ESPACIADO · 8pt grid
============================================ */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
--space-40: 10rem; /* 160px */
/* ============================================
8. RADIOS · jerarquía visual coherente
============================================ */
--radius-none: 0;
--radius-sm: 0.375rem; /* 6px - badges, chips */
--radius: 0.625rem; /* 10px - botones, inputs */
--radius-md: 0.875rem; /* 14px - cards pequeñas */
--radius-lg: 1.25rem; /* 20px - cards principales */
--radius-xl: 1.75rem; /* 28px - modals, hero cards */
--radius-2xl: 2.5rem; /* 40px - secciones especiales */
--radius-full: 9999px; /* pills, avatares */
/* ============================================
9. SOMBRAS · tinte marino para coherencia
============================================ */
--shadow-xs: 0 1px 2px rgba(2, 57, 94, 0.04);
--shadow-sm: 0 2px 8px rgba(2, 57, 94, 0.08),
0 1px 3px rgba(2, 57, 94, 0.06);
--shadow: 0 4px 12px rgba(2, 57, 94, 0.08),
0 2px 6px rgba(2, 57, 94, 0.05);
--shadow-md: 0 8px 24px rgba(2, 57, 94, 0.10),
0 4px 8px rgba(2, 57, 94, 0.06);
--shadow-lg: 0 12px 32px rgba(2, 57, 94, 0.10),
0 4px 12px rgba(2, 57, 94, 0.06);
--shadow-xl: 0 20px 48px rgba(2, 57, 94, 0.12),
0 8px 16px rgba(2, 57, 94, 0.08);
--shadow-2xl: 0 32px 64px rgba(2, 57, 94, 0.16),
0 12px 24px rgba(2, 57, 94, 0.10);
/* Sombras con énfasis de marca (CTAs primarios, hover destacado) */
--shadow-brand: 0 8px 32px rgba(26, 101, 163, 0.25),
0 4px 12px rgba(26, 101, 163, 0.15);
--shadow-brand-strong: 0 12px 40px rgba(2, 57, 94, 0.30),
0 6px 16px rgba(26, 101, 163, 0.20);
/* Sombra dorada · solo para acentos premium */
--shadow-gold: 0 8px 32px rgba(173, 132, 17, 0.20),
0 4px 12px rgba(173, 132, 17, 0.15);
/* Sombra para chips inset / focus */
--shadow-inset: inset 0 2px 4px rgba(2, 57, 94, 0.06);
--shadow-focus: 0 0 0 var(--ring-width) var(--brand-accent-soft);
/* ============================================
10. ANIMACIÓN · curvas naturales
============================================ */
/* Curvas (easing functions) */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Duraciones */
--duration-instant: 100ms;
--duration-fast: 150ms;
--duration: 200ms;
--duration-slow: 300ms;
--duration-slower: 400ms;
--duration-slowest: 600ms;
/* Transiciones compuestas (atajos) */
--transition-fast: var(--duration-fast) var(--ease-out);
--transition: var(--duration-slow) var(--ease-out);
--transition-slow: var(--duration-slower) var(--ease-out);
--transition-spring: var(--duration-slow) var(--ease-spring);
/* ============================================
11. Z-INDEX · escala ordenada
============================================ */
--z-base: 0;
--z-raised: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-modal-bg: 40;
--z-modal: 50;
--z-popover: 60;
--z-tooltip: 70;
--z-toast: 80;
--z-spotlight: 90;
--z-loader: 100;
--z-debug: 9999;
/* ============================================
12. BREAKPOINTS · usados como referencia (CSS @media)
============================================
Los media queries en CSS usan estos valores directamente,
no las variables (CSS no soporta variables en @media).
--bp-sm: 480px; móvil estándar
--bp-md: 768px; tablet
--bp-lg: 980px; tablet horizontal / laptop pequeño
--bp-xl: 1280px; desktop
--bp-2xl: 1536px; wide
--bp-3xl: 1920px; ultra-wide
============================================ */
/* ============================================
13. LAYOUT · containers y anchos máximos
============================================ */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1440px;
--container-prose: 65ch; /* texto largo legible */
--container-form: 520px; /* formularios */
/* Padding lateral por defecto (ajusta con breakpoint) */
--container-padding: 1rem;
--container-padding-md: 1.5rem;
--container-padding-lg: 2rem;
/* ============================================
14. UTILIDADES DECORATIVAS
============================================ */
/* Gradientes de marca */
--gradient-brand: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
--gradient-brand-soft: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 60%, var(--brand-accent) 100%);
--gradient-hero: linear-gradient(160deg, var(--brand-primary) 0%, #051f33 40%, var(--brand-secondary) 100%);
--gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-secondary) 100%);
--gradient-gold: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-luminous) 100%);
/* Patrón decorativo · 3 barras del isotipo "E" como SVG inline.
Uso: background-image: var(--pattern-bars);
background-repeat: no-repeat;
background-size: contain;
background-position: top right; */
--pattern-bars: url("data:image/svg+xml;utf8,");
--pattern-bars-light: url("data:image/svg+xml;utf8,");
}
/* ============================================
MODO OSCURO · ajustes de superficies y texto.
La paleta de marca permanece igual (la identidad
no cambia entre modos, solo el contexto cromático).
============================================ */
[data-theme="dark"] {
--surface: #111a2b;
--surface-subtle: #0b1220;
--surface-muted: #1f2937;
--surface-strong: #060c18;
--surface-inverse: var(--neutral-50);
--text-primary: #e5e7eb;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-subtle: #64748b;
--text-inverse: var(--neutral-900);
--text-link: var(--brand-accent);
--text-link-hover: #a3deed;
--border: #1f2937;
--border-strong: #334155;
--border-subtle: #111a2b;
--ring-offset: #0b1220;
/* Sombras en dark: más opacas para ser visibles */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35),
0 1px 3px rgba(0, 0, 0, 0.25);
--shadow: 0 4px 12px rgba(0, 0, 0, 0.40),
0 2px 6px rgba(0, 0, 0, 0.30);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45),
0 4px 8px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
--shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.55);
/* Gradientes dark */
--gradient-hero: linear-gradient(160deg, #060c18 0%, #0b1220 40%, #111a2b 100%);
}
/* ============================================
prefers-reduced-motion · accesibilidad
============================================ */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-instant: 0ms;
--duration-fast: 0ms;
--duration: 0ms;
--duration-slow: 0ms;
--duration-slower: 0ms;
--duration-slowest: 0ms;
}
}