:root {
  --fundo: oklch(0.17 0.012 265);
  --superficie: oklch(0.21 0.014 265);
  --superficie-2: oklch(0.25 0.016 265);
  --linha: oklch(0.33 0.018 265);
  --tinta: oklch(0.95 0.005 265);
  --tinta-2: oklch(0.77 0.012 265);
  --tinta-3: oklch(0.62 0.014 265);
  --acento: oklch(0.74 0.15 55);
  --acento-tinta: oklch(0.2 0.03 55);
  --ok: oklch(0.76 0.14 155);
  --aviso: oklch(0.82 0.14 85);
  --erro: oklch(0.7 0.17 25);
  --info: oklch(0.76 0.1 240);
  --raio: 10px;
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  color-scheme: dark;
}
:root[data-tema="light"] {
  --fundo: oklch(0.975 0.004 265);
  --superficie: oklch(1 0 0);
  --superficie-2: oklch(0.96 0.006 265);
  --linha: oklch(0.88 0.008 265);
  --tinta: oklch(0.22 0.02 265);
  --tinta-2: oklch(0.42 0.02 265);
  --tinta-3: oklch(0.5 0.02 265);
  --acento: oklch(0.6 0.17 50);
  --acento-tinta: oklch(0.99 0 0);
  --ok: oklch(0.5 0.13 155);
  --aviso: oklch(0.52 0.12 70);
  --erro: oklch(0.52 0.19 25);
  --info: oklch(0.5 0.12 240);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --fundo: oklch(0.975 0.004 265);
    --superficie: oklch(1 0 0);
    --superficie-2: oklch(0.96 0.006 265);
    --linha: oklch(0.88 0.008 265);
    --tinta: oklch(0.22 0.02 265);
    --tinta-2: oklch(0.42 0.02 265);
    --tinta-3: oklch(0.5 0.02 265);
    --acento: oklch(0.6 0.17 50);
    --acento-tinta: oklch(0.99 0 0);
    --ok: oklch(0.5 0.13 155);
    --aviso: oklch(0.52 0.12 70);
    --erro: oklch(0.52 0.19 25);
    --info: oklch(0.5 0.12 240);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); font-size: 16px; line-height: 1.55; }
h1 { font-size: 1.6rem; margin: 0 0 .35rem; letter-spacing: -.01em; font-weight: 650; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .8rem; font-weight: 600; }
h3 { font-size: .95rem; margin: 0 0 .6rem; font-weight: 600; }
p { margin: .3rem 0 .8rem; }
a { color: inherit; }
.mudo { color: var(--tinta-2); }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.linha { display: flex; gap: .6rem; align-items: center; }
.rolagem { overflow-x: auto; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.campo { width: 100%; padding: .62rem .75rem; background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio); font: inherit; }
.campo:focus { border-color: var(--acento); outline: none; }
.rotulo { display: grid; gap: .35rem; font-size: .88rem; color: var(--tinta-2); }
.form { display: grid; gap: 1rem; }
.senha { position: relative; }
.senha .campo { padding-right: 2.8rem; }
.olho { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--tinta-2); padding: .4rem; border-radius: 6px; cursor: pointer; display: grid; }
.olho:hover { color: var(--tinta); }
.botao { display: inline-flex; gap: .5rem; align-items: center; justify-content: center; padding: .65rem 1.1rem; border: 0; border-radius: var(--raio); background: var(--acento); color: var(--acento-tinta); font: inherit; font-weight: 600; cursor: pointer; }
.botao:disabled { opacity: .55; cursor: progress; }
.botao-leve { background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha); font-weight: 500; }
.botao-icone { background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio); padding: .55rem; display: grid; cursor: pointer; }
.seletor { width: auto; padding: .5rem .6rem; }

.aviso { margin: .6rem 0; padding: .7rem .9rem; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--superficie); }
.aviso-erro { border-color: var(--erro); color: var(--erro); }
.aviso-aviso { border-color: var(--aviso); }
.aviso-ok { border-color: var(--ok); color: var(--ok); }
.faixa { display: block; text-decoration: none; margin: 0 0 1rem; }

.chip { display: inline-block; padding: .12rem .6rem; border-radius: 99px; border: 1px solid var(--linha); background: var(--superficie-2); font-size: .78rem; margin-right: .4rem; }
.chip-ativa { border-color: var(--ok); color: var(--ok); }
.chip-precisa_reconectar, .chip-aguardando_conexao, .chip-provisionando { border-color: var(--aviso); color: var(--aviso); }
.chip-suspensa { border-color: var(--erro); color: var(--erro); }

.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-marca { padding: 3rem; background: var(--superficie); border-right: 1px solid var(--linha); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.login-pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; max-width: 30rem; }
.login-pontos li { display: grid; gap: .25rem; padding-left: 1rem; border-left: 3px solid var(--acento); }
.login-pontos strong { font-size: 1.15rem; }
.login-pontos span { color: var(--tinta-2); }
.login-form { padding: 1.5rem; display: flex; flex-direction: column; }
.login-topo { display: flex; gap: .6rem; justify-content: flex-end; }
.cartao-login { margin: auto; width: min(100%, 392px); padding: 1rem 0; }
.logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; color: var(--acento); }
.logo span { color: var(--tinta); }

.casca { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.lateral { background: var(--superficie); border-right: 1px solid var(--linha); padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.papel { margin-bottom: .4rem; }
.menu { display: grid; gap: .25rem; }
.menu a { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: var(--raio); text-decoration: none; color: var(--tinta-2); }
.menu a:hover { background: var(--superficie-2); color: var(--tinta); }
.menu a.ativo { background: var(--superficie-2); color: var(--tinta); box-shadow: inset 3px 0 0 var(--acento); }
.lateral-rodape { margin-top: auto; display: grid; gap: .6rem; }
.email { font-size: .8rem; overflow-wrap: anywhere; }
.principal { padding: 2rem; max-width: 1100px; width: 100%; }
.pagina { display: grid; gap: .4rem; }
.pagina.estreita { max-width: 420px; }

.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 1.1rem 1.2rem; }
.cartao.destaque { border-color: var(--acento); margin-top: 1rem; }
.saudacao { display: grid; gap: .3rem; justify-items: start; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 1rem 0; }
.metrica { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 1rem 1.1rem; display: grid; gap: .2rem; }
.metrica-num { font-size: 2.2rem; font-weight: 650; line-height: 1.1; }
.duas-colunas { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; margin-top: .8rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th { text-align: left; font-weight: 500; color: var(--tinta-3); padding: .5rem .6rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: .65rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }

.passos { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.passo { display: grid; grid-template-columns: 2.2rem 1fr; gap: .9rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 1rem 1.1rem; }
.passo.feito { border-color: var(--ok); }
.passo-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); border: 1px solid var(--linha); font-family: var(--mono); }
.passo.feito .passo-num { background: var(--ok); color: var(--fundo); border-color: var(--ok); }

.quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin-top: 1rem; }
.coluna { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: .9rem; min-height: 9rem; }
.cartao-tarefa { display: grid; gap: .2rem; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .5rem; }
.diag { margin-top: 1rem; }
.diag-aviso { border-color: var(--aviso); }
.diag-erro { border-color: var(--erro); }
.diag-info { border-color: var(--info); }

.botao-texto { background: none; border: 0; padding: .2rem 0; color: var(--acento); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.botao-texto:disabled { opacity: .5; }
.espaco { flex: 1; }
.mono-campo { font-family: var(--mono); font-size: .82rem; }

.ajuda { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: .1rem .9rem; margin: .4rem 0 .6rem; }
.ajuda summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .55rem 0; color: var(--tinta-2); font-size: .92rem; list-style: none; }
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda[open] summary { color: var(--tinta); }
.ajuda p { color: var(--tinta-2); margin: 0 0 .8rem; max-width: 70ch; }

.topo-inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .8rem; align-items: stretch; }
.cards-topo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.cards-topo .metrica { padding: .75rem .9rem; }
.cards-topo .metrica-num { font-size: 1.8rem; }
.metrica-alerta { border-color: var(--aviso); }
.metrica-alerta .metrica-num { color: var(--aviso); }
.abrir-tarefas { grid-column: 1 / -1; text-decoration: none; }

.ligacoes-bloco { margin-top: .6rem; }
.ligacoes-bloco h2 { margin-bottom: .2rem; }
.ligacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin-top: .6rem; }
.ligacao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: .95rem 1rem; display: grid; gap: .25rem; align-content: start; }
.ligacao-topo { display: flex; align-items: center; gap: .5rem; color: var(--tinta-2); }
.ligacao-topo .mono { flex: 1; }
.ligacao strong { font-size: 1.1rem; }
.ligacao p { margin: 0; font-size: .88rem; }
.ponto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--tinta-3); }
.ponto-ok { background: var(--ok); }
.ponto-ruim { background: var(--erro); }
.ligacao-ok { border-color: var(--ok); }
.ligacao-ruim { border-color: var(--erro); }
.nota { font-size: .85rem; margin-top: .6rem; }

.tour-bloqueio { position: fixed; inset: 0; z-index: 50; }
.tour-realce { position: fixed; z-index: 51; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px oklch(0.08 0.01 265 / 0.66); outline: 2px solid var(--acento); }
.tour-balao { position: fixed; z-index: 52; background: var(--superficie); color: var(--tinta); border: 1px solid var(--acento); border-radius: 12px; padding: .9rem 1rem; display: grid; gap: .3rem; }
.tour-balao p { margin: 0 0 .4rem; }
.tour-botoes { display: flex; align-items: center; gap: .5rem; }

.convite { min-height: 100vh; padding: 1.5rem; display: flex; flex-direction: column; }
.convite .login-topo { align-items: center; }

.grupo { display: grid; gap: .2rem; margin-top: .35rem; }
.grupo-titulo { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; padding: .45rem .75rem; color: var(--tinta-3); font: inherit; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-radius: var(--raio); }
.grupo-titulo:hover { color: var(--tinta); background: var(--superficie-2); }
.grupo-ativo .grupo-titulo { color: var(--acento); }
.grupo-seta { font-size: .95rem; }
.grupo-itens { display: grid; gap: .2rem; }

.topo-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.metricas-compactas { margin: 0; grid-template-columns: repeat(2, minmax(120px, 1fr)); }
.metricas-compactas .metrica-num { font-size: 1.8rem; }

.area { margin-top: .4rem; }
.agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.agente { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: .9rem; }
.agente-principal { grid-column: 1 / -1; border-color: var(--acento); }
.agente-foto { width: 3.2rem; height: 3.2rem; border-radius: 12px; display: grid; place-items: center; background: var(--superficie-2); border: 1px solid var(--linha); font-family: var(--mono); font-weight: 600; color: var(--acento); }
.agente-corpo { display: grid; gap: .2rem; align-content: start; min-width: 0; }
.agente-topo { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; }
.agente p { margin: 0; font-size: .88rem; }

.chaves { display: grid; gap: .6rem; }
.chave { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: .8rem .9rem; display: grid; gap: .2rem; }
.chave-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.chave p { margin: 0; font-size: .85rem; }
.final-chave { font-family: var(--mono); font-size: .85rem; color: var(--tinta-2); }
.garantias { list-style: none; padding: 0; margin: .2rem 0 0; display: grid; gap: .35rem; color: var(--tinta-2); font-size: .88rem; }
.garantias li { display: flex; gap: .45rem; align-items: center; }
.garantias svg { color: var(--ok); flex: none; }

.opcoes, .planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin-top: .4rem; }
.opcao, .plano { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 1.1rem 1.2rem; display: grid; gap: .5rem; align-content: start; }
.opcao h2, .plano h2 { margin: .2rem 0 0; }
.opcao p { margin: 0; }
.opcao-atual, .plano-atual { border-color: var(--acento); }
.opcao-topo { display: flex; justify-content: space-between; align-items: center; color: var(--tinta-2); }
.opcao .botao, .plano .botao { justify-self: start; margin-top: .3rem; }
.plano-preco { font-size: 1.5rem; font-weight: 650; }
.plano-preco-vazio { font-size: 1rem; font-weight: 500; color: var(--tinta-2); }

.bloco-plano { display: grid; gap: .6rem; margin-top: .8rem; }
.bloco-plano h2 { margin: 0; }
.links-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.link-venda { display: grid; gap: .5rem; align-content: start; }
.link-venda .botao { justify-self: start; }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-marca { padding: 1.5rem; border-right: 0; border-bottom: 1px solid var(--linha); }
  .login-pontos { display: none; }
  .casca { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; padding: .8rem 1rem; }
  .agentes { grid-template-columns: 1fr; }
  .lateral-rodape { margin-top: 0; }
  .principal { padding: 1rem; }
  .duas-colunas { grid-template-columns: 1fr; }
  .topo-inicio { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .botao, .menu a { transition: background .15s, color .15s; }
  .tour-realce, .tour-balao { transition: top .2s, left .2s, width .2s, height .2s; }
}