/* Autonomy: preto e branco, grade fina, Ubuntu e Ubuntu Mono, uma cor só (sinal) para dado vivo, raio 0. */
:root{
  --fundo:#000;--fundo-elevado:#0E0F11;--texto:#fff;--texto-apoio:#A3A8AE;--linha:#26292D;--linha-forte:#fff;
  --sinal:#4F8DF7;--sobre-texto:#000;--foco:#4F8DF7;
  --sans:"Ubuntu",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Ubuntu Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --fundo:#fff;--fundo-elevado:#F5F6F7;--texto:#0A0B0C;--texto-apoio:#575C62;--linha:#DADDE0;--linha-forte:#0A0B0C;
  --sinal:#1F5FD1;--sobre-texto:#fff;--foco:#1F5FD1;color-scheme:light}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--sans);font-size:16px;line-height:24px}
a{color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
button,input,select{font:inherit;color:inherit;border-radius:0}
.mono{font-family:var(--mono)}
.origem{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-apoio)}

/* topo */
.topo{display:flex;align-items:stretch;border-bottom:1px solid var(--linha);min-height:56px;padding:0 24px;gap:24px}
.marca{display:flex;align-items:center;gap:12px;font-weight:500;font-size:19px;text-decoration:none}
.marca .origem{border-left:1px solid var(--linha);padding-left:12px}
.menu{display:flex;gap:0;margin-left:16px}
.menu .sep{width:1px;background:var(--linha);margin:16px 8px}
.espaco{display:flex;align-items:center;border-left:1px solid var(--linha);padding-left:24px}
.espaco select{background:var(--fundo-elevado);border:1px solid var(--linha);padding:6px 12px;min-height:36px;font-weight:500}
.menu a{display:flex;align-items:center;padding:0 16px;text-decoration:none;color:var(--texto-apoio);border-bottom:1px solid transparent;margin-bottom:-1px}
.menu a[aria-current="page"]{color:var(--texto);border-bottom-color:var(--linha-forte)}
.menu a:hover{color:var(--texto)}
.conta{margin-left:auto;display:flex;align-items:center;gap:16px}
.conta .quem{color:var(--texto-apoio);font-size:13px}
.botao{background:var(--texto);color:var(--sobre-texto);border:1px solid var(--texto);padding:8px 16px;cursor:pointer;font-weight:500;text-decoration:none;display:inline-flex;align-items:center}
.botao.sec{background:transparent;color:var(--texto);border-color:var(--linha-forte)}
.botao.leve{background:transparent;color:var(--texto-apoio);border-color:var(--linha);padding:4px 12px;font-size:13px}

main{padding:0 24px 96px;max-width:1440px;margin:0 auto}
.pagina{padding-top:48px}
.cab{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--linha-forte);padding-bottom:24px}
h1{font-size:32px;line-height:38px;font-weight:500;letter-spacing:-.01em;margin:8px 0 0;text-wrap:balance}
h2{font-size:22px;line-height:28px;font-weight:500;margin:0}
.apoio{color:var(--texto-apoio);margin:8px 0 0;max-width:70ch}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:16px;align-items:end}
.filtros label{display:flex;flex-direction:column;gap:4px}
.filtros select,.filtros input{background:var(--fundo-elevado);border:1px solid var(--linha);padding:8px 12px;min-height:40px;min-width:9rem}

/* números */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));border-bottom:1px solid var(--linha)}
.numero{padding:24px 24px 24px 0;border-right:1px solid var(--linha);min-width:0}
.numero:last-child{border-right:0}
.numero+.numero{padding-left:24px}
.numero .valor{font-family:var(--mono);font-size:48px;line-height:52px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.numero .valor.vivo{color:var(--sinal)}
.numero .nota{color:var(--texto-apoio);font-size:13px;line-height:18px;margin-top:4px}
@media (max-width:700px){.numero{border-right:0;border-bottom:1px solid var(--linha);padding-left:0!important}.numero .valor{font-size:36px;line-height:40px}}

.bloco{padding-top:48px}
.bloco .cab-bloco{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;border-bottom:1px solid var(--linha);padding-bottom:12px}
.duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr));gap:48px}

/* tabelas */
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-apoio);font-weight:400;text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--linha);white-space:nowrap}
td{padding:12px 16px 12px 0;border-bottom:1px solid var(--linha);vertical-align:top}
td.n,th.n{text-align:right;font-family:var(--mono);white-space:nowrap}
td .sub{color:var(--texto-apoio);font-size:13px;line-height:18px}
td.longo{max-width:28rem;color:var(--texto-apoio);font-size:13px;line-height:18px}
.vazio{color:var(--texto-apoio);padding:24px 0}
.erro{border:1px solid var(--linha-forte);padding:16px;margin-top:24px}

/* gráfico */
.grafico{position:relative;margin-top:16px}
.grafico svg text{font-family:var(--mono);font-size:11px;fill:var(--texto-apoio)}
.legenda{display:flex;gap:16px;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--texto-apoio)}
.legenda i{display:inline-block;width:8px;height:8px;margin-right:6px}
.dica{position:absolute;pointer-events:none;background:var(--fundo-elevado);border:1px solid var(--linha);padding:8px 12px;font-family:var(--mono);font-size:12px;line-height:16px;white-space:nowrap}

/* entrar */
.entrar{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.entrar .lado{border-right:1px solid var(--linha);position:relative;overflow:hidden}
.entrar .lado svg{position:absolute;inset:0;width:100%;height:100%}
.entrar .lado .ln{stroke:var(--linha);stroke-width:1}
.entrar .lado .el{fill:var(--fundo-elevado)}
.entrar .lado .tx{fill:var(--texto)}
.entrar .lado .sin{fill:var(--sinal)}
.entrar .lado .nome{position:absolute;left:48px;bottom:48px;font-size:96px;line-height:.92;font-weight:500;letter-spacing:-.02em;margin:0}
.entrar form{align-self:center;justify-self:center;width:min(100% - 48px,360px);display:flex;flex-direction:column;gap:16px}
.entrar form label{display:flex;flex-direction:column;gap:4px}
.entrar form input{background:var(--fundo-elevado);border:1px solid var(--linha);padding:12px 16px}
.entrar form .botao{justify-content:center;padding:12px 16px;margin-top:8px}
.entrar .msg{min-height:24px;font-size:13px}
@media (max-width:800px){.entrar{grid-template-columns:1fr}.entrar .lado{min-height:220px;border-right:0;border-bottom:1px solid var(--linha)}.entrar .lado .nome{font-size:56px;left:24px;bottom:24px}}

/* dados */
.camadas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:48px;padding-top:48px}
.camada h2{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--linha-forte);padding-bottom:12px}
.camada h2 .origem{font-weight:400}
.camada .apoio{margin:8px 0 16px;font-size:13px;line-height:18px}
.fonte{margin-top:24px}
.fonte .origem{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--linha)}
.tab{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--linha);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:inherit}
.tab:hover,.tab[aria-current]{background:var(--fundo-elevado)}
.tab .nome{font-family:var(--mono)}
.tab .n{font-family:var(--mono);font-size:13px;color:var(--texto-apoio);white-space:nowrap}
.tab .desc{grid-column:1/-1;color:var(--texto-apoio);font-size:13px;line-height:18px}
.tab.filha .nome{padding-left:16px;color:var(--texto-apoio)}
.detalhe{margin-top:48px;border-top:1px solid var(--linha-forte);padding-top:24px}
.detalhe .cab-bloco{border-bottom:0}
.tnums{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.previa td,.previa th{max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.previa td.nulo{color:var(--texto-apoio)}
/* integrações */
.integracoes{display:flex;flex-direction:column;gap:48px;padding-top:48px}
.sistema{border:1px solid var(--linha-forte);padding:24px}
.sistema>.cab-i{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:start;border-bottom:1px solid var(--linha);padding-bottom:16px}
.sistema h2{font-size:26px;line-height:32px}
.integs{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.integ{border:1px solid var(--linha);background:var(--fundo-elevado);padding:20px}
.integ .cab-i{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:start}
.integ h3{font-size:19px;line-height:26px;font-weight:500;margin:0}
.integ .apoio{margin-top:4px;font-size:14px;line-height:20px}
.integ .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,max-content));gap:8px 32px;margin-top:12px}
.integ .meta div span{display:block}
.integ .meta .mono{font-size:13px}
.etiqueta{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--linha);padding:2px 6px;white-space:nowrap;color:var(--texto-apoio)}
.etiqueta.forte{border-color:var(--linha-forte);color:var(--texto)}
.rot-minis{margin-top:16px}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1px;margin-top:8px}
.mini{background:var(--fundo);padding:12px;min-width:0;outline:1px solid var(--linha)}
.mini.filha{background:var(--fundo-elevado)}
.mini .nome{font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .n{font-family:var(--mono);font-size:12px;color:var(--texto-apoio);margin-top:4px}
/* visão geral: o mapa */
.mapa-rolagem{overflow-x:auto;padding-top:48px}
.mapa{position:relative;display:grid;grid-template-columns:11rem minmax(14rem,1fr) minmax(12rem,1fr) minmax(14rem,1.2fr) 14rem;gap:48px;min-width:1100px;align-items:start}
.mapa .fios{position:absolute;inset:0;pointer-events:none;overflow:visible}
.mapa .fios path{fill:none;stroke:var(--linha);stroke-width:1;transition:stroke .15s,opacity .15s}
.mapa .fios path.aceso{stroke:var(--sinal);stroke-width:1.5}
.mapa.foco .fios path:not(.aceso){opacity:.25}
.coluna{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.col-cab{display:flex;flex-direction:column;border-bottom:1px solid var(--linha-forte);padding-bottom:8px;margin-bottom:8px}
.col-nota{font-size:13px;color:var(--texto-apoio)}
.grupo{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.g-rot{padding:4px 0}
.no{background:var(--fundo);border:1px solid var(--linha);padding:8px 12px;cursor:pointer;transition:opacity .15s,border-color .15s;min-width:0}
.no:hover,.no.aceso{border-color:var(--linha-forte)}
.mapa.foco .no:not(.aceso){opacity:.3}
.no.sistema,.no.automacao{padding:12px}
.no .titulo{font-weight:500;line-height:22px}
.no .n{font-family:var(--mono);font-size:12px;color:var(--texto-apoio);margin-top:2px}
.no.tabela{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.no.tabela .nome{font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.no.tabela .desc{display:block;flex-basis:100%;font-size:12px;line-height:16px;color:var(--texto-apoio)}
.no.tabela.gold{flex-wrap:wrap}
.no.leve{background:var(--fundo-elevado)}
.no.automacao .sai{font-size:12px;line-height:16px;color:var(--texto-apoio);margin-top:6px}
.no.agente{border-left:3px solid var(--sinal)}
details.resto summary{font-size:12px;color:var(--texto-apoio);cursor:pointer;padding:6px 0;font-family:var(--mono)}
details.resto{display:flex;flex-direction:column;gap:4px}
/* automações */
.lista-automacoes{display:flex;flex-direction:column;gap:24px;padding-top:48px}
.auto{border:1px solid var(--linha-forte);padding:24px}
.auto .cab-i{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:start}
.auto .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,max-content));gap:12px 32px;margin-top:16px}
.auto .meta>div>span:first-child{display:block}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chips .etiqueta{text-transform:none;letter-spacing:0}
.registro{border-top:1px solid var(--linha);margin-top:16px;padding-top:16px}
.rnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,max-content));gap:8px 32px}
.rnums div span{display:block}
.rnums .mono{font-size:14px}
details.ultimas{margin-top:12px}
details.ultimas summary{cursor:pointer;font-size:13px;color:var(--texto-apoio);font-family:var(--mono)}
details.ultimas td,details.ultimas th{font-size:13px;padding:8px 12px 8px 0}
/* configuração das automações */
.config{border-top:1px solid var(--linha);margin-top:16px;padding-top:16px}
.cab-c{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:12px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:12px 24px}
.campos label,.texto label{display:flex;flex-direction:column;gap:4px;min-width:0}
.campos label.larga{grid-column:1/-1}
.campos input,.campos select,.campos textarea,.texto input,.texto textarea,.tabela input,.tabela select{font:inherit;color:inherit;background:var(--fundo-elevado);border:1px solid var(--linha);padding:8px 12px;min-height:40px;width:100%;transition:border-color .2s}
.tabela input,.tabela select{min-height:36px;padding:6px 10px;font-size:14px}
textarea{resize:vertical;line-height:22px}
.salvando{border-color:var(--texto-apoio)!important}
.salvo{border-color:var(--sinal)!important}
.interruptor{display:inline-flex;align-items:center;width:44px;height:24px;padding:2px;border:1px solid var(--linha-forte);background:transparent;cursor:pointer;transition:background .2s}
.interruptor i{display:block;width:18px;height:18px;background:var(--texto);transition:transform .2s}
.interruptor[aria-checked="true"]{background:var(--texto)}
.interruptor[aria-checked="true"] i{background:var(--sinal);transform:translateX(20px)}
.interruptor.salvando{opacity:.5}
.etiqueta.viva{border-color:var(--sinal);color:var(--sinal)}
.textos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:16px 32px;margin-top:16px}
.texto{display:flex;flex-direction:column;gap:8px;border:1px solid var(--linha);padding:16px}
.numero .valor.data{font-size:32px;line-height:52px}