/* BETEL v357-r5 — recuperação segura e primeiro acesso administrativo.
   ---------------------------------------------------------------------------
   Prefixo b357 em tudo. O aplicativo tem 45 mil linhas e vários módulos com
   estilos próprios; um nome de classe genérico aqui apagaria a aparência de
   outra tela sem aviso.

   Azul e dourado do BETEL, botões que o polegar alcança, modal que não passa da
   tela e um botão de fechar sempre à vista — menos no portão da troca
   obrigatória, onde não existe fechar de propósito.
   --------------------------------------------------------------------------- */

.b357-ov{
  position:fixed;inset:0;z-index:9600;
  background:rgba(9,22,44,.62);
  display:flex;align-items:flex-start;justify-content:center;
  padding:14px;overflow-y:auto;
  font-family:'Crimson Pro',Georgia,serif;
  -webkit-overflow-scrolling:touch;
}
.b357-ov--portao{z-index:100000;background:rgba(9,22,44,.94);align-items:center}

.b357-cx{
  background:#fff;border-radius:18px;width:100%;max-width:620px;
  margin:auto;box-shadow:0 18px 50px rgba(8,20,40,.38);
  overflow:hidden;display:flex;flex-direction:column;max-height:92vh;
}
.b357-cx--estreita{max-width:480px}

.b357-topo{
  background:linear-gradient(135deg,#16407a,#1a4a8a 55%,#235399);
  color:#fff;padding:15px 16px;display:flex;align-items:center;gap:10px;flex:0 0 auto;
}
.b357-topo h3{
  font-family:'Cinzel',Georgia,serif;font-size:15px;letter-spacing:.05em;
  margin:0;font-weight:600;color:#f3e3b8;flex:1;line-height:1.3;
}
.b357-topo .b357-sub{display:block;font-family:'Crimson Pro',Georgia,serif;
  font-size:13px;letter-spacing:0;color:#dbe6f5;margin-top:3px;font-weight:400}
.b357-x{
  background:rgba(255,255,255,.14);border:0;color:#fff;font-size:15px;line-height:1;
  border-radius:10px;min-width:44px;min-height:44px;cursor:pointer;flex:0 0 auto;
}
.b357-x:hover{background:rgba(255,255,255,.28)}

.b357-corpo{padding:16px;overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.b357-pe{padding:12px 16px 16px;border-top:1px solid #e6ebf2;background:#f7f9fc;flex:0 0 auto}

/* ── Busca ───────────────────────────────────────────────────────────────── */
.b357-busca{position:relative;margin-bottom:12px}
.b357-busca input{
  width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:12px;
  padding:13px 14px 13px 40px;font-size:16px;font-family:inherit;background:#fff;color:#12233d;
  min-height:48px;
}
.b357-busca input:focus{outline:0;border-color:#1a4a8a;box-shadow:0 0 0 3px rgba(26,74,138,.14)}
.b357-busca span{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.55}
.b357-contagem{font-size:13px;color:#64748b;margin:0 2px 10px}

/* ── Cartão do membro ────────────────────────────────────────────────────── */
.b357-m{
  border:1px solid #e2e8f0;border-left:4px solid #cbd5e1;border-radius:12px;
  padding:12px 13px;margin-bottom:10px;background:#fff;
}
.b357-m--ativo{border-left-color:#1a7f4b}
.b357-m--pendente{border-left-color:#c8960a}
.b357-m--vencida{border-left-color:#c2410c}
.b357-m--bloqueado{border-left-color:#b91c1c;background:#fffafa}
.b357-m--alerta{border-left-color:#7c3aed;background:#fdfbff}

.b357-m b{font-size:15.5px;color:#12233d;display:block;line-height:1.35}
.b357-m .b357-linha{font-size:13.5px;color:#5b6b80;margin-top:3px;line-height:1.5;word-break:break-word}
.b357-m .b357-linha i{font-style:normal;color:#94a3b8}

.b357-tag{
  display:inline-block;font-family:'Cinzel',Georgia,serif;font-size:11px;letter-spacing:.04em;
  border-radius:20px;padding:3px 10px;margin-top:7px;
}
.b357-tag--ativo{background:#e6f6ed;color:#12633a}
.b357-tag--pendente{background:#fdf3d8;color:#7a5a04}
.b357-tag--vencida{background:#ffedd5;color:#8a3208}
.b357-tag--bloqueado{background:#fee2e2;color:#991b1b}
.b357-tag--alerta{background:#f3e8ff;color:#5b21b6}

.b357-acoes{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.b357-b{
  border:1px solid #cbd5e1;background:#f8fafc;color:#1e3a5f;border-radius:10px;
  padding:10px 13px;font-size:13.5px;font-family:inherit;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;gap:6px;
}
.b357-b:hover{background:#eef3fb;border-color:#1a4a8a}
.b357-b:disabled{opacity:.55;cursor:progress}
.b357-b--forte{background:#1e3a5f;border-color:#1e3a5f;color:#fff;font-weight:600}
.b357-b--forte:hover{background:#16407a;border-color:#16407a;color:#fff}
.b357-b--ouro{background:#c8960a;border-color:#c8960a;color:#fff;font-weight:600}
.b357-b--ouro:hover{background:#a87d06;border-color:#a87d06;color:#fff}
.b357-b--perigo{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.b357-b--perigo:hover{background:#fee2e2;border-color:#b91c1c;color:#b91c1c}
.b357-b--largo{width:100%;justify-content:center}

/* ── Campos ──────────────────────────────────────────────────────────────── */
.b357-campo{margin-bottom:13px}
.b357-campo label{display:block;font-size:13.5px;color:#3c4a5c;margin-bottom:5px;font-weight:600}
.b357-campo input,.b357-campo textarea{
  width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:11px;
  padding:13px 14px;font-size:16px;font-family:inherit;background:#fff;color:#12233d;min-height:48px;
}
.b357-campo input:focus,.b357-campo textarea:focus{
  outline:0;border-color:#1a4a8a;box-shadow:0 0 0 3px rgba(26,74,138,.14)
}
.b357-ajuda{font-size:12.5px;color:#7a8798;margin-top:5px;line-height:1.5}

.b357-nota{
  background:#f1f5fb;border:1px solid #dbe4f0;border-radius:12px;padding:12px 13px;
  font-size:13.5px;color:#3c4a5c;line-height:1.6;margin-bottom:14px
}
.b357-nota b{color:#12233d}
.b357-nota--ouro{background:#fdf8e9;border-color:#efdfae;color:#6b5205}
.b357-nota--perigo{background:#fef2f2;border-color:#fecaca;color:#8f1d1d}

.b357-aviso{border-radius:11px;padding:11px 13px;font-size:13.5px;line-height:1.55;margin:12px 0;display:none}
.b357-aviso--ok{background:#e6f6ed;color:#12633a;border:1px solid #bfe5d0;display:block}
.b357-aviso--erro{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;display:block}

/* ── Credenciais geradas ─────────────────────────────────────────────────── */
.b357-cred{
  background:#0f2947;border-radius:14px;padding:15px;color:#e8eefa;margin-bottom:14px;
  font-family:'Crimson Pro',Georgia,serif
}
.b357-cred dt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#9db4d6;margin-bottom:3px}
.b357-cred dd{
  margin:0 0 12px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:19px;color:#fff;word-break:break-all;letter-spacing:.02em
}
.b357-cred dd:last-child{margin-bottom:0}
.b357-cred .b357-vence{font-size:13px;color:#f3d68a;font-family:inherit;letter-spacing:0}

.b357-vazio{text-align:center;color:#7a8798;font-size:14px;padding:26px 10px;line-height:1.6}
.b357-carregando{text-align:center;color:#5b6b80;font-size:14px;padding:26px 10px}

/* ── Portão da troca obrigatória ─────────────────────────────────────────── */
.b357-portao .b357-topo{background:linear-gradient(135deg,#8a6206,#c8960a 60%,#dcae2a)}
.b357-portao .b357-topo h3{color:#fff}
.b357-portao .b357-topo .b357-sub{color:#fff3d6}

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width:520px){
  .b357-ov{padding:8px}
  .b357-cx{max-height:96vh;border-radius:15px}
  .b357-corpo{padding:13px}
  .b357-b{flex:1 1 auto;justify-content:center;min-width:132px}
  .b357-cred dd{font-size:17px}
}

/* O teclado do celular cobre metade da tela. Sem esta folga o último campo do
   formulário fica embaixo dele, e a pessoa digita sem ver o que digita. */
@media (max-height:620px){
  .b357-ov{align-items:flex-start}
  .b357-corpo{padding-bottom:90px}
}