/**
 * Variables CSS - Sistema de Diseño Impulso+
 * Manual de Identidad de Marca - Version 2512
 */

@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
    /* ── PALETA PRINCIPAL (del Manual de Marca) ───────────────────────────── */
    --imp-azul-base:    #0E3754;
    --imp-azul-oscuro:  #0F172A;
    --imp-verde-fuerte: #4CB04F;
    --imp-verde-limon:  #21E52E;
    --imp-verde-claro:  #88CD8D;

    /* ── PALETA NEUTRAL ───────────────────────────────────────────────────── */
    --imp-crema:        #F4E9C4;
    --imp-gris:         #ADADAD;
    --imp-gris-claro:   #E7F2F4;
    --imp-blanco:       #FFFFFF;
    --imp-negro:        #000000;

    /* ── COLORES ADICIONALES ──────────────────────────────────────────────── */
    --imp-azul-suave:   #5A5A7D;
    --imp-dorado:       #FEC200;
    --imp-rojo:         #CF2E2E;

    /* ── ESTADOS ──────────────────────────────────────────────────────────── */
    --imp-success:      #22C55E;
    --imp-warning:      #F59E0B;
    --imp-error:        #EF4444;
    --imp-info:         #3B82F6;

    /* ── TIPOGRAFÍA ───────────────────────────────────────────────────────── */
    --imp-font-titulo:  'Cabin', 'Arial Black', sans-serif;
    --imp-font-body:    'Open Sans', Arial, sans-serif;

    /* ── ESPACIADO ────────────────────────────────────────────────────────── */
    --imp-sp-xs:   4px;
    --imp-sp-sm:   8px;
    --imp-sp-md:   16px;
    --imp-sp-lg:   24px;
    --imp-sp-xl:   32px;
    --imp-sp-2xl:  48px;
    --imp-sp-3xl:  64px;

    /* ── BORDES ───────────────────────────────────────────────────────────── */
    --imp-radius-sm:   4px;
    --imp-radius-md:   8px;
    --imp-radius-lg:   12px;
    --imp-radius-xl:   20px;
    --imp-radius-full: 999px;

    /* ── SOMBRAS ──────────────────────────────────────────────────────────── */
    --imp-shadow-sm:  0 1px 3px rgba(14,55,84,0.08);
    --imp-shadow-md:  0 4px 12px rgba(14,55,84,0.12);
    --imp-shadow-lg:  0 8px 24px rgba(14,55,84,0.16);
    --imp-shadow-xl:  0 16px 40px rgba(14,55,84,0.20);
    --imp-shadow-verde: 0 4px 16px rgba(76,176,79,0.30);

    /* ── TRANSICIONES ─────────────────────────────────────────────────────── */
    --imp-trans-fast:   150ms ease-in-out;
    --imp-trans-normal: 300ms ease-in-out;
    --imp-trans-slow:   500ms ease-in-out;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANIMACIONES GLOBALES
══════════════════════════════════════════════════════════════════════════════ */

@keyframes imp-fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes imp-slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes imp-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes imp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

@keyframes imp-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes imp-spinReverse {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes imp-progressBar {
    from { width: 0; }
}

.imp-animate-fade-in    { animation: imp-fadeIn    var(--imp-trans-normal) ease-out both; }
.imp-animate-slide-in   { animation: imp-slideInLeft var(--imp-trans-normal) ease-out both; }
.imp-animate-scale-in   { animation: imp-scaleIn   var(--imp-trans-normal) ease-out both; }
.imp-animate-pulse      { animation: imp-pulse 1.8s cubic-bezier(0.4,0,0.6,1) infinite; }