/* =====================================================================
   Planilhas de lançamentos: área de envio de arquivo, colunas da planilha e prévia da importação
   Não existe no /mockup: segue os tokens e componentes do design system. Views: app/views/importacao_lancamentos
   ===================================================================== */

/* Área grande para escolher o arquivo (componentes/formulario/_seletor_arquivo com area: true) */
.area-arquivo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-1); padding: var(--espaco-8) var(--espaco-4); border: 1.5px dashed var(--borda-forte); border-radius: var(--raio); background: var(--superficie-2); color: var(--texto-2); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.area-arquivo:hover { border-color: var(--primaria); background: var(--primaria-suave); }
.area-arquivo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.area-arquivo .icone { width: 28px; height: 28px; color: var(--primaria); margin-bottom: var(--espaco-1); }
.area-arquivo strong { color: var(--texto); font-size: var(--tamanho-base); }
.area-arquivo span { font-size: var(--tamanho-sm); }

.importacao-titulo { font-size: var(--tamanho-lg); }
.importacao-colunas td { vertical-align: middle; }
.importacao-colunas td:first-child { width: 30%; }
.importacao-colunas td:last-child { width: 38%; min-width: 190px; }
.importacao-colunas .select { min-height: 36px; padding-top: var(--espaco-1-5); padding-bottom: var(--espaco-1-5); font-size: var(--tamanho-md); }
.importacao-exemplos { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importacao-previa td { font-size: var(--tamanho-sm); }
/* No celular cada coluna vira um bloco: nome, exemplos e o campo do sistema com a largura toda */
@media (max-width: 640px) {
  .importacao-colunas thead { display: none; }
  .importacao-colunas, .importacao-colunas tbody, .importacao-colunas tr, .importacao-colunas td { display: block; width: 100%; }
  .importacao-colunas tr { padding: var(--espaco-2-5) 0; border-bottom: 1px solid var(--borda); }
  .importacao-colunas tr:last-child { border-bottom: 0; }
  .importacao-colunas td, .importacao-colunas td:first-child, .importacao-colunas td:last-child { border: 0; padding: 0; width: 100%; min-width: 0; }
  .importacao-colunas .importacao-exemplos { max-width: none; margin: var(--espaco-0-5) 0 var(--espaco-2); }
  .importacao-colunas tbody tr:hover { background: none; }
}
.importacao-mensagens ul { margin-top: var(--espaco-1); }
.importacao-mensagens li + li { margin-top: var(--espaco-0-5); }