/* cockgit — observa-planta3d-a.css
   vista /nova · aba Agentes · Planta viva 3D: a cena do PROTÓTIPO A (aprovado pelo dono em
   13/10/2026 — docs/prototipos/planta-a/). app-observa-planta3d-a.js (a cena) e
   app-observa-planta3d-a-cartao.js (os cartões, os números, as linhas-guia e as pílulas).

   Regras que moram aqui:
     · as CORES da cena são as do protótipo, claro e escuro do mesmo bloco (light-dark):
       o fundo, o chão, a esteira e a letra do chão (a cena as lê por uma sonda);
     · letra PEQUENA, como no protótipo (pedido do dono, 13/10/2026): o cartão é uma
       etiqueta da cena, não um card do painel — por isso não usa a escala de 2 metros;
     · o título da demanda QUEBRA a linha, nunca vira "…" (tests/test_sem_reticencia.py);
     · nada pisca nem pulsa: zero animação de CSS aqui;
     · tudo que clica é <button>, com foco visível; no celular a pílula tem alvo de 44 px. */

  #nv .p3-cena{
    --p3a-fundo:light-dark(#e9edf1,#0e1319); --p3a-chao:light-dark(#dde3e9,#16202a);
    --p3a-trilha:light-dark(#cfd7df,#1e2a36); --p3a-letra:light-dark(#566271,#93a2b1);
    --p3a-chao-letra:light-dark(#4f5b68,#c8d1d9);
    --p3a-tx:light-dark(#18212b,#e4ebf2); --p3a-cartao:light-dark(#ffffff,#141d27);
    --p3a-linha:light-dark(#b4bec8,#3a4958); --p3a-acento:light-dark(#2c7a6a,#5cc6ae);
    --p3a-chip:light-dark(#ffffff,#1b2632); --p3a-barra:light-dark(#d5dce3,#2a3846);
    --p3a-sombra:0 2px 10px light-dark(rgb(20 30 40 / .12),rgb(0 0 0 / .45));
    background:var(--p3a-fundo)}

  /* o palco: por cima do canvas, sem pegar o toque (só os cartões e os botões pegam) */
  .p3a-rot{position:absolute;inset:0;pointer-events:none;overflow:hidden;color:var(--p3a-tx);
    font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums}
  .p3a-rot [hidden]{display:none}
  .p3a-guias{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  /* o reset dos botões do painel SEM o #nv: assim o peso e o tamanho de cada peça abaixo
     (título do cartão, pílula) vencem — com o #nv, o `font:inherit` apagava o negrito. O resto
     (o piso de 44 px dos botões da /nova) zera COM o #nv; quem precisa de altura diz em #nv .p3a-rot */
  .p3a-rot button{font:inherit}
  #nv .p3a-rot button{color:inherit;margin:0;min-width:0;min-height:0;border-radius:0;cursor:pointer;text-align:left}
  #nv .p3a-rot button::before,#nv .p3a-rot button::after{content:none}
  #nv .p3a-rot button:focus-visible{outline:2px solid var(--p3a-acento);outline-offset:2px}

  /* o CABEÇALHO da cena: "Planta viva" e o resumo ("9 demandas · 3 no código · …") */
  .p3a-cab{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;padding:10px 16px;
    max-width:calc(100% - 300px);min-width:0;pointer-events:none}
  .p3a-cab>b{font-size:15px;font-weight:650;white-space:nowrap}
  .p3a-sum{color:var(--p3a-letra);font-size:13px;min-width:0;overflow-wrap:anywhere}
  #nv .p3a-rot .p3a-tudo{pointer-events:auto;flex:none;padding:8px 14px;min-height:40px;background:var(--p3a-chip);
    border:1px solid var(--p3a-linha);border-radius:999px;box-shadow:var(--p3a-sombra);white-space:nowrap}
  #nv .p3a-rot .p3a-centra{position:absolute;right:12px;bottom:30px;pointer-events:auto;min-height:44px;padding:8px 14px;
    background:var(--p3a-chip);border:1px solid var(--p3a-linha);border-radius:999px;box-shadow:var(--p3a-sombra);white-space:nowrap}
  .p3a-dica{position:absolute;left:16px;right:16px;bottom:6px;text-align:center;color:var(--p3a-letra);font-size:11px}
  .p3-cena canvas{touch-action:none}

  /* o CARTÃO da bancada: título, "N aqui" e uma linha por demanda */
  .p3a-card{position:absolute;left:0;top:0;width:max-content;min-width:206px;max-width:264px;pointer-events:auto;background:var(--p3a-cartao);
    border:1px solid var(--p3a-linha);border-radius:10px;box-shadow:var(--p3a-sombra);will-change:transform}
  #nv .p3a-hd{display:flex;align-items:baseline;gap:6px;width:100%;padding:6px 9px 4px;background:none;border:0;font-weight:650}
  .p3a-n{margin-left:auto;font-weight:500;color:var(--p3a-letra);font-size:13px;text-align:right}
  .p3a-rows{padding:0 6px 6px}
  /* #663: o cartão da bancada rola por dentro */
  .p3a-card{max-height:60vh;max-height:60dvh;overflow-y:auto;overscroll-behavior:contain}
  .p3a-lin{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;align-items:center;padding:4px 3px;
    border-top:1px solid var(--p3a-linha)}
  .p3a-lin:first-child{border-top:0}
    .p3a-num,.p3a-pin{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#0d1117}
  .p3a-tx{display:grid;min-width:0}
  #nv .p3a-ti{display:block;padding:0;background:none;border:0;font-size:13px;overflow-wrap:anywhere}
  .p3a-ti b{font-weight:650}
  .p3a-pr{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--p3a-letra);min-width:0}
  .p3a-est{flex:none;white-space:nowrap}
  .p3a-bar{flex:1 1 auto;height:4px;max-width:64px;min-width:18px;border-radius:2px;background:var(--p3a-barra);position:relative;overflow:hidden}
  .p3a-bar u{position:absolute;inset:0 auto 0 0;background:var(--p3a-acento);border-radius:2px}
  /* [#714] a PEÇA ÚNICA da barra de etapa (`App.pcProgEtapa`) dentro da linha do cartão.
     O componente marca o medidor com --p, e por isso ele viraria o ANEL de 48px do #610 —
     que não cabe numa linha de 11px e empurraria o cartão para a rolagem. Aqui ele volta a
     ser a barra fina da linha (a mesma caixa da .p3a-bar) e o rótulo vira o texto ao lado,
     como a Planta 2D já faz em observa-planta.css. */
  .p3a-pe{flex:1 1 auto;min-width:0}
  .p3a-pe .pc-pt{display:flex;align-items:center;gap:6px;min-width:0}
  .p3a-pe .pc-med[style*="--p"]{display:block;flex:1 1 auto;width:auto;height:4px;min-width:18px;max-width:64px;
    margin:0;border:0;border-radius:2px;background:var(--p3a-barra)}
  .p3a-pe .pc-med[style*="--p"]::before{content:none}
  .p3a-pe .pc-med[style*="--p"]>b{display:block;height:100%;border-radius:2px;background:var(--p3a-acento)}
  /* a ESTIMATIVA continua se declarando: listrada, nunca borda tracejada numa barra de 4px */
  .p3a-pe .pc-pt[data-est="1"] .pc-med[style*="--p"]>b{
    background:repeating-linear-gradient(45deg,var(--p3a-acento) 0 4px,var(--p3a-barra) 4px 8px)}
  .p3a-pe .pc-med-r{flex:none;display:flex;gap:4px;white-space:nowrap;color:var(--p3a-letra)}
  .p3a-x{flex:none;white-space:nowrap}
  .p3a-mot{font-size:13px;color:var(--p3a-letra);overflow-wrap:anywhere}
  #nv .p3a-mais{display:block;width:100%;padding:5px 3px 1px;background:none;border:0;border-top:1px solid var(--p3a-linha);
    color:var(--p3a-letra);font-size:13px;font-weight:600}
  /* a decisão no balcão: os botões da Mesa, pequenos (o mesmo gesto, `agDecide`) */
  .p3a-bts{display:flex;gap:6px;margin-top:4px}
  #nv .p3a-rot .p3a-bt{padding:3px 10px;min-height:28px;background:var(--p3a-chip);border:1px solid var(--p3a-linha);border-radius:999px;font-weight:600}
  #nv .p3a-bt:hover{border-color:var(--p3a-acento)}

  /* FECHADO (celular, ou outra bancada em foco): a pílula "N aqui ▾" com as bolinhas */
  #nv .p3a-rot .p3a-chip{display:none;position:relative;align-items:center;gap:6px;padding:7px 11px;min-height:36px;
    background:none;border:0;font-weight:650;white-space:nowrap}
  #nv .p3a-rot .p3a-chip::after{content:"";position:absolute;inset:-4px}
  .p3a-dots{display:flex;gap:2px}
  .p3a-dots s{display:block;width:7px;height:7px;border-radius:50%}
  #nv .p3a-card.p3a-fech{width:auto;min-width:0}
  #nv .p3a-card.p3a-fech .p3a-hd,#nv .p3a-card.p3a-fech .p3a-rows{display:none}
  #nv .p3a-card.p3a-fech .p3a-chip{display:flex}

  /* o NÚMERO sobre o robô e o selo da fila */
  .p3a-pin{position:absolute;left:0;top:0;margin:-9px 0 0 -9px;box-shadow:0 0 0 2px var(--p3a-fundo);pointer-events:none}

  /* NENHUM cartão por padrão: só o da demanda do anel tocado (.p3a-um), com a linha dela e o detalhe */
  #nv .p3a-card.p3a-oculto{visibility:hidden;pointer-events:none}
  #nv .p3a-card.p3a-um .p3a-lin:not(.p3a-alvo),#nv .p3a-card.p3a-um .p3a-hd,#nv .p3a-card.p3a-um .p3a-mais,
  #nv .p3a-card .p3a-chip{display:none}
  .p3a-card .bt-fechar{display:none}
  #nv .p3a-rot .p3a-card.p3a-um .bt-fechar{display:grid}
  .p3a-card.p3a-um .p3a-lin{padding-right:30px}
  .p3a-det{display:none}
  .p3a-card.p3a-um .p3a-det{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:13px;line-height:1.45;color:var(--p3a-tx)}
  .p3a-det-t{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
  #nv .p3a-rot .p3a-hoje{justify-self:start;padding:8px 0;min-height:44px;background:none;border:0;color:var(--p3a-acento);
    font-size:13px;font-weight:650;text-decoration:underline}

  /* o ANEL sobre a cabeça do robô: alvo de toque de 44 px+, reaproveita .pc-med (#611) */
  #nv .p3a-rot .p3a-anel{position:absolute;left:0;top:0;min-width:44px;min-height:44px;padding:0;pointer-events:auto;
    background:none;border:0;display:grid;place-items:center;text-align:center;will-change:transform}
  /* o selo "+N" dos anéis e a lista dos que ficaram sem anel (#627) */
  #nv .p3a-rot .p3a-mais-an{position:absolute;left:0;top:0;min-width:44px;min-height:44px;padding:0 8px;pointer-events:auto;will-change:transform;
    background:var(--p3a-chip);color:var(--p3a-tx);border:1px dashed var(--p3a-letra);border-radius:999px;font-size:13px;font-weight:700}
  #nv .p3a-rot .p3a-lista{position:absolute;left:0;top:0;display:grid;gap:2px;min-width:150px;padding:8px;pointer-events:auto;
    background:var(--p3a-chip);color:var(--p3a-tx);border:1px solid var(--p3a-linha);border-radius:10px}
  #nv .p3a-rot .p3a-lista[hidden],#nv .p3a-rot .p3a-mais-an[hidden]{display:none}
  #nv .p3a-rot .p3a-lis-t{font-size:13px}
  #nv .p3a-rot .p3a-lis-i,#nv .p3a-rot .p3a-lis-x{min-height:44px;background:none;border:0;color:var(--p3a-tx);text-align:left;font-size:13px}
  #nv .p3a-rot .p3a-lis-x{color:var(--p3a-acento);text-decoration:underline}
  .p3a-anel .pc-med[style*="--p"]{--c:var(--p3a-acento);--d:50px;margin:0;grid-area:1/1;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--p3a-barra) 0);
    box-shadow:0 0 0 2px var(--p3a-fundo)}
  .p3a-anel .pc-med[style*="--p"]::before{content:"";background:var(--p3a-chip)}
  .p3a-an-g.pc-med[style*="--p"],.p3a-card .pc-med.p3a-an-g[style*="--p"]{--d:56px;margin:0}
  .p3a-card .p3a-an-g[style*="--p"]::before{content:counter(n) "%";background:var(--p3a-chip);color:var(--p3a-tx)}
  .p3a-an-t{grid-area:1/1;position:relative;display:grid;line-height:1.05;color:var(--p3a-tx);pointer-events:none}
  .p3a-an-t small{font-size:9px;font-weight:600;letter-spacing:.02em}
  .p3a-an-t b{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
  #nv .p3a-rot .p3a-anel:hover .pc-med,#nv .p3a-rot .p3a-anel[aria-expanded="true"] .pc-med{--c:var(--p3a-tx)}
  @media (prefers-reduced-motion:reduce){.p3a-anel,.p3a-anel *,.p3a-anel .pc-med[style*="--p"]{transition:none;animation:none}}
  /* círculo na FILA: só o contorno (tracejado), sem o enchimento do progresso */
  #nv .p3a-rot .p3a-anel.p3a-anel-fila .pc-med[style*="--p"]{background:var(--p3a-chip);border:2px dashed var(--p3a-letra)}
  .p3a-selo{position:absolute;left:0;top:0;background:var(--p3a-chip);border:1px dashed var(--p3a-letra);border-radius:999px;
    padding:2px 8px;font-size:11px;font-weight:650;white-space:nowrap;pointer-events:none}

  /* o CÍRCULO com o NÚMERO de demandas abertas sobre a cabeça de cada humano e de VOCÊ
     (#666): o MESMO componente e tamanho do anel dos robôs (.pc-med, 50 px), sem animação
     nenhuma. Com demanda, o aro é o acento e o número tem contraste cheio; com ZERO fica
     APAGADO (aro e número na letra muda) — zero não é alerta, então nada de cor de alarme. */
  .p3a-hum-n{display:grid;place-items:center}
  .p3a-hum-n>*{grid-area:1/1}
  /* #691: o círculo é PEQUENO (30 px; 24 no celular) — não cobre boneco nem nome — e só
     existe com 1 ou mais demandas. O alvo de toque de 44 px vem de um ::after invisível. */
  .p3a-hum-n .pc-med.p3a-an-g[style*="--p"]{--d:30px;background:var(--p3a-acento)}
  .p3a-hum-n .p3a-an-t b{font-size:13px}
  #nv .p3a-rot .p3a-anel.p3a-hum{min-width:0;min-height:0;position:absolute}
  #nv .p3a-rot .p3a-anel.p3a-hum::after{content:"";position:absolute;inset:-7px}
  @media (max-width:640px){
    .p3a-hum-n .pc-med.p3a-an-g[style*="--p"]{--d:24px}
    .p3a-hum-n .p3a-an-t b{font-size:12px}
  }
  .p3a-hum-n.p3a-hum-zero .pc-med.p3a-an-g[style*="--p"]{background:var(--p3a-barra)}
  .p3a-hum-n.p3a-hum-zero .p3a-an-t{color:var(--p3a-letra)}

  /* o CARD do humano (#666): o toque no boneco abre, por cima da Planta inteira — também em
     tela cheia (#629) —, centrado, com o fundo escuro que fecha no toque fora. O CARD rola
     SÓ POR DENTRO (#663: overflow-y + overscroll-behavior contido); a página fica parada
     (`.nv-painel-aberto` em html/body, ligado pelo JS). */
  #nv .p3 .p3-det.p3a-hum-aberto{position:fixed;inset:0;width:auto;max-height:none;padding:0;
    transform:none;background:none;border:0;box-shadow:none;overflow:visible;
    display:grid;place-items:center;z-index:40}
  .p3a-hum-fundo{position:absolute;inset:0;background:color-mix(in oklab,var(--ink) 55%,transparent)}
  .p3a-hum-card{position:relative;box-sizing:border-box;width:min(36rem,calc(100vw - 24px));
    max-height:min(86vh,calc(100dvh - 24px));overflow-y:auto;overscroll-behavior:contain;
    padding:14px 16px;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)}
  .p3a-hum-card>b{display:block;padding-right:48px;font:600 var(--t-sub,var(--t-dat))/1.3 var(--display)}
  #nv .p3a-hum-card .p3a-hum-d{display:block;min-height:44px;padding:0;background:none;border:0;
    color:var(--blue);font:inherit;text-align:left;text-decoration:underline;overflow-wrap:anywhere}
  .p3a-hum-card .p3a-hum-an{justify-self:start;margin-top:4px}
  .p3a-hum-card .pc-med.p3a-an-g[style*="--p"]{--d:44px;margin:0}
  .p3a-hum-card .p3a-an-t{color:var(--ink)}
  .p3a-hum-bts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  #nv .p3a-hum-card .p3a-hum-bt{min-height:44px;padding:6px 14px;background:var(--sf);color:var(--ink);
    border:1px solid var(--bd);border-radius:0;font:var(--t-dat)/1.2 var(--mono)}
  #nv .p3a-hum-card .p3a-hum-bt:hover{border-color:var(--blue)}
  /* #613: a lista da bancada — estado por glifo + palavra, texto na tinta (contraste AA) */
  .p3b-card .p3b-v{color:var(--ink);overflow-wrap:anywhere}
  .p3b-card .p3b-v i{font-style:normal;font-weight:700}
  .p3b-card small{color:var(--ink)}
  @media (max-width:820px){
    .p3a-hum-card{width:100%;max-height:100dvh;border-left:0;border-right:0}
  }

  /* o CELULAR (cena estreita): sem o resumo (a pílula de cada bancada já conta) */
  .p3-cena[data-cel="1"] .p3a-sum{display:none}
  .p3-cena[data-cel="1"] .p3a-card{max-width:min(250px,calc(100% - 16px))}
  .p3-cena[data-cel="1"] .p3a-cab{max-width:calc(100% - 64px);padding:10px 12px}
  .p3-cena[data-cel="1"] .p3a-rot{font-size:14px}
  .p3-cena[data-cel="1"] .p3a-card,.p3-cena[data-cel="1"] .p3a-card .p3a-ti,.p3-cena[data-cel="1"] .p3a-card .p3a-pr,
  .p3-cena[data-cel="1"] .p3a-card .p3a-mot,.p3-cena[data-cel="1"] .p3a-card .p3a-n{font-size:14px}
  @media (max-width:640px){.p3a-hum-card{font-size:14px}}