/* cockgit — observa.css
   vista /nova · a aba AGENTES (App.renderAgentes, app-observa.js) — 30/09/2026.

   [30/09 · decisão do dono] A aba usa as MESMAS peças do redesenho (nova-pecas.css,
   App.pc*): o card, o par de botões sem colchete, as etapas, o medidor, o número,
   as vagas e o topo de grupo — nas vistas Mesa, Agora, Filme, Gasto, Boletim e
   Planta viva, nos cards da cadeia L e no rascunho da entrada. `#nv-ag` é uma
   `.pc-tela` (a escala de mesa das peças); esta folha cuida só do que é da aba: o
   gating, os CHIPS das vistas, a linha de estado (saúde · vagas · janela), a FAIXA
   no tempo do filme e as listas da folha do filme. Regras do dono que moram aqui:
     · cards-only, sem rolagem LATERAL em nenhuma largura: tudo quebra linha
       (flex-wrap), nada tem largura fixa grande, todo filho tem min-width:0;
     · cor só pelos tokens das peças (--ink, --mut, --bd, --blue…): claro e escuro
       saem do :root de nova-pecas.css, sem regra nova;
     · alvo de toque ≥44px nos chips; `prefers-reduced-motion` sem animação. */

  #nv:not([data-tela="agentes"]) #nv-agentes{display:none}
  #nv-agentes{min-width:0}
  #nv-ag{display:flex;flex-direction:column;gap:12px;min-width:0}
  #nv-ag>.pc-grupo+.pc-grupo{margin-top:6px}
  /* [09/10] Filme e Planta viva em TELA CHEIA: a largura toda da janela */
  #nv-ag.pc-tela[data-vista="filme"],#nv-ag.pc-tela[data-vista="planta"]{max-width:none}
  /* a força da fábrica no topo: só leitura, discreta (o seletor mora na Planta viva) */
  .ag-forca-l{font-size:var(--t-cap)}
  /* a pergunta mora no estado ("aprova o resumo?"): no celular ela quebra linha
     em vez de empurrar o card para fora da tela */
  #nv-ag .pc-st,.ag-filme .pc-st{white-space:normal;overflow-wrap:anywhere;min-width:0}
  /* o rascunho montando que passou do previsto não é alarme: a barra fica na cor de
     "rodando" e a frase diz o prazo novo */
  #nv-ag [data-card^="nd:"] .pc-med[data-nivel]>b{background:var(--blue)}

  /* ---- os CHIPS das vistas: navegação de leitura, quebram linha, nunca rolam ---- */
  .ag-vistas{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
  #nv .ag-chip{min-height:44px;padding:6px 12px;font:var(--t-dat)/1.2 var(--mono);
    background:transparent;color:var(--mut);border:1px solid var(--bd);border-radius:0}
  #nv .ag-chip::before,#nv .ag-chip::after{content:none}
  #nv .ag-chip:hover{border-color:var(--blue);color:var(--ink)}
  #nv .ag-chip.on{color:var(--ink);background:var(--sf);border-color:var(--blue);
    box-shadow:inset 0 -2px 0 var(--blue)}
  #nv .ag-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

  /* ---- a linha de estado: saúde (pc-st) · vagas (pc-vagas) · janela × teto ---- */
  .ag-status{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;min-width:0;
    font-size:var(--t-dat);color:var(--mut)}
  .ag-janela{display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center;min-width:0}
  .ag-janela[data-estado="err"]{color:var(--red)}
  .ag-jmed{display:block;flex:0 1 64px;min-width:40px}
  .ag-jmed>.pc-med{margin:0}
  /* a trava de gasto desligada pelo dono (07/10): aviso calmo, sem cor nem animação */
  .ag-trava{color:var(--muted);min-width:0}
  /* o cantinho "testes (N)" (07/10/2026): recolhido; aberto, a lista fica POR CIMA
     (absoluta) — não muda a altura da página, então nada passa a rolar */
  .ag-status{position:relative}
  .ag-testes{min-width:0}
  /* o alvo de toque tem 44px pelo ::after (absoluto): a linha não cresce, a página não rola */
  .ag-testes>summary{position:relative;display:inline-flex;align-items:center;cursor:pointer;
    color:var(--mut);font:var(--t-dat)/1.2 var(--mono);list-style:none}
  .ag-testes>summary::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;
    height:44px;transform:translateY(-50%)}
  .ag-testes>summary::-webkit-details-marker{display:none}
  .ag-testes>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .ag-testes>ul{position:absolute;z-index:5;top:100%;left:0;right:0;margin:0;padding:8px 12px;
    list-style:none;max-width:420px;background:var(--sf);
    border:1px solid var(--bd);color:var(--ink);display:flex;flex-direction:column;gap:6px}
  .ag-testes li{overflow-wrap:anywhere;min-width:0}
  .ag-testes-st,.ag-testes-mais{color:var(--mut)}

  /* ---- CADEIA L: a miniatura do protótipo no card do portão (app-observa-portao.js) ---- */
  .ag-mini{display:block;max-width:100%;height:auto;margin:0 0 6px;border:1px solid var(--bd)}
  /* prévia do PR no card da mesa — o toque abre o filme; o botão some por dentro */
  .ag-mini-btn{display:block;width:100%;min-height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer;text-align:left}
  .ag-motivos{flex-wrap:wrap}
  .ag-motivos>.pc-btn{flex:1 1 30%}

  /* ---- o FILME (opção B, app-observa-demanda.js): a faixa no tempo, as etapas, os
     momentos e a prova, dentro da folha do drawer. Nada rola por dentro. ---- */
  .ag-filme{display:flex;flex-direction:column;gap:10px;min-width:0}
  .ag-filme.pc-tela{padding:0;max-width:none;margin:0}
  .ag-faixa{display:flex;flex-wrap:wrap;gap:2px;margin:6px 0 2px;min-width:0}
  .ag-fx-estimar,.ag-fx-planejar{--c:var(--idle)}
  .ag-fx-implementar{--c:var(--blue)}
  .ag-fx-testar{--c:var(--green)}
  .ag-fx-revisar{--c:var(--amber)}
  .ag-fx-publicar{--c:var(--chip-ink)}
  .ag-fx-x{--c:var(--red)}
  .ag-faixa-bloco{min-width:0}
  .ag-leg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-cap);color:var(--mut)}
  .ag-leg i{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px}
  .ag-leg-grade{grid-column:1/-1}
  .ag-etapas{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr));gap:4px;min-width:0}
  .ag-etapas li{display:flex;flex-direction:column;gap:2px;padding:6px 8px;min-width:0;
    background:var(--sf);border:1px solid var(--bd);border-top-width:3px;font-size:var(--t-cap);color:var(--mut)}
  .ag-etapas li b{color:var(--ink);font-weight:600}
  .ag-etapas li.f{border-top-color:var(--green)}
  .ag-etapas li.n{border-top-color:var(--blue)}
  .ag-etapas li.w{border-top-color:var(--red)}
  .ag-mom,.ag-prova{list-style:none;margin:0;padding:0;font-size:var(--t-dat);min-width:0}
  .ag-mom li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px;padding:4px 0;
    border-top:1px solid var(--bd);overflow-wrap:anywhere;color:var(--ink)}
  .ag-mom li span:first-child{color:var(--mut)}
  .ag-prova li{display:flex;flex-wrap:wrap;gap:0 12px;align-items:center;padding:2px 0;
    border-top:1px solid var(--bd);min-width:0;color:var(--ink)}
  .ag-prova li span{color:var(--mut);min-width:0;overflow-wrap:anywhere}

  /* ---- [07/10] AS ETAPAS DO TIPO (app-observa-semana.js · _agFitaHtml): a faixa de
     etapas das peças com o tempo e o US$ de cada casa. Cor só pelos tokens: feita
     verde · agora azul · falhou/parou com devolução vermelho · parou laranja · cancelada
     cinza · devolveu para refazer âmbar · incompleto âmbar tracejado (10/10) · por vir a
     régua. Refez e passou = verde com "↻ N×" (09/10). ---- */
  /* nenhuma palavra partida ao meio ("conferi r"): a casa nunca fica mais estreita que a
     palavra mais longa dela; sem espaço, a casa seguinte desce de linha (flex-wrap) */
  .ag-fita{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0 2px;min-width:0}
  .ag-ft{display:flex;flex-direction:column;flex:1 1 0;min-width:min-content;font-size:var(--t-cap);line-height:1.3;color:var(--mut)}
  .ag-ft>i{display:block;margin-bottom:3px}
  /* [09/10] cancelada: toda cinza (o tom de "parado", não de erro); o "↻ N×" é discreto */
  .ag-ft[data-e="c"]>b{color:var(--mut)}
  .ag-ft>small.ag-ft-vz{color:var(--mut)}
  .ag-ft>small.ag-ft-q{color:var(--mut);overflow-wrap:anywhere}
  .ag-ft>b{font-weight:400;color:var(--ink);overflow-wrap:normal;word-break:normal;hyphens:none}
  .ag-ft[data-e="x"]>b,.ag-ft[data-e="b"]>b{color:var(--red)}
  .ag-ft>small{font-size:var(--t-cap);font-variant-numeric:tabular-nums;overflow-wrap:normal;word-break:normal}
  .ag-ft-sm,.ag-ft-refez{display:block;font-size:var(--t-cap);color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
  .ag-ft-refez{color:var(--red)}
  /* [10/10] devolveu para refazer: âmbar (a fábrica refaz sozinha, não é erro) com o
     motivo na linha de baixo; incompleto: a barra tracejada em âmbar — falta parte */
  .ag-ft-dv{display:block;font-size:var(--t-cap);color:var(--amber);margin-top:2px;overflow-wrap:anywhere}
  .ag-fita-bloco{min-width:0}
  /* [14/10] 675: grade do filme com auto-fit — a coluna vazia colapsa e o card ocupa a
     largura toda; resumo + QUEM PROGRAMA ficam lado a lado a partir de ~640px */
  .ag-filme .pc-grade{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
  /* NENHUM TEXTO CORTADO COM "…" (regra do dono, 07/10/2026): na aba Agentes o título
     do card quebra linha inteiro — a peça base (nova-pecas.css) corta em 2 linhas */
  #nv-ag .pc-grade .pc-tit{display:block;-webkit-line-clamp:unset;overflow:visible}
  /* a mesa e o agora LADO A LADO na tela larga: a página não rola (regra do dono) */
  .ag-duas{display:grid;gap:12px 20px;min-width:0}
  .ag-duas>.pc-grupo+.pc-grupo{margin-top:0}
  @media (min-width:1100px){.ag-duas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
  /* o "+N" mora no topo do grupo (não ocupa uma casa da grade) */
  #nv .ag-mais{min-height:44px;margin-left:10px}
  .ag-mais-q{color:var(--mut)}
  /* no celular os chips das vistas cabem numa linha */
  @media (max-width:480px){#nv .ag-chip{padding:6px 8px}}
  /* o resumo da semana, em frases, no topo do Filme */
  .ag-resumo{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--t-dat);color:var(--mut)}
  .ag-resumo p{margin:0;overflow-wrap:anywhere}
  .ag-resumo p:first-child{color:var(--ink);font-weight:600}

  /* ---- GASTO: a régua do uso por hora (a peça pcHora) na prova do toque ---- */
  .ag-hora-l{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:var(--t-cap);color:var(--mut)}
  .ag-hora-l b{font-weight:400}
  .ag-hora-l b:nth-child(2){text-align:center}
  .ag-hora-l b:last-child{text-align:right}

  /* ---- a PLANTA VIVA: desde 05/10 é a v2, com folha própria (observa-planta.css) —
     inclusive a regra do dono de que toda peça é um card visível (PR 291). ---- */

  /* ---- FEITAS (09/10/2026, app-observa-feitas.js): o histórico em cards ----
     resumo em 4 números que quebram em 2×2 no celular, filtros que quebram linha
     (chips de período + dois selects de 44px) e o "técnico" recolhido. Nada aqui
     tem largura fixa: a página não rola de lado em nenhum tamanho. */
  .ft-resumo{display:grid;gap:8px 16px;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
  .ft-n{display:flex;flex-direction:column;min-width:0}
  .ft-n>b{font:600 var(--t-sec)/1.15 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere}
  .ft-n>small{font-size:var(--t-cap);color:var(--mut);overflow-wrap:anywhere}
  .ft-nota{grid-column:1/-1;margin:0;font-size:var(--t-cap);color:var(--mut)}
  .ft-filtros{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-width:0}
  #nv .ft-sel{width:auto;flex:0 1 auto;min-height:44px;max-width:100%;min-width:0;padding:6px 10px;border-radius:0;
    font:var(--t-dat)/1.2 var(--mono);color:var(--ink);background:var(--sf);border:1px solid var(--rule)}
  #nv .ft-sel:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .ft-tec{margin-top:2px;min-width:0;font-size:var(--t-cap);color:var(--mut)}
  .ft-tec>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--mut)}
  .ft-tec>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .ft-tec-l{display:flex;flex-direction:column;gap:2px;min-width:0}
  .ft-tec-l>span{overflow-wrap:anywhere}
  .ft-tec-l b{font-weight:600;color:var(--ink)}
  /* [09/10] o FILME: grid fluido em tela cheia, páginas só quando não cabe */
  .ag-fl-pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 14px;margin:8px 0 0;color:var(--mut)}
  .ag-fl-pag .pc-lnk{min-height:44px}
  .ft-pag{display:inline-flex;flex-wrap:wrap;gap:0 14px;margin-left:12px}
  .ft-linha{display:none;margin:0;font-size:var(--t-cap);color:var(--ink);overflow-wrap:anywhere}
  @media (max-width:480px){
    .ft-resumo{display:block}
    .ft-resumo>.ft-n,.ft-resumo>.ft-nota{display:none}
    .ft-linha{display:block}
    #nv .ft-sel{flex:1 1 140px}
    /* as vistas no celular: chips compactos (com a Eficiência, quebram em 2 linhas) */
    #nv-ag .ag-vistas{gap:4px}
    #nv-ag .ag-chip{padding:6px 5px;font-size:var(--t-cap)}
  }

  /* ---- EFICIÊNCIA (09/10/2026, app-observa-eficiencia.js): 8 cards de número ----
     o número na face, a variação (seta + palavra + cor: verde melhor, laranja pior —
     o vermelho é só de erro), a barrinha em <svg> que estica na largura do card e o
     "?" de 44px. Cor só pelos tokens das peças: claro e escuro sem regra nova. */
  .ef-l1{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
  .ef-l1>.pc-cap{min-width:0;overflow-wrap:anywhere}
  #nv .ef-q{flex:0 0 auto;min-width:44px;min-height:44px;margin:-10px -8px -10px 0;padding:0;border:0;
    background:transparent;color:var(--mut);font:600 var(--t-bod)/1 var(--mono);cursor:pointer}
  #nv .ef-q::before,#nv .ef-q::after{content:none}
  #nv .ef-q:hover{color:var(--ink)}
  #nv .ef-q:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
  .ef-pouco{display:block;font:600 var(--t-bod)/1.3 var(--mono);color:var(--mut);margin:6px 0 2px}
  .ef-var{display:block;font-size:var(--t-cap);color:var(--mut);overflow-wrap:anywhere}
  .ef-var[data-tom="bom"]{color:var(--green)}
  .ef-var[data-tom="ruim"]{color:var(--orange)}
  .ef-svg{display:block;width:100%;height:28px;margin:6px 0 4px}
  .ef-b{fill:var(--rule)}
  .ef-b.on{fill:var(--blue)}
  .ef-b.sem{fill:var(--bd)}
  .ef-sub,.ef-exp{display:block;font-size:var(--t-cap);color:var(--mut);overflow-wrap:anywhere}
  .ef-exp{color:var(--ink)}
  /* [09/10] cada barra é um <g> com o dado (app-nova-dica.js): o retângulo invisível da
     altura toda é o alvo; a barra em foco ou com a caixa aberta ganha a tinta */
  .ef-alvo{fill:transparent;pointer-events:all}
  .ef-svg [data-dica]{outline:none}
  .ef-svg [data-dica]:focus-visible>.ef-b,.ef-svg [data-dica][data-dica-on]>.ef-b{fill:var(--ink)}
  /* [13/10] o card NOTA DA FÁBRICA (app-observa-eficiencia-nota.js): a linha da meta e a lista */
  .nf-meta{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 2;vector-effect:non-scaling-stroke;pointer-events:none}
  .nf-cap{display:block;margin-top:6px}
  .nf-lista{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px;min-width:0}
  .nf-lista li{min-width:0;font-size:var(--t-cap);line-height:1.3}
  .nf-tit{display:block;color:var(--ink);overflow-wrap:anywhere}
  .nf-mot,.nf-mais{display:block;color:var(--mut);overflow-wrap:anywhere}
  /* [11/10 · F5] o card da FILA: as etapas que mais esperam, rótulo e mediana em cima e a
     barra (com o dado) embaixo — as peças `pc-lin`/`pc-med`, sem cor nova */
  .ef-etapas{display:block;margin-top:4px}