:root {
  /* Neutros frios. O bege anterior aquecia a página e um relatório técnico
     não quer calor — quer legibilidade e distância. */
  --tinta: #0f172a;
  --tinta2: #475569;
  --fraco: #94a3b8;
  --linha: #e2e8f0;
  --linha-forte: #cbd5e1;
  --fundo: #f5f7fa;
  --papel: #ffffff;
  --azul: #1a5fb4;
  --azul-escuro: #14487f;
  --azul-claro: #e8f0fb;
  --verde: #15803d;
  --verde-claro: #e7f5ec;
  --ambar: #b45309;
  --ambar-claro: #fdf2e3;
  --vermelho: #b3261e;
  --vermelho-claro: #fdedec;
  --raio: 10px;
  --raio-g: 14px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --sombra-alta: 0 4px 12px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
  /* Numerais de largura fixa em toda a página: coluna de números que dança
     conforme o dígito parece planilha rascunhada, não relatório. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

header {
  position: sticky; top: 0; z-index: 20;
  padding: .9rem 2rem;
  border-bottom: 1px solid var(--linha);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
/* A marca é o que o usuário vê em toda tela do sistema, o dia inteiro. Vinha
   do mesmo tamanho de um rótulo qualquer e sumia no cabeçalho. */
.marca {
  font-size: 20px; font-weight: 700; letter-spacing: -.026em;
  display: flex; align-items: center; gap: 11px; color: var(--tinta);
  align-self: center;
}
.marca .logo {
  width: 38px; height: auto; color: var(--azul); flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(26, 95, 180, .28));
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.marca:hover .logo { transform: scale(1.08) rotate(-5deg); }
.sub {
  color: var(--fraco); font-size: 12px; letter-spacing: .01em;
  padding-left: 14px; border-left: 1px solid var(--linha);
}

main { max-width: 1120px; margin: 0 auto; padding: 1.8rem 1.4rem 3rem; }

footer {
  max-width: 1120px; margin: 0 auto; padding: 0 1.4rem 3rem;
  color: var(--fraco); font-size: 12px; line-height: 1.6;
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 1.4rem 1.6rem 1.6rem;
  margin-bottom: 1.1rem;
}
/* O cartão da estimativa é o resultado do trabalho: ganha presença por
   elevação e por uma faixa de cor no topo, não por moldura chamativa. */
.cartao.destaque {
  border-color: #c7dcf5; box-shadow: var(--sombra-alta);
  position: relative; overflow: hidden;
}
.cartao.destaque::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--azul), #4d8fd6);
}

/* Numeração da etapa em versalete, com o estado ao lado em pílula. */
h2 {
  font-size: 12px; font-weight: 600; margin: 0 0 1rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--tinta2);
  display: flex; align-items: center; gap: 10px;
}
h2.feito::after, h2.pendente::after {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 20px; text-transform: none;
}
h2.feito::after { content: "concluído"; color: var(--verde); background: var(--verde-claro); }
h2.pendente::after { content: "pendente"; color: var(--fraco); background: #eef1f5; }
h3 {
  font-size: 13.5px; font-weight: 600; margin: 1.5rem 0 .5rem;
  color: var(--tinta); letter-spacing: -.005em;
}

.ajuda { color: var(--tinta2); font-size: 13px; margin: .2rem 0 .9rem; max-width: 76ch; }
.fraco { color: var(--fraco); }
code {
  font: 400 12.5px/1.5 var(--mono);
  background: #eef1f5; color: #334155;
  padding: 1.5px 5px; border-radius: 5px;
}
code.hash { font-size: 11px; }
code.fraco { opacity: .6; }

label { display: block; font-size: 12.5px; color: var(--tinta2); margin-bottom: .7rem; font-weight: 500; }
label small { color: var(--fraco); font-weight: 400; }
input[type=text], select, textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 8px 11px; font-size: 14px; font-family: inherit; font-weight: 400;
  border: 1px solid var(--linha-forte); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
  transition: border-color .12s, box-shadow .12s;
}
input[type=text]:hover, select:hover { border-color: #94a3b8; }
input[type=text]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro);
}
input[type=checkbox], input[type=radio] { accent-color: var(--azul); }
#campo-formula { font-family: var(--mono); font-size: 13px; letter-spacing: -.01em; }

.linha { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.linha > label { flex: 1 1 200px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.grade small { color: var(--fraco); font-size: 11.5px; }

button {
  font: 600 13.5px inherit; font-family: inherit; letter-spacing: -.005em;
  padding: 9px 18px; border-radius: 8px;
  border: 1px solid var(--azul); background: var(--azul); color: #fff;
  cursor: pointer; margin-bottom: .7rem;
  box-shadow: var(--sombra);
  transition: background .12s, box-shadow .12s, transform .06s;
}
button:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--azul-claro); }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }
button.mini {
  padding: 4px 10px; font-size: 12px; font-weight: 500; margin: 0;
  background: var(--papel); color: var(--tinta2);
  border-color: var(--linha-forte); box-shadow: none;
}
button.mini:hover { background: #f1f5f9; color: var(--azul); border-color: var(--azul); }

.arquivo { position: relative; flex: 0 0 auto; }
.arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.arquivo span {
  display: inline-block; margin-top: 3px; padding: 8px 16px;
  border: 1px dashed var(--linha-forte); border-radius: var(--raio); background: #f8fafc;
  font-size: 14px; color: var(--tinta2);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.arquivo:hover span { border-color: var(--azul); color: var(--azul); background: var(--azul-claro); }

/* Confirmação de que o arquivo entrou.
   Antes, escolher a planilha não mudava nada na tela: o seletor continuava
   dizendo "Escolher arquivo" e o usuário ficava sem saber se anexou. Quem não
   tem certeza clica de novo, ou some da página. */
.arquivo-escolhido {
  display: none; align-items: center; gap: 10px; margin-top: 10px;
  padding: 10px 14px; border-radius: var(--raio);
  background: var(--verde-claro); border: 1px solid #bfe3cb;
  font-size: 13.5px; color: #14532d;
  animation: entrou-arquivo .32s cubic-bezier(.2, .8, .3, 1);
}
.arquivo-escolhido.tem { display: flex; }
@keyframes entrou-arquivo {
  from { opacity: 0; transform: translateY(-6px); }
}
.arquivo-escolhido .visto {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.arquivo-escolhido .nome-arq {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arquivo-escolhido .tam { color: #3f6b4f; flex: 0 0 auto; }
.arquivo-escolhido .trocar {
  margin-left: auto; flex: 0 0 auto; background: none; border: none;
  color: #14532d; text-decoration: underline; cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 2px 4px;
}

/* O botão só fica gritante quando há o que enviar. Botão em destaque máximo
   antes de existir arquivo é convite a clicar e receber erro. */
/* Os DOIS estados são classes. O estado apagado morava no seletor base, e a
   regra de destaque — de especificidade maior — não vencia a cascata por um
   motivo que não consegui isolar. Com dois estados explícitos não há disputa:
   em qualquer instante exatamente uma das classes está no elemento, e o JS
   troca uma pela outra. Também fica mais claro de ler do que "o padrão é
   apagado, e esta outra regra desapaga". */
button[data-envio-planilha] {
  transition: transform .18s ease, box-shadow .25s ease, opacity .2s ease;
}
button[data-envio-planilha].aguardando { opacity: .55; }
button[data-envio-planilha].pronto {
  opacity: 1; transform: scale(1.04);
  box-shadow: 0 0 0 0 rgba(26, 95, 180, .5);
  animation: chama-atencao 2.2s ease-out 3;
}
/* Três pulsos e para. Pulsar sem fim vira ruído e a pessoa deixa de ver. */
@keyframes chama-atencao {
  0%   { box-shadow: 0 0 0 0 rgba(26, 95, 180, .5); }
  70%  { box-shadow: 0 0 0 12px rgba(26, 95, 180, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 95, 180, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .arquivo-escolhido, button[data-envio-planilha].pronto {
    animation: none !important; transform: none !important;
  }
}

/* Tabela larga rola dentro do próprio cartão; a página nunca rola de lado. */
.rolavel { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th {
  text-align: left; font-weight: 600; color: var(--tinta2);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--linha-forte); padding: 0 10px 8px;
  white-space: nowrap;
}
td { padding: 7px 10px; border-bottom: 1px solid var(--linha); }
tbody tr:last-child td { border-bottom: none; }
/* Numeral tabular alinha a coluna pela casa decimal; sem isso a tabela
   parece digitada, não calculada. */
.dados td:not(.var):not(.fraco):not(.marca) { text-align: right; font-variant-numeric: tabular-nums; }
.dados th:not(:first-child):not(.grau) { text-align: right; }
.dados td.var { font-weight: 500; color: var(--tinta); }
.dados tbody tr:hover td { background: #f8fafc; }
.dados.compacta { font-size: 12px; }
.dados.compacta td { padding: 5px 8px; }
/* Significância entre os limites de Grau III e Grau II: aceitável, mas não é
   o melhor grau. Âmbar marca essa faixa; vermelho fica para quem não alcança
   nem o Grau II, coerente com "vermelho só marca limite". */
tr.atencao td { background: var(--ambar-claro); }
tr.ruim td { background: var(--vermelho-claro); }
b.ruim { color: var(--vermelho); }

.achados td { font-size: 12.5px; }
.achados td.marca { width: 26px; font-weight: 700; text-align: center; }
.achados td.campo { color: var(--tinta2); white-space: nowrap; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
tr.n-grave td.marca, tr.n-bloqueante td.marca { color: var(--vermelho); }
tr.n-atencao td.marca { color: var(--ambar); }

/* Nove colunas não cabem com o respiro das tabelas curtas; aperta aqui em vez
   de deixar a largura estourar o cartão. */
.saneamento { font-size: 11.5px; }
.saneamento th { padding: 0 5px 7px; }
.saneamento td { padding: 5px; }
.saneamento td.marca { width: 22px; text-align: center; font-weight: 700; }
.saneamento td.nota { white-space: normal; min-width: 130px; }
.saneamento button.mini { padding: 3px 8px; font-size: 11px; }
tr.s-1 td.marca { color: var(--ambar); }
tr.s-2 td.marca { color: var(--vermelho); }
tr.s-2 td { background: var(--vermelho-claro); }
tr.excluido td { opacity: .65; text-decoration: line-through; }
tr.excluido td:last-child { text-decoration: none; opacity: 1; }

.grau { text-align: center !important; font-weight: 500; }
.g3 { color: var(--verde); } .g2 { color: var(--ambar); }
.g1 { color: var(--vermelho); } .gp { color: var(--fraco); }
.v-atende { color: var(--verde); }
.v-limítrofe { color: var(--ambar); }
.v-não-atende { color: var(--vermelho); }
.v-indeterminado { color: var(--fraco); }
.v-recomendado { color: var(--verde); }
/* Aderência fora da faixa é laranja, não vermelho: a faixa é boa prática, não
   requisito da tabela de enquadramento — nenhum grau se perde por ela. Pintar
   de vermelho ao lado dos testes que realmente reprovam sugeria uma gravidade
   que a norma não dá. É o mesmo laranja da significância entre 10% e 20%. */
.v-recomendacao { color: var(--ambar); }

.metricas { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: .8rem; font-size: 12.5px; color: var(--tinta2); }
.metricas b { color: var(--tinta); font-weight: 500; font-variant-numeric: tabular-nums; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: .2rem 0 1.1rem; }
.num {
  background: #f8fafc; border: 1px solid var(--linha);
  border-radius: var(--raio); padding: .85rem 1.05rem;
}
.num.central { background: var(--azul-claro); border-color: #c7dcf5; }
.num .rot {
  display: block; font-size: 10.5px; color: var(--tinta2);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  margin-bottom: 3px;
}
.num strong {
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.num.central strong { color: var(--azul-escuro); }

.selos { display: flex; flex-wrap: wrap; gap: 8px; }
.selo {
  font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 20px;
  background: #eef1f5; color: var(--tinta2); border: 1px solid transparent;
}
.selo.g3 { background: var(--verde-claro); color: var(--verde); border-color: #bfe3cc; }
.selo.g2 { background: var(--ambar-claro); color: var(--ambar); border-color: #f2ddbc; }
.selo.g1 { background: var(--vermelho-claro); color: var(--vermelho); border-color: #f3cdca; }

.alerta { border-radius: var(--raio); padding: .7rem .9rem; font-size: 13px; margin: .7rem 0; border-left: 3px solid; }
.alerta.erro { background: var(--vermelho-claro); border-color: var(--vermelho); color: #501313; }
.alerta.aviso { background: var(--ambar-claro); border-color: var(--ambar); color: #412402; }
.alerta.ok { background: var(--verde-claro); border-color: var(--verde); color: #173404; }
.alerta pre { white-space: pre-wrap; font-size: 11.5px; margin: .4rem 0 0; opacity: .85; }

/* Formulário de justificativa, aberto na linha do dado. */
.just { padding: .6rem .2rem; }
.just label { margin-bottom: .3rem; }
.just textarea {
  display: block; width: 100%; margin-top: 3px; padding: 8px 10px;
  font: inherit; font-size: 13px; border: 1px solid var(--linha-forte);
  border-radius: var(--raio); background: var(--papel); color: var(--tinta);
  resize: vertical;
}
.just textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
.just .ajuda { margin: .3rem 0 .6rem; }
/* Vermelho aqui é limite: falta texto para a exclusão ser admissível. */
.just .ajuda.curta { color: var(--vermelho); }
.just-acoes { display: flex; gap: 8px; }
button.mini.primaria { background: var(--azul); border-color: var(--azul); color: #fff; }
button.mini.primaria:hover { background: #14538f; color: #fff; }

/* Tabela de dados da amostra, com seleção. */
details.dados-amostra { margin: 1rem 0; }
details.dados-amostra summary { cursor: pointer; font-size: 13px; color: var(--azul); }
.rolavel.alta { max-height: 420px; overflow: auto; }
.rolavel.alta thead th { position: sticky; top: 0; background: var(--papel); z-index: 1; }
table.amostra td { white-space: nowrap; }
table.amostra tr.fora td { opacity: .4; }
table.amostra tr.fora td:first-child { opacity: 1; }

/* Micronumerosidade: um item por nível, com o que fazer a respeito. */
.micro { margin-top: 1.2rem; }
.micro .ajuda { margin-bottom: .6rem; }
.micro-item { display: flex; gap: 10px; align-items: flex-start; }
.micro-item .sinal { font-size: 15px; line-height: 1.3; flex: 0 0 auto; color: var(--ambar); }

.linha.filtros { align-items: flex-end; gap: 12px; margin: .6rem 0 .2rem; }
.linha.filtros > label { flex: 0 1 220px; margin-bottom: 0; }
.linha.filtros .selo { margin-bottom: 6px; }

/* Nível de característica abaixo do mínimo: vermelho aqui é limite. */
.insuficiente { color: var(--vermelho); font-weight: 500; }

/* Outliers separados do restante do saneamento. */
.painel-outliers {
  margin-bottom: 1.4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--linha); border-radius: var(--raio); background: #f8fafc;
}
.painel-outliers .selos { margin-bottom: .7rem; }
.painel-outliers table { margin-top: .3rem; }

/* Diagnóstico de regressor sem significância. */
.diagnostico {
  margin-top: 1.4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--linha); border-left: 3px solid var(--fraco);
  border-radius: var(--raio); background: #f8fafc;
}
.diagnostico h3 { margin-top: 0; }
.diagnostico h4 {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fraco); margin: 0 0 .5rem;
}
.lados { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 1rem; }
.lados td.var { white-space: nowrap; }
.lados .ajuda { margin-bottom: .5rem; }

.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-top: 1rem; }
.graficos figure { margin: 0; }
.graficos figcaption {
  font-size: 11.5px; color: var(--tinta2); margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Vermelho aqui é limite: o coeficiente rompeu o sinal declarado. */
.graficos figcaption .conflito { color: var(--vermelho); }
.graficos img { width: 100%; border: 1px solid var(--linha); border-radius: var(--raio); display: block; }

/* Escolha do caminho inicial. */
.escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 1rem; }
.escolha .opcao {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .75rem .9rem; cursor: pointer; background: var(--papel);
}
.escolha .opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.escolha .opcao input { margin-top: 3px; flex: 0 0 auto; }
.escolha .opcao b { display: block; font-weight: 500; color: var(--tinta); font-size: 13.5px; }
.escolha .opcao small { display: block; color: var(--tinta2); margin-top: 3px; line-height: 1.45; }

/* Linha de declaração de variável, antes do upload. */
.linha.decl { align-items: flex-end; gap: 10px; }
.linha.decl > label { margin-bottom: 0; }
button.mini {
  font: inherit; font-size: 12px; padding: 5px 10px; cursor: pointer;
  background: var(--papel); color: var(--tinta2);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
}
button.mini:hover { border-color: var(--azul); color: var(--azul); }

/* Construtor do modelo. */
table.construtor { margin-top: .3rem; }
table.construtor td { vertical-align: middle; }
table.construtor td:first-child { text-align: center; width: 44px; }
table.construtor select, table.construtor input[type=text] { margin-top: 0; padding: 5px 7px; font-size: 12.5px; }
/* "qualitativa — código alocado" não cabe na largura que a coluna toma
   sozinha, e o seletor cortava o rótulo no meio. */
table.construtor td:nth-child(4) select { min-width: 150px; }
table.construtor td:nth-child(5) select { min-width: 160px; }
table.construtor input[type=checkbox] { width: 15px; height: 15px; }
tr.e-dependente { opacity: .45; }
tr.e-dependente td.var::after { content: " (dependente)"; color: var(--fraco); font-weight: 400; }
tr.e-dependente select, tr.e-dependente input { pointer-events: none; }

.equacao { display: flex; gap: 8px; align-items: stretch; }
.equacao input[readonly] {
  background: #f8fafc; color: var(--tinta);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
}
.equacao button.mini { flex: 0 0 auto; margin-top: 3px; }

.carregando { opacity: .45; transition: opacity .12s; pointer-events: none; }

/* Painel de soluções por problema diagnosticado. */
.solucoes { margin-top: 1.4rem; }
.solucao {
  border: 1px solid var(--linha); border-left: 3px solid var(--ambar);
  border-radius: var(--raio); padding: .9rem 1rem; margin-bottom: .8rem;
  background: #f8fafc;
}
.solucao.grave { border-left-color: var(--vermelho); }
.solucao h4 {
  font-size: 13.5px; font-weight: 500; color: var(--tinta);
  margin: 0 0 .35rem; text-transform: none; letter-spacing: 0;
  display: flex; gap: 8px; align-items: center;
}
.solucao h4 .sinal { color: var(--ambar); font-size: 14px; }
.solucao.grave h4 .sinal { color: var(--vermelho); }
.solucao .constatacao { font-size: 12.5px; color: var(--tinta2); margin: 0 0 .5rem; }
.solucao ol { margin: 0 0 .4rem; padding-left: 1.2rem; font-size: 12.5px; color: var(--tinta2); }
.solucao ol li { margin-bottom: .25rem; }
.solucao .resultado-busca:not(:empty) { margin-top: .7rem; }

/* Dicionário de variáveis: descrição livre e legenda por nível. */
details.dicionario { margin: 1rem 0; }
details.dicionario summary { cursor: pointer; font-size: 13px; color: var(--azul); }
.verbetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.verbete {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .8rem .9rem; background: var(--papel);
}
.verbete > label { margin-bottom: .4rem; font-weight: 500; color: var(--tinta); }
.niveis { display: flex; flex-direction: column; gap: 5px; margin-top: .5rem;
          border-top: 1px solid var(--linha); padding-top: .55rem; }
.nivel { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 8px;
         align-items: center; margin: 0; }
.nivel .chave {
  font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #eef1f5; border-radius: 4px; padding: 3px 0; text-align: center;
}
.nivel input { margin-top: 0; padding: 5px 8px; font-size: 12.5px; }
.nivel small { color: var(--fraco); font-size: 11px; white-space: nowrap; }
.niveis .ajuda.legenda { margin: 0 0 .3rem; font-size: 11.5px; color: var(--fraco); }
.verbete .cabeca { display: flex; align-items: center; gap: 8px; margin-bottom: .35rem; }
.verbete .cabeca input[type=checkbox] { width: 15px; height: 15px; flex: 0 0 auto; }
.verbete .cabeca span { font-weight: 500; color: var(--tinta); }
.verbete .cabeca em {
  font-style: normal; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fraco);
  background: #eef1f5; border-radius: 4px; padding: 1px 6px;
}
.verbete.texto { border-left: 3px solid var(--linha-forte); }

/* Grade de fundamentação: as três colunas de grau, com a atingida marcada. */
table.grade-graus td.opcao-grau {
  font-size: 11px; color: var(--fraco); white-space: normal;
  min-width: 120px; text-align: left !important;
}
table.grade-graus td.opcao-grau.atingido {
  background: var(--verde-claro); color: var(--verde); font-weight: 500;
}
table.grade-graus td.nota { white-space: normal; min-width: 150px; }

/* Grade por pontos (norma rural): as condições de cada item ficam empilhadas
   numa célula só. Três colunas fixas como na grade urbana não serviriam —
   aqui um item tem duas condições e outro tem quatro. */
.opcoes-pontos { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.opcoes-pontos .opcao-grau {
  font-size: 11px; color: var(--fraco); background: #f4f6f9;
  border-radius: 4px; padding: 2px 7px; white-space: normal;
}
.opcoes-pontos .opcao-grau.atingido {
  background: var(--verde-claro); color: var(--verde); font-weight: 500;
}
.opcoes-pontos .opcao-grau b { font-weight: 600; }
table.grade-pontos tr.pendente { background: #fffaf0; }
table.grade-pontos td.grau small { font-weight: 400; }
table.grade-pontos tfoot th { text-align: right; }
table.grade-pontos tfoot th:first-child { text-align: left; }

/* Declarações do avaliador no formulário do modelo. */
details.declaracoes { margin: .6rem 0; }
details.declaracoes > summary { cursor: pointer; font-weight: 500; }
details.declaracoes > summary small { color: var(--fraco); font-weight: 400; }
.declaracao-item {
  border-left: 3px solid var(--linha); padding: .35rem 0 .35rem .7rem;
  margin: .5rem 0;
}
.declaracao-item > b { display: block; font-size: 13px; margin-bottom: .25rem; }
.declaracao-item label { display: block; margin: .25rem 0; }
.declaracao-item select { width: 100%; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Descrição é o campo mais longo da linha de declaração. */
.linha.decl > label.larga { flex: 2 1 320px; }
/* Mapa ocupa a largura toda: comprimir coordenada engana a leitura de distância. */
.graficos.um { grid-template-columns: 1fr; }
.linha.coords { align-items: flex-start; margin-bottom: .4rem; }
.linha.coords > label { flex: 0 1 200px; }
.linha.coords > .ajuda { flex: 1 1 100%; margin-top: -.2rem; }

/* Mapa deslizante sobre tiles do OpenStreetMap. */
.mapa {
  position: relative; height: 460px; overflow: hidden;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: #e8eef3; cursor: grab; user-select: none;
}
.mapa.arrastando { cursor: grabbing; }
.mapa .tiles, .mapa .marcadores { position: absolute; inset: 0; }
.mapa .marcadores { pointer-events: none; }
.mapa .tiles img { position: absolute; width: 256px; height: 256px; }
.mapa .pt {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 22px; height: 22px; padding: 0 4px;
  border-radius: 11px; border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
  font: 600 10.5px/20px var(--mono); text-align: center; color: #0f172a;
  pointer-events: auto; cursor: default;
}
/* Vermelho aqui é limite: o dado passou de ±2σ. */
.mapa .pt.fora { border-color: var(--vermelho); border-width: 2.5px; }
.mapa .pt.alvo {
  background: #0f172a; color: #fff; border-color: #fff;
  width: 30px; height: 30px; border-radius: 15px; font-size: 15px; line-height: 26px;
}
.mapa .creditos {
  position: absolute; right: 6px; bottom: 5px; z-index: 5;
  background: rgba(255, 255, 255, .82); border-radius: 4px;
  padding: 1px 7px; font-size: 10.5px; color: var(--tinta2);
}
.mapa .escala-cor {
  position: absolute; left: 8px; bottom: 8px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .9); border-radius: 20px;
  padding: 4px 10px; font-size: 10.5px; color: var(--tinta2);
}
.mapa .escala-cor i {
  width: 84px; height: 8px; border-radius: 4px; display: block;
  background: linear-gradient(90deg, rgb(200,172,246), rgb(230,232,236), rgb(200,52,46));
}
/* Unidade do filtro, dentro do campo. */
.com-unidade { position: relative; display: block; }
.com-unidade input { padding-right: 46px; }
.com-unidade em {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 12px; color: var(--fraco); pointer-events: none;
}
/* Diferença negativa: o modelo estimou acima do observado. Cinza, não
   vermelho — vermelho aqui é limite, e superestimar não é transgressão. */
.dados td.negativa { color: var(--tinta2); }
/* Unitário equivalente, sob o valor do avaliando. */
.num .equivale {
  display: block; margin-top: 5px; font-size: 12px; font-weight: 500;
  color: var(--fraco); letter-spacing: 0;
}
.num .equivale code { font-size: 11px; background: none; padding: 0; }

/* ---- Painel de equações alternativas (seção 5) ---- */
.equacoes {
  margin-top: 1.6rem; padding: 1.1rem 1.2rem 1rem;
  border: 1px solid var(--linha); border-radius: 10px;
  background: var(--fundo);
}
.equacoes h3 { margin-top: 0; }
.equacoes .linha { align-items: flex-end; margin-bottom: .2rem; }

/* Seletor de equação: lista + setas. Cem equações não cabem como tabela na
   página, e o avaliador não quer ler cem — quer percorrer comparando os
   números da estimativa, que ficam logo acima. */
.seletor-equacao { margin-top: .9rem; }
.eq-nav { display: flex; align-items: center; gap: 10px; margin-bottom: .5rem; }
.eq-nav .rot {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta2);
}
.eq-nav .seta {
  width: 30px; height: 28px; padding: 0; line-height: 1;
  border: 1px solid var(--linha-forte); border-radius: 7px;
  background: var(--papel); color: var(--tinta2); cursor: pointer;
  font-size: 11px;
}
.eq-nav .seta:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.eq-nav .seta:disabled { opacity: .35; cursor: default; }
.eq-posicao { font-size: 13px; font-weight: 600; min-width: 5.5rem; text-align: center; }
.eq-dica { margin: 0; }
.eq-lista { width: 100%; font-family: var(--mono); font-size: 13px; }

.eq-detalhe {
  margin-top: .7rem; padding: .7rem .85rem;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
}
.eq-detalhe code {
  display: block; font-size: 12.5px; line-height: 1.7;
  background: none; padding: 0; word-break: break-word;
}
.eq-metricas {
  margin: .5rem 0 0; font-size: 12px; color: var(--tinta2);
  padding-top: .5rem; border-top: 1px solid var(--linha);
}
/* A cor segue a mesma régua da tabela de coeficientes: até 10% normal, até
   20% âmbar, acima disso vermelho. */
.eq-metricas.atencao { color: var(--ambar); }
.eq-metricas.ruim { color: var(--vermelho); }

/* Campo do avaliando que não é variável do modelo — a área, quando a
   dependente é unitária. Marcado para não parecer regressor esquecido. */
.grade label.fora-do-modelo { border-left: 2px solid var(--azul); padding-left: 9px; }
.etiqueta {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--azul); background: var(--azul-claro); border-radius: 4px;
  text-transform: none;
}

/* Sensibilidade do sinal: que dados, se excluídos, alinham o efeito ao
   declarado. Fica dentro do alerta de conflito, não como seção própria. */
.sensibilidade-sinal {
  margin: .9rem 0 0; padding: 1rem 1.1rem;
  border: 1px solid var(--linha); border-left: 3px solid var(--ambar);
  border-radius: 8px; background: var(--papel);
}
.sensibilidade-sinal h4 { margin: 0 0 .6rem; font-size: 13.5px; }
.sensibilidade-sinal table { margin-top: .4rem; }
.pares-sinal { margin: .4rem 0 0; padding-left: 1.2rem; font-size: 13px; }
.pares-sinal li { margin: .15rem 0; }

/* ---- Entrada e conta ---- */
main.estreito { max-width: 460px; }
.abas { display: flex; gap: 4px; margin-bottom: 1.2rem;
        border-bottom: 1px solid var(--linha); }
.aba {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: .55rem .9rem; font-size: 14px; font-weight: 600;
  color: var(--fraco); cursor: pointer;
}
.aba.ativa { color: var(--azul); border-bottom-color: var(--azul); }
.estreito form label { display: block; margin-bottom: .9rem; }
.estreito form input { width: 100%; }
.estreito form button[type=submit] { width: 100%; margin-top: .3rem; }

/* Barra da conta e lista de avaliações salvas. */
.conta { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.conta .quem { color: var(--tinta2); }
.recentes { margin: .6rem 0 0; padding: 0; list-style: none; }
.recentes li {
  display: flex; align-items: baseline; gap: 10px; padding: .45rem 0;
  border-bottom: 1px solid var(--linha);
}
.recentes li:last-child { border-bottom: none; }
.recentes .quando { color: var(--fraco); font-size: 12px; margin-left: auto; }
.recentes button { background: none; border: none; padding: 0; cursor: pointer;
                   color: var(--azul); font-size: 14px; text-align: left; }
.recentes button:hover { text-decoration: underline; }
button.perigo { background: var(--vermelho); }
button.perigo:hover { background: #8f1e17; }
#painel-conta h3 { margin-top: 1.4rem; }

/* ---- Laudos emitidos ---- */
.laudo-emitido {
  padding: .9rem 1rem; margin-bottom: .7rem;
  border: 1px solid var(--linha); border-left: 3px solid var(--azul);
  border-radius: 8px; background: var(--papel);
}
.laudo-emitido .cabeca { display: flex; align-items: baseline; gap: 10px; }
.laudo-emitido .cabeca .quando { margin-left: auto; color: var(--fraco); font-size: 12px; }
.laudo-emitido .equacao code { font-size: 12px; }
.laudo-emitido .metricas { margin: .5rem 0; }
a.botao {
  display: inline-block; padding: .38rem .8rem; border-radius: 7px;
  background: var(--azul); color: #fff; font-size: 13px; text-decoration: none;
}
a.botao:hover { background: var(--azul-escuro); }

/* ---- Barra lateral ---- */
/* Oculta por padrão em qualquer largura, e o mesmo botão abre e fecha. O
   conteúdo não é empurrado: a lateral flutua por cima, senão a área de
   trabalho mudaria de largura a cada abertura e as tabelas largas do laudo
   refluiriam no meio da leitura. */
.app { display: block; }

.lateral {
  position: fixed; top: 61px; left: 0; z-index: 25;
  width: 244px; height: calc(100vh - 61px);
  padding: 1.2rem .8rem;
  border-right: 1px solid var(--linha); background: var(--papel);
  box-shadow: var(--sombra-alta);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .18s ease;
  visibility: hidden;
}
.lateral.aberta { transform: none; visibility: visible; }

/* Véu por cima do conteúdo: clicar fora fecha, que é o gesto esperado de um
   menu que flutua. */
.veu {
  position: fixed; inset: 61px 0 0; z-index: 24;
  background: rgba(15, 23, 42, .18);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.veu.visivel { opacity: 1; pointer-events: auto; }

.lateral .item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: .55rem .7rem; border: none; border-radius: 8px;
  background: none; color: var(--tinta2); cursor: pointer;
  font: inherit; font-size: 14px; text-align: left;
}
.lateral .item:hover { background: var(--fundo); color: var(--tinta); }
.lateral .item.ativo {
  background: var(--azul-claro); color: var(--azul); font-weight: 600;
}
.lateral .ic {
  width: 20px; text-align: center; font-size: 13px; color: var(--fraco);
  flex: 0 0 auto;
}
.lateral .item.ativo .ic { color: var(--azul); }
.conta-badge {
  margin-left: auto; padding: 1px 7px; border-radius: 10px;
  background: var(--linha); color: var(--tinta2);
  font-size: 11px; font-weight: 600;
}
.lateral .item.ativo .conta-badge { background: #fff; color: var(--azul); }
.conta-badge.alerta-badge { background: var(--ambar); color: #fff; }
.lateral .separador { height: 1px; background: var(--linha); margin: .7rem .5rem; }
.rodape-lateral {
  margin-top: auto; padding: .8rem .7rem 0;
  color: var(--fraco); font-size: 11px; line-height: 1.5;
}

.app main { max-width: 1120px; margin: 0 auto; }

/* O botão que abre e fecha. Sempre visível, em qualquer largura. */
.hamburguer {
  background: none; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--tinta2); padding: .3rem .55rem; margin-right: 2px;
}
.hamburguer:hover { background: var(--fundo); }
.hamburguer[aria-expanded="true"] {
  background: var(--azul-claro); color: var(--azul);
  border-color: var(--azul-claro);
}

/* Oferta que substitui o formulário do laudo durante o teste gratuito.
   Azul, não vermelho: não é erro nem limite atingido — é o produto pedindo
   para ser comprado. Vermelho aqui mentiria sobre o que aconteceu. */
.oferta-laudo {
  border: 1px solid var(--azul); border-radius: 10px;
  background: var(--azul-claro); padding: 1.1rem 1.2rem; margin: .2rem 0 1rem;
}
.oferta-titulo { margin: 0 0 .4rem; font-weight: 600; color: var(--tinta); }
.oferta-preco { margin: .9rem 0; font-size: 15px; color: var(--tinta); }
.oferta-preco b { font-size: 19px; font-variant-numeric: tabular-nums; }
.botao-assinar {
  background: var(--azul); color: #fff; border: none; cursor: pointer;
  font: inherit; font-weight: 600; padding: .6rem 1.2rem; border-radius: 8px;
}
.botao-assinar:hover { background: var(--azul-escuro); }

.planos { margin: .4rem 0 0; padding-left: 1.2rem; font-size: 14px; }
.planos li { margin: .2rem 0; }
.planos .preco { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Explicação do intervalo. Fica logo abaixo do seletor e muda com a escolha:
   é a diferença entre "valor de mercado" e "preço de um negócio", que decide
   qual número vai ao laudo assinado. */
.explica-intervalo {
  margin: -.4rem 0 1rem; padding: .7rem .9rem;
  background: var(--azul-claro); border-left: 2px solid var(--azul);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 13px; line-height: 1.6; color: var(--tinta2);
}
.explica-intervalo:empty { display: none; }

/* ---------- Tutorial de primeiro acesso ---------- */
.tutorial {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1.4rem;
  background: rgba(8, 13, 26, .62); backdrop-filter: blur(4px);
  animation: tut-entra .3s ease;
}
.tutorial[hidden] { display: none; }
@keyframes tut-entra { from { opacity: 0; } }
.tutorial-caixa {
  background: var(--papel); border-radius: var(--raio-g);
  box-shadow: 0 30px 80px rgba(8, 13, 26, .5);
  width: min(520px, 100%); padding: 1.8rem 1.8rem 1.3rem;
  animation: tut-sobe .34s cubic-bezier(.2, .8, .3, 1);
}
@keyframes tut-sobe { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.tut-passo { display: none; }
.tut-passo.ativo { display: block; animation: tut-troca .3s cubic-bezier(.2, .8, .3, 1); }
@keyframes tut-troca { from { opacity: 0; transform: translateX(12px); } }
.tut-icone {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 1rem;
  background: var(--azul-claro); color: var(--azul);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.tut-contador {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fraco); margin-bottom: .35rem;
}
.tutorial-caixa h2 {
  font-size: 19px; font-weight: 680; letter-spacing: -.02em; color: var(--tinta);
  text-transform: none; margin: 0 0 .5rem; display: block;
}
.tutorial-caixa p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tinta2); }

.tut-pontos { display: flex; gap: 7px; margin: 1.5rem 0 1.2rem; }
.tut-pontos .ponto {
  width: 8px; height: 8px; padding: 0; margin: 0; border-radius: 50%;
  background: var(--linha-forte); border: none; box-shadow: none; cursor: pointer;
  transition: background .22s ease, width .22s ease;
}
.tut-pontos .ponto.ativo { background: var(--azul); width: 22px; border-radius: 4px; }

.tut-acoes { display: flex; align-items: center; gap: 12px; }
.tut-acoes button[data-tut-proximo] { margin-left: auto; margin-bottom: 0; }
.tut-acoes .mini { margin-bottom: 0; }
.tut-nunca {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12.5px; color: var(--tinta2); cursor: pointer;
}
.tut-nunca input { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tutorial, .tutorial-caixa, .tut-passo.ativo { animation: none !important; }
}

/* Renomear a regressão, no lugar do nome. */
.recentes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.origem-arq {
  font-size: 11.5px; color: var(--fraco); font-family: var(--mono);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recentes .renomear { opacity: 0; transition: opacity .18s ease; }
.recentes li:hover .renomear,
.recentes li:focus-within .renomear { opacity: 1; }
.form-renomear { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
.form-renomear[hidden] { display: none; }
.form-renomear input {
  flex: 1 1 auto; margin: 0; max-width: 380px;
  padding: 6px 10px; font-size: 14px;
}
.form-renomear .mini { margin: 0; }

/* Acrescentar variável à amostra carregada. */
.nova-variavel {
  margin-top: 1.2rem; border: 1px dashed var(--linha-forte);
  border-radius: var(--raio); padding: .9rem 1.1rem;
  background: #fbfcfe;
}
.nova-variavel > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--azul);
  list-style: none;
}
.nova-variavel > summary::before { content: "+ "; font-weight: 700; }
.nova-variavel[open] > summary::before { content: "− "; }
.nova-variavel > summary::-webkit-details-marker { display: none; }
.valores-nova-var .col-valor { width: 130px; }
.valores-nova-var input {
  width: 100%; margin: 0; padding: 4px 8px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.valores-nova-var tr.fora { opacity: .5; }
kbd {
  font: 600 11px var(--mono); background: #eef1f5; color: #334155;
  border: 1px solid var(--linha-forte); border-bottom-width: 2px;
  padding: 1px 5px; border-radius: 4px;
}

/* ============================================================
   Permanência no sistema
   ============================================================
   O que prende um profissional numa ferramenta de trabalho não é animação:
   é saber onde está, quanto falta e o que fazer a seguir. Confete numa tela
   que produz peça técnica assinada tem efeito contrário — parece brinquedo, e
   quem assina o laudo não quer brincar.

   Daí o que entra aqui: trilha de etapas sempre visível, cartão que responde
   ao passar do mouse, número que se acende quando muda, e o próximo passo
   dito por escrito. */

/* --- Trilha de etapas, fixa no alto --- */
.trilha {
  position: sticky; top: 62px; z-index: 15;
  display: flex; gap: 2px; align-items: center;
  padding: .55rem .8rem; margin: 0 0 1.1rem;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid var(--linha); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
}
.trilha::-webkit-scrollbar { display: none; }
.trilha .etapa {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: 12px; color: var(--fraco); white-space: nowrap;
  background: none; border: none; cursor: pointer; margin: 0;
  transition: background .2s ease, color .2s ease;
}
.trilha .etapa:hover { background: var(--fundo); color: var(--tinta2); }
.trilha .etapa .bola {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  background: #eef1f5; color: var(--fraco);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.trilha .etapa.feita { color: var(--verde); }
.trilha .etapa.feita .bola { background: var(--verde); color: #fff; }
.trilha .etapa.atual { color: var(--azul); font-weight: 600; background: var(--azul-claro); }
.trilha .etapa.atual .bola { background: var(--azul); color: #fff; transform: scale(1.12); }
.trilha .traco { flex: 0 0 14px; height: 1px; background: var(--linha-forte); }

/* --- Cartão que responde ao mouse --- */
.cartao { transition: box-shadow .25s ease, border-color .25s ease; }
.cartao:hover { box-shadow: var(--sombra-alta); }

/* --- Número que acende ao mudar ---
   Marcado pelo JS quando o valor difere do anterior. Serve para o avaliador
   ver O QUE mudou depois de excluir um dado, em vez de reler a tela inteira. */
@keyframes acendeu {
  0%   { background: #fff6d8; }
  100% { background: transparent; }
}
.mudou { animation: acendeu 1.6s ease-out; border-radius: 4px; }

/* --- Próximo passo, dito por escrito --- */
.proximo-passo {
  display: flex; align-items: center; gap: 10px;
  margin: 1rem 0 0; padding: .8rem 1rem;
  background: var(--azul-claro); border-radius: var(--raio);
  font-size: 13.5px; color: var(--tinta);
}
.proximo-passo .seta { color: var(--azul); font-weight: 700; flex: 0 0 auto; }
.proximo-passo b { color: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  .trilha .etapa, .trilha .etapa .bola, .cartao, .mudou {
    transition: none !important; animation: none !important; transform: none !important;
  }
}

/* Digitar os dados direto na tela. */
.ou-digite {
  display: flex; align-items: center; gap: 12px;
  margin: 1.6rem 0 1.2rem; color: var(--fraco); font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em;
}
.ou-digite::before, .ou-digite::after {
  content: ""; flex: 1; height: 1px; background: var(--linha);
}
.grade-digitada th { white-space: nowrap; }
.grade-digitada input {
  width: 100%; min-width: 90px; margin: 0; padding: 4px 8px; font-size: 13px;
}
.grade-digitada td { padding: 3px 4px; }
.grade-digitada .mini { padding: 2px 7px; line-height: 1; }

/* Link de indicação. */
.linha-copia { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.linha-copia input { margin: 0; font-family: var(--mono); font-size: 12.5px; }
.linha-copia .mini { margin: 0; flex: 0 0 auto; }

/* Estado vazio da grade digitada. Fica no fluxo, não dentro da tabela: como
   <td> ele aparecia deslocado à direita e passava despercebido — que foi
   exatamente o que aconteceu. */
.grade-vazia {
  margin: .6rem 0 1rem; padding: .8rem 1rem;
  background: var(--ambar-claro); border-left: 2px solid var(--ambar);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 13px; color: #7c4a11;
}
.grade-vazia[hidden] { display: none; }
.grade-vazia.pisca { animation: chamou 1.2s ease-out; }
@keyframes chamou {
  0%, 100% { background: var(--ambar-claro); }
  30%      { background: #fbe3bd; }
}
/* Mesmo tratamento do botão de upload: apagado enquanto não há o que fazer. */
button.aguardando { opacity: .55; }

/* Marcador de dependente na declaração. É papel, não tipo — por isso fica
   antes do nome, separado do seletor de tipo. */
.marca-dep {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
  margin: 0 0 .7rem; align-self: flex-end; padding-bottom: 9px;
  font-size: 12px; color: var(--tinta2); cursor: pointer; white-space: nowrap;
}
.marca-dep input { margin: 0; }
.marca-dep:hover { color: var(--azul); }