:root {
  --tinta: #14161a;
  --tinta-fraca: #6b7280;
  --papel: #fbfbfa;
  --papel-alto: #ffffff;
  --linha: #e3e3e0;
  --acento: #1f6feb;
  --bom: #15803d;
  --ruim: #b91c1c;
  --confirmado: #15803d;
  --extraido: #b45309;
  --inferido: #9333ea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

code, .barra, .medidas span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* topo ------------------------------------------------------------------ */

.topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 18px 28px;
  background: var(--papel-alto); border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: baseline; gap: 10px; }
.logo {
  font-weight: 700; letter-spacing: .06em; font-size: 13px;
  background: var(--tinta); color: #fff; padding: 3px 7px; border-radius: 4px;
  text-decoration: none;
}
.titulo { font-size: 19px; font-weight: 600; }
.sub { color: var(--tinta-fraca); font-size: 13px; }

/* folha ----------------------------------------------------------------- */

.folha { max-width: 860px; margin: 0 auto; padding: 28px; }
.secao { margin-bottom: 34px; }
h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 20px 0 8px; color: var(--tinta-fraca); font-weight: 600; }

.nota {
  color: var(--tinta-fraca); font-size: 13.5px; margin: 0 0 18px;
  border-left: 2px solid var(--linha); padding-left: 12px;
}
.nota b { color: var(--tinta); font-weight: 600; }

/* lista de clientes ----------------------------------------------------- */

.lista { display: grid; gap: 10px; }
.cartao {
  display: block; text-decoration: none; color: inherit;
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: 8px; padding: 14px 16px;
}
.cartao:hover { border-color: var(--acento); }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; }
.cartao-id { color: var(--tinta-fraca); font-size: 13px; margin-bottom: 10px; }

.tag {
  font-size: 11px; color: var(--tinta-fraca);
  border: 1px solid var(--linha); border-radius: 999px; padding: 1px 8px;
}

/* medidas --------------------------------------------------------------- */

.medidas { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--tinta-fraca); }
.medidas.grandes { font-size: 13px; margin-bottom: 18px; }
.barra {
  display: inline-block; width: 90px; height: 6px; vertical-align: middle;
  background: var(--linha); border-radius: 3px; overflow: hidden; margin: 0 6px;
}
.barra i { display: block; height: 100%; background: var(--acento); }

/* abas ------------------------------------------------------------------ */

.abas { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--linha); }
.aba {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--tinta-fraca);
}
.aba.ativa { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 600; }
.escondido { display: none; }

/* campos ---------------------------------------------------------------- */

.campo { margin-bottom: 20px; }
.campo-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.campo-topo label { font-weight: 600; font-size: 14.5px; }

.peso { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; }
.peso.essencial { background: #fee2e2; color: #991b1b; }
.peso.complementar { background: #f1f5f9; color: #64748b; }

.status { font-size: 10.5px; padding: 1px 6px; border-radius: 3px; border: 1px solid currentColor; }
.status.confirmado { color: var(--confirmado); }
.status.extraido { color: var(--extraido); }
.status.inferido { color: var(--inferido); }

.antipadrao { font-size: 12.5px; color: var(--ruim); margin-bottom: 5px; }
.alavanca { font-size: 12.5px; color: var(--acento); margin-bottom: 5px; }
.alimenta { font-size: 11.5px; color: var(--tinta-fraca); margin-top: 3px; }

textarea, input {
  width: 100%; font: inherit; font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--linha); border-radius: 6px;
  background: var(--papel-alto); color: var(--tinta); resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }

.rotulo { display: block; font-weight: 600; font-size: 13.5px; margin: 16px 0 5px; }

button {
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--tinta); color: #fff; border: none;
  padding: 9px 18px; border-radius: 6px; cursor: pointer;
}
button:hover { background: #000; }

.linha-form { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-form input { flex: 1; min-width: 150px; }
.linha-form button { flex: 0 0 auto; }

.rodape-form { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

.msg { font-size: 13px; }
.msg.bom { color: var(--bom); }
.msg.ruim { color: var(--ruim); }

/* vias ------------------------------------------------------------------ */

.vias { display: grid; gap: 6px; }
.via {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 6px; padding: 9px 12px;
  background: var(--papel-alto); font-size: 13.5px;
}
.via.sel { border-color: var(--acento); }
.via em { color: var(--tinta-fraca); font-style: normal; font-size: 12.5px; }
.via input { width: auto; }

/* lacunas e fontes ------------------------------------------------------ */

.lacunas { margin-top: 26px; }
.lacuna {
  font-size: 13px; color: var(--tinta-fraca);
  padding: 6px 0; border-bottom: 1px solid var(--linha);
}
.lacuna code { color: var(--tinta); }
.ok { font-size: 13px; color: var(--bom); margin-top: 24px; }

.fonte { border: 1px solid var(--linha); border-radius: 7px; padding: 12px 14px; margin-bottom: 8px; background: var(--papel-alto); }
.fonte-topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fonte-desc { font-size: 13px; margin-top: 5px; }
.fonte-med { font-size: 11.5px; color: var(--tinta-fraca); margin-top: 3px; }
.data { font-size: 11.5px; color: var(--tinta-fraca); margin-left: auto; }

.vazio { color: var(--tinta-fraca); font-size: 13.5px; padding: 18px 0; }
.erro { padding: 40px; color: var(--ruim); }

@media (max-width: 600px) {
  .folha { padding: 18px; }
  .topo { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 4px; }
}

.peso.restricao { background: #fef3c7; color: #92400e; }
.ajuda { font-size: 12.5px; color: var(--tinta-fraca); margin-bottom: 5px; }

/* extracao -------------------------------------------------------------- */

button.secundario {
  background: none; color: var(--acento); border: 1px solid var(--linha);
  font-size: 12.5px; padding: 4px 11px; margin-top: 9px;
}
button.secundario:hover { background: var(--papel); border-color: var(--acento); }
button:disabled { opacity: .55; cursor: default; }

.rendeu { font-size: 11.5px; color: var(--bom); margin-top: 4px; }

.propostas { margin-top: 30px; }
.resumo-extracao { font-size: 12.5px; color: var(--tinta-fraca); margin-bottom: 10px; }
.modelo { border: 1px solid var(--linha); border-radius: 999px; padding: 1px 8px; margin-left: 6px; font-size: 11px; }
.aviso-extracao {
  font-size: 12.5px; color: var(--tinta-fraca); background: var(--papel-alto);
  border: 1px solid var(--linha); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px;
}

.proposta {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 7px;
  padding: 11px 13px; margin-bottom: 7px; background: var(--papel-alto);
}
.proposta:hover { border-color: var(--acento); }
.proposta.rebaixada { background: #fffbeb; border-color: #fde68a; }
.proposta input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.proposta-corpo { flex: 1; min-width: 0; }
.proposta-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proposta-valor { font-size: 14px; margin: 5px 0 3px; }
.proposta-trecho {
  font-size: 12px; color: var(--tinta-fraca); font-style: italic;
  border-left: 2px solid var(--linha); padding-left: 9px;
}
.marca-rebaixada {
  font-size: 10.5px; background: #fef3c7; color: #92400e;
  padding: 1px 6px; border-radius: 3px;
}