/* Tema do aparelho e áreas seguras do ParkFácil. */
:root {
    color-scheme: light dark;
    --pf-top: env(safe-area-inset-top, 0px);
    --pf-right: env(safe-area-inset-right, 0px);
    --pf-bottom: env(safe-area-inset-bottom, 0px);
    --pf-left: env(safe-area-inset-left, 0px);
    --pf-bg: #f3f5fb;
    --pf-surface: #fff;
    --pf-soft: #f7f8fc;
    --pf-text: #1f2430;
    --pf-muted: #5b657d;
    --pf-line: #e3e6ef;
    --pf-blue: #2563eb;
}
html { min-height: 100%; }
body.app-mapa { height: 100vh; height: 100dvh; overflow: hidden; }
body.app-interno, body.app-auth {
    min-height: 100vh;
    min-height: 100dvh;
}
body.app-interno { padding-bottom: var(--pf-bottom); }
.app-interno .navbar-interna {
    height: calc(60px + var(--pf-top));
    padding-top: var(--pf-top);
    padding-left: max(16px, var(--pf-left));
    padding-right: max(16px, var(--pf-right));
}
.app-interno .container {
    padding-left: max(16px, var(--pf-left));
    padding-right: max(16px, var(--pf-right));
}
.app-interno .nav-drawer {
    top: calc(60px + var(--pf-top));
    padding-left: max(20px, var(--pf-left));
    padding-right: max(20px, var(--pf-right));
    padding-bottom: calc(32px + var(--pf-bottom));
}
.app-interno .voltar-mobile { bottom: calc(16px + var(--pf-bottom)); }
body.app-auth {
    margin: 0;
    padding: calc(20px + var(--pf-top)) max(16px, var(--pf-right)) calc(20px + var(--pf-bottom)) max(16px, var(--pf-left));
}
.app-auth .login-card { flex-shrink: 0; margin-block: auto; }
.app-interno #modal-box {
    max-height: calc(100dvh - 40px - var(--pf-top) - var(--pf-bottom));
}
.app-interno #modal-grid, .app-interno #modal-nome {
    padding-top: var(--pf-top);
    padding-bottom: var(--pf-bottom);
}
.app-mapa #mapa { height: 100%; }
.app-mapa #busca-input { min-width: 0; }
.app-mapa .navbar {
    top: var(--pf-top);
    padding-left: max(16px, var(--pf-left));
    padding-right: max(16px, var(--pf-right));
}
.app-mapa #busca-wrap { top: calc(8px + var(--pf-top)); right: calc(16px + var(--pf-right)); }
.app-mapa #btn-painel { top: calc(64px + var(--pf-top)); right: calc(16px + var(--pf-right)); }
.app-mapa #btn-vaga-proxima {
    left: calc(16px + var(--pf-left));
    bottom: calc(24px + var(--pf-bottom));
}
.app-mapa.tem-banner-instalar #btn-vaga-proxima { bottom: calc(var(--pf-install-height, 80px) + 28px + var(--pf-bottom)); }
.app-mapa #instalar-banner {
    bottom: calc(16px + var(--pf-bottom));
    left: calc(16px + var(--pf-left));
    right: calc(16px + var(--pf-right));
}
.app-mapa #painel {
    top: calc(80px + var(--pf-top));
    right: calc(16px + var(--pf-right));
    max-height: calc(100dvh - 96px - var(--pf-top) - var(--pf-bottom));
}
.app-mapa #painel-corpo { min-height: 0; }
.app-mapa #busca-resultados { max-height: calc(100dvh - 100px - var(--pf-top) - var(--pf-bottom)); }
.app-mapa #modal-grid {
    padding: calc(24px + var(--pf-top)) calc(24px + var(--pf-right)) calc(24px + var(--pf-bottom)) calc(24px + var(--pf-left));
}
.app-mapa #modal-box { max-height: calc(100dvh - 48px - var(--pf-top) - var(--pf-bottom)); }
@media (min-width: 768px) {
    .app-interno .navbar-interna { height: calc(64px + var(--pf-top)); }
}
@media (max-width: 640px) {
    .app-mapa .navbar { padding-left: calc(14px + var(--pf-left)); padding-right: calc(14px + var(--pf-right)); }
    .app-mapa #busca-wrap { right: calc(12px + var(--pf-right)); }
    .app-mapa #busca-input { font-size: 16px; }
    .app-mapa #busca-wrap:not(.colapsada) { left: calc(70px + var(--pf-left)); }
    .app-mapa #btn-painel { left: calc(14px + var(--pf-left)); right: auto; }
    .app-mapa #painel {
        top: auto; bottom: 0; left: 0; right: 0;
        padding-bottom: var(--pf-bottom);
        max-height: min(72dvh, calc(100dvh - 76px - var(--pf-top)));
    }
    .app-mapa #painel-header { padding-left: calc(16px + var(--pf-left)); padding-right: calc(16px + var(--pf-right)); }
    .app-mapa #painel-corpo {
        padding-left: calc(16px + var(--pf-left));
        padding-right: calc(16px + var(--pf-right));
        padding-bottom: 20px;
    }
    .app-mapa #modal-grid { padding: 0; }
    .app-mapa #modal-box, .app-interno #modal-box {
        max-height: calc(100dvh - 24px - var(--pf-top));
        padding-left: calc(18px + var(--pf-left));
        padding-right: calc(18px + var(--pf-right));
        padding-bottom: calc(26px + var(--pf-bottom));
    }
    .app-mapa #painel.peek { transform: translateY(calc(100% - 64px - var(--pf-bottom))); }
    .app-interno #modal-grid { padding-bottom: 0; }
    .app-interno .form-control, .app-interno .form-select, .app-auth .form-control { font-size: 16px; }
}
@media (prefers-color-scheme: dark) {
    :root {
        --pf-bg: #0f1724;
        --pf-surface: #1b2638;
        --pf-soft: #243247;
        --pf-text: #edf2fa;
        --pf-muted: #b2bfd2;
        --pf-line: #3c4b63;
        --pf-blue: #8ab4ff;
    }
    body.app-interno { background: var(--pf-bg); color: var(--pf-text); }
    body.app-auth { background: linear-gradient(135deg, #080e19, #111e33, #182d4e); color: var(--pf-text); }
    .app-auth .login-card,
    .app-interno .card-interno, .app-interno .stat-card, .app-interno .tabela-cards tr,
    .app-interno #modal-box, .app-interno #modal-nome-box {
        background: var(--pf-surface); color: var(--pf-text); border-color: var(--pf-line);
    }
    .app-auth .login-marca, .app-auth .form-label,
    .app-interno .card-interno h1, .app-interno .card-interno h2,
    .app-interno .stat-numero, .app-interno .form-label,
    .app-interno .estado-vazio-titulo, .app-interno #modal-titulo,
    .app-interno #modal-nome-box h5, .app-interno .editor-info strong,
    .app-interno .aviso-desktop-texto strong, .app-interno .editor-toolbar label { color: var(--pf-text); }
    .app-auth .login-sub, .app-auth .login-voltar, .app-auth a[href="esqueci_senha.php"],
    .app-interno .subtitulo, .app-interno .stat-label, .app-interno .form-text,
    .app-interno .pagina-eyebrow, .app-interno .estado-vazio-texto,
    .app-interno .editor-info, .app-interno .legenda-editor span,
    .app-interno .pesquisa-estacionamentos-resumo,
    .app-interno .pesquisa-estacionamentos-campo > .nav-icone,
    .app-interno #busca-estacionamentos-limpar { color: var(--pf-muted) !important; }
    .app-auth .form-control, .app-interno .form-control, .app-interno .form-select,
    .app-interno .editor-toolbar input[type=number], .app-interno #input-nome-vaga {
        background-color: var(--pf-bg); color: var(--pf-text); border-color: var(--pf-line);
    }
    .app-auth .form-control::placeholder, .app-interno .form-control::placeholder { color: #96a7bf; opacity: 1; }
    .app-auth .form-control:focus, .app-interno .form-control:focus, .app-interno .form-select:focus {
        border-color: var(--pf-blue); box-shadow: 0 0 0 3px rgba(138,180,255,.18);
    }
    .app-interno .table {
        --bs-table-color: var(--pf-text);
        --bs-table-hover-color: var(--pf-text);
        --bs-table-hover-bg: rgba(138,180,255,.08);
        --bs-table-striped-color: var(--pf-text);
        --bs-table-border-color: var(--pf-line);
        color: var(--pf-text);
    }
    .app-interno .table thead th { background: var(--pf-soft); color: #b6caff; }
    .app-interno .table tbody td { border-color: var(--pf-line); }
    .app-interno .tabela-cards td::before { color: var(--pf-muted); }
    .app-interno .aviso-desktop { background: #1e304d; border-color: #36547c; }
    .app-interno .aviso-desktop-texto p { color: var(--pf-muted); }
    .app-interno #busca-estacionamentos-vazia, .app-interno .estado-vazio,
    .app-interno .editor-toolbar, .app-interno .btn-cancelar, .app-interno .btn-ampliar,
    .app-interno .legenda span, .app-interno .modal-legenda span {
        background: var(--pf-soft); color: var(--pf-muted); border-color: var(--pf-line);
    }
    .app-interno .celula:not(.tem-vaga), .app-interno .vaga-vazia, .app-interno .vaga-vazia-modal {
        background: var(--pf-soft); border-color: var(--pf-line); color: var(--pf-muted);
    }
    .app-interno .btn-modo:not(.ativo) { background: var(--pf-soft); color: var(--pf-text); border-color: var(--pf-line); }
    .app-interno .editor-footer { border-color: var(--pf-line); }
    .app-interno #modal-aviso, .app-interno #modal-hint-girar { background: #233958; border-color: #3c577e; color: #b6caff; }
    .app-interno #modal-fechar { color: var(--pf-muted); }
    .app-interno .text-muted, .app-mapa .text-muted { color: var(--pf-muted) !important; }
    .app-interno .badge.bg-success, .app-interno .btn-status-aberto, .app-interno .stat-icone.verde,
    .app-interno .alert-success, .app-auth .alert-success { background: #173d32 !important; color: #83e3b1 !important; border-color: #2c6652; }
    .app-interno .badge.bg-danger, .app-interno .btn-status-fechado, .app-interno .stat-icone.vermelho,
    .app-interno .btn-danger, .app-interno .alert-danger, .app-auth .alert-danger { background: #48282f !important; color: #ffb4b4 !important; border-color: #75414b !important; }
    .app-interno .badge.bg-secondary { background: var(--pf-soft) !important; color: var(--pf-muted) !important; }
    .app-interno .btn-warning, .app-interno .alert-warning { background: #443722 !important; color: #f8d58c !important; border-color: #685433 !important; }
    .app-interno .stat-icone.azul { background: #233958; color: var(--pf-blue); }
    .app-interno .stat-icone.roxo { background: #352b4c; color: #d0b9ff; }
    .app-interno .card-interno h1 .nav-icone, .app-interno .aviso-desktop-icone .nav-icone { color: var(--pf-blue); }
    .app-interno #busca-estacionamentos-limpar:hover { background: var(--pf-soft); }
    .app-mapa {
        --superficie: var(--pf-surface);
        --fundo: var(--pf-bg);
        --texto: var(--pf-text);
        --texto-fraco: var(--pf-muted);
        --texto-leve: #9eafc6;
        --linha: #2f4058;
        --linha-forte: var(--pf-line);
        --azul: #8ab4ff;
        --azul-escuro: #adcaff;
        --azul-suave: #243d63;
        --verde: #81c995; --verde-suave: #193c2b;
        --vermelho: #f6aea9; --vermelho-suave: #4b282a;
        --ambar: #fdd663; --ambar-suave: #443820;
        --elev-1: 0 1px 4px rgba(0,0,0,.35);
        --elev-2: 0 4px 14px rgba(0,0,0,.4);
        --elev-3: 0 10px 30px rgba(0,0,0,.5);
    }
    .app-mapa #btn-vaga-proxima, .app-mapa #rota-iniciar,
    .app-mapa #instalar-banner-btn, .app-mapa .marca-icone,
    .app-mapa .rota-modo-btn.ativo .rota-icone { background: #2563eb; color: #fff; }
    .app-mapa .rota-modo-btn:hover .rota-icone { background: #365783; }
    .app-mapa .disponibilidade-aviso { background: #203653; border-color: #3c577e; color: #b6d2ff; }
    .app-mapa .disponibilidade-aviso p { color: var(--pf-muted); }
    .app-mapa #painel-obs, .app-mapa #painel-obs strong { color: var(--ambar); }
    .app-mapa .painel-fechado-banner, .app-mapa .modal-fechado-banner { border-color: #685433; }
    .app-mapa #painel-dica span { color: var(--texto) !important; }
}

/* Balão breve de um ponto: sem cabeçalho nem barras nativas brancas. */
.app-mapa .gm-style .gm-style-iw-c {
    padding: 12px !important;
    background: var(--superficie) !important;
    color: var(--texto);
    border-radius: 12px;
}
.app-mapa .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    background: transparent !important;
}
.app-mapa .gm-style .gm-style-iw-tc::after { background: var(--superficie) !important; }
.app-mapa .gm-style .gm-style-iw-t { pointer-events: none; }