/**
 * ============================================
 * PALETA DE COLORES - NEXSECURE
 * Basada en el color principal: #0066FF
 * ============================================
 */

:root {
  /* ==========================================
     COLOR PRINCIPAL Y VARIACIONES
     ========================================== */
  
  /* Color Principal */
  --primary: #0066FF;
  --primary-50: #E6F0FF;   /* Muy claro, para fondos suaves */
  --primary-100: #CCE1FF;  /* Claro, para hover suave */
  --primary-200: #99C3FF;  /* Medio-claro, para bordes */
  --primary-300: #66A5FF;  /* Medio, para elementos secundarios */
  --primary-400: #3387FF;  /* Medio-oscuro, para estados activos */
  --primary-500: #0066FF;  /* Principal (base) */
  --primary-600: #0052CC;   /* Oscuro, para hover */
  --primary-700: #003D99;   /* Muy oscuro, para texto sobre fondo claro */
  --primary-800: #002966;   /* Extremadamente oscuro */
  --primary-900: #001433;   /* Casi negro con tinte azul */

  /* ==========================================
     COLORES DE ACENTO
     ========================================== */
  
  /* Turquesa/Cyan (complementario) */
  --accent-turquoise: #00D4FF;
  --accent-turquoise-light: #33DDFF;
  --accent-turquoise-dark: #0099CC;
  
  /* Azul Cielo */
  --accent-sky: #00C6FB;
  --accent-sky-light: #33D1FC;
  --accent-sky-dark: #0095EA;
  
  /* Azul Eléctrico */
  --accent-electric: #0066FF;
  --accent-electric-light: #3387FF;
  --accent-electric-dark: #0044CC;

  /* ==========================================
     COLORES NEUTROS (GRISES)
     ========================================== */
  
  /* Grises con tinte azul */
  --neutral-50: #F8FAFC;   /* Fondo muy claro */
  --neutral-100: #F1F5F9;   /* Fondo claro */
  --neutral-200: #E2E8F0;   /* Bordes claros */
  --neutral-300: #CBD5E1;   /* Bordes medios */
  --neutral-400: #94A3B8;   /* Texto secundario */
  --neutral-500: #64748B;   /* Texto medio */
  --neutral-600: #475569;   /* Texto principal */
  --neutral-700: #334155;   /* Texto oscuro */
  --neutral-800: #1E293B;   /* Fondo oscuro */
  --neutral-900: #0F172A;   /* Fondo muy oscuro */

  /* ==========================================
     COLORES DE ESTADO
     ========================================== */
  
  /* Éxito (Verde con tinte azul) */
  --success: #10B981;
  --success-light: #34D399;
  --success-dark: #059669;
  --success-bg: #D1FAE5;
  
  /* Error (Rojo) */
  --error: #EF4444;
  --error-light: #F87171;
  --error-dark: #DC2626;
  --error-bg: #FEE2E2;
  
  /* Advertencia (Amarillo/Naranja) */
  --warning: #F59E0B;
  --warning-light: #FBBF24;
  --warning-dark: #D97706;
  --warning-bg: #FEF3C7;
  
  /* Información (Azul) */
  --info: #0066FF;
  --info-light: #3387FF;
  --info-dark: #0052CC;
  --info-bg: #DBEAFE;

  /* ==========================================
     COLORES DE TEXTO
     ========================================== */
  
  --text-primary: #0F172A;        /* Texto principal sobre fondo claro */
  --text-secondary: #475569;      /* Texto secundario */
  --text-tertiary: #94A3B8;       /* Texto terciario/deshabilitado */
  --text-inverse: #FFFFFF;        /* Texto sobre fondo oscuro */
  --text-on-primary: #FFFFFF;     /* Texto sobre color primario */
  --text-link: #0066FF;           /* Enlaces */
  --text-link-hover: #0052CC;     /* Enlaces hover */

  /* ==========================================
     COLORES DE FONDO
     ========================================== */
  
  --bg-primary: #FFFFFF;           /* Fondo principal (blanco) */
  --bg-secondary: #F8FAFC;         /* Fondo secundario */
  --bg-tertiary: #F1F5F9;          /* Fondo terciario */
  --bg-dark: #0F172A;             /* Fondo oscuro */
  --bg-dark-secondary: #1E293B;    /* Fondo oscuro secundario */
  --bg-overlay: rgba(15, 23, 42, 0.8);  /* Overlay oscuro */
  --bg-overlay-light: rgba(0, 102, 255, 0.1);  /* Overlay azul claro */

  /* ==========================================
     COLORES PARA SIDEBAR
     ========================================== */
  
  --sidebar-bg: rgba(0, 102, 255, 0.15);      /* Fondo sidebar */
  --sidebar-bg-hover: rgba(0, 102, 255, 0.25); /* Hover sidebar */
  --sidebar-border: rgba(0, 102, 255, 0.3);   /* Borde sidebar */
  --sidebar-text: #E2E8F0;                    /* Texto sidebar */
  --sidebar-text-hover: #FFFFFF;              /* Texto hover sidebar */
  --sidebar-active: #0066FF;                  /* Elemento activo */

  /* ==========================================
     COLORES PARA BOTONES
     ========================================== */
  
  /* Botón Primario */
  --btn-primary: #0066FF;
  --btn-primary-hover: #0052CC;
  --btn-primary-active: #003D99;
  --btn-primary-text: #FFFFFF;
  
  /* Botón Secundario */
  --btn-secondary: #F1F5F9;
  --btn-secondary-hover: #E2E8F0;
  --btn-secondary-active: #CBD5E1;
  --btn-secondary-text: #0066FF;
  
  /* Botón Outline */
  --btn-outline: transparent;
  --btn-outline-border: #0066FF;
  --btn-outline-hover: rgba(0, 102, 255, 0.1);
  --btn-outline-text: #0066FF;

  /* ==========================================
     COLORES PARA TARJETAS/CARDS
     ========================================== */
  
  --card-bg: #FFFFFF;
  --card-bg-hover: #F8FAFC;
  --card-border: #E2E8F0;
  --card-border-hover: #0066FF;
  --card-shadow: rgba(0, 102, 255, 0.1);
  --card-shadow-hover: rgba(0, 102, 255, 0.2);

  /* ==========================================
     COLORES PARA INPUTS/FORMULARIOS
     ========================================== */
  
  --input-bg: #FFFFFF;
  --input-border: #CBD5E1;
  --input-border-focus: #0066FF;
  --input-text: #0F172A;
  --input-placeholder: #94A3B8;
  --input-error-border: #EF4444;
  --input-success-border: #10B981;

  /* ==========================================
     GRADIENTES
     ========================================== */
  
  --gradient-primary: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
  --gradient-primary-reverse: linear-gradient(135deg, #0052CC 0%, #0066FF 100%);
  --gradient-turquoise: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
  --gradient-sky: linear-gradient(135deg, #00C6FB 0%, #0095EA 100%);
  --gradient-hero: linear-gradient(160deg, rgba(15, 23, 42, 0.72) 0%, rgba(0, 102, 255, 0.55) 45%, rgba(0, 212, 255, 0.35) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(0, 102, 255, 0.1) 0%, rgba(0, 102, 255, 0.05) 100%);
  --gradient-brand: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%);

  /* ==========================================
     SOMBRAS
     ========================================== */
  
  --shadow-sm: 0 1px 2px rgba(0, 102, 255, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 102, 255, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 102, 255, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 102, 255, 0.2);
  --shadow-2xl: 0 25px 50px rgba(0, 102, 255, 0.25);
  --shadow-primary: 0 4px 20px rgba(0, 102, 255, 0.3);
  --shadow-primary-glow: 0 0 20px rgba(0, 102, 255, 0.5);

  /* ==========================================
     COLORES PARA NAVEGACIÓN
     ========================================== */
  
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.98);
  --nav-text: #475569;
  --nav-text-hover: #0066FF;
  --nav-text-active: #0066FF;
  --nav-border: #E2E8F0;

  /* ==========================================
     COLORES PARA FOOTER
     ========================================== */
  
  --footer-bg: #0F172A;
  --footer-bg-secondary: #1E293B;
  --footer-text: #94A3B8;
  --footer-text-hover: #FFFFFF;
  --footer-border: rgba(0, 102, 255, 0.2);

  /* ==========================================
     COLORES PARA BADGES/TAGS
     ========================================== */
  
  --badge-primary: #0066FF;
  --badge-primary-text: #FFFFFF;
  --badge-secondary: #F1F5F9;
  --badge-secondary-text: #0066FF;
  --badge-success: #10B981;
  --badge-success-text: #FFFFFF;
  --badge-warning: #F59E0B;
  --badge-warning-text: #FFFFFF;
  --badge-error: #EF4444;
  --badge-error-text: #FFFFFF;

  /* ==========================================
     COLORES PARA TABLAS
     ========================================== */
  
  --table-header-bg: #F8FAFC;
  --table-header-text: #0F172A;
  --table-row-bg: #FFFFFF;
  --table-row-hover: #F8FAFC;
  --table-border: #E2E8F0;
  --table-stripe: #F1F5F9;

  /* ==========================================
     COLORES PARA MODALES
     ========================================== */
  
  --modal-bg: #FFFFFF;
  --modal-overlay: rgba(15, 23, 42, 0.75);
  --modal-border: #E2E8F0;
  --modal-shadow: 0 25px 50px rgba(0, 102, 255, 0.25);

  /* ==========================================
     COLORES PARA TOOLTIPS
     ========================================== */
  
  --tooltip-bg: #0F172A;
  --tooltip-text: #FFFFFF;
  --tooltip-border: rgba(0, 102, 255, 0.3);

  /* ==========================================
     COLORES PARA SCROLLBAR
     ========================================== */
  
  --scrollbar-track: #F1F5F9;
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-thumb-hover: #94A3B8;

  /* ==========================================
     COLORES PARA LOADING/SPINNER
     ========================================== */
  
  --spinner-primary: #0066FF;
  --spinner-secondary: rgba(0, 102, 255, 0.2);

  /* ==========================================
     COLORES PARA SEPARADORES/DIVIDERS
     ========================================== */
  
  --divider: #E2E8F0;
  --divider-dark: #CBD5E1;
  --divider-primary: rgba(0, 102, 255, 0.2);

  /* ==========================================
     COLORES PARA HERO SECTION
     ========================================== */
  
  --hero-bg: linear-gradient(135deg, rgba(0, 102, 255, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
  --hero-text: #FFFFFF;
  --hero-overlay: rgba(0, 0, 0, 0.4);
  --hero-glow: rgba(0, 102, 255, 0.3);

  /* ==========================================
     COLORES PARA ICONOS
     ========================================== */
  
  --icon-primary: #0066FF;
  --icon-secondary: #94A3B8;
  --icon-success: #10B981;
  --icon-warning: #F59E0B;
  --icon-error: #EF4444;
  --icon-hover: #0052CC;
}

/**
 * ============================================
 * CLASES UTILITARIAS DE COLORES
 * ============================================
 */

/* Fondos */
.bg-primary { background-color: var(--primary) !important; }
.bg-primary-50 { background-color: var(--primary-50) !important; }
.bg-primary-100 { background-color: var(--primary-100) !important; }
.bg-primary-200 { background-color: var(--primary-200) !important; }
.bg-primary-300 { background-color: var(--primary-300) !important; }
.bg-primary-400 { background-color: var(--primary-400) !important; }
.bg-primary-500 { background-color: var(--primary-500) !important; }
.bg-primary-600 { background-color: var(--primary-600) !important; }
.bg-primary-700 { background-color: var(--primary-700) !important; }
.bg-primary-800 { background-color: var(--primary-800) !important; }
.bg-primary-900 { background-color: var(--primary-900) !important; }

/* Texto */
.text-primary { color: var(--primary) !important; }
.text-primary-50 { color: var(--primary-50) !important; }
.text-primary-100 { color: var(--primary-100) !important; }
.text-primary-200 { color: var(--primary-200) !important; }
.text-primary-300 { color: var(--primary-300) !important; }
.text-primary-400 { color: var(--primary-400) !important; }
.text-primary-500 { color: var(--primary-500) !important; }
.text-primary-600 { color: var(--primary-600) !important; }
.text-primary-700 { color: var(--primary-700) !important; }
.text-primary-800 { color: var(--primary-800) !important; }
.text-primary-900 { color: var(--primary-900) !important; }

/* Bordes */
.border-primary { border-color: var(--primary) !important; }
.border-primary-50 { border-color: var(--primary-50) !important; }
.border-primary-100 { border-color: var(--primary-100) !important; }
.border-primary-200 { border-color: var(--primary-200) !important; }
.border-primary-300 { border-color: var(--primary-300) !important; }
.border-primary-400 { border-color: var(--primary-400) !important; }
.border-primary-500 { border-color: var(--primary-500) !important; }
.border-primary-600 { border-color: var(--primary-600) !important; }
.border-primary-700 { border-color: var(--primary-700) !important; }
.border-primary-800 { border-color: var(--primary-800) !important; }
.border-primary-900 { border-color: var(--primary-900) !important; }

/* Gradientes */
.gradient-primary { background: var(--gradient-primary) !important; }
.gradient-primary-reverse { background: var(--gradient-primary-reverse) !important; }
.gradient-turquoise { background: var(--gradient-turquoise) !important; }
.gradient-sky { background: var(--gradient-sky) !important; }
.gradient-hero { background: var(--gradient-hero) !important; }

/* Sombras */
.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-primary-glow { box-shadow: var(--shadow-primary-glow) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }