/* ============================================
   variables.css — CSS Custom Properties globales
   CRM Wisplan — Sistema de gestión
   ============================================ */

:root {
  /* --- Colores de marca --- */
  --color-brand-red:    #e74c3c;
  --color-brand-green:  #27ae60;
  --color-brand-blue:   #3498db;
  --color-brand-yellow: #f39c12;
  --color-brand-teal:   #1abc9c;

  /* --- Login page --- */
  --login-overlay:      rgba(0, 0, 0, 0.42);
  --login-card-bg:      rgba(0, 0, 0, 0.52);
  --login-input-bg:     rgba(0, 0, 0, 0.40);
  --login-input-border: rgba(255, 255, 255, 0.18);
  --login-input-focus:  rgba(255, 255, 255, 0.35);
  --login-text:         #ffffff;
  --login-text-muted:   rgba(255, 255, 255, 0.65);
  --login-btn-bg:       #3d8ef0;
  --login-btn-hover:    #2e7de0;
  --login-error-bg:     rgba(220, 51, 18, 0.90);

  /* --- App shell (dashboard) --- */
  --sidebar-width:      260px;
  --sidebar-collapsed:  64px;
  --topbar-height:      60px;

  --color-sidebar-bg:       #1a1e2e;
  --color-sidebar-hover:    #252b3f;
  --color-sidebar-active:   #2d3555;
  --color-sidebar-text:     rgba(255, 255, 255, 0.75);
  --color-sidebar-active-text: #ffffff;
  --color-sidebar-border:   rgba(255,255,255,0.07);
  --color-sidebar-icon:     rgba(255,255,255,0.50);

  --color-topbar-bg:    #ffffff;
  --color-topbar-shadow: 0 2px 8px rgba(0,0,0,0.08);

  --color-body-bg:      #f0f2f7;
  --color-surface:      #ffffff;
  --color-border:       #e2e6ee;
  --color-text-primary: #1c2438;
  --color-text-secondary: #6b7a99;
  --color-text-muted:   #9aa3b5;

  /* --- Accent / acciones --- */
  --color-primary:      #3d8ef0;
  --color-primary-dark: #2c7de0;
  --color-success:      #28a745;
  --color-warning:      #f6a733;
  --color-danger:       #e74c3c;
  --color-info:         #17a2b8;

  /* --- KPI cards --- */
  --card-radius:  12px;
  --card-shadow:  0 2px 12px rgba(0,0,0,0.07);
  --card-padding: 24px;

  /* --- Tipografía --- */
  --font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  28px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Transiciones --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* --- Z-index --- */
  --z-sidebar:   100;
  --z-topbar:    200;
  --z-modal:     300;
  --z-toast:     400;
  --z-login-bg:  0;
  --z-login-overlay: 1;
  --z-login-card: 2;
}

/* Breakpoints de referencia (comentario — usar en media queries):
   --bp-sm:  576px
   --bp-md:  768px
   --bp-lg:  992px
   --bp-xl:  1200px
*/