/**
 * Theme Toggle CSS - Bootstrap 5.3.x Native - MINIMALISTA
 * Solo header siempre dark + transiciones
 */

/* ================================================
   HEADER SIEMPRE DARK - No importa el tema global
   ================================================ */
.site-header,
.site-header.bg-body,
.site-header.bg-light {
    background-color: #212529 !important;
    color: #ffffff !important;
}

.site-header .navbar,
.site-header .navbar.bg-body,
.site-header .navbar.bg-light {
    background-color: #212529 !important;
}

.site-header .btn-link,
.site-header .btn-link:hover,
.site-header .btn-link:focus {
    color: #ffffff !important;
}

.site-header .contact-numbers a {
    color: #ffffff !important;
}

.site-header .navbar-toggler .fa-bars {
    color: #ffffff !important;
}

.site-header .form-control {
    background-color: #ffffff;
    color: #212529;
    border-color: #ced4da;
}

/* Botón toggle theme */
.theme-toggle-btn {
    transition: all 0.2s ease-in-out;
    color: #ffffff !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Asegurar que todos los iconos del header sean blancos */
.site-header i,
.site-header .fa-solid,
.site-header .fas {
    color: #ffffff !important;
}

/* Asegurar que los links del header sean blancos */
.site-header a,
.site-header .navbar-nav .nav-link {
    color: #ffffff !important;
}

.site-header a:hover,
.site-header .navbar-nav .nav-link:hover {
    color: #f8f9fa !important;
}

/* ================================================
   TRANSICIONES SUAVES 
   ================================================ */
html {
    transition: color-scheme 0.3s ease;
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ================================================
   SOLO ARREGLOS CRÍTICOS PARA MODO OSCURO
   Bootstrap 5.3 maneja la mayoría automáticamente
   ================================================ */

/* Solo si Bootstrap no maneja estos casos específicos */
[data-bs-theme="dark"] .text-body {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bg-body {
    background-color: var(--bs-body-bg) !important;
}

/* Badges específicos que necesitan ajuste en modo oscuro */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: #6c757d !important;
    color: #ffffff !important;
}