/* Painel HP · DS Grafite (tokens de docs/design-systems/app/grafite/tokens.css) + paleta de gráficos validada (skill dataviz) */
@font-face{font-family:"Geist";src:url(vendor/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(vendor/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --font-ui:"Geist","Segoe UI Variable",-apple-system,system-ui,sans-serif;--font-mono:"Geist Mono",Consolas,monospace;
  --desk:#08090A;--chrome:#0F1012;--panel:#111214;--canvas:#0B0C0D;--raised:#17181B;--overlay:#1A1B1F;
  --hover:rgba(255,255,255,.05);--sel:rgba(255,255,255,.08);--line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);
  --text:#EDEEF0;--text-2:#A6A8AE;--muted:#6B6E76;--accent:#C5F23A;--accent-ink:#0B0C0D;--accent-soft:rgba(197,242,58,.12);
  --ok:#4ADE9E;--warn:#F2B84B;--crit:#F2685C;--info:#6CB6FF;--r-s:5px;--r-m:7px;--r-l:10px;
  --hl:rgba(255,255,255,.03);--shadow-pop:0 16px 48px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--grade:rgba(255,255,255,.06);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --desk:#E6E7EA;--chrome:#F6F6F7;--panel:#F1F1F3;--canvas:#FFFFFF;--raised:#FFFFFF;--overlay:#FFFFFF;
  --hover:rgba(0,0,0,.04);--sel:rgba(0,0,0,.06);--line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.14);
  --text:#111214;--text-2:#4B4E55;--muted:#8A8D94;--accent:#4D7C0F;--accent-ink:#FFFFFF;--accent-soft:rgba(77,124,15,.10);
  --ok:#15803D;--warn:#B45309;--crit:#C53030;--info:#2563EB;--hl:transparent;--shadow-pop:0 16px 40px -14px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.05);
  --s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--grade:rgba(0,0,0,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--desk);color:var(--text);font:14px/1.45 var(--font-ui);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
a{color:var(--info);text-decoration:none}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ---------- login ---------- */
.entrar{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.entrar form{width:min(380px,100%);background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:28px 22px;box-shadow:var(--shadow-pop)}
.entrar h1{font-size:20px;font-weight:600;margin:14px 0 4px;letter-spacing:-.02em}
.entrar p{color:var(--text-2);margin:0 0 18px}
.entrar input{width:100%;background:var(--canvas);border:1px solid var(--line-2);border-radius:var(--r-m);padding:12px;font-size:16px;outline:none}
.entrar input:focus{border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-m);padding:11px 16px;background:var(--accent);color:var(--accent-ink);font-weight:600;cursor:pointer}
.entrar .btn{width:100%;margin-top:12px}
.erro{color:var(--crit);min-height:20px;margin:8px 0 0;font-size:13px}
.logo{width:40px;height:40px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-weight:700;letter-spacing:-.03em}

/* ---------- estrutura ---------- */
.app{display:grid;grid-template-columns:220px 1fr;min-height:100%}
.lado{background:var(--chrome);border-right:1px solid var(--line);padding:16px 10px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
.lado .marca{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.lado .marca b{font-weight:600;letter-spacing:-.02em}.lado .marca small{display:block;color:var(--muted);font-size:11px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-m);color:var(--text-2);font-weight:500}
.nav a:hover{background:var(--hover);color:var(--text)}
.nav a.on{background:var(--sel);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.nav svg{width:18px;height:18px;flex:none}
.lado .rodape{margin-top:auto;display:flex;gap:6px;padding:8px}
.ico-btn{background:transparent;border:1px solid var(--line-2);border-radius:var(--r-m);padding:7px 9px;cursor:pointer;color:var(--text-2)}
.ico-btn:hover{color:var(--text);background:var(--hover)}
main{min-width:0;padding:18px 22px 40px}
.topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.topo h1{font-size:20px;font-weight:600;letter-spacing:-.025em;margin:0 auto 0 0}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:2px}
.seg button{border:0;background:transparent;padding:6px 10px;border-radius:5px;cursor:pointer;color:var(--text-2);font-size:13px;font-weight:500}
.seg button.on{background:var(--raised);color:var(--text);box-shadow:0 0 0 1px var(--line-2)}
.atual{color:var(--muted);font-size:12px}

/* ---------- grade de cards ---------- */
.grade{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.card{background:linear-gradient(180deg,var(--hl),transparent 45%),var(--raised);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px;min-width:0}
.card h2{font-size:13px;font-weight:600;margin:0 0 2px;color:var(--text)}
.card .sub{color:var(--muted);font-size:12px;margin:0 0 10px}
.card.aviso{border-style:dashed}
.aviso-txt{color:var(--warn);font-size:12.5px;display:flex;gap:6px;align-items:flex-start}
.vazio{color:var(--muted);font-size:13px;padding:14px 0;text-align:center}

/* KPI */
.kpi{display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.kpi .r{color:var(--text-2);font-size:12px;font-weight:500}
.kpi .v{font-size:26px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .d{font-size:12px;color:var(--muted)}
.kpi .d .up{color:var(--ok)}.kpi .d .dn{color:var(--crit)}
.kpi .spark{position:absolute;right:10px;bottom:10px;width:84px;height:30px;opacity:.9}
.kpi.destaque{box-shadow:0 0 0 1px var(--accent),0 0 24px -8px var(--accent-soft)}

/* tabelas */
.tab-wrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
td.n,th.n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
tr:hover td{background:var(--hover)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--sel);color:var(--text-2)}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pill.crit{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.pill.info{background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info)}

/* barras horizontais */
.hb{display:flex;flex-direction:column;gap:7px}
.hb .l{display:grid;grid-template-columns:minmax(80px,38%) 1fr auto;gap:8px;align-items:center;font-size:12.5px}
.hb .l span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.hb .t{height:8px;background:var(--panel);border-radius:4px;overflow:hidden}
.hb .t i{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0}
.hb .l b{font-weight:500;font-family:var(--font-mono);font-size:12px}

/* funil */
.funil{display:flex;flex-direction:column;gap:6px}
.funil .e{display:grid;grid-template-columns:118px 1fr 92px;gap:10px;align-items:center;font-size:12.5px}
.funil .e .nome{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.funil .e .t{height:22px;background:var(--panel);border-radius:5px;overflow:hidden;position:relative}
.funil .e .t i{position:absolute;inset:0 auto 0 0;background:var(--s1);border-radius:0 5px 5px 0;min-width:2px}
.funil .e .t em{position:absolute;left:8px;top:2px;font-style:normal;font-family:var(--font-mono);font-size:12px;color:#fff;mix-blend-mode:normal;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.funil .e .p{text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--text-2)}
.funil .e .p small{display:block;color:var(--muted);font-size:10.5px}

/* gráficos svg */
.graf{position:relative;width:100%}
.graf svg{display:block;width:100%;overflow:visible}
.graf .eixo{fill:var(--muted);font:10.5px var(--font-mono)}
.graf .grade-l{stroke:var(--grade);stroke-width:1}
.dica{position:absolute;pointer-events:none;background:var(--overlay);border:1px solid var(--line-2);border-radius:var(--r-m);padding:7px 9px;font-size:12px;box-shadow:var(--shadow-pop);white-space:nowrap;z-index:5;transform:translate(-50%,-110%)}
.dica b{display:block;font-weight:600}
.dica span{color:var(--text-2);font-family:var(--font-mono)}

/* medidores */
.medidores{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.medidor{text-align:center}
.medidor svg{width:100%;max-width:150px;height:auto}
.medidor .v{font:500 20px var(--font-ui);letter-spacing:-.02em;fill:var(--text)}
.medidor .r{font-size:12px;color:var(--text-2);margin-top:-6px}
.medidor .d{font-size:11px;color:var(--muted)}

/* calendário */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dia{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:6px;min-height:86px;font-size:11.5px}
.cal .dia.hoje{box-shadow:0 0 0 1px var(--accent)}
.cal .dia .n{color:var(--muted);font-family:var(--font-mono);font-size:11px;margin-bottom:4px;display:flex;justify-content:space-between}
.cal .p{border-radius:5px;padding:3px 5px;margin-top:3px;background:var(--sel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid var(--muted)}
.cal .p.publicado{border-left-color:var(--ok)}.cal .p.agendado{border-left-color:var(--info)}.cal .p.pronto{border-left-color:var(--accent)}.cal .p.producao{border-left-color:var(--warn)}
.legenda{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2);margin:8px 0 0}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.quadro{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.coluna{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:8px}
.coluna h3{font-size:12px;margin:0 0 6px;display:flex;justify-content:space-between;color:var(--text-2);font-weight:600}
.coluna .it{background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin-top:5px;font-size:12px}
.coluna .it small{display:block;color:var(--muted);font-size:11px}

/* status do monitor */
.status{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}
.status .s{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:var(--r-m);padding:7px 9px;font-size:12.5px}
.status .s i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.status .s.f i{background:var(--crit)}
.status .s span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status .s em{margin-left:auto;color:var(--muted);font-style:normal;font-family:var(--font-mono);font-size:11px}

.carregando{opacity:.55;transition:opacity .2s}
.esqueleto{height:96px;border-radius:var(--r-l);background:linear-gradient(90deg,var(--raised),var(--panel),var(--raised));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- celular ---------- */
.inferior{display:none}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .lado{display:none}
  main{padding:14px 12px calc(84px + env(safe-area-inset-bottom))}
  .topo h1{font-size:18px;width:100%}
  .c3,.c4,.c5,.c6,.c7,.c8{grid-column:span 12}
  .kpis .c3{grid-column:span 6}
  .kpi .v{font-size:22px}
  .kpi .spark{width:64px;height:24px}
  .inferior{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--chrome) 92%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));overflow-x:auto;scrollbar-width:none}
  .inferior::-webkit-scrollbar{display:none}
  .inferior a{flex:1 0 64px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--muted);padding:5px 2px;border-radius:8px}
  .inferior a.on{color:var(--text)}.inferior a.on svg{color:var(--accent)}
  .inferior svg{width:21px;height:21px}
  .cal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .funil .e{grid-template-columns:92px 1fr 70px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}