/* ==========================================
   RESPONSIVE CSS - COLONIA BELGRANO HOY
   ========================================== */

/* Prevenir scroll horizontal global */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

@media (max-width: 992px) {

    /* 1. HEADER & TOP BAR (Pasar de 3 columnas Grid a Flex vertical) */
    header {
        position: relative !important;
    }

    .menu-toggle {
        display: block !important;
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 1000;
    }

    .top-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 15px !important;
        gap: 15px !important;
    }

    .logo {
        margin-top: 35px; /* Espacio para el botón de menú */
        justify-content: center;
    }

    .banner-top {
        width: 100% !important;
    }

    .banner-top img {
        width: 100% !important;
        height: auto !important;
        max-height: 100px;
    }

    .header-right {
        width: 100% !important;
    }

    /* 2. MENÚ SIDEBAR (Navegación Off-Canvas para Celulares) */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -290px !important; /* Escondido a la izquierda */
        width: 280px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
        transition: left 0.3s ease !important;
        border-radius: 0 !important;
    }

    /* Clase que activa app.js cuando tocás el botón hamburguesa */
    .sidebar.active {
        left: 0 !important;
    }

    /* 3. CONTENEDOR PRINCIPAL (Pasar de Grid 3 columnas a 1 columna fluida) */
    .container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 15px auto !important;
        padding: 0 12px !important;
        gap: 20px !important;
    }

    main {
        width: 100% !important;
        gap: 20px !important;
    }

    /* 4. HERO Y NOTICIA PRINCIPAL */
    .hero {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .hero-left, .hero-right {
        width: 100% !important;
    }

    .hero-left img {
        height: 300px !important;
    }

    .overlay {
        padding: 20px !important;
    }

    .overlay h2 {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .overlay p {
        font-size: 14px !important;
    }

    /* 5. GRILLAS DE NOTICIAS Y CATEGORÍAS */
    .news-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .categorias-slider {
        display: flex !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding-bottom: 10px !important;
    }

    .categoria {
        flex: 0 0 120px !important;
        min-height: 130px !important;
        padding: 15px 10px !important;
    }

    .categoria i {
        font-size: 36px !important;
    }

    /* 6. SIDEBAR DERECHA (Información útil, Banners) */
    .right-sidebar {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .widget, .card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 7. FOOTER */
    footer {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 15px !important;
        margin-top: 30px !important;
    }
}