/* Calculadora Detailer — portão de entrada (login, assinatura inativa, carregando), faixa de pagamento
   pendente e o bloco "Sua conta" do popover. Classes com prefixo pt- (portão) e cd- (conta). */

/* ------------------------------------------------------------------ trancado: nada da calculadora aparece */
html.cd-trancado body { overflow: hidden; }
html.cd-trancado .topo,
html.cd-trancado .nav-abas,
html.cd-trancado .abas-palco,
html.cd-trancado .rodape,
html.cd-trancado .hero-conteudo,
html.cd-trancado .cd-faixa,
html.cd-trancado #pop-config { visibility: hidden; }

/* ------------------------------------------------------------------ portão */
.portao {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(700px 420px at 50% 0%, var(--laranja-suave), transparent 70%),
    color-mix(in srgb, var(--fundo) 72%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
}
.portao-cartao {
  width: min(420px, 100%);
  padding: clamp(22px, 5vw, 32px);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--vidro-forte);
  box-shadow: var(--sombra-2), 0 40px 90px -40px var(--laranja-glow);
  animation: pt-entra .5s var(--ease) both;
}
@keyframes pt-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.pt-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pt-marca .marca-nome { font-size: 15px; }

.pt-titulo { margin: 4px 0 0; font: 900 clamp(22px, 5.6vw, 26px)/1.12 var(--f-titulo); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.pt-texto { margin: 0; color: var(--texto-2); font-size: 15px; }
.pt-texto b { color: var(--texto); }
.pt-rodape { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--borda); color: var(--texto-3); font-size: 13.5px; line-height: 1.5; }
.pt-rodape b { color: var(--texto-2); }

/* carregando */
.pt-carregando { display: flex; align-items: center; gap: 14px; padding: 18px 0 6px; color: var(--texto-2); }
.pt-giro {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 3px solid var(--borda-forte); border-top-color: var(--laranja);
  animation: pt-gira .8s linear infinite;
}
@keyframes pt-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pt-giro { animation: pt-gira 1.6s linear infinite !important; animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } }
.pt-carregando-txt { font-weight: 600; }

/* formulário */
.pt-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.pt-form .entrada { width: 100%; min-height: 46px; font-size: 16px; } /* 16px: o iPhone não dá zoom no campo */
.pt-senha { position: relative; }
.pt-senha .entrada { padding-right: 48px; }
.pt-ver { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.pt-esqueci { align-self: center; color: var(--laranja-claro); }
.pt-esqueci:hover { color: var(--texto); }

.pt-msg {
  margin: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-2); font-size: 14px; line-height: 1.45;
  background: var(--perigo-suave); border: 1px solid color-mix(in srgb, var(--perigo) 40%, transparent); color: var(--texto);
}
.pt-msg .ms { font-size: 20px; color: var(--perigo); flex: none; }
.pt-msg[data-tipo="ok"] { background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pt-msg[data-tipo="ok"] .ms { color: var(--ok); }
.pt-msg[data-tipo="alerta"] { background: var(--alerta-suave, var(--ambar-suave)); border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }
.pt-msg[data-tipo="alerta"] .ms { color: var(--alerta); }

/* ícone grande das telas de aviso */
.pt-icone {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--laranja-suave); color: var(--laranja-claro); border: 1px solid var(--borda-forte);
}
.pt-icone .ms { font-size: 28px; }
.pt-icone-perigo { background: var(--perigo-suave); color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 35%, transparent); }
.pt-icone-alerta { background: var(--ambar-suave); color: var(--ambar); }

.pt-motivo {
  margin: 0; padding: 12px 14px; border-radius: var(--r-2);
  background: var(--perigo-suave); border: 1px solid color-mix(in srgb, var(--perigo) 35%, transparent);
  font-weight: 700; color: var(--texto);
}
.pt-conta-email { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--texto-3); font: 500 13px/1.3 var(--f-mono); overflow-wrap: anywhere; }
.pt-conta-email .ms { font-size: 18px; }
.pt-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* ------------------------------------------------------------------ faixa "pagamento pendente" */
.cd-faixa {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-3);
  background: var(--ambar-suave); border: 1px solid color-mix(in srgb, var(--ambar) 45%, transparent);
  color: var(--texto); font-size: 14px; line-height: 1.5;
}
.cd-faixa > .ms { color: var(--ambar); font-size: 20px; flex: none; }
.cd-faixa > span:not(.ms) { flex: 1 1 220px; min-width: 0; }
.cd-faixa b { color: var(--ambar); }
.cd-faixa span a { color: inherit; font-weight: 600; }
/* "Regularizar agora": à direita no computador, embaixo do texto no celular */
.cd-faixa > .btn { flex: none; align-self: center; margin-left: auto; }

/* ------------------------------------------------------------------ "Sua conta" no popover */
.cd-conta { gap: 8px; }
.cd-conta-email { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.cd-conta-email .ms { font-size: 18px; color: var(--texto-3); flex: none; }
.cd-conta-email span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-conta-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-conta-status b { color: var(--texto-2); }
#pop-conta[hidden] + .cd-conta-div { display: none; }

/* ------------------------------------------------------------------ indicador do topo */
.marca-sub[data-nuvem="salvando"] .ponto { background: var(--laranja); box-shadow: 0 0 8px var(--laranja); }
.marca-sub[data-nuvem="offline"] .ponto { background: var(--alerta); box-shadow: 0 0 8px var(--alerta); animation: none; }
.marca-sub[data-nuvem="offline"] { color: var(--alerta); }
.marca > span { min-width: 0; }
#topo-salvo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }