/* Estilo compartilhado de todas as páginas */
:root {
  --verde: #1f8b4c;
  --verde-hover: #19733f;
  --verde-claro: #e6f4ec;
  --sobre-verde: #fff;          /* texto sobre fundo verde */
  --texto: #1d1d1f;
  --texto-2: #6b6f73;
  --superficie: #fff;
  --fundo: #f4f5f6;
  --fundo-2: #f1f2f3;           /* campos, caixas internas */
  --hover: #f3f4f5;
  --linha: #e7e8ea;
  --perigo: #c62828;
  --perigo-claro: #fdecea;
  --sombra: 0 2px 10px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08);
  --raio: 16px;
  --margem: 12px;
  --topo-h: 60px;
  --topo: calc(var(--topo-h) + env(safe-area-inset-top));
  --bs-body-font-family: 'Roboto', system-ui, sans-serif;
  --bs-body-color: var(--texto);
}

/* Visão externa: tema escuro com contraste reforçado (uso ao ar livre) */
:root[data-tema="externo"] {
  --verde: #3ddc84;
  --verde-hover: #62e69d;
  --verde-claro: rgba(61,220,132,.18);
  --sobre-verde: #000;
  --texto: #fff;
  --texto-2: #d4d4d4;
  --superficie: #0f0f0f;
  --fundo: #000;
  --fundo-2: #1f1f1f;
  --hover: #262626;
  --linha: #3d3d3d;
  --perigo: #ff6b6b;
  --perigo-claro: rgba(255,107,107,.16);
  --sombra: 0 0 0 1px #4a4a4a, 0 4px 14px rgba(0,0,0,.7);
  --bs-body-bg: #000;
}

html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--fundo); color: var(--texto); }
h1, h2, h3, h4, h5, h6, .titulo { font-family: 'Poppins', system-ui, sans-serif; }
a { color: var(--verde); }
#mapa { position: fixed; top: var(--topo); left: 0; right: 0; bottom: 0; font-family: 'Roboto', system-ui, sans-serif; }

.flutuante { position: fixed; z-index: 1100; }
.cartao { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); }

/* ---------- Cabeçalho (largura total) ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 1150; height: var(--topo);
        padding: env(safe-area-inset-top) var(--margem) 0; display: flex; align-items: center; gap: 10px;
        background: var(--superficie); border-bottom: 1px solid var(--linha); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--texto); text-decoration: none;
         border-radius: 12px; padding: 4px 6px 4px 2px; }
.marca:hover { background: var(--hover); color: var(--texto); }
.marca .logo { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--verde); color: var(--sobre-verde);
               display: flex; align-items: center; justify-content: center; font-size: 19px; }
.marca .textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.marca .nome { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: .95rem;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca .versao { font-family: 'Roboto', system-ui, sans-serif; font-size: .62rem; font-weight: 500; color: var(--texto-2);
                 letter-spacing: .02em; margin-left: 2px; vertical-align: 1px; }
.marca .sub { font-size: .72rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#contador { flex: none; background: var(--verde-claro); color: var(--verde); font-weight: 500;
            font-size: .72rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

.menu-links { display: none; align-items: center; gap: 2px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--linha); }
.menu-links a { color: var(--texto); text-decoration: none; font-size: .88rem; font-weight: 500; padding: 7px 12px; border-radius: 999px; }
.menu-links a:hover { background: var(--hover); }
.menu-links a[aria-current="page"] { background: var(--verde-claro); color: var(--verde); }
.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.topo-acoes .btn-verde { align-items: center; padding: .4rem 1rem; }

/* Botão de destaque no cabeçalho (Patrocinadores): verde suave */
.btn-destaque-topo { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; min-width: 42px;
                     padding: 0 14px; border: 1px solid rgba(31,139,76,.25); border-radius: 999px; background: var(--verde-claro);
                     color: var(--verde); font-size: .88rem; font-weight: 500; white-space: nowrap; text-decoration: none;
                     transition: background-color .15s, box-shadow .15s; }
.btn-destaque-topo .bi { font-size: 17px; }
.btn-destaque-topo:hover { background: rgba(31,139,76,.16); box-shadow: 0 2px 8px rgba(31,139,76,.18); color: var(--verde); }
.btn-destaque-topo[aria-current="page"] .bi::before { content: "\f415"; }   /* coração cheio na própria página */
.btn-destaque-topo:focus-visible { outline: 3px solid rgba(31,139,76,.55); outline-offset: 2px; }
:root[data-tema="externo"] .btn-destaque-topo { border-color: rgba(61,220,132,.35); }
@media (max-width: 575.98px) {
  .btn-destaque-topo { padding: 0; width: 42px; }
  .btn-destaque-topo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Botão do menu: pílula com ☰ e avatar */
.btn-menu { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 5px 0 12px;
            border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); color: var(--texto);
            font-size: 20px; transition: box-shadow .15s, background-color .15s; }
.btn-menu:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.btn-menu[aria-expanded="true"] { background: var(--hover); }
.btn-menu:focus-visible { outline: 3px solid rgba(31,139,76,.55); outline-offset: 2px; }
.ponto-alerta { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%;
                background: #dc3545; border: 2px solid var(--superficie); }

.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
          background: var(--verde); color: var(--sobre-verde); font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; }
.avatar-sm { width: 30px; height: 30px; font-size: .75rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; }
.avatar-visitante { background: var(--fundo-2); color: var(--texto-2); }
.avatar-sm.avatar-visitante { font-size: 16px; }
.avatar-lg.avatar-visitante { font-size: 26px; }

@media (min-width: 768px) {
  .menu-links { display: flex; }
}

/* ---------- Megamenu ---------- */
.megamenu { position: fixed; inset: var(--topo) 0 0 0; z-index: 1260; }
.megamenu[hidden] { display: none; }
.mm-fundo { position: absolute; inset: 0; background: rgba(15,18,20,.45); animation: mm-aparecer .2s ease; }
.mm-painel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--fundo);
             padding: 16px var(--margem) calc(24px + env(safe-area-inset-bottom)); outline: none;
             animation: mm-entrar .22s cubic-bezier(.2,.8,.2,1); }
@keyframes mm-aparecer { from { opacity: 0; } }
@keyframes mm-entrar { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mm-fundo, .mm-painel { animation: none; } }
body.menu-aberto { overflow: hidden; }

/* Cartão da conta */
.mm-conta { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 16px; }
.mm-usuario { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mm-usuario-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mm-usuario-texto strong { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 1rem;
                           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-email { font-size: .82rem; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; }
.mm-papel { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .75rem; font-weight: 500; color: var(--verde); }
.mm-conta-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-conta-botoes form { margin: 0; }
.mm-conta-botoes .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }

/* Cartão "Instale o app" no megamenu */
.mm-instalar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--raio);
               background: var(--verde-claro); border: 1px solid rgba(31,139,76,.18); }
.mm-instalar[hidden] { display: none; }
.mm-instalar-icone img { width: 46px; height: 46px; border-radius: 12px; display: block; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.mm-instalar-texto { flex: 1; min-width: 0; }
.mm-instalar-texto h2 { font-size: .98rem; font-weight: 600; margin: 0 0 2px; color: var(--texto); }
.mm-instalar-texto p { font-size: .82rem; color: var(--texto-2); margin: 0; line-height: 1.35; }
.mm-instalar .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: .5rem 1rem; }
@media (max-width: 400px) {
  .mm-instalar { flex-wrap: wrap; }
  .mm-instalar .btn { width: 100%; justify-content: center; }
}

/* Janelas do Bootstrap acima do cabeçalho e dos controles do mapa */
.modal-backdrop { z-index: 1390; }
.modal { z-index: 1400; }
.mm-credito { font-size: .74rem !important; color: var(--verde) !important; margin-top: 1px; }

/* Janela de instruções de instalação */
.modal-instalar { border-radius: var(--raio); }
.passos-instalar { padding-left: 1.2rem; margin-bottom: .75rem; }
.passos-instalar li { margin-bottom: .45rem; line-height: 1.5; }
.passos-instalar .bi { color: var(--verde); }
.nota-instalar { font-size: .85rem; color: var(--texto-2); margin: .5rem 0 0; }

/* Seções e itens */
.mm-colunas { display: grid; gap: 16px; }
.mm-coluna { display: grid; gap: 16px; align-content: start; }
.mm-secao { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 6px; }
.mm-titulo { font-family: 'Roboto', system-ui, sans-serif; font-size: .72rem; font-weight: 600; text-transform: uppercase;
             letter-spacing: .06em; color: var(--texto-2); margin: 8px 10px 6px; }
.mm-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px; border: 0; background: none;
           border-radius: 12px; color: var(--texto); text-decoration: none; text-align: left; }
.mm-item[hidden] { display: none; }
.mm-item:hover { background: var(--hover); color: var(--texto); }
.mm-item:focus-visible { outline: 3px solid rgba(31,139,76,.55); outline-offset: -3px; }
.mm-icone { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--verde-claro); color: var(--verde);
            display: flex; align-items: center; justify-content: center; font-size: 20px; }
.mm-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mm-texto strong { font-weight: 500; font-size: .95rem; }
.mm-texto small { font-size: .8rem; color: var(--texto-2); }
.mm-seta { flex: none; color: var(--texto-2); font-size: 14px; }
.mm-item[aria-current="page"] { background: var(--verde-claro); }
.mm-item[aria-current="page"] .mm-icone { background: var(--verde); color: var(--sobre-verde); }
.mm-item[aria-current="page"] strong { color: var(--verde); }

/* Chave liga/desliga da visão externa */
.mm-chave { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--linha); transition: background-color .2s; }
.mm-chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
                   background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.btn-tema[aria-pressed="true"] .mm-chave { background: var(--verde); }
.btn-tema[aria-pressed="true"] .mm-chave::after { transform: translateX(18px); }
.btn-tema[aria-pressed="true"] .mm-icone { background: var(--verde); color: var(--sobre-verde); }

/* Computador: painel suspenso ancorado no botão do menu */
@media (min-width: 768px) {
  .mm-painel { inset: 8px var(--margem) auto auto; width: min(760px, calc(100vw - 2 * var(--margem)));
               max-height: calc(100vh - var(--topo) - 24px); border-radius: 20px; padding: 16px;
               box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 0 0 1px var(--linha); }
  .mm-fundo { background: rgba(15,18,20,.18); }
  .mm-colunas { grid-template-columns: 1.15fr 1fr; }
  body.menu-aberto { overflow: visible; }
  html.pagina body.menu-aberto { overflow: auto; }
}
:root[data-tema="externo"] .mm-fundo { background: rgba(0,0,0,.6); }

/* ---------- Botões flutuantes do mapa ---------- */
.btn-redondo { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--superficie); color: var(--texto);
               box-shadow: var(--sombra); display: flex; align-items: center; justify-content: center; font-size: 20px;
               transition: background-color .15s, color .15s; }
.btn-redondo:hover { background: var(--hover); }
.btn-redondo:focus-visible, .item-barra:focus-visible, .btn-acao:focus-visible, .marca:focus-visible { outline: 3px solid rgba(31,139,76,.55); outline-offset: 2px; }
.btn-redondo.ativo { background: var(--verde); color: var(--sobre-verde); }

#ctrlTopo { top: calc(var(--topo) + var(--margem)); right: var(--margem); display: flex; flex-direction: column; gap: 10px; }
#ctrlLado { right: var(--margem); top: calc(50% + var(--topo) / 2); transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.grupo-zoom { display: flex; flex-direction: column; gap: 10px; }
#btnLocalizar.buscando i { display: inline-block; color: var(--verde); animation: girar 1s linear infinite; }
#btnLocalizar.achou { color: #0d6efd; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Barra inferior */
#barra { left: 50%; transform: translateX(-50%); bottom: calc(var(--margem) + env(safe-area-inset-bottom));
         display: flex; padding: 6px; gap: 2px; width: min(440px, calc(100% - 2 * var(--margem))); }
.item-barra { position: relative; flex: 1; border: 0; background: none; border-radius: 12px; padding: 6px 4px 5px; color: var(--texto);
              display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; font-weight: 500; text-decoration: none; }
.item-barra i { font-size: 20px; line-height: 1; }
.item-barra:hover { background: var(--hover); color: var(--texto); }
.item-barra.ativo { background: var(--verde-claro); color: var(--verde); }
.item-barra.destaque i { color: var(--verde); }
.item-barra.filtrado::after { content: ''; position: absolute; top: 5px; right: calc(50% - 16px); width: 9px; height: 9px;
                              border-radius: 50%; background: #ff9800; border: 2px solid var(--superficie); }
.sep-barra { width: 1px; background: var(--linha); margin: 8px 2px; }

/* Dica de desenho */
#dica { top: calc(var(--topo) + var(--margem)); left: 50%; transform: translateX(-50%); z-index: 1150;
        background: rgba(29,29,31,.92); color: #fff; border-radius: 999px; padding: 7px 16px;
        display: flex; align-items: center; gap: 10px; font-size: .82rem; box-shadow: var(--sombra);
        width: max-content; max-width: calc(100% - 2 * var(--margem) - 60px); }
:root[data-tema="externo"] #dica { background: #fff; color: #000; }

/* ---------- Folha (bottom sheet no celular, painel no computador) ---------- */
#folha { z-index: 1200; left: 0; right: 0; bottom: 0; max-height: 78vh; display: flex; flex-direction: column;
         border-radius: var(--raio) var(--raio) 0 0; transform: translateY(105%); visibility: hidden;
         transition: transform .25s ease, visibility 0s linear .25s; padding-bottom: env(safe-area-inset-bottom); }
#folha.aberta { transform: none; visibility: visible; transition: transform .25s ease; }
.folha-alca { width: 38px; height: 4px; border-radius: 2px; background: var(--linha); margin: 8px auto 0; flex: none; }
.folha-topo { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 18px; flex: none; }
.folha-topo h2 { font-size: 1.05rem; font-weight: 600; margin: 0; flex: 1; min-width: 0; }
.btn-fechar { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--fundo-2); color: var(--texto-2);
              display: flex; align-items: center; justify-content: center; flex: none; }
.btn-fechar:hover { background: var(--hover); color: var(--texto); }
.folha-corpo { overflow-y: auto; padding: 0 18px 18px; }
.vista[hidden] { display: none !important; }

@media (min-width: 768px) {
  #folha { left: var(--margem); right: auto; top: calc(var(--topo) + var(--margem)); bottom: auto; width: 370px;
           max-height: calc(100% - var(--topo) - 2 * var(--margem) - 84px); border-radius: var(--raio);
           transform: translateX(calc(-100% - 2 * var(--margem))); }
  .folha-alca { display: none; }
  .folha-topo { padding-top: 14px; }
}

/* Detalhe da ocorrência */
.det-cabecalho { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.det-cabecalho .icone-oc { width: 44px; height: 44px; font-size: 20px; flex: none; box-shadow: none; border: 0; }
.det-tipo { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.det-meta { color: var(--texto-2); font-size: .8rem; }
.det-quando, .det-autor { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin-bottom: 12px; }
.det-quando i, .det-autor i { color: var(--verde); }
.det-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.det-fotos:empty { display: none; }
.det-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; background: var(--fundo-2); }
.det-obs { white-space: pre-wrap; font-size: .9rem; background: var(--fundo-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.acoes { display: flex; border-top: 1px solid var(--linha); padding-top: 10px; gap: 4px; }
.acoes[hidden] { display: none; }
.btn-acao { flex: 1; border: 0; background: none; border-radius: 12px; padding: 8px 4px; color: var(--verde);
            display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .78rem; font-weight: 500; }
.btn-acao i { font-size: 20px; }
.btn-acao:hover { background: var(--verde-claro); }
.btn-acao.perigo { color: var(--perigo); }
.btn-acao.perigo:hover { background: var(--perigo-claro); }

/* Formulários */
.info-geom { display: inline-flex; align-items: center; gap: 6px; background: var(--verde-claro); color: var(--verde);
             font-size: .78rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.form-label { font-size: .82rem; font-weight: 500; color: var(--texto-2); margin-bottom: 4px; }
.form-control, .form-select { border-radius: 12px; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--verde); box-shadow: 0 0 0 .2rem rgba(31,139,76,.25); }
:root[data-tema="externo"] .form-control, :root[data-tema="externo"] .form-select { border-color: #6b6b6b; background-color: #111; }
.btn-verde { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); border-radius: 12px; font-weight: 500; padding: .6rem 1rem; }
.btn-verde:hover, .btn-verde:focus { background: var(--verde-hover); border-color: var(--verde-hover); color: var(--sobre-verde); }
.btn-cinza { background: var(--fundo-2); border: 0; color: var(--texto); border-radius: 12px; font-weight: 500; padding: .6rem 1rem; }
.btn-cinza:hover { background: var(--hover); color: var(--texto); }
.form-check-input:checked { background-color: var(--verde); border-color: var(--verde); }

/* Fotos no formulário */
.fotos-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.foto-slot { position: relative; aspect-ratio: 4 / 3; }
.foto-vazia { width: 100%; height: 100%; border: 2px dashed var(--linha); border-radius: 12px; display: flex; overflow: hidden; }
.foto-opcao { flex: 1; margin: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
              color: var(--texto-2); font-size: .78rem; font-weight: 500; text-align: center; }
.foto-opcao + .foto-opcao { border-left: 1px dashed var(--linha); }
.foto-opcao i { font-size: 22px; color: var(--verde); }
.foto-opcao:hover { background: var(--verde-claro); color: var(--texto); }
.foto-opcao:focus-within { outline: 3px solid rgba(31,139,76,.45); outline-offset: -3px; border-radius: 10px; }
/* Câmera só onde há tela de toque (celular/tablet); no computador, um botão "Adicionar foto" */
.so-toque { display: none !important; }
@media (pointer: coarse) {
  .so-toque { display: flex !important; }
  span.so-toque { display: inline !important; }
  .so-mouse { display: none !important; }
}
.foto-cheia { width: 100%; height: 100%; }
.foto-cheia img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.foto-remover { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%;
                background: rgba(0,0,0,.65); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.foto-slot.carregando .foto-vazia { opacity: .5; pointer-events: none; }
.foto-vazia[hidden], .foto-cheia[hidden] { display: none; }

/* ---------- Legenda: filtro por tipo, agrupado em blocos ---------- */
.leg-secao { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 500; text-transform: uppercase;
             letter-spacing: .04em; color: var(--texto-2); margin: 4px 0 8px; }
.leg-secao .btn-link { margin-left: auto; font-size: .78rem; text-transform: none; letter-spacing: 0; color: var(--verde);
                       padding: 0; text-decoration: none; font-weight: 500; }
.leg-bloco { border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.leg-bloco-topo { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 0; background: var(--fundo-2); }
.leg-bloco-botao { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 6px 11px 12px; border: 0;
                   background: none; color: var(--texto); font-weight: 600; font-size: .86rem; text-align: left; }
.leg-bloco-botao:hover .leg-bloco-nome { color: var(--verde); }
.leg-bloco-botao:focus-visible { outline: 3px solid rgba(31,139,76,.55); outline-offset: -3px; border-radius: 12px; }
.leg-seta { flex: none; font-size: .8rem; color: var(--texto-2); transition: transform .2s; }
.leg-bloco-botao[aria-expanded="true"] .leg-seta { transform: rotate(90deg); }
.leg-bloco-nome { flex: 1; min-width: 0; }
.leg-bloco-conta { flex: none; font-size: .72rem; font-weight: 500; color: var(--texto-2); background: var(--superficie);
                   border: 1px solid var(--linha); border-radius: 999px; padding: 1px 8px; }
.leg-bloco-conta.parcial { color: #9a5b00; border-color: rgba(255,152,0,.45); background: rgba(255,152,0,.1); }
:root[data-tema="externo"] .leg-bloco-conta.parcial { color: #ffb74d; }
.leg-tipos[hidden] { display: none; }
.form-switch .form-check-input:indeterminate { background-color: rgba(31,139,76,.45); border-color: var(--verde); }
@media (prefers-reduced-motion: reduce) { .leg-seta { transition: none; } }
.leg-tipos { list-style: none; padding: 2px 12px; margin: 0; }
.leg-tipos li + li { border-top: 1px solid var(--linha); }
.leg-tipo { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: .9rem; margin: 0; cursor: pointer; }
.leg-tipo.desligado { color: var(--texto-2); }
.leg-tipo.desligado .icone-oc { opacity: .35; }
.leg-tipo .icone-oc { width: 28px; height: 28px; font-size: 14px; box-shadow: none; border: 0; flex: none; }
.form-switch .form-check-input, .leg-bloco .form-check-input { margin: 0 0 0 auto; width: 2.4em; height: 1.3em; cursor: pointer; flex: none; float: none; }
.leg-lista { list-style: none; padding: 0; margin: 0 0 6px; font-size: .9rem; }
.leg-lista li { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.leg-linha { width: 26px; height: 3px; border-radius: 2px; flex: none; margin: 0 1px; }
.leg-nota { font-size: .76rem; color: var(--texto-2); margin: 0 0 4px; }

/* Camadas */
.bases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.base { border: 2px solid var(--linha); border-radius: 14px; background: none; padding: 0 0 8px; overflow: hidden;
        font-size: .82rem; font-weight: 500; color: var(--texto); }
.base .miniatura { height: 64px; margin-bottom: 6px; background-size: cover; background-position: center; }
.base.ativo { border-color: var(--verde); color: var(--verde); }
.camada-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: .9rem; margin: 0; }
.camada-item:last-child { border-bottom: 0; }

/* Ícones das ocorrências no mapa */
.icone-oc { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
            border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45);
            font-size: 13px; line-height: 1; }
.marcador-oc { cursor: pointer; }

/* Mapa no tema externo: base invertida e atribuição legível */
:root[data-tema="externo"] .base-osm { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(1.15) saturate(.7); }
:root[data-tema="externo"] .leaflet-container { background: #000; }
:root[data-tema="externo"] .leaflet-control-attribution,
:root[data-tema="externo"] .maplibregl-ctrl-attrib { background: rgba(0,0,0,.75) !important; color: #ddd; }
:root[data-tema="externo"] .leaflet-control-attribution a,
:root[data-tema="externo"] .maplibregl-ctrl-attrib a { color: var(--verde); }
:root[data-tema="externo"] .icone-oc { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 1px 6px rgba(0,0,0,.8); }

/* Avisos */
#avisos { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom));
          z-index: 1300; width: max-content; max-width: calc(100% - 2 * var(--margem)); }
#aviso { border-radius: 12px; }

/* ---------- Páginas de conteúdo (Sobre, login, conta, administração) ---------- */
html.pagina, body.pagina { overflow: auto; height: auto; min-height: 100%; }
body.pagina { padding-top: var(--topo); }
.conteudo { max-width: 760px; margin: 20px auto 48px; padding: 0 var(--margem); }
.conteudo.largo { max-width: 1100px; }
.conteudo.estreito { max-width: 440px; }
.conteudo .cartao { padding: 22px 24px; margin-bottom: 14px; }
.conteudo h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: .5rem; }
.conteudo h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .75rem; }
.conteudo p, .conteudo li { font-size: .95rem; line-height: 1.6; }
.conteudo p:last-child, .conteudo ul:last-child, .conteudo ol:last-child { margin-bottom: 0; }
.conteudo .cartao > :last-child { margin-bottom: 0; }
@media (max-width: 575.98px) { .conteudo .cartao { padding: 18px 16px; } }

.tipos-bloco + .tipos-bloco { margin-top: 14px; }
.tipos-bloco h3 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); margin-bottom: 8px; }
.tipos-sobre { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.tipos-sobre li { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.tipos-sobre .icone-oc { width: 28px; height: 28px; font-size: 14px; box-shadow: none; border: 0; flex: none; }

.perfis { width: 100%; font-size: .9rem; }
.perfis th, .perfis td { padding: 8px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.perfis th { white-space: nowrap; font-weight: 600; }

/* Patrocinadores */
.abertura-patrocinio { text-align: center; padding-top: 28px !important; }
.abertura-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
                  background: var(--verde-claro); color: var(--verde); font-size: 26px; margin-bottom: 10px; }
.abertura-patrocinio p { max-width: 560px; margin: 0 auto; color: var(--texto-2); }
.patrocinio + .patrocinio { margin-top: 22px; }
.conteudo .patrocinio-titulo { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; text-transform: uppercase;
                  letter-spacing: .05em; color: var(--texto-2); margin-bottom: 12px; font-family: 'Roboto', system-ui, sans-serif; }
.medalha { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.medalha.ouro { background: #d4af37; } .medalha.prata { background: #a8a9ad; } .medalha.bronze { background: #b0703c; }
.logos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.logos.ouro { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.logos.prata { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.logos.bronze { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
.logos li { display: flex; }
.logo-patrocinador { flex: 1; border: 1px solid var(--linha); border-radius: 14px; padding: 14px 12px 10px; background: #fff;
                     display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
                     text-align: center; color: #333; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.logo-patrocinador img { width: 100%; object-fit: contain; }
.logos.ouro img { height: 110px; } .logos.prata img { height: 80px; } .logos.bronze img { height: 56px; }
.logo-nome { font-size: .8rem; font-weight: 500; line-height: 1.3; }
.logo-nome .bi { font-size: .7rem; color: #1f8b4c; }
a.logo-patrocinador:hover { border-color: #1f8b4c; box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); color: #333; }
a.logo-patrocinador:focus-visible { outline: 3px solid rgba(31,139,76,.55); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.logo-patrocinador:hover { transform: none; } }
@media (max-width: 575.98px) {
  .logos.ouro { grid-template-columns: 1fr; }
  .logos.prata { grid-template-columns: repeat(2, 1fr); }
  .logos.bronze { grid-template-columns: repeat(3, 1fr); }
  .logos.bronze .logo-nome { font-size: .7rem; }
}
.credito { text-align: center; font-size: .85rem; color: var(--texto-2); }

/* Administração */
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.abas a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--texto); font-weight: 500; font-size: .9rem; background: var(--superficie); box-shadow: var(--sombra); }
.abas a[aria-current="page"] { background: var(--verde); color: var(--sobre-verde); }
.tabela-admin { font-size: .88rem; margin-bottom: 0; --bs-table-bg: transparent; }
.tabela-admin th { font-weight: 600; white-space: nowrap; color: var(--texto-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.tabela-admin td { vertical-align: middle; }
.tabela-admin form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.tabela-admin .form-select, .tabela-admin .form-control { padding: .3rem .6rem; font-size: .85rem; border-radius: 10px; width: auto; }
.btn-mini { padding: .3rem .7rem; font-size: .82rem; border-radius: 10px; }
.miniatura-logo { width: 72px; height: 40px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--linha); }
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 500; background: var(--fundo-2); }
.etiqueta.ativo { background: var(--verde-claro); color: var(--verde); }
.etiqueta.pendente { background: #fff3cd; color: #7a5b00; }
.etiqueta.bloqueado, .etiqueta.recusado { background: var(--perigo-claro); color: var(--perigo); }

/* Revisor de registros (administração) */
.filtros-revisor { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: end; }
.filtros-revisor .filtro-busca, .filtros-revisor .filtro-botoes { grid-column: 1 / -1; }
.filtro-botoes { display: flex; gap: 8px; }
@media (min-width: 992px) {
  .filtros-revisor { grid-template-columns: 1.3fr 1fr 1fr 1.6fr auto; }
  .filtros-revisor .filtro-busca, .filtros-revisor .filtro-botoes { grid-column: auto; }
}
.lista-registros { list-style: none; padding: 0; margin: 0; }
.lista-registros li + li { border-top: 1px solid var(--linha); }
.lista-registros a { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; color: var(--texto); text-decoration: none; }
.lista-registros a:hover { background: var(--hover); }
.lista-registros .icone-oc { width: 36px; height: 36px; font-size: 17px; border: 0; box-shadow: none; flex: none; }
.lr-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.lr-texto strong { font-weight: 500; }
.lr-texto small { color: var(--texto-2); font-size: .8rem; }
.lr-obs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: .88rem; }
.revisor-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.revisor-pos { margin-right: auto; font-size: .88rem; color: var(--texto-2); padding-left: 6px; }
.revisor { display: grid; gap: 14px; }
@media (min-width: 992px) { .revisor { grid-template-columns: 1fr 1fr; align-items: start; } }
.revisor .cartao { margin-bottom: 0; }
.mapa-revisor { position: relative; margin-bottom: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--linha); }
.mini-mapa { height: 300px; background: var(--fundo-2); }
.mapa-ferramentas { display: flex; gap: 6px; padding: 8px; background: var(--superficie); border-top: 1px solid var(--linha); }
.btn-mapa { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto);
            border-radius: 999px; padding: 6px 12px; font-size: .84rem; font-weight: 500; }
.btn-mapa:hover { background: var(--hover); }
.btn-mapa[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); }
.btn-mapa:focus-visible { outline: 3px solid rgba(31,139,76,.55); outline-offset: 2px; }
.btn-mapa[hidden] { display: none; }
.mapa-dica { padding: 8px 12px; font-size: .82rem; background: var(--verde-claro); color: var(--texto); border-top: 1px solid var(--linha); }
.mapa-revisor.editando .mini-mapa { cursor: crosshair; }
/* Mapa ampliado: ocupa a tela toda */
.mapa-revisor.ampliado { position: fixed; inset: 0; z-index: 1500; border: 0; border-radius: 0; margin: 0;
                         display: flex; flex-direction: column; background: var(--superficie); }
.mapa-revisor.ampliado .mini-mapa { flex: 1; height: auto; }
.mapa-revisor.ampliado .mapa-ferramentas { order: -1; border-top: 0; border-bottom: 1px solid var(--linha);
                                           padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
body.mapa-ampliado { overflow: hidden !important; }
@media (max-width: 400px) { .btn-mapa span { display: none; } .btn-mapa { padding: 7px 10px; } }
.revisor-dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .88rem; margin: 0; }
.revisor-dados dt { font-weight: 500; color: var(--texto-2); }
.revisor-dados dd { margin: 0; overflow-wrap: anywhere; }
.revisor-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.revisor-fotos figure { margin: 0; }
.revisor-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.revisor-fotos figcaption { margin-top: 6px; font-size: .85rem; }

/* Tipos de ocorrência (administração) */
.grupo-tipos + .grupo-tipos { margin-top: 16px; }
.grupo-tipos-titulo { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2);
                      margin: 0 0 6px; font-family: 'Roboto', system-ui, sans-serif; display: flex; align-items: center; gap: 8px; }
.lista-tipos { list-style: none; padding: 0; margin: 0; }
.lista-tipos li { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.lista-tipos li.inativo .icone-oc, .lista-tipos li.inativo .lt-texto { opacity: .5; }
.lista-tipos form { margin: 0; }
.lista-tipos .icone-oc, .previa-tipo .icone-oc { width: 32px; height: 32px; font-size: 15px; flex: none; border: 0; box-shadow: none; }
.lt-texto { flex: 1; min-width: 160px; display: flex; flex-direction: column; line-height: 1.3; }
.lt-texto small { color: var(--texto-2); font-size: .78rem; }
.previa-tipo { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 12px; font-size: .9rem; }
.previa-tipo .icone-oc { width: 36px; height: 36px; font-size: 17px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.grade-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; max-height: 236px; overflow-y: auto;
                padding: 8px; border: 1px solid var(--linha); border-radius: 12px; }
.op-icone { margin: 0; cursor: pointer; }
.op-icone input { position: absolute; opacity: 0; pointer-events: none; }
.op-icone i, .op-icone .op-desenho { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 10px;
                                     font-size: 19px; color: var(--texto); border: 1px solid transparent; }
.op-icone:hover i, .op-icone:hover .op-desenho { background: var(--hover); }
.op-icone input:checked + i, .op-icone input:checked + .op-desenho { background: var(--verde-claro); border-color: var(--verde); color: var(--verde); }
.op-icone input:focus-visible + i, .op-icone input:focus-visible + .op-desenho { outline: 3px solid rgba(31,139,76,.55); outline-offset: 1px; }