/* cockgit — observa-planta-v2.css
   vista /nova · aba Agentes · a PLANTA V2 "fábrica grande" em ?planta=v2 (#945):
   app-observa-planta-v2-*.js. A Planta atual (observa-planta3d*.css) não muda.

   Regras que moram aqui:
     · a cena OCUPA A ALTURA LIVRE da aba (`--ag-livre`, medida em app-observa.js), sem
       rolagem: a interface fica POR CIMA dela, em camadas absolutas;
     · a PLACA ANDON é escura nos dois temas (placa de fábrica, como no protótipo aprovado);
       o resto segue os tokens do painel (claro e escuro do mesmo :root);
     · nada pisca: a lâmpada é cor fixa; o texto do monitor entra devagar (0,9 s) e, com
       movimento reduzido, entra parado;
     · sem rolagem lateral: tudo quebra linha e cabe, do 1920 ao celular 375. */

  #nv-ag[data-vista="planta"]:has(>.pf){height:var(--ag-livre,auto);min-height:0}
  .pf{position:relative;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;background:var(--bg);
    --pf-placa:#20272f;--pf-placa-tx:#e8edf1;--pf-placa-tx2:#a3b0bd;--pf-placa-linha:#36414c;
    --pf-tela:#0f1519;--pf-tela-tx:#d6e2dc;--pf-tela-tx2:#8ea39e;--pf-ok:#8fd19e;--pf-ambar:#e8b866;
    --pf-sombra:0 6px 24px color-mix(in oklab,var(--ink) 16%,transparent),0 1px 3px color-mix(in oklab,var(--ink) 14%,transparent);
    font-variant-numeric:tabular-nums}
  .pf-cena{position:absolute;inset:0}
  .pf-cena canvas{display:block;width:100%;height:100%;touch-action:none}
  .pf-tags,.pf-guia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .pf-guia{width:100%;height:100%;overflow:visible}
  .pf-guia line{stroke:var(--rule);stroke-width:1.5;stroke-dasharray:3 4}
  .pf-guia circle{fill:var(--rule)}
  #nv .pf button::before,#nv .pf button::after{content:none}
  #nv .pf button{font:inherit;color:inherit;cursor:pointer}
  #nv .pf button:focus-visible,.pf-gasto:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .pf [hidden]{display:none !important}

  /* ---- a PLACA ANDON: as seis etapas com a lâmpada (a assinatura do protótipo) ---- */
  .pf-andon{position:absolute;left:8px;right:8px;top:8px;display:grid;
    grid-template-columns:auto repeat(6,minmax(0,1fr)) auto;align-items:stretch;
    background:var(--pf-placa);color:var(--pf-placa-tx);border:1px solid var(--pf-placa-linha);box-shadow:var(--pf-sombra);overflow:hidden}
  .pf-tit{padding:8px 14px 8px 12px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--pf-placa-linha)}
  .pf-tit b{font:700 19px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
  .pf-tit span{font-size:var(--t-cap);color:var(--pf-placa-tx2);margin-top:3px;white-space:nowrap}
  #nv .pf-cel{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 9px 8px;border-right:1px solid var(--pf-placa-linha);
    display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:8px;align-items:center;min-width:0;min-height:44px}
  #nv .pf-cel:hover{background:rgb(255 255 255 / .05)}
  #nv .pf-cel:focus-visible{outline:2px solid var(--pf-placa-tx);outline-offset:-3px}
  .pf-lamp{width:12px;height:12px;border-radius:50%;background:#3a444e;grid-row:1 / span 2;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .3)}
  .pf-lamp[data-s="anda"]{background:#7cc48a;box-shadow:0 0 8px rgb(124 196 138 / .45)}
  .pf-lamp[data-s="trava"]{background:#e3a640;box-shadow:0 0 8px rgb(227 166 64 / .45)}
  .pf-nome{font:600 15px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
  .pf-n{font-size:12px;color:var(--pf-placa-tx2);white-space:nowrap;overflow:hidden}
  .pf-n b{color:var(--pf-placa-tx);font-weight:600}
  .pf-cel[data-s="trava"] .pf-n{color:var(--pf-ambar)}
  .pf-n .pf-sm{display:none}
  .pf-gasto{padding:7px 12px;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:170px}
  .pf-l{font-size:12px;color:var(--pf-placa-tx2);display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
  .pf-l b{color:var(--pf-placa-tx);font-weight:600}
  .pf-barra{height:5px;background:#36414c;position:relative;overflow:hidden}
  .pf-barra u{position:absolute;inset:0;background:#8fc7b5;transform-origin:left;transition:transform .8s ease}

  /* ---- os PROJETOS ---- */
  .pf-projs{position:absolute;left:8px;top:82px;display:flex;flex-direction:column;gap:6px;max-width:220px}
  .pf-projs h2{margin:4px 2px 0;font:600 var(--t-cap)/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
  .pf-vazio{margin:0;padding:6px 10px;font-size:var(--t-cap);color:var(--mut);background:var(--sf);border:1px solid var(--rule)}
  #nv .pf-pj{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px 6px 10px;border-radius:999px;
    background:var(--sf);border:1px solid var(--rule);box-shadow:var(--pf-sombra);text-align:left;font-size:var(--t-dat)}
  .pf-pj i{width:10px;height:10px;border-radius:3px;flex:none}
  .pf-pj b{font-weight:600}
  .pf-pj span{margin-left:auto;color:var(--mut);font-size:12px;padding-left:8px}
  #nv .pf-pj[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--pf-sombra)}

  /* ---- [#944] os COMANDOS: só ícone, no canto de baixo à direita, agrupados (≤ 36 px).
     O nome mora na dica (hover, foco, toque longo) e no aria-label ---- */
  .pf-doca{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:4px;padding:3px;
    background:var(--sf);border:1px solid var(--rule);border-radius:999px;box-shadow:var(--pf-sombra)}
  .pf-doca-g{display:flex;gap:4px;align-items:center}
  #nv .pf-ico{display:inline-grid;place-items:center;width:36px;height:36px;min-height:0;max-height:36px;padding:0;border-radius:50%;
    background:var(--sf);color:var(--ink);border:1px solid transparent;-webkit-touch-callout:none;user-select:none}
  #nv .pf-ico:hover{border-color:var(--rule);background:var(--sf2)}
  #nv .pf-ico svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #nv .pf-ico[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
  #nv .pf-ico[data-pf-bt="segue"]{background:var(--ink);color:var(--sf)}
  #nv .pf-ico[data-pf-bt="mais"]{display:none}
  #nv .pf-doca .pf-ico[data-pf="vertudo"]{border-color:var(--blue);color:var(--blue)}
  /* o [sair] da primeira pessoa: pequeno e discreto, no canto de cima */
  #nv .pf-sai-fp{position:absolute;right:8px;top:8px;width:32px;height:32px;opacity:.82;box-shadow:var(--pf-sombra);border-color:var(--rule)}

  /* ---- [#944] a PRIMEIRA PESSOA: a interface some (fica só o [sair]) e volta ao mexer ---- */
  .pf[data-fp]>:not(.pf-cena):not(.pf-sai-fp){transition:opacity .35s ease}
  .pf[data-fp][data-ui="off"]>:not(.pf-cena):not(.pf-sai-fp){opacity:0;pointer-events:none}
  .pf[data-fp] .pf-projs,.pf[data-fp] .pf-card{display:none}

  /* ---- o CARTÃO da bancada ou do projeto ---- */
  .pf-card{position:absolute;right:8px;top:82px;width:340px;max-width:calc(100% - 16px);max-height:calc(100% - 156px);overflow:auto;
    overscroll-behavior:contain;background:var(--sf);color:var(--ink);border:1px solid var(--rule);box-shadow:var(--pf-sombra)}
  .pf-c-hd{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 8px 14px;position:sticky;top:0;background:var(--sf);z-index:1}
  .pf-c-hd h3{margin:0;font:700 22px/1.05 var(--display);letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere}
  .pf-c-hd p{margin:3px 0 0;color:var(--mut);font-size:var(--t-dat)}
  #nv .pf-x{margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--sf);font-size:18px;line-height:1}
  .pf-linhas{padding:0 8px 10px}
  #nv .pf-ped{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px 10px;width:100%;text-align:left;padding:9px 8px;border:0;
    border-top:1px solid var(--sf2);background:none;min-height:44px}
  #nv .pf-ped:hover{background:var(--sf2)}
  .pf-ped>i{width:12px;height:12px;border-radius:3px;margin-top:4px}
  .pf-t{font-weight:600;overflow-wrap:anywhere}
  .pf-t small{font-weight:400;color:var(--mut);margin-right:4px}
  .pf-m{grid-column:2;color:var(--mut);font-size:var(--t-dat);display:flex;gap:8px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere}
  .pf-mini{flex:0 0 64px;height:6px;background:var(--sf2);position:relative;overflow:hidden;border:1px solid var(--rule)}
  .pf-mini u{position:absolute;inset:0 auto 0 0;background:var(--blue)}
  .pf-trava{grid-column:2;background:color-mix(in oklab,var(--amber) 14%,var(--sf));color:var(--ink);border:1px solid color-mix(in oklab,var(--amber) 45%,transparent);
    padding:6px 8px;font-size:var(--t-dat);font-weight:500;overflow-wrap:anywhere}
  .pf-info{margin:6px 8px;color:var(--mut);font-size:var(--t-dat)}

  /* ---- o MONITOR do pedido acompanhado (tela de terminal, nos dois temas) ---- */
  .pf-mon{position:absolute;left:0;top:0;width:360px;max-width:calc(100% - 16px);background:var(--pf-tela);color:var(--pf-tela-tx);
    border:6px solid #2b333b;box-shadow:0 10px 30px rgb(0 0 0 / .35);font:12.5px/1.55 var(--mono)}
  .pf-mon-hd{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;border-bottom:1px solid #26313a}
  .pf-mon-hd i{width:9px;height:9px;border-radius:50%;background:#7cc48a;flex:none}
  .pf-mon-hd i[data-tr]{background:#e3a640}
  .pf-mon-hd b{font:600 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
  .pf-mon-hd span{color:var(--pf-tela-tx2);font-size:12px;margin-left:auto;text-align:right}
  .pf-mon-vista{display:flex;gap:4px;padding:6px 10px 0}
  #nv .pf-mon-vista .pf-ico{border:1px solid #33404a;background:#172027;color:var(--pf-tela-tx2)}
  #nv .pf-mon-vista .pf-ico[aria-pressed="true"]{background:#26323b;color:var(--pf-tela-tx);border-color:#8fc7b5}
  .pf-mon-ped{padding:6px 10px 0;color:var(--pf-tela-tx2);font-size:12.5px;overflow-wrap:anywhere}
  .pf-mon-ped b{color:var(--pf-tela-tx);font-weight:600}
  .pf-etapas{display:flex;gap:4px;margin:6px 0 0}
  .pf-etapas s{flex:1;height:5px;background:#26313a;text-decoration:none}
  .pf-etapas s.f{background:#5cc6ae}
  .pf-etapas s.a{background:#5cc6ae;opacity:.6}
  .pf-etapas s.tr{background:#e3a640}
  .pf-mon ol{list-style:none;margin:0;padding:6px 10px 10px;min-height:120px}
  .pf-mon li{white-space:pre-wrap;overflow-wrap:anywhere;opacity:0;transform:translateY(3px);transition:opacity .9s ease,transform .9s ease}
  .pf-mon li.v{opacity:1;transform:none}
  .pf-mon li.ok{color:var(--pf-ok)}
  .pf-mon li.tr{color:var(--pf-ambar)}
  .pf-mon li.dim{color:var(--pf-tela-tx2)}
  .pf-prog{margin:2px 0 4px;height:6px;background:#26313a;position:relative;overflow:hidden}
  .pf-prog u{position:absolute;inset:0;background:#8fd19e;transform-origin:left;transition:transform 1s linear}

  /* ---- etiquetas, aviso e carga ---- */
  .pf-tg{position:absolute;left:0;top:0;padding:2px 7px;border-radius:10px;background:var(--sf);color:var(--ink);border:1px solid var(--rule);
    font-size:11.5px;font-weight:600;white-space:normal;overflow-wrap:anywhere;box-shadow:var(--pf-sombra);max-width:min(320px,70%)}
  .pf-tg.tr{background:color-mix(in oklab,var(--amber) 16%,var(--sf));border-color:var(--amber)}
  .pf-tg.hov{border-color:var(--blue)}
  .pf-toast{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);background:var(--sf);color:var(--ink);
    border:1px solid var(--amber);padding:10px 16px;box-shadow:var(--pf-sombra);max-width:calc(100% - 24px);text-align:center;overflow-wrap:anywhere}
  .pf-toast b{color:var(--amber)}
  .pf-carrega{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
    background:var(--sf);color:var(--ink);border:1px solid var(--rule);padding:16px 20px;max-width:calc(100% - 32px);text-align:center}
  .pf-carrega small{color:var(--mut)}
  .pf-etp{display:flex;gap:4px}
  .pf-etp i{width:28px;height:5px;background:var(--sf2);border:1px solid var(--rule)}
  .pf-etp i[data-e="n"]{background:var(--blue);border-color:var(--blue)}

  @media (max-width:1180px){
    .pf-gasto{min-width:140px}
    .pf-tit span{display:none}
    .pf-n .pf-lg{display:none} .pf-n .pf-sm{display:inline}
  }
  /* ---- celular: a placa em 3 colunas, os projetos e os botões embaixo, o cartão e o
     monitor viram folhas fixas acima dos botões ---- */
  @media (max-width:760px){
    #nv-ag[data-vista="planta"]:has(>.pf){height:calc(var(--ag-livre,600px) - var(--pc-modal-baixo,72px) + 34px)}
    .pf-andon{left:6px;right:6px;top:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
    .pf-tit{display:none}
    #nv .pf-cel{padding:5px 7px;border-bottom:1px solid var(--pf-placa-linha);column-gap:6px;grid-template-columns:10px minmax(0,1fr);min-height:40px}
    .pf-lamp{width:10px;height:10px}
    .pf-nome{font-size:13px}
    .pf-n{font-size:11px}
    .pf-n .pf-lg{display:none} .pf-n .pf-sm{display:inline}
    .pf-gasto{grid-column:1 / -1;min-width:0;padding:5px 10px;flex-direction:row;align-items:center;gap:10px}
    .pf-gasto .pf-l{flex:none;font-size:11.5px}
    .pf-gasto .pf-barra{flex:1}
    .pf-gasto .pf-l2{display:none}
    .pf-projs{left:6px;right:54px;top:auto;bottom:8px;flex-direction:row;flex-wrap:wrap;max-width:none;gap:4px}
    .pf-projs h2{display:none}
    #nv .pf-pj{min-height:34px;padding:4px 9px 4px 8px;font-size:12.5px;box-shadow:none}
    .pf-doca{right:6px;bottom:6px}
    .pf-doca:not([data-aberta="1"]) .pf-doca-g{display:none}
    #nv .pf-ico[data-pf-bt="mais"]{display:inline-grid}
    .pf-card{left:6px;right:6px;top:auto;bottom:56px;width:auto;max-width:none;max-height:46%}
    .pf-mon{left:6px;right:6px;top:auto;bottom:56px;width:auto;max-width:none;transform:none !important;border-width:4px}
    .pf-mon ol{min-height:0;max-height:9.5em;overflow:hidden}
    .pf-guia{display:none}
    .pf-toast{bottom:58px}
    .pf:has(.pf-card:not([hidden])) .pf-projs,.pf:has(.pf-mon:not([hidden])) .pf-projs{display:none}
  }
  @media (prefers-reduced-motion:reduce){ .pf-mon li,.pf-barra u,.pf-prog u,.pf[data-fp]>*{transition:none !important} }