ser dimensionado por encolher-para-caber em vez de esticar na faixa. Ele então adotava o min-content da barra de abas e escapava da coluna, levando a página a rolar para os lados assim que o texto era ampliado. */ margin-inline: 0; } /* O rodapé segue a mesma largura centralizada das seções de cards. */ .app__main:has(.pagina--largura-total) > .rodape { max-inline-size: 75rem; margin-inline: auto; } .hero--largo { margin-block: 8px; } @media (min-width: 48em) { .hero__texto { padding: var(--esp-6); } .hero--largo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 34rem; } .hero--largo .hero__texto { padding: var(--esp-7); display: flex; flex-direction: column; justify-content: center; } /* A figura acompanha a altura do painel de texto em vez de impor proporção. */ .hero--largo .hero__figura { aspect-ratio: auto; } } /* Animações desligadas: preferência do sistema OU painel de preferências. A alternativa estática é a própria composição parada. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :root[data-sem-animacoes="on"] *, :root[data-sem-animacoes="on"] *::before, :root[data-sem-animacoes="on"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ---------- Container centralizado das seções ---------- */ /* As seções de cards ficam limitadas a ~1200px e centralizadas, enquanto o hero acima é full-bleed. */ .faixa-central { max-inline-size: 75rem; margin-inline: auto; } /* ============================================================ Páginas de documentação com abas (O projeto, Metodologia…) Componentes: .doc-abas, .nesta-pagina, .doc-trilha. ============================================================ */ /* Altura da barra grudada acima do conteúdo: no mobile é a topbar (4rem); no desktop a topbar some e a trilha assume, então é 0. Serve de referência para o sticky das abas e para o scroll-margin das âncoras. */ .pagina--doc { --doc-topo: 4rem; /* Reserva para quem navega SEM JavaScript. Com JS, main.js mede a barra de verdade e sobrescreve esta variável (a altura depende de quantas linhas os rótulos ocupam, o que muda com a largura da tela e com o tamanho de texto — não há como saber em CSS). O valor é deliberadamente GENEROSO: 5.5rem supunham rótulos de uma linha só e, medido, a barra já ocupava 121px com duas linhas — a barra grudada cobria o título ao pular por uma âncora do índice. Errar para mais só faz o título aparecer um pouco mais abaixo; errar para menos o esconde. */ --doc-abas-altura: 9rem; } @media (min-width: 64em) { .pagina--doc { --doc-topo: 0px; } } /* Página de documentação sem barra de abas (Assistente): não há barra grudada, então nada precisa ser descontado no sticky do "Nesta página" nem no scroll-margin das âncoras. */ .pagina--doc-sem-abas { --doc-abas-altura: 0px; } /* Referências não tem "Nesta página": sem a grade de duas colunas, a coluna de leitura fica centrada no lugar do recuo que as outras páginas de Fundamentos têm à esquerda. */ .pagina--referencias .doc__conteudo { margin-inline: auto; } /* A margem lateral vem do

(--margem-pagina); aqui só não pode ser reintroduzida. */ .doc { margin-inline: 0; } /* ---------- Barra de abas ---------- */ /* Trilho arredondado com a aba atual em pílula preenchida. Gruda no topo ao rolar, e só: altura, tipografia e sombra são as mesmas antes e depois de grudar — nada muda de tamanho embaixo do ponteiro de leitura. */ .doc-abas { position: sticky; /* +8px: a mesma folga das bordas do hero, para a pílula não encostar no topo da janela quando gruda. */ inset-block-start: calc(var(--doc-topo) + 8px); z-index: 15; margin-block: var(--esp-5) var(--esp-6); background: var(--cor-superficie-container-baixa); /* Pílula é a forma da FILA de abas do desktop. No mobile o mesmo trilho abre uma lista de cinco linhas, e um raio de 999px a transformava numa elipse gigante com as pontas cortando os rótulos. */ border-radius: var(--raio-xl); } /* A barra continua GRUDADA quando a lista abre. Chegou a sair do sticky nesse estado, para não cobrir o texto, mas o efeito era pior do que o problema: quem estivesse lendo no meio da página via a barra sumir do topo no clique e tinha de rolar tudo de volta para escolher a seção. Aberta ela cobre o conteúdo, como qualquer menu suspenso — o fundo é opaco, a altura tem teto de 60vh e escolher uma aba fecha a lista. */ @media (min-width: 48em) { .doc-abas { border-radius: var(--raio-pilula); } } /* ----- Mobile: disclosure (ver partials/doc-abas.php) ----- Até 48em a fila vira uma lista vertical que abre a partir de um resumo. Antes daqui ela era um trilho que rolava de lado e sangrava pelas margens da página; num celular, uma página de grupo com cinco recomendações mostrava duas. O resumo diz onde a pessoa está sem precisar abrir nada. */ .doc-abas__resumo { display: flex; align-items: center; gap: var(--esp-3); min-block-size: 3.5rem; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-xl); color: var(--cor-sobre-superficie); cursor: pointer; list-style: none; /* tira o triângulo do UA (Firefox) */ } /* WebKit/Blink pedem este pseudo-elemento à parte. */ .doc-abas__resumo::-webkit-details-marker { display: none; } .doc-abas__resumo:hover { background: var(--cor-superficie-container-alta); } .doc-abas__resumo:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; } .doc-abas__resumo-texto { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; } .doc-abas__resumo-rotulo { font: var(--tipo-rotulo); font-size: 0.8rem; color: var(--cor-sobre-superficie-variante); } .doc-abas__resumo-atual { font: var(--tipo-rotulo); font-weight: 700; overflow-wrap: anywhere; } .doc-abas__seta { flex-shrink: 0; margin-inline-start: auto; transition: rotate var(--duracao-curta) var(--movimento-padrao); } .doc-abas__sanfona[open] .doc-abas__seta { rotate: 180deg; } .doc-abas__lista { display: flex; flex-direction: column; margin: 0; padding: var(--esp-2); padding-block-start: 0; list-style: none; /* Grupo longo com o texto ampliado: a lista rola dentro de si em vez de empurrar o conteúdo da página para fora da tela. */ max-block-size: 60vh; overflow-y: auto; } .doc-abas__item { min-inline-size: 0; } /* ----- Desktop: a fila de pílulas de sempre ----- O resumo sai do layout E da árvore de acessibilidade (display:none), e o

, sempre aberto neste breakpoint, volta a ser só um contêiner. */ @media (min-width: 48em) { .doc-abas__resumo { display: none; } .doc-abas__lista { flex-direction: row; padding: 0; max-block-size: none; overflow-y: visible; } /* No desktop as abas dividem a largura em partes iguais (ver referência). */ .doc-abas__item { flex: 1 1 0; } } @media (prefers-reduced-motion: reduce) { .doc-abas__seta { transition: none; } } /* No mobile cada aba é uma linha da lista: alinhada ao início, como o texto ao redor, e na altura de item de lista do M3 — 5rem empilhados cinco vezes virariam uma parede. O desktop restaura a pílula alta logo abaixo. */ .doc-abas__link { display: flex; align-items: center; min-block-size: 3rem; padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-pilula); font: var(--tipo-rotulo); color: var(--cor-sobre-superficie-variante); text-decoration: none; transition: background-color 120ms var(--movimento-padrao); } @media (min-width: 48em) { .doc-abas__link { justify-content: center; /* Altura fixa da aba (folgada acima dos 44px que a CLAUDE.md §5 exige de alvo de toque). Se mudar, atualize --doc-abas-altura junto. */ min-block-size: 5rem; padding: 0 var(--esp-4); text-align: center; } } .doc-abas__link:hover { background: var(--cor-superficie-container-alta); } .doc-abas__link--atual { background: var(--cor-primaria); color: var(--cor-sobre-primaria); font-weight: 700; } .doc-abas__link--atual:hover { background: var(--cor-primaria); color: var(--cor-sobre-primaria); } /* ---------- Grade: conteúdo + "Nesta página" ---------- */ .doc__grade { display: grid; gap: var(--esp-6); /* Coluna única, mas travada em minmax(0,…): sem isso a coluna implícita vale "auto", cujo mínimo é o min-content da coluna — e a tabela de downloads tem min-inline-size própria (ela rola dentro do wrapper). A coluna crescia até caber a tabela inteira e levava a página junto: 386px de conteúdo numa tela de 360px. */ grid-template-columns: minmax(0, 1fr); } /* Item de grade nasce com min-width:auto, que o impede de encolher abaixo do próprio min-content — mesma correção já aplicada em .app__main. */ .doc__conteudo { min-inline-size: 0; } @media (min-width: 64em) { .doc__grade { /* minmax(0, 16rem) e não 16rem seco: com o texto ampliado, 16rem viram 384px e a coluna do "Nesta página" sozinha passava a ser mais larga que o espaço restante, empurrando a página inteira para fora da tela (rolagem horizontal — WCAG 1.4.10). Assim ela cede quando precisa. */ grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); margin-left: var(--doc-recuo-leitura); } } /* Foco programático (o JS foca aqui ao trocar de aba): sem anel visível, já que não é navegação por teclado do usuário. */ .doc__conteudo:focus:not(:focus-visible) { outline: none; } .doc__intro { font-size: 1.05em; color: var(--cor-sobre-superficie-variante); } .doc__topico { /* A barra de abas grudada não pode cobrir o título ao pular pela âncora. */ scroll-margin-block-start: calc( var(--doc-topo) + var(--doc-abas-altura) + var(--esp-4) ); margin-block-end: var(--esp-7); } #bibliografia .doc__topico-titulo { margin-block-end: var(--esp-3); margin-left: var(--doc-recuo-leitura); } /* Subtítulo (h3) dentro de um tópico — ex.: "Objetivo geral" / "Objetivos específicos" sob o h2 "Objetivos". */ .doc__subtitulo { font: var(--tipo-subtitulo); margin-block: var(--esp-5) var(--esp-2); } /* ---------- Citação recuada (blockquote) ---------- */ /* Citação formal de fonte legal/acadêmica, transcrita no corpo do texto. O recuo é a pista visual; o

+ garantem a semântica para tecnologia assistiva. */ .doc__citacao { margin: var(--esp-6) 0; padding-inline-start: var(--esp-4); } .doc__citacao blockquote { margin: 0; } .doc__citacao blockquote > p { color: var(--cor-sobre-superficie-variante); } .doc__citacao blockquote > p + p { margin-block-start: var(--esp-3); } .doc__citacao-fonte { display: block; margin-block-start: var(--esp-2); font: var(--tipo-rotulo); color: var(--cor-sobre-superficie-variante); } .doc__citacao-fonte cite { font-style: normal; } /* ---------- Lista de referências (página Referências) ---------- */ /* Bibliografia, legislações e diretrizes numa única lista alfabética. Sem marcador; recuo deslocado (hanging indent) faz o sobrenome de cada entrada começar na margem e as linhas seguintes recuarem — ajuda a varrer a lista. URLs longas quebram em vez de estourar a largura da coluna. */ .referencias { list-style: none; margin: var(--esp-5) 0 0; padding: 0; margin-left: var(--doc-recuo-leitura); max-inline-size: calc(75rem - 2rem); } .referencias__item { padding-inline-start: var(--esp-5); text-indent: calc(var(--esp-5) * -1); margin-block-end: var(--esp-4); color: var(--cor-sobre-superficie-variante); overflow-wrap: anywhere; } .referencias__item:last-child { margin-block-end: 0; } /* ---------- Quadro (tabela dentro do conteúdo) ---------- */ .doc__quadro { margin: var(--esp-6) 0; } /* Chamada para ação ao fim de um tópico (bloco 'botao' do doc). */ .doc__acao { margin-block-start: var(--esp-6); } .doc__quadro-titulo { font: var(--tipo-rotulo); color: var(--cor-sobre-superficie-variante); margin-block-end: var(--esp-3); } .doc__quadro-fonte { margin-block-start: var(--esp-3); color: var(--cor-sobre-superficie-variante); font: var(--tipo-rotulo); } /* Descrição textual do quadro — e a audiodescrição das figuras animadas, que usa a mesma peça: disponível a todos, aberta por padrão (o conteúdo é para leitura de todos, não só de tecnologia assistiva). O chevron torna evidente que dá para recolher. */ .doc__quadro-descricao, .doc__figura-descricao { margin-block-start: var(--esp-3); } .doc__quadro-descricao > summary, .doc__figura-descricao > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; gap: var(--esp-2); color: var(--cor-primaria); font: var(--tipo-rotulo); list-style: none; } .doc__quadro-descricao > summary::-webkit-details-marker, .doc__figura-descricao > summary::-webkit-details-marker { display: none; } .doc__quadro-descricao > summary::marker, .doc__figura-descricao > summary::marker { content: ""; } /* Chevron desenhado em CSS: aponta para cima quando aberta (clique recolhe), para baixo quando fechada (clique abre). */ .doc__quadro-descricao > summary::after, .doc__figura-descricao > summary::after { content: ""; inline-size: 0.5em; block-size: 0.5em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-135deg); transition: transform 150ms var(--movimento-padrao); } .doc__quadro-descricao:not([open]) > summary::after, .doc__figura-descricao:not([open]) > summary::after { transform: rotate(45deg); } .doc__quadro-descricao > p, .doc__figura-descricao > p { margin-block-start: var(--esp-2); color: var(--cor-sobre-superficie-variante); } /* ---------- Figura dentro do conteúdo ---------- */ /* Imagem sempre embaixo do texto a que se refere, nunca ao lado (CLAUDE.md §4). A legenda é visível para todo mundo, não só para leitor de tela. */ .doc__figura { margin: var(--esp-6) 0; } .doc__figura > img { inline-size: 100%; block-size: auto; border-radius: var(--raio-l); } /* Moldura do espaço de imagem ainda não produzida: tracejada, como .doc__placeholder, para não passar por imagem de verdade. */ .doc__figura-vazia { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--esp-5); border: 1px dashed var(--cor-contorno); border-radius: var(--raio-l); background: var(--cor-superficie-container-baixa); } .doc__figura-pendente { margin: 0; text-align: center; color: var(--cor-sobre-superficie-variante); font: var(--tipo-rotulo); } .doc__figura-legenda { margin-block-start: var(--esp-3); color: var(--cor-sobre-superficie-variante); font-size: 0.95em; } /* A legenda é texto, não imagem: sobrevive a "Ocultar imagens" junto com a moldura vazia, que some. */ :root[data-sem-imagens="on"] .doc__figura-vazia, :root[data-sem-imagens="on"] .doc__figura .figura-animada, :root[data-sem-imagens="on"] .doc__figura > img { display: none; } /* Espaço honesto de conteúdo ainda não produzido (ver CLAUDE.md §9). */ .doc__placeholder { padding: var(--esp-4) var(--esp-5); border: 1px dashed var(--cor-contorno); border-radius: var(--raio-l); color: var(--cor-sobre-superficie-variante); } /* ---------- "Nesta página" ---------- */ .nesta-pagina { position: sticky; inset-block-start: calc( var(--doc-topo) + var(--doc-abas-altura) + var(--esp-4) ); align-self: start; max-block-size: calc(100vh - var(--doc-abas-altura) - var(--esp-6)); overflow-y: auto; } /* Índice duplicado dos headings da página: no mobile sai de cena para não empurrar o conteúdo (os tópicos seguem todos acessíveis na página). */ @media (max-width: 63.99em) { .nesta-pagina { display: none; } } .nesta-pagina__rotulo { font: var(--tipo-rotulo); color: var(--cor-sobre-superficie-variante); margin: 0 0 var(--esp-2); } .nesta-pagina__titulo { font: var(--tipo-headline); margin: 0 0 var(--esp-4); } .nesta-pagina__lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .nesta-pagina__link { display: flex; align-items: center; min-block-size: 44px; padding: var(--esp-2) var(--esp-3); border: 1px solid transparent; border-radius: var(--raio-m); color: var(--cor-sobre-superficie-variante); text-decoration: none; } .nesta-pagina__link:hover { background: var(--cor-superficie-container); color: var(--cor-sobre-superficie); } /* Tópico em leitura: borda + peso (nunca só cor — CLAUDE.md §11). */ .nesta-pagina__link--atual { border-color: var(--cor-contorno); color: var(--cor-sobre-superficie); font-weight: 700; } /* ---------- Trilha Anterior/Próximo ---------- */ /* Largura fixa de 576px, centralizada (decisão da Thalia, 17/07/2026: bater com o rodapé na janela dela). Em rem, e não em px, para acompanhar o controle de tamanho de fonte do painel de preferências. A barra de abas acima segue na largura cheia do .doc, de propósito. */ .doc-trilha { display: grid; gap: var(--esp-4); margin-block: var(--esp-8) var(--esp-6); max-width: 75rem; margin-inline: auto; } @media (min-width: 48em) { .doc-trilha { /* minmax(0, 1fr) e não 1fr: `1fr` é minmax(AUTO, 1fr), que proíbe a coluna de encolher abaixo do min-content do título. Com espaçamento entre letras ligado, os títulos longos das recomendações passavam a empurrar o card para fora da tela. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Sozinho na trilha (primeira seção), o "Próximo" fica na coluna direita. */ .doc-trilha__item--proximo { grid-column: 2; } } .doc-trilha__item { display: grid; gap: var(--esp-2); align-content: start; padding: var(--esp-5); background: var(--cor-superficie-container-baixa); border-radius: var(--raio-xl); color: var(--cor-sobre-superficie); text-decoration: none; } .doc-trilha__item:hover { background: var(--cor-superficie-container); } .doc-trilha__rotulo { display: inline-flex; align-items: center; gap: var(--esp-2); font: var(--tipo-rotulo); color: var(--cor-sobre-superficie-variante); } .doc-trilha__titulo { font: var(--tipo-headline); /* Títulos de recomendação são longos e ganham largura com o espaçamento entre letras; sem isto uma palavra só estoura o card. */ overflow-wrap: anywhere; hyphens: auto; } /* ---------- Seção "card grande + grade de cards" ---------- */ .secao-cards { margin-block-start: var(--esp-7); } .secao-cards__titulo { margin-block-end: var(--esp-4); } /* Card grande em destaque: link de bloco (imagem à esquerda, texto à direita no desktop; empilhado no mobile). A imagem é flush com a borda do card — o padding vive no __corpo (ver component-ref.png). auto-fit colapsa a segunda coluna quando não há figura (ou quando ela some com a preferência "Ocultar imagens"), evitando meia-coluna vazia. */ .card-destaque { display: grid; /* min() evita que a coluna force 20rem e estoure o reflow em 320px. */ grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); background: var(--cor-superficie-container-baixa); border-radius: var(--raio-xl); overflow: hidden; color: inherit; text-decoration: none; } .card-destaque:hover { background: var(--cor-superficie-container-alta); } /* Flush com a borda do card, mas arredondada nos quatro cantos: nos cantos externos o raio coincide com o do card; nos internos o fundo do card aparece na curva. */ .card-destaque__figura { aspect-ratio: 16 / 9; background: var(--cor-superficie-container-alta); border-radius: var(--raio-xl); overflow: hidden; } .card-destaque__corpo { display: flex; flex-direction: column; justify-content: center; gap: var(--esp-2); padding: var(--esp-5); } @media (min-width: 48em) { .card-destaque__corpo { padding: var(--esp-6); } /* A figura acompanha a altura do card em vez de impor proporção. */ .card-destaque__figura { aspect-ratio: auto; min-block-size: 16rem; } } .card-destaque__titulo { margin: 0; font: var(--tipo-headline); } .card-destaque__texto { color: var(--cor-sobre-superficie-variante); } .card-destaque__chamada { display: inline-flex; align-items: center; gap: var(--esp-2); margin-block-start: var(--esp-2); font: var(--tipo-rotulo); font-size: 1rem; color: var(--cor-link); } /* Grade de cards abaixo do destaque. */ .cards-grade { display: grid; gap: var(--esp-4); list-style: none; margin: var(--esp-4) 0 0; padding: 0; /* minmax(0,…) e não "1fr" seco: o mínimo de 1fr é o min-content da coluna, e com o texto em "Máximo" o título de um card inflava a coluna para além da tela. Vale para todas as grades de card do site. */ grid-template-columns: minmax(0, 1fr); } @media (min-width: 40em) { .cards-grade--2col, .cards-grade--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .cards-grade--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Imagem flush com a borda do card: o padding vive no __corpo. */ .card { display: flex; flex-direction: column; block-size: 100%; background: var(--cor-superficie-container-baixa); border-radius: var(--raio-l); overflow: hidden; color: inherit; text-decoration: none; } .card:hover { background: var(--cor-superficie-container-alta); } .card__figura { aspect-ratio: 16 / 10; background: var(--cor-superficie-container-alta); border-radius: var(--raio-l); overflow: hidden; } .card__corpo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-5); min-inline-size: 0; } /* Quando a autora inserir nos espaços de mídia. */ .hero__figura > img, .card-destaque__figura > img, .card__figura > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .card__eyebrow { font: var(--tipo-rotulo); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cor-sobre-superficie-variante); } .card__titulo { display: flex; align-items: baseline; gap: var(--esp-2); margin: 0; font: var(--tipo-titulo); min-inline-size: 0; /* Títulos de recomendação são longos e engordam com o espaçamento entre letras. A hifenização quebra em sílaba (o dá o dicionário certo); o anywhere fica como último recurso. */ overflow-wrap: anywhere; hyphens: auto; } .card__numero { font: var(--tipo-display); font-size: 1.6rem; color: var(--cor-primaria); } .card__texto { color: var(--cor-sobre-superficie-variante); } /* ---------- Início: próximos passos (proximo.png) ---------- */ .secao-proximos { margin-block-start: var(--esp-7); } .secao-proximos__titulo { margin-block-end: var(--esp-4); } .proximos { display: grid; gap: var(--esp-4); list-style: none; margin: 0; padding: 0; grid-template-columns: minmax(0, 1fr); } /* 40em, como as demais grades de card do site. */ @media (min-width: 40em) { .proximos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .proximos__item { display: flex; flex-direction: column; gap: var(--esp-2); block-size: 100%; padding: var(--esp-5); background: var(--cor-superficie-container-baixa); border-radius: var(--raio-l); color: inherit; text-decoration: none; } .proximos__item:hover { background: var(--cor-superficie-container-alta); } .proximos__titulo-card { margin: 0; font: var(--tipo-titulo); } .proximos__texto { color: var(--cor-sobre-superficie-variante); } .proximos__chamada { display: inline-flex; align-items: center; gap: var(--esp-2); margin-block-start: auto; padding-block-start: var(--esp-2); font: var(--tipo-rotulo); font-size: 1rem; color: var(--cor-link); } /* ============================================================ Visão geral das recomendações Hero de índice (recomedacoes-hero-ref.png) + uma seção por recomendação com figura grudada (recomendacoes-texto-ref.png). ============================================================ */ /* ---------- Hero de índice ---------- */ /* Um único bloco arredondado: título e subtítulo centralizados no topo, cards de grupo dentro do mesmo bloco. Diferente do hero de Início, que é partido em duas colunas (texto + figura). */ .hero--indice { margin-block: 8px; margin-inline: 0; /* Recuo lateral igual ao da margem da página (ver .hero__texto). */ padding: var(--esp-7) var(--margem-pagina) var(--esp-6); background: var(--cor-primaria-container); color: var(--cor-sobre-primaria-container); border-radius: var(--raio-xl); gap: var(--esp-6); } .hero--indice.hero--recomendacoes { min-height: 80dvh; display: flex; flex-direction: column; justify-content: center; } .hero--indice.hero--recomendacoes .card__corpo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-5); height: 100%; } .hero--indice.hero--recomendacoes .hero__texto { max-inline-size: 66rem; } .hero--indice.hero--recomendacoes .hero__subtitulo { margin-inline: 0; max-inline-size: 100%; } .hero--indice .hero__texto { padding: 0; background: none; text-align: center; margin-inline: auto; } .hero--indice .hero__subtitulo { color: inherit; margin-inline: auto; margin-block-end: 0; } .hero__cards { display: grid; gap: var(--esp-4); list-style: none; margin: 0; padding: 0; grid-template-columns: minmax(0, 1fr); max-inline-size: 66rem; inline-size: 100%; margin-inline: auto; } /* Mesmo ritmo de .cards-grade: 1 → 2 em 40em → 3 em 64em. Ir direto a três colunas em 48em dava faixas de ~230px, e títulos como "Recomendações para o(a) professor(a)" quebravam em cinco linhas. */ @media (min-width: 40em) { .hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 48em) { .hero--indice { padding: var(--esp-8) var(--esp-7) var(--esp-7); } } @media (min-width: 64em) { .hero__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Card do hero: superfície clara sobre o bloco colorido, como no M3. */ .card--hero { background: var(--cor-superficie); color: var(--cor-sobre-superficie); } .card--hero:hover { background: var(--cor-superficie-container-baixa); } /* ---------- Seções: texto rolando, figura grudada ---------- */ /* As 12 correm em sequência única: o agrupamento vive no hero e no rótulo de cada seção, não em blocos que partam o corpo da página. As âncoras #grupo-… (cards do hero, trilha lateral) ficam na primeira seção do grupo. */ .rec-secoes { margin-inline: 0; } .rec-secao { display: grid; gap: var(--esp-5); align-items: start; padding-block: var(--esp-6); /* A âncora vinda do hero/trilha não pode encostar no topo da janela. */ scroll-margin-block-start: 8px; } /* Sem recuo próprio: o texto começa na margem da página, e a figura acima dele tem exatamente a mesma largura. */ .rec-secao__texto { min-inline-size: 0; } .rec-secao__eyebrow { font: var(--tipo-rotulo); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cor-sobre-superficie-variante); margin: 0; } .rec-secao__titulo { margin-block: var(--esp-2) 0; font: var(--tipo-headline); } .rec-secao__recomendacao { max-inline-size: 38rem; margin-block: var(--esp-4) 0; } .rec-secao__acoes { margin-block: var(--esp-5) 0; } /* Espaço de imagem. Desde 29/08/2026 traz o número da recomendação em braille, animado (components/braille-numero.css) — antes era um placeholder empilhado, e daí vinha o display:flex que saiu junto com ele: tanto o SVG quanto um preenchem a figura inteira, e centralizar era o que atrapalhava os dois. */ .rec-secao__figura { position: relative; aspect-ratio: 4 / 3; background: var(--cor-superficie-container-alta); border-radius: var(--raio-xl); overflow: hidden; } .rec-secao__figura > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* Empilhado (mobile e janelas baixas), a figura vem ANTES do texto — a ordem que a autora usa no material impresso: imagem em cima, escrita embaixo, as duas na mesma largura. No HTML ela continua depois, para o leitor de tela receber título e recomendação primeiro; inverter aqui não custa nada porque a figura é decorativa (aria-hidden) e não recebe foco. A partir de 64em o arranjo vira duas colunas e a ordem do documento volta a valer. */ @media (max-width: 63.99em), (max-height: 33.99rem) { .rec-secao__figura { order: -1; } } /* Duas colunas com a figura grudada só onde há altura e largura para isso. Cada seção tem a altura da janela: o texto fica centrado à esquerda e a figura gruda enquanto a seção passa, cedendo lugar à da seção seguinte. É sticky puro — sem JS e sem sequestrar o scroll. Abaixo deste ponto (e em janelas baixas) a seção vira empilhamento simples: figura, depois texto. */ @media (min-width: 64em) and (min-height: 34rem) { .rec-secao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-block: 0; } .rec-secao__texto { display: flex; flex-direction: column; justify-content: center; min-block-size: calc(100vh - 16px); padding-block: var(--esp-6); /* Folga contra a trilha/flyout à esquerda: o texto não tem cartão em volta, então a margem tem que vir daqui. */ padding-inline: var(--esp-7) var(--esp-6); } .rec-secao__figura { position: sticky; inset-block-start: 8px; aspect-ratio: auto; block-size: calc(100vh - 16px); } /* ---------- Modo painel (com JS) ---------- */ /* O painel da direita fica parado: o JS move as doze figuras para dentro dele e alterna qual está visível conforme a seção cruza a metade da tela. Sem JS, este bloco nunca entra e vale o sticky por seção acima — a diferença é só a emenda entre uma figura e a seguinte. O scroll continua sendo o do navegador: nada aqui o intercepta. */ .rec-secoes[data-modo="painel"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; } /* Só o texto sobrou nas seções; a figura vive no painel. */ .rec-secoes[data-modo="painel"] .rec-secao { display: block; } .rec-secoes[data-modo="painel"] .rec-painel { position: sticky; inset-block-start: 8px; block-size: calc(100vh - 16px); } /* As doze empilhadas no mesmo lugar; só a ativa aparece. A troca é só de opacidade — de propósito: qualquer estado intermediário aqui é uma opacidade, nunca uma figura presa visível por causa de uma transição que não terminou. Com "Pausar animações" (ou prefers-reduced-motion), a regra global zera a duração e a troca vira instantânea. */ .rec-secoes[data-modo="painel"] .rec-secao__figura { position: absolute; inset: 0; block-size: auto; aspect-ratio: auto; opacity: 0; transition: opacity var(--duracao-curta) ease; } .rec-secoes[data-modo="painel"] .rec-secao__figura[data-ativo="sim"] { opacity: 1; } } /* Sem JS o painel fica vazio — não deve ocupar coluna nenhuma. */ .rec-painel:empty { display: none; } /* ---------- Página de grupo (uma aba por recomendação) ---------- O h1 é o nome do grupo, no hero. A barra de abas já diz qual recomendação está aberta, por isso o conteúdo começa direto no primeiro sub-tópico. */ .rec-texto__destaque { margin: var(--esp-4) 0 0; padding: var(--esp-5) var(--esp-6); background: var(--cor-primaria-container); color: var(--cor-sobre-primaria-container); border-inline-start: 6px solid var(--cor-primaria); border-radius: var(--raio-l); font-size: 1.15em; } .rec-texto__destaque p { margin: 0; } /* ---------- Fazer / não fazer ---------- */ .praticas { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .praticas__coluna { padding: var(--esp-4) var(--esp-5); border-radius: var(--raio-l); border: 1px solid var(--cor-contorno-variante); } .praticas__coluna h3 { display: flex; align-items: center; gap: var(--esp-2); margin-block-start: 0; } .praticas__coluna--fazer { background: var(--cor-sucesso-container); } .praticas__coluna--fazer h3, .icone-ok { color: var(--cor-sucesso); } .praticas__coluna--nao-fazer { background: var(--cor-erro-container); } .praticas__coluna--nao-fazer h3, .icone-nao { color: var(--cor-erro); } .praticas__coluna ul { margin: 0; padding-inline-start: var(--esp-5); } .praticas__coluna li { margin-block-end: var(--esp-2); } .praticas__coluna p { margin: 0; } /* ---------- Exemplos visuais (antes/depois) ---------- */ .exemplo__par { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); /* As três faixas de cada lado (imagem · rótulo · textos) para o subgrid abaixo alinhar. Ver .exemplo-visual. */ grid-template-rows: auto auto auto; margin-block-start: var(--esp-4); } .exemplo-visual { margin: 0; border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-l); overflow: hidden; } /* Faça e Não faça lado a lado só ensinam se der para comparar linha a linha: as duas imagens terminam na mesma altura e as duas faixas começam na mesma altura, como no M3 (recomendacoes-exemplos-ref.png). Sem subgrid cada lado fica com a sua altura — a comparação continua legível, só menos exata. */ @supports (grid-template-rows: subgrid) { .exemplo-visual { display: grid; grid-row: span 3; grid-template-rows: subgrid; } } .exemplo-visual__rotulo { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); font: var(--tipo-subtitulo); } .exemplo-visual--dont .exemplo-visual__rotulo { background: var(--cor-erro-container); color: var(--cor-erro); } .exemplo-visual--do .exemplo-visual__rotulo { background: var(--cor-sucesso-container); color: var(--cor-sucesso); } .exemplo-visual__simulacao { padding: var(--esp-4); background: var(--cor-superficie-container); } .exemplo-visual__textos { padding: var(--esp-3) var(--esp-4) var(--esp-4); } .exemplo-visual__subtitulo { font: var(--tipo-rotulo); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-sobre-superficie-variante); margin: var(--esp-3) 0 var(--esp-1); } .exemplo-visual__textos p { margin: 0 0 var(--esp-2); } /* Simulação de slide — os estilos "inacessíveis" são deliberados: demonstram a barreira dentro de um exemplo rotulado e descrito. */ .ex-slide { border-radius: var(--raio-s); padding: var(--esp-4) var(--esp-5); min-block-size: 11rem; border: 1px solid var(--cor-contorno-variante); } .ex-slide--neutro { background: #ffffff; color: #1d1b20; } .ex-slide--neutro .ex-slide__titulo { font-weight: 700; font-size: 1.05rem; margin: 0 0 var(--esp-2); } .ex-slide--neutro .ex-slide__linha { margin: 0 0 var(--esp-1); font-size: 0.95rem; } .ex-slide--inacessivel { background: #ffffff; color: #a8a8a8; font-family: Georgia, "Times New Roman", serif; } .ex-slide--inacessivel .ex-slide__titulo { font-size: 0.9rem; font-weight: 400; margin: 0 0 var(--esp-1); } .ex-slide--inacessivel .ex-slide__linha { font-size: 0.72rem; line-height: 1.15; text-align: justify; margin: 0; } .ex-slide--acessivel { background: #fffde9; color: #131313; } .ex-slide--acessivel .ex-slide__titulo { font-size: 1.35rem; font-weight: 700; margin: 0 0 var(--esp-3); } .ex-slide--acessivel .ex-slide__linha { font-size: 1.05rem; line-height: 1.5; margin: 0 0 var(--esp-2); max-inline-size: 39ch; } /* Acessível em fundo escuro: amarelo/branco sobre preto — combinações de "altíssimo desempenho" de Arditi. Usado quando a descrição do exemplo pede contraste invertido (recs. 01, 03, 05, 09). */ .ex-slide--acessivel-escuro { background: #101010; color: #ffe14d; } .ex-slide--acessivel-escuro .ex-slide__titulo { font-size: 1.35rem; font-weight: 700; color: #ffffff; margin: 0 0 var(--esp-3); } .ex-slide--acessivel-escuro .ex-slide__linha { font-size: 1.05rem; line-height: 1.5; margin: 0 0 var(--esp-2); max-inline-size: 39ch; } /* Vibração óptica: vermelho sobre verde, serifado, justificado e apertado — a barreira exata descrita na rec. 09. */ .ex-slide--vibra { background: #1f7a34; color: #e02424; font-family: Georgia, "Times New Roman", serif; } .ex-slide--vibra .ex-slide__titulo { font-size: 0.95rem; font-weight: 400; margin: 0 0 var(--esp-1); } .ex-slide--vibra .ex-slide__linha { font-size: 0.75rem; line-height: 1.15; text-align: justify; margin: 0; } /* Post-it: vermelho sobre amarelo, cursiva (rec. 05). */ .ex-slide--postit { background: #ffe873; color: #d01e1e; font-family: "Segoe Script", "Comic Sans MS", cursive; min-block-size: 8rem; } .ex-slide--postit .ex-slide__titulo { font-size: 1.2rem; font-weight: 700; margin: 0 0 var(--esp-2); } .ex-slide--postit .ex-slide__linha { font-size: 1rem; line-height: 1.3; margin: 0 0 var(--esp-1); } /* Anotação "à caneta vermelha": manuscrito vermelho sobre papel branco, cor como único diferenciador (rec. 07). */ .ex-slide--manuscrito { background: #ffffff; color: #d01e1e; font-family: "Segoe Script", "Comic Sans MS", cursive; } .ex-slide--manuscrito .ex-slide__titulo { font-size: 1.05rem; font-weight: 400; color: #1d1b20; margin: 0 0 var(--esp-2); } .ex-slide--manuscrito .ex-slide__linha { font-size: 1rem; line-height: 1.4; margin: 0 0 var(--esp-1); } /* Simulação de lista de arquivos */ .ex-arquivos { background: #ffffff; color: #1d1b20; border-radius: var(--raio-s); padding: var(--esp-4); border: 1px solid var(--cor-contorno-variante); } .ex-arquivos__titulo { font-weight: 700; margin: 0 0 var(--esp-3); } .ex-arquivos__item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); margin: 0 0 var(--esp-2); font-size: 0.95rem; } .ex-arquivos__nome { font-family: var(--fonte-mono); font-size: 0.9em; } .ex-arquivos__detalhe { color: #49454f; font-size: 0.85em; } /* Simulação de gráfico de barras */ .ex-grafico { background: #ffffff; color: #1d1b20; border-radius: var(--raio-s); padding: var(--esp-4); border: 1px solid var(--cor-contorno-variante); } .ex-grafico__titulo { font-weight: 700; margin: 0 0 var(--esp-3); } .ex-grafico__linha { display: flex; align-items: center; gap: var(--esp-3); margin-block-end: var(--esp-2); } .ex-grafico__label { min-inline-size: 3rem; font-size: 0.9rem; } .ex-grafico__barra { display: block; block-size: 1.4rem; background: #4f378b; border-radius: 0 var(--raio-xs) var(--raio-xs) 0; max-inline-size: calc(100% - 4rem); } .ex-grafico__legenda { margin: var(--esp-3) 0 0; padding: var(--esp-3); background: #f3edf7; border-radius: var(--raio-s); font-size: 0.92rem; color: #1d1b20; } /* Simulação de planilha densa — o exagero de colunas e o corpo minúsculo são deliberados: demonstram a barreira descrita na rec. 04. */ .ex-tabela { background: #ffffff; color: #1d1b20; border-radius: var(--raio-s); padding: var(--esp-4); border: 1px solid var(--cor-contorno-variante); } .ex-tabela__titulo { font-weight: 700; margin: 0 0 var(--esp-3); font-size: 0.9rem; } .ex-tabela__grade { inline-size: 100%; border-collapse: collapse; font-size: 0.62rem; table-layout: fixed; } .ex-tabela__grade th, .ex-tabela__grade td { border: 1px solid #cac4d0; padding: 2px 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ex-tabela__grade th { background: #f3edf7; font-weight: 700; } /* ---------- Metodologia ---------- */ .estagio__numero { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: var(--cor-primaria); color: var(--cor-sobre-primaria); font-size: 1.1rem; margin-inline-end: var(--esp-2); vertical-align: middle; } .participantes { list-style: none; padding: 0; } .participantes__item { padding: var(--esp-3) var(--esp-4); border-block-end: 1px solid var(--cor-contorno-variante); } /* ---------- Assistente ---------- */ /* Subtítulo (h3) dentro de um tópico de documentação — usado em "O que é o assistente" e "Limites e cuidados". Mesmo teto de largura dos parágrafos. */ .doc__subtitulo { font: var(--tipo-subtitulo); margin: var(--esp-5) 0 var(--esp-2); } .doc__lista { padding-inline-start: var(--esp-5); } .doc__lista li { margin-block-end: var(--esp-2); } .passos { padding-inline-start: var(--esp-5); } .passos__item { margin-block-end: var(--esp-5); } /* Ilustração de cada passo: decorativa (aria-hidden), construída só com CSS e os ícones do próprio site, sempre EMBAIXO do texto do passo (CLAUDE.md §4). Cores só por token, para acompanhar tema e modos de cor. A legenda visível descreve a cena — e permanece quando "Ocultar imagens" esconde a cena. */ .passo-figura { margin: var(--esp-3) 0 0; max-inline-size: 28rem; } .ilus { display: grid; /* Sem o minmax(0,…) a coluna implícita cresce até o min-content dos filhos — e .ilus__campo-texto é uma linha de mono com white-space: nowrap, que não tem min-content pequeno. Em 360px isso jogava a ilustração 200px para fora da tela em vez de truncar o texto, como a elipse manda. */ grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); justify-items: start; padding: var(--esp-4); background: var(--cor-superficie-container); border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-m); } /* "Folha" com linhas de texto simuladas (o bloco do prompt em miniatura). */ .ilus__folha { display: grid; gap: var(--esp-2); inline-size: 100%; padding: var(--esp-3); background: var(--cor-superficie); border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-s); } .ilus__linha { display: inline-block; block-size: 0.5rem; border-radius: var(--raio-pilula); background: var(--cor-contorno-variante); } /* Botão simulado — parece o "Copiar prompt" real, mas não é interativo. */ .ilus__botao { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-4); background: var(--cor-primaria); color: var(--cor-sobre-primaria); border-radius: var(--raio-pilula); font: var(--tipo-rotulo); } /* Campo de mensagem simulado de um assistente (pílula + botão de enviar). */ .ilus__campo { display: flex; align-items: center; gap: var(--esp-3); inline-size: 100%; padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-contorno); border-radius: var(--raio-pilula); } .ilus__campo-texto { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--fonte-mono); font-size: 0.8rem; color: var(--cor-sobre-superficie-variante); } .ilus__enviar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; inline-size: 2rem; block-size: 2rem; background: var(--cor-primaria); color: var(--cor-sobre-primaria); border-radius: 50%; } /* Balão de resposta simulado: linhas de diagnóstico com ✓/✗ (os mesmos ícones dos exemplos "Faça / Não faça" — nunca só a cor diferencia). */ .ilus__balao { inline-size: 100%; padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-m) var(--raio-m) var(--raio-m) var(--raio-xs); } .ilus__balao-item { display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-2); } .ilus__balao-item:last-child { margin-block-end: 0; } .ilus__balao-item .ilus__linha { flex-shrink: 1; } .passo-figura__legenda { margin-block-start: var(--esp-2); font: var(--tipo-rotulo); color: var(--cor-sobre-superficie-variante); } /* ---------- Veja um exemplo (transcrição da conversa real) ---------- */ .dialogo { display: grid; gap: var(--esp-5); margin-block-start: var(--esp-4); } .dialogo__rotulo { font: var(--tipo-rotulo); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-sobre-superficie-variante); margin: 0 0 var(--esp-2); } .dialogo__figura { margin: var(--esp-3) 0 0; } .dialogo__slide { max-inline-size: 26rem; } .dialogo__resposta { margin: 0; padding: var(--esp-4); background: var(--cor-superficie-container-baixa); border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-l) var(--raio-l) var(--raio-l) var(--raio-xs); } .dialogo__resposta p { margin: 0 0 var(--esp-3); } .dialogo__resposta p:last-child { margin-block-end: 0; } /* Subtítulos DA RESPOSTA CITADA: parágrafos com estilo, não headings — a hierarquia da página não muda por causa de uma citação. */ .dialogo__sub { font: var(--tipo-subtitulo); } .dialogo__corte { color: var(--cor-sobre-superficie-variante); } .dialogo__lista { margin: 0 0 var(--esp-3); padding-inline-start: var(--esp-5); } .dialogo__lista li { margin-block-end: var(--esp-2); } /* ---------- Mensagens de tarefa ---------- */ .mensagens { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); } .mensagem { border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-l); padding: var(--esp-4); } .mensagem__cabecalho { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); margin-block-end: var(--esp-3); } .mensagem__titulo { font: var(--tipo-subtitulo); margin: 0; } /* Mesma família do bloco do prompt, em escala menor; o trecho entre colchetes é para a pessoa completar, então quebra de linha é bem-vinda. */ .mensagem__texto { margin: 0; padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie-container); border-radius: var(--raio-s); font-family: var(--fonte-mono); font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; } /* Referência ABNT copiável (Materiais): mesmo bloco das mensagens de tarefa, mas em fonte de texto — é prosa acadêmica, não código. */ .mensagem__texto--citacao { font-family: var(--fonte-base); font-size: 1rem; } .nota { padding: var(--esp-4); background: var(--cor-superficie-container); border-radius: var(--raio-m); } /* Cartões de texto do Assistente e do Materiais: a folga interna de --esp-5 custa 48px de largura, e no estreito ela sai do conteúdo. Em 360px a linha de texto ia a ~280px; devolver esses 16px de cada lado é a diferença entre caber e não caber. A folga cheia volta a partir de 48em. */ @media (min-width: 48em) { .mensagem, .nota { padding: var(--esp-4) var(--esp-5); } .dialogo__resposta { padding: var(--esp-4) var(--esp-5); } } .prompt__cabecalho { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); } .prompt__aviso { min-block-size: 1.5rem; font: var(--tipo-rotulo); color: var(--cor-sucesso); } /* Bloco do prompt. No estreito, o padding de --esp-5 e o corpo de 0.9rem deixavam ~30 caracteres por linha numa tela de 360px, e o teto fixo de 32rem ocupava quase toda a altura útil — uma caixa rolante dentro de uma página rolante. Daí o teto em vh e a folga menor abaixo de 48em. */ .prompt { padding: var(--esp-4); background: var(--cor-superficie-container); border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-l); font-family: var(--fonte-mono); font-size: 0.85rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; max-block-size: min(32rem, 65vh); overflow-y: auto; } @media (min-width: 48em) { .prompt { padding: var(--esp-5); font-size: 0.9rem; } } /* ---------- Tabelas (padrão "Resources" do M3 — ver modelo-tabela-ref.png) ---------- */ /* Contêiner arredondado com contorno; o mesmo scroll horizontal quando estreito. O raio recorta os cantos do fundo do cabeçalho. A tabela continua sendo uma de verdade em qualquer largura: virar cards no estreito exigiria display:block, que derruba os papéis de tabela nos leitores de tela — justamente onde a relação linha/coluna é o que dá sentido ao dado (formato × indicado para × ação). Sombras de rolagem: as duas primeiras camadas são "capas" opacas presas às bordas (background-attachment: local) e as duas últimas, as sombras — que ficam escondidas atrás das capas enquanto não há conteúdo cortado daquele lado. É o único aviso de que a tabela rola; sem ele, em 360px a coluna de ações simplesmente não existe para quem não tentar arrastar. */ .tabela-scroll { overflow-x: auto; border: 1px solid var(--cor-contorno-variante); border-radius: var(--raio-l); background: linear-gradient(to right, var(--cor-superficie) 30%, transparent) 0 0 / 2.5rem 100% no-repeat local, linear-gradient(to left, var(--cor-superficie) 30%, transparent) 100% 0 / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.16), transparent) 0 0 / 1rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) 100% 0 / 1rem 100% no-repeat scroll; } /* 24rem cabe em 384px: numa tela de 360px a tabela ainda rola, mas só um pouco. Com os 32rem de antes, quase metade dela ficava fora da vista. */ .tabela { border-collapse: collapse; inline-size: 100%; min-inline-size: 24rem; } .tabela th, .tabela td { padding: var(--esp-3) var(--esp-4); text-align: start; vertical-align: top; } @media (min-width: 48em) { .tabela { min-inline-size: 32rem; } .tabela th, .tabela td { padding: var(--esp-4) var(--esp-5); } } /* Divisórias como border-block-START: a última linha não deixa linha sobrando junto ao contêiner e, sob um rótulo com rowspan, a divisória aparece só nas colunas não mescladas — a célula agrupada fica um bloco contínuo, como no modelo M3. */ .tabela tbody th, .tabela tbody td { border-block-start: 1px solid var(--cor-contorno-variante); } /* Cabeçalho tonalizado, como no modelo. */ .tabela thead th { font: var(--tipo-rotulo); color: var(--cor-sobre-superficie-variante); background: var(--cor-superficie-container-baixa); } /* Primeira coluna (rótulo de linha): mesmo peso do corpo, como a coluna "Type" do modelo — a semântica de cabeçalho fica no scope, não no negrito. */ .tabela tbody th { font-weight: 400; color: var(--cor-sobre-superficie); } /* ---------- Tabela de assistentes ---------- */ /* Célula com botão de copiar + link de abrir. Empilha no estreito para os dois alvos manterem 44x44px sem se espremerem (CLAUDE.md §5). */ .tabela__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); } .link-externo { display: inline-flex; align-items: center; gap: var(--esp-2); min-block-size: 44px; color: var(--cor-primaria); } .chip--testado { background: var(--cor-primaria-container); color: var(--cor-sobre-primaria-container); border-color: transparent; } /* ---------- Créditos ---------- */ .creditos { list-style: none; padding: 0; } .creditos__item { display: flex; flex-direction: column; padding: var(--esp-3) var(--esp-4); border-block-end: 1px solid var(--cor-contorno-variante); } .creditos__item span { color: var(--cor-sobre-superficie-variante); } /* ---------- Stack de acessibilidade: abas fixas à direita ---------- */ /* Duas abas iguais empilhadas na borda direita (convenção de recursos de acessibilidade): Recursos assistivos e Libras. Só o ícone fica à mostra; hover/foco revelam o rótulo. O nome acessível independe disso — o rótulo nunca sai da árvore de acessibilidade, é só clipado. O empilhamento vem do container, não de coordenadas por botão: antes o gatilho de recursos era posicionado em calc(50% - 6.5rem) para ficar "acima do VLibras", um alinhamento que dependia de o CDN não mudar a altura do botão dele. */ .a11y-stack { position: fixed; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); z-index: 90; /* abaixo da busca (92) e da gaveta; diálogos ficam acima */ display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } /* As duas abas do stack. .recursos-gatilho é nosso