/* Visual do Flow: Sora (títulos) + DM Sans (texto), navy #101847 / turquesa #138e8a, cartões 14px. */
:root{
  --bg:#f4f6fb;--surface:#fff;--fg:#101847;--muted:#6b7495;--line:#dbe1ea;--soft:#eef1f6;
  --navy:#101847;--navy2:#0e1540;--accent:#138e8a;--accent-soft:#e3f4f3;
  --ok:#047857;--ok-bg:#ecfdf5;--warn:#92400e;--warn-bg:#fffbeb;--bad:#9f1239;--bad-bg:#fff1f2;--off:#64748b;--off-bg:#f1f5f9;
  --cab-bg:#0e1540;--cab-panel:#111d52;--cab-line:rgba(255,255,255,.12);--cab-fg:#eef1f6;--cab-dim:#8892aa;
  --display:'Sora',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{--bg:#0b1030;--surface:#121a46;--fg:#eef1f6;--muted:#9aa3c0;--line:#26306a;--soft:#182159;--accent:#36b3ae;--accent-soft:#113b3e;--ok:#6ee7b7;--ok-bg:#0b3b2e;--warn:#fcd34d;--warn-bg:#3b2d0b;--bad:#fda4af;--bad-bg:#3f0d1b;--off:#a7b1c7;--off-bg:#1e2752;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--body);padding-inline:16px;padding-block:20px calc(48px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:1120px;margin:0 auto}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
a{color:var(--accent)}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-size:12px}
.dim{color:var(--muted)}
.oculto{display:none!important}

/* ---- cabeçalho ---- */
.topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.marca{font-family:var(--display);font-weight:600;font-size:16px;display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.marca .logo{width:30px;height:30px;border-radius:8px;display:block;flex:none}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap}
.abas{display:flex;gap:4px}
.abas button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;padding:5px 12px;font-size:12.5px}
.abas button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-color-scheme:dark){.abas button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#06201f}}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:9px;padding:7px 12px;font-size:13px;font-weight:500;text-decoration:none}
.btn.primario{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.perigo{border-color:#f5a3b5;color:var(--bad)}
.btn:disabled{opacity:.45;cursor:default}
.btn svg{width:14px;height:14px}

/* ---- cartões e avisos ---- */
.cartao{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.aviso{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13.5px}
.aviso.atencao{background:var(--warn-bg);color:var(--warn)}
.aviso.info{background:var(--accent-soft);color:var(--accent)}
.aviso.critico{background:var(--bad-bg);color:var(--bad)}
.aviso b{font-weight:600}
.aviso .q{margin-left:auto;white-space:nowrap;font-size:12px;opacity:.85}
.aviso svg{width:16px;height:16px;flex:none;margin-top:2px}
.geral{display:flex;align-items:center;gap:12px;padding:16px 18px;font-family:var(--display);font-weight:600;font-size:16px}
.geral .st{width:12px;height:12px;border-radius:50%;background:var(--ok);flex:none}
.geral .st.w{background:#d97706}.geral .st.d{background:#be123c}.geral .st.n{background:var(--off)}
.geral small{font-family:var(--body);font-weight:400;color:var(--muted);font-size:12.5px;margin-left:auto}
.janelas{display:flex;gap:4px;padding:0 18px 10px}
.janelas button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:6px;padding:3px 9px;font-size:12px}
.janelas button[aria-selected="true"]{background:var(--soft);color:var(--fg)}

/* ---- lista de serviços (público) ---- */
.svc{display:grid;grid-template-columns:210px 1fr 76px;gap:14px;align-items:center;padding:10px 18px;border-top:1px solid var(--line);font-size:13.5px}
@media (max-width:640px){.svc{grid-template-columns:1fr 76px}.svc .barras{grid-column:1/-1}}
.svc .nm{display:flex;align-items:center;gap:8px;font-weight:500;min-width:0}
.svc .nm small{color:var(--muted);font-weight:400;font-size:11.5px;display:block}
.pt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ok)}
.pt.w{background:#d97706}.pt.d{background:#be123c}.pt.o{background:var(--off)}
.barras{display:flex;gap:2px;height:26px;min-width:0}
.barras i{flex:1;border-radius:2px;background:var(--ok);opacity:.85;min-width:0}
.barras i.w{background:#d97706}.barras i.d{background:#be123c}.barras i.n{background:var(--line)}
.svc .pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-family:var(--display);font-size:13px}
.svc .pct small{display:block;color:var(--muted);font-weight:400;font-family:var(--body);font-size:11px}
.leg{display:flex;gap:14px;padding:8px 18px 14px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:4px;background:var(--ok)}
.leg i.w{background:#d97706}.leg i.d{background:#be123c}.leg i.n{background:var(--line)}
.inc{border-top:1px solid var(--line);padding:14px 18px}
.inc h4{margin:0 0 10px;font:600 11px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.inc-i{display:grid;grid-template-columns:120px 1fr;gap:4px 14px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
@media (max-width:480px){.inc-i{grid-template-columns:1fr}}
.inc-i time{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.inc-i .t{font-weight:600}
.inc-i .u{color:var(--muted);font-size:12.5px}
.inc-i .u b{color:var(--fg);font-weight:500}
.rodape{padding:10px 18px 14px;font-size:11.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.vazio{padding:28px 18px;color:var(--muted);font-size:13.5px;text-align:center}

/* iPhone: campo com fonte menor que 16px faz o Safari dar zoom ao focar e a tela "pula". */
@media (max-width:768px){input,select,textarea{font-size:16px}}

/* ---- login ---- */
.login{max-width:380px;margin:40px auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.login h1{font-size:20px;margin-bottom:4px}
.login p{margin:0 0 16px;color:var(--muted);font-size:13.5px}
.campo{display:grid;gap:4px;margin-bottom:12px;font-size:13px}
.campo input,.campo select,.campo textarea{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--fg);width:100%}
.escolha-btn{width:100%;justify-content:flex-start;gap:12px;padding:14px 16px;border-radius:12px;margin-bottom:10px;text-align:left;min-height:64px}
.escolha-btn svg{width:22px;height:22px;flex:none}
.escolha-btn span{display:grid;gap:2px;line-height:1.3}
.escolha-btn b{font-family:var(--display);font-weight:600;font-size:14.5px}
.escolha-btn small{font-weight:400;font-size:12px;opacity:.8}
.escolha-btn.primario small{color:rgba(255,255,255,.85)}
.btn.voltar{width:100%;justify-content:center;margin-top:10px;background:transparent}
.erro{background:var(--bad-bg);color:var(--bad);border-radius:9px;padding:9px 11px;font-size:13px;margin-bottom:12px}

/* ---- painel do operador (moldura escura da sidebar do Flow) ---- */
.cab{background:var(--cab-bg);color:var(--cab-fg);border-radius:16px;border:1px solid var(--cab-line);overflow:hidden}
.cab .dim{color:var(--cab-dim)}
.cab-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cab-line)}
@media (max-width:640px){.cab-sum{grid-template-columns:repeat(2,1fr)}}
.cab-sum div{background:var(--cab-bg);padding:12px 16px}
.cab-sum .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cab-dim)}
.cab-sum .v{font-family:var(--display);font-size:22px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.cab-sum .v small{font-size:12px;font-weight:400;color:var(--cab-dim);margin-left:6px;font-family:var(--body)}
.cab-body{display:grid;grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:900px){.cab-body{grid-template-columns:1fr}}
.cab-lista{border-top:1px solid var(--cab-line)}
.linha{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:11px 14px;border-bottom:1px solid var(--cab-line);cursor:pointer;font-size:13px}
.linha:hover{background:rgba(255,255,255,.04)}
.linha[aria-selected="true"]{background:rgba(45,212,191,.08)}
.linha .n{font-family:var(--display);font-weight:600;font-size:14px}
.linha .meta{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--cab-dim);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 9px;font:600 11px var(--body);letter-spacing:.03em;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.UP{background:rgba(52,211,153,.16);color:#6ee7b7}
.pill.DEGRADADO{background:rgba(251,191,36,.16);color:#fcd34d}
.pill.DOWN{background:rgba(251,113,133,.18);color:#fda4af}
.pill.PARADO{background:rgba(148,163,184,.16);color:#cbd5e1}
.bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);width:72px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:6px}
.bar i{display:block;height:100%;background:#2dd4bf}
.bar i.hi{background:#fbbf24}
.cab-side{border-left:1px solid var(--cab-line);border-top:1px solid var(--cab-line);background:var(--cab-panel);min-width:0}
@media (max-width:900px){.cab-side{border-left:0}}
.cab-side h4{margin:0;font:600 11px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--cab-dim);padding:14px 16px 8px}
.cab-abas{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--cab-line);position:sticky;top:0;background:var(--cab-panel);z-index:2}
.cab-abas button{flex:1;border:1px solid transparent;background:transparent;color:var(--cab-dim);border-radius:9px;padding:8px 6px;font:500 12.5px var(--body);min-height:36px}
.cab-abas button[aria-selected="true"]{background:rgba(255,255,255,.08);color:#fff;border-color:var(--cab-line)}
.sel-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 4px}
.sel-cab h3{font-size:16px;font-weight:600;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel{padding:0 16px 10px;font-size:12.5px;color:var(--cab-dim);display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.sel b{color:#fff;font-weight:500;word-break:break-all}
.saude{padding:0 16px 14px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.saude div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--cab-line);padding-bottom:5px}
.saude .ruim{color:#fda4af}.saude .bom{color:#6ee7b7}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 14px}
.acts button{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid var(--cab-line);color:#fff;border-radius:10px;padding:10px 11px;font-size:12.5px;text-align:left}
.acts button:hover{background:rgba(255,255,255,.12)}
.acts button.perigo{border-color:rgba(251,113,133,.5)}
.acts button:disabled{opacity:.4;cursor:default}
.acts button svg{width:15px;height:15px;flex:none}
.confirm{margin:0 16px 14px;padding:12px;border:1px solid rgba(251,191,36,.5);border-radius:10px;background:rgba(251,191,36,.08);font-size:12.5px}
.confirm .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.confirm button{border-radius:8px;padding:7px 12px;font:600 12px var(--body);border:1px solid var(--cab-line);background:transparent;color:#fff}
.confirm button.go{background:#fbbf24;color:#1a1200;border-color:#fbbf24}
.confirm input{font:inherit;padding:7px 9px;border-radius:8px;border:1px solid var(--cab-line);background:rgba(0,0,0,.25);color:#fff;width:100%;margin-top:8px}
.logs{margin:0 16px 16px;background:#070b26;border:1px solid var(--cab-line);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:#c7d0ee;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.tl{list-style:none;margin:0;padding:0 16px 16px;font-size:12.5px;max-height:300px;overflow:auto}
.tl li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--cab-line)}
.tl time{font-family:var(--mono);font-size:11.5px;color:var(--cab-dim)}
.tl .who{color:var(--cab-dim)}
.grafico{margin:0 16px 14px;background:rgba(0,0,0,.2);border:1px solid var(--cab-line);border-radius:10px;padding:8px}
.grafico svg{display:block;width:100%;height:120px}
.grafico .leg{padding:4px 2px 0;color:var(--cab-dim)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:10px;padding:10px 16px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:92vw}
.form-aviso{padding:0 16px 16px;display:grid;gap:8px;font-size:12.5px}
.form-aviso input,.form-aviso select,.form-aviso textarea{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--cab-line);background:rgba(0,0,0,.25);color:#fff;width:100%}
.form-aviso .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aviso-op{display:flex;gap:8px;align-items:center;padding:6px 16px;font-size:12.5px;border-bottom:1px dashed var(--cab-line)}
.aviso-op button{margin-left:auto;background:transparent;border:1px solid var(--cab-line);color:#fff;border-radius:7px;padding:3px 8px;font-size:11px}
@media (prefers-reduced-motion:no-preference){.pill.BUSY::before{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.2}}}

/* ---- celular (<=768px): menu do topo vira barra fixa embaixo, alcance do polegar ---- */
@media (max-width:768px){
  body{padding-inline:12px;padding-block:14px calc(96px + env(safe-area-inset-bottom,0px))}
  .topo{margin-bottom:12px}
  .marca{font-size:15px}
  .marca .logo{width:34px;height:34px;border-radius:10px}
  .topo .dir{
    position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
    padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,24,71,.08)
  }
  .topo .dir .dim{order:-1;flex-basis:100%;text-align:center;font-size:11px;line-height:1.2;color:var(--muted)}
  .topo .dir .abas{flex:1 1 auto;gap:6px}
  .topo .dir .abas button{flex:1;min-height:40px;border-radius:10px;font-size:13px;font-weight:500}
  .topo .dir .btn{min-height:40px;padding:0 13px;border-radius:10px}
  .toast{bottom:calc(104px + env(safe-area-inset-bottom,0px))}

  /* cartões: cantos mais fechados, toque de 44px nas ações, grades em uma coluna */
  .cartao,.cab{border-radius:12px}
  .geral{padding:14px}
  .geral small{flex-basis:100%;margin-left:24px;margin-top:-6px}
  .janelas{padding:0 14px 10px;overflow-x:auto;scrollbar-width:none}
  .janelas::-webkit-scrollbar{display:none}
  .janelas button{flex:none;min-height:32px;padding:0 12px}
  .svc,.aviso,.inc,.leg,.rodape{padding-inline:14px}
  .cab-sum div{padding:11px 14px}
  .cab-sum .v{font-size:20px}
  .linha{padding:13px 14px;font-size:13.5px}
  .cab-side h4{padding:16px 14px 8px}
  .cab-abas{padding:8px 10px}
  .cab-abas button{min-height:40px;font-size:13px}
  .sel-cab{padding:14px 14px 2px}
  .sel,.saude,.acts,.form-aviso,.tl{padding-inline:14px}
  .acts{grid-template-columns:1fr 1fr;gap:10px}
  .acts button{min-height:46px;padding:10px 12px;font-size:13.5px;border-radius:12px}
  .confirm,.logs,.grafico{margin-inline:14px}
  .confirm button{min-height:40px}
  .form-aviso .row{grid-template-columns:1fr}
  .form-aviso input,.form-aviso select,.form-aviso textarea,.confirm input{padding:11px 12px;border-radius:10px}
  .aviso-op{padding-inline:14px}
  .aviso-op button{min-height:34px;padding:0 10px}
  .tl{max-height:none}
  .logs{max-height:220px}

  /* login centrado, logo em destaque */
  .login{margin:12px auto 24px;padding:22px 18px;border-radius:16px}
  .login .btn{min-height:46px}
  .campo input{padding:12px}
  body.pag-login .topo{justify-content:center;margin:18px 0 8px}
}