@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

/* ==========================================================================
   Canal de Denúncias — identidade visual (marca Safe Consig)
   Paleta: tinta (navy institucional Safe Consig) + selo (verde Safe Consig)
   Tipografia: Lexend (títulos) + Source Sans 3 (corpo);
               monoespaçada só para protocolos/códigos
   ========================================================================== */

:root {
  --tinta-900: #003355;
  --papel: #f6f7f9;
  --papel-cartao: #ffffff;
  --linha: #dde3ea;
  --texto: #1b2530;
  --texto-destaque: #003355;
  --texto-suave: #5b6b7c;
  --selo: #22aa88;
  --selo-escuro: #1a8369;
  --alerta-bg: #fdf1ee;
  --alerta-borda: #e8c4ba;

  --status-recebida: #6b7280;
  --status-em_analise: #0284c7;
  --status-em_investigacao: #d97706;
  --status-concluida: #16a34a;
  --status-arquivada: #475569;
  --status-improcedente: #dc2626;

  --raio: 10px;
  --sombra: 0 1px 2px rgba(15, 42, 67, 0.06), 0 8px 24px rgba(15, 42, 67, 0.06);
}

/* ==========================================================================
   Cores extras dos GRÁFICOS (estatisticas.html) — só o que não é cor de
   status (essas vêm de --status-* acima, a mesma fonte usada pelos badges).
   ========================================================================== */
:root {
  --graf-barra: #14b8a6;
  --graf-grade: #e5e9ee;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* Mantém o rodapé colado na base da janela quando o conteúdo é menor que a tela (index, login, consulta) */
body.rodape-fixo {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.rodape-fixo main {
  flex: 1 0 auto;
}

h1, h2, h3, .display {
  font-family: "Lexend", "Source Sans 3", sans-serif;
  font-weight: 600;
  color: var(--texto-destaque);
  letter-spacing: 0.1px;
}

code, .mono, .protocolo-codigo, .senha-codigo {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- Ícones em traço (1 cor, sem preenchimento) ---------- */
.icone-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

a { color: var(--selo-escuro); }

/* ---------- Cabeçalho institucional ---------- */
.topo {
  background: var(--tinta-900);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topo .marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}
.topo .marca-logo {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.topo .marca-produto {
  font-size: 0.86rem;
  font-weight: 400;
  color: #b9c9d6;
  padding-left: 12px;
  border-left: 1px solid #3d5872;
  line-height: 1.2;
}
.topo nav { display: flex; gap: 18px; align-items: center; }
.topo nav a {
  color: #dbe6f0;
  text-decoration: none;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topo nav a .icone-svg { width: 15px; height: 15px; }
.topo nav a:hover { color: #fff; }
.topo .usuario-logado {
  font-size: 0.85rem;
  color: #b9c9d6;
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-sair {
  background: transparent;
  border: 1px solid #3d5872;
  color: #dbe6f0;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-sair:hover { background: #16324c; }

/* ---------- Menu do usuário logado (☰ com Gerenciar usuários / Sair) ---------- */
.saudacao { white-space: nowrap; }
.menu-usuario { position: relative; }
.btn-menu-hamburguer {
  background: transparent;
  border: 1px solid var(--menu-btn-borda, #3d5872);
  color: #dbe6f0;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-menu-hamburguer:hover { background: var(--menu-btn-hover, #16324c); }
.btn-menu-hamburguer .icone-svg { width: 18px; height: 18px; }
.dropdown-menu-usuario {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--papel-cartao);
  border: 1px solid var(--linha);
  border-radius: 8px;
  box-shadow: var(--sombra);
  min-width: 200px;
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-menu-usuario[hidden] { display: none; }
.dropdown-menu-usuario a, .dropdown-menu-usuario button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
}
.dropdown-menu-usuario a:hover, .dropdown-menu-usuario button:hover { background: #f2f6f8; }
.dropdown-menu-usuario .icone-svg { width: 16px; height: 16px; color: var(--texto-suave); }
.dropdown-menu-usuario .divisor-menu {
  height: 1px;
  background: var(--linha);
  margin: 8px 4px;
}

/* ---------- Layout geral ---------- */
.pagina {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.pagina.estreita { max-width: 620px; }
.pagina.larga { max-width: 1080px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 0.75rem;
  color: var(--selo-escuro);
  font-weight: 700;
  margin-bottom: 8px;
}

.subtitulo { color: var(--texto-suave); font-size: 1.02rem; margin-top: 6px; }

/* ---------- Cartões ---------- */
.cartao {
  background: var(--papel-cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px;
}

/* ---------- Hero da home ---------- */
.hero {
  text-align: center;
  padding: 56px 16px 40px;
}
.hero h1 { font-size: 2.1rem; margin-bottom: 10px; }
.hero p { color: var(--texto-suave); max-width: 560px; margin: 0 auto; }

.opcoes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 760px) {
  .opcoes-grid { grid-template-columns: 1fr; }
}
.opcao-card {
  background: var(--papel-cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 20px;
  text-align: left;
  text-decoration: none;
  color: var(--texto);
  box-shadow: var(--sombra);
  transition: transform 0.12s ease, border-color 0.12s ease;
  display: block;
}
.opcao-card:hover { transform: translateY(-2px); border-color: var(--selo); }
.opcao-card .icone {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: #eaf6f2;
  display: flex; align-items: center; justify-content: center;
  color: var(--selo-escuro);
}
.opcao-card .icone .icone-svg { width: 22px; height: 22px; }
.opcao-card h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.opcao-card p { margin: 0; color: var(--texto-suave); font-size: 0.92rem; }

/* ---------- Formulários ---------- */
label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-destaque);
  margin: 18px 0 6px;
}
label:first-child { margin-top: 0; }
.dica-campo { font-weight: 400; color: var(--texto-suave); font-size: 0.82rem; }

/* ---------- Configurações de layout (configuracoes.html) ---------- */
.grade-cores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.grade-cores-compacta { grid-template-columns: repeat(6, 1fr); }
.cartao-cor {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px;
  text-align: center;
}
.amostra-cor {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--linha);
  padding: 0;
  cursor: pointer;
  background: none;
}
.amostra-cor::-webkit-color-swatch-wrapper { padding: 0; border-radius: 6px; }
.amostra-cor::-webkit-color-swatch { border: none; border-radius: 6px; }
.amostra-cor::-moz-color-swatch { border: none; border-radius: 6px; }
.rotulo-cor { font-size: 0.72rem; margin: 6px 0 4px; color: var(--texto); }
.campo-hex-cor {
  width: 100%;
  font-size: 0.72rem;
  text-align: center;
  padding: 4px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.grade-marca {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cartao-marca {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px;
  text-align: center;
}
.prévia-marca {
  background: var(--papel);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}
.prévia-marca-escura { background: var(--tinta-900); }
.prévia-marca img { max-width: 100%; max-height: 60px; }
.titulo-marca { font-size: 0.85rem; font-weight: 600; margin: 0 0 10px; }
.btn-upload { display: inline-flex; cursor: pointer; }
.barra-salvar-config {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

@media (max-width: 640px) {
  .grade-cores { grid-template-columns: repeat(2, 1fr); }
  .grade-cores-compacta { grid-template-columns: repeat(3, 1fr); }
  .grade-marca { grid-template-columns: 1fr; }
  .barra-salvar-config { align-items: center; text-align: center; }
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"],
textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--texto);
  background: #fff;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--selo);
  box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.15);
}

.linha-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f2f6f8;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 14px;
  margin-top: 8px;
  cursor: pointer;
}
.linha-toggle input[type="checkbox"],
.linha-toggle input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.linha-toggle span { font-size: 0.9rem; }
@media (max-width: 640px) {
  .linha-toggle input[type="checkbox"],
  .linha-toggle input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }
}

fieldset { border: none; padding: 0; margin: 0; }
.bloco-identificacao {
  border-left: 3px solid var(--selo);
  padding-left: 16px;
  margin-top: 18px;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-primario { background: var(--selo); color: #fff; }
.btn-primario:hover { background: var(--selo-escuro); }
.btn-secundario { background: #fff; color: var(--texto-destaque); border: 1px solid var(--linha); }
.btn-secundario:hover { border-color: var(--cor-hover-secundario, #2c5d7d); }
.btn-bloco { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Mensagens ---------- */
.mensagem-erro {
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-borda);
  color: #7a2b1f;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-top: 16px;
}
.mensagem-sucesso {
  background: #eaf6ee;
  border: 1px solid #bfe3cb;
  color: #1f5a34;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-top: 16px;
}

/* ---------- Recibo de protocolo (elemento de assinatura visual) ---------- */
.recibo {
  background: var(--papel-cartao);
  border: 2px dashed var(--selo);
  border-radius: var(--raio);
  padding: 30px;
  text-align: center;
  position: relative;
}
.recibo .selo-check {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--selo);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.recibo .selo-check .icone-svg { width: 26px; height: 26px; stroke-width: 2.4; }
.recibo .rotulo-campo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-suave);
  margin-top: 18px;
}
.recibo .protocolo-codigo {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--texto-destaque);
  letter-spacing: 1px;
  margin-top: 4px;
}
.recibo .senha-codigo {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--selo-escuro);
  letter-spacing: 3px;
  margin-top: 4px;
}
.recibo .aviso-guardar {
  margin-top: 22px;
  font-size: 0.85rem;
  color: #7a2b1f;
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-borda);
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.recibo .aviso-guardar .icone-svg { margin-top: 1px; }

/* ---------- Infográfico de passos (denuncia.html / reclamacao.html) ---------- */
.passos-processo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0;
}
.passo-processo {
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 14px;
  text-align: center;
}
.passo-processo .icone-svg { width: 26px; height: 26px; color: var(--texto-destaque); }
.passo-processo .titulo-passo { font-size: 0.85rem; font-weight: 600; margin: 10px 0 2px; color: var(--texto); }
.passo-processo .desc-passo { font-size: 0.78rem; color: var(--texto-suave); margin: 0; }

@media (max-width: 640px) {
  .passos-processo { grid-template-columns: 1fr; }
}

/* ---------- Caixa de aviso genérica (fora do card de recibo) ---------- */
.aviso-alerta {
  font-size: 0.85rem;
  color: #7a2b1f;
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-borda);
  padding: 12px 16px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0;
}
.aviso-alerta .icone-svg { margin-top: 2px; flex-shrink: 0; }
.aviso-alerta a { color: inherit; text-decoration: underline; font-weight: 600; }
.aviso-alerta-estreito { max-width: 50%; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .aviso-alerta-estreito { max-width: 100%; }
}

.btn .icone-svg { width: 16px; height: 16px; }

/* ---------- Badge de status ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ---------- Tabela do dashboard ---------- */
.tabela-denuncias {
  width: 100%;
  border-collapse: collapse;
}
/* Larguras fixas por coluna (em pixels), só na tabela do dashboard — não mudam
   de um filtro pro outro. Ordem: Protocolo, Tipo, Categoria, Solicitante,
   Recebida em, Status. A coluna Tipo só aparece pra quem enxerga os dois tipos,
   mas a posição dela no nth-child continua contando mesmo escondida (display:none).
   Escopado pelo #id (não pela classe) pra não afetar a tabela de usuarios.html,
   que tem colunas diferentes. */
#tabela-denuncias { table-layout: fixed; }
#tabela-denuncias th:nth-child(1), #tabela-denuncias td:nth-child(1) { width: 170px; }
#tabela-denuncias th:nth-child(2), #tabela-denuncias td:nth-child(2) { width: 110px; }
#tabela-denuncias th:nth-child(3), #tabela-denuncias td:nth-child(3) { width: 220px; }
#tabela-denuncias th:nth-child(4), #tabela-denuncias td:nth-child(4) { width: 180px; }
#tabela-denuncias th:nth-child(5), #tabela-denuncias td:nth-child(5) { width: 140px; }
#tabela-denuncias th:nth-child(6), #tabela-denuncias td:nth-child(6) { width: 160px; }
.tabela-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Paginação (dashboard.html) ---------- */
.barra-info-paginacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linha);
  font-size: 0.82rem;
  color: var(--texto-suave);
}
.barra-info-paginacao label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin: 0;
}
.barra-info-paginacao select {
  font-size: 0.82rem;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--linha);
  min-height: auto;
}
.controles-paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--linha);
}
.btn-pagina {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--papel-cartao);
  color: var(--texto);
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-pagina:hover:not(:disabled) { background: #f2f6f8; }
.btn-pagina:disabled { opacity: 0.4; cursor: default; }
.texto-pagina-atual { font-size: 0.82rem; color: var(--texto-suave); padding: 0 8px; white-space: nowrap; }
.tabela-denuncias th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--linha);
  padding: 10px 12px;
}
.tabela-denuncias td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--linha);
  font-size: 0.92rem;
}
#tabela-denuncias td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabela-denuncias tbody tr { cursor: pointer; }
.tabela-denuncias tbody tr:hover { background: #f2f6f8; }
.protocolo-link { font-family: monospace; font-weight: 700; color: var(--texto-destaque); }

.barra-dashboard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.filtros-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filtro-chip {
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--texto-suave);
}
.filtro-chip.ativo {
  border-color: var(--selo);
  color: var(--selo-escuro);
  background: #eaf6f6;
  font-weight: 700;
}

/* ---------- Barra de filtros avançados do dashboard ---------- */
.barra-filtros {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 18px 20px;
}
.campo-filtro {
  flex: 1 1 160px;
  min-width: 140px;
}
.campo-filtro label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
}
.barra-filtros .btn { flex-shrink: 0; }

/* ---------- Linha do tempo (elemento de assinatura visual) ---------- */
.linha-do-tempo {
  position: relative;
  margin-top: 10px;
  padding-left: 6px;
}
.evento-tempo {
  position: relative;
  padding: 0 0 26px 34px;
  border-left: 2px solid var(--linha);
  margin-left: 13px;
}
.evento-tempo:last-child { border-left-color: transparent; padding-bottom: 0; }
.evento-tempo .marcador {
  position: absolute;
  left: -15px;
  top: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 0 0 4px var(--papel-cartao);
}
.evento-tempo .status-nome { font-weight: 700; font-size: 0.95rem; }
.evento-tempo .data-evento { font-size: 0.78rem; color: var(--texto-suave); margin-top: 1px; }
.evento-tempo .comentario-evento {
  margin-top: 8px;
  background: #f7f8fa;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
}
.evento-tempo .autor-evento {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--texto-suave);
  font-style: italic;
}

/* ---------- Ações de editar/excluir andamento (só aparece para quem criou) ---------- */
.acoes-andamento {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.btn-link-acao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--texto-suave);
  font-size: 0.78rem;
  cursor: pointer;
}
.btn-link-acao:hover { color: var(--texto-destaque); }
.btn-link-acao.btn-link-perigo:hover { color: #b3261e; }
.marca-editado { font-weight: 400; font-size: 0.78rem; color: var(--texto-suave); font-style: italic; }

/* ---------- Andamento excluído (rastro visível só para a equipe) ---------- */
.evento-excluido { opacity: 0.7; }
.evento-excluido .status-nome { color: var(--texto-suave); font-style: italic; font-weight: 400; }
.marcador-excluido { background: #8a95a1 !important; }

/* ---------- Formulário de edição inline de um andamento ---------- */
.form-editar-andamento select,
.form-editar-andamento textarea {
  margin-top: 6px;
  margin-bottom: 8px;
}
.form-editar-andamento textarea { min-height: 80px; }

/* ---------- Bolinha de status (usuários ativos/inativos) ---------- */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
}
.status-dot-ativo { background: #1f8a4c; }
.status-dot-inativo { background: #b3261e; }
.status-usuario { display: inline-flex; align-items: center; }

/* ---------- Anexos (denúncia, consulta e detalhe) ---------- */
.campo-anexos {
  border: 1px dashed var(--linha);
  border-radius: 8px;
  padding: 14px;
  margin-top: 6px;
}
.lista-anexos-selecionados { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.item-anexo-selecionado, .item-anexo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  padding: 8px 10px;
  background: #f7f8fa;
  border: 1px solid var(--linha);
  border-radius: 6px;
}
.item-anexo-selecionado .nome-anexo, .item-anexo .nome-anexo { flex: 1; overflow-wrap: anywhere; }
.item-anexo-selecionado .tamanho-anexo, .item-anexo .tamanho-anexo { color: var(--texto-suave); font-size: 0.8rem; white-space: nowrap; }
.btn-remover-anexo {
  background: none; border: none; cursor: pointer; color: var(--texto-suave);
  display: flex; align-items: center; padding: 2px;
}
.btn-remover-anexo:hover { color: #b3261e; }
.item-anexo a { color: var(--selo-escuro); text-decoration: none; display: flex; align-items: center; }
.item-anexo a:hover { text-decoration: underline; }
.resumo-total-anexos { font-size: 0.82rem; color: var(--texto-suave); margin-top: 8px; }
.resumo-total-anexos.excedido { color: #b3261e; font-weight: 600; }

/* ---------- Detalhe da denúncia ---------- */
.grade-detalhe {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 800px) {
  .grade-detalhe { grid-template-columns: 1fr; }
}
.ficha-info dt { font-size: 0.75rem; text-transform: uppercase; color: var(--texto-suave); margin-top: 14px; }
.ficha-info dt:first-child { margin-top: 0; }
.ficha-info dd { margin: 3px 0 0; font-size: 0.95rem; }

.rodape-app {
  background: var(--tinta-900);
  color: #dbe6f0;
  padding: 32px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-top: 40px;
}
.rodape-simbolo { width: 30px; height: auto; }
.rodape-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.rodape-links a { color: #dbe6f0; text-decoration: none; font-size: 0.85rem; }
.rodape-links a:hover { color: #fff; text-decoration: underline; }
.rodape-copyright { font-size: 0.78rem; color: #8ea3b5; line-height: 1.6; margin: 0; }

/* ---------- Rodapé simples (páginas da equipe: dashboard, detalhe, usuários, estatísticas, login) ---------- */
.rodape-equipe {
  background: var(--tinta-900);
  text-align: center;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.rodape-equipe-linha { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #dbe6f0; }
.rodape-simbolo-pequeno { width: 30px; height: auto; }
.rodape-versao { font-size: 0.72rem; color: #8ea3b5; }

.carregando { color: var(--texto-suave); font-size: 0.9rem; padding: 20px 0; }

.link-voltar {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.88rem;
}
.link-voltar:hover { color: var(--texto-destaque); }

/* ---------- Estatísticas (painel visual) ---------- */
.grade-indicadores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.cartao-indicador {
  background: var(--papel-cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
}
.cartao-indicador .rotulo { font-size: 0.78rem; color: var(--texto-suave); margin: 0 0 6px; }
.cartao-indicador .valor { font-family: "Lexend", "Source Sans 3", sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--texto-destaque); margin: 0; }
.cartao-indicador .valor.aviso { color: #b3690e; }
.cartao-indicador .valor.positivo { color: #1f8a4c; }

.grade-graficos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}
.legenda-grafico {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.legenda-grafico span { display: flex; align-items: center; gap: 6px; }
.marcador-legenda { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

.bloco-grafico-status {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.legenda-status-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.item-legenda-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: #f7f8fa;
  border-radius: 8px;
}
.topo-legenda-status { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--texto); }
.qtd-legenda-status { font-size: 0.78rem; color: var(--texto-suave); padding-left: 15px; }

.linha-abertura {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 20px;
  background: var(--papel-cartao);
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
  font-size: 0.88rem;
}
.linha-abertura:last-child { border-bottom: none; }
.linha-abertura:hover { background: #f2f6f8; }
.linha-abertura .protocolo-link { flex-shrink: 0; }
.linha-abertura .categoria-abertura { color: var(--texto-suave); flex: 1; text-align: left; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-abertura .dias-abertura { color: #b3690e; font-weight: 700; white-space: nowrap; }

/* ---------- Versão em tabela para impressão/PDF (estatisticas.html) ---------- */
.tabela-impressao { display: none; }
.tabela-impressao h3 { margin: 18px 0 8px; font-size: 0.95rem; }
.tabela-impressao h3:first-child { margin-top: 0; }
.tabela-impressao table { width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: 0.85rem; }
.tabela-impressao th, .tabela-impressao td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
.tabela-impressao th { background: #f2f2f2; }

@media (max-width: 760px) {
  .grade-indicadores { grid-template-columns: repeat(2, 1fr); }
  .grade-graficos { grid-template-columns: 1fr; }
}

.somente-impressao { display: none; }

/* ---------- Impressão / "Baixar PDF" (estatisticas.html) ---------- */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .topo, .link-voltar, #btn-baixar-pdf, #btn-baixar-tabela-pdf, .rodape-app, .rodape-equipe, #botoes-salvar-recibo, #link-consulta-recibo { display: none !important; }
  .somente-impressao { display: block !important; }
  html, body { background: #fff !important; }
  #eyebrow-pagina, #titulo-pagina { display: none !important; }
  .pagina { max-width: 100%; padding: 10px; }
  .cartao, .cartao-indicador { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .grade-graficos, .grade-indicadores { break-inside: avoid; }

  /* Modo "Baixar tabela (PDF)": mostra as tabelas, esconde os gráficos */
  body.modo-impressao-tabela #conteudo { display: none !important; }
  body.modo-impressao-tabela .tabela-impressao { display: block !important; }
}

/* ---------- Responsivo (celular) — cabeçalho logado, filtros e tabela ---------- */
@media (max-width: 640px) {
  .topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
  }
  .topo .usuario-logado {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: flex-end;
  }
  .topo nav {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  .pagina { padding: 24px 14px 60px; }

  .barra-dashboard { flex-direction: column; align-items: flex-start; }
  #acoes-backup { width: 100%; }
  #acoes-backup .btn, #btn-exportar-csv { flex: 1 1 auto; }

  .barra-filtros { padding: 14px; }
  .campo-filtro { flex: 1 1 100%; min-width: 0; }
  .barra-filtros .btn { width: 100%; }

  .tabela-denuncias th, .tabela-denuncias td {
    padding: 10px 8px;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

/* ---------- Modal de exportação de CSV ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 45, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-caixa {
  background: var(--papel-cartao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 24px;
  width: 480px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-cabecalho h3 { margin: 0; font-size: 1.05rem; }
.modal-fechar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-suave);
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px;
}
.modal-campo { margin-bottom: 14px; }
.modal-campo label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
}
.modal-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.modal-atalhos .filtro-chip { font-size: 0.78rem; padding: 5px 11px; }
#exp-periodo-atalhos {
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
}
#exp-periodo-atalhos .filtro-chip {
  font-size: 0.72rem;
  padding: 5px 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.modal-periodo-datas { display: flex; gap: 8px; }
.modal-periodo-resumo { font-size: 0.8rem; color: var(--texto-suave); margin: 4px 0 0; }
.modal-status-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 6px 14px;
  font-size: 0.88rem;
}
.modal-status-grade label { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: normal; color: var(--texto); }
.modal-checkbox-linha { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.modal-previa {
  background: var(--fundo-pagina, #f5f7f9);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 12px;
}
.modal-previa strong { color: var(--texto-destaque); }
.modal-aviso-privacidade { font-size: 0.76rem; color: var(--texto-suave); margin: 0 0 16px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }