/* ========================================
   SISTEMA DE DISEÑO OPTIMIZADO - EL NEGRO
   Integrado con W3.CSS para control total
   ======================================== */

:root {
  /* ========================================
     COLORES PRINCIPALES (Marca)
     ======================================== */
  --primary: #F88200;           /* Naranja EL NEGRO */
  --primary-light: #FFA940;     /* Naranja más claro */
  --primary-dark: #D66F00;       /* Naranja más oscuro */
  --primary-hover: #FFB100;     /* Amarillo/dorado hover */
  
  --secondary: #ACACAC;         /* Gris plata */
  --secondary-light: #BEBEBE;    /* Gris plata más claro */
  --secondary-dark: #9A9A9A;     /* Gris plata más oscuro */
  
  --tertiary: #151525;          /* Azul oscuro elegante */
  --tertiary-light: #2A2A3A;    /* Azul más claro */
  --tertiary-dark: #0A0A15;     /* Azul más oscuro */
  
  /* ========================================
     COLORES NEUTROS (Fondos y Textos)
     ======================================== */
  --white: #FFFFFF;             /* Blanco puro */
  --white-cream: #FEFEFE;       /* Blanco con suave tinte crema */
  --gray-50: #F8F9FA;           /* Gris muy claro */
  --gray-100: #F1F3F5;          /* Gris claro */
  --gray-200: #E9ECEF;          /* Gris medio claro */
  --gray-300: #DEE2E6;          /* Gris medio */
  --gray-400: #CED4DA;          /* Gris medio oscuro */
  --gray-500: #ADB5BD;          /* Gris oscuro */
  --gray-600: #6C757D;          /* Gráceo */
  --gray-700: #495057;          /* Gráceo oscuro */
  --gray-800: #343A40;          /* Gris muy oscuro */
  --gray-900: #212529;          /* Gris casi negro */
  --black: #000000;             /* Negro puro */
  
  /* ========================================
     SISTEMA DE FONDOS (Integrado con W3.CSS)
     ======================================== */
  --bg-primary: var(--white);                    /* Fondo principal */
  --bg-secondary: var(--gray-50);                /* Fondo secundario */
  --bg-tertiary: var(--gray-100);               /* Fondo terciario */
  --bg-dark: var(--tertiary);                    /* Fondo oscuro */
  --bg-light: var(--white-cream);               /* Fondo claro */
  --bg-accent: var(--primary);                  /* Fondo acento */
  --bg-accent-light: var(--primary-light);      /* Fondo acento claro */
  --bg-overlay: rgba(21, 21, 37, 0.8);         /* Overlay oscuro */
  --bg-overlay-light: rgba(255, 255, 255, 0.9); /* Overlay claro */
  
  /* ========================================
     CONTROL DE GRADIENTES (Activar/Desactivar)
     ======================================== */
  --gradient-enabled: 0                /* 1 = activado, 0 = desactivado */
  
  /* ========================================
     GRADIENTES (Optimizados con variables y control)
     ======================================== */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-primary-reverse: linear-gradient(135deg, var(--secondary), var(--primary));
  --gradient-dark: linear-gradient(135deg, var(--tertiary), var(--tertiary-dark));
  --gradient-light: linear-gradient(135deg, var(--white), var(--gray-50));
  --gradient-overlay: linear-gradient(transparent, var(--bg-overlay));
  --gradient-hero: linear-gradient(135deg, var(--primary-dark), var(--primary), var(--secondary));
  
  /* Colores sólidos alternativos (cuando gradientes están desactivados) */
  --solid-primary: var(--primary);
  --solid-primary-reverse: var(--secondary);
  --solid-dark: var(--tertiary);
  --solid-light: var(--gray-50);
  --solid-hero: var(--primary);
  
  /* ========================================
     SISTEMA DE ICONOS (FontAwesome)
     ======================================== */
  .fa, .fas, .far, .fab, .fal, .fad, .fass, .fasr, .fassl {
    font-family: 'Font Awesome 6 Free', sans-serif !important;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none;
    text-decoration: inherit;
    text-align: center;
    vertical-align: middle;
  }
  
  .far {
    font-weight: 400;
  }
  
  .fab {
    font-family: 'Font Awesome 6 Brands', sans-serif !important;
  }
  
  .fass {
    font-family: 'Font Awesome 6 Sharp', sans-serif !important;
  }
  
  /* Asegurar visibilidad de iconos con diferentes variantes */
  .fa-solid {
    font-family: 'Font Awesome 6 Free', sans-serif !important;
    font-weight: 900;
  }
  
  .fa-regular {
    font-family: 'Font Awesome 6 Free', sans-serif !important;
    font-weight: 400;
  }
  
  .fa-light {
    font-family: 'Font Awesome 6 Free', sans-serif !important;
    font-weight: 300;
  }
  
  .fa-thin {
    font-family: 'Font Awesome 6 Free', sans-serif !important;
    font-weight: 100;
  }
  
  /* ========================================
     TAMAÑOS DE FUENTE (Escala consistente)
     ======================================== */
  --font-size-xs: 0.75rem;        /* 12px */
  --font-size-sm: 0.875rem;       /* 14px */
  --font-size-base: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;       /* 18px */
  --font-size-xl: 1.25rem;        /* 20px */
  --font-size-2xl: 1.5rem;        /* 24px */
  --font-size-3xl: 1.875rem;      /* 30px */
  --font-size-4xl: 2.25rem;       /* 36px */
  --font-size-5xl: 3rem;          /* 48px */
  
  /* ========================================
     PESOS DE FUENTE
     ======================================== */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ========================================
     ALTURAS DE LÍNEA
     ======================================== */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* ========================================
     COLORES DE TEXTO
     ======================================== */
  --text-primary: var(--gray-900);      /* Texto principal */
  --text-secondary: var(--gray-600);    /* Texto secundario */
  --text-muted: var(--gray-500);        /* Texto muted */
  --text-light: var(--gray-100);         /* Texto sobre fondos oscuros */
  --text-white: var(--white);            /* Texto blanco */
  --text-accent: var(--primary);         /* Texto acento */
  --text-link: var(--primary);           /* Enlaces */
  --text-link-hover: var(--primary-dark); /* Enlaces hover */
  
  /* ========================================
     SOMBRAS (Integradas con W3.CSS)
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  
  /* ========================================
     BORDES Y RADIOS
     ======================================== */
  --border-width: 1px;
  --border-color: var(--gray-200);
  --border-color-light: var(--gray-100);
  --border-color-dark: var(--gray-300);
  
  --radius-sm: 0.25rem;     /* 4px */
  --radius: 0.375rem;       /* 6px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;
  
  /* ========================================
     ESPACIADO (Integrado con W3.CSS)
     ======================================== */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing: 1rem;          /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  
  /* ========================================
     TRANSICIONES Y ANIMACIONES
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ========================================
     Z-INDEX (Capas)
     ======================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
   CLASES UTILITARIAS (Integradas con W3.CSS)
   ======================================== */

/* Fondos */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-accent { background-color: var(--bg-accent) !important; }
.bg-accent-light { background-color: var(--bg-accent-light) !important; }

/* Gradientes */
.bg-gradient-primary { 
  background: var(--gradient-primary) !important; 
}
.bg-gradient-primary-reverse { 
  background: var(--gradient-primary-reverse) !important; 
}
.bg-gradient-dark { 
  background: var(--gradient-dark) !important; 
}
.bg-gradient-light { 
  background: var(--gradient-light) !important; 
}
.bg-gradient-hero { 
  background: var(--gradient-hero) !important; 
}

/* Colores sólidos (alternativa a gradientes) */
.bg-solid-primary { 
  background: var(--solid-primary) !important; 
}
.bg-solid-primary-reverse { 
  background: var(--solid-primary-reverse) !important; 
}
.bg-solid-dark { 
  background: var(--solid-dark) !important; 
}
.bg-solid-light { 
  background: var(--solid-light) !important; 
}
.bg-solid-hero { 
  background: var(--solid-hero) !important; 
}

/* Clases inteligentes (cambian automáticamente según --gradient-enabled) */
.bg-smart-primary { 
  background: var(--gradient-primary) !important; 
}
.bg-smart-primary-reverse { 
  background: var(--gradient-primary-reverse) !important; 
}
.bg-smart-dark { 
  background: var(--gradient-dark) !important; 
}
.bg-smart-light { 
  background: var(--gradient-light) !important; 
}
.bg-smart-hero { 
  background: var(--gradient-hero) !important; 
}

/* Clases para gradientes desactivados (usar manualmente si se necesitan colores sólidos) */
.bg-solid-primary { 
  background: var(--solid-primary) !important; 
}
.bg-solid-primary-reverse { 
  background: var(--solid-primary-reverse) !important; 
}
.bg-solid-dark { 
  background: var(--solid-dark) !important; 
}
.bg-solid-light { 
  background: var(--solid-light) !important; 
}
.bg-solid-hero { 
  background: var(--solid-hero) !important; 
}

/* Textos */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-light { color: var(--text-light) !important; }
.text-white { color: var(--text-white) !important; }
.text-accent { color: var(--text-accent) !important; }

/* Fuentes */
.font-primary { font-family: var(--font-family-primary) !important; }
.font-secondary { font-family: var(--font-family-secondary) !important; }
.font-mono { font-family: var(--font-family-monospace) !important; }
.font-display { font-family: var(--font-family-display) !important; }

/* Tamaños de fuente */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }

/* Pesos de fuente */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* Sombras */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !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; }
.shadow-inner { box-shadow: var(--shadow-inner) !important; }

/* Bordes */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ========================================
   ESTILOS BASE (Optimizados)
   ======================================== */

main {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* ========================================
   COMPONENTES REUTILIZABLES
   ======================================== */

/* Cards */
.card {
  background: var(--bg-primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Botones */
.btn {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: pointer;
}

.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
  border: none;
}

.btn-primary:hover {
  background: var(--gradient-primary-reverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Badges */
.badge {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.badge-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
}

/* Componentes con gradientes controlables */
.btn-smart-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
  border: none;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: pointer;
}

.btn-smart-primary:hover {
  background: var(--gradient-primary-reverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.badge-smart-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Sobreescribir con colores sólidos cuando gradientes están desactivados */
@supports not (--gradient-enabled: 1) {
  .btn-smart-primary {
    background: var(--solid-primary);
  }
  
  .btn-smart-primary:hover {
    background: var(--solid-primary-reverse);
  }
  
  .badge-smart-primary {
    background: var(--solid-primary);
  }
  
  .gradiente {
    background: var(--solid-primary) !important;
  }
  
  .gradiente:hover {
    background: var(--solid-primary-reverse) !important;
  }
  
  .floating-btn {
    background: var(--solid-primary) !important;
  }
  
  .floating-btn:hover {
    background: var(--solid-primary-reverse) !important;
  }
}

/* ========================================
   INTEGRACIÓN CON W3.CSS OPTIMIZADA
   ======================================== */

/* Sobreescribir clases w3.css con variables del sistema */
.w3-primary { 
  background: var(--solid-primary) !important; 
  color: var(--text-white) !important; 
  border: 1px solid var(--primary) !important;
}
.w3-secondary { 
  background: var(--solid-primary-reverse) !important; 
  color: var(--text-white) !important; 
  border: 1px solid var(--secondary) !important;
}
.w3-orange { 
  background: var(--solid-primary) !important; 
  color: var(--text-white) !important; 
}
.w3-blue { 
  background: var(--solid-dark) !important; 
  color: var(--text-white) !important; 
}
.w3-green { 
  background: #28a745 !important; 
  color: var(--text-white) !important; 
}
.w3-red { 
  background: #dc3545 !important; 
  color: var(--text-white) !important; 
}
.w3-yellow { 
  background: #ffc107 !important; 
  color: #212529 !important; 
}

/* Textos optimizados */
.w3-text-primary { 
  color: var(--primary) !important; 
}
.w3-text-secondary { 
  color: var(--secondary) !important; 
}
.w3-text-tertiary { 
  color: var(--tertiary) !important; 
}

/* Hover states para w3 - Eliminados para mantener colores fijos */
.w3-primary:hover { 
  /* background: var(--solid-primary-reverse) !important;  - Eliminado */
}
.w3-secondary:hover { 
  /* background: var(--solid-primary) !important; - Eliminado */
}
.w3-orange:hover { 
  /* background: var(--solid-primary-reverse) !important; - Eliminado */
}
.w3-blue:hover { 
  background: var(--primary) !important; 
}

/* ========================================
   RESPONSIVE DESIGN (Integrado con W3.CSS)
   ======================================== */

@media (max-width: 768px) {
  :root {
    --font-size-base: 0.875rem;
    --spacing: 0.75rem;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-base: 0.8rem;
    --spacing: 0.5rem;
  }
}