/* ================================================
   CUSTOM HEADER STYLES
   ================================================ */

/* ================================================
   REDES SOCIALES - Color Azul
   ================================================ */
.header-2 .bottom-header.bottom-2 .header-right .search-icon i {
    background-color: #004cff;
	}
/* Estilos para los iconos de redes sociales */
.header-social li a {
    color: #1DA1F2; /* Azul Twitter/X */
    transition: all 0.3s ease;
}

/* Hover para Twitter/X */
.header-social li a.twitter:hover {
    color: #0d8bd9;
    transform: translateY(-2px);
}

/* Hover para TikTok */
.header-social li a.tiktok:hover {
    color: #0088cc;
    transform: translateY(-2px);
}

/* Si quieres un color azul uniforme para todas las redes */
.header-social li a i {
    color: #1DA1F2;
    font-size: 18px;
    transition: all 0.3s ease;
}

.header-social li a:hover i {
    color: #0d8bd9;
    transform: scale(1.1);
}


/* ================================================
   MEJORAS DEL MENÚ - Hover Effects
   ================================================ */

/* Menú principal - Top Bar Navigation */
.tobar-nav li a {
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.tobar-nav li a:hover {
    color: #1DA1F2;
}

.tobar-nav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #1DA1F2;
    transition: width 0.3s ease;
}

.tobar-nav li a:hover::after {
    width: 100%;
}


/* Menú de navegación principal */
.theme-navigation-wrap.main-menu li a {
    position: relative;
    padding: 10px 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

.theme-navigation-wrap.main-menu li a:hover {
    color: #1DA1F2;
}

/* Efecto underline animado */
.theme-navigation-wrap.main-menu li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #1DA1F2, #0d8bd9);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.theme-navigation-wrap.main-menu li a:hover::before {
    width: 80%;
}

/* Efecto para el menú activo/current */
.theme-navigation-wrap.main-menu li.current-menu-item > a,
.theme-navigation-wrap.main-menu li.current_page_item > a {
    color: #1DA1F2;
}

.theme-navigation-wrap.main-menu li.current-menu-item > a::before,
.theme-navigation-wrap.main-menu li.current_page_item > a::before {
    width: 80%;
}


/* ================================================
   DROPDOWN MENÚ - Submenús
   ================================================ */

.theme-navigation-wrap.main-menu li ul.sub-menu {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-top: 3px solid #1DA1F2;
}

.theme-navigation-wrap.main-menu li ul.sub-menu li a {
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.theme-navigation-wrap.main-menu li ul.sub-menu li a:hover {
    background: #f8f9fa;
    color: #1DA1F2;
    padding-left: 25px;
}

.theme-navigation-wrap.main-menu li ul.sub-menu li a::before {
    display: none; /* Removemos el underline en submenús */
}


/* ================================================
   SELECTOR DE IDIOMA - Polylang
   ================================================ */

/* Dropdown de idioma en desktop */
.lang-switcher-dropdown select,
.lang-switcher-mobile-dropdown select {
    transition: all 0.3s ease;
    border-color: #ddd;
}

.lang-switcher-dropdown select:hover,
.lang-switcher-mobile-dropdown select:hover {
    border-color: #1DA1F2;
    box-shadow: 0 0 5px rgba(29, 161, 242, 0.3);
}

.lang-switcher-dropdown select:focus,
.lang-switcher-mobile-dropdown select:focus {
    border-color: #1DA1F2;
    outline: none;
    box-shadow: 0 0 8px rgba(29, 161, 242, 0.4);
}


/* ================================================
   BOTONES DEL HEADER
   ================================================ */

/* Botón de búsqueda - FONDO AZUL #004cff */
.header-2 .bottom-header.bottom-2 .header-right .search-icon i {
    background-color: #004cff !important;
    color: #ffffff !important; /* Texto blanco para contraste */
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.header-2 .bottom-header.bottom-2 .header-right .search-icon:hover i {
    background-color: #0039cc !important; /* Azul más oscuro al hover */
    transform: scale(1.1);
}

/* Botón de usuario */
.user i {
    transition: all 0.3s ease;
}

.user:hover i {
    color: #1DA1F2;
    transform: scale(1.1);
}

/* Toggle de modo oscuro */
.toggle-switch input:checked + .slider {
    background-color: #1DA1F2;
}


/* ================================================
   MENÚ MÓVIL
   ================================================ */

.mobile-menu-icon .burger-menu .line-menu {
    transition: all 0.3s ease;
}

.mobile-menu-icon:hover .burger-menu .line-menu {
    background-color: #1DA1F2;
}


/* ================================================
   RESPONSIVE - Ajustes para móvil
   ================================================ */

@media (max-width: 991px) {
    .theme-navigation-wrap.main-menu li a::before {
        display: none; /* Removemos el underline en móvil */
    }
    
    .theme-navigation-wrap.main-menu li a:hover {
        background: rgba(29, 161, 242, 0.1);
        padding-left: 20px;
    }
}


/* ================================================
   VARIANTES DE COLOR (Opcional)
   ================================================ */

/* Si prefieres un azul más oscuro, descomenta esto:

.header-social li a i {
    color: #0066CC;
}

.header-social li a:hover i {
    color: #004C99;
}

*/

/* Si prefieres un azul más claro/vibrante, descomenta esto:

.header-social li a i {
    color: #00A3FF;
}

.header-social li a:hover i {
    color: #0088DD;
}

*/