/* * A CASCA, segunda folha: o MENU LATERAL — o rail, a trilha das etapas, o avatar e o menu do * usuário. A primeira folha (`casca.css`) tem as variáveis, o `[hidden]` e a barra de cima. * * Nasceu da divisão de 25/10/2026 (etapa 9 de `docs/propostas/divisao-dos-arquivos.md`): a * `casca.css` tinha 679 linhas, na faixa de aviso da régua. As regras vieram sem mudar uma * linha, e na MESMA ORDEM da cascata: toda tela liga esta folha logo depois da `casca.css`, na * mesma linha, e as duas juntas são o arquivo de antes. Quem cobra isso é * `tests/test_toda_tela_veste_a_casca.py`. As variáveis que estas regras usam são declaradas * na `casca.css` — a casca continua se bastando, só que em duas folhas. */ .rail button.rail-ativo { background: rgba(255,101,1,.16); color: #fff; } .rail button.rail-ativo svg { color: var(--orange); } /* itens que dependem de um projeto aberto ficam apagados e sem clique */ .rail button.rail-off { opacity: .34; cursor: not-allowed; } .rail button.rail-off:hover:not(:disabled) { background: none; } /* Andamento no próprio menu, na mesma linguagem da trilha da Visão geral: disco verde com ✓ no que está pronto, disco laranja no que está em curso. Saber onde o projeto parou sem abrir tela nenhuma. */ /* -------------------------------------------- trilha de etapas no menu O menu não é uma lista com selos: é uma SEQUÊNCIA, e agora ela aparece. Um fio liga as etapas e se preenche conforme o trabalho anda. A cor mudou por medição, não por gosto: o ✓ usava `--good var(--good)`, que é calibrado para texto escuro sobre BRANCO. Sobre o navy ele apaga — mesmo matiz, sem luminosidade. Aqui vale a família clara (var(--good-claro)), com halo, que é o que o padrão manda usar em painel escuro. */ .rail button.etapa-passo { position: relative; } /* O fio, atrás do nó. 3px e opaco: com 2px translúcidos ele lia como risco de fundo, e não como ligação entre as etapas. */ .rail button.etapa-passo::before { content: ''; position: absolute; right: 17px; top: -2px; bottom: -2px; width: 3px; border-radius: 2px; background: rgba(255,255,255,.10); z-index: 0; } .rail button.etapa-passo.fio-feito::before { background: var(--good-claro); opacity: .75; } .rail button.etapa-passo.passo-primeiro::before { top: 50%; } .rail button.etapa-passo.passo-ultimo::before { bottom: 50%; } /* O nó. 20px, com anel de fundo navy separando-o do fio — sem esse anel o disco encosta na linha e os dois viram um borrão só. */ .rail button.etapa-passo::after { content: ''; position: absolute; right: 8.5px; top: 50%; transform: translateY(-50%); /* `border-box` não é detalhe: sem ele a borda SOMA por fora, e o nó em curso — que tem borda mais grossa — ficava com 26px externos contra 24 dos concluídos. O Henrique viu como "laranja fora de proporção", e era isso: ele era mesmo 2px maior. Com border-box todos medem 22, qualquer que seja a espessura da borda. */ box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; z-index: 1; background: var(--navy); box-shadow: 0 0 0 3px var(--navy); border: 2px solid rgba(255,255,255,.20); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; transition: background-color var(--t), border-color var(--t); } /* Concluída: disco verde claro e ✓ BRANCO de traço grosso. O ✓ era verde escuro sobre verde claro, e a 10px isso não se lê — some no próprio disco. */ .rail button.rail-ok.etapa-passo::after { background-color: var(--good-claro); border-color: var(--good-claro); filter: drop-shadow(0 0 6px rgba(46,224,138,.5)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* Em curso: alvo laranja. A borda era de 5px e o nó PESAVA mais que os discos verdes — mesma caixa, peso visual diferente, e o olho lê isso como "maior". Com 3,5px a área pintada fica equivalente à do disco cheio, e o halo baixa de 7 para 6px, o mesmo dos outros. */ .rail button.rail-agora.etapa-passo::after { background-color: var(--navy); border-color: var(--orange); border-width: 4px; filter: drop-shadow(0 0 6px rgba(255,101,1,.6)); } /* Pendente: anel vazado, mais visível que antes. Uma etapa que ainda não chegou precisa aparecer na trilha; invisível, a sequência parece acabar. */ .rail button.etapa-passo:not(.rail-ok):not(.rail-agora)::after { border-color: rgba(255,255,255,.28); } /* Retraído, a trilha encosta no ícone em vez de ficar na margem do rótulo. */ .rail:not(.aberto) button.etapa-passo::after { right: 5px; } .rail:not(.aberto) button.etapa-passo::before { right: 13.5px; } /* ---------------------------------------------------------- rail de navegação */ .rail { background: var(--navy); height: calc(100vh - 60px); overflow: hidden auto; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; } .sh-rail-grupo, .sh-rail-baixo { display: flex; flex-direction: column; gap: 2px; } .sh-rail-baixo { margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); } /* A VERSAO PUBLICADA, no pe do menu — item 407, 12/09/2026. Discreta de proposito: quem trabalha nao olha para ela, e quem esta em duvida sabe onde achar. `margin-top: 0` porque o `auto` do grupo acima ja empurrou tudo para o pe — repetir aqui criaria uma segunda mola e separaria a linha do bloco a que ela pertence. Fonte tabular: o commit e hexadecimal e a data tem digitos, e numero que dança de largura entre publicacoes chama atencao a toa. */ .sh-rail-versao { margin-top: 0; padding: 6px 10px 0; font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: rgba(255,255,255,.34); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } .sh-rail-versao:hover { color: rgba(255,255,255,.62); } /* Menu RECOLHIDO (66px): a linha nao cabe e sairia cortada no meio de um hexadecimal, que e pior que nao mostrar. O numero volta quando o menu abre. */ .rail:not(.aberto) .sh-rail-versao { display: none; } .rail button { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: var(--tinta-esc-2); cursor: pointer; padding: 10px; border-radius: 12px; font: inherit; transition: background var(--t), color var(--t); } /* O `:not(:disabled)` aqui não é firula: sem ele esta regra empata em especificidade com a genérica `button:hover:not(:disabled)`, que vem depois no arquivo e vence — pintando o item de branco sobre o navy e apagando o texto. */ .rail button:hover:not(:disabled) { background: rgba(255,255,255,.09); color: #fff; border-color: transparent; } .rail button:active { transform: translateY(1px); } .rail button svg { width: 22px; height: 22px; flex: none; stroke-width: 1.7; } .rail button > span:not(.avatar) { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-align: left; } /* ABERTO: ícone e rótulo encostados à ESQUERDA, e isto precisa estar ESCRITO. Ele viu em 10/08/2026, olhando o Visualizador: *"o menu lateral do Visualizador não é o mesmo do painel, veja, ele está centralizado"*. Estava, e a causa é o tipo de defeito que só aparece quando a mesma folha é usada em duas páginas diferentes. Esta regra NÃO EXISTIA. O estado aberto dependia do valor **padrão** do navegador (`justify-content: normal`), e valor padrão é o que a página em volta pode mudar sem saber que mudou: - no `/app`, nada mexe em `button` genérico -> ficava `normal`, à esquerda; - no `/3d`, a folha da própria página declara `justify-content: center` no `button` para os botões dela, DEPOIS da casca -> os itens do menu centralizavam junto. Medido nas duas telas, com o menu aberto: mesma largura (214 px), mesmo `padding-left` (10 px), mesmo x — e `justify-content` `normal` de um lado, `center` do outro. A casca parecia igual em tudo o que ela declarava, e diferia justamente no que ela calava. **A lição, e ela vale para o resto desta folha:** componente compartilhado não pode herdar do padrão do navegador aquilo que define a aparência dele. O que não está escrito aqui é decidido pela página que hospeda — e são duas páginas. */ .rail.aberto button { justify-content: flex-start; } /* retraído: só ícones, centralizados; rótulos somem */ .rail:not(.aberto) button { justify-content: center; padding: 10px 0; } .rail:not(.aberto) button > span:not(.avatar) { display: none; } .rail .sh-sep { height: 1px; background: rgba(255,255,255,.12); margin: 8px 10px; flex: none; } /* O CABEÇALHO DE GRUPO do menu VPF — item 310, aprovado por print em 21/08. A letra laranja é o método da mentoria (V · P · F); o grupo é ABERTO por construção — isto é um título, não um botão, e não colapsa nada. */ .rail .sh-grupo { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px 10px 2px; color: #8fa0bd; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .rail .sh-grupo b { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0; background: linear-gradient(150deg, var(--orange), #ffa524); } .rail .sh-grupo i { flex: 1; border-top: 1px solid rgba(255,255,255,.14); } /* Recolhido, sobra só a letra — centrada como os ícones dos botões. */ .rail:not(.aberto) .sh-grupo { justify-content: center; padding: 10px 0 2px; } .rail:not(.aberto) .sh-grupo span, .rail:not(.aberto) .sh-grupo i { display: none; } /* ---------------------------------------------- o menu na tela BAIXA (item 162) **O menu não cabia na tela do notebook dele, e isso é medido.** A janela útil ali é de 738 px (1080 a 125% de zoom, menos a barra de tarefas e o cromo do Chrome); o menu tem 678 px e o conteúdo pedia 747. Configurações — o último item — terminava em y=797, 59 px abaixo da dobra. O `overflow: auto` acima faz a régua rolar, e é por isso que ninguém tinha visto: não some, esconde. **Trinta e um daqueles pixels já faltavam antes de hoje**, com 15 itens e nenhum risco. Os outros 38 são meus: cada linha divisória custa 19 px (1 de traço e 18 de margem), e eu pus duas. Não dá para pôr as três camadas na tela e fingir que o espaço apareceu. Então a régua encolhe QUANDO A JANELA É BAIXA, e só aí. Na tela externa dele — 922 px — nada disto vale, e o menu continua com a folga de sempre. O corte em 860 px fica no meio das duas, longe de ambas: não é um valor que uma janela redimensionada tropece. Encolher é preferível a rolar porque **o pé do menu é justamente o que não pode sumir**: Ajuda e Configurações são a saída de quem está perdido, e quem está perdido não rola um menu para procurá-las. **O `height: auto` é a linha que faz o resto funcionar, e eu levei duas medições para enxergar isso.** A altura de um item do menu NÃO vem do recheio daqui: vem da regra `height: 38px` de `button, a.btn` do `index.html`, que é a base de botão de todo o produto e alcança estes também. Apertar o recheio de 10 para 6 px mudou a altura em zero — medido, 38 px antes e 38 px depois. Só depois de soltar a altura o recheio passa a decidir alguma coisa, e o item cai para 34. */ @media (max-height: 860px) { .rail { padding: 8px; } .rail button { height: auto; padding: 7px 10px; } .rail:not(.aberto) button { padding: 7px 0; } .rail button svg { width: 20px; height: 20px; } .rail .sh-sep { margin: 5px 10px; } .sh-rail-baixo { padding-top: 6px; } } /* Salvar e Cópia são AÇÃO, não etapa, e ganham o laranja da marca com halo — aceso, como letreiro. Era #ffc79e, um pêssego lavado que não é cor nenhuma da paleta. #ff6501 sobre o navy dá 5,60:1, acima do mínimo de leitura. O halo do ícone usa `currentColor`, que lê a propriedade `color` — por isso ele vem do próprio item e acompanha o estado sem repetir a cor. */ .rail button.acao { color: var(--orange); text-shadow: 0 0 9px rgba(255,101,1,.55); } .rail button.acao svg { filter: drop-shadow(0 0 5px currentColor); } /* Desativado não acende: letreiro apagado é o que diz que não dá para clicar. */ .rail button.acao:disabled { text-shadow: none; } .rail button.acao:disabled svg { filter: none; } .rail button.acao:hover:not(:disabled) { background: rgba(255,101,1,.16); color: #fff; } .sh-rail-toggle { color: #cdd8e6; margin-bottom: 4px; } /* ---- O RECOLHER FICA NA MESMA LINHA QUE PROJETOS — item 244, 17/08/2026. Ele mandou o print e o pedido: *"vi o ícone recolher na mesma linha que projetos, veja como fizemos em modelo"*. No painel Modelo o cabeçalho é título à esquerda e o botão à direita (`.cabPainel`, com `space-between`); aqui é a mesma ideia, com Projetos no papel do título. ## O buraco só existia com o menu ABERTO Medido: a fileira do ícone tem 38 px de altura e **174 px vazios à direita** do desenho com o menu aberto (214 px). Fechado o rail tem 66 px, a fileira tem 50 px úteis e o ícone fica centrado — não há buraco nenhum, e é justamente ali que se procura o "expandir". Daí a regra, e ela é uma linha de CSS: **aberto, o botão sai do fluxo e encosta à direita da primeira fileira; fechado, ele volta a ser a fileira de cima.** Projetos herda os 42 px que a fileira ocupava, e passa a ser a primeira coisa da tela. `position: absolute` e não `flex`: a alternativa seria envolver Projetos e o botão num `
`, e isso mudaria a marcação que o `_botoes()` gera para TODOS os itens — muito mais código para o mesmo pixel. O `rail` já é `position: relative`? Se não for, a linha abaixo garante. */ .rail { position: relative; } .rail.aberto .sh-rail-toggle { position: absolute; top: 10px; right: 8px; z-index: 2; width: 38px; height: 38px; padding: 0; margin: 0; justify-content: center; } /* Sem o botão no fluxo, o `gap`/margem que ele deixava some junto — e é o que faz Projetos subir para o topo em vez de ficar com um vão de 42 px por cima. */ .rail.aberto > .sh-rail-grupo { margin-top: 0; } /* AS QUATRO REGRAS DO ITEM DE CONTA NO MENU LATERAL SAIRAM em 17/08/2026, e elas estavam mortas desde 09/08 — quando ele apontou os dois menus com uma seta: *"esses menu estao repetidos, poderiam ficar so no canto superior direito"*. O ITEM foi removido naquele dia; o ESTILO ficou, sem casar com nada, por mais de uma semana. Quem as achou foi a guarda escrita hoje para outro defeito — o chip do usuario que perdeu o fundo. Ela procura regra que estiliza classe que ninguem escreve, e essa pergunta pega as duas coisas: renome pela metade e remocao pela metade. */ /* A FOTO DENTRO DO AVATAR. Esta e a regra que motivou o arquivo inteiro. Ela vivia solta no fim da folha do /app, longe das outras da casca, e o visualizador nunca a teve — com isso a foto do perfil era desenhada em 1080x1080 e vazava pelo menu inteiro. Medido: 30x30 no painel contra 1080x1080 no visualizador. Vale para o avatar do menu E para o do topo: os dois usam a mesma classe. */ .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* ---- O AVISO DE VERSAO VELHA — item 237, 17/08/2026. Cartao FLUTUANTE, e nao barra no topo: barra empurraria a tela toda para baixo justamente quando a pessoa esta no meio de algo, e mexer no layout dela para dizer "recarregue" seria um segundo susto. Flutuante nao move nada. Mora na casca porque as DUAS telas o usam — o painel e o visualizador —, e um dos tres relatos falsos de 17/08 veio do 3D. `z-index` alto de proposito: ele tem de aparecer sobre o dialogo modal tambem. Uma tela velha com um dialogo aberto e exatamente o caso em que o aviso mais importa. */ #avisoDeVersao { position: fixed; right: 18px; bottom: 18px; z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: 420px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: 11px; box-shadow: 0 6px 24px rgba(19,31,51,.18); font: 400 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); } #avisoDeVersao .sh-av-ico { color: var(--orange); flex: none; display: flex; } #avisoDeVersao .sh-av-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #avisoDeVersao .sh-av-txt b { font-size: 13.5px; color: var(--ink); } #avisoDeVersao .sh-av-txt span { font-size: 12px; color: var(--ink-3); } #avisoDeVersao .sh-av-btn { flex: none; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--orange); color: #fff; font: 600 13px/1 inherit; cursor: pointer; } #avisoDeVersao .sh-av-btn:hover { filter: brightness(1.07); } #avisoDeVersao .sh-av-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } /* NA TELA ESTREITA ele ocupa a largura, menos as margens: 420px num viewport de 375 sairia pela direita, e a tela do notebook dele tem 1536 mas o celular do aluno nao. */ @media (max-width: 520px) { #avisoDeVersao { left: 12px; right: 12px; max-width: none; } } /* ---- O MENU SUSPENSO DO USUARIO — veio do `index.html` do painel em 17/08/2026 (item 253), junto com a funcao que o monta. Enquanto o estilo morava la, o menu do 3D sairia sem cor, sem borda e sem sombra — visivel, e obviamente quebrado. */ .usuario-menu { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 30; min-width: 236px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-2); } .usuario-menu .cabeca { padding: 7px 10px 9px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); } .usuario-menu .cabeca b { display: block; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usuario-menu .cabeca small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .usuario-menu button { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink-2); text-align: left; cursor: pointer; transition: var(--t); } .usuario-menu button:hover { background: var(--surface-2); color: var(--ink); } .usuario-menu button svg { flex: none; opacity: .7; } /* Sair é a última linha e a única com cor: encerra sessão, não é navegação. */ .usuario-menu .sair { color: var(--bad); } .usuario-menu .sair:hover { background: var(--bad-bg); color: var(--bad); }