/* VALIDAR CPF E CNPJ — só o que a base não tem. Nenhuma cor nova: tudo var(--...). */

.vc-entrada { min-height: 150px; resize: vertical; line-height: 1.5; white-space: pre; overflow-x: auto; }
.vc-status { min-height: 1.5em; margin: 14px 0 0; text-transform: none; letter-spacing: .02em; font-size: 15px; }

/* selo válido / inválido — cobre e cor de erro da base; nada de verde */
.vc-selo {
  display: inline-block; margin: 0; padding: 4px 10px; border-radius: 2px;
  font-family: var(--f-dado); font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--copper); border: 1px solid var(--copper);
}
.vc-selo.vc-ruim { color: var(--erro); border-color: var(--erro); }
.vc-numero { overflow-wrap: anywhere; font-size: clamp(34px, 6vw, 72px); }
.vc-msg { margin: 12px 0 8px; max-width: 62ch; font-size: 17px; color: var(--silk-2); }
.vc-detalhe { margin-top: 8px; max-width: 560px; }
.vc-detalhe td { overflow-wrap: anywhere; }

.vc-resumo { margin: 0; font-size: 19px; }
.vc-resumo strong { font-weight: 500; }
.vc-resumo-extra { margin: 6px 0 0; text-transform: none; letter-spacing: .02em; font-size: 15px; }

.vc-controles {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; margin-top: 18px;
}
.vc-controles .acoes { margin-top: 0; }
.vc-marcar { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--silk-2); }

/* uma linha por número: posição · número · tipo · situação */
.vc-itens { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.vc-item {
  display: grid; grid-template-columns: 4.5em minmax(0, 15em) 7.5em minmax(0, 1fr);
  gap: 4px 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15.5px;
}
.vc-pos { font-family: var(--f-dado); font-size: 15px; color: var(--silk-3); font-variant-numeric: tabular-nums; }
.vc-num { font-family: var(--f-dado); font-size: 15px; overflow-wrap: anywhere; }
.vc-tipo { font-family: var(--f-dado); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--silk-3); }
.vc-sit { color: var(--silk-2); overflow-wrap: anywhere; }
.vc-sit b { font-weight: 500; color: var(--copper); }
.vc-item.vc-ruim .vc-sit b { color: var(--erro); }
.vc-mais { margin: 14px 0 0; font-size: 15px; color: var(--silk-3); }

@media (max-width: 620px) {
  .vc-item { grid-template-columns: 3.5em minmax(0, 1fr); }
  .vc-tipo { grid-column: 2; }
  .vc-sit { grid-column: 2; }
  .vc-controles .acoes { width: 100%; }
  .vc-controles .botao { flex: 1 1 auto; }
}
.vc-mostrar-mais { margin-top: 16px; }