/* ─────────────────────────────────────────────────────────────────
    18. RESPONSIVE — de mayor a menor
───────────────────────────────────────────────────────────────── */

/* ── Fixes base — evitar overflow horizontal en toda la app ── */
#page-unidades,
#page-contacto,
#page-terminos {
  overflow-x: hidden;
}

/* ── Tablet 761–899px ── */
@media (max-width:899px) and (min-width:761px) {
  .r360-subtitle {
    display: none;
  }

  /* Grid unidades en tablet */
  .units-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Modal en tablet: reducir panel derecho */
  .modal-box {
    grid-template-columns: 1fr 280px;
  }

  /* Pisos: nav más compacta */
  .pisos-nav {
    right: 16px;
  }

  .piso-nav-btn {
    padding: 6px 12px;
    font-size: .58rem;
    min-width: 48px;
  }
}

/* ── max-width 1000px ── */
@media (max-width:1000px) {
  .unit-ph {
    grid-column: span 1;
  }

  .page-inner {
    padding: max(86px, var(--fixed-controls-safe-top)) 36px 48px;
  }
}

/* ── max-width 760px (móvil + tablet pequeña) ── */
@media (max-width:760px) {

  /* Layout general */
  .page-inner {
    padding: max(72px, var(--fixed-controls-safe-top)) 18px 40px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 14px;
  }

  .page-header-count {
    font-size: clamp(2rem, 12vw, 3rem);
    line-height: .9;
  }

  /* Unidades: móvil — disponibilidad total siempre a la derecha (no columna) */
  #page-unidades .page-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
  }

  #page-unidades .page-header-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  #page-unidades .page-header-count {
    flex: 0 0 auto;
    text-align: right;
    margin-left: auto;
    line-height: 0.9;
  }

  #page-unidades .page-header-count::before {
    text-align: right;
  }

  /* Modal: fullscreen en mobile — resetea windowed desktop */
  .modal-box {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .modal-canvas {
    order: 1;
    min-height: 36dvh;
    max-height: 36dvh;
    flex-shrink: 0;
  }

  .modal-panel {
    order: 2;
    border-left: 2px solid var(--accent-ui-border);
    border-top: 0.5px solid #EAE4DC;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 16px 14px 28px;
  }

  /* Controles zoom/vista más grandes para touch */
  .mzoom-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .mzoom-btn svg,
  .mvista-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .mvista-btn {
    width: 46px !important;
    height: 44px !important;
  }

  .modal-vista-ctrl {
    top: 12px;
    right: 12px;
  }

  .modal-zoom-ctrl {
    bottom: 12px;
    left: 12px;
  }

  /* ── Unidades — cards responsivas ── */
  .units-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 12px;
  }

  .unit-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .uc-img {
    aspect-ratio: 16/9;
    max-height: 200px;
  }

  .uc-body {
    padding: 12px;
  }

  .uc-footer-btns {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .uc-gallery-btn,
  .uc-mas-btn {
    width: 100%;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }

  .uc-gallery-btn,
  .uc-mas-btn,
  .uf-chip,
  .piso-nav-btn,
  .ptog-btn,
  .btn-dark {
    min-height: 44px;
  }

  /* Eliminar hover transform en touch (evita salto al tap) */
  .unit-card:hover {
    transform: none;
  }

  /* ── Filtros responsive inline ── */

  /* Bug fix 1: filtros crece, vista queda fijo a la derecha */
  .units-controls-bar {
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .filter-dropdown-wrap {
    flex: 1;
    min-width: 0;
  }

  .view-dropdown-wrap {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .filter-toggle {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 10px 16px;
    font-size: .62rem;
    box-sizing: border-box;
    margin-bottom: 0;
  }

  .view-dropdown-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: .62rem;
    box-sizing: border-box;
    white-space: nowrap;
  }

  #filtersWrapper {
    min-width: 280px;
    max-width: calc(100vw - 32px);
  }

  /* Mobile: padding más compacto, heredar estructura de grid del base */
  .units-filters {
    padding: 12px;
  }

  .uf-group {
    padding: 10px 12px;
  }

  .uf-group:first-child {
    padding-left: 0;
  }

  /* Chips: tamaño natural (no estirarse), altura táctil mínima */
  .uf-chip {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .58rem;
    flex: 0 0 auto;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }

  .uf-footer {
    padding: 10px 12px;
  }

  /* Contacto */
  .contacto-inner {
    max-width: 100%;
  }

  .contacto-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cform-row {
    grid-template-columns: 1fr;
  }

  .clist-item {
    padding: 12px 14px;
    gap: 10px;
  }

  .clist-val {
    font-size: .78rem;
    line-height: 1.35;
    word-break: break-word;
  }

    .gallery-box {
    border-radius: 14px;
  }

  .gallery-slide {
    min-height: 42vh;
  }

  .gallery-nav {
    width: 30px;
    height: 48px;
    font-size: 1.3rem;
  }

  .gallery-prev {
    left: 8px;
  }

  .gallery-next {
    right: 8px;
  }

  /* Recorridos: ordenar acciones fijas para que nunca se oculten */
  .fs-btn--r360 {
    right: 14px;
    top: calc(14px + env(safe-area-inset-top));
  }

  .qr-btn--r360 {
    right: 14px !important;
    top: calc(14px + env(safe-area-inset-top) + 42px + 10px);
  }

  .r360-fab {
    right: calc(var(--ui-btn-edge, 14px) + var(--ui-btn-size, 42px) + var(--ui-btn-gap, 10px));
    top: calc(14px + env(safe-area-inset-top));
    max-width: calc(100vw - var(--ui-btn-edge, 14px) - var(--ui-btn-size, 42px) - var(--ui-btn-gap, 10px) - var(--ui-btn-size, 42px) - 16px);
  }

  .r360-drawer {
    z-index: var(--z-r360-drawer);
    top: calc(14px + env(safe-area-inset-top) + 42px + 10px);
    right: 14px;
    width: min(240px, calc(100vw - 28px));
    max-height: min(68vh, 460px);
  }

  /* Pisos: toggle — posición resuelta por sistema de tokens (sección 19) */
  .ptog-btn {
    padding: 0 12px;
  }

  /* Pisos: nav lateral */
  .pisos-nav {
    right: 12px;
    padding: 6px 4px;
  }

  .piso-nav-btn {
    padding: 6px 12px;
    font-size: .56rem;
    min-width: 44px;
    color: #1A1A18 !important;
  }

  .piso-nav-btn.active {
    background: var(--accent-strong) !important;
    color: #F8F8F5 !important;
  }

  /* Pisos: info — abajo-izquierda */
  .piso-info {
    top: auto !important;
    bottom: var(--ui-btn-bottom) !important;
    left: var(--ui-btn-edge) !important;
    right: auto !important;
    max-width: 160px !important;
  }

  /* Leyenda — encima de la nav bar abajo */
  .pisos-legend {
    bottom: calc(var(--pisos-nav-strip-approx) + 10px) !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3500 !important;
  }

  .piso-title {
    font-size: .9rem;
  }

}

/* ── Modal portrait-only: stack vertical ── */
@media (max-width:767px) {
  /* Chips de balcón: ocultar ícono en móviles (<768px) — el color comunica lo mismo */
  .uc-balcon-icon { display: none; }
}

@media (max-width:760px) and (orientation:portrait) {
  .modal-box {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  .modal-canvas {
    order: 1 !important;
    min-height: 36dvh !important;
    max-height: 36dvh !important;
    flex-shrink: 0 !important;
    height: auto !important;
  }

  .modal-panel {
    order: 2 !important;
    border-left: none !important;
    border-top: 0.5px solid #EAE4DC !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
}

/* ── Modal landscape (iPhone SE y similares): grid lado a lado ── */
@media (max-width:760px) and (orientation:landscape) {
  .modal-box {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: 1fr 240px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .modal-canvas {
    order: unset !important;
    min-height: unset !important;
    max-height: unset !important;
    height: 100% !important;
    flex-shrink: unset !important;
  }

  .modal-panel {
    order: unset !important;
    border-top: none !important;
    border-left: 2px solid var(--accent-ui-border) !important;
    overflow-y: auto !important;
    flex: unset !important;
    padding: 10px 10px 14px !important;
    font-size: .9em !important;
  }

  /* Panel más compacto en landscape pequeño */
  .modal-title {
    font-size: 1.1rem !important;
  }

  .modal-actions {
    padding-top: 8px !important;
    margin-top: 6px !important;
    gap: 4px !important;
  }

  .mbtn {
    padding: 9px 10px !important;
    font-size: .58rem !important;
  }
}

/* ── Tablet portrait — modal fullscreen (iPad mini 768px, iPad 810px, iPad Pro 1024px) ── */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .modal-box {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  .modal-canvas {
    order: 1 !important;
    min-height: 44dvh !important;
    max-height: 44dvh !important;
    flex-shrink: 0 !important;
    height: auto !important;
  }

  .modal-panel {
    order: 2 !important;
    border-left: none !important;
    border-top: 0.5px solid #EAE4DC !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px 18px 24px !important;
  }
}

/* ── max-width 599px (portrait móvil) ── */
@media (max-width:599px) {

  /* Pisos: toggle — posición resuelta por sistema de tokens */
  .ptog-btn {
    padding: 0 10px !important;
    font-size: .58rem !important;
  }

  /* Pisos: info abajo-izquierda */
  .piso-info {
    top: auto !important;
    bottom: var(--ui-btn-bottom) !important;
    left: var(--ui-btn-edge) !important;
    right: auto !important;
    max-width: 160px !important;
    transform: none !important;
  }

  /* Leyenda: encima de la nav abajo */
  .pisos-legend {
    bottom: calc(var(--pisos-nav-strip-approx) + 10px) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 3500 !important;
  }

  .piso-title {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .piso-desc {
    font-size: .62rem !important;
    white-space: normal !important;
  }

  /* Mini card: posición sobre la nav en portrait — layout lo maneja el bloque consolidado abajo */
  .page-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  #page-unidades .page-header-count::before {
    margin-bottom: 2px;
  }
}

/* ── Portrait (móvil + tablet iPad): plano horizontal con scroll ──
   Aplica a cualquier dispositivo touch en portrait.
   Usa hover:none O pointer:coarse para cubrir todos los iPads en Safari. ── */
@media (orientation:portrait) and (hover:none),
(orientation:portrait) and (pointer:coarse) {
  #page-pisos {
    /* Forzar que el plano sea más ancho que la pantalla para que haya scroll.
       En portrait la altura ≈ ancho del plano original (ratio 1.3832).
       Usamos 100dvh * ratio para que el plano quepa verticalmente completo. */
    --pisos-plan-width: calc(100dvh * var(--pisos-plan-ratio));
  }

  #page-pisos .pisos-bg {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    height: 100% !important;
  }

  #page-pisos .pisos-bg::-webkit-scrollbar {
    display: none !important;
  }

  #page-pisos .pisos-plan-wrap {
    min-width: var(--pisos-plan-width) !important;
    width: var(--pisos-plan-width) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 0 0 auto !important;
    position: relative !important;
  }

  #page-pisos .pisos-bg-img {
    object-fit: fill !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }

  #page-pisos .pisos-svg-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Nav: barra horizontal fija en el fondo */
  #page-pisos .pisos-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    scrollbar-width: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 0.5px solid rgba(0, 0, 0, .10) !important;
    border-bottom: none !important;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    background: rgba(232, 232, 228, .96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  #page-pisos .pisos-nav::-webkit-scrollbar {
    display: none !important;
  }

  #page-pisos .piso-nav-btn {
    flex-shrink: 0 !important;
    min-width: auto !important;
    padding: 9px 16px !important;
    font-size: .6rem !important;
    min-height: 38px !important;
  }

  /* Info: sobre la nav bar, lado izquierdo — portrait */
  #page-pisos .piso-info {
    position: fixed !important;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: 12px !important;
    right: auto !important;
    max-width: 150px !important;
    height: var(--ui-btn-size, 44px) !important;
    transform: none !important;
    z-index: 3500 !important;
  }

  /* Leyenda: oculta en portrait touch (mobile + tablet) */
  #page-pisos .pisos-legend,
  #page-pisos #pisosLegend {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Mini card: posición sobre la nav — layout lo maneja el bloque consolidado */
  #page-pisos .piso-unit-card {
    bottom: var(--pisos-card-above-nav) !important;
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
  }
}

/* Mantener regla legacy estrecha para Safari < 16 que no soporte hover:none */
@media (max-width:599px) and (orientation:portrait) {
  .pisos-bg {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pinch-zoom !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    height: 100% !important;
  }

  .pisos-bg::-webkit-scrollbar {
    display: none !important;
  }

  .pisos-plan-wrap {
    min-width: var(--pisos-plan-width) !important;
    width: var(--pisos-plan-width) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 0 0 auto !important;
    position: relative !important;
  }

  .pisos-bg-img {
    object-fit: contain !important;
    object-position: center center !important;
  }

  .pisos-svg-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Nav: barra horizontal en el fondo */
  .pisos-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    scrollbar-width: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 0.5px solid rgba(255, 255, 255, .1) !important;
    border-bottom: none !important;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    background: rgba(10, 10, 10, .78) !important;
    backdrop-filter: blur(14px) !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .pisos-nav::-webkit-scrollbar {
    display: none !important;
  }

  .piso-nav-btn {
    flex-shrink: 0 !important;
    min-width: auto !important;
    padding: 9px 16px !important;
    font-size: .6rem !important;
    min-height: 36px !important;
    color: rgba(255, 255, 255, .8) !important;
    background: rgba(255, 255, 255, .08) !important;
  }

  /* Info: abajo-izquierda */
  .piso-info {
    top: auto !important;
    bottom: var(--ui-btn-bottom) !important;
    left: var(--ui-btn-edge) !important;
    right: auto !important;
    max-width: 160px !important;
  }

  /* Leyenda: encima de la nav bar abajo */
  .pisos-legend {
    bottom: calc(var(--pisos-nav-strip-approx) + 10px) !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 3500 !important;
  }

  /* Mini card: posición sobre la nav — layout lo maneja el bloque consolidado */
  .piso-unit-card {
    bottom: var(--pisos-card-above-nav) !important;
  }
}

/* ── max-width 500px ── */
@media (max-width:500px) {

  /* 500px */
  .gallery-title {
    font-size: .9rem;
  }

  .gallery-dots {
    gap: 5px;
  }

  /* Pisos nav en portrait: botones más pequeños */
  .piso-nav-btn {
    padding: 5px 10px;
    min-width: 38px;
    font-size: .54rem;
  }

  /* Modal: panel más compacto */
  .modal-title {
    font-size: 1.3rem;
  }

  .modal-canvas {
    min-height: 34dvh;
    max-height: 34dvh;
  }
}

/* ── max-width 480px (mobile pequeño) ── */
@media (max-width:480px) {

  /* Solo aplicar 1 columna a grid y list, NO a magazine */
  .units-grid[data-view="grid"],
  .units-grid[data-view="list"] {
    grid-template-columns: 1fr !important;
  }

  /* fab y fs-btn son fixed — se adaptan solos con safe-area-inset-top en su definición base */
  .r360-drawer {
    z-index: var(--z-r360-drawer) !important;
    width: min(220px, calc(100vw - 24px)) !important;
    max-height: min(60vh, 400px) !important;
  }

  .r360-drawer.open {
    transform: translateY(0) scale(1) !important;
  }

  .r360-handle {
    display: none !important;
  }

  .r360-drawer-inner {
    padding: 6px 4px 8px !important;
    overflow-y: auto !important;
  }

  .r360-subtitle {
    display: none !important;
  }

  .r360-now-name {
    max-width: 110px;
  }

  .r360-item {
    padding: 9px 10px !important;
  }

  .r360-item-name {
    font-size: .75rem !important;
  }

  .r360-item-desc {
    font-size: .58rem !important;
  }

  /* r360-fab label/size now handled by final stabilization block */
}

/* ── Landscape móvil (altura < 500px) — cubre hasta iPhone Pro Max 932px ── */
@media (max-height:500px) and (max-width:1024px) {

  /* ── Ubicación: landscape compacto ── */
  .ubi-data-strip {
    bottom: 8px;
    left: 8px;
    right: 8px;
    border-radius: 9px;
  }

  .ubi-strip-cell {
    padding: 7px 11px;
  }

  .ubi-strip-label {
    font-size: .38rem;
  }

  .ubi-strip-val {
    font-size: .62rem;
  }

  /* Pisos: toggle — posición resuelta por sistema de tokens (sección 19) */
  .ptog-btn {
    padding: 0 10px !important;
    font-size: .56rem !important;
  }

  .piso-info {
    top: auto !important;
    bottom: var(--ui-btn-bottom) !important;
    left: var(--ui-btn-edge) !important;
    right: auto !important;
  }

  .piso-title {
    font-size: 1.3rem;
  }

  /* Nav lateral: siempre pegada a la derecha.
     top usa el tamaño real de los botones (44px en ≤760px, 34px en >760px).
     Cubrimos el peor caso con un valor fijo seguro:
     safe-area-inset-top + 14px (edge) + 44px (btn) + 10px (gap) = ~68px + safe area */
  .pisos-nav {
    right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
    top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    bottom: 8px !important;
    left: auto !important;
    transform: none !important;
    flex-direction: column !important;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: none !important;
    padding: 5px 4px;
    border-radius: 10px !important;
    border: 0.5px solid rgba(255, 255, 255, .14) !important;
    gap: 2px !important;
  }

  .piso-nav-btn {
    padding: 5px 10px;
    font-size: .52rem;
    min-width: 38px;
  }

  /* Leyenda: abajo centrada, no tapa nada */
  .pisos-legend {
    top: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    gap: 8px !important;
    padding: 5px 12px !important;
    z-index: 3500 !important;
  }

  .pisos-legend-item {
    font-size: .5rem;
    gap: 4px;
  }

  .pisos-legend-dot {
    width: 5px;
    height: 5px;
  }

    .r360-drawer {
    z-index: var(--z-r360-drawer) !important;
    width: min(210px, 55vw) !important;
    max-height: calc(100dvh - 80px) !important;
    top: calc(10px + env(safe-area-inset-top) + 34px + 8px);
    right: 14px;
  }

  .r360-drawer.open {
    transform: translateY(0) scale(1) !important;
  }

  .r360-handle {
    display: none !important;
  }

  .r360-drawer-inner {
    padding: 4px 4px 8px !important;
    overflow-y: auto !important;
  }

  .r360-drawer-header {
    display: none !important;
  }

  .r360-list {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    gap: 1px !important;
    flex: none !important;
    padding-bottom: 4px !important;
  }

  .r360-item {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    min-width: unset !important;
    max-width: unset !important;
  }

  .r360-item-badge {
    width: 22px !important;
    height: 22px !important;
    font-size: .46rem !important;
    border-radius: 6px !important;
  }

  .r360-item-name {
    font-size: .7rem !important;
    white-space: nowrap !important;
  }

  .r360-item-desc,
  .r360-item-arr {
    display: none !important;
  }

  .r360-now-name {
    font-size: .7rem !important;
    max-width: 100px !important;
  }

  .qr-btn--r360 {
    z-index: 3210;
  }

  /* Modal landscape: mantener grid lado a lado */
  .modal-box {
    height: 100dvh !important;
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: 1fr 280px !important;
  }

  .modal-canvas {
    min-height: unset !important;
    max-height: unset !important;
    order: unset !important;
    height: 100% !important;
  }

  .modal-panel {
    order: unset !important;
    border-top: none !important;
    border-left: 2px solid var(--accent-ui-border) !important;
    overflow-y: auto !important;
    padding: 14px 12px 14px !important;
  }
}

/* ── Safe area insets (notch / home indicator) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  :root {
    --fixed-controls-safe-top: calc(var(--ui-btn-top, calc(22px + env(safe-area-inset-top))) + var(--ui-btn-size, 42px) + 14px);
  }

  .r360-drawer {
    z-index: var(--z-r360-drawer);
    top: calc(var(--ui-btn-top, calc(22px + env(safe-area-inset-top))) + var(--ui-btn-size, 42px) + 8px);
  }

  .modal-panel {
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }

  .pisos-nav {
    padding-bottom: max(7px, calc(env(safe-area-inset-bottom) / 2));
  }

  .piso-unit-card {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* ── PISOS — PORTRAIT FIX FINAL ──────────────────────────────────────────
   Valores directos (sin CSS vars) para evitar fallos de resolución en Safari.
   Al estar al final del archivo (cargado último) gana source order.
   Cubre TODOS los dispositivos portrait, incluidos DevTools sin hover:none.
──────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) and (orientation: portrait) {
  #page-pisos .piso-info {
    position: fixed !important;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: 12px !important;
    right: auto !important;
    max-width: 150px !important;
    height: 44px !important;
    transform: none !important;
    z-index: 3500 !important;
  }
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  /* Ancho del plano: mismo cálculo que mobile */
  #page-pisos {
    --pisos-plan-width: calc(100dvh * var(--pisos-plan-ratio));
  }

  /* Plan: scroll horizontal (cubre hover:hover — Responsively, Safari sin touch) */
  #page-pisos .pisos-bg {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    height: 100% !important;
  }

  #page-pisos .pisos-bg::-webkit-scrollbar {
    display: none !important;
  }

  #page-pisos .pisos-plan-wrap {
    min-width: var(--pisos-plan-width) !important;
    width: var(--pisos-plan-width) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 0 0 auto !important;
    position: relative !important;
  }

  #page-pisos .pisos-bg-img {
    object-fit: fill !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }

  #page-pisos .pisos-svg-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Nav de pisos: barra horizontal fija en bottom (igual que mobile) */
  #page-pisos .pisos-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 0.5px solid rgba(0, 0, 0, .10) !important;
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
    background: rgba(232, 232, 228, .97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    justify-content: flex-start !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06) !important;
    z-index: 3400 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #page-pisos .pisos-nav::-webkit-scrollbar {
    display: none !important;
  }

  #page-pisos .piso-nav-btn {
    flex-shrink: 0 !important;
    padding: 9px 18px !important;
    font-size: .62rem !important;
    min-height: 38px !important;
    color: #1A1A18 !important;
    background: rgba(30, 30, 28, .07) !important;
  }

  #page-pisos .piso-nav-btn.active {
    background: var(--accent-strong) !important;
    color: #F8F8F5 !important;
  }

  /* Indicador de piso: sobre la nav bar, lado izquierdo */
  #page-pisos .piso-info {
    position: fixed !important;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: 12px !important;
    right: auto !important;
    max-width: 160px !important;
    height: 44px !important;
    transform: none !important;
    z-index: 3500 !important;
  }

  /* Leyenda disponibilidad: siempre oculta en tablet portrait */
  #page-pisos .pisos-legend,
  #page-pisos #pisosLegend {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ── Landscape muy estrecho (altura < 400px): compactar botones fijos ── */
@media (max-height:400px) {

  .menu-btn,
  .fs-btn,
  .qr-btn,
  .r360-fab {
    width: 34px;
    height: 34px;
  }

  .r360-fab {
    padding: 0 10px;
    font-size: .52rem;
  }

  .menu-btn {
    gap: 4px;
  }

  .menu-btn span:nth-child(1),
  .menu-btn span:nth-child(3) {
    width: 18px;
  }

  .menu-btn span:nth-child(2) {
    width: 11px;
  }

  /* Recalcular posiciones con botones más pequeños */
  .fs-btn {
    right: 14px;
  }

  .fs-btn--r360 {
    right: 14px;
    top: calc(10px + env(safe-area-inset-top));
  }

  .qr-btn {
    right: calc(14px + 34px + 8px);
  }

  .qr-btn--r360 {
    right: 14px !important;
    top: calc(10px + env(safe-area-inset-top) + 34px + 8px);
  }

  .r360-fab {
    right: calc(14px + 34px + 8px);
    top: calc(10px + env(safe-area-inset-top));
  }

  /* Pisos landscape: nav con más espacio disponible — 14+34+8+34+8+8 = 106px */
  .pisos-nav {
    right: calc(env(safe-area-inset-right, 0px) + 106px) !important;
  }

  /* Toggle pisos */
  .pisos-toggle {
    top: calc(14px + env(safe-area-inset-top)) !important;
  }

  /* Leyenda pisos */
  .pisos-legend {
    top: calc(14px + env(safe-area-inset-top)) !important;
    left: calc(50% + 75px) !important;
    gap: 6px !important;
    padding: 4px 8px !important;
  }

  .pisos-legend-item {
    font-size: .45rem !important;
  }
}