/* Zero DP — sistema visual (regras em docs/design.md; vitrine em /dev/componentes).
Escuro por padrão, vinho/rubi + dourado. Cartões bem redondos com borda fina, uma superfície um tom acima do
fundo; botões gordinhos com a borda de baixo mais escura, que afunda no toque; chips em pílula; barras de
progresso redondas; ícones de linha (img/icones.svg). Detalhe de Direito com parcimônia: o § de marca d'água e os
rabiscos bem apagados de balança, martelo e livro no cartão de destaque.
Letras (OFL, em /fonts com a licença junto): Lexend em título, botão e número; Nunito Sans no texto de
interface; Literata só no texto longo jurídico (caderno passado a limpo, resumo, lei seca, termos).
O que NÃO entra: degradê chamativo, vidro fosco, brilho neon, traço tremido, cantos tortos, peça girada.
Vermelho de erro vem sempre com ícone (o vinho da marca é parecido): .erro-campo, .aviso.ruim, .etiqueta.erro,
.alerta.erro e .btn.perigo ganham o ícone sozinhos quando quem escreveu a tela não pôs um.
Ponte: todo nome de token e de classe dos visuais anteriores (o caderno desenhado à mão, o Fécler de antes)
continua aqui com o sentido equivalente no visual novo (--traco = a linha que se vê; --ouro = o dourado;
--moldura = moldura redonda reta; .faixa = selo dourado; .lista-linhas = lista em cartão; .orbe = ícone numa
bolinha...). Assim as telas antigas mudam de jeito sem mudar de código. Tela nova usa os nomes da seção
"Tokens" do docs/design.md; os nomes marcados "ponte" aqui não entram em tela nova.
Tema: sem atributo ou data-tema="escuro" = escuro; data-tema="claro" = claro; data-tema="auto" segue o aparelho
(vale em qualquer elemento: um pedaço da página pode forçar o seu). Quem escolhe é o js/tema.js.
Celular primeiro: campo com fonte >= 16px (sem zoom no iPhone), alvo de toque >= 44px, hover só com mouse,
foco sempre visível, respeita prefers-reduced-motion e prefers-reduced-transparency. */
/* ===== letras (OFL, servidas pelo próprio site; licenças em /fonts/*-OFL.txt) =====
Lexend e Nunito Sans variáveis (400–800, só o recorte latino); Literata variável (400–600). */
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-400-800.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('../fonts/NunitoSans-400-800.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('../fonts/Literata-400-600.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
/* ===== tokens que não mudam com o tema ===== */
:root {
/* dourado: igual nos dois temas, sempre com a letra escura em cima */
--ouro: #F0B429;
--ouro-forte: #F7C344;
--ouro-baixo: #B7791F; /* a borda de baixo do botão dourado; contorno do que é dourado */
--sobre-ouro: #2A1400;
--sobre-ouro-2: #5A3A08; /* texto de apoio em cima do dourado (7:1) */
--sobre-vinho: #FFFFFF;
--papel-fixo: #FFFFFF; /* branco que não escurece: QR do Pix, arte impressa */
--atencao: #F0B429; /* atenção = dourado */
/* cor por disciplina (bolinha, lateral, capa): o forte é igual nos dois temas e leva letra escura */
--gold: #F0B429;
--pink: #FF9EB5;
--sky: #8FD0FF;
--mint: #7FDCA6;
--lilac: #C4B0FF;
--violeta: #C4B0FF; /* ponte */
--ambar: #F0B429; /* ponte */
/* letras */
--fonte-titulo: 'Lexend', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--fonte-texto: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--fonte-leitura: 'Literata', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
--fonte-caderno: var(--fonte-leitura);
--fonte-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--tam-legenda: 12.5px;
--tam-pequeno: 14px;
--tam-texto: 16px;
--tam-leitura: 18px;
--tam-titulo-3: 20px;
--tam-titulo-2: clamp(24px, 5vw, 32px);
--tam-titulo-1: clamp(30px, 7.4vw, 48px);
/* espaço (escala de 4) */
--esp-1: 4px;
--esp-2: 8px;
--esp-3: 12px;
--esp-4: 16px;
--esp-5: 20px;
--esp-6: 24px;
--esp-7: 32px;
--esp-8: 40px;
--esp-9: 56px;
--esp-10: 80px;
/* cantos */
--raio-1: 8px;
--raio-2: 12px;
--raio-3: 16px;
--raio-4: 20px;
--raio-5: 24px;
--raio-cartao: 24px;
--raio-btn: 16px;
--raio-pilula: 999px;
--raio-desenho: 20px; /* ponte: o canto da --moldura */
/* linha: fina. --bw na peça, --bw-thick no destaque, --bw-fio no detalhe; --afunda é a borda de baixo do botão */
--bw: 1.5px;
--bw-thick: 2px;
--bw-fio: 1px;
--afunda: 4px;
/* movimento: curto e discreto */
--ease: cubic-bezier(.22, 1, .36, 1);
--bounce: cubic-bezier(.34, 1.3, .64, 1);
--mola: cubic-bezier(.3, 1.4, .5, 1);
--desfoque: 0px; /* ponte: não tem vidro fosco */
/* grade da página */
--wrap: 1120px;
--gutter: 28px;
/* marca-texto por cor (uma barra chapada e translúcida embaixo da palavra) */
--grifo-pink: linear-gradient(rgba(255, 158, 181, .42), rgba(255, 158, 181, .42));
--grifo-sky: linear-gradient(rgba(143, 208, 255, .42), rgba(143, 208, 255, .42));
--grifo-mint: linear-gradient(rgba(127, 220, 166, .42), rgba(127, 220, 166, .42));
--grifo-lilac: linear-gradient(rgba(196, 176, 255, .42), rgba(196, 176, 255, .42));
/* desenhos em data: usados como máscara (a cor vem do CSS de quem usa) */
--m-certinho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5 9.5-10'/%3E%3C/svg%3E");
--m-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 7.5v5.25'/%3E%3Cpath stroke-width='3' d='M12 16.4h.01'/%3E%3C/svg%3E");
--m-quadradinho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3C/svg%3E");
--m-quadradinho-marcado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3Cpath stroke-width='2.6' d='m9.75 15.5 3.5 3.5 7-7.75'/%3E%3C/svg%3E");
--m-setinha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h23M18.5 2.5 25 8l-6.5 5.5'/%3E%3C/svg%3E");
--m-fio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='10' viewBox='0 0 480 10' preserveAspectRatio='none'%3E%3Crect y='4' width='480' height='1.5'/%3E%3C/svg%3E");
--m-circulo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='13'/%3E%3C/svg%3E");
--m-oval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cellipse cx='100' cy='30' rx='97' ry='27' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--m-flash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m2 11 4-3M6.5 14.6l5-.4M.9 5.4l1.7-4.2'/%3E%3C/svg%3E");
--m-rabo-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M3 0h19l-1 5C16 11 10 19 4.5 28 6.5 19 7 11 6.5 5Z' fill='%23000'/%3E%3C/svg%3E");
--m-rabo-traco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 4.6C7 11 6.5 19 4.5 28 10 19 16 11 21 5'/%3E%3C/svg%3E");
--m-rabo-papel-dir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M25 0H6l1 5c5 6 11 14 16.5 23C21.5 19 21 11 21.5 5Z' fill='%23000'/%3E%3C/svg%3E");
--m-rabo-traco-dir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 4.6C21 11 21.5 19 23.5 28 18 19 12 11 7 5'/%3E%3C/svg%3E");
/* rabiscos de Direito do cartão de destaque (balança, livro e martelo), brancos e bem apagados em cima do vinho */
--destaque-rabisco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150' viewBox='0 0 260 150' fill='none' stroke='%23FFFFFF' stroke-opacity='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(22 16) rotate(-8) scale(2.3)' stroke-width='.7'%3E%3Cpath d='M12 3.75v16.5M7.5 20.25h9M5 7h14m-14 0-2.75 6.25c0 1.5 1.25 2.5 2.75 2.5s2.75-1 2.75-2.5Zm14 0-2.75 6.25c0 1.5 1.25 2.5 2.75 2.5s2.75-1 2.75-2.5Z'/%3E%3C/g%3E%3Cg transform='translate(166 4) rotate(11) scale(2)' stroke-width='.8'%3E%3Cpath d='M12 6.5C10 5 7.25 4.4 3.5 4.9v13.6c3.75-.5 6.5.1 8.5 1.6 2-1.5 4.75-2.1 8.5-1.6V4.9C16.75 4.4 14 5 12 6.5Zm0 0v13.6'/%3E%3C/g%3E%3Cg transform='translate(98 78) rotate(-6) scale(2.5)' stroke-width='.65'%3E%3Cpath d='m13.25 3.5 5.25 5.25-2.75 2.75L10.5 6.25Zm-.15 5.4-8.35 8.35M12.25 20.5h9M14 20.5v-1.25A1.25 1.25 0 0 1 15.25 18h3a1.25 1.25 0 0 1 1.25 1.25v1.25'/%3E%3C/g%3E%3C/svg%3E");
/* o certinho branco das caixinhas marcadas, e o escuro pra cima do --papel-fixo (ponte) */
--marca-certo-clara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.25 12.5 4.25 4.25 9.25-9.5'/%3E%3C/svg%3E");
--marca-certo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232A1218' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.25 12.5 4.25 4.25 9.25-9.5'/%3E%3C/svg%3E");
}
@media (max-width: 640px) { :root { --gutter: 16px; } }
/* ===== tema escuro (padrão): vinho bem fechado, superfície um tom acima ===== */
:root, [data-tema="escuro"], [data-tema="auto"] {
color-scheme: dark;
--fundo: #14090D;
--fundo-2: #190B11;
--marca-zero: #F0B429; /* o 0 da marca (= --ouro; no claro, --ouro-baixo, como a marca-no-claro.svg) */
--superficie: #1E0F15;
--superficie-2: #2A1620;
--superficie-3: #38202C;
--superficie-elevada: #26131B; /* caixa de diálogo, gaveta, o que flutua */
--campo: #170A10; /* fundo de campo de formulário */
--linha: rgba(255, 176, 196, .14); /* borda de cartão, divisória */
--linha-media: #55303D; /* borda de botão secundário e de chip de escolha (quem identifica é o texto) */
--linha-forte: #96506A; /* borda de campo de formulário (3:1 na superfície) */
--texto: #F7EDE8;
--texto-2: #C9B3B0;
--texto-3: #A8908F;
--vinho: #C41A48; /* primária: preenchimento, com letra branca (5,8:1) */
--vinho-forte: #D62657; /* a primária com o mouse em cima */
--vinho-baixo: #7A0E2B; /* a borda de baixo do botão primário */
--rubi: #E0486A; /* rubi de preenchimento e de traço (barra de progresso, bolinha) */
--acento: #F0708C; /* rubi como letra: link e item ativo (6:1 na superfície-2) */
--acento-suave: #3B1422; /* fundo tingido de vinho (item ativo, hover, selo) */
--acento-linha: #8F3049; /* sublinhado de link, contorno do que é vinho suave */
--ouro-texto: #F0B429; /* dourado como letra */
--ouro-suave: #3A2A0C;
--ouro-linha: #7A5A14;
--ouro-grifo: rgba(240, 180, 41, .42);
--ouro-barra: #F0B429; /* dourado da barra de progresso (3:1 no trilho) */
--bom: #2BB673;
--sobre-bom: #04200F;
--bom-texto: #4FD091;
--bom-suave: #11301F;
--atencao-texto: #F0B429;
--atencao-suave: #3A2A0C;
--erro: #FF6B5E;
--sobre-erro: #2A0906;
--erro-texto: #FF8A7F;
--erro-suave: #40181A;
--erro-linha: #A8403B;
--info-texto: #9DB7FF;
--info-suave: #17243F;
--foco: #F0B429;
--anel: rgba(240, 180, 41, .35);
--inverso: #F7EDE8;
--inverso-texto: #14090D;
--sombra-flutua: 0 14px 34px rgba(0, 0, 0, .45);
--destaque-fundo: #A3143C; /* o cartão de destaque: bloco vinho chapado, letra branca (7,7:1) */
--destaque-baixo: #6B0C27;
--destaque-suave: #2B0F1A; /* ponte: o destaque antigo (.cartao.degrade), só tingido */
--paragrafo-cor: rgba(247, 237, 232, .05); /* o § de marca d'água */
--gold-soft: #3A2A0C;
--pink-soft: #3D1C28;
--sky-soft: #14303F;
--mint-soft: #12321F;
--lilac-soft: #2A2242;
--gold-traco: #F0B429; /* a cor da disciplina como traço de ícone */
--pink-traco: #FF9EB5;
--sky-traco: #8FD0FF;
--mint-traco: #7FDCA6;
--lilac-traco: #C4B0FF;
/* ponte (nomes do caderno à mão) */
--traco: #96506A;
--caneta: #9DB7FF;
--pauta: rgba(255, 176, 196, .14);
--margem: rgba(224, 72, 106, .35);
--sombra-leve: rgba(0, 0, 0, .3);
--sombra-cor: 0, 0, 0;
--aurora: #14090D;
--grifo-de: 70%;
--grifo-ate: 96%;
--seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C9B3B0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
--moldura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%2396506A' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='20'/%3E%3C/svg%3E");
--moldura-reta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%2396506A' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='10'/%3E%3C/svg%3E");
--moldura-vermelha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23F0708C' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='14'/%3E%3C/svg%3E");
--caixinha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%2396506A' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3C/svg%3E");
--caixinha-marcada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%23F0708C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3Cpath stroke-width='2.6' d='m9.75 15.5 3.5 3.5 7-7.75'/%3E%3C/svg%3E");
}
/* ===== tema claro: creme e branco, vinho mais fechado ===== */
@media (prefers-color-scheme: light) {
[data-tema="auto"] {
color-scheme: light;
--fundo: #FBF5EE;
--fundo-2: #F4EBE1;
--marca-zero: #B7791F;
--superficie: #FFFFFF;
--superficie-2: #F6EEE6;
--superficie-3: #EADDD2;
--superficie-elevada: #FFFFFF;
--campo: #FFFFFF;
--linha: rgba(110, 24, 48, .15);
--linha-media: #DCC3C6;
--linha-forte: #AD7682;
--texto: #2A1218;
--texto-2: #5C4046;
--texto-3: #73575C;
--vinho: #8E1033;
--vinho-forte: #A51641;
--vinho-baixo: #5E0A22;
--rubi: #B8173F;
--acento: #8E1033;
--acento-suave: #F8E1E6;
--acento-linha: #D99AAA;
--ouro-texto: #7A5200;
--ouro-suave: #FCEFC9;
--ouro-linha: #DDB45A;
--ouro-grifo: rgba(240, 180, 41, .55);
--ouro-barra: #A86D12;
--bom: #157F4B;
--sobre-bom: #FFFFFF;
--bom-texto: #146C43;
--bom-suave: #DDF3E6;
--atencao-texto: #7A5200;
--atencao-suave: #FCEFC9;
--erro: #D63A2B;
--sobre-erro: #FFFFFF;
--erro-texto: #B3261E;
--erro-suave: #FCE4E0;
--erro-linha: #E29A90;
--info-texto: #1D3F9E;
--info-suave: #E4ECFF;
--foco: #8E1033;
--anel: rgba(142, 16, 51, .25);
--inverso: #2A1218;
--inverso-texto: #FBF5EE;
--sombra-flutua: 0 14px 34px rgba(74, 20, 34, .16);
--destaque-fundo: #8E1033;
--destaque-baixo: #5E0A22;
--destaque-suave: #FFF3F2;
--paragrafo-cor: rgba(142, 16, 51, .06);
--gold-soft: #FCEFC9;
--pink-soft: #FFE3EA;
--sky-soft: #E1F2FF;
--mint-soft: #DDF6E6;
--lilac-soft: #EEE8FF;
--gold-traco: #8A5F00;
--pink-traco: #B8306A;
--sky-traco: #1C66A8;
--mint-traco: #177A54;
--lilac-traco: #6548C7;
--traco: #AD7682;
--caneta: #1D3F9E;
--pauta: rgba(110, 24, 48, .15);
--margem: rgba(142, 16, 51, .25);
--sombra-leve: rgba(74, 20, 34, .12);
--sombra-cor: 74, 20, 34;
--aurora: #FBF5EE;
--grifo-de: 66%;
--grifo-ate: 94%;
--seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235C4046' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
--moldura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23AD7682' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='20'/%3E%3C/svg%3E");
--moldura-reta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23AD7682' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='10'/%3E%3C/svg%3E");
--moldura-vermelha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%238E1033' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='14'/%3E%3C/svg%3E");
--caixinha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%23AD7682' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3C/svg%3E");
--caixinha-marcada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%238E1033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3Cpath stroke-width='2.6' d='m9.75 15.5 3.5 3.5 7-7.75'/%3E%3C/svg%3E");
}
}
[data-tema="claro"] {
color-scheme: light;
--fundo: #FBF5EE;
--fundo-2: #F4EBE1;
--marca-zero: #B7791F;
--superficie: #FFFFFF;
--superficie-2: #F6EEE6;
--superficie-3: #EADDD2;
--superficie-elevada: #FFFFFF;
--campo: #FFFFFF;
--linha: rgba(110, 24, 48, .15);
--linha-media: #DCC3C6;
--linha-forte: #AD7682;
--texto: #2A1218;
--texto-2: #5C4046;
--texto-3: #73575C;
--vinho: #8E1033;
--vinho-forte: #A51641;
--vinho-baixo: #5E0A22;
--rubi: #B8173F;
--acento: #8E1033;
--acento-suave: #F8E1E6;
--acento-linha: #D99AAA;
--ouro-texto: #7A5200;
--ouro-suave: #FCEFC9;
--ouro-linha: #DDB45A;
--ouro-grifo: rgba(240, 180, 41, .55);
--ouro-barra: #A86D12;
--bom: #157F4B;
--sobre-bom: #FFFFFF;
--bom-texto: #146C43;
--bom-suave: #DDF3E6;
--atencao-texto: #7A5200;
--atencao-suave: #FCEFC9;
--erro: #D63A2B;
--sobre-erro: #FFFFFF;
--erro-texto: #B3261E;
--erro-suave: #FCE4E0;
--erro-linha: #E29A90;
--info-texto: #1D3F9E;
--info-suave: #E4ECFF;
--foco: #8E1033;
--anel: rgba(142, 16, 51, .25);
--inverso: #2A1218;
--inverso-texto: #FBF5EE;
--sombra-flutua: 0 14px 34px rgba(74, 20, 34, .16);
--destaque-fundo: #8E1033;
--destaque-baixo: #5E0A22;
--destaque-suave: #FFF3F2;
--paragrafo-cor: rgba(142, 16, 51, .06);
--gold-soft: #FCEFC9;
--pink-soft: #FFE3EA;
--sky-soft: #E1F2FF;
--mint-soft: #DDF6E6;
--lilac-soft: #EEE8FF;
--gold-traco: #8A5F00;
--pink-traco: #B8306A;
--sky-traco: #1C66A8;
--mint-traco: #177A54;
--lilac-traco: #6548C7;
--traco: #AD7682;
--caneta: #1D3F9E;
--pauta: rgba(110, 24, 48, .15);
--margem: rgba(142, 16, 51, .25);
--sombra-leve: rgba(74, 20, 34, .12);
--sombra-cor: 74, 20, 34;
--aurora: #FBF5EE;
--grifo-de: 66%;
--grifo-ate: 94%;
--seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235C4046' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
--moldura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23AD7682' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='20'/%3E%3C/svg%3E");
--moldura-reta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23AD7682' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='10'/%3E%3C/svg%3E");
--moldura-vermelha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%238E1033' stroke-width='1.5'%3E%3Crect x='1' y='1' width='70' height='70' rx='14'/%3E%3C/svg%3E");
--caixinha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%23AD7682' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3C/svg%3E");
--caixinha-marcada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='%238E1033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='22' height='22' rx='6.5'/%3E%3Cpath stroke-width='2.6' d='m9.75 15.5 3.5 3.5 7-7.75'/%3E%3C/svg%3E");
}
/* ===== tokens compostos e nomes antigos (recalculados em todo elemento com data-tema) ===== */
:root, [data-tema] {
/* só o que flutua tem sombra (aviso, player, caixa); peça no chão é chapada */
--shadow: var(--sombra-flutua);
--shadow-sm: 0 0 0 0 transparent;
--shadow-xs: 0 0 0 0 transparent;
--sombra-1: 0 0 0 0 transparent;
--sombra-2: 0 0 0 0 transparent;
--sombra-3: var(--sombra-flutua);
--sombra-dura: transparent;
/* marca-texto dourado e sublinhado rubi (imagens chapadas: quem usa dá a posição e o tamanho) */
--grifo: linear-gradient(var(--ouro-grifo), var(--ouro-grifo));
--grifo-2: linear-gradient(var(--ouro-grifo), var(--ouro-grifo));
--sublinhado: linear-gradient(transparent 62%, var(--rubi) 62%);
/* ponte: nomes do caderno à mão e do Fécler de antes */
--primaria: var(--vinho);
--sobre-primaria: var(--sobre-vinho);
--principal-fundo: var(--vinho);
--principal-texto: var(--sobre-vinho);
--vermelho: var(--vinho);
--sobre-vermelho: var(--sobre-vinho);
--vermelho-texto: var(--acento);
--vermelho-suave: var(--acento-suave);
--palco-destaque: var(--rubi);
--traco-ouro: var(--ouro-baixo);
--ambar-texto: var(--ouro-texto);
--ambar-suave: var(--ouro-suave);
--violeta-texto: var(--texto);
--violeta-suave: var(--lilac-soft);
--grad-marca: linear-gradient(var(--ouro), var(--ouro));
--grad-marca-forte: linear-gradient(var(--ouro-forte), var(--ouro-forte));
--grad-texto: linear-gradient(var(--texto), var(--texto));
--brilho-primaria: 0 0 0 1.5px var(--ouro-baixo);
--vidro: var(--superficie);
--vidro-forte: var(--superficie);
--vidro-solido: var(--superficie);
--vidro-borda: var(--linha-forte);
--aurora-fio: var(--linha);
--rabisco-cor: var(--paragrafo-cor);
--rabiscos-img: none;
--moldura-2: var(--moldura);
--moldura-3: var(--moldura);
--ink: var(--texto);
--ink-2: var(--texto-2);
--ink-3: var(--texto-3);
--paper: var(--fundo);
--card: var(--superficie);
--panel: var(--superficie-2);
--line: var(--linha);
--st-good: var(--bom);
--st-good-soft: var(--bom-suave);
--st-warn: var(--atencao);
--st-warn-soft: var(--atencao-suave);
--st-crit: var(--erro);
--st-crit-soft: var(--erro-suave);
--radius: var(--raio-4);
--radius-sm: var(--raio-2);
--font: var(--fonte-titulo);
}
/* ===== base ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
font-synthesis: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
position: relative;
isolation: isolate;
overflow-x: hidden;
background: var(--fundo);
color: var(--texto);
font-family: var(--fonte-texto);
font-size: var(--tam-texto);
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { text-decoration-color: var(--acento); } }
b, strong { font-weight: 700; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--fonte-titulo);
font-weight: 700;
line-height: 1.15;
letter-spacing: -.015em;
text-wrap: balance;
}
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--ouro); color: var(--sobre-ouro); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.so-leitor {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ícone de linha do sprite (img/icones.svg): traço redondo na cor do texto */
.ic {
width: 24px;
height: 24px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.estreito { --wrap: 480px; }
/* ===== esqueleto de página: uma coluna centrada com título, subtítulo e os blocos =====
Largura: 880px · .estreita = 560px (revisão de flashcard, leitura) · .larga = 1040px (tela com grade).
.pagina-cabeca.com-acao põe um botão do lado do título. */
.pagina { display: grid; gap: 20px; width: 100%; max-width: 880px; margin-inline: auto; }
.pagina.estreita { max-width: 560px; }
.pagina.larga { max-width: 1040px; }
.pagina > * { min-width: 0; }
.pagina-cabeca { display: grid; gap: 8px; margin-bottom: 8px; }
.pagina-cabeca h1 { font-size: clamp(25px, 6.4vw, 31px); letter-spacing: -.02em; line-height: 1.12; }
/* (o :where não pesa: a frase é o comum; o
continua o rótulo rubi pequeno) */
.pagina-cabeca p:where(:not(.sobretitulo)) { max-width: 72ch; color: var(--texto-2); font-size: 15.5px; }
.pagina-cabeca.com-acao { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 14px; }
.pagina-cabeca.com-acao > :is(.btn, .acoes) { grid-column: 2; grid-row: 1 / span 2; }
/* rótulo pequeno em cima de título ("MISSÕES DE HOJE") e número em Lexend com algarismo de largura fixa */
.sobretitulo { color: var(--acento); font-family: var(--fonte-titulo); font-size: var(--tam-legenda); font-weight: 600; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.num { font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums; font-weight: 700; }
/* ===== texto longo de conteúdo: Literata (o caderno passado a limpo, resumo, lei seca, termos) =====
Só o conteúdo: título de tela, botão, rótulo e aviso continuam em Lexend e Nunito Sans. */
.leitura, .texto, .texto-legal, .lei-artigo, .lei-sumula {
font-family: var(--fonte-leitura);
font-weight: 400;
font-variant-numeric: oldstyle-nums proportional-nums;
}
:is(.leitura, .texto, .texto-legal, .lei-artigo, .lei-sumula) :is(b, strong) { font-weight: 600; }
/* ===== uma palavra grifada (só em título curto): barra dourada translúcida embaixo da palavra ===== */
.texto-degrade, .grifo {
padding: 0 .06em;
background: var(--grifo) 0 92% / 100% .34em no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.grifo.outro { background-image: var(--grifo-2); }
/* sublinhado rubi fino, pra uma palavra de título */
.sublinhado {
padding-bottom: .1em;
background: var(--sublinhado) 0 100% / 100% .3em no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ===== § de marca d'água: num bloco grande e calmo (cartão de destaque, topo de página), um por tela ===== */
.com-paragrafo { position: relative; isolation: isolate; overflow: hidden; }
.com-paragrafo::after, .cartao.destaque::after {
content: "§";
position: absolute;
z-index: -1;
right: 4%;
bottom: -.24em;
color: var(--paragrafo-cor);
font-family: var(--fonte-leitura);
font-size: clamp(150px, 34vw, 230px);
font-weight: 400;
line-height: 1;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
/* ponte: .rabiscos e .aurora eram o fundo desenhado do caderno; agora é o fundo liso da página */
.rabiscos { position: relative; isolation: isolate; }
.rabiscos::before, .aurora::before { content: none; }
.aurora {
position: relative;
isolation: isolate;
background: var(--fundo);
color: var(--texto);
}
/* ponte: "vidro" = superfície com borda fina (não tem desfoque) */
.vidro, .vidro-claro {
background: var(--superficie);
border: var(--bw-fio) solid var(--linha);
}
/* ===== marca escrita =====
Zer0 DP: "Zer" na cor do texto, o 0 dourado
(o mesmo 0 do mascote) e "DP" num selo vinho (o js/marca.js monta).
Sem .selo (páginas públicas, ainda com o nome antigo), o só muda de cor. */
.marca {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--texto);
font-family: var(--fonte-titulo);
font-size: 22px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.marca b { font-weight: inherit; color: var(--marca-jus, var(--acento)); }
.marca.selo b {
margin-left: .3em;
padding: .2em .36em .22em;
border-radius: .42em;
background: var(--vinho);
color: var(--sobre-vinho);
letter-spacing: 0;
}
.marca.sobre-degrade { color: var(--texto); }
/* o "o" do Zero é o algarismo: o 0 dourado do mascote, como na marca desenhada (img/zerodp/). Quem escreve é o
js/marca.js: Zer0 DP. Marca é uma só: esta, escrita, com as cores da
desenhada de cada tema (marca-no-escuro.svg: 0 em --ouro; marca-no-claro.svg: 0 em --ouro-baixo, que no creme
o dourado chapado some). */
.marca .marca-zero { color: var(--marca-zero, var(--ouro)); }
/* ===== botões =====
Gordinhos: embaixo tem uma borda mais grossa e mais escura; no toque o botão desce e ela encolhe (afunda). Essa
borda de baixo é um box-shadow sem desfoque: fica por fora da caixa, então o botão não muda de tamanho nem
empurra nada em volta (ela ocupa 4px do espaço de baixo: deixe pelo menos 8px livres ali).
.btn = secundário (superfície com contorno). .principal = vinho, a ação da tela (uma por tela).
.destaque = dourado: a chamada que vale XP ou conquista (começar o simulado, resgatar). .perigo = apagar/sair
(vem com ícone). .suave, .vidro e .fantasma = apoio, sem a borda gorda. .tinta = invertido. .claro = branco fixo.
Tamanhos: .pequeno (44px), normal (48px), .grande (56px). .cheio ocupa a linha; .redondo é só ícone.
Ponte: .ouro é o nome antigo de .principal (continua vinho; o dourado novo é .destaque). */
.btn {
--btn-fundo: var(--superficie-2);
--btn-texto: var(--texto);
--btn-borda: var(--linha-media);
--btn-baixo: var(--linha-media);
--btn-afunda: 3px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 20px;
border: var(--bw) solid var(--btn-borda);
border-radius: var(--raio-btn);
background: var(--btn-fundo);
box-shadow: 0 var(--btn-afunda) 0 var(--btn-baixo);
color: var(--btn-texto);
font-family: var(--fonte-titulo);
font-size: 16px;
font-weight: 600;
line-height: 1.15;
letter-spacing: 0;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform .09s ease-out, box-shadow .09s ease-out, background-color .15s, border-color .15s, color .15s;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
.btn .ic { width: 20px; height: 20px; stroke-width: 2.2; }
@media (hover: hover) { .btn:hover { --btn-fundo: var(--superficie-3); } }
/* afunda: o botão desce 2px e a borda de baixo perde 2px (o pé dela fica no mesmo lugar) */
.btn:active:not(:disabled, [aria-disabled="true"]) { transform: translateY(2px); box-shadow: 0 calc(var(--btn-afunda) - 2px) 0 var(--btn-baixo); }
.btn.principal, .btn.ouro {
--btn-fundo: var(--vinho);
--btn-texto: var(--sobre-vinho);
--btn-borda: var(--vinho);
--btn-baixo: var(--vinho-baixo);
--btn-afunda: var(--afunda);
font-weight: 700;
}
@media (hover: hover) { .btn.principal:hover, .btn.ouro:hover { --btn-fundo: var(--vinho-forte); --btn-borda: var(--vinho-forte); } }
.btn.principal small, .btn.ouro small, .btn.destaque small { color: inherit; opacity: .86; }
.btn.destaque {
--btn-fundo: var(--ouro);
--btn-texto: var(--sobre-ouro);
--btn-borda: var(--ouro-baixo);
--btn-baixo: var(--ouro-baixo);
--btn-afunda: var(--afunda);
font-weight: 700;
}
@media (hover: hover) { .btn.destaque:hover { --btn-fundo: var(--ouro-forte); } }
.btn.tinta { --btn-fundo: var(--inverso); --btn-texto: var(--inverso-texto); --btn-borda: var(--inverso); --btn-baixo: var(--texto-3); }
@media (hover: hover) { .btn.tinta:hover { --btn-fundo: var(--inverso); } }
.btn.claro { --btn-fundo: #FFFFFF; --btn-texto: #2A1218; --btn-borda: #D9C9C3; --btn-baixo: #BCA7A2; }
@media (hover: hover) { .btn.claro:hover { --btn-fundo: #FBF5EE; } }
.btn.perigo { --btn-fundo: var(--erro-suave); --btn-texto: var(--erro-texto); --btn-borda: var(--erro-linha); --btn-baixo: var(--erro-linha); }
@media (hover: hover) { .btn.perigo:hover { --btn-fundo: var(--erro-suave); } }
.btn.rosa { --btn-fundo: var(--acento-suave); --btn-texto: var(--acento); --btn-borda: var(--acento-linha); --btn-baixo: var(--acento-linha); }
/* quem não pôs ícone no botão de perigo ganha o de aviso (vermelho de erro nunca vem só na cor) */
.btn.perigo:not(:has(.ic))::before, .etiqueta.erro:not(:has(.ic))::before, .erro-campo::before, .aviso.ruim::before, .alerta.erro:not(:has(> .ic))::before {
content: "";
flex: none;
display: inline-block;
width: 1.15em;
height: 1.15em;
background: currentColor;
-webkit-mask: var(--m-aviso) center / contain no-repeat;
mask: var(--m-aviso) center / contain no-repeat;
}
/* de apoio: sem a borda gorda (não afundam, só encolhem um tiquinho) */
.btn.suave, .btn.vidro, .btn.fantasma, .btn.redondo { box-shadow: none; }
:is(.btn.suave, .btn.vidro, .btn.fantasma, .btn.redondo):active:not(:disabled, [aria-disabled="true"]) { transform: scale(.96); box-shadow: none; }
.btn.suave { --btn-fundo: var(--superficie-2); --btn-borda: var(--linha); }
.btn.vidro { --btn-fundo: transparent; --btn-borda: var(--linha-forte); }
@media (hover: hover) { .btn.vidro:hover { --btn-fundo: var(--acento-suave); } }
.btn.fantasma { --btn-fundo: transparent; --btn-borda: transparent; }
@media (hover: hover) { .btn.fantasma:hover { --btn-fundo: var(--superficie-2); } }
.btn.fantasma:active { --btn-fundo: var(--superficie-3); }
.btn.pequeno { min-height: 44px; padding: 0 15px; gap: 6px; border-radius: 14px; font-size: 15px; }
.btn.pequeno .ic { width: 18px; height: 18px; }
.btn.grande { min-height: 56px; padding: 0 26px; gap: 10px; border-radius: 18px; font-size: 17.5px; }
.btn.grande .ic { width: 22px; height: 22px; }
.btn.cheio { width: 100%; }
.btn.redondo { width: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
.btn.redondo.pequeno { width: 44px; min-height: 44px; }
.btn.redondo .ic { width: 22px; height: 22px; }
/* rótulo que não cabe na largura quebra em duas linhas, em vez de vazar pra fora do cartão ou da tela (celular) */
.btn { max-width: 100%; }
@media (max-width: 640px) { .btn:not(.redondo) { padding-block: 8px; white-space: normal; text-wrap: balance; } }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ocupado { color: transparent !important; pointer-events: none; }
.btn.ocupado .ic { visibility: hidden; }
.btn.ocupado::before { visibility: hidden; }
.btn.ocupado::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 20px; height: 20px;
margin: -10px 0 0 -10px;
border: 3px solid var(--btn-texto);
border-right-color: transparent;
border-radius: 50%;
animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
/* ponte: o rabisco de flash da câmera e o traço que "fervia" não existem mais (as classes ficam, sem efeito) */
.flash { position: relative; display: inline-grid; flex: none; }
.flash::after { content: none; }
.ferve { animation: none; }
@keyframes ferve { to { opacity: 1; } }
/* link com cara de link (texto corrido) e botão que parece link: rubi com sublinhado */
.link { color: var(--acento); font-weight: 700; text-decoration: underline; text-decoration-color: var(--acento-linha); text-decoration-thickness: 1.5px; }
@media (hover: hover) { .link:hover { text-decoration-color: currentColor; } }
.link-botao {
min-height: 44px;
padding: 8px 4px;
border: 0;
background: none;
color: var(--acento);
font-family: var(--fonte-titulo);
font-size: 15.5px;
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--acento-linha);
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
}
@media (hover: hover) { .link-botao:hover { text-decoration-color: currentColor; } }
/* setinha depois do texto (link que leva pra outro lugar: "já tenho conta →") */
.com-setinha::after {
content: "";
display: inline-block;
width: 1.2em;
height: .7em;
margin-left: .35em;
background: currentColor;
-webkit-mask: var(--m-setinha) center / contain no-repeat;
mask: var(--m-setinha) center / contain no-repeat;
vertical-align: -.02em;
transition: transform .2s var(--ease);
}
@media (hover: hover) { .com-setinha:hover::after { transform: translateX(3px); } }
/* ===== campos =====
…
.campos.folgados = mais ar entre os grupos (formulário de chips de escolha, como o de montar simulado). */
.campos { display: grid; gap: 14px; }
.campos.folgados { gap: 26px; }
.campo { display: grid; gap: 6px; }
.campo > :is(.escolhas, .segmentado) { margin-top: 4px; }
.campo > .segmentado { justify-self: start; }
.campo > span, .campo > label { color: var(--texto); font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600; }
.campo small { color: var(--texto-3); font-size: 13.5px; line-height: 1.4; }
.entrada {
width: 100%;
min-height: 50px;
padding: 11px 14px;
border: var(--bw) solid var(--linha-forte);
border-radius: 14px;
background-color: var(--campo);
box-shadow: none;
color: var(--texto);
font-size: 16px;
font-weight: 400;
line-height: 1.35;
transition: border-color .15s, background-color .15s;
-webkit-appearance: none;
appearance: none;
}
.entrada:focus { border-color: var(--foco); }
.entrada:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; }
.entrada::placeholder { color: var(--texto-3); opacity: 1; }
.entrada[aria-invalid="true"] { border-color: var(--erro); background-color: var(--erro-suave); }
.entrada[readonly] { border-style: dashed; background-color: var(--superficie-2); color: var(--texto-2); }
select.entrada {
padding-right: 42px;
background-image: var(--seta-select);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
}
textarea.entrada { min-height: 96px; resize: vertical; }
.senha-caixa { position: relative; }
.senha-caixa .entrada { padding-right: 84px; }
.senha-caixa .ver {
position: absolute;
right: 3px; top: 50%;
transform: translateY(-50%);
min-width: 72px; min-height: 44px;
border: 0;
border-radius: 11px;
background: transparent;
color: var(--acento);
font-family: var(--fonte-titulo);
font-size: 14.5px;
font-weight: 600;
}
@media (hover: hover) { .senha-caixa .ver:hover { background: var(--acento-suave); } }
/* erro de campo: letra de erro com o ícone de aviso na frente (o ::before vem lá de cima) */
.erro-campo { display: flex; align-items: flex-start; gap: 6px; color: var(--erro-texto); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.erro-campo::before { margin-top: .12em; }
.erro-campo:empty { display: none; }
/* caixinha de aceite e de marcar: quadradinho redondo; marcada = vinho com o certinho branco */
.aceite { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; color: var(--texto-2); font-size: 15px; line-height: 1.45; cursor: pointer; }
.aceite input, input.marcar {
flex: none;
width: 26px;
height: 26px;
margin: 0;
border: var(--bw) solid var(--linha-forte);
border-radius: 8px;
background: var(--campo) center / 17px no-repeat;
cursor: pointer;
transition: background-color .15s, border-color .15s, transform .09s ease-out;
-webkit-appearance: none;
appearance: none;
}
.aceite input:checked, input.marcar:checked { border-color: var(--vinho); background-color: var(--vinho); background-image: var(--marca-certo-clara); }
.aceite input:active, input.marcar:active { transform: scale(.9); }
input.marcar[type="radio"] { width: 24px; height: 24px; border-radius: 50%; }
input.marcar[type="radio"]:checked { background-image: radial-gradient(circle, #FFFFFF 0 4.5px, transparent 5px); background-size: 100%; }
.aceite a { color: var(--acento); font-weight: 700; text-decoration-color: var(--acento-linha); }
/* interruptor (liga/desliga): trilho em pílula; ligado = vinho com a bolinha branca do outro lado */
input.interruptor {
flex: none;
width: 52px;
height: 32px;
margin: 0;
border: var(--bw) solid var(--linha-forte);
border-radius: var(--raio-pilula);
background: radial-gradient(circle at 14px 50%, var(--texto-2) 0 9px, transparent 9.5px), var(--superficie-3);
cursor: pointer;
transition: background-color .15s, border-color .15s;
-webkit-appearance: none;
appearance: none;
}
input.interruptor:checked { border-color: var(--vinho); background: radial-gradient(circle at calc(100% - 14px) 50%, #FFFFFF 0 9px, transparent 9.5px), var(--vinho); }
label.linha-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; font-weight: 600; cursor: pointer; }
/* seletor segmentado (Foto | Texto, Ler | Editar, tema): trilho redondo, o escolhido fica vinho.
Dentro do escolhido, --ouro e --sobre-ouro passam a valer vinho e branco: módulo antigo que pinta "o escolhido de
ouro" por cima sai certo sem mudar de código (vale também pro chip escolhido, mais abaixo). */
.segmentado {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 4px;
padding: 4px;
border: var(--bw-fio) solid var(--linha);
border-radius: 16px;
background: var(--superficie-2);
}
.segmentado > button, .segmentado > a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 0 16px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--texto-2);
font-family: var(--fonte-titulo);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background-color .15s, color .15s;
}
@media (hover: hover) { .segmentado > button:hover, .segmentado > a:hover { background: var(--superficie-3); color: var(--texto); } }
.segmentado > [aria-pressed="true"], .segmentado > [aria-checked="true"], .segmentado > [aria-selected="true"], .segmentado > [aria-current="page"] {
--ouro: var(--vinho);
--sobre-ouro: var(--sobre-vinho);
background: var(--vinho);
color: var(--sobre-vinho);
}
@media (hover: hover) {
.segmentado > :is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], [aria-current="page"]):hover { background: var(--vinho); color: var(--sobre-vinho); }
}
.segmentado.cheio { display: grid; width: 100%; }
/* ===== cartões: bem redondos (24), borda fina que se vê, uma superfície um tom acima do fundo; sem sombra ===== */
.cartao {
position: relative;
padding: 24px;
border: var(--bw) solid var(--linha);
border-radius: var(--raio-cartao);
background: var(--superficie);
box-shadow: none;
color: var(--texto);
}
@media (max-width: 640px) { .cartao { padding: 18px 16px; border-radius: var(--raio-4); } }
.cartao.plano { box-shadow: none; }
.cartao.painel { background: var(--superficie-2); }
/* cabeça de cartão: título (com ícone, se quiser) de um lado, uma nota pequena do outro, e um fio tracejado
Missões de hoje
renovam todo dia */
.cartao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding-bottom: 14px; border-bottom: var(--bw-fio) dashed var(--linha-media); }
.cartao-cabeca :is(h2, h3) { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.005em; }
.cartao-cabeca :is(h2, h3) .ic { width: 19px; height: 19px; }
.cartao-cabeca small { flex: none; color: var(--texto-3); font-size: 12.5px; }
/* ponte: .vidro (cartão em cima do palco das telas de entrada) = o cartão comum com a borda mais forte */
.cartao.vidro { border-color: var(--linha-media); }
/* ponte: .degrade (o destaque antigo) = cartão tingido de vinho, de leve (o destaque novo é o .destaque, abaixo) */
.cartao.degrade { border-color: var(--acento-linha); background: var(--destaque-suave); }
/* ponte: .ouro = dourado chapado (dentro dele texto, linha e foco são sempre escuros), .creme = dourado suave,
.rosa = erro suave */
.cartao.ouro {
--texto: #2A1400; --texto-2: var(--sobre-ouro-2); --texto-3: #5A3A08; --traco: #7A5200; --traco-ouro: #7A5200; --foco: #2A1400; --acento: #2A1400;
--linha: rgba(42, 20, 0, .2); --linha-media: rgba(42, 20, 0, .34); --linha-forte: #7A5200;
border-color: var(--ouro-baixo);
background: var(--ouro);
color: var(--sobre-ouro);
}
.cartao.creme { border-color: var(--ouro-linha); background: var(--ouro-suave); }
.cartao.rosa { border-color: var(--erro-linha); background: var(--erro-suave); }
/* ===== cartão de destaque: um por tela (a saudação do Painel, a chamada do simulado) =====
Bloco vinho chapado com a borda de baixo mais escura, letra branca, o § de marca d'água atrás do mascote e os
rabiscos de Direito (balança, livro, martelo) bem apagados.
É uma ilha: aqui dentro o fundo é vinho, então os tokens de texto, linha, superfície e o próprio "vinho" mudam de
valor e as peças se ajeitam sozinhas (.btn.principal vira branco com letra vinho; .btn, .chip e .etiqueta ficam
de vidro branco; .btn.destaque continua dourado, que é o que mais aparece aqui). */
.cartao.destaque {
--texto: #FFFFFF; --texto-2: rgba(255, 255, 255, .86); --texto-3: rgba(255, 255, 255, .74);
--superficie: rgba(255, 255, 255, .10); --superficie-2: rgba(255, 255, 255, .14); --superficie-3: rgba(255, 255, 255, .24);
--linha: rgba(255, 255, 255, .22); --linha-media: rgba(255, 255, 255, .36); --linha-forte: rgba(255, 255, 255, .62);
--acento: #FFDD99; --acento-suave: rgba(255, 255, 255, .14); --acento-linha: rgba(255, 221, 153, .6);
--vinho: #FFFFFF; --vinho-forte: #FFF1F3; --vinho-baixo: #D8B4BD; --sobre-vinho: #8E1033; --rubi: #FFFFFF;
--ouro-texto: #FFDD99; --ouro-barra: #F0B429; --ouro-suave: rgba(255, 221, 153, .16); --ouro-linha: rgba(255, 221, 153, .42);
--bom-texto: #C2F5D6; --bom-suave: rgba(255, 255, 255, .14); --erro-texto: #FFD5D0; --erro-suave: rgba(0, 0, 0, .2); --erro-linha: rgba(255, 213, 208, .5);
--campo: rgba(0, 0, 0, .18);
--foco: #FFFFFF;
--paragrafo-cor: rgba(255, 255, 255, .09);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 18px;
padding: 26px 28px;
isolation: isolate;
overflow: hidden;
border: 0;
border-bottom: var(--afunda) solid var(--destaque-baixo);
background: var(--destaque-rabisco) right 132px top -14px / 280px auto no-repeat, var(--destaque-fundo);
color: var(--texto);
}
@media (max-width: 640px) { .cartao.destaque { padding: 20px 18px; background-position: right -36px top -10px, 0 0; background-size: 230px auto, auto; } }
/* o § só entra no destaque SEM mascote, e do tablet pra cima: atrás do Zero sobrava só a curva de baixo dele (lia
como um rabo saindo do boneco) e no celular os chips e botões usam a linha inteira e caíam em cima */
.cartao.destaque::after { right: 22px; bottom: -.2em; font-size: clamp(150px, 30vw, 220px); }
.cartao.destaque:has(.destaque-mascote, .mascote, img.zero)::after { content: none; }
@media (max-width: 640px) { .cartao.destaque::after { content: none; } }
.destaque-texto { display: grid; gap: 6px; min-width: 0; }
.destaque-texto h2 { font-size: clamp(22px, 5.6vw, 28px); letter-spacing: -.02em; }
/* título comprido quebra antes de chegar nos rabiscos do fundo (a balança começa a ~490px da borda esquerda) */
.destaque-texto :is(h1, h2) { max-width: 24ch; }
.destaque-texto p { max-width: 56ch; color: var(--texto-2); font-size: 15px; }
.destaque-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.destaque-mascote { display: grid; place-items: center; width: clamp(84px, 24vw, 120px); aspect-ratio: 1; }
/* no computador o Zero avança um pouco no respiro de cima e de baixo: com título e uma frase só (primeiro uso, plano)
o cartão ficava com a altura do boneco, alto demais pro que dizia */
@media (min-width: 641px) { .destaque-mascote { margin-block: -8px; } }
.destaque-mascote > * { width: 100%; height: auto; max-height: 100%; }
/* o lugar do Zero fica guardado mesmo vazio (o desenho pode chegar um instante depois e o texto não muda de
largura). Destaque sem mascote = sem este elemento: aí o texto usa a linha toda e o § aparece. */
/* ===== chips: pílula ===== */
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 0 13px;
border: var(--bw-fio) solid var(--linha);
border-radius: var(--raio-pilula);
background: var(--superficie-2);
color: var(--texto);
font-family: var(--fonte-titulo);
font-size: 14.5px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.chip .ic { width: 17px; height: 17px; stroke-width: 2.2; }
button.chip, a.chip { position: relative; min-height: 36px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .09s ease-out; }
button.chip::after, a.chip::after { content: ""; position: absolute; inset: -4px -2px; } /* alvo de toque de 44px */
@media (hover: hover) { button.chip:hover, a.chip:hover { background: var(--superficie-3); } }
button.chip:active, a.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip[aria-selected="true"], .chip.ativo {
--ouro: var(--vinho);
--sobre-ouro: var(--sobre-vinho);
border-color: var(--vinho);
background: var(--vinho);
color: var(--sobre-vinho);
font-weight: 600;
}
@media (hover: hover) { :is(button, a).chip:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], .ativo):hover { background: var(--vinho-forte); } }
.chip.vidro { background: transparent; border-color: var(--linha-forte); }
.chip .bolinha-cor { width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--rubi)); }
/* ===== chip de escolha: gordinho como o botão, com ícone (matéria, nível, modo de um formulário) =====
Ativo: aria-pressed="true" (ou aria-checked="true", ou .ativo) = vinho chapado. O ícone do inativo pega a cor da
disciplina (.cor-*) ou o rubi. Sem JS também dá: . */
.escolhas { display: flex; flex-wrap: wrap; gap: 10px; }
.escolha {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 0 16px 0 14px;
border: var(--bw) solid var(--linha-media);
border-bottom-width: 3px;
border-radius: 14px;
background: var(--campo);
color: var(--texto);
font-family: var(--fonte-titulo);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s, transform .09s ease-out;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
.escolha .ic { width: 19px; height: 19px; color: var(--cor-traco, var(--acento)); }
@media (hover: hover) { .escolha:hover { background: var(--superficie-2); } }
.escolha:active { transform: translateY(1px); }
.escolha:is([aria-pressed="true"], [aria-checked="true"], .ativo), .escolha:has(input:checked) {
border-color: var(--vinho);
border-bottom-color: var(--vinho-baixo);
background: var(--vinho);
color: var(--sobre-vinho);
font-weight: 600;
}
:is(.escolha:is([aria-pressed="true"], [aria-checked="true"], .ativo), .escolha:has(input:checked)) .ic { color: inherit; }
.escolha:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.escolha:disabled, .escolha[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* ===== controle desligado: todos apagam igual =====
Pra desligar um formulário inteiro (enquanto envia, enquanto a IA monta), ponha os campos num