:root {
  --navy: #091c38;
  --navy-suave: #13294f;
  --dourado: #c9a84c;
  --branco: #ffffff;
  --cinza-texto: #3a3f4b;
  --cinza-borda: #d8dce3;
  --cinza-fundo: #f4f5f7;
  --erro: #b3261e;
  --erro-fundo: #fbeceb;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cinza-fundo);
  color: var(--cinza-texto);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.pular-conteudo {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--dourado);
  color: var(--navy);
  padding: 0.6rem 1rem;
  border-radius: 0 0 5px 0;
  font-weight: 600;
  z-index: 100;
}

.pular-conteudo:focus {
  left: 0;
  top: 0;
}

.topo {
  background: var(--navy);
  color: var(--branco);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
}

.topo-marca {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.topo-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.95rem;
}

.topo-nav a {
  color: var(--branco);
  text-decoration: none;
  opacity: 0.9;
}

.topo-nav a:hover { opacity: 1; text-decoration: underline; }

.topo-usuario {
  opacity: 0.75;
  font-size: 0.85rem;
}

.link-botao {
  background: none;
  border: 1px solid var(--dourado);
  color: var(--dourado);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.link-botao:hover { background: var(--dourado); color: var(--navy); }

.conteudo {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.cartao-central {
  max-width: 380px;
  margin: 3rem auto;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 2rem;
}

h1 {
  color: var(--navy);
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.subtitulo {
  color: #6b7280;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.painel {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.campo { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }

.campo-radio { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1.25rem; }

.rotulo-grupo { font-weight: 600; margin-right: 0.5rem; }

label { font-weight: 500; font-size: 0.92rem; }

input[type="email"],
input[type="password"],
input[type="number"],
select {
  border: 1px solid var(--cinza-borda);
  border-radius: 5px;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  width: 100%;
  max-width: 320px;
}

input:focus, select:focus {
  outline: 2px solid var(--dourado);
  outline-offset: 1px;
}

.ajuda { font-size: 0.82rem; color: #6b7280; margin: 0.15rem 0 0; }

button[type="submit"], #botao-imprimir {
  background: var(--navy);
  color: var(--branco);
  border: none;
  border-radius: 5px;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
}

button[type="submit"]:hover, #botao-imprimir:hover { background: var(--navy-suave); }

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mensagem-erro {
  background: var(--erro-fundo);
  color: var(--erro);
  border: 1px solid var(--erro);
  border-radius: 5px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}

.resultado-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.resultado-acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.botao-secundario {
  display: inline-block;
  background: var(--branco);
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 5px;
  padding: 0.65rem 1.3rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao-secundario:hover { background: var(--cinza-fundo); }

.resultado-entrada {
  color: #6b7280;
  font-size: 0.92rem;
  margin-top: -0.5rem;
}

.tabela-comparativa, .tabela-historico {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.tabela-comparativa th, .tabela-comparativa td,
.tabela-historico th, .tabela-historico td {
  border: 1px solid var(--cinza-borda);
  padding: 0.65rem 0.7rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
}

.tabela-comparativa thead th, .tabela-historico thead th {
  background: var(--navy);
  color: var(--branco);
  font-weight: 600;
}

.tabela-comparativa tbody th { background: var(--cinza-fundo); font-weight: 600; }

.linha-nota td { font-size: 0.8rem; color: #6b7280; }

.valor-imposto { font-weight: 700; font-size: 1.05rem; color: var(--navy); }

.valor-indisponivel { color: #9ca3af; font-style: italic; font-size: 0.85rem; }

.aviso-confianca {
  font-size: 0.82rem;
  color: #6b7280;
  margin-top: 0.9rem;
  border-top: 1px dashed var(--cinza-borda);
  padding-top: 0.75rem;
}

.pdf-rodape {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 0.5rem;
}

.vazio { color: #6b7280; }

.tabela-wrap { overflow-x: auto; }

@media (max-width: 480px) {
  .conteudo { padding: 1rem 0.75rem 2rem; }
  .painel { padding: 1rem; }
  .topo { padding: 0.75rem 1rem; }
  .tabela-comparativa, .tabela-historico { display: block; overflow-x: auto; white-space: nowrap; }
}

@media print {
  .no-print, .topo, #botao-imprimir { display: none !important; }
  body { background: var(--branco); }
  .painel { border: none; padding: 0; }
  .conteudo { max-width: 100%; padding: 0; }
  .tabela-comparativa, .tabela-historico { font-size: 0.85rem; }
}