:root {
            /* Paleta extraída de DESIGN.md (fifa.com) */
            --primary: #0d437a;      /* Blue — accent/marca */
            --secondary: #020f2a;    /* Dark Blue — fundos escuros/footer */
            --accent: #00b8ff;       /* Vivid Cyan — CTAs e ações primárias */
            --bg-light: #e4e8f0;     /* Off-white — surface */
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        /* [2+3] Layout de app: dvh evita corte pelas barras do Chrome/Safari mobile;
           overflow:hidden + flex-column eliminam o double-scroll da página */
        body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--bg-light);
            height: 100dvh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .header {
            position: relative;
            background: #045694;
            color: white;
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            flex-shrink: 0; /* não encolhe — altura fixa no layout flex */
        }
        .mobile-menu-toggle {
            display: none;
            background: rgba(255,255,255,0.15);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            font-size: 1.1rem;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        .mobile-menu-toggle:hover { background: rgba(255,255,255,0.25); }
        #header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .header-nav-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(255,255,255,0.15);
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 0.4rem 1rem;
            border-radius: 4px;
            transition: background 0.2s;
        }
        .header-nav-link:hover { background: rgba(255,255,255,0.25); color: #fff; }
        /* Rótulo de texto pra links de navbar que ficam só com ícone no
           desktop (ex.: Ativos) — some no navbar compacto e reaparece dentro
           do menu hambúrguer (ver @media max-width:992px), onde um ícone sem
           texto fica pouco claro numa lista vertical de opções. */
        .header-nav-link .nav-label-mobile { display: none; }
        .header-brand-link { transition: opacity 0.2s; }
        .header-brand-link:hover { opacity: 0.85; }
        .header h1 {
            font-size: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .header h1 i { font-size: 2rem; }
        .header .subtitle {
            font-size: 0.85rem;
            opacity: 0.85;
        }
        .header .site-logo {
            height: 56px;
            width: auto;
            max-width: 220px;
            object-fit: contain;
            border-radius: 5px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
            background: #fff;
            padding: 2px;
        }
        .controls-panel {
            background: white;
            padding: 1rem 2rem;
            border-bottom: 2px solid var(--accent);
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 1.5rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            flex-shrink: 0; /* altura fixa no layout flex */
        }
        .control-group {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .control-group label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .control-group select, .control-group .btn {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: 2px solid #dce5f0;
            font-size: 0.95rem;
            min-width: 140px;
            background: white;
            transition: all 0.2s;
        }
        .control-group .btn.btn-compact {
            padding: 0.5rem 0.85rem;
            min-width: 0;
        }
        /* "N found" já aparece no card "Total Urban Furniture in Radius" das
           Estatísticas — some daqui pra não duplicar. JS ainda seta
           display:flex inline em vários pontos; precisa do !important pra
           vencer isso. */
        #result-info { display: none !important; }
        /* Point of Interest e Company têm opções bem mais longas que os
           outros selects — <select> nativo cresce pra caber a opção mais
           larga mesmo com min-width baixo, então aqui precisa de width
           fixa + corte de texto (a opção completa some no title/tooltip). */
        #ref-local, #empresa-select {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #ref-local { width: 250px; min-width: 250px; }
        #empresa-select { width: 195px; min-width: 195px; }
        .control-group select:focus {
            border-color: var(--secondary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(29,111,165,0.15);
        }
        .btn-primary-custom {
            background: #045694 !important;
            color: #fff !important;
            border: 2px solid #045694 !important;
            border-radius: 4px !important;
            font-weight: 700 !important;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(4,86,148,0.35) !important;
            opacity: 1 !important;
        }
        .btn-primary-custom:hover {
            background: #034a80 !important;
            border-color: #034a80 !important;
            box-shadow: 0 4px 12px rgba(4,86,148,0.45) !important;
        }
        .btn-primary-custom:active,
        .btn-primary-custom:focus {
            background: #023a66 !important;
            border-color: #023a66 !important;
            box-shadow: 0 0 0 3px rgba(4,86,148,0.4) !important;
        }
        .btn-outline-custom {
            background: white !important;
            color: var(--primary) !important;
            border: 2px solid var(--primary) !important;
            border-radius: 4px !important;
            font-weight: 700 !important;
            cursor: pointer;
        }
        .btn-outline-custom:hover {
            background: #e4edf6 !important;
        }
        /* Clear é a ação secundária/reset — cinza neutro em vez do azul da
           marca, pra não competir visualmente com o Apply Filter. */
        #btn-reset {
            color: #6b7280 !important;
            border-color: #6b7280 !important;
        }
        #btn-reset:hover {
            background: #f3f4f6 !important;
        }
        .stats-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255,255,255,0.15);
            color: #fff;
            padding: 0.4rem 1rem;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        /* [2] flex:1 + min-height:0 preenche o restante do dvh sem altura hardcoded */
        .main-content {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 12px;
            padding: 12px;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        .map-container {
            position: relative;
            height: 100%;
            margin-bottom: 12px; /* espaçamento contra o painel quando empilha no mobile */
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 14px rgba(0,0,0,0.18);
        }
        #map {
            width: 100%;
            height: 100%;
            min-height: 500px;
        }
        /* Junto do zoom do Leaflet (canto superior esquerdo, ~60px de altura) —
           mesmo lugar onde Google Maps/Mapbox colocam a busca. Ícone fecha (só
           a lupa) até o usuário clicar; abre o campo de texto ao lado. */
        .map-search-control {
            position: absolute;
            top: 80px;
            left: 10px;
            z-index: 1000;
            display: flex;
            align-items: center;
            background: white;
            border-radius: 4px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        }
        .map-search-toggle {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--primary);
            font-size: 0.9rem;
            cursor: pointer;
            border-radius: 4px;
        }
        .map-search-toggle:hover { background: #f0f4f8; }
        .map-search-input {
            width: 0;
            padding: 0;
            border: none;
            outline: none;
            font-size: 0.85rem;
            font-family: inherit;
            color: #333;
            opacity: 0;
            transition: width 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
        }
        .map-search-control.open .map-search-input {
            width: 220px;
            opacity: 1;
            padding: 0 0.4rem 0 0;
        }
        .map-search-clear {
            width: 30px;
            height: 34px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
        }
        .map-search-clear:hover { color: #666; }
        .map-loading-overlay {
            display: none;
            position: absolute;
            inset: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.72);
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            font-size: 15px;
            font-weight: 600;
            color: #1a5276;
            pointer-events: none;
        }
        .map-loading-overlay.active { display: flex; }
        .map-loading-overlay i { font-size: 34px; }
        .map-radius-label {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(255,255,255,0.95);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            font-size: 0.85rem;
            z-index: 1000;
            font-weight: 600;
            max-width: calc(100% - 40px);
        }
        .map-radius-label.is-empty {
            top: 50%;
            bottom: auto;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(340px, calc(100% - 40px));
            padding: 1.25rem 1.4rem;
            text-align: center;
            font-size: 0.95rem;
            line-height: 1.35;
        }
        .map-radius-label.is-empty > i {
            display: block;
            margin-bottom: 0.7rem;
            font-size: 2.6rem;
            color: #bfc3c7;
        }
        .map-empty-title {
            display: block;
            color: #666;
            font-weight: 600;
        }
        .map-radius-hint {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.8rem;
            font-weight: 500;
            color: #e67e22;
        }
        .map-radius-label.is-empty .map-radius-hint {
            margin-top: 0.8rem;
            font-size: 0.88rem;
            line-height: 1.35;
        }
        .map-radius-hint i {
            margin-right: 0.25rem;
        }
        .info-msg .radius-hint {
            margin-top: 0.75rem;
            font-size: 0.9rem;
            color: #e67e22;
            font-weight: 500;
        }
        .info-msg .radius-hint i {
            margin-right: 0.25rem;
        }
        .side-panel {
            background: white;
            display: flex;
            flex-direction: column;
            border-radius: 10px;
            box-shadow: 0 3px 14px rgba(0,0,0,0.18);
            overflow: hidden;
        }
        .side-panel .tabs {
            display: flex;
            border-bottom: 2px solid #e0e0e0;
            flex-shrink: 0;
        }
        .side-panel .tab-btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            background: none;
            font-weight: 600;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 3px solid transparent;
        }
        .side-panel .tab-btn.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
            background: var(--bg-light);
        }
        .side-panel .tab-btn:hover { background: #f5f5f5; }
        .side-panel .tab-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            display: none;
        }
        .side-panel .tab-content.active { display: block; }
        .stat-card {
            background: var(--bg-light);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            border: 1px solid #dce5f0;
        }
        .stat-card h5 {
            color: var(--primary);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.4rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .stat-item {
            display: flex;
            justify-content: space-between;
            padding: 0.15rem 0;
            font-size: 0.9rem;
            border-bottom: 1px solid #e8eef6;
        }
        .stat-item:last-child { border-bottom: none; }
        .stat-item .count {
            font-weight: 700;
            color: var(--secondary);
        }
        .stat-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid #e8eef6;
            font-size: 0.8rem;
            color: var(--primary);
        }
        .stat-pagination button {
            background: white;
            border: 1px solid #dce5f0;
            border-radius: 4px;
            color: var(--primary);
            width: 26px;
            height: 26px;
            cursor: pointer;
        }
        .stat-pagination button:hover:not(:disabled) { background: #e4edf6; }
        .stat-pagination button:disabled { opacity: 0.35; cursor: default; }
        .stat-total {
            text-align: center;
            padding: 1rem;
            background: #045694;
            color: white;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        .stat-total .number {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1;
        }
        .stat-total .label {
            font-size: 0.8rem;
            opacity: 0.9;
        }
        .table-container {
            padding: 1rem;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .table-container .table-wrapper {
            overflow-x: auto;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        .table-container .table-wrapper table {
            width: 100% !important;
        }
        /* Evita que DataTable com scrollX quebre o layout do container */
        .table-container .dataTables_scroll {
            overflow: visible;
        }
        .table-container .dataTables_scrollBody {
            overflow-x: auto !important;
            overflow-y: visible !important;
        }

        /* ===== DATATABLE CONTROLS COMPACTOS ===== */
        .dt-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }
        .dt-toolbar .dt-length label {
            font-size: 0.78rem;
            color: var(--primary);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            margin: 0;
        }
        .dt-toolbar .dt-length select {
            padding: 0.2rem 0.4rem;
            font-size: 0.78rem;
            border: 1px solid #dce5f0;
            border-radius: 4px;
            background: white;
        }
        .dt-toolbar .dt-search label {
            font-size: 0.78rem;
            color: var(--primary);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            margin: 0;
        }
        .dt-toolbar .dt-search input {
            padding: 0.2rem 0.5rem;
            font-size: 0.78rem;
            border: 1px solid #dce5f0;
            border-radius: 4px;
            background: white;
            width: 140px;
        }
        .dt-toolbar .dt-search input:focus {
            border-color: var(--secondary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(29,111,165,0.15);
        }
        .dt-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-top: 0.5rem;
            flex-wrap: wrap;
        }
        .dt-bottom .dt-info {
            font-size: 0.75rem;
            color: #666;
            padding: 0;
        }
        .dt-bottom .dt-paginate {
            display: flex;
            gap: 0.2rem;
        }
        .dt-bottom .dt-paginate .paginate_button {
            padding: 0.25rem 0.6rem;
            font-size: 0.75rem;
            border: 1px solid #dce5f0;
            border-radius: 4px;
            background: white;
            color: var(--primary);
            cursor: pointer;
            transition: all 0.15s;
        }
        .dt-bottom .dt-paginate .paginate_button:hover {
            background: var(--bg-light);
        }
        .dt-bottom .dt-paginate .paginate_button.current {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        .dt-bottom .dt-paginate .paginate_button.disabled {
            opacity: 0.4;
            cursor: default;
        }
        #data-table {
            width: 100%;
            font-size: 0.82rem;
        }
        #data-table th {
            background: var(--primary);
            color: white;
            padding: 0.5rem;
            position: sticky;
            top: 0;
            white-space: nowrap;
        }
        #data-table td {
            padding: 0.4rem 0.5rem;
            vertical-align: middle;
            white-space: nowrap;
        }
        #data-table tr:hover { background: var(--bg-light); }
        /* Força header do DataTable com scrollX a ficar branco */
        .dataTables_scrollHead table.table th {
            background: var(--primary) !important;
            color: white !important;
        }
        .info-msg {
            text-align: center;
            padding: 2rem;
            color: #888;
        }
        .info-msg i {
            font-size: 3rem;
            display: block;
            margin-bottom: 1rem;
            color: #ccc;
        }
        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.2);
            display: inline-block;
            flex-shrink: 0;
        }
        .connection-status {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 0.4rem 1rem;
            border-radius: 4px;
            background: rgba(255,255,255,0.15);
        }
        .connection-status .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        .connection-status .dot.online { background: #2ecc71; }
        .connection-status .dot.offline { background: #e74c3c; }
        .lang-select {
            background: rgba(255,255,255,0.15);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 4px;
            padding: 0.4rem 0.7rem;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
        }
        .lang-select option { color: var(--primary); background: #fff; }
        /* ===== TABELA — toolbar ===== */
        .table-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        .table-toolbar .tb-info {
            font-size: 0.85rem;
            color: var(--primary);
            font-weight: 600;
        }
        .table-toolbar .tb-actions { display: flex; gap: 0.4rem; }
        .btn-tb {
            padding: 0.35rem 0.75rem;
            font-size: 0.8rem;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            transition: background 0.15s;
        }
        .btn-tb-expand { background: var(--primary); color: white; }
        .btn-tb-expand:hover { background: var(--secondary); }
        .btn-tb-xlsx { background: #27ae60; color: white; }
        .btn-tb-xlsx:hover { background: #1e8449; }

        /* ===== RESPONSIVO ===== */
        /* Tablet/mobile (≤ 992px) — página rola normalmente em vez de
           dividir a tela em porcentagem fixa entre mapa e painel; isso
           cortava Estatísticas/Tabela sem nenhuma forma de rolar até o
           resto do conteúdo (o toque no mapa só fazia pan, nunca chegava
           a rolar a página, porque ela não tinha scroll nenhum). */
        @media (max-width: 992px) {
            body { height: auto; min-height: 100dvh; overflow-y: auto; }
            .main-content {
                display: block;
                flex: none;
                overflow: visible;
            }
            .map-container { height: 55vh; min-height: 340px; }
            #map { height: 100%; min-height: 0; }
            .side-panel {
                overflow: visible;
            }
            .side-panel .tab-content { flex: none; overflow-y: visible; }
            .table-container { height: auto; overflow: visible; }
            .table-container .table-wrapper { flex: none; overflow-y: visible; }
            .controls-panel { padding: 0.6rem 1rem; gap: 0.6rem; }
            .control-group select, .control-group .btn { min-width: 140px; min-height: 44px; }

            /* Topbar reduzido — só hambúrguer + título ficam sempre visíveis
               (logo removida, some espaço). Idioma, status, registros,
               timestamp e Refresh vão pro menu hambúrguer (#header-actions),
               que abre como dropdown ancorado perto do botão. */
            .header { justify-content: flex-start; }
            .header .site-logo { display: none; }
            .header .subtitle { display: none; }
            .header h1 { font-size: 1.05rem; display: block; }
            .header h1 .title-sep { display: none; }
            .header h1 .title-line2 { display: block; }
            .mobile-menu-toggle { display: flex; }
            .header-nav-link .nav-label-mobile { display: inline; }
            #header-actions {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                margin-top: 0.5rem;
                background: white;
                color: var(--primary);
                flex-direction: column;
                align-items: stretch;
                gap: 0.6rem;
                padding: 0.9rem;
                border-radius: 8px;
                box-shadow: 0 8px 24px rgba(0,0,0,0.25);
                min-width: 220px;
                z-index: 1200;
            }
            #header-actions.open { display: flex; }
            #header-actions .connection-status,
            #header-actions .stats-badge,
            #header-actions .lang-select,
            #header-actions .header-nav-link,
            #header-actions #btn-refresh {
                width: 100%;
                justify-content: center;
            }
            /* .lang-select e .header-nav-link são pensados pro fundo azul do
               header (texto branco em fundo quase transparente) — dentro do
               dropdown branco isso fica ilegível (branco no branco), precisa
               de cores próprias aqui */
            #header-actions .lang-select {
                color: var(--primary);
                background: white;
                border: 1px solid #dce5f0;
            }
            #header-actions .header-nav-link {
                color: var(--primary);
                border: 1px solid #dce5f0;
            }
            #header-actions .header-nav-link:hover { background: #e4edf6; }
        }

        /* Mobile (≤ 768px) */
        @media (max-width: 768px) {
            .header { padding: 0.6rem 1rem; gap: 0.4rem; }
            .header h1 { font-size: 1rem; }
            .header h1 i { font-size: 1.3rem; }
            .header .subtitle { font-size: 0.72rem; }
            .header .site-logo { height: 42px; max-width: 150px; }

            /* Fila única swipeable — labels ocultos para ganhar altura */
            .controls-panel {
                padding: 0.35rem 0.6rem;
                gap: 0.4rem;
                overflow-x: auto;
                flex-wrap: nowrap; /* força linha única */
            }
            .control-group { flex-shrink: 0; }
            /* Labels ocultos no mobile — selects e botões são autoexplicativos */
            .control-group label { display: none; }

            /* Touch target 44px mantido; largura e fonte reduzidas */
            .control-group select, .control-group .btn {
                min-width: 110px;
                min-height: 44px;
                font-size: 0.78rem;
                padding: 0.45rem 0.5rem;
            }
            /* Abas — touch target 44px */
            .side-panel .tab-btn { min-height: 44px; }

            .map-radius-label { font-size: 0.72rem; padding: 0.35rem 0.65rem; }
        }

        /* Celular pequeno (≤ 480px) */
        @media (max-width: 480px) {
            .header h1 span:last-child { display: none; }
            .stats-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
            .connection-status { font-size: 0.68rem; }
            .table-container { padding: 0.5rem; }
            #data-table { font-size: 0.75rem; }
        }

        /* Garante que a tabela não estoure em telas pequenas */
        .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

        /* [6] Scrollbar invisível no painel de controles — efeito swipe de app */
        .controls-panel::-webkit-scrollbar { display: none; }
        .controls-panel { -ms-overflow-style: none; scrollbar-width: none; }

        /* ===== FAIXAS LATERAIS DO MAPA =====
           Ficam acima dos tiles (z-index 700) mas são irmãs do #map no DOM,
           portanto o Leaflet nunca recebe os eventos de toque que caem aqui.
           touch-action:pan-y deixa o browser processar o scroll vertical normalmente. */
        .map-edge-handle {
            display: none; /* oculto no desktop */
            position: absolute;
            top: 0;
            bottom: 0;
            width: 30px;
            z-index: 700;
            touch-action: pan-y;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            user-select: none;
            -webkit-user-select: none;
            cursor: ns-resize;
        }
        .map-edge-handle i {
            font-size: 0.55rem;
            color: rgba(19,51,90,0.4);
            line-height: 1;
        }
        .map-edge-left {
            left: 0;
            background: linear-gradient(to right, rgba(244,247,251,0.7), transparent);
            border-right: 1.5px solid rgba(19,51,90,0.13);
        }
        .map-edge-right {
            right: 0;
            background: linear-gradient(to left, rgba(244,247,251,0.7), transparent);
            border-left: 1.5px solid rgba(19,51,90,0.13);
        }
        @media (max-width: 992px) {
            .map-edge-handle { display: flex; }
        }

        /* Popup dos marcadores do mapa — card com hierarquia visual clara */
        .marker-popup .leaflet-popup-content-wrapper {
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(20,30,45,0.18);
            padding: 0;
        }
        .marker-popup .leaflet-popup-content {
            margin: 0;
            width: 260px !important;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .marker-popup .leaflet-popup-tip-container { margin-top: -1px; }
        .mp-card { padding: 14px 16px 12px; }
        .mp-img {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            background: #e8eef7;
            height: 96px;
            margin-bottom: 10px;
        }
        .mp-img svg { width: 100%; height: 100%; display: block; }
        .mp-header {
            display: flex;
            align-items: center;
            gap: 9px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 2px solid var(--mp-color, #95a5a6);
        }
        .mp-dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: var(--mp-color, #95a5a6);
            flex-shrink: 0;
            box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-color, #95a5a6) 20%, transparent);
        }
        .mp-type {
            font-size: 14.5px;
            font-weight: 700;
            color: #1c2733;
            line-height: 1.25;
        }
        .mp-city-badge {
            margin-left: auto;
            font-size: 10.5px;
            font-weight: 600;
            color: #7f8c8d;
            background: #f0f2f5;
            padding: 3px 8px;
            border-radius: 4px;
            white-space: nowrap;
        }
        .mp-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12.5px;
            color: #445266;
            margin-top: 7px;
            line-height: 1.4;
        }
        .mp-row:first-of-type { margin-top: 0; }
        .mp-row i {
            width: 14px;
            margin-top: 2px;
            text-align: center;
            color: #9aa5b1;
            flex-shrink: 0;
        }
        .mp-row.mp-cost { color: #1e8449; font-weight: 600; }
        .mp-row.mp-cost i { color: #27ae60; }
        .mp-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 12px;
        }
        .mp-maps-btn {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 9px 12px;
            border: none;
            border-radius: 8px;
            font-size: 12.5px;
            font-family: inherit;
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            background: #1a73e8;
            color: #fff !important;
            transition: background 0.15s ease;
        }
        .mp-maps-btn:hover { background: #1558b0; }
        .mp-maps-btn i { font-size: 14px; }
        .mp-maps-btn.secondary {
            background: #fff;
            color: #1a73e8 !important;
            border: 1.5px solid #1a73e8;
        }
        .mp-maps-btn.secondary:hover { background: #eaf1fd; }
        .mp-maps-btn.contact {
            background: #045694;
        }
        .mp-maps-btn.contact:hover { filter: brightness(0.92); }
        .mp-disclaimer {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-style: italic;
            color: #7f8c8d;
            margin-top: 10px;
        }
        .mp-disclaimer i { font-size: 12px; }
        /* Linha da tabela: clicável e destacada ao apontar no mapa */
        #data-table tbody tr,
        #modal-data-table tbody tr { cursor: pointer; }
        #data-table tbody tr.selected,
        #modal-data-table tbody tr.selected { background: #dbeafe !important; }
    /* O footer em si não ocupa mais espaço no layout — o botão do WhatsApp
       virou flutuante (position:fixed), sempre acessível mesmo em páginas
       compridas com scroll (ex: empresas.html), sem precisar rolar até o fim. */
    .app-footer {
        background: none;
        padding: 0;
        margin: 0;
        border: none;
    }
    .footer-whatsapp {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2000;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 600;
        padding: 12px 20px;
        border-radius: 50px;
        background: #25D366;
        box-shadow: 0 4px 14px rgba(0,0,0,0.35);
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .footer-whatsapp i {
        font-size: 1.5rem;
        color: #fff;
    }
    .footer-whatsapp:hover {
        background: #1ebc59;
        transform: translateX(-50%) scale(1.05);
    }