/* ═══════════════════════════════════════════════
   ROTA — acompanhamento do cadastro
   Herda a base da vitrine (styles.css). Aqui mora só a tela
   que o lojista vê enquanto espera entrar no ar.
   ═══════════════════════════════════════════════ */

.parc-main{
  position:relative;z-index:1;max-width:760px;margin:0 auto;
  padding:calc(var(--nav-h) + clamp(28px,5vw,64px)) var(--pad) clamp(60px,8vw,110px);
  display:flex;flex-direction:column;gap:clamp(26px,4vw,42px);
}

/* o painel e um filho so do main: sem gap proprio, as secoes dentro dele
   ficam coladas umas nas outras */
#painel{display:flex;flex-direction:column;gap:clamp(26px,4vw,42px)}
/* seletor de id vence o [hidden] do navegador: sem esta linha o painel
   aparece mesmo escondido */
#painel[hidden]{display:none}

/* ── busca por protocolo ── */
.pbusca h1{font-family:var(--ff-display);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.pbusca p{margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.pbusca__form{display:flex;gap:10px;margin-top:22px}
.pbusca__form input{
  flex:1;min-width:0;font:inherit;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding:14px 16px;border-radius:14px;
  border:1px solid var(--stroke-btn);background:var(--surface-2);outline:none;transition:border-color .25s;
}
.pbusca__form input:focus{border-color:var(--amber)}
.pbusca__form .btn{flex:none;padding:0 24px}
.pbusca .illus{display:block;margin-top:16px}
.pbusca .illus a{color:var(--amber);border-bottom:1px solid transparent;transition:border-color .25s}
.pbusca .illus a:hover{border-bottom-color:var(--amber)}

/* ── cabeça ── */
.pcabeca__proto{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:700}
.pcabeca h1{font-family:var(--ff-display);font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;letter-spacing:-.035em;margin:6px 0 6px}
.pcabeca p{font-size:13.5px;color:var(--ink-3)}

/* ── cartão de estado ──
   A pergunta que o lojista faz é "é comigo agora?". A cor responde antes
   do texto: âmbar quando é com ele, verde-água quando é com a gente. */
.pcartao{padding:clamp(20px,3vw,28px);border-radius:22px;border:1px solid var(--stroke)}
.pcartao__selo{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:4px 10px;border-radius:99px;display:inline-block;margin-bottom:12px;
}
.pcartao h2{font-family:var(--ff-display);font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.03em}
.pcartao p{margin-top:9px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.pcartao--voce{border-color:rgba(240,169,60,.45);background:rgba(240,169,60,.08)}
.pcartao--voce .pcartao__selo{background:rgba(240,169,60,.18);color:var(--amber)}
.pcartao--voce h2{color:var(--amber)}
.pcartao--nos{border-color:rgba(53,224,200,.35);background:rgba(53,224,200,.06)}
.pcartao--nos .pcartao__selo{background:rgba(53,224,200,.16);color:var(--mint)}
.pcartao--nao{border-color:rgba(255,123,168,.4);background:rgba(255,123,168,.07)}
.pcartao--nao h2{color:var(--rose)}
.pcartao--nao .btn{margin-top:16px}

/* ── blocos ── */
.pbloco h3{
  font-family:var(--ff-text);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:16px;
}
.pbloco--pe{padding-top:8px;border-top:1px solid var(--stroke)}
.ppe{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ── fluxo ── */
.fluxo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fluxo__i{position:relative;display:flex;gap:16px;padding-bottom:20px}
.fluxo__i:last-child{padding-bottom:0}
.fluxo__i::before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:2px;background:var(--stroke)}
.fluxo__i:last-child::before{display:none}
.fluxo__i.is-feito::before{background:var(--mint)}
.fluxo__p{
  flex:none;width:16px;height:16px;border-radius:50%;margin-top:2px;position:relative;z-index:1;
  border:2px solid var(--stroke-2);background:var(--bg);
}
.fluxo__i.is-feito .fluxo__p{background:var(--mint);border-color:var(--mint)}
.fluxo__i.is-atual .fluxo__p{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(240,169,60,.18)}
.fluxo__t b{display:block;font-size:14.5px;font-weight:600}
.fluxo__t span{font-size:12.5px;color:var(--ink-3)}
.fluxo__i.is-atual .fluxo__t b{color:var(--amber)}
.fluxo__i:not(.is-feito):not(.is-atual) .fluxo__t b{color:var(--ink-3);font-weight:500}

/* ── pendências ── */
.pcheck{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pcheck__i{
  display:flex;align-items:flex-start;gap:13px;padding:14px 16px;border-radius:16px;cursor:pointer;
  border:1px solid var(--stroke-btn);background:var(--surface-2);
  transition:border-color .25s,background .25s;
}
.pcheck__i:hover{border-color:var(--amber)}
.pcheck__i input{width:19px;height:19px;margin-top:1px;flex:none;accent-color:var(--mint)}
.pcheck__i b{display:block;font-size:14px;font-weight:600}
.pcheck__i>span>span{font-size:12.5px;color:var(--ink-3)}
.pcheck__i.is-feito{border-color:rgba(53,224,200,.4);background:rgba(53,224,200,.07)}
.pcheck__i.is-feito b{color:var(--mint);text-decoration:line-through;text-decoration-color:rgba(53,224,200,.5)}

/* ── histórico ── */
.phist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.phist li{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:2px solid var(--stroke)}
.phist li span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.phist li b{font-size:13.5px;font-weight:500}

/* ── toast ── */
.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:300;
  display:flex;align-items:center;gap:12px;padding:13px 20px;border-radius:99px;
  border:1px solid var(--stroke-2);background:var(--glass);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transform:translateY(14px);transition:opacity .4s var(--e-out),transform .5s var(--e-out);
}
.toast.is-on{opacity:1;transform:none}
.toast b{display:block;font-size:13.5px;font-weight:600}
.toast span span{font-size:12px;color:var(--ink-3)}

@media (max-width:560px){
  .pbusca__form{flex-direction:column}
  .pbusca__form .btn{width:100%}
  .ppe .btn{width:100%}
}