/* =====================================================================
   IMA Virtual · Design System — TOKENS
   Fuente de verdad visual. Derivado 1:1 de la landing IMA.
   Estos tokens alimentan después el theme de Tailwind (mismos nombres).
   ===================================================================== */
:root{
  /* ---- Color · marca ---- */
  --blue:        #1577c9;   /* primario: navegación, enlaces, acciones */
  --blue-bright: #2aa6df;   /* azul cielo del logo: acentos, gradientes */
  --blue-dark:   #15357e;   /* hover, encabezados fuertes */
  --blue-deep:   #0f2a66;   /* navy: sidebar, footer, fondos profundos */
  --red:         #e1231e;   /* acento / CTA: 1 acción primaria por vista */
  --red-dark:    #b3160f;   /* hover del rojo */

  /* ---- Color · texto y superficie ---- */
  --ink:         #122a52;   /* texto principal */
  --ink-soft:    #51648a;   /* texto secundario */
  --line:        #dde7f4;   /* bordes y divisores */
  --bg:          #ffffff;   /* superficie base */
  --bg-soft:     #eaf3fb;   /* fondo de sección suave */
  --bg-soft-2:   #f4f9fe;   /* fondo de sección aún más suave */
  --white:       #ffffff;

  /* ---- Color · semántico (estados) ---- */
  --success:     #1aa251;
  --success-bg:  #e4f6ec;
  --warning:     #d98a09;
  --warning-bg:  #fdf1dc;
  --danger:      var(--red);
  --danger-bg:   #fde3e2;
  --info:        var(--blue);
  --info-bg:     var(--bg-soft);

  /* ---- Tipografía ---- */
  --font:        "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; /* títulos */
  --font-body:   "Nunito", system-ui, -apple-system, sans-serif;              /* cuerpo */
  --fw-regular:  400;
  --fw-medium:   600;
  --fw-bold:     700;
  --fw-black:    800;

  --fs-xs:   .78rem;
  --fs-sm:   .88rem;
  --fs-base: 1rem;
  --fs-lg:   1.14rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.8rem;
  --fs-3xl:  2.4rem;

  --lh-tight: 1.15;   /* títulos */
  --lh-body:  1.6;    /* cuerpo */

  /* ---- Espaciado (escala 4px) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 84px;

  /* ---- Radio ---- */
  --radius-sm:  12px;
  --radius:     22px;   /* firma visual: tarjetas */
  --radius-lg:  34px;   /* contenedores grandes */
  --radius-pill: 999px; /* botones / píldoras */

  /* ---- Sombra (azulada, nunca negra dura) ---- */
  --shadow-sm: 0 8px 22px -12px rgba(15,42,102,.25);
  --shadow:    0 18px 40px -18px rgba(15,42,102,.30);
  --shadow-lg: 0 28px 60px -22px rgba(15,42,102,.40);

  /* ---- Layout ---- */
  --maxw:        1160px;
  --sidebar-w:   248px;
  --topbar-h:    72px;

  /* ---- Motion ---- */
  --ease:    cubic-bezier(.2,.7,.3,1);
  --dur-fast: .15s;
  --dur:      .25s;

  /* ---- z-index ---- */
  --z-nav: 50; --z-sticky: 40; --z-modal: 100; --z-toast: 110;
}

/* ---- Modo oscuro (estudio nocturno) ---- */
[data-theme="dark"]{
  --ink:       #eaf1fb;
  --ink-soft:  #a8bbdc;
  --line:      #21345e;
  --bg:        #0c1c3d;
  --bg-soft:   #102450;
  --bg-soft-2: #0f2148;
  --white:     #14264f;
  --info-bg:   #102450;
  --shadow-sm: 0 8px 22px -12px rgba(0,0,0,.5);
  --shadow:    0 18px 40px -18px rgba(0,0,0,.55);
  --shadow-lg: 0 28px 60px -22px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}