:root {
  --vinho: #a3273f;
  --vinho-escuro: #7f1d31;
  --tinta: #2b1a1e;
  --texto: #3a2b2f;
  --suave: #7a6468;
  --linha: #e6dcda;
  --fundo: #faf5f3;
  --papel: #ffffff;
  --ok: #1d7a4f;
  --ok-fundo: #e7f4ec;
  --erro: #b3261e;
  --erro-fundo: #fbeceb;
  --aviso-fundo: #fdf3e1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 { color: var(--tinta); margin: 0; font-weight: 600; }
h2 { font-size: 20px; margin-bottom: 4px; }
h3 { font-size: 15px; margin: 20px 0 8px; }
p { margin: 0 0 12px; }
.suave { color: var(--suave); }
code {
  font: 13px/1.4 Consolas, "Cascadia Mono", monospace;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ---------- topo ---------- */
.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.marca img { width: 30px; height: 30px; }
.marca span { font-size: 21px; font-weight: 600; color: var(--tinta); letter-spacing: -0.3px; }
.abas { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.abas button {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 16px 12px 13px;
  font: inherit;
  color: var(--suave);
  cursor: pointer;
}
.abas button:hover { color: var(--tinta); }
.abas button.ativa { color: var(--vinho); border-bottom-color: var(--vinho); font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }

/* ---------- blocos ---------- */
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
}
.duas-colunas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; font-weight: 600; color: var(--tinta); margin: 12px 0 4px; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid #cfc2c0;
  border-radius: 6px;
  padding: 8px 10px;
}
input[type="file"] { font: inherit; width: 100%; }
textarea { font: 13px/1.45 Consolas, "Cascadia Mono", monospace; min-height: 340px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--vinho); outline-offset: 1px; }

.acoes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.botao {
  font: inherit;
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--vinho);
  background: var(--vinho);
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.botao:hover { background: var(--vinho-escuro); }
.botao.secundario { background: var(--papel); color: var(--vinho); }
.botao.secundario:hover { background: var(--fundo); }
.botao.pequeno { padding: 3px 10px; font-size: 13px; font-weight: 500; }
.botao:disabled { opacity: 0.55; cursor: default; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--suave); font-weight: 600; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.exemplo { color: var(--suave); }
td.direita, th.direita { text-align: right; white-space: nowrap; }

.aviso { border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: 14px; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso.atencao { background: var(--aviso-fundo); color: #7a5200; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }
.aviso code { background: rgba(255, 255, 255, 0.6); border-color: transparent; color: inherit; }

.etiqueta { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 600; background: var(--ok-fundo); color: var(--ok); }
.etiqueta.enviado, .etiqueta.pendente, .etiqueta.visualizado { background: var(--aviso-fundo); color: #7a5200; }
.etiqueta.gerado { background: var(--fundo); color: var(--suave); border: 1px solid var(--linha); }
.etiqueta.recusado, .etiqueta.cancelado, .etiqueta.expirado, .etiqueta.erro { background: var(--erro-fundo); color: var(--erro); }

.signatario { border: 1px solid var(--linha); border-radius: 8px; padding: 4px 14px 14px; margin: 14px 0 0; }
.signatario legend { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; color: var(--tinta); padding: 0 6px; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 640px) { .linha { grid-template-columns: 1fr; } }

.previa { width: 100%; height: 720px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; }
.vazio { border: 1px dashed #cfc2c0; border-radius: 8px; padding: 60px 20px; text-align: center; color: var(--suave); }

.receita { background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; margin: 8px 0 12px; font-size: 14px; }

/* ---------- entrada ---------- */
.entrada { max-width: 400px; margin: 12vh auto 0; padding: 0 20px; }
.entrada .marca { justify-content: center; }
.entrada .marca img { width: 40px; height: 40px; }
.entrada .marca span { font-size: 28px; }
.rodape { text-align: center; color: var(--suave); font-size: 12px; margin-top: 18px; }