/* dicode.ai — CSS só da página VCF para Excel (/vcf-para-excel). Leva 9.
   Tela: assets/js/ferramentas/telas/vcf-para-excel.js; opções: templates/ferramentas/vcf-para-excel.html.
   As regras de .vcf-resumo, .vcf-cartoes e .vcf-marca se repetem em excel-para-vcf.css (cada página
   carrega só o próprio CSS). Só os tokens do design system, cantos retos, sem sombra nem gradiente,
   linhas de 1px, alvos de toque de 44px. */

.vcf { display: grid; gap: 24px; min-width: 0; }
.vcf [hidden] { display: none; }

/* Resumo do que foi lido */
.vcf-resumo { display: grid; gap: 8px; min-width: 0; }
.vcf-resumo:empty { display: none; }
.vcf-resumo p { margin: 0; overflow-wrap: anywhere; }
.vcf-resumo-principal { font-size: 18px; line-height: 1.35; }
.vcf-lendo { color: var(--cinza); }
.vcf-resumo-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.vcf-resumo-lista li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; }
.vcf-resumo-lista li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); transform: translateY(-1px); }

/* Grupos de repetidos (juntar) */
.vcf-grupos { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.vcf-grupos-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.vcf-grupos-topo .link-botao { min-height: 44px; }
.vcf-grupos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--linha);
}
.vcf-grupos-lista > li { padding: 6px 0 10px; border-bottom: 1px solid var(--linha); min-width: 0; }
.vcf-grupo .opcao span { overflow-wrap: anywhere; }
.vcf-grupo-nota { margin: 0 0 0 28px; font-size: 14px; }
.vcf-grupo-nota--duvida::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--laranja); vertical-align: 1px; }

.vcf-ddd .entrada { max-width: 120px; }

/* Prévia: cartões (um contato por cartão) */
.vcf-previa { display: grid; gap: 10px; min-width: 0; }
.vcf-cartoes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 720px) { .vcf-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vcf-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vcf-cartao { display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--linha); background: var(--branco); }
.vcf-cartao p { margin: 0; overflow-wrap: anywhere; }
.vcf-cartao-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 16px; }
.vcf-cartao-linha { font-size: 14px; color: var(--cinza); font-family: var(--fonte-mono); line-height: 1.5; }
.vcf-marca {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--preto);
  background: var(--laranja);
}
.vcf-marca--leve { margin-left: 8px; background: var(--superficie); }