/* ============================================================
   Main Sys (admin.beetheo.com) — F1, painel de leitura.
   Sistema visual aprovado no mockup v4 (03/08/2026): base fria
   quase-preta, mel de marca, três famílias de cor com empregos
   separados (marca / semântica / categórica de gráfico — a
   justificativa vive no SKILL.md da skill, não aqui).
   Arquivo SEPARADO do HTML de propósito: CSP sem 'unsafe-inline'.
   ============================================================ */

@font-face{font-family:'Geist';src:url('fontes/Geist-Variable.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fontes/GeistMono-Variable.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}

:root{
  --fonte:'Geist', system-ui, sans-serif;
  --fonte-mono:'Geist Mono', ui-monospace, monospace;

  --fundo:#0B0E14; --fundo-2:#0E1219; --cartao:#121722; --cartao-alto:#18202D;
  --borda:#1F2836; --borda-forte:#2B3646;
  --texto:#E8ECF2; --texto-2:#98A3B4; --texto-3:#657184;

  /* marca (mel) — única cor de marca/ação; nunca significa estado */
  --marca-clara:#FFE08A; --marca:#FFC53D; --marca-escura:#D9A017; --marca-contraste:#141000;
  --laranja:#FF8A4C;
  /* semânticos — só badge/status; âmbar queimado ≠ mel */
  --ok:#3DD68C; --erro:#FF6369; --alerta:#E0932F; --info:#6AA5FF; --neutro:#7A879B;
  /* categórica de gráfico — sem verde e sem vermelho, de propósito */
  --g1:#FFC53D; --g2:#FF8A4C; --g3:#4FA8A0; --g4:#6E7A8A; --g5:#B9873F;

  /* orçamento de densidade aprovado (1440×900) */
  --gap:16px; --pad:16px;
  --raio:10px; --raio-g:14px;
  --t-valor:28px; --t-titulo:13.5px; --t-rot:13px; --t-corpo:13px; --t-sub:12px; --t-mini:11px;
  --chip:36px;
  --h-m:112px; --h-b:272px; --h-c:252px; --h-d:252px;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fundo);color:var(--texto);font-family:var(--fonte);font-size:var(--t-corpo);line-height:1.45;-webkit-font-smoothing:antialiased}
.mono,.num{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
svg{display:block}
.icone{width:18px;height:18px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.icone-p{width:14px;height:14px}
.truncar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.oculto{display:none !important}

/* ---------- tela de login ---------- */
.tela-login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-cartao{width:100%;max-width:360px;background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-g);box-shadow:var(--sombra);padding:28px;display:flex;flex-direction:column;gap:12px}
.login-cartao h1{margin:6px 0 0;font-size:19px;font-weight:650;letter-spacing:-.02em}
.login-cartao p{margin:0 0 8px;color:var(--texto-3);font-size:var(--t-sub)}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:var(--t-mini);color:var(--texto-2);font-weight:550}
.campo input{height:36px;border-radius:9px;background:var(--fundo);border:1px solid var(--borda);color:var(--texto);padding:0 11px;font:inherit;font-size:var(--t-corpo);outline:none}
.campo input:focus{border-color:var(--borda-forte);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 12%,transparent)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.app[data-recolhida="1"]{grid-template-columns:64px 1fr}
.sidebar{background:var(--fundo-2);border-right:1px solid var(--borda);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.marca{display:flex;align-items:center;gap:10px;padding:0 var(--pad);height:56px;flex:none}
.marca-logo{width:30px;height:30px;flex:none;border-radius:9px;background:linear-gradient(150deg,var(--marca-clara),var(--marca-escura));display:grid;place-items:center;color:#1a1400}
.marca-nome{font-weight:680;letter-spacing:-.01em;font-size:15px;line-height:1.1}
.marca-sub{font-size:9px;color:var(--texto-3);letter-spacing:.1em;text-transform:uppercase}
.app[data-recolhida="1"] .marca-txt{display:none}
.nav{padding:4px 10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
.nav-rotulo{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);padding:12px 8px 5px}
.app[data-recolhida="1"] .nav-rotulo{opacity:0;height:22px;padding:0}
.item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--raio);color:var(--texto-2);position:relative;white-space:nowrap;font-size:var(--t-corpo)}
.item:hover{background:var(--cartao-alto);color:var(--texto)}
.item[aria-current="page"]{background:var(--cartao-alto);color:var(--texto);font-weight:560}
.item[aria-current="page"]::before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--marca)}
.item[aria-current="page"] .icone{color:var(--marca)}
.item .icone{flex:none;width:17px;height:17px}
.item-txt{flex:1;overflow:hidden;text-overflow:ellipsis}
.app[data-recolhida="1"] .item-txt,.app[data-recolhida="1"] .item-pill{display:none}
.app[data-recolhida="1"] .item{justify-content:center;padding:9px}
.app[data-recolhida="1"] .item:hover::after{content:attr(data-titulo);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--cartao-alto);border:1px solid var(--borda-forte);color:var(--texto);padding:5px 9px;border-radius:8px;font-size:var(--t-sub);white-space:nowrap;z-index:60;box-shadow:var(--sombra)}
.item-pill{font-size:10px;padding:0 6px;border-radius:99px;background:var(--cartao-alto);border:1px solid var(--borda-forte);color:var(--texto-3);font-family:var(--fonte-mono);line-height:16px}
.item-pill[data-tom="erro"]{background:color-mix(in srgb,var(--erro) 16%,transparent);border-color:color-mix(in srgb,var(--erro) 35%,transparent);color:var(--erro)}
.rodape-nav{padding:10px;border-top:1px solid var(--borda);flex:none}
.usuario{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--raio);border:1px solid var(--borda)}
.app[data-recolhida="1"] .usuario-txt{display:none}
.avatar{width:26px;height:26px;border-radius:99px;flex:none;display:grid;place-items:center;background:linear-gradient(150deg,var(--marca-clara),var(--marca-escura));color:#1a1400;font-weight:700;font-size:11px}

.topbar{height:56px;display:flex;align-items:center;gap:10px;padding:0 20px;background:var(--fundo-2);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:40}
.btn-icone{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--texto-2);border:1px solid transparent;position:relative;flex:none}
.btn-icone:hover{background:var(--cartao-alto);color:var(--texto);border-color:var(--borda)}
.espaco{flex:1}
.busca{position:relative;width:280px}
.busca input{width:100%;height:34px;border-radius:9px;background:var(--fundo);border:1px solid var(--borda);color:var(--texto);padding:0 12px 0 30px;font:inherit;font-size:var(--t-sub);outline:none}
.busca input::placeholder{color:var(--texto-3)}
.busca input:focus{border-color:var(--borda-forte);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 12%,transparent)}
.busca .lupa{position:absolute;left:9px;top:9px;color:var(--texto-3)}
.busca-resultados{position:absolute;top:40px;left:0;right:0;background:var(--cartao);border:1px solid var(--borda-forte);border-radius:var(--raio-g);box-shadow:0 24px 60px -14px rgba(0,0,0,.8);z-index:70;overflow:hidden;max-height:380px;overflow-y:auto}
.busca-grupo{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);padding:9px var(--pad) 4px}
.ponto{position:absolute;top:3px;right:3px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;background:var(--erro);color:#2a0508;font-size:9px;font-weight:700;display:grid;place-items:center;font-family:var(--fonte-mono);border:2px solid var(--fundo-2)}

.conteudo{padding:14px 20px 20px;max-width:1720px;min-height:calc(100vh - 160px)}

/* ---------- grid 12 colunas, gap único ---------- */
.grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.grade:last-child{margin-bottom:0}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
.h-m{height:var(--h-m)}.h-b{height:var(--h-b)}.h-c{height:var(--h-c)}.h-d{height:var(--h-d)}
.h-bc{height:calc(var(--h-b) + var(--gap) + var(--h-c));grid-row:span 2}

/* ---------- cartão ---------- */
.cartao{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-g);box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.ch{padding:13px var(--pad) 9px;display:flex;align-items:flex-start;gap:9px;flex:none}
.ch-txt{flex:1;min-width:0}
.ch h3{margin:0;font-size:var(--t-titulo);font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch p{margin:2px 0 0;font-size:var(--t-mini);color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-link{font-size:var(--t-mini);color:var(--info);flex:none;padding-top:2px}
.cc{padding:0 var(--pad) 13px;flex:1;min-height:0;overflow:hidden}
.cc-rola{padding:0;flex:1;min-height:0;overflow-y:auto}
.cr{padding:8px var(--pad);border-top:1px solid var(--borda);display:flex;align-items:center;gap:8px;flex:none}
.badge-fase{flex:none;font-size:9px;letter-spacing:.05em;text-transform:uppercase;font-weight:650;padding:2px 7px;border-radius:99px;background:color-mix(in srgb,var(--info) 12%,transparent);border:1px solid color-mix(in srgb,var(--info) 30%,transparent);color:var(--info);white-space:nowrap}
.cartao[data-fase] .cc,.cartao[data-fase] .cc-rola{opacity:.42}

/* ---------- metric card (orçamento fixo) ---------- */
.metrica{padding:var(--pad);display:flex;flex-direction:column}
.m-topo{display:flex;align-items:center;gap:10px;flex:none}
.chip{width:var(--chip);height:var(--chip);border-radius:10px;flex:none;display:grid;place-items:center}
.chip[data-c="marca"]{background:color-mix(in srgb,var(--marca) 15%,transparent);color:var(--marca)}
.chip[data-c="laranja"]{background:color-mix(in srgb,var(--laranja) 15%,transparent);color:var(--laranja)}
.chip[data-c="teal"]{background:color-mix(in srgb,var(--g3) 17%,transparent);color:var(--g3)}
.chip[data-c="ok"]{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.chip[data-c="alerta"]{background:color-mix(in srgb,var(--alerta) 15%,transparent);color:var(--alerta)}
.chip[data-c="info"]{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.chip[data-c="neutro"]{background:color-mix(in srgb,var(--neutro) 15%,transparent);color:var(--neutro)}
.m-rot{font-size:var(--t-rot);color:var(--texto-2);font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-val{font-size:var(--t-valor);font-weight:650;letter-spacing:-.035em;margin-top:auto;line-height:1}
.m-val[data-vazio]{color:var(--texto-3);font-weight:500}
.m-sub{font-size:10.5px;line-height:1.2;color:var(--texto-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.delta{font-family:var(--fonte-mono);font-size:var(--t-mini)}
.delta[data-dir="sobe"]{color:var(--ok)}
.delta[data-dir="desce"]{color:var(--erro)}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:19px;font-size:var(--t-mini);padding:0 8px;border-radius:99px;border:1px solid var(--borda-forte);background:var(--cartao-alto);color:var(--texto-2);white-space:nowrap;flex:none}
.badge::before{content:'';width:5px;height:5px;border-radius:99px;background:var(--neutro);flex:none}
.badge[data-tom="ok"]{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.badge[data-tom="ok"]::before{background:var(--ok)}
.badge[data-tom="erro"]{color:var(--erro);background:color-mix(in srgb,var(--erro) 13%,transparent);border-color:color-mix(in srgb,var(--erro) 30%,transparent)}
.badge[data-tom="erro"]::before{background:var(--erro)}
.badge[data-tom="alerta"]{color:var(--alerta);background:color-mix(in srgb,var(--alerta) 14%,transparent);border-color:color-mix(in srgb,var(--alerta) 32%,transparent)}
.badge[data-tom="alerta"]::before{background:var(--alerta)}
.badge[data-tom="info"]{color:var(--info);background:color-mix(in srgb,var(--info) 13%,transparent);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.badge[data-tom="info"]::before{background:var(--info)}
.badge[data-tom="marca"]{color:var(--marca);background:color-mix(in srgb,var(--marca) 12%,transparent);border-color:color-mix(in srgb,var(--marca) 30%,transparent)}
.badge[data-tom="marca"]::before{background:var(--marca)}
.badge[data-sp]::before{display:none}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 12px;border-radius:9px;border:1px solid var(--borda-forte);background:var(--cartao-alto);color:var(--texto);font-size:var(--t-sub);font-weight:500;white-space:nowrap}
.btn:hover{background:#1F2938;border-color:#364356}
.btn[data-v="primario"]{background:var(--marca);color:var(--marca-contraste);border-color:var(--marca);font-weight:640}
.btn[data-v="primario"]:hover{background:var(--marca-clara)}
.btn[data-v="fantasma"]{background:transparent;border-color:transparent;color:var(--texto-2)}
.btn[data-v="fantasma"]:hover{background:var(--cartao-alto);color:var(--texto)}
.btn[data-v="perigo"]{color:var(--erro);border-color:color-mix(in srgb,var(--erro) 35%,transparent);background:color-mix(in srgb,var(--erro) 10%,transparent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-p{height:26px;padding:0 9px;font-size:var(--t-mini);border-radius:7px}
.chips-filtro{display:flex;gap:8px;margin-bottom:var(--gap);flex-wrap:wrap}

/* ---------- listas ---------- */
.li{display:flex;gap:10px;padding:8px var(--pad);border-bottom:1px solid var(--borda);align-items:center}
.li:last-child{border-bottom:none}
.li:hover{background:var(--cartao-alto)}
.li-hora{font-family:var(--fonte-mono);font-size:10.5px;color:var(--texto-3);flex:none;width:34px}
.ico-mini{width:25px;height:25px;border-radius:7px;flex:none;display:grid;place-items:center}
.ico-mini[data-tom="ok"]{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.ico-mini[data-tom="erro"]{background:color-mix(in srgb,var(--erro) 14%,transparent);color:var(--erro)}
.ico-mini[data-tom="alerta"]{background:color-mix(in srgb,var(--alerta) 14%,transparent);color:var(--alerta)}
.ico-mini[data-tom="info"]{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.ico-mini[data-tom="marca"]{background:color-mix(in srgb,var(--marca) 14%,transparent);color:var(--marca)}
.ico-mini[data-tom="teal"]{background:color-mix(in srgb,var(--g3) 16%,transparent);color:var(--g3)}
.ico-mini[data-tom="neutro"]{background:var(--cartao-alto);color:var(--texto-3)}
.li-txt{flex:1;min-width:0;font-size:var(--t-sub);line-height:1.35}
.li-txt b{font-weight:600}
.li-sub{font-size:10.5px;color:var(--texto-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.li-dir{flex:none;font-size:10.5px;color:var(--texto-3);font-family:var(--fonte-mono)}
.li-notif{padding:13px var(--pad);cursor:pointer}
.li-notif .btn{flex:none}

/* ---------- tabela ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--t-sub)}
thead th{text-align:left;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);font-weight:500;padding:0 12px 8px;border-bottom:1px solid var(--borda);white-space:nowrap;position:sticky;top:0;background:var(--cartao)}
tbody td{padding:8px 12px;border-bottom:1px solid var(--borda);vertical-align:middle;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--cartao-alto)}
.forte{font-weight:560}
.fraca{color:var(--texto-3);font-size:var(--t-mini)}

/* ---------- páginas ---------- */
.cab-pag{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.cab-pag h1{margin:0;font-size:21px;font-weight:640;letter-spacing:-.025em;display:flex;align-items:center;gap:10px}
.cab-pag p{margin:2px 0 0;color:var(--texto-3);font-size:var(--t-sub)}
.cab-acoes{margin-left:auto;display:flex;gap:8px;align-items:center}
.saudacao{margin-bottom:12px}
.saudacao h1{margin:0;font-size:24px;font-weight:650;letter-spacing:-.03em}
.saudacao .d{color:var(--texto-2);font-size:var(--t-sub);margin-top:3px}
.saudacao .f{color:var(--texto-3);font-size:var(--t-sub);font-style:italic;margin-top:3px}
.abas{display:flex;gap:2px;border-bottom:1px solid var(--borda);margin-bottom:var(--gap);overflow-x:auto}
.aba{padding:8px 13px;font-size:var(--t-sub);color:var(--texto-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.aba:hover{color:var(--texto-2)}
.aba[aria-selected="true"]{color:var(--texto);border-bottom-color:var(--marca);font-weight:550}

/* ---------- estados obrigatórios ---------- */
.estado{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:14px;color:var(--texto-3)}
.estado .ico-caixa{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cartao-alto);border:1px solid var(--borda);color:var(--texto-3)}
.estado-tit{color:var(--texto-2);font-size:var(--t-sub);font-weight:560}
.estado-txt{font-size:var(--t-mini);max-width:280px;line-height:1.5}
.aviso{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:var(--raio);font-size:var(--t-sub);background:color-mix(in srgb,var(--alerta) 10%,transparent);border:1px solid color-mix(in srgb,var(--alerta) 28%,transparent);color:var(--alerta)}
.aviso[data-tom="erro"]{background:color-mix(in srgb,var(--erro) 10%,transparent);border-color:color-mix(in srgb,var(--erro) 28%,transparent);color:var(--erro)}
.aviso[data-tom="info"]{background:color-mix(in srgb,var(--info) 9%,transparent);border-color:color-mix(in srgb,var(--info) 26%,transparent);color:var(--info)}
.aviso .icone{flex:none;margin-top:1px}
.aviso b{display:block;margin-bottom:2px}
.aviso span{color:var(--texto-2);display:block;font-size:var(--t-mini);line-height:1.45}
.esqueleto{background:linear-gradient(90deg,var(--cartao-alto) 25%,#212B3A 37%,var(--cartao-alto) 63%);background-size:400% 100%;animation:brilho 1.4s ease infinite;border-radius:6px;height:11px}
@keyframes brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- dropdowns ---------- */
.painel-flutuante{position:absolute;top:46px;right:0;width:390px;background:var(--cartao);border:1px solid var(--borda-forte);border-radius:var(--raio-g);box-shadow:0 24px 60px -14px rgba(0,0,0,.8);z-index:50;overflow:hidden}
.pf-cab{padding:11px var(--pad);border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:9px}
.pf-lista{max-height:300px;overflow-y:auto}
.pf-rodape{padding:8px var(--pad);border-top:1px solid var(--borda);text-align:center}
.menu{position:absolute;top:46px;right:0;width:230px;background:var(--cartao);border:1px solid var(--borda-forte);border-radius:var(--raio-g);box-shadow:0 24px 60px -14px rgba(0,0,0,.8);z-index:50;overflow:hidden;padding:6px}
.menu-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:var(--t-sub);color:var(--texto-2)}
.menu-item:hover{background:var(--cartao-alto);color:var(--texto)}
.menu-sep{height:1px;background:var(--borda);margin:5px 4px}
.menu-cab{padding:8px 10px 4px;font-size:var(--t-mini);color:var(--texto-3)}

/* ---------- dialog ---------- */
dialog{background:var(--cartao);color:var(--texto);border:1px solid var(--borda-forte);border-radius:var(--raio-g);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);padding:0;max-width:420px;width:calc(100% - 40px)}
dialog::backdrop{background:rgba(4,6,10,.7)}
.dlg-cab{padding:15px var(--pad) 10px;font-size:15px;font-weight:640;letter-spacing:-.01em}
.dlg-corpo{padding:0 var(--pad) 14px;font-size:var(--t-sub);color:var(--texto-2);line-height:1.55;display:flex;flex-direction:column;gap:10px}
.dlg-acoes{padding:10px var(--pad);border-top:1px solid var(--borda);display:flex;gap:8px;justify-content:flex-end}

/* ---------- componentes de view ---------- */
.split{display:grid;grid-template-columns:270px minmax(0,1fr);gap:var(--gap);align-items:start}
.rail{display:flex;flex-direction:column;gap:var(--gap)}
.lista-lateral{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra)}
.ll-item{display:flex;gap:9px;padding:9px 12px;border-bottom:1px solid var(--borda);align-items:center;width:100%;text-align:left}
.ll-item:last-child{border-bottom:none}
.ll-item:hover{background:var(--cartao-alto)}
.ll-item[aria-current="true"]{background:var(--cartao-alto);box-shadow:inset 3px 0 0 var(--marca)}
.ll-logo{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-weight:700;font-size:11px;background:var(--cartao-alto);border:1px solid var(--borda);color:var(--texto-2)}
.kv{display:flex;gap:10px;font-size:var(--t-sub);line-height:1.9}
.kv .k{width:86px;flex:none;color:var(--texto-3);font-size:var(--t-mini)}
.kv > :last-child{min-width:0}
.barra{height:5px;border-radius:99px;background:var(--cartao-alto);overflow:hidden;flex:1}
.barra i{display:block;height:100%;border-radius:99px}
.prog{display:flex;flex-direction:column;gap:4px;padding:7px var(--pad);border-bottom:1px solid var(--borda)}
.prog:last-child{border-bottom:none}
.prog-l{display:flex;align-items:center;gap:8px;font-size:var(--t-sub)}
.prog-l .pct{margin-left:auto;font-family:var(--fonte-mono);font-size:10.5px;color:var(--texto-2);white-space:nowrap;flex:none}
.serv{padding:12px;display:flex;flex-direction:column;gap:6px}
.serv .chip{width:28px;height:28px;border-radius:8px}
.serv .badge::before{display:none}
.serv-topo{display:flex;align-items:center;gap:9px}
.serv-topo .badge{font-size:9.5px;height:17px;padding:0 6px}
.serv-nome{font-size:11.5px;font-weight:620;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serv-desc{font-size:10.5px;color:var(--texto-3);line-height:1.35;min-height:28px}
.serv-stats{display:flex;gap:10px;font-size:10px;color:var(--texto-3);border-top:1px solid var(--borda);padding-top:7px;margin-top:auto}
.serv-stats b{display:block;color:var(--texto-2);font-size:11px;font-family:var(--fonte-mono)}
.legenda{display:flex;flex-direction:column;gap:6px;font-size:10.5px}
.legenda-l{display:flex;align-items:center;gap:7px;color:var(--texto-2);white-space:nowrap}
.legenda-l i{width:8px;height:8px;border-radius:2px;flex:none}
.legenda-l .lg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.legenda-l .n{margin-left:auto;font-family:var(--fonte-mono);color:var(--texto-3);flex:none}

/* ---------- utilities (a CSP recusa atributo style=""; largura dinâmica
   entra via CSSOM — el.style.width — que a CSP permite) ---------- */
.u-cresce{flex:1;min-width:0}
.pos-rel{position:relative}
.w100{width:100%}
.item-pill[data-tom="fase"]{background:color-mix(in srgb,var(--info) 12%,transparent);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.u-flex{display:flex;align-items:center;gap:8px}
.u-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.u-colp{display:flex;flex-direction:column;gap:9px}
.u-mla{margin-left:auto}
.u-centro{display:grid;place-items:center}
.u-wrap{flex-wrap:wrap}
.u-alerta{color:var(--alerta)}
.u-erro{color:var(--erro)}
.u-ok{color:var(--ok)}
.u-marca{color:var(--marca)}
.u-fraco{color:var(--texto-3)}
.u-nowrap{white-space:nowrap}
.grafico{width:100%;height:100%}
.linha-erro{background:color-mix(in srgb,var(--erro) 5%,transparent)}
.bloco-kv{background:var(--fundo);border:1px solid var(--borda);border-radius:var(--raio);padding:11px 12px}
.grade-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.acao-mini{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;border:1px solid var(--borda);background:var(--fundo);font-size:var(--t-sub);font-weight:530}
.acao-mini:hover{background:var(--cartao-alto);border-color:var(--borda-forte)}
.acao-mini .icone{width:15px;height:15px;color:var(--marca)}
.grade-serv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-content:start}
@media (max-width:1180px){.grade-serv{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* classes de view usadas pelo app.js */
.lg-i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none;background:var(--neutro)}
.lg-i[data-cor="marca"]{background:var(--marca)}
.lg-i[data-cor="erro"]{background:var(--erro)}
.cli-logo-g{width:46px;height:46px;border-radius:12px;font-size:15px}
.cli-nome{font-size:16px;letter-spacing:-.01em}
.cli-cab-cartao{justify-content:center}
.serv-nota{margin:0;font-size:var(--t-sub);color:var(--texto-2);line-height:1.55}
.leads-tabela{height:520px}
.jobs-tabela{height:420px}
.notif-resolvidas{opacity:.6}
select.btn{appearance:none;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--texto-3) 50%),linear-gradient(135deg,var(--texto-3) 50%,transparent 50%);background-position:calc(100% - 13px) 13px,calc(100% - 9px) 13px;background-size:4px 4px;background-repeat:no-repeat}

.rodape-app{border-top:1px solid var(--borda);padding:12px 20px;display:flex;gap:20px;align-items:center;font-size:var(--t-mini);color:var(--texto-3);flex-wrap:wrap}
.rodape-app .mono{color:var(--texto-2)}
.ponto-ok{width:6px;height:6px;border-radius:99px;background:var(--ok);display:inline-block;margin-right:5px}

@media (max-width:1180px){
  .c2{grid-column:span 4}.c3,.c4,.c5{grid-column:span 6}.c6,.c8,.c9{grid-column:span 12}
  .split{grid-template-columns:1fr}
  .busca{width:200px}
}