/* Primeiros passos do dono (adr/0011; primeiros.js). Só acrescenta ao styles.css:
   os mesmos tons da Central (fundo #0b0e0c, verde #00a76f/#7ef0c1, âmbar e coral nos
   estados), chips e cartões no lugar de select nativo, e tudo cabendo em 360 px. */

/* a tela cheia do dono que ainda está configurando (sem a barra lateral) */
.pp-cheia{min-height:100vh;display:flex;flex-direction:column}
.pp-topo{display:flex;align-items:center;gap:10px;padding:14px 24px;border-bottom:1px solid #1b231e;font-size:17px;letter-spacing:-.02em}
.pp-topo .pp-empresa{color:#9fb0a7;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pp-topo .pp-empresa::before{content:"·";margin-right:8px}
.pp-cheia .page{overflow:visible;flex:none;width:100%;max-width:960px;margin:0 auto}

.pp{display:flex;flex-direction:column;gap:18px}
/* dentro da casca, a .page tem altura fixa: nada encolhe (a trilha sumiria) */
.pp > *{flex:none}
.pp-passo-corpo{display:flex;flex-direction:column;gap:16px;max-width:880px}
.pp-h{outline:none}
.pp-h:focus-visible{outline:2px solid #2c6b52;outline-offset:4px;border-radius:8px}
.pp-painel{display:flex;flex-direction:column;gap:14px}
.pp-painel .chips{gap:8px}
.pp-sec{margin-top:6px}
.pp a.btn{text-decoration:none}
/* as listas de dentro do painel não levam o recuo do `.panel ul` */
.pp-painel ul.pp-time,.pp-painel ul.pp-pessoas,.pp-painel ul.list{padding-left:0;list-style:none}
.pp-sec span{color:#7ef0c1;letter-spacing:.08em}

/* o checklist: o progresso no topo ("2 de 5") e um cartão por etapa, em grade de duas colunas */
.pp-topo-lista{display:flex;flex-direction:column;gap:16px;margin-bottom:12px}
.pp-progresso{display:flex;flex-direction:column;gap:8px}
.pp-progresso-txt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pp-progresso-txt b{font-size:15px;font-weight:600}
.pp-progresso-txt span{color:#9fb0a7;font-size:14px}
.pp-barra{height:8px;border-radius:999px;background:#1a221d;overflow:hidden}
.pp-barra i{display:block;height:100%;background:#00a76f;border-radius:999px;transition:width 200ms ease-out}
.pp-lista ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pp-item{min-width:0}
.pp-item-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:64px;margin:0;background:#121915;border:1px solid #1f2a23;border-radius:18px;padding:12px 14px;color:#eef5f0;font:inherit;text-align:left;cursor:pointer;transition:background-color 150ms ease-out,border-color 150ms ease-out}
.pp-item-btn:hover{background:#18221c;border-color:#2c4a3b}
.pp-item-btn:focus-visible{outline:2px solid #7ef0c1;outline-offset:2px}
/* a etapa atual: borda e fundo mais fortes, e o ícone em verde cheio */
.pp-item.on .pp-item-btn{border-color:#2c6b52;background:#13201a;box-shadow:inset 0 0 0 1px #2c6b52}
.pp-ico{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#1a221d;color:#9fb0a7;flex:none}
.pp-item.ok .pp-ico{background:#17291f;color:#7ef0c1}
.pp-item.on .pp-ico{background:#00a76f;color:#04110c}
.pp-item-txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.pp-item-txt b{font-size:15px;font-weight:600}
.pp-item-txt small{color:#9fb0a7;font-size:13px;line-height:1.35}
.pp-item-txt .pill{margin:2px 0 0;font-size:11.5px;padding:1px 9px}
.pp-selo{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#7ef0c1;margin-top:2px}
.pp-item-acao{font-size:13px;color:#7ef0c1;white-space:nowrap}
.pp-item:not(.on) .pp-item-acao{color:#9fb0a7}
.pp-item-btn svg{display:block}

/* formulários */
.pp-form{display:flex;flex-direction:column;gap:14px}
.pp-linha{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.pp-linha .field{flex:1;min-width:200px}
.pp-campo legend,.pp-painel fieldset legend{font-size:13px;color:#9fb0a7;margin-bottom:8px;padding:0}
.pp-outro{margin-top:4px}
.pp-fixo{cursor:default}

/* o time: cartões do acervo */
.pp-time{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pp-dot-fixo{display:flex;align-items:center;gap:10px;background:#0f1411;border:1px solid #1f2a23;border-radius:14px;padding:8px 14px 8px 10px}
.pp-dot-fixo b{display:block;font-size:14px}
.pp-dot-fixo small{color:#9fb0a7;font-size:12.5px}
.pp-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pp-dot{gap:8px}
.pp-dot.on{border-color:#2c6b52;background:#13201a}
.pp-dot-h{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;text-align:left;width:100%;color:inherit}
.pp-dot-h > span:nth-child(2){flex:1;min-width:0}
.pp-dot-h b{display:block;font-size:15px}
.pp-dot-h small{color:#9fb0a7;font-size:13px}
.pp-marca{width:28px;height:28px;border-radius:50%;border:1px solid #2a3530;display:inline-flex;align-items:center;justify-content:center;color:#9fb0a7;flex:none}
.pp-dot.on .pp-marca{background:#00a76f;border-color:#00a76f;color:#04110c}
.pp-faz{margin:0;padding-left:18px;color:#c3d1c9;font-size:13.5px}
.pp-dot-setores .chip{font-size:13px;padding:5px 12px}

/* a equipe e os dados */
.pp-pessoas{list-style:none;margin:0;padding:0}
.pp-aviso{background:#13201a;border:1px solid #2c6b52;border-radius:16px;padding:14px 16px;color:#dbe7df;font-size:14px;display:flex;flex-direction:column;gap:10px}
.pp-dados{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
.pp-arquivo{align-self:flex-start;cursor:pointer;position:relative}
.pp-arquivo:focus-within{outline:2px solid #2c6b52;outline-offset:2px}
.pp-off{opacity:.5;pointer-events:none}

/* o "Pronto" */
.pp-resumo{margin:0;padding-left:18px;color:#dbe7df;display:flex;flex-direction:column;gap:6px}
.pp-passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-passo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:#0f1411;border:1px solid #1f2a23;border-radius:14px;padding:10px 14px}
.pp-erro{width:100%;margin:0;color:#ff9a84;font-size:13.5px;overflow-wrap:anywhere}
.pp-acao{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pp-grande{padding:12px 22px;font-size:15px}

/* o rodapé de cada passo: voltar à esquerda; pular e continuar à direita */
.pp-rodape{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pp-rodape .acts{margin-left:auto}
.pp-pular-dica{font-weight:400;color:#8fa097;font-size:12px}

@media (max-width: 860px){
  .pp-topo{padding:12px 16px}
  .pp-dados{grid-template-columns:minmax(0,1fr)}
  .pp-cartoes{grid-template-columns:minmax(0,1fr)}
  .pp-linha{flex-direction:column;align-items:stretch}
  .pp-linha .field{min-width:0}
  .pp-rodape{flex-direction:column-reverse;align-items:stretch}
  .pp-rodape .acts{margin-left:0;flex-direction:column-reverse}
  .pp-rodape .acts .btn,.pp-acao .btn{justify-content:center;width:100%}
  .pp-pular-dica{display:none}
}
/* o checklist vira uma coluna no celular; a etapa cabe em 390 px sem rolagem */
@media (max-width: 560px){
  .pp-lista ol{grid-template-columns:minmax(0,1fr)}
  .pp-item-btn{gap:10px;padding:10px 12px;min-height:56px}
  .pp-ico{width:34px;height:34px;border-radius:11px}
  .pp-item-acao{font-size:12.5px}
}
@media (prefers-reduced-motion: reduce){
  .pp-barra i,.pp-item-btn{transition:none}
}