:root{
  --ground:#0A0E1A;
  --raise:#111726;
  --edge:#1E2740;
  --edge-soft:#161D30;
  --ink:#EDF1FA;
  --ink-2:#A8B6D4;
  --ink-3:#6B7A9B;

  --live:#EDFF81;   /* a única cor ousada — só estado ao vivo */
  --act:#5468FF;    /* azul da marca — só o que é clicável */
  --ok:#3ECF8E;
  --warn:#E8A33D;
  --crit:#E5484D;

  --sans:'Archivo','Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','Consolas',monospace;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:0 22px 72px;
}
.wrap{max-width:960px;margin:0 auto}

.lbl{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ---------------- barra de identificação ---------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:11px}
.brand b{font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.topbar-dir{display:flex;align-items:center;gap:16px}
.heartbeat{display:flex;align-items:center;gap:7px}
.heartbeat .d{width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.heartbeat.ok .d{background:var(--ok);animation:hb 2.4s ease-in-out infinite}
.heartbeat.sem_contato .d{background:var(--crit)}
@keyframes hb{0%,100%{opacity:1}50%{opacity:.28}}
.link-sair{background:none;border:0;color:var(--ink-3);font-family:var(--mono);font-size:11px;cursor:pointer;padding:0}
.link-sair:hover{color:var(--ink)}

/* ---------------- herói ---------------- */
.hero{border-top:1px solid var(--edge);padding:32px 0 26px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
/* No celular a bomba fica AO LADO do texto, e não numa linha só dela:
   empilhada, ela ocupava uma faixa inteira encostada à esquerda, com
   ~250px vazios ao lado. Mantendo as duas colunas, o bloco encolhe
   quase à metade e o celular fica coerente com o desktop. */
@media (max-width:680px){.hero{gap:14px;padding:24px 0 20px}}

.state-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:13px;color:var(--ink-3)}
.state-tag .beat{width:8px;height:8px;border-radius:50%;background:currentColor}
.state-tag.rodando{color:var(--live)}
.state-tag.rodando .beat{animation:beat 2s ease-out infinite}
.state-tag.alerta{color:var(--crit)}
@keyframes beat{
  0%{box-shadow:0 0 0 0 rgba(237,255,129,.5)}
  70%{box-shadow:0 0 0 9px rgba(237,255,129,0)}
  100%{box-shadow:0 0 0 0 rgba(237,255,129,0)}
}

h1{font-size:clamp(32px,5.4vw,54px);font-weight:700;line-height:1;letter-spacing:-.035em;margin:0;text-wrap:balance}
/* Menor no celular porque agora divide a linha com a bomba. */
@media (max-width:680px){h1{font-size:26px;line-height:1.1}}
.hero-meta{margin:12px 0 0;color:var(--ink-2);font-size:15px;min-height:1.5em}
.hero-meta b{color:var(--ink);font-weight:600}
.elapsed{margin-top:18px;display:flex;align-items:baseline;gap:10px}
.elapsed .v{font-family:var(--mono);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------------- a bomba ---------------- */
.pump{width:150px;flex:none;justify-self:end}
@media (max-width:680px){.pump{width:74px}}
.liquid{
  /* `transform-box: fill-box` e obrigatorio: sem ele o transform-origin
     em SVG resolve contra o viewBox, e o liquido crescia a partir do pe
     da bomba (y=186) em vez do fundo do visor (y=122). */
  transform-box:fill-box;
  transform-origin:center bottom;
  transform:scaleY(var(--nivel,0));
  transition:transform 900ms cubic-bezier(.22,.75,.3,1);
}
.surface{animation:slosh 3.4s ease-in-out infinite;animation-play-state:paused}
body.rodando .surface{animation-play-state:running}
@keyframes slosh{0%,100%{transform:translateX(-2.2px)}50%{transform:translateX(2.2px)}}
.readout{font-family:var(--mono);font-size:12px;font-weight:600;fill:var(--live);font-variant-numeric:tabular-nums}
.glass{fill:#080C16}
.shell{fill:#161D30;stroke:#26314F;stroke-width:1}
.trim{stroke:#26314F;stroke-width:1;fill:none}
.hose{stroke:#26314F;stroke-width:2.5;fill:none;stroke-linecap:round}

/* ---------------- filiais ---------------- */
.fleet{padding:20px 0 24px;border-top:1px solid var(--edge-soft)}
.fleet-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.fleet-head .n{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.fleet-head .n b{color:var(--live);font-weight:600}
/* padding-bottom abre espaço para os códigos das filiais, que ficam
   fora da marca para não competir com o preenchimento dela. */
.ticks{display:flex;gap:5px;align-items:flex-end;padding-bottom:15px}
.tick{flex:1;min-width:0;height:34px;border-radius:2px;background:var(--edge-soft);border-bottom:2px solid var(--edge);position:relative}
.tick .cd{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.01em;color:var(--ink-3);font-variant-numeric:tabular-nums;pointer-events:none}
.tick.done .cd{color:var(--ok)}
.tick.now .cd{color:var(--live)}
/* No celular as 19 marcas ficam estreitas demais para os códigos —
   melhor a barra limpa do que rótulos sobrepostos. */
@media (max-width:640px){.tick{height:26px}.tick .cd{display:none}.ticks{padding-bottom:0}}
.tick.done{background:linear-gradient(180deg,#2A6E52 0%,#1C4C39 100%);border-bottom-color:var(--ok)}
.tick.now{background:linear-gradient(180deg,#6E7233 0%,#4A4D20 100%);border-bottom-color:var(--live)}
.tick.now::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--live);opacity:.14;animation:working 1.5s ease-in-out infinite}
@keyframes working{0%,100%{opacity:.05}50%{opacity:.24}}

/* ---------------- resultado ---------------- */
/* ---------------- ultima execucao (cartao) ----------------
   A faixa da esquerda codifica o desfecho: verde deu certo, cinza
   parou sem ter dado errado, ambar/vermelho pedem atencao. A cor de
   alerta deixa de ser gasta no cancelamento, que e acao deliberada. */
.cartao{border-left:3px solid var(--ink-3);background:var(--raise);border-radius:0 8px 8px 0;
  padding:18px 22px;margin:26px 0}
.cartao.ok{border-left-color:var(--ok)}
.cartao.atencao{border-left-color:var(--warn)}
.cartao.ruim{border-left-color:var(--crit)}
.cartao-topo{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:4px;flex-wrap:wrap}
.cartao-estado{font-size:17px;font-weight:600}
.cartao.ok .cartao-estado{color:var(--ok)}
.cartao.atencao .cartao-estado{color:var(--warn)}
.cartao.ruim .cartao-estado{color:var(--crit)}
.cartao-quando{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.cartao-resumo{color:var(--ink-2);font-size:14px;line-height:1.55}
.cartao-secundario{display:flex;gap:22px;flex-wrap:wrap;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--edge-soft)}
.cartao-secundario:empty{display:none}
.cartao-item{font-size:12.5px;color:var(--ink-3)}
.cartao-item b{color:var(--ink-2);font-weight:500}
.cartao-item b.ok{color:var(--ok)}
.cartao-item b.warn{color:var(--warn)}
@media (max-width:560px){.cartao-secundario{gap:6px 18px}}


/* ---------------- avisos ---------------- */
.alert{display:flex;gap:14px;border-left:2px solid var(--warn);background:rgba(232,163,61,.055);padding:14px 16px;border-radius:0 4px 4px 0;margin-bottom:22px}
.alert.info{border-left-color:var(--act);background:rgba(84,104,255,.06)}
.alert .t{font-weight:600;font-size:14.5px;margin:0 0 3px}
.alert .m{color:var(--ink-2);font-size:13.5px;margin:0}

/* ---------------- ações ---------------- */
.acts{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding-bottom:30px}
button{font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;border-radius:5px;padding:11px 20px;border:1px solid transparent;transition:background 140ms ease,border-color 140ms ease}
button:focus-visible{outline:2px solid var(--act);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
.b-run{background:var(--act);color:#fff}

/* ---------------- falha e bloqueio ---------------- */
.state-tag.falhou .beat{background:var(--warn,#E0A33E)}
.state-tag.falhou{color:var(--warn,#E0A33E)}
.contagem{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:15px;
  color:var(--warn,#E0A33E);font-variant-numeric:tabular-nums}
.bloqueio{margin:18px 0 0;padding:13px 16px;border:1px solid var(--warn,#E0A33E);
  border-radius:6px;background:rgba(224,163,62,.08);font-size:14px;line-height:1.5}

/* ---------------- como o robo se comporta ---------------- */
.comportamento{border-top:1px solid var(--edge);margin-top:26px;padding-top:20px}
.comportamento-titulo{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.comp-item{padding:9px 0;border-bottom:1px solid var(--edge-soft)}
.comp-item:last-child{border-bottom:0}
.comp-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.comp-rotulo{font-size:14px}
.comp-valor{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-align:right}
.comp-detalhe{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:3px;max-width:62ch}
.comportamento-nota{margin-top:14px;font-size:12px;color:var(--ink-3);font-style:italic}
/* Discreta de propósito: é uma exceção, não uma opção do dia a dia. */
.opt{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);cursor:pointer;user-select:none}
.opt:hover{color:var(--ink-2)}
/* Caixa desenhada: a nativa vira um quadrado branco no tema escuro e
   pesa mais que o proprio rotulo. */
.opt input{appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;
  width:15px;height:15px;border:1px solid var(--edge);border-radius:3px;
  background:transparent;display:grid;place-content:center;transition:.15s}
.opt:hover input{border-color:var(--ink-3)}
.opt input:checked{background:var(--act);border-color:var(--act)}
.opt input:checked::after{content:"";width:8px;height:4px;margin-top:-2px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.opt input:focus-visible{outline:2px solid var(--act);outline-offset:2px}
@media (max-width:680px){.opt{font-size:12px}}
.b-run:hover:not(:disabled){background:#4356e8}
.b-stop{background:transparent;color:var(--crit);border-color:rgba(229,72,77,.4)}
.b-stop:hover:not(:disabled){background:rgba(229,72,77,.1)}
.b-quiet{background:transparent;color:var(--ink-2);border-color:var(--edge)}
.b-quiet:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.acts .spacer{flex:1}
.acts .hint{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* ---------------- histórico ---------------- */
.hist{border-top:1px solid var(--edge);padding-top:24px}
.hist-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.row{display:grid;grid-template-columns:96px 8px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--edge-soft)}
.row:last-child{border-bottom:0}
@media (max-width:640px){.row{grid-template-columns:78px 8px 1fr}.row .tail{display:none}}
.row .when{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.row .mk{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.row .mk.ok{background:var(--ok)}
.row .mk.warn{background:var(--warn)}
.row .mk.erro{background:var(--crit)}
.row .txt{font-size:14px}
.row .txt .sub{color:var(--ink-3);font-size:12.5px}
.row .tail{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vazio{color:var(--ink-3);font-size:14px;padding:14px 0}

/* ---------------- configurações ---------------- */
.cfg-fundo{position:fixed;inset:0;background:rgba(5,8,16,.72);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;z-index:10}
.cfg{background:var(--raise);border:1px solid var(--edge);border-radius:8px;padding:26px;width:100%;max-width:460px}
.cfg h2{font-size:19px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.cfg .sub{color:var(--ink-3);font-size:13.5px;margin:0 0 22px}
.campo{margin-bottom:16px}
.campo label{display:block;margin-bottom:6px}
.campo input{width:100%;background:var(--ground);border:1px solid var(--edge);border-radius:5px;padding:9px 11px;color:var(--ink);font-size:14px;font-family:var(--mono)}
.campo input:focus{outline:none;border-color:var(--act)}
.campo .dica{font-size:12px;color:var(--ink-3);margin-top:5px}
.cfg-sep{border:0;border-top:1px solid var(--edge);margin:22px 0}
.cfg-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.cfg-msg{font-size:13.5px;margin-top:14px;min-height:1.2em}
.cfg-msg.ok{color:var(--ok)}
.cfg-msg.erro{color:var(--crit)}

/* ---------------- login ---------------- */
.login-tela{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-caixa{width:100%;max-width:330px}
.login-caixa h1{font-size:26px;margin:0 0 6px}
.login-caixa .sub{color:var(--ink-3);font-size:14px;margin:0 0 28px}
.login-caixa button{width:100%;margin-top:8px}
.login-erro{color:var(--crit);font-size:13.5px;margin-top:14px;min-height:1.2em}

@media (prefers-reduced-motion:reduce){
  .surface,.heartbeat .d,.state-tag.rodando .beat,.tick.now::after{animation:none !important}
  .liquid{transition:none}
}

/* Botão que abre a janela das credenciais: ocupa a largura do campo,
   como os inputs que ele substituiu. */
.b-quiet.largo{width:100%;justify-content:center}
/* A janela das credenciais é menor que a de configurações — são quatro
   campos, não uma tela inteira. Fica acima dela, porque abre por cima. */
.cfg.estreito{max-width:430px}
#credFundo{z-index:20}