/* ===== BEATRIZ — HUD (redesign v1.2) sobre a base ATHENA ===== REMAPEAMENTO DE PALETA (design system, seção 2.2 — ver tokens.css): as variáveis LEGADAS abaixo viraram ALIASES dos tokens novos. É isto que troca a paleta do app inteiro sem reescrever as ~2.500 linhas deste arquivo. REGRA: não reintroduzir hex nas legadas — cor muda SÓ no tokens.css. (--ok saiu daqui de propósito: o token de mesmo nome em tokens.css é a definição única — redefinir aqui seria colisão.) */ :root{ --bg:var(--bg-0); --bg2:var(--bg-1); --panel:var(--bg-2); --panel2:var(--bg-3); --line:var(--stroke-1); --line2:var(--stroke-2); --ink:var(--text-1); --ink-dim:var(--text-2); --muted:var(--text-3); --blue:var(--ciano); --violet:var(--proc); --teal:var(--ok); --gold:var(--warn); --danger:var(--crit); --tier-core:var(--serie-2); --tier-breadth:var(--serie-3); --tier-depth:var(--serie-4); --glow:0 0 24px var(--ciano-halo); --rail-w:88px; --dock-w:380px; /* Default de --rail-user, espelhando o --dock-user logo abaixo. NÃO é decorativo: se a classe .rail-manual existisse sem a variável, `body{--rail-w:var(--rail-user)}` viraria guaranteed-invalid — e --rail-w no body NÃO herdaria os 88px do :root, então .rail{width} e .stage{left} cairiam para `auto` e o layout inteiro sairia do lugar. Hoje é inalcançável (os dois escritores setam a variável ANTES da classe: index.html anti-flash e app.js applyRailWidth; o reset remove a classe antes da variável), mas o dock tem essa rede e o rail não tinha. */ --rail-user:88px; /* Largura MANUAL do dock (alca de arrasto). O JS escreve SO esta variavel (no ) — nunca --dock-w direto, senao o inline venceria o @media mobile que zera --dock-w e a .stage reservaria margem para um dock invisivel. Quem aplica e a regra html.dock-manual body la embaixo. Ver public/dockkit.js. */ --dock-user:380px; /* Largura do dock ENQUANTO A AULA TOCA (fDW). MEDIDA na tela do Richard (1536px de janela), nao cravada de cabeca: e a largura ate onde ele estreitou o dock na mao para assistir. Quem aplica e a regra body.lesson-live la embaixo; aqui so o numero, para ficar ao lado das outras larguras do dock. */ --dock-lesson:330px; /* TAMANHO do retrato da Athena (alca de arrasto do avatar). 176px == o valor que estava CRAVADO em `.avatar-stage{height:176px}` antes desta rodada: quem nunca arrastar ve exatamente o de sempre. Governa a ALTURA do palco; a LARGURA da figura acompanha sozinha, na proporcao, porque a .avatar-img e object-fit:contain limitada por max-height. Ver public/avatarkit.js (a autoridade da faixa). Mesma REGRA DE OURO do dock/rail: o JS escreve SO --avatar-user (no ) + a classe .avatar-manual; quem aplica e a regra html.avatar-manual la embaixo. O default de --avatar-user e a mesma rede do --rail-user: sem ele, a classe sem a variavel viraria guaranteed-invalid e o palco perderia a altura. */ --avatar-h:176px; --avatar-user:176px; --h-sans:'Space Grotesk',system-ui,sans-serif; --h-disp:'Orbitron',sans-serif; --b-sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; } *{box-sizing:border-box} html,body{margin:0;height:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--b-sans); font-size:14.5px; overflow:hidden; -webkit-font-smoothing:antialiased; } .bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(120,160,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.05) 1px,transparent 1px); background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 100%);} .bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(700px 460px at 22% 0%,rgba(77,163,255,.12),transparent 60%),radial-gradient(700px 520px at 95% 20%,rgba(139,123,255,.10),transparent 60%);} /* ---- Topbar ---- */ .topbar{position:fixed;top:0;left:0;right:0;height:60px;z-index:5; display:flex;align-items:center;justify-content:space-between;padding:0 22px; background:linear-gradient(180deg,rgba(8,12,22,.92),rgba(8,12,22,.55)); border-bottom:1px solid var(--line);backdrop-filter:blur(10px);} .brand{display:flex;align-items:center;gap:12px} .brand-mark{width:34px;height:34px;border-radius:50%;position:relative; background:radial-gradient(circle at 50% 40%,#bfe0ff,#4da3ff 45%,#1b3a78 75%); box-shadow:var(--glow);animation:pulse 3.4s ease-in-out infinite} .brand-mark::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(77,163,255,.45)} .brand-name{font-family:var(--h-disp);font-weight:800;letter-spacing:5px;font-size:18px} .brand-sub{font-size:10.5px;color:var(--muted);letter-spacing:2px;text-transform:uppercase} .top-status{display:flex;align-items:center;gap:10px} .chip[hidden]{display:none !important} /* o atributo hidden tem que valer mesmo (o display:inline-flex abaixo o sobreporia) */ .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-dim); padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel)} .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:0 0 8px var(--muted)} .chip.on .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)} .chip.warn .dot{background:var(--warn,#ffb454);box-shadow:0 0 10px var(--warn,#ffb454)} /* voz indisponível (âmbar) — mesmo tom do erro visível da lousa */ .chip.clock{font-family:var(--mono);color:var(--ink);letter-spacing:1px} /* fWHO: e-mail da conta logada no topbar (desambigua admin × aluno do mesmo humano) */ .chip .who-email{font-family:var(--mono);color:var(--ink);letter-spacing:.3px;font-size:11.5px} /* ---- Rail ---- */ .rail{position:fixed;top:60px;bottom:0;left:0;width:var(--rail-w);z-index:4; display:flex;flex-direction:column;gap:4px;padding:14px 8px; border-right:1px solid var(--line);background:rgba(8,12,22,.5);backdrop-filter:blur(8px)} .rail-spacer{flex:1} .rail-btn[hidden]{display:none !important} /* o atributo hidden tem que valer mesmo (o display:flex abaixo o sobreporia) */ .rail-btn{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer; background:transparent;border:1px solid transparent;border-radius:14px;padding:11px 4px;color:var(--muted); font-family:var(--b-sans);font-size:10px;letter-spacing:.3px;transition:.18s} .rail-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .rail-btn:hover{color:var(--ink-dim);background:var(--panel);border-color:var(--line)} .rail-btn.active{color:#fff;background:linear-gradient(180deg,rgba(77,163,255,.22),rgba(77,163,255,.05));border-color:var(--line2);box-shadow:inset 0 0 18px rgba(77,163,255,.12)} .rail-btn.active svg{stroke:var(--blue);filter:drop-shadow(0 0 6px rgba(77,163,255,.6))} /* ---- Stage ---- */ .stage{position:fixed;top:60px;left:var(--rail-w);right:var(--dock-w);bottom:0;z-index:2;overflow-y:auto;padding:24px 26px 60px} .view{display:none;animation:fade .25s ease} .view.active{display:block} .view-head{margin-bottom:18px} .view-head h1{font-family:var(--h-sans);font-weight:600;font-size:23px;margin:0 0 4px} .muted{color:var(--muted)} .view-head .muted{font-size:13px;max-width:760px;line-height:1.5} /* ---- Panels ---- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 18px 20px;margin-bottom:18px; backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.25)} .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .panel-head h2{font-family:var(--h-sans);font-weight:600;font-size:15px;margin:0;letter-spacing:.3px} .panel-head .muted{font-size:12px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .grid-aula{display:grid;grid-template-columns:1fr;gap:18px;align-items:start} @media(max-width:1180px){.grid-2,.grid-aula{grid-template-columns:1fr}} /* Tempo com a ATHENA (lançado no 70/20/10) */ .time-athena{background:var(--panel,#0e1626);border:1px solid var(--line,#1d2940);border-radius:14px;padding:12px 16px;margin-bottom:18px} .time-athena[hidden]{display:none} .ta-head{font-size:13px;font-weight:600;margin-bottom:8px} .ta-head .muted{font-weight:400;font-size:11.5px} .ta-bands{display:flex;gap:22px;flex-wrap:wrap} .ta-band{display:flex;align-items:center;gap:7px;font-size:12.5px} .ta-dot{width:9px;height:9px;border-radius:50%;display:inline-block} .ta-band b{font-family:var(--mono);font-size:12px} .ta-val{font-weight:700;margin-left:2px} .ta-wk{color:var(--muted);font-size:11px;font-family:var(--mono)} .ta-pending{margin-top:7px;font-size:11.5px} /* ---- Radar ---- */ .radar-wrap{display:flex;justify-content:center} #radar{width:100%;max-width:420px;height:auto} .legend{display:flex;gap:18px;justify-content:center;margin-top:6px;font-size:12px;color:var(--ink-dim)} .legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px} .sw.cur{background:var(--blue)} .sw.tgt{background:transparent;border:1.5px dashed var(--violet)} /* ---- Dimension bars ---- */ .dim-tier{margin-bottom:14px} .dim-tier-h{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 8px} .dim-row{display:grid;grid-template-columns:1fr auto;gap:6px;margin-bottom:9px} .dim-name{font-size:12.5px;color:var(--ink-dim)} .dim-val{font-family:var(--mono);font-size:12px;color:var(--ink)} .dim-track{grid-column:1/3;height:7px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;position:relative} .dim-fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.3,1,.4,1)} .dim-tgt{position:absolute;top:-2px;height:11px;width:2px;background:var(--violet);opacity:.8} /* ---- PDI Gantt ---- */ .pdi-panel .panel-head{align-items:flex-start} .pdi-scroll{overflow-x:auto;padding-bottom:4px} .pdi{min-width:780px;position:relative} /* faixa brilhante animada passando pelas semanas (estado vazio/preview do Gantt) */ .pdi-sweep{position:absolute;top:0;bottom:0;left:194px;width:84px;pointer-events:none;z-index:3;mix-blend-mode:screen; background:linear-gradient(90deg,transparent,rgba(77,163,255,.18) 35%,rgba(180,220,255,.5) 50%,rgba(77,163,255,.18) 65%,transparent); filter:blur(1px);animation:pdi-sweep 5.2s cubic-bezier(.45,0,.55,1) infinite} .pdi-sweep::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(200,230,255,.95),transparent);box-shadow:0 0 14px 3px rgba(120,200,255,.7)} @keyframes pdi-sweep{0%{left:194px;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 84px);opacity:0}} @media(prefers-reduced-motion:reduce){.pdi-sweep{animation:none;opacity:0}} .pdi.is-empty .blk{opacity:.5} /* blocos do preview: presentes, mas sem conteúdo definido */ /* CTA grande: iniciar avaliação inicial */ .assess-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; background:linear-gradient(180deg,rgba(77,163,255,.16),rgba(77,163,255,.04));border:1px solid var(--line2);box-shadow:inset 0 0 26px rgba(77,163,255,.1)} .assess-cta[hidden]{display:none} .assess-btn{font-family:var(--h-sans);font-weight:600;font-size:15px;padding:13px 22px;border-radius:12px;cursor:pointer; background:linear-gradient(180deg,#4da3ff,#2f6fd0);color:#fff;border:none;box-shadow:var(--glow);white-space:nowrap} .assess-btn:hover{filter:brightness(1.08)} /* Banner de ATIVIDADE DIRIGIDA (só aluno de teste) — espelha o .assess-cta, em violeta p/ não competir com o CTA azul da Avaliação Inicial (que é o gate obrigatório e continua sendo a prioridade visual). */ .act-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; background:linear-gradient(180deg,rgba(167,124,255,.16),rgba(167,124,255,.04));border:1px solid var(--line2);box-shadow:inset 0 0 26px rgba(167,124,255,.1)} .act-cta[hidden]{display:none} .act-btn{font-family:var(--h-sans);font-weight:600;font-size:15px;padding:13px 22px;border-radius:12px;cursor:pointer; background:linear-gradient(180deg,#a77cff,#7a4fd0);color:#fff;border:none;white-space:nowrap} .act-btn:hover{filter:brightness(1.08)} /* Painel do Master: lista de atividades dirigidas */ #actText{width:100%;box-sizing:border-box;background:var(--panel2,rgba(255,255,255,.03));border:1px solid var(--line2);border-radius:10px; color:var(--fg);font-family:inherit;font-size:13px;padding:10px;resize:vertical} .act-row{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:10px} .act-row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .act-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;padding:2px 7px;border-radius:999px;border:1px solid var(--line2)} .act-badge.on{color:#a77cff;border-color:rgba(167,124,255,.5);background:rgba(167,124,255,.12)} .act-badge.off{color:var(--muted)} .act-text{font-size:13px;white-space:pre-wrap;margin:4px 0 8px} .act-students{display:flex;flex-wrap:wrap;gap:10px} .act-stu{display:flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line2);border-radius:8px;padding:4px 8px;cursor:pointer} /* ===== CÔMODO DE TESTES (cômodo 5) — backlog + registro + relatório ===== Reusa a linguagem visual do painel de atividades logo acima (mesma borda, mesmo raio, mesmos chips), para o cômodo parecer um cômodo só. Nada de identidade nova. */ .tr-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* `[hidden]` é regra do user-agent e PERDE para `.btn{display:inline-flex}` (classe, 0-1-0) — sem esta linha os botões de escrita continuariam VISÍVEIS para a sócia. Mesma armadilha já paga no bloco de avatares; escopo restrito aqui para não mexer em telas não auditadas. */ .tr-actions .btn[hidden],.tr-item-acts[hidden],.tr-item-acts .btn[hidden]{display:none!important} .tr-form{border-top:1px solid var(--line2);margin-top:12px;padding-top:12px} .tr-lbl{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:10px 0 4px} .tr-hint{font-size:11.5px;margin-bottom:6px} .tr-form textarea,.tr-form input[type=text],.tr-form input:not([type]),.tr-form input[type=date],.tr-form select{width:100%;box-sizing:border-box; background:var(--panel2,rgba(255,255,255,.03));border:1px solid var(--line2);border-radius:10px;color:var(--fg); font-family:inherit;font-size:13px;padding:10px;resize:vertical} .tr-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap} .tr-row .muted{font-size:12px} .tr-imp-out{margin-top:10px;font-size:12px;border:1px solid var(--line2);border-radius:10px;padding:10px;max-height:280px;overflow:auto} .tr-imp-out ul{margin:6px 0 0;padding-left:18px} .tr-imp-out li{margin-bottom:3px} .tr-item{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:10px} .tr-item-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .tr-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)} .tr-badge.s-pendente{color:#ffb454;border-color:rgba(255,180,84,.5);background:rgba(255,180,84,.12)} .tr-badge.s-em_andamento{color:#7da0ff;border-color:rgba(125,160,255,.5);background:rgba(125,160,255,.12)} .tr-badge.s-feito{color:#4ade80;border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.12)} .tr-dest{font-size:11.5px;color:var(--fg);opacity:.85} .tr-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;padding:2px 7px;border-radius:999px; color:#a77cff;border:1px solid rgba(167,124,255,.5);background:rgba(167,124,255,.12)} .tr-desc{font-size:13px;white-space:pre-wrap;margin-bottom:4px} .tr-por,.tr-ori{font-size:12px;color:var(--muted);white-space:pre-wrap;margin-bottom:3px} .tr-item-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} .tr-item-acts select{background:var(--panel2,rgba(255,255,255,.03));border:1px solid var(--line2);border-radius:8px;color:var(--fg);font-size:12px;padding:4px 8px} .tr-rec{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:10px} .tr-rec-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .tr-when{font-family:var(--mono);font-size:11.5px;color:var(--muted)} .tr-who{font-size:12.5px;font-weight:600} .tr-orig{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)} .tr-orig.o-coleta_automatica{color:#4ade80;border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.12)} .tr-orig.o-arquivo{color:#7da0ff;border-color:rgba(125,160,255,.5);background:rgba(125,160,255,.12)} .tr-rec-body{font-size:12.5px;display:flex;flex-direction:column;gap:2px} .pdi-head{display:flex;border-bottom:1px solid var(--line2)} .pdi-corner{width:194px;flex-shrink:0;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;padding-left:6px} .pdi-weeks{flex:1;display:grid} .pdi-weeks .wk{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center;padding:5px 0;border-left:1px solid rgba(125,160,255,.06)} .pdi-weeks .wk.now{color:var(--gold);background:rgba(255,194,77,.12);font-weight:600} .pdi-dim{display:flex;border-bottom:1px solid var(--line)} .pdi-dimlabel{width:168px;flex-shrink:0;display:flex;align-items:center;gap:7px;padding:0 8px;font-size:11px;color:var(--ink-dim);border-right:1px solid var(--line2);border-left:3px solid var(--tc,transparent);line-height:1.15} .pdi-dimlabel .cn{font-family:var(--h-disp);font-weight:700;color:var(--tc);font-size:11px;flex-shrink:0} .pdi-lanes{flex:1;display:flex;flex-direction:column} /* --lane-h: a ALTURA DA RAIA, desacoplada do --rh. POR QUE existe: o JS crava `--rh` INLINE no #pdi (app.js renderPDI: host.style.setProperty('--rh', rowH+'px')), e estilo inline vence QUALQUER regra desta folha — entao uma media-query nunca conseguiria alargar a raia no toque. --lane-h nao e escrito pelo JS, logo o CSS pode defini-la. Default = o --rh de hoje: sem a classe de toque, NADA muda (byte-a-byte). */ .pdi-lane{display:flex;height:var(--lane-h,var(--rh,20px))} .pdi-faixa{width:26px;flex-shrink:0;font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line)} .pdi-faixa.f70{color:var(--blue)} .pdi-faixa.f20{color:var(--violet)} .pdi-faixa.f10{color:var(--teal)} .pdi-track{flex:1;display:grid;align-items:center} .pdi-cell{height:var(--lane-h,var(--rh,20px));border-left:1px solid rgba(125,160,255,.05);grid-row:1} .pdi-cell.now{background:rgba(255,194,77,.07)} /* O bloco segue derivado de --rh (NAO de --lane-h): numa tela de toque a raia cresce e o bloco NAO — e exatamente o requisito "hitbox generoso, DESACOPLADO do tamanho visual, sem aumentar o bloco". */ .blk{height:calc(var(--rh,20px) - 8px);border-radius:4px;margin:0 2px;cursor:pointer;position:relative;z-index:2;transition:.14s;background:#46506a;border:1px solid rgba(255,255,255,.08)} .blk:hover{transform:scaleY(1.3);filter:brightness(1.35);box-shadow:0 0 8px rgba(77,163,255,.4)} /* ---- GANTT EM TELA DE TOQUE (tablet E celular — o requisito diz "tela de toque", nao "tablet") ---- O PROBLEMA (medido): o bloco tem 12px de altura (`calc(var(--rh,20px) - 8px)`) e ~26px de largura, e o clique CHAMA togglePdi -> marca a tarefa como CONCLUIDA. 12px sob o dedo, num alvo que MUDA DADO, e furo. A SOLUCAO: a RAIA vai a 44px (minimo de toque iOS/Material) e o BLOCO fica nos 12px. O .pdi-track ja tem `align-items:center`, entao o bloco se centraliza sozinho na raia — sem uma linha de JS. O ALVO em si e um ::after invisivel: pseudo-elemento ENCAMINHA o evento ao .blk, entao o handler existente (delegado no renderPDI) nao muda nada. */ html.is-tablet .pdi,html.is-mobile .pdi{--lane-h:44px} html.is-tablet .blk::after,html.is-mobile .blk::after{ content:'';position:absolute;top:50%;transform:translateY(-50%);height:44px; /* -2px de cada lado = reclama exatamente a `margin:0 2px` do bloco -> o alvo cobre a COLUNA DA SEMANA INTEIRA (30px) e para ali. LIMITE CONSCIENTE: nao vou aos 44px de LARGURA porque a coluna mede 30px — transbordar invadiria o bloco da semana vizinha e um toque ambiguo marcaria a TAREFA ERRADA. 30x44 (3,4x a area de hoje) sem ambiguidade e melhor que 44x44 que as vezes erra o alvo. */ left:-2px;right:-2px; } /* HOVER GRUDADO: `.blk:hover{transform:scaleY(1.3)}` fica preso apos o toque ate o proximo toque (o mesmo furo que o bloco @media(hover:none) ja trata para .rail-btn/.drawer-btn). */ @media (hover:none){ html.is-tablet .blk:hover,html.is-mobile .blk:hover{transform:none;filter:none;box-shadow:none} } .blk.done{background:linear-gradient(180deg,#3be0a0,#1d9e6e);border-color:#5dffc0} .blk.now{background:linear-gradient(180deg,#ffc24d,#d99a1f);border-color:#ffe0a0;box-shadow:0 0 8px rgba(255,194,77,.5)} .blk.late{background:linear-gradient(180deg,#ff6b85,#c33b54);border-color:#ff9aac} .blk.plan{background:#46506a} /* ===== AULA NO GANTT (decisão 2026-07-26, complemento): a distinção por COR/BRILHO foi CANCELADA — o bloco de aula usa as MESMAS 4 cores de estado da tarefa comum; quem diz "isto é aula" é SÓ o TRIÂNGULO ▶ abaixo. ROXO (aguarda) é EXCLUSIVO de aula — pedido de conclusão aguardando confirmação; sem gêmeo comum. ===== */ .blk.aguarda{background:linear-gradient(180deg,#b18cff,#7a4fd6);border-color:#d4bcff;box-shadow:0 0 8px rgba(157,110,255,.55)} /* MARCADOR DE AULA: triângulo de play PRETO dentro do bloco — CSS puro (clip-path), sem imagem/SVG. Preto sólido nos 4 estados temporais (no cinza da "prevista" fica menos evidente — aceito de propósito). Altura quase total com respiro: os insets contam do PADDING-box (dentro da borda de 1px do .blk), então inset 1px = 2px de folga VISUAL por lado (borda+inset) — nunca encosta, e escala com o zoom via a altura do bloco; largura deriva da altura (aspect-ratio). Centralizado. O ROXO (aguarda) fica como está hoje — sem triângulo nesta rodada (:not(.aguarda)). pointer-events:none preserva o clique no bloco (o handler mora no .blk). */ .blk.lesson:not(.aguarda)::before{ content:'';position:absolute;top:1px;bottom:1px;left:50%;transform:translateX(-50%); width:auto;aspect-ratio:.9;background:#000; clip-path:polygon(0 0,100% 50%,0 100%);pointer-events:none; } .app-flash{animation:app-flash 1.9s ease;border-radius:14px;position:relative;z-index:3} @keyframes app-flash{0%,100%{box-shadow:0 0 0 0 rgba(77,163,255,0)}25%{box-shadow:0 0 0 3px rgba(77,163,255,.95),0 0 26px rgba(77,163,255,.55)}65%{box-shadow:0 0 0 2px rgba(77,163,255,.5),0 0 14px rgba(77,163,255,.3)}} .blk.flash{z-index:6;animation:blk-flash 1.5s ease} @keyframes blk-flash{0%,100%{box-shadow:0 0 0 0 rgba(255,194,77,0);outline:0 solid transparent}35%{box-shadow:0 0 16px 5px rgba(255,194,77,.95);outline:2px solid #ffe08a;outline-offset:1px}70%{box-shadow:0 0 10px 2px rgba(255,194,77,.6);outline:2px solid rgba(255,224,138,.5)}} .pdi-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;font-size:11.5px;color:var(--ink-dim)} /* armadilha conhecida [hidden]×display (fechada ESCOPADA, como nos precedentes .av-btns/.master-only): garante que o item condicional da legenda (#lgAguarda) some de verdade quando hidden */ .pdi-legend [hidden]{display:none!important} .pdi-legend .lg{display:inline-block;width:14px;height:9px;border-radius:3px;margin-right:6px} /* grupo ESTADO: swatches nas cores MAIS BRILHANTES, casando com o TOPO do gradiente do bloco (os tons antigos #2bbe84/#e0556e eram mais apagados que a tela) + o roxo CONDICIONAL (só com claim pendente) */ .lg.done{background:#3be0a0} .lg.now{background:#ffc24d} .lg.late{background:#ff6b85} .lg.plan{background:#46506a} .lg.aguarda{background:#b18cff} /* grupo TIPO: o glifo ▶ SOLTO, na COR DO TEXTO da legenda (herda currentColor do .pdi-legend) — SEM moldura/fundo imitando bloco (o chip-retângulo confundia: o triângulo preto sumia no cinza do fundo). Só o símbolo + o texto, como os demais itens. O triângulo DENTRO dos blocos (.blk.lesson::before, preto) NÃO é afetado por isto — segue como está. */ .pdi-legend .lg-play{font-style:normal;font-size:1.15em;line-height:1;margin-right:6px} .pdi-legend .lgrp{opacity:.6;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px} /* AULA NO GANTT: menu do bloco de aula (assistir / pedir confirmação) */ .pdi-lmenu{position:fixed;z-index:300;background:#151b2e;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:320px} .pdi-lmenu .lm-title{font-size:12px;font-weight:600} .pdi-lmenu .lm-note{font-size:11.5px;color:var(--ink-dim)} /* fila do master: pedidos de confirmação de aula (roxo) + o registro do que o juiz buscou/achou (fP) */ .lc-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;font-size:12.5px} .lc-head{margin-bottom:6px} .lc-busca{margin:4px 0} .lc-ev{font-family:var(--mono);font-size:11px;background:rgba(125,160,255,.08);border-radius:6px;padding:4px 6px;margin-top:2px;word-break:break-word} .lc-note{margin-top:6px;font-size:11.5px} .lc-actions{display:flex;gap:8px;margin-top:8px} .lc-hist{margin-top:10px} .pdi-controls{display:flex;align-items:center;gap:6px;flex-shrink:0} .pctl{cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--ink-dim);border-radius:8px;width:26px;height:26px;font-size:14px;line-height:1;display:grid;place-items:center} .pctl:hover{color:#fff;border-color:var(--line2)} .pctl-week{font-family:var(--mono);font-size:11px;color:var(--gold);min-width:30px;text-align:center} .pctl-sep{width:1px;height:18px;background:var(--line)} .pctl-toggle{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-dim);cursor:pointer;user-select:none} .pctl-toggle input{accent-color:var(--blue)} /* ---- Timeline ---- */ .timeline{display:flex;flex-direction:column;gap:0} .tl-row{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .tl-row:last-child{border-bottom:none} .tl-date{font-family:var(--mono);font-size:11px;color:var(--muted)} .tl-act b{color:var(--ink)} .tl-act .tl-dim{font-size:11px;color:var(--blue)} .empty{color:var(--muted);font-size:13px;padding:8px 0;font-style:italic} /* ---- Browser viewer ---- */ .browser-panel .panel-head .muted{font-family:var(--mono);font-size:11px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .browser-view{aspect-ratio:16/10;border-radius:12px;border:1px solid var(--line2);overflow:hidden;position:relative; background:#05080f url() center/cover no-repeat;display:flex;align-items:center;justify-content:center} .browser-view img{width:100%;height:100%;object-fit:cover;object-position:top} .browser-empty{color:var(--muted);text-align:center;font-size:13px;line-height:1.7;padding:20px} /* Zoom da Aula ao vivo: controles no cabeçalho + visor rolável quando ampliado */ .aula-zoom{margin-left:auto;display:flex;align-items:center;gap:6px} .browser-view.zoomed{overflow:auto} .browser-view.zoomed img{object-fit:contain;display:block} /* ===== LOUSA da Aula ao vivo (premium) ===== */ .aula-tabbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap} .aula-tabs{display:inline-flex;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:999px;padding:3px} .aula-tab{cursor:pointer;border:0;background:transparent;color:var(--ink-dim);font-family:var(--h-sans);font-size:13px;padding:7px 16px;border-radius:999px;letter-spacing:.3px} .aula-tab.active{background:linear-gradient(180deg,rgba(77,163,255,.28),rgba(77,163,255,.08));color:#fff;box-shadow:var(--glow)} .board-controls{display:inline-flex;align-items:center;gap:8px;margin-left:auto} /* O atributo `hidden` do HTML só vale via folha do NAVEGADOR ([hidden]{display:none}), e qualquer `display` de AUTOR o vence — então a linha acima anulava o hidden e o grupo continuava na tela (medido: #mapControls com hidden=true e display:flex, os botões do mapa aparecendo na aba Lousa). Isto restaura o contrato do atributo, que o JS usa em setAulaTab. Vale também para o #boardControls (o furo era pré-existente ali). */ .board-controls[hidden]{display:none} /* REGIÃO ÚNICA de ações da Aula ao vivo (PDF da aula / gravar aula / PDF do mapa / zerar / arquivo). O margin-left:auto vive AQUI, no wrapper — não em cada grupo. Com ele em cada .board-controls, o 1º grupo absorvia todo o espaço livre e empurrava os demais para uma 2ª linha, separados por um vão (medido em 1440px: 3 grupos, 2 linhas). Um wrapper só = tudo junto, à direita, na mesma linha das abas. */ .aula-actions{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap} .aula-actions .board-controls{margin-left:0} /* ===== LOUSA cinematográfica (HUD/Jarvis) ===== */ .board-panel{padding:0;overflow:hidden;position:relative;isolation:isolate;border-color:var(--line2); background:radial-gradient(130% 90% at 0% 0%,rgba(77,163,255,.12),transparent 55%),radial-gradient(130% 90% at 100% 100%,rgba(139,123,255,.12),transparent 55%),linear-gradient(180deg,#070b16,#090e1d)} .board-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(120,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.06) 1px,transparent 1px); background-size:40px 40px;mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 35%,transparent 100%)} .board-panel::after{content:"";position:absolute;left:-30%;top:0;width:55%;height:100%;z-index:0;pointer-events:none;will-change:transform; background:linear-gradient(90deg,transparent,rgba(77,163,255,.06),transparent);filter:blur(7px);animation:bdSweep 11s ease-in-out infinite} @keyframes bdSweep{0%{transform:translateX(-40%)}50%{transform:translateX(200%)}100%{transform:translateX(-40%)}} @media (prefers-reduced-motion:reduce){.board-panel::after{animation:none;opacity:0}} .board-stage{position:relative;z-index:1;min-height:64vh;max-height:78vh;overflow:auto;padding:40px 44px 56px;scroll-behavior:smooth} .board-empty{color:var(--ink-dim);text-align:center;font-size:17px;line-height:1.9;padding:70px 20px} .board-empty.board-err{color:var(--warn,#ffb454)} /* fC: erro de render é VISÍVEL na lousa, nunca silencioso */ .bd-slide{max-width:960px;margin:0 auto;position:relative} /* moldura HUD nos 4 cantos */ .bd-frame{position:absolute;inset:-8px -6px;pointer-events:none;z-index:0} .bd-frame i{position:absolute;width:26px;height:26px;border:2px solid rgba(77,163,255,.5);filter:drop-shadow(0 0 6px rgba(77,163,255,.4))} .bd-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0} .bd-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0} .bd-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0} .bd-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0} .bd-head{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line2);position:relative} .bd-head:after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--violet));box-shadow:0 0 14px rgba(77,163,255,.6);animation:bdLine 2.4s ease-in-out infinite} @keyframes bdLine{0%,100%{width:120px;opacity:.85}50%{width:180px;opacity:1}} .bd-lesson{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;opacity:.9} .bd-title{font-family:var(--h-sans);font-size:38px;font-weight:700;line-height:1.1;letter-spacing:-.3px;min-height:1.1em; background:linear-gradient(92deg,#fff 10%,#bcd6ff 60%,#a99bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 18px rgba(77,163,255,.25))} .bd-title.typing::after{content:"";display:inline-block;width:3px;height:.92em;margin-left:4px;vertical-align:-2px;background:var(--blue);box-shadow:0 0 10px var(--blue);animation:bdCaret .7s steps(1) infinite} @keyframes bdCaret{50%{opacity:0}} .bd-sub{color:var(--ink-dim);font-size:17px;margin-top:8px;line-height:1.5} .bd-body{display:flex;flex-direction:column;gap:18px;position:relative} /* revelação dos blocos */ .bd-block{opacity:0;transform:translateY(20px) scale(.985);filter:blur(7px)} .bd-block.show{animation:bdReveal .6s cubic-bezier(.2,.75,.2,1) forwards} @keyframes bdReveal{to{opacity:1;transform:none;filter:blur(0)}} @media (prefers-reduced-motion:reduce){.bd-block{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}} /* palavra que "se digita" */ .tw-w{display:inline-block;opacity:0;animation:twWord .42s cubic-bezier(.2,.7,.2,1) forwards;will-change:opacity,transform} @keyframes twWord{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}} /* destaque de palavra-chave (neon chip) */ .bd-key{background:linear-gradient(180deg,rgba(77,163,255,.26),rgba(139,123,255,.18));color:#eaf2ff;padding:.04em .34em;border-radius:6px;font-weight:600; box-shadow:inset 0 0 0 1px rgba(125,160,255,.35),0 0 14px rgba(77,163,255,.25);-webkit-text-fill-color:#eaf2ff} /* HERO cinematográfico */ .bd-hero{padding:18px 6px 8px;text-align:center} .bd-hero-kicker{font-family:var(--mono);font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--teal);margin-bottom:14px} .bd-hero-words{display:flex;flex-wrap:wrap;gap:.32em;justify-content:center;align-items:baseline;font-family:var(--h-disp);font-weight:800;font-size:clamp(30px,5.4vw,58px);line-height:1.06} .bd-hw{opacity:0;color:#eaf1ff;animation:hwIn .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * .16s + .1s);text-shadow:0 0 26px rgba(77,163,255,.25)} .bd-hw.focus{background:linear-gradient(90deg,var(--blue),var(--violet),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(139,123,255,.5))} @keyframes hwIn{from{opacity:0;transform:translateY(26px) rotateX(40deg);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}} .bd-hero-line{font-family:var(--h-disp);font-weight:800;font-size:clamp(26px,4.4vw,46px);color:#eaf1ff;letter-spacing:.5px;min-height:1.1em} .bd-hero-line .bd-caret{display:inline-block;width:3px;height:.9em;margin-left:5px;vertical-align:-2px;background:var(--teal);box-shadow:0 0 12px var(--teal);animation:bdCaret .7s steps(1) infinite} .bd-hero-line.done .bd-caret{animation:none;opacity:0} /* MORPH: palavra que cruza a tela e vira outra */ /* "from" e "to" lado a lado (flex), que se SEPARAM na animação (from desliza p/ a esquerda e encolhe; to entra da direita e assenta). Lado a lado eles nunca se sobrepõem; overflow VISÍVEL p/ não cortar. */ .bd-morph{position:relative;min-height:140px;display:flex;align-items:center;justify-content:center;gap:.45em;flex-wrap:nowrap;font-family:var(--h-disp);font-weight:800;font-size:clamp(28px,4.6vw,54px);overflow:visible} .bd-morph-from{white-space:nowrap;color:#cfe0ff;animation:morphFrom 3s cubic-bezier(.7,0,.3,1) forwards} .bd-morph-to{position:relative;white-space:nowrap;opacity:0;background:linear-gradient(90deg,var(--blue),var(--violet),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(139,123,255,.5));animation:morphTo 3s cubic-bezier(.7,0,.3,1) forwards} .bd-morph-trail{position:absolute;left:0;top:50%;height:2px;width:0;background:linear-gradient(90deg,transparent,var(--blue),var(--teal),transparent);box-shadow:0 0 14px var(--blue);transform:translateY(-50%);opacity:0;animation:morphTrail 3s ease forwards} @keyframes morphFrom{0%{opacity:0;transform:translateX(0) scale(1)}18%{opacity:1;transform:translateX(0) scale(1.04)}55%{opacity:1;transform:translateX(-120px) scale(.62);filter:blur(0)}72%,100%{opacity:.4;transform:translateX(-150px) scale(.52);filter:blur(.3px)}} @keyframes morphTo{0%,40%{opacity:0;transform:translateX(170px) scale(.6);filter:blur(8px)}70%{opacity:1;transform:translateX(8px) scale(1.06);filter:blur(0)}100%{opacity:1;transform:translateX(-30px) scale(1)}} @keyframes morphTrail{0%,38%{width:0;left:30%;opacity:0}55%{opacity:1}70%{width:62%;left:18%;opacity:.8}100%{width:0;left:80%;opacity:0}} /* ============ ABERTURA CINEMATOGRÁFICA (Jarvis/Star Wars) — antes do tour ============ */ .cine-intro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 42%,#0c1430 0%,#070b1c 55%,#04060f 100%); opacity:0;transition:opacity .5s ease;overflow:hidden;cursor:pointer} .cine-intro.on{opacity:1} .cine-intro.out{opacity:0;transition:opacity .5s ease} .cine-intro.out .cine-core{transform:scale(1.16);opacity:0;transition:transform .55s cubic-bezier(.5,0,.5,1),opacity .55s ease} /* grade HUD de fundo, respirando */ .cine-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(77,163,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(77,163,255,.10) 1px,transparent 1px);background-size:46px 46px; mask:radial-gradient(circle at 50% 45%,#000 0%,transparent 70%);-webkit-mask:radial-gradient(circle at 50% 45%,#000 0%,transparent 70%);opacity:0;animation:cineGrid 2.6s ease forwards} @keyframes cineGrid{0%{opacity:0;transform:scale(1.15)}30%{opacity:.7}100%{opacity:.35;transform:scale(1)}} /* varredura de luz cobrindo a TELA INTEIRA (maior e mais cinematográfica que a do Gantt) */ .cine-sweep{position:absolute;top:0;bottom:0;left:-30%;width:30%;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(90deg,transparent,rgba(120,200,255,.10),rgba(180,225,255,.55),rgba(120,200,255,.10),transparent); filter:blur(2px);animation:cineSweep 1.7s cubic-bezier(.5,0,.4,1) .55s forwards;opacity:0} .cine-sweep::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(220,240,255,.95),transparent);box-shadow:0 0 26px 6px rgba(120,200,255,.7)} @keyframes cineSweep{0%{left:-30%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:115%;opacity:0}} .cine-core{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;will-change:transform,opacity} /* orbe central com anéis */ .cine-orb{position:relative;width:128px;height:128px;display:flex;align-items:center;justify-content:center;animation:cineOrbIn 1s cubic-bezier(.2,.8,.2,1) forwards;opacity:0} .cine-orb span{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#bcd6ff,#4da3ff 55%,#6a4bff);box-shadow:0 0 40px rgba(77,163,255,.8),0 0 90px rgba(106,75,255,.5)} .cine-orb i{position:absolute;border-radius:50%;border:2px solid rgba(120,180,255,.5)} .cine-orb i:nth-child(1){inset:0;border-top-color:#bcd6ff;animation:cineSpin 2.6s linear infinite} .cine-orb i:nth-child(2){inset:14%;border-right-color:#8b7bff;animation:cineSpin 3.4s linear infinite reverse} .cine-orb i:nth-child(3){inset:26%;border-bottom-color:#34e0c8;animation:cineSpin 4.6s linear infinite} @keyframes cineSpin{to{transform:rotate(360deg)}} @keyframes cineOrbIn{0%{opacity:0;transform:scale(.2);filter:blur(8px)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1);filter:blur(0)}} /* imagem da Athena grande, surgindo do centro */ .cine-ava{width:188px;height:188px;border-radius:50%;overflow:hidden;border:2px solid rgba(125,170,255,.55); box-shadow:0 0 50px rgba(77,163,255,.55),inset 0 0 30px rgba(10,20,50,.6);opacity:0;animation:cineAvaIn 1.2s cubic-bezier(.2,.8,.2,1) .15s forwards;margin-top:6px} .cine-ava img{width:100%;height:100%;object-fit:cover;object-position:center top} @keyframes cineAvaIn{0%{opacity:0;transform:scale(1.5);filter:blur(14px)}55%{opacity:1}100%{opacity:1;transform:scale(1);filter:blur(0)}} .cine-title{font-family:var(--h-disp,'Orbitron',sans-serif);font-weight:900;letter-spacing:.42em;font-size:clamp(36px,7vw,82px); background:linear-gradient(92deg,#fff,#bcd6ff 55%,#a99bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 0 28px rgba(77,163,255,.45));padding-left:.42em;opacity:0;animation:cineTitleIn 1s cubic-bezier(.2,.8,.2,1) .45s forwards} @keyframes cineTitleIn{0%{opacity:0;transform:translateY(16px) scale(.94);letter-spacing:.9em}100%{opacity:1;transform:none;letter-spacing:.42em}} .cine-tag{font-family:var(--mono,monospace);font-size:clamp(11px,1.4vw,15px);letter-spacing:.55em;color:var(--teal,#34e0c8);text-transform:uppercase;padding-left:.55em;opacity:0;animation:cineTagIn .8s ease .95s forwards} @keyframes cineTagIn{from{opacity:0}to{opacity:.92}} @media (prefers-reduced-motion:reduce){.cine-intro *{animation-duration:.01s!important}} /* títulos / texto — GRANDES e legíveis */ .bd-h{font-family:var(--h-sans);font-weight:700;color:#fff;margin:2px 0;line-height:1.2} .bd-h1{font-size:30px}.bd-h2{font-size:24px}.bd-h3{font-size:19px;color:#cdd9f2} .bd-text{font-size:19px;line-height:1.66;color:var(--ink)} .bd-list{margin:0 0 0 8px;padding:0;list-style:none;font-size:18px;line-height:1.55;color:var(--ink);display:flex;flex-direction:column;gap:10px} .bd-list li{position:relative;padding-left:30px} .bd-list li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#bfe0ff,var(--blue));box-shadow:0 0 10px var(--blue)} ol.bd-list{counter-reset:bdli} ol.bd-list li{counter-increment:bdli} ol.bd-list li::before{content:counter(bdli);width:auto;height:auto;left:0;top:0;background:none;box-shadow:none;color:var(--blue);font-family:var(--h-disp);font-weight:700;font-size:15px} /* STAT — números de impacto */ .bd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} .bd-stat{background:linear-gradient(180deg,rgba(77,163,255,.08),rgba(0,0,0,.25));border:1px solid var(--line2);border-radius:16px;padding:20px 16px;text-align:center;position:relative;overflow:hidden} .bd-stat::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 28px rgba(77,163,255,.1)} .bd-stat-v{font-family:var(--h-disp);font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1;background:linear-gradient(180deg,#fff,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px rgba(77,163,255,.35))} .bd-stat-l{margin-top:8px;font-size:14px;color:var(--ink-dim);font-family:var(--h-sans);letter-spacing:.3px} .bd-stat-h{margin-top:4px;font-size:12px;color:var(--muted)} /* STEPS — fluxo numerado */ .bd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .bd-step{position:relative;display:flex;gap:16px;padding:0 0 18px 0} .bd-step:not(:last-child)::before{content:"";position:absolute;left:18px;top:38px;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue),transparent)} .bd-step-n{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--h-disp);font-weight:700;font-size:16px;color:#fff; background:radial-gradient(circle at 50% 35%,rgba(77,163,255,.5),rgba(77,163,255,.12));border:1px solid var(--line2);box-shadow:0 0 16px rgba(77,163,255,.3)} .bd-step-t{font-family:var(--h-sans);font-weight:700;color:#fff;font-size:18px} .bd-step-d{color:var(--ink-dim);font-size:15.5px;line-height:1.5;margin-top:3px} /* BRAND — logos de empresas de IA */ .bd-brands{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .bd-brand-card{position:relative;min-width:128px;flex:0 1 150px;border:1px solid var(--line2);border-radius:16px;padding:18px 14px 12px;text-align:center;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.28));transition:transform .25s,box-shadow .25s,border-color .25s} .bd-brand-card:hover{transform:translateY(-3px);border-color:var(--bc);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 22px color-mix(in srgb,var(--bc) 45%,transparent)} .bd-brand-build{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;filter:saturate(.7)} .bd-brand-logo{position:relative;height:52px;display:flex;align-items:center;justify-content:center} .bd-brand-img{max-height:46px;max-width:88%;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))} /* WORDMARK: nome da marca na cor dela (fallback premium quando não há logo nítido) */ .bd-brand-mark{display:none;font-family:var(--h-sans);font-weight:700;font-size:19px;letter-spacing:.2px;line-height:1.1; color:color-mix(in srgb,var(--bc) 78%,#fff);text-shadow:0 0 18px color-mix(in srgb,var(--bc) 50%,transparent)} .bd-brand-card.wordmark .bd-brand-logo{height:auto;min-height:46px;padding:4px 2px} .bd-brand-card.wordmark .bd-brand-mark{display:block} .bd-brand-card.wordmark .bd-brand-name{display:none} .bd-brand-card.wordmark{border-color:color-mix(in srgb,var(--bc) 40%,var(--line2))} .bd-brand-name{position:relative;margin-top:12px;font-family:var(--h-sans);font-weight:600;font-size:14px;color:#eaf1ff} .bd-brands-cap{text-align:center;color:var(--muted);font-size:13px;margin-top:10px} /* tabela */ .bd-tablewrap{overflow:auto;border:1px solid var(--line2);border-radius:14px;background:rgba(0,0,0,.18)} .bd-table{border-collapse:collapse;width:100%;font-size:16px} .bd-table th,.bd-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .bd-table th{background:rgba(77,163,255,.14);color:#fff;font-weight:600;font-family:var(--h-sans);letter-spacing:.2px} .bd-table tr:last-child td{border-bottom:0} .bd-table tbody tr:hover{background:rgba(125,160,255,.06)} /* comparativo */ .bd-compare{display:flex;gap:16px} .bd-compare.cols-3{flex-wrap:wrap} .bd-col{flex:1;min-width:210px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.24));border:1px solid var(--line2);border-radius:16px;padding:18px 18px;border-top:3px solid var(--blue);box-shadow:0 6px 22px rgba(0,0,0,.22)} .bd-col.green{border-top-color:var(--teal)}.bd-col.amber{border-top-color:var(--gold)}.bd-col.violet{border-top-color:var(--violet)} .bd-col-h{font-family:var(--h-sans);font-weight:700;color:#fff;margin-bottom:12px;font-size:18px} .bd-col ul{margin:0;padding:0;list-style:none;line-height:1.5;font-size:16px;color:var(--ink);display:flex;flex-direction:column;gap:8px} .bd-col ul li{position:relative;padding-left:20px} .bd-col ul li::before{content:"›";position:absolute;left:2px;top:-1px;color:var(--blue);font-weight:700} /* callout */ .bd-callout{border-left:4px solid var(--blue);background:linear-gradient(90deg,rgba(77,163,255,.12),transparent);padding:16px 20px;border-radius:12px;font-size:17px;line-height:1.55} .bd-callout.key{border-left-color:var(--violet);background:linear-gradient(90deg,rgba(179,136,255,.14),transparent)} .bd-callout.warn{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(255,209,102,.14),transparent)} .bd-callout.quote{border-left-color:var(--teal);font-style:italic;color:var(--ink-dim)} .bd-callout-t{font-family:var(--h-sans);font-weight:700;color:#fff;margin-bottom:4px;font-size:16px} /* código — janela de terminal */ .bd-code{border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.32)} .bd-code-bar{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.5);padding:9px 14px;border-bottom:1px solid var(--line)} .bd-dot{width:11px;height:11px;border-radius:50%;display:inline-block} .bd-dot.r{background:#ff5f57}.bd-dot.y{background:#febc2e}.bd-dot.g{background:#28c840} .bd-code-lang{margin-left:8px;color:var(--ink-dim);font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase} .bd-code pre{margin:0;padding:18px;background:rgba(2,6,14,.65);overflow:auto} .bd-code code{font-family:var(--mono);font-size:15px;line-height:1.6;color:#e6edf6;white-space:pre-wrap} /* imagem — moldura premium + Ken Burns */ .bd-figure{margin:0;text-align:center} .bd-figure-frame{position:relative;display:inline-block;max-width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 1px rgba(125,160,255,.1)} .bd-figure-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(7,11,22,.55));pointer-events:none} .bd-figure img{display:block;max-width:100%;max-height:420px;object-fit:cover;transform:scale(1.02)} .bd-block.show .bd-figure img{animation:bdKen 9s ease-out forwards} /* zoom suave UMA vez ao revelar (não infinito = mais leve) */ @keyframes bdKen{from{transform:scale(1.02)}to{transform:scale(1.07)}} .bd-figure figcaption{color:var(--ink-dim);font-size:14px;margin-top:10px} /* gráfico */ .bd-chart{background:rgba(0,0,0,.2);border:1px solid var(--line2);border-radius:16px;padding:16px 18px} .bd-chart-t{font-family:var(--h-sans);font-weight:700;color:#fff;margin-bottom:10px;font-size:18px} .bd-svg{width:100%;height:auto;display:block} .bd-grid{stroke:var(--line)} .bd-axis{fill:var(--muted);font-size:11px;font-family:var(--mono)} .bd-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;color:var(--ink-dim)} .bd-leg{display:inline-flex;align-items:center;gap:6px}.bd-leg i{width:12px;height:12px;border-radius:3px;display:inline-block} /* pergunta de fixação */ .bd-question{border:1.5px dashed var(--blue);background:radial-gradient(120% 120% at 0% 0%,rgba(77,163,255,.12),transparent 60%),rgba(77,163,255,.05);border-radius:18px;padding:22px 24px;box-shadow:0 0 30px rgba(77,163,255,.12)} .bd-q-tag{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--blue)} .bd-q-prompt{font-size:21px;font-weight:700;color:#fff;margin:8px 0;line-height:1.35} .bd-q-opts{margin:10px 0 0;padding:0;list-style:none;line-height:1.7;color:var(--ink);font-size:17px;display:flex;flex-direction:column;gap:8px} /* TABLET 1 — a opcao virou um