@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --fundo: #0b0b0d;
  --painel: #111114;
  --cartao: #16161a;
  --cartao-2: #1c1c21;
  --borda: #2a2a31;
  --texto: #ecebe6;
  --sutil: #9a9aa3;
  --fraco: #6b6b74;
  --ouro: #d4a72c;
  --ouro-claro: #f0c75a;
  --ouro-fundo: rgba(212, 167, 44, .12);
  --ok: #4ec98f;
  --ok-fundo: rgba(78, 201, 143, .12);
  --alerta: #f0a347;
  --alerta-fundo: rgba(240, 163, 71, .12);
  --perigo: #ef6b6b;
  --perigo-fundo: rgba(239, 107, 107, .12);
  --info: #6ea8ff;
  --info-fundo: rgba(110, 168, 255, .12);
  --raio: 12px;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.5 Inter, system-ui, sans-serif; min-height: 100vh; }
a { color: var(--ouro-claro); }
h1, h2, h3 { font-family: Sora, Inter, sans-serif; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
p { margin: 0; }
code, .mono { font-family: var(--mono); }

/* ---------- layout com menu lateral ---------- */
/* minmax(0, 1fr): impede que uma tabela larga estique a página (as tabelas rolam dentro da própria caixa) */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.menu { background: var(--painel); border-right: 1px solid var(--borda); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 8px; font-family: Sora; font-weight: 800; font-size: 18px; color: var(--texto); padding: 0 8px 18px; text-decoration: none; }
.marca .z { color: var(--ouro); font-size: 22px; }
.marca .selo-painel { font: 600 10px var(--mono); letter-spacing: .08em; color: var(--sutil); border: 1px solid var(--borda); border-radius: 4px; padding: 2px 6px; text-transform: uppercase; }
.menu a.item { color: var(--sutil); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-weight: 500; border: 1px solid transparent; }
.menu a.item:hover { color: var(--texto); background: var(--cartao); }
.menu a.item.ativo { color: var(--texto); background: var(--cartao); border-color: var(--borda); box-shadow: inset 2px 0 0 var(--ouro); }
.menu .rodape { margin-top: auto; border-top: 1px solid var(--borda); padding: 14px 8px 0; font-size: 12px; color: var(--sutil); display: grid; gap: 6px; }
.menu .rodape strong { color: var(--texto); font-weight: 600; }
.conteudo { padding: 32px 40px 80px; max-width: 1180px; width: 100%; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cabecalho p { color: var(--sutil); margin-top: 6px; }

/* ---------- componentes ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
.grade { display: grid; gap: 14px; }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.pilha { display: grid; gap: 14px; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha.fim { justify-content: flex-end; }
.linha.entre { justify-content: space-between; }
.espaco { margin-top: 24px; }

.kpi .rotulo { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--sutil); text-transform: uppercase; }
.kpi .valor { font: 700 26px Sora; margin: 8px 0 4px; }
.kpi .valor.ouro { color: var(--ouro-claro); }
.kpi .nota { color: var(--sutil); font-size: 12px; }

.alerta { border-radius: var(--raio); padding: 14px 16px; border: 1px solid; }
.alerta strong { display: block; margin-bottom: 2px; }
.alerta.aviso { background: var(--alerta-fundo); border-color: rgba(240,163,71,.35); }
.alerta.erro { background: var(--perigo-fundo); border-color: rgba(239,107,107,.35); }
.alerta.ok { background: var(--ok-fundo); border-color: rgba(78,201,143,.35); }
.alerta.info { background: var(--info-fundo); border-color: rgba(110,168,255,.35); }
.alerta a { font-weight: 600; }

button, .botao { font: 600 14px Inter, sans-serif; border-radius: 9px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--borda); background: var(--cartao-2); color: var(--texto); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
button:hover, .botao:hover { border-color: #3a3a43; }
button:disabled { opacity: .5; cursor: not-allowed; }
.primario { background: var(--ouro); color: #17130a; border-color: var(--ouro); }
.primario:hover { background: var(--ouro-claro); border-color: var(--ouro-claro); }
.perigo { color: var(--perigo); }
.fantasma { background: transparent; border-color: transparent; color: var(--sutil); }
.fantasma:hover { color: var(--texto); }
.pequeno { padding: 5px 10px; font-size: 13px; }

label.campo { display: grid; gap: 6px; font-weight: 600; font-size: 13px; }
label.campo .dica { font-weight: 400; color: var(--sutil); font-size: 12px; }
label.campo .erro-campo { font-weight: 500; color: var(--perigo); font-size: 12px; }
input, select, textarea { font: 14px Inter, sans-serif; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 9px; padding: 10px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-fundo); }
input.invalido { border-color: var(--perigo); }
.form { display: grid; gap: 14px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-2 .inteiro { grid-column: 1 / -1; }
.checks { display: grid; gap: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px; cursor: pointer; }
.check input { width: auto; margin-top: 3px; accent-color: var(--ouro); }
.check small { display: block; color: var(--sutil); font-weight: 400; }

.tabela-caixa { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--sutil); text-transform: uppercase; padding: 12px 16px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td .sub { color: var(--sutil); font-size: 12px; }
td.acoes { text-align: right; white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--cartao-2); }

.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.aviso { background: var(--alerta-fundo); color: var(--alerta); }
.selo.erro { background: var(--perigo-fundo); color: var(--perigo); }
.selo.neutro { background: var(--cartao-2); color: var(--sutil); }
.selo.info { background: var(--info-fundo); color: var(--info); }
.etiqueta { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--cartao-2); border: 1px solid var(--borda); margin: 0 4px 4px 0; }

.filtros { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros input, .filtros select { width: auto; flex: 1; min-width: 180px; }
.abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.abas button { background: transparent; border-color: transparent; color: var(--sutil); }
.abas button.ativa { background: var(--cartao); border-color: var(--borda); color: var(--texto); }

.vazio { text-align: center; padding: 40px 20px; color: var(--sutil); }
.vazio strong { display: block; color: var(--texto); font-size: 15px; margin-bottom: 4px; }
.sutil { color: var(--sutil); }
.ouro { color: var(--ouro-claro); }
.erro-txt { color: var(--perigo); }
.carregando { color: var(--sutil); padding: 30px; text-align: center; }

dl.ficha { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; margin: 0; }
dl.ficha dt { color: var(--sutil); }
dl.ficha dd { margin: 0; }

/* link mostrado uma única vez */
.link-unico { background: var(--ouro-fundo); border: 1px solid rgba(212,167,44,.4); border-radius: var(--raio); padding: 16px; display: grid; gap: 10px; }
.link-unico input { font: 12px var(--mono); }

/* ---------- passos (assistente de venda) ---------- */
.passos { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.passos li { display: flex; align-items: center; gap: 8px; color: var(--fraco); font-weight: 500; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--borda); }
.passos li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); background: var(--cartao-2); }
.passos li.atual { color: var(--texto); border-color: var(--ouro); }
.passos li.atual span { background: var(--ouro); color: #17130a; }
.passos li.feito { color: var(--sutil); }
.passos li.feito span { background: var(--ok-fundo); color: var(--ok); }
.passos.vertical { flex-direction: column; align-items: flex-start; }
.passos.vertical li { border: 0; }
.opcao-plano { text-align: left; display: block; cursor: pointer; font-weight: 400; }
.opcao-plano.escolhido { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-fundo); }
.cartao ul { padding-left: 18px; margin: 10px 0 0; display: grid; gap: 6px; }

/* ---------- portal do cliente ---------- */
.topo-cliente { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--borda); background: var(--painel); }
.topo-cliente .marca { padding: 0; }
.conteudo-cliente { max-width: 720px; margin: 0 auto; }
.valor-fatura { font: 700 28px Sora; }
.quebra { word-break: break-all; }

/* ---------- consumo de internet ---------- */
.barra-consumo { height: 10px; border-radius: 99px; background: var(--cartao-2); overflow: hidden; margin-top: 10px; }
.barra-consumo span { display: block; height: 100%; width: var(--pct); background: var(--ouro); border-radius: 99px; }

/* ---------- Pix ---------- */
.pix-caixa { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.pix-caixa textarea { font-size: 12px; resize: none; word-break: break-all; }
.campo-valor { max-width: 320px; }
.passos-whats { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.lista-vigia { padding-left: 18px; display: grid; gap: 8px; }
@media (max-width: 640px) { .pix-caixa { grid-template-columns: 1fr; } }

/* ---------- janela (modal) ---------- */
dialog { background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 16px; padding: 24px; width: min(620px, 94vw); max-height: 90vh; }
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog h2 { margin-bottom: 16px; }
dialog .linha.fim { margin-top: 18px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--cartao-2); border: 1px solid var(--borda); color: var(--texto); padding: 12px 18px; border-radius: 10px; z-index: 100; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.toast.erro { border-color: var(--perigo); }

/* ---------- telas de entrada ---------- */
.tela-entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.caixa-entrada { width: min(420px, 100%); }
.caixa-entrada .marca { justify-content: center; padding-bottom: 8px; }
.caixa-entrada .cartao { padding: 28px; }
.caixa-entrada h1 { font-size: 22px; margin-bottom: 4px; }
.caixa-entrada .form { margin-top: 20px; }
.caixa-entrada .primario { width: 100%; justify-content: center; padding: 11px; }
.caixa-entrada .rodape-entrada { text-align: center; color: var(--fraco); font-size: 12px; margin-top: 16px; }
.qrcode { display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 10px; width: max-content; margin: 0 auto; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu a.item { padding: 6px 10px; }
  .kpi .valor { font-size: 22px; }
  h1 { font-size: 22px; }
  .menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 12px; }
  .marca { padding: 0 8px; width: 100%; }
  .menu .rodape { display: none; }
  .conteudo { padding: 20px 16px 60px; }
  .form-2 { grid-template-columns: 1fr; }
  dl.ficha { grid-template-columns: 1fr; gap: 2px; }
  dl.ficha dd { margin-bottom: 10px; }
}