/* ===== tokens: IDÊNTICOS aos da tela de Energia — não alterar =====
   Os únicos acréscimos são --s1…--s4: a rampa categórica para gráficos
   "por gerador". Foi preciso criar porque verde/vermelho/laranja/âmbar
   são reservados por significado (ativo, falha, atenção, solar) e não
   podem virar "série 3". A rampa passou na verificação de daltonismo
   e de contraste nos dois temas. Ela entra no sistema de design da
   plataforma: qualquer gráfico categórico futuro usa estes quatro. */
:root{
  --ground:#EDF1EE; --panel:#FFFFFF; --panel-2:#F5F8F6; --line:#D7DDD8;
  --ink:#16201B; --ink-2:#56645D; --ink-3:#87958E;
  --live:#0E9A57; --live-soft:rgba(14,154,87,.13);
  --idle:#9BA7A1; --fault:#C6453B; --fault-soft:rgba(198,69,59,.12);
  --warn:#C2662A; --warn-soft:rgba(194,102,42,.13);
  --solar:#D99A12; --wire:#C4CCC7; --live-ring:rgba(14,154,87,.26);
  --s1:#0E9A57; --s2:#3F72D9; --s3:#A8459E; --s4:#8A6A12;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:7px; --h:38px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1211; --panel:#151D19; --panel-2:#1A2420; --line:#293430;
    --ink:#E7EEEA; --ink-2:#9DACA5; --ink-3:#6F7F78;
    --live:#3CD183; --live-soft:rgba(60,209,131,.15);
    --idle:#697872; --fault:#F0655A; --fault-soft:rgba(240,101,90,.15);
    --warn:#E8874A; --warn-soft:rgba(232,135,74,.15);
    --solar:#F0B93D; --wire:#38453F; --live-ring:rgba(60,209,131,.28);
    --s1:#2FB870; --s2:#5588E0; --s3:#C75CB0; --s4:#AF8C22;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0D1211; --panel:#151D19; --panel-2:#1A2420; --line:#293430;
  --ink:#E7EEEA; --ink-2:#9DACA5; --ink-3:#6F7F78;
  --live:#3CD183; --live-soft:rgba(60,209,131,.15);
  --idle:#697872; --fault:#F0655A; --fault-soft:rgba(240,101,90,.15);
  --warn:#E8874A; --warn-soft:rgba(232,135,74,.15);
  --solar:#F0B93D; --wire:#38453F; --live-ring:rgba(60,209,131,.28);
  --s1:#2FB870; --s2:#5588E0; --s3:#C75CB0; --s4:#AF8C22;
  color-scheme:dark;
}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.45;margin:0}
.wrap{max-width:1760px;margin:0 auto;padding-inline:16px;padding-block:18px 48px;display:flex;flex-direction:column;gap:12px}
.topo{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;
  background:var(--ground);padding-block:10px;margin-block:-10px 0}
.topo .eyebrow{flex:1;min-width:0}
.topo .atalho{display:flex;align-items:center;gap:7px;height:32px}
.topo .atalho svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.eyebrow{font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.15em;color:var(--ink-3);margin:0}
.tema{flex:none;width:30px;height:30px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line);border-radius:7px;color:var(--ink-3);cursor:pointer}
.tema:hover{color:var(--ink);border-color:var(--ink-3)}
.tema svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- peças de base (mesmas classes da tela de Energia) ---------- */
.card{container-type:inline-size;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.ch{display:flex;align-items:center;gap:8px;padding:11px 13px 10px;flex-wrap:wrap}
.ch h3{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.04em;margin:0}
.sep{border-top:1px solid var(--line)}
.selo{font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:0 5px;white-space:nowrap}
.selo.prev{color:var(--live);border-color:var(--live);background:var(--live-soft)}
.selo.corr{color:var(--fault);border-color:var(--fault);background:var(--fault-soft)}
.selo.melh{color:var(--solar);border-color:var(--solar);background:rgba(217,154,18,.12)}
.selo.soco{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.u{font-family:var(--cond);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.btn{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);background:transparent;
  border:1px solid var(--line);border-radius:6px;padding:4px 11px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink-3);color:var(--ink)}
.btn.pri{background:var(--live);border-color:var(--live);color:#fff;font-weight:500}
.btn.mini{font-size:11.5px;padding:2px 8px}
.ic{width:15px;height:15px;flex:none;stroke:var(--live);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic.w{stroke:var(--warn)} .ic.f{stroke:var(--fault)} .ic.d{stroke:var(--ink-3)}
.secao{display:flex;align-items:center;gap:10px;margin:6px 0 -2px}
.secao h2{font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;margin:0;color:var(--ink-2)}
.secao i{flex:1;height:1px;background:var(--line)}
.secao .obs{font-size:11.5px;color:var(--ink-3)}

/* ---------- barra de geradores (o filtro global) ---------- */
.gcards{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
@media (max-width:1100px){ .gcards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .gcards{grid-template-columns:repeat(2,1fr)} }
.gc{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:5px;font:inherit;color:inherit;position:relative}
.gc[aria-pressed="true"]{border-color:var(--live);box-shadow:inset 0 0 0 1px var(--live)}
.gc h4{font-family:var(--cond);font-weight:700;font-size:15.5px;letter-spacing:.04em;margin:0;display:flex;align-items:center;gap:6px}
.gc h4 .pnt{width:9px;height:9px;border-radius:2px;flex:none}
.gc .v{font-family:var(--mono);font-size:18px;font-variant-numeric:tabular-nums}
.gc .hora{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.gc .l{font-family:var(--cond);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.gc .l.al{color:var(--warn)} .gc .l.vc{color:var(--fault)}

/* ---------- cartões de ação ---------- */
.acoes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;align-items:start}
@media (max-width:1100px){ .acoes{grid-template-columns:1fr} }
.ac{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:9px;
  padding:11px 13px;display:flex;flex-direction:column;gap:8px}
.ac.urg{border-left-color:var(--fault)} .ac.ate{border-left-color:var(--warn)} .ac.ok{border-left-color:var(--live)}
.ac h4{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.05em;margin:0;display:flex;align-items:center;gap:7px}
.ac h4 .n{margin-left:auto;font-family:var(--mono);font-size:15px}
.ac.urg h4 .n{color:var(--fault)} .ac.ate h4 .n{color:var(--warn)}
.ac .rod{font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:7px;margin-top:auto}
.rev{display:flex;align-items:center;gap:9px}
.rev svg{width:42px;height:42px;flex:none}
.rev .tx{min-width:0}
.rev .tx b{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.05em;display:block}
.rev .tx span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.rev .tx span.al{color:var(--warn)} .rev .tx span.vc{color:var(--fault)}
.pd{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);
  padding:7px 0;border-top:1px solid var(--line)}
.pd:first-of-type{border-top:0}
.pd b{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--ink);flex:none}
.pd .cp{flex:1;min-width:0}
.pd .qd{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.pd.feita .cp{color:var(--ink-3)}
.pd .nota{display:block;font-size:11.5px;color:var(--live);margin-top:2px}
.abas{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;align-self:flex-start}
.abas button{background:var(--panel);border:0;font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 10px;color:var(--ink-3);cursor:pointer}
.abas button[aria-pressed="true"]{background:var(--live-soft);color:var(--live)}
.rein{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--ink-2);padding:6px 0;border-top:1px solid var(--line)}
.rein:first-of-type{border-top:0}
.rein b{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--ink);flex:none}
.rein .q{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--fault);flex:none}

/* ---------- custo ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
@media (max-width:760px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{background:var(--panel);padding:10px 13px;display:flex;flex-direction:column;gap:1px}
.kpi .l{font-family:var(--cond);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-family:var(--mono);font-size:18px;font-variant-numeric:tabular-nums}
.kpi .sub{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.kpi .v.al{color:var(--fault)}
.duo{display:grid;grid-template-columns:1.45fr 1fr;gap:11px;align-items:start}
@media (max-width:1100px){ .duo{grid-template-columns:1fr} }
.leg{display:flex;gap:6px;flex-wrap:wrap;padding:0 13px 11px}
.leg button{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);
  border-radius:5px;padding:3px 8px;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer}
.leg button[aria-pressed="true"]{background:var(--panel-2);border-color:var(--ink-3);color:var(--ink)}
.leg button .pnt{width:9px;height:9px;border-radius:2px;flex:none}
.leg button .pc{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.envgrf{position:relative}
.grf{width:100%;height:auto;display:block;touch-action:manipulation}
.grf rect{cursor:pointer}
.grf rect.apagada{opacity:.3}
.tip{position:absolute;z-index:30;pointer-events:none;background:var(--panel);border:1px solid var(--line);
  border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px 10px;min-width:150px;
  transform:translate(-50%,-100%);transition:opacity .08s}
.tip[hidden]{display:none}
.tip .tm{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:7px}
.tip .tm .tt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:0;text-transform:none}
.tip .tl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);margin-top:5px}
.tip .tl .pnt{width:9px;height:9px;border-radius:2px;flex:none}
.tip .tl b{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.tip .tl .pc{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:32px;text-align:right}
.tip .tl.atual{color:var(--ink)}
.grf .ei{stroke:var(--line);stroke-width:1}
.grf .rt{font-family:var(--mono);font-size:10px;fill:var(--ink-3)}
.bh{display:flex;flex-direction:column;gap:7px;padding:11px 13px}
.bh .li{display:grid;grid-template-columns:128px 1fr auto;gap:9px;align-items:center;font-size:12.5px}
.bh .li .rot{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh .li .tr{height:9px;border-radius:2px;background:var(--panel-2);overflow:hidden}
.bh .li .tr i{display:block;height:100%;background:var(--live);border-radius:0 2px 2px 0}
.bh .li .vl{font-family:var(--mono);font-size:12.5px;color:var(--ink);min-width:118px;text-align:right;font-variant-numeric:tabular-nums}
.bh .li .vl em{font-style:normal;color:var(--ink-3);font-size:11.5px}
.causa{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:13px}
.cadeia{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.cadeia .et{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:12.5px}
.cadeia .et.fim{border-color:var(--fault);color:var(--fault);background:var(--fault-soft)}
.cadeia .st{color:var(--ink-3);font-size:15px}

/* ---------- histórico ---------- */
.filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 13px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px}
.gsel{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.gsel button{background:var(--panel);border:0;font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.06em;
  padding:5px 11px;color:var(--ink-3);cursor:pointer}
.gsel button[aria-pressed="true"]{background:var(--live-soft);color:var(--live)}
.busca{flex:1;min-width:150px;height:32px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-2);color:var(--ink);font:inherit;font-size:13px;padding:0 10px}
.filtros .cont{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.mes{display:flex;align-items:center;gap:10px;margin:14px 0 8px}
.mes h4{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:0;color:var(--ink-2)}
.mes i{flex:1;height:1px;background:var(--line)}
.mes .tot{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:11px}
@media (max-width:760px){ .feed{grid-template-columns:1fr} }
.reg{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px 13px 10px;
  display:flex;flex-direction:column;gap:7px}
.reg.aviso{border-left:3px solid var(--warn)}
.regh{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.regh b{font-family:var(--cond);font-weight:700;font-size:15.5px;letter-spacing:.04em}
.regh .data{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.regh .cst{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--ink)}
.regt{font-size:13px;color:var(--ink-2);margin:0}
.regt em{font-style:normal;color:var(--ink);font-weight:600}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-family:var(--cond);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.chip.h{color:var(--ink-2);font-family:var(--mono);letter-spacing:0;text-transform:none;font-size:11px}
.aviso-l{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--warn);
  background:var(--warn-soft);border-radius:5px;padding:6px 8px}
.vazio{padding:24px 13px;text-align:center;color:var(--ink-3);font-size:13px}
.nota{margin:0;font-size:11.5px;color:var(--ink-3);padding:0 2px}

/* ---------- formulário e popups ---------- */
.ov{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px}
.ov::before{content:'';position:absolute;inset:0;background:#0b1210;opacity:.34}
.pn{position:relative;width:100%;max-width:640px;max-height:92vh;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);overflow:hidden;
  display:flex;flex-direction:column}
.ph{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ph h3{font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.03em;margin:0}
.ph .x{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line);border-radius:6px;color:var(--ink-2);font-size:17px;cursor:pointer}
.pb{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.pf{display:flex;gap:8px;justify-content:flex-end;padding:11px 16px;border-top:1px solid var(--line)}
.bt{height:var(--h);padding:0 16px;border-radius:var(--r);font-family:var(--sans);font-size:13px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-2)}
.bt.pri{background:var(--live);border-color:var(--live);color:#fff;font-weight:500}
.gr2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media (max-width:560px){ .gr2,.gr3{grid-template-columns:1fr} }
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.campo input,.campo select,.campo textarea{box-sizing:border-box;font-family:var(--sans);font-size:13px;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);color:var(--ink)}
.campo input,.campo select{height:var(--h);padding-block:0}
.campo textarea{resize:vertical;min-height:74px;line-height:1.5}
.campo .dica{font-size:11px;color:var(--ink-3)}
.marcs{display:flex;gap:6px;flex-wrap:wrap}
.marcs button{font-family:var(--cond);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:4px 9px;color:var(--ink-3);cursor:pointer}
.marcs button[aria-pressed="true"]{background:var(--live-soft);border-color:var(--live);color:var(--live)}
.vinc{border:1px dashed var(--line);border-radius:var(--r);padding:10px 12px;display:flex;gap:9px;align-items:flex-start;
  font-size:12.5px;color:var(--ink-2);background:var(--panel-2)}
.ov.conf{place-items:center;padding:18px}
.ov.conf .pn{border-radius:12px;max-height:none;max-width:420px}
@media (max-width:560px){
  .ov{padding:0;place-items:end stretch}
  .pn{max-width:none;border-radius:14px 14px 0 0;max-height:94vh}
}
/* ---------- CELULAR: é por onde o mecânico registra ----------
   16px nos campos é obrigatório: abaixo disso o iOS dá zoom sozinho ao
   focar um input e o formulário sai do lugar a cada campo preenchido.
   Alvos de toque em 44px, que é o mínimo confortável para o dedo. */
@media (max-width:620px){
  .topo{flex-wrap:wrap;padding-block:10px 11px}
  .topo .atalho{order:3;flex:1 0 100%;height:44px;font-size:14.5px;justify-content:center}
  .campo input,.campo select,.campo textarea{font-size:16px}
  .campo input,.campo select{height:46px}
  .campo textarea{min-height:88px}
  .campo label{font-size:12px}
  .marcs{gap:7px}
  .marcs button{font-size:13.5px;padding:11px 14px;letter-spacing:.04em}
  .pb{padding:14px 16px 18px;gap:14px}
  .pf{gap:10px;padding:11px 16px calc(11px + env(safe-area-inset-bottom))}
  .pf .bt{flex:1;height:46px;font-size:14.5px}
  .ph{padding:15px 16px}
  .btn.mini{font-size:13px;padding:8px 13px}
  .pd{padding:10px 0;flex-wrap:wrap}
  .pd .qd{order:3}
  .abas button{padding:9px 13px;font-size:13px}
  .gsel button{padding:9px 13px;font-size:14px}
  .busca{height:44px;font-size:16px}
  .tip{min-width:136px}
}


/* ================================================================
   ACRÉSCIMOS — montados a partir das peças que já existem.
   Nenhuma cor nova: tudo sai dos tokens. Nenhuma fonte nova.
   ================================================================ */

/* faixa de abas grandes (Proposta B) — mesma peça .abas, em tamanho de navegação */
.nav{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.nav button{flex:1;background:var(--panel);border:0;font-family:var(--cond);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;color:var(--ink-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px}
.nav button[aria-pressed="true"]{background:var(--live-soft);color:var(--live)}
.nav button .n{font-family:var(--mono);font-size:12px;letter-spacing:0}
.nav button .n.al{color:var(--warn)} .nav button .n.vc{color:var(--fault)}
@media (max-width:620px){ .nav button{font-size:12.5px;padding:11px 8px;letter-spacing:.05em} .nav button .n{display:none} }

/* tanque — anel + barra, feitos com .kpi e a barra de .bh */
.tanques{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (max-width:760px){ .tanques{grid-template-columns:1fr} }
.tq{display:flex;align-items:center;gap:12px;padding:11px 13px}
.tq svg{width:54px;height:54px;flex:none}
.tq .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tq .tx b{font-family:var(--cond);font-weight:700;font-size:15.5px;letter-spacing:.05em}
.tq .tx .v{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums}
.tq .tx .v.sem{color:var(--ink-3)}
.tq .tx .s{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* conciliação — linhas de conta, com o sinal explícito */
.conc{display:flex;flex-direction:column;padding:4px 13px 11px}
.conc .li{display:flex;align-items:baseline;gap:9px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.conc .li:first-child{border-top:0}
.conc .li .op{font-family:var(--mono);font-size:13px;color:var(--ink-3);width:13px;flex:none}
.conc .li .rot{color:var(--ink-2);flex:1;min-width:0}
.conc .li .vl{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.conc .li .vl.sem{color:var(--ink-3)}
.conc .li.res{border-top:1px solid var(--ink-3);margin-top:3px}
.conc .li.res .rot{color:var(--ink);font-weight:600}

/* tabela do cadastro — bordas por --line, números em mono */
.tbw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tb{width:100%;border-collapse:collapse;font-size:12.5px;min-width:660px}
.tb th{font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--panel);z-index:2}
.tb td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb td.eq{color:var(--ink);font-weight:500;white-space:nowrap}
.tb td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink)}
.tb td.n.sem{color:var(--ink-3)}
.tb td.n.al{color:var(--warn)} .tb td.n.vc{color:var(--fault)}
.tb tbody tr:hover td{background:var(--panel-2)}
.tb .itv{width:72px;height:30px;box-sizing:border-box;font-family:var(--mono);font-size:12.5px;text-align:right;
  border:1px solid var(--line);border-radius:5px;background:var(--panel-2);color:var(--ink);padding:0 7px}
.tb .fam{font-family:var(--cond);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.grupolinha td{background:var(--panel-2);font-family:var(--cond);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* grade da frota (Proposta C) */
.frota{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}
.fc{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 11px;cursor:pointer;
  text-align:left;font:inherit;color:inherit;display:flex;gap:10px;align-items:center;container-type:inline-size}
.fc:hover{border-color:var(--ink-3)}
.fc.vc{border-left:3px solid var(--fault)} .fc.al{border-left:3px solid var(--warn)}
.fc.ok{border-left:3px solid var(--live)} .fc.sem{border-left:3px solid var(--line)}
.fc svg.anel{width:40px;height:40px;flex:none}
.fc .tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.fc .tx b{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc .tx .st{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.fc .tx .st.al{color:var(--warn)} .fc .tx .st.vc{color:var(--fault)} .fc .tx .st.sem{color:var(--ink-3)}
.fc .tx .sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* linhas do feed de abastecimento */
.ab{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.ab:first-child{border-top:0}
.ab .qd{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.ab .cp{min-width:0;color:var(--ink-2)}
.ab .cp b{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--ink)}
.ab .cp .sv{color:var(--ink-3)}
.ab .lt{font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ab .lt .t{font-family:var(--cond);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);margin-left:5px}

/* barras horizontais de ranking */
.rk{display:flex;flex-direction:column;gap:6px;padding:10px 13px}
.rk .li{display:grid;grid-template-columns:118px 1fr auto;gap:9px;align-items:center;font-size:12.5px}
.rk .li .rot{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .li .tr{height:9px;border-radius:2px;background:var(--panel-2);overflow:hidden}
.rk .li .tr i{display:block;height:100%;border-radius:0 2px 2px 0}
.rk .li .vl{font-family:var(--mono);font-size:12.5px;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.rk .li .vl em{font-style:normal;color:var(--ink-3);font-size:11px}
@container (max-width:380px){ .rk .li{grid-template-columns:92px 1fr auto} .rk .li .vl{min-width:74px} }

/* aviso de leitura ausente / dado que ainda não existe */
.espera{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);
  background:var(--panel-2);border:1px dashed var(--line);border-radius:var(--r);padding:9px 11px;margin:0 13px 11px}
.espera b{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}

/* faixa de KPI compacta no topo (Proposta C) */
.tira{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
@media (max-width:980px){ .tira{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .tira{grid-template-columns:repeat(2,1fr)} }

/* ficha do equipamento — popup largo */
.pn.larga{max-width:920px}
.fichah{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.fichah.tres{grid-template-columns:repeat(3,1fr)}
.fichah.dois{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){ .fichah{grid-template-columns:repeat(2,1fr)} }
/* três KPIs lado a lado não cabem num celular: empilham. Dois ainda cabem. */
@media (max-width:560px){ .fichah.tres{grid-template-columns:1fr} }

/* o selo da proposta vive no topo, como qualquer outro .selo — some na plataforma */
@media (max-width:620px){ .topo .selo{display:none} }

/* .pb é flex-column: sem isto, um bloco alto (o histórico da ficha)
   espreme os de cima até sumirem. Nada no corpo do popup encolhe. */
.pb > *{flex:none}

/* tira de famílias: quebra em várias linhas no computador, vira uma
   faixa que desliza no celular — a página em si nunca rola de lado */
.gsel.fams{flex-wrap:wrap;max-width:100%}
@media (max-width:620px){
  .gsel.fams{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .gsel.fams::-webkit-scrollbar{display:none}
  .gsel.fams button{white-space:nowrap}
  .tira .kpi:last-child{grid-column:span 2}
}