/*--------------------------------------------------------------
# Paleta de Colores Específica de LinkBG Group
# Basada en el análisis del sitio web oficial
--------------------------------------------------------------*/

/* ========================================
   PALETA DE COLORES LINKBG GROUP
   Extraída del sitio oficial: https://linkbggroup.com/
======================================== */

:root {
    /* COLORES PRINCIPALES IDENTIFICADOS */
    --linkbg-blue-primary: #1e73be;
    /* Azul principal corporativo */
    --linkbg-blue-dark: #2c3e50;
    /* Azul oscuro para textos */
    --linkbg-blue-light: #3498db;
    /* Azul claro para acentos */
    --linkbg-orange: #f39c12;
    /* Naranja para elementos destacados */
    --linkbg-orange-dark: #e67e22;
    /* Naranja oscuro para hover */

    /* COLORES NEUTROS */
    --linkbg-gray-light: #ecf0f1;
    /* Gris muy claro para fondos */
    --linkbg-gray-medium: #bdc3c7;
    /* Gris medio para bordes */
    --linkbg-gray-dark: #7f8c8d;
    /* Gris oscuro para texto secundario */
    --linkbg-white: #ffffff;
    /* Blanco puro */
    --linkbg-black: #2c3e50;
    /* Negro azulado para textos */

    /* COLORES DE ESTADO ADAPTADOS AL BRANDING */
    --linkbg-success: #27ae60;
    /* Verde success */
    --linkbg-warning: #f39c12;
    /* Naranja warning (mismo que accent) */
    --linkbg-danger: #e74c3c;
    /* Rojo danger */
    --linkbg-info: #1e73be;
    /* Azul info (mismo que principal) */
}

/* ========================================
   APLICACIÓN AUTOMÁTICA A VARIABLES EXISTENTES
======================================== */

:root {
    /* Sobreescribir variables del template con colores LinkBG */
    --background-color: var(--linkbg-white);
    --default-color: var(--linkbg-black);
    --heading-color: var(--linkbg-blue-primary);
    --accent-color: var(--linkbg-orange);
    --surface-color: var(--linkbg-white);
    --contrast-color: var(--linkbg-white);

    /* Variables de navegación */
    --nav-color: var(--linkbg-blue-dark);
    --nav-hover-color: var(--linkbg-blue-primary);
    --nav-mobile-background-color: var(--linkbg-white);
    --nav-dropdown-background-color: var(--linkbg-white);
    --nav-dropdown-color: var(--linkbg-blue-dark);
    --nav-dropdown-hover-color: var(--linkbg-blue-primary);
}

/* ========================================
   CLASES ESPECÍFICAS LINKBG
======================================== */

/* Textos con colores LinkBG */
.text-linkbg-primary {
    color: var(--linkbg-blue-primary) !important;
}

.text-linkbg-secondary {
    color: var(--linkbg-blue-dark) !important;
}

.text-linkbg-accent {
    color: var(--linkbg-orange) !important;
}

.text-linkbg-muted {
    color: var(--linkbg-gray-dark) !important;
}

/* Fondos con colores LinkBG */
.bg-linkbg-primary {
    background-color: var(--linkbg-blue-primary) !important;
}

.bg-linkbg-secondary {
    background-color: var(--linkbg-blue-dark) !important;
}

.bg-linkbg-accent {
    background-color: var(--linkbg-orange) !important;
}

.bg-linkbg-light {
    background-color: var(--linkbg-gray-light) !important;
}

/* Bordes con colores LinkBG */
.border-linkbg-primary {
    border-color: var(--linkbg-blue-primary) !important;
}

.border-linkbg-accent {
    border-color: var(--linkbg-orange) !important;
}

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

.btn-linkbg-primary {
    background-color: var(--linkbg-blue-primary);
    border-color: var(--linkbg-blue-primary);
    color: var(--linkbg-white);
    font-weight: 600;
}

.btn-linkbg-primary:hover,
.btn-linkbg-primary:focus {
    background-color: var(--linkbg-blue-dark);
    border-color: var(--linkbg-blue-dark);
    color: var(--linkbg-white);
}

.btn-linkbg-accent {
    background-color: var(--linkbg-orange);
    border-color: var(--linkbg-orange);
    color: var(--linkbg-white);
    font-weight: 600;
}

.btn-linkbg-accent:hover,
.btn-linkbg-accent:focus {
    background-color: var(--linkbg-orange-dark);
    border-color: var(--linkbg-orange-dark);
    color: var(--linkbg-white);
}

.btn-linkbg-outline-primary {
    color: var(--linkbg-blue-primary);
    border-color: var(--linkbg-blue-primary);
    background-color: transparent;
    font-weight: 600;
}

.btn-linkbg-outline-primary:hover,
.btn-linkbg-outline-primary:focus {
    background-color: var(--linkbg-blue-primary);
    border-color: var(--linkbg-blue-primary);
    color: var(--linkbg-white);
}

.btn-linkbg-outline-accent {
    color: var(--linkbg-orange);
    border-color: var(--linkbg-orange);
    background-color: transparent;
    font-weight: 600;
}

.btn-linkbg-outline-accent:hover,
.btn-linkbg-outline-accent:focus {
    background-color: var(--linkbg-orange);
    border-color: var(--linkbg-orange);
    color: var(--linkbg-white);
}

/* ========================================
   COMPONENTES ESPECÍFICOS LINKBG
======================================== */

/* Cards estilo LinkBG */
.card-linkbg {
    border: 1px solid var(--linkbg-gray-medium);
    box-shadow: 0 4px 6px var(--linkbg-blue-primary);
}

.card-linkbg .card-header {
    background-color: var(--linkbg-blue-primary);
    color: var(--linkbg-white);
    border-bottom: 1px solid var(--linkbg-blue-dark);
}

/* Alertas estilo LinkBG */
.alert-linkbg-primary {
    background-color: rgba(30, 115, 190, 0.1);
    border-color: var(--linkbg-blue-primary);
    color: var(--linkbg-blue-dark);
}

.alert-linkbg-accent {
    background-color: rgba(243, 156, 18, 0.1);
    border-color: var(--linkbg-orange);
    color: var(--linkbg-orange-dark);
}

/* ========================================
   EFECTOS Y TRANSICIONES LINKBG
======================================== */

.linkbg-hover-effect {
    transition: all 0.3s ease;
}

.linkbg-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(30, 115, 190, 0.2);
}

/* Gradientes LinkBG */
.bg-linkbg-gradient {
    background: linear-gradient(135deg, var(--linkbg-blue-primary) 0%, var(--linkbg-blue-dark) 100%);
}

.bg-linkbg-gradient-accent {
    background: linear-gradient(135deg, var(--linkbg-orange) 0%, var(--linkbg-orange-dark) 100%);
}