﻿/* Corrección: Evita que "Destacadas" se salga por la derecha */
.TituloResultados {
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #0b3f62;
    color: white;
    text-align: center;
    box-sizing: border-box; /* <--- ESTO EVITA EL DESFASE */
}

/* =======================================================
   REGLAS PARA DISPOSITIVOS MÓVILES (Celulares y Tablets hasta 992px)
   ======================================================= */
@media screen and (max-width: 992px) {

    /* =======================================================
       1. CONTENEDORES PRINCIPALES Y AJUSTES DE ANCHO
       ======================================================= */
    /*.BannerSuperior,
    .BarraBusqueda,
    .BarraBusquedaContenido,
    #frmCarrurel,
    .divResultados {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }*/

    /* =======================================================
       1. CONTENEDORES PRINCIPALES Y AJUSTES DE ANCHO
       ======================================================= */

    /* El formulario general NO debe tener padding para que el carrusel toque las orillas */
    #frmCarrurel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Forzamos a que el contenedor de la búsqueda crezca a lo alto y no corte el contenido */
    .BarraBusqueda,
    .BarraBusquedaContenido {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 10px !important; /* Pequeño respiro a los lados */
        height: auto !important; /* <--- ESTO HARÁ APARECER LA BARRA EN EL MOTO G */
        overflow: visible !important; /* <--- ESTO EVITA QUE SE ESCONDA LA MITAD DE ABAJO */
    }

    /* Contenedor de las fichas de propiedades */
    .divResultados {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* =======================================================
       2. BARRA SUPERIOR (LOGO, REDES, IDIOMA, MENÚ, CONTACTO)
       ======================================================= */
    .BannerSuperior {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 10px 0 !important;
    }

        .BannerSuperior > div:first-child {
            display: flex !important;
            justify-content: center !important;
            width: 100% !important;
            margin: 0 !important;
        }

    #login,
    .IconoInicio {
        display: none !important;
    }

    /* Contenedor de Banderas y Botones */
    .divBanderas {
        display: flex;
        flex-direction: column !important; /* FORZAMOS apilamiento vertical en lugar de wrap */
        align-items: center !important;
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 0 !important;
        gap: 15px; /* Espacio vertical entre redes y botones */
    }

        /* Redes Sociales: Centrado absoluto */
        .divBanderas > div:nth-child(1) {
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            margin: 0 !important;
            padding: 0 !important;
            gap: 20px !important;
        }



    /* Contenedor de Idioma, Hamburguesa y Contáctanos */
    #btnIdiomaCompleto,
    #menu-hamburguesa,
    #contacto {
        position: relative !important;
        margin: 0 4px !important;
        display: inline-flex !important; /* Mejor soporte en iOS que solo flex */
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
    }

    #btnIdiomaCompleto {
        width: auto !important;
        min-width: auto !important;
        padding: 0 14px !important; /* Un poco más de padding lateral para igualar proporciones */
        border-radius: 25px !important;
        box-sizing: border-box !important;
    }

        #btnIdiomaCompleto span {
            margin: 0 6px !important;
            font-size: 13px !important;
            line-height: 1 !important;
        }

    #idioma-arriba {
        display: none !important;
    }

    #idioma-abajo {
        display: inline-block !important;
    }

    #menu-hamburguesa {
        width: 24px !important; /* Igualamos un poco el ancho visual del icono */
        padding: 0 !important;
    }

    /* === CORRECCIÓN DEL BOTÓN CONTÁCTANOS === */
    /* === CORRECCIÓN DEL BOTÓN CONTÁCTANOS === */
    #contacto {
        position: relative !important; /* Nos permite moverlo manualmente */
        top: 5px !important; /* <--- Empujón hacia abajo. Si necesitas bajarlo más, súbelo a 3px o 4px */
        box-sizing: border-box !important;
        padding: 0 !important;
    }

        #contacto a {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 32px !important;
            padding: 0 14px !important;
            margin: 0 !important;
            border-radius: 25px !important;
            box-sizing: border-box !important;
        }

        #contacto span {
            font-size: 12px !important;
            line-height: 1 !important;
            margin: 0 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
        }

    /* EFECTO SCROLL */
    .header-scrolled #btnIdiomaCompleto,
    .header-scrolled #menu-hamburguesa,
    .header-scrolled #contacto,
    .header-scrolled .contactanos-link,
    .header-scrolled .IconoInicio,
    .header-scrolled .divBanderas > div:nth-child(1) {
        display: none !important;
    }

    .header-scrolled .divBanderas {
        margin-top: 0 !important;
        padding: 0 !important;
        height: 0px !important;
    }

  
    /* =======================================================
       3. BARRA DE BÚSQUEDA (CORREGIDO PARA TODAS LAS PANTALLAS)
       ======================================================= */
    /* Ajuste de los botones "Rentar | Comprar | Desarrollos" */
    .botones-buscar {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 0 5px 0 !important;
        box-sizing: border-box !important;
    }

    .BotonFiltro, .BotonFiltroAncho {
        flex: 1 !important;
        width: 32% !important; /* Le damos 32% para dejar margen de respiración */
        text-align: center !important;
        padding: 8px 0 !important; /* Quitamos padding lateral para evitar que crezcan de más */
        font-size: 13px !important;
        margin: 0 1% !important; /* Usamos porcentajes para el margen */
        box-sizing: border-box !important;
    }

    /* Contenedor del Dropdown, Textbox y Lupa */
    .barra-buscar.fondoBusquedaAvanzada {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        margin: 0 !important;
        background-color: #e9ecef !important;
    }

    /* Dropdowns (Tipo de inmueble) */
    select[id*="ddlRenta"],
    select[id*="ddlVenta"],
    select[id*="ddlDesarrollo"] {
        flex: 0 1 33% !important; /* Permitimos que se encoja (shrink) si es necesario (0 1) */
        width: 33% !important;
        max-width: 33% !important;
        font-size: 13px !important;
        padding: 5px 2px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* Input Text (Ubicación de búsqueda) */
    input[id*="txtUbicacion"] {
        flex: 0 1 48% !important; /* Permitimos que se encoja (shrink) */
        width: 48% !important;
        max-width: 48% !important;
        font-size: 13px !important;
        padding: 5px 4px !important;
        margin: 0 1% !important; /* Separación con porcentaje, nunca fijo en píxeles */
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* Botón Buscar Lupa */
    a[id*="lnkBuscar"] {
        flex: 0 1 15% !important; /* Permitimos que se encoja (shrink) */
        width: 15% !important;
        max-width: 15% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .btnBuscar {
        width: 100% !important;
        height: 32px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 4px !important;
    }

        .btnBuscar img {
            width: 18px !important;
            height: 18px !important;
            padding: 0 !important;
            margin: 0 !important;
        }

    /* =======================================================
       4. FICHAS DE PROPIEDADES
       ======================================================= */
    .contenedor-fila, .row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .FichaGeneral, .ficha-inmueble {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    /* =======================================================
       5. SECCIÓN CONTÁCTANOS (BANNER, FORMULARIO Y MAPA)
       ======================================================= */
    #seccion-contacto,
    .contactanos-container,
    .contactanos-body {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .contactanos-container .banner {
            width: 100% !important;
            height: auto !important;
            object-fit: cover;
        }

    .contactanos-form {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    .left-form,
    .contactanos-derecha {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .form-group,
    .form-control,
    #txtMensaje {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .contactanos-derecha {
        margin-top: 30px !important;
    }

    #mapa,
    .mapa,
    gmp-map {
        width: 100% !important;
        max-width: 100% !important;
        height: 250px !important;
        margin: 0 auto !important;
    }

    .direccion table {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 20px !important;
    }

        .direccion table td {
            word-break: break-word !important;
            font-size: 14px !important;
        }
}
