/* ==========================================================================
   SGP — Camada 14: importação guiada e trilha dos 15 dias (F30)
   A tela onde o gabinete traz a própria base e o checklist que mostra o que
   ainda falta para o produto aparecer. Tudo em tokens da camada 1, então
   acompanha o tema claro/escuro sem uma regra a mais.
   ========================================================================== */

/* -- Trilha dos 15 dias --------------------------------------------------- */

.trilha__resumo {
  align-self: center;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trilha__barra {
  overflow: hidden;
  height: 8px;
  margin-bottom: var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
}

.trilha__barra-preenchida {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cor-acao);
  transition: width 240ms ease-out;
}

.trilha__passos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trilha__passo {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
}

.trilha__marca {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--cor-borda);
  border-radius: 50%;
  color: var(--cor-texto-suave);
}

.trilha__passo--feito .trilha__marca {
  border-color: var(--sgp-sucesso);
  color: var(--sgp-sucesso);
}

.trilha__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trilha__rotulo {
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.trilha__rotulo--link { color: var(--cor-acao); }

.trilha__passo--feito .trilha__rotulo {
  color: var(--cor-texto-suave);
  text-decoration: line-through;
}

.trilha__detalhe {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
}

/* -- Importação de planilha ----------------------------------------------- */

.importacao-ajuda__lista {
  margin: var(--esp-3) 0 0;
  padding-left: var(--esp-5);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
}

.importacao-ajuda__lista li + li { margin-top: var(--esp-2); }

/* A pré-visualização é uma tabela larga POR NATUREZA (uma coluna por coluna do
   arquivo): ela rola dentro do .tabela-rolagem, e nunca empurra a página. */
.importacao-previa th {
  vertical-align: top;
  min-width: 12rem;
}

.importacao-previa__coluna {
  display: block;
  margin-bottom: var(--esp-1);
  font-weight: var(--peso-semi);
  overflow-wrap: anywhere;
}

.importacao-previa td {
  max-width: 18rem;
  overflow: hidden;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campo__controle--pequeno {
  padding: var(--esp-1) var(--esp-2);
  font-size: var(--texto-sm);
}

.campo__controle--erro { border-color: var(--sgp-perigo); }

.importacao-aviso {
  margin: var(--esp-3) 0 0;
  color: var(--sgp-atencao);
  font-size: var(--texto-sm);
}

.importacao-numeros { margin-top: var(--esp-4); }

.importacao-erros { margin-top: var(--esp-4); }

.importacao-erros summary {
  cursor: pointer;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}

.importacao-erros__lista {
  margin: var(--esp-3) 0 0;
  padding-left: var(--esp-5);
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
}

.importacao-erros__item + .importacao-erros__item { margin-top: var(--esp-1); }
.importacao-erros__item--aviso { color: var(--cor-texto-suave); }

/* -- Coluna da trilha no painel comercial (/admin) ------------------------- */

.trilha-coluna {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 8rem;
}

.trilha-coluna__resumo {
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
}

.trilha-coluna__proximo {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.trilha-coluna__barra {
  overflow: hidden;
  height: 4px;
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
}

.trilha-coluna__barra span {
  display: block;
  height: 100%;
  background: var(--cor-acao);
}