/* Telas de conta: entrada (login/cadastro/prévia), planos, pagamento, minha base e assistente de IA */
.rotulo-mono { font: 500 .68rem var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-3); }
.titulo-hero { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--tinta); margin-bottom: .8rem; }
.titulo-hero { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead-hero { color: var(--tinta-2); font-size: 1.05rem; max-width: 34rem; }
.lista-beneficios { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.lista-beneficios li { display: flex; gap: .6rem; align-items: flex-start; color: var(--tinta-2); }
.lista-beneficios i { color: var(--acento); font-size: 1.1rem; }
.cartao-entrar { padding: 20px; box-shadow: 0 12px 40px rgba(15, 23, 42, .08); }

.seletor-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.seletor-tipo .btn { border: 1px solid var(--borda); border-radius: 12px; padding: .7rem; text-align: left; color: var(--tinta); font-family: var(--f-display); font-weight: 500; display: flex; flex-direction: column; }
.seletor-tipo .btn i { font-size: 1.2rem; color: var(--acento); }
.seletor-tipo .btn span { font: 400 .78rem var(--f-corpo); color: var(--tinta-3); }
.seletor-tipo .btn-check:checked + .btn { border-color: var(--acento); background: var(--suave); box-shadow: 0 0 0 1px var(--acento) inset; }
.modo-individual .so-empresa { display: none !important; }
body:not(.modo-individual) .so-individual { display: none !important; }

.degraus { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.degraus span { font: 500 .7rem var(--f-mono); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borda); color: var(--tinta-3); }
.degraus span.ativo { background: var(--degrade); color: #fff; border-color: transparent; }

.grade-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.plano { border: 1px solid var(--borda); border-radius: 12px; padding: .75rem .8rem; cursor: pointer; background: var(--superficie); display: flex; flex-direction: column; gap: .2rem; transition: border-color .15s, box-shadow .15s; }
.plano:hover { border-color: var(--acento); }
.plano.ativo { border-color: transparent; box-shadow: 0 0 0 2px var(--acento) inset, 0 8px 20px rgba(59, 130, 246, .15); background: var(--suave); }
.plano .nome { font-family: var(--f-display); font-weight: 700; color: var(--tinta); }
.plano .preco { font: 700 1.25rem var(--f-display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.plano .preco s { font-size: .8rem; font-weight: 400; color: var(--tinta-3); }
.plano .preco small { display: block; font: 400 .72rem var(--f-corpo); color: var(--tinta-3); }
.plano ul { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .78rem; color: var(--tinta-2); display: grid; gap: .15rem; }
.plano ul i { color: var(--acento); margin-right: .25rem; }
.plano.atual-plano { opacity: .6; cursor: default; }

.resumo-preco { border: 1px dashed var(--suave-borda); background: var(--suave); border-radius: 12px; padding: .8rem 1rem; }
.resumo-preco .total { font: 700 1.8rem var(--f-display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.resumo-preco .total small { font-size: .9rem; font-weight: 500; color: var(--tinta-3); }

.passos { display: flex; gap: .4rem; flex-wrap: wrap; }
.passos span { font: 500 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borda); color: var(--tinta-3); }
.passos .feito { color: var(--serie-4); border-color: var(--serie-4); }
.passos .atual { background: var(--degrade); color: #fff; border-color: transparent; }

.pagamento .valor-pagamento { font: 700 1.6rem var(--f-display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.qr-pix { background: #fff; border-radius: 12px; padding: 8px; display: inline-block; border: 1px solid var(--borda); }
.qr-pix svg { width: 220px; height: 220px; display: block; }
.sucesso-pg { font-size: 3.2rem; color: var(--serie-4); line-height: 1; }
.mascarado { font-family: var(--f-mono); color: var(--tinta-3); }

/* ------------------------------------------------------------- barra de cota (dentro do sistema) */
.barra-conta { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.barra-conta .medidor { min-width: 170px; flex: 1 1 170px; }
.barra-conta .medidor .progress { height: 6px; }
.barra-conta .medidor .rot { font: 500 .66rem var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); display: flex; justify-content: space-between; }
.barra-conta .plano-badge { font-family: var(--f-display); font-weight: 700; color: var(--tinta); }
.barra-conta.restrito { border-color: #EF4444; box-shadow: 0 0 0 1px #EF4444 inset; }
.progress-bar.alerta { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.menu-usuario .dropdown-menu { background: var(--superficie); border-color: var(--borda); }
.menu-usuario .dropdown-item { color: var(--tinta-2); }
.menu-usuario .dropdown-item:hover { background: var(--suave); color: var(--tinta); }
.btn-conta { border: 1px solid #22303A; background: rgba(255, 255, 255, .04); color: #CBD5E1; border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; }
.btn-conta:hover { color: #fff; border-color: #3B82F6; }
.tela-bloqueio { max-width: 640px; margin: 8vh auto; }
.linha-revelada td { background: transparent; }
.tag-bloqueado { font: 500 .66rem var(--f-mono); color: var(--tinta-3); }

/* ------------------------------------------------------------- assistente de IA */
.btn-ia { position: fixed; right: 20px; bottom: 20px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--degrade); color: #fff; font-size: 1.5rem; box-shadow: 0 10px 28px rgba(59, 130, 246, .4); display: grid; place-items: center; }
.btn-ia img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.painel-ia { position: fixed; right: 20px; bottom: 90px; z-index: 1045; width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); display: flex; flex-direction: column; overflow: hidden; }
.painel-ia.d-none { display: none !important; }
.painel-ia .cab { background: #0D1418; color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.painel-ia .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--degrade); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.painel-ia .avatar img { width: 100%; height: 100%; object-fit: cover; }
.painel-ia .msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.painel-ia .msg { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: .88rem; white-space: pre-wrap; }
.painel-ia .msg.usuario { align-self: flex-end; background: var(--degrade); color: #fff; border-bottom-right-radius: 4px; }
.painel-ia .msg.assistente { align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--tinta-2); border-bottom-left-radius: 4px; }
.painel-ia .sugestao { border: 1px dashed var(--suave-borda); background: var(--suave); border-radius: 10px; padding: 8px 10px; font-size: .8rem; align-self: flex-start; max-width: 88%; }
.painel-ia form { border-top: 1px solid var(--borda); padding: 8px; display: flex; gap: 6px; }
@media (max-width: 575px) { .btn-ia { right: 12px; bottom: 12px; } .painel-ia { right: 16px; bottom: 80px; } }
body.nao-staff .so-staff { display: none !important; }

/* ------------------------------------------------------------- marca d'água: contato novo × já visto */
.selo-novo, .selo-visto { display: inline-block; font: 600 .62rem var(--f-mono); letter-spacing: .08em; border-radius: 999px; padding: 1px 7px; vertical-align: middle; white-space: nowrap; }
.selo-novo { background: var(--degrade); color: #fff; }
.selo-visto { background: var(--superficie-2); color: var(--tinta-3); border: 1px solid var(--borda); }
.tabela tr.linha-nova td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.tabela tr.linha-vista td { color: var(--tinta-3); }
.tabela tr.linha-vista td:first-child { box-shadow: inset 3px 0 0 var(--borda); }
.tabela tr.linha-vista {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='44'%3E%3Ctext x='8' y='30' font-family='monospace' font-size='13' font-weight='700' letter-spacing='3' fill='%2394A3B8' fill-opacity='.22' transform='rotate(-6 110 22)'%3EJÁ NA SUA BASE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
}

/* ------------------------------------------------------------- Início e Pagamentos */
.home-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.home-titulo { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; color: var(--tinta); margin: 0; }
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.atalho { text-align: left; border: 1px solid var(--borda); background: var(--superficie); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 2px; color: var(--tinta-2); transition: border-color .15s, transform .15s; }
.atalho:hover:not(:disabled) { border-color: var(--acento); transform: translateY(-1px); }
.atalho:disabled { opacity: .5; }
.atalho i { font-size: 1.4rem; color: var(--acento); }
.atalho b { font-family: var(--f-display); color: var(--tinta); }
.atalho span { font-size: .8rem; color: var(--tinta-3); }
.atalho-destaque { background: var(--degrade); border-color: transparent; }
.atalho-destaque i, .atalho-destaque b, .atalho-destaque span { color: #fff; }
.valor-grande { font: 700 1.8rem var(--f-display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.fatura-aberta { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.fatura-aberta:last-child { border-bottom: 0; }
.indicacao { background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--degrade) border-box; border: 1.5px solid transparent; }
.cupom-codigo { font: 700 1.2rem var(--f-mono); letter-spacing: .18em; text-align: center; }
.cupom-entrada { font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }