/* =========================================================================== tema.css — sistema visual do Super Questões --------------------------------------------------------------------------- Extraído de docs/design/prototipo_resultados.html (protótipo aprovado pelo usuário). O protótipo tinha tudo inline; aqui vive a versão compartilhada, para o padrão não virar cópia divergente em cada template. Duas dimensões INDEPENDENTES, ambas aplicadas como classe no : idade → (padrão: adolescente, 11-17) | .crianca (6-10) luz → (padrão: claro) | .escuro As classes ficam no , e não no , para o base_tema.html poder defini-las antes da primeira pintura (sem piscar branco no modo escuro). ⚠️ As cores foram deliberadamente baixadas de luminosidade para o fundo claro: saturação alta vibra e cansa em texto longo — e aqui o aluno lê enunciado de questão. Não "melhore" a saturação sem testar leitura. PALETA (revisada em 06/ago/2026, a pedido do dono): sóbria e pastel, ancorada no VERMELHO — terracota como marca, vinho para erro, e o resto em tons terrosos dessaturados. O azul não foi eliminado: ficou como --sq-c2 (ardósia), usado com parcimônia, para quando faz falta um tom frio. A escala anterior (violeta/ciano saturados) vibrava demais para leitura longa. Claro e escuro são obrigatórios em toda tela — o alternador vive no base_tema.html e a preferência fica no localStorage. ⚠️ Tudo é prefixado com sq- / --sq- de propósito. Este arquivo pode acabar convivendo com o Bootstrap das telas antigas, e .card/.btn colidiriam. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------------- */ /* ADOLESCENTE · CLARO (padrão) */ :root { --sq-bg: #faf7f6; --sq-card: #ffffff; --sq-stroke: rgba(94, 62, 62, .13); --sq-txt: #2b2226; --sq-txt-dim: #7b6c70; --sq-c1: #a35c52; /* terracota — a marca */ --sq-c2: #6c8496; /* ardósia — o azul, discreto */ --sq-c3: #6d8c6a; /* sálvia — sucesso */ --sq-c4: #b03a4e; /* vinho — erro e alerta */ --sq-c5: #b8874e; /* areia — atenção */ --sq-orb: .14; --sq-r: 16px; --sq-f-hero: clamp(2.2rem, 6vw, 3.2rem); --sq-f-num: clamp(1.5rem, 4vw, 2.1rem); --sq-shadow: 0 10px 28px -18px rgba(80, 45, 45, .30); --sq-font: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ADOLESCENTE · ESCURO */ :root.escuro { --sq-bg: #191416; --sq-card: rgba(255, 255, 255, .05); --sq-stroke: rgba(255, 255, 255, .11); --sq-txt: #efe7e7; --sq-txt-dim: #a99ba0; --sq-c1: #d08a7e; --sq-c2: #8ea6b8; --sq-c3: #93b58e; --sq-c4: #dd7385; --sq-c5: #d5a874; --sq-orb: .20; --sq-shadow: 0 18px 44px -20px rgba(0, 0, 0, .75); } /* CRIANÇA · CLARO — mesma família, um pouco mais quente e macia */ :root.crianca { --sq-bg: #fdf6f2; --sq-card: #ffffff; --sq-stroke: rgba(120, 72, 60, .13); --sq-txt: #33262a; --sq-txt-dim: #877077; --sq-c1: #c2705e; /* coral suave */ --sq-c2: #7593a3; --sq-c3: #7ba173; --sq-c4: #c25467; --sq-c5: #c9974f; --sq-orb: .16; --sq-r: 24px; --sq-f-hero: clamp(2.5rem, 7vw, 3.7rem); --sq-shadow: 0 8px 0 -5px rgba(120, 70, 60, .06), 0 20px 38px -24px rgba(194, 112, 94, .40); } /* CRIANÇA · ESCURO */ :root.crianca.escuro { --sq-bg: #201a1c; --sq-card: rgba(255, 255, 255, .06); --sq-stroke: rgba(255, 255, 255, .12); --sq-txt: #f6ebe8; --sq-txt-dim: #bda8ad; --sq-c1: #e09a86; --sq-c2: #92aebd; --sq-c3: #9cbf95; --sq-c4: #e5808f; --sq-c5: #dfb079; --sq-orb: .24; --sq-shadow: 0 18px 42px -20px rgba(0, 0, 0, .70); } /* Gradiente da casa: SEMPRE dentro da família do vermelho. Existe como token para nenhuma tela precisar inventar o seu — foi assim que a base acumulou 132 cores fixas só em create_test_pai.html. */ :root, :root.escuro, :root.crianca, :root.crianca.escuro { --sq-grad: linear-gradient(135deg, var(--sq-c1), var(--sq-c4)); } /* --------------------------------------------------------------------------- 2. Página --------------------------------------------------------------------------- */ .sq-tema * { box-sizing: border-box; margin: 0; padding: 0; } body.sq-tema { background: var(--sq-bg); color: var(--sq-txt); font-family: var(--sq-font); min-height: 100vh; padding: 22px 16px 70px; overflow-x: hidden; transition: background .45s, color .45s; } .sq-orb { position: fixed; border-radius: 50%; filter: blur(78px); opacity: var(--sq-orb); pointer-events: none; z-index: 0; animation: sq-flutuar 17s ease-in-out infinite; transition: opacity .45s; } .sq-orb.a { width: 42vw; height: 42vw; background: var(--sq-c1); top: -13vw; left: -9vw; } .sq-orb.b { width: 36vw; height: 36vw; background: var(--sq-c2); bottom: -13vw; right: -7vw; animation-delay: -6s; } .sq-orb.c { width: 24vw; height: 24vw; background: var(--sq-c4); top: 45%; right: 24%; animation-delay: -11s; } @keyframes sq-flutuar { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2.5vw, -3vw) scale(1.12); } } .sq-wrap { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; } /* --------------------------------------------------------------------------- 3. Barra de topo (identidade + controles) --------------------------------------------------------------------------- */ .sq-topo { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; } .sq-marca { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1rem; color: var(--sq-txt); text-decoration: none; } .sq-marca .ico { font-size: 1.25rem; } .sq-topo-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sq-pill { background: var(--sq-card); border: 1px solid var(--sq-stroke); color: var(--sq-txt); padding: 9px 16px; border-radius: 100px; font-size: .84rem; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--sq-shadow); transition: transform .25s, background .25s; } .sq-pill:hover { transform: translateY(-2px); } /* --------------------------------------------------------------------------- 4. Card — base de quase tudo --------------------------------------------------------------------------- */ .sq-card { background: var(--sq-card); border: 1px solid var(--sq-stroke); border-radius: var(--sq-r); padding: 26px; box-shadow: var(--sq-shadow); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s, background .45s; } .sq-card.tilt:hover { transform: perspective(900px) rotateX(3.5deg) rotateY(-4deg) translateY(-6px); } /* ⚠️ NUNCA use .tilt em cartão que tenha botão ou link dentro. O transform SOBE o cartão 6px: ele sai de baixo do cursor, o :hover cai, o cartão volta ao lugar, o cursor está em cima de novo, o :hover volta… e assim indefinidamente. O usuário vê o cursor "tremendo bem rápido" e o clique nunca chega ao botão — foi exatamente o que aconteceu em 06/ago/2026 nas telas de crianças e de simulados, e nenhum teste automatizado pegou, porque teste clica direto no elemento sem depender do mouse parado em cima. A regra abaixo é a rede de segurança: se alguém recolocar .tilt num cartão com controle dentro, o efeito simplesmente não se aplica. */ .sq-card.tilt:has(a, button, input, select):hover { transform: none; } /* Card "novidade": destaca dado que antes não aparecia na tela. */ .sq-novo { border: 1px dashed var(--sq-c2); position: relative; } .sq-novo .tag { position: absolute; top: -11px; left: 22px; background: var(--sq-c2); color: #fff; font-size: .65rem; font-weight: 900; letter-spacing: .09em; padding: 4px 12px; border-radius: 100px; } /* --------------------------------------------------------------------------- 5. Hero com anel de aproveitamento --------------------------------------------------------------------------- */ .sq-hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; margin-bottom: 16px; } .sq-hero h1 { font-size: clamp(1.35rem, 4vw, 1.95rem); font-weight: 800; margin-bottom: 6px; } .sq-hero .sub { color: var(--sq-txt-dim); font-size: .96rem; margin-bottom: 14px; } .sq-ring { position: relative; width: 190px; height: 190px; flex-shrink: 0; } .sq-ring svg { transform: rotate(-90deg); } .sq-ring .val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sq-ring .pct { font-size: var(--sq-f-hero); font-weight: 900; line-height: .9; color: var(--sq-c3); } .sq-ring .lbl { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sq-txt-dim); margin-top: 6px; font-weight: 700; } @media (max-width: 640px) { .sq-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; } } /* --------------------------------------------------------------------------- 6. Chips e selo --------------------------------------------------------------------------- */ .sq-chips { display: flex; gap: 8px; flex-wrap: wrap; } .sq-chip { background: var(--sq-bg); border: 1px solid var(--sq-stroke); padding: 6px 14px; border-radius: 100px; font-size: .82rem; font-weight: 600; } .sq-selo { display: inline-flex; align-items: center; gap: 8px; background: var(--sq-grad); color: #fff; padding: 9px 20px; border-radius: 100px; font-weight: 800; font-size: .93rem; margin-top: 14px; } @media (max-width: 640px) { .sq-chips { justify-content: center; } } /* --------------------------------------------------------------------------- 7. Tiles de contagem --------------------------------------------------------------------------- */ .sq-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 16px 0; } .sq-tile { padding: 22px; text-align: center; position: relative; overflow: hidden; } .sq-tile .ico { font-size: 1.7rem; margin-bottom: 8px; display: block; } .sq-tile .n { font-size: var(--sq-f-num); font-weight: 900; line-height: 1; } .sq-tile .t { font-size: .8rem; color: var(--sq-txt-dim); margin-top: 6px; font-weight: 600; } .sq-tile::after { content: ''; position: absolute; inset: auto -30% -62% -30%; height: 110px; border-radius: 50%; opacity: .20; filter: blur(30px); } .sq-tile.v1::after { background: var(--sq-c3); } .sq-tile.v2::after { background: var(--sq-c5); } .sq-tile.v3::after { background: var(--sq-c4); } .sq-tile.v1 .n { color: var(--sq-c3); } .sq-tile.v2 .n { color: var(--sq-c5); } .sq-tile.v3 .n { color: var(--sq-c4); } /* --------------------------------------------------------------------------- 8. Insights (pares rótulo/valor) --------------------------------------------------------------------------- */ .sq-ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-top: 6px; } .sq-ins .k { font-size: .72rem; color: var(--sq-txt-dim); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; } .sq-ins .v { font-size: 1.32rem; font-weight: 800; margin-top: 5px; } .sq-ins .v small { font-size: .84rem; color: var(--sq-txt-dim); font-weight: 600; } .sq-ins .v.sobe { color: var(--sq-c3); } .sq-ins .v.desce { color: var(--sq-c4); } /* --------------------------------------------------------------------------- 9. Título de seção --------------------------------------------------------------------------- */ .sq-sec { font-size: 1.08rem; font-weight: 800; margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; } .sq-sec::after { content: ''; flex: 1; height: 1px; background: var(--sq-stroke); } /* --------------------------------------------------------------------------- 10. Linha de questão --------------------------------------------------------------------------- */ .sq-q { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; margin-bottom: 10px; } /* No celular a terceira coluna (`auto`) não cabe: com dois ou três botões ela empurra o cartão para fora da tela, e como body.sq-tema tem overflow-x:hidden os botões somem SEM barra de rolagem para alcançá-los. Foi o que aconteceu em 06/ago/2026 — o dono não conseguia editar nem excluir criança nenhuma pelo telefone, e da mesa parecia tudo certo. Aqui os botões descem para uma linha própria, ocupando a largura toda. */ @media (max-width: 640px) { .sq-q { grid-template-columns: 44px 1fr; padding: 14px 16px; } .sq-q .num { width: 44px; height: 44px; font-size: 1rem; } .sq-q .dir { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } .sq-q .dir > * { flex: 1 1 auto; justify-content: center; } } .sq-q .num { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-weight: 900; font-size: 1.1rem; color: #fff; } .sq-q.ok .num { background: var(--sq-c3); } .sq-q.meio .num { background: var(--sq-c5); } .sq-q.erro .num { background: var(--sq-c4); } .sq-q .txt { font-size: .93rem; line-height: 1.45; } .sq-q .meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; } .sq-q .meta span { font-size: .7rem; padding: 3px 10px; border-radius: 100px; background: var(--sq-bg); border: 1px solid var(--sq-stroke); color: var(--sq-txt-dim); font-weight: 700; } .sq-q .dir { text-align: right; } .sq-q .dir .tempo { font-size: .78rem; color: var(--sq-txt-dim); font-weight: 700; } .sq-barra { width: 110px; height: 6px; background: var(--sq-stroke); border-radius: 10px; margin-top: 7px; overflow: hidden; } .sq-barra i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--sq-c5), var(--sq-c1)); } @media (max-width: 640px) { .sq-q { grid-template-columns: 44px 1fr; row-gap: 12px; } .sq-q .dir { grid-column: 1 / -1; justify-self: start; text-align: left; } } /* --------------------------------------------------------------------------- 11. Bloco de recomendação e botões --------------------------------------------------------------------------- */ .sq-reco { background: var(--sq-grad); color: #fff; border: none; margin-top: 16px; } .sq-reco h3 { font-size: 1.13rem; margin-bottom: 8px; font-weight: 800; } .sq-reco p { opacity: .96; line-height: 1.55; font-size: .94rem; } .sq-acoes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .sq-btn { padding: 13px 24px; border-radius: 100px; font-weight: 800; font-size: .9rem; font-family: inherit; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s; } .sq-btn.p { background: #fff; color: var(--sq-c1); } .sq-btn.s { background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255, 255, 255, .45); } .sq-btn:hover { transform: translateY(-2px); } /* --------------------------------------------------------------------------- 12. (o confete morava aqui — retirado a pedido do dono em 06/ago/2026) --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 12b. Espera honesta (tela de progresso) Enquanto a IA está "pensando" não existe progresso para medir: a resposta ainda não começou a chegar. Por isso a fase 1 NÃO tem barra nem anel — qualquer coisa deslizando ali seria mentira. Tem três pontos pulsando, que dizem "estou viva" sem afirmar quanto falta. --------------------------------------------------------------------------- */ .sq-pensando { display: flex; gap: 10px; justify-content: center; padding: 18px 0; } .sq-pensando i { width: 15px; height: 15px; border-radius: 50%; display: block; background: var(--sq-c1); animation: sq-pulsa 1.4s ease-in-out infinite; } .sq-pensando i:nth-child(2) { background: var(--sq-c2); animation-delay: .18s; } .sq-pensando i:nth-child(3) { background: var(--sq-c4); animation-delay: .36s; } @keyframes sq-pulsa { 0%, 80%, 100% { transform: scale(.55); opacity: .38; } 40% { transform: scale(1); opacity: 1; } } /* Cronômetro do tempo decorrido — número honesto, medido, não estimado. */ .sq-cron { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem; color: var(--sq-txt-dim); } .sq-fase { display: none; } .sq-fase.ativa { display: block; } /* --------------------------------------------------------------------------- 12c. Formulários --------------------------------------------------------------------------- */ .sq-form { display: grid; gap: 16px; } .sq-form.duplo { grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .sq-form.duplo { grid-template-columns: 1fr; } } .sq-campo { display: flex; flex-direction: column; gap: 6px; } .sq-campo label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sq-txt-dim); } .sq-campo input, .sq-campo select, .sq-campo textarea { background: var(--sq-bg); color: var(--sq-txt); border: 1px solid var(--sq-stroke); border-radius: 14px; padding: 13px 16px; font-size: .96rem; font-family: inherit; transition: border-color .2s, box-shadow .2s; width: 100%; } .sq-campo textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .sq-campo input:focus, .sq-campo select:focus, .sq-campo textarea:focus { outline: none; border-color: var(--sq-c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-c1) 22%, transparent); } .sq-campo .dica { font-size: .78rem; color: var(--sq-txt-dim); font-weight: 500; } .sq-campo.erro input { border-color: var(--sq-c4); } /* Linha de "quantidade de X" — rótulo à esquerda, campo numérico à direita. Substitui os cartões coloridos que a tela de criar simulado usava (um azul, um laranja, um roxo, todos fixos no HTML): a cor agora distingue por tom da MESMA família, não por matizes que brigam entre si. */ .sq-quant { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--sq-stroke); background: var(--sq-bg); } .sq-quant + .sq-quant { margin-top: 10px; } .sq-quant .marca { width: 6px; align-self: stretch; border-radius: 100px; background: var(--sq-c1); } .sq-quant.b .marca { background: var(--sq-c5); } .sq-quant.c .marca { background: var(--sq-c2); } .sq-quant .texto { flex: 1; } .sq-quant .texto strong { display: block; font-size: .95rem; font-weight: 700; } .sq-quant .texto small { color: var(--sq-txt-dim); font-size: .78rem; } .sq-quant input { width: 76px; text-align: center; font-weight: 800; font-size: 1.05rem; background: var(--sq-card); color: var(--sq-txt); border: 1px solid var(--sq-stroke); border-radius: 12px; padding: 10px 6px; font-family: inherit; } .sq-quant input:focus { outline: none; border-color: var(--sq-c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-c1) 22%, transparent); } /* Some com as setinhas do number: elas encolhem a área clicável e, num campo de 0 a 10, atrapalham mais do que ajudam. */ .sq-quant input::-webkit-outer-spin-button, .sq-quant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sq-quant input[type=number] { -moz-appearance: textfield; } /* --------------------------------------------------------------------------- Barra de progresso da geração --------------------------------------------------------------------------- Pedida pelo dono em 06/ago/2026 ("senti falta de uma barra, dessas que aparecem quando instalamos programas"). A tela tem duas fases e a barra respeita as duas SEM mentir: .indeterminada → a IA ainda está pensando. Não existe percentual real, então um bloco vai e volta: é o vocabulário universal de "trabalhando", e não afirma quanto falta. (sem a classe) → as questões começaram a sair. Aí sim a largura é real: questões prontas ÷ questões pedidas. --------------------------------------------------------------------------- */ .sq-progresso { height: 14px; border-radius: 100px; background: var(--sq-bg); border: 1px solid var(--sq-stroke); overflow: hidden; } .sq-progresso > i { display: block; height: 100%; width: 0; border-radius: 100px; background: var(--sq-grad); transition: width .6s ease; } .sq-progresso.indeterminada > i { width: 34%; animation: sq-vaivem 1.7s ease-in-out infinite; } @keyframes sq-vaivem { 0% { transform: translateX(-105%); } 100% { transform: translateX(300%); } } /* Quem pediu menos animação no sistema recebe uma barra parada e discreta em vez de nada — continua dizendo "estou trabalhando", sem movimento. */ @media (prefers-reduced-motion: reduce) { .sq-progresso.indeterminada > i { animation: none; width: 100%; opacity: .3; } } /* --------------------------------------------------------------------------- Painel de etapas da geração --------------------------------------------------------------------------- Pedido pelo dono em 06/ago/2026: "divida, como pensando, analisando, produzindo, cada uma com sua barra". Cada etapa tem um dos três estados — pendente, ativa, concluída — e SÓ ganha barra quem tem o que medir: · "escrevendo" tem número real (prontas ÷ pedidas) → barra determinada; · "pensando" não tem → barra indeterminada, o vaivém; · as instantâneas (preparar, conferir, salvar) não ganham barra nenhuma, porque uma barra que enche em 200ms é enfeite, não informação. --------------------------------------------------------------------------- */ .sq-etapas { display: grid; gap: 2px; } .sq-etapa { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--sq-stroke); } .sq-etapa:last-child { border-bottom: none; } .sq-etapa .marca { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 900; border: 2px solid var(--sq-stroke); color: var(--sq-txt-dim); background: var(--sq-bg); } .sq-etapa .nome { font-weight: 600; font-size: .95rem; color: var(--sq-txt-dim); } .sq-etapa .detalhe { font-size: .82rem; color: var(--sq-txt-dim); margin-top: 3px; } .sq-etapa .tempo { font-size: .8rem; color: var(--sq-txt-dim); font-variant-numeric: tabular-nums; padding-top: 2px; } /* ATIVA — a única que o olho deve procurar. */ .sq-etapa.ativa .marca { border-color: var(--sq-c1); color: var(--sq-c1); animation: sq-pulso 1.6s ease-in-out infinite; } .sq-etapa.ativa .nome { color: var(--sq-txt); font-weight: 800; } /* CONCLUÍDA — some do caminho, mas deixa o tempo que levou. */ .sq-etapa.feita .marca { border-color: var(--sq-c3); background: var(--sq-c3); color: #fff; } .sq-etapa.feita .nome { color: var(--sq-txt); } /* FALHOU */ .sq-etapa.falhou .marca { border-color: var(--sq-c4); background: var(--sq-c4); color: #fff; } .sq-etapa.falhou .nome { color: var(--sq-c4); font-weight: 800; } @keyframes sq-pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sq-c1) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sq-c1) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .sq-etapa.ativa .marca { animation: none; } } .sq-etapa .sq-progresso { margin-top: 8px; height: 10px; } @media (max-width: 560px) { .sq-etapa { grid-template-columns: 26px 1fr; } .sq-etapa .tempo { grid-column: 2; text-align: left; padding-top: 0; } } /* --------------------------------------------------------------------------- Leitura de questão (view_assessment_v5) --------------------------------------------------------------------------- A tela onde a criança de fato LÊ. Medidas escolhidas para leitura longa: corpo de 1.02rem, entrelinha 1.65 e largura de linha limitada por ch — texto que atravessa a tela inteira faz o olho perder a linha ao voltar. --------------------------------------------------------------------------- */ .sq-questao-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .sq-questao-num { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sq-grad); color: #fff; font-weight: 800; font-size: .92rem; } .sq-enunciado { font-size: 1.02rem; line-height: 1.65; max-width: 70ch; } .sq-enunciado p { margin-bottom: .8em; } .sq-enunciado p:last-child { margin-bottom: 0; } .sq-figura { margin: 16px 0; text-align: center; /* O SVG vem da geração com tamanho próprio; aqui só impedimos que estoure. */ } .sq-figura svg { max-width: 100%; height: auto; } .sq-alts { list-style: none; margin: 16px 0 0; max-width: 70ch; } .sq-alts li { padding: 11px 15px; margin-bottom: 8px; border: 1px solid var(--sq-stroke); border-radius: 12px; background: var(--sq-bg); line-height: 1.5; } .sq-alts li:last-child { margin-bottom: 0; } /* Resposta, explicação e tradução: escondidas até o aluno pedir. A borda lateral colorida diz qual é qual sem depender de ler o rótulo — por isso todo bloco novo de .sq-revela precisa da sua própria cor aqui, senão herda o verde da Resposta e os dois ficam indistinguíveis a olho nu. */ .sq-revela { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--sq-bg); border-left: 4px solid var(--sq-c3); max-width: 70ch; line-height: 1.6; } .sq-revela.explicacao { border-left-color: var(--sq-c5); } .sq-revela.traducao { border-left-color: var(--sq-c2); } .sq-revela strong { display: block; margin-bottom: 6px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sq-txt-dim); } /* --------------------------------------------------------------------------- Alternativas clicáveis (quiz) --------------------------------------------------------------------------- São