/* Portal B2B - compartilhado por api.html, portal-*.html e admin.html */
:root {
    --bg-primary: #0a0e17; --bg-secondary: #121828; --bg-card: #1a2238;
    --bg-input: #0f172a; --primary: #6366f1; --primary-dark: #4f46e5;
    --accent: #06b6d4; --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
    --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b;
    --border: #2d3748; --radius: 12px; --radius-sm: 8px;
    --shadow: 0 10px 25px -5px rgba(0,0,0,.5);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg-primary); color:var(--text-primary); font-family:'Segoe UI',system-ui,sans-serif; min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.nav .brand { font-weight:700; font-size:18px; color:var(--text-primary); }
.nav .brand span { color:var(--primary); }
.nav .links a { margin-left:18px; color:var(--text-secondary); font-size:14px; }
.nav .links a:hover { color:var(--text-primary); }
.container { max-width:1100px; margin:0 auto; padding:32px 20px; }
.center-box { max-width:440px; margin:48px auto; }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); }
h1 { font-size:28px; margin-bottom:8px; }
h2 { font-size:20px; margin-bottom:12px; }
.sub { color:var(--text-secondary); margin-bottom:24px; font-size:15px; }
label { display:block; font-size:13px; color:var(--text-secondary); margin:14px 0 6px; }
input, select { width:100%; padding:12px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:15px; }
input:focus { outline:none; border-color:var(--primary); }
.btn { display:inline-block; width:100%; padding:13px; margin-top:20px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-size:15px; font-weight:600; cursor:pointer; text-align:center; transition:background .2s; }
.btn:hover { background:var(--primary-dark); }
.btn.secondary { background:transparent; border:1px solid var(--border); color:var(--text-secondary); }
.btn.secondary:hover { border-color:var(--primary); color:var(--text-primary); }
.btn.small { width:auto; padding:8px 16px; font-size:13px; margin-top:0; }
.msg { margin-top:16px; padding:12px 14px; border-radius:var(--radius-sm); font-size:14px; display:none; }
.msg.ok { display:block; background:rgba(16,185,129,.12); border:1px solid var(--success); color:var(--success); }
.msg.err { display:block; background:rgba(239,68,68,.12); border:1px solid var(--danger); color:var(--danger); }
.msg.warn { display:block; background:rgba(245,158,11,.12); border:1px solid var(--warning); color:var(--warning); }
.foot-link { text-align:center; margin-top:18px; font-size:14px; color:var(--text-secondary); }
/* pricing */
.pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin:32px 0; }
.plan { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; position:relative; }
.plan.featured { border-color:var(--primary); }
.plan .tag { position:absolute; top:-12px; right:24px; background:var(--primary); font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; }
.plan .price { font-size:38px; font-weight:800; margin:12px 0 2px; }
.plan .price small { font-size:15px; color:var(--text-secondary); font-weight:400; }
.plan ul { list-style:none; margin:18px 0; }
.plan li { padding:7px 0; color:var(--text-secondary); font-size:14px; }
.plan li::before { content:"✓ "; color:var(--success); font-weight:700; }
/* dashboard */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.stat .label { color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.stat .value { font-size:26px; font-weight:700; margin-top:6px; }
.stat .value.ok { color:var(--success); }
.stat .value.warn { color:var(--warning); }
.stat .value.err { color:var(--danger); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--text-muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text-secondary); }
tr:hover td { background:rgba(99,102,241,.05); }
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge.active { background:rgba(16,185,129,.15); color:var(--success); }
.badge.pastdue { background:rgba(245,158,11,.15); color:var(--warning); }
.badge.canceled, .badge.semassinatura { background:rgba(239,68,68,.15); color:var(--danger); }
.token-box { background:var(--bg-input); border:1px dashed var(--primary); border-radius:var(--radius-sm); padding:14px; font-family:monospace; font-size:13px; word-break:break-all; margin:14px 0; }
.hero { text-align:center; padding:56px 20px 24px; }
.hero h1 { font-size:38px; line-height:1.2; }
.hero h1 span { color:var(--primary); }
.hero p { color:var(--text-secondary); max-width:640px; margin:16px auto 0; font-size:17px; }
.code { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; font-family:monospace; font-size:13px; overflow-x:auto; color:var(--accent); margin:12px 0; white-space:pre; }
.section { margin:48px 0; }
.progress { height:8px; background:var(--bg-input); border-radius:4px; overflow:hidden; margin-top:8px; }
.progress > div { height:100%; background:var(--primary); border-radius:4px; }
@media (max-width:640px){ .hero h1{font-size:28px;} .nav .links a{margin-left:10px;font-size:13px;} }
/* ─── V3: docs, admin avançado, modal, tabs, filtros ─── */
.tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:0; }
.tabs button { background:transparent; border:none; color:var(--text-secondary); padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; }
.tabs button.active { color:var(--text-primary); border-bottom-color:var(--primary); }
.tabpane { display:none; }
.tabpane.active { display:block; }
.mtabpane { display:none; }
.mtabpane.active { display:block; }
.tabs.compact { border-bottom-color:var(--border); margin-bottom:0; }
.tabs.compact button { padding:8px 14px; font-size:12px; }
/* Modal com campos compactos: inputs/selects menores pra caber sem rolagem */
.modal input, .modal select { padding:8px 10px; font-size:13px; }
.modal label { font-size:12px; margin:10px 0 4px; }
.modal .form-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:4px 12px; }
.modal h2 { font-size:16px; }
/* Paginação da lista de clientes */
.paginacao { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; font-size:13px; color:var(--text-secondary); }
.paginacao button { background:var(--bg-input); border:1px solid var(--border); color:var(--text-primary); border-radius:var(--radius-sm); padding:6px 14px; font-size:13px; cursor:pointer; }
.paginacao button:disabled { opacity:.4; cursor:default; }
.pills { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.pill { background:var(--bg-input); border:1px solid var(--border); color:var(--text-secondary); border-radius:20px; padding:6px 14px; font-size:13px; cursor:pointer; }
.pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.mini-progress { height:6px; background:var(--bg-input); border-radius:3px; overflow:hidden; min-width:80px; }
.mini-progress > div { height:100%; background:var(--primary); }
.mini-progress > div.alto { background:var(--warning); }
.mini-progress > div.cheio { background:var(--danger); }
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:50; overflow-y:auto; padding:32px 16px; }
.modal-bg.aberto { display:block; }
.modal { max-width:860px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:relative; }
.modal .fechar { position:absolute; top:14px; right:18px; background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 16px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.dot.ok { background:var(--success); box-shadow:0 0 8px var(--success); }
.dot.err { background:var(--danger); }
.err-table td { font-family:monospace; font-size:12px; }
.copy-btn { background:var(--bg-input); border:1px solid var(--border); color:var(--text-secondary); border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; float:right; }
.copy-btn:hover { border-color:var(--primary); color:var(--text-primary); }
.doc-section h3 { margin:28px 0 8px; font-size:17px; }
.doc-section p { color:var(--text-secondary); font-size:14px; margin:8px 0; }
.doc-section table code { color:var(--accent); }
.badge.neutro { background:rgba(148,163,184,.15); color:var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════
   PAINEL DO CLIENTE — barra lateral

   Ocupa a faixa da esquerda da janela (fora do container centralizado),
   como num painel administrativo. A tela principal fica só com o que é
   da API; cadastro, senha e cobrança viram seções do menu.

   Cores: cinza como os links do topo, branco quando ativo. Sem cor de
   destaque — o menu é navegação, não deve competir com os números.
   ═══════════════════════════════════════════════════════════════════ */
/* A lateral precisa ir até o rodapé da janela mesmo quando o conteúdo é
   curto (ex: seção "Gerenciar assinatura", que tem um card só). Sem isso
   o fundo dela termina no meio da tela.
   Body vira coluna flex e o wrap ocupa o que sobra depois do nav. */
body.tem-lateral { display:flex; flex-direction:column; }
body.tem-lateral .painel-wrap { flex:1 1 auto; }

.painel-wrap { display:flex; align-items:stretch; }

.painel-menu {
    flex:0 0 230px; width:230px;
    background:var(--bg-secondary);
    border-right:1px solid var(--border);
    padding:24px 12px;
    align-self:stretch;
}
.painel-menu .titulo {
    display:block; padding:0 12px 10px;
    font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-muted);
}
.painel-menu .item {
    display:block; padding:11px 12px; margin-bottom:2px;
    border-radius:var(--radius-sm);
    color:var(--text-secondary); font-size:14px;
    cursor:pointer; user-select:none;
    transition:background .15s, color .15s;
}
.painel-menu .item:hover { background:var(--bg-card); color:var(--text-primary); }
.painel-menu .item.ativo {
    background:var(--bg-card);
    color:var(--text-primary);
    font-weight:600;
}

.painel-main { flex:1 1 auto; min-width:0; }

/* O container padrão é 1100px alinhado ao centro da JANELA. Com a lateral
   ocupando 230px, isso deixava metade da tela vazia à direita. Aqui ele
   centraliza no espaço restante e usa mais largura — os 4 cards de
   consumo cabem lado a lado com folga. */
.painel-main .container { margin:0 auto; max-width:1240px; padding:32px 28px; }

.painel-secao[hidden] { display:none; }

/* Formulários longos (Meus dados) ficam mais legíveis em coluna estreita:
   campo largo demais dá a impressão de que cabe muito mais texto do que
   realmente cabe. */
.painel-secao[data-conteudo="dados"] .card,
.painel-secao[data-conteudo="seguranca"] .card,
.painel-secao[data-conteudo="assinatura"] .card { max-width:900px; }

/* Telas estreitas: a lateral vira uma faixa de abas rolável no topo */
@media (max-width:900px) {
    .painel-wrap { display:block; }
    .painel-menu {
        width:auto; padding:10px 12px;
        border-right:none; border-bottom:1px solid var(--border);
        display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    .painel-menu .titulo { display:none; }
    .painel-menu .item { flex:0 0 auto; white-space:nowrap; margin-bottom:0; }
    .painel-main .container { max-width:100%; }
}