/**
 * ========================================================================
 * ARCHIVO: ubicacion.css
 * PROYECTO: MOTELWEB.VIP
 * VERSIÓN: 4.0.0
 * FECHA DE PRODUCCIÓN: 2026-09-24
 * DESCRIPCIÓN: Módulo de ubicación.
 *              Variantes: auto | mapa-hero
 * ========================================================================
 */

/* ============================================================
   BASE
   ============================================================ */

.flex-align-middle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.nxs-nav-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.btn-nav-vip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #674f00;
    color: var(--mw-color-text) !important;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none !important;
    width: 100%;
}

.btn-nav-vip:hover {
    border-color: #D4AF37;
    background: #000;
    transform: translateX(10px);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.btn-nav-vip i {
    font-size: 1.2rem;
    color: #D4AF37;
}

.ios-only {
    display: none;
}

.is-ios .ios-only {
    display: flex;
}

/* ============================================================
   VARIANTE: mapa-hero
   Contenedor redondeado a ancho completo del grid-container.
   Mapa arriba. 4 botones en fila. Copiar Dirección full-width abajo.
   ============================================================ */

/* === Contenedor general === */
.ubi-layout-mapa-hero.row.flex-align-middle {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 30px auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 3px solid #674f00 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background: #000;
}

.ubi-layout-mapa-hero>.columns {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ubi-layout-mapa-hero>.columns:first-child>div {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.ubi-layout-mapa-hero iframe {
    height: 400px !important;
    border-radius: 0 !important;
    display: block;
    border: none !important;
}

/* === Grid: 4 columnas fila 1 + Copiar full-width fila 2 === */
.ubi-layout-mapa-hero .nxs-nav-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    width: 100% !important;
    border-top: 15px solid #674f00;
}

.ubi-layout-mapa-hero .btn-nav-vip {
    width: 100% !important;
    border-radius: 0 !important;
    justify-content: center !important;
    text-align: center;
    border: none !important;
    border-right: 3px solid #674f00 !important;
    padding: 16px 8px !important;
    font-size: 0.75rem !important;
    gap: 6px;
    margin: 0 !important;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85) !important;
    transform: none !important;
    text-transform: uppercase;
}

/* Uber (4º botón): último de la fila 1, sin borde derecho */
.ubi-layout-mapa-hero .btn-nav-vip:nth-child(4) {
    border-right: none !important;
}

/* Apple Maps (.ios-only): forzar visible en esta variante */
.ubi-layout-mapa-hero .btn-nav-vip.ios-only {
    display: flex !important;
}

/* Copiar Dirección (5º botón): full-width fila 2 */
.ubi-layout-mapa-hero .btn-nav-vip:nth-child(5) {
    grid-column: 1 / -1 !important;
    border-top: 1px solid #674f00 !important;
    border-right: none !important;
}

/* Ocultar chevron decorativo */
.ubi-layout-mapa-hero .btn-nav-vip>i:last-child {
    display: none !important;
}

/* Contenido del botón: ícono + texto */
.ubi-layout-mapa-hero .btn-nav-vip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Hover: sin desplazamiento, solo cambio de color */
.ubi-layout-mapa-hero .btn-nav-vip:hover {
    background: #000 !important;
    transform: none !important;
    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.2);
}

.ubi-layout-mapa-hero .btn-nav-vip:hover i {
    color: #D4AF37 !important;
}

/* === Móvil: botones apilados === */
@media (max-width: 767px) {
    .ubi-layout-mapa-hero.row.flex-align-middle {
        max-width: 100% !important;
        width: 100% !important;
        margin: 20px auto !important;
        border-radius: 16px !important;
    }

    .ubi-layout-mapa-hero iframe {
        height: 350px !important;
    }

    .ubi-layout-mapa-hero .nxs-nav-container {
        grid-template-columns: 1fr !important;
    }

    .ubi-layout-mapa-hero .btn-nav-vip {
        border-right: none !important;
        border-bottom: 1px solid #674f00 !important;
        font-size: 0.85rem !important;
        padding: 14px 15px !important;
    }

    .ubi-layout-mapa-hero .btn-nav-vip:nth-child(5) {
        border-top: none !important;
        border-bottom: none !important;
    }
}

/* ============================================================
   VARIANTE: float-map
   Container 70% centrado, esquinas redondeadas.
   Padding interno 15px. Mapa esquinas redondeadas.
   Fila 1: Uber · Google · Apple · Waze (independientes, con gap).
   Fila 2: Copiar Dirección full-width.
   ============================================================ */

/* === Container principal === */
.ubi-layout-float-map.row.flex-align-middle {
    display: block !important;
    max-width: 70% !important;
    width: 70% !important;
    margin: 40px auto !important;
    padding: 15px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    border: 2px solid var(--mw-card-border, rgba(128, 128, 128, 0.2)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background-color: var(--mw-card-bg, rgba(0, 0, 0, 0.5));
    box-sizing: border-box;
}

.ubi-layout-float-map>.columns {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Wrapper dorado del mapa: solo redondeo, sin borde propio */
.ubi-layout-float-map>.columns:first-child>div {
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Mapa: esquinas redondeadas, ancho 100% */
.ubi-layout-float-map iframe {
    height: 450px !important;
    border-radius: 12px !important;
    display: block;
    border: none !important;
    width: 100%;
}

/* === Grid de botones: 4 en fila, con gap === */
.ubi-layout-float-map .nxs-nav-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    margin-top: 15px;
    border-top: none !important;
}

/* Botones: independientes, esquinas redondeadas */
.ubi-layout-float-map .btn-nav-vip {
    width: 100% !important;
    border-radius: 10px !important;
    justify-content: center !important;
    text-align: center;
    border: 1px solid #674f00 !important;
    padding: 14px 8px !important;
    font-size: 0.75rem !important;
    gap: 6px;
    margin: 0 !important;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85) !important;
    transform: none !important;
    text-transform: uppercase;
}

/* === Orden visual: Uber · Google · Apple · Waze · Copiar === */
.ubi-layout-float-map .btn-nav-vip:nth-child(4) {
    order: 1;
}

/* Uber   (DOM #4) */
.ubi-layout-float-map .btn-nav-vip:nth-child(2) {
    order: 2;
}

/* Google (DOM #2) */
.ubi-layout-float-map .btn-nav-vip:nth-child(3) {
    order: 3;
}

/* Apple  (DOM #3) */
.ubi-layout-float-map .btn-nav-vip:nth-child(1) {
    order: 4;
}

/* Waze   (DOM #1) */
.ubi-layout-float-map .btn-nav-vip:nth-child(5) {
    order: 5;
}

/* Copiar (DOM #5) */

/* Apple Maps: forzar visible en esta variante */
.ubi-layout-float-map .btn-nav-vip.ios-only {
    display: flex !important;
}

/* Copiar Dirección: fila 2, full-width */
.ubi-layout-float-map .btn-nav-vip:nth-child(5) {
    grid-column: 1 / -1 !important;
    border-top: 1px solid #674f00 !important;
}

/* Ocultar chevron decorativo */
.ubi-layout-float-map .btn-nav-vip>i:last-child {
    display: none !important;
}

/* Contenido: ícono + texto */
.ubi-layout-float-map .btn-nav-vip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Hover: sin desplazamiento */
.ubi-layout-float-map .btn-nav-vip:hover {
    background: #000 !important;
    transform: none !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.ubi-layout-float-map .btn-nav-vip:hover i {
    color: #D4AF37 !important;
}

/* === Móvil: container 95%, botones en 2 columnas === */
@media (max-width: 767px) {
    .ubi-layout-float-map.row.flex-align-middle {
        max-width: 95% !important;
        width: 95% !important;
        margin: 20px auto !important;
        padding: 12px !important;
    }

    .ubi-layout-float-map iframe {
        height: 260px !important;
    }

    .ubi-layout-float-map .nxs-nav-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .ubi-layout-float-map .btn-nav-vip {
        font-size: 0.7rem !important;
        padding: 12px 6px !important;
    }
}

/* ============================================================
   VARIANTE: no-border-map
   Botones 40% izquierda. Mapa 60% derecha.
   Full-bleed: sin padding del módulo ni del grid-container.
   ============================================================ */

/* === Reset del módulo y grid-container SOLO para esta variante === */
#ubicacion.ubi-layout-no-border-map {
    padding: 0 !important;
}

#ubicacion.ubi-layout-no-border-map .grid-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* El título y subtítulo recuperan su padding interno */
#ubicacion.ubi-layout-no-border-map .grid-container>.row:first-child {
    padding: 40px 20px 20px;
}

/* === Contenedor principal: flex 2 columnas invertidas === */
.ubi-layout-no-border-map.row.flex-align-middle {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 500px;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000;
    align-items: stretch !important;
}

/* === Lado de los botones en no-border-map === */

/* izquierda: botones izq, mapa der */
.ubi-layout-no-border-map.ubi-lado-izquierda.row.flex-align-middle {
    flex-direction: row-reverse !important;
}

/* derecha: mapa izq, botones der (orden natural) */
.ubi-layout-no-border-map.ubi-lado-derecha.row.flex-align-middle {
    flex-direction: row !important;
}

.ubi-layout-no-border-map>.columns {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
}

/* === Mapa (DOM: 1er hijo → visualmente derecha por row-reverse) === */
.ubi-layout-no-border-map>.columns:first-child {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    width: 60% !important;
    height: auto;
    display: flex;
    flex-direction: column;
}

.ubi-layout-no-border-map>.columns:first-child>div {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
}

.ubi-layout-no-border-map iframe {
    width: 100%;
    height: 100% !important;
    min-height: 500px;
    border-radius: 0 !important;
    display: block;
    border: none !important;
}

/* === Botones (DOM: 2º hijo → visualmente izquierda por row-reverse) === */
.ubi-layout-no-border-map>.columns:last-child {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    width: 40% !important;
    height: auto;
    display: flex;
    flex-direction: column;
}

.ubi-layout-no-border-map .nxs-nav-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: stretch;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent;
}

.ubi-layout-no-border-map .btn-nav-vip {
    width: 100% !important;
    flex: 1 1 auto;
    border-radius: 0 !important;
    justify-content: center !important;
    text-align: center;
    border: 1px solid #674f00 !important;
    padding: 12px 10px !important;
    font-size: 0.8rem !important;
    gap: 8px;
    margin: 0 !important;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85) !important;
    transform: none !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.ubi-layout-no-border-map .btn-nav-vip.ios-only {
    display: flex !important;
}

.ubi-layout-no-border-map .btn-nav-vip>i:last-child {
    display: none !important;
}

.ubi-layout-no-border-map .btn-nav-vip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ubi-layout-no-border-map .btn-nav-vip:hover {
    background: #000 !important;
    transform: none !important;
    border-color: #D4AF37 !important;
    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.2);
}

.ubi-layout-no-border-map .btn-nav-vip:hover i {
    color: #D4AF37 !important;
}

/* === Móvil: mapa arriba, botones abajo === */
@media (max-width: 767px) {
    #ubicacion.ubi-layout-no-border-map .grid-container>.row:first-child {
        padding: 30px 15px 15px;
    }

    .ubi-layout-no-border-map.row.flex-align-middle {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        /* vuelve al orden natural en móvil */
        min-height: 0;
    }

    .ubi-layout-no-border-map>.columns:first-child,
    .ubi-layout-no-border-map>.columns:last-child {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .ubi-layout-no-border-map>.columns:first-child {
        height: 300px;
        order: -1;
        /* el mapa va arriba en móvil */
    }

    .ubi-layout-no-border-map iframe {
        min-height: 300px;
    }

    .ubi-layout-no-border-map .nxs-nav-container {
        padding: 10px;
        height: auto !important;
    }

    .ubi-layout-no-border-map .btn-nav-vip {
        flex: 0 0 auto;
        padding: 14px 15px !important;
        font-size: 0.85rem !important;
    }
}

/* ============================================================
   LADO DE BOTONES — aplicable a `auto` y `no-border-map`
   Por defecto (derecha): layout natural del DOM → mapa izq, botones der.
   Invertido (izquierda): flex row-reverse → botones izq, mapa der.
   ============================================================ */

/* === Variante AUTO === */

/* auto + izquierda: botones izq, mapa der */
.ubi-layout-auto.ubi-lado-izquierda.row.flex-align-middle {
    flex-direction: row-reverse !important;
}

/* auto + derecha: sin overrides. El orden natural del DOM ya es mapa → botones. */