:root{
  --violeta:#10083F; --azul:#1234DD; --verde:#2CEF66;
  --cinza:#f4f5f9; --texto:#1a1a2e; --borda:#e2e4ee; --erro:#c62828;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--cinza);color:var(--texto);-webkit-text-size-adjust:100%}
.topo{background:var(--violeta);color:#fff;padding:14px 16px 12px}
.topo-linha{display:flex;align-items:baseline;justify-content:space-between;gap:10px;max-width:640px;margin:0 auto}
.marca{font-size:20px;font-weight:700}
.tenant{font-size:13px;opacity:.85}
.niveis{display:flex;gap:8px;margin-top:12px;max-width:640px;margin-left:auto;margin-right:auto}
.nivel{flex:1;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 10px}
.nivel strong{display:block;font-size:13px}
.nivel small{display:block;font-size:11px;opacity:.8;line-height:1.3;margin-top:2px}
.nivel-sub{border:1px solid rgba(44,239,102,.35)}
a.nivel-dono{display:block;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.18)}
a.nivel-dono:hover{background:rgba(255,255,255,.14)}
.conteudo{max-width:640px;margin:0 auto;padding:16px}
h2{font-size:18px;margin:18px 0 10px}
.banner{border-radius:10px;padding:11px 13px;margin:10px 0;font-size:14px;line-height:1.35}
.banner.ok{background:#e6f9ee;color:#137a3a;border:1px solid #b7ecc9}
.banner.erro{background:#fdecea;color:var(--erro);border:1px solid #f5c6c2}
.status-lib{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.pill{font-size:12px;padding:5px 10px;border-radius:999px;font-weight:600}
.pill-ok{background:#e6f9ee;color:#137a3a}
.pill-off{background:#fdecea;color:var(--erro)}
.acoes{margin:14px 0}
.btn{display:inline-block;border:0;border-radius:10px;padding:13px 16px;font-size:15px;
  font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn-primario{background:var(--azul);color:#fff;width:100%;min-height:44px}
.btn-cobrar{background:var(--verde);color:var(--violeta);padding:12px 18px;font-size:14px;min-height:44px}
.lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.card{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-nome{display:block;font-weight:600;font-size:15px}
.card-meta{display:block;font-size:12px;color:#666;margin-top:3px}
.vazio{color:#666;background:#fff;border:1px dashed var(--borda);border-radius:12px;padding:18px;text-align:center}
.form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.form label{display:flex;flex-direction:column;font-size:13px;font-weight:600;gap:5px}
.form input{padding:12px;border:1px solid var(--borda);border-radius:10px;font-size:16px}
.form input:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.voltar{display:inline-flex;align-items:center;color:var(--azul);text-decoration:none;font-size:14px;margin-top:6px;min-height:44px;padding:8px 0}
.nota{font-size:12px;color:#777;line-height:1.4;margin-top:14px}
.bloqueio{background:#fff;border:1px solid var(--borda);border-radius:14px;padding:22px;text-align:center;margin-top:18px}
.bloqueio-icone{font-size:44px}
.bloqueio-motivo{font-size:15px;color:#444}
.bloqueio-cod{font-size:12px;color:#888}
.bloqueio-fluxos{list-style:none;padding:0;text-align:left;font-size:13px;color:#444;margin:14px 0}
.bloqueio-fluxos li{padding:6px 0;border-bottom:1px solid var(--borda)}
.rodape{max-width:640px;margin:10px auto 24px;padding:0 16px;color:#999;text-align:center}
.rodape code{color:#777}

/* ── responsividade ── */
@media(max-width:380px){
  .niveis{flex-direction:column}
  .topo{padding:12px 10px 10px}
  .conteudo{padding:12px}
}
@media(min-width:768px){
  .topo{padding:18px 16px 14px}
  .conteudo{padding:22px 0}
  .card{padding:14px 18px}
  .btn{font-size:16px}
  h2{font-size:20px}
}
/* ---- auth (login / cadastro) ---- */
.auth-wrap { display:flex; justify-content:center; align-items:flex-start; padding-top:6vh; }
.auth-card { background:#fff; border-radius:16px; box-shadow:0 6px 28px rgba(0,0,0,.10);
  padding:28px 26px; width:100%; max-width:360px; }
.auth-card-larga { max-width:440px; }
.auth-marca { font-size:20px; font-weight:700; text-align:center; }
.auth-titulo { font-size:22px; margin:10px 0 4px; text-align:center; }
.auth-sub { color:#667; font-size:14px; text-align:center; margin:0 0 14px; }
.auth-form { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.auth-form label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:#334; }
.auth-form input, .auth-form select { padding:12px 12px; border:1px solid #cdd3dd; border-radius:10px;
  font-size:16px; font-weight:400; }
.auth-form input:focus, .auth-form select:focus { outline:none; border-color:#1234DD; }
.auth-form .btn-primario { margin-top:6px; }
.auth-sep { border:none; border-top:1px solid #eef0f4; margin:6px 0; }
.auth-alt { text-align:center; font-size:14px; margin-top:16px; color:#556; }
.auth-alt a { color:#1234DD; font-weight:600; text-decoration:none; }
.topo-linha .sair { margin-left:auto; color:#fff; opacity:.85; text-decoration:none;
  font-size:13px; font-weight:600; }
.topo-linha .sair:hover { opacity:1; }

/* ---- cadastro mensalista (cliente + N veiculos) ---- */
.secao{font-size:14px;font-weight:700;color:var(--violeta);margin:16px 0 2px;
  border-bottom:1px solid var(--borda);padding-bottom:4px}
.veiculo-linha{display:grid;grid-template-columns:1fr 1fr 90px 40px;gap:8px;
  align-items:center;margin-bottom:8px}
.veiculo-linha input{padding:11px 10px;border:1px solid var(--borda);border-radius:9px;font-size:16px;width:100%}
.veiculo-linha input:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.btn-rem{background:#fdecea;color:var(--erro);border:0;border-radius:9px;
  height:40px;font-size:15px;cursor:pointer;font-weight:700}
.btn-add{background:#eef0fb;color:var(--azul);width:auto;margin:4px 0 10px;
  border:1px dashed var(--azul)}

/* ---- linha do tempo de faturas ---- */
.cliente-meta{margin:2px 0 10px}
.veic-chips{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#fff;border:1px solid var(--borda);border-radius:999px;
  padding:5px 11px;font-size:12px;color:#444}
.timeline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tl-item{background:#fff;border:1px solid var(--borda);border-left:4px solid var(--borda);
  border-radius:12px;padding:11px 14px;display:flex;gap:12px;align-items:center}
.tl-comp{font-weight:700;font-size:14px;color:var(--violeta);min-width:74px}
.tl-corpo{flex:1}
.tl-valor{font-weight:700;font-size:16px}
.tl-venc{font-size:13px;color:#555;margin-top:2px}
.tl-pix{font-size:11px;color:#888;margin-top:3px;word-break:break-all}
.tl-badge{font-weight:700;font-size:12px}
.b-paga{color:#137a3a}
.b-vencida{color:var(--erro)}
.b-aberta{color:var(--azul)}
.b-cancelada{color:#888}
.tl-paga{border-left-color:var(--verde)}
.tl-aberta{border-left-color:var(--azul)}
.tl-cancelada{border-left-color:#bbb;opacity:.75}
.tl-atraso{border-left-color:var(--erro);background:#fff6f5}
.futura{background:#fff;border:1px dashed var(--borda);border-radius:12px;
  padding:11px 14px;margin-top:8px;display:flex;gap:12px;align-items:center}
.tl-comp-futura{color:#888}
.form-inline{display:flex;gap:10px;align-items:center;flex:1;margin:0}
.futura-txt{font-size:13px;color:#777;flex:1}
@media(max-width:420px){
  .veiculo-linha{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .veiculo-linha .v-valor{grid-column:1}
  .veiculo-linha .btn-rem{grid-column:2;justify-self:end;width:40px}
}

/* ---- form-guard: validação VISÍVEL (form-guard.js) ---- */
.form-guard-banner .form-guard-lista{margin:6px 0 0;padding-left:20px}
.form-guard-banner .form-guard-lista li{margin:2px 0}
.campo-invalido{border-color:var(--erro) !important;outline:2px solid var(--erro) !important;
  background:#fff6f6}
.campo-erro-msg{color:var(--erro);font-size:12.5px;font-weight:600;margin-top:4px;line-height:1.3}
.btn-salvando{opacity:.75;cursor:progress}
.btn-salvando::after{content:"";display:inline-block;width:13px;height:13px;margin-left:8px;
  vertical-align:-2px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;
  border-radius:50%;animation:fg-spin .7s linear infinite}
@keyframes fg-spin{to{transform:rotate(360deg)}}

/* ═══════════ TELA 1 — busca + status pagamento ═══════════ */
.busca-wrap{margin:6px 0 14px}
.busca-input{width:100%;padding:12px 14px;border:1px solid var(--borda);border-radius:12px;
  font-size:16px;background:#fff}
.busca-input:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.card-link{text-decoration:none;color:inherit;flex:1;min-width:0}
.card-placas{font-size:11px;color:#8a8fa3;letter-spacing:.5px;text-transform:uppercase}
.card-lado{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.st-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.st-paga{background:#e6f9ee;color:#137a3a}
.st-aberta{background:#eef0fb;color:var(--azul)}
.st-atraso{background:#fdecea;color:var(--erro)}
.st-nenhum{background:#f1f2f6;color:#888}
.busca-vazio{margin-top:10px}

/* ═══════════ TELA 2 — blocos, veiculos, total ═══════════ */
.bloco{background:#fff;border:1px solid var(--borda);border-radius:14px;
  padding:14px 16px;margin:14px 0}
.bloco-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bloco h2{margin:4px 0 10px}
.btn-sec{background:#eef0fb;color:var(--azul);border:1px solid #d5daf5;
  padding:9px 14px;font-size:13px;width:auto}
.form-editar{border-top:1px dashed var(--borda);padding-top:12px;margin-top:8px}
.veiculo-card{flex-wrap:wrap}
.form-veic-valor{flex:0 0 auto;gap:8px}
.inp-valor{width:110px;padding:10px;border:1px solid var(--borda);border-radius:9px;font-size:15px}
.inp-valor:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.total-somado{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,#f3f0ff,#eef0fb);border:1px solid #d9d3fb;
  border-radius:12px;padding:14px 16px;margin:12px 0;font-size:14px;color:var(--violeta)}
.total-valor{font-size:24px;font-weight:800;color:var(--violeta)}
.add-veic{margin-top:6px}
.add-veic summary{list-style:none;display:inline-block;margin-bottom:8px}
.add-veic summary::-webkit-details-marker{display:none}
.tl-link{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;flex:1}
.tl-seta{font-size:22px;color:#b9bccb;font-weight:700}
.tl-futura{border-left-color:#c9b8ff;background:#faf8ff}

/* ═══════════ TELA 3 — fatura, PIX, whatsapp, acoes ═══════════ */
.banner.aviso{background:#fff7e6;color:#8a5a00;border:1px solid #f6d98a}
.fatura-cab{display:flex;flex-direction:column;gap:8px}
.fc-valor{font-size:30px;font-weight:800;color:var(--violeta)}
.fc-meta{font-size:14px;color:#444;display:flex;flex-direction:column;gap:3px}
.pix-box{background:#0d0730;border-radius:12px;padding:14px;margin:6px 0 10px}
.pix-code{display:block;color:#eafff0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.5;word-break:break-all;white-space:pre-wrap}
.pix-ok{color:#137a3a;font-weight:700;font-size:14px;margin-top:8px}
.pix-link{font-size:12px;color:#555;word-break:break-all;margin-top:10px}
.pix-link a{color:var(--azul)}
.wpp-lista{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.wpp-item{border:1px solid var(--borda);border-radius:10px;padding:10px 12px}
.wpp-topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wpp-num{font-weight:600;font-size:14px}
.wpp-meta{font-size:12px;color:#777;margin-top:3px}
.wpp-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#eef0fb;color:var(--azul)}
.wpp-enviado,.wpp-enviada,.wpp-sucesso,.wpp-ok{background:#e6f9ee;color:#137a3a}
.wpp-falha,.wpp-erro,.wpp-falhou{background:#fdecea;color:var(--erro)}
.btn-wpp{width:100%}
.acao-fin{border:1px solid var(--borda);border-radius:12px;padding:4px 12px;margin:8px 0}
.acao-fin summary{list-style:none;cursor:pointer;margin:8px 0}
.acao-fin summary::-webkit-details-marker{display:none}
.acao-fin[open]{background:#fbfbfe}
.acao-fin .form{padding:4px 0 12px}
.obrig{color:var(--erro)}
.btn-perigo{background:var(--erro);color:#fff;width:100%}
.btn-perigo-sec{background:#fdecea;color:var(--erro);border:1px solid #f5c6c2}

/* acoes destrutivas do cliente/veiculo (remover / desativar) */
.acoes-cli{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.veic-acoes{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.veic-acoes .form-inline{margin:0}

/* confirmacao em 2 passos via <details> (melhor que confirm() no mobile) */
.conf-acao{display:inline-block}
.conf-acao > summary{list-style:none;cursor:pointer;width:auto;display:inline-block;
  padding:8px 12px;font-size:13px;margin:0}
.conf-acao > summary::-webkit-details-marker{display:none}
.btn-remover-veic{width:auto;padding:8px 12px;font-size:13px}
.conf-box{margin-top:8px;padding:10px 12px;border:1px solid #f5c6c2;border-radius:8px;
  background:#fdf3f2;display:flex;flex-direction:column;gap:8px;max-width:340px}
.conf-txt{font-size:13px;color:#611a15;line-height:1.35}
.conf-box .btn-perigo{width:100%}
.trocar-plano{margin-top:12px;border-top:1px solid #eceef7;padding-top:10px}
.trocar-plano summary{list-style:none;display:inline-block;cursor:pointer}
.trocar-plano summary::-webkit-details-marker{display:none}
.trocar-plano .form{padding:10px 0 2px}
.trocar-plano select{width:100%;padding:10px;border:1px solid #d5daf5;border-radius:8px;font-size:14px}

/* ═══════════ MENSALIDADE — a conta do dono com a PEI ═══════════ */
.plano-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plano-nome{font-size:15px;font-weight:700;color:var(--violeta)}
.plano-valor{font-size:30px;font-weight:800;color:var(--violeta);margin:4px 0}
.plano-valor small{font-size:14px;font-weight:600;color:#777}
.plano-meta{font-size:14px;color:#444;margin-top:2px}
.plano-meta b{color:var(--texto)}
.saldo-num{font-size:30px;font-weight:800;color:var(--violeta)}
.saldo-num small{font-size:14px;font-weight:600;color:#777}
.saldo-msgs{font-size:14px;color:#444;margin:4px 0 12px}
.saldo-msgs b{color:var(--verde);background:var(--violeta);border-radius:8px;padding:1px 8px}
.recarga-form{display:flex;gap:10px;align-items:stretch;margin-top:6px}
.recarga-form .inp-valor{flex:1;width:auto;font-size:16px;min-height:44px}
.recarga-form .btn{white-space:nowrap;min-height:44px}
.fat-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fat-item{background:#fff;border:1px solid var(--borda);border-left:4px solid var(--borda);
  border-radius:12px;padding:12px 14px}
.fat-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fat-desc{font-weight:600;font-size:14px;color:var(--texto)}
.fat-sub{font-size:12px;color:#666;margin-top:3px}
.fat-valor{font-weight:800;font-size:17px;color:var(--violeta);white-space:nowrap}
.fat-paga{border-left-color:var(--verde)}
.fat-pendente{border-left-color:var(--azul)}
.fat-acoes{margin-top:10px}
.fat-pix{background:#0d0730;border-radius:10px;padding:12px;margin:8px 0 6px}
.fat-pix code{display:block;color:#eafff0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.5;word-break:break-all;white-space:pre-wrap}
.btn-block{width:100%}

/* CTA da tela bloqueada (leva pra area de mensalidade) */
.bloqueio .btn{margin-top:16px}

/* [hidden] tem que vencer display:flex/grid explicito (senao o form de editar/aviso nunca esconde) */
[hidden]{display:none !important}

/* ── Modal QR Code ── */
.qr-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.qr-modal-box {
  background: #fff; border-radius: 12px; padding: 24px; max-width: 360px; width: 90%;
  text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.qr-modal-box h3 { margin: 0 0 12px; font-size: 1.1em; }
.qr-img { width: 260px; height: 260px; margin: 0 auto 12px; display: block; border: 2px solid #e5e7eb; border-radius: 8px; }
.qr-competencia { color: #6b7280; font-size: 0.9em; margin: 0 0 8px; }
.qr-code-peq { display: block; font-size: 0.7em; color: #9ca3af; word-break: break-all; margin: 0 0 16px; background: #f3f4f6; padding: 6px 8px; border-radius: 4px; }
.qr-modal-botoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qr-modal-botoes .btn { font-size: 0.9em; }