/* ============================================================================ BEATRIZ — COMPONENTES DO REDESIGN (design system v1.2) ============================================================================ Camada ADITIVA carregada DEPOIS do style.css: os componentes novos (padrões P1–P5 da seção 4, família F2 da seção 3, peças do chassi 2.4/2.5) vivem aqui para o style.css legado ficar INTOCADO fora do remapeamento de :root — os guard-tests da suíte leem o style.css e este arquivo não mexe nos contratos. Tudo em TOKENS (tokens.css); hex solto aqui é defeito (seção 6). ============================================================================ */ /* ======================= CHASSI (2.4) — wordmark (rebrand D9) ======================= "beatriz." com Ponto ciano. SÓ a marca de UI — nomes de agente/persona são conteúdo do backend e NÃO entram neste passe. */ /* .bz-wordmark convive com a .brand-name legada no MESMO elemento — estas regras (arquivo carregado depois) vencem o visual antigo (Orbitron caps espaçado) na mesma especificidade. */ .bz-wordmark{font-family:var(--font-ui);font-weight:650;font-size:19px;letter-spacing:.01em; text-transform:none;color:var(--text-1);line-height:1.1} .bz-wordmark .bz-dot{color:var(--ciano)} /* a regra mobile legada (html.is-mobile .brand-name) tem especificidade maior — re-vencida aqui */ html.is-mobile .bz-wordmark{font-size:16px;letter-spacing:.01em} /* ======================= CHASSI — console colapsável (2.4/D8) ======================= O chat colapsa a uma coluna de 56px (avatar do agente + ponto de microfone); um clique restaura. A classe vive no ; a largura entra pela MESMA variável --dock-w que o layout inteiro já lê (stage/chatdock) — nada de segunda fonte de largura. Só desktop: no mobile/tablet os modos próprios (mobsurf/tablet) já governam o dock e NÃO são tocados. */ @media (min-width:1025px){ body.dock-collapsed{--dock-w:56px} body.dock-collapsed .chatdock .chat-head, body.dock-collapsed .chatdock .chat-log, body.dock-collapsed .chatdock .chat-attach, body.dock-collapsed .chatdock .chat-input, body.dock-collapsed .chatdock .avatar-stage, body.dock-collapsed .chatdock .persona-bar, body.dock-collapsed .chatdock .dock-gutter, body.dock-collapsed .chatdock .avatar-gutter{display:none!important} body.dock-collapsed .chatdock{overflow:hidden} /* PARAR continua alcançável com o console colapsado: o flutuante (que já existe p/ mobile) é liberado aqui; quem decide se ele APARECE segue sendo o hidden do updateStopBtn (isBusy). */ body.dock-collapsed .stop-float{display:inline-flex} } /* O botão existe SEMPRE (colapsado vira a própria coluna clicável) */ .dock-collapse-btn{background:none;border:1px solid var(--stroke-2);border-radius:var(--r-ctl);color:var(--text-3); font-size:12px;line-height:1;padding:5px 7px;cursor:pointer;flex:0 0 auto} .dock-collapse-btn:hover{color:var(--text-1);border-color:var(--ciano)} .dock-expand{display:none} body.dock-collapsed .dock-expand{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 4px;cursor:pointer;height:100%} .dock-expand .de-avatar-ph{width:36px;height:36px;border-radius:50%;border:1px solid var(--stroke-2); display:flex;align-items:center;justify-content:center;color:var(--ciano);font-size:15px} .dock-expand .de-mic{width:8px;height:8px;border-radius:50%;background:var(--text-mute)} .dock-expand .de-mic.on{background:var(--ciano);box-shadow:0 0 8px var(--ciano-halo)} .dock-expand .de-hint{writing-mode:vertical-rl;font-size:var(--fs-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} /* ======================= ÍCONES DO MENU (2.5) ======================= Glifo: traço 1.75 em grade 24, terminações retas, um chanfro de 45° por glifo, duotone (traço + preenchimento a 10% quando ativo). Estados POR ESCRITO na spec; aqui a implementação: - repouso: traço --text-3, sem brilho, sem loop; - hover/foco: varredura de energia no contorno (stroke-dashoffset 320ms) + halo 0→6px em 200ms; rótulo clareia; - ativo: --ciano + duotone 14% + halo RESPIRANDO (0.35↔0.55, 3.2s) — a única respiração permanente da tela (L1); - badge de alerta: ponto 6px --crit, pulsa 3 ciclos de 2s e ESTACIONA aceso. prefers-reduced-motion desliga tudo (kill genérico no tokens.css + locais). */ /* SIZING do glifo: NENHUM — quem dimensiona é o CSS do trilho já em contrato (.rail-btn svg 22px no aluno; clamp cqh no master, guardado por teste). */ .rail-btn .hud-ico{flex:0 0 auto} .rail-btn .hud-ico .st{fill:none;stroke:var(--text-3);stroke-width:1.75;stroke-linecap:butt;stroke-linejoin:miter;transition:stroke var(--dur-micro) var(--ease)} .rail-btn .hud-ico .du{fill:var(--ciano);opacity:0;transition:opacity var(--dur-micro) var(--ease)} .rail-btn:hover .hud-ico .st,.rail-btn:focus-visible .hud-ico .st{stroke:var(--text-1);stroke-dasharray:64;animation:hud-sweep 320ms var(--ease) 1} .rail-btn:hover .hud-ico,.rail-btn:focus-visible .hud-ico{filter:drop-shadow(0 0 6px var(--ciano-halo))} .rail-btn.active .hud-ico .st{stroke:var(--ciano)} .rail-btn.active .hud-ico .du{opacity:.14} .rail-btn.active .hud-ico{animation:hud-breathe 3.2s ease-in-out infinite} /* O badge do trilho JÁ existe (.rail-badge, com CONTAGEM — informação que o ponto de 6px da spec não carrega; a contagem fica). Aqui: token no lugar do hex + o pulso da spec — 3 ciclos de 2s e ESTACIONA aceso. Alerta tem precedência visual sobre hover (o glow do badge é próprio). */ .rail-badge{background:var(--crit);box-shadow:0 0 6px var(--crit-halo);animation:hud-badge 2s ease-in-out 3} @keyframes hud-sweep{from{stroke-dashoffset:64}to{stroke-dashoffset:0}} @keyframes hud-breathe{0%,100%{filter:drop-shadow(0 0 6px var(--ciano-halo)) opacity(1)}50%{filter:drop-shadow(0 0 10px var(--ciano-halo)) opacity(1)}} @keyframes hud-badge{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion:reduce){ .rail-btn .hud-ico,.rail-btn .hud-badge,.rail-btn:hover .hud-ico .st{animation:none!important} } /* ======================= P1 · PAINEL DE DETALHE (seção 4) ======================= Pop-up SOBREPOSTO com escurecimento de 30% por baixo — nunca área fixa que desloque a tabela. 480px lateral (mín 420 · máx 560); variante centrada 720px quando o dossiê pede herói + metadados (caso do aluno). Fecha por X, Esc e clique fora; a tela por baixo volta intacta. */ .p1-scrim{position:fixed;inset:0;background:rgba(0,0,0,.30);z-index:220;display:flex;justify-content:flex-end; animation:p1-fade var(--dur-painel) var(--ease)} .p1-scrim.p1-center{justify-content:center;align-items:center} .p1-panel{width:480px;min-width:420px;max-width:560px;height:100%;background:var(--bg-3);border-left:1px solid var(--stroke-1); display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(255,255,255,.05); animation:p1-slide var(--dur-painel) var(--ease)} .p1-scrim.p1-center .p1-panel{width:720px;max-width:min(720px,92vw);height:auto;max-height:88vh;border:1px solid var(--stroke-1);border-radius:var(--r-card)} .p1-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:var(--hairline)} .p1-head .p1-origem{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} .p1-head .p1-titulo{flex:1;font-size:var(--fs-h1);font-weight:var(--fw-h1);color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .p1-body{flex:1;overflow:auto;padding:16px 18px} .p1-foot{flex:0 0 auto;display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:var(--hairline)} .p1-x{background:none;border:none;color:var(--text-3);font-size:18px;cursor:pointer;padding:2px 6px;line-height:1} .p1-x:hover{color:var(--text-1)} @keyframes p1-fade{from{opacity:0}to{opacity:1}} @keyframes p1-slide{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}} /* ======================= P2 · MODAL DE LEITURA ======================= Documento contínuo: centrado, 720px (≈68ch), máx 84vh, --bg-3; cabeçalho fixo com metadados + barra de progresso de leitura; corpo 16px/1.65. */ .p2-scrim{position:fixed;inset:0;background:rgba(0,0,0,.30);z-index:230;display:flex;align-items:center;justify-content:center;animation:p1-fade var(--dur-painel) var(--ease)} .p2-modal{width:720px;max-width:92vw;max-height:84vh;background:var(--bg-3);border:1px solid var(--stroke-1);border-radius:var(--r-card); display:flex;flex-direction:column;overflow:hidden} .p2-head{flex:0 0 auto;padding:14px 20px 10px;border-bottom:var(--hairline)} .p2-head .p2-titulo{font-size:var(--fs-h2);font-weight:var(--fw-h2);color:var(--text-1)} .p2-head .p2-meta{font-size:12px;color:var(--text-3);margin-top:2px} .p2-progress{height:2px;background:var(--stroke-1)} .p2-progress i{display:block;height:100%;width:0;background:var(--ciano);transition:width 120ms linear} .p2-body{flex:1;overflow:auto;padding:18px 22px;font-size:16px;line-height:1.65;color:var(--text-2)} .p2-body h1,.p2-body h2,.p2-body h3{color:var(--text-1);font-size:var(--fs-h2);font-weight:var(--fw-h2)} .p2-foot{flex:0 0 auto;display:flex;gap:8px;justify-content:flex-end;padding:10px 16px;border-top:var(--hairline)} /* ======================= P3 · ACORDEÃO (expansão no lugar) =======================

nativo: título + resumo de 1 linha + divisa; aberto, corpo em coluna de leitura com recuo e hairline à esquerda. Padrão: FECHADO. */ details.p3{border:var(--hairline);border-radius:var(--r-ctl);background:var(--bg-2);margin:8px 0} details.p3>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:10px 14px} details.p3>summary::-webkit-details-marker{display:none} details.p3>summary .p3-titulo{font-size:var(--fs-h2);font-weight:var(--fw-h2);color:var(--text-1)} details.p3>summary .p3-resumo{flex:1;font-size:var(--fs-apoio);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} details.p3>summary .p3-chev{color:var(--text-3);transition:transform var(--dur-micro) var(--ease)} details.p3[open]>summary .p3-chev{transform:rotate(90deg)} details.p3>.p3-corpo{padding:4px 14px 14px 30px;border-left:2px solid var(--stroke-1);margin-left:14px; font-size:var(--fs-corpo);line-height:var(--lh-corpo);color:var(--text-2);max-width:68ch} /* ======================= P5 · NOTA TÉCNICA ======================= O lugar padronizado do D10: chip --warn (véu) ao lado do dado afetado; o texto integral abre em P2. */ .p5-nota{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo); letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--warn-veu); border:1px solid var(--warn);border-radius:var(--r-chip);padding:2px 9px;cursor:pointer;line-height:1.6} .p5-nota:hover{filter:brightness(1.15)} /* ======================= CHIP DE ESTADO (2.6) ======================= cor semântica (véu 12% + texto cheio) + ícone + PALAVRA — nunca só cor. */ .hud-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo); letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-chip);padding:2px 9px;line-height:1.7;border:1px solid transparent} .hud-chip.ok{color:var(--ok);background:var(--ok-veu);border-color:var(--ok)} .hud-chip.warn{color:var(--warn);background:var(--warn-veu);border-color:var(--warn)} .hud-chip.crit{color:var(--crit);background:var(--crit-veu);border-color:var(--crit)} .hud-chip.proc{color:var(--proc);background:var(--proc-veu);border-color:var(--proc)} .hud-chip.neutro{color:var(--text-2);background:none;border-color:var(--stroke-2)} /* ======================= INDICADOR AO VIVO (2.6) ======================= */ .hud-live{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo); letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} .hud-live i{width:7px;height:7px;border-radius:50%;background:var(--ciano);box-shadow:0 0 6px var(--ciano-halo); animation:hud-live 2.4s ease-in-out infinite} @keyframes hud-live{0%,100%{opacity:1}50%{opacity:.45}} @media (prefers-reduced-motion:reduce){.hud-live i{animation:none}} /* ======================= FAMÍLIA F2 · TABELA DENSA (seção 3) ======================= Barra de comando (busca à esquerda · filtros no meio · contagem viva e ações à direita) → tabela: linha 52px, cabeçalho fixo em rotulo, zebra 3%, números mono tabulares à direita, célula = 1 linha primária + máx 1 apoio, linha inteira clicável abre o detalhe. */ .f2-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;margin-bottom:4px} .f2-bar .f2-busca{flex:0 1 260px;background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-ctl); color:var(--text-1);padding:7px 11px;font-size:13px;font-family:var(--font-ui)} .f2-bar .f2-busca:focus{outline:none;border-color:var(--ciano)} .f2-bar .f2-filtros{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1} .f2-bar .f2-conta{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-apoio);color:var(--text-3);white-space:nowrap} .f2-table-wrap{overflow:auto;border:var(--hairline);border-radius:var(--r-card);background:var(--bg-2)} table.f2{width:100%;border-collapse:collapse;font-size:var(--fs-apoio)} table.f2 thead th{position:sticky;top:0;z-index:2;background:var(--bg-2); font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase; color:var(--text-3);text-align:left;padding:9px 12px;border-bottom:1px solid var(--stroke-2);white-space:nowrap} table.f2 tbody tr{height:52px;border-bottom:var(--hairline);cursor:pointer} table.f2 tbody tr:nth-child(even){background:rgba(255,255,255,.03)} table.f2 tbody tr:hover{background:var(--bg-3)} table.f2 td{padding:7px 12px;vertical-align:middle;color:var(--text-2)} table.f2 td .cel-1{color:var(--text-1);font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} table.f2 td .cel-2{color:var(--text-3);font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} table.f2 td.num,table.f2 th.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right} table.f2 td.num .cel-2{font-family:var(--font-ui)} .f2-rodape{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12px;color:var(--text-3)} /* ---- F2 aplicado à sala Alunos (classes legadas .stab-bar/.vsel ganham o traje F2) ---- */ .f2-bar{align-items:center} .f2-bar .stab-search{background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-ctl)} .f2-bar .vsel{background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-ctl);color:var(--text-2);font-size:12px;padding:6px 8px} .f2-bar #stabCount{margin-left:auto;font-size:var(--fs-apoio);white-space:nowrap} .f2-cols-panel{position:absolute;z-index:50;background:var(--bg-3);border:1px solid var(--stroke-2);border-radius:var(--r-card); padding:10px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 40px rgba(0,0,0,.45)} .f2-cols-panel label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);cursor:pointer} .f2-cols-panel .fc-tit{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3);margin-bottom:2px} table.f2 td .cel-1,table.f2 td .cel-2{display:block} table.f2 td.f2-acts{white-space:nowrap} table.f2 td.f2-acts .btn{margin-right:4px} /* ---- A1 · AVALIAÇÃO como F3 (Leitura/dossiê) — sala do aluno ---- */ .f3-sints{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .f3-sint{display:flex;flex-direction:column;gap:4px} .f3-sint-w{flex:1;min-width:180px} .f3-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-kpi);font-weight:var(--fw-kpi);color:var(--text-1);line-height:1} .f3-num i,.f3-sint-txt i{font-style:normal;font-size:13px;color:var(--text-3);font-weight:400} .f3-sint-txt{font-size:15px;color:var(--text-1)} .f3-sints .btn{margin-left:auto} .f3-resumo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:var(--fs-corpo);line-height:var(--lh-corpo);color:var(--text-2)} .f3-tier{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px} .f3-tier:first-child{margin-top:2px} .f3-tier-n{font-family:var(--font-mono);font-size:11px;color:var(--text-3)} details.f3-dim>summary{align-items:center;gap:12px} .f3-dim-nome{flex:0 0 220px;font-size:14px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .f3-dim-bar{flex:1;min-width:120px} .f3-dim-bar .dim-track{display:block;position:relative} .f3-dim-bar .dim-fill{display:block;height:100%} .f3-dim-nota{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--text-1);white-space:nowrap} .f3-dim-nota i{font-style:normal;color:var(--text-3);font-size:11px} .f3-anchor{margin-top:8px;font-size:13px;color:var(--text-3)} /* ---- M1 · DASHBOARD como F1 (Painel/radar) — cards KPI canônicos sobre as classes legadas ---- */ /* Base dos glifos FORA do trilho (o lançador usa o mesmo set 2.5; os estados de hover/ativo são específicos do rail e NÃO se aplicam aqui — só o traço de repouso). */ .hud-ico .st{fill:none;stroke:var(--text-3);stroke-width:1.75;stroke-linecap:butt;stroke-linejoin:miter} .hud-ico .du{fill:var(--ciano);opacity:0} /* KPI: valor em MONO TABULAR (2.3 display-kpi) — e a AUSÊNCIA ("sem dado/restrito/indisponível") NUNCA com a fonte de display (regra do próprio produto, mantida por override de maior especificidade: hud.css carrega depois e re-perderia a distinção sem estas duas linhas). */ .radar-card{background:var(--bg-2);border:1px solid var(--stroke-1);border-radius:var(--r-card)} .radar-card .rc-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-kpi);font-weight:var(--fw-kpi);color:var(--text-1)} .radar-card .rc-v.rc-nd{font-family:var(--font-ui);font-variant-numeric:normal;font-size:13px;font-weight:600;font-style:italic;color:var(--text-3)} .radar-card .rc-t{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} .radar-card .rc-s,.radar-card .rc-m,.radar-card .rc-n,.radar-card .rc-src{font-size:12px;color:var(--text-3)} .radar-card.alert-alto{border-color:var(--crit);box-shadow:0 0 12px var(--crit-halo)} .radar-card.alert-medio{border-color:var(--warn)} /* Lançador de salas: ícone duotone + nome + número-síntese + seta (a seta já existia via ::after). */ .dash-card{background:var(--bg-2);border:1px solid var(--stroke-1);border-radius:var(--r-card)} .dash-card .hud-ico{width:22px;height:22px;display:block;margin-bottom:9px} .dash-card .dc-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-1)} .dash-card .dc-v.dc-go{font-family:var(--font-ui);font-variant-numeric:normal;color:var(--ciano)} .dash-card .dc-v.rc-nd{font-family:var(--font-ui);font-variant-numeric:normal;font-size:13px;font-weight:600;font-style:italic;color:var(--text-3)} .dash-card .dc-t{color:var(--text-1)} .dash-card .dc-h{color:var(--text-3)} /* Card de ALERTA (F1: no máximo 1 aberto, com contagem — a LISTA mora no P1) */ .incident-banner{border:1px solid var(--crit);background:var(--crit-veu);border-radius:var(--r-card);padding:12px 16px;margin-bottom:16px; display:flex;align-items:center;gap:12px;flex-wrap:wrap} .incident-banner .ib-head{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2);flex:1;min-width:260px} .incident-banner .ib-head b{color:var(--crit)} .incident-banner .ib-acts{display:flex;gap:8px} /* As linhas de incidente (1 por linha) agora vivem DENTRO do P1 */ .p1-body .ib-row{display:flex;gap:10px;align-items:baseline} .p1-body .ib-row .ib-when{font-family:var(--font-mono);font-size:11px;color:var(--text-3);white-space:nowrap} /* ============================================================ LOTE 3 — salas restantes (mesma gramática de Avaliação/Dashboard) ============================================================ */ /* F2 genérico: TODA .utab do painel ganha o traje (tipografia rotulo no cabeçalho, zebra 3%, hover elevado). CSS-only — nenhum template de tabela foi tocado (o #adminUsers tem guard de template e fica intacto por construção). */ #view-admin .utab thead th{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo); text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--stroke-2)} #view-admin .utab tbody tr:nth-child(even){background:rgba(255,255,255,.03)} #view-admin .utab tbody tr:hover{background:var(--bg-3)} /* Cards de número (.acard — Auditoria/Financeiro) e KPIs do juiz: valor MONO TABULAR, rótulo caps. A exceção honesta (aud-uncal/badge "não-calibrado") mantém o próprio tom. */ .acard{background:var(--bg-2);border:1px solid var(--stroke-1);border-radius:var(--r-card)} .acard .acard-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-kpi)} .acard .acard-l{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} .judge-kpis .kpi-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .judge-kpis .kpi-l{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} /* Controle segmentado (F6/F3): as abas internas de Auditoria/Metodologia e da Aula viram segmentos. */ .aud-tabs{display:inline-flex;background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-ctl);padding:2px;gap:2px} .aud-tabs .aud-tab{border:none;background:none;border-radius:calc(var(--r-ctl) - 2px)} .aud-tabs .aud-tab.active{background:var(--ciano-veu);color:var(--ciano)} .aula-tabs{display:inline-flex;background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-ctl);padding:2px;gap:2px} .aula-tabs .aula-tab{border:none;background:none;border-radius:calc(var(--r-ctl) - 2px)} .aula-tabs .aula-tab.active{background:var(--ciano-veu);color:var(--ciano)} /* Vereditos da Auditoria (F2): síntese em 1 linha na célula; o resumo completo abre em P1. */ #audVerList td .aud-sint{display:block;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #audVerList tbody tr{cursor:pointer} /* Item-índice de regra (Gestão da IA + listas irmãs): 1 linha fechada; clique no TEXTO expande. */ .su-rules .su-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer} .su-rules .su-text.su-open{-webkit-line-clamp:unset;display:block} /* Metodologia (F3): as seções da constituição viram acordeões FECHADOS (wrap pós-render). */ details.met-p3>summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;padding:10px 14px;list-style:none} details.met-p3>summary::-webkit-details-marker{display:none} details.met-p3{border:var(--hairline);border-radius:var(--r-ctl);background:var(--bg-2);margin:8px 0} details.met-p3>.met-sec{padding:4px 14px 14px;border-left:2px solid var(--stroke-1);margin-left:14px} details.met-p3>.met-sec>h3{display:none} /* Testes (F3): o texto integral da atividade fecha em 2 linhas; "ler na íntegra" abre P2. */ .act-row .act-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .act-row .act-text.act-open{-webkit-line-clamp:unset;display:block} /* Financeiro: chips do price book em tokens (pb-selo já existe; só o traje). */ .pb-selo{border-radius:var(--r-chip)} /* F6 — estado vazio = BRIEFING DE MISSÃO (Aula ao vivo): ícone em respiração lenta + 1 frase + pedidos-exemplo clicáveis que viram prompt no chat. */ .f6-brief{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:28px 16px;color:var(--text-2)} .f6-brief .f6-ico{font-size:34px;animation:f6-resp 4.2s ease-in-out infinite} .f6-brief .f6-frase{font-size:var(--fs-corpo);line-height:var(--lh-corpo);max-width:52ch} .f6-brief .f6-sugs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .f6-sug{background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-chip);color:var(--text-2); font-size:12.5px;padding:6px 14px;cursor:pointer;transition:border-color var(--dur-micro) var(--ease)} .f6-sug:hover{border-color:var(--ciano);color:var(--text-1)} @keyframes f6-resp{0%,100%{opacity:.55}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.f6-brief .f6-ico{animation:none}} /* Chanfro de 45° na moldura do palco (assinatura HUD, F6) — DESENHADO (::after), nunca clip-path: recortar a moldura da lousa mexeria na superfície mais sensível do produto. */ .board-panel{position:relative} /* (o ::before/::after do .board-panel JÁ carregam o grid-glow e a varredura de luz — o chanfro mora no FILHO .board-stage, cujos pseudos estavam livres.) */ .board-panel .board-stage{position:relative} .board-panel .board-stage::after{content:"";position:absolute;top:0;right:0;width:16px;height:16px;z-index:3;pointer-events:none; background:linear-gradient(225deg,var(--ciano) 0 2px,transparent 2px)} /* A3 — Biblioteca (F7): faixa/chips/cards. Chips com CONTAGEM; card na hierarquia canônica; o porquê NÃO corta no meio (clamp com reticências; a íntegra abre no P1 do card). */ .fchip .fchip-n{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);margin-left:4px} .src{background:var(--bg-2);border:1px solid var(--stroke-1);border-radius:var(--r-card);cursor:pointer} .src:hover{border-color:var(--stroke-2);background:var(--bg-3)} .src .src-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .src .src-desc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} /* Config — cards de agente (F7): molde catálogo nos 4 retratos. */ .avatar-cfg.av-row{background:var(--bg-2);border:1px solid var(--stroke-1);border-radius:var(--r-card);padding:14px} /* A1 — CHECKPOINT DE CAPACIDADE: card de acionamento na aba Avaliação (2026-08-01). Reusa .panel/.btn/.muted; o que é novo é só o arranjo texto|botão. O botão DESABILITADO precisa parecer desabilitado (o estado normal do .btn não muda sozinho) — e o cursor tem que dizer isso, senão o aluno clica repetidamente numa janela que ainda não abriu. */ .ckp-body{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .ckp-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .ckp-titulo{font-weight:600;color:var(--text-1)} .ckp-body .btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.6)} /* REGRA DE QUEDA — chip da IDADE DA EVIDÊNCIA na aba Avaliação (2026-08-01). A nota não cai por silêncio; o preço é ela poder ficar velha. Este chip é o que torna a idade visível ao lado do número — discreto por padrão, âmbar (via .warn, que já existe) quando envelhece. */ .f3-dim .f3-provado{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.01em} /* ============================================================ HUB DE CÔMODO — cartões-indicadores + sub-telas (2026-08-01) Componentes GENÉRICOS (ver hud.js): servem a qualquer cômodo denso. ============================================================ */ .bz-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)} .bzh-card{position:relative;text-align:left;background:var(--bg-2);border:1px solid var(--stroke-1);border-radius:var(--r-card); padding:16px;cursor:pointer;font:inherit;color:inherit;transition:border-color var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)} .bzh-card:hover{border-color:var(--ciano);transform:translateY(-1px)} .bzh-card::after{content:"→";position:absolute;top:14px;right:14px;color:var(--text-3);font-size:15px;transition:var(--dur-micro)} .bzh-card:hover::after{color:var(--ciano);transform:translateX(3px)} .bzh-ico{display:block;margin-bottom:8px} .bzh-ico .hud-ico{width:22px;height:22px} .bzh-v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-kpi);font-weight:var(--fw-kpi);color:var(--text-1);line-height:1.05} /* AUSÊNCIA nunca usa a fonte de display (mesma regra do radar do cômodo 1) */ .bzh-v.bzh-nd{font-family:var(--font-ui);font-variant-numeric:normal;font-size:13px;font-weight:600;font-style:italic;color:var(--text-3);line-height:1.35} .bzh-t{margin-top:6px;font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} .bzh-h{margin-top:4px;font-size:12.5px;color:var(--text-2);line-height:1.4} /* estados semânticos do cartão (o chamador decide; o hub só pinta) */ .bzh-card.ok{border-color:var(--ok)} .bzh-card.warn{border-color:var(--warn)} .bzh-card.crit{border-color:var(--crit);box-shadow:0 0 12px var(--crit-halo)} /* Barra de volta da SUB-TELA — sempre visível no topo da superfície aberta */ .bz-subbar{display:flex;align-items:center;gap:12px;margin:0 0 12px} .bz-subbar .bz-back{background:none;border:1px solid var(--stroke-2);border-radius:var(--r-ctl);color:var(--text-2); font-size:12.5px;padding:6px 12px;cursor:pointer;font-family:var(--font-ui)} .bz-subbar .bz-back:hover{border-color:var(--ciano);color:var(--text-1)} .bz-subbar .bz-crumb{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} .bz-subbar .bz-crumb b{color:var(--text-1)} /* Botão "como funciona" — a doutrina sai do corpo da tela e vira leitura sob demanda (P2) */ .bz-doc{background:none;border:1px solid var(--stroke-2);border-radius:var(--r-chip);color:var(--text-3); font-size:11.5px;padding:3px 10px;cursor:pointer;font-family:var(--font-ui)} .bz-doc:hover{border-color:var(--ciano);color:var(--text-1)} /* Bloco de CONSERTO (requisito do Juiz: diagnóstico e ação na MESMA superfície) */ .bz-fix{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-3);border:1px solid var(--stroke-2); border-radius:var(--r-card);padding:12px 14px;margin:0 0 14px} .bz-fix .bz-fix-t{font-size:var(--fs-rotulo);font-weight:var(--fw-rotulo);letter-spacing:var(--ls-rotulo);text-transform:uppercase;color:var(--text-3)} .bz-fix select{background:var(--bg-2);border:1px solid var(--stroke-2);border-radius:var(--r-ctl);color:var(--text-1);font-size:12.5px;padding:6px 9px} .bz-fix .bz-fix-out{font-size:12px;color:var(--text-3)}