/* estilo/componentes.css
 * Aparencia das pecas de base/visual.js. Sem estilo especifico de tela aqui.
 */
.bt{
  background:linear-gradient(140deg,var(--navy2),var(--navy)); color:#fff; border:0;
  padding:14px 24px; border-radius:10px; font:700 16px inherit; cursor:pointer;
  box-shadow:0 5px 15px rgba(11,33,54,.24); transition:.15s;
}
.bt:hover{filter:brightness(1.12)}
.bt:disabled{opacity:.5;cursor:default;box-shadow:none}
.bt.ouro{background:linear-gradient(145deg,var(--gold2),var(--gold));color:#20180a;
  box-shadow:0 5px 15px rgba(201,162,39,.4)}
.bt.claro{background:#fff;color:var(--navy);border:1.5px solid var(--borda);
  box-shadow:0 1px 2px rgba(11,33,54,.08)}
.bt.claro:hover{filter:none;background:#f1f5f9;border-color:var(--navy2)}
.bt.largo{width:100%}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:800;margin-bottom:7px}
.campo input,.campo select{
  width:100%; padding:14px 15px; border:1.5px solid var(--borda); border-radius:10px;
  font:600 17px inherit; color:var(--ink); background:#f7f9fb; transition:.15s;
}
.campo input:focus,.campo select:focus{
  outline:0; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 3px rgba(201,162,39,.16);
}

.cartao{background:var(--card);border:1.5px solid var(--borda);border-radius:var(--raio);
  padding:24px;box-shadow:var(--sombra)}
.cartao .bt{margin-top:4px}

.erro{background:var(--vermelho-luz);border:1px solid #f0c4b6;color:var(--vermelho);
  border-radius:10px;padding:13px 15px;font-size:15.5px;font-weight:600;margin-bottom:16px}
.aviso{background:#fdf3e0;border:1px solid #ecd9a6;color:#7d6318;
  border-radius:10px;padding:13px 15px;font-size:15.5px;font-weight:600}
.aviso.leve{font-weight:400;display:block}
.aviso.clicavel{text-decoration:none;cursor:pointer;transition:.15s}
.aviso.clicavel:hover{background:#fbe9c2;border-color:#d9bd6c}
.aviso .seta{font-weight:700;margin-left:4px}

.selo{display:inline-block;font-size:12.5px;font-weight:800;padding:4px 12px;border-radius:20px}
.selo.socio{background:var(--azul-luz);color:var(--azul);border:1px solid #bcd7ea}
.selo.suporte{background:#f3eefa;color:#6b4fa0;border:1px solid #d9cbee}
.selo.investidor{background:var(--verde-luz);color:var(--verde);border:1px solid #b6e0cb}

.link{background:none;border:0;color:var(--azul);font:700 15.5px inherit;
  cursor:pointer;text-decoration:underline;padding:4px}
.link:hover{color:var(--navy2)}
.bt.mini{padding:9px 15px;font-size:14.5px;border-radius:8px;box-shadow:none}
.bt.mini:not(.claro){border:1.5px solid transparent}
td .bt.mini + .bt.mini{margin-left:6px}
td .f{display:block}

/* ---------- regras de senha ---------- */
.forca{display:flex;gap:5px;margin:4px 0 8px}
.forca span{flex:1;height:5px;border-radius:20px;background:#e2e8ee;transition:.2s}
.forca[data-nivel="1"] span:nth-child(1){background:#b53f26}
.forca[data-nivel="2"] span:nth-child(-n+2){background:#c9a227}
.forca[data-nivel="3"] span:nth-child(-n+3){background:#3fb185}
.forca[data-nivel="4"] span{background:#127a52}
.nivelSenha{font-size:13.5px;color:var(--muted);font-weight:700;margin-bottom:10px;min-height:19px}

.regrasSenha{list-style:none;margin:0 0 18px;padding:0}
.regrasSenha li{display:flex;align-items:center;gap:9px;padding:5px 0;
  font-size:14.5px;color:var(--muted);transition:.15s}
.regrasSenha li i{width:18px;height:18px;flex:0 0 18px;border-radius:50%;
  border:2px solid #cfd8e0;position:relative;transition:.15s}
.regrasSenha li.ok{color:var(--verde);font-weight:600}
.regrasSenha li.ok i{background:var(--verde);border-color:var(--verde)}
.regrasSenha li.ok i::after{content:"";position:absolute;left:5px;top:1.5px;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.selo.solicitado{background:#fdf3e0;color:#8a6a12;border:1px solid #ecd9a6}
.selo.em_analise{background:var(--azul-luz);color:var(--azul);border:1px solid #bcd7ea}
.selo.pago{background:var(--verde-luz);color:var(--verde);border:1px solid #b6e0cb}
.selo.cancelado{background:#eef2f6;color:var(--muted);border:1px solid var(--linha)}
.selo.recusado{background:var(--vermelho-luz);color:var(--vermelho);border:1px solid #f0c4b6}
.btArquivo{display:inline-block;cursor:pointer}

/* ---------- caixa de confirmacao ---------- */
.confFundo{position:fixed;inset:0;background:rgba(11,33,54,.55);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:1000;animation:confAparece .12s ease-out}
.confCaixa{background:#fff;border-radius:14px;padding:24px 24px 20px;max-width:440px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.35);border-top:4px solid var(--gold)}
.confTitulo{font-size:19px;font-weight:800;color:var(--navy);line-height:1.3}
.confDetalhe{margin-top:10px;font-size:15px;color:var(--muted);line-height:1.55}
.confAcoes{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.confAcoes .bt{padding:12px 20px}
.bt.perigo{background:linear-gradient(140deg,#c94a2f,var(--vermelho));box-shadow:0 5px 15px rgba(181,63,38,.3)}
@keyframes confAparece{from{opacity:0}to{opacity:1}}
@media (max-width:560px){ .confAcoes{flex-direction:column-reverse} .confAcoes .bt{width:100%} }

/* caixa informativa (neutra, nao e aviso nem erro) */
.infoBox{background:#f4f7fa;border:1.5px solid var(--borda);border-left:4px solid var(--azul);border-radius:10px;padding:14px 16px}
.infoBox .r{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:8px}
.infoBox .linhaInfo{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--linha);font-size:15px}
.infoBox .linhaInfo:last-of-type{border-bottom:0}
.infoBox .linhaInfo span{color:var(--muted)} .infoBox .linhaInfo b{color:var(--navy)}
.aviso.ok{background:#e6f5ee;border-color:#b6e0cb;color:#127a52}