:root{--fundo:#f3f5f8;--sup:#fff;--txt:#1b2430;--suave:#5a6677;--borda:#d6dce5;--pri:#0b5fd6;--pri-esc:#0847a3;--topo:#101a2b;
--ok:#0f7b4a;--okf:#e2f5ec;--err:#b3261e;--errf:#fdeceb;--pend:#8a5a00;--pendf:#fff3d6;--infoc:#0a3f94;--infof:#e6efff;--cinza:#eceff4}
@media (prefers-color-scheme:dark){:root{--fundo:#0e1420;--sup:#172033;--txt:#e8edf5;--suave:#a3afc2;--borda:#2c3a52;--pri:#5b9bff;--pri-esc:#8ab8ff;
--ok:#5fd39b;--okf:#12342a;--err:#ff8f87;--errf:#3a1b1a;--pend:#ffcf6b;--pendf:#3a2d10;--infoc:#b9d0f7;--infof:#14284a;--cinza:#222d42}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,"Segoe UI",Roboto,sans-serif;color:var(--txt);background:var(--fundo)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1{font-size:24px;margin:0 0 4px}.sub{color:var(--suave);margin:0 0 22px}
a{color:var(--pri)}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}

/* páginas públicas */
.topo-publico{background:var(--topo);padding:16px max(16px,calc((100% - 44rem)/2))}
.marca{font-size:20px;color:#fff;text-decoration:none;display:inline-flex;align-items:center}.marca .logo{width:30px;height:auto;flex:none;margin-right:9px}.marca b{color:#7db2ff}
.pagina{margin:32px auto 48px;padding:0 16px;width:100%}
.pagina.estreito{max-width:30rem}.pagina.medio{max-width:46rem}

/* layout interno */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.lado{background:var(--topo);color:#cdd6e4;padding:20px 14px;display:flex;flex-direction:column}
.lado .marca{padding:0 10px 4px}.papel{font-size:12px;color:#8fa0b8;padding:0 10px 18px}
.nav a{display:block;padding:10px 12px;border-radius:8px;color:#cdd6e4;text-decoration:none;margin-bottom:2px}
.nav a.at{background:#1d2c47;color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #7db2ff}
.usr{margin-top:auto;padding:12px 10px;border-top:1px solid #243450;font-size:13px}
.usr small{display:block;color:#8fa0b8;margin-bottom:6px}
.link{background:none;border:0;color:#9cc2ff;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.princ{min-width:0}.cont{padding:28px 32px 40px;max-width:70rem}

/* componentes */
.cartao{background:var(--sup);border:1px solid var(--borda);border-radius:10px;padding:20px;margin-bottom:16px}
.cartao h2{font-size:16px;margin:0 0 14px}
.grade{display:grid;gap:16px}.g4{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.kpi small{color:var(--suave);display:block;font-size:13px}.kpi strong{font-size:26px;display:block}.kpi span{font-size:13px;color:var(--suave)}
.btn{display:inline-block;padding:10px 18px;border-radius:8px;border:1px solid var(--pri);background:var(--pri);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--pri-esc)}
.btn.sec{background:transparent;color:var(--pri);border-color:var(--borda)}.btn.sec:hover{border-color:var(--pri)}
.btn.bloco{display:block;width:100%;text-align:center}
.btn[disabled],.btn.off{background:var(--cinza);border-color:var(--borda);color:var(--suave);cursor:not-allowed}
.aviso{padding:14px 18px;border-radius:10px;margin-bottom:16px;border:1px solid transparent}
.aviso.ok{background:var(--okf);color:var(--ok);border-color:var(--ok)}
.aviso.err{background:var(--errf);color:var(--err);border-color:var(--err)}
.aviso.info{background:var(--infof);color:var(--infoc);border-color:var(--pri)}
.campo{margin-bottom:16px}.campo label{display:block;font-weight:600;margin-bottom:4px;font-size:14px}
.req{color:var(--err)}.opc{font-weight:400;color:var(--suave)}
.in{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--borda);border-radius:8px;background:var(--sup);color:var(--txt);font:inherit}
.in.e{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.aj{font-size:13px;color:var(--suave);margin-top:4px}.msg{font-size:13px;color:var(--err);margin-top:4px;font-weight:600}
.l2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.linha-senha{display:flex;gap:8px;align-items:flex-start}.linha-senha .campo{flex:1;margin:0}
.nota{font-size:12px;color:var(--suave)}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}.check input{width:20px;height:20px;margin-top:2px;flex:none}
.captcha-stub{display:flex;align-items:center;gap:12px;border:1px solid var(--borda);background:var(--sup);border-radius:8px;padding:12px 14px;max-width:21rem}
.captcha-stub input{width:22px;height:22px}
.acoes{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.centro{text-align:center}.centro .cartao{padding:32px 24px}
.vazio{text-align:center;padding:28px 12px;color:var(--suave)}

@media (max-width:760px){
  .app{grid-template-columns:1fr}.lado{padding:12px 14px}.nav{display:flex;gap:6px;flex-wrap:wrap}.usr{margin-top:12px}
  .cont{padding:20px 16px}.g4{grid-template-columns:1fr 1fr}.l2{grid-template-columns:1fr}
}
@media (max-width:420px){.g4{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:12px}.kpi strong{font-size:20px}}
@media (max-width:360px){.g4{grid-template-columns:1fr}}
/* tabelas do portal viram "cartões" quando o ESPAÇO REAL do cartão é pequeno (não só a janela): cada linha uma ficha, sem rolagem lateral e sem coluna escondida */
.tabela-cartao{container-type:inline-size}
@container (max-width:860px){
  .empilha thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .empilha,.empilha tbody,.empilha tr,.empilha th,.empilha td{display:block;width:100%}
  .empilha tr{padding:12px 4px;border-bottom:1px solid var(--borda)}
  .empilha tr:last-child{border-bottom:0}
  .empilha th[scope=row]{padding:2px 0 6px;font-size:15px;text-align:left}
  .empilha td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;text-align:right}
  .empilha td[data-label]::before{content:attr(data-label);color:var(--suave);font-size:13px;text-align:left;flex:0 0 auto}
  .empilha .vazio-m{display:none}
  .empilha td[colspan]:not(.vazio-m){display:block;text-align:left}
}
/* tabela larga (10 colunas, ex.: mapa de terminais): vira lista de cartoes ate 1180px de largura */
@container (max-width:1180px){
  .empilha.larga thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .empilha.larga,.empilha.larga tbody,.empilha.larga tr,.empilha.larga th,.empilha.larga td{display:block;width:100%}
  .empilha.larga tr{padding:12px 4px;border-bottom:1px solid var(--borda)}
  .empilha.larga tr:last-child{border-bottom:0}
  .empilha.larga th[scope=row]{padding:2px 0 6px;font-size:15px;text-align:left}
  .empilha.larga td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;text-align:right}
  .empilha.larga td[data-label]::before{content:attr(data-label);color:var(--suave);font-size:13px;text-align:left;flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- fase 2: listas, filtros, perfis ---- */
.cabecalho-pagina{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.trilha{font-size:13px;color:var(--suave);margin:0 0 10px}
.btn.peq{padding:5px 12px;font-size:13px}
.btn.perigo{background:transparent;color:var(--err);border-color:var(--err)}.btn.perigo:hover{background:var(--errf)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.chip{padding:6px 14px;border:1px solid var(--borda);border-radius:99px;background:var(--sup);font-size:13px;color:var(--txt);text-decoration:none}
.chip:hover{border-color:var(--pri)}.chip.at{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.selo{display:inline-block;padding:1px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.s-ok{background:var(--okf);color:var(--ok)}.s-pend{background:var(--pendf);color:var(--pend)}.s-ne{background:var(--cinza);color:var(--suave)}.s-err{background:var(--errf);color:var(--err)}
.tabela-cartao{padding:8px 14px}
.tabela-wrap{overflow-x:auto;position:relative}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--borda);vertical-align:middle}
thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);border-bottom:2px solid var(--borda)}
tbody th{font-weight:700}
.rodape-tabela{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--suave);font-size:13px;padding:12px 10px 6px}
fieldset.perfis{border:0;margin:0;padding:0;min-width:0}
fieldset.perfis legend{font-weight:700;font-size:16px;margin:0 0 12px;padding:0}
.perfil{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--borda);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:var(--sup);cursor:pointer}
.perfil.at{border-color:var(--pri);background:var(--infof)}
.perfil input{width:20px;height:20px;margin-top:2px;flex:none}
.perfil strong{display:block}.perfil span span{font-size:13px;color:var(--suave)}
.perfil:has(input:focus-visible){outline:3px solid var(--pri);outline-offset:2px}
.perfil:has(input:disabled){cursor:not-allowed;opacity:.75}
.coluna-estreita{max-width:22rem}
.situacao-usuario p{margin:0 0 12px}
@media (max-width:760px){.rodape-tabela{flex-direction:column}}

/* ---- fase 3: contratação e licenças ---- */
.g21{grid-template-columns:2fr 1fr}.g2c{grid-template-columns:1fr 1fr}
.produto-linha{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.produto-nome{font-size:17px}.produto-preco{text-align:right}.produto-preco strong{font-size:22px}
.stepper{display:inline-flex;gap:0;align-items:stretch}
.stepper .in{width:84px;text-align:center;font-weight:700;border-radius:0;-moz-appearance:textfield}
.stepper .btn{min-width:48px;border-radius:8px 0 0 8px;padding:8px 14px;font-size:18px}
.stepper .btn:last-child{border-radius:0 8px 8px 0}
.resumo dl{margin:0}.resumo .lin{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--borda)}
.resumo dt,.resumo dd{margin:0}.resumo dd{font-weight:700}
.resumo .lin[hidden]{display:none}
.g21>*,.g2c>*{min-width:0}
@media (max-width:980px){.g21{grid-template-columns:1fr}}
.resumo .tot{flex-wrap:wrap}
.produto-escolha{padding:12px 0;border-bottom:1px dashed var(--borda)}.produto-escolha:last-of-type{border-bottom:0}
.produto-escolha .produto-nome{display:block;font-size:16px}
.resumo .tot{font-size:22px;font-weight:700;border:0;padding-top:12px}
.resumo .btn{margin-top:10px}
.mono{font-family:Consolas,"Cascadia Mono",monospace}
.dados{margin:0;display:grid;gap:10px}.dados div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--borda);padding-bottom:8px}
.dados dt{color:var(--suave)}.dados dd{margin:0;font-weight:600;text-align:right}
.historico{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.historico li{display:flex;gap:16px;flex-wrap:wrap}.historico .quando{color:var(--suave);min-width:9.5rem;font-size:13px}
.selo.s-teste,.s-teste{background:var(--infof);color:var(--pri)}
h1 .selo{font-size:13px;vertical-align:middle}
@media (max-width:760px){.g21,.g2c{grid-template-columns:1fr}.produto-preco{text-align:left}}

/* ---- fase 5: backoffice SF ---- */
.busca-form{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap}.busca-form .in{flex:1;min-width:14rem}
.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin:0 0 18px;flex-wrap:wrap}
.abas a,.abas span{padding:10px 18px;color:var(--suave);border-bottom:3px solid transparent;margin-bottom:-1px;text-decoration:none}
.abas a:hover{color:var(--txt)}.abas .at{color:var(--pri);border-color:var(--pri);font-weight:700}.abas .dis{color:var(--borda)}
.l3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 16px}
.sub-linha{display:block;font-weight:400;color:var(--suave);font-size:13px}
.paginacao{display:flex;gap:14px;align-items:center}
select.in{appearance:auto}
.form-situacao{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}.form-situacao .campo{margin:0}.form-situacao .campo-largo{flex:1;min-width:16rem}.form-situacao .btn{margin-top:26px}
@media (max-width:760px){.l3{grid-template-columns:1fr}.form-situacao .btn{margin-top:0}}

/* ---- fase 6: cobrança por Pix ---- */
.pix-bloco{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.qr{width:196px;height:196px;border:1px solid var(--borda);padding:8px;background:#fff;border-radius:8px;image-rendering:pixelated}
.pix-codigo{flex:1;min-width:14rem}.pix-codigo label{display:block;font-weight:600;margin-bottom:4px;font-size:14px}
.pix-codigo textarea{resize:none;word-break:break-all;font-size:12px;margin-bottom:10px}
.sub-titulo{font-size:14px;margin:16px 0 8px;color:var(--suave)}
.lista-simples{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.lista-simples .selo{margin-left:6px}
td input[type=checkbox]{width:20px;height:20px}
.alerta-cobranca{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.num{text-align:right}
.recuo{color:var(--suave)}
.lista-regras{margin:0;padding-left:20px;display:grid;gap:12px}
.kpi.dest strong{color:var(--ok)}
.linkbox{display:flex;gap:10px;align-items:center;background:var(--cinza);border:1px solid var(--borda);border-radius:8px;padding:10px 14px;flex-wrap:wrap}
.linkbox .mono{flex:1;min-width:0;word-break:break-all;font-size:14px}
.linkbox-peq{max-width:260px}
.aviso-bloco{display:block}
.tot-rod th,.tot-rod td{font-weight:700;border-top:2px solid var(--borda);border-bottom:0}
a.chip{text-decoration:none;color:inherit}
a.chip.at{color:#fff}
.bloco-nota{display:block;color:var(--suave);font-size:13px;font-weight:400}
.linha-acao{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.linha-acao .in{min-width:200px;flex:1}
.acoes-tabela{padding:4px 10px 0}
.faixa-master{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.papel-sec{margin-top:16px;padding-top:12px;border-top:1px solid #243450}
.linkbox-form{flex-wrap:nowrap}.linkbox-form .mono{flex:0 0 auto;word-break:normal}.linkbox-form .in{min-width:0;flex:1}
@media (max-width:620px){.linkbox-form{flex-wrap:wrap}}

.passos{margin-bottom:16px}.passos h2 .opc{font-size:13px;font-weight:400;color:var(--suave);margin-left:6px}
.lista-passos{list-style:none;margin:8px 0 0;padding:0}
.lista-passos li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--borda)}
.lista-passos li:first-child{border-top:0}
.lista-passos .marca{flex:0 0 24px;height:24px;border:2px solid var(--borda);border-radius:50%;display:grid;place-items:center;font-size:13px;color:#fff}
.lista-passos li.feito .marca{background:var(--ok);border-color:var(--ok)}
.lista-passos .txt{flex:1;min-width:0}.lista-passos .txt small{display:block;color:var(--suave);font-size:13px}
.lista-passos li.feito .txt b{color:var(--suave);font-weight:600}
@media (max-width:520px){.lista-passos li{flex-wrap:wrap}.lista-passos .btn{margin-left:36px}}

.acoes-centro{justify-content:center;flex-wrap:wrap}

.logo-parceira{display:block;max-width:calc(100% - 20px);max-height:56px;margin:0 10px 14px;padding:5px 8px;background:#fff;border-radius:8px;object-fit:contain}
.logo-previa{display:block;max-width:240px;max-height:120px;padding:8px;background:#fff;border:1px solid var(--borda);border-radius:8px;object-fit:contain}
.dl{margin:0}.dl .lin{display:flex;gap:12px;padding:6px 0;border-bottom:1px dashed var(--borda)}.dl dt{flex:0 0 7.5rem;color:var(--suave);font-size:13px}.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* Quadro de avisos fixo do portal de parceiros (quem paga o operador) */
.quadro-aviso{position:relative;margin:0 0 16px;padding:12px 16px 12px 44px;border:1px solid var(--borda);border-left:5px solid var(--pri);border-radius:10px;background:var(--infof);color:var(--txt);font-size:14px;line-height:1.5}
.quadro-aviso::before{content:"📌";position:absolute;left:14px;top:11px;font-size:18px}
.quadro-aviso>b{display:block;margin-bottom:2px}
.quadro-aviso p{margin:0}

/* Contatos (possíveis clientes) */
.busca{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.busca .in{flex:1 1 220px;min-width:0}
.busca select.in{flex:0 1 260px}
.cabecalho-pagina .acoes{display:flex;flex-wrap:wrap;gap:8px}
.vazio-grande{padding:28px 16px;text-align:center}
.vazio-grande p{margin:0 0 8px}
.paginacao{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:14px 8px;border-top:1px solid var(--borda)}
.opcoes{border:0;margin:0;padding:0;display:grid;gap:8px}
.opcoes legend{font-weight:700;margin-bottom:6px;padding:0}
.opcoes[hidden]{display:none}
.opcoes .check{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--borda);border-radius:10px;min-height:44px}
#vis-escolhidos{margin-top:12px}
details.excluir{margin:22px 0 4px;padding:12px 16px;border:1px solid var(--borda);border-radius:10px;background:var(--sup)}
details.excluir summary{cursor:pointer;color:var(--err);font-weight:600;min-height:32px;display:flex;align-items:center}
details.excluir[open] summary{margin-bottom:10px}
details.excluir p{margin:0 0 10px}

/* passos numerados (ex.: o que acontece ao prometer pagamento): número visível dentro do círculo */
.lista-passos.numerada .marca{background:var(--infof);border-color:var(--pri);color:var(--pri);font-weight:700}

/* Mapa de terminais online (master) */
.mapa-cabeca{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:14px 16px 4px}
.mapa-cabeca h2{margin:0;font-size:17px}.mapa-cabeca h2 a{color:var(--txt);text-decoration:none}.mapa-cabeca h2 a:hover{text-decoration:underline}
.mapa-cliente{margin-bottom:16px}
.ponto{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:middle}
.ponto.on{background:var(--ok);box-shadow:0 0 0 3px var(--okf)}
.ponto.off{background:var(--suave)}
.txt-ok{color:var(--ok)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.g3{grid-template-columns:1fr}}
.mapa-resumo{margin-bottom:12px}
/* download de programas */
.quebra{word-break:break-all;font-size:12px}
details summary{cursor:pointer;min-height:32px;display:flex;align-items:center;font-weight:600;color:var(--pri)}