/* ===========================================================================
   Portão de entrada — login, espera e aviso de assinatura.
   Usa os mesmos tokens de cor e tipografia do app, então acompanha
   automaticamente o tema claro e o noturno.
   =========================================================================== */

#portao{
  position:fixed;inset:0;z-index:100;
  background:var(--ground);
  display:flex;align-items:center;justify-content:center;
  padding:32px 22px calc(32px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
}
#portao[hidden]{display:none}

#portaoPainel{
  width:100%;max-width:370px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

#portaoPainel .p-mark{width:44px;height:59px;color:var(--vinho);margin-bottom:20px}

.p-titulo{
  font-family:var(--display);font-weight:300;font-size:34px;line-height:1.12;
  margin:0 0 6px;color:var(--ink);text-wrap:balance;
}
.p-kicker{
  font-family:var(--sans);font-weight:500;font-size:9px;
  text-transform:uppercase;letter-spacing:3px;color:var(--ink-3);
  margin:0 0 22px;
}
.p-texto{
  font-size:13.5px;font-weight:300;line-height:1.8;color:var(--ink-2);
  margin:0 0 20px;max-width:31em;
}
.p-texto strong{font-weight:500;color:var(--ink)}
.p-texto.p-sutil{font-size:12.5px;color:var(--ink-3);margin-top:-8px}
.p-erro{
  font-size:12.5px;font-weight:400;line-height:1.6;color:var(--vinho);
  background:var(--rosa);border-radius:9px;padding:10px 13px;margin:0 0 14px;text-align:left;
}

#portaoPainel form{width:100%;display:flex;flex-direction:column;text-align:left}
.p-label{
  font-family:var(--sans);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);margin:0 0 8px;
}
#portaoPainel input[type=email]{
  width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:11px;
  padding:14px 14px;font-size:16px;font-weight:300;color:var(--ink);margin:0 0 14px;
}
#portaoPainel input[type=email]::placeholder{color:var(--ink-3)}
#portaoPainel input[type=email]:focus-visible{outline:2px solid var(--vinho);outline-offset:2px}

.p-btn{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:var(--vinho);color:var(--accent-ink);border:0;border-radius:11px;
  padding:14px 18px;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.4;
  cursor:pointer;transition:filter .15s;margin-top:2px;
}
.p-btn:hover{filter:brightness(1.14)}
.p-btn:disabled{opacity:.45;cursor:not-allowed}
.p-btn-vazado{
  background:transparent;color:var(--ink-2);border:1px solid var(--line-2);
  font-weight:400;margin-top:10px;
}
.p-btn-vazado:hover{background:var(--surface-2);filter:none}

.p-rodape{
  font-family:var(--sans);font-weight:500;font-size:9px;
  text-transform:uppercase;letter-spacing:2.4px;color:var(--ink-3);
  margin:26px 0 0;line-height:1.7;
}

/* espera ------------------------------------------------------------------ */
.p-carregando{display:flex;flex-direction:column;align-items:center;gap:18px}
.p-carregando .mark{width:38px;height:51px;color:var(--vinho);animation:respirar 2.4s ease-in-out infinite}
.p-carregando p{
  font-family:var(--sans);font-weight:500;font-size:9px;
  text-transform:uppercase;letter-spacing:3px;color:var(--ink-3);margin:0;
}
@keyframes respirar{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.p-carregando .mark{animation:none;opacity:.7}}

/* indicador de sincronização (na barra do topo) --------------------------- */
.sync-ponto{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--ink-3);opacity:.32;transition:opacity .2s,background .2s;
}
.sync-ponto[data-estado="salvando"]{background:var(--vinho);opacity:1;animation:respirar 1.2s ease-in-out infinite}
.sync-ponto[data-estado="offline"]{background:var(--s2);opacity:1}