/* ══════════════════════════════════════════════════════════════════════════ STUDIO — a moldura em volta do curso. A regra visual desta tela é uma só: ela não pode competir com o curso. O palco do meio mostra o motor de verdade, com as cores do curso; tudo em volta é cinza-escuro e discreto, para o autor julgar o que o ALUNO vai ver e não o que a ferramenta pinta por cima. Sem framework e sem CDN, pela mesma razão do motor: a ferramenta precisa abrir numa rede com bloqueio e continuar abrindo daqui a três anos. ══════════════════════════════════════════════════════════════════════════ */ /* ─── A FONTE DA MARCA, SERVIDA DAQUI ────────────────────────────────────── Inter, nos quatro pesos que o manual da Kursix especifica. Os arquivos já existiam em `Curso/motor/fonts/` — o motor os embarca pela mesma razão que o Studio: curso SCORM roda em rede de escola com bloqueio, e no app do Moodle offline. Um para o Google Fonts funcionaria na minha máquina e falharia na sala de aula, trocando a tipografia da marca pela do sistema sem avisar ninguém. `font-display: swap` para o texto aparecer com a fonte do sistema enquanto o arquivo chega: uma tela em branco por 200ms é pior do que um reflow. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/cursos/motor/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/cursos/motor/fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/cursos/motor/fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/cursos/motor/fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/cursos/motor/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); } /* ─── OS TOKENS DA KURSIX ─────────────────────────────────────────────────── Direto do manual da marca (Maio de 2026): Primary Deep Indigo #334155 Accent Teal #0F766E Secondary Slate #64748B Success Green #15803D Neutros Dark #0F172A Warning Amber #D97706 Gray 300 #CBD5E1 Danger Red #B91C1C Gray 100 #F1F5F9 O QUE NÃO É CÓPIA LITERAL, E POR QUÊ: os quatro semânticos do manual foram escolhidos para texto sobre BRANCO. Sobre a moldura navy do modo escuro, #0F766E e #15803D caem para contraste de 2,x:1 — ilegíveis. Então o tema escuro usa os irmãos CLAROS da mesma família (teal 400, green 500…), e o tema claro usa os valores do manual sem tocar. Mesma marca, contraste honesto nos dois; a alternativa seria uma paleta bonita no manual e ilegível na tela. */ :root { --fundo: #0b1220; /* o chão, mais fundo que os painéis */ --painel: #111a2e; --painel-alto: #18233c; --borda: #1e293b; --borda-forte: #334155; /* Primary do manual */ --texto: #f8fafc; /* Light */ --texto-fraco: #cbd5e1; /* Gray 300 */ /* Gray 500 do manual (#64748B) dá 3,64:1 sobre o painel navy — reprova o AA de texto pequeno, e este token pinta justamente os rótulos de 10,5px. Slate 400 é o vizinho de cima na mesma escala e sobe para 5,5:1. Medido, não estimado. */ --texto-tenue: #94a3b8; /* ── OS DOIS ACENTOS, E POR QUE ELES NÃO PODEM SER PARECIDOS ──────────── Reajustados em 31/08/2026, depois de o Cristiano apontar que a pílula Editar|Simular e o seletor de tela — dois controles a dois centímetros um do outro — pintavam de índigo e de teal ao dizer a MESMA coisa: "este está ativo". O problema não era de tom, era semântico, e a correção é de papel: --ativo UM estado ativo, UMA cor. Pílula do modo, tela escolhida, item selecionado. --acento-forte a AÇÃO TERMINAL, e só ela: Pacote SCORM. É o único botão preenchido de teal da tela inteira, e é o que faz o olho achá-lo sem procurar. --acento traço fino: foco, link, borda de campo ativo. Nunca preenchimento. E OS TRÊS SAEM DO LOGO, MEDIDOS. O que estava aqui não saía: o índigo anterior (#4f46e5) ficava a 13° de matiz do braço da marca (#304193) e com 24 pontos a MAIS de saturação — era o índigo do Tailwind, não o da Kursix, e é por isso que ele gritava ao lado do teal. O teal anterior (#2dd4bf) tinha S=66 contra os S=85 do #0da4a4 do manual: virou hortelã. Os valores do escuro são os irmãos CLAROS das peças do logo, porque as originais são mais escuras que o painel navy e sumiriam nele. Medido, e não estimado — a conta está no comentário de cada linha. */ /* Traço fino. H=179 contra os 180 do teal-brilho da marca. Contra o painel navy dá 8,20:1, e contra o fundo 8,85:1. */ --acento: #22c6c2; /* Preenchimento do Pacote SCORM, com texto branco por cima. É o cruzamento das duas peças teal do logo — H=180 e S=85 do brilho, L=26 do fundo — e é o único ponto da faixa que passa nos DOIS testes ao mesmo tempo: branco por cima 5,08:1 (precisa de 4,5) e contra o painel 3,41:1 (precisa de 3). Mais escuro que isto e o botão some no navy; mais claro e o branco some nele. */ --acento-forte: #0a7b7b; /* O braço do logo (#304193, H=230 S=51) clareado até destacar do painel: H=229, S=56. Branco por cima 5,42:1, contra o painel 3,20:1. */ --marca-indigo: #4a61cc; /* O PAPEL, e não a cor. As regras de estado pedem `--ativo`; quem decide que hoje ele é o índigo é esta linha, e é aqui que se muda de ideia sem caçar dezoito seletores. */ --ativo: var(--marca-indigo); /* AS QUATRO PEÇAS DO K, na ordem em que aparecem no logotipo. No manual elas são fixas — #041b3f na haste, #042c5f no losango, o degradê #086f7e→#0da4a4 na diagonal de cima e #304193 na de baixo. Só que as duas primeiras são MAIS ESCURAS que o painel do tema escuro (#111a2e): usadas como estão, a haste do K virava um buraco na barra e o losango sumia. Aqui valem os irmãos claros da mesma família, e o tema claro logo abaixo recebe os valores do manual sem tocar. Mesma decisão dos semânticos, pelo mesmo motivo. */ --marca-k-haste: #e2e8f0; --marca-k-junta: #4364b4; --marca-k-teal-fundo: #0f9aa8; --marca-k-teal-brilho: #22c6c2; --marca-k-braco: #5b6fdd; --ok: #22c55e; --alerta: #f59e0b; --erro: #f87171; /* Raio e sombra, escala do manual (6 · 14 · pill). */ --raio: 8px; --raio-g: 14px; --raio-pill: 999px; --sombra-1: 0 1px 2px rgba(2, 6, 23, .28); --sombra-2: 0 4px 14px rgba(2, 6, 23, .34); --sombra-3: 0 18px 48px rgba(2, 6, 23, .48); /* 48px, e não os 56px de antes. A barra tem 16 controles e o autor passa a sessão inteira olhando para o palco, não para ela: cada pixel que ela devolve é pixel de curso. 48 é a altura que o desenho do redesenho propôs e que o botão mais alto daqui (6px de padding + 12,5px de texto ≈ 31px) ainda deixa respirar. Abaixo disso o clique começa a ficar apertado. */ --barra-altura: 48px; /* 28px. Ele carrega migalha, estado de gravacao e as duas versoes - tudo texto de 10 a 11px, que se le de relance e nao se clica. Mais alto que isso seria faixa; mais baixo, o texto encostaria nas bordas. */ --rodape-altura: 28px; /* Não há segunda barra. Houve por uma versão, e ela custava 40px em toda a largura da tela — três faixas empilhadas antes do conteúdo. O que ela carregava passou para a barra do palco, que já existia: a divisão em camadas continua, mas a camada do curso divide uma linha em vez de pedir uma só para ela. */ /* ── CORES DE ESTADO ────────────────────────────────────────────────────── Estas existem porque cor cravada numa regra não troca de tema. O Studio já ficou com o hover escuro dentro da moldura clara exatamente por isso: a superfície mudava, o realce não. Toda cor que muda entre os dois temas mora aqui — e nenhuma regra abaixo escreve hexadecimal. */ --realce: #1c2740; /* superfície sob o ponteiro */ --selecao: #23305a; /* o item escolhido, que continua escolhido */ --campo-fundo: #0b1220; /* caixa de texto, código, miniatura */ --palco-fundo: #080e1a; /* atrás da prévia */ --palco-aparelho: #060b16; /* a mesa em volta do celular simulado */ --gatilho-fundo: #0e1729; --aviso-fundo: #2a1f0c; --alerta-texto: #fcd34d; --erro-texto: #fca5a5; --sombra: rgba(2, 6, 23, .55); /* Os quatro tons que separam os tipos. No tema claro eles escurecem: o mesmo azul que se lê bem sobre cinza-escuro some sobre branco. */ --cor-pagina: #60a5fa; --cor-avaliacao: #fbbf24; --cor-menu: #a78bfa; --cor-home: #34d399; /* Inter é a tipografia da marca. O resto da pilha é o que aparece nos ~200ms até o woff2 chegar, e num sistema onde ele falhe. */ font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-feature-settings: 'cv05' 1, 'ss03' 1; /* l com cauda, a de bico */ } /* ─── O TEMA DO STUDIO ───────────────────────────────────────────────────── Duas moldura possíveis, e as duas obedecem à mesma regra: NÃO competir com o curso. O palco do meio traz as cores que o autor está julgando; em volta há cinzas neutros e um único acento, usado só onde é preciso apontar alguma coisa. Nada de superfície colorida, nada de contraste alto na periferia — a moldura que chama atenção rouba a decisão que o autor veio tomar. O tema é do STUDIO. O modo visual do CURSO (claro/escuro/colorido) é outra coisa, é escolha do ALUNO, e por isso mora nos controles do palco. No tema CLARO os semânticos são os do manual, sem ajuste: eles foram escolhidos para viver sobre branco, que é exatamente o caso aqui. */ :root[data-tema="claro"] { --fundo: #f1f5f9; /* Gray 100 */ --painel: #f8fafc; /* Light */ --painel-alto: #ffffff; /* White */ --borda: #e2e8f0; --borda-forte: #cbd5e1; /* Gray 300 */ --texto: #0f172a; /* Dark */ --texto-fraco: #334155; /* Gray 700 */ --texto-tenue: #64748b; /* Gray 500 */ /* No claro os semânticos são os do manual, sem ajuste: eles foram escolhidos para viver sobre branco, que é exatamente o caso aqui. --acento Accent Teal do manual. Sobre o painel dá 5,23:1. --acento-forte idem, como preenchimento: branco por cima 5,47:1. --marca-indigo o hex EXATO do braço do logo. Antes era #4338ca, que é o índigo do Tailwind — 15° de matiz fora da marca. Branco por cima 9,12:1, contra o painel 8,71:1. */ --acento: #0f766e; --acento-forte: #0f766e; --marca-indigo: #304193; --ativo: var(--marca-indigo); /* As cores do manual, sem ajuste: o K sobre branco é o caso para o qual elas foram escolhidas. */ --marca-k-haste: #041b3f; --marca-k-junta: #042c5f; --marca-k-teal-fundo: #086f7e; --marca-k-teal-brilho: #0da4a4; --marca-k-braco: #304193; --ok: #15803d; /* Success */ /* Warning do manual é #D97706, e ele dá 3,04:1 sobre a superfície clara — serve para ÍCONE e borda (o piso de gráfico é 3:1), não para texto de 11px, que é como o Studio o usa (o estado "salvando", o selo de só leitura). Amber 700 fica na mesma família e passa em 4,9:1. */ --alerta: #b45309; --erro: #b91c1c; /* Danger */ --realce: #eef2f7; --selecao: #dbeae8; --campo-fundo: #f8fafc; --palco-fundo: #e2e8f0; --palco-aparelho: #cbd5e1; --gatilho-fundo: #f1f5f9; --aviso-fundo: #fef6e7; --alerta-texto: #92400e; --erro-texto: #991b1b; --sombra: rgba(15, 23, 42, .13); --sombra-1: 0 1px 2px rgba(15, 23, 42, .07); --sombra-2: 0 4px 14px rgba(15, 23, 42, .09); --sombra-3: 0 18px 48px rgba(15, 23, 42, .16); --cor-pagina: #1d4ed8; --cor-avaliacao: #b45309; --cor-menu: #6d28d9; --cor-home: #14713a; } * { box-sizing: border-box; } /* `[hidden]` PRECISA DE REGRA EXPLÍCITA. O `display: none` que o navegador dá ao atributo `hidden` vem da folha do usuário-agente, e QUALQUER `display` declarado numa classe vence — mesmo sendo uma regra de especificidade baixa. O elemento continua ocupando a tela, invisível de tão vazio, e capturando clique. O motor deste projeto já pagou por isso (a janela do Tutor IA), e o Studio repetiu: `.palco-vazio` com `display: grid` cobria o iframe do curso com um retângulo opaco da cor do fundo. A prévia ficava preta, o DOM lá dentro estava certo, e não havia nada no console para explicar. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; background: var(--fundo); color: var(--texto); font-size: 14px; overflow: hidden; } button, select, input, textarea { font: inherit; color: inherit; } /* ─── BARRA SUPERIOR ────────────────────────────────────────────────────── */ .barra { position: relative; /* âncora do par Editar/Simular, centralizado */ height: var(--barra-altura); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--painel); /* Uma linha só, e não sombra: a barra encosta nos painéis, e sombra ali criaria uma faixa escura no topo de três colunas de uma vez. */ border-bottom: 1px solid var(--borda); } /* A ASSINATURA: marca + produto. "Kursix" é a marca e leva o peso; "Studio" é o produto e vem em Medium, menor e mais claro — a hierarquia que o próprio mockup propõe. Emendar os dois no mesmo peso faria "KursixStudio" parecer um nome só. */ .marca { display: flex; align-items: center; gap: 9px; padding-inline-end: 4px; } /* O logotipo é quase quadrado (79,3 × 84,0) e não tem margem interna nenhuma — o desenho encosta nas bordas do viewBox. O K anterior tinha folga dentro dos 64px dele, então 26px aqui davam uns 20px de figura; repetir 26px agora deixaria a marca maior que o próprio nome ao lado. 22px de altura recolocam a figura no tamanho que ela tinha na tela. */ .marca-k { width: 21px; height: 22px; flex: 0 0 auto; } .marca-k-grande { width: 52px; height: 55px; flex: 0 0 auto; } /* AS QUATRO PEÇAS DO K PINTAM POR CLASSE, e não por `style=` no atributo. Eram seis atributos `style="fill:var(--…)"` no template, e eles eram a única coisa que ainda obrigava a política de segurança a aceitar `style-src 'unsafe-inline'`. Como classe, o `_marca.html` é o mesmo desenho e o `style-src 'self'` passa a ser alcançável — que era a dívida anotada no `main.py`. */ .marca-k-haste { fill: var(--marca-k-haste); } .marca-k-junta { fill: var(--marca-k-junta); } .marca-k-braco { fill: var(--marca-k-braco); } .marca-parada-fundo { stop-color: var(--marca-k-teal-fundo); } .marca-parada-brilho { stop-color: var(--marca-k-teal-brilho); } .marca-nome { display: flex; align-items: baseline; gap: 6px; line-height: 1; } .marca-nome strong { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; color: var(--texto); } .marca-sub { font-size: 12px; font-weight: 500; color: var(--texto-tenue); letter-spacing: .01em; } .campo-barra { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-tenue); } /* O rótulo "Curso"/"Template" some: o seletor já diz o que é, e duas palavras fixas a cada canto gastam a largura que os NOMES dos cursos precisam. */ .campo-barra > span:first-child { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-tenue); margin-inline-end: 1px; } .ic-acao { display: inline-flex; padding: 5px; border-radius: 7px; } .ic-acao svg { width: 16px; height: 16px; display: block; } .campo-barra { min-width: 0; } .campo-barra select { background: var(--campo-fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px 9px; color: var(--texto); font-size: 12.5px; font-weight: 500; /* Encolhe em vez de empurrar. O minimo automatico de um `: renomear a trilha é clicar nele. Medido: o campo ia de x=62 a x=237 e os seis botões de x=111 a x=237 — sobravam 49px clicáveis, e o gesto de apontar para a trilha revelava justamente os botões que impediam o clique. O `padding-inline-end: 0` daqui tentava resolver e não podia: padding não encolhe a CAIXA de um `flex: 1`. `inline-size: 0` com `overflow: hidden` faz as duas coisas: largura zero enquanto escondidos (o nome fica com a linha inteira, que era o ponto), e largura real ao aparecer, empurrando o campo em vez de cobri-lo. O nome encolhe sob o ponteiro — e é isso que o torna clicável. */ .trilha-acoes { display: flex; gap: 3px; flex: 0 0 auto; inline-size: 0; overflow: hidden; opacity: 0; transition: opacity .12s; } .trilha-topo:hover .trilha-acoes, .trilha-topo:focus-within .trilha-acoes { inline-size: auto; opacity: 1; } .icone-btn { background: transparent; border: 0; cursor: pointer; color: var(--texto-tenue); padding: 2px 4px; border-radius: 4px; font-size: 12px; } /* SEM ESTA LINHA O ÍCONE NÃO APARECE — e o botão fica com 8px de padding e nada dentro, clicável e invisível. Ela faltava porque `.icone-btn` nasceu para botões de CARACTERE (⊟ ⊞ ⤢), que se dimensionam pela fonte. Quando os primeiros SVGs entraram aqui — capa, desfazer, resetar progresso —, um sem width e sem height dentro de um flex container resolve para zero, e some sem erro nenhum: não há aviso no console, o clique continua funcionando, e a única pista é um espaço vazio onde deveria haver um desenho. Os outros botões desenhados do Studio têm cada um a sua regra (.ic-acao, .tela-btn, .modo-btn, .avatar-btn); esta fechava o buraco que sobrava. */ .icone-btn svg { width: 16px; height: 16px; display: block; } .icone-btn:hover { background: var(--borda); color: var(--texto); } .icone-btn.perigo:hover { color: var(--erro); } /* O gatilho EMPILHA, não fica lado a lado. Com dois selects e um campo de nota na mesma linha, dentro de uma coluna de 290px, cada um ficava com ~70px: o autor via "Ao p…" e "AVAL…" e tinha de adivinhar o que escolheu. Empilhado, cada controle usa a largura inteira e mostra o nome da página por extenso, que é a informação que importa. */ /* Trilha recolhida: o cabeçalho fica, o resto sai. O gatilho some junto — ele é do miolo da trilha, e mantê-lo visível numa lista recolhida devolveria a altura que o autor quis economizar. */ .trilha.recolhida > *:not(.trilha-topo) { display: none; } .seta-recolher { width: 16px; text-align: center; flex: 0 0 auto; } .painel-acoes { display: flex; align-items: center; gap: 3px; } .trilha-eco { margin: 0; padding: 3px 10px 5px; font-size: 10.5px; color: var(--texto-tenue); background: var(--painel-alto); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trilha-eco:hover { color: var(--acento); } .gatilho { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 7px 8px; background: var(--gatilho-fundo); border-bottom: 1px solid var(--borda); font-size: 11.5px; color: var(--texto-fraco); } .gatilho select, .gatilho input { background: var(--painel-alto); border: 1px solid var(--borda-forte); border-radius: 5px; padding: 4px 6px; font-size: 11.5px; width: 100%; max-width: 100%; color: var(--texto); } .gatilho-linha { display: flex; align-items: center; gap: 5px; } .gatilho-linha input[type="number"] { width: 62px; } .gatilho-rotulo { display: flex; align-items: center; gap: 5px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); } /* ── O GATILHO RECOLHIDO ───────────────────────────────────────────── O resumo empurra o botão para a direita e encolhe primeiro: numa coluna de ~230px o que precisa caber inteiro é o [+], não a frase. Sem caixa alta aqui — o rótulo ao lado já está em versalete, e dois níveis de caixa alta na mesma linha viram uma linha só de ruído. */ .gatilho-resumo { /* LINHA PRÓPRIA, abaixo do rótulo. Na mesma linha o rótulo em caixa alta comia a largura e a frase saía cortada em "inicia a…" — e um resumo cortado no meio não informa nada, que era o único motivo de ele existir. Duas linhas contra as cinco dos controles continua sendo o ganho. */ display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-style: italic; font-size: 11px; color: var(--texto-fraco); } .gatilho-abrir { flex: 0 0 auto; margin-inline-start: auto; width: 17px; height: 17px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--texto-tenue); border: 1px solid var(--borda); border-radius: 4px; font-size: 12px; cursor: pointer; } .gatilho-abrir:hover { color: var(--texto); border-color: var(--borda-forte); } .gatilho-corpo[hidden] { display: none; } .gatilho-corpo { display: flex; flex-direction: column; align-items: stretch; gap: 5px; } .gatilho.quebrado { box-shadow: inset 3px 0 0 var(--erro); } .paginas { list-style: none; margin: 0; padding: 4px; min-height: 10px; } .pagina-item { display: flex; align-items: center; gap: 7px; position: relative; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12.5px; border: 1px solid transparent; transition: background .12s; } .pagina-item:hover { background: var(--realce); } /* A PÁGINA ABERTA é uma pílula preenchida com uma marca de acento na ponta. Só a borda azul de antes se perdia numa lista de dez linhas; o preenchimento diz "você está aqui" sem o autor precisar procurar. */ .pagina-item.ativa { background: var(--selecao); border-color: transparent; color: var(--texto); font-weight: 500; } .pagina-item.ativa::before { content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; background: var(--acento); /* O filete é arredondado no lado de DENTRO da linha, qualquer que seja ele. */ border-start-end-radius: 3px; border-end-end-radius: 3px; } .pagina-item.arrastando { opacity: .35; } /* Os ícones da árvore. A cor separa os tipos de longe; a FORMA os separa para quem não distingue as cores — as duas pistas dizem a mesma coisa. */ .ic { display: inline-flex; flex: 0 0 auto; width: 15px; height: 15px; } .ic svg { width: 100%; height: 100%; display: block; } .ic-pagina { color: var(--cor-pagina); } /* documento com linhas · azul */ .ic-avaliacao { color: var(--cor-avaliacao); } /* prancheta com ✓ · âmbar */ .ic-menu { color: var(--cor-menu); } /* pasta · violeta */ .ic-home { color: var(--cor-home); } /* A figura herda a cor do texto: ela aparece no CABEÇALHO do painel, ao lado da palavra, e não numa lista onde precisasse se distinguir de outros três. */ .ic-imagem { color: currentColor; } .btn .ic { margin-inline-end: 4px; vertical-align: -3px; } /* O TAMANHO DO ICONE DENTRO DE UM BOTAO — a regra que faltava na base. `.modo-btn`, `.icone-btn`, `.tela-btn` e `.avatar-btn` tinham a sua; `.btn`, que e o botao mais usado da tela, nao tinha. Passou despercebido enquanto todos os `.btn` da barra eram `flex` numa LINHA, onde o svg herda a altura do texto. Na tela de boas-vindas eles viraram uma COLUNA, e ai o `align-items: stretch` padrao esticou o svg ate a altura inteira do botao: um "+" de 40px dentro de um botao de 40px. (Visto pelo Cristiano em 31/08/2026.) */ .btn svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; } .pagina-item .rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pagina-item .marca { font-size: 11px; color: var(--texto-tenue); } /* Mesma correção das ações de trilha, pela mesma razão: 78px dos 214px da linha ficavam reservados para botões invisíveis, e o rótulo — que é o nome da página — recebia a sobra. `background-color: inherit` em vez de um token fixo porque o fundo do item MUDA: transparente em repouso, `--realce` sob o ponteiro, `--selecao` na página aberta. Cravar uma cor aqui deixaria a tarja das ações destoando justamente na página em que o autor está trabalhando. */ .pagina-acoes { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; display: flex; gap: 2px; opacity: 0; background-color: inherit; padding-inline-start: 8px; } .pagina-item:hover .pagina-acoes { opacity: 1; } .alvo-solta { border-top: 2px solid var(--acento) !important; } .novo-item { display: flex; gap: 5px; padding: 5px 4px 2px; } .novo-item .btn { flex: 1; padding: 4px 6px; } /* A capa deixou de ser uma linha no rodapé da árvore e virou o primeiro botão da barra do curso. O `.ativa` continua sendo aplicado pelo studio.js quando a página aberta é a home — é a única pista de que o botão diz respeito a onde você está, e não só para onde ele leva. */ #ir-home.ativa { color: var(--acento); border-color: var(--acento); } /* AS DUAS VERSÕES, no rodapé da coluna esquerda. `--texto-tenue` e 10,5px: elas têm de ser LEGÍVEIS e não notáveis. Informação que se consulta uma vez por mês não pode disputar atenção com a árvore, que se lê o tempo todo. Números em `tabular-nums` para os dígitos ficarem no mesmo lugar quando a versão mudar — sem isso a linha "dança" a cada publicação, e o olho registra movimento onde não houve mudança de conteúdo que interesse. */ .versoes { margin: 0; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 8px 14px; border-top: 1px solid var(--borda); font-size: 10.5px; color: var(--texto-tenue); cursor: default; } .versoes b { font-weight: 600; font-variant-numeric: tabular-nums; } .conferencia { padding: 8px 10px; border-bottom: 1px solid var(--borda); background: var(--aviso-fundo); } .conferencia .prob { font-size: 11.5px; line-height: 1.45; margin: 3px 0; display: flex; gap: 6px; } .conferencia .prob[data-g="erro"] { color: var(--erro-texto); } .conferencia .prob[data-g="aviso"] { color: var(--alerta-texto); } /* ─── PALCO ─────────────────────────────────────────────────────────────── */ /* `min-height: 0` PORQUE ELE É ITEM DE GRADE. O mínimo automático de um item de grade é a altura do conteúdo, e isso impede a coluna de encolher: com o pé acrescentado, o palco passou a medir mais que a linha e empurrou a barra de estado para FORA da janela. */ .palco { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--palco-fundo); } .palco-topo { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--borda); background: var(--painel); font-size: 12px; } /* O NOME DO CURSO, na vaga que era do titulo da pagina. Ele nao cede espaco (`flex: 0 0 auto` no selo) mas o nome em si encolhe com reticencias: um curso chamado "curso-braelea-22-potencia e energia em corrente alternada" nao pode empurrar o seletor de tela para fora da barra. */ .palco-topo .curso-atual { display: flex; align-items: center; gap: 7px; min-width: 0; padding-inline-end: 4px; border-inline-start: 0; } .palco-topo .curso-nome { font-size: 12.5px; max-inline-size: 34ch; } /* O SELO DE SIMULAÇÃO usa a cor de alerta, e não a de acento: ele avisa que o que está na tela NÃO é o modo de trabalho — é o mesmo papel do 🔒 do curso somente-leitura, e por isso tem a mesma forma de pílula. Ele encolhe antes dos controles da direita, que são clicáveis; texto que some é recuperável trocando de modo, botão que sai da tela não. */ /* No pé do palco, encostado à direita: a migalha cresce e empurra o selo para o canto oposto ao "onde estou", que é onde o olho já procura estado. Sem `text-overflow` agora — a frase inteira cabe nesta linha, e era lá em cima, disputando espaço com o zoom e o seletor de tela, que ela vinha sendo cortada em reticências. `margin-inline-start: auto` faz o empurrão sem precisar de um elemento vazio no meio. */ .selo-simulacao { flex: 0 0 auto; margin-inline-start: auto; padding: 3px 9px; border-radius: var(--raio-pill); border: 1px solid var(--alerta); color: var(--alerta-texto); font-size: 11px; } .selo-simulacao[hidden] { display: none; } /* ─── AS BARRAS DE ROLAGEM ────────────────────────────────────────────────── A do sistema é clara, larga e com setas nas pontas — desenhada para janela de aplicativo do Windows, não para uma moldura escura. Ao lado da árvore ela era a coisa mais clara da coluna, e puxava o olho para o canto onde não há nada para decidir. Duas declarações porque nenhuma sozinha cobre todo mundo: `scrollbar-width` e `scrollbar-color` são o padrão (Firefox, e Chrome recente), e o `::-webkit-scrollbar` é o que os Chrome mais antigos ainda entendem. Quem suporta as duas usa a padrão e ignora a outra. A cor vem dos tokens, então ela acompanha o tema claro sem uma segunda regra — que é o defeito que a barra do sistema tinha: ela não trocava. */ * { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: var(--raio-pill); /* A borda transparente com `background-clip` afina o polegar sem afinar a ÁREA CLICÁVEL: pegar uma barra de 4px é irritante, e uma de 10px come largura da coluna. Assim ela parece fina e continua fácil de agarrar. */ border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); background-clip: padding-box; } /* O canto onde as duas barras se encontram fica com o fundo do sistema se não for declarado — um quadradinho claro no canto do painel escuro. */ ::-webkit-scrollbar-corner { background: transparent; } /* ─── A GAVETA DE MÍDIA ───────────────────────────────────────────────────── Fechada, ela é uma barra de ~34px. Aberta, um painel de altura fixa que sai do palco — e não do pé, que precisa continuar visível: o estado de gravação e a migalha respondem "salvou?" e "onde estou?", e as duas perguntas não deixam de existir porque a galeria está aberta. */ .gaveta-midia { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; background: var(--painel); border-top: 1px solid var(--borda); } .gaveta-topo { display: flex; align-items: center; gap: 7px; padding: 8px 14px; background: transparent; border: 0; cursor: pointer; color: var(--texto-fraco); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: start; } .gaveta-topo:hover { color: var(--texto); } .gaveta-seta { width: 15px; height: 15px; flex: 0 0 auto; transition: rotate .16s; } /* A seta aponta para CIMA quando fechada — para onde a gaveta vai se mover ao abrir. Apontar para o conteúdo escondido é a leitura que não exige explicar. */ .gaveta-topo[aria-expanded="false"] .gaveta-seta { rotate: 180deg; } /* A GAVETA SOBE E DESCE, em vez de aparecer de uma vez. Era `display: none` -> `display: flex`, e `display` nao anima: a gaveta brotava na tela e o iframe do palco dava um salto de 300px num quadro so. O olho perde o lugar, e num painel que se abre e fecha o tempo todo isso cansa. Ideia boa que veio da versao 0.1.0-alpha.37, e a unica coisa que ela precisa e que a altura seja um numero nos dois estados — por isso `height: 0` no lugar de `display: none`. COLUNA FLEX, e a rolagem sai daqui para DENTRO. Era `display: block` com `overflow-y: auto` na propria gaveta: quem rolava era ela inteira, levando junto a area de soltar e a coluna de pastas. Com o explorador quem tem de rolar e so a grade de arquivos — a pasta escolhida precisa continuar a vista enquanto se procura o arquivo nela. */ .gaveta-corpo { display: flex; flex-direction: column; block-size: 0; padding-block: 0; padding-inline: 14px; overflow: hidden; opacity: 0; /* A altura e o padding no mesmo tempo, a opacidade um pouco mais curta: o conteudo termina de aparecer com a gaveta ja quase parada, em vez de deslizar visivel e chamar atencao para o movimento. */ transition: block-size .26s cubic-bezier(.2, 0, 0, 1), padding-block .26s cubic-bezier(.2, 0, 0, 1), opacity .18s ease; } .gaveta-midia[data-aberta="true"] .gaveta-corpo { block-size: 300px; padding-block: 0 12px; opacity: 1; } /* Quem pediu menos movimento recebe a gaveta como ela era: aparece e some, sem deslize. O conteudo continua todo la — o que se desliga e a viagem. */ @media (prefers-reduced-motion: reduce) { .gaveta-corpo { transition: none; } } /* A galeria ganha largura aqui embaixo — na coluna de 320px do inspetor cabiam duas miniaturas por linha, e é para isso que a gaveta serve. `auto-fill` em vez de um número de colunas: quem tem a janela larga vê mais numa olhada, e nada precisa saber quanto mede a tela. */ .gaveta-corpo .galeria-grade { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } /* ─── A BARRA DE ESTADO, NO PÉ DO PALCO ──────────────────────────────────── Vinda do mockup, e ela resolve uma pergunta real: "onde eu estou?". A trilha da migalha responde isso sem o autor ter de procurar na coluna da esquerda qual linha está acesa — e o estado de salvamento fica no campo de visão de quem está olhando o conteúdo, não lá no canto oposto da tela. */ .palco-pe { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 7px 14px; border-top: 1px solid var(--borda); background: var(--painel); font-size: 11.5px; color: var(--texto-tenue); } .palco-migalha { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; } .palco-migalha span { overflow: hidden; text-overflow: ellipsis; } .palco-migalha .sep { color: var(--borda-forte); flex: 0 0 auto; } /* O DEGRAU ATUAL NAO CEDE, e isso deixou de ser detalhe em 31/08/2026. Ate ali a pagina atual aparecia DUAS vezes — aqui, no fim da migalha, e escrita de novo na barra do palco. Com a segunda removida (ela era a versao pobre, sem a trilha e sem os degraus clicaveis), esta virou a unica. E numa flexbox com `overflow: hidden` quem some primeiro e o FIM da linha: sem este `flex: 0 0 auto`, o unico lugar que responde "que pagina e esta?" seria justamente o primeiro a sumir numa janela estreita. Os degraus anteriores encolhem no lugar dele. */ .palco-migalha .aqui { color: var(--texto-fraco); font-weight: 500; flex: 0 0 auto; max-inline-size: 28ch; } .migalha-ir { background: transparent; border: 0; padding: 2px 4px; border-radius: 5px; color: inherit; font: inherit; cursor: pointer; max-width: 190px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .migalha-ir:hover { color: var(--acento); background: var(--realce); } /* OS DEGRAUS DESENHADOS — a capa e o hub — precisam de regra própria: sem `flex: 0 0 auto` eles encolheriam junto com os degraus de texto quando a migalha ficasse apertada, e um ícone espremido vira mancha. São os degraus mais curtos e mais estáveis da trilha — são os que menos devem ceder. O hub entrou aqui junto com a casa porque o papel dele também é fixo e o nome dele não é escolha do autor. Escrito, ele custava duas vezes: a largura de "HUB DA TRILHA" e a palavra "trilha" repetida logo depois do nome dela. */ .palco-migalha .icone { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: none; padding-inline: 3px; } .palco-migalha .icone svg { width: 14px; height: 14px; display: block; } /* O DEGRAU DE PAPEL é o que o Studio nomeia — "BLOCO · TEXTO", "CARTÃO 2" —, e não o que o professor batizou. A maiúscula é o único sinal que separa os dois no rodapé, e ela fica no CSS de propósito: `text-transform` respeita o idioma, enquanto `toUpperCase()` no JavaScript estragaria o texto de uma língua que o Studio ainda vai falar. O nome que o autor digitou sai na tela exatamente como ele o digitou. */ .palco-migalha .papel { text-transform: uppercase; letter-spacing: .02em; } /* A PRÉVIA DA FIGURA, no painel dela. Ver o desenho vale mais do que ler `videoaula.png` — o mesmo argumento da miniatura do seletor de ícone. O xadrez atrás revela transparência: um PNG de fundo transparente sobre fundo branco parece ter fundo branco, e o autor só descobre no tema escuro do aluno. `contain` porque a figura aqui é para CONFERIR, e cortar esconderia justamente o canto que se quer ver. */ .previa-figura { margin: 0 0 12px; padding: 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--painel); background-image: linear-gradient(45deg, var(--realce) 25%, transparent 25%, transparent 75%, var(--realce) 75%), linear-gradient(45deg, var(--realce) 25%, transparent 25%, transparent 75%, var(--realce) 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; } .previa-figura img { display: block; max-width: 100%; max-height: 160px; margin-inline: auto; object-fit: contain; } /* O BOTÃO DE SUBIR UM NÍVEL, no alto do painel de propriedades. Maiúsculo porque o rótulo dele é um DESTINO, e destino em botão se lê de relance. */ .btn-subir { margin-bottom: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; } .palco-salvo { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; } .palco-salvo svg { width: 13px; height: 13px; } .palco-salvo[data-estado="salvo"] { color: var(--ok); } .palco-salvo[data-estado="salvando"] { color: var(--alerta); } .palco-salvo[data-estado="erro"] { color: var(--erro); } /* REGRA, e nao falha: o curso nao aceita escrita (a vitrine, ou o curso de outra pessoa). Cor de atencao, nao de erro -- nada quebrou. */ .palco-salvo[data-estado="regra"] { color: var(--alerta); } /* ─── O QUADRO, A MOLDURA E O ZOOM ──────────────────────────────────────── O iframe recebe a largura de VERDADE do aparelho escolhido — 390px num celular em pé — porque é isso que faz as regras responsivas do motor dispararem. Escalar um iframe largo até parecer estreito mostraria o template de desktop encolhido, que é exatamente a mentira que se quer evitar. O zoom entra por cima, com `transform`. Como `transform` não muda o espaço que o elemento ocupa, quem carrega o tamanho final é a MOLDURA — sem ela, um quadro a 50% continuaria reservando o dobro do espaço e criaria barras de rolagem para uma área vazia. */ .palco-quadro { flex: 1; position: relative; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; /* O CURSO FLUTUA SOBRE O CHÃO ESCURO, como no mockup. O respiro em volta é o que faz a prévia parecer o documento que ela é, em vez de um painel encaixado entre dois outros. Custa 18px de largura útil e devolve a leitura de "isto aqui é o curso, aquilo em volta é a ferramenta". */ padding: 18px; } .palco-quadro[data-tela="retrato"], .palco-quadro[data-tela="paisagem"] { background: var(--palco-aparelho); } .palco-moldura { position: relative; flex: 0 0 auto; width: calc(var(--largura, 100%) * var(--zoom, 1)); height: calc(var(--altura, 100%) * var(--zoom, 1)); border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra-3); } /* O celular ganha a moldura de aparelho por cima da sombra do cartão. */ .palco-quadro[data-tela="retrato"] .palco-moldura, .palco-quadro[data-tela="paisagem"] .palco-moldura { box-shadow: 0 0 0 8px var(--painel-alto), var(--sombra-3); } #curso { position: absolute; top: 0; left: 0; width: var(--largura, 100%); height: var(--altura, 100%); border: 0; display: block; background: var(--palco-fundo); transform: scale(var(--zoom, 1)); transform-origin: top left; } .palco-controles { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; } .grupo-telas, .grupo-zoom { display: flex; align-items: center; gap: 1px; background: var(--painel-alto); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 2px; } .tela-btn { background: transparent; border: 0; cursor: pointer; color: var(--texto-tenue); padding: 3px 7px; border-radius: 5px; font-size: 13px; line-height: 1; } .tela-btn:hover { background: var(--borda); color: var(--texto); } /* A TELA ESCOLHIDA usa `--ativo`, e não mais o teal do Pacote SCORM. Eram dois controles a dois centímetros um do outro dizendo "este está ativo" com cores diferentes — e o teal preenchido aqui roubava a distinção do único botão que devia tê-la. */ .tela-btn.ativo { background: var(--ativo); color: #fff; } .tela-btn svg { width: 16px; height: 16px; display: block; } .zoom-valor { background: transparent; border: 0; cursor: pointer; color: var(--texto-fraco); font-size: 11.5px; min-width: 42px; text-align: center; padding: 3px 2px; } .zoom-valor:hover { color: var(--texto); } .palco-vazio { position: absolute; inset: 0; display: grid; place-items: center; background: var(--fundo); color: var(--texto-fraco); padding: 40px; text-align: center; } /* ─── INSPETOR ──────────────────────────────────────────────────────────── */ .abas-inspetor { display: flex; border-bottom: 1px solid var(--borda); padding: 0 4px; } .aba { flex: 1; background: transparent; border: 0; cursor: pointer; padding: 12px 4px 10px; color: var(--texto-tenue); font-size: 12.5px; font-weight: 500; border-bottom: 2px solid transparent; transition: color .14s; } .aba:hover { color: var(--texto-fraco); } .aba.ativa { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; } .inspetor-corpo { flex: 1; overflow-y: auto; } .aba-conteudo { padding: 12px; } .secao-inspetor { margin-bottom: 18px; } .secao-inspetor > h3 { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); } /* ─── A PALETA EM LADRILHOS ──────────────────────────────────────────────── Três colunas, ícone em cima e nome embaixo, como no mockup. A versão anterior era de duas colunas com nome + resumo em cada peça: doze parágrafos curtos empilhados, que se leem como um texto corrido e não como uma paleta. O resumo passou para o `title` — ele é consulta, não leitura. */ .paleta-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .peca { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--painel-alto); border: 1px solid var(--borda); border-radius: 10px; padding: 11px 6px 9px; cursor: grab; text-align: center; color: var(--texto); transition: border-color .14s, background .14s, transform .1s; } .peca:hover { border-color: var(--acento); background: var(--realce); transform: translateY(-1px); } .peca:active { cursor: grabbing; transform: none; } .peca:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } .peca .peca-icone { font-size: 17px; display: block; } /* A cor agrupa por FAMÍLIA, não por item: quatro cores se aprendem, doze não. */ .ic-grande { width: 21px; height: 21px; } .fam-org { color: var(--cor-pagina); } /* organiza texto */ .fam-int { color: var(--cor-menu); } /* o aluno interage */ .fam-ext { color: var(--cor-avaliacao); } /* vem de fora */ .fam-quest { color: var(--cor-home); } /* tipos de questão */ .peca .peca-nome { font-weight: 500; font-size: 11.5px; display: block; line-height: 1.25; } /* O resumo vira `title`: ele explica, e explicação em doze ladrilhos ao mesmo tempo vira parede de texto. Continua no DOM para leitor de tela. */ .peca .peca-resumo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ─── BUSCAR COMPONENTE ──────────────────────────────────────────────────── Do mockup, e ela ganha valor com o tamanho da paleta: são doze blocos mais cinco tipos de questão, e procurar "carrossel" com o olho numa grade de três colunas é mais lento do que digitar "car". */ .busca-peca { position: relative; margin-bottom: 14px; } .busca-peca input { width: 100%; background: var(--campo-fundo); border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto); padding-block: 8px; padding-inline-start: 32px; padding-inline-end: 44px; font-size: 12.5px; } .busca-peca input:focus { outline: none; border-color: var(--acento); } .busca-peca .lupa { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--texto-tenue); pointer-events: none; } .busca-peca .atalho { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--texto-tenue); pointer-events: none; border: 1px solid var(--borda); border-radius: 4px; padding: 1px 5px; } .sem-resultado { font-size: 11.5px; color: var(--texto-tenue); padding: 6px 2px; } /* ─── TEXTO DE AJUDA vs. ALERTA ──────────────────────────────────────────── A `.nota` era uma caixa preenchida, e o painel tem várias — três empilhadas numa coluna de 330px viravam três cartões cinzentos disputando atenção com a paleta, que é o que o autor veio usar. Pior: davam a MESMA forma de um alerta, então "arraste para dentro do hub" parecia um aviso de problema. Agora explicação é TEXTO, com um filete discreto à esquerda. Só o que é alerta de verdade — `.aviso` e `.erro` — mantém fundo, porque aí a forma está dizendo algo: isto aqui precisa da sua atenção. */ .nota { font-size: 11.5px; line-height: 1.55; color: var(--texto-fraco); border-inline-start: 2px solid var(--borda); background: transparent; padding: 2px 0 2px 10px; margin: 8px 0; } .nota b { color: var(--texto); font-weight: 600; } .nota code { background: var(--campo-fundo); border-radius: 4px; padding: 0 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; } .nota.aviso, .nota.erro { background: var(--aviso-fundo); padding: 9px 11px; border-inline-start-width: 3px; border-start-end-radius: 8px; border-end-end-radius: 8px; } .nota.aviso { border-inline-start-color: var(--alerta); color: var(--alerta-texto); } .nota.erro { border-inline-start-color: var(--erro); color: var(--erro-texto); } .nota.aviso b, .nota.erro b { color: inherit; } .campo { margin-bottom: 11px; } .campo > label { display: block; font-size: 11.5px; color: var(--texto-fraco); margin-bottom: 3px; } .campo input[type="text"], .campo input[type="number"], .campo input[type="url"], .campo select, .campo textarea { width: 100%; background: var(--fundo); border: 1px solid var(--borda-forte); border-radius: 6px; padding: 6px 8px; color: var(--texto); } .campo textarea { min-height: 72px; resize: vertical; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 12px; } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); } .campo .dica { font-size: 10.5px; color: var(--texto-tenue); line-height: 1.4; margin-top: 3px; } .campo-linha { display: flex; align-items: center; gap: 7px; } .campo-linha input[type="checkbox"] { width: auto; } /* `min-width: auto` é o padrão de um item de flex, e o mínimo automático de um

corrido, e sem esta linha os dois saiam colados — "KursixStudio", que le como um nome so. */ .boas-vindas-titulo .marca-sub { margin-inline-start: 5px; } .boas-vindas-linha { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-tenue); max-inline-size: 32ch; text-wrap: balance; } .boas-vindas-acoes { display: flex; flex-direction: column; gap: 10px; } .bv-acao { inline-size: 100%; justify-content: center; padding-block: 9px; font-size: 13.5px; } /* O "ou" com um filete de cada lado: ele separa as duas ações de trabalho do terceiro caminho, que é conhecer a vitrine. Sem a separação os três pareciam três opções do mesmo peso, e a vitrine não é — ela é a saída de quem ainda não sabe o que quer fazer. */ .bv-ou { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: var(--texto-tenue); font-size: 11px; } .bv-ou::before, .bv-ou::after { content: ''; flex: 1 1 0; block-size: 1px; background: var(--borda); } .bv-vitrine { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px; border-radius: var(--raio); color: var(--texto-tenue); font-size: 12.5px; text-decoration: none; transition: color .14s, background .14s; } .bv-vitrine:hover { color: var(--acento); background: var(--realce); } .bv-vitrine svg { inline-size: 15px; block-size: 15px; } /* A LISTA DE CURSOS do diálogo "Abrir curso". Uma linha por curso, com o nome inteiro legível — que é justamente o que o `` ficam lado a lado, e a dica de senha se enrola em volta da caixa — o `.campo` da barra e feito para caber numa linha, e este formulario e uma coluna. Mesma correcao que a tela de entrar ja tinha. */ .forma-conta .campo > span { display: block; font-size: 11.5px; color: var(--texto-fraco); margin-block-end: 4px; } .forma-conta .campo input[type="text"], .forma-conta .campo input[type="password"] { inline-size: 100%; box-sizing: border-box; } .forma-conta .campo .dica { display: block; margin-block-start: 4px; } .forma-conta .campo-linha { margin-block: 10px; } .forma-conta .btn-forte { inline-size: 100%; justify-content: center; margin-block-start: 6px; } /* O DONO, ao lado do nome do curso no diálogo de abrir. Ele só aparece quando o curso NÃO é seu: escrever "de você" em cada linha própria seria ruído numa lista onde a maioria costuma ser sua. */ .curso-item-dono { margin-inline-start: auto; flex: 0 0 auto; font-size: 10.5px; color: var(--texto-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 16ch; } /* CONTINUAR EDITANDO — o unico dos quatro cujo rotulo tem tamanho variavel. O nome do curso e uma segunda linha, menor: na mesma linha ele empurraria o verbo para fora em nomes como "curso-braelea-22-potencia e energia em corrente alternada". */ .bv-continuar { text-align: start; } .bv-continuar-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; } .bv-continuar-texto b { font-weight: 600; font-size: 11.5px; color: var(--acento); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* AS CORES DA ABA, no dialogo de criar trilha. Seis quadrados, e nao um ` em 09/09/2026. Tema se escolhe OLHANDO: uma lista suspensa oferecia três nomes que não descrevem tela nenhuma, e a única forma de comparar era escolher, esperar a prévia recarregar, e escolher de novo. A DECISÃO [D9] do guia da extração previu esta tela e a adiou de propósito — o `preview.png` já viajava no pacote do tema desde a fase 1, e quem o exibe viria num pedido próprio, para não fazer a entrega dos templates depender de uma tela nova ficar boa. */ /* Na barra o botão tem o mesmo teto de largura que o `