/* Gestor de Chamados — "terminal de operação".
   Densidade em vez de cartão, régua de 1px em vez de sombra, monoespaçada em todo
   número. Cor só entra como sinal de SLA (ok / risco / estourado / congelado).
   As duas famílias de série (--c1/--c2) e a rampa ordinal (--o1..--o4) são só dos
   gráficos do dashboard e foram validadas para daltonismo. */

:root{
  --paper:#F6F7F9; --surface:#FFFFFF; --surface-2:#EFF1F4; --chrome:#12161D;
  --chrome-ink:#9AA4B2; --chrome-ink-hi:#F2F5F8;
  --ink:#0C1017; --ink-2:#39424F; --ink-3:#6A7382; --ink-4:#99A1AD;
  --rule:#D6DBE2; --rule-2:#E7EAEF; --hair:#F0F2F5;
  --track:#E3E7EC; --sel:#E6EAF0; --hover:#F1F3F7;
  --ok:#0E7A4E; --warn:#B8791B; --crit:#BE2434; --idle:#7A8492;
  --link:#2A6FB8;
  --c1:#2A6FB8; --c2:#C2622E;
  --o1:#184F95; --o2:#256ABF; --o3:#3987E5; --o4:#86B6EF;
  --shadow:0 18px 44px rgba(12,16,23,.24);
  --rowh:28px; --pad:14px;
  /* Altura total da barra de abas. Valor fixo e explícito: 54px de conteúdo mais 18px
     de folga inferior. Nada de env() aqui — ver o comentário da .tabbar. */
  --tabbar-h:72px;
  --sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
[data-theme="dark"]{
  --paper:#0C0F14; --surface:#12161D; --surface-2:#191E27; --chrome:#080A0E;
  --chrome-ink:#7C8695; --chrome-ink-hi:#E7EBF1;
  --ink:#E7EBF1; --ink-2:#B3BBC6; --ink-3:#808A97; --ink-4:#5C6572;
  --rule:#262D38; --rule-2:#1D232C; --hair:#161B23;
  --track:#232A34; --sel:#1C222C; --hover:#171D25;
  --ok:#3FA87C; --warn:#BC8A2A; --crit:#DE5F6E; --idle:#6E7887;
  --link:#7FA8DA;
  --c1:#4A90D9; --c2:#C97038;
  --o1:#2A6FB8; --o2:#3987E5; --o3:#5598E7; --o4:#86B6EF;
  --shadow:0 18px 44px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:13px;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  display:flex; flex-direction:column; overflow:hidden;
}
body.scrolls{overflow:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lbl{font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-4);font-family:var(--mono)}
.muted{color:var(--ink-3)}
.sp{flex:1}

/* ── barra superior ─────────────────────────────────────────────────────────── */
/* A altura soma o inset porque o box-sizing é border-box: com height fixa em 42px o
   padding do entalhe (47-59px no iPhone em standalone) zera a caixa de conteúdo e joga
   os filhos por cima da barra de status. Em aba o inset é 0 e a barra segue com 42px. */
header.chrome{height:calc(42px + env(safe-area-inset-top));flex:none;background:var(--chrome);
  display:flex;align-items:center;gap:2px;padding:0 14px;padding-top:env(safe-area-inset-top)}
.chrome .mark{display:flex;align-items:center;gap:9px;padding-right:18px;
  color:var(--chrome-ink-hi)}
.chrome .mark:hover{text-decoration:none;opacity:.85}
.chrome .mark .nm{font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;white-space:nowrap}
.chrome nav{display:flex}
.chrome nav a{padding:0 13px;height:42px;display:flex;align-items:center;font-size:12px;
  font-weight:500;color:var(--chrome-ink);border-bottom:2px solid transparent}
.chrome nav a:hover{color:var(--chrome-ink-hi);text-decoration:none}
.chrome nav a.active{color:var(--chrome-ink-hi);border-bottom-color:var(--crit)}
.chrome .who{font-size:11px;color:var(--chrome-ink);font-family:var(--mono);
  display:flex;align-items:center;gap:12px;white-space:nowrap}
.chrome .who .ver{opacity:.68}
.chrome .ib{width:26px;height:26px;border:0;background:transparent;cursor:pointer;
  color:var(--chrome-ink);display:flex;align-items:center;justify-content:center}
.chrome .ib:hover{color:var(--chrome-ink-hi)}

/* ── controles ──────────────────────────────────────────────────────────────── */
.btn{height:28px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:500;white-space:nowrap;border-radius:0}
.btn:hover{background:var(--hover);color:var(--ink);border-color:var(--ink-4);text-decoration:none}
.btn:disabled{opacity:.5;cursor:default}
.btn:disabled:hover{background:var(--surface);color:var(--ink-2);border-color:var(--rule)}
.btn.pri{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn.pri:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.dgr{color:var(--crit)}
.btn.dgr:hover{border-color:var(--crit);color:var(--crit);background:transparent}
.ib{width:26px;height:26px;border:0;background:transparent;cursor:pointer;color:var(--ink-4);
  display:flex;align-items:center;justify-content:center;padding:0}
.ib:hover{background:var(--sel);color:var(--ink)}
.ib.dgr:hover{color:var(--crit)}
input[type=text],input[type=number],input[type=password],input[type=search],textarea,select{
  font:inherit;font-size:12.5px;padding:0 10px;height:29px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink);border-radius:0;width:100%}
textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--ink-3)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}

.stepper{display:flex;align-items:center;border:1px solid var(--rule);height:28px;flex:none}
.stepper button{width:26px;height:26px;border:0;background:transparent;cursor:pointer;
  color:var(--ink-3);display:flex;align-items:center;justify-content:center;padding:0}
.stepper button:hover{background:var(--hover);color:var(--ink)}
.stepper .m{padding:0 12px;font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;color:var(--ink);border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);height:26px;display:flex;align-items:center;
  white-space:nowrap}

.find{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-4);
  min-width:230px;flex:0 1 320px}
.find:focus-within{border-color:var(--ink-3)}
.find input{border:0;height:26px;padding:0;background:transparent;font-size:12px;min-width:0}
.find input:focus{outline:0}
.find .kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--rule);
  padding:1px 5px;color:var(--ink-4);flex:none}

/* ── tela Chamados ──────────────────────────────────────────────────────────── */
.cmd{height:50px;flex:none;background:var(--surface);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:10px;padding:0 var(--pad)}
.sync{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-3);
  font-family:var(--mono);white-space:nowrap}
.sync .d{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;flex:none}
.sync .d.bad{background:var(--crit)}

.body{flex:1;display:flex;min-height:0}
.col{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface)}

.chips{height:38px;flex:none;display:flex;align-items:stretch;border-bottom:1px solid var(--rule);
  padding-left:var(--pad);overflow-x:auto}
.chip{position:relative;display:flex;align-items:center;gap:7px;padding:0 14px;border:0;
  background:transparent;cursor:pointer;font:inherit;font-size:11.5px;font-weight:500;
  color:var(--ink-3);white-space:nowrap}
.chip:hover{color:var(--ink);background:var(--hover)}
.chip.on{color:var(--ink);font-weight:600}
/* recuado pelo padding: o traço tem a largura do rótulo, não a da célula */
.chip.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;
  background:var(--ink)}
.chip .ct{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-4)}
.chip.on .ct{color:var(--ink-2)}

/* A grade é CSS grid, não <table>: a linha inteira é um bloco clicável e as
   colunas nunca somam mais que a largura disponível (sem rolagem horizontal). */
.gwrap{flex:1;min-height:0;overflow:auto}
.ghead,.grow{display:grid;
  grid-template-columns:16px 60px minmax(0,1fr) 40px 124px 112px 106px 92px 108px;
  align-items:center;gap:12px;padding:0 var(--pad)}
.ghead{height:28px;position:sticky;top:0;z-index:3;background:var(--surface-2);
  border-bottom:1px solid var(--rule)}
.ghead span{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ghead span.s{cursor:pointer;user-select:none}
.ghead span.s:hover{color:var(--ink)}
.ghead span.sorted{color:var(--ink)}
.ghead span.r{text-align:right}

.ggroup{display:flex;align-items:center;gap:10px;height:26px;padding:0 var(--pad);
  position:sticky;top:28px;z-index:2;background:var(--surface);
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.ggroup .bd{width:3px;height:11px;flex:none}
.ggroup .nm{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2)}
.ggroup .ct{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.ggroup .ln{flex:1;height:1px;background:var(--rule-2)}

.grow{height:var(--rowh);border:0;border-bottom:1px solid var(--hair);background:transparent;
  font:inherit;text-align:left;width:100%;cursor:pointer;color:var(--ink)}
.grow:hover{background:var(--hover)}
.grow.on{background:var(--sel);box-shadow:inset 2px 0 0 var(--ink)}
.grow .cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .num{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--link)}
.grow .num .an{display:inline-flex;align-items:center;vertical-align:middle;margin-left:5px;
  color:var(--ink-3);cursor:pointer;border-radius:3px;padding:1px}
.grow .num .an:hover,.grow .num .an:focus-visible{color:var(--link);background:var(--hover)}
.grow .ttl{font-size:12.5px;color:var(--ink)}
.grow .sub{font-size:12px;color:var(--ink-2)}
.grow .dim{font-size:11.5px;color:var(--ink-3)}
.grow .pri{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em}
.grow .cd{font-family:var(--mono);font-size:12px;font-weight:500;text-align:right;
  font-variant-numeric:tabular-nums}
.grow .venc{display:none}
.dot{width:7px;height:7px;border-radius:50%;display:block}
.meter{display:flex;align-items:center;gap:8px}
.meter .tk{flex:1;height:4px;background:var(--track);overflow:hidden;min-width:20px}
.meter .fl{height:4px;display:block}
.meter .pc{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-3);
  width:30px;text-align:right;flex:none}
.gempty{padding:56px 20px;text-align:center;color:var(--ink-4);font-size:12.5px}

/* ── painel de detalhe (o que saiu das 18 colunas) ──────────────────────────── */
.side{width:380px;flex:none;background:var(--surface);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:0}
.side .hd{padding:14px 16px 12px;border-bottom:1px solid var(--rule);display:flex;
  align-items:flex-start;gap:10px}
.side .hd .n{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink)}
.side .hd .t{font-size:13px;line-height:1.4;color:var(--ink);margin-top:6px;text-wrap:pretty}
.side .sc{flex:1;overflow:auto}
.side .blk{padding:14px 16px;border-bottom:1px solid var(--rule-2)}
.side .blk:last-child{border-bottom:0}
.side .ft{flex:none;border-top:1px solid var(--rule);padding:10px 16px;display:flex;gap:7px;
  background:var(--surface-2)}
.kv{display:grid;grid-template-columns:82px minmax(0,1fr);gap:7px 12px;align-items:baseline;margin:0}
.kv dt{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);font-family:var(--mono);padding-top:1px}
.kv dd{margin:0;font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.bigcd{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.01em;line-height:1}
.bar{height:6px;background:var(--track);margin:12px 0 11px}
.bar span{height:6px;display:block}
.tl{display:flex;flex-direction:column}
.tl .st{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px}
.tl .lane{display:flex;flex-direction:column;align-items:center}
.tl .pt{width:7px;height:7px;margin-top:4px;flex:none}
.tl .ln{width:1px;flex:1;background:var(--rule);min-height:16px}
.tl .bx{padding-bottom:12px}
.tl .bx .h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tl .bx .h b{font-size:11.5px;font-weight:600;color:var(--ink)}
.tl .bx .h time{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.tl .bx .d{font-size:11px;color:var(--ink-4);margin-top:2px}
.side .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:40px 30px;text-align:center;color:var(--ink-4);font-size:12px;line-height:1.6}

/* ── rodapé de status ───────────────────────────────────────────────────────── */
footer.stat{height:26px;flex:none;background:var(--surface-2);border-top:1px solid var(--rule);
  display:flex;align-items:center;padding:0 var(--pad);font-family:var(--mono);
  font-size:10.5px;color:var(--ink-3);overflow-x:auto;
  padding-bottom:env(safe-area-inset-bottom)}
footer.stat .it{padding:0 12px;border-right:1px solid var(--rule);height:26px;display:flex;
  align-items:center;gap:7px;white-space:nowrap;flex:none}
footer.stat .it:first-child{padding-left:0}
footer.stat .it:last-child{border-right:0}
footer.stat .d{width:5px;height:5px;border-radius:50%;display:block}
footer.stat .sp{flex:1;border:0;min-width:12px}

/* ── páginas com rolagem (dashboard / admin) ────────────────────────────────── */
.pagehead{height:50px;flex:none;background:var(--surface);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:14px;padding:0 20px}
.pagehead h1{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pagehead .hint{font-size:11.5px;color:var(--ink-4)}
.seg{display:flex;border:1px solid var(--rule);height:28px;flex:none}
.seg a,.seg button{border:0;background:transparent;font:inherit;font-size:11px;font-weight:500;
  padding:0 13px;cursor:pointer;color:var(--ink-3);border-right:1px solid var(--rule);
  font-family:var(--mono);letter-spacing:.04em;display:flex;align-items:center;white-space:nowrap}
.seg a:last-child,.seg button:last-child{border-right:0}
.seg a:hover,.seg button:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.seg a.on,.seg button.on{background:var(--ink);color:var(--surface)}

.sheet{flex:1;min-height:0;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column;
  min-width:0}
.card .hd{padding:13px 16px 11px;border-bottom:1px solid var(--rule-2);display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.card .hd h2,.card .hd h3{margin:0;font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.card .hd .why{font-size:11px;color:var(--ink-4)}
.card .bd{padding:14px 16px;flex:1;min-height:0;display:flex;flex-direction:column}
.card .ft{padding:9px 16px;border-top:1px solid var(--rule-2);background:var(--surface-2);
  font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rowgrid{display:grid;gap:16px}

/* ── dashboard ──────────────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{background:var(--surface);border:1px solid var(--rule);padding:14px 16px 13px;
  display:flex;flex-direction:column;text-align:left;font:inherit;min-height:120px;
  color:var(--ink)}
a.tile:hover{text-decoration:none}
.tile.act{cursor:pointer}
.tile.act:hover{border-color:var(--ink-4)}
.tile.on{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.tile .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tile .hero{font-family:var(--mono);font-size:38px;font-weight:500;line-height:1;
  letter-spacing:-.02em;margin-top:12px}
.tile .foot{margin-top:auto;padding-top:10px;font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;gap:6px}
.delta{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;
  font-weight:600}

.leg{display:flex;gap:14px;margin-left:auto;align-self:center;flex-wrap:wrap}
.leg span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3)}
.leg i{width:9px;height:9px;display:block;flex:none}

.fila{display:flex;flex-direction:column;gap:7px}
.fila .r{display:grid;grid-template-columns:54px minmax(0,1fr) 148px 54px 100px;gap:12px;
  align-items:center}
.fila .nm{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.plot{position:relative;height:14px;background:var(--track);display:block}
.plot .b{position:absolute;left:0;top:0;height:14px}
.plot .goal{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink-3)}
.flag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  font-family:var(--mono);letter-spacing:.03em;white-space:nowrap}

.cols{flex:1;display:flex;align-items:flex-end;min-height:120px;padding-top:6px}
.cols .g{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
.cols .pair{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%}
.cols .b{width:15px;max-width:40%}
.cols .x{font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.04em}

.stk{display:flex;flex-direction:column;gap:13px}
.stk .r{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center}
.stk .b{display:flex;height:16px;gap:2px}
.stk .piece{display:flex;align-items:center;padding-left:7px;font-family:var(--mono);
  font-size:10px;font-weight:600;color:#FFFFFF;overflow:hidden;min-width:0}
.stk .note{font-size:10.5px;color:var(--ink-4);margin-top:5px;display:block}

.hb{display:flex;flex-direction:column;gap:12px}
.hb .r{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:11px;align-items:center}
.hb .nm{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hb .v{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:right}
.hplot{height:13px;background:var(--track);display:block}
.hplot span{height:13px;display:block}
.callout{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule-2)}
.callout .tx{font-size:11.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}

/* ── admin ──────────────────────────────────────────────────────────────────── */
.rail{width:224px;flex:none;background:var(--surface);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;overflow:auto}
.rail .cap{padding:14px 16px 8px}
.rail .sect{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
  cursor:pointer;padding:11px 16px;border-left:2px solid transparent;color:var(--ink-2)}
.rail .sect:hover{background:var(--hover);text-decoration:none}
.rail .sect.on{background:var(--sel);border-left-color:var(--ink);color:var(--ink)}
.rail .sect .t{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.rail .sect .d{font-size:11px;color:var(--ink-4);margin-top:3px;font-family:var(--mono)}
.rail .sect.on .d{color:var(--ink-3)}

.pane{flex:1;min-width:0;overflow:auto;padding:20px 24px 24px;display:flex;
  flex-direction:column;gap:16px}
.pane[hidden]{display:none}
.ph{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ph h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.ph p{margin:0;font-size:12px;color:var(--ink-3)}

.state{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);
  background:var(--surface)}
.state .st{padding:12px 16px;border-right:1px solid var(--rule);min-width:0}
.state .st:last-child{border-right:0}
.state .v{font-size:14px;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:8px}
.state .v .d{width:7px;height:7px;border-radius:50%;display:block;flex:none}
.state .s{font-size:11px;color:var(--ink-4);margin-top:4px;font-family:var(--mono);
  overflow-wrap:anywhere}

.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.f{display:flex;flex-direction:column;gap:6px}
.f>span{font-size:11px;font-weight:600;color:var(--ink-3)}
.hintline{font-size:11.5px;color:var(--ink-3);display:flex;align-items:flex-start;gap:7px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-2)}
.hintline svg{flex:none;margin-top:1px}

/* interruptor: substitui a checkbox solta */
.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .tr{width:34px;height:19px;border-radius:10px;background:var(--track);position:relative;
  transition:background .12s;flex:none}
.sw .kn{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.28);transition:left .12s}
.sw input:checked+.tr{background:var(--ok)}
.sw input:checked+.tr .kn{left:17px}
.sw input:focus-visible+.tr{outline:2px solid var(--ink-3);outline-offset:2px}
.sw .tx{font-size:12.5px;font-weight:500}

/* status do Redmine: marcadores no lugar da sopa de checkbox */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;
  border:1px solid var(--rule);background:var(--surface);cursor:pointer;font:inherit;
  font-size:11.5px;color:var(--ink-3)}
.tag:hover{border-color:var(--ink-4);color:var(--ink)}
.tag input{position:absolute;opacity:0;width:0;height:0}
.tag .bx{width:12px;height:12px;border:1px solid var(--ink-4);display:flex;align-items:center;
  justify-content:center;flex:none;color:transparent}
.tag.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.tag.on .bx{border-color:var(--surface);background:var(--surface);color:var(--ink)}
.tag .cl{font-size:9.5px;font-family:var(--mono);opacity:.7}

/* tabela de verdade no lugar da lista flex */
.tb{width:100%}
.tb .th,.tb .tr{display:grid;align-items:center;gap:14px;padding:0 16px}
.tb .th{height:30px;background:var(--surface-2);border-bottom:1px solid var(--rule)}
.tb .th span{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-family:var(--mono)}
.tb .tr{min-height:42px;border-bottom:1px solid var(--hair)}
.tb .tr:last-child{border-bottom:0}
.tb .tr:hover{background:var(--hover)}
.tb .cel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.tb .acts{display:flex;gap:2px;justify-content:flex-end}
.tb .empty{padding:22px 16px;color:var(--ink-4);font-size:12px}
.tb-users .th,.tb-users .tr{grid-template-columns:170px minmax(0,1fr) 116px 108px 96px}
.tb-wa .th,.tb-wa .tr{grid-template-columns:minmax(0,1fr) 170px 108px 68px}
.tb-cal .th,.tb-cal .tr{grid-template-columns:110px 130px minmax(0,1fr) 48px}
.tb-metas .th,.tb-metas .tr{grid-template-columns:110px 120px 150px minmax(0,1fr)}
.tb input.num{width:88px;height:30px;padding:0 9px;font:inherit;font-family:var(--mono);font-size:12px;
  color:var(--ink);background:var(--surface);border:1px solid var(--rule);text-align:right}
.tb input.num:focus{outline:0;border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;
  border:1px solid var(--rule);font-size:10.5px;font-weight:600;font-family:var(--mono);
  letter-spacing:.03em;color:var(--ink-3);white-space:nowrap}
.pill .d{width:5px;height:5px;border-radius:50%;display:block;flex:none}
.inline-f{display:inline;margin:0}

.flash{padding:10px 14px;border:1px solid var(--rule);background:var(--surface);font-size:12px;
  display:flex;align-items:center;gap:9px}
.flash.ok{border-left:3px solid var(--ok)}
.flash.warning{border-left:3px solid var(--warn)}

/* ── modal ──────────────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(12,16,23,.55);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:50;animation:fade .1s ease}
.modal{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);
  width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  animation:pop .12s ease}
.modal.wide{max-width:820px}
.modal .mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--rule)}
.modal .mhead h2{margin:0;font-size:13px;font-weight:600}
.modal .mbody{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.modal .mfoot{padding:11px 16px;border-top:1px solid var(--rule);background:var(--surface-2);
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.preview{border:1px solid var(--rule);padding:11px 13px;background:var(--paper);font-size:12px}
.campo{display:flex;flex-direction:column;gap:7px}
/* Colunas do CSV. Classe própria em vez de reaproveitar .tag: lá o estado "on"
   inverte fundo e texto, e com 21 marcadores ligados a caixa vira um paredão —
   além de colidir com qualquer override de fundo. Aqui selecionado é só borda
   firme e caixa preenchida. */
.colunas{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow:auto;
  border:1px solid var(--rule-2);padding:9px;background:var(--paper)}
/* Sem caixinha: o próprio marcador diz se está dentro ou fora. Selecionado usa a
   barra à esquerda, o mesmo idioma da linha selecionada na grade e da seção ativa
   no trilho do admin. */
.colbox{display:inline-flex;align-items:center;height:28px;padding:0 11px;
  border:1px solid var(--rule);background:var(--surface);cursor:pointer;
  font-size:11.5px;color:var(--ink-4);white-space:nowrap;user-select:none}
.colbox:hover{border-color:var(--ink-4);color:var(--ink-2)}
.colbox.on{border-color:var(--ink-3);color:var(--ink);
  box-shadow:inset 2px 0 0 var(--ink)}
.colbox input{position:absolute;opacity:0;width:0;height:0}
.colbox:focus-within{outline:2px solid var(--ink-3);outline-offset:2px}
.campo>.lbl{margin:0}
.modal .seg{width:100%}
.modal .seg button{flex:1;justify-content:center;height:32px}
.preview.err{border-left:3px solid var(--crit);color:var(--crit);font-weight:500}
.hist{display:flex;flex-direction:column;gap:14px}
.hist .e{border-left:2px solid var(--rule);padding-left:12px;display:flex;flex-direction:column;
  gap:4px}
.hist .e .meta{font-size:12px}
.hist .e .meta time{font-family:var(--mono);color:var(--ink-3)}
.hist .e .chg{color:var(--ink-3);font-size:11.5px}
.note{font-size:12.5px;line-height:1.55}
.note img{max-width:100%;margin:6px 0;display:block}
.note ul,.note ol{margin:4px 0 4px 20px}
.sep{border:0;border-top:1px solid var(--rule-2);width:100%;margin:0}

/* ── toast ──────────────────────────────────────────────────────────────────── */
#toasts{position:fixed;right:16px;bottom:38px;z-index:80;display:flex;flex-direction:column;
  gap:8px}
.toast{padding:10px 14px;font-size:12px;font-weight:500;box-shadow:var(--shadow);
  border-left:3px solid var(--ink-3);background:var(--chrome);color:var(--chrome-ink-hi);
  animation:slide .14s ease;max-width:340px;transition:opacity .2s}
.toast.ok{border-left-color:var(--ok)}
.toast.warning{border-left-color:var(--warn)}
.toast.error{border-left-color:var(--crit)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ── login ──────────────────────────────────────────────────────────────────── */
body.login{display:flex;align-items:center;justify-content:center;background:var(--chrome);
  padding:20px;overflow:auto}
.loginwrap{width:100%;max-width:352px;display:flex;flex-direction:column}
/* Marca e nome saem do mesmo currentColor: uma cor só, sem quadrado. */
.brandbig{display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--chrome-ink-hi)}
.brandbig .nm{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.22em}
.tagline{margin:14px 0 22px;text-align:center;font-size:13px;line-height:1.5;
  color:var(--chrome-ink);text-wrap:pretty}
.loginbox{background:var(--surface);border:1px solid var(--rule);width:100%;padding:26px 24px}
.loginbox label{display:block;font-size:11px;font-weight:600;color:var(--ink-3);margin:0 0 6px}
.loginbox .f{margin-bottom:14px}
.loginbox button{width:100%;height:32px;justify-content:center;margin-top:6px}
.loginbox .err{margin-bottom:14px;border-left:3px solid var(--crit);padding:9px 12px;
  font-size:12px;color:var(--crit);background:var(--paper);display:flex;align-items:center;gap:8px}
.loginwrap .rodape{margin-top:20px;text-align:center;font-size:10.5px;color:var(--chrome-ink);
  font-family:var(--mono);opacity:.7}

/* ── barra de abas (celular) ────────────────────────────────────────────────── */
/* Fora do fluxo e com altura fixa, de propósito. Três tentativas de dimensionar esta
   barra com env(safe-area-inset-bottom) — direto, dentro de calc e dentro de max —
   deram altura maior que a pedida no iPhone instalado, com faixa morta embaixo dos
   rótulos. Em vez de insistir, a barra deixou de depender do valor da área segura e
   de somar com o flex do body: ancora no bottom do viewport, que em standalone é a
   borda física da tela, e mede 72px sempre.

   Os 18px de folga do rótulo até a borda não são arbitrários: o indicador de home
   ocupa de ~8px a ~13px, então sobram ~5px de respiro. Zero encostaria nele. */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:35;
  height:var(--tabbar-h);background:var(--chrome);border-top:1px solid #1D242E}
.tabbar a{flex:1;height:100%;padding-bottom:18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:4px;font-size:10.5px;font-weight:500;color:var(--chrome-ink);text-decoration:none}
.tabbar a:hover{text-decoration:none}
.tabbar a.on{color:var(--chrome-ink-hi)}
.tabbar .mk{width:22px;height:2px;background:var(--crit);margin-bottom:-6px;opacity:0}
.tabbar a.on .mk{opacity:1}

/* ── telas estreitas ────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .side{width:320px}
  .ghead,.grow{grid-template-columns:16px 58px minmax(0,1fr) 40px 118px 104px 90px 100px}
  .ghead span.hide-md,.grow .hide-md{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .rowgrid{grid-template-columns:minmax(0,1fr)!important;height:auto!important}
  .rowgrid>*{min-height:260px}
  .sheet{padding:14px;gap:14px}
  .state{grid-template-columns:minmax(0,1fr)}
  .state .st{border-right:0;border-bottom:1px solid var(--rule)}
  .state .st:last-child{border-bottom:0}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── celular ────────────────────────────────────────────────────────────────────
   Nenhuma tabela sobrevive a 390px. A grade vira lista: a mesma marcação, mas
   em flex com quebra, formando três linhas por chamado. A navegação do topo dá
   lugar à barra de abas do rodapé, e o painel lateral vira tela cheia. */
@media(max-width:760px){
  .tabbar{display:flex}
  /* A barra saiu do fluxo: sem devolver a altura aqui, a lista corre por baixo dela.
     O :has deixa a tela de login de fora, que é a única sem abas. */
  body:has(.tabbar){padding-bottom:var(--tabbar-h)}

  /* topo: só a marca e as ações da pessoa; as abas cuidam da navegação */
  .chrome nav{display:none}
  .chrome .mark{padding-right:10px}
  .chrome .who{font-size:10.5px;gap:9px}
  .pagehead{height:48px;padding:0 14px}
  .pagehead .hint{display:none}

  /* Barra de comando numa linha só: era três (mês+sync / botão preto de largura
     inteira / busca). A busca vira ícone e só se abre ao receber o toque. */
  .cmd{height:52px;flex-wrap:nowrap;padding:0 8px 0 12px;gap:6px}
  .cmd #mcur{display:none}
  .cmd #lastsync{display:none}
  .cmd #btn-novo span,.cmd #btn-sync span,.cmd #btn-export span{display:none}
  .cmd .btn{padding:0;width:36px;height:36px;justify-content:center;border-color:transparent}
  .cmd .btn.pri{border-color:var(--ink)}
  .cmd .stepper{border:0}
  .cmd .stepper .m{border:0;padding:0 4px;font-size:12.5px}
  .cmd .stepper button,.cmd .stepper .m{height:32px}
  .cmd .find{min-width:0;flex:0 0 36px;width:36px;padding:0;justify-content:center;
    border-color:transparent;height:36px;color:var(--ink-3)}
  .cmd .find input,.cmd .find .kbd{display:none}
  .cmd .find:focus-within{flex:1 1 auto;width:auto;padding:0 10px;justify-content:flex-start;
    border-color:var(--ink-3)}
  .cmd .find:focus-within input{display:block}
  .chips{height:42px;padding-left:0}
  .chip{flex:1;justify-content:center;padding:0 6px;font-size:12.5px;gap:6px}
  .chip.on::after{left:6px;right:6px}
  .ggroup .nota{display:none}
  /* O nome de quem está logado sai (não cabe), mas a versão FICA: é como se confere,
     no aparelho, se o app instalado pegou o deploy novo. O pwa.js acrescenta ali a
     versão que o service worker tem em cache quando ela diverge da do servidor. */
  .chrome .who{display:flex}
  .chrome .who > span:not(.ver){display:none}
  .chrome .who .ver{opacity:1}
  footer.stat{display:none}

  /* O TÍTULO PRIMEIRO, porque é o que se lê. O resto desce para uma linha de
     apoio em monoespaçada: número · relógio · consumo. Saem a situação e o
     responsável (o cabeçalho do grupo já diz os dois) e some a barra — o
     percentual sozinho já responde. */
  .ghead{display:none}
  .grow{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;height:auto;
    min-height:70px;padding:11px 14px}
  .grow .hide-sm{display:none}
  .grow .sub,.grow .dim{display:none}
  .grow .ttl{order:1;width:100%;font-size:14px;line-height:1.35;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .grow .dot{order:2;margin-top:8px;width:7px;height:7px}
  .grow .num{order:3;margin-top:8px;font-size:12px;font-weight:600}
  .grow .venc{order:4;display:inline;margin-top:8px;font-family:var(--mono);font-size:12px;
    color:var(--ink-3)}
  .grow .venc::before{content:"·";color:var(--ink-4);opacity:.55;margin-right:8px}
  .grow .cd{order:5;margin-top:8px;margin-left:0;font-size:12px;font-weight:600;
    color:var(--ink-2)}
  .grow .cd::before{content:"·";color:var(--ink-4);opacity:.55;margin-right:8px}
  .grow .meter{order:6;margin-top:8px;flex:none;width:auto}
  .grow .meter .tk{display:none}
  .grow .meter::before{content:"·";color:var(--ink-4);opacity:.55;
    font-family:var(--mono);font-size:12px}
  .grow .meter .pc{width:auto;font-size:12px}
  /* sem a barra, é o número que passa a carregar o sinal */
  .grow .meter.n-ok .pc{color:var(--ok)}
  .grow .meter.n-warn .pc{color:var(--warn)}
  .grow .meter.n-crit .pc{color:var(--crit)}
  .grow .meter.n-idle .pc{color:var(--ink-4)}
  /* Prioridade sempre visível. Urgente e alta ganham caixa e cor; normal e baixa
     ficam como texto apagado — presentes, sem virar ruído em toda linha. */
  .grow .pri{order:7;margin-top:8px;margin-left:auto;padding:1px 5px;
    border:1px solid currentColor;font-size:9.5px}
  .grow .pri.p-dim{border:0;padding:0;color:var(--ink-4)}
  .ggroup{top:0}

  /* detalhe: tela cheia, não painel lateral */
  .side{position:fixed;inset:0;z-index:40;width:auto;max-height:none;border:0;display:none}
  .side.aberto{display:flex}
  /* Em tela cheia o painel cobre inset:0, barra de status inclusive. Sem somar a área
     segura ao topo, o número do chamado e o link do Redmine nascem debaixo do relógio
     e do sinal — ilegíveis e fora do alcance do toque. */
  .side .hd{padding:calc(14px + env(safe-area-inset-top)) 14px 12px}
  .side .bigcd{font-size:38px}
  .side .ft{padding-bottom:28px}   /* 10 de base + 18 de folga do indicador de home */
  .side .ft .btn{height:44px}
  .kv{grid-template-columns:92px minmax(0,1fr)}
  .kv dd{font-size:13.5px}

  /* Modal: o overlay cobre inset:0, barra de status inclusive. Com o modal centrado e
     limitado a 90vh, a folga do topo fica em ~5vh (~42px) — menos que a Dynamic Island
     (~59px), e o cabeçalho, onde mora o botão de fechar, nasce debaixo dela. O padding
     de cima passa a somar a área segura (mesmo padrão que resolveu o painel de detalhe);
     o de baixo fica fixo, que é o que sobreviveu na barra de abas. Com o topo já
     protegido, 100% mede o espaço que restou dentro do overlay. */
  .overlay{padding:calc(14px + env(safe-area-inset-top)) 12px 20px}
  .modal{max-height:100%}

  /* dashboard */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{min-height:104px;padding:12px 13px 11px}
  .tile .hero{font-size:32px}
  .tile .foot{font-size:10.5px;line-height:1.35}
  .fila .r{grid-template-columns:auto minmax(0,1fr) 52px;gap:7px 10px}
  .fila .r .plot{grid-column:1 / -1}
  .fila .r .flag{display:none}
  .stk .r{grid-template-columns:56px minmax(0,1fr)}
  .hb .r{grid-template-columns:58px minmax(0,1fr) 50px}

  /* admin: trilho vira faixa de abas, tabela vira um bloco por pessoa */
  .body{flex-direction:column}
  .col{min-height:0}
  .rail{width:auto;flex:none;height:46px;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--rule)}
  .pane{flex:1;min-height:0}
  .rail .cap{display:none}
  .rail .sect{width:auto;white-space:nowrap;border-left:0;border-bottom:2px solid transparent;
    padding:0 16px;display:flex;align-items:center;min-height:46px}
  .rail .sect .d{display:none}
  .rail .sect.on{border-left:0;border-bottom-color:var(--ink)}
  .pane{padding:14px}
  .fields{grid-template-columns:minmax(0,1fr)!important}
  .f input,.adm input{height:44px;font-size:15px}
  .tb .th{display:none}
  .tb .tr{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 9px;
    padding:12px 13px;min-height:64px}
  .tb .cel{white-space:normal}
  .tb .cel.primary{flex:1 1 100%;order:-1;font-size:14px}
  .tb .acts{margin-left:auto}
  .tb .ib{width:40px;height:40px}
  .card .ft .btn,.card .hd .btn{height:44px}

  /* login */
  .loginwrap{max-width:100%}
  .loginbox{padding:22px 18px}
  .loginbox input{height:52px;font-size:16px}
  .loginbox button{height:52px;font-size:16px}
  .brandbig .nm{font-size:14px}
}

/* ── instalar (PWA) ─────────────────────────────────────────────────────────────
   O Android ganha um botão no header, à esquerda do tema, criado pelo pwa.js e vivo só
   enquanto o Chrome oferece a instalação. O iPhone não tem prompt: no lugar dele vai uma
   faixa ensinando Compartilhar › Adicionar à Tela de Início, dispensável de uma vez por
   todas. Os dois moram sobre o --chrome, escuro nos dois temas — por isso usam a tinta de
   cabeçalho, e não a de conteúdo. */
#btn-instalar{color:var(--chrome-ink-hi);animation:fade .2s ease}

/* Abaixo do painel de detalhe (40) e do modal (50): a faixa é convite, não obstáculo. */
#ios-dica{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  align-items:flex-start;gap:10px;font-size:12px;line-height:1.5;
  padding:11px 10px 29px 14px;
  background:var(--chrome);color:var(--chrome-ink-hi);box-shadow:var(--shadow);
  animation:pop .18s ease}
#ios-dica p{margin:0;flex:1;text-wrap:pretty}
#ios-dica b{font-weight:600}
#ios-dica .gl{vertical-align:-3px}
/* Alvo de toque de 34px, recuado para a margem óptica bater com a do texto. */
#ios-dica .fechar{flex:none;width:34px;height:34px;margin:-7px -7px 0 0;border:0;
  background:transparent;cursor:pointer;color:var(--chrome-ink);display:flex;
  align-items:center;justify-content:center}
#ios-dica .fechar:hover{color:var(--chrome-ink-hi)}
@media(max-width:760px){
  /* Encostada na tabbar, cujos 56px de link somam a área segura do rodapé — o mesmo
     cálculo dela, senão a faixa cavalga a barra. O :has poupa o vão na tela de login, a
     única sem tabbar, onde a faixa cobre a área segura por conta própria. */
  body:has(.tabbar) #ios-dica{bottom:var(--tabbar-h);padding-bottom:11px}
}