/* --- Maps / map-view (from web.css) ------------------------------------ */
#hvModule { position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important; height: 100% !important; max-height: calc(100vh - 55px) !important
}
.zoomOut .marker-vehicle { width: 50px; height: 50px }
div#btn_key_view, div#btn_key_view1 { right: 9px; bottom: 78px }
a#btn_regresar {
  position: fixed; top: 10px; left: 10px; z-index: 99; width: 50px; height: 50px; border-radius: 50%
}
#btn_regresar i.material-icons { width: 50px; padding-left: 12px; margin: auto; text-align: center !important }
.zoomHolder { position: relative; width: 100%; height: calc(100vh - 170px); overflow: hidden }

@media (min-width: 768px) {
  .zoomHolder { position: relative; width: 100% !important; height: calc(100vh - 235px) !important; overflow: hidden }
  div#maps_filters { justify-content: center !important }
}
@media (min-width: 768px) and (max-width: 1024px) {
  div#footer_filters a { font-size: 105% }
}

@keyframes pulse-glow-room {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8)
    }

    60% {
        box-shadow: 0 0 0 18px rgba(255, 255, 255, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
    }
}

.ht-gloss-back-btn {
    position: absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
    left: 20px !important;
    z-index: 1050 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    color: var(--color-text-inverse) !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    transition: var(--transition-fast) !important
}

.ht-gloss-back-btn i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important
}

.ht-gloss-back-btn:hover,
.ht-gloss-back-btn:active {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important
}

#map_categories_modal .restaurant_title {
    margin-bottom: 5px !important;
    font-family: var(--font-family-heading) !important;
    font-size: 1.8rem !important;
    font-weight: 300 !important;
    letter-spacing: 3px !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important
}

#map_categories_modal .select_menu {
    margin-bottom: 25px !important;
    font-family: var(--font-family-heading) !important;
    font-size: 1.1rem !important;
    font-weight: var(--font-weight-normal) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    opacity: 0.9 !important
}

#maps_categories {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)) !important;
    gap: 20px 5px !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 500px !important;
    max-height: 75vh !important;
    padding: 10px 10px 40px 10px !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    scrollbar-width: none
}

#maps_categories::-webkit-scrollbar {
    display: none
}

#maps_categories>div[class*="col-"] {
    display: flex !important;
    flex: none !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important
}

.map-category-bubble {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important
}

.map-category-bubble:hover,
.map-category-bubble:active {
    text-decoration: none !important;
    transform: translateY(-4px) !important
}

.bubble-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 68px !important;
    height: 68px !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    backdrop-filter: blur(15px) !important;
    transition: var(--transition-base) !important
}

.map-category-bubble:hover .bubble-icon {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.05) !important
}

.bubble-icon img.imaged {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
    filter: brightness(0) invert(1) !important;
    transition: var(--transition-base) !important
}

.bubble-text {
    font-family: var(--font-family-heading) !important;
    font-size: 0.75rem !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.2 !important;
    color: var(--color-text-inverse) !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
    white-space: normal !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    opacity: 0.9 !important
}

.map-category-bubble.bubble-highlight .bubble-icon {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid var(--color-bg-card) !important;
    animation: pulse-glow-room 2s infinite ease-out !important
}

.map-category-bubble.bubble-highlight .bubble-icon img.imaged {
    opacity: 0.8 !important;
    filter: none !important
}

.map-category-bubble.bubble-highlight .bubble-text {
    font-weight: var(--font-weight-bold) !important;
    opacity: 1 !important
}

.map-category-bubble.bubble-all .bubble-icon,
.map-category-bubble[filter="-1"] .bubble-icon {
    background: rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) !important
}

.map-category-bubble.bubble-all .bubble-text,
.map-category-bubble[filter="-1"] .bubble-text {
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.5px !important
}

.mapa_hotel {
    width: 100%;
    height: 100vh;
    padding: 0
}

.ht-floating-btn {
    position: absolute;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-fast)
}

.ht-floating-btn.glass-btn {
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    right: 20px;
    width: 48px;
    height: 48px;
    color: var(--color-text-inverse);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.ht-floating-btn.glass-btn:hover,
.ht-floating-btn.glass-btn:active {
    color: var(--color-text-inverse);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05)
}

.ht-map-filters-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%
}

.ht-map-filters-panel.glass-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.ht-map-filters-header {
    display: none
}

.ht-map-filters-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    padding: 10px 0 10px 12px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    border: none !important;
    -webkit-overflow-scrolling: touch
}

.ht-map-filters-tabs::-webkit-scrollbar {
    display: none
}

.ht-map-filters-tabs::after {
    flex: 0 0 12px;
    content: ''
}

.ht-map-filters-tabs .item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 6px;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    max-height: 40px;
    padding: 7px 14px !important;
    margin: 0 !important;
    white-space: nowrap;
    text-decoration: none !important;
    background-color: var(--color-bg-subtle) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    transition: var(--transition-fast)
}

.ht-map-filters-tabs .item>div {
    display: flex !important;
    gap: 6px;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important
}

.ht-map-filters-tabs .footer-icon-title {
    padding: 0 !important;
    margin: 0 !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-subtle) !important;
    white-space: nowrap !important;
    background: transparent !important
}

img.filter-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
    filter: opacity(0.6)
}

#markerDataModal .modal-body {
    flex: 1;
    min-height: 0;
    padding: 16px;
    margin-bottom: -6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.ht-poi-title {
    margin: 0 !important;
    font-family: var(--font-family-heading) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--color-text-heading) !important;
    letter-spacing: -0.5px !important
}

.ht-poi-desc {
    margin: 0;
    margin-bottom: 0 !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--color-text-subtle) !important
}

.ht-poi-route-info {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin-top: 20px !important;
    margin-bottom: 0;
    font-size: 0.88rem;
    color: #1d4ed8;
    background: rgba(66, 133, 244, 0.08) !important;
    border: 1px solid rgba(66, 133, 244, 0.15) !important;
    border-left: 3px solid #4285F4;
    border-radius: var(--radius-md) !important
}

.ht-poi-route-info .route-icon {
    display: flex !important;
    flex-shrink: 0;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    color: white !important;
    background: #4285F4 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3) !important
}

.ht-poi-route-info .route-icon .material-icons {
    font-size: 20px
}

.ht-poi-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 20px 24px 20px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0, 0, 0, 0.07)
}

.ht-btn-action.secondary {
    color: var(--color-text-heading) !important;
    background: rgba(0, 0, 0, 0.05) !important
}

.ht-btn-action .material-icons {
    font-size: 18px
}

#maps_filters .nav-item {
    width: auto !important
}

div#maps_filters a {
    color: var(--color-text-subtle)
}

.footer-mapfilters {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 53px;
    padding: env(safe-area-inset-bottom);
    background: var(--color-bg-card);
    -webkit-box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    transition: all ease 0.5s
}

#maps_filters .item.filter_active,
#maps_filters .item.mixitup-control-active {
    background-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px)
}

#maps_filters .item.filter_active .footer-icon-title,
#maps_filters .item.mixitup-control-active .footer-icon-title {
    color: var(--color-text-inverse) !important
}

#maps_filters .item.filter_active .filter-icon,
#maps_filters .item.mixitup-control-active .filter-icon {
    opacity: 1 !important;
    filter: grayscale(0) invert(1) brightness(10) !important
}

#map_canvas {
    position: relative;
    width: 92vw;
    height: 40vh;
    padding: 0;
    border: 2px solid var(--color-bg-card);
    border-radius: var(--radius-lg)
}

div#maps_filters {
    justify-content: flex-start !important
}

a#pdf_map {
    top: 85px;
    left: 300px
}

.ht-poi-dialog {
    max-width: 420px !important;
    padding: 0 15px !important;
    margin: 1.5rem auto !important
}

.ht-poi-content {
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important
}

.ht-poi-header-img {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important
}

.ht-poi-360-btn {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 0.8rem !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-inverse) !important;
    cursor: pointer !important;
    outline: none !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    transition: var(--transition-fast) !important
}

.ht-poi-360-btn i {
    font-size: 18px !important
}

.ht-poi-360-btn:hover {
    background: rgba(0, 0, 0, 0.5) !important
}

.ht-poi-360-btn:active {
    transform: scale(0.95) !important
}

.ht-poi-close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    color: var(--color-text-inverse) !important;
    cursor: pointer !important;
    outline: none !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    transition: var(--transition-fast) !important
}

.ht-poi-close-btn i {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important
}

.ht-poi-close-btn:hover {
    background: rgba(0, 0, 0, 0.5) !important
}

.ht-poi-close-btn:active {
    background: rgba(0, 0, 0, 0.7) !important;
    transform: scale(0.9) !important
}

.ht-poi-body {
    flex: 1;
    min-height: 0;
    padding: 24px 20px 20px 20px !important;
    margin-bottom: -6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.ht-poi-route-info .route-icon i {
    font-size: 20px !important
}

.ht-poi-route-info .route-text {
    font-family: var(--font-family-heading) !important;
    font-size: 0.95rem !important;
    color: var(--color-text-body) !important
}

.ht-poi-route-info .route-text strong {
    font-size: 1.05rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-heading) !important
}

.ht-btn-action,
.ht-poi-footer .btn {
    display: flex !important;
    flex: 1 !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    padding: 14px 12px !important;
    margin: 0 !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.95rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-inverse) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: var(--color-primary, #1a1a1a);
    border: none !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-fast) !important
}

.ht-btn-action i {
    font-size: 20px !important
}

.ht-btn-action.primary,
.ht-poi-footer .btn-dark {
    color: var(--color-text-inverse) !important;
    background: var(--color-primary, #1D174D) !important;
    box-shadow: 0 8px 20px rgba(29, 23, 77, 0.25) !important
}

.ht-btn-action.primary:active,
.ht-poi-footer .btn-dark:active {
    box-shadow: 0 4px 10px rgba(29, 23, 77, 0.2) !important;
    transform: scale(0.96) !important
}

.ht-btn-action.secondary:active {
    background: rgba(0, 0, 0, 0.1) !important;
    transform: scale(0.96) !important
}

#markerDataModal .modal-header-image button.close {
    top: 15px !important;
    right: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    color: white !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important
}

#markerDataModal .modal-header-image button.close span {
    margin-bottom: 2px !important;
    font-size: var(--text-xl) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: white !important;
    text-shadow: none !important
}

#streetViewBtnHeader {
    top: 15px !important;
    left: 15px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important
}

#markerDataModal .modal-body p {
    display: block !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--color-text-subtle) !important
}

.ht-poi-footer,
.ht-modal-footer .btn-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 21px 20px 20px 20px !important
}

.ht-poi-footer .btn-dark,
.ht-modal-footer .btn-inline .btn-dark:not([onclick*="sharePOI"]) {
    display: flex !important;
    flex: 1 1 40% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-inverse) !important;
    background: var(--color-primary, #1D174D) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 15px rgba(29, 23, 77, 0.25) !important
}

.ht-poi-footer a[onclick*="sharePOI"],
.ht-modal-footer .btn-inline a[onclick*="sharePOI"] {
    display: flex !important;
    flex: 1 1 100% !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-heading) !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important
}

.ht-poi-route-badge {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important
}

.ht-poi-route-badge i {
    margin: 0 !important;
    font-size: var(--text-base) !important;
    color: #4285F4 !important
}

.ht-poi-route-badge span {
    font-family: var(--font-family-heading) !important;
    font-size: 0.85rem !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1 !important;
    color: var(--color-text-heading) !important
}

@media (min-width: 992px) {
.mapa_hotel {
    position: absolute !important;
    top: 0;
    right: 0;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0;
}
    /* 1. EL CONTENEDOR PRINCIPAL FLOTANTE */
    .footer-mapfilters.ht-map-filters-panel {
        position: absolute !important; /* Flota sobre el contenedor del mapa */
        bottom: 30px !important; /* Separado del borde inferior */
        left: 0 !important;
        z-index: 1000 !important;
        width: calc(100% - 330px) !important; /* 100% menos el sidebar y 40px de margen derecho */
        max-width: 1140px !important; /* Tu límite exacto */
        
        /* LA MAGIA DEL TAMAÑO Y MARGEN */
        margin-left: 290px !important; /* Salva tu sidebar izquierdo */
        
        /* Estilo Lujo Silencioso (Cristal) */
        background: rgba(255, 255, 255, 0.95) !important;
        /* padding: 16px 24px !important; */
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
    }
    .first-container-web {
    height: 100vh !important;

}

}