/* ============================================ To Dentro — design "Vibrante" (mobile-first) Fonte: Nunito · Gradiente roxo→rosa - inputs com 16px (iOS não dá zoom) - áreas de toque com mínimo de 44px ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* ========================================================================= CAMADA 1 — PIGMENTO. Valor bruto, sem cargo, e é o ÚNICO lugar do arquivo em que cada um destes quatro hexadecimais aparece. ========================================================================= O `design-system.md` §1 prescreve esta camada desde a T-0015; ela entra agora porque o modo escuro a tornou obrigatória, e por um motivo mecânico, não estético: as ilhas de papel do palco precisam do MESMO valor que um semântico da página tem — e `var()` dentro de custom property é substituída NO PONTO DE USO, então `--palco-papel-tinta: var(--cor-texto)` seguiria a página para o escuro. O pigmento não segue ninguém: ele não é redeclarado por pele nenhuma, nem por modo nenhum. ⚠️ PIGMENTO NUNCA APARECE EM REGRA DE COMPONENTE. Quem lê daqui é a camada 2 (semântico) e a camada 3 (token de peça), logo abaixo. Um `color: var(--tinta-1)` num seletor é a camada 1 vazando, e vazamento de camada 1 é o que faz uma rampa virar um segundo vocabulário — foi assim que o `--byu-*` nasceu. Só entram os degraus que comprovadamente faltam. Rampa com degrau que ninguém referencia é inflação de design system. ========================================================================= ⚠️ TD-076 APOSENTOU `--cinza-100`, `--cinza-700` E `--cinza-900` ========================================================================= Os três eram a camada 1 da paleta ANTIGA e saíram inteiros da folha nesta tarefa. A saída é AUTORIZADA e não silenciosa: as travas de cargo que os guardavam (`Invariantes_do_design_system_test`, F6) declaram `cai_quando: ADR que troque a paleta e aposente a camada 1 atual`, e TD-076 é esse ADR. Elas continuam valendo — com TETO e não igualdade, o valor pode sumir de graça e não pode ganhar dono novo (TD-077). `--branco` FICA: `--tinta-texto` o lê, e `--tinta-texto` é invariante de modo com teste guardando (`Contrato_do_modo_de_cor_test`). */ --branco: #ffffff; /* ========================================================================= CAMADA 1 — A PELE CLARA DA DIREÇÃO B, "A CABINE" (TD-076, T-0031) ========================================================================= ESTE É O ÚNICO LUGAR DA FOLHA EM QUE CADA UM DESTES HEXADECIMAIS APARECE. A camada 2 (os nomes semânticos que as ~7.900 linhas abaixo já consomem) LÊ daqui com `var()` — nenhum semântico foi renomeado, porque renomear derrubaria o piso de 55 consumidores de `var(--cor-texto-suave)` que o invariante F5 cobra. A REGRA QUE GERA OS DOIS MODOS, e é UMA regra e não duas paletas: · ELEVAR É SEMPRE CLAREAR — no escuro o cartão ganha luz sobre o carvão; no claro o CHÃO se tinge (papel violáceo) e o cartão sobe até o branco. · INTERAGIR É ANDAR NA DIREÇÃO DA TINTA — por isso o hover CLAREIA no escuro e ESCURECE no claro. Um par de tokens, dois comportamentos. · PREENCHIMENTO VIVO VAI AO EXTREMO DE LUMINÂNCIA OPOSTO AO PAPEL, e a tinta em cima dele vai ao extremo DO papel. É por isso que AA sai barato dos dois lados. O QUE MUDA DE TRAÇO, E NÃO SÓ DE COR (TD-076 §7): · No ESCURO o fio NÃO separa (1,19:1) — quem separa é o degrau de superfície mais a sombra, e por isso a sombra é profunda. NENHUM ESTADO PODE DEPENDER DE COR DE BORDA lá. · No CLARO o fio VOLTA a separar (1,27:1) e a sombra RECUA: sombra pesada em papel claro lê como sujeira. ⚠️ `--tinta-1/2/3` NÃO SÃO PARENTES DE `--tinta`, `--tinta-cartao`, `--tinta-texto` E `--tinta-texto-suave`. Aquela família é a FAIXA DE TINTA da página inicial (T-0015, 6g), uma superfície escura fixa que não gira com modo nenhum; esta é a escala de TEXTO da pele. Nomes parecidos, cargos distintos — registrado aqui para ninguém unificar os dois por simetria de nome. */ /* AS SUPERFÍCIES, do fundo para a frente. `--cor-fundo` é o papel e mora na camada 2 (lá está o porquê: ele tem espelho em PHP e precisa do literal). */ --moldura: #ddd7ea; /* a moldura da página, fora do papel */ --sup-cartao: var(--branco); /* 1,24:1 acima do papel */ --sup-hover: #eeeaf7; /* interação anda para a tinta: ESCURECE (1,18:1) */ --sup-press: #e6e0f3; --sup-campo: #f3f0fa; /* o poço do formulário fica ABAIXO do cartão */ /* AS TINTAS. Medidas sobre cartão · papel · pressionado. ⚠️ A PRIMEIRA VEM EM TRIPLETE, e o triplete tem DOIS consumidores — que é o teste que separa indireção útil de indireção decorativa. A elevação da pele clara é sombra TINGIDA com a tinta (`rgb(...) / alfa`), e `rgb()` com alfa precisa dos componentes; sem o triplete, `--sombra-tinta` seria o valor da tinta escrito uma segunda vez — dois lugares para uma cor, que é o defeito que esta folha já pagou três vezes. (A banda tinha o mesmo arranjo e o PERDEU nesta tarefa, porque o halo saiu e sobrou um consumidor só: ver `--palco-1`.) */ --tinta-1-rgb: 39 32 57; /* #272039 */ --tinta-1: rgb(var(--tinta-1-rgb)); /* 15,53 · 12,54 · 12,07 */ --tinta-2: #4c4360; /* 9,21 · 7,44 · 7,16 */ --tinta-3: #5c5470; /* 6,90 · 5,58 · 5,52 — 4,90 até no canto mais tingido */ /* OS FIOS. `--fio-controle` é o ÚNICO token que praticamente não muda entre os modos, e o motivo é medido: ele precisa ser visto contra os DOIS extremos (4,49 no cartão claro, 4,30 no poço escuro). */ --fio-1: #e6e2f0; /* contorno de cartão: 1,27:1 — no claro ele existe */ --fio-2: #d5cde6; /* interativo: 1,53:1 */ --fio-controle: #7b719b; /* contorno de CAMPO: 4,49 no cartão, 3,62 no papel */ --fio-pendente: #7f6aaf; /* o tracejado "ainda não aconteceu": 4,58 no cartão */ /* O ACENTO — e ele faz os DOIS trabalhos que `--cor-primaria` fazia mal: preenchimento (branco em cima 6,51:1) e tinta (sobre o papel 5,26:1). */ --acento: #5c31f6; --acento-forte: #4d20e0; /* hover: mais presença (branco em cima 8,08:1) */ --acento-fundo: #4318c4; /* pressionado: afunda (9,69:1) */ /* ⚠️ A TINTA QUE VAI EM CIMA DE PREENCHIMENTO VIVO, e ela NÃO é `--tinta-texto`. `--tinta-texto` é a tinta da superfície de MARCA (`--grad`, `--cor-primaria`), invariante de modo e guardada por teste; esta gira, porque o preenchimento vivo gira. TD-076 registra que `--chassi` fazia dois trabalhos e foi QUEBRADO em quatro nomes — este é um dos quatro, e juntá-lo de volta é desfazer a correção. */ --tinta-viva: var(--branco); /* AS SEMÂNTICAS COMO PIGMENTO. As pastilhas são TOKEN SÓLIDO e nunca rgba: pastilha em rgba compõe com o substrato, e o substrato muda no hover — TD-076 matou essa classe inteira de defeito ao torná-las sólidas. */ --verde: #0f5f2c; /* o verde canônico da casa não sobrevive */ --pastilha-verde: #e2efe7; /* numa pastilha da própria cor: 6,58:1 aqui */ --ambar: #7a5b12; --pastilha-ambar: #efebe3; /* 5,30:1 */ --rosa: #c2103a; --pastilha-rosa: #f8e2e7; /* 4,96:1 */ --rosa-forte: #a30d31; --rosa-solido: var(--rosa); /* destrutivo confirmado, tinta branca: 6,12:1 */ --pastilha-neutra: #eceaf0; /* 5,95:1 com a tinta-3 */ --pastilha-acento: #ebe6fe; /* 5,36:1 */ /* O ANEL DE FOCO E A FOLGA. Medido: anel encostado direto no preenchimento vivo dá 2,01:1 nos DOIS modos — reprova idêntico dos dois lados. A folga resolve os dois, porque ela mostra o extremo oposto. */ --anel: #38206f; /* 13,09 no cartão · 10,57 no papel */ --anel-folga: var(--branco); /* 6,51 contra a tecla · 13,09 contra o anel */ /* AS TECLAS DE PESO SECUNDÁRIO E A DESTRUTIVA. */ --tecla-fantasma: #f2f0f7; --tecla-fantasma-hover: #e4dff0; --tecla-fantasma-off: #f5f4f8; --tecla-perigo: #fae9ed; --tecla-perigo-hover: #f6d7de; /* OS FUNDOS DE BLOCO — aviso, recibo, risco e fila. */ --fundo-aviso: #f6f1e4; --fundo-recibo: #eff6f2; --fundo-risco: #fcf2f4; --fundo-risco-2: #f7dfe4; --fundo-fila: #faf9fc; /* AS LISTRAS DO MEDIDOR INDETERMINADO e o trilho das barras. `--listra-forte` LÊ `--ambar` em vez de repetir o hexadecimal: `var()` dentro de custom property é substituída NO PONTO DE USO, então uma declaração só serve os dois modos e o par (token, modo) continua tendo UM lugar. É a mesma escrita de `--cor-roxo-claro` desde a T-0016. */ --listra-forte: var(--ambar); --listra-fraca: #d8cdb9; /* 4,01:1 entre as duas listras */ --trilho-barra: #e7e5ee; --marca-barra: #c3c0cf; /* OS DOIS CAMPOS DE COR DA PÁGINA. No ESCURO a sala tem LUZ: dois brilhos que CLAREIAM o papel. No CLARO a mesma luz seria branco sobre branco, então ela vira TINTA e os dois cantos ESCURECEM o papel — o degrau do cartão SOBE de 1,24 para 1,29 no canto quente e 1,39 no violeta. No claro o campo de cor AJUDA a separação em vez de comer, que é o oposto do escuro. Sem `background-attachment: fixed` e sem `backdrop-filter`: os dois geram a caixa branca fantasma no Chromium do usuário. */ --campo-1: radial-gradient(900px 520px at 8% -6%, rgba(255, 205, 150, 0.26), transparent 62%); --campo-2: radial-gradient(820px 640px at 104% 106%, rgba(124, 58, 237, 0.085), transparent 60%); /* ⚠️ O GRADIENTE SOBREVIVE, MAS NÃO COMO ASSINATURA DA PÁGINA (TD-076 §4). Ele era `linear-gradient(135deg, violet-600, fuchsia-600, pink-600)` — os três valores padrão do Tailwind no arranjo mais repetido da internet, e o diagnóstico da T-0030 é que ali não havia decisão de marca, havia default. O que fica é o SELO da marca; a matiz continua, o arranjo sai da página. ⚠️ Ele NÃO pode ser redeclarado no bloco escuro (teste guardando): é a marca, e o pior par dela — branco sobre `#db2777`, 4,60:1 — não depende do fundo da página. */ --grad: linear-gradient(135deg, #7c3aed 0%, #c026d3 60%, #db2777 100%); --cor-primaria: #7c3aed; --cor-primaria-escura: #6d28d9; --cor-rosa: #db2777; /* ========================================================================= A MARCA TEM DOIS CARGOS, E O MODO CLARO ESCONDEU A DIVISÃO ========================================================================= `--cor-primaria` é a marca como PREENCHIMENTO: superfície sob texto branco. O par que ela responde é `branco SOBRE ela` — 5,70:1. `--cor-acento` é a marca como TINTA E SINAL: link, anel de foco, limite de componente, sublinhado de guia, preenchimento do medidor. O par que ELA responde é o contrário — `ela SOBRE a superfície` — 5,08:1. ⚠️ NO CLARO OS DOIS VALORES COINCIDEM, E FOI ISSO QUE ESCONDEU A DIVISÃO. `--cor-acento` nasce com o valor que `--cor-primaria` já tinha, então o reapontamento dos 43 usos NÃO MUDA UM PIXEL: aqui diferença visual é REGRESSÃO, não conformidade (Classe 2 do protocolo de TD-045 §7.3). NO ESCURO NENHUM VALOR ÚNICO SERVE AOS DOIS, e é a medição que prova que sempre foram dois cargos — não é preferência, é aritmética: · `#7c3aed` como TINTA sobre a página escura ....... 3,10:1 REPROVA · `#7c3aed` como TINTA sobre o cartão escuro ....... 2,71:1 REPROVA · `#7c3aed` como LIMITE sobre o trilho do medidor .. 2,45:1 REPROVA · `#b69bff` sob texto branco ...................... 2,30:1 REPROVA É a mesma forma do defeito `--cor-borda` × `--limite`: um nome fazendo dois trabalhos ficou invisível até uma medição separar os dois — e o modo escuro É essa medição. O QUE **NÃO** REAPONTA e continua em `--cor-primaria`, por ser preenchimento: `.seta-acomp.aberto`, `.admin-link.ativa`, `.admin-av.grad`, a chave ligada, os dois `accent-color` (o navegador põe branco por cima) e todo consumidor de `--grad`. (Das duas primeiras: `.admin-av.grad` e a família `.admin-link` inteira saíram da folha na T-0031 — a lista é do estado de então e fica como está, porque é o registro daquela decisão.) ⚠️ TD-076 FECHOU A DIVISÃO EM VEZ DE MANTÊ-LA: `--acento` faz os dois trabalhos com folga nos dois modos (branco em cima 6,51:1; como tinta sobre o papel 5,26:1), então a camada 2 inteira lê UM pigmento. O que continua em `--cor-primaria` é a MARCA, e marca não é acento. */ --cor-acento: var(--acento); /* ⚠️ `--cor-fundo` NÃO ESCURECE MAIS SEM QUE `--cor-texto-suave` SEJA REMEDIDO. Em `#f4f0fb` ele está a 4,73:1 e o piso é 4,5. O próximo degrau plausível, `#f2eefa`, o levaria a 4,65:1 — 3 % de folga, e a régua deste projeto (TD-079) mede cada tinta contra a superfície que não perdoa. Era `#faf8ff` (L* 97,9) e passou a `#f4f0fb` (L* 95,4): o ganho não é conforto, é que o cartão branco sai de 1,05:1 para 1,12:1 contra a página e a SUPERFÍCIE volta a separar — hoje quem separava era a borda, e foi por isso que `--cor-borda` virou limite de componente em sete lugares. Remedido contra o valor novo: `--cor-texto` 13,28:1 · `--cor-texto-suave` 4,73:1 · `--cor-acento` como tinta 5,08:1 · `--cor-erro-texto` 5,45:1 · `--limite` como borda 4,03:1. Nenhuma tinta reprova. ⚠️ `--cor-neutro-fundo` NÃO acompanha, e a recusa é medida: em `#eae5f2` o cinza secundário cairia para 4,30:1 e recriaria, no mesmo dia, o defeito que a T-0015 gastou duas passagens para fechar. ⚠️ ESTE VALOR TEM UM ESPELHO EM PHP: `Tema::corDeFundo()`, que alimenta o `background_color` do manifesto. Os dois mudam no MESMO commit ou o aplicativo instalado abre com uma cor que a página não tem. ========================================================================= ⚠️ TD-076: O PAPEL PASSOU A SER VIOLÁCEO, E ESTE TOKEN É A EXCEÇÃO DA CAMADA 1 — ELE CARREGA O LITERAL EM VEZ DE LER UM PIGMENTO ========================================================================= O usuário recusou a inversão ingênua da paleta escura: papel branco mais cartão branco é escada de degrau ZERO. A saída foi TINGIR O CHÃO — o papel desce a `#e9e5f2` e o cartão sobe até o branco, o que dá 1,24:1 de degrau real, contra os 1,12:1 anteriores. POR QUE ELE NÃO É `var(--sup-pagina)` COMO OS IRMÃOS: porque TRÊS testes comparam o valor deste token, como STRING, com o hexadecimal que o PHP manda (`Tema::corDaBarra(Escuro)` e `Tema::corDeFundo()`). `var(--x)` de um lado e `#e9e5f2` do outro nunca casam, e o espelho — que é a trava certa para uma cópia, porque não crava valor e reprova na divergência — deixaria de proteger o BUG-TD-009. Então o hexadecimal do papel mora AQUI, e é aqui que ele existe uma vez por modo. Um `--sup-pagina` separado seria dois nomes para uma cor, que é o defeito que esta casa já pagou três vezes. Remedido contra o papel novo: `--cor-texto` 12,54:1 · `--cor-texto-suave` 5,58:1 · `--cor-acento` como tinta 5,26:1 · `--cor-erro-texto` 4,96:1 · `--limite` como fio 3,62:1. Nenhuma tinta reprova. */ /* ⚠️ T-0038: O ESPELHO EM PHP SAIU DAQUI. A barra do navegador e o fundo do manifesto passaram a espelhar `--dono-fundo` (o cabeçalho do arquivo do Stitch, que veste toda tela do leiaute do painel). Este token continua sendo o papel das telas que não são do dono (login, cadastro, termos, console), e continua com o literal: é o padrão desta camada. */ --cor-fundo: #e9e5f2; --cor-texto: var(--tinta-1); /* ⚠️ O DEGRAU DO MEIO ESTAVA SEM NOME, E POR ISSO NINGUÉM O LIA (T-0031). A camada 2 tinha `--cor-texto` (tinta-1) e `--cor-texto-suave` (tinta-3): o degrau do meio existia como pigmento e não tinha cargo, então toda hierarquia de três níveis desta folha era escrita com DOIS. É o texto de apoio que ainda é DADO — a linha da parte do álbum, a prosa da zona de risco —, forte demais para `-suave` e secundário demais para a tinta cheia. Medido: 9,21:1 no cartão claro e 10,52:1 no cartão escuro. ⚠️ NOME NOVO E NÃO SEGUNDO NOME PARA UMA COR: `--tinta-2` é pigmento sem cargo (a regra da camada 1 acima), e é justamente o que falta a ele. Os `--fundo-*`, `--tecla-*`, `--sup-press` e `--anel-folga` NÃO ganham gêmeo `--cor-*`: eles já nascem com o cargo no nome, e duplicá-los seria o defeito de "dois nomes para uma cor" que esta casa já pagou três vezes. */ --cor-texto-medio: var(--tinta-2); /* PASSAGEM A DA CORREÇÃO DE AA (T-0015, TD-044 P4 / TD-045 item 6). `--cor-texto-suave` era #7a7290 e REPROVAVA AA como texto em CINCO superfícies medidas: 4,30:1 sobre --cor-fundo · 4,07:1 sobre --cor-info-fundo · 3,97:1 sobre --cor-neutro-fundo · 4,36:1 sobre #fbfaff (.form-keys) · 4,40:1 sobre #fcfbff (.admin-tabela tr:hover). Com #6f6785 os mesmos cinco pares medem 5,04 · 4,78 · 4,66 · 5,11 · 5,15, e 5,31:1 sobre o cartão branco. É o tom que já existia no arquivo como apelido `-forte`: o apelido morreu, o valor ficou, e agora vale para os 43 usos de uma vez. DOIS NOMES PARA UMA COR APODRECEM — foi por isso que a correção da F6 pela metade deixou o par errado vivo em 43 lugares. ⚠️ T-0031: o NOME não mudou — o VALOR BASE mudou, e por isso o F4 está declarado `aberta` no registro de travas (TD-077) até o gate da etapa 4. Os 74 consumidores continuam intactos, que é a razão de a camada 2 não ter sido renomeada: renomear derrubaria o piso de 55 que o F5 cobra. */ --cor-texto-suave: var(--tinta-3); --cor-borda: var(--fio-1); --cor-roxo-claro: var(--pastilha-acento); /* SOB O PONTEIRO **DENTRO DE UM CARTÃO** — e ele NÃO é `--cor-roxo-claro`. `--cor-roxo-claro` foi calibrado contra a PÁGINA (#f4f0fb), onde o degrau existe; sobre o cartão BRANCO ele mede 1,11:1, que é o gêmeo numérico do NC-05 que a T-0021 acabou de consertar — superfície declarada que não separa nada. Este token é o degrau MEDIDO contra o cartão: · claro #e9e1fa sobre #ffffff .......... 1,26:1 · escuro #332c46 sobre #282136 .......... 1,17:1 ⚠️ NO ESCURO ELE CLAREIA, e isso é a regra e não o gosto: a escada deste produto sobe sempre (o cartão dá 1,14:1 sobre a página, e este é o degrau seguinte). `--cor-roxo-claro` no escuro ESCURECERIA a linha — luminância 0,01539 contra 0,01805 do cartão —, e linha que afunda sob o ponteiro lê como desativada. Tintas remedidas SOBRE esta superfície: `--cor-texto` 11,80:1 (claro) e 10,31:1 (escuro); a seta em `--cor-acento` 4,51:1 e 5,74:1. Nenhuma reprova. */ --cor-sob-ponteiro: var(--sup-hover); --cor-erro-fundo: var(--pastilha-rosa); /* ⚠️ A BORDA SEMÂNTICA PASSOU A SER A PRÓPRIA TINTA, e é decisão de TD-076 §7, não economia: no ESCURO fio é textura (1,12-1,34:1) e NENHUM estado pode depender de cor de borda. Estes quatro `-borda` vestem a faixa esquerda de 4px dos painéis, que é o que carrega o significado — e faixa precisa passar em 3:1. Com a tinta do próprio matiz ela mede 4,96:1 no claro e 5,76:1 no escuro (erro), acima do piso de objeto gráfico. */ --cor-erro-borda: var(--rosa); /* Mesma passagem: era #e11d48, que media 4,24:1 sobre --cor-erro-fundo e 4,46:1 sobre --cor-fundo — reprovava nos dois. Com #c2103a mede 5,52:1 e 5,81:1. O vermelho claro segue servindo BORDA e ÍCONE (--cor-erro-borda), onde o critério é 3:1 e não 4,5:1. */ --cor-erro-texto: var(--rosa); --cor-sucesso-fundo: var(--pastilha-verde); --cor-sucesso-borda: var(--verde); /* ⚠️ O VERDE CANÔNICO DA CASA (`#15803d`) NÃO SOBREVIVE NUMA PASTILHA DA PRÓPRIA COR: 4,27:1, medido na calibragem de TD-076. Escurecido para `#0f5f2c` em `--verde`, ele mede 6,58:1 sobre `--pastilha-verde`. */ --cor-sucesso-texto: var(--verde); /* ========================================================================= TOKENS DA F6 — cota, prazo e download em partes ========================================================================= Nenhum valor visual solto: cor, espaço e raio das peças novas saem daqui. O resto do arquivo ainda tem número cravado (ele entrou byte a byte do sistema antigo, TD-012 item 3) — tokenizar o legado é da F8, com o mesmo diff visual como critério de saída. ⚠️ CADA PAR DE COR ABAIXO FOI MEDIDO (WCAG 2.1, texto normal, AA = 4,5:1). O número está no comentário porque par não medido é par que reprova: · --cor-texto sobre --cor-info-fundo ......... 13,1:1 · --cor-aviso-texto sobre --cor-aviso-fundo ........ 5,6:1 · --cor-erro-texto sobre --cor-erro-fundo ......... 5,5:1 · --cor-neutro-texto sobre --cor-neutro-fundo ....... 8,0:1 · --cor-texto-suave sobre --cor-fundo .............. 5,0:1 E os preenchimentos do medidor contra o trilho (componente, AA = 3:1): · --medidor-normal 4,8:1 · --medidor-aviso 4,0:1 · --medidor-critico 5,2:1 */ /* Informação permanente, situação normal */ --cor-info-fundo: var(--pastilha-acento); --cor-info-borda: var(--fio-2); /* Informação permanente que virou aviso (80 % da cota, reta final do prazo) */ --cor-aviso-fundo: var(--pastilha-ambar); --cor-aviso-borda: var(--ambar); --cor-aviso-texto: var(--ambar); /* Fato consumado, sem ação possível (prazo encerrado) */ --cor-neutro-fundo: var(--pastilha-neutra); --cor-neutro-borda: var(--fio-2); --cor-neutro-texto: var(--tinta-3); /* Medidor de progresso. ⚠️ `--medidor-aviso` E `--medidor-critico` PERDERAM OS VALORES PRÓPRIOS. Eles existiam porque o medidor é objeto gráfico (piso 3:1) e podia ser mais escuro que a tinta semântica; com a paleta nova a tinta já mede 4,0:1 e 5,2:1 sobre o trilho, e dois valores para um significado é o defeito de DIVERGÊNCIA que o F7 existe para pegar. Agora é UM. */ --medidor-trilho: var(--trilho-barra); --medidor-normal: var(--cor-acento); --medidor-aviso: var(--ambar); --medidor-critico: var(--rosa); /* Espaçamento em escala de 4 px e raios — usados pelas peças da F6 */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --raio-md: 12px; --raio-lg: 16px; --raio-pilula: 999px; /* ⚠️ O BOTÃO DEIXOU DE SER PÍLULA (TD-076 §5), E É QUEBRA DELIBERADA COM O VOCABULÁRIO ANTERIOR: é o que separa "console" de "página de festa". `--raio-tecla` são 9px e `--raio-peca` 14px, os dois degraus da direção B. ⚠️ `--raio-pilula` NÃO MORREU e não deve morrer: SELO continua pílula (selo não é botão), e a barra do medidor, o trilho do progresso e as peças do convite continuam lendo dele. Trocar os 14 consumidores de uma vez seria esquadrar a régua de progresso junto com o botão. */ --raio-tecla: 9px; --raio-peca: 14px; /* ========================================================================= CAMADA 2, GRUPO A — semânticos que TODA tela tem (T-0015, TD-045 item 1) ========================================================================= Declarados aqui com os valores do PAINEL; cada `.visual-*` do convite SOBRESCREVE os mesmos nomes. É esta tabela que faz um só botão, um só cartão e um só campo servirem as duas peles sem que ninguém repinte componente compartilhado com hexadecimal na mão — o que hoje custava 71 regras de tema. A pergunta que decide se um semântico entra aqui é uma só: "toda tela do produto tem isso?". SIM entra no `:root` e cada pele sobrescreve; NÃO (envelope, papel, ouro) é declarado só dentro de `.visual-*`. */ /* A superfície de cartão. Era `#fff` literal em dezenas de regras; aqui ela ganha nome para que a pele possa trocá-la sem tocar em componente. */ --cor-cartao: var(--sup-cartao); /* A coluna: fundo → superfície → cartão são TRÊS superfícies distintas. No painel a do meio é igual ao fundo; no convite ela é o papel. ⚠️ A DECLARAÇÃO ESCURA DELE SAIU, e a remoção é medida e não estética: os DOIS únicos consumidores de `var(--cor-superficie)` são `.tema-convite .topo` e `.tema-convite .palco`, e `.visual-classico`/`.visual-jardim` redeclaram o token nos dois. Ou seja, o `#221c30` do bloco escuro nunca pintou pixel nenhum — a família do convite não tem por onde ligar o modo escuro (o alternador só existe em `views/layouts/painel.php`). */ --cor-superficie: var(--cor-fundo); /* ⚠️ LIMITE DE COMPONENTE — NÃO É COR DE TEXTO. Este hexadecimal é o `--cor-texto-suave` APOSENTADO como texto na passagem A: como texto ele reprova AA (3,97:1 sobre `--cor-neutro-fundo`). Quem o reencontrar num diff e concluir que a correção não foi aplicada está lendo o cargo errado: como LIMITE o critério da WCAG 1.4.11 é 3:1, e ele mede 4,53:1 sobre branco e 4,30:1 sobre `--cor-fundo` — passa com folga. A cor não saiu da paleta; saiu do CARGO. E a distinção que precisa ficar na declaração porque o nome não a carrega: `--cor-borda` é DECORATIVA (filete, separador de seção) e é ISENTA de limiar; limite de campo e de componente é ESTE token, com ≥ 3:1. Foi por essa linha não existir que `--cor-borda` virou borda de campo e chegou a 1,21:1 — em SETE lugares, e não em cinco: a enumeração publicada estava curta e a Emenda 1 do design system a corrigiu (§7.5). Os sete, por SELETOR e nunca por número de linha, que envelhece em um dia: `.campo select` · `.campo input, .campo textarea` (o campo principal do painel, o que faltava) · `.acomp-lista input` · `.busca-input` · `.detalhe-form input` · `.evento-aba` · `.foto-upload-campo input[type="file"]`. ESPESSURA 1px, A MESMA EM REPOUSO E EM FOCO (designer-visual): "traço fino em 4,53:1 lê como filete; traço grosso em 3,4:1 lê como caixa". Era 1.5px com `--cor-borda`; o contraste subiu e a espessura desceu de propósito, e as regras de `:focus` só trocam a COR — a largura vem daqui, então as duas não têm como divergir. `.campo-checkbox` FICA DE FORA e continua em `--cor-borda`, com motivo medido: ali a borda não é o limite do controle — o controle é o `` NATIVO, que o navegador desenha. A caixa em volta é contêiner de agrupamento e alvo de toque. A pergunta que decide o próximo caso: *a borda é a única coisa que diz "isto é um controle"?* Se sim, `--limite`; se o controle se identifica sozinho, `--cor-borda`. INVARIANTE DE ESTADO FINAL desta seção, verificável sem navegador: grep -c 'border: 1[.]5px solid var(--cor-borda)' → 1 e o único sobrevivente é o `.campo-checkbox`. Mais que 1 significa que um limite de componente voltou para o token decorativo. ⚠️ O `[.]` NÃO É ENFEITE — ELE É O QUE FAZ O COMANDO NÃO SE CONTAR. Escrito como `1.5px`, o padrão casaria esta própria linha de comentário e o invariante mediria 2 para sempre, com o segundo sendo a explicação do primeiro. `[.]` casa o ponto literal do CSS e NÃO casa a si mesmo, então a prosa fica de fora e o comando publicado é o comando que roda. É o mesmo defeito que estragou três contadores do design system (§7.6, a regra "nenhum contador publicado é o total cru de um grep cujo padrão case prosa") — escrito aqui na forma que o resolve. ⚠️ T-0031: O CARGO CONTINUA, O VALOR MUDOU. `--fio-controle` é o contorno de CAMPO da direção B e é o único token que praticamente não muda entre os modos — 4,49:1 no cartão claro e 4,30:1 no poço escuro —, porque ele precisa ser visto contra os dois extremos. `#7a7290` saiu inteiro da folha; a trava F2 (teto de 1 dono) absorve a saída sozinha. */ --limite: var(--fio-controle); /* Foco: UM anel para o produto inteiro. `outline: none` sem substituto medido ≥ 3:1 é defeito, não estilo. ⚠️ O ANEL DEIXOU DE SER O ACENTO. Anel roxo vivo encostado num preenchimento roxo vivo mede 2,01:1 — reprova idêntico nos dois modos, e reprova justamente para quem o anel existe. `--anel` é o extremo da tinta (13,09:1 no cartão claro) e `--anel-folga` é o extremo do papel; quem precisa das duas faces usa as duas (`.tecla:focus-visible`). */ --foco: var(--anel); --foco-largura: 2px; --foco-desvio: 2px; /* Elevação TINGIDA com a tinta do próprio visual, nunca preta: preto sobre papel tingido suja para cinza. `var()` dentro de custom property é substituída no PONTO DE USO, então um cartão dentro de `.visual-jardim` recebe a sombra verde sem que a escala seja escrita duas vezes. ⚠️ T-0031: ele LÊ o triplete da tinta em vez de repetir o valor dela. Era `42 36 56`, que é `#2a2438` — a tinta ANTIGA escrita numa segunda notação, e por isso invisível a qualquer varredura de hexadecimal. */ --sombra-tinta: var(--tinta-1-rgb); /* A FORÇA sai da GEOMETRIA (T-0016, modo escuro). As três sombras continuam escritas UMA vez; o que muda por modo é a tinta e o alfa. Redeclarar `--elev-1..3` dentro do bloco escuro duplicaria a geometria em duas strings que vão divergir — é o mesmo defeito do âmbar com dois valores e dos dois `462px` de TD-045. ⚠️ `--sombra-a1: 0` NO ESCURO É DECISÃO, NÃO ESQUECIMENTO. `--elev-1` é o cartão em repouso, e no escuro ele já está separado por 1,14:1 de SUPERFÍCIE mais uma régua a 1,17:1. Sombra ali só sujaria a borda. Quem reencontrar o zero num diff e "consertar" para `.28` põe uma auréola cinza em todo cartão do produto. */ --sombra-a1: 0.06; --sombra-a2: 0.10; --sombra-a3: 0.16; --elev-1: 0 1px 2px rgb(var(--sombra-tinta) / var(--sombra-a1)), 0 2px 6px rgb(var(--sombra-tinta) / var(--sombra-a1)); --elev-2: 0 4px 14px rgb(var(--sombra-tinta) / var(--sombra-a2)); --elev-3: 0 10px 30px rgb(var(--sombra-tinta) / var(--sombra-a3)); /* O CABEÇALHO É O ÚNICO LUGAR QUE AINDA PRECISA DE SOMBRA NO ESCURO, e o motivo é de geometria e não de gosto: `.topo` é FIXO e passa POR CIMA do conteúdo enquanto se rola, então a superfície dele e a do cartão que passa por baixo são A MESMA — elevação por superfície não resolve. Token de componente, e não uma redeclaração de `.topo` dentro do bloco escuro: o bloco de modo contém EXCLUSIVAMENTE linhas `--token: valor`. */ --elev-topo: var(--elev-1); /* ------------------------------------------------------------------------- A ELEVAÇÃO DA PEÇA DO CONSOLE (T-0031) — o segundo token de componente ------------------------------------------------------------------------- ⚠️ ELE EXISTE PARA NÃO MEXER EM `--elev-1`, E ISSO É O PONTO INTEIRO. `--sombra-a1: 0` no escuro é DECISÃO da T-0016, escrita duas regras acima com o aviso de que "consertar" o zero põe uma auréola em todo cartão do produto. Ela continua valendo para os 18 destinos que leem `--elev-1`. SÓ QUE A DIREÇÃO B DECIDIU O CONTRÁRIO PARA O CONSOLE, e por escrito, na §1 do demo aprovado: "no escuro o fio não separa (1,19:1); quem separa é o degrau de superfície MAIS a sombra, e por isso a sombra é profunda". MEDIDO POR MIM na tela servida, na pele escura, antes de escrever isto: `.cabine-cartao`, `.cabine-rail`, `.cabine-avisos`, `.cabine-risco` e os 14 cartões de conta renderizavam `rgba(0,0,0,0)` — sombra declarada e alfa zero, ou seja, NADA —, e o que sobrava para separar era 1,15:1 de superfície contra a página e 1,12:1 de fio. A zona de risco era pior: 1,08:1 contra o cartão que a hospeda. ENTÃO A ELEVAÇÃO VIRA TOKEN DE COMPONENTE, como `--elev-topo` já é. No claro ele É `--elev-1` — leitura, não cópia, então zero pixel muda na pele que o usuário aprovou. No escuro ele é a elevação de repouso do demo, com a geometria de lá: um fio de LUZ por dentro da aresta de cima (a peça se levanta), uma sombra de contato de 1px e uma sombra profunda com raio negativo, que é o que dá profundidade sem borrar a vizinhança. ⚠️ POR QUE NÃO `var(--elev-2)`, QUE SERIA UMA LINHA SÓ: `--elev-2` é o degrau de HOVER desta mesma peça (`.cabine-conta:hover`, `.admin-conta:hover`). Apontar o repouso para ele apagaria a diferença entre parado e sob o ponteiro — a escada teria dois degraus com a mesma altura. */ --elev-cabine: var(--elev-1); /* Colunas. 32rem substitui os dois `max-width: 462px` que vinham copiados de um tema aposentado: 462 ÷ 16 = 28,875rem não está em escala nenhuma, e em `rem` a coluna acompanha quem aumenta a fonte do sistema (WCAG 1.4.4). Em 375px de viewport as duas larguras são recortadas pela tela — o convidado no celular não vê diferença. */ --coluna-convite: 32rem; /* ⚠️ A MEDIDA DE LEITURA — 38rem (608px), e ela é o que separa "alargar o contêiner" de "ter desktop". Alargar a coluna para 1160px e deixar o parágrafo ocupar tudo produz linhas de 1128px: em 18px de Nunito são ~124 caracteres, contra os 45–75 em que o olho não perde a volta da linha. 608px em 18px dão ~67. Quem escreve bloco de TEXTO na página inicial usa esta medida; quem escreve GRADE (passos, benefícios) usa a largura toda — é essa distinção que faz a tela grande parecer tela grande. */ --medida: 38rem; /* Movimento. `--mov-cena` é EXCEÇÃO DECLARADA: a diretriz da casa é 150–300ms, e só o envelope abrindo passa disso, porque é o único momento teatral do produto. Nenhuma outra transição do sistema pode usá-la. */ --mov-rapido: 160ms; --mov-medio: 240ms; --mov-cena: 650ms; --curva-padrao: cubic-bezier(0.4, 0, 0.2, 1); --curva-entrada: cubic-bezier(0, 0, 0.2, 1); --curva-saida: cubic-bezier(0.4, 0, 1, 1); /* Camadas. Nenhum `z-index` novo fora desta escala. */ --z-ornamento: -1; --z-conteudo: 2; --z-cabecalho: 10; --z-capa: 20; /* ========================================================================= AS DUAS FAMÍLIAS — Nunito no corpo, Space Grotesk no display (TD-076 §6) ========================================================================= A segunda família é o que dá PERSONALIDADE TIPOGRÁFICA à direção B, e ela tem cargo estreito e declarado: DISPLAY (manchete, número grande), NÚMERO (tudo que é medida, com `tabular-nums`) e MICRO-RÓTULO (as maiúsculas espaçadas). Texto corrido continua em Nunito — trocar a fonte do corpo mudaria a leitura de 18 telas para ganhar nada. ⚠️ `--f-corpo` REPETE O QUE O `body` JÁ DECLARA, e repetir é o ponto: as peças que precisam VOLTAR para o corpo depois de um ancestral em display (é o caso de `.palco-meta` dentro da banda) precisam de um nome para pedir de volta. Sem ele, a volta seria a lista de fallback escrita à mão uma segunda vez — e as duas listas divergiriam no primeiro ajuste. ⚠️ A LISTA DE RESERVA IMPORTA MAIS DO QUE PARECE: as duas famílias vêm por webfont com `display=swap`, então o navegador PINTA NO RESERVA e troca depois. O reserva não é o caso raro — é o PRIMEIRO QUADRO DE TODA VISITA FRIA (a lição da tipografia medida na T-0021). Por isso o reserva do display é a Nunito, e não `sans-serif` genérico: o primeiro quadro fica com a fonte do produto em vez de com a fonte do aparelho. */ --f-corpo: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --f-display: 'Space Grotesk', 'Nunito', -apple-system, "Segoe UI", Arial, sans-serif; /* Tipo — oito degraus. O legado ainda tem 42 tamanhos cravados e arredondá-los para cá é da F8, com lista branca (arredondar MUDA pixels e por isso não é diff-limpo). O que entra a partir de agora usa a escala. `--fs-3` é o piso de campo: abaixo de 16px o iOS dá zoom sozinho. */ --fs-1: 0.7rem; --fs-2: 0.85rem; --fs-3: 1rem; --fs-4: 1.125rem; --fs-5: 1.5rem; --fs-6: 1.8rem; --fs-7: 2.25rem; /* O oitavo degrau, que `design-system.md` §2.7 já especificava e o `:root` não declarava (achado do `designer-visual`, §A.3). Ele existe por UM motivo medido: a manchete da página inicial parava de crescer em 480px de viewport, porque `clamp(--fs-6, 7.5vw, --fs-7)` bate o teto quando 7,5 % da largura chega a 36px — 7,5 % de 480 = 36. De 480 a 2560 a manchete tinha exatamente o mesmo tamanho, e é isso que fazia a página "parecer mobile" numa tela de 1600. Com `--fs-8` o teto passa a valer em 682,7px e o valor em 375px NÃO MUDA (7,5 vw = 28,1 < 28,8, o mínimo vence). */ --fs-8: 3.2rem; /* Entrelinha — os três degraus do design system (§2.7). `--lh-normal` é o 1.6 que o `body` já aplica ao produto inteiro: o token não muda pixel nenhum, só dá NOME ao valor que já vigora, para que o que entra a partir de agora não volte a cravar número. */ --lh-apertado: 1.25; --lh-normal: 1.6; --lh-solto: 1.75; /* Espaço — a mesma lei de N × 4px que a F6 já usava, com os degraus que faltavam. */ --e-6: 24px; --e-8: 32px; --e-10: 40px; /* O degrau que a faixa de tinta pediu (T-0015, sub-etapa 6g). Ele NÃO é valor novo: é 16 × 4px, a mesma lei dos oito acima. Existe porque o maior degrau da escala eram 40px, e 40px de respiro vertical dentro de uma faixa que sangra de ponta a ponta lê como tarja, não como abertura — o recuo interno da faixa tem de ser MAIOR que o vão entre dois blocos quaisquer da página, que é justamente `--e-10`. */ --e-16: 64px; --raio-sm: 8px; --raio-xl: 24px; --alvo-toque: 44px; /* O TEXTO BRANCO SOBRE SUPERFÍCIE ESCURA — o palco do painel e a capa do convite. O valor coincide com `--cor-cartao`, e a coincidência é de PALETA, não de cargo: ali `#ffffff` é SUPERFÍCIE de cartão, aqui é TINTA DE TEXTO sobre superfície escura. É a mesma distinção que o comentário de `--limite` faz três telas acima — a cor não sai da paleta, sai do cargo. Escrever `color: var(--cor-cartao)` faria a próxima pele escura herdar a cor do cartão dela como cor de texto. ⚠️ ELE NASCEU NA FAIXA DE TINTA DA PÁGINA INICIAL (T-0015, 6g), COM CINCO IRMÃOS — `--tinta`, `--tinta-cartao`, `--tinta-texto-suave`, `--quente`, `--confirmado-escuro` — e o teto `--brilho-alfa-max`. A T-0017 trocou a página pela vitrine (TD-082), que tem a paleta do arquivo do Stitch em tokens `--vitrine-*`; os seis ficaram sem consumidor nenhum na folha (contado em 2026-10-06) e saíram junto com a faixa. Este fica: tem dezessete consumidores fora dela (mesma contagem). */ --tinta-texto: var(--branco); /* ========================================================================= O CANHOTO — a banda da festa que abre o painel do dono (TD-076, T-0031) ========================================================================= Direção: `demos/demo-painel-B-cabine.html`, do `designer-visual`, aprovada pelo usuário. SUBSTITUI a banda da direção A ("o palco", T-0016), e a substituição foi decisão explícita do usuário em 2026-09-05: deixar a banda como estava faria a tela ter DUAS identidades convivendo — e foi identidade misturada que abriu a T-0030. ⚠️ O PREFIXO CONTINUA `--palco-*` E AS CLASSES CONTINUAM `.palco-*`. Não é descuido: `Contrato_de_layout_test` prende `.palco-info`, `.palco-meta` e `.palco-titulo` por SELETOR, `Regua_na_tela_test` prende `.palco-farol-num` e `Tema_do_convite_test` prende `.palco-destinos` e `.palco-destino`. Renomear tudo para `canhoto-*` trocaria o vocabulário de 27 classes e 6 asserções para não mudar um pixel — e este produto já registrou que renome puro é recusado (arbitragem T-0016). O OBJETO mudou de nome na prosa; o vocabulário do código fica. A TESE, e ela resolve UMA tensão: a banda é CELEBRAÇÃO e a direção B é CONTENÇÃO. O erro fácil seria escolher um dos dois. A saída não é o meio-termo: é trocar o MATERIAL. A banda deixa de ser superfície pintada e passa a ser um OBJETO — o canhoto, a metade do convite que fica com quem dá a festa. Tem papel, tem grão, tem um rasgo com duas mordidas nas bordas e uma linha picotada separando o que FICA (a festa e o número) do que SAI (o link do convite). O rasgo DIZ alguma coisa: ele explica, pela forma, a única ação que a tela tem. O QUE FOI APOSENTADO, com o motivo de cada um: · `--palco-3` E `--palco-brilho-alfa` — os três `radial-gradient` de brilho e o `linear-gradient` de três paradas. É a assinatura que TD-076 §4 aposentou. A superfície agora é CHAPADA, e o ganho é medido: sem gradiente não há banding, e o teto deixa de ser um canto e passa a ser a banda inteira (a de produção só chegava a 2,20:1 contra o papel escuro NUM canto; esta está a 1,93 em TODA a área). · `--palco-piso` — ele existia porque o degrau banda/página INVERTIA de sinal entre os modos, com a separação migrando para a ponta escura do gradiente. Sem gradiente não há duas pontas: `--palco-1` é o piso e o teto é `--palco-teto`. Régua sem gradiente para medir é régua sem trabalho. · `--palco-halo` E `--palco-halo-alfa` — sombra EXTERNA não pode existir aqui: `mask` recorta tudo que o elemento pinta, inclusive `box-shadow` externo, e o resultado seria uma sombra cortada nas mordidas. A profundidade vem de duas sombras INTERNAS (que a máscara preserva), mais o degrau e a silhueta. ⚠️ QUATRO TOKENS MUDAM COM A PELE; ONZE NÃO MUDAM COM NADA. A banda é um OBJETO IMPRESSO, e tinta impressa não troca com a luz da sala — é a mesma decisão que TD-076 §9 tomou para o QR. Por isso os invariantes moram SÓ aqui no `:root` e NÃO são repetidos no bloco escuro: se um dia aparecerem lá, alguém repintou à mão o que era pigmento. */ /* AS DUAS SUPERFÍCIES DA BANDA. ⚠️ `--palco-1-rgb` SAIU JUNTO COM O HALO. Ele existia porque a sombra externa da banda consumia o MESMO roxo em `rgb(... / alfa)`, e o triplete era o que impedia o valor de ser escrito duas vezes. Sem halo — `mask` recorta sombra externa — sobrou UM consumidor, e triplete com um consumidor só é indireção sem trabalho. As duas sombras internas que ficaram são PRETAS (`rgb(0 0 0 / .22)` e `/ .65`), não são esta cor. */ --palco-1: #3a1a78; /* 10,60:1 ABAIXO do papel */ --palco-2: #4a2a91; /* selo, campo e trilho: degrau interno 1,27 */ /* ⚠️ AS DUAS RÉGUAS — NUNCA TINTA. São o pixel mais claro que o grão produz sobre cada superfície (branco a .085). TODO par da banda foi medido contra ELAS, e não contra a cor chapada: medir contra a chapada é medir o caso fácil. Se alguém as pintar numa superfície, o teto vira piso e a medição perde o sentido. Mexeu na superfície ou no alfa do grão? Mede de novo. */ --palco-teto: #4b2d83; /* teto de `--palco-1` · 10,14:1 contra o papel */ --palco-teto-2: #593c9a; /* teto de `--palco-2` */ /* OS INVARIANTES DE MODO — pigmento, não pele. Cada valor está medido contra os DOIS tetos (`--palco-teto` no claro, `#5a40ab` no escuro), e o pior dos dois é o que manda. A tinta da banda continua sendo `--tinta-texto`, que já é o branco invariante da superfície de marca e tem teste guardando. */ --palco-suave: #cfc2ea; /* 6,27 no claro · 4,56 no escuro — AA nas duas */ --palco-menta: #5fd39a; /* 5,63 no claro · 4,09 no escuro — objeto gráfico (≥3) */ /* ⚠️ NA BANDA, FIO É LUZ (alfa) E PREENCHIMENTO É TINTA (sólido). A divisão é MEDIDA e não estética: preenchimento em rgba compõe com o que estiver atrás, e `--palco-suave` sobre branco-a-.14 mede 4,26 no claro e 3,23 no escuro — REPROVA nas duas. É a mesma classe de defeito que TD-076 matou nas pastilhas ao torná-las sólidas. Fio é objeto gráfico (piso 3:1) e composto ele mede 4,36 e 3,50. */ --palco-fio: rgb(255 255 255 / 0.55); /* contorno · 4,36 claro · 3,50 escuro */ --palco-luz: rgb(255 255 255 / 0.28); /* o fio de luz do topo: 4,03:1 no escuro */ --palco-toque: rgb(255 255 255 / 0.12); /* hover do vazado · branco em cima 7,50 / 5,69 */ /* A opacidade do grão. NÃO é enfeite isento: camada de ruído sobre superfície é o fundo real de cada glifo, e é ela que produz os dois `--palco-teto*`. Sobre superfície chapada ele não está lá para matar banding (não há banding sem gradiente) — está para o objeto ler como CARTÃO e não como div. */ --palco-grao-alfa: 0.085; /* O raio do rasgo — as duas mordidas que fazem o canhoto ser canhoto. */ --palco-mordida: 9px; /* ⚠️ ESTE TOKEN NÃO É COR, E ELE EXISTE PORQUE UMA TRAVA COBROU — o que é a trava funcionando. `mask-image` lê SÓ o canal ALFA da imagem: qualquer cor opaca produz exatamente o mesmo recorte, e o preto é a forma canônica de escrever "alfa 1" dentro de um gradiente. Escrito à mão, `#000` nas quatro declarações de máscara reprovava no F8 ("hexadecimal literal pintando propriedade normal") — e o F8 estava CERTO quanto à forma: quem carrega literal é token. Aqui o literal ganha nome, cargo e um lugar só, e a cerca volta a proteger de verdade: se alguém trocar isto por `#fff` amanhã, o recorte inverte e o token diz onde mexer. Ele é invariante de modo, de pele e de tudo: alfa não tem paleta. */ --mascara-cheia: #000; /* ========================================================================= AS ILHAS DE PAPEL — os quatro pigmentos INVARIANTES DE MODO da banda ========================================================================= A banda é o único lugar do produto em que uma superfície CLARA vive dentro de uma superfície ESCURA: o bilhete de data e o botão "Copiar". Elas liam `--cor-cartao`/`--cor-texto`/`--cor-texto-suave`, que são semânticos DA PÁGINA — e semântico de página gira com o modo. Medido, e são três desfechos e nenhum aceitável: · os dois giram ....... o bilhete vira um buraco na banda (1,86:1) e a tinta sobre ele mede 1,03:1 · só a tinta gira ..... 1,28:1 e 2,54:1 sobre papel branco · só a superfície gira. 1,03:1 Com os pigmentos abaixo o bilhete continua sendo o que a anatomia diz que ele é — papel branco sólido — nos DOIS modos. É a peça que mata o BUG-TD-055, e ela não pode depender de qual modo está ligado. ⚠️ TRÊS DELES SÃO O MESMO HEXADECIMAL DE UM PIGMENTO DA PELE CLARA, E ISSO É DECLARADO. `#272039` é o valor de `--tinta-1` no claro, `#5c5470` o de `--tinta-3` e `#eceaf0` o de `--pastilha-neutra`. Escrevê-los como `var(--tinta-1)` seria mais bonito e ERRADO: os pigmentos da pele GIRAM com o modo, e no escuro o bilhete ficaria com tinta clara sobre papel branco. A coincidência é de PALETA, não de CARGO — a mesma distinção que `--tinta-texto` faz com `--cor-cartao` desde a T-0015. TD-076 revogou, no registro de travas, justamente a trava que proibia dois tokens com o mesmo valor: ela proibia esta correção. INVARIANTE, por SELETOR: os únicos consumidores destes quatro são `.palco-bilhete`, `.palco-bilhete-dia`, `.palco-bilhete-mes`, `.palco-btn-claro` e `.palco-btn-claro:hover`. Um sexto seletor lendo semântico de página DENTRO da banda é o defeito voltando. */ --palco-papel: var(--branco); /* contra o teto da banda 10,49 claro · 7,62 escuro */ --palco-papel-tinta: #272039; /* sobre o papel 15,53:1 */ --palco-papel-suave: #5c5470; /* sobre o papel 7,10:1 */ --palco-papel-toque: #eceaf0; /* o papel sob o dedo; a tinta nele dá 13,01:1 */ /* ========================================================================= O PAINEL DO DONO NO ARQUIVO DO STITCH (T-0038) — a família `--dono-*` ========================================================================= A paleta do arquivo (`vibrant_rsvp_mobile_experience/DESIGN.md`) — a MESMA família da vitrine (`--vitrine-*`), que não alcança aqui porque é escopada em `.tema-vitrine`. Ela veste o cabeçalho e o rodapé de TODA tela de `layouts/painel` e o conteúdo das telas do dono (`.dono`). ⚠️ POR QUE NO `:root` E NÃO NUM ESCOPO DE CLASSE, como a vitrine: o cabeçalho e o rodapé desta família não têm ancestral comum com classe própria (`Tema::Painel` não emite classe no ``, por contrato), e declarar a paleta três vezes — no topo, no rodapé e no `.dono` — seria três lugares para cada cor. É a mesma forma do `--palco-*`: um bloco no `:root` e as linhas que giram no `:root.modo-escuro`, nas regras de ouro daquele bloco (só token, nenhum token só no escuro, nenhum hexadecimal repetido dentro dele). PIGMENTOS (não giram com o modo): a banda da festa, o bilhete, os botões violeta e as sombras coloridas — superfície escura ou papel impresso em QUALQUER modo. PAPÉIS (giram): o resto, com o nome do trabalho que fazem. ⚠️ TRÊS HEXADECIMAIS COINCIDEM COM TOKENS DE OUTRO CARGO E ISSO É DECLARADO: `#3a1a78` (`--palco-1` claro), `#e9e5f2` (`--cor-fundo` claro) e `#006c44` (o verde do selo da vitrine). A coincidência é de PALETA, não de CARGO — `--palco-1` gira com o modo e o meio do degradê do arquivo não. */ /* Pigmentos */ --dono-palco-inicio: #27104d; --dono-palco-meio: #3a1a78; --dono-palco-fim: #1a0b36; --dono-noite: #1d1335; /* surface-dark */ --dono-violeta: #6633ee; /* primary-container: o botão cheio */ --dono-violeta-fundo: #4d00d3; /* primary: o botão sob o ponteiro, o mês do bilhete */ --dono-menta: #6ffcb5; /* secondary-fixed: destaque sobre a banda */ --dono-menta-forte: #4fdf9b; /* secondary-fixed-dim: o ponto da página pública */ --dono-menta-tinta: #002112; /* on-secondary-fixed: o ícone do aviso de sucesso */ --dono-verde-papel: #006c44; /* verde sobre papel branco, nos dois modos */ --dono-erro-ponto: #ba1a1a; /* o ponto de "recusados" sobre a banda */ --dono-bilhete-tinta: #110b22; --dono-bilhete-ano: #6b647b; /* 5,62:1 sobre o bilhete branco */ --dono-palco-luz-roxa: rgb(102 51 238 / 0.2); --dono-palco-luz-rosa: rgb(171 0 165 / 0.2); --dono-palco-vidro-leve: rgb(255 255 255 / 0.05); --dono-palco-vidro: rgb(255 255 255 / 0.1); --dono-palco-vidro-forte: rgb(255 255 255 / 0.15); --dono-palco-vidro-sob: rgb(255 255 255 / 0.25); --dono-palco-picote: rgb(255 255 255 / 0.2); --dono-palco-ponto: rgb(255 255 255 / 0.4); --dono-palco-tinta-60: rgb(255 255 255 / 0.6); --dono-palco-tinta-70: rgb(255 255 255 / 0.7); --dono-palco-tinta-80: rgb(255 255 255 / 0.8); --dono-palco-pe: rgb(0 0 0 / 0.25); --dono-farol-fundo: rgb(29 19 53 / 0.8); --dono-menta-20: rgb(111 252 181 / 0.2); --dono-menta-15: rgb(111 252 181 / 0.15); --dono-menta-brilho: 0 0 12px rgb(95 211 154 / 0.6); --dono-sombra-palco: 0 25px 50px -12px rgb(0 0 0 / 0.25); --dono-sombra-bilhete: 0 8px 16px rgb(0 0 0 / 0.25); --dono-sombra-interna: inset 0 2px 4px rgb(0 0 0 / 0.05); --dono-sombra-papel: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --dono-sombra-tecla: 0 8px 20px -2px rgb(102 51 238 / 0.35); --dono-sombra-tecla-sob: 0 12px 28px -2px rgb(102 51 238 / 0.45); --dono-sombra-tecla-grande: 0 10px 26px -2px rgb(102 51 238 / 0.4); --dono-sombra-tecla-grande-sob: 0 14px 32px -2px rgb(102 51 238 / 0.5); --dono-sombra-salvar: 0 6px 20px rgb(77 0 211 / 0.35); --dono-sombra-salvar-sob: 0 8px 24px rgb(77 0 211 / 0.45); --dono-sombra-aba: 0 2px 8px rgb(102 51 238 / 0.25); /* Papéis — o claro */ /* O papel do arquivo — e o ESPELHO do PHP desde a T-0038: `Tema::Painel` manda este valor para a barra do navegador (`corDaBarra`) e para o fundo do aplicativo instalado (`corDeFundo`), com teste comparando os dois lados. Mudou aqui, muda lá no mesmo commit. */ --dono-fundo: #fdf7ff; --dono-sup-baixa: #f7f1ff; /* surface-container-low */ --dono-sup-baixa-60: rgb(247 241 255 / 0.6); --dono-sup-media: #f2ebfa; /* surface-container */ --dono-sup-alta: #ece6f4; /* surface-container-high */ --dono-sup-maxima: #e6e0ef; /* surface-container-highest / surface-variant */ --dono-sutil: #e9e5f2; /* surface-subtle: filetes e o chip "opcional" */ --dono-perigo-zona: rgb(236 230 244 / 0.6); --dono-cartao: var(--branco); /* surface-container-lowest */ --dono-borda-cartao: rgb(229 225 238 / 0.6); --dono-borda-cartao-cheia: #e5e1ee; /* card-border */ --dono-tracejado: #cac3d9; /* outline-variant: os pontos e o tracejado da foto */ --dono-texto-forte: #110b22; /* text-primary-dark */ --dono-texto: #1c1a24; /* on-surface */ --dono-texto-medio: #494456; /* on-surface-variant */ --dono-texto-suave: #6b647b; /* text-muted: 5,34 no papel · 5,08 no -low · 4,54 no "opcional" */ --dono-roxo: var(--dono-violeta-fundo); /* primary como TINTA */ --dono-roxo-sob: var(--dono-violeta); /* o preenchimento roxo sob o ponteiro */ --dono-roxo-10: rgb(77 0 211 / 0.1); --dono-pastilha-roxa: #e7deff; /* primary-fixed */ --dono-pastilha-roxa-sob: #ccbeff; /* primary-fixed-dim */ --dono-tinta-roxa: #1f0060; /* on-primary-fixed */ --dono-verde: var(--dono-verde-papel); /* o ajuste AA da vitrine: #006c44, não o #138855 do arquivo */ --dono-verde-10: rgb(0 108 68 / 0.1); --dono-aviso-linha: #005233; /* on-secondary-fixed-variant: 8,60:1 sobre a pastilha verde */ --dono-pastilha-verde: #e8faf2; /* badge-success-bg */ --dono-pastilha-menta: var(--dono-menta); --dono-menta-30: rgb(111 252 181 / 0.3); --dono-tinta-menta: #007349; /* on-secondary-container */ --dono-rosa: #83007e; /* tertiary */ --dono-rosa-vivo: #ab00a5; /* tertiary-container */ --dono-rosa-10: rgb(171 0 165 / 0.1); --dono-erro: var(--dono-erro-ponto); /* error */ --dono-erro-sob: #ffdad6; /* error-container */ --dono-erro-sob-tinta: #93000a; /* on-error-container */ --dono-erro-10: rgb(186 26 26 / 0.1); --dono-erro-40: rgb(255 218 214 / 0.4); --dono-erro-cheio-tinta: var(--branco); --dono-luz-roxa: rgb(231 222 255 / 0.3); --dono-luz-menta: rgb(111 252 181 / 0.2); --dono-sombra-topo: 0 1px 8px rgb(29 19 53 / 0.03); --dono-sombra-rodape: 0 -1px 8px rgb(29 19 53 / 0.02); --dono-sombra-cartao: 0 8px 24px -4px rgb(29 19 53 / 0.06), 0 2px 6px -1px rgb(29 19 53 / 0.04); --dono-sombra-secao: 0 4px 20px -2px rgb(29 19 53 / 0.05), 0 1px 4px rgb(29 19 53 / 0.03); --dono-sombra-leve: 0 1px 2px rgb(0 0 0 / 0.05); --dono-sombra-media: var(--dono-sombra-papel); /* Letra, escala e medidas do arquivo (DESIGN.md) */ --dono-letra: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --dono-icones: 'Material Symbols Outlined'; --dono-titulo-xl: 2.5rem; /* 40px — headline-xl */ --dono-titulo-lg: 1.75rem; /* 28px — headline-lg */ --dono-titulo-md: 1.25rem; /* 20px — headline-md */ --dono-titulo-sm: 1.0625rem; /* 17px — headline-sm */ --dono-corpo-lg: 1rem; /* 16px — body-lg */ --dono-corpo-md: 0.875rem; /* 14px — body-md */ --dono-corpo-sm: 0.8125rem; /* 13px — body-sm e label-md */ --dono-miudo: 0.75rem; /* 12px — text-xs */ --dono-rotulo: 0.6875rem; /* 11px — label-sm */ --dono-topo-altura: 5rem; /* o cabeçalho de 80 px */ --dono-largura: 80rem; /* max-w-7xl */ /* A raiz declara o esquema do documento. O motivo de isto morar no elemento RAIZ está no bloco do modo escuro, logo abaixo. */ color-scheme: light; } /* ============================================================================= O MODO ESCURO - e ele e UM BLOCO, com UM lugar por par (token, modo) ============================================================================= Decisao do usuario (TD-048, 2026-08-21): A PRIMEIRA VISITA E SEMPRE CLARA. Quem abre o sistema com o aparelho no escuro ve o claro uma vez e aperta o botao; a escolha fica no cookie `td_modo` e vale dai em diante. NAO existe `prefers-color-scheme` decidindo nada nesta folha, e a razao e estrutural: seguir o sistema na primeira visita exige a paleta escura escrita em DOIS lugares - `@media (prefers-color-scheme: dark) { :root:not(.modo-claro) }` MAIS `:root.modo-escuro` -, ~35 declaracoes duplicadas em blocos distantes, que e a forma exata do defeito "dois valores para o mesmo nome" que este produto ja pagou tres vezes. Aqui o bloco escuro existe UMA vez. A CLASSE VAI NO E NAO NO , E O MOTIVO SAO PIXELS QUE NINGUEM DESENHA. `color-scheme` so pinta os controles NATIVOS, a barra de rolagem e o canvas a partir do elemento RAIZ. Este produto e feito de controle nativo - date, time, number, select, checkbox, radio, file, ,
-, e a tela de criar evento sozinha usa oito deles. Sem `color-scheme: dark` na raiz, o seletor abre um menu branco e o calendario abre branco dentro de uma pagina quase preta. E o defeito mais visivel que um modo escuro pode ter e ele nao aparece em captura de tela nenhuma. Por isso este bloco NAO usa `body.` e por isso a classe de modo nao sai de `Pagina::classesDoBody()`: modo e atributo do DOCUMENTO, nao da pagina. O CONVITE NAO ENTRA, E ISSO E ESTRUTURA E NAO DISCIPLINA: o alternador so existe em `views/layouts/painel.php`, entao `layouts/publico` NAO TEM ONDE ligar o modo escuro. Nenhuma regua do convidado dobra. ESTE BLOCO CONTEM EXCLUSIVAMENTE LINHAS `--token: valor`, como o bloco de um `.visual-*`. Uma `color:` ou um `padding:` aqui dentro significa que uma peca foi repintada a mao em vez de ler a camada 2 - e essa peca vai divergir. A REGUA DE OITO PARES, medida no escuro ANTES do primeiro pixel (docs/modo-escuro.md §1) e REFEITA para a pele da direcao B (TD-076), que trocou os oito valores sem trocar UMA regra: 1. tinta sobre papel ......... #f4f3f7 / #17131f ...... 16,54:1 (piso 4,5) 2. secundaria sobre papel .... #a89cc3 / #17131f ....... 7,14:1 (piso 4,5) 3. secundaria sobre cartao ... #a89cc3 / #241f32 ....... 6,23:1 (piso 4,5) 4. secundaria sobre aviso .... #a89cc3 / #392f36 ....... 5,44:1 (piso 4,5) 5. texto na marca ............ #ffffff / #db2777 ....... 4,60:1 (piso 4,5) 6. borda de campo ............ #7b719b / #241f32 ....... 3,55:1 (piso 3,0) 7. anel de foco .............. #f4f3f7 / pagina e cartao 16,54 e 14,43:1 8. medidor sobre o trilho .... #b3a1ff / #373244 ....... 4,84:1 (piso 3,0) A TRAVA DE MEDICAO INVERTE AQUI: no claro a superficie de referencia e a mais ESCURA; no escuro e a mais CLARA. Os pares 3 e 4 sao medidos contra o cartao e contra o fundo de aviso justamente por isso - medir a secundaria so contra a pagina (7,14:1) seria repetir, de cabeca para baixo, o erro de medir contra a superficie que perdoa. ============================================================================= ⚠️ O QUE ESTE BLOCO DEIXOU DE PRECISAR ESCREVER (T-0031) ============================================================================= Ele tinha 33 linhas e passou a ter as da CAMADA 1. A camada 2 quase inteira SUMIU daqui, e nao por descuido: `var()` dentro de custom property e substituida NO PONTO DE USO, entao `--cor-texto: var(--tinta-1)` declarado uma unica vez no `:root` ja entrega a tinta CLARA quando esta classe esta ligada. Redeclarar cada semantico aqui seria escrever a mesma indirecao duas vezes - dois lugares para um par, que e exatamente o que este bloco existe para nao ter. TRES EXCECOES, e cada uma tem motivo verificavel: · `--cor-fundo` carrega LITERAL nos dois modos porque tem espelho em PHP (`Tema::corDaBarra(Escuro)`), e espelho compara STRING. · `--cor-acento` e redeclarado aqui de proposito: e a prova, cobrada por `Contrato_do_modo_de_cor_test`, de que a marca como TINTA gira e a marca como PREENCHIMENTO nao. · `--sombra-*` e `--elev-topo` sao numeros de elevacao, nao cor, e nao tem pigmento de onde ler. ============================================================================= */ :root.modo-escuro { color-scheme: dark; /* ========================================================================= CAMADA 1 — A PELE ESCURA, "A CABINE" ========================================================================= AS SUPERFICIES. A pagina NAO e preta: #000 com texto claro produz halo severo e cansaco em uso longo, que e literalmente a queixa que abriu a T-0016. E ela e tingida de ROXO, nao cinza - o produto continua reconhecivel com a luz apagada. Mais alto = mais claro, como no claro: ELEVAR E SEMPRE CLAREAR. */ --moldura: #0f0d14; /* o carvao: o extremo ESCURO da escala */ --cor-fundo: #17131f; /* o papel (camada 2, mas com o literal aqui) */ --sup-cartao: #241f32; /* 1,15:1 acima do papel */ --sup-hover: #2a233a; /* interacao anda para a tinta: CLAREIA */ --sup-press: #302842; /* ⚠️ TRES TOKENS LEEM `--moldura` EM VEZ DE REPETIR `#0f0d14`, e a leitura nao e economia de digitacao: e a regra "um lugar por par (token, modo)", cobrada por teste. Os TRES sao cargos DISTINTOS (TD-076 quebrou o antigo `--chassi` em quatro nomes justamente porque no claro eles vao para lados opostos: `#f3f0fa`, `#ffffff` e `#ffffff`). Aqui os tres calham no MESMO ponto da escala, que e o extremo escuro - e o extremo escuro tem UM nome, que e a moldura. Quem quiser separa-los de novo declara o literal e o teste avisa. */ --sup-campo: var(--moldura); /* o poco AFUNDA abaixo do cartao */ --tinta-viva: var(--moldura); /* a tinta em cima de preenchimento vivo */ --anel-folga: var(--moldura); /* AS TINTAS. As margens do escuro sao MAIORES que as do claro de proposito: texto claro sobre fundo escuro perde definicao por halo, e o minimo da WCAG foi calibrado em condicoes que nao modelam esse efeito. Onde a norma da 4,5, aqui se entrega 6. Nao "otimize" isto depois. Medidas sobre moldura · papel · cartao · pressionado. */ --tinta-1: #f4f3f7; /* 16,54 · 14,43 · 13,58 · 12,61 */ --tinta-2: #c8c1d9; /* 10,52 · 9,18 · 8,63 · 8,02 */ --tinta-3: #a89cc3; /* 7,14 · 6,23 · 5,86 · 5,44 */ /* ⚠️ NO ESCURO FIO E TEXTURA, NAO INFORMACAO (TD-076 §7), e a consequencia de projeto e dura: NENHUM ESTADO PODE DEPENDER DE COR DE BORDA aqui. Quem separa e o degrau de superficie mais a sombra, e e por isso que a sombra deste modo e profunda. `--fio-controle` NAO entra neste bloco: ele e o unico token que praticamente nao muda entre os modos, porque precisa ser visto contra os DOIS extremos (4,49 no cartao claro, 3,55 aqui). */ --fio-1: #2e2740; /* 1,19:1 */ --fio-2: #3a3350; /* 1,42:1 */ --fio-pendente: #8677ab; /* o tracejado "ainda nao aconteceu": 3,98:1 */ /* O ACENTO. Ele responde por DOIS pares e passa nos dois: tinta escura em cima dele (8,69:1) e ele como tinta sobre o cartao. Hover e PRESSIONADO andam na direcao da tinta - no escuro, isso e mais LUZ. */ --acento: #b3a1ff; --acento-forte: #c7baff; /* hover: mais presenca (10,93:1) */ --acento-fundo: #9d8cff; /* pressionado: afunda (7,01:1) */ /* AS SEMANTICAS COMO PIGMENTO. Cada uma inverte do mesmo jeito: a pastilha vira uma superficie escura tingida do matiz e a tinta vira um tom claro do mesmo matiz. `--rosa-solido` NAO e `--rosa`: no destrutivo confirmado a tinta em cima e escura, e branco sobre `#ff8fa0` daria 2,99:1. */ --verde: #5fd39a; --pastilha-verde: #2c3640; /* 6,60:1 */ --ambar: #f5c05e; --pastilha-ambar: #3f3438; /* 7,15:1 */ --rosa: #ff8fa0; --pastilha-rosa: #402e40; /* 5,76:1 */ --rosa-forte: #ffb3be; --rosa-solido: #ff5c72; /* tinta escura em cima: 6,46:1 */ --pastilha-neutra: #352f45; /* 4,99:1 */ --pastilha-acento: #37304d; /* 5,59:1 */ /* O ANEL vai ao extremo da tinta, como no claro - so que o extremo virou o outro lado. Ele LE `--tinta-1` pelo mesmo motivo dos tres da moldura. */ --anel: var(--tinta-1); --tecla-fantasma: #2d293b; --tecla-fantasma-hover: #3c364b; --tecla-fantasma-off: #2b2639; --tecla-perigo: #3a2a3d; --tecla-perigo-hover: #50364c; --fundo-aviso: #392f36; --fundo-recibo: #272837; --fundo-risco: #312336; --fundo-risco-2: #462e41; --fundo-fila: #282336; /* `--listra-forte` NAO entra: ele le `var(--ambar)` no `:root` e a leitura resolve no ponto de uso, entao ele ja acompanha o modo sozinho. */ --listra-fraca: #604c2e; /* 4,90:1 entre as duas listras */ --trilho-barra: #373244; --marca-barra: #524e5d; /* OS DOIS CAMPOS DE COR. No escuro a sala tem LUZ: os dois brilhos CLAREIAM o papel, ao contrario do claro, onde a mesma luz vira tinta. */ --campo-1: radial-gradient(900px 520px at 8% -6%, rgba(255, 232, 205, 0.035), transparent 62%); --campo-2: radial-gradient(820px 640px at 104% 106%, rgba(124, 58, 237, 0.12), transparent 60%); /* AS QUATRO LINHAS DA BANDA que a pele escura tem direito de escrever. Se um dia aparecer aqui um `--palco-suave` ou um `--palco-papel*`, o objeto deixou de ser impresso e virou pintado. */ --palco-1: #4b2ea3; /* 1,93:1 ACIMA do papel */ --palco-2: #5b3fb8; /* degrau interno 1,26 - o MESMO do claro (1,27) */ --palco-teto: #5a40ab; /* 2,40:1 contra o papel */ --palco-teto-2: #694fbe; /* ========================================================================= CAMADA 2 — as DUAS excecoes, e o porque de nao haver mais nenhuma ========================================================================= `--cor-primaria` NAO ENTRA AQUI, e e o par que prova a divisao de cargo: ela e PREENCHIMENTO e responde por "branco sobre ela" (5,70:1), que nao depende do fundo da pagina. Quem muda e a marca como TINTA. */ --cor-acento: var(--acento); /* pagina 9,26:1 · cartao 8,08:1 · trilho 4,84:1 */ /* ELEVACAO. A hierarquia NUNCA dependeu da sombra: elevacao e SUPERFICIE, e a sombra e reforco que so existe onde ha luz para tirar. Claro: 1,24:1 entre cartao e pagina. Escuro: 1,15:1. A mesma separacao, pelo mesmo canal. A tinta vira preta porque no escuro nao ha papel tingido embaixo para o preto sujar - a §6.5 do designer sobrevive inteira, aplicada ao contrario. E os alfas SOBEM: no claro o fio separa e a sombra recua; aqui o fio e textura e a sombra e que faz o trabalho. */ --sombra-tinta: 0 0 0; --sombra-a1: 0; --sombra-a2: 0.45; --sombra-a3: 0.65; --elev-topo: var(--elev-2); /* A elevacao de repouso da peca do console, e a UNICA sombra que esta pele escreve com geometria propria. O porque inteiro esta na declaracao do token no `:root`; aqui ficam as tres camadas, que sao as do demo aprovado: fio de LUZ na aresta de cima, contato de 1px, e a profunda de raio negativo. Os alfas sao numeros e nao pigmento — a tinta continua vindo de `--sombra-tinta`, que nesta pele e preta. */ --elev-cabine: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 1px rgb(var(--sombra-tinta) / 0.5), 0 10px 24px -14px rgb(var(--sombra-tinta) / 0.85); /* ========================================================================= O PAINEL DO DONO NO ARQUIVO DO STITCH (T-0038) — o que gira no escuro ========================================================================= O arquivo não desenha o escuro; ele é DERIVADO da paleta escura da vitrine (`:root.modo-escuro .tema-vitrine`), valor por valor onde a peça existe lá. Os pigmentos (banda, bilhete, botão violeta) NÃO entram aqui. Pares calculados pela fórmula da WCAG sobre o cartão `--dono-noite` (T-0038): texto 15,48:1 · médio 10,29:1 · suave 8,59:1 (7,08:1 no pior papel, `--dono-sup-maxima`) · roxo 10,34:1 · verde 10,33:1 · erro 10,33:1. */ --dono-fundo: #110b22; /* espelho de Tema::Painel->corDaBarra(Escuro) */ --dono-sup-baixa: #171030; --dono-sup-baixa-60: rgb(23 16 48 / 0.6); --dono-sup-media: #1a1236; --dono-sup-alta: #241a42; --dono-sup-maxima: #2c2250; --dono-sutil: var(--dono-sup-maxima); --dono-perigo-zona: rgb(36 26 66 / 0.6); --dono-cartao: var(--dono-noite); --dono-borda-cartao: rgb(255 255 255 / 0.08); --dono-borda-cartao-cheia: rgb(255 255 255 / 0.12); --dono-tracejado: rgb(202 195 217 / 0.35); --dono-texto-forte: var(--branco); --dono-texto: #f5eefd; --dono-texto-medio: #cac3d9; --dono-texto-suave: #b9b2ca; --dono-roxo: #ccbeff; --dono-roxo-sob: var(--dono-tinta-roxa); --dono-roxo-10: rgb(102 51 238 / 0.26); --dono-pastilha-roxa: rgb(102 51 238 / 0.32); --dono-pastilha-roxa-sob: rgb(102 51 238 / 0.4); --dono-tinta-roxa: #e7deff; --dono-verde: var(--dono-menta-forte); --dono-verde-10: rgb(79 223 155 / 0.14); --dono-aviso-linha: var(--dono-texto); --dono-pastilha-verde: rgb(38 194 129 / 0.16); --dono-pastilha-menta: rgb(38 194 129 / 0.2); --dono-menta-30: rgb(38 194 129 / 0.2); --dono-tinta-menta: var(--dono-menta); --dono-rosa: #ffabef; --dono-rosa-vivo: var(--dono-rosa); --dono-rosa-10: rgb(196 40 187 / 0.24); --dono-erro: #ffb4ab; --dono-erro-sob: rgb(255 180 171 / 0.16); --dono-erro-sob-tinta: #ffdad6; --dono-erro-10: rgb(255 180 171 / 0.14); --dono-erro-40: var(--dono-erro-sob); --dono-erro-cheio-tinta: #690005; --dono-luz-roxa: rgb(102 51 238 / 0.18); --dono-luz-menta: rgb(38 194 129 / 0.1); --dono-sombra-topo: 0 1px 0 rgb(255 255 255 / 0.07); --dono-sombra-rodape: 0 -1px 0 rgb(255 255 255 / 0.05); --dono-sombra-cartao: 0 0 0 1px rgb(255 255 255 / 0.08); --dono-sombra-secao: var(--dono-sombra-cartao); --dono-sombra-leve: var(--dono-sombra-cartao); --dono-sombra-media: 0 0 0 1px rgb(255 255 255 / 0.14), 0 8px 20px -6px rgb(0 0 0 / 0.5); } html { -webkit-text-size-adjust: 100%; } /* ⚠️ `background-color` E `background-image` VÊM SEPARADOS, E NÃO É ESTILO — é a mesma separação que a abertura da página inicial da T-0015 fazia: com o atalho `background`, um navegador que falhe a imagem entrega a página sem cor de fundo nenhuma. Os dois campos de cor (`--campo-1`, `--campo-2`) são a "sala" da direção B: no ESCURO eles CLAREIAM o papel (a sala tem luz) e no CLARO eles o ESCURECEM (a mesma luz sobre branco seria branco, então ela vira tinta). Medido: o degrau do cartão sobe de 1,24 para 1,29 no canto quente e 1,39 no violeta — no claro o campo de cor AJUDA a separação, que é o oposto do que ele faz no escuro. ⚠️ A FAMÍLIA DO CONVITE NÃO OS RECEBE: `.tema-convite` declara `background:` no atalho, e atalho ZERA `background-image`. A proteção é estrutural, não disciplina. E nada de `background-attachment: fixed`, que é proibido nesta folha com bug pago. */ body { font-family: var(--f-corpo); background-color: var(--cor-fundo); background-image: var(--campo-1), var(--campo-2); background-repeat: no-repeat; color: var(--cor-texto); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; } .container { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 16px; } /* ----------------------------------------------------------------------------- A COLUNA DE LEITURA — a medida de leitura, e SÓ ela ----------------------------------------------------------------------------- ELE MORA AQUI, ENTRE OS PRIMITIVOS DE LEIAUTE, E NÃO NA SEÇÃO DA PÁGINA INICIAL. O motivo é a §13.7: a segunda tela que precisar de coluna de leitura (a T-0016 vai precisar) tem de ACHAR esta classe, e não reinventá-la dentro da própria família — foi assim que a medida se espalhou por seis seletores. ⚠️ ELE JÁ TEVE UM `margin-inline: auto`, E ELE FOI REMOVIDO DEPOIS DE MEDIDO NA TELA. Vale escrever por que, porque o erro é sedutor e vai tentar voltar. A §13 raciocinou sobre EIXO — o centro matemático da caixa — e concluiu que centrar todas as caixas no mesmo centro acabaria com o desalinho. Acabou com o desalinho do CENTRO e criou um pior: o que o olho segue ao descer uma página em português é a BORDA ESQUERDA, e centrar caixas de larguras diferentes num mesmo centro serrilha as DUAS bordas. Medido pelo Coordenador no navegador: borda esquerda ANTES da §13: 185 185 185 185 185 185 185 185 445 (1 salto) borda esquerda COM a §13: 185 445 445 185 445 185 445 445 445 (5 saltos) Uma página pode ter um único centro e mesmo assim ziguezaguear dos dois lados — foi exatamente o que aconteceu, e o usuário reprovou a tela pela segunda vez. Pior ainda: os `

` das duas grades ficavam em 185 e os blocos que eles encabeçam em 445, o título a 260px do próprio conteúdo. O QUE VALE AGORA: **UMA BORDA ESQUERDA, DUAS LARGURAS.** Toda caixa começa em 185; a coluna termina em 793 e a faixa em 1313. A direita fica serrilhada, e isso NÃO é defeito — é a borda solta de uma composição alinhada à esquerda, a mesma que todo parágrafo deste arquivo tem. COMO SE USA, e a escolha é EXPLÍCITA no HTML: quem tem a classe é COLUNA (a medida de leitura); quem não tem é FAIXA (a largura toda do contêiner). Nenhum bloco escolhe por omissão. Uma página declara no máximo essas duas larguras; uma terceira exige ADR (§13.5). ⚠️ NÃO REDECLARE A MEDIDA NUM SELETOR DE COMPONENTE. A trava L1 da §13.5 conta as declarações ancoradas da medida na folha inteira e exige UMA — esta. Duas significam que a medida está se espalhando de novo. E É POR ISSO QUE A REGRA TEM UMA LINHA SÓ: a trava L3 conta o corpo desta regra e espera EXATAMENTE 1. Se aparecer 2, alguém devolveu o eixo centrado. -------------------------------------------------------------------------- */ .coluna-leitura { max-width: var(--medida); } /* ----------------------------------------------------------------------------- O CABEÇALHO — CHAPADO, E O MOTIVO ESTÁ MEDIDO ----------------------------------------------------------------------------- ⚠️ ESTA REGRA JÁ TEVE `backdrop-filter: blur(8px)` E UM FUNDO A 92% DE ALFA. Vale escrever por que os dois saíram juntos, porque o par é sedutor e volta. O DESFOQUE É PROIBIDO NESTE PROJETO, e a proibição foi paga com bug: ele gera uma caixa branca fantasma no Chromium do usuário e trava a captura de tela. A folha desligava o desfoque em UMA pele (`.tema-convite .topo`) e o deixava ligado na REGRA BASE — ou seja, ligado na página inicial, no login, no cadastro, nos termos, no painel do dono e no admin. Desligar por pele nunca foi conserto: o conserto é a declaração não existir. E O ALFA SAIU JUNTO, QUE É A PARTE QUE SE ESQUECE. Os 92% só faziam sentido ALIMENTANDO o desfoque; sem ele, o que passa por baixo aparece NÍTIDO a 8%. Este cabeçalho é `sticky`, então em toda página com rolagem passa conteúdo por baixo dele. Medido (composição alfa sobre `--cor-fundo` #faf8ff): em repouso ...................... rgb(254,6 254,4 255) = #fffeff com texto #2a2438 por baixo ..... #eeedef ΔE*ab 5,87 com foto escura por baixo ....... #ebebeb ΔE*ab 6,93 com a ponta rosa #db2777 ........ #fceef4 ΔE*ab 7,45 com a ponta roxa #7c3aed ........ #f5effe ΔE*ab 8,60 O limiar do olho é ΔE*ab ≈ 2,3. Ou seja: o cabeçalho mudaria de cor entre 2,5x e 3,7x o perceptível, ACOMPANHANDO a rolagem — uma mancha que anda. Com borda nítida, isso não lê como profundidade; lê como sujeira. POR QUE `--cor-cartao` E NÃO `--cor-superficie`: em repouso o translúcido de hoje compõe #fffeff, que dista ΔE*ab 0,335 de `--cor-cartao` (#ffffff) — um sétimo do limiar, invisível — e ΔE*ab 3,87 de `--cor-superficie` (#faf8ff no painel), que é visível E apagaria a distinção entre o cabeçalho e a página. Chapado em `--cor-cartao` é o único valor que preserva o que está na tela. O QUE SUBSTITUI A PROFUNDIDADE: `--elev-1`, permanente. A sombra dá ao cabeçalho a fronteira física que o desfoque fingia dar — sem JavaScript, sem o bug, e com a tinta certa em cada pele (`--sombra-tinta` resolve no uso). É a correção escrita em docs/painel-e-desktop.md §D.1. -------------------------------------------------------------------------- */ .topo { background: var(--cor-cartao); border-bottom: 1px solid var(--cor-borda); box-shadow: var(--elev-topo); padding: 14px 0; position: sticky; top: 0; z-index: 10; } .topo-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Cabeçalho mínimo (páginas públicas do convidado) */ .topo-centro { justify-content: center; } .logo { display: inline-flex; align-items: center; text-decoration: none; } /* A altura da marca é DERIVADA, não escolhida: 36 px é o piso medido em docs/marca.md §5.1, por dois caminhos independentes — (1) a espessura do contorno do balão é A/24 e precisa de ≥ 1,5 px para uma diagonal não virar névoa cinza; (2) o visto precisa de três faixas de ≥ 2 px para ler como visto, e ele tem 28 das 168 unidades de altura. Os dois dão A ≥ 36 px. Antes daqui eram 32 px no painel e 34 px no convite: dois números, nenhum declarado, os dois abaixo do piso. Abaixo de 36 px não se encolhe a marca: troca-se de versão (o só-ícone, que vai até 16 px). `width: auto` é obrigatório — a marca nunca é esticada. */ .logo-img { height: 36px; width: auto; display: block; } .hero-logo { max-width: 340px; width: 100%; height: auto; display: block; margin: 0 auto 6px; } .menu { display: flex; align-items: center; gap: 16px; } .menu a { color: var(--cor-texto); text-decoration: none; font-size: 0.92rem; font-weight: 700; padding: 8px 2px; } .menu a:hover { color: var(--cor-acento); } .form-inline { display: inline; } /* ----------------------------------------------------------------------------- O ALTERNADOR DE MODO DE COR (TD-048) ----------------------------------------------------------------------------- Ele é o primeiro item do `.menu`, no `.topo` — o mesmo cabeçalho do dono e do admin. Nunca ao lado de "Sair": ação terminal não faz vizinhança com controle que se toca com frequência. ⚠️ QUEM DECIDE QUAL GLIFO APARECE É O MESMO CSS QUE DECIDIU O MODO, e essa é a peça inteira do desenho. Um rótulo escrito pelo PHP mentiria no instante em que o `app.js` trocasse a classe sem recarregar; dois glifos governados pelo seletor de modo não têm como discordar da tela. No claro aparece a LUA (o que o botão liga é o escuro); no escuro aparece o SOL. O nome acessível é único e neutro ("Alternar entre modo claro e escuro"), porque `aria-pressed` não é acionável por CSS e estado falado errado é pior que estado nenhum. Ele descreve a AÇÃO, não o ESTADO. ⚠️ NADA DE `transition` NA TROCA DE MODO. Trocar a página inteira com transição produz ~200ms de cores intermediárias, e nenhuma delas foi medida. A única transição aqui é a do `color` do próprio glifo sob o dedo, que é feedback de controle e não de tema. -------------------------------------------------------------------------- */ .modo-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo-toque); height: var(--alvo-toque); padding: 0; border: 0; border-radius: var(--raio-pilula); background: none; color: var(--cor-texto-suave); cursor: pointer; transition: color var(--mov-rapido) var(--curva-padrao); } .modo-btn:hover { color: var(--cor-texto); } /* A família do painel ainda não tem a regra única de `:focus-visible` (é da F8), então este botão declara o próprio anel — e declara `outline` e `outline-offset` e NADA MAIS: a forma é do componente, o foco é o anel. */ .modo-btn:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: var(--foco-desvio); } .modo-glifo { display: none; line-height: 0; } .modo-glifo-escuro { display: inline-flex; } :root.modo-escuro .modo-glifo-escuro { display: none; } :root.modo-escuro .modo-glifo-claro { display: inline-flex; } .btn-link { background: none; border: none; padding: 8px 2px; color: var(--cor-erro-texto); font-size: 0.92rem; font-weight: 700; font-family: inherit; cursor: pointer; } .btn-link:hover { text-decoration: underline; } /* ---------------- Conteúdo ---------------- */ main { flex: 1; padding: 26px 16px 56px; } /* ⚠️ A SOMBRA DO CARTÃO ERA UM `rgba` CRAVADO — `rgba(80,52,160,.18)`, um roxo que não é token nenhum e que a cerca do F8 não vê porque ela caça hexadecimal. Ela vira `--elev-1`, que é a escala do sistema e já sabe se comportar nos dois modos: rasa no claro (o fio é quem separa, 1,27:1) e profunda no escuro (onde o fio é textura e a sombra faz o trabalho sozinha). E o raio desce de 24px para `--raio-peca`, que é o degrau da direção B. */ .card { background: var(--cor-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-peca); padding: 24px 20px; box-shadow: var(--elev-1); margin-bottom: 20px; } .card h1 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; } /* ⚠️ `.card h2` VESTE 18 TELAS: mexer no TAMANHO aqui mexe na hierarquia de todas elas, e a T-0020 já mediu isso. O que entra é família e peso — a personalidade tipográfica da direção B —, não a escala. */ .card h2 { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; } .subtitulo { color: var(--cor-texto-suave); margin-bottom: 20px; } .centro { text-align: center; } /* ---------------- Formulários ---------------- */ .campo { margin-bottom: 18px; flex: 1; } .campo label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; } .campo label small { font-weight: 400; color: var(--cor-texto-suave); } /* ----------------------------------------------------------------------------- O POÇO DO FORMULÁRIO — `--sup-campo`, e no ESCURO ele é o que faz o campo existir ----------------------------------------------------------------------------- A regra "elevar é sempre clarear" lida ao contrário: o campo é onde se ESCREVE, ele fica ABAIXO do cartão, e por isso ele afunda. No claro isso é refinamento (`#f3f0fa` contra o cartão branco); no ESCURO é o que separa o campo de nada — antes desta troca o interior do campo era `--cor-cartao`, exatamente a mesma superfície do cartão em volta, e o único sinal de que ali havia um controle era o fio, que no escuro mede 1,19:1 nas bordas decorativas. Agora o poço é o carvão da moldura e o degrau é real. ⚠️ A FAMÍLIA DO CONVITE FICA COMO ESTÁ, e a exceção é declarada logo abaixo em `.tema-convite`: `--sup-campo` é pigmento da pele do PAINEL, e TD-076 não toca a família pública. Sem a exceção, o violeta claro do poço cairia dentro dos cartões creme e verde do convite. -------------------------------------------------------------------------- */ .campo select { width: 100%; padding: 12px 14px; border: 1px solid var(--limite); border-radius: var(--raio-tecla); font-size: 16px; font-family: inherit; font-weight: 600; background: var(--sup-campo); color: var(--cor-texto); min-height: 48px; } /* T-0031 4a (BUG-TD-136): o halo deriva do acento — a nota inteira está em `.campo input:focus`, mais abaixo. */ .campo select:focus { outline: none; border-color: var(--cor-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-acento) 15%, transparent); } .config-pagamento { border: 1px dashed var(--cor-borda); border-radius: 16px; padding: 16px; margin-bottom: 18px; } .config-pagamento legend { font-weight: 800; font-size: 0.92rem; padding: 0 8px; color: var(--cor-acento); } .campo-dica { display: block; color: var(--cor-texto-suave); font-size: 0.8rem; margin-top: 4px; } .campo input, .campo textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--limite); border-radius: var(--raio-tecla); font-size: 16px; /* evita zoom automático no iOS */ font-family: inherit; font-weight: 600; background: var(--sup-campo); color: var(--cor-texto); min-height: 48px; transition: border-color 0.15s, box-shadow 0.15s; } .campo textarea { resize: vertical; } /* ⚠️ T-0031 4a (BUG-TD-136) — O HALO LÊ O MESMO TOKEN QUE A BORDA. Era `rgba(124, 58, 237, .15)`: a primária velha a 15%, escrita à mão, debaixo de uma borda que já era `--cor-acento` — dois violetas a 9° no mesmo campo, MEDIDOS na engine nas duas peles. `color-mix()` deriva o halo do acento em vez de copiá-lo: não existe segunda fonte (nem tripleto `-rgb` para manter em sincronia), e ele acompanha a pele escura (#b3a1ff) e qualquer repintura futura sozinho. Num navegador sem `color-mix()` a declaração inteira cai e sobra a borda, que é quem carrega o 1.4.11 (5,78:1 no poço claro, 8,69:1 no escuro) — o halo é reforço, não o indicador. O convite não passa por aqui: `.tema-convite .campo input:focus` redeclara borda e `box-shadow: none`. */ .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cor-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-acento) 15%, transparent); } /* ⚠️ A EXCEÇÃO DO CONVITE, e ela é a metade que impede a pele do painel de vazar para a família pública. `--sup-campo` é pigmento da direção B e não tem valor declarado em `.visual-classico` nem em `.visual-jardim`; sem estas três linhas, o poço violeta do painel apareceria dentro dos cartões creme e verde do convite. O convite continua com o campo BRANCO sobre o papel, que é o que a T-0015 mediu e o usuário aprovou. */ .tema-convite .campo select, .tema-convite .campo input, .tema-convite .campo textarea { background: var(--cor-cartao); } /* PLACEHOLDER NÃO É RÓTULO, e o piso dele é 4,5:1 como o de qualquer texto. `#b8b2c9` sobre o interior branco do campo media 2,05:1 — REPROVAVA, vivo, no campo principal do painel. É o N5 do `design-system.md` §6, e a correção é a mesma que a família do convite já recebeu na T-0015: `--limite`, que mede 4,53:1 sobre branco e serve aos DOIS limiares (texto 4,5 e borda 3,0). `opacity: 1` acompanha porque o Firefox aplica opacidade própria ao placeholder — sem ela o 4,53:1 medido não é o que a tela mostra lá. */ .campo input::placeholder, .campo textarea::placeholder { color: var(--limite); opacity: 1; font-weight: 500; } .campo small { display: block; color: var(--cor-texto-suave); font-size: 0.8rem; margin-top: 4px; } .campo-grupo { display: flex; flex-direction: column; gap: 0; } /* A virada de `.campo-grupo` para linha migrou para o bloco `--bp-1` do fim do arquivo (era `420px`, valor que não está em escala nenhuma; passou a 30rem). ⚠️ ACHADO: `.campo-grupo` não tem NENHUM consumidor — não aparece em `views/` nem em `assets/js/`. A regra e a virada estão vivas no CSS e mortas na tela. Registrado para a F8; não removida aqui porque limpeza de legado tem critério de saída próprio (TD-012 item 3). */ /* ---------------- Botões ---------------- */ /* ----------------------------------------------------------------------------- ⚠️ TD-076 §4 e §5 — O BOTÃO DEIXA DE SER GRADIENTE E DEIXA DE SER PÍLULA ----------------------------------------------------------------------------- O gradiente saiu porque ele era `violet-600 → fuchsia-600 → pink-600` a 135°, os três valores padrão do Tailwind no arranjo mais repetido da internet: não era marca, era default. E a pílula saiu porque é ela que faz uma tela de operação parecer página de festa. O preenchimento vivo agora é UM acento sólido, e a tinta em cima dele vai ao extremo do papel (`--tinta-viva`) — a regra (c) da direção, que é o que faz o par medir 6,51:1 no claro e 8,69:1 no escuro sem ninguém escolher cor de texto à mão. ⚠️ A FAMÍLIA DO CONVITE NÃO PERDE O GRADIENTE: `.tema-convite .btn` redeclara `background: var(--grad)`, e `--grad` é redeclarado dentro de cada `.visual-*`. O botão da festa continua sendo o botão da festa. O HOVER E O PRESSIONADO ANDAM NA DIREÇÃO DA TINTA — no claro `--acento-forte` ESCURECE, no escuro CLAREIA. Um par de tokens, dois comportamentos, uma regra. E a sombra RECUA: sombra pesada em papel claro lê como sujeira, e a que existe agora é a `--elev-1` do sistema, que já sabe se aprofundar no escuro. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 13px 24px; background: var(--cor-acento); color: var(--tinta-viva); border: none; border-radius: var(--raio-tecla); font-family: var(--f-display); font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; box-shadow: var(--elev-1); transition: transform var(--mov-rapido) var(--curva-padrao), background-color var(--mov-rapido) var(--curva-padrao), box-shadow var(--mov-rapido) var(--curva-padrao); } .btn:hover { transform: translateY(-1px); background: var(--acento-forte); box-shadow: var(--elev-2); } .btn:active { transform: translateY(0); background: var(--acento-fundo); } .btn-auto { width: auto; } /* A TECLA FANTASMA — peso secundário. Superfície própria (`--tecla-fantasma`) em vez da pastilha de acento: a pastilha É informação nesta paleta (fundo de estado), e usá-la como fundo de botão faz o mesmo pigmento dizer duas coisas. */ .btn-secundario { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 10px 20px; background: var(--tecla-fantasma); color: var(--cor-acento); border: none; border-radius: var(--raio-tecla); font-family: var(--f-display); font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; } /* A superficie sob o dedo passa a ser semantica. Era `#e9e1fb` literal; com o modo escuro isso seria um lilas CLARO sob um rotulo CLARO (`--cor-texto` vira `#e6e1f0`) - 1,3:1. `--cor-info-fundo` gira junto e mede 12,53:1 no escuro. No claro a superficie clareia de `#e9e1fb` para `#f5f1fd`: mudanca de pixel DECLARADA, e o par continua sendo a tinta cheia sobre lilas. */ .btn-secundario:hover { background: var(--tecla-fantasma-hover); } /* O PRESSIONADO EXISTIA COMO PIGMENTO E NÃO EXISTIA COMO ESTADO: `--sup-press` estava declarado nos dois modos e ninguém o lia. Ele é o terceiro degrau da escada de interação — repouso, ponteiro, dedo —, e sem ele o botão secundário não devolve nada ao clique. A regra vale nos dois modos sem token por modo: interagir é andar na direção da tinta, e `--sup-press` já sabe para que lado. */ .btn-secundario:active { background: var(--sup-press); transform: translateY(1px); } /* ----------------------------------------------------------------------------- `.btn.btn-suave` — A AÇÃO PRINCIPAL EM PESO SECUNDÁRIO ----------------------------------------------------------------------------- MODIFICADOR de `.btn`, e não componente novo: ele herda largura, altura mínima, raio de pílula e alvo de toque, e troca SÓ o peso. Essa é a exigência escrita do `designer-visual` (§13) para a página pública com o cadastro fechado: "o botão secundário tem o mesmo tamanho e o mesmo alvo de toque do primário — só troca de peso". POR QUE NÃO REUSEI `.btn-secundario`, que já existe e tem estas cores: porque ele tem 46px de altura contra os 50px do primário e raio de 14px contra 999px. Trocá-lo pelo primário mudaria o ALVO junto com o peso, e é justamente o alvo que a especificação manda manter — quem chega numa porta fechada continua tendo uma ação do mesmo tamanho. Contraste medido pelo designer: `#7c3aed` sobre `#f5f1fd` = 5,12:1 (AA para texto normal, com folga). A borda é `--cor-borda` e não `--limite` por decisão dele: quem identifica este controle é o RÓTULO, que passa em 5,12:1; a borda aqui é filete decorativo, e o filete é isento de limiar (§2.4 do sistema). -------------------------------------------------------------------------- */ .btn-suave { border: 1px solid var(--cor-borda); background: var(--cor-roxo-claro); color: var(--cor-acento); box-shadow: none; } /* Sob o dedo: a borda vira `--limite` e o botão sobe uma elevação. É o mesmo estado que o design system descreve para o card de escolha do visual, e evita escurecer o fundo à mão — o `#e9e1fb` de `.btn-secundario:hover` é literal legado que a F8 vai tokenizar, e uma SEGUNDA cópia dele só aumentaria o trabalho daquela passagem. */ .btn-suave:hover { border-color: var(--limite); box-shadow: var(--elev-1); } /* ⚠️ A TECLA DESTRUTIVA GANHOU SUPERFÍCIE PRÓPRIA (`--tecla-perigo`) E DEIXOU DE USAR `--cor-erro-fundo`. A troca não é de cor, é de CARGO: `--cor-erro-fundo` é a PASTILHA DO ESTADO DE ERRO — ela diz "alguma coisa deu errado" —, e um botão em repouso não está em erro nenhum, ele só é perigoso. Usar a mesma superfície para as duas coisas é o defeito de divergência ao contrário: um pigmento dizendo dois significados. TD-076 §8: vermelho gasto SÓ no irreversível, e o irreversível aqui é a AÇÃO, não a situação. E foi assim que o `:hover` deixou de ser uma regra que não muda nada — ele repetia `--cor-erro-fundo` e, medido, não movia um pixel. Agora escurece. */ .btn-perigo { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px; background: var(--tecla-perigo); color: var(--cor-erro-texto); border: none; border-radius: var(--raio-tecla); font-family: var(--f-display); font-size: 0.95rem; font-weight: 600; cursor: pointer; } /* A TINTA TAMBÉM ANDA NO HOVER, e `--rosa-forte` existe exatamente para isto: ele é o vermelho que ganha presença quando o fundo escurece. Sem ele a única coisa que se movia era a superfície, e o rótulo perdia contraste relativo. Medido: 5,90:1 no claro e 6,31:1 no escuro contra `--tecla-perigo-hover`. */ .btn-perigo:hover { background: var(--tecla-perigo-hover); color: var(--rosa-forte); } .btn-mini { min-height: 38px; padding: 6px 14px; font-size: 0.85rem; } /* Honeypot: tirado da tela sem usar display:none (alguns bots detectam) */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------------- Alertas ---------------- */ .alerta { border-radius: var(--raio-peca); padding: 13px 18px; margin-bottom: 16px; font-size: 0.95rem; font-weight: 600; } .alerta ul { margin-left: 18px; } .alerta a { font-weight: 800; color: inherit; } /* O texto usa o vermelho ESCURO: `--cor-erro-texto` sobre `--cor-erro-fundo` mede 4,2:1 e reprova AA (o `.alerta` é 0,95rem/600 — não é "texto grande"). A borda continua no vermelho claro, onde o critério é 3:1. Medido, não estimado; a mesma medição do bloco de tokens no topo do arquivo. */ .alerta-erro { background: var(--cor-erro-fundo); border: 1px solid var(--cor-erro-borda); color: var(--cor-erro-texto); } .alerta-sucesso { background: var(--cor-sucesso-fundo); border: 1px solid var(--cor-sucesso-borda); color: var(--cor-sucesso-texto); } /* ---------------- Painel do usuário ---------------- */ .painel-cabecalho { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; } .painel-cabecalho h1 { /* O título da tela é DISPLAY (TD-076 §6): a segunda família entrou na mesma requisição de fonte e até esta tarefa só era lida dentro da banda. */ font-family: var(--f-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.015em; } .painel-cabecalho .subtitulo { margin-bottom: 0; font-size: 0.95rem; } /* A virada de `.painel-cabecalho` para linha migrou para o bloco `--bp-1` do fim do arquivo — mesmo valor de sempre (480px = 30rem), agora em `rem`. */ /* ⚠️ ERA `font-size: 3rem` PORQUE O CONTEÚDO ERA UM EMOJI: o tamanho do desenho saía da tipografia. Com SVG o desenho tem caixa própria, e `.ico-vazio` a declara. O `font-size` sai: um bloco com 48px de linha e sem texto dentro reserva altura que ninguém usa. */ .evento-vazio { margin-bottom: var(--e-1); color: var(--cor-texto-suave); } .ico-vazio { width: 48px; height: 48px; vertical-align: baseline; } /* ----------------------------------------------------------------------------- ⚠️ O CARTÃO DE EVENTO SAIU DAQUI — ele virou O PALCO (T-0016, direção A) ----------------------------------------------------------------------------- `.evento-head`, `.data-tile` (com `.dia` e `.mes`), `.evento-head h2`, `.selo-futuro`, `.evento-detalhes` e `.evento-acoes` foram REMOVIDOS, e não repintados: a festa deixou de ser um cartão claro entre avisos e passou a ser a banda escura que abre a tela. As regras novas estão na seção "O PALCO", logo abaixo do link do convite; a marcação está em `views/painel/index.php`. ⚠️ E É AQUI QUE O BUG-TD-055 MORRE, POR ANATOMIA E NÃO POR REMENDO. `.data-tile .mes` era branco de 11,2px/800 com `opacity: 0.92` sobre `--grad`. Medido por mim contra a folha antes de apagar: parada #7c3aed (0%) ..... 5,06:1 (sem a opacidade: 5,70:1) parada #c026d3 (60%) .... 4,19:1 ❌ (sem a opacidade: 4,71:1) parada #db2777 (100%) ... 4,09:1 ❌ (sem a opacidade: 4,60:1) A conta publicada no design system dizia "4,60:1 — passa", e ela estava certa para BRANCO CHEIO: o que ela ignorou é que a MESMA regra aplicava `opacity`. No palco a peça vira o BILHETE — papel branco sólido, dia em `--cor-texto` (14,92:1), mês em `--cor-texto-suave` (5,31:1), zero `opacity`, zero texto branco sobre gradiente. REGRA DE SISTEMA QUE SAI DAQUI: `opacity` sobre TEXTO é proibida no produto, e o motivo é de método antes de ser de cor — a opacidade torna o par dependente do que está atrás, e ele deixa de ser mensurável no dia em que o fundo mudar. O comentário de `.termos-versao` já documenta a mesma remoção pelo mesmo motivo; `.data-tile .mes` era o caso que tinha sobrevivido à varredura. -------------------------------------------------------------------------- */ /* Selos / chips de status */ .selo { display: inline-block; /* SELO CONTINUA PÍLULA — é o que a direção B preservou da forma anterior (TD-076 §5: "selo não é botão"). O que sai é o literal. */ font-family: var(--f-display); font-size: 0.74rem; font-weight: 800; padding: 3px 12px; border-radius: var(--raio-pilula); white-space: nowrap; margin-top: 4px; } /* ⚠️ `.selo-futuro` SAIU JUNTO: ele só vestia "faltam N dias" e "é amanhã!" no card de evento, e as duas frases foram para `.palco-selo`. `.selo-hoje` e `.selo-passado` FICAM porque `views/painel/convidados.php` também os usa — morte medida por seletor, uma peça de cada vez. */ .selo-hoje { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); } /* `#f1eff6` era, byte a byte, `--cor-neutro-fundo`. Zero pixel no claro; no escuro a superficie passa a acompanhar a tinta que ja vinha do token. */ .selo-passado { background: var(--cor-neutro-fundo); color: var(--cor-texto-suave); } /* Barra de progresso das confirmações */ .progresso { margin-bottom: 18px; } .progresso-info { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; } .progresso-info b { color: var(--cor-acento); } .barra { height: 10px; border-radius: var(--raio-pilula); /* Era `#efeaf9` cravado — o MESMO valor de `--medidor-trilho`, que já existia com nome desde a F6. Duas fontes de verdade para um trilho é como o produto acaba com dois cinzas de progresso. */ background: var(--medidor-trilho); overflow: hidden; } /* ⚠️ A LARGURA VEM DO ELEMENTO, NUNCA DO FIM DE UMA ANIMAÇÃO. O `app.js` escreve `span.style.width` a partir de `data-progresso` (CSSOM, que a CSP `style-src self` não bloqueia — o que ela bloqueia é o atributo `style=""` no HTML). A transição só faz o valor CHEGAR; sob `prefers-reduced-motion` ela some e o valor continua lá. Se o enchimento fosse um `@keyframes` com a largura no `to{}`, desligar a animação deixaria a barra em 0% e quem pediu menos movimento leria "ninguém confirmou". `0.6s ease` eram DUAS fugas de token na mesma linha: 600ms está fora da diretriz de 150–300ms da casa (só `--mov-cena` passa disso, e é exceção reservada ao envelope) e `ease` não é nenhuma das três curvas do sistema. */ /* ⚠️ T-0031 4a (BUG-TD-135) — O PREENCHIMENTO-BASE DEIXA DE SER O DEGRADÊ APOSENTADO. `--grad` sobrevive num lugar só (o selo da marca, TD-076 §4), e esta regra era o seu último consumidor na família do painel: nenhum pixel dela aparecia (o palco a cobre com `--palco-menta`), até a etapa 3 reusar o par `.barra` + `` no console — porque é o gancho que o `app.js` lê — e o degradê voltar a pintar a barra de Confirmações nas duas peles. A base passa a `--cor-acento`, o preenchimento vivo do sistema: quem quiser outra cor redeclara por cima (o palco e a cabine fazem isso), e quem esquecer de redeclarar herda a pele, e não a assinatura morta. Zero pixel muda hoje. */ .barra span { display: block; height: 100%; width: 0; border-radius: var(--raio-pilula); background: var(--cor-acento); transition: width var(--mov-medio) var(--curva-padrao); } /* Box do link do convite */ .convite-link { background: linear-gradient(135deg, #f6f1ff, #fdf2f8); border-radius: 18px; padding: 14px; margin-bottom: 18px; } /* ----------------------------------------------------------------------------- NÚMERO É TINTA, RÓTULO É `--cor-texto-suave` — e este aqui é rótulo ----------------------------------------------------------------------------- Esta regra pintava o rótulo com `--grad` recortado no glifo (`background-clip: text` + `color: transparent`). Três motivos para sair, e nenhum é de gosto: 1. O PAR NÃO É MENSURÁVEL. O glifo tem um gradiente inteiro dentro; não existe "a cor do texto". Medido nas paradas: 5,70:1 no roxo e 4,60:1 no rosa — o mesmo rótulo muda de razão ao longo de si mesmo, e o pior ponto está a 0,10 do piso de 4,5. 2. A §4.4 do design system já proíbe texto em gradiente. 3. A direção A gasta o canal de cor num lugar só: a banda. ⚠️ ELA VESTE DUAS TELAS, E UMA DELAS É DO CONVIDADO — e a correção certa NÃO é escopar o seletor. `views/painel/galeria.php` ("Link da galeria") e `views/convite/presentes.php` ("PIX copia e cola"). Apontar para `--cor-texto-suave` acerta nas duas famílias sem uma segunda regra, porque `.visual-classico` e `.visual-jardim` REDECLARAM o semântico. E na tela do convidado a COR nem chega a mudar: `.tema-convite .convite-link label` (0,2,1) já vencia esta regra (0,1,1) desde antes, com `background: none` e `color: var(--cor-texto)`. O que muda lá é 0,32px de corpo (0,72rem → `--fs-1`, 11,52px → 11,2px), e a troca existe para o tamanho sair da escala em vez de ser número cravado. ⚠️ O rótulo do link do convite NO PAINEL DO DONO não passa mais por aqui: ele entrou no palco e é `.palco-link-rot`. */ .convite-link label { display: block; font-size: var(--fs-1); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cor-texto-suave); margin-bottom: 8px; } .convite-link-linha { display: flex; gap: 8px; } /* ⚠️ `--fs-3` SÃO 16px, E O PISO É DE CAMPO E NÃO DE ESTÉTICA — BUG-TD-076. Abaixo de 16px o iOS dá zoom sozinho ao focar o campo, e o zoom não volta: quem toca aqui para copiar o link do convite fica com a página ampliada no meio da festa. Este era o ÚNICO `` da folha fora do piso — media 0,83rem (13,28px) contra os 16px de `.campo input`, `.busca-input`, `.detalhe-form input`, `.acomp-lista input` e `.palco-campo`, todos com o mesmo motivo escrito ao lado. Ele veste três telas — o PIX do convidado, o link da galeria e o campo de cota do admin —, e no admin ele é `size="6"`: a largura do campo acompanha o corpo da letra, então a coluna "Armazenamento" da tabela cresce alguns pixels com esta linha. Está medido junto com o BUG-TD-074 e cabe. */ .convite-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--cor-borda); border-radius: 12px; font-size: var(--fs-3); font-family: inherit; font-weight: 600; color: var(--cor-texto-suave); background: var(--cor-cartao); } /* ⚠️ T-0031 4a — MEDIDO NA ENGINE: este botão era o último `--grad` VIVO na família do painel. `views/painel/galeria.php` o emite como `.btn.btn-copiar` e, por vir depois de `.btn` na folha, ele vencia o preenchimento sólido nas duas peles (89×44 de degradê aposentado na galeria do dono). Passa ao mesmo par de `.btn` (`--cor-acento` + `--tinta-viva`, regra (c) de TD-076). Onde o botão vive em outra pele, ela já vence: no convite, `.tema-convite .btn` (0,2,0) mantém o `--grad` do visual; no palco, `.palco-btn-claro` vem depois e mantém o papel — os dois conferidos na engine antes e depois. A anatomia (raio, recuo, corpo) não muda aqui: não é decisão desta etapa. */ .btn-copiar { border: none; border-radius: 12px; padding: 0 18px; background: var(--cor-acento); color: var(--tinta-viva); font-size: 0.9rem; font-weight: 800; font-family: inherit; cursor: pointer; min-height: 44px; } /* ============================================================================= O PALCO — a banda escura que abre o painel do dono (T-0016, direção A) ============================================================================= Direção: `docs/opcoes-painel/opcao-a.html`, do `designer-visual`, escolhida pelo usuário entre três ("gostei da opçao A"). Tokenização e anatomia: `design-system.md` §14, do `especialista-ui`. Os tokens estão no `:root`. A APOSTA, EM UMA FRASE: a vibração fica num ÚNICO campo de cor, onde ela é barata — o roxo da marca como TEXTO sobre a página clara mede 5,08:1 e não tem folga para saturar mais; os mesmos acentos sobre a banda escura medem de 5,5:1 a 16:1. O resto da página continua branco e sem cor. ============================================================================= A COMPOSIÇÃO — uma borda esquerda, duas larguras (§13.9) ============================================================================= O palco é FAIXA (a largura do contêiner), a grade de destinos é FAIXA, a grade da conta é FAIXA, e o único bloco de texto corrido — o aviso da zona de perigo — é COLUNA, com `.coluna-leitura` NA VIEW. Todos começam na MESMA aresta esquerda. A borda direita fica serrilhada, e isso não é defeito. ⚠️ O PROTÓTIPO CRAVA A MEDIDA DE LEITURA À MÃO no aviso da zona de perigo — uma `max-width` com o valor `38rem` escrito no seletor do componente —, E ISSO REPROVA. É exatamente o que a trava L4 (alvo ZERO) existe para pegar: transcrita, ela leva o L4 de 0 para 1. Aqui a medida vem de `.coluna-leitura`, que é o único lugar da folha que pode declará-la. ⚠️ E ESTE PARÁGRAFO NÃO ESCREVE O PAR `propriedade: valor` JUNTO, DE PROPÓSITO. A primeira versão dele escrevia, e o L4 subiu para 1 medindo a PRÓPRIA EXPLICAÇÃO — com a folha limpa. É a §7.6 acontecendo dentro do comentário que documenta a §7.6, e ela derruba de passagem uma frase publicada na §13.5: *"alvo ZERO é imune ao problema do comentário casando no grep"*. Não é: alvo zero é imune a contador que INFLA por uso legítimo, e continua vulnerável à prosa que cita o literal. Quem for documentar uma proibição, cite as duas metades SEPARADAS — o comando publicado tem de ser o comando que roda. ============================================================================= A PELE, AS ILHAS DE PAPEL, E O DEFEITO QUE ESTE PARÁGRAFO ESCONDIA ============================================================================= ⚠️ ESTE COMENTÁRIO DIZIA O CONTRÁRIO DO QUE ACONTECIA NA TELA, E A TELA ESTAVA ERRADA. Ele afirmava que a pele é vestida "nos dois blocos de texto que NÃO contêm papel". `.palco-sobre` CONTÉM papel: o bilhete de data é filho dele. Custom property herda pela ÁRVORE, não pela intenção — então o dia do bilhete lia o `--cor-texto` da PELE (branco) sobre o papel branco e media 1,00:1, e o mês lia `--palco-suave` `#d9cdf0` sobre branco e media 1,51:1. Renderizado com o motor de verdade em 2026-08-21: `color: rgb(255,255,255)` sobre `background-color: rgb(255,255,255)`. A peça cuja anatomia inteira é "papel branco sólido" — a que mata o BUG-TD-055 — estava INVISÍVEL no modo claro, e nenhuma leitura de código pegou isso porque o CSS lê certo: o seletor pede `--cor-texto`, e é o ANCESTRAL que responde outra coisa. A CORREÇÃO NÃO É MOVER A PELE, É TIRAR AS ILHAS DA CONVERSA. Papel dentro de banda escura não é semântico de página: é PIGMENTO, e pigmento não gira com modo nem com pele. Os quatro `--palco-papel*` do `:root` fazem isso, e a inversão some — o bilhete lê o mesmo branco com a pele por cima, sem pele, no modo claro e no modo escuro. O QUE FICA: a pele continua em `.palco-sobre` e `.palco-farol` (mover para a banda é mudança de cascata e é passagem B); a banda declara só `--foco`. O que MUDOU é que a pele deixou de alcançar o que não era dela. ============================================================================= ⚠️ A PALAVRA "PALCO" JÁ EXISTIA NESTA FOLHA, COM OUTRO SIGNIFICADO ============================================================================= `.tema-convite .palco` (duas regras, mais `views/convite/mostrar.php`) é o palco DO CONVITE: a superfície onde o papel aparece quando o envelope sai. Não há colisão de SELETOR — `.palco` e `.palco-*` são nomes distintos, e aquela regra é escopada em `.tema-convite`, família que o painel nunca veste. Há colisão de VOCABULÁRIO, e ela fica registrada aqui em vez de descoberta depois: o prefixo `.palco-*` é o mesmo dos tokens `--palco-*` publicados na §14 do design system, e por isso ele fica; quem for renomear renomeia o mais antigo e sem documento, que é o do convite. Está no relatório como consulta. -------------------------------------------------------------------------- */ /* ⚠️ O CONTÊINER NÃO RECORTA, e a mudança é correção de defeito e não estilo: `overflow: hidden` aqui foi a causa raiz do BUG-TD-102, em que o anel de foco de um `` colado na borda foi comido. Agora cada METADE se recorta sozinha com `mask`, e o contêiner só isola o empilhamento. */ .painel-palco { /* O anel de foco branco: o anel padrão é `--anel` (roxo escuro no claro), e roxo escuro sobre roxo escuro é anel que ninguém vê — justamente para quem o anel existe. Aqui ele mede 13,13:1 no claro e 9,46:1 no escuro. */ --foco: var(--tinta-texto); position: relative; isolation: isolate; margin-bottom: var(--e-5); border-radius: var(--raio-peca); color: var(--tinta-texto); } /* ----------------------------------------------------------------------------- AS DUAS METADES DO CANHOTO ----------------------------------------------------------------------------- Elas carregam a MESMA superfície chapada e se recortam sozinhas: o corpo morde os cantos de BAIXO, o pé morde os de CIMA, e juntas as quatro meias-luas viram dois furos inteiros em cima da linha do rasgo. ⚠️ A ÂNCORA É A BORDA DE CADA METADE, e não uma distância até o pé. É deliberado: em 320px o campo do link toma a linha inteira e os dois botões descem — o pé cresce de ~92px para ~152px, e qualquer `calc(100% - Xpx)` escrito à mão passaria a apontar para o lugar errado. ⚠️ `background-color` É OBRIGATÓRIO E VEM SOZINHO: a superfície é chapada de propósito (TD-076 §4 aposentou o gradiente como assinatura), e sem gradiente não há banding nem canto mais claro — o teto deixa de ser um ponto e passa a ser a banda inteira. -------------------------------------------------------------------------- */ .palco-corpo, .palco-pe { position: relative; background-color: var(--palco-1); } .palco-corpo { border-radius: var(--raio-peca) var(--raio-peca) 0 0; overflow: hidden; /* é o grão que pede, e aqui não há foco dentro */ padding: var(--e-6) var(--e-6) 24px; /* As duas sombras são INTERNAS de propósito — máscara não recorta o que está dentro da caixa, e recortaria uma sombra externa nas mordidas. Em cima, LUZ (a peça se levanta); embaixo, sombra (a peça tem espessura). Nas duas peles, sem token por modo. */ box-shadow: inset 0 1px 0 var(--palco-luz); -webkit-mask-image: radial-gradient(circle var(--palco-mordida) at 0 100%, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)), radial-gradient(circle var(--palco-mordida) at 100% 100%, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)); mask-image: radial-gradient(circle var(--palco-mordida) at 0 100%, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)), radial-gradient(circle var(--palco-mordida) at 100% 100%, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)); /* ⚠️ A LEGADA VEM ANTES DA PADRÃO, e a ordem importa: no Blink as duas são propriedades distintas e a última declarada ganha. E A DEGRADAÇÃO É BOA de propósito — sem suporte a composição, o padrão `add` soma as duas camadas, a união fica opaca em tudo e a banda simplesmente vira um retângulo. Some o rasgo, não some a tela. ⚠️ O OPACO DA MÁSCARA É TOKEN (`--mascara-cheia`) E NÃO `#000` À MÃO: a cerca do F8 cobrou, e cobrou certo — quem carrega literal é token. `mask` lê só o ALFA, então o valor não pinta nada; ver a declaração dele. */ -webkit-mask-composite: source-in; mask-composite: intersect; } .palco-pe { border-radius: 0 0 var(--raio-peca) var(--raio-peca); padding: 18px var(--e-6) var(--e-5); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.22); -webkit-mask-image: radial-gradient(circle var(--palco-mordida) at 0 0, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)), radial-gradient(circle var(--palco-mordida) at 100% 0, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)); mask-image: radial-gradient(circle var(--palco-mordida) at 0 0, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)), radial-gradient(circle var(--palco-mordida) at 100% 0, transparent calc(var(--palco-mordida) - 1px), var(--mascara-cheia) var(--palco-mordida)); -webkit-mask-composite: source-in; mask-composite: intersect; } /* O PICOTE — a linha entre o que FICA e o que SAI. ⚠️ SEM `opacity`. O tracinho é `--palco-suave` inteiro (6,27:1 no claro, 4,56:1 no escuro contra o teto da banda): baixar opacidade rebaixa contraste, e é exatamente assim que se perde uma linha medida — é a regra que o BUG-TD-055 comprou. O que controla a discrição é a ALTURA (2px) e a cadência (6 ligados, 8 desligados). */ .palco-pe::before { content: ""; position: absolute; left: var(--palco-mordida); right: var(--palco-mordida); top: 0; height: 2px; background-image: repeating-linear-gradient(90deg, var(--palco-suave) 0 6px, transparent 6px 14px); } /* O GRÃO. Filtro SVG INLINE (`feTurbulence` + `feColorMatrix saturate=0`), nunca `data:` URI e nunca arquivo — é o que a CSP `style-src 'self'` permite sem asset novo. Sobre superfície CHAPADA ele não está lá para matar banding (não há banding sem gradiente): está para o objeto ler como CARTÃO e não como div. ⚠️ Ele NÃO é enfeite isento: ruído sobre superfície é o fundo real de cada glifo, e é esta camada que produz os dois `--palco-teto*`. */ .palco-grao { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--palco-grao-alfa); pointer-events: none; } .palco-conteudo { position: relative; /* acima do grão */ display: grid; gap: var(--e-6); } /* A PELE — só nos dois blocos que são texto de ponta a ponta. Ver o cabeçalho desta seção para o porquê de ela não morar na banda. */ .palco-sobre, .palco-farol { --cor-texto: var(--tinta-texto); /* 8,29:1 no teto da banda */ --cor-texto-suave: var(--palco-suave); /* 5,50:1 no teto da banda */ min-width: 0; color: var(--cor-texto); } /* ⚠️ `.palco-farol-rot` E `.palco-farol-num` TÊM DOIS CONSUMIDORES DESDE A PASSAGEM DO ADMIN, e quem for escopar estas regras precisa ler isto antes. O segundo é `views/admin/index.php`, o farol do consumo do mês — a §B.4 de `docs/painel-e-desktop.md` lista "o componente do Farol" entre as peças que o dono e o admin COMPARTILHAM e não podem divergir, e compartilhar componente é usar a mesma classe, não copiar a regra com outro nome. Escrever `.painel-palco .palco-farol-rot` aqui apagaria o rótulo e o número do admin SEM ERRO NENHUM aparecendo — os dois voltariam ao tamanho de corpo, e um farol de 51,2px que vira 16px não quebra nada, só deixa de ser farol. O que NÃO é compartilhado é a PELE (`.palco-sobre, .palco-farol`), que redeclara `--cor-texto` para branco: no admin o farol mora num `.painel-status` claro e a tinta é a da página. É por isso que o admin usa as peças de dentro e nunca o contêiner `.palco-farol`. */ .palco-rotulo, .palco-farol-rot, .palco-link-rot { font-family: var(--f-display); font-size: var(--fs-1); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .palco-rotulo, .palco-farol-rot { color: var(--cor-texto-suave); } .palco-identidade { display: flex; gap: var(--e-4); align-items: flex-start; margin-top: var(--e-2); } /* ----------------------------------------------------------------------------- BUG-TD-068 — A COLUNA AO LADO DO BILHETE, E POR QUE ELA PRECISA DO PISO ZERO ----------------------------------------------------------------------------- Item de fila `flex` nasce com o piso em `min-content`, e `min-content` de um bloco de texto é a maior PALAVRA que ele contém. Um local ou um endereço com um token longo sem espaço fixava esse piso acima do espaço disponível, a fila estourava a banda e o recorte da banda (então em `.painel-palco`) comia o excedente. A CONTA, medida na folha e não estimada: em 375px o conteúdo do `.container` dá 343px; o recuo de 24px de cada lado sobra 295px; o bilhete leva 74px fixos mais o vão de 16px, e restam **205px** para o que mora aqui. ⚠️ QUEM COBRA O RECUO MUDOU DE ELEMENTO NA T-0031, E A CONTA NÃO MUDOU. Era `.palco-conteudo`; com o canhoto em duas metades, o recuo subiu para `.palco-corpo` (`24px 24px 24px`), que é a metade que hospeda esta coluna. O número continua 295px porque o valor continua 24px — mas quem for remedir precisa medir o elemento CERTO, senão acha 343 e conclui que sobra espaço. ⚠️ O QUE MORA AQUI MUDOU NO BUG-TD-080, e o piso zero continua necessário: a linha da meta (local e endereço) SAIU desta coluna e virou irmã de `.palco-identidade`, com os 295px inteiros. Ficaram o título e o selo — e o título é dado do usuário do mesmo jeito, com o mesmo token longo possível. ⚠️ E O RECORTE QUE ENGOLIA O EXCEDENTE TROCOU DE DONO, o que NÃO desarma o defeito: `.painel-palco` deixou de ter `overflow: hidden` (era ele que comia o anel de foco no BUG-TD-102), mas `.palco-corpo` tem — é o grão que pede —, e `.palco-titulo` tem o seu próprio, com `-webkit-line-clamp`. Ou seja, o sumiço silencioso continua possível nos dois níveis, e o piso zero continua sendo metade da correção. ⚠️ O QUE MUDOU COM A REPAGINADA, e é isto que torna o defeito pior do que parece: antes da T-0016 esta linha era `.evento-detalhes`, ficava FORA da fila do bilhete e usava a largura cheia do cartão. A repaginada reduziu o espaço em cerca de 40% E trocou "estoura e aparece" por "some sem avisar". Truncar em silêncio é pior que quebrar feio: ninguém reporta o que não vê. O par é o mesmo que `.album-parte-linha` e `.convidado-info` + `.convidado-contato` já usavam nesta folha — piso zero no item da fila, quebra de token no texto —, e as duas metades são necessárias: só o piso zero deixa a caixa encolher e o token vazar dela; só a quebra não adianta enquanto o piso segurar a caixa. -------------------------------------------------------------------------- */ .palco-info { min-width: 0; } /* ----------------------------------------------------------------------------- O BILHETE — a ilha de papel, e é ela que substitui o `.data-tile` ----------------------------------------------------------------------------- Papel BRANCO SÓLIDO dentro da banda escura. Gradiente sobre gradiente sumiria; o papel mede 8,29:1 contra o teto da banda, e a tinta sobre ele 14,92:1. ⚠️ ZERO `opacity`. É a peça que mata o BUG-TD-055 — ver o bloco de remoção do `.data-tile` mais acima, com as três razões medidas. `tabular-nums` no dia: o número troca de largura ao trocar de dia sem isso, e um bilhete que muda de largura sozinho desalinha o título ao lado. */ .palco-bilhete { flex: 0 0 auto; width: 74px; padding: 11px 0 9px; text-align: center; background: var(--palco-papel); border-radius: var(--raio-peca); /* a sombrinha do bilhete é interna à banda e não passa por máscara nenhuma */ box-shadow: 0 10px 22px -14px rgb(0 0 0 / 0.65); } .palco-bilhete-dia { display: block; font-family: var(--f-display); font-size: var(--fs-6); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--palco-papel-tinta); /* 15,53:1 sobre o papel */ } .palco-bilhete-mes { display: block; font-family: var(--f-display); font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--palco-papel-suave); /* 7,10:1 sobre o papel */ } /* Até TRÊS linhas e depois reticências: protótipo trabalha com dado curto, e um título de 80 caracteres em 375px é o caso que ele nunca faz. ⚠️ A quebra de token entra junto com o piso zero de `.palco-info` (BUG-TD-068): aqui o recorte é da PRÓPRIA caixa, então uma palavra maior que a linha some dentro dela sem estourar nada — o mesmo sumiço silencioso, num lugar onde nem a borda da banda denunciaria. */ .palco-titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; font-family: var(--f-display); /* `clamp()` e não degrau cravado: o nome da festa é o objeto da dobra e precisa crescer com a tela sem passar por cima do farol em 375px. */ font-size: clamp(1.6875rem, 5.4vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; } /* O SELO DA CONTAGEM. ⚠️ O PREENCHIMENTO DEIXOU DE SER `rgba` E VIROU TOKEN SÓLIDO (`--palco-2`), e a troca é a mesma correção de arquitetura que TD-076 fez nas pastilhas: preenchimento em rgba COMPÕE com o que estiver atrás, e o que está atrás muda (grão, teto, modo). Branco sobre o sólido mede 8,28:1 no claro e 6,06:1 no escuro, e nenhum dos dois depende do substrato. O FIO continua em alfa, e essa metade da divisão é deliberada: na banda FIO É LUZ e PREENCHIMENTO É TINTA. Fio é objeto gráfico (piso 3:1) e composto ele mede 4,36 e 3,50; um preenchimento no mesmo alfa mediria 4,26 e 3,23 — reprova nas duas. Um alfa de fio para a banda inteira (`--palco-fio`), e não dois. ⚠️ CONTINUA PÍLULA: TD-076 §5 tirou o raio de pílula do BOTÃO, e selo não é botão. `white-space: nowrap` é o único da banda, e é de propósito: "faltam 27 dias" quebrado ao meio deixa de ser um selo. */ .palco-selo { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--e-2); padding: 6px 13px; border: 1px solid var(--palco-fio); border-radius: var(--raio-pilula); font-family: var(--f-display); font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; background: var(--palco-2); color: var(--cor-texto); } /* A LINHA DA META — data, hora, local e endereço, e são os dois últimos que trazem token longo do mundo real (BUG-TD-068). `anywhere` e não `break-word` porque é o valor que esta folha já usa nos três lugares onde o dado é do usuário (`.convidado-contato`, `.album-parte-linha`, o `
` do depurador),
   e porque ele também baixa o `min-content` — a caixa passa a poder encolher em
   qualquer caixa em que a ponham.
   ⚠️ DESDE O BUG-TD-080 ELA NÃO MORA MAIS DENTRO DE `.palco-info`: é irmã de
   `.palco-identidade`, filha direta de `.palco-sobre`, e por isso usa a largura
   inteira da banda. Em 375px são 295px medidos, contra os 205px que ela tinha ao
   lado do bilhete — e o endereço caiu de três linhas para duas. Quem for
   escopar esta regra em `.palco-info` some com ela da tela. */
.palco-meta {
    list-style: none;
    display: grid;
    gap: var(--e-1);
    margin-top: var(--e-3);
    font-size: var(--fs-2);
    line-height: var(--lh-normal);
    overflow-wrap: anywhere;
    color: var(--cor-texto-suave);
}

/* -----------------------------------------------------------------------------
   O FAROL — o número que decide o buffet
   -----------------------------------------------------------------------------
   Destaque por TAMANHO, POSIÇÃO e ISOLAMENTO: ele não gasta canal de cor, é
   branco puro. NUNCA em gradiente — a §4.4 proíbe texto em gradiente e a ponta
   rosa mede 4,36:1.
   ⚠️ O `border-left: 1px solid rgba(255,255,255,.22)` DO PROTÓTIPO NÃO ENTROU:
   ele mede 1,74:1 contra o teto da banda, ou seja, é uma linha de CSS que não
   desenha nada. A separação do farol já está feita pelo vão de 40px e pelo salto
   de `--fs-5` para `--fs-8`. (Proposta de remoção do `especialista-ui`, C-UI-05.)
   `clamp()` e não `--fs-8` cravado, pelo mesmo motivo do farol da miniatura da
   página inicial da T-0015 (que saiu com a T-0017):
   em 375px o farol de 51,2px ficaria quase o dobro do `
` da saudação. */
.palco-farol-num {
    font-family: var(--f-display);
    font-size: clamp(var(--fs-6), 7.5vw, var(--fs-8));
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    margin: var(--e-1) 0;
}

.palco-farol-obs {
    font-size: var(--fs-2);
    color: var(--cor-texto-suave);
}

/* A régua das confirmações dentro do palco. Ela REUSA `.progresso`/`.barra` — a
   mesma peça, a mesma marcação, o mesmo gancho de `app.js` — e troca só o par de
   cor, que é o que a superfície escura obriga a trocar. Três linhas, cada uma
   com o número ao lado. */
.palco-conf {
    margin-top: var(--e-4);
    max-width: 20rem;
}

.palco-conf .progresso {
    margin-bottom: 0;
}

/* O "6 de 12": menta como TEXTO no teto da banda mede 6,46:1. */
.palco-conf .progresso-info b {
    color: var(--palco-menta);
}

/* ⚠️ O TRILHO TAMBÉM SAIU DO `rgba`, pelo mesmo motivo do selo: superfície em
   alfa dentro da banda compõe com o grão e com o teto, e o par deixa de ser
   mensurável no dia em que qualquer um dos dois mudar. Sólido, a menta contra
   ele mede 4,44:1 no claro e 3,22:1 no escuro — acima dos 3:1 da WCAG 1.4.11
   para objeto gráfico. */
.palco-conf .barra {
    background: var(--palco-2);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.28);
}

/* ⚠️ ESTE É O LUGAR DO VERDE, E É O ÚNICO EM QUE ELE OCUPA ÁREA GRANDE
   (TD-076 §9): o painel do dono é celebração, e celebração é onde o verde pode
   ocupar área. Ele é MASSA e não tinta — nenhuma palavra da banda é verde, o que
   dispensa a menta de passar em texto e a deixa livre para ser saturada. */
.palco-conf .barra span {
    background: var(--palco-menta);
}

/* -----------------------------------------------------------------------------
   O PÉ — o que SAI daqui: o link do convite
   -----------------------------------------------------------------------------
   ⚠️ `.palco-link` DEIXOU DE CARREGAR O RECUO: ele agora mora dentro de
   `.palco-pe`, que é a metade recortada do canhoto e é quem tem o `padding`.
   A classe fica porque a view a emite e porque ela continua sendo o gancho do
   bloco; o que ela perdeu foi a geometria, que subiu um nível. */
.palco-link {
    position: relative;
}

.palco-link-rot {
    display: block;
    margin-bottom: var(--e-2);
    color: var(--palco-suave);       /* 6,27:1 no teto claro · 4,56:1 no escuro */
}

.palco-link-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* `--fs-3` são 16px, e o piso é de campo, não de estética: abaixo de 16px o iOS
   dá zoom sozinho ao focar. `text-overflow: ellipsis` recorta o que se VÊ e não
   o que se COPIA — o valor inteiro continua selecionável, que é literalmente o
   que o dono faz aqui. */
.palco-campo {
    flex: 1 1 18rem;
    min-width: 0;
    min-height: 46px;
    padding: 11px 15px;
    border: 1px solid var(--palco-fio);          /* 4,36:1 claro · 3,50:1 escuro */
    border-radius: var(--raio-tecla);
    font-family: var(--f-display);
    font-size: var(--fs-3);
    font-weight: 500;
    text-overflow: ellipsis;
    background: var(--palco-2);
    color: var(--tinta-texto);                   /* 8,28:1 claro · 6,06:1 escuro */
}

/* ⚠️ RAIO DE TECLA E NÃO PÍLULA. É TD-076 §5, e vale INCLUSIVE dentro da peça
   mais festiva do produto — é o que separa "console" de "página de festa". */
.palco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 20px;
    border-radius: var(--raio-tecla);
    font-family: var(--f-display);
    font-size: var(--fs-2);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--mov-rapido) var(--curva-padrao),
        background-color var(--mov-rapido) var(--curva-padrao),
        box-shadow var(--mov-rapido) var(--curva-padrao);
}

/* A SEGUNDA ILHA DE PAPEL. ⚠️ O COMENTÁRIO ANTERIOR AQUI DIZIA "`--cor-texto`
   aqui é o da PÁGINA e não o da pele", e ele estava certo por ACIDENTE: este
   botão está em `.palco-link`, fora de `.palco-sobre`, então escapava da pele —
   enquanto o bilhete, que o mesmo parágrafo citava como irmão, NÃO escapava e
   media 1,00:1. Comentário que sobrevive à própria razão é a próxima pessoa
   errando com confiança, então ele sai inteiro.
   O QUE VALE AGORA: papel é PIGMENTO (`--palco-papel*`), invariante de pele E
   de modo. Sem isso, no escuro a superfície viraria `#282136` (1,86:1 contra o
   teto da banda) e a tinta `#e6e1f0` sobre papel branco (1,28:1) — os dois
   desfechos medidos no `:root`. */
.palco-btn-claro {
    border: 1px solid var(--palco-papel);
    background: var(--palco-papel);
    color: var(--palco-papel-tinta);             /* 14,92:1 sobre o papel */
    box-shadow: 0 8px 18px -10px rgb(0 0 0 / 0.6);
}

.palco-btn-claro:hover {
    background: var(--palco-papel-toque);
}

/* ⚠️ AQUI O HOVER CLAREIA NOS DOIS MODOS, e não é exceção à regra "interagir é
   andar na direção da tinta": é a regra lida certo. Dentro da banda o papel
   local é escuro nas DUAS peles, então a tinta é clara nas duas e a interação
   anda para a luz nas duas. É a única região do sistema onde isso acontece. */
.palco-btn-vazado {
    border: 1px solid var(--palco-fio);
    background: transparent;
    color: var(--tinta-texto);
}

.palco-btn-vazado:hover {
    background: var(--palco-toque);   /* branco em cima: 7,50 claro · 5,69 escuro */
}

.palco-btn:active {
    transform: scale(0.97);
}

/* ⚠️ `:disabled` NÃO EXISTE EM PEÇA NENHUMA DO PROTÓTIPO, e o produto tem o
   estado. Sem `opacity` — a proibição de `opacity` sobre texto vale aqui também:
   a superfície e o rótulo trocam para o par NEUTRO, que já existe e mede 8,05:1.
   `aria-disabled` é a forma certa quando o botão precisa continuar focalizável;
   o seletor cobre as duas. */
.palco-btn:disabled,
.palco-btn[aria-disabled="true"] {
    border-color: var(--cor-neutro-borda);
    background: var(--cor-neutro-fundo);
    color: var(--cor-neutro-texto);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ⚠️ A REGRA DE FOCO DECLARA `outline` E `outline-offset`, E NADA MAIS. É o R3 da
   §13.7 virando anatomia: `border-radius` numa regra de `:focus-visible`
   esquadra toda pílula do produto no instante do foco de teclado — foi o defeito
   R2, achado em DUAS regras na T-0015. A forma é do componente; o foco é o anel.
   O anel já acompanha o `border-radius` do elemento sozinho. */
.painel-palco :focus-visible {
    outline: var(--foco-largura) solid var(--foco);
    outline-offset: var(--foco-desvio);
}

/* -----------------------------------------------------------------------------
   OS CINCO DESTINOS — peso igual, zero cor
   -----------------------------------------------------------------------------
   São os cinco caminhos da tela e nenhum deles é "o principal": por isso mesmo
   tamanho, mesmo peso e nenhuma cor. A grade se conta sozinha (`auto-fit`), que
   é medição do ESPAÇO que existe e não palpite sobre o aparelho — a mesma tese
   que tirou cinco media queries desta folha — eram QUATRO até T-0020, e a grade
   absorveu `Temas` sem uma regra nova.
   ⚠️ `Excluir` NÃO ESTÁ AQUI. A ação destrutiva saiu da fileira de navegação e
   foi para a zona de perigo, no pé da página: um botão de apagar do mesmo
   tamanho e na mesma fila dos cinco destinos é um erro de clique esperando
   acontecer. */
.palco-destinos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 10px;
    margin-bottom: var(--e-5);
}

.palco-destino {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 13px 15px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-tecla);
    box-shadow: var(--elev-1);
    background: var(--cor-cartao);
    color: var(--cor-texto);
    font-family: var(--f-display);
    font-size: var(--fs-2);
    font-weight: 600;
    text-decoration: none;
    transition:
        transform var(--mov-rapido) var(--curva-padrao),
        background-color var(--mov-rapido) var(--curva-padrao),
        box-shadow var(--mov-rapido) var(--curva-padrao),
        border-color var(--mov-rapido) var(--curva-padrao);
}

/* ⚠️ O HOVER GANHOU SUPERFÍCIE, E É O QUE FAZ ELE SOBREVIVER AO MODO ESCURO:
   `border-color` sozinha era o único sinal, e no escuro fio é TEXTURA (1,19:1) —
   ou seja, o estado existia no CSS e não existia na tela. `--cor-sob-ponteiro`
   escurece no claro e clareia no escuro, que é a regra "interagir é andar na
   direção da tinta" resolvendo os dois modos com um token só. */
.palco-destino:hover {
    transform: translateY(-1px);
    background: var(--cor-sob-ponteiro);
    border-color: var(--cor-info-borda);
    box-shadow: var(--elev-2);
}

.palco-destino:active {
    transform: translateY(0);
}

/* ⚠️ ERA `font-size: 1.2rem`, QUE É MEDIDA DE GLIFO DE TEXTO. Com o emoji, o
   tamanho do ícone saía da tipografia; com SVG ele sai da caixa, e 22px é o
   degrau que mantém o alvo visual do destino sem competir com o rótulo ao lado.
   A cor é a secundária: o rótulo é quem lê, o ícone é quem localiza. */
.palco-destino-icone {
    display: flex;
    flex: none;
    line-height: 0;
    color: var(--cor-texto-suave);
}

.palco-destino-icone .ico {
    width: 22px;
    height: 22px;
}

/* Sob o ponteiro o ícone acompanha a tinta cheia: é o mesmo movimento do fundo,
   e sem ele o ícone fica pálido justamente no item que está vivo. */
.palco-destino:hover .palco-destino-icone {
    color: var(--cor-acento);
}

/* -----------------------------------------------------------------------------
   A CONTA E A ZONA DE PERIGO — o pé da página
   -----------------------------------------------------------------------------
   As DUAS faixas empilhadas de hoje (o prazo da conta e o armazenamento) viram
   UMA seção, ao pé. Elas continuam sendo `.painel-status`, com os estados que já
   tinham: a cor do estado é REFORÇO, e quem carrega a informação é a frase.
   Achatá-las num cartão roxo único apagaria o "⚠️" que o dono precisa ver. */
.painel-secao-titulo {
    margin: var(--e-8) 0 var(--e-3);
    /* Micro-rótulo: caixa alta, muito espaçado e pequeno. É o cargo em que a
       Nunito arredondada some e a Space Grotesk desenha — a `.rotulo` da
       direção B, com o nome que esta folha já tinha. */
    font-family: var(--f-display);
    font-size: var(--fs-1);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.painel-conta-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--e-3);
    align-items: start;
}

/* ⚠️ OS DOIS SELETORES SÃO NOMEADOS, E `> *` NÃO SERVE AQUI — ISSO É CASCATA, NÃO
   ESTILO. `.painel-conta-grade > *` tem especificidade (0,1,0), a MESMA de
   `.painel-status` e de `.alerta`; e as duas moram DEPOIS nesta folha (linhas
   ~859 e ~3150 contra esta). Empate de especificidade quem resolve é a ordem, e
   a ordem perde para elas: a regra existiria e não pintaria nada. Escrita com a
   classe do filho, ela vale (0,2,0) e vence em qualquer ordem de arquivo.
   O vão entre os cartões é o `gap` da grade; a margem que cada peça carrega
   sozinha na pilha vertical não vale dentro dela. */
.painel-conta-grade > .painel-status,
.painel-conta-grade > .alerta {
    margin-bottom: 0;
}

.painel-perigo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    margin: var(--e-8) 0 var(--e-10);
    padding-top: var(--e-5);
    border-top: 1px solid var(--cor-borda);
}

/* A MEDIDA DE LEITURA NÃO ESTÁ AQUI. Ela vem de `.coluna-leitura`, na view — é a
   trava L4 (alvo ZERO) e ela reprova a etapa se alguém escrever `38rem` à mão. */
.painel-perigo-aviso {
    font-size: var(--fs-2);
    line-height: var(--lh-normal);
    color: var(--cor-texto-suave);
}

/* -----------------------------------------------------------------------------
   A ENTRADA EM ESCADA — ela revela a ORDEM DE LEITURA (palco → destinos → conta)
   -----------------------------------------------------------------------------
   `--mov-medio` + `--curva-entrada`, os que JÁ EXISTEM. O protótipo traz
   `cubic-bezier(.16,1,.3,1)` com o nome `--curva-entrada`, que é o nome de uma
   curva viva e diferente; redefini-la mudaria os três consumidores atuais em
   silêncio. O argumento decisivo não é o desvio de 3,5px: é que o produto já tem
   este gesto — o `@keyframes inicio-peca-chega`, que nasceu na miniatura do
   painel da página inicial da T-0015 (um cartão subindo sobre superfície
   escura) e hoje anima a capa do convite. Duas curvas para o mesmo gesto em duas telas do
   mesmo produto é a inconsistência que o design system existe para impedir.
   Os três atrasos são LITERAIS de propósito: são uma sequência, não uma escala
   reutilizável, e `--mov-cena` é exceção reservada ao envelope. */
@keyframes painel-entra {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.painel-entra {
    animation: painel-entra var(--mov-medio) var(--curva-entrada) both;
}

.painel-entra-1 { animation-delay: 60ms; }
.painel-entra-2 { animation-delay: 120ms; }
.painel-entra-3 { animation-delay: 180ms; }

/* -----------------------------------------------------------------------------
   MOVIMENTO REDUZIDO NO PALCO — o que SAI e o que FICA, item por item
   -----------------------------------------------------------------------------
   Sem regra global de `.001ms`: ela apagaria junto o feedback de estado, que é o
   contrário do que quem liga a preferência está pedindo.
     · entrada em escada .......... SAI (movimento de cena, decorativo)
     · enchimento da régua ........ sai o DESLIZE, fica o VALOR — a largura está
       no elemento (`app.js` escreve `style.width`), nunca no fim de uma
       animação; sem esse cuidado a barra ficaria em 0% e quem pediu menos
       movimento leria "ninguém confirmou"
     · translação do destino ...... SAI; a mudança de SOMBRA fica, e é ela que
       continua respondendo ao ponteiro
     · `:hover`, `:active`, `:focus-visible` ... FICAM. Feedback de estado não
       herda o corte
     · "Copiar" → "Copiado!" ...... FICA, e é obrigatório: é a única confirmação
       de que a ação aconteceu (está em `app.js`, e não em CSS, justamente para
       não haver como cortá-la aqui por engano)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .painel-entra {
        animation: none;
    }

    .barra span {
        transition: none;
    }

    .palco-destino:hover,
    .palco-destino:active {
        transform: none;
    }

    .palco-btn:active {
        transform: none;
    }
}

/* ---------------- Lista de convidados (dono da festa) ---------------- */

.lote {
    margin-top: 18px;
    border-top: 1px solid var(--cor-borda);
    padding-top: 14px;
}

.lote summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--cor-acento);
    padding: 8px 0;
}

.lote form {
    margin-top: 12px;
}

/* ---------------- Convidados (painel do dono) ---------------- */

/* Utilitário: esconder elemento (controlado via app.js) */
.oculto {
    display: none !important;
}

/* Layout largo do painel no desktop (body.painel-largo via $paginaLarga) */
.painel-largo .container {
    max-width: 1160px;
}

.grade-convidados {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

/* As duas colunas de `.grade-convidados` migraram para o bloco `--bp-3` do fim
   do arquivo. O VALOR não mudou (1024px = 64rem); mudou a unidade, e em `rem`
   quem aumenta a fonte do sistema recebe o leiaute simples mais cedo, que é o
   comportamento certo (WCAG 1.4.4). */

/* Grade genérica do painel: usa a largura toda em 2 colunas (mesma ideia da
   tela de convidados). Reutilizada em evento, sugestões e galeria. */
.grade-painel { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.grade-painel .form-secao { margin-bottom: 0; }
.coluna-lado { display: grid; gap: 20px; align-content: start; }
.coluna-lado .form-secao { margin-bottom: 0; }
.metricas-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.convite-link-espaco { margin-top: 18px; }
/* As duas colunas de `.grade-painel` migraram para o bloco `--bp-3` do fim do
   arquivo, com o mesmo valor (1024px = 64rem). */

/* Acompanhantes no formulário de cadastro */
.acomp-campos {
    margin: 12px 0 16px;
    padding: 14px;
    background: var(--cor-roxo-claro);
    border-radius: var(--raio-peca);
}

.acomp-titulo {
    display: block;
    /* Micro-rótulo — mesmo cargo de `.painel-secao-titulo`. */
    font-family: var(--f-display);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cor-acento);
    margin-bottom: 8px;
}

.acomp-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acomp-lista input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font: 600 16px 'Nunito', sans-serif;
    color: var(--cor-texto);
    background: var(--cor-cartao);
    border: 1px solid var(--limite);
    border-radius: 12px;
}

.acomp-lista input:focus {
    outline: none;
    border-color: var(--cor-acento);
}

.btn-leve-mais {
    margin-top: 10px;
    border: none;
    background: transparent;
    color: var(--cor-acento);
    font: 800 0.88rem 'Nunito', sans-serif;
    cursor: pointer;
    padding: 6px 0;
}

.btn-leve-mais:hover {
    text-decoration: underline;
}

.acomp-campos small {
    display: block;
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--cor-texto-suave);
}

/* Seta que mostra/esconde os acompanhantes na lista */
/* ⚠️ ESTE BOTÃO CONTINUA COM A FAMÍLIA DO CORPO, E NÃO COM A DE DISPLAY. O
   rótulo dele é `▾ N acomp.`, e o `▾` (U+25BE) é COPY DE ESPECIFICAÇÃO
   (`docs/especificacao-funcional.md`:180 e :514, RF-024) — não é ícone, e por
   isso não virou SVG na varredura da T-0031. Space Grotesk não cobre esse
   ponto de código; posto ali, o glifo cairia no reserva e mudaria de desenho
   sem ninguém pedir. A família de texto é quem tem o glifo. */
.seta-acomp {
    border: none;
    background: var(--cor-roxo-claro);
    color: var(--cor-acento);
    font: 800 0.74rem var(--f-corpo);
    border-radius: var(--raio-pilula);
    padding: 3px 10px;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}

/* ⚠️ T-0031 4a (BUG-TD-136) — `--cor-primaria` é MARCA (TD-076 §4) e não pinta
   controle: aberto, o botão dos acompanhantes é preenchimento vivo, e o par é o
   de `.btn` — `--cor-acento` com `--tinta-viva` em cima. Medido: 6,51:1 no
   claro e 8,69:1 no escuro (onde o violeta velho dava 2,80:1 contra o cartão). */
.seta-acomp.aberto {
    background: var(--cor-acento);
    color: var(--tinta-viva);
}

/* A FILEIRA DE CHIPS SE CONTA SOZINHA — e é o exemplo mais curto do porquê.
   Antes: 2 colunas na base e uma media query de 560px abrindo 4. (A regra está
   escrita em prosa, e não copiada, porque uma media query citada dentro de um
   comentário É CONTADA pelo grep que publica o placar lá no fim do arquivo — o
   contador mediria a própria explicação.)
   A media query pergunta a largura da JANELA; o que decide quantos chips cabem é a
   largura da CAIXA. `auto-fit` mede a caixa:
     · 328px de contêiner (viewport 360) → 2 colunas — igual a hoje
     · 1160px                            → 4 colunas de 282px — igual a hoje
     · e entre 560 e 606 de viewport passam a ser 3 e não 4, porque 4 chips de
       124px com o número grande dentro é aperto, não leiaute.
   `auto-fit` COLAPSA a trilha vazia, então quatro chips numa grade que caberia
   oito continuam quatro colunas de largura igual, sem faixa sobrando.
   ⚠️ A LINHA ACIMA DIZIA "um número de 1,2rem" E ENVELHECEU NA T-0016, quando o
   número passou a ler o token da escala. Não escrevo o tamanho aqui de novo: ele
   mora na regra logo abaixo, e número em prosa envelhece igual a comentário de
   código — foi assim que três documentos deste projeto passaram a afirmar coisas
   que já não eram verdade, todas certas no dia em que foram escritas. */
.stats-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.stat-chip {
    background: var(--cor-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-peca);
    padding: 9px 10px;
    text-align: center;
}

/* NÚMERO É TINTA. O destaque vem de TAMANHO, PESO e `tabular-nums` — não de cor.
   O gradiente recortado no glifo saiu pelos três motivos da §14.6: o par não é
   mensurável (5,70:1 no roxo e 4,60:1 no rosa, dentro do MESMO número), a §4.4
   proíbe texto em gradiente, e a direção A gasta o canal de cor num lugar só.
   `tabular-nums` porque estes quatro números ficam empilhados em cartões de
   mesma largura: sem ele, "1/2" e "11/12" desalinham a coluna a cada confirmação
   que chega.

   =============================================================================
    ⚠️ BUG-TD-069 — O TAMANHO MUDOU JUNTO, E A MUDANÇA FICA DECLARADA AQUI
   =============================================================================
   Esta regra media 1,2rem e passou a ler `--fs-5`, que vale 1,5rem: o número
   cresceu 25% numa tela (`views/painel/convidados.php`) que NÃO estava no
   escopo da repaginada. A troca não foi invenção — a §14.6 do design system
   prescreve `--fs-5` nesta linha, e o gate confirmou que não quebra: a fila é
   `auto-fit` de piso 8,5rem, dá duas colunas em 375px e o maior número servido
   cabe. O defeito foi de RELATÓRIO: a passagem 1 não declarou a mudança, e quem
   lesse concluiria que a tela não mudou.

   A REGRA QUE FICA, e ela vale para a próxima troca: substituir literal por
   token é EQUIVALÊNCIA; se o valor muda junto, é mudança de design e entra
   DECLARADA na lista branca da etapa, nunca de carona. O próprio design system
   escreve isso um parágrafo abaixo da tabela que prescreveu este `--fs-5`.
   ⚠️ E NÃO EXISTIA EQUIVALÊNCIA A ESCOLHER: a escala não tem 1,2rem. `--fs-4`
   fica 6% abaixo e `--fs-5` 25% acima — qualquer um dos dois é mudança de valor,
   e o que não existe é a opção de não mudar nada mantendo o token.

   UM FATO MEDIDO POR MIM QUE NEM A §14.6 NEM O GATE TINHAM NA MESA, e que é
   decisão do `especialista-ui` e não minha: a 1,5rem este número passa a ser
   MAIOR que o `
` da própria tela, que é `.painel-cabecalho h1` a 1,45rem e
   não tem sobrescrita em nenhum ponto de virada. A 1,2rem ele ficava abaixo.
   Inverter a hierarquia pode ser intencional — no palco o farol é
   deliberadamente maior que o título —, mas num chip de FILTRO isso não está
   escrito em lugar nenhum. Vai como consulta, e não como correção minha: tamanho
   de token é anatomia de componente, e anatomia não é do frontend. */
.stat-numero {
    display: block;
    /* NÚMERO É DISPLAY. É o cargo mais visível da direção B — `.inst-num` e
       `.heroi-num` da cabine — e o que mais separa esta tela da anterior: a
       Nunito arredondada some do dado e fica na prosa. `-0.02em` é o aperto
       que o número grande pede para não abrir a coluna. */
    font-family: var(--f-display);
    letter-spacing: -0.02em;
    font-size: var(--fs-5);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
    line-height: 1.2;
}

.stat-rotulo {
    font-family: var(--f-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-suave);
}

.stat-destaque {
    background: var(--cor-roxo-claro);
    /* Era `#ded2f7`, a um passo de `--cor-info-borda` (`#ddd0f7`) e sem nome. */
    border-color: var(--cor-info-borda);
}

/* Cards de estatística clicáveis (filtram a lista) */
a.stat-chip { text-decoration: none; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s; }
/* A ESCADA DE SUPERFÍCIE NO PONTEIRO: elevar é clarear no escuro e tingir no
   claro — `--sup-hover` já sabe para que lado andar, e a sombra passa a ser a
   `--elev-2` do sistema em vez de um roxo literal da paleta aposentada. */
a.stat-chip:hover { border-color: var(--cor-acento); transform: translateY(-1px);
    background: var(--sup-hover); box-shadow: var(--elev-2); }
.stat-chip.ativo { border-color: var(--cor-acento); background: var(--cor-roxo-claro); }

.acao-centro { text-align: center; margin-top: 4px; }
.filtro-ativo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 0.85rem; font-weight: 700; color: var(--cor-texto-suave); margin-bottom: 14px; }

.lista-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.lista-topo h2 {
    margin-bottom: 0;
}

.busca-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.busca-input {
    flex: 1;
    max-width: 260px;
    min-height: 44px;
    padding: 9px 14px;
    font: 600 16px 'Nunito', sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    border: 1px solid var(--limite);
    /* CAMPO NÃO É PÍLULA na direção B: a pílula é o selo. Um `` de texto
       em 999px é o que faz a tela de operação parecer página de festa (TD-076
       §5), e o campo da direção B tem o mesmo raio da tecla. */
    border-radius: var(--raio-tecla);
}

.busca-input:focus {
    outline: none;
    border-color: var(--cor-acento);
}

/* N10 do `design-system.md` §6, FECHADO: `--cor-rosa` é PREENCHIMENTO e nunca
   TEXTO — media 4,13:1 sobre a superfície de informação no claro e 3,49:1 no
   escuro. Os dois consumidores (este e `.acomp-x`) são a MESMA ação: desfazer.
   `--cor-erro-texto` é a tinta que o produto já tem para isso, mede 5,51:1 e
   8,00:1, e é a mesma família do `:hover` que `.acomp-x` já usava — o hover
   dizia "erro" enquanto a tinta dizia "marca".
   ⚠️ DESDE A T-0035 ESTE É O ÚNICO CONSUMIDOR: `.acomp-x` virou lixeira CINZA
   (`--cor-texto-suave`), por decisão do usuário — o vermelho no chip passou a
   ser o "não vai" da marca da resposta, e um remover vermelho ao lado dele
   seria lido como resposta. */
.busca-limpar {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cor-erro-texto);
    text-decoration: none;
}

.lista-convidados {
    list-style: none;
}

.convidado {
    padding: 14px 0;
    border-bottom: 1px solid var(--cor-borda);
}

.convidado:last-child {
    border-bottom: none;
}

/* ⚠️ E4 (`fluxos-e-acessibilidade.md` §7): o selo passou de `✅ 19/08 · 21:30`
   para `✅ Confirmado · 19/08 · 21:30`, e a conferência da quebra em 360px é
   desta etapa. A conta, com `.selo { white-space: nowrap }`:
     · caixa da lista em 360px de tela = 286px
     · avatar 44 + dois vãos de 12 = 68px fixos
     · o selo com a palavra passa de ~126px para ~204px
     · sobra para o nome e o telefone: 286 − 68 − 204 = 14px.
   Catorze pixels. O nome sairia uma letra por linha — e o selo NÃO encolhe,
   porque item de flex não vai abaixo do próprio conteúdo mínimo e `nowrap` faz
   o mínimo ser a frase inteira. Quem cede é sempre o nome, que é o dado.
   (As duas larguras de selo são ESTIMADAS por métrica de glifo, não lidas de um
   navegador — não há captura de tela nesta máquina. A conclusão não depende da
   precisão delas: mesmo errando 15 % para menos, sobrariam 45px para nome mais
   telefone, e a linha continuaria quebrada.)
   A correção é estrutural e não cosmética: a linha passa a QUEBRAR. O nome tem
   piso de 11rem; quando avatar + nome + selo não cabem, o selo desce sozinho
   para a segunda linha e `margin-left: auto` o mantém à direita — a mesma
   posição que ele ocupa na tela grande, então a leitura não muda de lugar
   quando o aparelho muda. Os três voltam a caber numa linha só a partir de
   ~522px de tela (44 + 12 + 176 + 12 + 204 = 448 de caixa), então o desktop
   inteiro — inclusive a coluna de lista de 510px em 64rem — continua exatamente
   como estava. */
.convidado-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Sozinho na segunda linha, o selo vai para a direita. Na linha cheia esta
   margem não faz nada: `.convidado-info` tem `flex-grow`, e a resolução das
   larguras flexíveis consome a folga ANTES de as margens automáticas verem
   qualquer coisa. Uma declaração, os dois estados. */
.convidado-linha > .selo {
    margin-left: auto;
}

.convidado-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* As iniciais são glifo de peça, não prosa: display, como todo selo. */
    font-family: var(--f-display);
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--cor-acento);
    background: var(--cor-roxo-claro);
}

.convidado-avatar.avatar-ok {
    color: var(--cor-sucesso-texto);
    background: var(--cor-sucesso-fundo);
}

/* `flex: 1 1 11rem` e não `flex: 1` (= `1 1 0%`): com base zero o nome nunca
   força a quebra, porque um item de base zero "cabe" em qualquer sobra — e era
   por isso que a linha se espremia em vez de quebrar. 11rem (176px) é o piso do
   dado: `Maria Aparecida` em 16px cabe, e o telefone mascarado
   `(11) 99999-0001` em 0,78rem também. `min-width: 0` continua, senão o nome
   longo empurraria a caixa e devolveria a rolagem horizontal pela outra porta. */
.convidado-info {
    flex: 1 1 11rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.convidado-info strong {
    font-family: var(--f-display);
    line-height: 1.3;
}

.convidado-contato {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    overflow-wrap: anywhere;
}

.convidado-info .selo {
    margin-top: 0;
}

/* Acompanhantes do convidado */
.acomp-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0 56px;
}

.acomp-rotulo {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-texto-suave);
}

.acomp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* CHIP CONTINUA PÍLULA — a pílula não morreu, ela virou vocabulário de SELO
       (TD-076 §5). O que sai é o literal: quem carrega valor é token. */
    font-family: var(--f-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cor-acento);
    background: var(--cor-roxo-claro);
    border-radius: var(--raio-pilula);
    /* 5px à esquerda desde a T-0035 (eram 12): quem abre o chip agora é o
       círculo da marca, e ele já traz o próprio respiro. */
    padding: 4px 6px 4px 5px;
}

/* -----------------------------------------------------------------------------
   A MARCA DA RESPOSTA DO ACOMPANHANTE (T-0035, decisão do usuário)
   -----------------------------------------------------------------------------
   Um círculo antes do nome, no desenho do selo `Confirmado`: check verde para
   quem vai, X vermelho para quem não vai, relógio cinza para quem ainda não tem
   resposta. É DECORATIVA (`aria-hidden`): o estado continua escrito no chip, e a
   cor nunca é o único sinal (CA-310). Os valores são os da demo aprovada; o
   tamanho é em `em`, e a marca acompanha o corpo do chip.

   O `sem resposta` fica só na tinta suave, sem pastilha, como na demo, e por
   isso o relógio é maior (1.25em contra .95em dos outros dois).

   Medido como cor PINTADA no Edge (T-0035), desenho contra o fundo imediato,
   piso de 3:1 para objeto gráfico — claro: check 6,58 · X 4,96 · relógio 5,84
   · lixeira 5,84 (5,76 sobre o `:hover`); escuro: 6,60 · 5,76 · 4,85 · 4,85
   (4,88 sobre o `:hover`). O círculo quase some contra o chip (1,0x:1): quem o
   desenha é o anel de 1px na própria tinta, a 5,04:1 ou mais nos dois modos. */
.acomp-marca {
    display: inline-grid;
    place-items: center;
    width: 1.45em;
    height: 1.45em;
    border-radius: 50%;
    flex: none;
    margin-right: 2px;
}

.acomp-marca svg {
    width: 0.95em;
    height: 0.95em;
}

.acomp-marca-vai {
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso-texto);
    box-shadow: inset 0 0 0 1px var(--cor-sucesso-borda);
}

.acomp-marca-nao {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro-texto);
    box-shadow: inset 0 0 0 1px var(--cor-erro-borda);
}

.acomp-marca-sem {
    color: var(--cor-texto-suave);
}

.acomp-marca-sem svg {
    width: 1.25em;
    height: 1.25em;
}

/* O REMOVER DE UM ACOMPANHANTE é uma lixeira CINZA desde a T-0035 (era um ×
   vermelho, que o dono lia como "não vai"). O vermelho fica só no `:hover`, que
   é quando o gesto já é de remover. O botão vermelho `Remover` da linha, que
   apaga o convidado inteiro, não mudou. */
.acomp-x {
    display: inline-grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--cor-texto-suave);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
}

.acomp-x:hover {
    background: var(--cor-erro-fundo);
}

/* Ações por convidado (acompanhante / contato / remover) */
.convidado-acoes {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 0 0 56px;
}

.convidado-detalhe summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cor-acento);
    padding: 4px 0;
    list-style: none;
}

.convidado-detalhe summary::-webkit-details-marker {
    display: none;
}

.detalhe-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.detalhe-form input {
    flex: 1;
    min-width: 150px;
    min-height: 44px;
    padding: 9px 12px;
    font: 600 16px 'Nunito', sans-serif;
    color: var(--cor-texto);
    border: 1px solid var(--limite);
    border-radius: 12px;
}

.detalhe-form input:focus {
    outline: none;
    border-color: var(--cor-acento);
}

.convidado-detalhe small {
    display: block;
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--cor-texto-suave);
}

/* A media query de 560px que abria `.stats-fila` em 4 colunas SAIU: a grade se
   conta sozinha (ver a regra dela). */

/* ---------------- Convite público ---------------- */

.convite-card {
    padding: 0;
    overflow: hidden;
    text-align: center;
}

.convite-topo {
    background: var(--grad);
    color: var(--tinta-texto);
    padding: 30px 20px 26px;
}

.convite-chamada {
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 8px;
}

.convite-titulo {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.25;
}

.convite-corpo {
    padding: 24px 20px 26px;
}

.convite-detalhes {
    display: inline-block;
    text-align: left;
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
   O RECADO É TEXTO LIVRE DO DONO — E POR ISSO A TIPOGRAFIA AQUI É DE LEITURA
   -----------------------------------------------------------------------------
   ⚠️ NÃO DEVOLVER `font-style: italic` NEM `font-weight: 600` A ESTA REGRA.
   Eles estavam aqui e, somados ao que o tema traz (`.tema-convite
   .convite-recado`, que pedia `Great Vibes` em `--fs-6`), produziram TRÊS
   defeitos ao mesmo tempo numa caixa que hospeda até 1000 caracteres digitados
   por quem cria a festa (`maxlength` do textarea em `views/painel/evento.php`):

     1. família caligráfica, desenhada para nome próprio curto, servindo texto
        corrido;
     2. itálico por cima de uma letra que já nasce inclinada;
     3. e o pior: peso 600 numa família que só carrega a face 400 — a Great
        Vibes era pedida ao Google Fonts sem eixo de peso nenhum
        (`Tema::hrefDasFontes()`), então o navegador FABRICA o negrito. A
        Imperial Script, que a substituiu na T-0035, também só tem a face 400:
        o aviso vale igual para a cursiva de hoje.

   O item 3 medido nesta folha, a 28,8px, contando pixel com tinta no canvas:
   Great Vibes 400 = 2.946 px de tinta, Great Vibes 600 = 5.598 px — quase o
   DOBRO de tinta com o avanço IDÊNTICO (690,59px nos dois). O traço engorda e
   as letras não se afastam: elas crescem umas por dentro das outras. Era isso
   que fazia "TESTE DE RECADO AOS CONVIDADOS" se atropelar na tela.

   `font-family: inherit` e não a pilha escrita de novo: a família de texto do
   produto é declarada UMA vez nesta folha, na regra `body`. Repetir a pilha
   aqui criaria a segunda fonte da verdade que já custou o BUG-TD-009. Nenhum
   ancestral do recado declara família (conferido: as famílias de exibição desta
   folha vivem sempre no próprio elemento — título, nome, idade, seção), então
   `inherit` resolve na Nunito.

   `font-weight: 400` E NÃO 500: medido aqui, a Nunito é carregada com
   `wght@400;600;700;800;900` e NÃO tem a face 500. A 18px, o peso 500 rende
   1.070 px de tinta e 328,41px de avanço — número por número o mesmo que 400,
   porque o navegador cai para 400 e não sintetiza nada. Declarar 500 seria
   escrever um peso que a família não tem, que é a forma exata do defeito 3
   acima; 400 é a mesma tela com a declaração verdadeira. (A face 600 existe de
   verdade — 1.361 px de tinta, 332,26px — e é outra tela, não esta.)
   -------------------------------------------------------------------------- */
.convite-recado {
    background: var(--cor-roxo-claro);
    border-radius: 14px;
    padding: 12px 16px;
    color: var(--cor-texto-suave);
    font-family: inherit;
    font-size: var(--fs-4);
    font-weight: 400;
    line-height: 1.55;
    margin-top: 8px;
}

/* ---------------- Lista de presentes ---------------- */

/* Borda em gradiente (cards de destaque nas páginas públicas) */
.card-presentes,
.card-borda {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--cor-cartao), var(--cor-cartao)) padding-box,
        var(--grad) border-box;
}

.presentes-cabecalho {
    text-align: center;
    margin-bottom: 22px;
}

.presentes-cabecalho h2 {
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.presentes-cabecalho .subtitulo {
    margin-bottom: 14px;
}

.presentes-cabecalho::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: var(--raio-pilula);
    background: var(--grad);
    margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   ⚠️ ACHADO DESTA PASSAGEM, E ELE FICA REGISTRADO EM VEZ DE SER "CORRIGIDO"
   -----------------------------------------------------------------------------
   AS SETE REGRAS ABAIXO — `.presentes-grid`, `.presente-card`, `.presente-card:hover`,
   `.presente-foto`, `.presente-sem-foto`, `.presente-info`, `.presente-nome` e
   `.presente-desc` — NÃO RENDERIZAM EM LUGAR NENHUM. Varrido nesta tarefa sobre
   `views/`, `app/`, `public/assets/js/` e a árvore do sistema antigo: zero
   ocorrências. A tela pública de presentes passou a ser o acordeão `.sug-*`
   (`views/convite/presentes.php`) e estas ficaram para trás — é a mesma morte de
   `.presente-valor`, que já saiu por este motivo.
   O QUE SOBROU VIVO da família: `.presentes-cabecalho` e `.presentes-cabecalho::after`,
   e as duas moram na tela do CONVIDADO, que veste `.tema-convite` e mantém o
   gradiente da festa de propósito — ela não é uma das duas superfícies da direção B.
   NÃO REMOVO AQUI: limpeza de legado tem critério de saída próprio (TD-012 item 3,
   "diff visual vazio") e a §7.2 proíbe misturá-la com uma passagem de pele —
   duas passagens, nunca uma. Vai para a lista da passagem B, ao lado de
   `.form-keys`, `.campo-hint`, `.admin-rodape-nota`, `.integra-futura`,
   `.integra-logo-mp`, `.integra-logo-wa` e `.em-breve`. (`.admin-link.desabilitado`
   estava nesta lista e JÁ SAIU na T-0031 3e, junto com a família `.admin-link`.)
   ⚠️ E O QUE ISSO SIGNIFICA PARA QUEM LER O PORTÃO DA PELE: a linha `.presente*`
   dele conta REGRAS, não pixels. A família aparece alcançada porque as regras
   leem os tokens novos; nenhuma tela muda por causa disso.
   -------------------------------------------------------------------------- */
.presentes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.presente-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--cor-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-peca);
    padding: 10px;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.presente-card:hover {
    transform: translateY(-2px);
    background: var(--sup-hover);
    box-shadow: var(--elev-2);
}

.presente-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.presente-sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    background: var(--cor-roxo-claro);
}

.presente-info {
    flex: 1;
    padding: 0 2px;
}

.presente-nome {
    font-family: var(--f-display);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

/* ⚠️ `.presente-valor` FOI REMOVIDO, E É REMOÇÃO — NÃO REPINTURA. Ele era uma das
   seis peças de `background-clip: text` do painel, mas não renderiza em lugar
   nenhum: zero referências em `views/`, `app/`, `public/assets/js/` e `tests/`,
   varrido por mim antes de apagar. Repintá-lo gastaria anatomia numa regra que
   nenhuma tela desenha; é o critério de PASSAGEM B da §7.2 (diferença visual
   zero porque o seletor está morto, e não porque a correção não fez nada). */

/* Mensagem do aniversariante sobre o presente */
.presente-desc {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--cor-roxo-claro);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    font-style: italic;
    color: var(--cor-texto-suave);
    line-height: 1.45;
}

.btn-comprar {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 0.9rem;
}

/* DESABILITADO REPROVAVA AA HOJE, NO CLARO, E NINGUEM TINHA MEDIDO: `.btn-comprar`
   herda `color: var(--tinta-texto)` de `.btn` (branco, para o gradiente), e a
   regra so trocava o FUNDO para `#d8d3e6`. Branco sobre `#d8d3e6` mede 1,46:1.
   O par neutro e o mesmo que `.palco-btn:disabled` ja usa - 8,05:1 no claro,
   8,45:1 no escuro - e sem `opacity`, que tornaria o par immensuravel. */
.btn-comprar:disabled {
    background: var(--cor-neutro-fundo);
    color: var(--cor-neutro-texto);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.confirmado-banner {
    border-top: 4px solid;
    border-image: var(--grad) 1;
}

/* Card do PIX (página de presentes do convidado) */
.pix-card .pix-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* ⚠️ ESTE `#fff` NÃO É SUPERFÍCIE DE CARTÃO E NÃO PODE VIRAR `--cor-cartao`.
   São os 8px de ZONA SILENCIOSA do QR Code, que a norma exige em branco:
   um leitor de código só separa módulo claro de módulo escuro se a moldura
   for clara. Apontá-lo para o cartão faria o PIX parar de ser lido no dia
   em que existisse um cartão escuro — um defeito que não aparece em captura
   de tela nenhuma, só na câmera de quem vai pagar. */
.pix-card .pix-qr img,
.pix-card .pix-qr canvas {
    border: 8px solid #fff;
    border-radius: 14px;
    box-shadow: 0 6px 22px -10px rgba(80, 52, 160, 0.35);
}

.pix-copia label {
    text-align: left;
}

/* Input de arquivo */
.campo input[type="file"] {
    padding: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 48px;
}

.campo input[type="file"]::file-selector-button {
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    margin-right: 10px;
    background: var(--cor-roxo-claro);
    color: var(--cor-acento);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Prévia da foto de perfil do aniversariante (form do evento) */
.foto-perfil-previa {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cor-borda);
    margin-bottom: 10px;
}

.btn-largo {
    width: 100%;
}

/* ⚠️ A SEÇÃO "Estatísticas (admin)" FOI REMOVIDA INTEIRA — as três regras eram
   CSS MORTO. `.estatistica`, `.estatistica-numero` e `.estatistica-rotulo` têm
   zero referências em `views/`, `app/`, `public/assets/js/` e `tests/`, varrido
   por mim antes de apagar. `.estatistica-numero` era a quarta das seis peças de
   `background-clip: text`; as outras duas saem junto porque eram os irmãos do
   mesmo componente, e apagar só o filho deixaria um contêiner órfão.
   Quem procurar as estatísticas do admin: elas são `.admin-stats`/`.stat`, que
   estão vivas e ficam noutra seção. */

/* ---------------- Links alternativos ---------------- */

.link-alternativo {
    margin-top: 20px;
    text-align: center;
    font-size: 0.92rem;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

.link-alternativo a {
    color: var(--cor-acento);
    font-weight: 800;
    text-decoration: none;
}

.link-alternativo a:hover {
    text-decoration: underline;
}

/* ---------------- Rodapé ---------------- */

.rodape {
    border-top: 1px solid var(--cor-borda);
    padding: 16px 0;
    text-align: center;
    color: var(--cor-texto-suave);
    font-size: 0.85rem;
}

.rodape .desenvolvido {
    margin-top: 2px;
    font-size: 0.8rem;
}

.rodape a {
    color: var(--cor-acento);
    font-weight: 700;
    text-decoration: none;
}

.rodape a:hover {
    text-decoration: underline;
}

/* As regras de tela grande deste trecho migraram para o bloco `--bp-2` do fim do
   arquivo, com o mesmo valor (768px = 48rem). */


.sug-grade {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; margin-top: 6px;
}

.sug-card .sug-ic { font-size: 1.9rem; display: block; margin-bottom: 6px; }


/* ----- Painel do dono (tema vibrante) ----- */
.icone-grade { display: flex; flex-wrap: wrap; gap: 8px; }
.icone-opcao { cursor: pointer; }
.icone-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.icone-opcao span {
    display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    font-size: 1.4rem; border: 2px solid var(--cor-borda); border-radius: 12px;
    background: var(--cor-cartao); transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.icone-opcao input:checked + span {
    border-color: var(--cor-acento); background: var(--cor-roxo-claro); transform: scale(1.06);
}
/* ⚠️ ANEL DE FOCO ESCRITO À MÃO — e ele é o pior dos quatro, porque foco é
   exatamente o que não pode sumir para quem depende dele. `#7c3aed` sobre o
   cartão escuro mede 2,71:1, abaixo do piso de 3:1; `--cor-acento` mede 6,70:1.
   ⚠️ A LARGURA E O DESVIO CONTINUAM CRAVADOS AQUI (`2px`), e isso é dívida
   registrada, não descuido: unificar os três tratamentos de foco do painel numa
   regra só é da F8, e trocar a COR sem mexer na forma é o que cabe nesta etapa.
   Os valores cravados coincidem com `--foco-largura`/`--foco-desvio`. */
.icone-opcao input:focus-visible + span { outline: 2px solid var(--cor-acento); outline-offset: 2px; }

.sug-lista-painel { list-style: none; }
.sug-item-painel {
    display: flex; align-items: center; gap: 12px; padding: 12px 2px;
    border-bottom: 1px solid var(--cor-borda);
}
.sug-item-painel:last-child { border-bottom: none; }
.sug-item-ic { font-size: 1.5rem; flex-shrink: 0; width: 30px; text-align: center; }
.sug-item-txt { flex: 1; min-width: 0; }
.sug-item-txt strong { display: block; font-size: 0.95rem; }
.sug-item-txt small { color: var(--cor-texto-suave); font-size: 0.82rem; }

/* ⚠️ PASTILHA E BLOCO SÃO DOIS CARGOS, E A DIREÇÃO B OS SEPAROU (TD-076).
   `--cor-aviso-fundo` é `--pastilha-ambar`: a superfície de um SELO — coisa
   pequena, com uma palavra dentro. Este aqui é um BLOCO de frase inteira, e o
   par de bloco é `--fundo-aviso`. Usar a pastilha nos dois faz o mesmo pigmento
   dizer duas coisas, que é o defeito que a `.btn-perigo` já corrigiu ao sair de
   `--cor-erro-fundo`. Medido com a tinta que já estava aqui (`--cor-aviso-texto`):
   5,59:1 no claro e 7,71:1 no escuro. */
.alerta-aviso {
    background: var(--fundo-aviso);
    border: 1px solid var(--cor-aviso-borda);
    color: var(--cor-aviso-texto);
}

/* ============================================
   Sugestões em 2 níveis: cards (categoria) + modal
   ============================================ */

.ico { width: 24px; height: 24px; display: block; }
.oculto { display: none; }

/* =============================================================================
   OS ÍCONES DE INTERFACE — o que substituiu os emoji da área autenticada
   =============================================================================
   TD-076, decisão do usuário em 2026-09-05. Emoji é glifo COLORIDO: ele não lê
   `currentColor`, então não acompanha pele, nem modo, nem estado — e cada
   aparelho desenha o seu. O desenho de traço acompanha os três de graça, porque
   a cor dele é a cor do texto ao lado.

   ⚠️ `.ico-biblioteca` É O SPRITE E ELE NÃO PODE SER `display: none`: em parte
   dos navegadores um ancestral com `display:none` impede o `` de resolver
   o símbolo. `width/height: 0` + `position: absolute` tira a caixa do fluxo sem
   tirar o elemento da árvore de renderização — que é a diferença que faz os
   ícones aparecerem.

   ⚠️ `.ico-em-linha` NÃO TEM `width` FIXA EM PIXEL: ele acompanha a altura da
   linha em que mora (`1em`) e desce meio pixel com `vertical-align`, para que um
   ícone dentro de um `
` cresça com o título e um dentro de um ``
   encolha com ele. Ícone de 24px cravado dentro de uma legenda de 13px é o que
   fazia o emoji parecer maior que a frase. */
.ico-biblioteca {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ico-em-linha {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex: none;
}

/* Ícone que abre uma frase: ele fica na base da primeira linha e ganha um vão
   próprio, para o texto não encostar nele quando a frase quebrar. */
.ico-frase {
    margin-right: 0.45em;
}

/* ----- Convidado: acordeão de cards ----- */
.sug-acordeao { display: flex; flex-direction: column; gap: 10px; }

.sug-acc-head {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px;
    background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}

.sug-acc-tit { flex: 1; min-width: 0; }

.sug-acc-seta {
    width: 9px; height: 9px; flex-shrink: 0; margin-right: 4px;
    border-right: 2px solid var(--ouro, var(--cor-primaria)); border-bottom: 2px solid var(--ouro, var(--cor-primaria));
    transform: rotate(45deg); transition: transform 0.25s;
}
.sug-acc.aberto .sug-acc-seta { transform: rotate(-135deg); }
.sug-acc-corpo { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.sug-acc.aberto .sug-acc-corpo { max-height: 1200px; }
.sug-acc-inner { padding: 0 14px 14px; }

.sug-modal-lista { list-style: none; }
.sug-modal-lista li { padding: 12px 4px; border-bottom: 1px dashed var(--cor-borda); }
.sug-modal-lista li:last-child { border-bottom: none; }
.sug-modal-lista strong { display: block; color: var(--cor-texto); font-size: 1rem; }
.sug-modal-lista span { display: block; color: var(--cor-texto-suave); font-size: 0.84rem; margin-top: 2px; }
.sug-modal-vazio { color: var(--cor-texto-suave); text-align: center; }

/* ----- Painel: alternar tipo (card / sugestão) ----- */
.tipo-switch { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.tipo-opcao { flex: 1; min-width: 130px; cursor: pointer; }
.tipo-opcao input { position: absolute; opacity: 0; }
.tipo-opcao span {
    display: block; text-align: center; padding: 12px; border: 2px solid var(--cor-borda);
    border-radius: 14px; font-weight: 800; color: var(--cor-texto-suave); background: var(--cor-cartao);
}
.tipo-opcao input:checked + span {
    border-color: var(--cor-acento); background: var(--cor-roxo-claro); color: var(--cor-acento);
}
.tipo-opcao input:disabled + span { opacity: 0.5; }

/* ----- Painel: seletor de ícone SVG ----- */
.icone-opcao span { color: var(--cor-texto-suave); }
.icone-opcao input:checked + span { color: var(--cor-acento); }

/* ----- Painel: blocos de card + itens ----- */
.cat-bloco { border: 1px solid var(--cor-borda); border-radius: var(--raio-peca); padding: 14px; margin-bottom: 14px; }
.cat-cabecalho { display: flex; align-items: center; gap: 12px; }
.cat-ic { color: var(--cor-acento); display: flex; flex-shrink: 0; }
.cat-ic .ico { width: 30px; height: 30px; }
.cat-info { flex: 1; min-width: 0; }
.cat-info strong { display: block; }
.cat-info small { color: var(--cor-texto-suave); font-size: 0.8rem; }
.cat-itens { list-style: none; margin-top: 12px; border-top: 1px solid var(--cor-borda); padding-top: 6px; }
.cat-itens li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cor-borda); }
.cat-itens li:last-child { border-bottom: none; }
.cat-item-txt { flex: 1; min-width: 0; }
.cat-item-txt strong { display: block; font-size: 0.92rem; font-weight: 700; }
.cat-item-txt small { color: var(--cor-texto-suave); font-size: 0.8rem; }
.cat-item-x { background: none; border: none; color: var(--cor-erro-texto); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 6px;
    border-radius: var(--raio-tecla); }
/* O ×  de remover é destrutivo: sob o dedo ele mostra a superfície da tecla de
   perigo, e não um cinza qualquer. Mesmo par de `.btn-perigo` em repouso. */
.cat-item-x:hover { background: var(--tecla-perigo); }
.cat-vazio { color: var(--cor-texto-suave); font-size: 0.88rem; margin-top: 10px; }

/* ============================================
   Painel: abas do evento + formulário em seções
   ============================================ */

/* CINCO PÍLULAS DESDE A T-0020, E NENHUM TOKEN MUDOU — isso é medido, não sorte.
   `flex-wrap: wrap` mais `flex: 0 0 auto` absorvem a quinta sozinhos. A soma dos
   cinco rótulos mais os quatro vãos dá 578,8 px (métrica média) a 620,9 px (peso
   800) contra 328 px de caixa em 360 px de tela: a barra QUEBRA em 2 ou 3 linhas.
   Diminuir o vão para `--e-1` foi testado antes de recusado — ganharia 16 px
   contra uma pílula de 110, e não remove linha nenhuma.
   ⚠️ ROLAGEM HORIZONTAL É PROIBIDA AQUI, contra a convenção de mercado que
   recomenda rolar abas em tela estreita. Três motivos, em ordem de peso: WCAG
   2.1 SC 1.4.10 (Reflow) exige refluxo em 320 px sem rolagem em duas dimensões e
   barra de navegação não é exceção; isto NÃO é um `role="tablist"` colado a um
   painel, são cinco `` dentro de um `