/* ==========================================================================
   Canal de denúncias — estilos ADITIVOS.
   Arquivo separado de propósito: a v1.1 e a original carregam só estilo.css e
   continuam byte a byte iguais. Tudo aqui reaproveita .modal e as variáveis
   de :root que já existem em estilo.css — este arquivo entra depois dele.
   ========================================================================== */

/* o modal de denúncia é mais largo que o de WhatsApp: tem formulário dentro */
#modal-denuncia { max-width: 560px; }

.den-vista[hidden] { display: none; }

.den-aviso {
  border: 1px solid rgba(242, 169, 0, .35);
  border-radius: var(--raio);
  background: rgba(242, 169, 0, .07);
  padding: .9rem 1rem; margin-bottom: 1.3rem;
  font-size: .82rem; line-height: 1.55; color: var(--texto);
}
.den-aviso strong { color: var(--dourado); }
.den-aviso ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.den-aviso li { margin-top: .25rem; }

.den-campo { display: block; margin-bottom: 1rem; }
.den-campo > span {
  display: block; margin-bottom: .4rem;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.den-campo select,
.den-campo textarea,
.den-campo input {
  width: 100%; padding: .75rem .9rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: rgba(255, 255, 255, .04); color: var(--texto);
  font: inherit; font-size: .92rem;
}
.den-campo textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.den-campo select:focus,
.den-campo textarea:focus,
.den-campo input:focus { outline: none; border-color: var(--borda-viva); }
/* o select nativo abre com fundo do sistema: as options precisam ser legíveis */
.den-campo select option { background: var(--preto-2); color: var(--texto); }

.den-contador { display: block; margin-top: .3rem; font-size: .75rem; color: var(--muted-2); }

.den-acoes { display: grid; gap: .6rem; margin-top: 1.4rem; }

/* link discreto que troca entre "enviar denúncia" e "consultar protocolo" */
.den-troca {
  display: block; width: 100%; margin-top: 1rem; padding: 0;
  border: 0; background: none; color: var(--muted); font: inherit; font-size: .84rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.den-troca:hover { color: var(--azul-neon); }

/* ---- recibo: a tela do protocolo ---- */
.den-protocolo {
  display: block; margin: 1rem 0;
  border: 1px dashed var(--borda-viva); border-radius: var(--raio);
  background: rgba(77, 163, 255, .07);
  padding: 1.1rem; text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.2rem; letter-spacing: .06em; color: var(--azul-neon);
  word-break: break-all;
}

.den-erro { margin-top: 1rem; color: #ff8a8a; font-size: .85rem; line-height: 1.5; }
.den-erro[hidden] { display: none; }

/* ---- resultado da consulta ---- */
.den-status {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: rgba(255, 255, 255, .03); padding: 1.1rem; margin-top: 1rem;
}
.den-status-selo {
  display: inline-block; margin-bottom: .6rem; padding: .25rem .7rem;
  border-radius: 999px; background: rgba(77, 163, 255, .16);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-neon);
}
.den-status-nota { font-size: .9rem; line-height: 1.6; color: var(--texto); }
.den-status-data { margin-top: .6rem; font-size: .78rem; color: var(--muted-2); }

/* ---- conversa entre denunciante e comitê ---- */
.den-conversa { display: grid; gap: .7rem; margin-top: 1rem; }
.den-msg {
  padding: .8rem .9rem; border-radius: var(--raio);
  border: 1px solid var(--borda); background: rgba(255, 255, 255, .03);
}
/* Cada mensagem já se identifica pelo rótulo em cima. O que separa as duas
   vozes é o recuo — a do denunciante entra pela direita, como numa conversa —
   e um fundo de peso diferente. Sem faixa colorida na lateral: seria um
   terceiro sinal dizendo o que o rótulo já diz. */
.den-msg-comite { background: rgba(77, 163, 255, .06); border-color: rgba(77, 163, 255, .18); }
.den-msg-voce { margin-left: 1.4rem; background: rgba(255, 255, 255, .015); }
.den-msg-quem {
  display: block; margin-bottom: .35rem;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
.den-msg-texto { font-size: .9rem; line-height: 1.6; color: var(--texto); white-space: pre-wrap; }
.den-msg-data { display: block; margin-top: .4rem; font-size: .72rem; color: var(--muted-2); }

.den-resposta-bloco { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); }
.den-resposta-bloco[hidden] { display: none; }
#den-resposta { min-height: 90px; }

/* ---- fallback: pacote cifrado pra copiar quando o envio não sai ---- */
.den-pacote {
  width: 100%; min-height: 110px; margin-top: .8rem; padding: .7rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: rgba(0, 0, 0, .35); color: var(--muted);
  font-family: ui-monospace, Consolas, monospace; font-size: .7rem;
  word-break: break-all; resize: vertical;
}

@media (max-width: 560px) {
  #modal-denuncia { padding: 1.6rem 1.2rem; }
  .den-protocolo { font-size: .95rem; }
}

/* parágrafo corrido dentro do modal (recibo e consulta) */
/* margin-bottom porque sem ele o texto encosta no rótulo do campo seguinte;
   colapsa com a margem do bloco do protocolo, então o recibo não estica */
.den-texto { font-size: .88rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.2rem; }
.den-texto + .den-texto { margin-top: -.6rem; }

/* o formulário é mais alto que a tela em notebook: rola dentro do próprio modal.
   Barra fina e botão de fechar afastado dela, senão um cobre o outro. */
#modal-denuncia { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--borda-viva) transparent; }
#modal-denuncia::-webkit-scrollbar { width: 8px; }
#modal-denuncia::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--borda-viva); }
#modal-denuncia .modal-fechar { right: 1.5rem; }