/* O widget `assistente` (FeitoWeb.Widgets.Assistente, docs/telas.md §2.3; o ERP, docs/erp.md §5 e §7). Os passos de um
   assistente (a Ativação do ERP; a aba da Configuração fiscal com um passo só): o progresso no alto, a lista dos passos
   em pé à esquerda (o ícone E o texto da situação: o feito em verde com ✓, o que falta, o com erro em vermelho, o
   esperando o cliente em amarelo, o que não se aplica apagado; o aberto marcado com o traço da marca) e o passo aberto
   ao lado (o título com o selo, a descrição, o «Depende de», o resultado da última conferência com o caminho para
   resolver, o formulário e os botões). No celular (até 760 px) o passo aberto fica embaixo da lista, e nada rola de
   lado. Novo (E0b, 27/10/2026), com o prefixo .ast-. 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 vestem por cima, como vestem tudo. Mudou este arquivo: `mix
   casca.escala` (o ./servidor faz sozinho). */

.ast { position: relative; display: grid; gap: var(--v-esp-3, 12px); min-width: 0; max-width: 100%; }
.ast-vazio { padding: var(--v-esp-3, 12px); color: var(--suave); }

/* o corpo: a lista à esquerda, o passo aberto ao lado */
.ast-corpo { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: var(--v-esp-4, 16px);
  align-items: start; min-width: 0; }
.ast-um .ast-corpo { grid-template-columns: minmax(0, 1fr); }

/* a lista dos passos: em pé, cada um uma linha com o ícone, o número e o título, e a situação embaixo */
.ast-lista ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ast-link { display: flex; align-items: flex-start; gap: var(--v-esp-2, 8px); width: 100%; box-sizing: border-box;
  margin: 0; padding: 7px 10px; border: 0; border-left: 3px solid transparent; border-radius: var(--v-raio-ctrl, 8px);
  background: none; color: var(--tinta); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ast-link:hover { background: var(--e-sutil, #eef1f0); }
.ast-link:focus-visible { outline: 2px solid var(--v-foco, var(--verde)); outline-offset: -2px; }
.ast-aberto .ast-link { border-left-color: var(--verde); background: var(--verde-fundo); }
.ast-icone { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  color: var(--suave); }
.ast-nome { display: grid; gap: 1px; min-width: 0; }
.ast-passo-titulo { overflow-wrap: anywhere; }
.ast-n { color: var(--suave); font-variant-numeric: tabular-nums; }
.ast-sit { color: var(--suave); font-size: .8rem; }

/* as situações: o ícone e o texto na cor (a cor nunca é o único sinal: o texto diz) */
.ast-passo.ast-feito .ast-icone, .ast-passo.ast-feito .ast-sit { color: var(--verde-esc); }
.ast-passo.ast-erro .ast-icone, .ast-passo.ast-erro .ast-sit { color: var(--vermelho); }
.ast-passo.ast-esperando .ast-icone, .ast-passo.ast-esperando .ast-sit { color: var(--amarelo); }
.ast-passo.ast-desligado .ast-link { color: var(--suave); opacity: .7; }
.ast-passo.ast-desligado .ast-passo-titulo { text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }

/* o passo aberto: o cartão ao lado */
.ast-painel { display: grid; gap: var(--v-esp-3, 12px); min-width: 0; padding: var(--v-esp-4, 16px);
  border: 1px solid var(--linha); border-radius: var(--v-raio, var(--raio, 10px));
  background: var(--e-cartao, var(--branco)); }
.ast-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--v-esp-2, 8px); }
.ast-titulo { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.ast-titulo-n { color: var(--suave); font-weight: 400; }
.ast-opcional { color: var(--suave); font-size: .85rem; font-weight: 400; }
.ast-cab .selo { display: inline-flex; align-items: center; gap: 4px; }
.ast-descricao { margin: 0; color: var(--tinta); }

/* o «Depende de»: os passos de antes que faltam, em links */
.ast-depende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 6px 10px;
  border-radius: var(--v-raio-ctrl, 8px); background: var(--amarelo-f); color: var(--tinta); font-size: .9rem; }
.ast-depende > svg { color: var(--amarelo); }
.ast-depende-link { margin: 0; padding: 0; border: 0; background: none; color: var(--azul); font: inherit;
  text-decoration: underline; cursor: pointer; }
.ast-depende-link:focus-visible { outline: 2px solid var(--v-foco, var(--verde)); outline-offset: 2px; }
.ast-depende-sit { color: var(--suave); }

/* o resultado da última conferência: o traço na cor da situação, o caminho para resolver, o «conferido há» */
.ast-resultado { display: grid; gap: 4px; padding: 8px 12px; border-left: 3px solid var(--linha);
  border-radius: var(--v-raio-ctrl, 8px); background: var(--verde-fundo); }
.ast-resultado p { margin: 0; }
.ast-painel.ast-erro .ast-resultado { border-left-color: var(--vermelho); background: var(--vermelho-f); }
.ast-painel.ast-feito .ast-resultado { border-left-color: var(--verde); }
.ast-painel.ast-esperando .ast-resultado { border-left-color: var(--amarelo); background: var(--amarelo-f); }
.ast-resultado-texto { overflow-wrap: anywhere; }
.ast-caminho { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ast-caminho > svg { color: var(--suave); }
.ast-caminho-link { display: inline-flex; align-items: center; gap: 3px; color: var(--azul); font-weight: 600; }
.ast-caminho-link:focus-visible { outline: 2px solid var(--v-foco, var(--verde)); outline-offset: 2px; }
.ast-quando { color: var(--suave); font-size: .8rem; }
.ast-conferindo { color: var(--suave); font-style: italic; }

/* o formulário e os botões */
.ast-form { min-width: 0; }
.ast-acoes { display: flex; flex-wrap: wrap; gap: var(--v-esp-2, 8px); }

/* no celular: o passo aberto embaixo da lista, nada rolando de lado */
@media (max-width: 760px) {
  .ast-corpo { grid-template-columns: minmax(0, 1fr); }
  .ast-painel { padding: var(--v-esp-3, 12px); }
  .ast-acoes > * { flex: 1 1 auto; justify-content: center; }
}