/* cockgit — nova-empresa.css
   vista /nova · tela EMPRESA — a SALA DE VIDRO (layout aprovado pelo dono, 31/08/2026)

   POR QUE UM ARQUIVO NOVO. `nova.css` já está a ~48,4KB e o teto POR ARQUIVO do
   painel é 48KB (test_frontend_esteira_por_repo_658.py, DoD 5). O bloco da Sala de
   Vidro não cabia lá, e engordar um arquivo até o limite é o que o refactor B3
   proibiu (docs/FRONTEND.md §4). FICOU FORA o gating da tela
   (`#nv:not([data-tela="empresa"])`) e o open space (`.nv-sala` / `.nv-mesa`), que o
   desenho novo REUSA como as ilhas por área: estavam em nova.css e, desde a QUEBRA
   POR ÁREA (02/09/2026), moram em `nova-planta.css`, carregada logo antes desta.
   ORDEM DE CARGA: depois de `nova.css` e de `nova-planta.css` — este arquivo
   refina a mesma tela, e a cascata é contrato (docs/FRONTEND.md §3.1).

   COR SÓ POR TOKEN de base.css (`--accent`, `--p0..p3`, `--roxo`, …): os 4 skins da
   /nova redefinem tokens, então um hex aqui seria a única peça da tela que não
   acompanha a identidade escolhida. Trava em test_frontend_nova_empresa.py.

   GEOMETRIA, e o motivo de cada peça:
     · a SALA é uma caixa de vidro: borda translúcida + brilho diagonal, com a placa
       montada por cima da borda (o nome fica legível na moldura).
     · a CABECEIRA é um cubo com aresta 3D (`skewY(-45deg)` numa faixa à direita): o
       lugar do dono, de frente para a mesa.
     · a MESA é um oval de verdade (`border-radius:50%/42%`) e as cadeiras ficam em
       volta DELE, ancoradas no `.nv-sv-wrap` — por isso o wrap é `relative` e elas
       `absolute`: tangenciam a borda em vez de virarem lista ao lado.
     · POSIÇÃO E LARGURA DA CADEIRA SAEM DO JS, em `style` inline (`_nvSvPos`, em
       app-nova-sala.js): a mesa CRESCE conforme a convocação, e a conta —
       `sqrt(1-u²)` para a altura da elipse naquele x, `96%/n` para a largura da
       fileira — depende de quantas cadeiras existem naquele render. Não há classe de
       posição fixa aqui de propósito: lugares presos no CSS seriam mesa que não cresce.
     · as cadeiras das pontas ficam INCLINADAS (`rotate`) acompanhando a curva, e o
       tooltip DESGIRA para o texto sair reto.
   NO CELULAR as cadeiras encolhem e continuam em volta do oval; nunca viram lista —
   sai de graça da largura percentual, e o bloco do celular só afina respiro. */

  /* ---------------- a SALA DE VIDRO ---------------- */
  .nv-sv{position:relative;border:3px solid var(--accent);padding:26px 20px 20px;
    margin:22px 0 16px;
    background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 9%,transparent),
      color-mix(in oklab,var(--accent) 3%,transparent) 40%,transparent 70%);
    box-shadow:inset 0 0 60px color-mix(in oklab,var(--accent) 7%,transparent)}
  /* o brilho do vidro: uma faixa diagonal clara, sem capturar clique */
  .nv-sv::after{content:"";position:absolute;top:0;left:14%;width:22%;height:100%;
    pointer-events:none;background:linear-gradient(105deg,transparent,
      color-mix(in oklab,var(--text) 6%,transparent) 45%,transparent)}
  .nv-sv-placa{position:absolute;top:-19px;left:22px;background:var(--bg);padding:0 12px;
    display:flex;align-items:center;gap:10px}
  .nv-sv-placa .nome{font-family:var(--display);font-size:var(--t-sec);letter-spacing:.1em;
    color:var(--accent);text-transform:uppercase}
  .nv-sv-logo{width:92px;height:46px;display:block;flex:none}
  .nv-sv-estado{position:absolute;top:-17px;right:20px;background:var(--bg);padding:0 10px;
    display:flex;align-items:center;gap:10px;font-size:var(--t-cap);color:var(--muted)}
  .nv-sv-estado b{font-weight:400;color:var(--accent2)}
  .nv-sv-estado.viva b{color:var(--accent)}
  /* TRÊS colunas desde 01/09: cabeceira | mesa oval | prospecção. A mesinha ficou
     ao LADO de quem está em atendimento (ordem do dono) — embaixo ela lia como
     "outra seção", e ela é o canto da MESMA sala. A do meio é `minmax(0,1fr)`
     porque a mesa oval tem conteúdo que não encolhe (as pastas no tampo): com
     `1fr` puro ela empurraria a terceira coluna para fora da tela. */
  .nv-sv-reuniao{display:grid;
    grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(250px,300px);
    gap:22px;align-items:center}

  /* ---------------- a CABECEIRA (o cubo do dono) ---------------- */
  .nv-sv-cubo{border:3px solid var(--p2);position:relative;padding:16px 18px;
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    background:linear-gradient(180deg,color-mix(in oklab,var(--p2) 14%,transparent),
      color-mix(in oklab,var(--p2) 3%,transparent));
    box-shadow:inset 0 0 34px color-mix(in oklab,var(--p2) 12%,transparent)}
  .nv-sv-cubo::before{content:"cabeceira";position:absolute;top:-15px;left:14px;
    background:var(--bg);padding:0 9px;font-size:var(--t-cap);letter-spacing:.16em;
    color:var(--p2);text-transform:uppercase}
  /* a aresta: uma faixa à direita, inclinada 45°, que dá volume de cubo ao bloco */
  .nv-sv-cubo::after{content:"";position:absolute;right:-9px;top:-9px;width:9px;
    height:calc(100% + 9px);transform:skewY(-45deg);transform-origin:left top;
    pointer-events:none;background:linear-gradient(180deg,
      color-mix(in oklab,var(--p2) 40%,transparent),
      color-mix(in oklab,var(--p2) 8%,transparent))}
  .nv-sv-cubo .papel{font-size:var(--t-cap);letter-spacing:.13em;text-transform:uppercase;
    color:var(--p2)}
  .nv-sv-cubo .nome{font-family:var(--display);font-size:40px;line-height:1.05}
  .nv-sv-cubo .faz{font-size:var(--t-bod);color:var(--p1)}
  .nv-sv-cubo .faz.calmo{color:var(--muted)}
  .nv-sv-cubo .sub{font-size:var(--t-dat);color:var(--p3)}
  .nv-sv-cubo .carimbo{margin-top:6px;padding-top:6px;font-size:var(--t-cap);color:var(--p2);
    border-top:1px dashed color-mix(in oklab,var(--p2) 45%,transparent)}

  /* ---------------- a MESA OVAL e as cadeiras (quantas a convocacao pedir) ---- */
  /* O RESPIRO DA MESA é a altura de UMA CADEIRA, não um número bonito: a cadeira
     é ancorada pela base (`bottom:calc(100% - X)`) e cresce para FORA do oval, e
     no poker ela ainda ganha a carta. Com menos que isto a fileira de cima sai por
     cima da placa da sala — foi o que o headless mostrou na primeira medição.

     [02/09] A CADEIRA É ANCORADA NO TOPO REAL DO TAMPO, não numa fração dele.
     O mergulho da cadeira na curva era `(1-√(1-u²))·50%` DA ALTURA DO TAMPO — e o
     tampo cresce com o texto. Resultado medido a 1920: com a legenda de 2 linhas o
     tampo ia a 341px (438px na agenda) e a fileira norte descia 22% disso, ou seja
     ~76px para dentro do oval, EM CIMA da legenda: 8 sobreposições na agenda, a
     pior com 3209px² de área. Agora o mergulho é `(1-√(1-u²)) × --nv-curva`, em
     PIXELS, medido a partir da borda: o tampo pode crescer o quanto quiser que a
     cadeira continua encostada na borda dele. A curva (o desenho aprovado) fica —
     o que sai é o acoplamento entre altura do texto e profundidade da cadeira.
     E o padding vertical do tampo passa a ser `--nv-curva + folga`: é ele que
     garante que o texto NASÇA abaixo da faixa que as cadeiras ocupam. */
  .nv-sv-m2{display:flex;justify-content:center;padding:172px 0 176px}
  .nv-sv-wrap{position:relative;width:min(720px,100%);--nv-curva:44px}
  .nv-sv-tampo{width:100%;min-height:190px;border:3px solid var(--ruleS);
    border-radius:50%/42%;background:radial-gradient(ellipse at 38% 26%,
      color-mix(in oklab,var(--accent) 12%,transparent),transparent 62%),var(--surface);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    text-align:center;padding:calc(var(--nv-curva) + 12px) 14%}
  .nv-sv-tit{font-family:var(--display);font-size:var(--t-sec);color:var(--accent)}
  /* o cabecalho da tela: a legenda, o selo de ao vivo e o comutador de estado */
  .nv-emp-cabec{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
  .nv-emp-cabec .nv-cap{margin:14px 0 10px}
  .nv-sv-sub{font-size:var(--t-dat);color:var(--muted);max-width:40ch}
  .nv-sv-namesa{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

  /* a cadeira em planta baixa: assento + encosto (o ::before) virado para FORA */
  .nv-sv-cad{position:absolute;width:154px;border:2px solid var(--border);
    background:var(--surface);padding:8px 7px 9px;text-align:center}
  .nv-sv-cad .n{font-family:var(--display);font-size:var(--t-dat);line-height:1.1;
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nv-sv-cad::before{content:"";position:absolute;left:11%;right:11%;height:8px;
    background:var(--border)}
  .nv-sv-cad.norte::before{top:-10px}
  .nv-sv-cad.sul::before{bottom:-10px}
  .nv-sv-cad.cliente{border-color:var(--accent2);
    background:linear-gradient(180deg,color-mix(in oklab,var(--accent2) 12%,transparent),transparent)}
  .nv-sv-cad.cliente::before{background:var(--accent2)}
  /* dourado = chamado por VOCÊ (a convocação), a mesma cor da cabeceira */
  .nv-sv-cad.chamado{border-color:var(--p2);
    background:linear-gradient(180deg,color-mix(in oklab,var(--p2) 14%,transparent),transparent)}
  .nv-sv-cad.chamado::before{background:var(--p2)}
  .nv-sv-cad.chamado .n{color:var(--p2)}
  .nv-sv-cad[role="button"]{cursor:pointer}
  /* no poker: quem ainda não votou */
  .nv-sv-cad.pensando{border-color:var(--p1)}
  .nv-sv-cad.pensando::before{background:var(--p1)}
  .nv-sv-cad.pensando .n{color:var(--p1)}
  .nv-sv-cad.equipe{border-color:var(--accent);
    background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 12%,transparent),transparent)}
  .nv-sv-cad.equipe::before{background:var(--accent)}
  .nv-sv-cad.equipe .n{color:var(--accent)}
  .nv-sv-cad.vazia{border-style:dashed;border-color:var(--p3);background:none;opacity:.6}
  .nv-sv-cad.vazia::before{background:var(--p3)}
  .nv-sv-cad.vazia .n{color:var(--p3)}
  /* o realce do MOUSE e o do TECLADO sao coisas diferentes: o hover troca a cor
     da borda; o teclado ainda precisa do anel de :focus-visible de base.css. A
     cadeira e tabindex=0 -- apagar o outline deixava o foco INVISIVEL nela. */
  .nv-sv-cad:hover,.nv-sv-cad:focus{border-color:var(--accent);opacity:1;z-index:9}

  /* a PASTA do projeto que o ocupante levou para a cadeira */
  .nv-sv-pasta{display:inline-flex;position:relative;margin-top:8px;max-width:100%;
    border:1px solid var(--p2);color:var(--p2);font-size:var(--t-cap);padding:1px 7px 2px;
    background:linear-gradient(180deg,color-mix(in oklab,var(--p2) 18%,transparent),
      color-mix(in oklab,var(--p2) 5%,transparent))}
  /* a aba da pasta */
  .nv-sv-pasta::before{content:"";position:absolute;top:-5px;left:-1px;width:38%;height:5px;
    border:1px solid var(--p2);border-bottom:0;
    background:color-mix(in oklab,var(--p2) 18%,transparent)}
  /* o "+N" das pastas que não couberam na cadeira (o tooltip lista todas) */
  .nv-sv-pasta.mais{opacity:.7;padding:1px 5px 2px}
  .nv-sv-pasta.fechada{opacity:.5;border-color:var(--p3);color:var(--p3);background:none}
  .nv-sv-pasta.fechada::before{border-color:var(--p3);background:none}
  /* a pasta ABERTA no tampo: só quem sentou aparece aqui */
  .nv-sv-pasta.mesa{font-size:var(--t-dat);padding:5px 13px 6px;border-width:2px;
    color:var(--text);margin:0}
  .nv-sv-pasta.mesa b{color:var(--p2);font-weight:400}
  /* a ETIQUETA da pasta: de quem ela é. Com a mesa por projeto (01/09) o nome
     do dono deixou de estar na cadeira — sem esta linha o tampo diria
     "Ipê (Piracema)" sem dizer que é do Nelson. Ela é secundária de propósito:
     o que se lê primeiro é a pasta; o dono vem logo atrás, em itálico. */
  .nv-sv-pasta.mesa i{font-style:italic;color:var(--muted);margin-left:8px;
    font-size:var(--t-cap);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;min-width:0}

  /* o DETALHE só no hover/foco: na cadeira cabe nome + pasta, e nada mais */
  .nv-sv-tip{position:absolute;left:50%;translate:-50% 0;bottom:calc(100% + 14px);
    width:max-content;max-width:280px;border:2px solid var(--accent);background:var(--surface);
    color:var(--text);font-size:var(--t-cap);line-height:1.4;padding:8px 11px;text-align:left;
    opacity:0;visibility:hidden;transition:opacity .12s;z-index:20;pointer-events:none}
  .nv-sv-cad.sul .nv-sv-tip{bottom:auto;top:calc(100% + 14px)}
  .nv-sv-tip b{display:block;font-family:var(--display);font-size:var(--t-dat);
    font-weight:400;color:var(--accent)}
  .nv-sv-tip i{font-style:normal;color:var(--muted)}
  .nv-sv-cad:hover .nv-sv-tip,.nv-sv-cad:focus .nv-sv-tip{opacity:1;visibility:visible}
  @media (prefers-reduced-motion: reduce){ .nv-sv-tip{transition:none} }
  /* cadeira na PONTA do oval: o tooltip encosta na borda dela em vez de ficar
     centrado. Centrado, ele sairia do documento e daria rolagem lateral de
     PÁGINA — e um elemento com `visibility:hidden` continua ocupando espaço de
     rolagem, ou seja isto vale com o tooltip fechado. Quem decide o lado é o JS,
     que conhece o `u` da cadeira na curva. */
  .nv-sv-tip.esq{left:0;translate:0 0}
  .nv-sv-tip.dir{left:auto;right:0;translate:0 0}

  /* O TOOLTIP DESGIRA: a cadeira inclinada gira o filho junto, e sem isto o texto
     sai torto justamente nas cadeiras das pontas. O ângulo de cada cadeira é
     inline (vem do JS, que é quem sabe a curva); a compensação lê a MESMA conta
     pela variável que o JS escreve junto, no mesmo `style`. */
  .nv-sv-cad .nv-sv-tip{rotate:calc(-1 * var(--nv-giro,0deg))}

  /* ---------------- PLANNING POKER: a carta na frente de quem votou ------------ */
  .nv-sv-carta{display:inline-block;width:38px;height:50px;margin-top:8px;
    border:2px solid var(--p2);color:var(--p2);font-family:var(--display);
    font-size:var(--t-sec);line-height:46px;text-align:center;
    background:linear-gradient(180deg,color-mix(in oklab,var(--p2) 16%,transparent),
      color-mix(in oklab,var(--p2) 4%,transparent))}
  /* virada: ninguém vê o voto do vizinho antes da revelação */
  .nv-sv-carta.verso{color:transparent;border-color:var(--accent);
    background:repeating-linear-gradient(45deg,var(--surface2) 0 5px,
      color-mix(in oklab,var(--accent) 25%,transparent) 5px 10px)}
  .nv-sv-carta.fora{border-style:dashed;border-color:var(--p3);background:none;
    color:var(--p3);font-size:var(--t-dat)}
  /* as cartas reveladas vão ao TAMPO, em ordem, com mediana e divergência */
  .nv-sv-mao{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .nv-sv-mao .nv-sv-carta{margin-top:0;width:46px;height:60px;line-height:56px}
  .nv-sv-consenso{font-size:var(--t-dat);color:var(--p2)}
  .nv-sv-consenso b{font-weight:400;color:var(--text)}
  .nv-sv-ordem{font-size:var(--t-cap);color:var(--p3)}
  button.nv-sv-bt{border:2px solid var(--accent);color:var(--accent);
    background:var(--surface);font-size:var(--t-dat);padding:7px 14px}

  /* ---------------- a CONVOCAÇÃO: chamar para a mesa ---------------- */
  /* ---------- MESA DE PROSPECÇÃO (o canto da sala, fora da esteira) ----------
     Mesinha REDONDA, menor e mais apagada que a oval: quem senta aqui ainda não é
     cliente. A diferença é lida antes da legenda — traço pontilhado, sem cor de
     cliente, tudo com opacidade menor. Nada daqui conta tempo nem ocupa lugar na
     fábrica; o desenho é o que impede o dono de confundir as duas mesas. */
  .nv-sv-prosp{border-left:1px dashed var(--border);padding-left:18px}
  .nv-sv-prosp .rot{display:block;font-size:var(--t-cap);letter-spacing:.14em;
    text-transform:uppercase;color:var(--p3);margin-bottom:2px}
  /* a MESINHA repete a estrutura da mesa grande — um wrap `position:relative` com o
     tampo dentro e as cadeiras absolutas em volta —, e é por isso que o JS pode
     reusar a MESMA conta de curva (`_nvSvPos`). O padding fica no container, como
     no `.nv-sv-m2`: é ele que abre o espaço das cadeiras acima e abaixo. */
  /* o padding RESERVA a faixa das cadeiras: elas encostam na curva do tampinho e
     crescem para fora. Medido a 1360 e a 390 — abaixo disto a cadeira do norte sobe
     por cima do rótulo e a do sul desce sobre a linha "não fecharam". */
  .nv-sv-mesinha{width:100%;display:flex;justify-content:center;padding:110px 0 98px}
  .nv-sv-mwrap{position:relative;width:100%;--nv-curva:26px}
  .nv-sv-tampinho{width:100%;min-height:78px;border:2px dashed var(--ruleS);
    border-radius:50%/44%;background:color-mix(in oklab,var(--surface) 60%,transparent);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-align:center;padding:calc(var(--nv-curva) + 8px) 15%}
  .nv-sv-tampinho b{font-family:var(--display);font-size:var(--t-dat);font-weight:400;
    color:var(--muted)}
  .nv-sv-tampinho small{font-size:var(--t-cap);color:var(--p3);line-height:1.3}
  /* a cadeirinha: pontilhada e sem encosto colorido — não é lugar de cliente */
  .nv-sv-pcad{position:absolute;border:2px dotted var(--p3);background:var(--surface);
    padding:5px 5px 6px;text-align:center;opacity:.85}
  .nv-sv-pcad .n{font-family:var(--display);font-size:var(--t-dat);display:block;
    color:var(--muted);line-height:1.1;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  /* UMA linha, com reticencias: a etiqueta que embrulhava fazia a cadeirinha crescer
     ~16px por linha, e como ela e ancorada na curva PELO RODAPE, tudo isso subia por
     cima do rotulo da coluna (medido a 1360: a cadeira ia a 182px, o rotulo acabava
     em 200). O texto inteiro fica no title. */
  .nv-sv-pcad .et{display:block;font-size:var(--t-cap);color:var(--p3);margin-top:3px;
    line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nv-sv-pcad .nv-sv-pasta{font-size:var(--t-cap);padding:1px 5px 2px;margin-top:5px;
    opacity:.75;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block;
    white-space:nowrap}
  .nv-sv-pcad::before{content:"";position:absolute;left:22%;right:22%;height:5px;
    background:var(--p3)}
  /* a cadeirinha do prospect ABRE A FICHA (fechar negócio, arquivar, editar). Só
     quem é prospect ganha o cursor: cliente fora da fábrica senta aqui também, e
     um clique nele não teria o que fazer — botão que não age não existe. */
  .nv-sv-pcad[role="button"]{cursor:pointer}
  /* idem a cadeira da mesa oval: o anel do teclado fica. */
  .nv-sv-pcad[role="button"]:hover,.nv-sv-pcad[role="button"]:focus{
    border-style:solid;border-color:var(--accent2);opacity:1;z-index:9}
  /* gravando: o gesto saiu, o cartório ainda não respondeu. A cadeira DIZ isso em
     vez de já mostrar o resultado — o que vale é o que o servidor gravar. */
  .nv-sv-pcad.pend{border-color:var(--p2);opacity:1}
  .nv-sv-pcad.pend .et{color:var(--p2)}
  /* [+ prospect] — alvo de toque de 44px, ao lado do rótulo da coluna */
  /* o [+ prospect] fica na PROPRIA linha, largura inteira: ao lado do rotulo ele
     encostava na cadeira do norte-direita (medido a 1360). Largura inteira tambem
     resolve o alvo de toque no celular, sem regra a mais. */
  button.nv-sv-pmais{display:block;width:100%;margin-top:8px;min-height:44px;
    padding:4px 12px;border:2px solid var(--border);background:var(--surface);
    color:var(--muted);font-size:var(--t-cap);letter-spacing:.06em}
  button.nv-sv-pmais:hover{border-color:var(--accent2);color:var(--accent2)}
  /* NÃO FECHARAM: o arquivo do dono. Discreto, mas legível — a lista limpa custaria
     a informação de que a pessoa já foi abordada. Cada nome reabre a ficha. */
  .nv-sv-frios{margin-top:6px;font-size:var(--t-cap);color:var(--p3);
    display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .nv-sv-frios button{min-height:0;padding:2px 7px;border:1px dashed var(--p3);
    background:none;color:var(--p3);font-size:var(--t-cap)}
  .nv-sv-frios button:hover{border-color:var(--accent2);color:var(--accent2)}
  .nv-sv-frios small{opacity:.75}

  /* o DIÁLOGO da mesinha reusa a caixa do lançador (`.nv-la*`, css/nova.css): são
     dois diálogos do MESMO painel, e um segundo vocabulário de caixa faria o dono
     aprender duas aparências para a mesma coisa. Só o pano de fundo é próprio,
     porque ele é id-escopado lá. */
  #nv-pr{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:41;
    align-items:flex-start;justify-content:center;padding:56px 16px}
  #nv-pr.on{display:flex}
  #nv-pr .nv-la{width:min(520px,100%)}
  /* alvo de toque de 44px, e a fileira ENCHE a caixa: com dois botões de negócio
     (arquivar / fechar) lado a lado, cada um fica com ~230px — clicável no dedo. */
  #nv-pr .nv-la-row{gap:8px}
  #nv-pr .nv-la-row button{min-height:44px;flex:1 1 200px}
  #nv-pr .nv-la-row .primary{margin-left:0}
  #nv-pr .nv-la-st.ok{color:var(--accent)}
  #nv-pr .nv-la-st.bad{color:var(--p0)}
  .nv-sv-pcad.norte::before{top:-7px}
  .nv-sv-pcad.sul::before{bottom:-7px}

  /* A ordem NÃO nasce aqui: ela vem do WhatsApp (Iris) ou do cockpit, e estes
     chips são o caminho click-and-go do cockpit — um clique chama, outro dispensa,
     zero digitação (lei do dono). O chip DENTRO é dourado, como a cadeira chamada:
     a mesma cor para o mesmo fato, nas duas zonas da tela. */
  .nv-sv-conv{margin-top:16px;border-top:1px dashed var(--border);padding-top:12px}
  .nv-sv-conv .h{font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase;
    color:var(--p3);margin-bottom:9px}
  .nv-sv-chips{display:flex;gap:7px;flex-wrap:wrap}

  /* OS TRES GRUPOS (01/09). Projeto vai para a mesa, papel vai para a cadeira e
     cliente nao vai para nenhuma das duas — coisas com destinos diferentes nao
     podem morar na mesma parede de chips. Cada grupo e um <details> nativo: no
     celular as tres listas abertas viravam um paredao de rolagem, e recolher e o
     que mantem o alvo de toque grande sem esconder informacao — o resumo diz
     quantos ha e quantos estao na mesa mesmo fechado. Nativo tambem e o que da o
     teclado e o leitor de tela de graca. */
  .nv-sv-gr{margin-bottom:9px}
  .nv-sv-gr>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
    gap:8px;flex-wrap:wrap;padding:7px 2px;min-height:34px;
    font-size:var(--t-cap);color:var(--p3)}
  .nv-sv-gr>summary::-webkit-details-marker{display:none}
  /* a seta e desenhada, nao o marcador do navegador: o marcador some no Safari e
     o grupo fechado ficaria sem sinal nenhum de que ha algo dentro */
  .nv-sv-gr>summary::before{content:"▸";color:var(--p2);
    transition:transform .12s ease;display:inline-block}
  .nv-sv-gr[open]>summary::before{transform:rotate(90deg)}
  .nv-sv-gr>summary b{color:var(--fg);letter-spacing:.12em;text-transform:uppercase;
    font-size:var(--t-cap)}
  .nv-sv-gr>summary i{font-style:normal;color:var(--p2)}
  .nv-sv-gr>summary .ex{color:var(--muted);flex:1 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nv-sv-gr>summary:hover b,.nv-sv-gr>summary:focus-visible b{color:var(--p2)}
  .nv-sv-gr[open]>.nv-sv-chips{padding-bottom:6px}
  @media (prefers-reduced-motion: reduce){
    .nv-sv-gr>summary::before{transition:none} }

  /* o chip de PROJETO leva a etiqueta do cliente e some do resto: ele e o unico dos
     tres que muda a MESA, e por isso e o unico com contorno cheio quando esta
     dentro. `.viva` e demanda sendo atendida agora — o mesmo verde da esteira. */
  button.nv-sv-chip.proj{border-style:solid}
  button.nv-sv-chip.proj.viva{border-color:color-mix(in oklab,var(--p2) 55%,var(--border))}
  /* [05/09] O CHIP DE CLIENTE CHAMA (decisao do dono: *"cliquei no card do cliente
     e ele nao foi pra mesa"*). Ele virou um PAR COLADO — split button: o corpo
     chama/dispensa as pastas do cliente, na mesma gramatica do chip de projeto
     (tracejado fora, contorno cheio e dourado dentro, `parte` quando so algumas
     pastas dele estao na mesa); o segmento ▽ da direita e o FILTRO DE VISTA, que
     ate ontem (#94) era o clique inteiro. Dois botoes, dois gestos — nunca os dois
     no mesmo clique, que foi o que deixou a mesa vazia na reuniao com o Danilo. */
  .nv-sv-cli{display:inline-flex;max-width:100%;align-items:stretch}
  button.nv-sv-chip.cli{border-style:dashed}
  .nv-sv-cli>button.nv-sv-chip.cli{border-radius:var(--r-ctl) 0 0 var(--r-ctl);min-width:0}
  .nv-sv-cli>button.nv-sv-chip.cli.so{border-radius:0 var(--r-ctl) var(--r-ctl) 0;
    border-left-width:0;padding:6px 9px;flex:none;color:var(--p3)}
  .nv-sv-cli>button.nv-sv-chip.cli.so:hover,
  .nv-sv-cli>button.nv-sv-chip.cli.so:focus-visible{border-color:var(--p3);color:var(--fg)}
  button.nv-sv-chip.cli.dentro{border-style:solid}
  button.nv-sv-chip.cli.parte{border-style:solid;
    border-color:color-mix(in oklab,var(--p2) 55%,var(--border))}
  /* `max-width:100%` porque um chip é um item de flex-wrap: quem NÃO cabe embrulha,
     mas quem é mais largo que a fileira inteira ("Ju e Marcão LangPro" a 22px num
     celular de 360) fura a página. Aqui ele corta com reticências. */
  button.nv-sv-chip{border:2px solid var(--border);background:var(--surface);
    color:var(--muted);font-size:var(--t-dat);padding:6px 10px;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  button.nv-sv-chip:hover{border-color:var(--p2);color:var(--p2)}
  button.nv-sv-chip.dentro{border-color:var(--p2);color:var(--p2);
    background:color-mix(in oklab,var(--p2) 12%,transparent)}
  button.nv-sv-chip small{color:var(--p3);font-size:var(--t-cap)}

  /* A CONVOCAÇÃO QUE NÃO GRAVOU. O clique é otimista — a cadeira muda na hora —
     mas quem manda é o servidor: se o `POST /api/mesa` falhar, a tela volta atrás
     e diz AQUI. Nasce escondida (`display:none`) porque o normal é não haver erro;
     a `.vivo` só existe enquanto `App._mesaErro` existe. Sem esta linha o dono
     veria alguém sentado com o relógio parado e só descobriria na planilha. */
  .nv-sv-erro{display:none}
  .nv-sv-erro.vivo{display:block;margin-top:10px;font-size:var(--t-cap);
    color:var(--p0);border-left:3px solid var(--p0);padding:2px 0 2px 9px}

  /* ---- A TARJA DO FILTRO DE VISTA (01/09) ---------------------------------
     Com o filtro ligado a mesa mostra MENOS do que a ordem tem, e a ~2 metros
     "filtrado" e "esvaziou" sao a mesma imagem — dai o titulo em --t-sec.

     A COR E DELIBERADAMENTE NEUTRA (--p3), nao o dourado: dourado nesta tela quer
     dizer UMA coisa (chamado para a mesa) e a tarja diz o oposto. Pinta-la de
     dourado seria a cor contradizendo a frase. O unico ponto quente e o aviso de
     pasta nova escondida (--p1): urgencia e sinal pontual, nao clima. */
  .nv-sv-filtro{display:none}
  .nv-sv-filtro.viva{display:block;margin:0 0 12px;padding:10px 14px;
    background:color-mix(in oklab,var(--p3) 9%,var(--surface));
    border:1px solid var(--border);border-left:4px solid var(--p3);border-radius:4px}
  .nv-sv-filtro .l1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .nv-sv-filtro .tag{font-size:var(--t-cap);letter-spacing:.14em;
    text-transform:uppercase;color:var(--p3);white-space:nowrap}
  .nv-sv-filtro .l1 b{font-size:var(--t-sec);color:var(--fg);line-height:1.2}
  .nv-sv-filtro .l2{margin-top:3px;font-size:var(--t-dat);color:var(--muted)}
  /* a frase que separa FILTRAR de CONVOCAR: o unico lugar onde o dono le, com o
     filtro ligado, que o relogio nao mudou. */
  .nv-sv-filtro .l3{margin-top:5px;font-size:var(--t-cap);color:var(--p3)}
  .nv-sv-filtro .novo{margin-top:7px;font-size:var(--t-dat);color:var(--p1);
    border-left:3px solid var(--p1);padding:2px 0 2px 9px}
  .nv-sv-filtro .novo b{color:var(--p1)}
  /* o DESFAZER num clique: sem precisar reachar o chip no meio da parede. */
  .nv-sv-filtro .bt{margin-top:9px;border:2px solid var(--p3);background:transparent;
    color:var(--p3);font-size:var(--t-dat);padding:6px 12px;border-radius:3px}
  .nv-sv-filtro .bt:hover,.nv-sv-filtro .bt:focus-visible{border-color:var(--fg);
    color:var(--fg)}
  /* o segmento ▽ filtrando: contorno CHEIO e a cor neutra da tarja, nunca o
     dourado — dourado nesta parede quer dizer "na mesa", e o filtro nao poe. */
  button.nv-sv-chip.cli.filtrando{border-style:solid;border-color:var(--p3);
    color:var(--fg);background:color-mix(in oklab,var(--p3) 14%,transparent)}

  /* o selo de AO VIVO. Ele diz em que tempo a mesa reage — e não promete push que
     o cockpit não tem (ver o cabeçalho de app-nova-sala.js). */
  .nv-sv-vivo{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-cap);
    color:var(--accent2);padding:4px 9px;
    border:1px solid color-mix(in oklab,var(--accent2) 45%,transparent)}
  .nv-sv-vivo .pt{width:8px;height:8px;flex:none;background:var(--accent2);
    animation:nv-sv-bate 1.6s ease-in-out infinite}
  @keyframes nv-sv-bate{50%{opacity:.25}}
  @media (prefers-reduced-motion: reduce){ .nv-sv-vivo .pt{animation:none} }

  /* ---------------- a ESTEIRA: da Sala de Vidro para as Ilhas ---------------- */
  .nv-sv-esteira{position:relative;height:120px;overflow:hidden;margin-bottom:16px;
    border:2px dashed var(--border);
    background:color-mix(in oklab,var(--accent) 3%,transparent)}
  .nv-sv-esteira .origem,.nv-sv-esteira .destino{position:absolute;top:0;bottom:0;width:210px;
    display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 14px;
    z-index:2;background:var(--bg)}
  .nv-sv-esteira .origem{left:0;border-right:2px solid var(--p2);color:var(--p2)}
  .nv-sv-esteira .destino{right:0;border-left:2px solid var(--accent);color:var(--accent);
    text-align:right}
  .nv-sv-esteira b{font-family:var(--display);font-size:var(--t-dat);font-weight:400;display:block}
  .nv-sv-esteira small{color:var(--p3);font-size:var(--t-cap);line-height:1.35}
  .nv-sv-trilho{position:absolute;left:210px;right:210px;top:0;bottom:0;
    background:repeating-linear-gradient(90deg,transparent 0 22px,
      color-mix(in oklab,var(--accent) 10%,transparent) 22px 44px)}
  .nv-sv-trilho .et{position:absolute;left:12px;top:6px;font-size:var(--t-cap);
    letter-spacing:.14em;color:var(--p3);text-transform:uppercase}
  .nv-sv-peca{position:absolute;top:46px;padding:6px 12px;border:2px solid var(--accent);
    background:var(--surface);font-size:var(--t-dat);white-space:nowrap;
    animation:nv-sv-corre 13s linear infinite}
  .nv-sv-peca i{font-style:normal;color:var(--p2);font-size:var(--t-cap)}
  .nv-sv-peca.d2{animation-delay:4.3s}
  .nv-sv-peca.d3{animation-delay:8.6s}
  @keyframes nv-sv-corre{ from{left:-18%} to{left:110%} }
  .nv-sv-parada{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--p3);
    font-size:var(--t-dat)}
  @media (prefers-reduced-motion: reduce){
    .nv-sv-peca{animation:none;left:16%}
    .nv-sv-peca.d2{left:44%}
    .nv-sv-peca.d3{left:70%}
  }

  /* ---------------- o OPEN SPACE (as ilhas por área) ----------------
     A moldura; as ilhas em si são as `.nv-sala` de nova.css, reusadas. */
  .nv-sv-open{border:3px solid var(--ruleS);padding:16px;
    background:repeating-linear-gradient(45deg,transparent 0 34px,
      color-mix(in oklab,var(--accent) 5%,transparent) 34px 68px)}
  .nv-sv-open>h2{margin:0 0 12px;font-family:var(--display);font-size:var(--t-sec);
    font-weight:400;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

  /* ---------------- o RELÓGIO DA DAILY ---------------- */
  .nv-sv-fita{border:2px solid var(--border);background:var(--surface);padding:12px 14px;
    margin-top:16px}
  .nv-sv-fita .h{font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase;
    color:var(--p3);margin-bottom:9px}
  .nv-sv-pres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .nv-sv-pz{border:2px solid var(--border);padding:6px 10px;font-size:var(--t-dat)}
  .nv-sv-pz.p{border-color:var(--accent2);color:var(--accent2)}
  .nv-sv-pz.v{border-color:var(--accent2);color:var(--accent2);opacity:.6}
  .nv-sv-pz.f{opacity:.45;border-style:dashed}
  .nv-sv-ev{display:flex;gap:10px;padding:6px 0;font-size:var(--t-dat);
    border-bottom:1px solid var(--surface2)}
  .nv-sv-ev:last-child{border-bottom:0}
  .nv-sv-ev i{font-style:normal;color:var(--p3);min-width:60px;flex:none}
  .nv-sv-ev.on{color:var(--accent2)}
  .nv-sv-ev.q{color:var(--p1)}
  .nv-sv-ev.bad{color:var(--p0)}

  /* ---------------- a SALA DE DESCOMPRESSÃO (o Psicólogo) ---------------- */
  .nv-sv-desc{position:relative;border:3px solid var(--roxo);padding:22px 16px 14px;
    background:radial-gradient(ellipse at 20% 0%,
      color-mix(in oklab,var(--roxo) 12%,transparent),transparent 60%),var(--surface)}
  .nv-sv-desc::before{content:"descompressão · plantão 24h";position:absolute;top:-15px;
    left:18px;background:var(--bg);padding:0 10px;font-size:var(--t-cap);letter-spacing:.15em;
    color:var(--roxo);text-transform:uppercase}
  .nv-sv-desc h2{margin:0 0 3px;font-family:var(--display);font-size:var(--t-sec);
    font-weight:400;color:var(--roxo)}
  .nv-sv-desc .sempre{font-size:var(--t-cap);color:var(--p3);margin-bottom:12px}
  .nv-sv-diva{position:relative;border:2px solid color-mix(in oklab,var(--roxo) 55%,transparent);
    border-radius:30px 30px 0 0;background:color-mix(in oklab,var(--roxo) 9%,transparent);
    padding:12px 14px;margin-bottom:10px}
  .nv-sv-diva::before{content:"divã";position:absolute;top:-13px;right:14px;background:var(--bg);
    padding:0 8px;font-size:var(--t-cap);letter-spacing:.14em;color:var(--roxo);
    text-transform:uppercase}
  .nv-sv-diva .quem{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
    flex-wrap:wrap}
  .nv-sv-diva .quem b{font-family:var(--display);font-size:var(--t-dat);font-weight:400;
    color:var(--roxo)}
  .nv-sv-diva .lendo{font-size:var(--t-cap);color:var(--muted);margin-top:5px}
  /* o sinal EMBRULHA em vez de quebrar palavra: numa coluna de ~400px com o dado a
     22px, "laço de retry" + a prova não cabem na mesma linha, e quebrar no meio da
     palavra é o que o headless flagrou. Aqui a prova desce inteira para a linha de
     baixo, encostada à direita. */
  .nv-sv-sinal{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:var(--t-dat);
    padding:6px 0;border-bottom:1px solid var(--surface2)}
  .nv-sv-sinal:last-of-type{border-bottom:0}
  .nv-sv-sinal b{font-weight:400;flex:0 1 auto}
  .nv-sv-sinal i{font-style:normal;color:var(--p3);font-size:var(--t-cap);
    margin-left:auto;flex:0 1 auto;text-align:right}
  .nv-sv-sinal.q b{color:var(--p1)}
  .nv-sv-sinal.e b{color:var(--accent2)}
  .nv-sv-sinal.bad b{color:var(--p0)}
  .nv-sv-avisou{font-size:var(--t-cap);color:var(--roxo);margin-top:8px}
  /* o que AINDA NÃO TEM ROTA no cockpit sai com esta cara — apagado e explicado.
     Nunca com número inventado (ver o comentário do laudo em app-nova-sala.js). */
  .nv-sv-falta{font-size:var(--t-cap);color:var(--p3);line-height:1.45;
    border-top:1px dashed color-mix(in oklab,var(--roxo) 40%,transparent);
    margin-top:10px;padding-top:9px}

  /* a coluna da direita só existe acima de 1240; abaixo disso ela vira a última faixa */
  .nv-sv-trio{display:grid;grid-template-columns:1fr minmax(340px,420px);gap:16px;
    align-items:start}
  @media (max-width:1240px){
    .nv-sv-trio{grid-template-columns:1fr}
    .nv-sv-reuniao{grid-template-columns:1fr;gap:18px}
    /* empilhou: o tracejado sai da esquerda e volta para cima — de lado ele viraria
       uma linha solta no meio da tela, sem nada para separar */
    .nv-sv-prosp{border-left:0;border-top:1px dashed var(--border);
      padding:12px 0 0;margin-top:4px}
  }
  @media (max-width:1000px){
    /* a esteira vira empilhada, mas o `overflow:hidden` FICA: as peças correm em
       `position:absolute` de -18% a 110% do trilho, e sem o corte elas empurram o
       documento para fora — foi rolagem lateral de página no harness a 390. */
    .nv-sv-esteira{height:auto}
    .nv-sv-esteira .origem,.nv-sv-esteira .destino{position:static;width:auto;text-align:left;
      border:0;border-bottom:2px solid var(--border);padding:10px 12px}
    .nv-sv-trilho{position:relative;left:0;right:0;height:96px}
  }

  /* ======================= O CELULAR =======================
     As cadeiras ENCOLHEM e continuam em volta do oval — nunca viram lista. É a
     regra do dono para esta tela: a planta só informa enquanto for planta.
     Nenhum degrau da escala de 2 metros desce aqui (é requisito duro, #44); o que
     muda é largura de cadeira, respiro e o raio do oval. */
  @media (max-width:820px){
    /* ALVO DE TOQUE. No celular o chip e o gesto principal desta tela (e o que poe
       a pasta na mesa), e 6px de padding dava ~29px de altura — abaixo do minimo
       de 44px. A letra sobe junto: `--t-cap` num chip a 390 e leitura de lupa.
       O `summary` do grupo tambem: fechar/abrir e toque, nao mira. */
    .nv-sv-gr>summary{min-height:44px;padding:10px 2px}
    button.nv-sv-chip{min-height:44px;padding:10px 13px;font-size:var(--t-bod)}
    button.nv-sv-chip small{font-size:var(--t-dat)}
    /* o ▽ do filtro e um botao proprio: 44px de largura tambem, senao vira mira */
    .nv-sv-cli>button.nv-sv-chip.cli.so{min-width:44px;padding:10px 12px}
    /* desfazer o filtro e gesto, nao mira: no celular ele tambem sobe para 44px */
    .nv-sv-filtro .bt{min-height:44px;padding:10px 16px;font-size:var(--t-bod);
      width:100%}
    /* a explicacao do grupo sai no celular: ela dividia a linha do resumo com o
       nome e a contagem, e as tres coisas embrulhavam. O `title` continua. */
    .nv-sv-gr>summary .ex{display:none}
    /* A PLACA E O ESTADO DESCEM PARA DENTRO DA CAIXA no celular. Montados sobre a
       borda (o desenho do monitor grande) eles disputavam os mesmos ~340px: a placa
       embrulhava em duas linhas e caía por cima da cabeceira. Aqui viram duas linhas
       normais no topo do vidro — mesma informação, sem sobreposição, e sem nenhum
       degrau de letra descendo. */
    .nv-sv{padding:12px 10px 16px}
    .nv-sv-placa,.nv-sv-estado{position:static;background:none;padding:0;
      margin-bottom:8px;flex-wrap:wrap}
    .nv-sv-logo{width:64px;height:32px}
    .nv-sv-placa .nome{font-size:var(--t-bod)}
    .nv-sv-m2{padding:136px 0 140px}
    /* o padrão horizontal em % (e não em px) é o que mantém o texto na CINTURA da
       elipse: com 8px de folga ele ia até a curva e cavalgava as cadeiras. */
    /* o topo ganhou 14px depois que a cadeira passou a poder levar DUAS pastas (um
       cliente com dois projetos vivos): a cadeira do norte encosta na curva pelo
       lado de baixo e ficou mais alta, então tapava a primeira linha do tampo a
       390. O texto começa mais abaixo em vez de a cadeira subir — subir a cadeira
       quebraria a curva, que é o desenho aprovado. */
    /* [02/09] a curva encolhe no celular junto com a cadeira; o padding do tampo
       continua a ser ela + folga, e por isso a legenda nunca nasce na faixa das
       cadeiras — o mesmo raciocínio do monitor grande, com outro número. */
    .nv-sv-wrap{--nv-curva:30px}
    .nv-sv-mwrap{--nv-curva:20px}
    .nv-sv-tampo{min-height:152px;padding:calc(var(--nv-curva) + 10px) 12%;border-radius:50%/36%}
    /* a LARGURA da cadeira não é tocada aqui: ela já é percentual (96%/n, do JS)
       e por isso encolhe sozinha. Mexer nela quebraria a curva. */
    .nv-sv-cad{padding:7px 3px 8px}
    .nv-sv-cad .n{font-size:var(--t-cap)}
    .nv-sv-cad::before{height:6px;left:16%;right:16%}
    .nv-sv-cad.norte::before{top:-8px}
    .nv-sv-cad.sul::before{bottom:-8px}
    .nv-sv-carta{width:28px;height:38px;line-height:34px;font-size:var(--t-dat);margin-top:5px}
    .nv-sv-mao .nv-sv-carta{width:34px;height:46px;line-height:42px;font-size:var(--t-bod)}
    .nv-sv-pasta{padding:1px 4px 2px;margin-top:5px}
    .nv-sv-pasta::before{height:4px;top:-4px}
    /* a mesinha de prospecção ocupa a largura toda e o rótulo sobe para cima dela:
       `display:block` porque em flex o rótulo estático viraria um item AO LADO da
       mesa e as duas coisas se espremeriam. As cadeirinhas não são tocadas — a
       largura delas já é percentual (do JS), e é assim que elas encolhem e
       continuam EM VOLTA da mesinha, em vez de virar lista. */
    /* o padding é o que RESERVA a faixa das cadeiras acima e abaixo do tampinho.
       Cortá-lo aqui foi o primeiro erro medido a 390: a cadeira do norte subia
       por cima do rótulo "prospecção". Ele encolhe pouco — a cadeira encolheu em
       largura (percentual), não em altura. */
    .nv-sv-mesinha{width:100%;padding:96px 0 84px}
    .nv-sv-pcad{padding:5px 3px 6px}
    .nv-sv-pcad .n{font-size:var(--t-cap)}
    /* o tooltip só encolhe: quem escolhe o LADO dele são as classes `esq`/`dir`,
       que o JS aplica pela posição na curva e valem em qualquer largura. Uma regra
       de lado aqui brigaria com elas — foi assim que a rolagem lateral voltou na
       primeira medição a 390. */
    /* A LARGURA MÁXIMA DO TOOLTIP É GEOMETRIA, não gosto: com a âncora `esq`/`dir`
       aplicada a partir de |u| > 0.3, uma cadeira ainda CENTRADA chega a ~65% da
       mesa; para o tooltip dela não furar a página numa mesa de ~300px (celular de
       360), a metade dele tem de caber nos 35% que sobram. 190px é o maior valor
       que fecha essa conta nas três larguras medidas (360 · 390 · 412). */
    .nv-sv-tip{max-width:min(190px,55vw)}
    .nv-sv-cubo .nome{font-size:32px}
    .nv-sv-open{padding:8px}
    /* o cabeçalho da ilha ("Desenvolvimento" + "3/5 na sala") é uma fileira flex que
       não quebrava: com a moldura do open space comendo 24px de cada lado, ele
       passava 6px da tela num aparelho de 360. Ele EMBRULHA — nada encolhe de letra,
       que é a régua da vista. */
    .nv-sv-open .nv-sala>h2{flex-wrap:wrap}
    .nv-sv-esteira .origem,.nv-sv-esteira .destino{width:auto}
  }