/* O widget `importar` (FeitoWeb.Widgets.Importar, docs/telas.md §2). O assistente de importação. Novo (etapa 3,
   26/10/2026): os passos em cima (o widget etapas), o passo do arquivo (o campo de arquivo e as opções da tela), o das
   colunas (a tabela com o exemplo, a escolha do campo e o selo do sugerido), o da prévia (os números no .kpis do
   indicador, a escolha dos duplicados, as listas das repetidas e dos erros, a amostra) e o do resultado. Quase tudo é
   dos widgets que ele compõe (etapas, campo, tabela, indicador, selo, aviso, estado, botao); aqui, só o arranjo.
   Regra (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs): cor só por token (var(--…), com a cor de
   hoje como reserva); cor nova é token novo, no style.css (claro) e no temas.css (escuro e acrílico). Ligado no layout
   raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca (visual.css, componentes.css,
   navegacao.css, temas.css, fonte.css e a escala gerada por `mix casca.escala`) vestem por cima, como vestem tudo.
   Mudou este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */

.importar { display: flex; flex-direction: column; gap: var(--v-esp-4, 16px); min-width: 0; }
.importar :is(.importar-arquivo, .importar-colunas, .importar-previa, .importar-resultado) { display: flex;
  flex-direction: column; gap: var(--v-esp-3, 12px); }
.importar .acoes { justify-content: flex-end; }
.importar-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--v-esp-3, 12px); }

/* o arquivo lido e as notas */
.importar-info { margin: 0; color: var(--suave); font-size: .88rem; }
.importar-dica { margin: 0; color: var(--suave); font-size: .82rem; }
.importar-tit { margin: var(--v-esp-2, 8px) 0 0; font-size: .95rem; }

/* as colunas: o nome com a letra, o exemplo cortado, a escolha do campo na largura da célula, o selo e a nota */
.importar-letra { margin-left: 4px; color: var(--suave); font-size: .75rem; }
.importar-exemplo { display: inline-block; max-width: 220px; overflow: hidden; color: var(--suave);
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.importar-colunas .campo { min-width: 220px; margin: 0; }
.importar-nota { display: block; margin-top: 2px; color: var(--suave); font-size: .78rem; }

/* a prévia: os números, os duplicados, as listas */
.importar-numeros { margin-bottom: 0; }
.importar-duplicados { max-width: 520px; }
.importar-lista { padding: var(--v-esp-2, 8px) var(--v-esp-3, 12px); border: 1px solid var(--linha);
  border-radius: var(--v-raio, 10px); background: var(--e-cartao, #fff); }
.importar-lista.erros { border-color: var(--vermelho); background: var(--vermelho-f); }
.importar-lista > h3 { margin: 0 0 var(--v-esp-1, 4px); font-size: .85rem; }
.importar-lista > ul { display: grid; gap: 2px; margin: 0; padding-left: var(--v-esp-4, 16px); font-size: .86rem; }
.importar-lista > p { margin: var(--v-esp-1, 4px) 0 0; color: var(--suave); font-size: .82rem; }
.importar-vai { white-space: nowrap; }
.importar-vai.erro { color: var(--vermelho); font-weight: 600; }