body {
    font-family: Arial, sans-serif;
    /*padding: 20px;*/
}

/* ========================================================================= */
/* ========================== SECCIÓN DE FILTROS =========================== */
/* ========================================================================= */

.contenedor-filtros {
    background: transparent;
    margin-bottom: 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
    position: relative;
    z-index: 5000;
    overflow: visible;
    pointer-events: auto;
}

.buscador-wrapper { position: relative; width: 100%; z-index: 1200; }

#input-busqueda {
    border: 2px solid #0CC0DF; background-color: #FFFFFF; border-radius: 20px; width: 100%; min-width: 270px;
    height: 42px; font-size: 16px; font-weight: 500; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.30); color: #3f3f3f !important; -webkit-text-fill-color: #3f3f3f; padding: 5px 40px 5px 15px;
    margin-top: 0 !important; outline: none; box-sizing: border-box;
}
#input-busqueda::placeholder { color: #505050 !important; opacity: 0.9; }
.icono-lupa { position: absolute; right: 15px; top: 21px; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; }

#lista-sugerencias, #lista-sugerencias-codigo {
    position: absolute; top: 105%; left: 0; width: 100%; background: white; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); list-style: none; margin: 0; padding: 0;
    max-height: 250px; overflow-y: auto; z-index: 2147483647 !important; pointer-events: auto;
}
#lista-sugerencias li, #lista-sugerencias-codigo li { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; font-size: 14px; font-weight: 700 !important; }
#lista-sugerencias li:last-child, #lista-sugerencias-codigo li:last-child { border-bottom: none; }
#lista-sugerencias li:hover, #lista-sugerencias-codigo li:hover { background: #f9f9f9; }
.sugerencias-ocultas { display: none !important; }
/* Forzar que las sugerencias de CODIGO se desplieguen hacia abajo */
#lista-sugerencias-codigo { top: calc(100% + 6px); bottom: auto; }

.tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { background-color: #1a1a1a; color: #e7e7e7; border: 1px solid #cbd5e1; padding: 4px 8px; border-radius: 4px; font-size: 11px; display: flex; align-items: center; gap: 6px; font-weight: bold; }
.tag-close { cursor: pointer; color: #ffffff; font-size: 15px; line-height: 1; }
.tag-close:hover { color: #ef4444; }

.filtro-precio-container { width: 100%; margin-top: 35px; position: relative; z-index: 200; }
.range-slider { height: 9px; background: linear-gradient(90deg, #2eb4ff, #0dbf04); border: 1px solid #ffffffbf; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.30); border-radius: 5px; position: relative; }
.range-slider input { position: absolute; width: 100%; height: 9px; top: -1px; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; outline: none; }
.range-slider input.min::-webkit-slider-thumb { background-color: #005EF8; border-radius: 5px; width: 16px; height: 30px; border: 2px solid #F4F3F3; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.50); -webkit-appearance: none; cursor: pointer; margin-top: -8px; pointer-events: auto; }
.range-slider input.max::-webkit-slider-thumb { background-color: #56C133; border-radius: 5px; width: 16px; height: 30px; border: 2px solid #F4F3F3; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.50); -webkit-appearance: none; cursor: pointer; margin-top: -8px; pointer-events: auto; }
.precio-labels { display: flex; justify-content: space-between; margin-top: 15px; position: relative; }
.precio-pill { font-size: 14px; color: #FFFFFE; font-weight: 600 !important; background-color: #3BA827; white-space: nowrap; border-radius: 15px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.30); width: 65px; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 23px; padding-top: 3px; padding-bottom: 3px; text-align: center; z-index: 5; }
.precio-box-wrapper { font-size: 14px; background-color: #F4F3F3; border-radius: 8px; margin-top: 3px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.30); position: relative; padding: 10px 30px 10px 10px; border: 1.5px solid #0099E4 !important; margin-bottom: 13px; width: 125px; box-sizing: border-box; text-align: left; }
.precio-box-wrapper::before { content: ""; position: absolute; right: 25px; top: 15%; bottom: 15%; width: 1.5px; background-color: #0099E4; opacity: 0.6; }
.precio-box-wrapper::after { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230099E4' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; pointer-events: none; }
.precio-editable { color: black; font-weight: bold; outline: none; border: none; background: transparent; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }

.fila-filtros-cortos { display: flex; gap: 10px; margin-top: 15px; position: relative; z-index: 100; }
.selector-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 100; }
.filtro-box-wrapper { background-color: #F4F3F3; border-radius: 8px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.30); border: 1.5px solid #0099E4; width: 100%; display: flex; position: relative; margin: 0; box-sizing: border-box; }
.filtro-box-wrapper::before { content: ""; position: absolute; right: 22px; top: 15%; bottom: 15%; width: 1.5px; background-color: #0099E4; opacity: 0.6; pointer-events: none; }
.filtro-box-wrapper::after { content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230099E4' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; pointer-events: none; }
.filtro-box-wrapper select, .filtro-box-wrapper input[type="text"] { width: 100%; background: transparent; border: none; outline: none; padding: 8px 30px 8px 10px; font-size: 11px; color: black; font-weight: bold; -webkit-appearance: none; appearance: none; cursor: pointer; }
.filtro-box-wrapper select:invalid { color: black; font-weight: bold; }
.filtro-box-wrapper input[type="text"]::placeholder { color: black; font-weight: bold; opacity: 1; transition: color 0.2s ease; }
.filtro-box-wrapper input[type="text"]:focus::placeholder { color: transparent; }
#input-codigo { color: #000 !important; -webkit-text-fill-color: #000; font-weight: 700 !important; }
#input-codigo::placeholder { color: #000 !important; opacity: 1 !important; }
#input-codigo:focus::placeholder { color: transparent !important; opacity: 0 !important; }


/* ========================================================================= */
/* ======================== SECCIÓN DE PINES Y MAPA ======================== */
/* ========================================================================= */

/* Barra promocional integrada entre filtros y mapa (sin overlay absoluto) */
.promo-bar {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    margin: 0;
}

.promo-bar.full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: -1px;
    width: 100vw;
    max-width: 100vw;
    height: 70px;
    z-index: 2;
}

.promo-bar .promo-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1b1919;
    color: #fff;
    text-align: center;
    padding: 14px 10px;
    text-decoration: none;
}

.promo-bar .promo-btn.center {
    flex: 2 1 0;
    background: #333;
}

.promo-bar .promo-btn.right {
    flex-direction: row;
    gap: 8px;
}

.promo-bar .promo-btn + .promo-btn {
    position: relative;
}

.promo-bar .promo-btn + .promo-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #0084ff;
}

.promo-bar .promo-btn.center::before {
    background: #04c35c;
}

.promo-bar .promo-btn.left {
    border-radius: 24px 0 0 0;
}

.promo-bar .promo-btn.right {
    border-radius: 0 24px 0 0;
}

.promo-bar .txt-main {
    line-height: 1;
    font-size: 1.1em;
}

.promo-bar .txt-sub {
    line-height: 1;
    font-size: clamp(11.5px, 3vw, 26px);
    margin-top: 6px;
}

.promo-bar .big {
    font-size: clamp(13.5px, 3vw, 26px);
    font-weight: 500;
    margin-top: -3px;
}

.promo-bar .txt-gray {
    color: #b2b0b0;
}

.promo-bar .txt-blue {
    color: #42b3ff;
    text-decoration: underline;
}

.promo-bar .aqui {
    font-size: 1.1em;
    font-weight: 500;
    margin-top: 8px;
}

.promo-bar .nowrap {
    white-space: nowrap;
}

.promo-bar .line2 {
    margin-top: -3px;
    margin-bottom: -1.5px;
}

.promo-bar .bar {
    position: relative;
    width: 10px;
    height: 115%;
    background: #19d1ff;
    border-radius: 30px;
    overflow: hidden;
    align-self: center;
}

.promo-bar .bar-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background: #0084ff;
    border-radius: 30px 30px 0 0;
}

.promo-bar .right-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1;
}

.promo-bar .ver-wrap {
    white-space: nowrap;
}

.promo-bar .ver-bold {
    font-weight: 700;
}

.promo-bar .plus {
    color: #0084ff;
    font-weight: 700;
}

/* NUEVO CONTENEDOR: Da el área segura para deslizar */
.map-wrapper {
    padding: 0 15px;
    margin-top: 0;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
}

.promo-bar + .map-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (min-width: 769px) {
    body {
        overflow-x: hidden;
    }

    .contenedor-filtros,
    .map-wrapper {
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        max-width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        box-sizing: border-box;
    }
}

/* CAMBIO 1: ALTURA DEL MAPA A 500PX */
#map { position: relative; height: 500px; width: 100%; background-color: #f0f0f0; border-radius: 0px; overflow: hidden; }
#map,
#map .mapboxgl-canvas-container,
#map .mapboxgl-canvas {
    touch-action: none;
}

.map-loader-overlay {
    position: absolute;
    inset: 0;
    z-index: 2400;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.map-loader-overlay.activo {
    opacity: 1;
    visibility: visible;
}

.map-loader-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #c4e2f7;
    border-top-color: #0084ff;
    animation: map-loader-spin 0.85s linear infinite;
}

.map-loader-text {
    font-size: 17px;
    font-weight: 700;
    color: #33556f;
    line-height: 1;
}

@keyframes map-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.marker {
    cursor: pointer;
    z-index: 10 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
    contain: layout style;
    overflow: visible;
}

.marker.codigo-destacado::after {
    content: '';
    position: absolute;
    width: 67px;
    height: 63px;
    border: 4px solid #ff1f1f;
    border-radius: 50%;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%) scale(1);
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0.95;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.65),
        0 0 10px rgba(255, 31, 31, 0.50);
    animation: marker-red-ring-breathe 1.7s ease-in-out infinite;
}

@keyframes marker-red-ring-breathe {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.94;
    }

    50% {
        transform: translate(-50%, -50%) scale(0.80);
        opacity: 1;
    }
}
.marker.codigo-destacado { z-index: 2000 !important; }
.marker.fuera-de-filtro { opacity: 0.7 !important; filter: grayscale(100%) !important; z-index: 1 !important; pointer-events: none; transition: opacity 0.3s ease, filter 0.3s ease; }
.marker.codigo-destacado.fuera-de-filtro { z-index: 2000 !important; }
#map.modo-enfoque .marker { opacity: 0.7 !important; filter: grayscale(100%) !important; z-index: 1 !important; transition: opacity 0.3s ease, filter 0.3s ease; }
#map.modo-enfoque .marker.activo { opacity: 1 !important; filter: grayscale(0%) !important; z-index: 999 !important; }
#map.modo-enfoque .marker.codigo-destacado { z-index: 2000 !important; }
#map.mapa-en-movimiento .marker,
#map.mapa-en-movimiento .marker.fuera-de-filtro,
#map.mapa-en-movimiento .marker.activo {
    transition: none !important;
}
#map.mapa-en-movimiento .marker.codigo-destacado::after {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .marker.codigo-destacado::after {
        animation: none !important;
    }
}


/* --- MAGIA DEL POPUP NATIVO --- */

.mapboxgl-popup { z-index: 3000 !important; }
.mapboxgl-popup-content {
    background: transparent !important; 
    padding: 0 !important; 
    border: none !important; 
    box-shadow: none !important; 
    overflow: visible !important;
}
.mapboxgl-popup-tip { border-top-color: #005EF8 !important; }
.mapboxgl-popup-close-button { font-size: 32px; color: #555; top: 36px; right: 4px; outline: none; z-index: 4000; }

.tarjeta-popup {
    margin-top: 35px; /* ESPACIO VITAL PARA LAS INSIGNIAS FLOTANTES */
    position: relative;
    font-family: Arial, sans-serif;
    min-width: 320px;
    background: #fff;
    border: 2px solid #38B6FF;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* 3. Insignias flotantes igualadas en Altura (26px) y Posición (-30px) */
.badge-pagos {
    position: absolute;
    top: -43px;
    left: 9px;
    background: linear-gradient(90deg, #246FFF, #37B6FF);
    border: 3px solid #38B6FF;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 0 10px;
    height: 35px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 3001;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.badge-creditos {
    position: absolute;
    top: -43px;
    right: 8px;
    width: 170px;
    height: 35px;
    border-radius: 6px;
    z-index: 3001;
    background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/CREDITO%20ACEPTADO%20INFONAVIT.png) center center no-repeat;
    background-size: contain;
    box-sizing: border-box;
    background-color: #38B6FF;
    border: 2px solid #2696F5;
}

/* Variantes por CREDITO ESPECIAL */
.tarjeta-popup.credito-especial-banjercito {
    border: 2px solid #01574F;
}
.tarjeta-popup.credito-especial-banjercito .badge-pagos {
    background: #FCFBFA;
    border: 3px solid #01574F;
    color: #01574F;
}
.tarjeta-popup.credito-especial-banjercito .badge-creditos {
    background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/CREDITO%20ACEPTADO%20BANJERCITO.png) center center no-repeat;
    background-size: contain;
    background-color: #FCFBFA;
    border: 2px solid #01574F;
}

.tarjeta-popup.credito-especial-fovissste {
    border: 2px solid #C80320;
}
.tarjeta-popup.credito-especial-fovissste .badge-pagos {
    background: #FCFBFA;
    border: 3px solid #C80320;
    color: #C80320;
}
.tarjeta-popup.credito-especial-fovissste .badge-creditos {
    background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/CREDITO%20ACEPTADO%20FOVISSTE.png) center center no-repeat;
    background-size: contain;
    background-color: #FCFBFA;
    border: 2px solid #C80320;
}

.tarjeta-popup.credito-especial-ipejal {
    border: 2px solid #7E56C8;
}
.tarjeta-popup.credito-especial-ipejal .badge-pagos {
    background: #FCFBFA;
    border: 3px solid #7E56C8;
    color: #7E56C8;
}
.tarjeta-popup.credito-especial-ipejal .badge-creditos {
    background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/CREDITO%20ACEPTADO%20IPEJAL.png) center center no-repeat;
    background-size: contain;
    background-color: #FCFBFA;
    border: 2px solid #7E56C8;
}

.tarjeta-popup.credito-especial-contado .badge-creditos {
    background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/CREDITO%20ACEPTADO%20PAGO%20DE%20CONTADO.png) center center no-repeat;
    background-size: contain;
    background-color: #FCFBFA;
    border: 2px solid #3BA827;
}

.tarjeta-popup.credito-especial-contado .badge-pagos {
    background: #FCFBFA;
    border: 3px solid #3BA827;
    color: #3BA827;
}

.tarjeta-popup.credito-especial-contado {
    border: 2px solid #3BA827;
}

/* 4. Columnas: Imagen a la izquierda, Info a la derecha */
.popup-top-section { display: flex; gap: 10px; margin-bottom: 5px; align-items: stretch; }

.popup-media-columna {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-imagen-carousel {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
}

.popup-imagen {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

.popup-imagen-sin-foto {
    background-color: #e9eef4;
}

.popup-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: rgb(0 0 0);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

.popup-nav-btn:hover {
    background: rgb(50 50 50 / 85%);
}

.popup-nav-prev { left: 1px; }
.popup-nav-next { right: 1px; }
.popup-nav-oculto { display: none !important; }

.popup-foto-contador {
    margin-top: 5px;
    font-size: 11px;
    color: #3e3e3e;
    font-weight: 700;
    line-height: 1;
}

.popup-foto-contador-oculto { display: none !important; }

.popup-detalles {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

/* 5. Tipografías de los textos */
.Municipio { font-size: 18px; font-weight: 900; color: #000; line-height: 1.1; margin-bottom: 5px; text-transform: uppercase; }
.Zona { font-size: 14px; font-weight: 700; color: #555; text-transform: uppercase; line-height: 1.2; margin-bottom: 6px; }
.Nivel { font-size: 15px; color: #555; margin-bottom: 8px; text-transform: capitalize; }

/* 6. Fila de Iconos */
.popup-iconos { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.popup-icono-item { position: relative; display: inline-flex; align-items: center; padding-bottom: 2px; }
.popup-icono-item::after { content: ""; position: absolute; left: 0.5px; right: 0.5px; bottom: 0; border-bottom: 2px solid #d5d5d5; }
.Recamaras, .Baños, .MediosBanos, .Parqueos { font-size: 16px; color: #545454; display: flex; align-items: center; }
.Recamaras::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 4px; background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/Cama%2080x80.png) no-repeat center; background-size: contain; }
.Baños::before { content: ""; display: inline-block; width: 21px; height: 21px; margin-right: 4px; background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/ban%CC%83era80x80.png) no-repeat center; background-size: contain; }
.MediosBanos-icono { position: relative; display: inline-block; width: 20px; height: 20px; margin-right: 2px; background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/inodoro%2080x80.png) no-repeat center; background-size: contain; flex-shrink: 0; }
.MediosBanos-marca { position: absolute; top: -2px; left: -3px; font-size: 10px; font-weight: 700; color: #2f2f2f; line-height: 1; background: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 0 1px; }
.Parqueos::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 4px; background: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/parqueos%2080x80.png) no-repeat center; background-size: contain; }

/* 7. Fila de Precios */
.popup-precio-row { display: flex; align-items: center; gap: 6px; line-height: 1; }
.Precio { font-size: 22px; font-weight: 400; color: #3BA827; margin: 0; }
.etiquetaIncluye { font-size: 8px; color: #3BA827; font-weight: bold; text-decoration: underline; line-height: 1.1; text-align: left; }
.PrecioSinEsc { font-size: 11px; color: #888; margin-top: 2px; }

/* 8. Botones WhatsApp Simétricos, Misma Altura y Textos Protegidos */
.btn-whatsapp-verde {
    display: block;
    background-color: #21ba6a;
    color: #fff !Important;
    font-size: 16.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 10px 10px 40px;
    border-radius: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-align: center;
    background-image: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/Logo%20Whatsapp%20Blanco%2060x60px.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 15px center;
    white-space: nowrap;
    
    /* CAMBIO 3: ELIMINAR BORDE AZUL EN IPHONE/SAFARI */
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.btn-whatsapp-verde:hover {
    background-color: #199153;
}


.contenedor-acciones-inferiores { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.btn-whatsapp-azul {
    display: block;
    background-color: #2D98F4;
    color: #fff;
    font-size: 16.5px; 
    font-weight: bold;
    text-decoration: none;
    padding: 10px 10px 10px 40px; 
    border-radius: 20px;
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    background-image: url(https://storage.googleapis.com/verificada-fotos-reespaldo/MAPAS/Logo%20Whatsapp%20Blanco%2060x60px.png);
    background-repeat: no-repeat;
    background-size: 20px 20px; 
    background-position: 15px center; 
    
    /* CAMBIO 3: ELIMINAR BORDE AZUL EN IPHONE/SAFARI */
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.btn-whatsapp-azul:hover{
    background-color: #2480d1;
}


.codigo-container { text-align: center; min-width: 60px; display: flex; flex-direction: column; align-items: center;}
.label-codigo { font-size: 9px; font-weight: bold; color: #000; line-height: 1; margin-bottom: 2px;}
.Codigo { font-size: 13px; color: #666; line-height: 1; }


/* ========================================================================= */
/* ======================== OCULTAR CONTROLES NATIVOS ====================== */
/* ========================================================================= */

/* Ocultar Logo de Mapbox */
a.mapboxgl-ctrl-logo {
    display: none !important;
}

/* Ocultar el texto de créditos de Mapbox (© Mapbox © OpenStreetMap) */
.mapboxgl-ctrl-attrib {
    display: none !important;
}

/* Ocultar el botón de la brújula */
.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
    display: none !important;
}