/**
 * Override de Colores Azul Profesional para Gastronomía
 * Basado en el azul de subir.php (#2c5aa0)
 * Coherente en toda la web: chat, botones, productos, carrito, etc.
 */

/* Importar sistema de colores moderno */
@import url('color-system.css');

/* ========== OVERRIDE DE COLORES PRINCIPALES ========== */

/* Headers y Navegación - ADAPTADO AL TEMA */
header {
    background: linear-gradient(135deg, var(--color-primary-light, #4a7bc8) 0%, var(--color-primary, #2c5aa0) 100%) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 22px 60px -30px rgba(var(--primary-dark-rgb, 30, 61, 115), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

header .logo h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Botones Principales - ADAPTADO AL TEMA */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%) !important;
    border-color: var(--color-primary-dark, #1e3d73) !important;
    color: var(--color-surface, #FFFFFF) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb, 44, 90, 160), 0.3) !important;
    font-weight: 600 !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark, #1e3d73) 0%, var(--color-primary, #2c5aa0) 100%) !important;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb, 44, 90, 160), 0.5) !important;
    transform: translateY(-2px) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background: var(--color-surface, #FFFFFF) !important;
    border-color: var(--color-primary, #2c5aa0) !important;
    color: var(--color-primary, #2c5aa0) !important;
    font-weight: 600 !important;
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
    background: linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

/* Enlaces - ADAPTADO AL TEMA (excepto footer) */
a:not(footer a):not(.footer a) {
    color: var(--color-primary, #2c5aa0) !important;
}

a:not(footer a):not(.footer a):hover {
    color: var(--color-primary-dark, #1e3d73) !important;
}

/* Títulos y Encabezados */
h1, h2, h3, h4, h5, h6 {
    color: #2c3e50 !important;
}

h1 .mark,
h2 .mark,
h3 .mark {
    color: var(--color-primary, #2c5aa0) !important;
}

/* Selección de texto - ADAPTADO AL TEMA */
::selection {
    background: var(--color-primary, #2c5aa0) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

::-moz-selection {
    background: var(--color-primary, #2c5aa0) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

/* Cards y Paneles - ADAPTADO AL TEMA */
.card,
.panel,
.about-section,
.menu-section {
    background: var(--color-surface, #FFFFFF) !important;
    border-color: rgba(var(--primary-rgb, 44, 90, 160), 0.2) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 44, 90, 160), 0.12) !important;
}

.card:hover,
.panel:hover {
    box-shadow: 0 8px 24px rgba(var(--primary-rgb, 44, 90, 160), 0.2) !important;
    border-color: var(--color-primary, #2c5aa0) !important;
}

/* Inputs y Formularios */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-color: rgba(var(--primary-rgb, 44, 90, 160), 0.3) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary, #2c5aa0) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 44, 90, 160), 0.1) !important;
}

/* Badges y Etiquetas */
.badge,
.tag,
.achievement {
    background: linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

/* Carrito Flotante - ADAPTADO AL TEMA */
.floating-cart {
    background: var(--color-surface, #FFFFFF) !important;
    border-color: var(--color-primary, #2c5aa0) !important;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb, 44, 90, 160), 0.25) !important;
}

.floating-cart .cart-header {
    background: linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

/* Productos */
.product-card {
    border-color: rgba(44, 90, 160, 0.2) !important;
}

.product-card:hover {
    border-color: #2c5aa0 !important;
    box-shadow: 0 8px 24px rgba(44, 90, 160, 0.2) !important;
}

.product-price {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Footer - Degradado Elegante con Texto Blanco */
footer,
.footer {
    background: linear-gradient(135deg, #1e3d73 0%, #2c5aa0 50%, #1e3d73 100%) !important;
    color: #FFFFFF !important;
    border-top: 3px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(30, 61, 115, 0.3) !important;
}

footer *,
.footer * {
    color: #FFFFFF !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

footer p,
footer li,
footer span,
.footer p,
.footer li,
.footer span {
    color: #FFFFFF !important;
    opacity: 0.95 !important;
}

footer a,
.footer a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

footer a:hover,
.footer a:hover {
    color: #f0e6d2 !important; /* Dorado claro para hover */
    border-bottom-color: #f0e6d2 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

footer ul li,
.footer ul li {
    color: #FFFFFF !important;
}

footer i,
.footer i {
    color: #FFFFFF !important;
}

/* Chat - ADAPTADO AL TEMA */
.chat-container {
    /* Los colores del borde ahora los maneja theme-loader.php dinámicamente con máxima prioridad */
    /* border-color: var(--color-primary, #2c5aa0) !important; */
}

.chat-header {
    background: linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

.chat-message.bot-message {
    /* background: var(--color-background, #f8f9fa) !important; */
    /* border-left-color: var(--color-primary, #2c5aa0) !important; */
    /* Los colores ahora los maneja theme-loader.php dinámicamente con máxima prioridad */
}

/* Burbujas de chat - ADAPTADAS AL TEMA */
/* NOTA: Los estilos dinámicos del theme-loader.php tienen prioridad */
/* Estos estilos solo se aplican si las variables CSS del tema no están disponibles */
/* Los colores ahora los maneja theme-loader.php dinámicamente con máxima prioridad */
.chat-message.user-message {
    /* background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%)) !important; */
    /* color: var(--color-surface, #FFFFFF) !important; */
}

/* Burbujas de chat */
/* Los colores ahora los maneja theme-loader.php dinámicamente con máxima prioridad */
/* NO definir background, color, border aquí - se maneja en theme-loader.php */
.msg.bot .bubble {
    /* background: var(--color-background, #f8f9fa) !important; */
    /* border-left: 4px solid var(--color-primary, #2c5aa0) !important; */
    /* color: var(--color-text-primary, #2c3e50) !important; */
}

.msg.user .bubble {
    /* background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%)) !important; */
    /* background-image: var(--gradient-primary, linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%)) !important; */
    /* color: var(--color-surface, #FFFFFF) !important; */
}

/* Scroll to Top - ADAPTADO AL TEMA */
#scrollToTop {
    background: linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%) !important;
    border-color: var(--color-primary-dark, #1e3d73) !important;
    box-shadow: 0 24px 46px -18px rgba(var(--primary-dark-rgb, 30, 61, 115), 0.6) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

#scrollToTop:hover {
    background: linear-gradient(135deg, var(--color-primary-dark, #1e3d73) 0%, var(--color-primary, #2c5aa0) 100%) !important;
    box-shadow: 0 28px 52px -16px rgba(var(--primary-dark-rgb, 30, 61, 115), 0.65) !important;
    color: var(--color-surface, #FFFFFF) !important;
}

/* Menú Hamburguesa - ADAPTADO AL TEMA */
.hamburger-line {
    background-color: var(--color-primary-dark, #1e3d73) !important;
}

.hamburger-btn:hover .hamburger-line,
.hamburger-btn.active .hamburger-line {
    background-color: var(--color-primary-light, #4a7bc8) !important;
}

/* Categorías y Filtros */
.category-btn,
.filter-btn {
    border-color: rgba(44, 90, 160, 0.3) !important;
    color: #2c3e50 !important;
}

.category-btn:hover,
.filter-btn:hover,
.category-btn.active,
.filter-btn.active {
    background: linear-gradient(135deg, var(--color-primary, #2c5aa0) 0%, var(--color-primary-light, #4a7bc8) 100%) !important;
    color: var(--color-surface, #FFFFFF) !important;
    border-color: var(--color-primary, #2c5aa0) !important;
}

/* Líneas y separadores */
hr,
.separator,
.divider {
    border-color: rgba(44, 90, 160, 0.2) !important;
}

/* Alertas y Notificaciones */
.alert-success {
    background: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.alert-warning {
    background: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

.alert-error,
.alert-danger {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

.alert-info {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

/* Loading y Spinners */
.spinner,
.loader {
    border-top-color: #2c5aa0 !important;
    border-right-color: #4a7bc8 !important;
}

/* Gradientes de Fondo Modernos */
.hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%) !important;
}

.hero h2 {
    color: #2c3e50 !important;
}

.hero strong {
    color: #2c5aa0 !important;
}

/* Body background coherente */
body {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%) !important;
    color: #2c3e50 !important;
}

/* Responsive - Mantener consistencia en móviles */
@media (max-width: 768px) {
    header {
        background: linear-gradient(135deg, #3278bf 0%, #2e68a3 35%, #3461a7 50%, #4a7bb8 70%, #b8d0e5 90%, #d6e1ed 100%) !important;
    }
    
    header .logo h1 {
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }
    
    .btn-primary,
    button.btn-primary,
    a.btn-primary {
        background: linear-gradient(135deg, #2c5aa0 0%, #4a7bc8 100%) !important;
        color: #FFFFFF !important;
    }
}

/* Animaciones suaves con nuevos colores */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(44, 90, 160, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(44, 90, 160, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Override específico para elementos con clases antiguas */
.gold,
.text-gold {
    color: #d4af37 !important;
}

.bg-gold {
    background-color: #d4af37 !important;
}

.blue,
.text-blue {
    color: var(--color-primary, #2c5aa0) !important;
}

.bg-blue {
    background-color: var(--color-primary, #2c5aa0) !important;
}

/* Mejoras de accesibilidad - ADAPTADO AL TEMA */
:focus-visible {
    outline: 3px solid var(--color-primary, #2c5aa0) !important;
    outline-offset: 2px !important;
}

/* Transiciones suaves para cambios de color */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* Excepciones para elementos que no deben tener transición */
input,
textarea,
select,
button,
a {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}