/* cockgit — observa-planta.css
   vista /nova · aba Agentes · a PLANTA VIVA (v2 de 05/10/2026, CLARA desde 06/10):
   app-observa-planta.js (as peças) + app-observa-planta-mov.js (as bolinhas).

   Regras do dono que moram aqui:
     · SEM BARRA DE ROLAGEM (06/10): a vista inteira cabe na tela — 1366×768,
       1440×900, 1838×981 e o celular 390×844, claro e escuro. O detalhe de cada peça
       abre numa FOLHA FIXA (não empurra a página); no celular a planta vira peças
       pequenas (nome + palavra) e o resto está no toque; a faixa mostra só as linhas
       que cabem na altura da tela;
     · cards-only: cada peça é o card das peças (App.pcCard, nova-pecas.css); esta
       folha só posiciona as peças, desenha os fios, as bolinhas, a faixa e a folha;
     · TODA peça é um card visível (05/10): fundo --sf e contorno na régua de 3:1,
       inclusive a parada — quem não trabalha recua pela COR, nunca some. Só quem
       trabalha leva o destaque azul (a faixa de 3 px); a trava leva o laranja;
     · movimento CALMO (o dono tem TAG): nada pisca, a única animação contínua é o
       pulso do glifo de quem roda, e `prefers-reduced-motion` ou o botão
       "movimento: parado" desligam tudo;
     · sem rolagem lateral: tudo é minmax(0,…), quebra linha e cabe;
     · cor só por token; claro e escuro saem do :root de nova-pecas.css. */

  .pv{display:flex;flex-direction:column;gap:10px;min-width:0;
    /* a cor de cada TIPO de bolinha — o tipo também tem FORMA (cheia, anel, tamanho) */
    --ev-pedido:var(--chip-ink);--ev-trabalho:var(--blue);--ev-modelo:var(--idle);
    --ev-pr:var(--amber);--ev-ci:var(--green);--ev-merge:var(--green);--ev-deploy:var(--green);
    --ev-dono:var(--orange);--ev-rastro:var(--mut)}
  .pv-topo{display:flex;justify-content:space-between;align-items:center;gap:6px 16px;flex-wrap:wrap;min-width:0}
  .pv-topo>.pc-topo{flex:1 1 20em;margin:0}
  .pv-bts{display:flex;gap:8px;align-items:center;flex:none}
  #nv .pv-bt{min-height:44px;padding:6px 12px;font:var(--t-dat)/1.2 var(--mono);background:var(--sf);
    color:var(--ink);border:1px solid var(--bd);border-radius:0;cursor:pointer}
  #nv .pv-bt::before,#nv .pv-bt::after{content:none}
  #nv .pv-bt:hover{border-color:var(--blue)}
  #nv .pv-bt:disabled{cursor:default;color:var(--mut)}
  #nv .pv-bt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

  /* ---- o "?" das bolinhas: um botão pequeno; a legenda abre na folha ---- */
  .pv-ajuda>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    list-style:none;cursor:pointer;font:600 var(--t-bod)/1 var(--mono);color:var(--ink);
    background:var(--sf);border:1px solid var(--bd)}
  .pv-ajuda>summary::-webkit-details-marker{display:none}
  .pv-ajuda>summary::marker{content:""}
  .pv-ajuda>summary:hover,.pv-ajuda[open]>summary{border-color:var(--blue)}
  .pv-ajuda>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .pv-ajuda-c b{display:block;font:600 var(--t-dat)/1.4 var(--mono)}
  .pv-ajuda-c ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:2px;
    grid-template-columns:repeat(auto-fill,minmax(min(11em,100%),1fr))}
  .pv-ajuda-c li{display:flex;gap:6px;align-items:center;min-width:0}
  .pv-ajuda-c>span{display:block;color:var(--mut)}
  .pv-pt{flex:none;width:14px;height:14px}

  /* ---- a FOLHA do toque: fixa, por cima, nunca empurra a página ---- */
  .pv details>.pc-det,.pv-ajuda-c{position:fixed;z-index:30;left:50%;bottom:var(--pc-modal-baixo,16px);transform:translateX(-50%);
    width:min(34rem,calc(100vw - 32px));margin:0;padding:12px 14px;box-sizing:border-box;
    max-height:var(--pc-modal-max,calc(100vh - 32px));overflow:hidden;
    background:var(--sf);color:var(--ink);border:1px solid var(--blue);font-size:var(--t-dat);
    box-shadow:0 8px 28px color-mix(in oklab,var(--ink) 22%,transparent)}
  /* a peça aberta sobe acima das vizinhas (cada .pv-no é uma camada própria) */
  .pv-no:has(details[open]),.pv-mod:has(details[open]),.pv-bts:has(details[open]){z-index:40}
  .pv .pv-df{font-weight:600}
  #nv .pv-fecha{display:block;margin:8px 0 0 auto;min-height:44px;padding:6px 14px;
    font:var(--t-dat)/1.2 var(--mono);background:var(--sf);color:var(--ink);border:1px solid var(--bd);
    border-radius:0;cursor:pointer}
  #nv .pv-fecha::before,#nv .pv-fecha::after{content:none}
  #nv .pv-fecha:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

  /* ---- a FOLHA de ITENS (07/10/2026, "perdeu as cores quando entra nos detalhes"):
     cada item tem o chip colorido (glifo + palavra), o quê, o quando, a barra e os
     links; a faixa de 3 px à esquerda repete a cor do estado. Pagina por botão:
     nada rola. ---- */
  .pv .pc-det{display:flex;flex-direction:column;gap:2px}
  /* a modal nunca passa da tela (nova-pecas.css · --pc-modal-max): o cabeçalho (a frase),
     o paginador e o rodapé ficam fixos; só a página de itens rola por dentro */
  .pv .pc-det>*{flex:none}
  .pv .pc-det>.pv-pg{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .pv-ajuda-c{overflow-y:auto}
  .pv-pg{display:flex;flex-direction:column}
  .pv-pg[hidden]{display:none}
  .pv-it{--c:var(--idle);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:center;
    padding:4px 0 4px 10px;border-top:1px solid var(--bd);box-shadow:inset 3px 0 0 var(--c)}
  .pv-it:first-child{border-top:0}
  .pv-it[data-t="ok"]{--c:var(--green)} .pv-it[data-t="run"]{--c:var(--blue)} .pv-it[data-t="warn"]{--c:var(--amber)}
  .pv-it[data-t="bad"]{--c:var(--red)} .pv-it[data-t="hot"]{--c:var(--orange)}
  .pv-it-c{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0}
  .pv-it-t{font-weight:600;overflow-wrap:anywhere;min-width:0}
  .pv-it-s{flex-basis:100%;color:var(--mut);overflow-wrap:anywhere}
  .pv-it-c>.pc-med{flex-basis:100%;margin:3px 0 0}
  .pv .pv-it-c>.pc-med-r{display:flex;flex-basis:100%}
  .pv .pv-it .pc-st[data-t="ok"]{color:var(--green)}
  .pv-it .pc-gl{animation:none !important}
  .pv-it-l{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
  .pv-pag{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;color:var(--mut)}
  .pv-pag>span{flex:1 1 auto;text-align:center}
  .pv-rodf{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
  #nv .pv-rodf .pv-fecha{margin:0 0 0 auto}
  .pv-tec .nv-tec-c>span{display:block;color:var(--mut)}

  /* ---- as PEÇAS: todas visíveis; o destaque é de quem trabalha ---- */
  .pv .pc-card{background:var(--sf);border-color:var(--rule);padding:6px 10px}
  .pv .pc-card[data-estado="run"],.pv .pc-card:has(.pc-st[data-t="run"]){border-color:var(--blue);
    box-shadow:inset 3px 0 0 var(--blue)}
  .pv .pc-card[data-estado="hot"]{border-color:var(--orange);box-shadow:inset 3px 0 0 var(--orange)}
  .pv .pc-card[data-estado="bad"]{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
  .pv .pc-card[open],.pv .pc-card:has(>summary:hover){grid-column:auto;border-color:var(--blue)}
  .pv .pc-st[data-t="ok"]{color:var(--mut)}
  .pv .pc-st{white-space:normal;overflow-wrap:anywhere;min-width:0}
  /* nenhum texto cortado com "…" (regra do dono, 07/10/2026): o título quebra linha inteiro */
  .pv .pc-tit{font-size:var(--t-dat);font-weight:400;margin:1px 0 0;display:block;-webkit-line-clamp:unset;overflow:visible}
  .pv .pc-card>summary{min-height:0}
  .pv .pc-med{height:6px;margin:4px 0 0}
  /* [#610] na Planta o anel é pequeno, um por linha do cartão; sem número no centro
     (a frase da linha e a dica dizem o valor) — o disco fica, o anel é o dado */
  .pv .pc-med[style*="--p"]{--d:30px;height:var(--d);margin:4px 0 0}
  .pv .pv-it-c>.pc-med[style*="--p"]{flex:none}
  .pv .pc-med[style*="--p"]::before{content:""}
  .pv .pc-pt[data-est="1"] .pc-med[style*="--p"]::before{content:""}
  .pv .pc-etapas{margin:4px 0 0}
  .pv .pc-dados{line-height:1.35}
  /* as casas do deploy e da vaga sem o rótulo embaixo: num card estreito ele quebrava
     a palavra; a frase diz "passo 2 de 4" */
  .pv .pc-etapas-r,.pv .pc-med-r{display:none}

  /* ---- o ALERTA do topo: a trava, com o motivo e desde quando ---- */
  .pv-alerta:empty{display:none}
  .pv-alerta .pc-tit{font-size:var(--t-bod);font-weight:600}
  .pv-alerta .pc-dados{color:var(--ink)}

  /* ---- a PLANTA: o desenho do fluxo, da esquerda para a direita ---- */
  .pv-planta{position:relative;display:grid;gap:12px 22px;align-items:start;min-width:0;
    grid-template-columns:minmax(0,.85fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr) minmax(0,.9fr);
    grid-template-areas:
      "dono painel porta fila exec mod"
      "dono iris   porta fila exec mod"
      "obs  prod   deploy cart exec rev"}
  .pv-fios,.pv-bolas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .pv-fios{z-index:0}
  .pv-bolas{z-index:3}
  .pv-aresta{fill:none;stroke:var(--rule);stroke-width:1.5;stroke-dasharray:1.5 6;stroke-linecap:round;
    opacity:.75;transition:stroke .8s ease,opacity .8s ease}
  .pv-aresta.viva{stroke:var(--c);opacity:1}
  .pv-trilha{fill:none;stroke:var(--c);stroke-width:2;stroke-dasharray:1.5 6;stroke-linecap:round;opacity:.6}

  .pv-no{position:relative;z-index:1;min-width:0;outline:3px solid transparent;outline-offset:1px;
    transition:outline-color .8s ease}
  .pv-no.chega{outline-color:color-mix(in oklab,var(--c) 38%,transparent)}
  .pv-a-dono{grid-area:dono;align-self:center} .pv-a-painel{grid-area:painel} .pv-a-iris{grid-area:iris}
  .pv-a-porta{grid-area:porta;align-self:center} .pv-a-fila{grid-area:fila;align-self:center}
  .pv-a-exec{grid-area:exec} .pv-a-mod{grid-area:mod;align-self:start} .pv-a-rev{grid-area:rev} .pv-a-cart{grid-area:cart}
  .pv-a-deploy{grid-area:deploy} .pv-a-prod{grid-area:prod} .pv-a-obs{grid-area:obs}

  /* o executor e as VAGAS OCUPADAS (a livre não tem card: o resumo diz quantas) */
  .pv-vagas{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;margin-top:6px}
  .pv-mais{color:var(--mut);font-size:var(--t-cap);padding:0 2px}

  /* os MODELOS: um rótulo e cinco cards de uma linha (nome + palavra) */
  .pv-mod{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .pv-mod-l{display:grid;gap:4px;grid-template-columns:minmax(0,1fr);min-width:0}
  .pv-mod-l .pc-card{padding:4px 8px}
  .pv-modres{display:none}
  /* [09/10] os AJUSTES DA FÁBRICA, junto dos modelos: a face diz o que vale; a folha
     tem 4 abas (uma por vez, nada rola) e todo botão arma no 1º toque */
  .pv-ajustes{margin-top:6px}
  .pv-ajustes:empty{display:none}
  .ag-forca-bts,.aj-bts,.aj-abas{display:flex;flex-wrap:wrap;gap:4px}
  .ag-forca-bts .pc-btns,.aj-bts .pc-btns{display:inline-flex}
  .ag-forca-bts .pc-btn,.aj-bts .pc-btn,.aj-bts>.ag-chip,.aj-abas>.ag-chip{min-height:44px;padding:4px 8px}
  .ag-forca-bts .pc-btn[disabled],.aj-bts .pc-btn[aria-pressed="true"]{opacity:1;cursor:default}
  .aj-bts .pc-btn[disabled]:not([aria-pressed="true"]){color:var(--mut);border-style:dashed;cursor:not-allowed}
  .aj-bts .pc-btn[data-armado]{border-color:var(--orange);color:var(--orange)}
  .aj-abas{margin:6px 0 4px}
  .pv .pc-det>.aj-corpo,.pv .pc-det>.aj-hist{display:flex;flex-direction:column;gap:6px}
  .aj-l{display:grid;grid-template-columns:minmax(8em,10em) minmax(0,1fr);gap:2px 10px;align-items:center}
  .aj-l>.pc-cap{margin:0}
  .aj-l>.aj-nota,.aj-l>.aj-pausa,.aj-l>.aj-bts:first-child{grid-column:1/-1}
  @media (max-width:599.98px){ .aj-l{grid-template-columns:minmax(0,1fr)} }
  .aj-nota,.aj-hist>span:not(.pc-cap){color:var(--mut);font-size:var(--t-cap)}
  .pv .pc-det>.aj-hist{margin-top:8px;padding-top:6px;border-top:1px solid var(--bd);gap:2px}
  .aj-pausa{font-weight:600;color:var(--ink)}
  /* a frase do modelo ("3 hoje · US$ 1,39") numa linha de rótulo */
  .pv-mod-l .pc-tit{font-size:var(--t-cap)}
  /* a página passaria da tela (app-observa.js): os modelos viram UMA peça */

  /* ---- a FAIXA "O que está acontecendo": a mais nova em cima, só o que cabe ---- */
  .pv-faixa.pc-card{display:block;padding:6px 10px}
  .pv-faixa-c{display:flex;justify-content:space-between;align-items:baseline;gap:2px 12px;flex-wrap:wrap;margin:0 0 2px}
  .pv-faixa h2{font:600 var(--t-dat)/1.3 var(--mono);margin:0;color:var(--ink)}
  .pv-faixa-c span{color:var(--mut);font-size:var(--t-cap)}
  .pv-log{list-style:none;margin:0;padding:0}
  .pv-log li{display:grid;grid-template-columns:5.6em 14px minmax(0,13em) minmax(0,1fr);gap:2px 10px;
    align-items:center;padding:3px 6px;border-top:1px solid var(--bd);transition:background-color 2.5s ease}
  .pv-log li:first-child{border-top:0}
  .pv-log li.novo{background:var(--sf2)}
  .pv-log .h{color:var(--mut)}
  .pv-log .r{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
  .pv-log .f{overflow-wrap:anywhere}
  .pv-log li.vazio{display:block;color:var(--mut)}
  /* a altura manda: na tela baixa a faixa mostra menos linhas (a mais nova fica) */
  @media (max-height:1000px){ .pv-log li:nth-child(n+5){display:none} }
  @media (max-height:860px){ .pv-log li:nth-child(n+3){display:none} }
  /* o TRILHO do celular: a bolinha anda só aqui, nunca por cima dos cards */
  .pv-trilhos{display:none}
  .pv-tr{display:grid;grid-template-columns:minmax(0,7em) minmax(0,1fr) minmax(0,7em);gap:8px;align-items:center;
    font-size:var(--t-cap);color:var(--mut);min-height:22px}
  .pv-tr>span:last-child{text-align:right}
  .pv-tr-via{position:relative;display:block;height:1px;border-top:1px dashed var(--rule)}
  .pv-tr-via>i{position:absolute;top:-5px;left:0;width:10px;height:10px;border-radius:50%;background:var(--c);
    transform:translateX(-50%)}

  /* ---- [09/10] a PLANTA em TELA CHEIA: escala e se espalha pela janela ----
     A largura vem do #nv-ag sem teto (observa.css); a altura livre (`--ag-livre`,
     medida em app-observa.js) vira a altura mínima da aba, e o desenho estica as três
     fileiras para ocupá-la — nada de faixa vazia embaixo, nada de rolagem. A letra
     cresce com a janela (13 px em 1366, ~15 px em 1920, teto 16 px). */
  @media (min-width:920.02px){
    #nv-ag[data-vista="planta"]{min-height:var(--ag-livre,auto);
      --t-cap:clamp(11px,calc(.3vw + 7px),13px);--t-dat:clamp(13px,calc(.45vw + 6px),16px);
      --t-bod:clamp(15px,calc(.5vw + 8px),18px)}
    #nv-ag[data-vista="planta"]>.pv{flex:1 1 auto}
    .pv-planta{flex:1 1 auto;grid-template-rows:repeat(3,minmax(min-content,1fr));align-content:stretch}
  }

  /* ---- o movimento só quando pode ---- */
  .pv[data-mov="off"] *{transition:none !important}
  .pv[data-mov="off"] .pc-gl{animation:none !important}
  @media (prefers-reduced-motion:reduce){
    .pv *{transition:none !important}
    .pv-bolas,.pv-trilhos{display:none !important}
  }

  /* ---- tablet: três colunas, os fios só aparecem enquanto a bolinha passa ---- */
  @media (max-width:920px){
    .pv-planta{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;align-items:stretch;
      grid-template-areas:"dono painel iris" "porta fila exec" "rev cart exec" "deploy prod obs" "mod mod mod"}
    .pv-a-dono,.pv-a-porta,.pv-a-fila{align-self:stretch}
    .pv-no{display:flex;flex-direction:column}
    .pv-no>.pc-card{flex:1 1 auto}
    .pv-a-exec>.pc-card{flex:none}
    .pv-mod>.pc-cap{display:none}
    .pv-mod-l{grid-template-columns:repeat(6,minmax(0,1fr))}
  }
  /* ---- celular: a versão COMPACTA — peças pequenas (nome + palavra), o resto no toque ---- */
  @media (max-width:599.98px){
    .pv{gap:4px}
    /* a folha fica acima da barra fixa do [+ Nova demanda] */
    .pv details>.pc-det,.pv-ajuda-c{bottom:var(--pc-modal-baixo,72px)}
    .pv-topo{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b" "r r";gap:2px 8px}
    .pv-topo>.pc-topo{display:contents}
    .pv-topo .pc-topo-t{grid-area:t;align-self:center;font-size:var(--t-bod)}
    .pv-topo .pc-resumo{display:none}   /* as peças e o alerta já dizem o mesmo */
    .pv-bts{grid-area:b}
    .pv-alerta .pc-l1{display:none}      /* "Fila travada: …" já abre a frase */
    .pv-alerta .pc-tit{font-size:var(--t-dat)}
    .pv-alerta .pc-dados>span:nth-child(3){display:none}   /* a 2ª trava fica no toque */
    .pv-planta{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-items:stretch;
      grid-template-areas:"dono painel iris" "porta fila exec" "rev cart deploy" "prod obs mod"}
    .pv .pv-planta .pc-card{padding:0 6px}
    .pv-planta .pc-l1{flex-direction:column;align-items:flex-start;gap:0;line-height:1.25}
    .pv-planta .pc-tit,.pv-planta .pc-dados,.pv-vagas,.pv-planta .pc-vagas>span{display:none}
    .pv-planta .pc-vagas{gap:3px}
    .pv-planta .pc-vagas>i{width:9px;height:9px}
    .pv-planta .pc-card>summary{min-height:44px;display:flex;flex-direction:column;justify-content:center}
    .pv-mod-l{display:none}
    .pv-modres{display:flex;flex:1 1 auto}
    .pv-bolas{display:none}
    .pv-trilhos{display:grid;gap:4px;margin:0 0 2px}
    /* a bolinha anda no lugar do título (mesma altura): a faixa não cresce, e só a
       viagem mais antiga aparece — as outras viram linha quando chegam */
    .pv-faixa:has(.pv-tr) .pv-faixa-c,.pv-tr:nth-child(n+2){display:none}
    .pv-tr{min-height:20px}
    .pv-faixa-c span{display:none}
    .pv-log li{grid-template-columns:14px minmax(0,1fr);gap:0 6px;grid-template-areas:"d f"}
    .pv-log .pv-pt{grid-area:d} .pv-log .h,.pv-log .r{display:none}
    .pv-log .f{grid-area:f;overflow-wrap:anywhere}
    .pv-log li:nth-child(n+2){display:none}
  }