/* ================================================================
   DESIGN TOKENS — ERP Webkor
   Tema único para main.css y portal.css

   Arquitectura:
   - :root         → modo claro (default)
   - [data-theme]  → modo oscuro (Fase 3)
   ================================================================ */

:root {
  /* ═══════════════════════════════════════════════════════════════
     PALETA CORPORATIVA — primarios (estilo Alegra en tonos AZULES)
     ═══════════════════════════════════════════════════════════════ */
  /* Azul marino de marca (logo WebKor) */
  --blue-50:  #eaf0f7;
  --blue-100: #d3e0ee;
  --blue-200: #a6c0dc;
  --blue-300: #6f93bb;
  --blue-400: #416a94;
  --blue-500: #274c72;
  --blue-600: #1c3a5a;
  --blue-700: #142b45;
  --blue-800: #0f2036;
  --blue-900: #091626;

  /* Cobre / bronce de marca (flecha del logo) */
  --copper-50:  #f7efe6;
  --copper-100: #ecd8c3;
  --copper-200: #dcb98f;
  --copper-300: #c99a5f;
  --copper-400: #b9833f;
  --copper-500: #a56f31;
  --copper-600: #8a5a27;

  --primary-50:  var(--blue-50);
  --primary-100: var(--blue-100);
  --primary-500: var(--blue-500);
  --primary-600: var(--blue-600);
  --primary-700: var(--blue-700);
  --primary-800: var(--blue-800);

  --accent-500: var(--copper-400);
  --accent-600: var(--copper-600);

  /* ═══════════════════════════════════════════════════════════════
      ESCALA DE GRISES (fríos, tintados hacia el azul — look Alegra)
      ═══════════════════════════════════════════════════════════════ */
  --gray-50:  #f5f8fc;
  --gray-100: #eef2f8;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ═══════════════════════════════════════════════════════════════
      SEMÁNTICOS
      ═══════════════════════════════════════════════════════════════ */
  --success: #16a34a;
  --warning: #d97706;
  --error:   #dc2626;
  --info:    #2563eb;

  /* ═══════════════════════════════════════════════════════════════
      SUPERFICIES (surface tokens — usar en lugar de hardcodeados)
      ═══════════════════════════════════════════════════════════════ */
  --surface-bg:               var(--gray-50);
  --surface-card:              #ffffff;
  --surface-border:            var(--gray-200);
  --surface-border-strong:     var(--gray-300);
  --surface-hover:             var(--gray-50);

  /* ── CRM · etapas del pipeline (texto + fondo tintado) ── */
  --crm-nuevo:        #64748b;  --crm-nuevo-bg:        #64748b1a;
  --crm-contactado:   #0284c7;  --crm-contactado-bg:   #0284c71a;
  --crm-calificado:   #7c3aed;  --crm-calificado-bg:   #7c3aed1a;
  --crm-propuesta:    #d97706;  --crm-propuesta-bg:    #d977061a;
  --crm-negociacion:  #4f46e5;  --crm-negociacion-bg:  #4f46e51a;
  --crm-ganado:       #059669;  --crm-ganado-bg:       #0596691a;
  --crm-perdido:      #dc2626;  --crm-perdido-bg:      #dc26261a;

  /* ═══════════════════════════════════════════════════════════════
      TEXTO
      ═══════════════════════════════════════════════════════════════ */
  --text-primary:              var(--gray-900);
  --text-secondary:            var(--gray-500);
  --text-muted:                var(--gray-400);
  --text-inverse:              #ffffff;
  --text-link:                 var(--primary-500);

  /* ═══════════════════════════════════════════════════════════════
      INPUTS
      ═══════════════════════════════════════════════════════════════ */
  --input-bg:                  #ffffff;
  --input-border:              var(--gray-300);
  --input-border-focus:        var(--primary-500);
  --input-text:                var(--text-primary);
  --input-placeholder:         var(--gray-400);
  --input-radius:              var(--radius-md);

  /* ═══════════════════════════════════════════════════════════════
      TABLAS
      ═══════════════════════════════════════════════════════════════ */
  --table-header-bg:           var(--gray-50);
  --table-header-text:         var(--gray-500);
  --table-row-hover:           var(--gray-50);
  --table-border:              var(--gray-100);
  --table-stripe:              transparent;

  /* ═══════════════════════════════════════════════════════════════
      SIDEBAR
      ═══════════════════════════════════════════════════════════════ */
  --sidebar-bg:                #ffffff;
  --sidebar-text:              var(--gray-600);
  --sidebar-text-muted:        var(--gray-400);
  --sidebar-active-bg:         var(--blue-50);
  --sidebar-active-text:       var(--blue-700);
  --sidebar-hover-bg:          var(--gray-50);
  --sidebar-divider:           var(--gray-200);
  --sidebar-width:             250px;
  --sidebar-collapsed-width:   68px;

  /* ═══════════════════════════════════════════════════════════════
      HEADER
      ═══════════════════════════════════════════════════════════════ */
  --header-bg:                 #ffffff;
  --header-text:               var(--gray-800);
  --header-height:             56px;

  /* ═══════════════════════════════════════════════════════════════
      FOOTER
      ═══════════════════════════════════════════════════════════════ */
  --footer-bg:                 var(--surface-bg);
  --footer-border:             var(--surface-border);
  --footer-text:               var(--text-muted);
  --footer-link:               var(--text-secondary);
  --footer-link-hover:         var(--primary-500);
  --footer-height:             40px;

  /* ═══════════════════════════════════════════════════════════════
      BADGES — variantes por estado
      ═══════════════════════════════════════════════════════════════ */
  --badge-pendiente-bg:   #eff6ff;  --badge-pendiente-text: #1e40af;  --badge-pendiente-border: #bfdbfe;
  --badge-parcial-bg:     #eff6ff;  --badge-parcial-text:   #1e40af;  --badge-parcial-border:   #bfdbfe;
  --badge-pagada-bg:      #dbeafe;  --badge-pagada-text:    #1e3a8a;  --badge-pagada-border:    #93c5fd;
  --badge-vencida-bg:     #bfdbfe;  --badge-vencida-text:   #1e3a8a;  --badge-vencida-border:   #60a5fa;
  --badge-anulada-bg:     #f1f5f9;  --badge-anulada-text:   #64748b;  --badge-anulada-border:   #cbd5e1;
  --badge-aprobada-bg:    #dbeafe;  --badge-aprobada-text:  #1e3a8a;  --badge-aprobada-border:  #93c5fd;
  --badge-rechazada-bg:   #bfdbfe;  --badge-rechazada-text: #1e3a8a;  --badge-rechazada-border: #60a5fa;
  --badge-activo-bg:      #dbeafe;  --badge-activo-text:    #1e3a8a;  --badge-activo-border:    #93c5fd;
  --badge-inactivo-bg:    #f1f5f9;  --badge-inactivo-text:  #94a3b8;  --badge-inactivo-border:  #e2e8f0;
  --badge-info-bg:        #eff6ff;  --badge-info-text:      #1d4ed8;  --badge-info-border:      #bfdbfe;

  /* ═══════════════════════════════════════════════════════════════
      TOASTS
      ═══════════════════════════════════════════════════════════════ */
  --toast-success-bg:    #3b82f6;
  --toast-success-text:  #ffffff;
  --toast-error-bg:      #1d4ed8;
  --toast-error-text:    #ffffff;
  --toast-warning-bg:    #60a5fa;
  --toast-warning-text:  #ffffff;
  --toast-info-bg:       #3b82f6;
  --toast-info-text:     #ffffff;

  /* ═══════════════════════════════════════════════════════════════
      MODAL
     ═══════════════════════════════════════════════════════════════ */
  --modal-backdrop:       rgba(0, 0, 0, 0.5);
  --modal-bg:             var(--surface-card);
  --modal-header-bg:      var(--gray-50);
  --modal-footer-bg:      var(--gray-50);

  /* ═══════════════════════════════════════════════════════════════
     TIPOGRAFÍA
     ═══════════════════════════════════════════════════════════════ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* ═══════════════════════════════════════════════════════════════
     ESPACIADO
     ═══════════════════════════════════════════════════════════════ */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ═══════════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════════ */
  --radius:    4px;    /* alias portal */
  --radius-sm: 2px;    /* celdas */
  --radius-input: 2px;  /* inputs, formularios */
  --radius-md: 4px;    /* botones, badges */
  --radius-lg: 6px;    /* cards, modales */
  --radius-xl: 8px;    /* sidebar */

  /* ═══════════════════════════════════════════════════════════════
     SOMBRAS
     ═══════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.08);   /* alias portal */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10);

  /* ═══════════════════════════════════════════════════════════════
     TRANSICIONES
     ═══════════════════════════════════════════════════════════════ */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ═══════════════════════════════════════════════════════════════
     Z-INDEX
     ═══════════════════════════════════════════════════════════════ */
  --z-header:   700;
  --z-sidebar: 800;
  --z-dropdown:900;
  --z-modal:   1000;
  --z-toast:   1100;

  /* ═══════════════════════════════════════════════════════════════
     LOGIN
     ═══════════════════════════════════════════════════════════════ */
  --login-bg:          var(--primary-500);
  --login-card-bg:     var(--surface-card);
  --login-card-shadow: var(--shadow-lg);

  /* ═══════════════════════════════════════════════════════════════
     MISC
     ═══════════════════════════════════════════════════════════════ */

  --focus-ring: 0 0 0 3px rgba(39, 76, 114, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   TEMA OSCURO
   Activado con: <html data-theme="dark">
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  /* ── PALETA CORPORATIVA — azul marino de marca (claro para contraste) ── */
  --primary-50:  #16233a;
  --primary-100: #1e3049;
  --primary-500: #7ea3cc;
  --primary-600: #98b8dc;
  --primary-700: #b0cae8;
  --primary-800: #c8dcf0;

  /* ── Acento cobre/bronce (claro para fondo oscuro) ── */
  --accent-500: #d09a5a;
  --accent-600: #c08544;

  /* ── ESCALA DE GRISES INVERTIDA ── */
  --gray-50:  #0a1018;
  --gray-100: #121b2a;
  --gray-200: #1e2a3a;
  --gray-300: #2d3a4c;
  --gray-400: #455263;
  --gray-500: #647080;
  --gray-600: #8a95a4;
  --gray-700: #b0b9c4;
  --gray-800: #d1d7df;
  --gray-900: #e8ecf0;

  /* ── SEMÁNTICOS ── */
  --success: #4ade80;
  --warning: #fbbf24;
  --error:   #f87171;
  --info:    #60a5fa;

  /* ── SUPERFICIES ── */
  --surface-bg:               var(--gray-50);
  --surface-card:             var(--gray-100);
  --surface-border:           var(--gray-200);
  --surface-border-strong:    var(--gray-300);
  --surface-hover:            var(--gray-100);

  /* ── CRM · etapas (tonos pastel apagados para no ser chillones en oscuro) ── */
  --crm-nuevo:        #94a3b8;  --crm-nuevo-bg:        #94a3b814;
  --crm-contactado:   #7dd3fc;  --crm-contactado-bg:   #7dd3fc14;
  --crm-calificado:   #c4b5fd;  --crm-calificado-bg:   #c4b5fd14;
  --crm-propuesta:    #fcd34d;  --crm-propuesta-bg:    #fcd34d14;
  --crm-negociacion:  #a5b4fc;  --crm-negociacion-bg:  #a5b4fc14;
  --crm-ganado:       #6ee7b7;  --crm-ganado-bg:       #6ee7b714;
  --crm-perdido:      #fca5a5;  --crm-perdido-bg:      #fca5a514;

  /* ── TEXTO ── */
  --text-primary:             var(--gray-900);
  --text-secondary:           var(--gray-600);
  --text-muted:               var(--gray-500);
  --text-inverse:             var(--gray-50);
  --text-link:                #9cc0e6;

  /* ── INPUTS ── */
  --input-bg:                 var(--gray-100);
  --input-border:             var(--gray-300);
  --input-border-focus:       #7ea3cc;
  --input-text:               var(--text-primary);
  --input-placeholder:        var(--gray-500);

  /* ── TABLAS ── */
  --table-header-bg:          var(--gray-100);
  --table-header-text:        var(--gray-600);
  --table-row-hover:          var(--gray-200);
  --table-border:             var(--gray-200);
  --table-stripe:             rgba(255, 255, 255, 0.02);

  /* ── SIDEBAR ── */
  --sidebar-bg:               #0d0d0d;
  --sidebar-text:             var(--gray-600);
  --sidebar-text-muted:       var(--gray-500);
  --sidebar-active-bg:        var(--gray-300);
  --sidebar-active-text:      var(--gray-800);
  --sidebar-hover-bg:         rgba(255, 255, 255, 0.06);
  --sidebar-divider:          rgba(255, 255, 255, 0.06);

  /* ── HEADER ── */
  --header-bg:                var(--gray-100);
  --header-text:              var(--gray-800);

  /* ── BADGES (azul) ── */
  --badge-pendiente-bg:   #1e293b;  --badge-pendiente-text: #93c5fd;  --badge-pendiente-border: #1e3a8a;
  --badge-parcial-bg:     #1e293b;  --badge-parcial-text:   #93c5fd;  --badge-parcial-border:   #1e3a8a;
  --badge-pagada-bg:      #1e3a8a;  --badge-pagada-text:    #dbeafe;  --badge-pagada-border:    #3b82f6;
  --badge-vencida-bg:     #1e3a8a;  --badge-vencida-text:   #bfdbfe;  --badge-vencida-border:   #2563eb;
  --badge-anulada-bg:     #1e293b;  --badge-anulada-text:   #64748b;  --badge-anulada-border:   #334155;
  --badge-aprobada-bg:    #1e3a8a;  --badge-aprobada-text:  #dbeafe;  --badge-aprobada-border:  #3b82f6;
  --badge-rechazada-bg:   #1e3a8a;  --badge-rechazada-text: #bfdbfe;  --badge-rechazada-border: #2563eb;
  --badge-activo-bg:      #1e3a8a;  --badge-activo-text:    #dbeafe;  --badge-activo-border:    #3b82f6;
  --badge-inactivo-bg:    #1e293b;  --badge-inactivo-text:  #94a3b8;  --badge-inactivo-border:  #334155;
  --badge-info-bg:        #1e293b;  --badge-info-text:      #60a5fa;  --badge-info-border:      #1e3a8a;

  /* ── TOASTS ── */
  --toast-success-bg:    #2563eb;
  --toast-success-text:  #ffffff;
  --toast-error-bg:      #1d4ed8;
  --toast-error-text:    #ffffff;
  --toast-warning-bg:    #3b82f6;
  --toast-warning-text:  #ffffff;
  --toast-info-bg:       #60a5fa;
  --toast-info-text:     #0f172a;

  /* ── MODAL ── */
  --modal-backdrop:       rgba(0, 0, 0, 0.7);
  --modal-bg:             var(--surface-card);
  --modal-header-bg:      var(--gray-100);
  --modal-footer-bg:      var(--gray-100);

  /* ── SOMBRAS (más opacas) ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);

  /* ── LOGIN ── */
  --login-bg:          var(--gray-900);
  --login-card-bg:     var(--surface-card);
  --login-card-shadow: var(--shadow-lg);

  /* ── MISC ── */

  --focus-ring: 0 0 0 3px rgba(126, 163, 204, 0.25);
}