/* SpaMaster360 v47.25 — UI Layer System
   Jerarquía global de capas para evitar que topbar/sidebar queden sobre modales.
   Se carga al final para centralizar z-index sin tocar lógica de módulos. */
:root{
  --sm360-z-base:0;
  --sm360-z-sidebar:120;
  --sm360-z-topbar:140;
  --sm360-z-spa-selector:180;
  --sm360-z-dropdown:700;
  --sm360-z-tooltip:1200;
  --sm360-z-overlay:40000;
  --sm360-z-modal:40010;
  --sm360-z-modal-content:40020;
  --sm360-z-modal-popover:40030;
  --sm360-z-toast:50000;
  --sm360-z-debug:60000;
}

/* Capas base de aplicación */
html body .side-nav,
html body aside.side-nav,
html body #sideNav,
html body .sidebar{
  z-index:var(--sm360-z-sidebar)!important;
}

html body header.topbar,
html body .topbar,
html body #topbar,
html body .app-topbar{
  z-index:var(--sm360-z-topbar)!important;
}

html body #spaChips,
html body .spa-chips,
html body .sm360-stable-spa-chips{
  z-index:var(--sm360-z-spa-selector)!important;
}

html body .sc-dropdown,
html body .dropdown-menu,
html body .select-menu,
html body .flatpickr-calendar,
html body .agenda-client-suggestions,
html body #arClientSuggestions{
  z-index:var(--sm360-z-dropdown)!important;
}

/* Modales globales: siempre por encima de topbar/sidebar. */
html body .modal.open,
html body .modal.show,
html body .pos-modal.open,
html body .agenda-v221-modal-backdrop,
html body .sm360-modal-backdrop,
html body .sm360-modal-overlay,
html body [role="dialog"].open,
html body dialog[open]{
  z-index:var(--sm360-z-overlay)!important;
}

html body .modal.open .modal-card,
html body .modal.show .modal-card,
html body .pos-modal.open .pos-modal-card,
html body .agenda-v221-modal,
html body .sm360-modal,
html body .sm360-clean-reservation-modal,
html body .sm360-reserve-modal,
html body [role="dialog"].open > *,
html body dialog[open] > *{
  z-index:var(--sm360-z-modal-content)!important;
}

/* POS: overlay de pantalla completa y tarjeta por encima de cualquier header sticky. */
html body.sc-view-pos .pos-modal.open,
html body .pos-modal.open[id^="pos"]{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:var(--sm360-z-modal)!important;
  isolation:isolate!important;
  transform:none!important;
  translate:none!important;
  contain:none!important;
  background:rgba(15,23,42,.34)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
}
html body.sc-view-pos .pos-modal.open .pos-modal-card,
html body .pos-modal.open[id^="pos"] .pos-modal-card{
  position:relative!important;
  z-index:var(--sm360-z-modal-content)!important;
  transform:none!important;
  translate:none!important;
}

/* Si el modal fue portalizado al body, no depende del stacking context del workspace. */
html body > .pos-modal.open[id^="pos"]{
  z-index:var(--sm360-z-modal)!important;
}
html body > .pos-modal.open[id^="pos"] .pos-modal-card{
  z-index:var(--sm360-z-modal-content)!important;
}

/* Toasts y diagnósticos por encima de modales solo cuando sea necesario. */
html body .sc-toast-stack,
html body #scRightToastContainer,
html body #scToastStackRight,
html body .toast-container,
html body .notification-toast{
  z-index:var(--sm360-z-toast)!important;
}

html body .sm360-debug-panel,
html body .sm360-diagnostic-panel{
  z-index:var(--sm360-z-debug)!important;
}

/* Estado modal: evita scroll lateral/flicker y deja la app sin interacción visual detrás. */
html body.sm360-modal-open,
html body.sm360-pos-modal-open{
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}
html body.sm360-modal-open .topbar,
html body.sm360-pos-modal-open .topbar{
  z-index:var(--sm360-z-topbar)!important;
}