/*
   GUARUGEO — casca móvel final
   Esta folha é carregada depois dos módulos. Ela só atua em telas até 768px
   e concentra viewport, áreas seguras, rolagem e posicionamento dos controles.
   O desktop continua a usar as regras originais dos componentes.
*/

/* A alça só existe na folha móvel. Fora dela, o cabeçalho desktop continua
   exatamente como sempre foi, sem um botão vazio ocupando espaço. */
.mobile-sidebar-grip {
    display: none;
}

.mobile-sidebar-compliance {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --mobile-safe-top: env(safe-area-inset-top, 0px);
        --mobile-safe-right: env(safe-area-inset-right, 0px);
        --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mobile-safe-left: env(safe-area-inset-left, 0px);
        --mobile-sheet-peek: 68px;
        --mobile-control-gap: 10px;
        /* Painéis flutuantes não encostam na alça da folha fechada. Além de
           deixar a leitura mais limpa, essa faixa separa claramente os dois
           alvos de toque em celulares e em emuladores com escala própria. */
        --mobile-floating-clearance: 22px;
        --mobile-bottom-dock: calc(var(--mobile-sheet-peek) + var(--mobile-safe-bottom) + var(--mobile-floating-clearance));
    }

    html,
    body {
        width: 100%;
        min-height: 100%;
        min-height: 100dvh;
        height: 100dvh;
        overscroll-behavior-y: none;
    }

    body {
        margin: 0;
        padding: 0 !important;
        background: #f8fafc;
    }

    #app-container {
        width: 100%;
        width: 100vw;
        min-height: 100dvh;
        height: 100dvh !important;
        overflow: hidden;
    }

    #map {
        width: 100% !important;
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
    }

    /* A folha lateral é o único painel que fica acima do seu próprio fundo. */
    #sidebar {
        box-sizing: border-box;
        left: 0;
        bottom: 0;
        width: 100%;
        width: 100vw;
        height: min(78dvh, calc(100dvh - var(--mobile-safe-top) - 12px));
        max-height: calc(100dvh - var(--mobile-safe-top) - 12px);
        padding-bottom: calc(var(--mobile-safe-bottom) + 12px) !important;
        z-index: calc(var(--z-floating-panel) + 2) !important;
        transform: translateY(calc(100% - var(--mobile-sheet-peek)));
        isolation: isolate;
        touch-action: pan-y;
    }

    #sidebar.active,
    body.sidebar-mobile-active #sidebar {
        transform: translateY(0);
    }

    /* A alça existente fica no topo quando a folha está aberta. Fechada,
       uma faixa de botão real ocupa toda a porção visível da folha. Assim o
       gesto não depende do cabeçalho interno, que pode variar de altura. */
    #sidebar:not(.active) {
        touch-action: none;
    }

    .mobile-sidebar-grip {
        display: none;
    }

    #sidebar:not(.active) .mobile-sidebar-grip {
        position: absolute;
        z-index: 3002;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: var(--mobile-sheet-peek);
        min-height: var(--mobile-sheet-peek);
        margin: 0;
        padding: 18px 70px 7px;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, .98);
        color: #426079;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .01em;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        cursor: grab;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    #sidebar:not(.active) .mobile-sidebar-grip:active {
        cursor: grabbing;
    }

    .mobile-sidebar-grip-handle {
        position: absolute;
        top: 8px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #bfd0df;
        transform: translateX(-50%);
    }

    #sidebar.is-dragging {
        transition: none !important;
    }

    #sidebarBackdrop {
        z-index: calc(var(--z-floating-panel) - 1) !important;
        touch-action: none;
    }

    #sidebar .sidebar-header,
    #sidebar .sidebar-logo-container,
    #sidebar .sidebar-tabs {
        flex: 0 0 auto;
    }

    #sidebar .sidebar-tab-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(var(--mobile-safe-bottom) + 24px) !important;
    }

    #sidebar .mobile-sidebar-compliance {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px 9px;
        min-height: 32px;
        padding: 8px 14px calc(8px + var(--mobile-safe-bottom));
        border-top: 1px solid #e2e8f0;
        background: rgba(248, 250, 252, .98);
        color: #64748b;
        font-size: 10px;
        line-height: 1.3;
    }

    #sidebar .mobile-sidebar-compliance a {
        color: #2563eb;
        font-weight: 700;
        text-decoration: none;
    }

    #sidebar .mobile-sidebar-compliance a:focus-visible {
        outline: 2px solid #60a5fa;
        outline-offset: 2px;
        border-radius: 4px;
    }

    #sidebarToggle {
        position: fixed;
        left: calc(12px + var(--mobile-safe-left));
        bottom: calc(10px + var(--mobile-safe-bottom));
        z-index: calc(var(--z-floating-panel) + 2);
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        border: 1px solid rgba(203, 217, 235, .95);
        border-radius: 16px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 10px 24px rgba(15, 35, 65, .18);
        touch-action: manipulation;
    }

    /* O rodapé de compliance foi criado como camada absoluta do mapa. Em
       celular ele ficava exatamente sobre a alça da folha e recebia todo o
       primeiro toque, impedindo puxar busca/ferramentas para cima. Os links
       continuam disponíveis no menu; aqui o rodapé visual não disputa área
       nem eventos com a navegação principal. */
    .map-compliance-footer {
        display: none !important;
        pointer-events: none !important;
    }

    body.sidebar-mobile-active #sidebarToggle {
        opacity: 0;
        pointer-events: none;
    }

    /* Barra de contexto da cidade: cada elemento tem a própria faixa. */
    #map:not(.acapulco-mode) .map-view-selector {
        top: calc(10px + var(--mobile-safe-top)) !important;
        left: calc(10px + var(--mobile-safe-left)) !important;
        max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 20px);
        z-index: var(--z-map-tools) !important;
    }

    /* No Acapulco o seletor fica depois da barra própria da planta. */
    #map.acapulco-mode .map-view-selector {
        top: calc(138px + var(--mobile-safe-top)) !important;
        left: calc(8px + var(--mobile-safe-left)) !important;
        max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 16px);
    }

    .map-view-selector {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .map-view-selector::-webkit-scrollbar,
    .property-workspace-nav::-webkit-scrollbar,
    .tooltip-tabs::-webkit-scrollbar,
    .lot-context-chips::-webkit-scrollbar,
    .unit-context-chips::-webkit-scrollbar,
    .owner-tooltip-tabs::-webkit-scrollbar {
        display: none;
    }

    .map-view-selector button {
        min-width: max-content;
        min-height: 44px;
        touch-action: manipulation;
    }

    #map:not(.acapulco-mode) .map-breadcrumbs {
        top: calc(64px + var(--mobile-safe-top)) !important;
        right: 118px;
        left: calc(10px + var(--mobile-safe-left));
        width: auto !important;
        max-width: none;
        min-height: 44px;
        padding: 5px 8px;
        transform: none;
    }

    #map:not(.acapulco-mode) .map-breadcrumbs.hidden {
        transform: translateY(-16px);
    }

    #map:not(.acapulco-mode) .map-back-btn {
        top: calc(116px + var(--mobile-safe-top)) !important;
        left: calc(10px + var(--mobile-safe-left)) !important;
        max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 20px);
        min-height: 48px;
        padding: 10px 14px !important;
        font-size: 13px !important;
        z-index: var(--z-map-tools) !important;
    }

    .map-toolbox-panel {
        top: calc(64px + var(--mobile-safe-top)) !important;
        right: calc(10px + var(--mobile-safe-right)) !important;
        width: auto !important;
        max-width: none !important;
        z-index: var(--z-map-tools) !important;
    }

    .map-toolbox-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        box-sizing: border-box;
        width: min(300px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 20px));
        max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 20px);
        max-height: min(62dvh, 520px);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .map-toolbox-grid button {
        min-height: 42px;
    }

    /* Acapulco: o seletor fica acima da barra, e a barra recebe sua própria
       área. Busca, filtros e ações usam linhas previsíveis em vez de se
       acumularem por cima umas das outras. */
    #map.acapulco-mode .map-view-selector {
        top: calc(8px + var(--mobile-safe-top)) !important;
        left: calc(8px + var(--mobile-safe-left)) !important;
        /* A área de trabalho do Acapulco forma um novo contexto em 7500.
           O seletor precisa ficar acima dele, como no mapa principal. */
        z-index: var(--z-context, 10000) !important;
    }

    #map.acapulco-mode .acapulco-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(132px, 42%);
        grid-template-areas:
            "title status"
            "search search"
            "layer actions";
        min-height: 0 !important;
        align-items: center;
        gap: 8px;
        padding: calc(60px + var(--mobile-safe-top)) 10px 10px !important;
    }

    #map.acapulco-mode .acapulco-title {
        grid-area: title;
        min-width: 0;
        font-size: 13px;
    }

    #map.acapulco-mode .acapulco-title small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #map.acapulco-mode .acapulco-search-wrap {
        grid-area: search;
        order: initial !important;
        min-width: 0;
        max-width: none;
    }

    #map.acapulco-mode .acapulco-status-filter { grid-area: status; min-width: 0; }
    #map.acapulco-mode .acapulco-layer-filter { grid-area: layer; min-width: 0; }

    #map.acapulco-mode .acapulco-filter {
        justify-content: space-between;
        gap: 5px;
        min-width: 0;
    }

    #map.acapulco-mode .acapulco-filter select {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }

    #map.acapulco-mode .acapulco-toolbar-actions {
        grid-area: actions;
        display: flex;
        min-width: 0;
        max-width: 100%;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #map.acapulco-mode .acapulco-toolbar-actions::-webkit-scrollbar { display: none; }

    #map.acapulco-mode .acapulco-toolbar-actions button {
        flex: 0 0 auto;
        min-height: 38px;
        white-space: nowrap;
    }

    #map.acapulco-mode .acapulco-tools-panel {
        top: 10px;
        left: 10px;
        box-sizing: border-box;
        width: min(300px, calc(100% - 20px));
        max-height: calc(100% - 20px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #weather-widget {
        top: calc(10px + var(--mobile-safe-top)) !important;
        right: calc(10px + var(--mobile-safe-right)) !important;
        min-height: 44px;
        padding: 7px 10px;
        transform: none !important;
        z-index: var(--z-map-tools) !important;
    }

    #statsPanel,
    .stats-panel,
    #history-panel {
        bottom: var(--mobile-bottom-dock) !important;
    }

    /* Banco e histórico ocupam lados diferentes da mesma faixa. A regra
       anterior do histórico vinha de um <style> criado em tempo de execução
       e fazia o cartão deslizar para fora da tela. */
    #history-panel {
        right: calc(12px + var(--mobile-safe-right)) !important;
        width: min(228px, calc(50vw - 18px)) !important;
        max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 24px) !important;
        max-height: min(42dvh, 320px);
        /* Histórico e Banco Local pertencem ao mapa, mas ficam abaixo da
           folha. Mesmo se alguma altura variar, a barra fechada continua por
           cima e não recebe um painel sobre o seu botão de abrir. */
        z-index: calc(var(--z-floating-panel) - 2) !important;
    }

    #history-panel.collapsed {
        /* No mobile o cabeçalho recolhido continua totalmente acima da folha.
           O antigo translateY o levava para dentro da alça e fazia parecer
           que o histórico estava sobrepondo a busca fechada. */
        box-sizing: border-box;
        height: 42px;
        max-height: 42px;
        transform: none !important;
    }

    #history-panel .history-header {
        min-height: 42px;
        box-sizing: border-box;
    }

    #history-panel .history-list {
        max-height: min(34dvh, 260px);
    }

    /* O painel do banco é criado depois do carregamento da página. Sem este
       limite, a lista de ações administrativas podia ocupar quase toda a
       altura do mapa em aparelhos menores. Ele continua completo, porém
       passa a rolar internamente e fica acima da alça da folha lateral. */
    #local-status-panel {
        box-sizing: border-box;
        left: calc(12px + var(--mobile-safe-left)) !important;
        bottom: var(--mobile-bottom-dock) !important;
        width: min(228px, calc(50vw - 18px));
        min-width: 0 !important;
        max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 24px) !important;
        max-height: min(46dvh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: calc(var(--z-floating-panel) - 2) !important;
    }

    #local-status-panel.is-minimized {
        max-height: none;
        overflow: hidden;
    }

    #local-status-panel button:not(#lsp-collapse) {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* O recolher é absoluto. Reservo uma faixa no cabeçalho para ele não
       avançar sobre a primeira linha de números em telas estreitas. */
    #local-status-panel .lsp-title {
        min-height: 32px;
        padding-right: 38px;
    }

    #lsp-collapse {
        width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        touch-action: manipulation;
    }

    /* Quando a folha lateral está aberta, ela é o contexto ativo; o cartão
       flutuante não deve continuar interceptando toques por cima dela. */
    body.sidebar-mobile-active #local-status-panel {
        opacity: 0;
        pointer-events: none;
    }

    /* A folha aberta é o contexto principal. Histórico e ferramentas não
       ficam competindo por toque nem parecem atravessar a pesquisa. */
    body.sidebar-mobile-active #history-panel,
    body.sidebar-mobile-active .map-toolbox-panel {
        opacity: 0;
        pointer-events: none;
    }

    .gps-location-btn {
        right: calc(14px + var(--mobile-safe-right)) !important;
        bottom: calc(142px + var(--mobile-safe-bottom)) !important;
        width: 48px;
        height: 48px;
    }

    #map .gm-bundled-control,
    #map .gm-style-cc,
    #map .gmnoprint {
        margin-bottom: calc(var(--mobile-sheet-peek) + var(--mobile-safe-bottom) + 8px) !important;
    }

    /* As fichas têm uma única região de leitura. Cabeçalho e ações não rolam. */
    .lot-tooltip-container,
    .unit-tooltip-container {
        box-sizing: border-box;
        width: 100% !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: 100dvh !important;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-radius: 0 !important;
        padding-top: var(--mobile-safe-top);
        padding-bottom: var(--mobile-safe-bottom);
    }

    .lot-tooltip-container > .tooltip-header-img,
    .unit-tooltip-container > .unit-tooltip-header,
    .lot-tooltip-container > .lot-context-chips,
    .unit-tooltip-container > .unit-context-chips,
    .lot-tooltip-container > .lot-map-actions,
    .lot-tooltip-container > .lot-descricao-bar {
        flex: 0 0 auto;
    }

    .lot-tooltip-container > .lot-tooltip-body,
    .unit-tooltip-container > .unit-tooltip-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(var(--mobile-safe-bottom) + 24px) !important;
    }

    .property-workspace-nav,
    .tooltip-tabs,
    .lot-context-chips,
    .unit-context-chips,
    .owner-tooltip-tabs,
    .santos-record-tabs,
    .santos-lot-actions,
    .santos-unit-actionbar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .property-workspace-nav button,
    .tooltip-tabs button,
    .lot-context-chips > *,
    .unit-context-chips > *,
    .santos-record-tabs button,
    .santos-lot-actions button,
    .santos-unit-actionbar button {
        flex: 0 0 auto;
        min-height: 44px;
        touch-action: manipulation;
    }

    .lot-map-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 12px 4px;
    }

    .lot-map-actions button {
        min-height: 52px;
        padding: 8px 4px;
        touch-action: manipulation;
    }

    /* Modais deixam margem para gesto do sistema e rolam somente no conteúdo. */
    .custom-modal-overlay {
        box-sizing: border-box;
        inset: 0;
        width: auto;
        height: auto;
        padding:
            max(8px, var(--mobile-safe-top))
            max(8px, var(--mobile-safe-right))
            max(8px, var(--mobile-safe-bottom))
            max(8px, var(--mobile-safe-left));
    }

    .custom-modal-overlay .custom-modal,
    .contract-preview-modal .custom-modal {
        box-sizing: border-box;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px) !important;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-radius: 18px !important;
    }

    .custom-modal-overlay .custom-modal-header,
    .custom-modal-overlay .custom-modal-footer {
        flex: 0 0 auto;
    }

    .custom-modal-overlay .custom-modal-body,
    .custom-modal-overlay .custom-modal-scroll-body,
    .contract-preview-body.custom-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(var(--mobile-safe-bottom) + 18px) !important;
    }

    .analytics-overlay,
    .urban-intelligence-overlay,
    .property-dossier-overlay,
    .dossier-form-overlay,
    .santos-record-overlay {
        box-sizing: border-box;
        padding:
            max(8px, var(--mobile-safe-top))
            max(8px, var(--mobile-safe-right))
            max(8px, var(--mobile-safe-bottom))
            max(8px, var(--mobile-safe-left));
    }

    .analytics-modal,
    .urban-intelligence-dialog,
    .property-dossier-modal,
    .dossier-form,
    .santos-record-sheet,
    .lead-tooltip,
    .proprietario-tooltip {
        box-sizing: border-box;
        max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px) !important;
        min-height: 0;
        overscroll-behavior: contain;
    }

    .urban-intelligence-dialog,
    .property-dossier-modal,
    .lead-tooltip,
    .proprietario-tooltip {
        display: flex;
        flex-direction: column;
    }

    .urban-dialog-content,
    .property-dossier-modal > main,
    .lead-tooltip-body,
    .proprietario-tooltip .tooltip-detail-scroll,
    .santos-record-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(var(--mobile-safe-bottom) + 20px);
    }

    .property-dossier-modal {
        width: 100% !important;
        height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px) !important;
    }

    .dossier-form-grid,
    .dossier-list,
    .owner-detail-grid,
    .lead-form-row,
    .attribute-grid,
    .specs-grid,
    .market-iq-grid,
    .building-area-profile-row {
        grid-template-columns: 1fr !important;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .custom-modal-close,
    .lead-tooltip-close,
    .ui-layer-back-button,
    .map-back-btn,
    .map-toolbox-panel button,
    .property-workspace-nav button,
    .tooltip-tabs button {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }

    .maps3d-navigation {
        top: calc(10px + var(--mobile-safe-top)) !important;
        left: calc(10px + var(--mobile-safe-left)) !important;
        max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 138px) !important;
    }

    .maps3d-toolbar {
        top: calc(10px + var(--mobile-safe-top)) !important;
        right: calc(10px + var(--mobile-safe-right)) !important;
    }

    .maps3d-camera-controls {
        right: calc(10px + var(--mobile-safe-right));
        bottom: calc(var(--mobile-sheet-peek) + var(--mobile-safe-bottom) + 8px) !important;
    }
}

@media (max-width: 480px) {
    #weather-widget .weather-widget-text {
        display: none;
    }

    #weather-widget #weather-icon {
        font-size: 22px;
    }

    .map-toolbox-menu {
        width: min(284px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 20px));
    }

    .lot-map-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    /* Telas estreitas não têm largura para dois cartões inferiores. O
       histórico sobe uma faixa e continua acessível sem tapar o banco. */
    #history-panel {
        width: min(236px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 24px)) !important;
        bottom: calc(var(--mobile-bottom-dock) + 56px) !important;
    }

    #local-status-panel {
        width: min(236px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 24px));
    }

    #map.acapulco-mode .acapulco-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(118px, 42%);
        gap: 6px;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    #map.acapulco-mode .acapulco-filter > span { display: none; }
}

/* Em paisagem a prioridade é manter uma ação e a leitura acessíveis, não
   desperdiçar a altura curta do aparelho com cabeçalhos grandes. */
@media (max-width: 768px) and (max-height: 520px) {
    #sidebar {
        height: calc(100dvh - var(--mobile-safe-top) - 8px);
    }

    .tooltip-header-img,
    .unit-tooltip-header {
        min-height: 108px !important;
        height: 108px !important;
        flex-basis: 108px !important;
    }

    #map:not(.acapulco-mode) .map-breadcrumbs {
        top: calc(58px + var(--mobile-safe-top)) !important;
    }

    #map:not(.acapulco-mode) .map-back-btn {
        top: calc(104px + var(--mobile-safe-top)) !important;
    }

    .map-toolbox-menu {
        max-height: calc(100dvh - 118px);
    }

    /* Em altura curta, suporte é acessível em retrato; escondê-lo aqui evita
       que o botão redondo atravesse o seletor, filtros ou a planta. */
    html body #user-support-trigger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Não há faixa livre abaixo da barra do Acapulco nesta altura. O status
       local continua no retrato e dentro da sidebar, mas não pode cobrir
       seletor, busca ou ações no modo de paisagem muito baixo. */
    #local-status-panel {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #map.acapulco-mode .acapulco-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(78px, .65fr) minmax(105px, .9fr);
        grid-template-areas:
            "title status layer"
            "search search search"
            "actions actions actions";
        gap: 5px;
        padding-top: calc(56px + var(--mobile-safe-top)) !important;
        padding-bottom: 7px !important;
    }

    #map.acapulco-mode .acapulco-title small,
    #map.acapulco-mode .acapulco-filter > span {
        display: none;
    }

    #map.acapulco-mode .acapulco-search input {
        height: 32px;
    }

    #map.acapulco-mode .acapulco-toolbar-actions button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 34px;
        padding: 7px 4px;
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
    }

    /* A largura extrema da paisagem serve melhor aos nomes completos das
       ações. Os ícones continuam presentes em retrato, onde há mais espaço. */
    #map.acapulco-mode .acapulco-toolbar-actions button > i {
        display: none;
    }

    /* Nesta altura todas as ações cabem numa única faixa, sem deixar o
       rótulo de Ferramentas (ou qualquer ação posterior) cortado na borda. */
    #map.acapulco-mode .acapulco-toolbar-actions {
        gap: 4px;
        overflow: hidden;
    }
}