/* Mesma identidade visual do LEVATE.hub (web/src/styles.css) — cores,
   fontes e o padrão de logo "levate" + subtítulo, para o CanalLevate (site
   público, projeto Node separado) parecer parte da mesma plataforma. */
:root {
  --azul: #163e3e;
  --azul-claro: #e1e5d6;
  --verde: #3b7a3b;
  --vermelho: #dc2626;
  --texto: #163e3e;
  --texto-suave: #516356;
  --borda: #d7ddc9;
  --fundo: #e1e5d6;
  --branco: #ffffff;
  --destaque: #e7eab5;
  --raio: 10px;

  --fonte-corpo: 'Open Sans', system-ui, -apple-system, sans-serif;
  --fonte-titulo: 'Barlow', system-ui, -apple-system, sans-serif;
  --fonte-logo: 'Bodoni Moda', 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.5;
}

header.topo {
  background: var(--branco);
  color: var(--texto);
  padding: 20px 20px 24px;
  border-bottom: 1px solid var(--borda);
}

.topo-marca {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 10px;
}

.topo-logo {
  font-family: var(--fonte-logo);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--azul);
}

.topo-subtitulo {
  font-family: var(--fonte-titulo);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

header.topo p {
  margin: 0;
  color: var(--texto-suave);
  max-width: 720px;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.aviso-legal {
  background: var(--azul-claro);
  border: 1px solid #c7dcee;
  border-radius: var(--raio);
  padding: 16px 18px;
  font-size: 0.92rem;
  color: var(--texto-suave);
  margin-bottom: 24px;
}

.abas {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--borda);
}

.aba-botao {
  border: none;
  background: none;
  padding: 10px 16px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--texto-suave);
  border-bottom: 3px solid transparent;
}

.aba-botao.ativa {
  color: var(--azul);
  border-bottom-color: var(--azul);
  font-weight: 600;
}

.painel { display: none; }
.painel.ativo { display: block; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px;
}

label {
  display: block;
  font-weight: 600;
  margin: 16px 0 6px;
  font-size: 0.94rem;
}

label:first-child { margin-top: 0; }

.ajuda {
  font-weight: 400;
  color: var(--texto-suave);
  font-size: 0.85rem;
  margin-top: 2px;
}

select, textarea, input[type="text"], input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 0.96rem;
  font-family: inherit;
  background: var(--branco);
}

textarea { min-height: 130px; resize: vertical; }

.linha-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.linha-checkbox input { width: auto; }
.linha-checkbox label { margin: 0; font-weight: 400; }

button.principal {
  margin-top: 20px;
  background: var(--azul);
  color: var(--branco);
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
}
button.principal:hover { background: #163049; }
button.principal:disabled { opacity: 0.6; cursor: not-allowed; }

button.secundario {
  background: none;
  border: 1px solid var(--borda);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.protocolo-caixa {
  background: #eafaf1;
  border: 1px solid #b6e6c9;
  border-radius: var(--raio);
  padding: 18px;
  margin-top: 18px;
}
.protocolo-codigo {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--verde);
  font-weight: 700;
  display: block;
  margin: 8px 0;
}

.erro {
  background: #fdecea;
  border: 1px solid #f3c1bd;
  color: var(--vermelho);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 0.92rem;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}
.status-recebido { background: #fdf2d6; color: #8a6100; }
.status-em_analise { background: #e0ecfb; color: #1c4f8a; }
.status-respondido { background: #e0f5e9; color: #146c43; }
.status-encerrado { background: #e9e9ee; color: #4a4a55; }

.resultado-consulta {
  margin-top: 20px;
}

.detalhe-consulta {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}
.detalhe-consulta dt {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--texto-suave);
}
.detalhe-consulta dd {
  margin: 0;
  font-size: 0.94rem;
}

.rotulo-mensagem {
  font-weight: 600;
  font-size: 0.94rem;
  margin: 18px 0 6px;
}

.mensagem-caixa {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px 16px;
  white-space: pre-wrap;
}

.resposta-caixa {
  background: var(--azul-claro);
  border-radius: 8px;
  padding: 14px 16px;
  white-space: pre-wrap;
}

footer.rodape {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 0 20px;
  color: var(--texto-suave);
  font-size: 0.82rem;
}