/* Variables de Marca */
:root {
    --primary-red: #a50021; /* Rojo Barça/Deportivo */
    --dark-blue: #001e4e;
    --black: #111111;
    --grey-light: #f4f4f4;
    --white: #ffffff;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset Básico */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); line-height: 1.5; color: var(--black); background: var(--white); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* Header Layout */
.header-logo-container { padding: 20px 0; display: flex; justify-content: center; }

.main-navigation-bar { background: var(--primary-red); color: var(--white); font-weight: bold; text-transform: uppercase; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; height: 45px; }

.header-menu-list { display: flex; list-style: none; gap: 20px; font-size: 14px; }

/* Lógica de menú desplegable (Niveles anidados) */
.header-menu-list li { position: relative; }
.header-menu-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%; 
    margin-top: 14px; /* Separación visual garantizada */
    left: 0;
    background: var(--dark-blue);
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    z-index: 1000;
    padding: 10px 0; 
    list-style: none;
    border-top: 3px solid var(--primary-red);
    border-radius: 0 0 4px 4px;
}

/* Puente invisible a prueba de fallos: Atado al contenedor padre (li) */
.header-menu-list > li::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px; /* Extiende el área táctil del título hacia abajo cubriendo el margen */
    background: transparent;
}

/* =========================================
   TERCER NIVEL (Desplegable Lateral)
   ========================================= */
.header-menu-list .sub-menu .sub-menu {
    top: 0;
    left: 100%; /* Empuja el menú a la derecha */
    margin-top: -10px; /* Lo alinea con el elemento padre */
    margin-left: 2px; /* Pequeño margen horizontal */
    border-top: none; /* Quitamos la línea superior */
    border-left: 3px solid var(--primary-red); /* La pasamos al lateral */
    border-radius: 0 4px 4px 4px;
}

/* Puente invisible lateral para pasar el cursor sin que se cierre */
.header-menu-list .sub-menu > li::after {
    content: '';
    position: absolute;
    top: 0;
    right: -15px; /* Cubre el espacio horizontal hacia el nuevo menú */
    width: 15px;
    height: 100%;
    background: transparent;
}

/* Flecha del segundo nivel apuntando a la derecha */
.header-menu-list .sub-menu .menu-item-has-children > a::after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid rgba(255, 255, 255, 0.8);
    border-right: none;
    margin-left: auto; /* Empuja la flecha al extremo derecho */
}

.header-menu-list .sub-menu .menu-item-has-children:hover > a::after {
    transform: rotate(0deg); /* No rota, ya apunta a la derecha */
}

/* Indicador visual (flecha) para ítems con sub-menú */
.menu-item-has-children > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.menu-item-has-children > a::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}
.header-menu-list .sub-menu li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
.header-menu-list .sub-menu li:last-child { border-bottom: none; }
.header-menu-list .sub-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--white);
    transition: background 0.3s;
    text-transform: none; /* Mejora lectura de subniveles largos */
}
.header-menu-list .sub-menu a:hover { background: var(--primary-red); }
.header-menu-list li:hover > .sub-menu { display: block; }

.header-socials { display: flex; gap: 15px; }

/* Barra En Vivo */
.live-stream-bar { background: var(--white); border-bottom: 2px solid var(--primary-red); padding: 10px 0; }
.live-flex { display: flex; justify-content: space-between; align-items: center; }
.live-status { color: var(--primary-red); display: flex; align-items: center; gap: 8px; }
.live-dot { width: 10px; height: 10px; background: red; border-radius: 50%; animation: pulse 1.5s infinite; }
.live-btn { background: var(--primary-red); color: var(--white); padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; }

/* Buscador */
.header-search-container { padding: 15px 0; }
.search-form { display: flex; max-width: 600px; margin: 0 auto; border: 2px solid #ddd; border-radius: 25px; overflow: hidden; }
.search-field { flex: 1; border: none; padding: 10px 20px; outline: none; font-size: 16px; }
.search-submit { background: var(--primary-red); color: var(--white); border: none; padding: 0 20px; cursor: pointer; }

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    70% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

/* Ajustes Logo Personalizado */
.custom-logo-link img { max-height: 80px; width: auto; object-fit: contain; }
.site-logo { font-size: 2rem; font-weight: 800; color: var(--dark-blue); }

/* Ajustes Íconos Redes Sociales */
.social-icon { display: flex; align-items: center; justify-content: center; }
.social-icon svg { transition: transform 0.3s ease; }
.social-icon:hover svg { transform: scale(1.15); }

/* Layout Footer */
.footer-content { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid #eee; }
.footer-links { display: flex; list-style: none; gap: 20px; font-size: 14px; font-weight: bold; }

/* ==========================================================================
   SIDEBAR GLOBAL
   ========================================================================== */
.widget-title { border-left: 4px solid var(--primary-red); padding-left: 10px; margin-bottom: 20px; font-size: 1.2rem; text-transform: uppercase; color: var(--dark-blue); }
.sidebar-post-list { list-style: none; margin: 0; padding: 0; }
.sidebar-post-list li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.sidebar-post-list li:last-child { border-bottom: none; }
.sidebar-post-link { display: flex; gap: 15px; align-items: center; }
.sidebar-thumb { width: 80px; height: 80px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
.sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-post-title { font-size: 0.95rem; font-weight: bold; line-height: 1.3; transition: color 0.3s; }
.sidebar-post-link:hover .sidebar-post-title { color: var(--primary-red); }

/* ==========================================================================
   RESPONSIVE GLOBAL (MÓVIL)
   ========================================================================== */
.mobile-menu-toggle { display: none; background: none; border: none; color: var(--white); cursor: pointer; padding: 5px; }

@media (max-width: 768px) {
    /* Header general */
    .header-logo-container { padding: 15px 0; }
    .custom-logo-link img { max-height: 55px; }

    /* Menú Móvil (Hamburger) */
    .mobile-menu-toggle { display: block; }
    .nav-flex { position: relative; }
    
    .header-menu-wrapper {
        display: none; /* Oculto por defecto en móvil */
        position: absolute;
        top: 100%;
        left: -15px;
        right: -15px;
        background: var(--dark-blue);
        z-index: 999;
        padding: 0; /* Eliminado para que los enlaces ocupen el 100% del ancho */
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Clase que añadiremos con JS para mostrar el menú */
    .header-menu-wrapper.is-active { display: block; }

    .header-menu-list { flex-direction: column; gap: 0; margin: 0; padding: 0; }
    .header-menu-list li { width: 100%; }
    
    /* Reset de sub-menú para móvil: estático y colapsado */
    .header-menu-list .sub-menu {
        position: static;
        display: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.15); /* Contraste para diferenciar jerarquía */
        width: 100%;
    }
    /* Mostrar submenú en móvil mediante clase controlada por JS */
    .header-menu-list li.mobile-expanded > .sub-menu {
        display: block;
    }

    /* Rotar la flecha hacia arriba cuando está expandido */
    .header-menu-list li.mobile-expanded > a::after {
        transform: rotate(180deg) !important;
    }
    .header-menu-list .sub-menu a { 
        padding-left: 40px; 
        font-size: 13px;
        background: rgba(0,0,0,0.1); /* Fondo ligeramente distinto para sub-menú */
    }

    /* Reset de posición y mayor indentación para el tercer nivel en móvil */
    .header-menu-list .sub-menu .sub-menu {
        margin-top: 0;
        margin-left: 0;
        border-left: none;
    }
    .header-menu-list .sub-menu .sub-menu a {
        padding-left: 60px; /* Mayor indentación para diferenciar el 3er nivel */
        background: rgba(0,0,0,0.15); /* Fondo más oscuro para jerarquía */
    }
    
    /* En móvil, forzamos que todas las flechas (nivel 2 y 3) apunten hacia abajo */
    .menu-item-has-children > a::after,
    .header-menu-list .sub-menu .menu-item-has-children > a::after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid rgba(255, 255, 255, 0.8);
        border-bottom: none;
        margin-left: auto;
        opacity: 0.5;
    }
    
    .header-menu-list a { 
        display: block; 
        padding: 16px 20px; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
        color: var(--white);
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: background 0.3s ease;
    }
    .header-menu-list a:hover, 
    .header-menu-list a:active { 
        background: rgba(255, 255, 255, 0.05); 
    }
    .header-menu-list li:last-child a { border-bottom: none; }

    /* Barra En Vivo móvil */
    .live-flex { flex-direction: column; gap: 10px; text-align: center; }
    .live-btn { width: 100%; text-align: center; padding: 10px; }

    /* Buscador móvil */
    .search-form { width: 100%; border-radius: 8px; }
    
    /* Footer móvil */
    .footer-content { flex-direction: column; gap: 20px; text-align: center; }
    .footer-links { flex-direction: column; gap: 15px; }
}