/* Canal de Denúncias. Sem fontes externas: usa as fontes do sistema.
   Cores verificadas para contraste WCAG 2.1 AA (texto normal ≥ 4.5:1). */
:root {
  --texto: #1b1b1b;
  --texto-suave: #4a4a4a;      /* 8.9:1 sobre branco */
  --fundo: #ffffff;
  --fundo-suave: #f3f4f6;
  --primaria: #0b4f8a;         /* 8.4:1 sobre branco */
  --primaria-escura: #083b67;
  --borda: #6b7280;            /* 4.8:1, borda de campos */
  --erro: #a1140f;             /* 8.0:1 sobre branco */
  --erro-fundo: #fdecec;
  --ok: #1d6b33;               /* 6.6:1 sobre branco */
  --ok-fundo: #e8f5ec;
  --aviso-fundo: #fff4d6;
  --aviso-borda: #8a5a00;
  --conversa-fundo: #eaf3fc;
  --conversa-borda: #0b4f8a;
  --nota-fundo: #fff4d6;
  --nota-borda: #8a5a00;
  --foco: #ffbf47;
  --raio: 6px;
}

* { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
}

a { color: var(--primaria); text-underline-offset: 0.15em; }
a:hover { color: var(--primaria-escura); }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--texto);
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--fundo); padding: 0.5rem 1rem; z-index: 10;
}
.pular:focus { left: 1rem; top: 1rem; }

.topo { background: var(--primaria); color: #fff; }
.faixa {
  max-width: 60rem; margin: 0 auto; padding: 0.875rem 1rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; justify-content: space-between;
}
.marca { color: #fff; font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.marca:hover { color: #fff; text-decoration: underline; }
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.menu a, .menu button.link { color: #fff; }
.menu form { margin: 0; }

.conteudo { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.conteudo:focus { outline: none; }
.estreito { max-width: 40rem; }

.rodape { border-top: 1px solid #d1d5db; color: var(--texto-suave); font-size: 0.9375rem; }
.rodape p { max-width: 60rem; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.3125rem; line-height: 1.3; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.125rem; margin: 1.25rem 0 0.5rem; }

.lead { font-size: 1.1875rem; }
.suave { color: var(--texto-suave); }
.pequeno { font-size: 0.9375rem; }

/* Botões */
.botao, button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.7rem 1.25rem; border-radius: var(--raio); border: 2px solid var(--primaria);
  background: var(--primaria); color: #fff; text-decoration: none; min-height: 44px;
}
.botao:hover, button:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); color: #fff; }
.botao.secundario, button.secundario { background: var(--fundo); color: var(--primaria); }
.botao.secundario:hover, button.secundario:hover { background: var(--fundo-suave); color: var(--primaria-escura); }
button.perigo { background: var(--erro); border-color: var(--erro); }
button.link {
  background: none; border: none; padding: 0; min-height: 0; color: var(--primaria);
  text-decoration: underline; font-weight: 400;
}
button:disabled, .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.acoes.grandes .botao { font-size: 1.125rem; padding: 0.9rem 1.5rem; }

/* Formulários */
form { margin: 0; }
fieldset { border: 1px solid #d1d5db; border-radius: var(--raio); padding: 1rem 1rem 0.5rem; margin: 0 0 1.5rem; }
legend { font-weight: 700; padding: 0 0.35rem; font-size: 1.0625rem; }
.campo { margin: 0 0 1.25rem; }
label, .rotulo { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.dica { display: block; color: var(--texto-suave); font-size: 0.9375rem; margin: -0.1rem 0 0.4rem; font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"],
select, textarea {
  width: 100%; max-width: 100%; font: inherit; color: var(--texto); background: var(--fundo);
  border: 2px solid var(--borda); border-radius: var(--raio); padding: 0.55rem 0.7rem; min-height: 44px;
}
textarea { min-height: 8rem; resize: vertical; }
input[type="file"] { font: inherit; max-width: 100%; }
.opcoes { display: grid; gap: 0.75rem; }
.opcao {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-items: start;
  border: 2px solid #d1d5db; border-radius: var(--raio); padding: 0.85rem;
}
.opcao input { width: 1.35rem; height: 1.35rem; margin: 0.2rem 0 0; }
.opcao label { margin: 0; }
.opcao .dica { grid-column: 2; margin: 0; }
.opcao:has(input:checked) { border-color: var(--primaria); background: var(--conversa-fundo); }
.caixa-marcar { display: flex; gap: 0.6rem; align-items: flex-start; }
.caixa-marcar input { width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; flex: none; }
.caixa-marcar label { font-weight: 600; margin: 0; }
.campo-erro input, .campo-erro textarea, .campo-erro select { border-color: var(--erro); }
.msg-erro { color: var(--erro); font-weight: 600; display: block; margin-bottom: 0.3rem; }
.grade-2 { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .grade-2 { grid-template-columns: 1fr 1fr; } }
.pessoa { border-top: 1px dashed #d1d5db; padding-top: 0.75rem; }
.pessoa:first-of-type { border-top: 0; padding-top: 0; }

/* Alertas */
.alerta { border-left: 6px solid var(--primaria); background: var(--conversa-fundo); padding: 0.9rem 1rem; border-radius: var(--raio); margin: 1rem 0 1.5rem; }
.alerta > :first-child { margin-top: 0; }
.alerta > :last-child { margin-bottom: 0; }
.alerta h2 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.alerta.erro { border-color: var(--erro); background: var(--erro-fundo); }
.alerta.aviso { border-color: var(--aviso-borda); background: var(--aviso-fundo); }
.alerta.ok { border-color: var(--ok); background: var(--ok-fundo); }
.marcador-juridico { border: 2px dashed var(--aviso-borda); background: var(--aviso-fundo); padding: 0.6rem 0.8rem; border-radius: var(--raio); }

/* Cartões e listas */
.cartoes { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .cartoes { grid-template-columns: 1fr 1fr; } }
.cartao { border: 1px solid #d1d5db; border-radius: var(--raio); padding: 1rem 1.1rem; }
.cartao h3 { margin-top: 0; }
ol.passos { padding-left: 1.4rem; }
ol.passos li { margin-bottom: 0.6rem; }

/* Credenciais na confirmação */
.credenciais { border: 3px solid var(--primaria); border-radius: 10px; padding: 1.25rem; margin: 1.25rem 0; background: var(--fundo); }
.credencial { margin: 0 0 1.25rem; }
.credencial:last-child { margin-bottom: 0; }
.credencial .valor {
  display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em; word-break: break-all;
  background: var(--fundo-suave); padding: 0.6rem 0.8rem; border-radius: var(--raio); margin: 0.25rem 0 0.5rem;
}
.so-js { display: none; }
.js .so-js { display: inline-block; }
.js .sem-js { display: none; }
.status-copia { margin-left: 0.5rem; color: var(--ok); font-weight: 600; }

/* Acompanhamento e conversa */
.status-atual { border-left: 6px solid var(--primaria); padding: 0.75rem 1rem; background: var(--fundo-suave); border-radius: var(--raio); }
.status-atual strong { font-size: 1.25rem; }
.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { border-left: 3px solid #d1d5db; padding: 0.25rem 0 0.75rem 1rem; position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -0.5rem; top: 0.55rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--primaria); }
.linha-tempo .dia { color: var(--texto-suave); font-size: 0.9375rem; display: block; }
.mensagens { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.mensagem { border: 1px solid #d1d5db; border-radius: var(--raio); padding: 0.75rem 0.9rem; background: var(--fundo); }
.mensagem.equipe { border-left: 6px solid var(--primaria); }
.mensagem.denunciante { border-left: 6px solid var(--ok); }
.mensagem .cabecalho { font-size: 0.9375rem; color: var(--texto-suave); margin: 0 0 0.35rem; }
.mensagem p { margin: 0 0 0.5rem; }
.mensagem p:last-child { margin-bottom: 0; }

/* Painel */
.area-conversa { background: var(--conversa-fundo); border: 3px solid var(--conversa-borda); border-radius: 10px; padding: 1rem; margin: 1.5rem 0; }
.area-notas { background: var(--nota-fundo); border: 3px dashed var(--nota-borda); border-radius: 10px; padding: 1rem; margin: 1.5rem 0; }
.area-conversa > h2, .area-notas > h2 { margin-top: 0; }
.selo { display: inline-block; font-size: 0.875rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; border: 2px solid currentColor; }
.selo.visivel { color: var(--primaria); }
.selo.interno { color: var(--aviso-borda); }
.selo.alerta-selo { color: var(--erro); }
.selo.ok-selo { color: var(--ok); }
.area-notas .mensagem { border-left: 6px solid var(--nota-borda); }
.area-notas button { background: var(--aviso-borda); border-color: var(--aviso-borda); }
.area-notas button:hover { background: #6b4600; border-color: #6b4600; }
.colunas { display: grid; gap: 0 2rem; }
@media (min-width: 56rem) { .colunas { grid-template-columns: 2fr 1fr; } }
dl.dados { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
dl.dados dt { font-weight: 600; }
dl.dados dd { margin: 0; }
.tabela-rolagem { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9875rem; }
caption { text-align: left; font-weight: 700; padding: 0.5rem 0; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid #d1d5db; vertical-align: top; }
th { background: var(--fundo-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; margin: 0 0 1.25rem; }
.filtros .campo { margin: 0; min-width: 12rem; flex: 1 1 12rem; }
.identidade { border: 3px solid var(--erro); border-radius: 10px; padding: 1rem; background: var(--erro-fundo); }
.bloco { border: 1px solid #d1d5db; border-radius: var(--raio); padding: 1rem; margin: 0 0 1.25rem; }
.bloco > h2:first-child, .bloco > h3:first-child { margin-top: 0; }

@media print {
  .topo, .rodape, .acoes, .nao-imprimir, .pular { display: none !important; }
  body { font-size: 12pt; }
  .credenciais { border: 2px solid #000; }
}

.cabecalho-caso { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; }
.cabecalho-caso h1 { margin: 0.5rem 0; }
.status-atual p { margin: 0; }
.status-atual p + p { margin-top: 0.25rem; }
.so-imprimir { display: none; }
@media print { .so-imprimir { display: block; } }
[hidden] { display: none !important; }
form.inline { display: inline; }
.area-notas form button.link { background: none; border: none; color: var(--primaria); }
/* Fieldset tem min-width: min-content por padrão e estoura no celular. */
fieldset { min-width: 0; }
input[type="file"] { width: 100%; }
.dica, .valor, td, dd { overflow-wrap: anywhere; }
h3.rotulo { font-size: 1rem; margin: 0 0 0.3rem; }