/* ==========================================================================
   Adaptación a tablets y celulares.
   Se carga después de app.css (CSS heredado de React) y extra.css, y solo
   corrige pantallas de hasta 1024 px: en computadora el sitio no cambia.
   ========================================================================== */

/* El CSS de React forzaba un ancho mínimo de 400 px: en celulares la página
   quedaba más ancha que la pantalla y se cortaba a la derecha. */
html, body { min-width: 0; }

/* ------------------------------------------------------------------ tablets y celulares */
@media (max-width: 1024px) {
    *, *::before, *::after { box-sizing: border-box; }
    img { max-width: 100%; }
    body { margin: 0; min-height: 0; }

    /* ---------- header: logo + menú arriba, buscador abajo a todo el ancho */
    .body1 { height: auto; }
    .navbar {
        position: relative;
        top: 0;
        height: auto;
        padding: 12px 16px 16px;
        border-radius: 0 0 20px 20px;
        align-items: stretch;
        gap: 12px;
        font-size: 1rem;
    }
    .navbar-container { justify-content: flex-start; }
    /* Recorta el logo al texto (la imagen original tiene mucho margen blanco) */
    .navbar-container > div {
        position: relative;
        width: 170px;
        height: 50px;
        overflow: hidden;
    }
    .logo-navbar {
        position: absolute;
        width: 334px;
        max-width: none;
        left: -83px;
        top: -100px;
        margin: 0;
    }
    .menu-wrapper {
        position: absolute;
        top: 14px;
        right: 16px;
    }
    .menu-navbar {
        position: static;
        margin: 0;
        padding: 0;
        gap: 16px;
        font-size: 1rem;
    }
    .searchB-container {
        position: static;
        transform: none;
        width: 100%;
        padding: 0;
    }
    .sbContainer { width: 100%; }
    .sbContainer form.js-buscador {
        margin-top: 0 !important;   /* pisa el margin-top:-10vh en línea */
        width: 100%;
        align-items: center;
    }
    .searchBar {
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0 16px;
        font-size: 1rem;
    }
    .button-buscar {
        width: auto;
        height: 46px;
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        margin: 0 0 0 8px;
        padding: 0 18px;
        border-radius: 23px;
        font-size: .9rem;
        flex-shrink: 0;
    }
    .search-suggestions {
        width: 100%;
        left: 0;
        top: 100%;
        margin-top: 6px;
        z-index: 30;
    }
    .search-suggestions li { font-size: 1.1rem; }

    /* ---------- mapa */
    .mapContainer {
        margin: 12px 0 0;
        padding: 0 12px;
        gap: 12px;
        align-items: stretch;
        border-radius: 0;
    }
    #map {
        flex: 1;
        width: auto;
        height: 60vh;
        min-height: 320px;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
    }
    .colIzq, .colDer { width: 16vw; margin: 0; }
    .imgColIzq, .imgColDer { height: 60vh; min-height: 320px; object-fit: cover; }
    .markerDetails {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        width: min(320px, 80%);
        z-index: 5;
    }

    /* ---------- carruseles */
    .carousel-container { margin: 12px 0 0; position: relative; }
    .divCarousel {
        margin: 0 12px 16px;
        width: auto;
        height: auto;
        border-radius: 12px;
    }
    .carousel { position: static; width: 100%; height: auto; margin: 0; }
    .carousel .image-gallery-slides { aspect-ratio: 4 / 1; }
    .carousel .image-gallery-slide,
    .carousel .image-gallery-slide img { height: 100% !important; }

    .divCarousel2 { margin: 0 0 16px; position: static; }
    .carouselGrande { width: 100%; top: 0; margin: 0; border-radius: 0; }
    .carouselGrande .image-gallery-slides { aspect-ratio: 3.39 / 1; }
    .carouselGrande .image-gallery-slide,
    .carouselGrande .image-gallery-slide img { height: 100% !important; }

    /* ---------- portada y categorías */
    .catHero {
        width: 100%;
        margin: 0;
        padding: 24px 16px;
        gap: 16px;
        align-items: center;
        height: auto;
    }
    .catHeroText { padding: 0; }
    .catH1 { font-size: 2.4rem; margin: 0 0 12px; }
    .catP { font-size: 1.15rem; margin: 0; }
    .catHeroImg { height: auto; }
    .catImgHero { width: 100%; height: auto; margin: 0; border-radius: 24px; }

    .catContainer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin: 0;
        padding: 24px 16px;
        height: auto;
    }
    .catCard {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 16px;
        border-radius: 24px;
    }
    .catImg { width: 100%; height: auto; margin: 0; object-fit: contain; }
    .catH3 { height: auto; font-size: 1.2rem; margin: 10px 0 0; }

    /* ---------- ofertas */
    .ofertasContainer {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin: 0;
        padding: 0 16px 24px;
    }
    .ofertaCard { width: 100%; height: auto; margin: 0; }
    .ofertaImg { object-fit: contain; }

    /* ---------- footer */
    .footerContainer {
        height: auto;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
        padding: 24px 16px;
        font-size: 1rem;
    }
    .menu-footer { font-size: 1rem; padding: 0; flex: 1 1 0; min-width: 0; }
    .menu-footer h4 { margin: 0 0 6px; }
    .menu-footer p { font-size: 1rem; margin: .2rem 0; }

    /* ---------- mapa de resultados de búsqueda */
    .overlay-busqueda .adsColIzq,
    .overlay-busqueda .adsColDer { flex-basis: 16vw; width: 16vw; }
    .aviso-resultados { width: min(420px, calc(100% - 32px)); padding: 12px 16px; }
    .aviso-resultados strong { font-size: 1.05rem; }

    /* ---------- Únete */
    .uneteContainer {
        grid-template-columns: 16vw 1fr 16vw;
        margin: 16px 0;
        padding: 0 12px;
        gap: 12px;
        align-items: start;
    }
    .uneteContainer .form-content { width: 100%; max-width: none; margin: 0; }

    /* ---------- Necesidad */
    .necesidadContainer { padding: 24px 16px; gap: 24px; }
    .necesidadTitulo { font-size: 3rem; flex: 1; margin: 0; }
    .necesidadTitulo > p { margin: 0; line-height: 1.1; }
    .formNecesidad { width: 100%; gap: 14px; }
    .formNecesidad input,
    .formNecesidad textarea,
    .formNecesidad button { width: 100%; margin: 0; font-size: 1.05rem !important; }
    .necesidadRubro1 { margin-bottom: 0; }
    .necesidadImg { flex: 0 0 35%; }
    .necesidadImg img { width: 100%; height: auto; }

    /* ---------- login y registro */
    .login-container { width: auto; max-width: 380px; margin: 24px 16px; }
    @supports (margin-inline: auto) { .login-container { margin-inline: auto; } }
    .form-content { margin: 16px; }
}

/* ------------------------------------------------------------------ tablets en vertical y celulares */
@media (max-width: 900px) {
    /* Mapa principal: ocupa todo el ancho y las dos laterales van debajo,
       horizontales (imagen para celulares o la vertical girada 90°, 4:1) */
    .mapContainer { flex-wrap: wrap; gap: 8px; width: auto; box-sizing: border-box; }
    .mapContainer #map { order: 0; flex: 1 1 100%; }
    .mapContainer .colContainer { order: 1; flex: 1 1 100%; }
    .mapContainer .colContainer:empty { display: none; }
    .mapContainer .colIzq, .mapContainer .colDer {
        position: relative; width: 100%; margin: 0; aspect-ratio: 4 / 1; overflow: hidden; border-radius: 10px;
    }
    .mapContainer .imgColIzq, .mapContainer .imgColDer {
        position: absolute; left: 50%; top: 50%; width: 25%; height: 400%; min-height: 0;
        transform: translate(-50%, -50%) rotate(-90deg); object-fit: cover; border-radius: 0;
    }
    /* La lateral derecha tiene el texto escrito de abajo hacia arriba: gira al revés */
    .mapContainer .imgColDer { transform: translate(-50%, -50%) rotate(90deg); }
    .mapContainer .con-movil .imgColIzq, .mapContainer .con-movil .imgColDer { display: none; }
    .mapContainer .con-movil .imgLateralMovil { display: block; width: 100%; height: 100%; object-fit: cover; }
    .overlay-busqueda .adsColIzq,
    .overlay-busqueda .adsColDer,
    .uneteContainer .adsColIzq,
    .uneteContainer .adsColDer { display: none; }

    .mapContainer { padding: 0 12px; }
    .uneteContainer { grid-template-columns: 1fr; }
    .uneteContainer .form-content { max-width: 640px; margin: 0 auto; }

    .catHero { grid-template-columns: 1fr; text-align: left; }
    .catHeroImg { max-width: 560px; }
    .necesidadImg { display: none; }
}

/* ------------------------------------------------------------------ celulares */
@media (max-width: 600px) {
    .navbar { padding: 10px 12px 14px; gap: 10px; }
    .navbar-container > div { width: 130px; height: 38px; }
    .logo-navbar { width: 256px; left: -64px; top: -77px; }
    /* El menú pasa a su propio renglón, entre el logo y el buscador */
    .menu-wrapper { position: static; width: 100%; }
    .menu-navbar {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 12px;
        font-size: .95rem;
        padding: 2px 2px 0;
    }
    .searchBar { height: 42px; font-size: .95rem; }
    .button-buscar { height: 42px; padding: 0 14px; font-size: .85rem; }

    #map { height: 55vh; min-height: 300px; }
    .mapContainer, .divCarousel { margin-left: 8px; margin-right: 8px; }
    .mapContainer { padding: 0; }

    .catH1 { font-size: 1.9rem; }
    .catP { font-size: 1rem; }
    .catContainer { grid-template-columns: 1fr; gap: 12px; }
    .catCard { flex-direction: row; padding: 12px 16px; }
    .catContent { flex-direction: row; align-items: center; gap: 16px; }
    .catImg { width: 96px; flex-shrink: 0; }
    .catH3 { margin: 0; text-align: left; }

    .ofertasContainer { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 12px 20px; }
    .ofertaCard { padding: 10px; border-radius: 14px; }
    .ofertaImg { height: 120px; }
    .ofertaCard h3 { font-size: .9rem; }
    .ofertaCard p { font-size: .8rem; margin: 4px 0; }

    .footerContainer { flex-direction: column; align-items: flex-start; }
    .menu-footer h4 { text-align: left; margin: 0 0 6px; }
    .redes-footer { justify-content: flex-start; }

    .necesidadTitulo { font-size: 2.2rem; }
    .formNecesidad { width: 100%; }

    .form-content { margin: 12px; padding: 16px; }
    .uneteContainer { padding: 0 12px; margin: 12px 0; }
    /* El cartel de resultados va debajo de la X de cerrar */
    .aviso-resultados { top: calc(var(--alto-header) + 56px); }
    .form-content .check-fila { align-items: flex-start; }
    .form-content .check-ayuda { margin-left: 0; }

    .toasts { left: 1em; right: 1em; width: auto; }
    .aviso-resultados { gap: 10px; }
    .aviso-globito { width: 26px; height: 38px; }
    .overlay-busqueda .cerrar-mapa-expandido { top: 8px; right: 8px; }
}

/* ------------------------------------------------------------------ celulares chicos */
@media (max-width: 380px) {
    .menu-navbar { font-size: .88rem; }
    .button-buscar { padding: 0 12px; }
    .ofertasContainer { gap: 8px; }
}

/* ------------------------------------------------------------------ celulares mínimos (320 px) */
@media (max-width: 340px) {
    .menu-navbar { font-size: .8rem; gap: 6px 8px; }
}