/* SmartKondo — painel de administração.
   Tema claro por padrão, escuro conforme o sistema ou a escolha do usuário.
   Todas as cores saem de tokens: nenhuma cor literal nos componentes, senão
   um dos temas fica com texto de um sobre fundo do outro. */

:root {
  --fundo:        #f4f6f8;
  --superficie:   #ffffff;
  --superficie-2: #eef1f4;
  --lateral:      #16202e;
  --lateral-item: #93a3b8;
  --lateral-ativo:#ffffff;
  --tinta:        #16202e;
  --tinta-suave:  #46566b;
  --apagado:      #6b7b90;
  --linha:        #dde3e9;
  --linha-suave:  #e9edf1;
  --acento:       #0f8a5f;
  --acento-forte: #0a6d4b;
  --acento-lavado:#e4f3ec;
  /* A marca tem UMA cor, nos dois temas: é o mesmo verde do ícone do app
     (amostrado do icone-512.png: rgb(15,138,95)). Fica separada de --acento
     de propósito — o acento clareia no tema escuro para dar contraste de
     interface, e um logotipo que muda de cor não é o mesmo logotipo. */
  --marca-verde:  #0f8a5f;
  --marca-anel:   #fff;
  --perigo:       #b3261e;
  --perigo-lavado:#fbeae9;
  --alerta:       #a8690b;
  --sombra:       0 1px 2px rgba(22,32,46,.06), 0 10px 30px -22px rgba(22,32,46,.4);
  --raio:         8px;
  --lateral-larg: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo:        #0e141c;
    --superficie:   #161f2b;
    --superficie-2: #1d2836;
    --lateral:      #0b1119;
    --lateral-item: #8496ab;
    --lateral-ativo:#ffffff;
    --tinta:        #e8edf3;
    --tinta-suave:  #c3ccd7;
    --apagado:      #8b9aad;
    --linha:        #29343f;
    --linha-suave:  #212b36;
    --acento:       #3fbd8a;
    --acento-forte: #63d0a4;
    --acento-lavado:#122b21;
    --perigo:       #e2695f;
    --perigo-lavado:#2c1614;
    --alerta:       #d99a3c;
    --sombra:       0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.95);
  }
}

:root[data-theme="dark"] {
  --fundo:        #0e141c;
  --superficie:   #161f2b;
  --superficie-2: #1d2836;
  --lateral:      #0b1119;
  --lateral-item: #8496ab;
  --lateral-ativo:#ffffff;
  --tinta:        #e8edf3;
  --tinta-suave:  #c3ccd7;
  --apagado:      #8b9aad;
  --linha:        #29343f;
  --linha-suave:  #212b36;
  --acento:       #3fbd8a;
  --acento-forte: #63d0a4;
  --acento-lavado:#122b21;
  --perigo:       #e2695f;
  --perigo-lavado:#2c1614;
  --alerta:       #d99a3c;
  --sombra:       0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.95);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------------- marca ---------------- */
.marca { display: flex; align-items: center; gap: 9px; }
/* O mesmo desenho do ícone do app e do PWA (`frontend/icones/`): disco verde,
   anel branco, bola verde no meio. As proporções foram MEDIDAS no
   icone-512.png — verde até 82px, anel de 66px, centro de 216px — o que dá
   anel externo a 0,68 do lado, espessura 0,129 e centro 0,422. Em 22px:
   recuo 3,5px e anel de 2,8px, que devolvem um centro de 9,3px (0,42). Feito
   com borda em vez de imagem porque assim não há arquivo para carregar nem
   versão que fique para trás das outras. */
.marca-simbolo {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--marca-verde);
  position: relative;
}
.marca-simbolo::after {
  content: ""; position: absolute; inset: 3.5px;
  border-radius: 50%;
  /* Token que NÃO muda com o tema, ao contrário dos outros: o anel vive sobre
     o verde da marca, não sobre o fundo da página. */
  border: 2.8px solid var(--marca-anel);
}
.marca-nome { font-weight: 650; letter-spacing: -.01em; font-size: 16px; }

/* ---------------- login ---------------- */
.login {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.login-cartao {
  width: 100%; max-width: 370px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 14px; padding: 30px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px;
}
.login-sub { margin: -6px 0 8px; color: var(--apagado); font-size: 14px; }

.campo { display: flex; flex-direction: column; gap: 2px; }
.campo > span { font-size: 11.5px; font-weight: 600; color: var(--tinta-suave); }
.campo.linha-dupla { grid-column: span 2; }

input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 5px 8px; width: 100%; font-size: 13.5px;
}
input:disabled, select:disabled { background: var(--superficie-2); color: var(--apagado); }
textarea { min-height: 76px; resize: vertical; }

.erro { color: var(--perigo); font-size: 13.5px; margin: 2px 0 0; min-height: 19px; }
.dica { color: var(--apagado); font-size: 12px; margin: 1px 0 0; line-height: 1.35; }

/* ---------------- botões ---------------- */
.botao {
  font: inherit; font-weight: 550; cursor: pointer;
  border: 1px solid var(--linha); background: var(--superficie);
  color: var(--tinta); border-radius: var(--raio); padding: 8px 13px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.botao:hover:not(:disabled) { background: var(--superficie-2); }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao.primario {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.botao.primario:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }
.botao.perigo { color: var(--perigo); border-color: var(--linha); }
.botao.perigo:hover:not(:disabled) { background: var(--perigo-lavado); }
.botao.discreto { border-color: transparent; background: transparent; color: var(--apagado); padding: 5px 8px; }
.botao.discreto:hover { color: var(--tinta); background: var(--superficie-2); }
.botao.icone { padding: 7px 9px; line-height: 1; }
.botao.largo { justify-content: center; width: 100%; padding: 10px; }
.botao.pequeno { padding: 5px 9px; font-size: 13px; }

/* ---------------- estrutura ---------------- */
.app { display: grid; grid-template-columns: var(--lateral-larg) 1fr; min-height: 100dvh; }
.fundo-lateral { display: none; }

.lateral {
  background: var(--lateral); color: var(--lateral-item);
  display: flex; flex-direction: column; padding: 18px 12px;
  position: sticky; top: 0; height: 100dvh;
}
.marca-lateral { color: #fff; padding: 0 8px 18px; }
/* O botão que recolhe a lateral fica na linha da marca, encostado à direita. */
.lateral-alternar {
  margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.12);
  color: var(--lateral-item); border-radius: 6px; width: 26px; height: 26px;
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer; flex: none;
}
.lateral-alternar:hover { color: #fff; background: rgba(255,255,255,.06); }
.menu-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }

.menu-secao {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #5f7186; padding: 16px 10px 6px; font-weight: 600;
}
/* Grupo recolhível: o cabeçalho é o <summary>. Sem o marcador nativo do
   navegador; a seta é nossa e gira quando o grupo abre. */
.menu-grupo > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; user-select: none; border-radius: 6px;
}
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary:hover { color: #9fb0c4; }
.menu-grupo > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.menu-seta {
  font-size: 15px; line-height: 1; transition: transform .15s;
  margin-right: 2px; text-transform: none; letter-spacing: 0;
}
.menu-grupo[open] > .menu-secao .menu-seta { transform: rotate(90deg); }
.menu-grupo:not([open]) > summary { padding-bottom: 8px; }
.menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 6px; color: inherit;
  text-decoration: none; font-size: 14px; cursor: pointer;
}
.menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-item.ativo { background: var(--acento); color: #fff; font-weight: 550; }
.menu-item .glifo { width: 17px; text-align: center; opacity: .95; flex: none; }

.lateral-rodape {
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px; margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.usuario { display: flex; flex-direction: column; min-width: 0; }
.usuario-nome {
  color: #fff; font-size: 13.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta-papel { font-size: 11px; color: #7e8fa4; }

.conteudo { display: flex; flex-direction: column; min-width: 0; }

.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; background: var(--superficie);
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5;
}
.seletor-condominio select { min-width: 230px; font-weight: 550; }

/* Contexto no topo: "Condomínio · Nome · Papel" (ou "Plataforma"). O atributo
   hidden precisa vencer o display das classes (.selo é inline-block). */
[hidden] { display: none !important; }
.contexto-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contexto-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--apagado); font-weight: 600; flex: none;
}
.contexto-nome {
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contexto-topo.fora .contexto-rotulo { color: var(--acento-forte); }

/* Bloco do condomínio no menu: separa as áreas de contas (Plataforma, Minha
   carteira) das seções que pertencem a um prédio específico. */
.menu-condominio {
  margin: 14px 0 4px; padding: 10px 10px 8px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.menu-condominio-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #5f7186; font-weight: 600;
}
.menu-condominio strong {
  color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-condominio-papel { font-size: 11px; color: #7e8fa4; }
.topo-direita { margin-left: auto; display: flex; gap: 6px; }
.so-mobile { display: none; }

.pagina { padding: 24px 22px 64px; max-width: 1240px; width: 100%; }

/* ---------------- cabeçalho de página ---------------- */
.pagina-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.pagina-topo h1 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.pagina-topo p { margin: 4px 0 0; color: var(--apagado); font-size: 14px; max-width: 62ch; }
.pagina-acoes { display: flex; gap: 8px; }

/* ---------------- cartões e indicadores ---------------- */
.grade-indicadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.indicador {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px 16px;
}
.indicador b {
  display: block; font-size: 26px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.indicador span { font-size: 12.5px; color: var(--apagado); }
.indicador.alerta b { color: var(--alerta); }
.indicador.ok b { color: var(--acento); }

.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px 16px; margin-bottom: 14px;
}
.cartao > h2 {
  margin: 0 0 4px; font-size: 15px; letter-spacing: .01em;
}
.cartao > .cartao-sub { margin: 0 0 16px; color: var(--apagado); font-size: 13.5px; }

.aviso {
  border-left: 3px solid var(--alerta); background: var(--superficie);
  border-radius: 0 var(--raio) var(--raio) 0; padding: 11px 15px;
  font-size: 14px; color: var(--tinta-suave); margin-bottom: 16px;
}
.aviso.ruim { border-left-color: var(--perigo); }
.aviso.bom  { border-left-color: var(--acento); }

/* ---------------- barra de ferramentas ---------------- */
.ferramentas {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
}
.ferramentas input[type="search"], .ferramentas select { width: auto; min-width: 160px; }

/* ---------------- tabela ---------------- */
.moldura-tabela {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); overflow: hidden;
}
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--apagado); font-weight: 600; padding: 11px 14px;
  border-bottom: 1px solid var(--linha); white-space: nowrap;
  background: var(--superficie-2);
}
td { padding: 11px 14px; border-bottom: 1px solid var(--linha-suave); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--superficie-2); }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
td.acoes { text-align: right; white-space: nowrap; }
td.acoes .botao { margin-left: 4px; }

.vazio { padding: 40px 20px; text-align: center; color: var(--apagado); }
.vazio p { margin: 0 0 12px; }
/* Hierarquia: a frase que diz o que falta pesa mais que a que explica, e a
   ação vem separada das duas — sem isto as três linhas saíam com o mesmo tom
   e a pessoa não sabia qual ler primeiro. */
.vazio-titulo { color: var(--tinta-suave); font-weight: 600; }
.vazio-descricao { font-size: 13.5px; max-width: 46ch; margin-inline: auto; }
.vazio .botao { margin-top: 4px; }

.selo {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  background: var(--superficie-2); color: var(--tinta-suave);
}
.selo.verde { background: var(--acento-lavado); color: var(--acento-forte); }
.selo.vermelho { background: var(--perigo-lavado); color: var(--perigo); }
/* `alerta` já era pedido pelas telas de encomendas e visitantes e não tinha
   regra nenhuma — o selo saía neutro e a distinção não chegava a existir.
   `info` entrou com a natureza da conta no plano de contas. */
.selo.alerta { background: var(--superficie-2); color: var(--alerta); }
.selo.info { background: var(--superficie-2); color: var(--tinta-suave); }
/* Vários selos na mesma célula (as retenções de um fornecedor). */
.selos { display: flex; flex-wrap: wrap; gap: 4px; }

/* Registro desativado: continua na tela, porque some-lo faria a conta
   inativa parecer apagada — e ela ainda classifica o que já foi lançado. */
tr.esmaecido td { opacity: .55; }

/* Linha que abre um detalhe ao clique (notas fiscais). */
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--superficie-2); }

/* Par rótulo/valor do detalhe da nota fiscal. */
.detalhe-linha { margin-bottom: 8px; }
.detalhe-linha > .dica { display: block; }

/* Receita e despesa no balancete. A cor não sai do sinal do número: estourar
   o previsto é ruim numa despesa e bom numa receita, então quem decide é o
   tipo da conta. */
.valor-receita { color: var(--acento-forte); font-variant-numeric: tabular-nums; }
.valor-despesa { color: var(--perigo); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Conta sintética: é cabeçalho de grupo, não mais uma linha da lista. */
tr.linha-grupo td { background: var(--superficie-2); }

/* Código contábil e CNPJ: dígito embaixo de dígito, senão não dá para
   comparar duas linhas de relance. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.rodape-tabela {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linha);
  font-size: 13px; color: var(--apagado); flex-wrap: wrap;
}

/* ---------------- formulário ---------------- */
/* Grade de 12 colunas. A largura do campo é INFORMAÇÃO: um `UF` do tamanho de
   um `Logradouro` mente sobre o que se espera ali. Com as duas colunas antigas
   todo campo valia meia linha, então a tela virava um zigue-zague de buracos —
   e `756` ganhava 570px para ser digitado.

   O corte é por CONTAINER, não por media query, de propósito: o mesmo
   formulário aparece numa página de 1400px e dentro de um modal de 720px.
   Quem decide o arranjo é a largura que sobrou, não a da janela — com media
   query o modal herdaria o layout largo da página e espremeria tudo. */
.grade-form {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px 12px; container-type: inline-size;
}
.grade-form > .campo,
.grade-form > .campo-checkbox { grid-column: span var(--col, 6); min-width: 0; }
.grade-form input, .grade-form select { min-width: 0; }
.campo.col-1, .campo-checkbox.col-1 { --col: 1; }
.campo.col-2, .campo-checkbox.col-2 { --col: 2; }
.campo.col-3, .campo-checkbox.col-3 { --col: 3; }
.campo.col-4, .campo-checkbox.col-4 { --col: 4; }
.campo.col-5, .campo-checkbox.col-5 { --col: 5; }
.campo.col-6, .campo-checkbox.col-6 { --col: 6; }
.campo.col-7, .campo-checkbox.col-7 { --col: 7; }
.campo.col-8, .campo-checkbox.col-8 { --col: 8; }
.campo.col-9, .campo-checkbox.col-9 { --col: 9; }
.campo.col-10, .campo-checkbox.col-10 { --col: 10; }
/* `linha-dupla` é o nome antigo de "ocupa a linha toda" e continua valendo:
   está espalhado por outras telas e significa a mesma coisa aqui. */
.campo.col-12, .campo.linha-dupla,
.campo-checkbox.col-12 { --col: 12; }

/* Faixa do meio (modal, tablet): as larguras finas não cabem, então todo
   campo vale meia linha — que era o comportamento antigo — e só o que pede a
   linha inteira continua inteiro. */
@container (max-width: 640px) {
  .grade-form > .campo, .grade-form > .campo-checkbox { --col: 6; }
  .grade-form > .campo.col-12, .grade-form > .campo.linha-dupla { --col: 12; }
}
@container (max-width: 430px) {
  .grade-form > .campo, .grade-form > .campo-checkbox { --col: 12; }
}

/* Seção dentro do formulário. Substitui o título que listava três assuntos
   ("Identificação, endereço e dados bancários") por três marcações no lugar
   onde cada assunto começa — a estrutura passa a dizer algo verdadeiro sobre
   o conteúdo em vez de enfileirar campos. A etiqueta em versalete repete o
   idioma que a lateral e o topo já usam. */
.secao-form {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px;
  margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--linha);
}
.secao-form:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.secao-form h3 {
  margin: 0; font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .09em; color: var(--apagado);
}
.secao-form p { margin: 0; font-size: 12.5px; color: var(--tinta-suave); }

.campo-checkbox {
  display: flex; align-items: center; gap: 9px; padding-top: 17px;
}
.campo-checkbox input { width: auto; }
.campo-checkbox span { font-size: 14px; }

/* ---------------- modal ---------------- */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(10,16,24,.55);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.modal {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: var(--sombra);
  width: 100%; max-width: 720px; max-height: 88dvh;
  /* Item de grid nasce com min-width:auto — um rodapé de três botões ou um
     código sem espaços esticava o modal para fora do celular. */
  min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-topo {
  padding: 18px 22px 12px; border-bottom: 1px solid var(--linha);
}
.modal-topo h2 { margin: 0; font-size: 17px; }
.modal-topo p { margin: 4px 0 0; color: var(--apagado); font-size: 13.5px; }
.modal-corpo { padding: 18px 22px; overflow-y: auto; overflow-wrap: anywhere; }
.modal-rodape {
  padding: 14px 22px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.modal-rodape .a-esquerda { margin-right: auto; }

/* ---------------- avisos flutuantes ---------------- */
.avisos {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; max-width: 380px;
}
.flutuante {
  background: var(--superficie); border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio); padding: 11px 15px; box-shadow: var(--sombra);
  font-size: 14px; animation: surgir .18s ease-out;
}
.flutuante.ruim { border-left-color: var(--perigo); }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .flutuante { animation: none; } }

/* ---------------- carregando ---------------- */
.carregando { padding: 40px; text-align: center; color: var(--apagado); }

/* ---------------- responsivo ---------------- */
/* ---------------- lateral recolhida (só na tela larga) ---------------- */
/* Só os ícones. Some tudo que é texto: a marca, o nome do condomínio, os
   cabeçalhos de grupo, os rótulos dos itens e o rodapé — o nome do item vai
   para a dica do mouse (title, posto pelo montarMenu). */
@media (min-width: 901px) {
  .app.recolhida { grid-template-columns: 64px 1fr; }
  .app.recolhida .lateral { padding: 18px 10px; }
  /* O símbolo da marca fica, empilhado sobre o botão: é o que diz "ainda é
     o SmartKondo" quando o nome some. */
  .app.recolhida .marca-lateral {
    padding: 0 0 12px; flex-direction: column; align-items: center; gap: 10px;
  }
  .app.recolhida .marca-nome,
  .app.recolhida .menu-condominio,
  .app.recolhida .menu-grupo > summary,
  .app.recolhida .menu-rotulo,
  .app.recolhida .usuario,
  .app.recolhida #trocar-senha,
  .app.recolhida #sair { display: none; }
  /* A mesma seta, virada: aponta para onde o menu vai ao clicar. */
  .app.recolhida .lateral-alternar { margin-left: 0; transform: rotate(180deg); }
  .app.recolhida .menu-grupo { padding-top: 6px; }
  .app.recolhida .menu-item {
    justify-content: center; padding: 10px 0; gap: 0;
  }
  .app.recolhida .menu-item .glifo { width: auto; font-size: 17px; }
  .app.recolhida .lateral-rodape { justify-content: center; padding-top: 10px; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  /* A gaveta do celular é sempre completa; o botão de recolher não faz
     sentido nela. */
  .lateral-alternar { display: none; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: var(--lateral-larg);
    z-index: 40; transform: translateX(-100%); transition: transform .18s;
  }
  .lateral.aberta { transform: none; }
  .lateral.aberta + .fundo-lateral {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(10,16,24,.45);
  }
  .so-mobile { display: inline-flex; }
  .pagina { padding: 18px 14px 56px; }
  /* A grade não se ajusta mais pela janela: quem manda é o container query
     lá de cima, que vale igual na página e dentro do modal. */
  .seletor-condominio select { min-width: 140px; }
  .contexto-rotulo { display: none; }
  .contexto-nome { font-size: 14px; }
}

/* ---------------- arquivos ---------------- */
.arquivo-linha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px dashed var(--linha);
  border-radius: var(--raio); background: var(--superficie-2);
}
.arquivo-nome { display: flex; align-items: center; gap: 7px; font-size: 14px; min-width: 0; }
.arquivo-glifo { color: var(--acento); }
.arquivo-tamanho { font-size: 12.5px; color: var(--apagado); }
.arquivo-vazio { font-size: 14px; color: var(--apagado); flex: 1; }
.arquivo-linha .botao { margin-left: auto; }

/* ---------------- medidor de plano ---------------- */
.medidor { margin: 10px 0 0; }
.medidor-topo {
  display: flex; justify-content: space-between; font-size: 12.5px;
  color: var(--apagado); margin-bottom: 5px;
}
.medidor-trilho {
  height: 7px; background: var(--superficie-2); border-radius: 4px; overflow: hidden;
}
.medidor-barra { height: 100%; background: var(--acento); border-radius: 4px; }
.medidor-barra.cheio { background: var(--perigo); }
.medidor-barra.quase { background: var(--alerta); }

/* ---------------- interfone: a chamada do portão no navegador ------------- */
/* Sobreposição acima de tudo (inclusive do modal): tem alguém no portão. */
#interfone-chamada {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 32, 46, .6);
}
.interfone-cartao {
  background: var(--superficie); color: var(--tinta);
  border-radius: 12px; padding: 24px 28px; min-width: 260px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); text-align: center;
}
.interfone-titulo { margin: 0 0 4px; color: var(--apagado); font-size: .9rem; }
.interfone-quem { margin: 0 0 16px; font-size: 1.3rem; font-weight: 600; }
.interfone-botoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ------------- visitas do morador: cartões em vez de tabela --------------- */
/* No celular, uma tabela de seis colunas vira rolagem horizontal com o
   código escondido. O cartão põe o código à vista e "Enviar código" à mão. */
.visitas-lista { display: flex; flex-direction: column; gap: 10px; }
.visita-cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 10px; padding: 14px 16px;
}
.visita-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; flex-wrap: wrap; font-size: 1.05rem;
}
.visita-selos { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.visita-sub { color: var(--apagado); font-size: 13px; margin: 3px 0 10px; }
.visita-codigo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--fundo); border-radius: 8px; padding: 9px 12px;
  margin-bottom: 10px;
}
.visita-validade { color: var(--apagado); font-size: 12.5px; }
.visita-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------- foto de cadastro: câmera, miniatura e balão ------------- */
.foto-linha { display: flex; align-items: center; gap: 12px; }
.foto-miniatura {
  width: 84px; height: 84px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--fundo);
}
.foto-lado { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foto-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
/* A webcam abre POR CIMA do modal do formulário (z-index 50). O vídeo vai
   espelhado, como espelho de verdade; a foto capturada sai sem espelhar. */
.fundo-webcam { z-index: 60; }
.webcam-video {
  display: block; width: 100%; max-height: 60vh; border-radius: 10px;
  background: #000; transform: scaleX(-1);
}

.balao-foto {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none;
  background: var(--acento); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.balao-foto img { width: 100%; height: 100%; object-fit: cover; }
.com-avatar { display: inline-flex; align-items: center; gap: 8px; }

/* O balão do usuário logado, no rodapé da lateral. */
#usuario-foto .balao-foto { border: 1px solid rgba(255, 255, 255, .25); }

/* ---------------- busca global (Ctrl+K) ---------------- */
/* Reaproveita o .fundo-modal; o que muda é o alinhamento, porque uma paleta
   de comandos vive no alto da tela, não no centro — a lista cresce para baixo
   e o olho já está onde a resposta vai aparecer. */
.fundo-busca { align-items: flex-start; padding-top: 12vh; }
.busca {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: var(--sombra);
  width: 100%; max-width: 560px; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.busca-topo { padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.busca-campo {
  width: 100%; border: 0; background: transparent; color: var(--tinta);
  font: inherit; font-size: 16px; padding: 6px 4px; outline: none;
}
.busca-campo::-webkit-search-cancel-button { display: none; }
.busca-lista { max-height: 52dvh; overflow-y: auto; padding: 6px; }
.busca-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: var(--raio);
}
/* Um realce só para teclado e ponteiro: com dois (hover + marcado) a lista
   mostrava duas linhas acesas e o Enter agia na que a pessoa não olhava. */
.busca-item.marcado { background: var(--acento-lavado); color: var(--acento-forte); }
.busca-glifo { width: 1.2em; text-align: center; opacity: .75; }
.busca-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-grupo { font-size: 12px; color: var(--apagado); flex-shrink: 0; }
.busca-item.marcado .busca-grupo { color: inherit; opacity: .8; }
.busca-nada { margin: 0; padding: 18px 10px; text-align: center; color: var(--apagado); }
.busca-rodape {
  padding: 8px 14px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--apagado);
}

.busca-atalho {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--superficie-2); border: 1px solid var(--linha);
  color: var(--apagado); border-radius: var(--raio);
  font: inherit; font-size: 13.5px; padding: 6px 10px; cursor: pointer;
}
.busca-atalho:hover { color: var(--tinta-suave); border-color: var(--linha); }
.busca-atalho-texto, .busca-atalho-tecla { display: none; }
.busca-atalho-tecla {
  border: 1px solid var(--linha); border-radius: 4px;
  padding: 1px 5px; font-size: 11px; background: var(--superficie);
}
@media (min-width: 640px) {
  .busca-atalho-texto { display: inline; }
  .busca-atalho-tecla { display: inline; }
  .busca-atalho { min-width: 190px; }
  .busca-atalho-texto { flex: 1; text-align: left; }
}

/* ---------------- chamados de manutenção ---------------- */
/* Duas colunas no desktop: o formulário fica à vista porque abrir chamado é
   o gesto que mais se repete depois de uma ronda — e no celular ele sai da
   frente, onde a lista é o que importa (o botão "Novo chamado" o traz num
   modal). */
.chamados-grade {
  display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
/* O cartão é estreito de propósito, e a grade do formulário viraria uma
   coluna só abaixo de 430px. Aqui os campos são curtos (categoria e
   prioridade, local e referência, as duas fotos): ficam em pares como na
   referência do dono, e o cartão para de ter o dobro da altura da lista. */
.chamados-form .grade-form > .campo,
.chamados-form .grade-form > .campo-checkbox { --col: 6; }
.chamados-form .grade-form > .campo.col-12,
.chamados-form .grade-form > .campo-checkbox.col-12 { --col: 12; }
.chamados-form .grade-form { gap: 9px 12px; }
.chamados-form .campo > span:first-child { font-size: 12.5px; }
/* Foto no cartão: a miniatura e os botões cabem numa linha curta. */
.chamados-form .foto-linha { gap: 8px; }
.chamados-form .foto-miniatura { width: 40px; height: 40px; }
.chamados-form .foto-botoes .botao { padding: 5px 9px; font-size: 12.5px; }
.chamados-form .arquivo-vazio { font-size: 12.5px; }
/* Filtros: seletores curtos e a busca ocupando o que sobra da linha. */
.chamados-filtros input[type="search"] { flex: 1 1 240px; min-width: 200px; }
.chamados-form, .chamados-lista { margin-bottom: 0; }
.cartao-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 14px;
}
.cartao-topo h2 { margin: 0; font-size: 15px; }
.cartao-topo span { font-size: 12.5px; color: var(--apagado); text-align: right; }
.chamados-lista-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chamados-form .botao.largo { width: 100%; justify-content: center; margin-top: 6px; }

/* Abas de situação. São filtro, não navegação: trocam a consulta da lista. */
.abas {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px;
  border-bottom: 1px solid var(--linha); padding-bottom: 10px;
}
.aba {
  background: none; border: 1px solid transparent; border-radius: 20px;
  color: var(--apagado); font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 5px 12px; cursor: pointer;
}
.aba:hover { color: var(--tinta-suave); background: var(--superficie-2); }
.aba.ativa { background: var(--acento); border-color: var(--acento); color: #fff; }

.chamados-lote {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--superficie-2); border-radius: var(--raio);
  font-size: 13px; color: var(--apagado);
}
.chamados-lote .campo-checkbox { margin: 0; }

.chamados-itens { display: flex; flex-direction: column; }
/* A faixa lateral é a prioridade — a informação que decide a ordem de
   atendimento, lida antes de qualquer texto. A cor NUNCA é a única pista:
   o selo ao lado diz a mesma coisa por escrito. */
.chamado {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 12px 12px 14px; cursor: pointer;
  border-top: 1px solid var(--linha);
  border-left: 4px solid var(--linha);
}
.chamado:first-child { border-top: none; }
.chamado:hover { background: var(--superficie-2); }
.chamado.prio-baixa { border-left-color: var(--linha); }
.chamado.prio-media { border-left-color: var(--acento); }
.chamado.prio-alta { border-left-color: var(--alerta); }
.chamado.prio-urgente { border-left-color: var(--perigo); }
.chamado-marca { padding-top: 2px; }
.chamado-corpo { flex: 1; min-width: 0; }
.chamado-cabeca {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12.5px; color: var(--apagado);
}
.chamado-numero { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.chamado-titulo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; margin: 2px 0 3px;
}
.chamado-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--apagado);
}
.chamado-meta strong { color: var(--tinta-suave); font-weight: 600; }
.chamado-fotos-mini { display: flex; gap: 6px; margin-top: 8px; }
.chamado-lado {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex: none; text-align: right;
}
.chamado-idade { font-size: 11.5px; color: var(--apagado); }

/* Miniatura de foto anexada (o blob é autenticado — ver `miniatura` no ui.js). */
.miniatura {
  display: inline-block; border-radius: 6px; overflow: hidden; flex: none;
  background: var(--superficie-2); border: 1px solid var(--linha);
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-falhou { opacity: .4; }

/* ---- detalhe do chamado ---- */
.chamado-detalhe-selos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chamado-descricao { margin: 12px 0; white-space: pre-wrap; }
.chamado-secao { margin: 18px 0 8px; font-size: 14px; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13.5px; }
.ficha dt { color: var(--apagado); }
.ficha dd { margin: 0; }
.chamado-fotos { display: flex; gap: 14px; margin: 14px 0; }
.chamado-fotos figure { margin: 0; cursor: pointer; text-align: center; }
.chamado-fotos figcaption { font-size: 12px; color: var(--apagado); margin-top: 4px; }

/* A linha do tempo mistura duas naturezas: o MARCO (o sistema registrando que
   o status mudou) e o comentário de uma pessoa. O recuo e a cor separam os
   dois — sem isso, "Concluído" pareceria alguém dizendo "concluído". */
.linha-tempo { display: flex; flex-direction: column; gap: 10px; }
.linha-item {
  border-left: 2px solid var(--linha); padding: 2px 0 2px 12px;
}
.linha-item.marco { border-left-color: var(--acento); }
.linha-item.marco .linha-cabeca strong { color: var(--acento-forte); }
.linha-cabeca {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px;
}
.linha-quando { color: var(--apagado); font-size: 12px; margin-left: auto; }
.linha-item p { margin: 3px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.chamado-comentar { margin-top: 16px; }
.chamado-comentar textarea { width: 100%; }
.chamado-comentar-acoes {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px;
}
.chamado-comentar-acoes .campo-checkbox { margin: 0; }

@media (max-width: 900px) {
  .chamados-grade { grid-template-columns: 1fr; }
  /* No celular o formulário mora no modal do botão "Novo chamado". */
  .chamados-form { display: none; }
  .chamado-lado { align-items: flex-start; text-align: left; }
}

/* ---------------- relatório para papel ---------------- */
/* O PDF sai pela impressão do navegador ("Salvar como PDF"): o relatório que
   o síndico leva para a assembleia é a própria lista, com os filtros que ele
   escolheu, e não vale uma dependência nova no servidor para isso. */
.relatorio-impressao { display: none; }
@media print {
  body.imprimindo > :not(.relatorio-impressao) { display: none !important; }
  body.imprimindo { background: #fff; }
  .relatorio-impressao { display: block; color: #000; font-size: 11pt; }
  .relatorio-impressao header { margin-bottom: 14pt; }
  .relatorio-impressao h1 { font-size: 16pt; margin: 0 0 4pt; }
  .relatorio-impressao header p { margin: 0; font-size: 10pt; color: #333; }
  .relatorio-impressao table { width: 100%; border-collapse: collapse; }
  .relatorio-impressao th, .relatorio-impressao td {
    border-bottom: .5pt solid #999; padding: 4pt 6pt; text-align: left;
    vertical-align: top;
  }
  .relatorio-impressao thead { display: table-header-group; }
  .relatorio-impressao tr { page-break-inside: avoid; }
  .relatorio-impressao footer { margin-top: 10pt; font-size: 10pt; color: #333; }
}

/* Senha do portão no "Editar morador" (0069): grava por rota própria, por
   isso fica num bloco à parte do formulário. */
.secao-senha-portao {
  border: 1px solid var(--linha); border-radius: 8px;
  padding: 10px 12px; margin: 14px 0 0; gap: 6px;
}
.secao-senha-portao legend { font-size: 11.5px; font-weight: 600; color: var(--tinta-suave); padding: 0 4px; }
.secao-senha-portao .ferramentas { align-items: flex-end; margin-bottom: 0; }
.secao-senha-portao input { width: 150px; }

/* Moradores por bloco (moradores-mapa.js): uma coluna por bloco, cartão por unidade.
   Verde = proprietário mora; âmbar = inquilino; tracejado = sem morador. */
.mapa-ferramentas { align-items: center; }
.mapa-ferramentas input[type="search"] { min-width: 260px; }
.mapa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie);
  color: var(--tinta-suave); font-size: 13px; cursor: pointer;
}
.mapa-chip b { font-variant-numeric: tabular-nums; color: var(--tinta); }
.mapa-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--apagado); }
.mapa-chip.proprio i { background: var(--acento); }
.mapa-chip.alugada i { background: var(--alerta); }
.mapa-chip.vazia i { background: transparent; border: 1.5px dashed var(--apagado); }
.mapa-chip.semcontato i, .mapa-chip.semapp i { background: var(--perigo); }
.mapa-chip.ativo { border-color: var(--acento); background: var(--acento-lavado); color: var(--acento-forte); }

.mapa-grade {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mapa-coluna {
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 12px 10px;
}
.mapa-coluna header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.mapa-coluna h2 { margin: 0; font-size: 15px; letter-spacing: .01em; }
.mapa-coluna header span { font-size: 12px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.mapa-barra { height: 3px; border-radius: 3px; background: var(--linha); margin: 8px 2px 4px; overflow: hidden; }
.mapa-barra i { display: block; height: 100%; background: var(--acento); }
.mapa-andar h3 {
  margin: 12px 2px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--apagado);
}
.mapa-unidade {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  margin-bottom: 6px; padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha); border-left: 4px solid var(--acento); border-radius: 6px;
}
.mapa-unidade:hover, .mapa-unidade:focus-visible { border-color: var(--acento); }
.mapa-unidade.alugada {
  border-left-color: var(--alerta);
  background: color-mix(in srgb, var(--alerta) 10%, var(--superficie));
}
.mapa-unidade.vazia { border-style: dashed; border-left: 1px dashed var(--apagado); background: transparent; }
.mapa-unidade.vazia .mapa-nome { color: var(--apagado); font-style: italic; }
.mapa-numero { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.mapa-nome { font-size: 13px; line-height: 1.3; }
.mapa-nome small { color: var(--apagado); }
.mapa-prop { font-size: 11.5px; color: var(--apagado); }
.mapa-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.mapa-marcas span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; background: var(--superficie-2); color: var(--tinta-suave);
}
.mapa-nada { font-size: 13px; color: var(--apagado); margin: 12px 2px 4px; }
.mapa-lista { display: flex; flex-direction: column; gap: 10px; }
.mapa-pessoa { display: flex; align-items: center; gap: 12px; }
.mapa-pessoa > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mapa-pessoa small { color: var(--apagado); font-size: 12.5px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .mapa-ferramentas input[type="search"] { min-width: 0; width: 100%; }
}
@media print {
  .mapa-ferramentas, .pagina-acoes { display: none; }
  .mapa-grade { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .mapa-unidade { break-inside: avoid; }
}

/* Painel de gestão (painel.js): indicadores com denominador, colunas de
   pendências e agenda. */
.painel-kpis {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.painel-kpi {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  color: var(--tinta); text-decoration: none;
}
.painel-kpi:hover, .painel-kpi:focus-visible { border-color: var(--acento); }
.painel-kpi-rotulo { font-size: 12.5px; color: var(--apagado); }
.painel-kpi b {
  font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.painel-kpi b small { font-size: 15px; font-weight: 500; color: var(--apagado); }
.painel-kpi-barra, .painel-progresso {
  display: block; height: 4px; border-radius: 4px; background: var(--linha-suave); overflow: hidden;
}
.painel-kpi-barra i, .painel-progresso i { display: block; height: 100%; background: var(--acento); }
.painel-kpi-nota { font-size: 12.5px; color: var(--tinta-suave); }
.painel-kpi.ruim .painel-kpi-barra i { background: var(--perigo); }
.painel-kpi.ruim .painel-kpi-nota { color: var(--perigo); font-weight: 600; }

.painel-colunas { display: grid; gap: 14px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
/* Estreito: uma coluna só, e o "Abrir portão" sobe para logo abaixo dos
   números — no celular é o botão mais usado da tela. */
@media (max-width: 1000px) {
  .painel-colunas { display: flex; flex-direction: column; gap: 0; }
  .painel-coluna { display: contents; }
  .painel-portao { order: -1; }
}
@media (max-width: 640px) {
  .painel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .painel-kpi { padding: 12px; }
  .painel-kpi b { font-size: 22px; }
}
.painel-coluna > .cartao { margin-bottom: 14px; }
.painel-lista { display: flex; flex-direction: column; margin: 0 -16px 10px; }
.painel-linha {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--linha-suave);
  color: var(--tinta); text-decoration: none;
}
.painel-linha:hover { background: var(--superficie-2); }
.painel-linha > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.painel-linha strong { font-size: 14px; font-weight: 600; }
.painel-linha small { font-size: 12.5px; color: var(--apagado); }
.painel-linha .selo { flex-shrink: 0; }
.painel-tudo-certo { color: var(--acento-forte); font-weight: 600; margin: 8px 0 4px; }
.painel-mais { margin: 0; }
.painel-progresso { margin: -6px 0 12px; }
.painel-passos { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.painel-passos li { padding: 6px 0 6px 26px; position: relative; }
.painel-passos li::before {
  content: ''; position: absolute; left: 2px; top: 9px; width: 14px; height: 14px;
  border-radius: 50%; border: 1.5px solid var(--apagado);
}
.painel-passos li.feito { color: var(--apagado); text-decoration: line-through; }
.painel-passos li.feito::before {
  content: '✓'; border-color: var(--acento); background: var(--acento); color: var(--superficie);
  font-size: 10px; line-height: 14px; text-align: center; font-weight: 700;
}

/* Pagamentos do mês (pagamentos.js): abas de mês, cinco números, grupos. */
.pg-abas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.pg-abas select { width: auto; }
.pg-aba {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie);
  color: var(--tinta); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pg-aba small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.pg-aba.ativa { background: var(--acento); border-color: var(--acento); color: var(--superficie); }
.pg-aba.ativa small { color: var(--superficie); opacity: .8; }
.pg-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 12px; }
.pg-kpi {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 14px 10px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
}
.pg-kpi b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pg-kpi span { font-size: 13px; color: var(--tinta-suave); }
.pg-kpi small { font-size: 11.5px; color: var(--apagado); }
.pg-kpi.bom b { color: var(--acento-forte); }
.pg-kpi.alerta b { color: var(--alerta); }
.pg-kpi.ruim b { color: var(--perigo); }
.pg-uso { margin-bottom: 16px; }
.pg-uso-barra { height: 8px; border-radius: 8px; background: var(--linha-suave); overflow: hidden; }
.pg-uso-barra i { display: block; height: 100%; background: var(--acento); }
.pg-uso-barra i.estourou { background: var(--perigo); }
.pg-uso-legenda { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; font-size: 12.5px; color: var(--apagado); }
.pg-grupos { display: flex; flex-direction: column; gap: 14px; }
.pg-grupo > header {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  padding: 11px 14px; border-bottom: 1px solid var(--linha);
}
.pg-grupo h2 { margin: 0; font-size: 14.5px; }
.pg-grupo header > span { font-size: 13px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.pg-doc { color: var(--tinta-suave); font-size: 13px; max-width: 34ch; }
tr.pg-clicavel { cursor: pointer; }
tr.pg-clicavel:hover td { background: var(--superficie-2); }
tr.pg-sub td { font-size: 13px; color: var(--tinta-suave); background: var(--superficie-2); }
@media print {
  .pg-abas, .ferramentas { display: none; }
  .pg-grupo { break-inside: avoid; }
}
.pg-busca { min-width: 280px !important; }
/* Uma tabela por grupo: largura fixa para as colunas se alinharem entre eles. */
.pg-grupo table { table-layout: fixed; min-width: 880px; }
.pg-grupo th:nth-child(1) { width: 80px; }
.pg-grupo th:nth-child(3), .pg-grupo th:nth-child(4), .pg-grupo th:nth-child(5) { width: 130px; }
.pg-grupo th:nth-child(6) { width: 150px; }
.pg-grupo th:nth-child(7) { width: 110px; }
.pg-grupo th:nth-child(2) { width: 26%; }
.pg-grupo td { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pg-abas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .pg-aba { flex-shrink: 0; }
  .pg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pg-kpi { padding: 10px 6px; }
  .pg-kpi b { font-size: 16px; }
  .pg-busca { min-width: 0 !important; width: 100%; }
}

/* Informativo (informativo.js): lista de edições e a barra do editor. O
   jornal em si mora num iframe com o CSS dele. */
.inf-lista { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.inf-cartao {
  display: flex; flex-direction: column; text-decoration: none; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
}
.inf-cartao:hover, .inf-cartao:focus-visible { border-color: var(--acento); }
/* A "capa" lembra o cabeçalho do jornal: papel claro nos dois temas. */
.inf-capa {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px 14px 16px; background: #fff; color: #1F3A5F; border-bottom: 3px double #1F3A5F;
  min-height: 132px;
}
.inf-capa small { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: #6B6B6B; }
.inf-capa b { font-family: Lora, Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.15; }
.inf-capa span { font-size: 12.5px; color: #9C3B23; font-weight: 600; }
.inf-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; }
.inf-meta small { color: var(--apagado); font-size: 12.5px; }
.inf-barra {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0; background: var(--fundo); border-bottom: 1px solid var(--linha); margin-bottom: 10px;
}
.inf-nome { width: auto; min-width: 200px; font-weight: 600; }
.inf-estado { font-size: 13px; color: var(--apagado); }
.inf-estado.sujo { color: var(--alerta); font-weight: 600; }
.inf-espaco { flex: 1; }
.inf-dica { margin: 0 0 10px; }
.inf-area { background: #E9ECF1; border-radius: var(--raio); overflow: hidden; }
.inf-quadro { display: block; width: 100%; border: 0; min-height: 400px; background: #E9ECF1; }
@media (max-width: 640px) {
  .inf-nome { min-width: 0; flex: 1; }
  .inf-dica { display: none; }
}

/* Enquadrar foto (ui.js, abrirEnquadramento): a imagem inteira, escurecida
   fora da moldura. As alças ficam DENTRO da moldura para não serem cortadas
   quando ela encosta na borda da imagem. */
.enquadrar-area {
  display: flex; justify-content: center; background: #000; border-radius: 10px; overflow: hidden;
}
.enquadrar-palco {
  position: relative; display: inline-block; line-height: 0; overflow: hidden;
  user-select: none; -webkit-user-select: none; max-width: 100%;
}
.enquadrar-imagem { display: block; max-width: 100%; max-height: 60vh; }
.enquadrar-moldura {
  position: absolute; border: 2px solid #fff; cursor: move; touch-action: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
}
.enquadrar-alca {
  position: absolute; width: 22px; height: 22px; border: 0 solid #fff; touch-action: none;
}
.enquadrar-alca[data-canto="nw"] { left: 0; top: 0; border-width: 5px 0 0 5px; cursor: nwse-resize; }
.enquadrar-alca[data-canto="ne"] { right: 0; top: 0; border-width: 5px 5px 0 0; cursor: nesw-resize; }
.enquadrar-alca[data-canto="sw"] { left: 0; bottom: 0; border-width: 0 0 5px 5px; cursor: nesw-resize; }
.enquadrar-alca[data-canto="se"] { right: 0; bottom: 0; border-width: 0 5px 5px 0; cursor: nwse-resize; }