/* ==========================================================================
   Importação de saldo — zona de arrastar-e-soltar, cartão de arquivo e
   barra de progresso (passo 1 do wizard, ImportacaoPage.js)
   ========================================================================== */

.upload-zona {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 8rem;
  padding: var(--e-5);
  border: 2px dashed var(--linha-2);
  border-radius: var(--raio-lg);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-zona:hover,
.upload-zona:focus-visible {
  border-color: var(--azul-500);
  background: var(--azul-100);
}
.upload-zona:focus-visible { outline: none; }
.upload-zona--arrastando {
  border-color: var(--azul-500);
  background: var(--azul-100);
}

.upload-zona__texto {
  color: var(--texto-2);
  font-size: var(--txt-sm);
}
.upload-zona__texto strong { color: var(--azul-900); }

.upload-arquivo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--surface);
}
.upload-arquivo__icone { font-size: var(--txt-xl); line-height: 1; }
.upload-arquivo__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.upload-arquivo__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-progresso {
  height: 8px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
}
.upload-progresso__barra {
  height: 100%;
  width: 0%;
  background: var(--azul-500);
  border-radius: inherit;
  transition: width .2s ease;
}

/* --- prévia da importação de SKUs (modal da aba Produtos) ------------------ */
/*
  A prévia pode trazer 200 linhas dentro de um modal. Sem um teto de altura, a
  tabela empurra os botões "Confirmar/Cancelar" para fora da área visível e a
  pessoa precisa rolar o modal inteiro para achar a ação — no celular isso
  significa rolar centenas de linhas. Com o teto, a lista rola dentro de si e
  as ações ficam sempre a um gesto de distância.
*/
.previa-skus .tabela__scroll {
  max-height: 22rem;
  overflow-y: auto;
}

/* Observação é texto longo e precisa quebrar; SKU e EAN são códigos e NÃO —
   "NOVO1-7333E3" partido em duas linhas deixa de ser legível como código. */
.previa-skus .tabela td:last-child { white-space: normal; }
.previa-skus .tabela td:nth-child(2),
.previa-skus .tabela td:nth-child(4) { white-space: nowrap; }

/*
  Barra de ações grudada no fim do corpo do modal.

  Sem isso, as três faixas de aviso mais a tabela empurram "Confirmar
  importação" para além da dobra: no celular são vários gestos de rolagem até
  o botão, e a pessoa fica sem saber se o modal terminou. As margens negativas
  compensam o padding de `.modal__corpo` para a barra encostar nas bordas e ler
  como rodapé de verdade.
*/
.modal__corpo .acoes-importacao {
  position: sticky;
  bottom: calc(var(--e-5) * -1);
  z-index: 1;
  margin: var(--e-2) calc(var(--e-5) * -1) calc(var(--e-5) * -1);
  padding: var(--e-3) var(--e-5);
  background: var(--surface);
  border-top: 1px solid var(--linha);
}

@media (max-width: 767px) {
  .previa-skus .tabela__scroll { max-height: 60vh; }
  /* Botões de largura cheia e empilhados: alvo de toque em vez de fila apertada. */
  .modal__corpo .acoes-importacao { justify-content: stretch; }
  .modal__corpo .acoes-importacao .btn { flex: 1 1 100%; }
}