/* Shadcn: neutro, borda fina, sombra mínima, tipografia pequena. */
:root {
  --fundo: 0 0% 100%;
  --frente: 240 10% 3.9%;
  --cartao: 0 0% 100%;
  --borda: 240 5.9% 90%;
  --mudo: 240 4.8% 95.9%;
  --mudo-frente: 240 3.8% 46.1%;
  --primario: 240 5.9% 10%;
  --primario-frente: 0 0% 98%;
  --perigo: 0 72% 51%;
  --sucesso: 142 71% 40%;
  --raio: 0.65rem;
  --sombra: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

html[data-tema="escuro"] {
  --fundo: 240 10% 3.9%;
  --frente: 0 0% 98%;
  --cartao: 240 8% 6%;
  --borda: 240 3.7% 15.9%;
  --mudo: 240 3.7% 15.9%;
  --mudo-frente: 240 5% 64.9%;
  --primario: 0 0% 98%;
  --primario-frente: 240 5.9% 10%;
  --perigo: 0 62% 50%;
  --sucesso: 142 60% 45%;
  --sombra: 0 1px 2px 0 rgb(0 0 0 / 0.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: hsl(var(--fundo));
  color: hsl(var(--frente));
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------------------------------------------------------------- topo */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.marca { display: flex; align-items: center; gap: 12px; }

.logo {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: hsl(var(--primario));
  color: hsl(var(--primario-frente));
}

.logo svg { width: 19px; height: 19px; }

h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: hsl(var(--frente)); }

.fraco { color: hsl(var(--mudo-frente)); margin: 0; }
.pequeno { font-size: 12px; }
.mt4 { margin-top: 4px; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }

/* --------------------------------------------------------------- cartão */
.cartao {
  background: hsl(var(--cartao));
  border: 1px solid hsl(var(--borda));
  border-radius: var(--raio);
  padding: 22px 24px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cabecalho-bloco { display: flex; flex-direction: column; gap: 3px; }
.cabecalho-bloco.linha-entre { flex-direction: row; align-items: center; justify-content: space-between; }

.divisor { border: 0; border-top: 1px solid hsl(var(--borda)); margin: 4px 0; }

/* --------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid hsl(var(--borda));
  border-radius: calc(var(--raio) - 2px);
  background: hsl(var(--cartao));
  color: hsl(var(--frente));
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, opacity .12s;
  white-space: nowrap;
}

.btn:hover { background: hsl(var(--mudo)); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }

.btn.primario {
  background: hsl(var(--primario));
  color: hsl(var(--primario-frente));
  border-color: hsl(var(--primario));
}
.btn.primario:hover { opacity: .88; }
.btn.grande { height: 40px; padding: 0 22px; font-size: 14px; }

/* ------------------------------------------------------------- entrada */
.solta {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 40px 20px;
  border: 1px dashed hsl(var(--borda));
  border-radius: calc(var(--raio) + 2px);
  cursor: pointer;
  text-align: center;
  transition: background .12s, border-color .12s;
}
.solta:hover, .solta.ativo {
  background: hsl(var(--mudo) / .55);
  border-color: hsl(var(--mudo-frente));
}
.solta svg { width: 26px; height: 26px; color: hsl(var(--mudo-frente)); margin-bottom: 4px; }
.solta p { margin: 0; }

/* -------------------------------------------------------------- métricas */
.grade-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: hsl(var(--borda));
  border: 1px solid hsl(var(--borda));
  border-radius: calc(var(--raio) - 2px);
  overflow: hidden;
}

.metrica {
  background: hsl(var(--cartao));
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.metrica span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: hsl(var(--mudo-frente));
}
.metrica strong {
  font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------- mapeamento */
.mapear { display: flex; flex-direction: column; gap: 10px; }
.mapear-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mapear-topo h3 { margin-bottom: 2px; }

.tabela-scroll {
  max-height: 340px;
  overflow: auto;
  border: 1px solid hsl(var(--borda));
  border-radius: calc(var(--raio) - 2px);
}

.tabela-mapear { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela-mapear th {
  position: sticky; top: 0; z-index: 1;
  background: hsl(var(--mudo) / .7);
  backdrop-filter: blur(4px);
  text-align: left;
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  color: hsl(var(--mudo-frente));
  padding: 8px 12px;
  border-bottom: 1px solid hsl(var(--borda));
}
.tabela-mapear td {
  padding: 7px 12px;
  border-bottom: 1px solid hsl(var(--borda) / .7);
  vertical-align: middle;
}
.tabela-mapear tr:last-child td { border-bottom: 0; }
.tabela-mapear tr:hover td { background: hsl(var(--mudo) / .35); }

.col-nome { font-weight: 500; }
.col-amostra {
  display: block;
  font-size: 11px;
  color: hsl(var(--mudo-frente));
  font-family: var(--mono);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.tabela-mapear select { height: 30px; font-size: 12px; padding: 0 8px; max-width: 220px; }
.tabela-mapear select.vazio { color: hsl(var(--mudo-frente)); }

.tipo-selo {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .02em;
  background: hsl(var(--mudo));
  color: hsl(var(--mudo-frente));
  white-space: nowrap;
}
.tipo-selo.num { background: hsl(217 91% 60% / .12); color: hsl(217 91% 45%); }
.tipo-selo.data { background: hsl(38 92% 50% / .14); color: hsl(32 95% 38%); }
.tipo-selo.fone { background: hsl(142 71% 45% / .13); color: hsl(142 60% 32%); }
.tipo-selo.doc { background: hsl(262 83% 58% / .13); color: hsl(262 70% 45%); }

.perigo { color: hsl(var(--perigo)); }

.chips2-mapear { display: flex; flex-wrap: wrap; gap: 6px; }

.ficha {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: 1px solid hsl(var(--borda));
  border-radius: 999px;
  font-size: 12px;
  background: hsl(var(--mudo) / .5);
}
.ficha b { font-weight: 500; }
.ficha i { font-style: normal; color: hsl(var(--mudo-frente)); }
.ficha.falta { border-style: dashed; color: hsl(var(--mudo-frente)); }

/* --------------------------------------------------------------- campos */
.campo {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid hsl(var(--borda));
  border-radius: calc(var(--raio) - 2px);
  background: hsl(var(--fundo));
  color: hsl(var(--frente));
  font: inherit; font-size: 13px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.campo:focus { border-color: hsl(var(--mudo-frente)); box-shadow: 0 0 0 3px hsl(var(--mudo)); }
.campo::placeholder { color: hsl(var(--mudo-frente)); }

.rotulo {
  display: block;
  font-size: 12px; font-weight: 500;
  margin-bottom: 6px;
}

.caixa-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer;
  color: hsl(var(--mudo-frente));
}
.caixa-check input { width: 15px; height: 15px; accent-color: hsl(var(--primario)); }

.linha { display: flex; gap: 8px; align-items: center; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .duas-colunas { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- chips */
.chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 36px;
  padding: 6px;
  border: 1px solid hsl(var(--borda));
  border-radius: calc(var(--raio) - 2px);
  background: hsl(var(--fundo));
}

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: hsl(var(--primario));
  color: hsl(var(--primario-frente));
  font-size: 12px;
  border: 0;
  cursor: pointer;
}
.chip::after { content: "×"; opacity: .6; font-size: 13px; line-height: 1; }
.chip:hover::after { opacity: 1; }

.sugestoes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-height: 96px; overflow: auto; }
.sugestao {
  padding: 3px 9px;
  border: 1px solid hsl(var(--borda));
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--mudo-frente));
  font: inherit; font-size: 12px;
  cursor: pointer;
}
.sugestao:hover { background: hsl(var(--mudo)); color: hsl(var(--frente)); }

/* -------------------------------------------------------------- detalhes */
.detalhes {
  border: 1px solid hsl(var(--borda));
  border-radius: calc(var(--raio) - 2px);
  padding: 10px 12px;
}
.detalhes summary {
  cursor: pointer;
  font-size: 13px;
  color: hsl(var(--mudo-frente));
  list-style: none;
}
.detalhes summary::-webkit-details-marker { display: none; }
.detalhes summary::before { content: "▸ "; }
.detalhes[open] summary::before { content: "▾ "; }

.json {
  margin: 10px 0 0;
  padding: 12px;
  background: hsl(var(--mudo) / .6);
  border-radius: calc(var(--raio) - 3px);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  overflow: auto;
  max-height: 220px;
}

.lista-erros { margin: 10px 0 0; padding-left: 18px; font-size: 12px; color: hsl(var(--mudo-frente)); }
.lista-erros li { margin-bottom: 2px; }

/* ------------------------------------------------------------- progresso */
.barra {
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--mudo));
  overflow: hidden;
}
.preenchimento {
  height: 100%;
  background: hsl(var(--primario));
  border-radius: 999px;
  transition: width .35s ease;
}

.log {
  margin: 0;
  padding: 12px;
  background: hsl(var(--mudo) / .55);
  border-radius: calc(var(--raio) - 3px);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  max-height: 190px;
  overflow: auto;
  color: hsl(var(--mudo-frente));
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------- aviso */
.aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px;
  border: 1px solid hsl(var(--perigo) / .35);
  background: hsl(var(--perigo) / .06);
  border-radius: var(--raio);
  flex-wrap: wrap;
}
.aviso strong { font-size: 13px; }
.aviso .linha { flex: 1; min-width: 260px; }

/* --------------------------------------------------------------- extras */
.acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rodape { text-align: center; margin-top: 12px; }

.hidden { display: none !important; }

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: hsl(var(--mudo));
  color: hsl(var(--mudo-frente));
}
.selo.ok { background: hsl(var(--sucesso) / .12); color: hsl(var(--sucesso)); }
.selo.erro { background: hsl(var(--perigo) / .12); color: hsl(var(--perigo)); }

@media (max-width: 560px) {
  .pagina { padding: 20px 14px 48px; }
  .cartao { padding: 18px; }
  .topo { flex-wrap: wrap; }
}