@charset "utf-8";
/* ============================================================================
   Temarios CEF - Sistema de diseño moderno
   1. TOKENS
   ----------------------------------------------------------------------------
   Única fuente de verdad para color, tipografía, espaciado, radios y sombras.
   Ningún otro fichero del sistema debe declarar un color literal.
   ========================================================================== */

:root {
    /* ---- Marca: verde corporativo CEF (#00533D) ---- */
    --cef-verde-50:  #e9f4f0;
    --cef-verde-100: #c7e4da;
    --cef-verde-200: #95c9b7;
    --cef-verde-300: #60ad95;
    --cef-verde-400: #2f8e72;
    --cef-verde-500: #00755a;
    --cef-verde-600: #00533d;   /* color base del logotipo */
    --cef-verde-700: #004432;
    --cef-verde-800: #003527;
    --cef-verde-900: #00261b;

    /* ---- Marca: rojo corporativo CEF (#E30613) ---- */
    --cef-rojo-50:  #fdecec;
    --cef-rojo-100: #fbd0d2;
    --cef-rojo-200: #f5a3a8;
    --cef-rojo-500: #e30613;
    --cef-rojo-600: #c00510;
    --cef-rojo-700: #9b040d;

    /* ---- Neutros (matiz frío, armoniza con el #232B2D histórico) ---- */
    --gris-0:   #ffffff;
    --gris-25:  #fbfcfc;
    --gris-50:  #f4f7f6;
    --gris-100: #eaeeee;
    --gris-200: #dbe1e0;
    --gris-300: #c2cbca;
    --gris-400: #98a3a2;
    --gris-500: #6d7877;
    --gris-600: #4f5958;
    --gris-700: #39413f;
    --gris-800: #262d2c;
    --gris-900: #171c1b;

    /* ---- Roles semánticos ---- */
    --color-primario:          var(--cef-verde-600);
    --color-primario-hover:    var(--cef-verde-500);
    --color-primario-activo:   var(--cef-verde-700);
    --color-primario-suave:    var(--cef-verde-50);
    --color-primario-borde:    var(--cef-verde-100);
    --color-sobre-primario:    #ffffff;

    --color-acento:            var(--cef-rojo-500);
    --color-acento-hover:      var(--cef-rojo-600);

    --color-exito:             #1a7f4b;
    --color-exito-suave:       #e6f5ed;
    --color-aviso:             #a35a06;
    --color-aviso-suave:       #fdf3e3;
    --color-error:             var(--cef-rojo-600);
    --color-error-suave:       var(--cef-rojo-50);
    --color-info:              #0b6a91;
    --color-info-suave:        #e6f4fa;

    /* ---- Superficies y texto ---- */
    --fondo-app:        var(--gris-50);
    --fondo-superficie: var(--gris-0);
    --fondo-hundido:    var(--gris-100);
    --fondo-barra:      var(--gris-0);
    --fondo-lateral:    var(--cef-verde-800);

    --texto-fuerte:  var(--gris-900);
    --texto-normal:  var(--gris-700);
    --texto-suave:   var(--gris-500);
    --texto-tenue:   var(--gris-400);
    --texto-inverso: var(--gris-0);

    --borde:        var(--gris-200);
    --borde-suave:  var(--gris-100);
    --borde-fuerte: var(--gris-300);

    /* ---- Tipografía ---- */
    --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                   Arial, "Noto Sans", sans-serif;
    --fuente-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
                   "Liberation Mono", monospace;

    --texto-xs:   0.75rem;    /* 12px */
    --texto-sm:   0.8125rem;  /* 13px */
    --texto-md:   0.875rem;   /* 14px - base de la interfaz */
    --texto-lg:   1rem;       /* 16px */
    --texto-xl:   1.125rem;   /* 18px */
    --texto-2xl:  1.375rem;   /* 22px */
    --texto-3xl:  1.75rem;    /* 28px */

    --peso-normal:   400;
    --peso-medio:    500;
    --peso-semi:     600;
    --peso-fuerte:   700;

    --interlineado-ajustado: 1.25;
    --interlineado-normal:   1.5;

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

    /* ---- Radios ---- */
    --radio-sm:    6px;
    --radio-md:    10px;
    --radio-lg:    14px;
    --radio-xl:    20px;
    --radio-pill:  999px;

    /* ---- Sombras ---- */
    --sombra-xs: 0 1px 2px rgba(23, 28, 27, 0.06);
    --sombra-sm: 0 1px 3px rgba(23, 28, 27, 0.08), 0 1px 2px rgba(23, 28, 27, 0.04);
    --sombra-md: 0 4px 12px rgba(23, 28, 27, 0.08), 0 2px 4px rgba(23, 28, 27, 0.04);
    --sombra-lg: 0 12px 32px rgba(23, 28, 27, 0.12), 0 4px 8px rgba(23, 28, 27, 0.05);
    --sombra-xl: 0 24px 60px rgba(23, 28, 27, 0.18);
    --anillo-foco: 0 0 0 3px rgba(0, 117, 90, 0.28);

    /* ---- Medidas del armazón ---- */
    --alto-barra:    60px;
    --ancho-lateral: 258px;
    --ancho-lateral-plegado: 68px;
    --ancho-contenido: 1320px;

    /* ---- Movimiento ---- */
    --trans-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --trans-media:  200ms cubic-bezier(0.4, 0, 0.2, 1);
    --trans-lenta:  320ms cubic-bezier(0.4, 0, 0.2, 1);

    --capa-lateral:  900;
    --capa-barra:    1000;
    --capa-velo:     1100;
    --capa-modal:    1200;
    --capa-aviso:    1300;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --trans-rapida: 1ms;
        --trans-media:  1ms;
        --trans-lenta:  1ms;
    }
}