/*--------------------------------------------------------------
# Archivo de Configuración de Colores CSS (Alternativa Simple)
# Para usar directamente en HTML sin compilación SCSS
--------------------------------------------------------------*/

/* ========================================
   VARIABLES CSS PERSONALIZADAS
   Modifica estos valores para cambiar los colores globalmente
======================================== */

:root {
    /* ========================================
     COLORES PRINCIPALES (BRAND COLORS) - LINKBG GROUP
  ======================================== */
    --brand-primary: #1e73be;
    /* Azul principal de LinkBG Group */
    --brand-secondary: #2c3e50;
    /* Azul oscuro/gris para elementos secundarios */
    --brand-accent: #f39c12;
    /* Naranja/dorado para elementos destacados */

    /* ========================================
     COLORES DE FONDO - LINKBG GROUP
  ======================================== */
    --bg-main: #ffffff;
    /* Fondo principal del sitio */
    --bg-alt: #f8f9fa;
    /* Fondo alternativo (secciones) - Gris muy claro */
    --bg-dark: #2c3e50;
    /* Fondo oscuro - Azul oscuro corporativo */
    --bg-surface: #ffffff;
    /* Fondo de tarjetas y elementos */
    --bg-surface-dark: #34495e;
    /* Fondo de elementos en modo oscuro */

    /* ========================================
     COLORES DE TEXTO - LINKBG GROUP
  ======================================== */
    --text-main: #2c3e50;
    /* Texto principal - Azul oscuro profesional */
    --text-heading: #1e73be;
    /* Títulos y encabezados - Azul principal */
    --text-light: #ffffff;
    /* Texto claro */
    --text-muted: #7f8c8d;
    /* Texto secundario - Gris medio */

    /* ========================================
     COLORES DE NAVEGACIÓN - LINKBG GROUP
  ======================================== */
    --nav-text: #2c3e50;
    /* Texto del menú - Azul oscuro */
    --nav-text-hover: #1e73be;
    /* Texto del menú al hacer hover - Azul principal */
    --nav-bg: #ffffff;
    /* Fondo del menú */
    --nav-dropdown-bg: #ffffff;
    /* Fondo del dropdown */
    --nav-dropdown-text: #2c3e50;
    /* Texto del dropdown */
    --nav-dropdown-hover: #1e73be;
    /* Hover del dropdown */

    /* ========================================
     COLORES DE ESTADO - LINKBG GROUP
  ======================================== */
    --color-success: #27ae60;
    /* Verde para éxito - Más suave */
    --color-error: #e74c3c;
    /* Rojo para errores - Más suave */
    --color-warning: #f39c12;
    /* Naranja para advertencias - Acorde al branding */
    --color-info: #1e73be;
    /* Azul para información - Mismo que el principal */

    /* ========================================
     COLORES ADICIONALES - LINKBG GROUP
  ======================================== */
    --border-main: #bdc3c7;
    /* Color de bordes - Gris claro */
    --shadow-main: rgba(30, 115, 190, 0.1);
    /* Color de sombras - Azul con transparencia */
    --overlay-main: rgba(44, 62, 80, 0.8);
    /* Color de overlay - Azul oscuro con transparencia */
}

/* ========================================
   ACTUALIZACIÓN DE VARIABLES EXISTENTES
   Aquí actualizamos las variables que ya usa tu CSS
======================================== */

:root {
    /* Variables de color existentes actualizadas */
    --background-color: var(--bg-main);
    --default-color: var(--text-main);
    --heading-color: var(--text-heading);
    --accent-color: var(--brand-primary);
    --surface-color: var(--bg-surface);
    --contrast-color: var(--text-light);

    /* Variables de navegación existentes */
    --nav-color: var(--nav-text);
    --nav-hover-color: var(--nav-text-hover);
    --nav-mobile-background-color: var(--nav-bg);
    --nav-dropdown-background-color: var(--nav-dropdown-bg);
    --nav-dropdown-color: var(--nav-dropdown-text);
    --nav-dropdown-hover-color: var(--nav-dropdown-hover);
}

/* ========================================
   CLASES UTILITARIAS ADICIONALES
======================================== */

/* Clases para aplicar colores de marca */
.text-brand-primary {
    color: var(--brand-primary) !important;
}

.text-brand-secondary {
    color: var(--brand-secondary) !important;
}

.bg-brand-primary {
    background-color: var(--brand-primary) !important;
}

.bg-brand-secondary {
    background-color: var(--brand-secondary) !important;
}

/* Clases para colores de estado */
.text-success-custom {
    color: var(--color-success) !important;
}

.text-error-custom {
    color: var(--color-error) !important;
}

.text-warning-custom {
    color: var(--color-warning) !important;
}

.text-info-custom {
    color: var(--color-info) !important;
}

.bg-success-custom {
    background-color: var(--color-success) !important;
}

.bg-error-custom {
    background-color: var(--color-error) !important;
}

.bg-warning-custom {
    background-color: var(--color-warning) !important;
}

.bg-info-custom {
    background-color: var(--color-info) !important;
}

/* ========================================
   BOTONES PERSONALIZADOS
======================================== */

.btn-brand-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-light);
}

.btn-brand-primary:hover,
.btn-brand-primary:focus {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--text-light);
}

.btn-brand-outline {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: transparent;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-light);
}