/* Shell móvil Alquileres Pro — drawer nav + topbar + bottom nav (≤940px). PC sin cambios. */

:root {
  --app-mobile-topbar-h: 52px;
  --app-mobile-bottom-nav-h: 58px;
}

.app-mobile-topbar,
.app-mobile-backdrop,
.app-mobile-bottom-nav {
  display: none;
}

@media screen and (max-width: 940px) {
  body.app-mobile-shell .app-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10185;
    height: var(--app-mobile-topbar-h);
    padding: 0 max(12px, env(safe-area-inset-right, 0)) 0 max(12px, env(safe-area-inset-left, 0));
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
  }

  html.theme-f10 body.app-mobile-shell .app-mobile-topbar {
    background: rgba(46, 43, 41, 0.96);
    border-bottom-color: rgba(168, 146, 116, 0.22);
  }

  body.app-mobile-shell .app-mobile-topbar__menu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    cursor: pointer;
  }

  body.app-mobile-shell .app-mobile-topbar__menu:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  body.app-mobile-shell .app-mobile-topbar__menu-icon {
    font-size: 1.15rem;
    line-height: 1;
  }

  body.app-mobile-shell .app-mobile-topbar__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app-mobile-shell .app-mobile-topbar__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-mobile-shell .app-mobile-topbar__sub {
    margin: 2px 0 0;
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-mobile-shell .app-mobile-topbar__status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body.app-mobile-shell .app-mobile-topbar__status .save-status-indicator {
    margin: 0;
  }

  body.app-mobile-shell aside {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 10200;
    width: min(290px, 88vw);
    height: 100dvh;
    height: 100svh;
    max-height: none !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    border-right: 1px solid var(--border) !important;
    border-bottom: none !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.app-mobile-shell aside.is-open {
    transform: translateX(0);
  }

  body.app-mobile-shell .app-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10190;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
  }

  body.app-mobile-shell.app-mobile-nav-open .app-mobile-backdrop {
    display: block;
  }

  body.app-mobile-shell.app-mobile-nav-open {
    overflow: hidden;
  }

  html:has(body.app-mobile-shell.app-mobile-nav-open) {
    overflow: hidden !important;
  }

  /*
   * Scroll de página en móvil (dueño + operador).
   * Las vistas v5 usan viewport fijo + scroll interno (PC); en ≤940px eso rompe el deslizar con el dedo.
   * Excepción: wizard Cobranzas mantiene scroll interno en .cob-w2-main.
   *
   * Nota: html es padre de body — no usar "body … html" (selector inválido, no aplica).
   */
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open):not(:has(#cobranzas.view.cobranzas--wizard-active.active))) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open) main {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-prop-v5-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-inq-v5-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-con-v5-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-cob-v5-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-cob-v5-layout--panels,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-cob-v5-layout__list,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-dash-v5-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-caja-v1-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-recibo-v5-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-liq-v1-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open) #cobranzasListPanels,
  body.app-mobile-shell:not(.app-mobile-nav-open) #cobranzasListChrome,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-prop-listado-table-body,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-inq-listado-table-body,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-con-listado-table-body,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-cob-panel__scroll,
  body.app-mobile-shell:not(.app-mobile-nav-open) #cobranzas .panel-body.nd-cob-panel__scroll,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-dash-ops,
  body.app-mobile-shell:not(.app-mobile-nav-open) .nd-dash-ops__block,
  body.app-mobile-shell:not(.app-mobile-nav-open) .action-cards,
  body.app-mobile-shell:not(.app-mobile-nav-open) .timeline {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: none !important;
    min-height: 0 !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open) main > section.view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #dashboard.view.nd-dash-v5-view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #cobranzas.view.nd-cob-v5-view.active:not(.cobranzas--wizard-active),
  body.app-mobile-shell:not(.app-mobile-nav-open) #adminCaja.view.nd-caja-v1-view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #liquidaciones.view.nd-liq-v1-view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #recibo.view.nd-recibo-v5-view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #propiedades.view.nd-prop-v5-view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #inquilinos.view.nd-inq-v5-view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #contratos.view.nd-con-v5-view.active,
  body.app-mobile-shell:not(.app-mobile-nav-open) #adminDiseno.view.nd-config-v5-view.active {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #cobranzas.view.nd-cob-v5-view.active:not(.cobranzas--wizard-active)),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #dashboard.view.nd-dash-v5-view.active),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #adminCaja.view.nd-caja-v1-view.active),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #liquidaciones.view.nd-liq-v1-view.active),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #recibo.view.nd-recibo-v5-view.active),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #propiedades.view.nd-prop-v5-view.active),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #inquilinos.view.nd-inq-v5-view.active),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #contratos.view.nd-con-v5-view.active),
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)) main:has(> #adminDiseno.view.nd-config-v5-view.active) {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /*
   * Cobranzas listado: .nd-cob-v5-panel queda en height:100% + overflow:hidden (PC).
   * Sin esto el listado queda recortado y no hay scroll ni de página ni interno.
   */
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)):has(
      main > #cobranzas.view.nd-cob-v5-view.active:not(.cobranzas--wizard-active)
    ) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open)
    #cobranzas.view.nd-cob-v5-view.active:not(.cobranzas--wizard-active)
    .nd-cob-v5-panel,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #cobranzas.view.nd-cob-v5-view.active:not(.cobranzas--wizard-active)
    .nd-cob-listado-table-head {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: none !important;
    min-height: 0 !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open)
    #cobranzas.view.nd-cob-v5-view.active:not(.cobranzas--wizard-active)
    .nd-cob-panel__scroll {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: none !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Caja inmobiliaria: layout con overflow-y:auto (PC) + ingresos-table-host max-height 62vh.
   * En móvil recorta o anida scroll y el dedo no mueve la pantalla.
   */
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)):has(
      main > #adminCaja.view.nd-caja-v1-view.active
    ) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminCaja.view.nd-caja-v1-view.active
    .nd-caja-v1-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminCaja.view.nd-caja-v1-view.active
    .nd-caja-v1-layout__body,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminCaja.view.nd-caja-v1-view.active
    [data-caja-tab-panel],
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminCaja.view.nd-caja-v1-view.active
    .nd-cob-v5-panel.nd-caja-v1-panel,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminCaja.view.nd-caja-v1-view.active
    .nd-caja-gastos-panel,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminCaja.view.nd-caja-v1-view.active
    .nd-caja-ingresos-table-host,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminCaja.view.nd-caja-v1-view.active
    .nd-caja-table-wrap {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: none !important;
    min-height: 0 !important;
  }

  /*
   * Configuración: scroll interno solo en .nd-config-v5-layout__body (PC).
   * Header + pestañas quedan fuera → el dedo “a veces sí, a veces no”. Unificar scroll de página.
   */
  html:has(body.app-mobile-shell:not(.app-mobile-nav-open)):has(
      main > #adminDiseno.view.nd-config-v5-view.active
    ) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-layout,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-layout__top,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-layout__body,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-panels,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-panel-wrap,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-panel,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-admin,
  body.app-mobile-shell:not(.app-mobile-nav-open)
    #adminDiseno.view.nd-config-v5-view.active
    .nd-config-v5-sistema {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: none !important;
    min-height: 0 !important;
    overscroll-behavior: auto !important;
  }

  body.app-mobile-shell:not(.app-mobile-nav-open) #adminDiseno.view.nd-config-v5-view.active .nd-config-v5-tabs {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
  }

  /* Wizard Cobranzas: alto útil entre topbar y bottom nav; scroll solo en el formulario */
  body.app-mobile-shell #cobranzas.view.nd-cob-v5-view.active.cobranzas--wizard-active {
    display: flex !important;
    flex-direction: column !important;
    height: calc(
      100dvh - var(--app-mobile-topbar-h) - var(--app-mobile-bottom-nav-h) -
        env(safe-area-inset-bottom, 0px)
    ) !important;
    max-height: calc(
      100dvh - var(--app-mobile-topbar-h) - var(--app-mobile-bottom-nav-h) -
        env(safe-area-inset-bottom, 0px)
    ) !important;
    overflow: hidden !important;
  }

  body.app-mobile-shell:has(#cobranzas.view.cobranzas--wizard-active.active) {
    overflow: hidden;
  }

  html:has(body.app-mobile-shell #cobranzas.view.nd-cob-v5-view.active.cobranzas--wizard-active) {
    overflow: hidden !important;
  }

  body.app-mobile-shell:has(#cobranzas.view.cobranzas--wizard-active.active) main {
    display: flex !important;
    flex-direction: column !important;
    height: calc(
      100dvh - var(--app-mobile-topbar-h) - var(--app-mobile-bottom-nav-h) -
        env(safe-area-inset-bottom, 0px)
    ) !important;
    max-height: calc(
      100dvh - var(--app-mobile-topbar-h) - var(--app-mobile-bottom-nav-h) -
        env(safe-area-inset-bottom, 0px)
    ) !important;
    overflow: hidden !important;
  }

  body.app-mobile-shell #cobranzas.cobranzas--wizard-active #cobranzasWizardHost,
  body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-root {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-workspace {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
  }

  body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-main {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body.app-mobile-shell .app-fixed-brand {
    display: none !important;
  }

  body.app-mobile-shell main {
    margin-left: 0 !important;
    padding-top: calc(10px + var(--app-mobile-topbar-h)) !important;
    padding-bottom: calc(
      16px + var(--app-mobile-bottom-nav-h) + env(safe-area-inset-bottom, 0)
    ) !important;
  }

  body.app-mobile-shell .save-status-toolbar {
    position: fixed;
    top: 0;
    right: max(10px, env(safe-area-inset-right, 0));
    z-index: 10186;
    height: var(--app-mobile-topbar-h);
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
  }

  body.app-mobile-shell .save-status-toolbar .save-status-indicator {
    pointer-events: auto;
  }

  body.app-mobile-shell .save-status-toolbar .btn-app-fullscreen {
    display: none;
  }

  body.app-mobile-shell .app-mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10180;
    height: calc(var(--app-mobile-bottom-nav-h) + env(safe-area-inset-bottom, 0));
    padding: 0 max(4px, env(safe-area-inset-right, 0)) env(safe-area-inset-bottom, 0)
      max(4px, env(safe-area-inset-left, 0));
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.98);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(10px);
  }

  html.theme-f10 body.app-mobile-shell .app-mobile-bottom-nav {
    background: rgba(46, 43, 41, 0.98);
    border-top-color: rgba(168, 146, 116, 0.22);
  }

  body.app-mobile-shell .app-mobile-bottom-nav__btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 6px 2px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  body.app-mobile-shell .app-mobile-bottom-nav__btn svg {
    width: 20px;
    height: 20px;
    opacity: 0.78;
  }

  body.app-mobile-shell .app-mobile-bottom-nav__btn.is-active {
    color: var(--text);
  }

  body.app-mobile-shell .app-mobile-bottom-nav__btn.is-active svg {
    opacity: 1;
  }

  body.app-mobile-shell .app-mobile-bottom-nav__btn--more {
    font-size: 0.68rem;
  }

  body.app-mobile-shell .app-mobile-bottom-nav__btn.hidden {
    display: none;
  }

  /* Cobranzas: KPIs del mes colapsables en móvil angosto */
  body.app-mobile-shell #cobranzas.view.nd-cob-v5-view.active .cob-cierre-alert-wrap {
    margin-bottom: 8px;
  }

  body.app-mobile-shell #cobranzas.view.nd-cob-v5-view.active .nd-cob-v5-mes-strip {
    gap: 8px;
  }

  /* Wizard: resumen Caja arriba y sticky */
  body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-workspace,
  body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "summary"
      "content" !important;
  }

  body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-summary {
    position: sticky;
    top: var(--app-mobile-topbar-h);
    z-index: 6;
    grid-area: summary;
    border-left: 0;
    border-bottom: 1px solid rgba(186, 168, 142, 0.14);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    padding: 0.5rem 0.75rem;
    max-height: none;
    overflow: visible;
  }

  html.theme-f10 body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-summary {
    background: rgba(46, 43, 41, 0.94);
  }

  body.app-mobile-shell #cobranzas.cobranzas--wizard-active .cob-w2-sum-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.5rem;
  }
}