/* Canal de denúncias: página de entrada, assistente de registro e acompanhamento.
   Usa os tokens e os componentes de site.css (.campo, .btn, .aviso-form...). */

.den{max-width:880px;margin-inline:auto}
.den__titulo{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.02em;margin:0 0 var(--e2)}
.den__intro{font-size:17px;color:var(--cinza-700);max-width:62ch;margin:0 0 var(--e5)}

/* ---------- página de entrada ---------- */
.den-acoes{display:grid;gap:var(--e2)}
.den-card{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e4);
  display:grid;gap:var(--e2);align-content:start
}
.den-card h3{font-size:20px;margin:0}
.den-card p{margin:0;color:var(--cinza-700)}
.den-card .btn{justify-self:start;margin-top:var(--e1)}
.den-lista{margin:0;padding:0;list-style:none;display:grid;gap:var(--e2)}
.den-lista li{
  position:relative;padding-left:30px
}
.den-lista li::before{
  content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;
  background:var(--azul-claro);border:2px solid var(--azul)
}
.den-passos{counter-reset:p;margin:0;padding:0;list-style:none;display:grid;gap:var(--e3)}
.den-passos li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:var(--e2);align-items:start}
.den-passos li::before{
  content:counter(p);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--azul);color:#fff;font-family:var(--fonte-titulo);font-weight:800;font-size:18px
}
.den-passos b{display:block;color:var(--tinta);font-family:var(--fonte-titulo)}
.den-cats{margin:0;padding:0;list-style:none;display:grid;gap:10px}
@media (min-width:700px){.den-cats{grid-template-columns:1fr 1fr}}
.den-cats li{padding:12px 14px;border:1px solid var(--linha);border-radius:var(--raio-p);background:#fff}
.den-cats b{display:block;color:var(--tinta);font-family:var(--fonte-titulo);font-size:14.5px}
.den-cats span{display:block;font-size:13px;color:var(--cinza-500);margin-top:2px}
.den-aviso{
  padding:var(--e3);border-radius:var(--raio);background:var(--azul-claro);
  border:1px solid var(--linha);font-size:14.5px
}
.den-aviso p{margin:0}
.den-aviso p+p{margin-top:var(--e1)}

/* ---------- assistente ---------- */
.passos{
  display:flex;align-items:center;margin:0 0 var(--e5);padding:0;list-style:none
}
.passos li{display:flex;align-items:center;gap:10px;flex:none;font-size:13px;font-weight:600;color:var(--cinza-500)}
.passos li+li{flex:1}
.passos li+li::before{content:"";flex:1;height:2px;background:var(--cinza-200);margin:0 12px;min-width:12px}
.passos .n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--cinza-200);color:var(--cinza-700);font-size:13px;font-weight:800;font-family:var(--fonte-titulo)
}
.passos li.is-atual{color:var(--tinta)}
.passos li.is-atual .n{background:var(--azul);color:#fff}
.passos li.is-feito .n{background:var(--azul);color:#fff}
.passos li.is-feito+li::before,.passos li.is-atual::before{background:var(--azul)}
/* celular: 5 etapas não cabem com o nome da etapa atual. Ele já aparece no título logo abaixo, então a trilha mostra só os círculos. */
@media (max-width:640px){.passos .t{display:none}.passos li+li::before{margin:0 6px}}

fieldset.etapa{border:0;padding:0;margin:0;min-width:0}
fieldset.etapa[hidden]{display:none}
.etapa legend{padding:0;margin:0 0 var(--e1);width:100%}
.etapa__titulo{font-size:clamp(24px,3vw,32px);margin:0;letter-spacing:-.02em;outline:none}
.etapa__intro{color:var(--cinza-700);margin:0 0 var(--e4)}
.etapa .campo{margin-bottom:var(--e3)}
.rotulo-grupo{font-size:13px;font-weight:600;color:var(--tinta);font-family:var(--fonte-titulo)}
.rotulo-grupo .obrig{color:var(--azul)}

.radios{display:grid;gap:10px}
.radio{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer;
  padding:14px 16px;border:1px solid var(--cinza-300);border-radius:var(--raio-p);background:#fff;
  transition:border-color .2s ease,background-color .2s ease
}
.radio:hover{border-color:var(--cinza-500)}
.radio:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.radio input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--azul)}
.radio b{display:block;color:var(--tinta);font-family:var(--fonte-titulo);font-size:15px}
.radio small{display:block;color:var(--cinza-500);font-size:13px;margin-top:2px}

.termos{border:1px solid var(--cinza-300);border-radius:var(--raio-p);background:#fff;padding:14px 16px}
.termos label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-weight:500;color:var(--tinta)}
.termos input{margin-top:4px;width:18px;height:18px;accent-color:var(--azul);flex:none}
.termos details{margin-top:10px;font-size:14px;color:var(--cinza-700)}
.termos summary{cursor:pointer;color:var(--azul);font-weight:600}
.termos details p{margin:10px 0 0}
.campo.tem-erro .termos{border-color:#B91C1C}

.contagem-den{font-size:12.5px;color:var(--cinza-500);text-align:right}

.nav-etapas{
  display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;justify-content:space-between;
  margin-top:var(--e5);padding-top:var(--e3);border-top:1px solid var(--linha)
}
.nav-etapas .dir{display:flex;gap:var(--e2);flex-wrap:wrap}
.nav-etapas [hidden]{display:none}

/* ---------- códigos (tela final) ---------- */
.ok-den{
  padding:var(--e4);border-radius:var(--raio);background:#F0FDF4;border:1px solid #86EFAC;margin-bottom:var(--e4)
}
.ok-den h2{margin:0 0 var(--e1);font-size:24px;color:#14532D}
.ok-den p{margin:0;color:#14532D}
.codigos{display:grid;gap:var(--e3);margin:var(--e4) 0}
@media (min-width:700px){.codigos{grid-template-columns:1fr 1fr}}
.codigo{background:#fff;border:2px solid var(--azul);border-radius:var(--raio);padding:var(--e3)}
.codigo span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza-500)}
.codigo output{
  display:block;margin:8px 0 12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:clamp(20px,3.4vw,26px);font-weight:700;color:var(--tinta);letter-spacing:.04em;word-break:break-all
}
.codigo .btn{min-height:40px;padding:0 16px;font-size:14px}
.alerta-den{
  padding:var(--e3);border-radius:var(--raio);background:#FFFBEB;border:1px solid #FDE68A;color:#78350F;
  margin-bottom:var(--e3)
}
.alerta-den p{margin:0}
.alerta-den p+p{margin-top:var(--e1)}
.confirma-den{display:flex;gap:12px;align-items:flex-start;margin:var(--e3) 0;font-weight:600;color:var(--tinta);cursor:pointer}
.confirma-den input{margin-top:4px;width:18px;height:18px;accent-color:var(--azul);flex:none}

/* ---------- acompanhamento ---------- */
.consulta{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e4);
  display:grid;gap:var(--e3);max-width:560px
}
.mostrar-chave{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--cinza-700);cursor:pointer}
.caso{display:grid;gap:var(--e4)}
.caso__topo{
  display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;justify-content:space-between
}
.caso__topo h2{margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:24px}
.selo-st{
  display:inline-flex;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--azul-claro);color:var(--azul-esc);border:1px solid var(--linha)
}
.selo-st.st-concluida{background:#F0FDF4;color:#14532D;border-color:#86EFAC}
.selo-st.st-arquivada{background:#F1F5F9;color:var(--cinza-700)}
.caso dl{
  display:grid;grid-template-columns:1fr;gap:6px 20px;margin:0;padding:var(--e3);
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio)
}
@media (min-width:640px){.caso dl{grid-template-columns:170px 1fr}}
.caso dt{font-size:13px;color:var(--cinza-500)}
.caso dd{margin:0;color:var(--tinta)}
.conversa{display:grid;gap:10px}
.balao{padding:12px 16px;border-radius:var(--raio);border:1px solid var(--linha);background:#fff;max-width:92%}
.balao small{display:block;font-size:12px;color:var(--cinza-500);margin-bottom:2px}
.balao p{margin:0;white-space:pre-wrap}
.balao.denunciante{background:var(--azul-claro);border-color:#CFE0F7;justify-self:end}
.balao.equipe{background:#F0FDF4;border-color:#BBF7D0}
.balao.sistema{background:transparent;border-style:dashed;color:var(--cinza-500);max-width:100%}
.resposta{display:grid;gap:var(--e2)}
.resposta textarea{min-height:110px}

.btn.is-desativado{opacity:.55}

/* ---------- correções de convivência com site.css ---------- */

/* site.css dá display:grid/flex a .formulario e .passos, o que vence o atributo
   hidden e deixava o formulário visível depois do envio */
.den [hidden]{display:none!important}

/* ".campo input" (site.css) é feito para campos de texto: largura total, 52px
   de altura, borda e padding. Aqui ele deformava checkbox e radio, e o
   ":focus{outline:none}" tirava o indicador de foco do teclado. */
.campo input[type="checkbox"],.campo input[type="radio"]{
  width:18px;height:18px;min-height:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;flex:none
}
.campo input[type="checkbox"]:focus-visible,.campo input[type="radio"]:focus-visible,
.confirma-den input:focus-visible,.mostrar-chave input:focus-visible{
  outline:3px solid var(--azul);outline-offset:2px;box-shadow:none
}
.termos label,.radio,.mostrar-chave{font-family:var(--fonte-corpo)}
.termos label{font-size:15px;font-weight:500}

/* ==========================================================================
   Assistente estruturado (5 passos, no estilo do canal da Caixa):
   escolhas em vez de texto. Texto livre só no último passo.
   ========================================================================== */

/* título de cada passo em azul, como no modelo */
.etapa__titulo{color:var(--azul);font-size:clamp(28px,3.6vw,40px)}
.etapa__sub{font-size:20px;margin:var(--e4) 0 4px;color:var(--tinta)}
.etapa__dica{margin:0 0 var(--e3);color:var(--cinza-500);font-size:14.5px}

/* ---------- selos (escolha única ou múltipla) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.campo .chip{position:relative;display:inline-flex;cursor:pointer;font-weight:500;font-family:var(--fonte-corpo)}
.campo .chip input[type]{
  position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;pointer-events:none
}
.chip span{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;min-height:46px;
  border:1px solid var(--cinza-300);border-radius:999px;background:#fff;color:var(--tinta);
  font-size:15px;line-height:1.25;transition:border-color .2s ease,background-color .2s ease,color .2s ease
}
.chip:hover span{border-color:var(--cinza-500)}
.chip:has(input:checked) span{background:var(--azul);border-color:var(--azul);color:#fff}
.chip:has(input[type="checkbox"]:checked) span::before{content:"✓";font-weight:800}
.chip:has(input:focus-visible) span{outline:3px solid var(--azul);outline-offset:2px}

/* ---------- cartões (o tipo de incidente) ---------- */
.cartoes{display:grid;gap:10px}
@media (min-width:700px){.cartoes{grid-template-columns:1fr 1fr}}
.campo .cartao{
  position:relative;display:block;cursor:pointer;padding:14px 16px;border:1px solid var(--cinza-300);
  border-radius:var(--raio-p);background:#fff;font-weight:500;font-family:var(--fonte-corpo);
  transition:border-color .2s ease,background-color .2s ease
}
.campo .cartao input[type]{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;pointer-events:none}
.cartao b{display:block;color:var(--tinta);font-family:var(--fonte-titulo);font-size:15px}
.cartao small{display:block;color:var(--cinza-500);font-size:13px;margin-top:3px;line-height:1.4}
.cartao:hover{border-color:var(--cinza-500)}
.cartao:has(input:checked){border-color:var(--azul);background:var(--azul-claro);box-shadow:inset 0 0 0 1px var(--azul)}
.cartao:has(input:focus-visible){outline:3px solid var(--azul);outline-offset:2px}

/* grupo com erro: o contorno vermelho vai no conjunto, não em cada opção */
.campo.tem-erro>.chips,.campo.tem-erro>.cartoes{outline:2px solid #FCA5A5;outline-offset:8px;border-radius:12px}

/* ---------- painel cinza do envolvido (como no modelo) ---------- */
.painel-env{
  background:var(--fundo);border:1px solid var(--cinza-200);border-radius:var(--raio-p);
  padding:var(--e3);margin-bottom:var(--e3)
}
.painel-env__topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--e2)}
.painel-env__titulo{font-family:var(--fonte-titulo);color:var(--tinta)}
.link-remover{border:0;background:none;color:#B91C1C;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:8px}
.link-remover:hover{background:#FEE2E2}
.painel-env__campos{display:grid;gap:var(--e3)}
@media (min-width:760px){.painel-env__campos{grid-template-columns:repeat(3,1fr)}}
.painel-env .campo{margin-bottom:0}

.btn-tracejado{
  display:inline-flex;align-items:center;padding:12px 22px;border:2px dashed var(--azul);
  border-radius:var(--raio-p);background:#fff;color:var(--azul);font:700 15px var(--fonte-titulo);cursor:pointer;
  transition:background-color .2s ease
}
.btn-tracejado:hover{background:var(--azul-claro)}
.btn-tracejado:disabled{opacity:.45;cursor:default}

/* ---------- último passo ---------- */
.futuro-den{
  padding:var(--e3);border:2px dashed var(--cinza-300);border-radius:var(--raio-p);
  color:var(--cinza-500);background:#fff;margin-bottom:var(--e4);font-size:14.5px
}
.futuro-den b{display:block;color:var(--tinta);font-family:var(--fonte-titulo);margin-bottom:2px}
.campo .dica-forte{font-size:14px;color:var(--cinza-700)}