/* ═══════════════════════════════════════════════════════════════════
   SAI-ERP  ·  base.css  ·  Variables y Reset
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Azul (primario) ── */
  --c-primary:       #1A56DB;
  --c-primary-light: #3F83F8;
  --c-primary-dark:  #1E429F;
  --c-primary-bg:    #EBF5FF;

  /* ── Morado (secundario) ── */
  --c-secondary:       #7E3AF2;
  --c-secondary-light: #AC94FA;
  --c-secondary-dark:  #5521B5;
  --c-secondary-bg:    #F5F3FF;

  /* ── Naranja (acento) ── */
  --c-accent:       #F97316;
  --c-accent-light: #FB923C;
  --c-accent-dark:  #EA580C;
  --c-accent-bg:    #FFF4ED;

  /* ── Amarillo (moderado) ── */
  --c-yellow:      #FBBF24;
  --c-yellow-dark: #D97706;
  --c-yellow-bg:   #FFFBEB;

  /* ── Neutros ── */
  --c-white:     #FFFFFF;
  --c-black:     #111827;
  --c-gray-50:   #F9FAFB;
  --c-gray-100:  #F3F4F6;
  --c-gray-200:  #E5E7EB;
  --c-gray-300:  #D1D5DB;
  --c-gray-400:  #9CA3AF;
  --c-gray-500:  #6B7280;
  --c-gray-600:  #4B5563;
  --c-gray-700:  #374151;
  --c-gray-800:  #1F2937;
  --c-gray-900:  #111827;

  /* ── Semáforo ── */
  --c-success:    #057A55;
  --c-success-bg: #DEF7EC;
  --c-warning:    #92400E;
  --c-warning-bg: #FDF6B2;
  --c-danger:     #9B1C1C;
  --c-danger-bg:  #FDE8E8;
  --c-info:       #1A56DB;
  --c-info-bg:    #EBF5FF;

  /* ── Layout ── */
  --banner-h:   44px;
  --header-h:   56px;
  --footer-h:   40px;
  --sidebar-w:  262px;
  --sidebar-cw: 62px;

  /* ── Tipografía ── */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --fz-xs:   0.75rem;
  --fz-sm:   0.8125rem;
  --fz-base: 0.875rem;
  --fz-md:   0.9375rem;
  --fz-lg:   1rem;

  /* ── Bordes / sombras ── */
  --radius:    6px;
  --radius-lg: 10px;
  --border:    1px solid var(--c-gray-200);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow:    0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.13);

  /* ── Transiciones ── */
  --t:     all 0.25s ease;
  --t-fast: all 0.15s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fz-base);
  color: var(--c-gray-800);
  background: var(--c-gray-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }

img { max-width: 100%; height: auto; }