:root{--tinta:#16202b;--fraca:#5b6b7c;--linha:#dde4ea;--fundo:#f5f7f9;--acento:#1f5f8b;--erro:#a4262c;--ok:#1a7f4b}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tinta);background:var(--fundo)}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 20px;background:#fff;border-bottom:1px solid var(--linha);flex-wrap:wrap}
nav{display:flex;flex-wrap:wrap;gap:4px 18px}
nav a{text-decoration:none;color:var(--fraca);font-weight:500}
nav a.ativo{color:var(--acento);border-bottom:2px solid var(--acento);padding-bottom:2px}
.quem{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--fraca)}
.escopo{background:#eef2f6;border-radius:10px;padding:2px 8px}
.escopo.global{background:#fdf1d6;color:#7a5a00;font-weight:600}
main{max-width:1000px;margin:24px auto;padding:0 20px}
h1{font-size:22px;margin:0 0 16px;overflow-wrap:anywhere}h2{font-size:17px;margin:28px 0 10px;overflow-wrap:anywhere}
.grade{display:flex;gap:14px;flex-wrap:wrap}
/* Endereço comprido quebra dentro do cartão: no celular, o da página da senha
   saía da tela (armadilha 41). */
.cartao{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:16px;max-width:460px;overflow-wrap:anywhere}
.cartao.numero{min-width:150px;display:flex;flex-direction:column;gap:2px}
.cartao.numero b{font-size:26px}.cartao.numero span{color:var(--fraca);font-size:13px}
.alerta{color:var(--erro);font-size:12px;font-style:normal}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linha);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linha);font-size:14px;vertical-align:middle}
th{background:#fbfcfd;color:var(--fraca);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:0}
td.num{white-space:nowrap}.vazio{color:var(--fraca);text-align:center;padding:22px}
/* <progress> e não uma <span> com width inline: a política de segurança do
   painel (style-src 'self') BLOQUEIA atributo style=, e a barra aparecia cheia
   em toda caixa vazia — o pior tipo de defeito, porque o navegador não reclama
   e o teste do servidor passa. O elemento nativo leva o valor em atributo, é
   anunciado por leitor de tela e continua estilizável por folha externa. */
progress.barra{display:block;width:100%;height:4px;margin-top:4px;border:0;
  border-radius:2px;overflow:hidden;background:var(--linha);appearance:none;-webkit-appearance:none}
progress.barra::-webkit-progress-bar{background:var(--linha);border-radius:2px}
progress.barra::-webkit-progress-value{background:var(--acento);border-radius:2px}
progress.barra::-moz-progress-bar{background:var(--acento);border-radius:2px}
progress.barra.atencao::-webkit-progress-value{background:#b8860b}
progress.barra.atencao::-moz-progress-bar{background:#b8860b}
progress.barra.cheia::-webkit-progress-value{background:var(--erro)}
progress.barra.cheia::-moz-progress-bar{background:var(--erro)}
label{display:block;margin-bottom:12px;font-size:13px;color:var(--fraca)}
input,select{display:block;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--linha);
  border-radius:6px;font-size:14px;font-family:inherit;background:#fff;color:var(--tinta)}
button{padding:8px 16px;border:0;border-radius:6px;background:var(--acento);color:#fff;
  font-size:14px;font-family:inherit;cursor:pointer}
button.link{background:none;color:var(--acento);padding:0;text-decoration:underline;font-size:13px}
/* background próprio: button.perigo vem depois, com a mesma especificidade de
   button.link, e sem isto o link virava pílula vermelha com texto vermelho. */
button.link.perigo{color:var(--erro);background:none}
button.perigo{background:var(--erro)}
a.botao.secundario{background:none;color:var(--fraca);border:1px solid var(--linha);margin-left:8px}
td.acoes{white-space:nowrap;font-size:13px}
td.acoes form+form::before{content:" · ";color:var(--linha)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:#eef2f6;padding:1px 5px;border-radius:4px}
form.linha{display:inline}
a.botao{display:inline-block;padding:8px 16px;border-radius:6px;background:var(--acento);color:#fff;text-decoration:none}
.aviso{padding:9px 12px;border-radius:6px;font-size:14px}
.aviso.erro{background:#fdeaea;color:var(--erro)}.aviso.ok{background:#e8f6ee;color:var(--ok)}
.aviso.pendente{background:#fdf6e3;color:#7a5a00}.aviso.pendente a{color:inherit}
.nota{color:var(--fraca);font-size:13px}
/* A tabela rola dentro do contêiner, não a página: no celular a coluna cortada
   era a de ações, e o "excluir" ficava fora do alcance. */
.rolagem{overflow-x:auto}
/* Assunto vem do remetente: um token enorme quebra em qualquer ponto em vez
   de alargar a tabela. Os motivos são símbolos do filtro e ficam inteiros. */
td.assunto{min-width:200px;overflow-wrap:anywhere}
.sub{display:block;margin-top:3px;font-size:12px;color:var(--fraca);overflow-wrap:normal}
/* No celular a tabela rola; sem largura mínima ela se espremeria nos 350 px e
   cada linha viraria uma torre de palavras quebradas. */
table.larga{min-width:760px}
form.filtros{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0 0 6px}
form.filtros label{margin:0;min-width:180px}
tr.grupo th{background:#eef3f7;color:var(--tinta);text-transform:none;letter-spacing:0;font-size:13px}
tr.grupo th span{color:var(--fraca);font-weight:400}
tr.excluida td,tr.suspenso td{color:var(--fraca)}
/* As ações quebram linha entre um ato e outro, nunca no meio de um: numa linha
   só, "recuperar mensagens · excluir" saía da tabela a 1280 px */
table.fichas td.acoes{white-space:normal;min-width:210px;line-height:1.9}
table.fichas td.acoes form{white-space:nowrap}
table.fichas pre{white-space:pre-wrap;font-size:12px;margin:.4em 0 0;max-width:70ch}
/* O valor a publicar no DNS é uma linha só, e a chave DKIM passa de 390
   caracteres: quebra em qualquer ponto, e copiar a devolve inteira, porque a
   quebra é só de exibição. */
.cartao.largo{max-width:none;margin-bottom:10px}
pre.registro{white-space:pre-wrap;word-break:break-all;font-size:12px;background:#eef2f6;padding:8px 10px;border-radius:6px;margin:.5em 0}
td.endereco{overflow-wrap:anywhere;min-width:200px}
.cartao h2:first-of-type{margin-top:0}
/* Rótulo que a tabela dá pelo cabeçalho e o cartão do celular, sem cabeçalho, perde. */
.so-celular{display:none}
/* No celular, cada linha (caixa, administrador) vira um cartão: a tabela
   rolando de lado deixava as ações fora da tela (armadilha 41) */
@media (max-width:720px){
  table.fichas{border:0;background:none}
  table.fichas thead{display:none}
  table.fichas,table.fichas tbody,table.fichas tr,table.fichas td,table.fichas th{display:block;width:100%}
  table.fichas tr{background:#fff;border:1px solid var(--linha);border-radius:8px;margin-bottom:10px;padding:4px 0}
  table.fichas tr.grupo{background:none;border:0;padding:0;margin:14px 0 6px}
  table.fichas tr.grupo th{background:none;padding:0}
  table.fichas td{border:0;padding:4px 12px}
  table.fichas td.acoes{min-width:0}
  .so-celular{display:inline}
  /* O Safari do iPhone amplia a tela ao tocar em campo com fonte menor que 16 px */
  input,select{font-size:16px}
}
ol.codigos{columns:2;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;
  letter-spacing:.05em;user-select:all;padding-left:1.6em}
button.secundario{background:none;color:var(--acento);border:1px solid var(--linha)}
/* Caixa de marcar ao lado do texto: a regra geral de input (bloco, largura
   inteira) a punha numa linha e o endereço na seguinte. */
fieldset.membros{border:1px solid var(--linha);border-radius:6px;padding:6px 12px 10px;margin:0 0 14px}
fieldset.membros legend{font-size:13px;color:var(--fraca);padding:0 4px}
p.setor{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--fraca);text-transform:uppercase;letter-spacing:.03em}
label.marca{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;font-size:14px;color:var(--tinta)}
label.marca input{display:inline-block;width:auto;margin:3px 0 0;flex:none}
form.cartao.apagar{margin-top:14px}
article.relatorio{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:8px 22px 18px;max-width:860px}
article.relatorio h1{font-size:20px;margin:14px 0 10px}article.relatorio h2{font-size:16px;margin:22px 0 8px}
article.relatorio blockquote{margin:10px 0;padding:8px 12px;border-left:3px solid var(--acento);background:#f3f7fa;font-size:14px}
table.relatorio{margin:6px 0;max-width:560px}
p.acoes-relatorio{display:flex;gap:8px;align-items:center;flex-wrap:wrap}p.acoes-relatorio a.botao.secundario{margin-left:0}
/* Na impressão (o "salvar em PDF" do navegador), só o relatório. */
@media print{header,p.acoes-relatorio,.aviso{display:none}body,main{background:#fff;margin:0;padding:0}
  article.relatorio{border:0;padding:0;max-width:none}}
.qr{display:block;width:220px;height:220px;margin:6px 0 14px;border:1px solid var(--linha);border-radius:6px}
.segredo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;letter-spacing:.06em;
  background:#f0f3f6;padding:10px 12px;border-radius:6px;user-select:all;word-break:break-all}
/* Só na tela: o navegador não imprime fundo, e o texto clareado para o fundo
   escuro saía quase branco no papel (medido em 11/09/2026, Chromium e WebKit). */
@media screen and (prefers-color-scheme:dark){
  :root{--tinta:#e6ecf2;--fraca:#93a4b5;--linha:#2a3642;--fundo:#131a21;--acento:#6fb3e0}
  body{background:var(--fundo)}header,.cartao,table,input,select{background:#1a232c}
  th{background:#1e2831}tr.grupo th{background:#22303c}table.fichas tr{background:#1a232c}table.fichas tr.grupo{background:none}.escopo{background:#22303c}.escopo.global{background:#3b3117;color:#e8c877}
  .segredo{background:#22303c}.aviso.erro{background:#3a1f21}.aviso.ok{background:#16301f}.aviso.pendente{background:#332a12;color:#e8c877}
}