/* 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); }
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; }
.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%; }
    .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; }
}