:root {
    /* Uma única escala para toda a aplicação. Valores pequenos dentro de um
       componente continuam locais; somente raízes de tela usam estas faixas. */
    --z-map: 1;
    --z-navigation: 1000;
    --z-map-tools: 5000;
    --z-context: 10000;
    --z-floating-panel: 20000;
    --z-tooltip: 900000;
    --z-tooltip-child-dialog: 910000;
    --z-workspace-modal: 920000;
    --z-notification: 930000;
    --z-guided-tour: 10000000;
    --ui-layer-base: 1000000;
    --ui-layer-step: 100;
    --ui-system-layer: 9000000;
    --ui-tour-layer: 10000000;
}

/* Componentes que não entram no histórico (avisos e painéis do mapa) também
   usam a escala central, mas sem participar da pilha Voltar. */
[data-ui-system-layer="true"] {
    z-index: var(--ui-system-layer) !important;
}

[data-ui-floating-layer="true"] {
    z-index: var(--z-floating-panel) !important;
}

/* Camada transparente/inativa identificada pelo vigia de interface. */
[data-ui-click-through="true"] {
    pointer-events: none !important;
}

#loginOverlay.hidden,
#loading-overlay.hidden,
#global-loading-overlay.hidden,
.loading-overlay.hidden,
.sidebar-backdrop:not(.active) {
    pointer-events: none !important;
}

#pwa-offline-banner,
#pwa-custom-prompt,
.ui-system-blocking-dialog {
    z-index: var(--ui-system-layer) !important;
}

#portfolio-dashboard,
#local-status-panel,
#local-status-toggle {
    z-index: var(--z-floating-panel) !important;
}

#institutional-menu,
#notifDropdown {
    z-index: var(--z-context) !important;
}

/* Toda janela registrada recebe a ordem calculada pela pilha. O !important
   é intencional: neutraliza z-index antigos espalhados pelos módulos. */
[data-ui-layer="true"][data-ui-layer-index] {
    z-index: var(--ui-layer-z, var(--ui-layer-base)) !important;
}

[data-ui-layer-backdrop="true"][data-ui-layer-backdrop-active] {
    z-index: var(--ui-layer-backdrop-z, calc(var(--ui-layer-base) - 1)) !important;
}

[data-ui-layer-suspended="true"] {
    pointer-events: none !important;
}

/* Só o topo da pilha é interativo. Isto inclui o fundo clicável da ficha:
   um backdrop antigo nunca pode ficar invisível sobre o mapa. */
[data-ui-layer="true"][data-ui-layer-active="false"],
[data-ui-layer-backdrop="true"][data-ui-layer-backdrop-active="false"] {
    pointer-events: none !important;
}

/* No desktop o fundo do menu móvel jamais participa da interação. */
@media (min-width: 769px) {
    #sidebarBackdrop {
        pointer-events: none !important;
        opacity: 0 !important;
    }
}

.ui-layer-back-button {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid rgba(148, 163, 184, .58);
    border-radius: 999px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
    color: #334155;
    font: 800 12px/1 Outfit, "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.ui-layer-back-button:hover {
    border-color: #60a5fa;
    background: #eff6ff;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.ui-layer-back-button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .3);
    outline-offset: 2px;
}

/* Tooltips centralizados precisam do botão dentro do próprio cabeçalho. */
.lot-tooltip-container > .ui-layer-back-button,
.unit-tooltip-container > .ui-layer-back-button,
.proprietario-tooltip > .ui-layer-back-button,
.lead-tooltip > .ui-layer-back-button,
.leads-panel > .ui-layer-back-button {
    position: absolute;
    top: 12px;
    left: 12px;
}

.lot-tooltip-container.ui-layer-has-history .lot-badge-zona {
    left: 66px !important;
}

.proprietario-tooltip.ui-layer-has-history .proprietario-header,
.lead-tooltip.ui-layer-has-history > :first-child {
    padding-left: 82px !important;
}

/* Mensagens e passos guiados ficam acima das janelas de trabalho. */
.toast-container,
.toast,
.notification,
.notification-container,
#global-loader,
#loading-overlay,
.loading-overlay {
    z-index: var(--ui-system-layer) !important;
}

.introjs-overlay,
.introjs-helperLayer,
.introjs-tooltipReferenceLayer,
.onboarding-context-help {
    z-index: var(--ui-tour-layer) !important;
}

@media (max-width: 700px) {
    .ui-layer-back-button {
        top: 9px;
        left: 9px;
        min-height: 34px;
        padding: 7px 10px;
        font-size: 11px;
    }
}