/* ============================================================
   Painel Mavie — visual "Nebula"
   Escuro, calmo e denso. Feito para ler número e decidir.
   Cor só onde decide. Sem gradiente chamativo, sem emoji.
   ============================================================ */
:root{
  color-scheme: dark;
  --bg:#111826; --s1:#1a2232; --s2:#1e2737; --s3:#263044;
  --line:rgba(148,163,184,.10); --line2:rgba(148,163,184,.18);
  --t1:#e9eef7; --t2:#9aa6ba; --t3:#909db3;   /* 4,50:1 no pior fundo (--s3) — AA */
  --acento:#5f97f7; --acento-bg:rgba(95,151,247,.14);
  --up:#2bc55e; --down:#f87171;

  /* status do criativo — a única paleta que colore a página */
  --escalar:#34d399; --estavel:#60a5fa; --ajustar:#fbbf24;
  --aguardar:#a1a1aa; --pausar:#f87171; --fora:#858591;  /* 4,52:1 no pior fundo — AA */

  --r:16px; --r2:12px; --r3:10px; --r4:7px;

  /* escala de espaçamento — múltiplos de 4, para o ritmo não ser improviso */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;

  /* escala tipográfica — sete tamanhos, nenhum avulso */
  --f0:14px;    /* corpo base do painel */
  --f1:11.5px;  /* micro: unidade, legenda de eixo */
  --f2:12.5px;  /* rótulo, texto de apoio */
  --f3:13.5px;  /* corpo denso: tabela, lista */
  --f4:15px;    /* corpo e título de cartão */
  --f5:19px;    /* número pequeno */
  --f6:26px;    /* manchete */
  --f7:32px;    /* número de KPI */
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --num:var(--sans);
  --sb:232px;
  --t:.45s cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--t1);
  font:var(--f0)/1.5 var(--sans);
  font-feature-settings:"tnum","cv11";
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(139,156,255,.18);
}
/* so no mouse: evita matar o "puxar para atualizar" no celular */
@media(pointer:fine){html{overscroll-behavior:none}}
/* auroras — mudam de leve conforme a conta selecionada */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:520px;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 380px at 18% -10%, var(--aurora1,rgba(139,156,255,.16)), transparent 70%),
    radial-gradient(700px 320px at 85% -20%, var(--aurora2,rgba(52,211,153,.07)), transparent 70%);
  transition:background .6s ease;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p,.ajuda,.explica,.vazio,.acoes .txt,.porque{text-wrap:pretty}
.n{font-family:var(--num);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* ---------------- layout ---------------- */
.app{display:flex;min-height:100vh;position:relative;z-index:1}
.sidebar{
  width:var(--sb);flex:0 0 var(--sb);position:sticky;top:0;height:100vh;
  background:rgba(13,17,25,.82);border-right:1px solid var(--line);
  display:flex;flex-direction:column;backdrop-filter:blur(14px);z-index:30;
}
.brand{padding:20px 18px 16px;border-bottom:1px solid var(--line)}
.brand .mark{display:flex;align-items:center;gap:11px;font:600 var(--f5) var(--num);letter-spacing:-.02em}
.orb{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(from 210deg,var(--acento),#34d399,#60a5fa,var(--acento));
  box-shadow:0 0 22px rgba(139,156,255,.30);
}
.orb::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--bg)}
.brand small{display:block;margin-top:6px;color:var(--t3);font-size:var(--f2)}
.nav{padding:12px 10px;flex:1;overflow-y:auto;overscroll-behavior:contain}
.nav .grupo{padding:14px 9px 6px;font-size:var(--f2);color:var(--t3);font-weight:600}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r3);
  color:var(--t2);font-size:var(--f4);margin-bottom:2px;transition:background .14s,color .14s;position:relative;
}
.nav a:hover{background:var(--s2);color:var(--t1)}
.nav a.on{background:var(--s3);color:var(--t1);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.nav a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
  border-radius:2px;background:var(--acento)}
.nav a .ico{width:16px;text-align:center;opacity:.7;font-size:var(--f4)}
.nav a .tag{margin-left:auto;font:600 var(--f1)/1 var(--num);padding:3px 7px;border-radius:20px;
  background:rgba(248,113,113,.16);color:var(--down)}
.nav a .tag.calmo{background:var(--s3);color:var(--t3)}
.rodape-nav{padding:13px;border-top:1px solid var(--line);font-size:var(--f2);color:var(--t3)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.conteudo{padding:22px 28px 48px;max-width:1440px;width:100%;margin:0 auto}

/* ---------------- topo ---------------- */
.topo{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.topo .titulo h1{font:600 var(--f5) var(--num);letter-spacing:-.02em}
.topo .titulo .sub{color:var(--t3);font-size:var(--f2);margin-top:3px}
.topo .dir{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.segmentado{display:flex;gap:4px;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r2);padding:4px;flex-wrap:wrap}
.segmentado a,.segmentado button{
  display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:9px;border:0;
  background:transparent;color:var(--t2);cursor:pointer;text-align:left;font:inherit;
}
.segmentado .nm{display:block;font-weight:600;font-size:var(--f3);color:var(--t1);line-height:1.25}
.segmentado .sb{display:block;font-size:var(--f1);color:var(--t3);margin-top:2px;line-height:1.2}
.segmentado .on{background:var(--s3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 18px rgba(0,0,0,.35)}
.segmentado .bola{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--t3)}

.segmentado.periodo a{padding:5px 11px;font:500 var(--f2) var(--sans);color:var(--t2)}
.segmentado.periodo a.on{background:var(--s3);color:var(--t1);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;
  background:var(--s1);border:1px solid var(--line);font-size:var(--f2);color:var(--t2)}
.chip b{color:var(--t1);font-weight:500}
.chip.alerta{border-color:rgba(248,113,113,.3)} .chip.alerta b{color:var(--down)}

/* ---------------- cartão ---------------- */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent),var(--s1);
  border:1px solid var(--line);border-radius:var(--r);position:relative;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);pointer-events:none}
.card>header{display:flex;align-items:baseline;gap:var(--e3);
  padding:var(--e4) var(--e5) 0;flex-wrap:wrap}
.card>header h3{font:600 var(--f4) var(--sans);letter-spacing:-.015em}
.card>header .sub{margin-left:auto;font-size:var(--f2);color:var(--t3)}
.card>.corpo{padding:var(--e4) var(--e5) var(--e5)}
.card>header + .corpo{padding-top:var(--e3)}
.secao{margin:var(--e6) 0 var(--e3);display:flex;align-items:baseline;
  gap:var(--e3);flex-wrap:wrap;position:relative;padding-top:var(--e3)}
.secao::before{content:"";position:absolute;top:0;left:0;width:28px;height:2px;
  border-radius:2px;background:var(--acento);opacity:.65}
.secao h2{font:600 var(--f4) var(--sans);letter-spacing:-.015em}
.secao .sub{color:var(--t3);font-size:var(--f2)}
.secao + .card,.secao + .duplo,.secao + .hero{margin-top:0}
.secao .dir{margin-left:auto;display:flex;gap:8px;align-items:center}
.ajuda{color:var(--t3);font-size:var(--f2);line-height:1.55;margin:0}
.rotulo{font-size:var(--f2);color:var(--t3);font-weight:500}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.hero{display:grid;grid-template-columns:5fr 7fr;gap:16px}
.duplo{display:grid;grid-template-columns:7fr 5fr;gap:16px;align-items:start}

/* ---------------- decisão ---------------- */
.decisao{position:relative;overflow:hidden}
.decisao::after{
  content:"";position:absolute;top:-40px;right:-40px;width:240px;height:240px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--cor,var(--acento)) 0%,transparent 70%);opacity:.14;
}
.selo{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:20px;
  font:600 var(--f2) var(--sans);text-transform:uppercase;letter-spacing:.06em;
  color:var(--cor,var(--acento));background:color-mix(in srgb,var(--cor,var(--acento)) 14%,transparent);}
.selo .bola{width:7px;height:7px;border-radius:50%;background:var(--cor,var(--acento));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cor,var(--acento)) 22%,transparent)}
.manchete{font:600 var(--f6)/1.18 var(--num);letter-spacing:-.02em;margin:14px 0 4px}
.manchete em{font-style:normal;color:var(--cor,var(--acento))}
.acoes{margin:14px 0 0;padding:0;list-style:none}
.acoes li{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);align-items:flex-start}
.acoes li:first-child{border-top:0;padding-top:4px}
.acoes .num{width:24px;height:24px;border-radius:var(--r4);background:var(--s3);flex:0 0 auto;
  font:600 var(--f2)/24px var(--num);text-align:center;color:var(--t2)}
.acoes .txt{font-size:var(--f4);color:var(--t2);line-height:1.5}
.acoes .txt b{color:var(--t1);font-weight:600}
.nota{margin-top:14px;font-size:var(--f2);color:var(--t3);line-height:1.5}

/* ---------------- KPI ---------------- */
.kpi{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.kpi .cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kpi .lbl{font-size:var(--f2);color:var(--t2)}
.kpi .var{margin-left:auto;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;
  border-radius:20px;font:600 var(--f2) var(--num);background:rgba(148,163,184,.12);color:var(--t3)}
.kpi .var.bom{background:rgba(52,211,153,.12);color:var(--up)}
.kpi .var.ruim{background:rgba(248,113,113,.12);color:var(--down)}
.kpi .v{font:600 var(--f7)/1.05 var(--num);letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}
.kpi .comp{margin-top:12px}
.kpi .comp .l{display:flex;justify-content:space-between;font-size:var(--f1);color:var(--t3);margin-bottom:4px}
.kpi .barra{height:5px;background:rgba(148,163,184,.10);border-radius:3px;margin-bottom:4px}
.kpi .barra i{display:block;height:100%;border-radius:3px;background:var(--acento)}
.kpi .barra.ant i{background:var(--t3)}

/* ---------------- distribuição ---------------- */
.dist{display:flex;gap:3px;height:44px}
.dist .seg{border-radius:6px;display:flex;align-items:center;justify-content:center;
  font:600 var(--f3) var(--num);color:var(--bg);cursor:pointer;
  transition:width .7s cubic-bezier(.2,.8,.2,1),opacity .25s;min-width:26px}
.dist .seg:hover{filter:brightness(1.08)}
.legenda{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.legenda .it{display:flex;align-items:flex-start;gap:8px;cursor:pointer;
  transition:opacity .25s;border-radius:var(--r4);margin:-4px -6px;padding:4px 6px}
.legenda .it:hover{background:rgba(148,163,184,.07)}
.legenda .it:hover .nm{color:var(--t1)}
.legenda .q{width:10px;height:10px;border-radius:3px;margin-top:4px;flex:0 0 auto}
.legenda .nm{font:600 var(--f3) var(--sans)}
.legenda .vl{font-size:var(--f2);color:var(--t3);margin-top:2px}
.apagado{opacity:.22}

/* ---------------- mapa ---------------- */
.mapa svg{display:block;width:100%;height:auto}
.mapa .bolha{cursor:pointer;transition:opacity .25s}
.mapa .bolha circle{transition:stroke-width .15s,fill-opacity .15s}
.mapa .bolha:hover circle{fill-opacity:.4;stroke-width:2.5}
.mapa .quadrante{font:600 var(--f1) var(--sans);fill:var(--t3)}
.mapa .eixo{font-size:var(--f1);fill:var(--t3)}
.mapa .rot{font-size:var(--f1);font-weight:500;fill:var(--t1);paint-order:stroke;
  stroke:var(--bg);stroke-width:4px;pointer-events:none}
#tooltip{position:fixed;z-index:200;pointer-events:none;display:none;
  background:rgba(18,23,36,.96);border:1px solid var(--line2);border-radius:var(--r2);
  padding:11px 13px;box-shadow:0 12px 32px rgba(0,0,0,.5);font-size:var(--f2);max-width:260px}
#tooltip .tt-nm{font:600 var(--f3) var(--sans);margin-bottom:6px}
#tooltip .tt-l{display:flex;justify-content:space-between;gap:16px;color:var(--t3);padding:2px 0}
#tooltip .tt-l b{color:var(--t1);font-family:var(--num);font-weight:600}

/* ---------------- detalhe ---------------- */
.detalhe{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;
  overscroll-behavior:contain}
.detalhe h3{font:600 var(--f6) var(--num);letter-spacing:-.02em}
.porque{background:var(--s2);border-radius:var(--r2);border-left:3px solid var(--cor,var(--acento));
  padding:12px 14px;font-size:var(--f3);color:var(--t2);line-height:1.55;margin-top:12px}
.avisos{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.18);
  border-radius:var(--r2);padding:11px 13px;margin-top:10px;font-size:var(--f2);color:#e8c07a;line-height:1.55}
.avisos div+div{margin-top:6px}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:var(--r2);overflow:hidden;margin-top:14px}
.numeros .c{background:var(--s1);padding:11px 12px}
.numeros .c .l{font-size:var(--f1);color:var(--t3)}
.numeros .c .v{font:600 var(--f5) var(--num);letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.porpub{margin-top:14px}
.porpub .l{display:flex;justify-content:space-between;font-size:var(--f2);margin-bottom:5px}
.porpub .l b{font-family:var(--num);font-weight:600}
.porpub .b{height:6px;background:rgba(148,163,184,.10);border-radius:4px;margin-bottom:11px}
.porpub .b i{display:block;height:100%;border-radius:4px;background:var(--acento)}
.passos{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.passo{background:var(--s2);border-radius:var(--r2);padding:11px 13px;display:flex;
  align-items:center;gap:11px;font-size:var(--f3);color:var(--t2)}
.passo .et{margin-left:auto;padding:3px 9px;border-radius:20px;font:600 var(--f2) var(--num);
  background:var(--acento-bg);color:var(--acento);white-space:nowrap}
.passo .et.verde{background:rgba(52,211,153,.14);color:var(--up)}
.vazio{padding:var(--e7) var(--e5);text-align:center;color:var(--t3);
  font-size:var(--f3);line-height:1.6}
.vazio strong{display:block;color:var(--t2);font-weight:600;margin-bottom:var(--e2)}

/* ---------------- tabela ---------------- */
.tabela{max-height:640px;overflow:auto;overscroll-behavior:contain}
.tab{width:100%;border-collapse:collapse;font-size:var(--f3)}
.tab thead th{position:sticky;top:0;z-index:2;background:var(--s1);
  text-align:left;padding:var(--e3) var(--e4);font:500 var(--f2) var(--sans);color:var(--t3);
  border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
.tab thead th:hover{color:var(--t2)}
.tab thead th.r{text-align:right}
.tab thead th .ord{opacity:.5;font-size:var(--f1);margin-left:3px}
.tab td{padding:var(--e3) var(--e4);border-bottom:1px solid rgba(148,163,184,.055);vertical-align:middle}
.tab tbody tr{cursor:pointer;scroll-margin-top:44px}
.tab tbody tr:hover{background:rgba(148,163,184,.04)}
.tab tbody tr.sel{background:var(--acento-bg)}
.tab tbody tr.sel>td:first-child{box-shadow:inset 2px 0 0 var(--acento)}
.tab .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tab .c{text-align:center}
.tab .pri{font-weight:600}
.linha-btn{display:block;padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;width:100%}
.linha-btn:hover{color:var(--acento)}
.tab .sb{font-size:var(--f2);color:var(--t3);margin-top:3px;line-height:1.4}
.vol{width:70px;height:6px;background:rgba(148,163,184,.10);border-radius:3px;display:inline-block;vertical-align:middle}
.vol i{display:block;height:100%;border-radius:3px;background:var(--acento)}
.bullet{position:relative;width:70px;height:6px;background:rgba(148,163,184,.10);
  border-radius:3px;display:inline-block;vertical-align:middle}
.bullet i{display:block;height:100%;border-radius:3px}
.bullet u{position:absolute;top:-2px;width:2px;height:10px;background:var(--t2);border-radius:1px}
.tend{font-family:var(--num);font-weight:600;font-size:var(--f2)}
.tend.alta{color:var(--up)} .tend.baixa{color:var(--down)} .tend.estavel{color:var(--t3)}

.busca{position:relative;flex:1;min-width:180px;max-width:280px}
.busca input{width:100%;padding:8px 12px 8px 32px;background:var(--s2);border:1px solid var(--line);
  border-radius:var(--r3);color:var(--t1);font:var(--f3) var(--sans);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23646d82' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:11px center}
.busca input:focus{border-color:var(--line2)}
.abas{display:flex;gap:3px;background:var(--s2);border-radius:var(--r3);padding:3px;flex-wrap:wrap}
.abas button{padding:7px 12px;border:0;background:transparent;color:var(--t3);
  font:500 var(--f3) var(--sans);cursor:pointer;border-radius:8px;white-space:nowrap}
.abas button:hover{color:var(--t2)}
.abas button.on{background:var(--s3);color:var(--t1);font-weight:600}
.regra{font-size:var(--f2);color:var(--t3);margin:10px 0 0}
.mais{display:block;width:100%;padding:11px;border:0;border-top:1px solid var(--line);
  background:transparent;color:var(--t2);font:500 var(--f3) var(--sans);cursor:pointer}
.mais:hover{background:rgba(148,163,184,.04);color:var(--t1)}
.sum-mini{cursor:pointer;color:var(--t3);font-size:var(--f2);padding:var(--e2) 0}
.sum-mini:hover{color:var(--t2)}

/* ---------------- pílulas e botões ---------------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:var(--f2);font-weight:500;background:var(--s3);color:var(--t2);white-space:nowrap}
.pill.mono{font-family:var(--mono);font-size:var(--f1)}
.pill.acento{background:var(--acento-bg);color:var(--acento)}
.pill.ok{background:rgba(52,211,153,.12);color:var(--up)}
.pill.bad{background:rgba(248,113,113,.12);color:var(--down)}
.pill.warn{background:rgba(251,191,36,.12);color:#fbbf24}
.pill.ghost{background:transparent;border:1px solid var(--line)}
.ponto{width:7px;height:7px;border-radius:50%;background:var(--t3);flex:0 0 auto;display:inline-block}
.ponto.aviso-ponto{background:var(--ajustar)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r3);
  border:1px solid var(--line);background:var(--s2);color:var(--t1);
  font:500 var(--f3) var(--sans);cursor:pointer;
  transition:background .14s,border-color .14s,filter .14s}
.btn:hover{background:var(--s3)}
.btn.pri{background:var(--acento);color:#0a0d16;border-color:transparent;font-weight:600}
.btn.pri:hover{filter:brightness(1.07)}
.btn.ok{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.3);color:var(--up)}
.btn.bad{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3);color:var(--down)}
.btn.sm{padding:6px 10px;font-size:var(--f2)}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- formulários ---------------- */
.campo{display:block;margin-bottom:14px}
.campo .nm{display:flex;align-items:center;gap:8px;font-size:var(--f3);font-weight:600;
  margin-bottom:5px;flex-wrap:wrap}
.campo .dc{display:block;font-size:var(--f2);color:var(--t3);margin-bottom:7px;line-height:1.45}
input[type=text],input[type=password],input[type=search],textarea,select{
  width:100%;background:var(--s2);border:1px solid var(--line);border-radius:var(--r3);
  color:var(--t1);padding:9px 12px;font:var(--f3) var(--sans)}
input:focus,textarea:focus,select:focus{border-color:var(--line2)}
textarea{min-height:92px;resize:vertical;line-height:1.55}
input[type=search]{appearance:none;-webkit-appearance:none}
input[type=search]::-webkit-search-cancel-button{filter:invert(.7)}
option{background:var(--s2);color:var(--t1)}
.switch{display:flex;gap:4px;background:var(--s2);border-radius:var(--r3);padding:3px}
.switch button{flex:1;padding:7px 10px;border-radius:8px;border:0;background:transparent;
  color:var(--t3);font:500 var(--f2) var(--sans);cursor:pointer;white-space:nowrap}
.switch button.on{background:var(--s3);color:var(--t1);font-weight:600}

/* ---------------- conversa / fila ---------------- */
.item{border:1px solid var(--line);border-radius:var(--r);background:var(--s1);
  margin-bottom:12px;overflow:hidden}
.item>header{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.item>.corpo{padding:14px 16px}
.item.alta{border-left:2px solid var(--down)}
.item.normal{border-left:2px solid var(--acento)}
.item.baixa{border-left:2px solid var(--t3)}
.quem{font-weight:600;font-size:var(--f3)}
.arroba{color:var(--t3);font-size:var(--f2);font-family:var(--mono)}
.fala{background:var(--s2);border-radius:var(--r2);padding:11px 13px;font-size:var(--f3);line-height:1.55}
.fala+.fala{margin-top:7px}
.fala.minha{background:var(--acento-bg)}
.fala .de{font-size:var(--f1);color:var(--t3);margin-bottom:5px}
.rascunho{margin-top:12px;background:var(--s2);border-radius:var(--r2);
  border-left:3px solid var(--acento);padding:13px}
.rascunho .cab{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.rascunho textarea{background:var(--bg);min-height:78px}
.confianca{display:flex;align-items:center;gap:7px;font-size:var(--f2);color:var(--t2)}
.confianca .b{width:56px;height:5px;background:rgba(148,163,184,.12);border-radius:3px}
.confianca .b i{display:block;height:100%;border-radius:3px;background:var(--acento)}

/* ---------------- passos do guia ---------------- */
ol.passos-guia{margin:0;padding:0;list-style:none;counter-reset:p}
ol.passos-guia li{counter-increment:p;position:relative;padding:0 0 13px 34px;font-size:var(--f3);
  color:var(--t2);line-height:1.55;border-left:1px solid var(--line);margin-left:11px}
ol.passos-guia li:last-child{border-left-color:transparent;padding-bottom:0}
ol.passos-guia li::before{content:counter(p);position:absolute;left:-11.5px;top:-1px;
  width:22px;height:22px;border-radius:50%;background:var(--s3);border:1px solid var(--line);
  color:var(--acento);font:600 var(--f1)/20px var(--num);text-align:center}

/* ---------------- rodapé ---------------- */
.rodape{margin-top:32px}
.rodape .lista{margin:10px 0 0;padding:0;list-style:none;font-size:var(--f2);color:var(--t2)}
.rodape .lista li{padding:6px 0;border-top:1px solid var(--line);line-height:1.5}
.rodape .lista li:first-child{border-top:0}
.anel{display:flex;align-items:center;gap:16px}
.anel svg{flex:0 0 auto}
.anel .v{font:600 var(--f6) var(--num);letter-spacing:-.02em}
.fim{text-align:center;font-size:var(--f2);color:var(--t3);margin-top:22px}

/* ---------------- avisos ---------------- */
.faixa{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r2);
  background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.18);
  color:#e8c07a;font-size:var(--f3);margin-bottom:18px;line-height:1.5}
.faixa.ac{background:var(--acento-bg);border-color:rgba(139,156,255,.2);color:var(--acento)}
.faixa .dir{margin-left:auto;display:flex;gap:8px}
.explica{background:var(--s2);border-radius:var(--r2);padding:12px 14px;
  color:var(--t2);font-size:var(--f2);line-height:1.55}
.explica b{color:var(--t1);font-weight:600}
.aviso{margin-top:11px;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.18);
  border-radius:var(--r2);padding:11px 13px;font-size:var(--f2);color:#e8c07a;line-height:1.55}
#toast{position:fixed;z-index:300;display:flex;flex-direction:column;gap:9px;
  right:calc(20px + env(safe-area-inset-right));
  bottom:calc(20px + env(safe-area-inset-bottom))}
#toast .t{background:var(--s3);border:1px solid var(--line2);border-radius:var(--r2);
  padding:11px 15px;font-size:var(--f3);box-shadow:0 12px 32px rgba(0,0,0,.5);max-width:380px}
#toast .t.ok{border-color:rgba(52,211,153,.35);color:var(--up)}
#toast .t.bad{border-color:rgba(248,113,113,.35);color:var(--down)}
.carregando{opacity:.5;pointer-events:none}
.rolar{overflow-x:auto}

/* ---------------- leitura de desempenho ----------------
   Substitui os style="color:var(--ok|--warn|--bad)" dos templates,
   que apontavam para tokens do CSS antigo e nao pintavam nada. */
.bom{color:var(--up)} .medio{color:var(--ajustar)} .ruim{color:var(--down)}
.neutro{color:var(--t3)}

/* ---------------- utilitários ---------------- */
.flex{display:flex;align-items:center}
.flex-top{display:flex;align-items:flex-start}
.gap1{gap:var(--e1)} .gap2{gap:var(--e2)} .gap3{gap:var(--e3)} .gap4{gap:var(--e4)}
.wrap{flex-wrap:wrap}
.dir-auto{margin-left:auto}
.m0{margin:0} .mt1{margin-top:var(--e1)} .mt2{margin-top:var(--e2)}
.mt3{margin-top:var(--e3)} .mt4{margin-top:var(--e4)} .mt5{margin-top:var(--e5)}
.mb2{margin-bottom:var(--e2)} .mb3{margin-bottom:var(--e3)} .mb4{margin-bottom:var(--e4)}
.centro{text-align:center} .direita{text-align:right}
.t2{color:var(--t2)} .t3{color:var(--t3)}
.f1{font-size:var(--f1)} .f2{font-size:var(--f2)} .f3{font-size:var(--f3)}
.f4{font-size:var(--f4)} .f5{font-size:var(--f5)}
.largo{width:100%} .justificar{justify-content:center}
.auto{width:auto} .oculto{display:none}
.cel-limpa{padding:var(--e1) 0;border:0}
.limite-txt{max-width:200px}

/* ---------------- entrada ---------------- */
.sobe{animation:sobe var(--t) both}
@keyframes sobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------- pular para o conteúdo ---------------- */
.pular{position:fixed;top:-100px;left:14px;z-index:200;padding:11px 16px;
  background:var(--acento);color:#0a0d16;border-radius:var(--r3);
  font:600 var(--f3) var(--sans);transition:top .15s}
.pular:focus{top:14px}
.conteudo:focus{outline:none}

/* ---------------- foco ---------------- */
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.tab tbody tr:focus-within{background:var(--acento-bg)}
.bolha:focus-visible circle{stroke-width:3}
.dist .seg:focus-visible{outline-offset:3px}

/* ---------------- login ---------------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;z-index:1}
.login .box{width:100%;max-width:370px}

/* ---------------- responsivo ---------------- */
@media(max-width:1180px){
  .hero,.duplo{grid-template-columns:1fr}
  .detalhe{position:static;max-height:none}
  .g6{grid-template-columns:repeat(3,1fr)}
  .g5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .g6,.g5,.g4,.g3{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .rodape .grid{grid-template-columns:1fr}
  .numeros{grid-template-columns:repeat(2,1fr)}
}
/* menu do mobile — só aparece quando a barra lateral se esconde */
.menu-btn{display:none;position:fixed;z-index:60;
  left:calc(14px + env(safe-area-inset-left));
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);
  background:var(--s3);color:var(--t1);font-size:var(--f5);cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
.veu{display:none;position:fixed;inset:0;z-index:28;border:0;padding:0;
  background:rgba(7,9,15,.6);cursor:pointer}
.veu.on{display:block}

/* tablet: a barra lateral virava 30% da tela e espremia o conteudo */
@media(max-width:900px){
  .menu-btn{display:block}
  .sidebar{position:fixed;left:-100%;transition:left .25s;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .sidebar.aberta{left:0}
  .conteudo{padding:20px 22px 44px}
}
@media(max-width:560px){
  .conteudo{padding:16px}
  .topo .dir{width:100%;align-items:stretch}
  .segmentado{width:100%}
  .segmentado .sb{display:none}
  .segmentado.periodo a{padding:5px 11px;font:500 var(--f2) var(--sans);color:var(--t2)}
.segmentado.periodo a.on{background:var(--s3);color:var(--t1);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.chips{justify-content:flex-start}
  .kpi .v{font-size:var(--f6)}
  .kpi .comp{display:none}
  .dist .seg{font-size:0;min-width:10px}
  .g6,.g5,.g4,.g3,.g2{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   Componentes das demais telas, redesenhados nos tokens Nebula.
   Mantém os nomes de classe antigos para não reescrever 6 templates.
   ============================================================ */

/* --- pílulas e pontos legados --- */
.pill.ac,.pill.ac2,.pill.marca{background:var(--acento-bg);color:var(--acento)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--t3);flex:0 0 auto;display:inline-block}
.dot.ok{background:var(--up)} .dot.warn{background:#fbbf24} .dot.bad{background:var(--down)}
.dot.pulsa{animation:pulsa 2s infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
.forte,.tab .forte{font-weight:600}
.secao .linha{flex:1;height:1px;background:var(--line)}
.card.plano{background:var(--s1)}
.vazio .ic{font-size:var(--f6);opacity:.35;margin-bottom:var(--e3)}
.spark{display:block;width:100%;height:auto;overflow:visible}

/* --- KPI legado (.t / .v / .d) --- */
.kpi .t{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--f2);
  color:var(--t2);line-height:1.35;text-transform:none;letter-spacing:0;font-weight:400}
.kpi .d{margin-top:7px;font-size:var(--f2);color:var(--t3);line-height:1.45}
.kpi .v.sm{font-size:var(--f6)}
.kpi.ok .v{color:var(--up)} .kpi.bad .v{color:var(--down)} .kpi.warn .v{color:#fbbf24}
.kpi.marca .v{color:var(--acento)}

/* --- barra genérica --- */
.barra{height:5px;border-radius:3px;background:rgba(148,163,184,.10);overflow:hidden}
.barra>i{display:block;height:100%;border-radius:3px;background:var(--acento)}
.barra.ok>i{background:var(--up)} .barra.bad>i{background:var(--down)}
.confianca .barra{width:56px}

/* --- abas em painéis (meta_ads, social, agentes, subir) --- */
.painel-aba{display:none}
.painel-aba.on{display:block}

/* --- árvore conta > produto > criativo --- */
.conta{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;
  background:var(--s1);overflow:hidden}
.conta.restrita{border-color:rgba(248,113,113,.28)}
.conta>summary{padding:15px 18px;cursor:pointer;display:flex;align-items:center;gap:13px;list-style:none}
.conta>summary::-webkit-details-marker{display:none}
.conta>summary:hover{background:rgba(148,163,184,.03)}
.seta{color:var(--t3);transition:transform .18s;font-size:var(--f1)}
details[open]>summary>.seta{transform:rotate(90deg)}
.conta .ident{min-width:0}
.conta .ident .nm{font-weight:600;font-size:var(--f4);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.conta .ident .meta{color:var(--t3);font-size:var(--f1);margin-top:4px;font-family:var(--mono)}
.conta .mini{margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.conta .mini .b{text-align:right}
.conta .mini .b .l{font-size:var(--f1);color:var(--t3)}
.conta .mini .b .v{font:600 var(--f4) var(--num);letter-spacing:-.02em;margin-top:2px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.conta>.interno,.prod>.interno{border-top:1px solid var(--line);padding:0 18px 18px}
.prod>.interno{border-top:0;padding:0 14px 14px}

.prod{border:1px solid var(--line);border-radius:var(--r2);margin-top:12px;background:var(--s2)}
.prod>summary{padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:11px;list-style:none}
.prod>summary::-webkit-details-marker{display:none}
.prod>summary:hover{background:rgba(148,163,184,.03)}
.prod .pnm{font-weight:600;font-size:var(--f3)}
.prod .pmini{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:var(--f2);
  color:var(--t2);flex-wrap:wrap;justify-content:flex-end}
.prod .pmini b{font-family:var(--num);font-weight:600}

.crit{display:grid;grid-template-columns:62px 1fr repeat(5,minmax(62px,auto));gap:12px;
  align-items:center;padding:10px 12px;border-radius:var(--r3);background:var(--s1);
  border:1px solid var(--line);margin-top:8px;font-size:var(--f2)}
.crit .rot{font:600 var(--f2) var(--mono);padding:4px 8px;border-radius:6px;text-align:center;
  background:var(--acento-bg);color:var(--acento)}
.crit.campeao{border-color:rgba(52,211,153,.32);background:rgba(52,211,153,.04)}
.crit.fraco{border-color:rgba(248,113,113,.26);background:rgba(248,113,113,.03)}
.crit.sel{border-color:var(--acento);background:var(--acento-bg)}
.crit[data-status]{transition:opacity .25s,border-color .15s,background .15s}
.crit:hover{border-color:var(--line2);background:var(--s2)}
details.prod.apagado{opacity:.22}
.crit .cel{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-family:var(--num);font-weight:600}
.crit .cel .l{display:block;font:400 var(--f1) var(--sans);color:var(--t3);margin-bottom:2px}
@media(max-width:1100px){.crit{grid-template-columns:56px 1fr;row-gap:8px}.crit .cel{text-align:left}}

/* --- matriz produto x criativo --- */
.matriz{width:100%;border-collapse:separate;border-spacing:4px;font-size:var(--f2)}
.matriz th{padding:7px 9px;color:var(--t3);font:500 var(--f2) var(--sans);text-align:center}
.matriz th.esq{text-align:left}
.matriz td.nome{padding:10px 12px;background:var(--s2);border-radius:var(--r3);min-width:190px}
.matriz td.nome .n{font-weight:600;font-family:var(--sans);letter-spacing:0}
.matriz td.nome .s{color:var(--t3);font-size:var(--f1);margin-top:3px}
.cel-heat{border-radius:var(--r3);padding:9px 6px;text-align:center;background:var(--s2);min-width:76px}
.cel-heat .v{font:600 var(--f4) var(--num);letter-spacing:-.02em}
.cel-heat .s{font-size:var(--f1);color:var(--t3);margin-top:2px}
.cel-heat.vazio{background:transparent;padding:9px 6px;color:var(--t3);font-size:var(--f2)}
.h5{background:rgba(52,211,153,.20)}  .h5 .v{color:#8ff0c0}
.h4{background:rgba(52,211,153,.12)}  .h4 .v{color:var(--up)}
.h3{background:rgba(251,191,36,.12)}  .h3 .v{color:#fbbf24}
.h2{background:rgba(248,113,113,.10)} .h2 .v{color:var(--down)}
.h1{background:rgba(248,113,113,.18)} .h1 .v{color:#ff9dad}

/* --- guia de conexões --- */
ol.passos{margin:0;padding:0;list-style:none;counter-reset:p}
ol.passos li{counter-increment:p;position:relative;padding:0 0 13px 34px;font-size:var(--f3);
  color:var(--t2);line-height:1.55;border-left:1px solid var(--line);margin-left:11px}
ol.passos li:last-child{border-left-color:transparent;padding-bottom:0}
ol.passos li::before{content:counter(p);position:absolute;left:-11.5px;top:-1px;
  width:22px;height:22px;border-radius:50%;background:var(--s3);border:1px solid var(--line);
  color:var(--acento);font:600 var(--f1)/20px var(--num);text-align:center}

/* --- switch com níveis de autonomia --- */
.switch button.on[data-v=auto]{background:rgba(251,191,36,.18);color:#fbbf24}
.switch button.on[data-v=aprovar]{background:rgba(52,211,153,.16);color:var(--up)}
.switch button.on[data-v=desligado]{background:var(--s3);color:var(--t3)}

/* --- tabelas das outras telas não são clicáveis --- */
.painel-aba .tab tbody tr,.conta .tab tbody tr,.prod .tab tbody tr{cursor:default}

/* ============================================================
   Tabela de todas as campanhas (modelo UTMify)
   ============================================================ */
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--e3);align-items:end;margin-bottom:var(--e4)}
.filtros .campo .nm{font-size:var(--f2);font-weight:500;color:var(--t2);margin-bottom:5px}
.filtros input,.filtros select{padding:8px 11px}

/* o interruptor de ligar/pausar */
.chave{width:38px;height:21px;border-radius:20px;border:1px solid var(--line2);
  background:var(--s3);position:relative;cursor:pointer;padding:0;transition:.18s}
.chave i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--t3);transition:.18s}
.chave.liga{background:rgba(139,156,255,.28);border-color:var(--acento)}
.chave.liga i{left:20px;background:var(--acento)}
.chave:disabled{opacity:.5;cursor:wait}

.tab.utm th{font-size:var(--f1);letter-spacing:.02em}
.tab.utm td{padding:10px 12px;font-size:var(--f2);white-space:nowrap}
.tab.utm td .sb{white-space:normal;max-width:280px}
.tab.utm tbody tr{cursor:default}
.tab.utm tfoot td{position:sticky;bottom:0;background:var(--s3);
  border-top:1px solid var(--line2);font-weight:600;padding:12px}
.tab.utm .bom{color:var(--up)} .tab.utm .ruim{color:var(--down)}

/* Campos de app antigo: presentes, mas fora do caminho principal. */
.legado{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.legado>summary{cursor:pointer;list-style:none;color:var(--t3);font-size:var(--f1);
  padding:6px 0;display:flex;align-items:center;gap:8px}
.legado>summary::-webkit-details-marker{display:none}
.legado>summary::before{content:"▸";transition:transform .15s ease;display:inline-block}
.legado[open]>summary::before{transform:rotate(90deg)}
.legado>summary:hover{color:var(--t2)}
.legado>summary:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}

/* vence o display da .campo */
.filtros-loja .campo .par{display:flex;gap:8px}
.filtros-loja .campo .par input{flex:1;min-width:0}
.filtros-loja select,.filtros-loja input[type=date]{width:100%}
.filtros-loja .btn{flex:0 0 auto}

.pilha{display:flex;flex-direction:column;gap:var(--e3)}
.kpi .v.bom{color:var(--up)}
.kpi .v.ruim{color:var(--down)}
.kpi .v.apagado{color:var(--t3)}

.lista-barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lista-barras li{display:grid;grid-template-columns:1fr auto 70px 48px;align-items:center;gap:10px}
.lista-barras .nome{font-size:var(--f1);color:var(--t2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lista-barras .qtd{font-family:var(--mono);font-size:var(--f1);color:var(--t1);
  font-variant-numeric:var(--num)}
.lista-barras .barra-mini{height:6px;border-radius:999px;background:var(--s3);overflow:hidden}
.lista-barras .barra-mini i{display:block;height:100%;border-radius:999px;background:var(--acento)}
.lista-barras .pc{font-family:var(--mono);font-size:var(--f1);color:var(--t2);text-align:right;
  font-variant-numeric:var(--num)}

.rosca-cx{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap}
.rosca{width:148px;height:148px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(var(--fatias))}
.rosca .miolo{position:absolute;inset:26px;border-radius:50%;background:var(--s1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.rosca .miolo .t{font-size:var(--f1);color:var(--t3)}
.rosca .miolo b{font-size:var(--f4);font-variant-numeric:var(--num)}
.rosca-cx .legenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rosca-cx .legenda li{display:flex;align-items:center;gap:8px;font-size:var(--f1);color:var(--t2)}
.rosca-cx .legenda .pt{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

@media (max-width:1100px){
  .filtros-loja .campo{flex:1 1 100%}
  .lista-barras li{grid-template-columns:1fr auto 48px}
  .lista-barras .barra-mini{display:none}
}

/* Endereço público do webhook, na tela de Conexões. */
.url-webhook{margin-top:14px;padding:12px 13px;border:1px solid var(--line);
  border-radius:var(--r2);background:var(--s2)}
.url-webhook code{display:block;word-break:break-all;color:var(--t1);margin-bottom:9px}

/* ==================== Resumo no formato da UTMify ====================
   Grade de 4 colunas, cartão = rótulo pequeno + número grande, e anéis
   no lugar de barras. É o desenho que a UTMify usa, adaptado aos tokens
   do painel para não brigar com o resto das telas.                      */

.ut-painel{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:var(--e4)}
.ut-cab{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin-bottom:14px}
.ut-cab h2{font-size:var(--f4);font-weight:600;margin:0}
.ut-cab-dir{margin-left:auto;display:flex;align-items:center;gap:11px}
.ut-quando{font-size:var(--f2);color:var(--t3)}

.ut-filtros{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:13px;align-items:end}
.ut-filtros label{display:flex;flex-direction:column;gap:6px;min-width:0}
.ut-filtros label>span:first-child{font-size:var(--f2);color:var(--t2)}
.ut-filtros select,.ut-filtros input[type=date]{width:100%;background:var(--s2);
  border:1px solid var(--line2);border-radius:var(--r3);color:var(--t1);
  padding:9px 11px;font-size:var(--f3);font-family:var(--sans)}
.ut-filtros .ut-par{display:flex;gap:7px}
.ut-filtros .ut-par input{min-width:0;flex:1}
.ut-filtros label[hidden]{display:none}
.ut-nota{margin-top:12px;font-size:var(--f2);color:var(--t3)}

.ut-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;
  margin-bottom:var(--e5)}
.ut-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;min-width:0;display:flex;flex-direction:column}
.ut-alto{grid-row:span 3}
.ut-largo{grid-column:span 2}

.ut-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ut-rot{font-size:var(--f2);color:var(--t2);line-height:1.3}
.ut-tag{font-size:10.5px;color:var(--t3);background:var(--s3);
  padding:2px 7px;border-radius:999px;white-space:nowrap}
.ut-i{margin-left:auto;width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line2);color:var(--t3);font-size:10px;font-style:italic;
  display:flex;align-items:center;justify-content:center;cursor:help;line-height:1}
.ut-val{font-size:var(--f6);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:var(--num);line-height:1.15;color:var(--t1)}
.ut-card.verde .ut-rot,.ut-card.verde .ut-val{color:var(--up)}
.ut-card.vermelho .ut-val{color:var(--down)}
.ut-card.apagado .ut-val{color:var(--t3)}

/* anel de percentual: o detalhe que faz a tela parecer a deles */
.ut-anel{width:17px;height:17px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--c) var(--p), var(--s3) 0)}
.ut-anel::after{content:"";display:block;margin:4px;width:9px;height:9px;
  border-radius:50%;background:var(--s1)}

.ut-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ut-lista li{display:grid;grid-template-columns:1fr auto 17px 44px;
  align-items:center;gap:9px}
.ut-lista.compacta li{grid-template-columns:1fr 17px 44px}
.ut-lista .n{font-size:var(--f3);color:var(--t2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ut-lista .q{font-size:var(--f3);color:var(--t1);font-variant-numeric:var(--num)}
.ut-lista .p{font-size:var(--f2);color:var(--t2);text-align:right;
  font-variant-numeric:var(--num)}
.ut-vazio{font-size:var(--f2);color:var(--t3);line-height:1.55;
  display:flex;align-items:center;flex:1;padding:8px 0}

.ut-rosca-cx{display:flex;flex-direction:column;align-items:center;gap:15px;
  flex:1;justify-content:center}
.ut-rosca{width:132px;height:132px;border-radius:50%;position:relative;
  background:conic-gradient(var(--fatias))}
.ut-rosca .miolo{position:absolute;inset:25px;border-radius:50%;background:var(--s1);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.ut-rosca .miolo span{font-size:var(--f2);color:var(--t3)}
.ut-rosca .miolo b{font-size:var(--f5);font-variant-numeric:var(--num)}
.ut-legenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:8px;width:100%}
.ut-legenda li{display:flex;align-items:center;gap:8px;font-size:var(--f2);
  color:var(--t2)}
.ut-legenda li b{margin-left:auto;color:var(--t1);font-variant-numeric:var(--num)}
.ut-legenda i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

@media (max-width:1200px){
  .ut-grade{grid-template-columns:repeat(2,1fr)}
  .ut-alto{grid-row:span 2}
  .ut-largo{grid-column:span 2}
  .ut-filtros{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .ut-grade,.ut-filtros{grid-template-columns:1fr}
  .ut-alto,.ut-largo{grid-row:auto;grid-column:auto}
}