/* =====================================================================
   ELGRANDATERO — layout_publico.css (VERSIÓN SEO ELITE)
   - Optimización: Eliminado CSS de Ticker Fútbol (Ya no se usa)
   - Rendimiento: Padding-top estático (Evita saltos visuales / CLS)
   - Accesibilidad: Áreas táctiles mínimas de 48px para móviles
===================================================================== */

:root {
    --eg-maxw: 1320px;
    --eg-gap: 20px;
    --eg-radius: 14px;
    
    /* Z-index Simplificado */
    --eg-z-header: 1000;
    --eg-z-modal: 2000;
    
    /* Colores y Fuentes */
    --eg-font: system-ui, -apple-system, sans-serif;
    --eg-bg: #0b1220;
    --eg-surface: rgba(255,255,255,.06);
    --eg-border: rgba(255,255,255,.12);
    --eg-text: #ffffff;
}

/* 1) Reset & Core */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--eg-font);
    color: var(--eg-text);
    background: var(--eg-bg);
    line-height: 1.5;
    /* Evita CLS: Deja espacio fijo para la Radio Bar superior */
    padding-top: 70px; 
    /* Espacio para la marquesina inferior */
    padding-bottom: 80px;
}

/* 2) Sponsor Top (LCP Optimized) */
.sponsor-top {
    max-width: var(--eg-maxw);
    margin: 0 auto 15px;
    padding: 0 12px;
}

.sponsor-top-link {
    display: flex;
    align-items: center;
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
    overflow: hidden;
    min-height: 60px;
}

.sponsor-top-img {
    width: 100px;
    height: 60px;
    object-fit: cover;
}

/* 3) Header & Logo */
.header-top {
    max-width: var(--eg-maxw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: var(--eg-radius);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 800;
}

/* Botón Menú (Mobile) - Tamaño táctil optimizado */
.menu-toggle {
    min-width: 48px;
    min-height: 48px;
    background: #ffc107;
    color: #000;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

/* 4) Navegación y Menú Dinámico */
#main-nav {
    max-width: var(--eg-maxw);
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#main-nav.nav-collapsed { display: none; }

.eg-link {
    padding: 12px 16px; /* Cumple con 48px de altura táctil */
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* Link de Admin: Siempre visible si logueado */
.eg-link.admin-link {
    background: #0b5cff;
    color: #fff;
}

/* 5) Layout Principal (Sidebars) */
.public-wrapper {
    max-width: var(--eg-maxw);
    margin: 0 auto;
    padding: 0 12px;
}

.layout-publico {
    display: flex;
    gap: var(--eg-gap);
}

.contenido-principal {
    flex: 1;
    min-width: 0;
}

.sidebar-publico {
    width: 320px;
    flex-shrink: 0;
}

/* Responsive Sidebars */
@media (max-width: 991px) {
    .layout-publico { flex-direction: column; }
    .sidebar-publico { width: 100%; order: 2; }
    .contenido-principal { order: 1; }
    #main-nav { flex-direction: column; }
}

/* 6) Radio Player (Fixed Top) */
.radio-player-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: #000;
    z-index: var(--eg-z-header);
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #ffc107;
}

/* 7) Marquesina Inferior */
#marquesina-contenedor {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 50px;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--eg-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: var(--eg-z-header);
}

#marquesina-mensajes {
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    color: #ffc107;
}

/* 8) Quick Actions (Dock) */
.eg-actions-dock {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: var(--eg-z-header);
}

.btn-marquesina {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffc107;
    color: #000;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    font-size: 20px;
    cursor: pointer;
}