/* Estilo do site público — fiel ao tema original (Astra/WordPress):
   header preto com menu dourado, títulos Montserrat azul-marinho com
   sublinhado dourado, cards de serviço com moldura dourada, footer preto. */

:root {
    --smas-preto: #000000;
    --smas-navy: #1e293b;        /* títulos (ast-global-color-2) */
    --smas-texto: #52627a;       /* corpo de texto (tom do tema escurecido p/ contraste AA) */
    --smas-gold: #d8b31b;        /* dourado das molduras/sublinhados */
    --smas-gold-claro: #ffcd57;  /* dourado dos links do menu (ast-global-color-7) */
    --smas-cinza-claro: #F2F5F7;
}

/* Guarda contra overflow horizontal no mobile (conteúdo largo não pode
   deslocar a página). "clip" e não "hidden": hidden cria scroll container
   e quebraria o position: sticky da navbar. */
html, body { overflow-x: clip; }

body {
    font-family: 'Google Sans', 'Helvetica Neue', sans-serif;
    color: var(--smas-texto);
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    color: var(--smas-navy);
    font-weight: 700;
}

.text-gold { color: var(--smas-gold-claro); }

/* Texto navy sobre dourado: ~7:1 (WCAG AA/AAA); branco dava ~1.9:1 */
.btn-gold {
    background-color: var(--smas-gold);
    color: var(--smas-navy);
    font-weight: 600;
}

.btn-gold:hover {
    background-color: var(--smas-gold-claro);
    color: var(--smas-navy);
}

/* Título de seção com sublinhado dourado (padrão do site original) */
.titulo-secao {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: .75rem;
}

.titulo-secao::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 110px;
    height: 4px;
    background-color: var(--smas-gold);
}

/* ------------------------------------------------ header (preto + dourado) */

.site-navbar {
    background-color: var(--smas-preto);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.site-navbar .nav-link {
    color: var(--smas-gold);
    font-size: 1.08rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .dropdown-item:hover {
    color: var(--smas-gold-claro);
}

.site-navbar .dropdown-menu {
    background-color: var(--smas-preto);
    border: 1px solid rgba(216, 179, 27, .3);
}

.site-navbar .dropdown-item { color: var(--smas-gold); }

.site-navbar .dropdown-item:hover { background-color: #1a1a1a; }

/* ------------------------------------------------ hero (vídeo/imagem full-bleed) */

.hero-media {
    position: relative;
    height: 78vh;
    min-height: 420px;
    overflow: hidden;
    background-color: var(--smas-preto);
}

.hero-media video,
.hero-media .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-media .hero-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.hero-media .hero-legenda h1 {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .75);
}

.hero-media .hero-legenda p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
    margin-bottom: 1rem;
}

/* ------------------------------------------------ cards de serviço (moldura dourada) */

.card-servico {
    display: block;
    text-decoration: none;
    text-align: center;
}

.card-servico .moldura {
    border: 10px solid var(--smas-gold);
    border-radius: 24px;
    overflow: hidden;
    max-width: 240px;
    margin: 0 auto 1rem;
    background: #fff;
}

.card-servico .moldura img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.card-servico h3 {
    font-size: 1.35rem;
    color: var(--smas-navy);
}

.card-servico:hover .moldura { border-color: var(--smas-gold-claro); }

.card-servico:hover h3 { color: var(--smas-gold); }

/* ------------------------------------------------ notícias */

.card-noticia {
    border: 0;
    box-shadow: 0 2px 10px rgba(30, 41, 59, .08);
}

.card-noticia img.capa {
    height: 200px;
    object-fit: cover;
}

.card-noticia .card-title a {
    color: var(--smas-navy);
    text-decoration: none;
}

.card-noticia .card-title a:hover { color: var(--smas-gold); }

.card-noticia .badge {
    background-color: var(--smas-gold) !important;
    color: var(--smas-navy);
}

/* Corpo da notícia/página (conteúdo do editor Quill) */
.conteudo-noticia {
    font-size: 1.06rem;
    line-height: 1.8;
}

.conteudo-noticia img {
    max-width: 100%;
    height: auto;
    border-radius: .375rem;
    margin: 1rem 0;
}

.conteudo-noticia blockquote {
    border-left: 4px solid var(--smas-gold);
    padding-left: 1rem;
    color: var(--smas-texto);
}

.conteudo-noticia .ql-align-center { text-align: center; }
.conteudo-noticia .ql-align-right { text-align: right; }
.conteudo-noticia .ql-align-justify { text-align: justify; }
.conteudo-noticia .ql-size-small { font-size: .8em; }
.conteudo-noticia .ql-size-large { font-size: 1.4em; }
.conteudo-noticia .ql-size-huge { font-size: 2em; }
.conteudo-noticia .ql-indent-1 { padding-left: 3em; }
.conteudo-noticia .ql-indent-2 { padding-left: 6em; }

/* Link solto para um arquivo do acervo vira botão — uma âncora nua no meio do
   conteúdo passava despercebida. Dois seletores porque hoje as âncoras são
   filhas diretas do wrapper, mas o Quill embrulha tudo em <p> assim que a
   página for editada pelo admin; o :only-child garante que só vire botão o
   link que ocupa o parágrafo inteiro, deixando link em meio a texto intacto. */
.conteudo-noticia > a[href^="/api/v1/midias/"],
.conteudo-noticia > p > a[href^="/api/v1/midias/"]:only-child {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* min-height de 44px: alvo de toque confortável no celular */
    min-height: 44px;
    margin: .25rem 0;
    padding: .625rem 1.25rem;
    border-radius: .375rem;
    background-color: var(--smas-gold);
    color: var(--smas-navy);
    font-weight: 600;
    text-decoration: none;
}

.conteudo-noticia > a[href^="/api/v1/midias/"]:hover,
.conteudo-noticia > p > a[href^="/api/v1/midias/"]:only-child:hover {
    background-color: var(--smas-gold-claro);
    color: var(--smas-navy);
}

/* Ícone de documento (mesmo path do macro `icone` em base/_icones.html). Em
   data-URI porque o conteúdo vem do banco e o CSS não pode injetar <svg> —
   a CSP libera `data:` em img-src. */
.conteudo-noticia > a[href^="/api/v1/midias/"]::before,
.conteudo-noticia > p > a[href^="/api/v1/midias/"]:only-child::before {
    content: "";
    flex: none;
    width: 1.05em;
    height: 1.05em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e293b'%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Estudos Técnicos: lista de estudos separados por um filete, cada um com
   título, descrição e o botão acima. Escopado por `pagina-<slug>` para não
   alterar o h3 das notícias, que compartilham `.conteudo-noticia`. */

/* Medida de leitura no bloco inteiro, e não só nos parágrafos: assim os
   filetes terminam junto com o texto em vez de atravessar o vazio à direita. */
.pagina-estudos-tecnicos {
    max-width: 68ch;
}

.pagina-estudos-tecnicos h3 {
    margin-top: 2.75rem;
    padding-top: 2.25rem;
    border-top: 1px solid #dbe2ea;
    font-size: 1.4rem;
}

.pagina-estudos-tecnicos h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pagina-estudos-tecnicos p {
    margin-bottom: 1.25rem;
}

.imagem-destacada {
    max-height: 480px;
    width: 100%;
    object-fit: cover;
    border-radius: .5rem;
}

/* ------------------------------------------------ seções da home */

.secao-titulo-underline {
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
}

.secao-titulo-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 3px;
    background-color: var(--smas-gold);
}

#contato h3 { font-size: 1.35rem; }

#contato strong { color: var(--smas-navy); }

/* ------------------------------------------------ footer (barra preta fina) */

.site-footer {
    background-color: var(--smas-preto);
    padding: 1.25rem 0;
}

.site-footer a {
    color: var(--smas-gold);
    text-decoration: none;
    margin: 0 .75rem;
}

.site-footer a:hover { color: var(--smas-gold-claro); }

.paginacao-site .page-link { color: var(--smas-navy); }

.paginacao-site .page-item.active .page-link {
    background-color: var(--smas-gold);
    border-color: var(--smas-gold);
    color: var(--smas-navy);
}

/* ---- PWA: modal "App SMAS" ---- */
.pwa-modal {
    border-top: 6px solid var(--smas-gold);
    border-radius: 10px;
}
.pwa-modal .modal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--smas-navy);
    display: flex;
    align-items: center;
}

/* ---- Marca "SMAS" ao lado do logo (visível no mobile) ---- */
.site-navbar .brand-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .04em;
    color: var(--smas-gold-claro);
    line-height: 1;
}

/* ---- Oferta automática de comunicados (push) ---- */
.push-oferta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: var(--smas-navy);
    color: #fff;
    border-top: 3px solid var(--smas-gold);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
.push-oferta strong { color: var(--smas-gold-claro); }

/* Aviso de cookies / LGPD — barra fixa no rodapé da viewport */
.cookie-aviso {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background-color: var(--smas-navy);
    color: #fff;
    border-top: 3px solid var(--smas-gold);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
.cookie-aviso a { color: var(--smas-gold-claro); }

/* Atalhos de emergência na home — alvos grandes, emergência dominante, para
   orientar quem está nervoso ou em risco. Sempre visível no celular (mesmo
   fora do app instalado): é conteúdo de emergência e não deve depender do modo
   standalone nem de JS. O seletor .atalhos-app.d-none vence o .d-none do
   Bootstrap por especificidade. Em telas maiores segue exclusivo do app
   (pwa.js remove o .d-none quando standalone). */
@media (max-width: 991.98px) {
    .atalhos-app.d-none { display: block !important; }
    /* Home mais compacta no celular: hero menor coloca os atalhos de
       emergência dentro da primeira dobra */
    .hero-media { height: 46vh; min-height: 300px; }
    #servicos, #sobre, #contato { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}
.atalhos-titulo {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--smas-navy);
    text-align: center;
    margin-bottom: .75rem;
}
.atalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    text-decoration: none;
    border-radius: 1rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .06s ease, filter .1s ease;
}
.atalho:active { transform: scale(.98); }
.atalho:hover, .atalho:focus { filter: brightness(1.05); }
.atalho:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.atalho-icone { font-size: 2rem; line-height: 1; }
.atalho-emergencia {
    background-color: #d32f2f;
    color: #fff;
    padding: 1.75rem 1rem;
    font-size: 1.5rem;
    margin-bottom: .75rem;
}
.atalho-emergencia .atalho-icone { font-size: 2.75rem; }
.atalhos-secundarios {
    display: flex;
    gap: .75rem;
}
.atalhos-secundarios .atalho {
    flex: 1 1 0;
    min-width: 0;  /* com flex-basis 0, precisa poder encolher abaixo do conteúdo */
    padding: 1.25rem .75rem;
    font-size: 1.1rem;
}
.atalho-ligar { background-color: #1b8a3a; color: #fff; }
.atalho-denuncia { background-color: var(--smas-gold); color: #1a1a1a; }

/* ---- Feed de comunicados ----
   Coluna única estilo rede social. A imagem é alta e SEM corte (muitos
   flyers têm texto): object-fit contain com fundo suave; max-height limita
   cartazes muito verticais. A classe antiga .capa (200px, cover) continua
   valendo para os cards compactos da home e das relacionadas. */
.card-feed .capa-feed {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background-color: var(--smas-cinza-claro);
}
.btn-curtir {
    font-size: 1.5rem;
    line-height: 1;
    padding: .25rem .6rem;
    border: 0;
    color: #94a3b8;
    background: transparent;
    transition: transform .1s ease;
}
.btn-curtir.curtido { color: #d32f2f; }
.btn-curtir:active { transform: scale(1.25); }
.btn-curtir:focus-visible { outline: 3px solid var(--smas-navy); border-radius: .5rem; }
.curtidas-contagem { color: var(--smas-texto); font-weight: 600; }

/* Compartilhar: mesmo visual do coração (transparente, cinza, foco navy).
   .copiado é o feedback textual do fallback de copiar link no desktop. */
.btn-compartilhar {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: .25rem .6rem;
    border: 0;
    color: #94a3b8;
    background: transparent;
}
.btn-compartilhar:hover { color: var(--smas-navy); }
.btn-compartilhar:active { transform: scale(1.15); }
.btn-compartilhar:focus-visible { outline: 3px solid var(--smas-navy); border-radius: .5rem; }
.btn-compartilhar.copiado {
    font-size: .85rem;
    font-weight: 600;
    color: var(--smas-navy);
}

/* ---- Camada mobile "cara de app" (<lg) ----
   No celular a navegação vira uma tab bar fixa inferior (estilo app nativo)
   e o header fica enxuto; no desktop (>=lg) nada muda — site institucional.
   A barra é HTML/CSS puro: funciona sem JS e independe do PWA. */
.tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030; /* abaixo de offcanvas (1045) e modal (1055) */
    display: flex;
    align-items: stretch;
    background: var(--smas-preto);
    border-top: 2px solid var(--smas-gold);
    /* Aparelhos com gesto/notch: a barra absorve a safe area inferior */
    padding-bottom: env(safe-area-inset-bottom);
    min-height: 60px;
}
.tab-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: .4rem .15rem;
    color: var(--smas-gold);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}
.tab-item.ativo,
.tab-item:hover,
.tab-item:focus { color: var(--smas-gold-claro); }
.tab-item:focus-visible { outline: 3px solid var(--smas-gold-claro); outline-offset: -3px; }
.tab-item:active { transform: scale(.96); }
.tab-icone { font-size: 1.4rem; line-height: 1; }
/* Emergência: botão circular elevado no centro da barra */
.tab-emergencia { color: #fff; overflow: visible; }
.tab-emergencia .tab-circulo {
    width: 56px;
    height: 56px;
    margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d32f2f;
    border: 3px solid #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* Menu completo do app (offcanvas aberto pela tab bar) */
.menu-app { background: var(--smas-navy); color: #fff; }
.menu-app .offcanvas-title { color: var(--smas-gold-claro); }
.menu-app-grupo {
    margin-top: 1rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--smas-gold);
}
.menu-app-lista a {
    display: block;
    padding: .65rem .25rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu-app-lista a:hover,
.menu-app-lista a:focus { color: var(--smas-gold-claro); }
/* Fallback sem JS: seguir o link #menu-app da tab bar abre o menu via :target
   (com JS o Bootstrap intercepta o clique e o hash nem muda) */
#menu-app:target { visibility: visible; transform: none; }

@media (max-width: 991.98px) {
    /* Header de app: só o logo centralizado — a navegação vive na tab bar */
    .site-navbar .navbar-toggler { display: none; }
    .site-navbar .container { justify-content: center; }
    .site-navbar { padding-top: .4rem; padding-bottom: .4rem; }
    /* Conteúdo e banners fixos não podem ficar sob a tab bar */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .cookie-aviso, .push-oferta { bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* Transição suave entre páginas (SSR recarrega a página inteira) —
   progressive enhancement, ignorada por navegadores sem suporte */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ---- Páginas de denúncia/pânico ----
   Usuário provavelmente no celular, nervoso, possivelmente idoso e com
   dificuldade de leitura: fonte maior, texto mais escuro que o padrão do
   site e alvos de toque grandes. */
.pagina-emergencia { font-size: 1.125rem; color: #334155; }
.pagina-emergencia .form-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--smas-navy);
}
.pagina-emergencia .form-control { font-size: 1.15rem; min-height: 52px; }
.pagina-emergencia textarea.form-control { min-height: auto; }
.pagina-emergencia .form-text { font-size: .95rem; color: #46536a; }
.pagina-emergencia .btn { min-height: 48px; }
.pagina-emergencia .btn-sm { min-height: auto; }
.pagina-emergencia .btn-enviar {
    min-height: 56px;
    font-size: 1.25rem;
    font-weight: 700;
}
.pagina-emergencia .alert { font-size: 1.1rem; }

/* ---- Wizard (denúncia/pânico): uma pergunta por tela, cara de app ----
   Ativado por wizard.js (classes .wizard-ativo / .corpo-wizard). Sem JS nada
   disto se aplica: o formulário completo continua visível como sempre. */

/* Esconde o "cromo de site" ao redor: breadcrumb, introdução e footer */
.wizard-ativo .wizard-oculta,
.pagina-emergencia.wizard-ativo .wizard-oculta { display: none; }
body.corpo-wizard .site-footer { display: none; }

/* Título compacto e centrado; aviso 190/192/193 menor mas sempre visível */
.pagina-emergencia.wizard-ativo h1 {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: .5rem;
}
.pagina-emergencia.wizard-ativo .alert-warning {
    font-size: .95rem;
    padding: .5rem .75rem;
    text-align: center;
}

/* O form vira o "card" do passo: altura confortável, botões ancorados na
   base do card (flex + margin-top:auto — não brigam com a tab bar fixa) */
form.wizard-ativo {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(30, 41, 59, .12);
    padding: 1.25rem;
    min-height: min(62vh, 580px);
    scroll-margin-top: 90px; /* navbar sticky não cobre o card no scrollIntoView */
}
form.wizard-ativo section.passo { display: none; }
form.wizard-ativo section.passo.passo-ativo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Botão real de envio ancorado na base do card no último passo */
form.wizard-ativo .passo-ativo .btn-enviar { margin-top: auto; }

/* Progresso: "Passo 2 de 4" + bolinhas + pergunta do passo */
.wizard-progresso { text-align: center; margin-bottom: 1rem; }
.wizard-progresso p {
    font-weight: 700;
    font-size: .9rem;
    color: var(--smas-navy);
    margin-bottom: .35rem;
}
.wizard-bolinhas { display: flex; justify-content: center; gap: .5rem; }
.wizard-bolinhas span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.wizard-bolinhas span.ativa { background: var(--smas-gold); }
.wizard-bolinhas span.feita { background: var(--smas-navy); }
.wizard-titulo-passo {
    font-size: 1.3rem;
    text-align: center;
    margin: .75rem 0 0;
}

/* Navegação: botões grandes, Voltar discreto à esquerda */
.wizard-nav { display: flex; gap: .75rem; margin-top: 1rem; }
.wizard-nav .btn { min-height: 56px; font-size: 1.15rem; font-weight: 700; }
.wizard-nav .wizard-btn-voltar { flex: 0 0 auto; }
.wizard-nav .wizard-btn-avancar { flex: 1 1 auto; }

/* ---------------------------------------------------------------- mapa territorial: árvore de camadas */
.mapa-layout .arvore-camadas {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: .25rem;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.camadas-acoes-globais {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-bottom: .75rem;
}
.camadas-acoes-globais .btn-link {
    color: var(--smas-navy);
    text-decoration: none;
    padding: .3rem .45rem;
    line-height: 1;
    font-size: 1.05rem;
}
.camadas-acoes-globais .btn-link:hover,
.camadas-acoes-globais .btn-link:focus-visible {
    color: var(--smas-gold);
}
.camadas-acoes-globais .icone-rotacionado-180 { transform: rotate(180deg); }
.camadas-acoes-separador {
    width: 1px;
    height: 1.1rem;
    background: #dee2e6;
    margin: 0 .25rem;
}

.arvore-no { margin-bottom: .1rem; }

.arvore-no-linha {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem 0;
}

.arvore-expandir,
.arvore-expandir-espaco {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.arvore-expandir {
    background: none;
    border: 0;
    padding: 0;
    color: var(--smas-texto);
    cursor: pointer;
}
.arvore-expandir:hover { color: var(--smas-gold); }
.arvore-seta { transition: transform .15s ease; }
.arvore-expandir.collapsed .arvore-seta { transform: rotate(-90deg); }

.arvore-no-linha .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

/* Sem checkbox (nó sem geometria própria nem descendente): mantém o rótulo
   alinhado com o dos irmãos que têm checkbox, ocupando o mesmo espaço. */
.arvore-checkbox-espaco {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.arvore-no-rotulo,
.arvore-no-rotulo-sem-checkbox {
    flex: 1 1 auto;
    color: var(--smas-navy);
}
.arvore-no-rotulo { cursor: pointer; }
.arvore-no-rotulo-sem-checkbox { color: var(--smas-texto); }

.arvore-no-rotulo .badge,
.arvore-no-rotulo-sem-checkbox .badge {
    font-weight: 500;
    color: var(--smas-texto);
    margin-left: .2rem;
}

.arvore-tipo-icone {
    color: var(--smas-gold);
    font-size: .65em;
    vertical-align: middle;
}

/* Nível de topo (filhos diretos da árvore): destaque de categoria */
.arvore-camadas > .arvore-no {
    border-bottom: 2px solid var(--smas-gold);
    padding-bottom: .35rem;
    margin-bottom: .5rem;
}
.arvore-camadas > .arvore-no > .arvore-no-linha .arvore-no-rotulo,
.arvore-camadas > .arvore-no > .arvore-no-linha .arvore-no-rotulo-sem-checkbox {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .03em;
}

.arvore-filhos {
    list-style: none;
    margin: .1rem 0 .4rem 1.5rem;
    padding-left: 0;
}

/* Resumo geral do mapa (MapaCamada.descricao) */
.mapa-descricao-geral-texto {
    white-space: pre-line;
    color: var(--smas-texto);
}

/* Seção "Sobre as camadas" — descrição de cada categoria/pasta em texto
   normal (sem popup/balão, funciona sem JS); título com heading real
   (h3-h6, conforme a profundidade na hierarquia do KML), sem borda nem
   indentação — só a hierarquia de tamanho de fonte separa os níveis. */
.mapa-descricoes-camadas {
    max-width: 60rem;
}
.mapa-descricao-item {
    margin: 0 0 1.25rem;
}
.mapa-descricao-item-titulo {
    color: var(--smas-navy);
    margin-bottom: .35rem;
}
.mapa-descricao-item-corpo {
    color: var(--smas-texto);
}
.mapa-descricao-item-corpo p:last-child { margin-bottom: 0; }

/* Ícone (i) do nó sem geometria: abre a descrição em balão (com JS) ou é
   âncora pro texto na seção "Sobre as camadas" (sem JS). */
.arvore-info {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .15rem .25rem;
    color: var(--smas-navy);
    text-decoration: none;
    line-height: 1;
}
.arvore-info:hover,
.arvore-info:focus-visible { color: var(--smas-gold); }

/* Balão da descrição de categoria — imita o popup do Leaflet
   (vendor/leaflet/leaflet.css) sem reusar as classes dele, que dependem do
   posicionamento/transform do mapa. Medidas espelham OPCOES_POPUP em
   public/mapa.html pra o balão e o popup terem a mesma caixa. */
.mapa-balao {
    position: absolute;
    z-index: 1050;
    min-width: 260px;
    max-width: min(380px, calc(100vw - 1rem));
}
.mapa-balao:focus { outline: none; }
.mapa-balao-caixa {
    position: relative;
    background: #fff;
    color: #333;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .4);
    padding: 13px 24px 13px 20px;
    /* fallback: o JS ajusta a cada abertura pro espaço livre acima/abaixo */
    max-height: 60vh;
    line-height: 1.3;
    /* só o texto rola; o botão "Ver no mapa" fica preso no rodapé, senão
       some no fim de descrições de milhares de caracteres */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mapa-balao-conteudo {
    padding-right: .75rem;
    overflow-y: auto;
    min-height: 0;
}
.mapa-balao-conteudo p:last-child { margin-bottom: 0; }
/* "Ver no mapa": só aparece quando a categoria tem geometria carregada */
.mapa-balao-acoes {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid #e9ecef;
    text-align: right;
}
.mapa-balao-ver {
    border: 1px solid var(--smas-navy);
    background: none;
    color: var(--smas-navy);
    border-radius: .25rem;
    padding: .15rem .6rem;
    font-size: .8rem;
    line-height: 1.4;
}
.mapa-balao-ver:hover,
.mapa-balao-ver:focus-visible {
    background: var(--smas-navy);
    color: #fff;
}
.mapa-balao-fechar {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    background: none;
    padding: 4px 6px 0 0;
    font: 700 18px/16px Tahoma, Verdana, sans-serif;
    color: #757575;
}
.mapa-balao-fechar:hover,
.mapa-balao-fechar:focus-visible { color: #585858; }
/* Quadrado rotacionado sob a caixa (mesma técnica do .leaflet-popup-tip),
   recortado em triângulo — o clip-path é aplicado antes do transform, então
   a metade recortada vira a ponta. O JS reposiciona o `left` pra apontar
   pro ícone clicado. */
.mapa-balao-seta {
    position: absolute;
    top: calc(100% - 9px);
    width: 17px;
    height: 17px;
    margin-left: -8.5px;
    background: #fff;
    transform: rotate(45deg);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    /* drop-shadow em vez de box-shadow: o clip-path recorta o box-shadow
       junto, e sem sombra a ponta branca some sobre o fundo branco. */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .3));
}
.mapa-balao-abaixo .mapa-balao-seta {
    top: -8px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

@media (max-width: 991.98px) {
    .mapa-layout .arvore-camadas {
        max-height: none;
        overflow-y: visible;
    }
}