/* ============================================================
   SIGES — Variables CSS · Design System v2.0
   Azul + Grafito · Premium · 2026
   ============================================================ */

:root {

  /* ── Sidebar ─────────────────────────────────────────────── */
  --sidebar-bg:          #1C1C1E;
  --sidebar-text:        #8C9AB5;
  --sidebar-active-bg:   #1D4ED8;
  --sidebar-active-text: #FFFFFF;
  --sidebar-hover-bg:    rgba(255,255,255,0.05);
  --sidebar-border:      rgba(255,255,255,0.06);
  --sidebar-section:     #4B5675;
  --sidebar-width:       228px;
  --sidebar-width-collapsed: 56px;

  /* ── Topbar ──────────────────────────────────────────────── */
  --topbar-bg:           #FFFFFF;
  --topbar-text:         #111827;
  --topbar-height:       52px;
  --topbar-border:       #E5E9F2;

  /* ── Área principal / página ─────────────────────────────── */
  --page-bg:             #F0F2F5;
  --page-text:           #111827;
  --page-text-muted:     #6B7280;
  --page-text-hint:      #9CA3AF;
  --page-padding:        20px;

  /* ── Surface (cards, paneles, modales) ───────────────────── */
  --surface:             #FFFFFF;
  --surface-alt:         #F9FAFB;
  --surface-border:      #E5E9F2;
  --surface-border-hover:#C8D0E0;
  --surface-radius:      10px;
  --surface-radius-sm:   6px;
  --surface-radius-lg:   14px;

  /* ── Accents ─────────────────────────────────────────────── */
  --accent:              #1D4ED8;
  --accent-dark:         #1E3A8A;
  --accent-light:        #DBEAFE;
  --accent-text:         #FFFFFF;

  /* ── Semánticos ──────────────────────────────────────────── */
  --color-success:       #059669;
  --color-success-bg:    #D1FAE5;
  --color-success-text:  #065F46;

  --color-warning:       #D97706;
  --color-warning-bg:    #FEF3C7;
  --color-warning-text:  #92400E;

  --color-danger:        #DC2626;
  --color-danger-bg:     #FEE2E2;
  --color-danger-text:   #991B1B;

  --color-info:          #1D4ED8;
  --color-info-bg:       #DBEAFE;
  --color-info-text:     #1E3A8A;

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-main:           'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono:           'Courier New', 'Consolas', monospace;
  --font-size-base:      13px;
  --font-size-sm:        11px;
  --font-size-lg:        15px;
  --font-size-xl:        18px;
  --line-height:         1.6;

  /* ── Tablas ──────────────────────────────────────────────── */
  --table-header-bg:     #F9FAFB;
  --table-header-text:   #9CA3AF;
  --table-row-hover:     #F9FAFB;
  --table-border:        #F3F4F6;
  --table-stripe:        #FAFBFD;

  /* ── Formularios ─────────────────────────────────────────── */
  --input-bg:            #FFFFFF;
  --input-border:        #D1D5DB;
  --input-border-focus:  #1D4ED8;
  --input-text:          #111827;
  --input-placeholder:   #9CA3AF;
  --input-height:        34px;
  --input-height-sm:     28px;
  --input-disabled-bg:   #F9FAFB;
  --input-disabled-text: #9CA3AF;

  /* ── Botones ─────────────────────────────────────────────── */
  --btn-primary-bg:      #1D4ED8;
  --btn-primary-text:    #FFFFFF;
  --btn-primary-hover:   #1E3A8A;

  --btn-secondary-bg:    #FFFFFF;
  --btn-secondary-text:  #374151;
  --btn-secondary-border:#D1D5DB;
  --btn-secondary-hover: #F9FAFB;

  --btn-success-bg:      #059669;
  --btn-success-text:    #FFFFFF;

  --btn-danger-bg:       #DC2626;
  --btn-danger-text:     #FFFFFF;

  --btn-warning-bg:      #D97706;
  --btn-warning-text:    #FFFFFF;

  /* ── Badges / Pills ─────────────────────────────────────────*/
  --badge-radius:        20px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm:           0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  /* ── Transiciones ────────────────────────────────────────── */
  --transition:          0.15s ease;

  /* ── Breakpoints (referencia para JS) ───────────────────────*/
  --bp-mobile:           768px;
  --bp-tablet:           1024px;
}