@media (max-width: 1024px) {
    :root {
        --sidebar-left: 228px;
        --sidebar-right: 228px;
        --gap: 16px;
    }

    .layout-3col {
        width: min(calc(100% - 20px), 100%);
        margin: 12px auto 24px;
    }

    .search-container {
        grid-template-columns: 180px 35% 25% auto;
        gap: 12px;
    }
}

.search-title {
    grid-area: logo;
    display: flex;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 768px) {
    .search-container {
        display: grid;
        grid-template-columns: 220px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo buscador"
            "logo comuna";
        align-items: center;
        column-gap: 18px;
        row-gap: 12px;
        width: 100%;
    }

    .mobile-ads-toggle {
        margin-right: -8px;
    }


    .search-container {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        grid-template-columns: auto 20% 50% auto;
        grid-template-areas:
            "menu logo ads"
            "input input input"
            "under under under"
            "hint hint hint";
        gap: 10px;
        padding: 12px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .mobile-menu-toggle,
    .mobile-ads-toggle {
        display: inline-flex;
    }

    .mobile-menu-toggle {
        grid-area: menu;
        grid-column: 1;
        justify-self: start;
        margin-left: 12px;
    }

    .logo {
        grid-column: 1 / -1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        text-align: center;
        margin-top:-50px;
    }

    .mobile-ads-toggle {
        grid-area: ads;
        justify-self: end;
        margin-right: -24px;
    }

    .search-box-container {
        grid-area: buscador;
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        min-width: 0;
        margin-bottom: 10px;
        margin: 0;
    }

    .search-under-bar {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100%;
        margin: 0 0 0 -15px;
        margin-top: 0px;
        max-width: 100%;
    }

    .search-hint {
        grid-column: 1 / -1;
        grid-area: hint;
        margin-top: 0;
        grid-row: 5;
        margin: 4px 0 0;
        margin-bottom: 20px;
        line-height: 1.6
    }


    .search-box-container input,
    .search-box-container .search-input {
        width: 100%;
    }

    .search-box-container input {
        grid-area: buscador;
        min-width: 0;
        max-width: none;
    }




    .logo h1 {
        font-size: 1rem;
    }

    .categories,
    .ads {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 80;
        width: min(86vw, 320px);
        margin: 0;
        overflow-y: auto;
        border-radius: 0;
        box-shadow: var(--shadow-md);
        transition: transform var(--trans-fast);
    }

    .categories {
        left: 0;
        transform: translateX(-100%);
    }

    .ads {
        right: 0;
        transform: translateX(100%);
    }

        .categories.active,
        .ads.active {
            transform: translateX(0);
        }

    .sidebar-right {
        display: none;
    }

    .content-center {
        width: 100%;
        max-width: 100%;
/*        padding: 0 12px;*/
    }

    .modalBox {
        width: min(94vw, 680px);
        max-height: 88vh;
    }

    .search-box-container {
        align-items:center;
    }

        .search-box-container,
        .search-under-bar {
            grid-column: 1 / -1 !important;
            width: calc(95% - 24px) !important;
            max-width: calc(95% - 24px) !important;
            min-width: 0 !important;
            justify-self: center !important;
            box-sizing: border-box !important;
        }

        .search-box,
        .zonaBar,
        .zonaBtn {
            width: 90% !important;
            max-width: 90% !important;
            box-sizing: border-box !important;
        }

        .layout-3col {
            display: grid;
            grid-template-columns: 0 1fr 0;
            grid-template-areas:
                "search search search"
                "content content content";
            gap: 0;
        }
    }




@media (max-width: 480px) {
    .content-center {
        padding: 0 10px;
    }

    .search-container {
        /*padding: 10px;*/
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        margin-left:-8px;
    }

    .logo h1 {
        font-size: .95rem;
    }

    .search-box,
    .zonaBtn,
    .zonaInput,
    .claimForm input,
    .claimSubmit {
        min-height: 42px;
    }

    .modalHeader,
    .modalFooter,
    .modalBody {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mobile-menu-toggle {
        margin-left: 12px; /* Ajusta según necesites */
    }

    .mobile-ads-toggle {
        margin-right: 12px; /* Ajusta según necesites */
    }
}

.layout-3col {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0px; /* mismo padding para todo */
}

.search-container,
.content-center {
       max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.search-container {
    max-width: 100% !important;
    margin: 0 0 0px 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
}

.search-container {
    left: auto !important;
    right: auto !important;
}

.search-container {
    width: auto !important;
/*    margin: 0 12px 12px 12px !important;
*/  /*  padding: 12px !important;*/
    box-sizing: border-box !important;
}

.resultados-page {
    margin: 0 0 0 !important;
}

/* =========================
   HEADER COMPACTO - PASO 1
   ========================= */

/* contenedor general */
.search-container {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* buscador */
.search-box-container {
    margin-top: -8px !important;
    margin-bottom: 0px !important;
}

/* input */
#txtSearch,
.txtsearch {
    height: 38px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
}

/* hint */
.search-hint {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* bloque comuna */
.zonaBar {
    padding: 6px 10px !important;
    margin-top: 4px !important;
    border-radius: 10px !important;
}

/* texto comuna */
.zonaText {
    font-size: 85% !important; /* -15% */
    line-height: 1.1 !important;
}

/* boton cambiar */
.zonaBtn {
    gap: 6px !important;
    padding: 4px 8px !important;
}

/* separaciones internas */
.zonaBar span {
    line-height: 1.1 !important;
}

@media (min-width: 769px) and (max-width: 1200px) {
 

    body.modo-intermedio .mobile-menu-toggle {
        display: flex !important;
    }

    body.modo-intermedio .sidebar-right {
        display: block !important;
    }

    body.modo-intermedio .categorias-box {
        display: none !important;
    }

    body.modo-intermedio.mostrar-categorias .sidebar-right {
        display: none !important;
    }

    body.modo-intermedio.mostrar-categorias .categorias-box {
        display: block !important;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    body.modo-intermedio .sidebar-right {
        border: 3px solid red !important;
    }

    body.modo-intermedio .categorias-box {
        border: 3px solid blue !important;
    }
}

@media (max-width: 500px) {

    .vip-head-new {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 4px;
        align-items: center;
    }

    .vip-head-name {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        min-width: 0;
    }

    .titulo-vip {
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vip-head-status {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        white-space: nowrap;
    }

    .categoria-negocio {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        margin-top: 2px !important;
    }

    /*Nuevo header para celular*/
    /*.search-container {
        display: flex !important;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "menu titulo ad"
            "search search buscar";*/
    /* "zona zona zona";*/
    /**/ /*gap: 8px;
    }

    .search-box-container {
        grid-area: search;
    }

    .btn-buscar-movil {
        grid-area: buscar;
        display: block;
    }

    .zonaBar {
        grid-area: zona;
    }

    .search-hint {
        display: none !important;
    }

    .search-box-container {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px;
        align-items: center;
    }

    .btn-buscar-movil {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 30px !important;
        height: 35px;
        padding: 0;
        font-size: 14px;*/ /* tamaño del icono */
    /*border-radius: 3px;
    }

    .zonaBar {
        display: none !important;
    }*/

    .search-container {
        display: grid !important;
        grid-template-columns: 44px 1fr 44px;
        grid-template-areas:
            "menu titulo ad"
            "search search search"
            "zona zona zona";
        column-gap: 8px;
        row-gap: 4px;
        align-items: center;
    }

    .mobile-menu-toggle {
        grid-area: menu;
        justify-self: start;
    }

    .search-title,
    .logo-title {
        grid-area: titulo;
        margin: 0 !important;
        font-size: 14px !important;
        text-align: left;
    }

    .mobile-ads-toggle {
        grid-area: ad;
        justify-self: end;
    }
    .search-box-container {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 2px !important;
    }

    #txtSearch,
    .search-box,
    .txtSearch {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .btn-buscar-movil {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

 /*   .zonaBar {
        grid-area: zona;
        display: block !important;
        margin-top: 4px;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }*/
/**/
    .zonaBar {
        padding: 0 0 !important;
        margin-top: 0 !important;
        min-height:25px;
        margin-left: 20px;
    }

        .search-hint {
            display: none !important;
        }


    .zonaBar .zonaBtn {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        display: contents !important;
        align-items: center;
        gap: 4px;
        min-height:8px;
    }

    .zonaBar .zonaPin {
        display: none !important; /* opcional, más limpio */
    }

    .zonaBar .zonaText::after {
        content: " -";
    }

    .zonaBar .zonaArrow {
        color: #2563eb;
        font-weight: 600;
        margin-left: 2px;
    }

    }