/*--------------------------------------------------------------
# Header Color Override - SOLO para la barra lateral
--------------------------------------------------------------*/

/* Forzar color del header/barra lateral #4a9181 */
header#header,
#header,
.header,
header.header,
#header.header,
.header#header,
header#header.header,
#header.header.dark-background,
header#header.header.dark-background.d-flex.flex-column {
    background: #4a9181 !important;
    background-color: #4a9181 !important;
}

/* Variables CSS de navegación */
:root {
    --nav-mobile-background-color: #4a9181 !important;
    --nav-dropdown-background-color: #4a9181 !important;
}

.dark-background {
    --background-color: #4a9181 !important;
    --surface-color: #3d7a6c !important;
}

/* Títulos y iconos del menú en color #1d2531 */
#header .navmenu a,
#header .navmenu a:focus {
    color: #1d2531 !important;
}

#header .navmenu a .navicon,
#header .navmenu a:focus .navicon,
#header .navmenu a .toggle-dropdown,
#header .navmenu a:focus .toggle-dropdown {
    color: #1d2531 !important;
}

/* Estados hover y active en blanco */
#header .navmenu a:hover,
#header .navmenu .active,
#header .navmenu .active:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

#header .navmenu a:hover .navicon,
#header .navmenu .active .navicon,
#header .navmenu .active:focus .navicon,
#header .navmenu a:hover .toggle-dropdown,
#header .navmenu .active .toggle-dropdown,
#header .navmenu .active:focus .toggle-dropdown {
    color: #ffffff !important;
}

/* Botón toggle en color #1d2531 */
.navbar-toggle {
    background: #1d2531 !important;
}

.navbar-toggle:hover {
    background: #0f1419 !important;
}

/* Espaciado para los módulos del menú */
#header #navmenu {
    margin-top: 3px;
}

#header #navmenu ul li {
    margin-bottom: 3px;
}

/* Contenedor flex para logo y redes sociales */
.logo-social-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 10px 0 15px 0;
    gap: 8px;
}

.logo-social-container .profile-img {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.logo-social-container .profile-img img {
    display: block;
    margin: 0 auto !important;
    max-width: 100%;
    height: auto;
}

.logo-social-container .social-links {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ícono de búsqueda en color #1d2531 */
.search-container .search-icon-bg {
    background-color: #1d2531 !important;
    border: 1px solid #1d2531 !important;
}

/* Buscador con padding lateral de 2px y bordes redondeados */
#header .search-container {
    padding: 15px 2px 20px 2px !important;
    margin: 0 0 20px 0 !important;
    border-bottom: 2px solid rgba(29, 37, 49, 0.4) !important;
}

#header .search-container .input-group {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

#header .search-container .input-group .search-icon-bg {
    border-radius: 8px 0 0 8px !important;
}

#header .search-container .input-group .form-control {
    border-radius: 0 !important;
}

#header .search-container .input-group .btn {
    border-radius: 0 8px 8px 0 !important;
}

/* Resultados de búsqueda con padding y bordes redondeados */
#header .search-results {
    left: 2px !important;
    right: 2px !important;
    border-radius: 8px !important;
    margin-top: 5px !important;
}

/* Espacio adicional después del buscador antes del menú */
#header .navmenu {
    padding-top: 10px;
}