/*
 * Painel · estilos de assistente de instalação (I0 a I10) — pacote C2.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* A coluna do assistente: pensada para o celular, centrada e estreita no computador. */
.inst-coluna { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--espaco-4); }
.inst-titulo { margin: 0; font: 700 32px/36px var(--font-titulo); }
.inst-subtitulo { margin: 0; font: 600 20px/28px var(--font-texto); display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.inst-cartao { padding: var(--espaco-4); gap: var(--espaco-3); }
.inst-mono { font-family: var(--font-mono); letter-spacing: .04em; }

/* "Mesa 01 · passo 4 de 10" com a barra ao lado. */
.inst-sub { display: flex; align-items: center; gap: var(--espaco-3); font-size: 14px; line-height: 20px; color: var(--texto-2); }
.inst-sub .ui-progresso { flex: 1; }

/* Ajuda do passo: links de 44 px, separados do resto por uma linha. */
.inst-ajuda { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--linha); padding-top: var(--espaco-2); }
.inst-ajuda a { display: flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo-toque); color: var(--link); font-weight: 500; }

/* O LCD da mesa, com a legenda embaixo. */
.inst-lcd { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-1); margin: 0; max-width: 100%; }
.inst-lcd .ui-lcd { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.inst-lcd .ui-lcd pre { font-size: 13px; line-height: 18px; }

/* Formulários dos passos 2, 3 e 5. */
.inst-form { display: flex; flex-direction: column; gap: var(--espaco-4); }
.inst-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-4); align-items: end; }
.inst-quantidade { display: flex; gap: var(--espaco-2); align-items: center; }
.inst-quantidade input { width: 72px; text-align: center; }
.inst-previa { display: flex; flex-direction: column; gap: var(--espaco-2); }
.inst-previa__lista { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }

/* I0: a lista de mesas, uma por linha. */
.inst-mesas { margin: 0; padding: 0; list-style: none; }
.inst-mesa { display: flex; align-items: center; gap: var(--espaco-3); padding: var(--espaco-3) 0; border-bottom: 1px solid var(--linha); }
.inst-mesa__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--espaco-1); }
.inst-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }

/* I4: cada parte do kit é um link de 44 px. */
.inst-parte { display: flex; align-items: center; min-height: var(--alvo-toque); color: inherit; text-decoration: none; }

/* I4: "O que vem no kit" abre e fecha. */
.inst-kit summary { display: flex; align-items: center; min-height: var(--alvo-toque); cursor: pointer; color: var(--link); font-weight: 500; }
.inst-kit ul { margin: 0; padding-left: var(--espaco-5); display: flex; flex-direction: column; gap: var(--espaco-1); }

/* I6: o que o LCD diz quando a mesa não conecta, e o que fazer em cada caso. */
.inst-diag { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--espaco-3); }
.inst-diag li { display: flex; flex-direction: column; gap: var(--espaco-1); padding: var(--espaco-3); border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie); }
.inst-diag__lcd { font-size: 13px; line-height: 18px; color: var(--texto-2); }

/* I8: o QR e o código copia e cola do Pix de teste. */
.inst-qr { align-self: center; background: var(--superficie); border-radius: var(--raio-2); }
.inst-selecionavel { user-select: all; word-break: break-all; }

/* I9: a prévia do adesivo (300 px de largura) cabe no celular. */
.inst-adesivo { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }

/* I10: Pronto. */
.inst-pronto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-3); }
.inst-pronto__icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--raio-pilula); background: var(--ok-suave); color: var(--ok); }
.inst-pronto p { margin: 0; }
.inst-link { display: flex; flex-direction: column; gap: 2px; min-height: var(--alvo-toque); padding: var(--espaco-2) 0; border-bottom: 1px solid var(--linha); color: inherit; text-decoration: none; }
.inst-link strong { color: var(--link); }
.inst-link:last-child { border-bottom: 0; }

@media (max-width: 719.98px) {
  .inst-titulo { font-size: 28px; line-height: 32px; }
  .inst-acoes .ui-btn { width: 100%; }
}