/* Estilo base do COORDENA DF — simples, sem framework, claro. */
/* Paleta territorial (2026-11-10): a mesma da home vale para o site público e
   o painel. Os tokens "antigos" (`--azul-escuro`, `--verde`...) continuam
   existindo porque há muito componente legado que os usa; os `--cor-*` são a
   camada do painel. Os dois grupos apontam para a MESMA paleta agora — antes a
   pública era azul e o painel navy, e a divergência não tinha mais razão. */
:root {
  --azul-escuro: #0E3B2E;
  --azul: #2F6B5A;
  /* Verde de ação: branco sobre ele fica em ~5,4:1 (AA). */
  --verde: #1f7a43;
  --vermelho: #b42318;
  --fundo: #FBF7EF;
  --fonte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cor-tinta: #1C2A24;
  --cor-muda: #5E6B62;
  --cor-navy: #0E3B2E;
  --cor-lateral: #0A2C22;
  --cor-primaria: #1F7A43;
  --cor-info: #2F6B5A;
  --cor-perigo: #B42318;
  --cor-fundo: #FBF7EF;
  --cor-superficie: #FFFFFF;
  --cor-borda: #E6DFD2;
  --cor-borda-forte: #D8CFBE;
  --cor-ativa: #DFA23B;
  --cor-texto-lateral: #C6D4C9;
}

/* Auto-hospedada: sem requisição a terceiros (privacidade e disponibilidade).
   É a subset latina variável — os pesos 400 a 700 saem do mesmo arquivo.
   `swap`: com a fonte ainda carregando, o texto aparece na do sistema. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-latin.b2c9031d9fd6.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

/* O `hidden` do HTML vira `display: none` no user agent, mas QUALQUER `display`
   de autor vence esse valor. Sem esta regra, `.botao` e `.promocao-linha`
   (que declaram `display`) reaparecem mesmo com `hidden` — foi assim que
   "Cancelar edição" e o campo Lotação ficaram sempre à mostra. `!important`
   é deliberado: é a rede que nenhuma classe pode furar. */
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--cor-tinta);
  line-height: 1.55;
}

/* A fonte própria vale SÓ no painel; as páginas públicas seguem na do sistema. */
.painel-pagina {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-tinta);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* O painel precisa de mais largura que as páginas de leitura: menu lateral mais
   quatro colunas de dados. O body recebe `.painel-pagina`; a regra alcança
   cabeçalho, main e rodapé, para o alinhamento não sair do lugar. */
/* Link de salto para quem navega por teclado. Fica fora da tela até receber
   foco, e aí aparece sobre o cabeçalho. */
.pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: #fff;
  color: var(--azul-escuro);
  border-radius: 0 0 6px 0;
  font-weight: 600;
}
.pular-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.cabecalho {
  background: var(--azul-escuro);
  color: #fff;
  padding: 14px 0;
}
.cabecalho .container { display: flex; justify-content: space-between; align-items: center; }
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: .5px; }
.marca span { color: #DFA23B; }
.cabecalho nav a { color: #D9E5DC; text-decoration: none; margin-left: 16px; }

main.container { flex: 1; padding-top: 32px; padding-bottom: 48px; }

.hero { padding: 24px 0 8px; }
.hero h1 { font-size: 1.9rem; line-height: 1.25; color: var(--azul-escuro); }
.leads { font-size: 1.05rem; }
.botoes, .acoes { margin-top: 20px; }

.botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  background: #F2EDE2;
  color: var(--azul-escuro);
}
.botao.principal { background: var(--verde); color: #fff; }
/* Ação destrutiva/atenção — o vermelho é o mesmo de `.erro`, de propósito:
   nesta interface essa cor já significa "cuidado", e um segundo tom só criaria
   dúvida. Não é usado em "Sair": sair não destrói nada e não deve ser o
   elemento mais saturado da tela. */
.botao.perigo { background: var(--vermelho); color: #fff; }

/* Ícone de botão: o <svg> cita um símbolo do sprite (base.html) e herda a cor
   do texto via `currentColor` (o branco do principal, o do perigo, o escuro do
   neutro), sem CSS por variante. Tamanho em `em` para acompanhar a fonte —
   inclusive nos botões `.pequeno`. `fill:none`: o desenho já vem do sprite, que
   é de traço (exceto play/pausa, preenchidos, que sobrescrevem no próprio
   símbolo). */
.botao .icone {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
}

.blocos { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 700px) { .blocos { grid-template-columns: repeat(3, 1fr); } }
.blocos article {
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 18px;
}
.blocos h2 { margin-top: 0; font-size: 1.1rem; color: var(--azul-escuro); }

.form-central { max-width: 420px; margin: 24px auto; background: #fff; border: 1px solid #E6DFD2; border-radius: 8px; padding: 26px; }
.form-central h1 { margin-top: 0; font-size: 1.35rem; color: var(--azul-escuro); }
.formulario label { display: block; margin-bottom: 14px; font-weight: 600; }
.formulario input,
.formulario select {
  width: 100%;
  padding: 9px 10px;
  font-size: 1rem;
  border: 1px solid #D8CFBE;
  border-radius: 6px;
  margin-top: 4px;
  background: #fff;
}
.formulario small { display: block; font-weight: 400; color: #5E6B62; margin-top: 4px; }
.formulario .termo { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.formulario .termo input { width: auto; margin: 3px 0 0; }

.erro { color: #b42318; font-weight: 600; }
.erros-bloco .erro { margin: 0 0 6px; }
.erros-bloco { margin-bottom: 12px; }

.consentimento-texto {
  border: 1px solid #E6DFD2;
  border-radius: 6px;
  background: #F2EDE2;
  padding: 14px 16px;
  font-size: .9rem;
  line-height: 1.5;
  color: #1C2A24;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 10px;
}
/* A caixa rola: precisa ser focável para quem usa teclado (setas/PgUp).
   O `tabindex="0"` e o `role="region"` estão no template. */
.consentimento-texto:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.consentimento-politica { margin: 0 0 18px; font-size: .9rem; }

.rodape {
  border-top: 1px solid #E6DFD2;
  padding: 18px 0;
  font-size: .9rem;
  color: #5E6B62;
}

/* --- Vitrine pública do mandato -------------------------------------------- */
/* A página do mandato é PÚBLICA: nada aqui é escopado em `.painel-pagina` (que
   é o body do painel). O casca, o `.container` e o `.hero` são do site; estas
   regras são só do conteúdo da vitrine, e o painel não as usa — lá o bloco de
   números reaproveita os componentes de `.painel-pagina .indicadores`. */
.mandato-hero { padding: 24px 0 8px; }
.mandato-hero h1 { margin: 0 0 6px; font-size: 1.9rem; line-height: 1.25; color: var(--azul-escuro); }
.mandato-hero p { margin: 0; color: #1C2A24; }

.mandato-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 26px;
}
@media (min-width: 700px) {
  .mandato-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mandato-numeros .indicador {
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 12px 14px;
}
.mandato-numeros .indicador-rotulo { display: block; font-size: .78rem; color: #5E6B62; }
.mandato-numeros .indicador-valor {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--azul-escuro);
}

.mandato-hero .leads { margin: 0 0 10px; }
/* Largura de leitura: uma linha longa através de 960 px cansa, e a descrição é
   o único bloco corrido da página (o resto é grade ou tabela). */
.mandato-texto { max-width: 70ch; }
.mandato-hero .mandato-texto p { margin: 0 0 8px; }

.mandato-secao { margin: 0 0 30px; }
.mandato-secao h2 { margin: 0 0 12px; font-size: 1.25rem; color: var(--azul-escuro); }
.mandato-vazio { color: #5E6B62; }

.mandato-locais { margin: 0 0 26px; }
/* A tabela da vitrine é só leitura: o `cursor: pointer` e o realce de linha
   vêm do `.tabela` do painel, onde a linha abre o detalhe. O `table.` no
   seletor não é enfeite: `.tabela tbody tr` (0,1,2) vem DEPOIS neste arquivo e
   empataria em especificidade, deixando o cursor de clique na página pública. */
table.mandato-locais tbody tr { cursor: default; }
table.mandato-locais tbody tr:hover { background: transparent; }

.mandato-acoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .mandato-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mandato-acao {
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 16px 18px;
}
.mandato-acao h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--azul-escuro); }
.mandato-acao p { margin: 0 0 8px; }
.mandato-acao-data { font-size: .82rem; font-weight: 600; color: #5E6B62; }
.mandato-acao-local { font-size: .9rem; color: #1C2A24; }

.mandato-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mandato-agenda li {
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 12px 14px;
}
/* Data antes do título, e o local embaixo: a leitura é cronológica, não uma
   frase corrida — nada de `text-transform`, que em pt-BR transformaria todo o
   rótulo ("outubro de 2026" vira "Outubro De 2026"). */
.mandato-agenda-data { display: block; font-size: .82rem; font-weight: 600; color: #5E6B62; }
.mandato-agenda-titulo { display: block; color: var(--azul-escuro); }
.mandato-agenda-local { display: block; font-size: .9rem; color: #1C2A24; }

/* --- Painel: casca de aplicação -------------------------------------------- */
/* Troca o modelo de "site" pelo de sistema: topo fixo de ponta a ponta, lateral
   navy encostada à borda esquerda e conteúdo fluido. Tudo aqui é escopado em
   `.painel-pagina` (o `body` do painel) — as páginas públicas seguem com o CSS
   delas, sem herdar nada disto. */

.painel-pagina .painel-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.painel-pagina .painel-topo-marca { display: flex; align-items: center; gap: 10px; }
.painel-pagina .marca-painel {
  color: var(--cor-navy);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
}
.painel-pagina .marca-painel span { color: var(--cor-primaria); }

.painel-pagina .painel-topo-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 100%;
  height: 36px;
  justify-self: center;
  padding: 0 10px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  background: var(--cor-fundo);
  color: var(--cor-muda);
}
/* O ícone dentro da busca não é botão: sem tamanho explícito o SVG cai no
   padrão do navegador (300×150) e vaza por cima do cabeçalho. */
.painel-pagina .painel-topo-busca .icone { width: 16px; height: 16px; flex: none; fill: none; }
.painel-pagina .busca-global {
  width: 100%;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--cor-tinta);
  font: inherit;
  font-size: 14px;
}
/* Inerte de propósito, e sem o cinza do `disabled`: a mensagem é o texto "em
   breve", no rótulo — não a aparência de campo quebrado. */
.painel-pagina .busca-global:disabled { opacity: 1; color: var(--cor-muda); }

.painel-pagina .painel-topo-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.painel-pagina .painel-identidade-texto { font-size: 13.5px; color: var(--cor-muda); }

.painel-pagina .botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  background: var(--cor-superficie);
  color: var(--cor-muda);
  cursor: pointer;
}
.painel-pagina .botao-icone:disabled { cursor: default; }
.painel-pagina .botao-icone:disabled:hover { background: var(--cor-superficie); }
.painel-pagina .botao-icone .icone { width: 16px; height: 16px; }
.painel-pagina .botao-icone-celular { display: none; }

.painel-pagina .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: #F2EDE2;
  color: var(--cor-navy);
  font-size: 11px;
  font-weight: 600;
}

/* Lateral: `left: 0` é o pedido — encostada na borda, sem o padding que o
   `.container` antigo impunha. `bottom: 0` leva a coluna até o fim da janela. */
.painel-pagina .painel-menu {
  position: fixed;
  left: 0;
  top: 64px;
  bottom: 0;
  width: 236px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 10px 20px;
  background: var(--cor-lateral);
  color: var(--cor-texto-lateral);
}

/* `display` só nos grupos VISÍVEIS: um `display` de autor venceria o `[hidden]`
   do user agent e um grupo sem itens apareceria com título e nada dentro. */
.painel-pagina .menu-grupo:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}
.painel-pagina .menu-grupo-titulo {
  margin: 0 0 4px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #7D93A9;
}

.painel-pagina .menu-item:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--cor-texto-lateral);
  font-size: 14px;
  text-decoration: none;
}
.painel-pagina .menu-item .icone { width: 17px; height: 17px; flex: none; fill: none; }
.painel-pagina .menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.painel-pagina .menu-item.ativo {
  background: rgba(255,255,255,.09);
  box-shadow: inset 3px 0 0 var(--cor-ativa);
  color: #fff;
  font-weight: 600;
}
.painel-pagina .menu-item:focus-visible { outline: 2px solid var(--cor-ativa); outline-offset: -2px; }

.painel-pagina .painel-menu-rodape {
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.painel-pagina .painel-menu-rodape a { color: var(--cor-texto-lateral); font-size: 12px; }

/* `min-width: 0` impede a tabela larga de esticar o bloco e criar rolagem
   horizontal na página. */
.painel-pagina .painel-main {
  margin-left: 236px;
  min-height: calc(100vh - 64px);
  padding: 24px;
  background: var(--cor-fundo);
}
.painel-pagina .painel-conteudo { min-width: 0; }

.painel-pagina .painel-cabecalho-pagina {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.painel-pagina #titulo-secao { margin: 0; font-size: 21px; font-weight: 600; color: var(--cor-navy); }
.painel-pagina .subtitulo-secao { margin: 2px 0 0; font-size: 13.5px; color: var(--cor-muda); }
/* Sem `display`: o slot nasce `hidden` e é revelado por `atualizarAcaoDaSecao`. */
.painel-pagina .acao-secao { flex: none; }

/* O hambúrguer só tem função em tela estreita; no desktop a lateral está à vista. */
.painel-pagina .botao-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  background: var(--cor-superficie);
  color: var(--cor-navy);
  cursor: pointer;
}
.painel-pagina .botao-menu .icone { width: 18px; height: 18px; fill: none; }

/* --- Painel: componentes compartilhados ------------------------------------ */

.painel-pagina .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.painel-pagina .botao.principal { background: var(--cor-primaria); color: #fff; }
.painel-pagina .botao.secundario {
  background: var(--cor-superficie);
  border-color: var(--cor-borda-forte);
  color: var(--cor-tinta);
}
.painel-pagina .botao.perigo { background: var(--cor-perigo); color: #fff; }
.painel-pagina .botao:focus-visible { outline: 2px solid var(--cor-info); outline-offset: 2px; }
.painel-pagina .botao .icone { width: 15px; height: 15px; flex: none; fill: none; }

.painel-pagina .formulario label { font-size: 13.5px; font-weight: 600; }
.painel-pagina .formulario input,
.painel-pagina .formulario select {
  height: 38px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}
.painel-pagina .formulario textarea {
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}
.painel-pagina .formulario input:focus-visible,
.painel-pagina .formulario select:focus-visible,
.painel-pagina .formulario textarea:focus-visible {
  outline: 2px solid var(--cor-info);
  outline-offset: 1px;
}

.painel-pagina .detalhe {
  margin-top: 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 20px;
}
.painel-pagina .detalhe-topo h2 { font-size: 17px; color: var(--cor-navy); }

.painel-pagina .indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.painel-pagina .indicador {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 12px 14px;
}
.painel-pagina .indicador-rotulo { font-size: 12px; color: var(--cor-muda); }
.painel-pagina .indicador-valor { font-size: 22px; font-weight: 600; color: var(--cor-tinta); }
/* Três cartões, três colunas: a quarta ficaria vazia e a faixa pareceria
   quebrada (Contatos é a única seção com quatro indicadores). */
.painel-pagina #indicadores-aniversariantes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Seis números em duas fileiras de três — a malha de quatro colunas deixaria
   dois órfãos na segunda linha. Só a malha: `display` aqui venceria o `[hidden]`
   de `#mandato-resumo`, e a regra global `[hidden]` é a rede, não a licença. */
.painel-pagina #mandato-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.painel-pagina .filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.painel-pagina .filtros label { font-size: 13px; font-weight: 600; }
/* Rótulo em cima do campo: a linha de filtros fica com a mesma altura da
   tabela densa, sem o campo empurrar o texto para o lado. */
.painel-pagina .filtros .campo-filtro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--cor-tinta);
}
.painel-pagina .filtros .campo-busca,
.painel-pagina .filtros select {
  height: 36px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--cor-tinta);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
}
/* O `.campo-filtro` é coluna, então o eixo principal é VERTICAL: um
   `flex: 1 1 260px` vira altura de 260px no campo (foi o que aconteceu com
   a busca). Largura vem de `width`, e `flex: none` impede o alongamento. */
.painel-pagina .filtros .campo-filtro .campo-busca { flex: none; width: 260px; max-width: 100%; min-width: 0; }
.painel-pagina .filtros select { min-width: 150px; }
.painel-pagina .filtros .contagem { margin-left: auto; }

.painel-pagina .tabela { font-size: 13.5px; }
.painel-pagina .tabela th {
  padding: 8px 12px;
  background: #F2EDE2;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cor-muda);
}
.painel-pagina .tabela td { padding: 10px 12px; border-bottom: 1px solid var(--cor-borda); }
.painel-pagina .tabela tbody tr { height: 44px; }
.painel-pagina .tabela tbody tr:hover { background: #FBF7EF; }
.painel-pagina .celula-nome { display: flex; align-items: center; gap: 8px; }
.painel-pagina .celula-nome .avatar { flex: none; }

/* O texto diz o estado — a cor só reforça (nada comunicado só por cor). */
.painel-pagina .situacao-email { font-size: 12px; font-weight: 600; }
.painel-pagina .situacao-email.confirmado { color: var(--cor-primaria); }
.painel-pagina .situacao-email.pendente { color: #9A6A00; }
.painel-pagina .situacao-email.sem-acesso { color: var(--cor-muda); }

.painel-pagina .modal { background: rgba(11,42,74,.45); }
.painel-pagina .modal-caixa {
  border-radius: 10px;
  border-color: var(--cor-borda);
  box-shadow: 0 18px 40px rgba(11,42,74,.22);
}

@media (max-width: 819.98px) {
  .painel-pagina .painel-topo { height: 56px; padding: 0 16px; gap: 10px; }
  .painel-pagina .botao-menu { display: inline-flex; }
  .painel-pagina .painel-topo-busca { display: none; }
  .painel-pagina .botao-icone-celular { display: inline-flex; }
  .painel-pagina .painel-identidade-texto { display: none; }
  /* A lateral vira gaveta: sai pela esquerda por `transform` e só então fica
     invisível (o atraso na `visibility` é o que permite ver o fechamento). */
  .painel-pagina .painel-menu {
    top: 56px;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .painel-pagina .painel-menu.aberto {
    transform: none;
    visibility: visible;
    transition: transform .2s ease, visibility 0s;
  }
  .painel-pagina .painel-menu-fundo:not([hidden]) {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 19;
    background: rgba(11,42,74,.45);
  }
  .painel-pagina.menu-aberto { overflow: hidden; }
  .painel-pagina .painel-main { margin-left: 0; padding: 16px; }
  .painel-pagina .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .painel-pagina #titulo-secao { font-size: 19px; }
  .painel-pagina .filtros { flex-direction: column; align-items: stretch; }
  .painel-pagina .filtros .campo-filtro .campo-busca { width: 100%; }
  .painel-pagina .filtros .contagem { margin-left: 0; }
  .painel-pagina .cadastro-manual .formulario { grid-template-columns: 1fr; }
  .painel-pagina .perfil .formulario { grid-template-columns: 1fr; }
  /* O id vence a regra de 2 colunas do breakpoint: no celular, três cartões
     lado a lado não cabem. */
  .painel-pagina #indicadores-aniversariantes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-pagina #mandato-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .painel-pagina .painel-menu,
  .painel-pagina .painel-menu.aberto { transition: none; }
}

.aviso {
  background: #fff8e6;
  border: 1px solid #f0d79a;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 18px;
  color: #7a5b12;
}

.barra-lista {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.campo-busca-rotulo { font-weight: 600; font-size: .9rem; }
.campo-busca {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 10px;
  font-size: 1rem;
  border: 1px solid #D8CFBE;
  border-radius: 6px;
  background: #fff;
}
.contagem { font-size: .88rem; color: #5E6B62; white-space: nowrap; }

/* Navegação da lista paginada. Nasce `hidden`; o `:not([hidden])` é a segunda
   rede depois da regra global, para um `display` de autor não vencer o
   atributo. No celular os dois botões dividem a largura. */
.paginacao:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}
.paginacao-info { font-size: .88rem; color: #5E6B62; white-space: nowrap; }
@media (max-width: 640px) {
  .paginacao:not([hidden]) { justify-content: space-between; }
  .paginacao .botao { justify-content: center; }
}

.tabela-envolucro {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
}
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th,
.tabela td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid #F2EDE2;
}
/* Só o CABEÇALHO fica em uma linha; valores longos (nome, moradia) quebram em
   vez de empurrar a tabela para a rolagem lateral — que no celular escondia a
   coluna Votação sem nenhum sinal de que havia mais conteúdo. */
.tabela th { white-space: nowrap; }
.tabela td { vertical-align: top; }
.celula-valor { overflow-wrap: anywhere; }
.tabela th {
  background: #F2EDE2;
  color: #5E6B62;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: #FBF7EF; }
.tabela tbody tr:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* No celular a tabela vira uma pilha de cartões: cada linha traz o rótulo da
   coluna (via `data-rotulo`) ao lado do valor. A alternativa — rolagem lateral
   — escondia Votação fora da tela e não dizia que havia mais conteúdo. */
@media (max-width: 640px) {
  .tabela-envolucro {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .tabela,
  .tabela tbody,
  .tabela tr,
  .tabela td { display: block; width: 100%; }
  .tabela thead { display: none; }
  /* A linha do desktop tem `height: 40px` — no cartão empilhado essa altura
     fixa corta o conteúdo (a linha aparece com 40 px de caixa para 200 px de
     conteúdo e o resto transborda para fora do cartão). O reset precisa
     repetir o `.painel-pagina` para empatar em especificidade com a regra do
     desktop; sem o prefixo ela continua vencendo e o reset não faz nada. */
  .painel-pagina .tabela tbody tr { height: auto; }
  .tabela tbody tr {
    background: #fff;
    border: 1px solid #E6DFD2;
    border-radius: 8px;
    padding: 4px 14px;
    margin-bottom: 10px;
  }
  .tabela td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #F2EDE2;
  }
  .tabela td:last-child { border-bottom: none; }
  .tabela td::before {
    content: attr(data-rotulo);
    flex: 0 0 84px;
    color: #5E6B62;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  .celula-valor { text-align: right; min-width: 0; }
}

.etiqueta {
  display: inline-block;
  background: #E3EADF;
  color: #2E6B4E;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: .74rem;
  font-weight: 600;
  vertical-align: middle;
}

.vazio { color: #5E6B62; padding: 18px 2px; }

.detalhe {
  margin-top: 22px;
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 20px 22px;
}
.detalhe-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.detalhe-topo h2 { margin: 0; font-size: 1.2rem; color: var(--azul-escuro); }
.detalhe-item {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid #F2EDE2;
  font-size: .95rem;
}
.detalhe-item:first-of-type { border-top: none; }
.detalhe-rotulo { flex: 0 0 150px; color: #5E6B62; }

/* --- Modal do detalhe do contato ------------------------------------------- */
/* O `#area-detalhe` é o OVERLAY (fundo escurecido), não a caixa; o conteúdo
   montado por `mostrarDetalhe` é a `.modal-caixa`. O overlay some por `[hidden]`
   do user agent — por isso NÃO declaramos `display` nele: um `display` de autor
   venceria o `[hidden]` e o modal apareceria sempre (a mesma armadilha de
   `#area-links`). A caixa é flex, e sim declara display, mas é sempre visível
   quando existe. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(16, 33, 55, .55);
  overflow-y: auto;
  padding: 24px 16px;
}
.modal-caixa {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(16, 33, 55, .28);
}
.modal-caixa:focus { outline: none; }
/* Listas de itens dentro do modal podem rolar; a caixa inteira não estoura a
   tela. Em telas estreitas o `margin` do topo encolhe para caber mais conteúdo. */
@media (max-width: 640px) {
  .modal { padding: 12px 8px; }
  .modal-caixa { margin: 12px auto; padding: 16px; }
}

/* --- Promoção de papel ----------------------------------------------------- */

.promocao {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #E6DFD2;
}
.promocao h3 { margin: 0 0 12px; font-size: 1rem; color: var(--azul-escuro); }
.promocao-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.promocao-linha label { flex: 0 0 150px; font-size: .95rem; color: #5E6B62; }
.promocao-linha select {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 10px;
  font-size: 1rem;
  border: 1px solid #D8CFBE;
  border-radius: 6px;
  background: #fff;
}
.promocao .erro,
.promocao .ok { margin: 0 0 12px; font-size: .92rem; }
.ok { color: var(--verde); font-weight: 600; }
/* Global, não preso a `.promocao`: os botões de link também desabilitam durante
   a requisição e ficariam sem nenhum sinal visual de que estão inertes. */
.botao[disabled] { opacity: .6; cursor: default; }

/* --- Links de convite ------------------------------------------------------ */

.links-nota {
  margin: 0 0 14px;
  font-size: .88rem;
  color: #5E6B62;
}
.links-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.links-rotulo {
  flex: 0 0 150px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cor-navy);
}
/* readonly, nunca disabled: um campo disabled não é focável nem selecionável,
   e é justamente ele o fallback quando a área de transferência não funciona. */
.link-url {
  flex: 1 1 300px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  background: var(--cor-fundo);
  color: var(--cor-tinta);
}
.links-meta { font-size: 11.5px; color: var(--cor-muda); }
.links-mensagem { flex: 1 1 100%; margin: 0; font-size: .9rem; }
.links-copiado { font-size: .85rem; color: #5E6B62; }
.links-copiado.ok { color: var(--verde); font-weight: 600; }
.etiqueta.inativa { background: #F2EDE2; color: #5E6B62; }
.botao.pequeno { padding: 6px 14px; font-size: .88rem; }

/* --- Meus dados ------------------------------------------------------------ */
/* `.acoes-cabecalho` agrupa as ações do cabeçalho do painel — hoje só "Sair",
   desde que as demais viraram itens do menu lateral. O `flex-wrap` segue útil
   para telas muito estreitas. */
.acoes-cabecalho { display: flex; gap: 8px; flex-wrap: wrap; }

/* Nenhum `display` em `.perfil`: qualquer display de autor vence o `[hidden]` do
   user agent, e a seção ficaria visível para visitante anônimo — a armadilha
   que `#area-links` já documenta. `#area-perfil` usa `.detalhe`, que também não
   declara display. */
.perfil-senha {
  border: 1px solid #E6DFD2;
  border-radius: 6px;
  padding: 10px 16px 4px;
  margin: 6px 0 16px;
}
.perfil-senha legend { padding: 0 6px; font-size: .92rem; font-weight: 600; color: #5E6B62; }
/* Duas colunas para os campos simples; a troca de senha e as mensagens ocupam
   a linha toda (são um bloco à parte, não par de campos). */
.painel-pagina .perfil .formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}
.painel-pagina .perfil .formulario label { margin-bottom: 0; }
.painel-pagina .perfil .formulario > .perfil-senha,
.painel-pagina .perfil .formulario > .erro,
.painel-pagina .perfil .formulario > .ok,
.painel-pagina .perfil .formulario > button {
  grid-column: 1 / -1;
}
.painel-pagina .perfil .formulario > .perfil-senha { margin: 0; }
/* O e-mail é somente leitura: o fundo cinza diz isso antes de a pessoa tentar
   digitar. Nunca `disabled` — disabled não é focável nem selecionável. */
.perfil input[readonly] { background: #F2EDE2; color: #1C2A24; }
/* Sem borda nem regra `:empty`: um `#perfil-info` vazio (o GET falhou) tem de
   desaparecer sozinho, e `display: none` aqui reintroduziria a armadilha acima. */
#perfil-info { margin-top: 18px; }

/* --- Cadastro manual com vídeo --------------------------------------------- */
/* Nenhum `display` em `.cadastro-manual` — a seção nasce `hidden` e um display
   de autor venceria o `[hidden]` do user agent, deixando o formulário à mostra
   para visitante anônimo. Mesma armadilha que `#area-links` documenta. A seção
   usa `.detalhe`, que também não declara display. */
.cadastro-manual .aviso { margin-top: 0; }
/* Duas colunas no desktop (os campos de nome/telefone/e-mail/localidade são
   curtos) e uma no celular. O roteiro e o campo de vídeo ocupam a linha toda:
   são leitura, não par de campos. */
.painel-pagina .cadastro-manual .formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}
.painel-pagina .cadastro-manual .formulario label { margin-bottom: 0; }
.painel-pagina .cadastro-manual .formulario > .roteiro-video,
.painel-pagina .cadastro-manual .formulario > .erros-bloco,
.painel-pagina .cadastro-manual .formulario > .ok,
.painel-pagina .cadastro-manual .formulario > label[for="cadastro-manual-video"],
.painel-pagina .cadastro-manual .formulario > button {
  grid-column: 1 / -1;
}
.painel-pagina .cadastro-manual .formulario > .ok { margin: 0; }
/* O campo de arquivo não herda a largura dos outros inputs de forma útil: o
   `::file-selector-button` fica colado no texto em telas estreitas. */
.cadastro-manual input[type="file"] {
  padding: 8px;
  background: #F2EDE2;
  font-size: .9rem;
}
.cadastro-manual .ok { margin: 0 0 12px; font-size: .92rem; }

/* Roteiro do vídeo — orientação, não campo. Fica entre o aviso e o campo de
   arquivo, na altura em que o operador chega nele. Como todo o resto desta seção,
   o seletor é descendente (`.cadastro-manual …`) para nunca casar com a própria
   seção, que nasce `hidden`. */
.cadastro-manual .roteiro-video {
  border: 1px solid #E6DFD2;
  border-radius: 6px;
  background: #F2EDE2;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .9rem;
}
.cadastro-manual .roteiro-video h3 {
  margin: 0 0 8px;
  font-size: .95rem;
  color: var(--azul-escuro);
}
.cadastro-manual .roteiro-video p { margin: 0 0 8px; }
.cadastro-manual .roteiro-video ol { margin: 0 0 8px; padding-left: 22px; }
.cadastro-manual .roteiro-video li { margin-bottom: 4px; }
.cadastro-manual .roteiro-video .dica {
  margin: 0;
  font-size: .85rem;
  color: #5E6B62;
}

/* --- Vídeo de consentimento ------------------------------------------------ */
/* O bloco vive dentro do detalhe, que é recriado a cada contato aberto. */
#bloco-consentimento {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #E6DFD2;
}
#bloco-consentimento h3 { margin: 0 0 12px; font-size: 1rem; color: var(--azul-escuro); }
/* Escopado em `#bloco-consentimento`: `.links-meta` já existe na tela de links e
   um `margin` aqui fora mudaria a aparência daquela tela sem ninguém pedir. */
.consentimento-meta,
#bloco-consentimento .links-meta { margin: 0 0 8px; font-size: .88rem; color: #5E6B62; }
.consentimento-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.consentimento-linha .links-meta { margin: 0; }
/* Sem altura fixa: a proporção do vídeo varia (retrato ou paisagem, dependendo
   de como a pessoa gravou). `max-width` impede que um vídeo largo estoure a
   largura do detalhe. */
.video-consentimento {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  margin-top: 4px;
  border-radius: 6px;
  background: #000;
}

/* --- Gestão de igrejas e lotações ------------------------------------------ */
/* Nenhum `display` em `.gestao` — a seção nasce `hidden` (mesma armadilha de
   `#area-links` e `.cadastro-manual`); a seção não é cartão (não usa
   `.detalhe`), porque os dois blocos abaixo JÁ são: cartão dentro de cartão
   daria borda dupla. Os seletores abaixo são descendentes, de propósito. */
.gestao .links-nota { margin: 0 0 14px; font-size: 12.5px; color: var(--cor-muda); }
.gestao-bloco {
  padding: 16px 18px;
  margin-top: 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.gestao-bloco h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cor-navy);
}
.painel-pagina .gestao-linha { padding: 9px 0; border-top-color: var(--cor-borda); }
.painel-pagina .gestao-lista { margin-top: 4px; }
/* O formulário fica em duas colunas largas quando há espaço; em telas estreitas
   empilha, como o resto dos formulários do projeto. */
.gestao-bloco .formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 16px;
  align-items: start;
}
.gestao-bloco .formulario .termo,
.gestao-bloco .formulario .erros-bloco,
.gestao-bloco .formulario button { grid-column: 1 / -1; }
.gestao-lista { margin-top: 16px; }
.gestao-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #F2EDE2;
}
.gestao-linha:first-child { border-top: none; }
.gestao-info { display: flex; flex-direction: column; gap: 2px; }
.gestao-info .links-meta { margin: 0; }
#bloco-consentimento .erro { margin: 0 0 8px; font-size: .92rem; }

/* Quem pede menos movimento no sistema não deve ver o menu deslizar. As únicas
   transições do projeto são as do menu no celular. */
@media (prefers-reduced-motion: reduce) {
  .painel-menu,
  .painel-menu.aberto { transition: none; }
}

/* --- Módulo do gabinete (fase 1) ----------------------------------------- */
/* Seção com cabeçalho de ícone + conteúdo, separada por uma borda. Não usar
   `display` em nada que nasça `[hidden]` (o `#form-servidor`, o
   `#resultado-busca`, os avisos): a regra global `[hidden]` cobre, mas a
   disciplina evita depender dela. */
.gabinete-bloco { margin-top: 32px; }
.gabinete-bloco h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.gabinete-bloco h3 .icone {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
}
.gabinete-descricao { margin: 6px 0 0; color: #1C2A24; }
.gabinete-resumo .detalhe-topo { margin-bottom: 4px; }

/* Meu gabinete na casca: o resumo é o cabeçalho de um cartão e cada bloco
   (Equipe, Carteira) é um cartão-tabela com título próprio — o `.gabinete-bloco`
   deixa de ser só uma borda de separação. */
.painel-pagina .gabinete-resumo { padding: 16px 18px; }
.painel-pagina .gabinete-resumo .detalhe-topo h2 { font-size: 19px; }
.painel-pagina .gabinete-resumo .leads {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--cor-muda);
}
.painel-pagina .gabinete-descricao { font-size: 13.5px; color: var(--cor-muda); }
.painel-pagina .gabinete-bloco {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.painel-pagina .gabinete-bloco h3 {
  gap: 7px;
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
  color: var(--cor-navy);
}
.painel-pagina .gabinete-bloco h3 .icone { width: 17px; height: 17px; }
.painel-pagina .gabinete-bloco > .leads {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--cor-muda);
}
.painel-pagina .gabinete-bloco .filtros { margin-bottom: 8px; }

/* Gabinetes: criar e listar são dois blocos — o formulário já é cartão
   (`.detalhe`), a tabela ganha o seu em volta. */
.painel-pagina #view-gabinetes > .leads {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--cor-muda);
}
.painel-pagina .gabinetes-tabela {
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}

/* Formulário na mesma linha dos campos (desktop); no celular empilha. */
.formulario-linha {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.formulario-linha label { margin-bottom: 0; flex: 1 1 220px; }
.formulario-linha .botao { flex: none; }

/* Resultado da busca de pessoas para a carteira. A caixa é revelada por
   `[hidden]`; o `display` fica nas LINHAS, não nela. */
.lista-resultados {
  margin: 8px 0 18px;
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 4px 14px;
  max-height: 320px;
  overflow-y: auto;
}
.resultado-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #F2EDE2;
}
.resultado-linha:first-child { border-top: none; }
.resultado-linha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resultado-linha small { color: #5E6B62; }
.lista-resultados .vazio { margin: 10px 0; }

/* Linha de vínculo desativado (servidor que saiu, pessoa fora da carteira):
   fica esmaecida em vez de sumir — o histórico é parte da informação. */
.linha-inativa td { opacity: .62; }

.acoes-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.acoes-linha select {
  padding: 7px 9px;
  font-size: .9rem;
  border: 1px solid #D8CFBE;
  border-radius: 6px;
  background: #fff;
}
.acoes-linha .botao { padding: 7px 12px; font-size: .88rem; }

@media (max-width: 699px) {
  .formulario-linha { flex-direction: column; align-items: stretch; }
  /* Em coluna o eixo principal é VERTICAL: o `flex: 1 1 220px` do rótulo
     (desktop) vira 220 px de ALTURA e abre um vão enorme acima do campo. A
     largura vem de `stretch`; `flex: none` impede o alongamento. */
  .formulario-linha label { flex: none; }
  .formulario-linha .botao { justify-content: center; }
}

/* --- Fase 2: demandas, agenda e aniversariantes ---------------------------- */
/* Nada aqui declara `display` em elemento que nasce `[hidden]` (as `.view`, os
   overlays `.modal`, a `#area-detalhe`): um `display` de autor venceria o
   `[hidden]` do user agent. As regras de `display` são só de elementos que
   existem por já estarem visíveis. */

.filtro {
  padding: 8px 10px;
  font-size: .9rem;
  border: 1px solid #D8CFBE;
  border-radius: 6px;
  background: #fff;
  color: #1C2A24;
  max-width: 240px;
}

/* Kanban: colunas com rolagem horizontal no desktop, empilhadas no celular. */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-top: 16px;
}
.kanban-coluna {
  background: #F2EDE2;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}
.kanban-titulo-coluna {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: .92rem;
  color: var(--azul-escuro);
}
.kanban-cartao {
  background: #fff;
  border: 1px solid #E6DFD2;
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: grab;
}
.kanban-cartao:active { cursor: grabbing; }
.kanban-cartao-titulo {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--azul-escuro);
}
.kanban-cartao-meta { margin: 0; font-size: .84rem; color: #5E6B62; }
.kanban-cartao-etiqueta {
  display: inline-block;
  margin: 6px 0 0;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: #F2EDE2;
  color: #475569;
}
.kanban-cartao.prioridade-baixa { border-left-color: #94a3b8; }
.kanban-cartao.prioridade-media { border-left-color: #d99e00; }
.kanban-cartao.prioridade-alta { border-left-color: #dd6b20; }
.kanban-cartao.prioridade-urgente { border-left-color: var(--vermelho); }
.kanban-cartao-etiqueta.prioridade-media { background: #fdf3d7; color: #7a5600; }
.kanban-cartao-etiqueta.prioridade-alta { background: #fdeadd; color: #9a3f00; }
.kanban-cartao-etiqueta.prioridade-urgente { background: #fde4e1; color: #8f1b12; }
.kanban-cartao-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.select-mover {
  flex: 1 1 120px;
  min-width: 0;
  padding: 6px 8px;
  font-size: .82rem;
  border: 1px solid #D8CFBE;
  border-radius: 6px;
  background: #fff;
}
.kanban-sem-cartao { margin: 0; font-size: .85rem; color: #5E6B62; }

/* Kanban na casca do painel: as colunas viram pistas de fundo e o cartão branco
   é a unidade. Só o visual muda — `data-status`, `data-id` e o `<select>` de
   transição continuam sendo o contrato com o servidor, e o drag não depende de
   nada aqui. */
.painel-pagina .kanban { gap: 12px; margin-top: 0; }
.painel-pagina .kanban-coluna {
  background: #F2EDE2;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 10px;
}
.painel-pagina .kanban-titulo-coluna {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cor-muda);
}
.painel-pagina .kanban-titulo-coluna .contagem {
  font-size: 11px;
  font-weight: 600;
  color: var(--cor-tinta);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 0 7px;
}
/* Longhand de propósito: `border`/`border-left` redefiniriam `border-left-color`
   e a cor de prioridade (que tem a mesma especificidade) se perderia. */
.painel-pagina .kanban-cartao {
  border-top: 1px solid var(--cor-borda);
  border-right: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  border-left-style: solid;
  border-left-width: 3px;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(23, 33, 47, .06);
}
.painel-pagina .kanban-cartao:hover { box-shadow: 0 2px 6px rgba(23, 33, 47, .1); }
.painel-pagina .kanban-cartao-titulo { font-size: 14px; color: var(--cor-tinta); }
.painel-pagina .kanban-cartao-meta { font-size: 13px; color: var(--cor-muda); }
.painel-pagina .select-mover {
  height: 32px;
  font-size: 13px;
  border-color: var(--cor-borda-forte);
}
.painel-pagina .kanban-sem-cartao { font-size: 13px; color: var(--cor-muda); }

/* Dentro do modal da demanda: descrição, seletor de coluna e histórico. */
.demanda-descricao {
  white-space: pre-wrap;
  background: #F2EDE2;
  border: 1px solid #F2EDE2;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 12px 0;
}
.demanda-mover { margin: 14px 0 4px; }
.historico-demanda {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: .88rem;
}
.historico-demanda li { padding: 8px 0; border-top: 1px solid #F2EDE2; }
.historico-quando { display: block; font-size: .78rem; color: #5E6B62; }
.historico-tipo { font-weight: 600; color: var(--azul-escuro); margin-right: 6px; }
.historico-carregando { color: #5E6B62; }

/* Agenda: grade de 7 colunas (desktop) + lista do mês. */
.agenda-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.agenda-titulo-mes {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.1rem;
  color: var(--azul-escuro);
  text-transform: capitalize;
}
.agenda-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 18px;
}
.agenda-dia-semana {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  color: #5E6B62;
}
.agenda-celula {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 74px;
  padding: 4px 5px;
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 6px;
  overflow: hidden;
}
/* Células de alinhamento (antes do dia 1 e depois do último dia) não são dias
   do mês: sem fundo e sem borda, para não parecerem células clicáveis. */
.agenda-celula.fora-do-mes { background: transparent; border-color: transparent; }
.agenda-dia { font-size: .76rem; font-weight: 600; color: #5E6B62; }
.agenda-evento {
  display: block;
  width: 100%;
  padding: 2px 5px;
  border: 0;
  border-left: 3px solid var(--azul);
  border-radius: 4px;
  background: #F2EDE2;
  color: #1C2A24;
  font-size: .72rem;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* A visibilidade é visível na própria cor do evento: pessoal (violeta) só o
   dono vê, então a cor avisa que aquilo não é da equipe. */
.agenda-evento.visibilidade-pessoal { border-left-color: #7c3aed; background: #f3eefe; }
.agenda-evento.visibilidade-geral { border-left-color: var(--verde); background: #e9f6ee; }

.agenda-lista { display: flex; flex-direction: column; margin-bottom: 12px; }
.agenda-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid #F2EDE2;
}
.agenda-linha:first-child { border-top: none; }
.agenda-linha-quando { flex: 0 0 130px; margin: 0; font-size: .86rem; color: #5E6B62; }
.agenda-linha-titulo {
  flex: 1 1 200px;
  margin: 0;
  font-weight: 600;
  color: var(--azul-escuro);
}
.agenda-linha-meta { margin: 0; font-size: .8rem; color: #5E6B62; }

/* Agenda na casca do painel: a barra de mês vira uma ferramenta no cartão e a
   grade perde o ar de tabela. A cor da barra esquerda de cada evento continua
   codificando a visibilidade (pessoal/geral/gabinete) — é sinal, não decoração. */
.painel-pagina .agenda-topo {
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.painel-pagina .agenda-topo .botao.pequeno { height: 30px; padding: 0 9px; }
.painel-pagina .agenda-titulo-mes {
  margin: 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cor-tinta);
  /* O `capitalize` legado escrevia "Outubro De 2026"; em pt-BR só o mês leva
     maiúscula. */
  text-transform: none;
}
.painel-pagina .agenda-titulo-mes::first-letter { text-transform: uppercase; }
.painel-pagina .agenda-grade { gap: 4px; margin-bottom: 20px; }
.painel-pagina .agenda-dia-semana {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cor-muda);
}
.painel-pagina .agenda-celula {
  min-height: 78px;
  padding: 5px 6px;
  border-color: var(--cor-borda);
  border-radius: 6px;
}
.painel-pagina .agenda-dia { font-size: 12px; font-weight: 600; color: var(--cor-muda); }
/* Sem `background` aqui: as regras de visibilidade (logo acima, mesma
   especificidade) é que dão a cor; um fundo neste seletor as apagaria. */
.painel-pagina .agenda-evento {
  padding: 2px 6px;
  border-left-width: 3px;
  border-radius: 4px;
  font-size: 12px;
}
.painel-pagina .agenda-linha {
  gap: 10px;
  padding: 9px 0;
  border-top-color: var(--cor-borda);
}
.painel-pagina .agenda-linha-quando { font-size: 13px; color: var(--cor-muda); }
.painel-pagina .agenda-linha-titulo { font-size: 14px; color: var(--cor-tinta); }
.painel-pagina .agenda-linha-meta { font-size: 13px; color: var(--cor-muda); }
/* O "Eventos do mês" é um rótulo de bloco, não um título de página. */
.painel-pagina #view-agenda > h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-muda);
}

/* Aniversariantes: cartões por pessoa, com o dia em destaque. */
.aniversario-bloco { margin-top: 20px; }
.aniversario-bloco h2 { margin: 0 0 8px; font-size: 1rem; color: var(--azul-escuro); }
.aniversario-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.aniversario-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #E6DFD2;
  border-radius: 8px;
}
.aniversario-dia {
  flex: 0 0 42px;
  margin: 0;
  padding: 4px 0;
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}
.aniversario-dados { flex: 1 1 auto; min-width: 0; }
.aniversario-nome { margin: 0 0 2px; font-weight: 600; color: var(--azul-escuro); }
.aniversario-meta { margin: 0 0 8px; font-size: .82rem; color: #5E6B62; }

/* Celular: kanban empilhado (sem rolagem lateral), agenda só em lista — a
   grade de 7 colunas vira ilegível abaixo de ~700px. */
@media (max-width: 699px) {
  .kanban {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
  }
  .agenda-grade { display: none; }
  .agenda-titulo-mes { flex-basis: 100%; }
  .agenda-linha-quando { flex-basis: 100%; }
  .filtro { max-width: none; }
}

/* --- Reuniões: registro com foto de prova e os números do titular ---------- */
/* Três números, três colunas: o `.indicadores` genérico abre quatro e a quarta
   ficaria vazia. O id vence a regra de 2 colunas do breakpoint, então a media
   query abaixo precisa repeti-lo. */
.painel-pagina #indicadores-reuniao { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.painel-pagina .reuniao-granularidade-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.painel-pagina .reuniao-granularidade-rotulo { font-size: 13px; font-weight: 600; }
.painel-pagina .seletor-granularidade { display: flex; flex-wrap: wrap; gap: 6px; }
/* O estado é `aria-pressed` (o leitor de tela anuncia qual está ativo); a cor
   só reforça — não é o único sinal. */
.painel-pagina .seletor-granularidade .botao[aria-pressed="true"] {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}

/* `.icone` sozinho não define tamanho — cada contexto tem a sua regra. */
.painel-pagina .reuniao-campo-rotulo { display: inline-flex; align-items: center; gap: 6px; }
.painel-pagina .reuniao-campo-rotulo .icone {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  color: var(--cor-muda);
}

/* --- Formulário de registro: mesma malha dos outros formulários do painel ---
   Duas colunas no desktop (`.detalhe` sozinho empilhava cinco campos numa tira
   comprida) e uma no celular. A foto e as ações ocupam a linha toda: são bloco,
   não par de campo. */
.painel-pagina .reuniao-formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}
.painel-pagina .reuniao-formulario label { margin-bottom: 0; }
.painel-pagina .reuniao-formulario > .detalhe-topo,
.painel-pagina .reuniao-formulario > .reuniao-formulario-nota,
.painel-pagina .reuniao-formulario > .reuniao-prova,
.painel-pagina .reuniao-formulario > .acoes,
.painel-pagina .reuniao-formulario > .erros-bloco {
  grid-column: 1 / -1;
}

.painel-pagina .reuniao-formulario-titulo { display: flex; align-items: center; gap: 10px; }
.painel-pagina .reuniao-formulario-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #F2EDE2;
  color: var(--cor-info);
}
.painel-pagina .reuniao-formulario-icone .icone { width: 17px; height: 17px; fill: none; }

/* O aviso de abertura não é `small` de campo: fala da regra do módulo (a foto é
   prova e é privada), e a leitura é antes de digitar. */
.painel-pagina .reuniao-formulario-nota {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cor-muda);
}

/* A foto ganha um bloco próprio: é o campo que decide o registro (sem ela o
   servidor recusa) e o único com prévia. Fundo levemente mais escuro, como o
   roteiro do cadastro manual. */
.painel-pagina .reuniao-prova {
  min-width: 0;
  padding: 14px;
  background: #F2EDE2;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}

/* O campo de arquivo não serve com a altura fixa dos demais inputs: o
   `::file-selector-button` fica cortado. Mesma correção do vídeo de cadastro. */
.painel-pagina #form-reuniao input[type="file"] {
  height: auto;
  padding: 8px;
  background: #fff;
  font-size: .9rem;
}

/* A media query vem DEPOIS da regra base, não junto da de 640px lá em cima:
   mesma especificidade, e a última do arquivo vence — invertida, o formulário
   ficaria com duas colunas no celular. */
@media (max-width: 640px) {
  .painel-pagina .reuniao-formulario { grid-template-columns: 1fr; }
}

/* A prévia nasce `[hidden]`: NÃO declarar `display` aqui (um `display` de autor
   venceria o `[hidden]` do user agent e ela apareceria sempre vazia). */
.painel-pagina .reuniao-previa { margin-top: 10px; }
.painel-pagina .previa-foto {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
}

.painel-pagina .reuniao-lista-titulo {
  margin: 22px 0 8px;
  font-size: 1rem;
  color: var(--azul-escuro);
}

/* A foto aberta no modal: a caixa pode crescer, mas nunca além da tela. */
.painel-pagina .reuniao-foto-caixa { max-width: min(900px, 94vw); }
.painel-pagina .reuniao-foto { max-width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 819.98px) {
  .painel-pagina #indicadores-reuniao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Painel de reuniões: gráfico da série e rankings ---------------------- */
/* A cor do DADO sai daqui: `.grafico-barra` usa `currentColor`, então o JS
   nunca carrega valor de cor — e um tema futuro troca o token num lugar só.
   Eixo e grade ficam em tokens de texto/borda: são chrome, não dado. */
.painel-pagina .grafico-bloco { margin: 4px 0 22px; }
/* Três números em três colunas, como no painel individual: o `.indicadores`
   genérico abre quatro e a quarta ficaria vazia. */
.painel-pagina #indicadores-reuniao-painel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.painel-pagina .grafico-titulo {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--cor-tinta);
}
.painel-pagina .grafico-serie { width: 100%; color: var(--cor-primaria); }
.painel-pagina .grafico-serie svg { display: block; width: 100%; height: auto; }
.painel-pagina .grafico-barra { fill: currentColor; }
.painel-pagina .grafico-grade { stroke: var(--cor-borda); stroke-width: 1; }
.painel-pagina .grafico-rotulo-eixo {
  fill: var(--cor-muda);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.painel-pagina .grafico-tabela { margin-top: 8px; }
.painel-pagina .grafico-tabela summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--cor-info);
}
.painel-pagina .grafico-tabela .tabela { margin-top: 8px; }
.painel-pagina .rankings-bloco { margin: 0 0 22px; }
.painel-pagina .rankings-ordem {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.painel-pagina .reuniao-posicao {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--cor-muda);
}

@media (max-width: 699px) {
  /* Em tela estreita o SVG encolheria até os rótulos encavalarem. O bloco rola
     na horizontal — melhor que um eixo ilegível. */
  .painel-pagina .grafico-serie { overflow-x: auto; }
  .painel-pagina .grafico-serie svg { min-width: 520px; }
}

@media (max-width: 819.98px) {
  .painel-pagina #indicadores-reuniao-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Comunicação (campanhas de e-mail) ------------------------------------- */
/* O cartão e os campos são os do `.formulario .detalhe`; o que é próprio da
   seção é o empilhamento (o formulário de reunião é grid em três colunas) e a
   faixa dos filtros. O `padding` do `.detalhe` já dá o respiro. */
.painel-pagina .comunicacao-formulario label {
  display: block;
  margin-bottom: 14px;
}
.painel-pagina .comunicacao-formulario input,
.painel-pagina .comunicacao-formulario select { width: 100%; }
.painel-pagina .comunicacao-formulario small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--cor-muda);
}
.painel-pagina .comunicacao-corpo textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
}
/* Filtros em faixa: são opcionais e ficam juntos, para não parecerem campos
   obrigatórios da campanha. */
.painel-pagina .comunicacao-filtros {
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 14px 2px;
  margin: 0 0 4px;
}
.painel-pagina .comunicacao-filtros legend {
  padding: 0 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.painel-pagina .comunicacao-filtros .dica { font-weight: 400; color: var(--cor-muda); }
.painel-pagina .comunicacao-filtros label { margin-bottom: 10px; }

.painel-pagina .comunicacao-progresso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font-size: 14px;
  color: var(--cor-muda);
}
.painel-pagina .comunicacao-progresso progress { width: 260px; height: 10px; }

/* Situação da campanha. `.etiqueta` já é verde (o "concluída"); as outras
   variantes mudam só cor/fundo, mantendo a pílula. */
.painel-pagina .etiqueta-rascunho { background: #F2EDE2; color: #5E6B62; }
.painel-pagina .etiqueta-enviando { background: #fdf1d6; color: #8a5b00; }
.painel-pagina .etiqueta-cancelada { background: #fbe4e4; color: #a12b2b; }

@media (max-width: 640px) {
  /* No modo cartão a barra não cabe ao lado do texto. */
  .painel-pagina .comunicacao-progresso { flex-wrap: wrap; }
  .painel-pagina .comunicacao-progresso progress { width: 100%; }
}

/* --- Home pública territorial (2026-11-10) ---------------------------------
   A home institucional ganhou uma casca própria: cabeçalho transparente sobre o
   hero, tipografia editorial e faixas em verde/creme. TUDO é escopado em
   `.home-territorial`, que o template põe no <body>; as demais páginas públicas
   continuam com o cabeçalho azul, o `.container` de leitura e a fonte do
   sistema. Nenhum token antigo foi alterado de propósito: os valores vivem em
   variáveis locais para não vazar para o painel nem para o site institucional. */
.home-territorial {
  --home-forest: #0E3B2E;
  --home-forest2: #0A2C22;
  --home-amber: #DFA23B;
  --home-cream: #FBF7EF;
  --home-ink: #1C2A24;
  --home-muted: #5E6B62;
  --home-line: #E6DFD2;
  background: var(--home-cream);
  color: var(--home-ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.home-territorial h1,
.home-territorial h2 {
  font-family: Georgia, "Times New Roman", serif;
}
.home-territorial .wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 44px;
}
/* A home é faixa cheia; o `main.container` do base existe para as páginas de
   leitura, e aqui só precisa deixar de impor 960px de largura. */
.home-territorial main.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.home-territorial .cabecalho {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 26px 0;
  background: transparent;
}
.home-territorial .cabecalho .container {
  max-width: 1160px;
  padding: 0 44px;
}
.home-territorial .marca {
  color: #fff;
  font-size: 22px;
  letter-spacing: .6px;
}
.home-territorial .marca span { color: var(--home-amber); }
.home-territorial .cabecalho nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.home-territorial .home-nav-links {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.home-territorial .cabecalho nav a {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}
.home-territorial .home-entrar {
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 100px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

/* Hero */
.home-territorial .home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 660px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(223, 162, 59, .30), rgba(223, 162, 59, 0) 62%),
    linear-gradient(120deg, #0A2C22 0%, #0E3B2E 48%, #155440 100%);
}
.home-territorial .home-contornos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}
.home-territorial .home-multidao {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 520px;
  width: auto;
  opacity: .9;
}
.home-territorial .home-hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: 160px;
  padding-bottom: 74px;
}
.home-territorial .home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--home-amber);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.home-territorial .home-eyebrow::before {
  content: "";
  width: 30px;
  height: 1.5px;
  background: var(--home-amber);
}
.home-territorial .home-hero h1 {
  max-width: 860px;
  margin: 0;
  color: #fff;
  font-size: 68px;
  line-height: 1.04;
  letter-spacing: -1.4px;
  font-weight: 700;
}
.home-territorial .home-hero h1 em {
  color: #F3C877;
  font-style: italic;
}
.home-territorial .home-lead {
  max-width: 590px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
}
.home-territorial .home-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.home-territorial .home-acoes-centro { justify-content: center; }
.home-territorial .home-botao {
  padding: 15px 30px;
  border-radius: 100px;
  font-size: 15.5px;
  font-weight: 700;
}
.home-territorial .home-botao.principal {
  background: var(--home-amber);
  color: #241a08;
}
.home-territorial .home-botao.secundario {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  font-weight: 600;
}
.home-territorial .home-botao .icone {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
}
.home-territorial .cabecalho a:focus-visible,
.home-territorial .home-botao:focus-visible {
  outline-color: var(--home-amber);
}

/* Números sobrepostos ao hero */
.home-territorial .home-sobreposicao {
  position: relative;
  z-index: 4;
  margin-top: -46px;
}
.home-territorial .home-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 32px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -34px rgba(14, 59, 46, .5);
}
.home-territorial .home-numero {
  padding: 0 28px;
  border-left: 1px solid var(--home-line);
}
.home-territorial .home-numero:first-child { border-left: 0; }
.home-territorial .home-numero b {
  display: block;
  color: var(--home-forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1;
}
.home-territorial .home-numero span {
  display: block;
  margin-top: 9px;
  color: var(--home-muted);
  font-size: 12.5px;
}

/* Faixas de conteúdo */
.home-territorial .home-secao { padding: 88px 0 70px; }
.home-territorial .home-kicker {
  margin: 0 0 16px;
  color: #9A6A2A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.home-territorial .home-missao-grade {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}
.home-territorial .home-missao h2 {
  margin: 0;
  color: var(--home-forest);
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: -.6px;
}
.home-territorial .home-missao-texto p {
  margin: 0 0 18px;
  color: #41504A;
  font-size: 17px;
}
.home-territorial .home-missao-texto p:first-child {
  color: var(--home-ink);
  font-size: 19px;
}
.home-territorial .home-nota {
  margin-top: 26px !important;
  padding-top: 16px;
  border-top: 1px solid var(--home-line);
}
.home-territorial .home-nota strong {
  display: block;
  color: var(--home-forest);
  font-size: 14px;
}
.home-territorial .home-nota span {
  color: var(--home-muted);
  font-size: 12.5px;
}

/* Passos */
.home-territorial .home-passos {
  padding: 84px 0;
  color: #fff;
  background: var(--home-forest);
}
.home-territorial .home-passos-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 48px;
}
.home-territorial .home-passos-topo h2 {
  max-width: 540px;
  margin: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -.5px;
}
.home-territorial .home-passos-topo p {
  max-width: 330px;
  margin: 0;
  color: #B9CBBF;
  font-size: 14.5px;
}
.home-territorial .home-passos-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.home-territorial .home-passo {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.home-territorial .home-passo-numero {
  margin: 0 0 16px;
  color: var(--home-amber);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px;
  line-height: 1;
}
.home-territorial .home-passo h3 {
  margin: 0 0 9px;
  color: #fff;
  font-size: 19px;
}
.home-territorial .home-passo p:last-child {
  margin: 0;
  color: #B9CBBF;
  font-size: 14px;
}

/* Território */
.home-territorial .home-territorio { padding: 90px 0; }
.home-territorial .home-territorio-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.home-territorial .home-territorio h2,
.home-territorial .home-rotina h2 {
  margin: 0;
  color: var(--home-forest);
  font-size: 40px;
  line-height: 1.16;
  letter-spacing: -.5px;
}
.home-territorial .home-territorio p {
  margin: 16px 0 0;
  color: var(--home-muted);
  font-size: 16px;
}
.home-territorial .home-regioes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.home-territorial .home-regioes li {
  padding: 7px 14px;
  border: 1px solid var(--home-line);
  border-radius: 100px;
  background: #fff;
  color: #41504A;
  font-size: 12.5px;
}
.home-territorial .home-mapa {
  padding: 26px;
  border: 1px solid var(--home-line);
  border-radius: 18px;
  background: #F2EDE2;
}
.home-territorial .home-mapa svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Rotina */
.home-territorial .home-rotina {
  padding: 74px 0;
  background: #F2EDE2;
}
.home-territorial .home-rotina-grade {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.home-territorial .home-foto {
  position: relative;
  height: 330px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(300px 200px at 30% 30%, rgba(223, 162, 59, .5), rgba(223, 162, 59, 0) 70%),
    linear-gradient(140deg, #155440, #0E3B2E);
}
.home-territorial .home-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 26px);
}
.home-territorial .home-foto span {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  letter-spacing: .3px;
}
.home-territorial .home-lista {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.home-territorial .home-lista li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: #41504A;
  font-size: 15px;
}
.home-territorial .home-lista li::before {
  content: "✓";
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: #E3EADF;
  color: #2E6B4E;
  font-size: 12px;
  font-weight: 700;
}

/* Fechamento */
.home-territorial .home-final {
  padding: 88px 0;
  text-align: center;
}
.home-territorial .home-final h2 {
  margin: 0;
  color: var(--home-forest);
  font-size: 44px;
  letter-spacing: -.7px;
}
.home-territorial .home-final p {
  max-width: 540px;
  margin: 16px auto 30px;
  color: var(--home-muted);
  font-size: 16px;
}
.home-territorial .home-micro {
  margin: 22px 0 0;
  color: #7C8B7F;
  font-size: 12.5px;
}

/* Rodapé */
.home-territorial .rodape {
  padding: 42px 0;
  border-top: 0;
  color: #9DB8A9;
  background: var(--home-forest2);
  font-size: 13px;
}
.home-territorial .rodape .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1160px;
  padding: 0 44px;
}
.home-territorial .home-rodape-marca {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .6px;
}
.home-territorial .home-rodape-marca span { color: var(--home-amber); }
.home-territorial .rodape a:not(.home-rodape-marca) {
  color: #C6D4C9;
  text-decoration: none;
}

@media (max-width: 900px) {
  .home-territorial .home-hero h1 { font-size: 52px; }
  .home-territorial .home-missao-grade,
  .home-territorial .home-territorio-grade,
  .home-territorial .home-rotina-grade { gap: 40px; }
}

@media (max-width: 819.98px) {
  /* O site público não tem hambúrguer; no estreito, ficam a marca e o Entrar. */
  .home-territorial .home-nav-links { display: none; }
}

@media (max-width: 760px) {
  .home-territorial .wrap,
  .home-territorial .cabecalho .container,
  .home-territorial .rodape .container { padding: 0 20px; }
  .home-territorial .home-hero {
    align-items: center;
    min-height: 0;
    padding: 120px 0 70px;
  }
  .home-territorial .home-hero .wrap {
    padding-top: 0;
    padding-bottom: 0;
  }
  .home-territorial .home-multidao { height: 340px; opacity: .5; }
  .home-territorial .home-hero h1 { font-size: 42px; letter-spacing: -1px; }
  .home-territorial .home-lead { font-size: 16px; }
  .home-territorial .home-sobreposicao { margin-top: 0; }
  .home-territorial .home-numeros {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 0;
    padding: 26px 18px;
    border-radius: 0;
  }
  .home-territorial .home-numero { padding: 0 14px; border-left: 0; }
  .home-territorial .home-numero:nth-child(even) { border-left: 1px solid var(--home-line); }
  .home-territorial .home-missao-grade,
  .home-territorial .home-territorio-grade,
  .home-territorial .home-rotina-grade,
  .home-territorial .home-passos-grade { grid-template-columns: 1fr; }
  .home-territorial .home-passos-topo { flex-direction: column; align-items: flex-start; }
  .home-territorial .home-acoes { flex-direction: column; align-items: flex-start; }
  .home-territorial .home-acoes-centro { align-items: center; }
  .home-territorial .home-botao { justify-content: center; width: 100%; }
  .home-territorial .home-secao,
  .home-territorial .home-territorio,
  .home-territorial .home-passos,
  .home-territorial .home-rotina,
  .home-territorial .home-final { padding: 64px 0; }
  .home-territorial .home-missao h2,
  .home-territorial .home-passos-topo h2,
  .home-territorial .home-territorio h2,
  .home-territorial .home-rotina h2 { font-size: 30px; }
  .home-territorial .home-final h2 { font-size: 34px; }
  .home-territorial .home-foto { height: 240px; }
  .home-territorial .rodape .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ==========================================================================
   Sistema territorial (2026-11-10)
   A paleta e a tipografia da home passam a valer para o site público e para o
   painel. A estrutura não mudou: o site público continua com o `.container` de
   leitura, e o painel continua com topo + lateral + conteúdo. O que muda é a
   camada visual — verde profundo, creme, âmbar e títulos serifados — e ela é
   escopada para não vazar de um lado para o outro:
     • `.site-publico`  -> login, cadastro, privacidade, mandato, descadastro;
     • `.painel-pagina` -> sistema autenticado;
     • `.home-territorial` tem a casca própria (já definida acima).
   ========================================================================== */

/* --- Site público --------------------------------------------------------- */
.site-publico {
  background: var(--fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte);
}
.site-publico .cabecalho {
  padding: 16px 0;
  background: var(--azul-escuro);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.site-publico .marca {
  color: #fff;
  font-size: 22px;
  letter-spacing: .6px;
}
.site-publico .marca span { color: var(--cor-ativa); }
.site-publico .cabecalho nav a { color: #D9E5DC; }
.site-publico .cabecalho nav a:hover { color: var(--cor-ativa); }
.site-publico main.container {
  padding-top: 44px;
  padding-bottom: 64px;
}
.site-publico h1,
.site-publico h2,
.site-publico h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--azul-escuro);
}
.site-publico h1 {
  font-size: 2.1rem;
  line-height: 1.18;
  letter-spacing: -.4px;
}
.site-publico h2 {
  margin: 30px 0 12px;
  font-size: 1.45rem;
  line-height: 1.25;
}
.site-publico h3 { font-size: 1.12rem; }
.site-publico p { color: var(--cor-tinta); }
.site-publico .leads {
  color: var(--cor-muda);
  font-size: 1.08rem;
}
.site-publico a { color: var(--verde); }
.site-publico a:hover { color: #8A5B00; }
.site-publico .cabecalho a,
.site-publico .rodape a { text-decoration: none; }

/* Cartão dos formulários públicos (login, cadastro, recuperação, descadastro). */
.site-publico .form-central {
  max-width: 520px;
  margin: 8px auto 0;
  padding: 34px 34px 28px;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--cor-ativa);
  border-radius: 18px;
  box-shadow: 0 26px 60px -38px rgba(14, 59, 46, .45);
}
.site-publico .form-central h1 {
  margin: 0 0 16px;
  font-size: 1.85rem;
}
.site-publico .form-central > p { color: var(--cor-muda); }
.site-publico .form-central > p:last-child { margin-bottom: 0; }
.site-publico .formulario label {
  color: var(--cor-tinta);
  font-size: .95rem;
}
.site-publico .formulario input,
.site-publico .formulario select,
.site-publico .formulario textarea {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 10px;
  color: var(--cor-tinta);
}
.site-publico .formulario input:focus-visible,
.site-publico .formulario select:focus-visible,
.site-publico .formulario textarea:focus-visible {
  outline: 2px solid var(--cor-info);
  outline-offset: 1px;
}
.site-publico .formulario small {
  color: var(--cor-muda);
  font-size: .82rem;
}
.site-publico .botao {
  padding: 11px 22px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--cor-borda-forte);
  color: var(--azul-escuro);
  font-weight: 600;
}
.site-publico .botao.principal {
  background: var(--cor-ativa);
  border-color: var(--cor-ativa);
  color: #241a08;
  font-weight: 700;
}
.site-publico .botao.principal:hover { background: #F0B65A; }
.site-publico .botao .icone { width: 1em; height: 1em; }
.site-publico .consentimento-texto {
  background: #F2EDE2;
  border-color: var(--cor-borda);
  border-radius: 10px;
  color: var(--cor-tinta);
}
.site-publico .consentimento-texto:focus-visible { outline-color: var(--cor-info); }
.site-publico .consentimento-politica { color: var(--cor-muda); }
.site-publico .erro { color: var(--cor-perigo); }
.site-publico .ok { color: var(--verde); }

.site-publico .rodape {
  padding: 30px 0;
  background: var(--cor-lateral);
  border-top: 0;
  color: #9DB8A9;
}
.site-publico .rodape .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.site-publico .rodape-marca {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .6px;
}
.site-publico .rodape-marca span { color: var(--cor-ativa); }
.site-publico .rodape a:not(.rodape-marca) { color: #C6D4C9; }

/* --- Convite e assinatura: casca de duas colunas (2026-11-11) --------------
   A disposição é a da referência (texto à esquerda, formulário à direita),
   mas a pele é a territorial: verde profundo, creme e âmbar, Georgia nos
   títulos e IBM Plex no corpo. A esquerda é uma faixa verde com o motivo de
   anéis da home; a direita é o cartão branco do formulário. Abaixo de 900px
   empilha — a faixa vira o cabeçalho da página, não um bloco ao lado. */
.auth-pagina main.container {
  width: 100%;
  max-width: 1120px;
  padding-top: 30px;
  padding-bottom: 56px;
}
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 26px;
  align-items: start;
}
.auth-lateral {
  position: relative;
  overflow: hidden;
  padding: 38px 34px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(223, 162, 59, .20), transparent 34%),
    linear-gradient(160deg, var(--azul-escuro) 0%, var(--cor-lateral) 100%);
  color: #F4EFE4;
}
/* Os anéis são o mesmo motivo territorial da home, em escala discreta. */
.auth-lateral::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(223, 162, 59, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(223, 162, 59, .06), 0 0 0 76px rgba(223, 162, 59, .04);
  pointer-events: none;
}
.auth-lateral .auth-eyebrow {
  position: relative;
  margin: 0 0 12px;
  color: var(--cor-ativa);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.auth-lateral h1 {
  position: relative;
  margin: 0 0 14px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.4px;
}
.auth-lateral .auth-lead {
  position: relative;
  max-width: 34ch;
  margin: 0;
  color: #D3DED5;
  font-size: 1rem;
  line-height: 1.55;
}
.auth-lateral .auth-lead strong { color: #fff; }
.auth-lateral .auth-lista {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 38ch;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.auth-lateral .auth-lista li {
  display: flex;
  gap: 10px;
  color: #E4EBDD;
  font-size: .95rem;
  line-height: 1.45;
}
.auth-lateral .auth-lista li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--cor-ativa);
}
.auth-lateral .auth-marca {
  position: relative;
  margin: 30px 0 0;
  color: #fff;
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .6px;
}
.auth-lateral .auth-marca span { color: var(--cor-ativa); }

/* No desktop o texto acompanha a rolagem do formulário: o cartão da direita é
   bem mais alto que a faixa da esquerda. */
@media (min-width: 901px) {
  .auth-lateral { position: sticky; top: 24px; }
}

.auth-painel { min-width: 0; }
/* O cartão do formulário deixa de ser a coluna de 520px e passa a preencher
   o lado direito; a largura quem define é a grade. */
.auth-pagina .auth-painel .form-central {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 30px 32px 28px;
}
.auth-cartao h2 {
  margin: 0 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--azul-escuro);
}
.auth-cartao .auth-sub {
  margin: 0 0 20px;
  color: var(--cor-muda);
  font-size: .92rem;
}
.auth-cartao .dados-assinatura { margin-top: 4px; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; gap: 18px; }
  .auth-lateral { padding: 28px 26px; border-radius: 18px; }
  .auth-lateral h1 { font-size: clamp(1.6rem, 5vw, 2rem); }
  .auth-lateral .auth-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
  .auth-lateral .auth-marca { margin-top: 20px; }
}
@media (max-width: 640px) {
  .auth-pagina main.container { padding-top: 18px; padding-bottom: 40px; }
  .auth-lateral { padding: 22px 20px; }
  .auth-lateral .auth-lista { grid-template-columns: 1fr; gap: 9px; }
  .auth-pagina .auth-painel .form-central { padding: 22px 20px; }
}

/* Vitrine pública do mandato: os cartões e números seguem a mesma pele. */
.site-publico .mandato-numeros .indicador,
.site-publico .mandato-acao,
.site-publico .mandato-agenda li {
  background: #fff;
  border-color: var(--cor-borda);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 59, 46, .04);
}
.site-publico .mandato-numeros .indicador-valor,
.site-publico .mandato-acao h3,
.site-publico .mandato-acao-data,
.site-publico .mandato-agenda-titulo {
  color: var(--azul-escuro);
}
.site-publico .mandato-numeros .indicador-valor {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
}
.site-publico .mandato-acao-data,
.site-publico .mandato-agenda-data,
.site-publico .mandato-agenda-local,
.site-publico .mandato-acao-local { color: var(--cor-muda); }
.site-publico .tabela th {
  background: #F2EDE2;
  color: var(--cor-muda);
}
.site-publico .tabela td { border-bottom-color: var(--cor-borda); }

/* --- Painel: casca territorial -------------------------------------------- */
.painel-pagina .painel-topo {
  background: var(--cor-navy);
  border-bottom-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.painel-pagina .marca-painel { color: #fff; }
.painel-pagina .marca-painel span { color: var(--cor-ativa); }
.painel-pagina .painel-topo-busca {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #C6D4C9;
}
.painel-pagina .busca-global { color: #fff; }
.painel-pagina .busca-global:disabled { color: #C6D4C9; }
.painel-pagina .botao-icone {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #E8F0EA;
}
.painel-pagina .botao-icone:disabled:hover { background: rgba(255, 255, 255, .08); }
.painel-pagina .avatar {
  background: var(--cor-ativa);
  color: #241a08;
}
.painel-pagina .painel-identidade-texto { color: #C6D4C9; }
.painel-pagina .painel-topo .botao.secundario {
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.painel-pagina .painel-topo .botao.secundario:hover { background: rgba(255, 255, 255, .10); }
.painel-pagina .painel-topo a:focus-visible,
.painel-pagina .painel-topo button:focus-visible {
  outline-color: #F3C877;
}

.painel-pagina .menu-grupo-titulo { color: #8FA898; }
.painel-pagina .menu-item.ativo {
  background: rgba(223, 162, 59, .16);
  box-shadow: inset 3px 0 0 var(--cor-ativa);
}
.painel-pagina .painel-menu-fundo:not([hidden]) { background: rgba(10, 44, 34, .55); }

.painel-pagina #titulo-secao {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--azul-escuro);
}
.painel-pagina .subtitulo-secao { color: var(--cor-muda); }
.painel-pagina .detalhe-topo h2,
.painel-pagina .gestao-bloco h3,
.painel-pagina .gabinete-bloco h3,
.painel-pagina .aniversario-bloco h2 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--azul-escuro);
}

.painel-pagina .indicador,
.painel-pagina .detalhe,
.painel-pagina .gestao-bloco,
.painel-pagina .gabinete-bloco,
.painel-pagina .gabinetes-tabela,
.painel-pagina .links-linha,
.painel-pagina .agenda-topo,
.painel-pagina .aniversario-card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 59, 46, .04);
}
.painel-pagina .indicador { padding: 14px 16px; }
.painel-pagina .indicador-rotulo { color: var(--cor-muda); }
.painel-pagina .indicador-valor {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: var(--azul-escuro);
}
.painel-pagina .tabela th {
  background: #F2EDE2;
  color: var(--cor-muda);
}
.painel-pagina .tabela tbody tr:hover { background: #FBF7EF; }
.painel-pagina .kanban-coluna { background: #F2EDE2; }
.painel-pagina .kanban-cartao { border-radius: 10px; }
.painel-pagina .aniversario-card { border-color: var(--cor-borda); }
.painel-pagina .aniversario-dia { background: var(--cor-primaria); }
.painel-pagina .links-nota,
.painel-pagina .links-copiado,
.painel-pagina .historico-quando,
.painel-pagina .historico-carregando { color: var(--cor-muda); }
.painel-pagina .links-copiado.ok { color: var(--cor-primaria); }
.painel-pagina .etiqueta.inativa { background: #F2EDE2; color: var(--cor-muda); }
.painel-pagina .demanda-descricao {
  background: #FBF7EF;
  border-color: var(--cor-borda);
  border-radius: 10px;
}
.painel-pagina .historico-demanda li { border-top-color: var(--cor-borda); }
.painel-pagina .perfil input[readonly] { background: #F2EDE2; color: var(--cor-muda); }
.painel-pagina .modal { background: rgba(10, 44, 34, .55); }
.painel-pagina .modal-caixa {
  border-color: var(--cor-borda);
  box-shadow: 0 18px 40px rgba(10, 44, 34, .28);
}
.painel-pagina .formulario input,
.painel-pagina .formulario select,
.painel-pagina .formulario textarea { background: #fff; }
.painel-pagina .botao.principal { background: var(--cor-primaria); }
.painel-pagina .botao:focus-visible,
.painel-pagina .formulario input:focus-visible,
.painel-pagina .formulario select:focus-visible,
.painel-pagina .formulario textarea:focus-visible { outline-color: var(--cor-info); }

/* No celular, o topo do painel é o mesmo verde; o conteúdo respira menos. */
@media (max-width: 760px) {
  .site-publico main.container { padding-top: 28px; padding-bottom: 48px; }
  .site-publico .form-central { padding: 26px 20px 22px; border-radius: 14px; }
  .site-publico .rodape .container { flex-direction: column; align-items: flex-start; }
}

/* --- Dashboard de início (2026-11-10) --------------------------------------
   A visão geral é a porta de entrada do painel. Mantém os componentes da casca
   (indicador, botão, cartão) e acrescenta uma grade própria. Tudo escopado em
   `.painel-pagina`; nenhum `display` é declarado em nó que nasce `[hidden]`. */
.painel-pagina .menu-item-inicio:not([hidden]) {
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px 6px 0 0;
}

.painel-pagina .inicio-saudacao-linha {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.painel-pagina .inicio-saudacao {
  margin: 0;
  color: var(--azul-escuro);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.painel-pagina .inicio-data {
  margin: 2px 0 0;
  color: var(--cor-muda);
  font-size: 14px;
}
.painel-pagina .inicio-data::first-letter { text-transform: uppercase; }
.painel-pagina .inicio-saudacao-linha .botao { flex: none; }

.painel-pagina .inicio-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.painel-pagina .inicio-indicadores .indicador {
  position: relative;
  padding: 16px 58px 16px 16px;
  border-radius: 14px;
  box-shadow: 0 10px 28px -24px rgba(14, 59, 46, .35);
}
.painel-pagina .inicio-kpi-icone {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F2EDE2;
  color: var(--cor-primaria);
}
.painel-pagina .inicio-kpi-icone .icone {
  width: 18px;
  height: 18px;
  fill: none;
}
#inicio-kpi-pessoas .inicio-kpi-icone { background: #E3EADF; color: #2E6B4E; }
#inicio-kpi-demandas .inicio-kpi-icone { background: #FDF3E2; color: #9A6A2A; }
#inicio-kpi-agenda .inicio-kpi-icone { background: #E6F0EC; color: #2F6B5A; }
#inicio-kpi-reunioes .inicio-kpi-icone { background: #F2EDE2; color: #1F7A43; }
.painel-pagina .inicio-kpi-extra {
  color: var(--cor-muda);
  font-size: 12.5px;
}

.painel-pagina .inicio-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.painel-pagina .inicio-bloco {
  min-width: 0;
  padding: 18px 20px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: 0 10px 28px -24px rgba(14, 59, 46, .35);
}
.painel-pagina .inicio-bloco-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.painel-pagina .inicio-bloco-topo h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--azul-escuro);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: -.2px;
}
.painel-pagina .inicio-bloco-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #F2EDE2;
  color: var(--cor-primaria);
}
.painel-pagina .inicio-bloco-icone .icone {
  width: 15px;
  height: 15px;
  fill: none;
}
#inicio-bloco-hoje .inicio-bloco-icone { background: #E6F0EC; color: #2F6B5A; }
#inicio-bloco-demandas .inicio-bloco-icone { background: #FDF3E2; color: #9A6A2A; }
#inicio-bloco-proximos .inicio-bloco-icone { background: #E6F0EC; color: #2F6B5A; }
#inicio-bloco-rede .inicio-bloco-icone { background: #E3EADF; color: #2E6B4E; }
#inicio-bloco-atalhos .inicio-bloco-icone { background: #F2EDE2; color: #1F7A43; }
.painel-pagina .inicio-ver-tudo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cor-primaria);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.painel-pagina .inicio-ver-tudo .icone {
  width: 12px;
  height: 12px;
  fill: none;
}
.painel-pagina .inicio-hoje-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.painel-pagina .inicio-subtitulo {
  margin: 0 0 8px;
  color: var(--cor-muda);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.painel-pagina .inicio-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.painel-pagina .inicio-evento {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-top: 1px solid var(--cor-borda);
}
.painel-pagina .inicio-evento:first-child {
  padding-top: 0;
  border-top: 0;
}
.painel-pagina .inicio-evento-hora {
  flex: 0 0 78px;
  color: var(--cor-muda);
  font-size: 12.5px;
  font-weight: 600;
}
.painel-pagina .inicio-evento-corpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.painel-pagina .inicio-evento-corpo strong {
  color: var(--cor-tinta);
  font-size: 14.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.painel-pagina .inicio-evento-meta {
  color: var(--cor-muda);
  font-size: 12.5px;
}
.painel-pagina .inicio-aniversario-marca {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E3EADF;
  color: var(--cor-primaria);
}
.painel-pagina .inicio-aniversario-marca .icone {
  width: 14px;
  height: 14px;
  fill: none;
}

.painel-pagina .inicio-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.painel-pagina .inicio-status-item {
  padding: 3px 9px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: #F2EDE2;
  color: var(--cor-tinta);
  font-size: 12.5px;
  font-weight: 600;
}
.painel-pagina .inicio-demandas-extra {
  margin: 0;
  color: var(--cor-muda);
  font-size: 12.5px;
}

.painel-pagina .inicio-rede {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.painel-pagina .inicio-rede-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FBF7EF;
}
.painel-pagina .inicio-rede-item span {
  color: var(--cor-muda);
  font-size: 12px;
}
.painel-pagina .inicio-rede-item strong {
  color: var(--azul-escuro);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.painel-pagina #inicio-bloco-atalhos { margin-top: 16px; }
.painel-pagina .inicio-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.painel-pagina .inicio-atalho {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: #fff;
  color: var(--cor-tinta);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.painel-pagina .inicio-atalho:hover {
  border-color: var(--cor-primaria);
  background: #FBF7EF;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -14px rgba(14, 59, 46, .5);
}
.painel-pagina .inicio-atalho:focus-visible {
  outline: 2px solid var(--cor-info);
  outline-offset: 2px;
}
.painel-pagina .inicio-atalho-icone {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #F2EDE2;
  color: var(--cor-primaria);
}
.painel-pagina .inicio-atalho-icone .icone {
  width: 16px;
  height: 16px;
  fill: none;
}
.painel-pagina .inicio-atalho-rotulo { min-width: 0; }
.painel-pagina .inicio-vazio {
  margin: 6px 0 0;
  color: var(--cor-muda);
  font-size: 13px;
}

.painel-pagina .inicio-carregando {
  padding: 10px 0 20px;
  color: var(--cor-muda);
  font-size: 14px;
}
.painel-pagina .inicio-carregando-texto { margin: 0 0 14px; }
.painel-pagina .inicio-skeleton {
  height: 74px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: linear-gradient(90deg, #F2EDE2 25%, #FBF7EF 37%, #F2EDE2 63%);
  background-size: 400% 100%;
  animation: inicio-pulso 1.2s ease infinite;
}
.painel-pagina .inicio-skeleton.curto { height: 46px; }
@keyframes inicio-pulso {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .painel-pagina .inicio-skeleton { animation: none; }
  .painel-pagina .inicio-atalho { transition: none; }
}

@media (max-width: 900px) {
  .painel-pagina .inicio-grade { grid-template-columns: 1fr; }
  .painel-pagina .inicio-hoje-grade { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .painel-pagina .inicio-saudacao-linha {
    flex-direction: column;
    align-items: flex-start;
  }
  .painel-pagina .inicio-saudacao { font-size: 24px; }
  .painel-pagina .inicio-indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .painel-pagina .inicio-indicadores .indicador { padding-right: 52px; }
  .painel-pagina .inicio-rede { grid-template-columns: 1fr; }
  .painel-pagina .inicio-atalhos { grid-template-columns: 1fr; }
  .painel-pagina .inicio-atalho { width: 100%; }
}

/* --- Assinatura do consentimento (público) -------------------------------- */
/* O quadro não fica mais embutido no formulário: um botão abre uma janela em
   tela cheia (no celular, deitada), porque a caixa pequena cortava o traço. */
.assinatura-campo {
  min-width: 0;
  margin: 4px 0 18px;
  padding: 14px 16px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: #fff;
}
.assinatura-campo legend {
  padding: 0 6px;
  color: var(--cor-tinta);
  font-weight: 600;
}
.assinatura-instrucao {
  margin: 0 0 12px;
  color: var(--cor-muda);
  font-size: .92rem;
}
.assinatura-previa {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: #fff;
}
.assinatura-previa img {
  display: block;
  width: 100%;
  max-height: 150px;
  height: auto;
  object-fit: contain;
}
.assinatura-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.assinatura-dica {
  margin: 8px 0 0;
  color: var(--cor-muda);
  font-size: .82rem;
}

/* Janela de assinatura: ocupa a tela inteira. Topo e ações têm altura fixa;
   o quadro é o único elemento que cresce (o canvas mede a caixa em px CSS). */
.assinatura-dialogo {
  position: fixed;
  inset: 0;
  z-index: 3000;
  width: 100%;
  height: 100dvh;
  background: #fff;
  color: var(--cor-tinta);
  overflow: hidden;
}
body.assinatura-travada { overflow: hidden; }

.assinatura-dialogo-interno {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  margin: 0 auto;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(14px + env(safe-area-inset-left));
}
.assinatura-dialogo-topo {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.assinatura-dialogo-topo h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--cor-tinta);
}
.assinatura-dialogo-topo p {
  margin: 3px 0 0;
  color: var(--cor-muda);
  font-size: .9rem;
}
.assinatura-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 10px;
  background: #fff;
  color: var(--cor-muda);
  cursor: pointer;
}
.assinatura-fechar .icone { width: 18px; height: 18px; fill: none; }
.assinatura-fechar:focus-visible { outline: 2px solid var(--cor-info); outline-offset: 2px; }

.assinatura-quadro {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: 12px;
  background: #fff;
}
.assinatura-quadro.tem-traco {
  border-style: solid;
  border-color: var(--cor-primaria);
}
.assinatura-quadro.erro {
  border-style: solid;
  border-color: var(--cor-perigo);
  background: #FDF3F2;
}
.assinatura-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}
.assinatura-dica-quadro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--cor-muda);
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.assinatura-quadro.tem-traco .assinatura-dica-quadro { display: none; }
.assinatura-dialogo-acoes {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 10px;
}
.assinatura-dialogo-acoes .botao { min-width: 96px; }

.dados-assinatura {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}
.dados-assinatura div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.dados-assinatura dt {
  color: var(--cor-muda);
  font-size: .8rem;
  font-weight: 600;
}
.dados-assinatura dd {
  margin: 0;
  color: var(--cor-tinta);
  font-weight: 600;
  text-align: right;
}

@media (max-width: 760px) {
  .assinatura-dialogo-topo p { display: none; }
  .assinatura-dialogo-acoes .botao { flex: 1 1 0; }
  .dados-assinatura div { flex-direction: column; gap: 2px; }
  .dados-assinatura dd { text-align: left; }
}

/* Sem permissão para travar o giro (iOS), a própria janela é desenhada
   deitada — largura = altura da tela e vice-versa. */
@media (orientation: portrait) {
  .assinatura-dialogo--forcar-paisagem .assinatura-dialogo-interno {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100dvh;
    height: 100dvw;
    max-width: none;
    padding: 10px 14px;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
}

/* Assinatura exibida na ficha do contato (painel). */
.painel-pagina .assinatura-consentimento {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}

/* --- Presença (2026-11-11) -------------------------------------------------
   Lista de presença: progresso ao vivo, QR único por encontro e as duas
   listas (presentes/ausentes). O QR é servido pela API autenticada; nada aqui
   busca imagem de terceiro. */
.painel-pagina .presenca-barra {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}
.painel-pagina .presenca-form { margin-bottom: 18px; }
.painel-pagina .presenca-form-nota {
  margin: 0 0 12px;
  color: var(--cor-muda);
  font-size: .9rem;
  line-height: 1.5;
}
.painel-pagina .presenca-meta { color: var(--cor-muda); font-size: 12px; }
.painel-pagina .presenca-status-agendado { background: #F2EDE2; color: var(--cor-muda); }
.painel-pagina .presenca-status-aberto { background: #E3EADF; color: #2E6B4E; }
.painel-pagina .presenca-status-encerrado { background: #F2EDE2; color: var(--cor-muda); }
.painel-pagina .presenca-status-cancelado { background: #FBE4E4; color: #A12B2B; }

.painel-pagina .presenca-detalhe {
  margin: 18px 0;
  padding: 20px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: 0 10px 28px -24px rgba(14, 59, 46, .35);
}
.painel-pagina .presenca-detalhe-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.painel-pagina .presenca-detalhe-topo h2 {
  margin: 0;
  color: var(--cor-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}
.painel-pagina .presenca-detalhe-meta {
  margin: 4px 0 0;
  color: var(--cor-muda);
  font-size: 13px;
}
.painel-pagina .presenca-progresso-bloco { margin: 16px 0; }
.painel-pagina .presenca-progresso-texto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--cor-tinta);
}
.painel-pagina .presenca-progresso-bloco progress {
  width: 100%;
  height: 12px;
  accent-color: var(--cor-primaria);
}

.painel-pagina .presenca-qr-bloco {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  margin-bottom: 18px;
}
.painel-pagina .presenca-qr {
  padding: 8px;
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}
.painel-pagina .presenca-qr svg { display: block; width: 100%; height: auto; }
.painel-pagina .presenca-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.painel-pagina .presenca-link .link-url { flex: 1 1 100%; }

.painel-pagina .presenca-listas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.painel-pagina .presenca-lista-bloco h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--cor-navy);
  font-size: 16px;
}
.painel-pagina .presenca-lista-bloco .campo-busca {
  width: 100%;
  height: 36px;
  margin-bottom: 8px;
  padding: 0 10px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  background: var(--cor-superficie);
  color: var(--cor-tinta);
  font: inherit;
  font-size: 13.5px;
}
.painel-pagina .presenca-pessoas {
  display: grid;
  gap: 6px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.painel-pagina .presenca-pessoa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  background: #FBF7EF;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}
.painel-pagina .presenca-pessoa-nome { font-weight: 600; color: var(--cor-tinta); }
.painel-pagina .presenca-pessoa-meta {
  flex: 1 1 140px;
  color: var(--cor-muda);
  font-size: 12px;
}
.painel-pagina .presenca-vazia-lista {
  margin: 0;
  padding: 10px;
  color: var(--cor-muda);
  font-size: 13px;
}

.painel-pagina .presenca-alertas {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--cor-borda);
}
.painel-pagina .presenca-alertas-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.painel-pagina .presenca-alertas-topo .grafico-titulo { margin: 0; }
.painel-pagina .presenca-alertas-nota {
  max-width: 80ch;
  margin: 8px 0 12px;
  color: var(--cor-muda);
  font-size: 13px;
  line-height: 1.5;
}

.presenca-checkin { max-width: 560px; }
.presenca-checkin-eyebrow {
  margin: 0 0 8px;
  color: var(--cor-ativa);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.presenca-checkin .leads { color: var(--cor-muda); }

@media (max-width: 820px) {
  .painel-pagina .presenca-qr-bloco { grid-template-columns: 1fr; }
  .painel-pagina .presenca-qr { max-width: 240px; }
  .painel-pagina .presenca-listas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .painel-pagina .presenca-detalhe { padding: 14px; }
  .painel-pagina .presenca-pessoa { align-items: flex-start; }
  .painel-pagina .presenca-alertas-topo { align-items: flex-start; }
}

/* --- Notificações e foto do perfil (2026-11-11) ---------------------------- */
.painel-pagina #botao-notificacoes { position: relative; }
.painel-pagina #botao-notificacoes:disabled { opacity: 1; color: var(--cor-muda); }
.painel-pagina .notificacoes-contador {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--cor-superficie);
  border-radius: 999px;
  background: var(--cor-ativa);
  color: #241a08;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.painel-pagina .painel-notificacoes {
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: 45;
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: 0 22px 48px -22px rgba(14, 59, 46, .55);
}
.painel-pagina .painel-notificacoes-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.painel-pagina .painel-notificacoes-topo h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: var(--cor-navy);
}
.painel-pagina .notificacoes-lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.painel-pagina .notificacao {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cor-tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.painel-pagina .notificacao:hover { background: #FBF7EF; }
.painel-pagina .notificacao:focus-visible { outline: 2px solid var(--cor-info); outline-offset: 1px; }
.painel-pagina .notificacao.nao-lida { background: #FDF3E2; }
.painel-pagina .notificacao.nao-lida .notificacao-titulo::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--cor-ativa);
  vertical-align: middle;
}
.painel-pagina .notificacao-titulo {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
}
.painel-pagina .notificacao-mensagem {
  display: block;
  margin-top: 2px;
  color: var(--cor-muda);
  font-size: 12.5px;
  line-height: 1.4;
}
.painel-pagina .notificacao-quando {
  display: block;
  margin-top: 3px;
  color: var(--cor-muda);
  font-size: 11px;
}

.painel-pagina .perfil-foto {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--cor-borda);
}
.painel-pagina .perfil-foto-previa {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #E3EADF;
  color: var(--cor-navy);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .5px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.painel-pagina .perfil-foto-previa.tem-foto { color: transparent; }
.painel-pagina .perfil-foto-texto { min-width: 0; }
.painel-pagina .perfil-foto-titulo {
  margin: 0 0 3px;
  color: var(--cor-navy);
  font-weight: 600;
}
.painel-pagina .perfil-foto-ajuda {
  max-width: 60ch;
  margin: 0 0 8px;
  color: var(--cor-muda);
  font-size: 12.5px;
  line-height: 1.45;
}
.painel-pagina .perfil-foto-texto .acoes { margin: 0; }

.painel-pagina .avatar-recorte-caixa { width: min(92vw, 430px); }
.painel-pagina .avatar-recorte-area {
  position: relative;
  width: min(72vw, 320px);
  aspect-ratio: 1;
  margin: 8px auto 12px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--cor-lateral);
  cursor: grab;
  touch-action: none;
}
.painel-pagina .avatar-recorte-area:active { cursor: grabbing; }
.painel-pagina .avatar-recorte-area img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform-origin: center center;
  user-select: none;
  pointer-events: none;
}
.painel-pagina .avatar-recorte-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--cor-muda);
  font-size: 12.5px;
}
.painel-pagina .avatar-recorte-zoom input { flex: 1; }
.painel-pagina .avatar-recorte-dica {
  margin: 0 0 10px;
  color: var(--cor-muda);
  font-size: 12px;
}
.painel-pagina .avatar.tem-foto {
  background-size: cover;
  background-position: center;
  color: transparent;
}
@media (max-width: 560px) {
  .painel-pagina .painel-notificacoes { top: 62px; right: 12px; left: 12px; width: auto; }
  .painel-pagina .perfil-foto { align-items: flex-start; }
  .painel-pagina .perfil-foto-previa { width: 72px; height: 72px; font-size: 21px; }
}

/* Seletor de equipe ativa no cabeçalho do painel. O `display` só vale quando o
   elemento NÃO está `hidden` — um `display` de autor venceria o [hidden] do
   user agent (a armadilha registrada no CLAUDE.md). */
.painel-pagina .seletor-equipe:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 12.5px;
  color: var(--cor-muda);
}
.painel-pagina .seletor-equipe select {
  min-height: 34px;
  max-width: 240px;
  padding: 0 8px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  background: var(--cor-superficie);
  color: var(--cor-navy);
}

/* --- Demandas: colunas, lista, etiquetas, checklists e anexos -------------- */
.painel-pagina .demandas-modo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.painel-pagina .demandas-modo .botao[aria-pressed="true"] {
  background: var(--cor-verde);
  color: #fff;
  border-color: var(--cor-verde);
}
.painel-pagina .etiqueta {
  display: inline-block;
  padding: 1px 7px;
  margin: 1px 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cor-etiqueta, #0E3B2E) 18%, #fff);
  color: var(--cor-etiqueta, #0E3B2E);
  border: 1px solid color-mix(in srgb, var(--cor-etiqueta, #0E3B2E) 45%, #fff);
  font-size: 11.5px;
  font-weight: 600;
}
.painel-pagina .kanban-cartao-tags { margin: 4px 0 0; min-height: 4px; }
.painel-pagina .link-acao {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cor-verde);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}
.painel-pagina .gerenciar-linhas { display: grid; gap: 8px; margin-bottom: 12px; }
.painel-pagina .gerenciar-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.painel-pagina .gerenciar-linha input[type="text"] { min-width: 180px; }
.painel-pagina .gerenciar-linha input[type="number"] { width: 80px; }
.painel-pagina .checklist-bloco {
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--cor-superficie);
}
.painel-pagina .checklist-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.painel-pagina .checklist-itens { margin: 8px 0; padding-left: 0; list-style: none; }
.painel-pagina .checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
.painel-pagina .item-concluido { text-decoration: line-through; color: var(--cor-muda); }
.painel-pagina .lista-anexos { list-style: none; margin: 0 0 10px; padding: 0; }
.painel-pagina .lista-anexos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--cor-borda);
}