/* Temas (proposta 4 §4): as cores do sistema moram só aqui — `app.css` e `public/js/**` usam os tokens por função.
   `<html data-modo="claro|escuro" data-paleta="{id}">` (gravados por `js/tema-inicial.js` antes do primeiro desenho e por
   `js/tema.js` depois). A base de cada modo define TODOS os tokens; cada paleta além da Padrão tem um bloco por modo,
   sempre escopado pelo modo e pela paleta (especificidade 0,3,0 — um valor do claro nunca vaza para o escuro).
   Verde, vermelho e amarelo (e as linhas vencida/vence hoje e o degradê azul da barra "Organizar agora", --organizar-*)
   só na base de cada modo; o Alto contraste muda o tom,
   nunca a matiz (§4.4). O contraste AA de todas as combinações é teste: test/public/contraste.test.js (cor nova só com
   o par no teste). Os ids das paletas são os de `PALETAS` em src/dominio/temas.js.
   MENU (28/09/2026): a barra lateral tem tokens próprios (`--menu-*`) — nenhuma regra da sidebar lê `--superficie`,
   `--texto` etc. direto. Na base de cada modo eles apontam (`var()`) para os tokens de hoje, e as seis paletas de antes
   ficam como eram; Cobalto, Flamengo e Clube do Remo (trazidas do Gestor Pro) os sobrescrevem com o menu colorido.
   VERMELHO SÓ PARA ATRASO (proposta 11, D2): em toda sinalização de estado (badge, contador, ponto, faixa, cartão, cabeça
   de coluna, ícone, alerta, gráfico) o --vermelho quer dizer atrasado/vencido — nunca acento, nunca "pendente" nem
   "crítico". Exceção declarada: a mensagem de erro e o botão de ação destrutiva (.btn-perigo), a convenção de perigo.
   No Flamengo o vermelho fica só na MOLDURA — o menu preto com o item ativo e a marca em vermelho (o contador do menu é
   uma pílula branca) — e o acento do conteúdo é preto/grafite (claro) ou um tom claro neutro (escuro). */

/* ---------- Padrão — claro ---------- */
:root {
  --fundo: #F5F6F8;
  --fundo-coluna: #EEF0F4;
  --superficie: #FFFFFF;
  --superficie-alt: #FAFBFC;
  --borda: #E7E9EE;
  --texto: #1F2430;
  --texto-2: #545B69;
  --texto-3: #646B79;
  --acento: #2A64D6;
  --acento-forte: #1C4FC4;
  --acento-suave: #EAF0FE;
  --acento-suave-hover: #DBE6FD;
  --destaque: #C74500;
  --destaque-forte: #A83A00;
  --destaque-suave: #FFF1E8;
  --destaque-texto: #A33A00;
  --sobre-destaque: #FFFFFF;
  --marca: #FF5C00;
  --sobre-marca: #1F2430;
  --verde: #1B7A3D;
  --verde-forte: #156331;
  --verde-suave: #E6F4EA;
  --vermelho: #C5281D;
  --vermelho-suave: #FCEAE8;
  --amarelo: #8F5500;
  --amarelo-suave: #FFF4DF;
  --sobre-semantica: #FFFFFF;
  --toast: #1F2430;
  --sobre-toast: #FFFFFF;
  --linha-vencida: #FFF8F7;
  --linha-vence-hoje: #FFFDF5;
  --sobreposicao: rgba(16, 24, 40, .45);
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-md: 0 8px 24px rgba(16, 24, 40, .12);
  /* menu (sidebar): os valores de hoje, por referência — valem nos dois modos e em toda paleta que não os redefine */
  --menu-fundo: var(--superficie);
  --menu-linha: var(--borda);
  --menu-borda: var(--menu-linha); /* a borda direita da barra lateral: na base, o filete de sempre */
  --menu-texto: var(--texto-2);
  --menu-texto-3: var(--texto-3);
  --menu-forte: var(--texto);
  --menu-hover: var(--fundo);
  --menu-ativo: var(--acento-suave);
  --menu-sobre-ativo: var(--acento-forte);
  --menu-contador: var(--fundo);
  --menu-sobre-contador: var(--texto-2);
  --menu-contador-borda: var(--borda);
  --menu-contador-ativo: var(--superficie);
  --menu-sobre-contador-ativo: var(--texto-2);
  --menu-marca: var(--marca);
  --menu-sobre-marca: var(--sobre-marca);
  --menu-avatar: var(--acento-suave);
  --menu-sobre-avatar: var(--acento-forte);
  /* superfícies (proposta 9, item 1a): a barra do título, o realce dentro dela (hover, ativo, campo de busca) e as colunas
     do Painel e do Meu dia — na base, os de sempre; as três paletas do Gestor Pro põem o desenho de lá */
  --fundo-topbar: var(--superficie);
  --borda-topbar: var(--borda);
  --realce-topbar: var(--fundo);
  --fundo-quadro: var(--fundo-coluna);
  --realce-quadro: var(--superficie);
  --sombra-quadro: none;
  /* o botão Capturar (proposta 9, item 1b): azul-petróleo em toda paleta — nunca a cor da Nova Demanda (--destaque) */
  --captura: #0B6E82;
  --captura-forte: #095A6B;
  --sobre-captura: #FFFFFF;
  /* a tela de entrada (proposta 9, item 3): o degradê sem imagem (do acento da paleta ao véu) e a legenda sobre o véu */
  --entrada-fundo: var(--acento-forte);
  --entrada-veu: #102A4F;
  --sobre-entrada: #FFFFFF;
  --sobre-entrada-2: #DCE3EE;
  /* as amostras dos logotipos em Configurações do sistema: um fundo claro e um escuro, iguais nos dois modos */
  --amostra-clara: #FFFFFF;
  --amostra-escura: #1B2433;
  /* a barra "Organizar agora" da Minha Página (proposta 9, item 4b; 30/09/2026, o degradê bem visível que o dono pediu;
     proposta 11, D3: três estados): só o estado COM ITENS NA ENTRADA e nada atrasado tem degradê próprio — AZUL-ROYAL →
     VIOLETA. Com atrasadas e com a Entrada vazia (01/10/2026, o pedido do dono: padronizar com a faixa de críticos da
     Central) a barra usa os tokens de estado de sempre — --vermelho-suave/--vermelho e --verde-suave/--verde —, sem token
     próprio. O azul é cor de ESTADO, por isso só na base de cada modo (o Alto contraste muda o tom); o início na família
     azul-royal → violeta declarada no teste; o fim gira para o violeta. O texto (--sobre-organizar-pendente) passa nos
     DOIS extremos do degradê; o botão e o círculo do ícone são claros, com a cor da faixa por cima (pares no teste). */
  --organizar-pendente-inicio: #2F4FD8;
  --organizar-pendente-fim: #6D3FD0;
  --sobre-organizar-pendente: #FFFFFF;
  --organizar-botao: #FFFFFF;
  --organizar-botao-hover: #E8EBFD;
  --sobre-organizar-botao: #2F4FD8;
}

/* ---------- Padrão — escuro ---------- */
:root[data-modo="escuro"] {
  --fundo: #0F1319;
  --fundo-coluna: #141922;
  --superficie: #181D26;
  --superficie-alt: #1C222C;
  --borda: #2B323D;
  --texto: #E7EAF0;
  --texto-2: #B6BDC9;
  --texto-3: #9AA2B0;
  --acento: #7AA5FF;
  --acento-forte: #B3CBFF;
  --acento-suave: #1E2A44;
  --acento-suave-hover: #263558;
  --destaque: #FF8A4C;
  --destaque-forte: #FFA06C;
  --destaque-suave: #3A2416;
  --destaque-texto: #FFB78C;
  --sobre-destaque: #15110E;
  --marca: #FF8A4C;
  --sobre-marca: #15110E;
  --verde: #5CCB86;
  --verde-forte: #78D69B;
  --verde-suave: #15301F;
  --vermelho: #FF7B70;
  --vermelho-suave: #3B1C1A;
  --amarelo: #F0B85A;
  --amarelo-suave: #382B12;
  --sobre-semantica: #0F1319;
  --toast: #E7EAF0;
  --sobre-toast: #0F1319;
  --linha-vencida: #2A1B1C;
  --linha-vence-hoje: #29251A;
  --sobreposicao: rgba(0, 0, 0, .6);
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --sombra-md: 0 8px 24px rgba(0, 0, 0, .55);
  /* menu (sidebar): os mesmos apontamentos do claro */
  --menu-fundo: var(--superficie);
  --menu-linha: var(--borda);
  --menu-borda: var(--menu-linha); /* a borda direita da barra lateral: na base, o filete de sempre */
  --menu-texto: var(--texto-2);
  --menu-texto-3: var(--texto-3);
  --menu-forte: var(--texto);
  --menu-hover: var(--fundo);
  --menu-ativo: var(--acento-suave);
  --menu-sobre-ativo: var(--acento-forte);
  --menu-contador: var(--fundo);
  --menu-sobre-contador: var(--texto-2);
  --menu-contador-borda: var(--borda);
  --menu-contador-ativo: var(--superficie);
  --menu-sobre-contador-ativo: var(--texto-2);
  --menu-marca: var(--marca);
  --menu-sobre-marca: var(--sobre-marca);
  --menu-avatar: var(--acento-suave);
  --menu-sobre-avatar: var(--acento-forte);
  /* superfícies, Capturar e tela de entrada (proposta 9): os mesmos apontamentos do claro, com o petróleo e o véu do escuro */
  --fundo-topbar: var(--superficie);
  --borda-topbar: var(--borda);
  --realce-topbar: var(--fundo);
  --fundo-quadro: var(--fundo-coluna);
  --realce-quadro: var(--superficie);
  --sombra-quadro: none;
  --captura: #4FC3D9;
  --captura-forte: #7FD4E4;
  --sobre-captura: #0F1319;
  --entrada-fundo: var(--acento-suave);
  --entrada-veu: #06090E;
  --sobre-entrada: #FFFFFF;
  --sobre-entrada-2: #DCE3EE;
  /* as amostras dos logotipos em Configurações do sistema: um fundo claro e um escuro, iguais nos dois modos */
  --amostra-clara: #FFFFFF;
  --amostra-escura: #1B2433;
  /* a barra "Organizar agora" (proposta 9, item 4b; proposta 11, D3): o mesmo degradê azul, um tom mais fundo no escuro;
     o botão claro neutro */
  --organizar-pendente-inicio: #2944C2;
  --organizar-pendente-fim: #5E2FC0;
  --sobre-organizar-pendente: #FFFFFF;
  --organizar-botao: #F4F5F8;
  --organizar-botao-hover: #E3E6FB;
  --sobre-organizar-botao: #2944C2;
}

/* ---------- Oceano (azul-petróleo) ---------- */
:root[data-modo="claro"][data-paleta="oceano"] {
  --acento: #0B6E82;
  --acento-forte: #095A6B;
  --acento-suave: #E3F4F7;
  --acento-suave-hover: #CFEBF1;
  --fundo: #F3F6F7;
  --fundo-coluna: #EAF0F2;
}
:root[data-modo="escuro"][data-paleta="oceano"] {
  --acento: #4FC3D9;
  --acento-forte: #9BE1EE;
  --acento-suave: #13313A;
  --acento-suave-hover: #1A3F4A;
  --fundo: #0D1417;
  --fundo-coluna: #111B1F;
  --superficie: #152026;
  --superficie-alt: #19252C;
  --borda: #27363D;
}

/* ---------- Ametista (violeta) ---------- */
:root[data-modo="claro"][data-paleta="ametista"] {
  --acento: #6A3FD1;
  --acento-forte: #5530B0;
  --acento-suave: #F0EBFD;
  --acento-suave-hover: #E3DAFB;
}
:root[data-modo="escuro"][data-paleta="ametista"] {
  --acento: #B39AFF;
  --acento-forte: #D2C4FF;
  --acento-suave: #2A2145;
  --acento-suave-hover: #352A58;
}

/* ---------- Grafite (cinza neutro) ---------- */
:root[data-modo="claro"][data-paleta="grafite"] {
  --acento: #44546A;
  --acento-forte: #2F3B4C;
  --acento-suave: #E9ECF0;
  --acento-suave-hover: #DCE1E7;
  --fundo: #F4F4F5;
  --fundo-coluna: #ECECEE;
  --borda: #E4E4E7;
}
:root[data-modo="escuro"][data-paleta="grafite"] {
  --acento: #A7B4C6;
  --acento-forte: #D3DBE6;
  --acento-suave: #262B33;
  --acento-suave-hover: #2F353F;
  --fundo: #111214;
  --fundo-coluna: #16171A;
  --borda: #2E3036;
  --superficie: #1B1C20;
  --superficie-alt: #202126;
}

/* ---------- Areia (tons quentes e azul-marinho) ---------- */
:root[data-modo="claro"][data-paleta="areia"] {
  --acento: #1F4E8C;
  --acento-forte: #173D6E;
  --acento-suave: #E8EEF6;
  --acento-suave-hover: #D8E2F0;
  --fundo: #F6F3EE;
  --fundo-coluna: #EEE9E1;
  --superficie-alt: #FBF9F6;
  --borda: #E6E0D6;
  --texto: #2A2520;
  --texto-2: #5A5249;
  --texto-3: #685F55;
}
:root[data-modo="escuro"][data-paleta="areia"] {
  --acento: #8DB3E8;
  --acento-forte: #BFD5F4;
  --acento-suave: #1F2A3A;
  --acento-suave-hover: #28364A;
  --fundo: #15130F;
  --fundo-coluna: #1A1814;
  --superficie: #1F1C17;
  --superficie-alt: #24211B;
  --borda: #353028;
  --texto: #EDE7DD;
  --texto-2: #C4BBAE;
  --texto-3: #A89F92;
}

/* ---------- Cobalto (do Gestor Pro: cobalto e laranja sobre papel claro; menu azul-claro no claro, azul-noite no escuro) ---------- */
/* Comparado token a token com o Gestor Pro (v6.html: `:root` e `[data-tema="escuro"]`; as rgba de lá achatadas sobre
   o menu; `--fundo-coluna` = o `--trilho` de lá, como no Flamengo e no Remo). Todo token que tem par lá é o valor de lá,
   EXCETO esta lista (completa; a mesma do GUIA §1.1) — não "restaurar" o valor de lá sem refazer o teste de contraste:
   - claro  --menu-texto #56606F (lá --tinta-2 #5F6978: 4,50:1 sobre o menu #DFE8F6, no limite; aqui 5,16:1);
   - escuro --acento #5A8FF6 (lá --azul #4C86F5: 4,43:1 sobre --superficie-alt #1A2536);
   - escuro --destaque #FF7A2E / --destaque-forte #FF9152 com --sobre-destaque #15110E (lá o botão é --laranja-btn
     #D2560F / --laranja-btn-d #B8470A com texto branco: 4,14:1 no normal; aqui 7,22:1 e 8,43:1 — #FF7A2E é o
     --laranja de lá);
   - escuro --menu-ativo #2F6BE0 (lá #4C86F5: branco sobre ele = 3,48:1); a marca do escuro (--marca e --menu-marca)
     usa o mesmo #2F6BE0 com as iniciais brancas (4,88:1), igual na tela de entrada e no menu;
   - escuro --menu-contador #FF7A2E com texto escuro #15110E (lá #D2560F com branco = 4,14:1);
   - --menu-contador-ativo/--menu-sobre-contador-ativo (claro #FFFFFF/#0B3FAA, escuro #FFFFFF/#1E4FB8): lá o contador
     do item ativo é `.item.on .bdg` = 18% de branco sobre o chip com texto branco — achatado, #3A71E0 no claro (branco
     4,55:1, mas a pílula fica a 1,43:1 do chip: reprova os 3:1 de componente gráfico do teste) e, no escuro, sobre o
     chip daqui, #5486E6 (branco 3,54:1: reprova o AA de texto).
   O avatar do rodapé (--menu-avatar/--menu-sobre-avatar) é o `.av` de lá (--azul-soft/--azul-d): claro #EAF1FE/#0B3FAA
   (8,03:1), escuro #1A2A47/#9DBBFA. Sem par lá (desenhados aqui): --marca/--menu-marca num tom só (lá o logo é um
   degradê --azul → --navy, com as iniciais brancas como aqui) e --menu-contador-borda (lá o contador não tem borda). */
:root[data-modo="claro"][data-paleta="cobalto"] {
  --fundo: #F8F9FB;
  --fundo-coluna: #E6ECF5;
  --superficie-alt: #FCFCFD;
  --borda: #E4E9F0;
  --texto: #26303F;
  --texto-2: #5F6978;
  --texto-3: #5A6474;
  --acento: #0F52D9;
  --acento-forte: #0B3FAA;
  --acento-suave: #EAF1FE;
  --acento-suave-hover: #D6E3FA;
  --destaque: #C94800;
  --destaque-forte: #AE3E00;
  --destaque-suave: #FFF1E6;
  --destaque-texto: #9C4200;
  --marca: #0F52D9;
  --sobre-marca: #FFFFFF;
  --menu-fundo: #DFE8F6;
  --menu-linha: #CBD6E6;
  --menu-borda: var(--menu-fundo); /* sem filete à direita, como no Gestor Pro (o rodapé continua com o --menu-linha) */
  --menu-texto: #56606F;
  --menu-texto-3: #5A6474;
  --menu-forte: #1B3358;
  --menu-hover: #CAD9F3;
  --menu-ativo: #0F52D9;
  --menu-sobre-ativo: #FFFFFF;
  --menu-contador: #C94800;
  --menu-sobre-contador: #FFFFFF;
  --menu-contador-borda: #DFE8F6;
  --menu-contador-ativo: #FFFFFF;
  --menu-sobre-contador-ativo: #0B3FAA;
  --menu-marca: #0F52D9;
  --menu-sobre-marca: #FFFFFF;
  --menu-avatar: #EAF1FE;
  --menu-sobre-avatar: #0B3FAA;
  /* proposta 9 (item 1a): as superfícies do Gestor Pro — o título sobre o papel da página (o realce, branco), as colunas
     brancas com a sombra longa de lá (a mesma dos cards) e o total da coluna em pílula de acento */
  --fundo-topbar: var(--fundo);
  --borda-topbar: #EFF2F7;
  --realce-topbar: var(--superficie);
  --fundo-quadro: var(--superficie);
  --realce-quadro: var(--acento-suave);
  --sombra: 0 1px 2px rgba(38, 48, 63, .04), 0 6px 20px rgba(38, 48, 63, .06);
  --sombra-quadro: var(--sombra);
}
:root[data-modo="escuro"][data-paleta="cobalto"] {
  --fundo: #0E1522;
  --fundo-coluna: #131C2B;
  --superficie: #172131;
  --superficie-alt: #1A2536;
  --borda: #2A3649;
  --texto: #E4E9F1;
  --texto-2: #B5BFCD;
  --texto-3: #96A2B3;
  --acento: #5A8FF6;
  --acento-forte: #9DBBFA;
  --acento-suave: #1A2A47;
  --acento-suave-hover: #2B4270;
  --destaque: #FF7A2E;
  --destaque-forte: #FF9152;
  --destaque-suave: #3A2416;
  --destaque-texto: #FFB27A;
  --sobre-destaque: #15110E;
  --marca: #2F6BE0;
  --sobre-marca: #FFFFFF;
  --menu-fundo: #101826;
  --menu-linha: #232A37;
  --menu-borda: var(--menu-fundo); /* sem filete à direita, como no Gestor Pro (o rodapé continua com o --menu-linha) */
  --menu-texto: #B5BFCD;
  --menu-texto-3: #8793A5;
  --menu-forte: #E4E9F1;
  --menu-hover: #1A2A47;
  --menu-ativo: #2F6BE0;
  --menu-sobre-ativo: #FFFFFF;
  --menu-contador: #FF7A2E;
  --menu-sobre-contador: #15110E;
  --menu-contador-borda: #101826;
  --menu-contador-ativo: #FFFFFF;
  --menu-sobre-contador-ativo: #1E4FB8;
  --menu-marca: #2F6BE0;
  --menu-sobre-marca: #FFFFFF;
  --menu-avatar: #1A2A47;
  --menu-sobre-avatar: #9DBBFA;
  /* proposta 9 (item 1a): as superfícies do Gestor Pro, como no claro */
  --fundo-topbar: var(--fundo);
  --borda-topbar: var(--borda);
  --realce-topbar: var(--superficie);
  --fundo-quadro: var(--superficie);
  --realce-quadro: var(--acento-suave);
  --sombra-quadro: var(--sombra);
}

/* ---------- Flamengo (rubro-negro: menu preto, vermelho na moldura) — só cores, nada de escudo. O vermelho fica na
   MOLDURA (menu: item ativo e marca); o acento e o botão principal do conteúdo são preto/grafite no claro e um tom
   claro neutro no escuro, e o contador do menu é uma pílula branca com o número escuro (proposta 11, D6: contador é
   sinal de estado), porque vermelho significa atraso (atrasado, vencido). ---------- */
/* Margem estreita: o vermelho #C8102E (item ativo, marca) sobre o menu preto dá 3,08:1 no claro (#161616) e
   3,37:1 no escuro (#0A0A0A) — acima dos 3:1 de componente gráfico (PARES_MENU_GRAFICOS do teste); clarear o preto do
   menu ou escurecer o vermelho reprova.
   Claro comparado com o Gestor Pro (`[data-tema="flamengo"]` sobre o `:root` de lá): menu, papel, trilho, botão
   principal (#1C1C1C / #000000) e as rgba achatadas são os de lá. Diferem, e é a lista completa:
   - acento do conteúdo (--acento #4A4A4A, --acento-forte, --acento-suave, --acento-suave-hover, --destaque-suave,
     --destaque-texto): lá são vermelhos (--azul #C8102E, --azul-d #9A0C23, --azul-soft #FCEBEE, --azul-linha #F2C4CC,
     --laranja-soft #FCEBEE, --laranja-tinta #9A0C23) — aqui neutros pela regra do vermelho (decisão 3). O #4A4A4A é
     um grafite MÉDIO de propósito: 8,38:1 sobre o fundo, e 1,93:1 contra o --texto #1E1B1B, para link e .btn-link
     (que não têm sublinhado) continuarem se distinguindo do texto; no escuro, #B8B0B0 (1,78:1 contra #EEEAEA);
   - neutros (--superficie-alt #FCFBFB, --borda #E9E2E2, --texto/--texto-2/--texto-3 #1E1B1B/#595151/#655C5C): lá o
     bloco não os redefine e herda os cinza-azulados do `:root` (#FCFCFD, #E4E9F0, #26303F/#5F6978/#5A6474) — escolha
     daqui: cinzas neutros ao lado do acento grafite e do menu preto;
   - --menu-contador/--menu-sobre-contador e --menu-contador-ativo/--menu-sobre-contador-ativo: pílula branca com o
     número escuro (#161616; no escuro #0A0A0A) nos dois estados — lá o contador é vermelho (e o do ativo, 18% de
     branco sobre o chip vermelho, reprova os 3:1 de componente gráfico do teste); aqui sem vermelho (proposta 11, D6:
     o vermelho é só atraso);
   - --marca/--menu-marca #C8102E num tom só (lá o logo é um degradê #C8102E → #141414); --menu-contador-borda não tem
     par lá (o contador de lá não tem borda).
   O avatar do rodapé (--menu-avatar/--menu-sobre-avatar #FCEBEE/#9A0C23, 7,45:1) é o `.av` de lá (--azul-soft/--azul-d
   do Flamengo) — vermelho na moldura, como a decisão 3 manda. O escuro foi desenhado aqui. */
:root[data-modo="claro"][data-paleta="flamengo"] {
  --fundo: #FAF8F8;
  --fundo-coluna: #F3EDED;
  --superficie-alt: #FCFBFB;
  --borda: #E9E2E2;
  --texto: #1E1B1B;
  --texto-2: #595151;
  --texto-3: #655C5C;
  --acento: #4A4A4A;
  --acento-forte: #111111;
  --acento-suave: #EFEAEA;
  --acento-suave-hover: #E4DDDD;
  --destaque: #1C1C1C;
  --destaque-forte: #000000;
  --destaque-suave: #EFEAEA;
  --destaque-texto: #1C1C1C;
  --marca: #C8102E;
  --sobre-marca: #FFFFFF;
  --menu-fundo: #161616;
  --menu-linha: #2D2D2D;
  --menu-borda: var(--menu-fundo); /* sem filete à direita, como no Gestor Pro (o rodapé continua com o --menu-linha) */
  --menu-texto: #DAD3D3;
  --menu-texto-3: #A69C9C;
  --menu-forte: #FFFFFF;
  --menu-hover: #41151C;
  --menu-ativo: #C8102E;
  --menu-sobre-ativo: #FFFFFF;
  --menu-contador: #FFFFFF;
  --menu-sobre-contador: #161616;
  --menu-contador-borda: #161616;
  --menu-contador-ativo: #FFFFFF;
  --menu-sobre-contador-ativo: #161616;
  --menu-marca: #C8102E;
  --menu-sobre-marca: #FFFFFF;
  --menu-avatar: #FCEBEE;
  --menu-sobre-avatar: #9A0C23;
  /* proposta 9 (item 1a): as superfícies do Gestor Pro — o título sobre o papel da página (o realce, branco), as colunas
     brancas com a sombra longa de lá (a mesma dos cards) e o total da coluna em pílula de acento */
  --fundo-topbar: var(--fundo);
  --borda-topbar: #F1ECEC;
  --realce-topbar: var(--superficie);
  --fundo-quadro: var(--superficie);
  --realce-quadro: var(--acento-suave);
  --sombra: 0 1px 2px rgba(38, 48, 63, .04), 0 6px 20px rgba(38, 48, 63, .06);
  --sombra-quadro: var(--sombra);
}
:root[data-modo="escuro"][data-paleta="flamengo"] {
  --fundo: #121111;
  --fundo-coluna: #171515;
  --superficie: #1A1818;
  --superficie-alt: #211F1F;
  --borda: #342F2F;
  --texto: #EEEAEA;
  --texto-2: #C5BEBE;
  --texto-3: #A89F9F;
  --acento: #B8B0B0;
  --acento-forte: #F4F1F1;
  --acento-suave: #2B2727;
  --acento-suave-hover: #363131;
  --destaque: #E8E3E3;
  --destaque-forte: #FFFFFF;
  --destaque-suave: #2B2727;
  --destaque-texto: #E8E3E3;
  --sobre-destaque: #121111;
  --marca: #C8102E;
  --sobre-marca: #FFFFFF;
  --menu-fundo: #0A0A0A;
  --menu-linha: #232323;
  --menu-borda: var(--menu-fundo); /* sem filete à direita, como no Gestor Pro (o rodapé continua com o --menu-linha) */
  --menu-texto: #D6CFCF;
  --menu-texto-3: #A39999;
  --menu-forte: #FFFFFF;
  --menu-hover: #380B13;
  --menu-ativo: #C8102E;
  --menu-sobre-ativo: #FFFFFF;
  --menu-contador: #FFFFFF;
  --menu-sobre-contador: #0A0A0A;
  --menu-contador-borda: #0A0A0A;
  --menu-contador-ativo: #FFFFFF;
  --menu-sobre-contador-ativo: #0A0A0A;
  --menu-marca: #C8102E;
  --menu-sobre-marca: #FFFFFF;
  --menu-avatar: #262424;
  --menu-sobre-avatar: #FFFFFF;
  /* proposta 9 (item 1a): as superfícies do Gestor Pro, como no claro */
  --fundo-topbar: var(--fundo);
  --borda-topbar: var(--borda);
  --realce-topbar: var(--superficie);
  --fundo-quadro: var(--superficie);
  --realce-quadro: var(--acento-suave);
  --sombra-quadro: var(--sombra);
}

/* ---------- Clube do Remo (azul-marinho e branco: menu marinho, item ativo branco) — só cores, nada de escudo ---------- */
/* Claro = o `[data-tema="remo"]` do Gestor Pro sobre o `:root` de lá (os neutros — --superficie-alt, --borda e os três
   --texto — são os cinza-azulados que lá o Remo herda do `:root`; --acento-suave-hover = o --azul-linha #C6D5EF de lá);
   o escuro foi desenhado aqui. Diferem, e é a lista completa:
   - --menu-contador #8CB8F5 com texto #06173A (lá #2F7BE0 com branco = 4,17:1) — pelo AA, não "restaurar";
   - --menu-contador-ativo/--menu-sobre-contador-ativo #0B2D72/#FFFFFF: lá, 18% de branco sobre o chip BRANCO com
     texto branco — branco sobre branco (1:1), o número some;
   - a marca num tom só (lá o logo é um degradê #0B3A8C → #0A2150 com iniciais brancas, quase da cor do menu): no menu
     (--menu-marca) e, no escuro, também na entrada (--marca), branca com as iniciais marinho; na entrada do claro (fundo
     claro), --marca marinho #0B2D72 com iniciais brancas;
   - --menu-contador-borda não tem par lá (o contador de lá não tem borda).
   O avatar do rodapé (--menu-avatar/--menu-sobre-avatar #E7EEFA/#082C6B, 11,38:1) é o `.av` de lá (--azul-soft/--azul-d
   do Remo). */
:root[data-modo="claro"][data-paleta="remo"] {
  --fundo: #F6F8FC;
  --fundo-coluna: #EAEFF8;
  --superficie-alt: #FCFCFD;
  --borda: #E4E9F0;
  --texto: #26303F;
  --texto-2: #5F6978;
  --texto-3: #5A6474;
  --acento: #0B3A8C;
  --acento-forte: #082C6B;
  --acento-suave: #E7EEFA;
  --acento-suave-hover: #C6D5EF;
  --destaque: #0B2D72;
  --destaque-forte: #06173A;
  --destaque-suave: #E7EEFA;
  --destaque-texto: #0B2D72;
  --marca: #0B2D72;
  --sobre-marca: #FFFFFF;
  --menu-fundo: #0B2D72;
  --menu-linha: #2D4A86;
  --menu-borda: var(--menu-fundo); /* sem filete à direita, como no Gestor Pro (o rodapé continua com o --menu-linha) */
  --menu-texto: #D5DEEE;
  --menu-texto-3: #9FB0CF;
  --menu-forte: #FFFFFF;
  --menu-hover: #284683;
  --menu-ativo: #FFFFFF;
  --menu-sobre-ativo: #0B2D72;
  --menu-contador: #8CB8F5;
  --menu-sobre-contador: #06173A;
  --menu-contador-borda: #0B2D72;
  --menu-contador-ativo: #0B2D72;
  --menu-sobre-contador-ativo: #FFFFFF;
  --menu-marca: #FFFFFF;
  --menu-sobre-marca: #0B2D72;
  --menu-avatar: #E7EEFA;
  --menu-sobre-avatar: #082C6B;
  /* proposta 9 (item 1a): as superfícies do Gestor Pro — o título sobre o papel da página (o realce, branco), as colunas
     brancas com a sombra longa de lá (a mesma dos cards) e o total da coluna em pílula de acento */
  --fundo-topbar: var(--fundo);
  --borda-topbar: #EFF2F7;
  --realce-topbar: var(--superficie);
  --fundo-quadro: var(--superficie);
  --realce-quadro: var(--acento-suave);
  --sombra: 0 1px 2px rgba(38, 48, 63, .04), 0 6px 20px rgba(38, 48, 63, .06);
  --sombra-quadro: var(--sombra);
}
:root[data-modo="escuro"][data-paleta="remo"] {
  --fundo: #0C1322;
  --fundo-coluna: #101828;
  --superficie: #152036;
  --superficie-alt: #19253D;
  --borda: #283653;
  --texto: #E4E9F2;
  --texto-2: #B6C1D4;
  --texto-3: #98A5BC;
  --acento: #8AB0F5;
  --acento-forte: #C2D5FA;
  --acento-suave: #1B2B4B;
  --acento-suave-hover: #24375E;
  --destaque: #E6EDF9;
  --destaque-forte: #FFFFFF;
  --destaque-suave: #1B2B4B;
  --destaque-texto: #C2D5FA;
  --sobre-destaque: #0B2D72;
  --marca: #FFFFFF;
  --sobre-marca: #0B2D72;
  --menu-fundo: #0A2766;
  --menu-linha: #2C457B;
  --menu-borda: var(--menu-fundo); /* sem filete à direita, como no Gestor Pro (o rodapé continua com o --menu-linha) */
  --menu-texto: #D0DAEC;
  --menu-texto-3: #9CADCC;
  --menu-forte: #FFFFFF;
  --menu-hover: #274178;
  --menu-ativo: #FFFFFF;
  --menu-sobre-ativo: #0B2D72;
  --menu-contador: #8CB8F5;
  --menu-sobre-contador: #06173A;
  --menu-contador-borda: #0A2766;
  --menu-contador-ativo: #0B2D72;
  --menu-sobre-contador-ativo: #FFFFFF;
  --menu-marca: #FFFFFF;
  --menu-sobre-marca: #0B2D72;
  --menu-avatar: #274178;
  --menu-sobre-avatar: #FFFFFF;
  /* proposta 9 (item 1a): as superfícies do Gestor Pro, como no claro */
  --fundo-topbar: var(--fundo);
  --borda-topbar: var(--borda);
  --realce-topbar: var(--superficie);
  --fundo-quadro: var(--superficie);
  --realce-quadro: var(--acento-suave);
  --sombra-quadro: var(--sombra);
}

/* ---------- Alto contraste (contraste reforçado para leitura; semânticas na mesma matiz) ---------- */
:root[data-modo="claro"][data-paleta="alto_contraste"] {
  --texto: #000000;
  --texto-2: #1F2430;
  --texto-3: #3A4150;
  --borda: #6B7280;
  --acento: #0038A8;
  --acento-forte: #002B80;
  --acento-suave: #E6EEFF;
  --acento-suave-hover: #D3E0FF;
  --destaque: #A33800;
  --destaque-forte: #852E00;
  --destaque-texto: #852E00;
  --verde: #0F5A2A;
  --vermelho: #A3170D;
  --amarelo: #6B3F00;
  --captura: #075563;
  --captura-forte: #054350;
  --organizar-pendente-inicio: #213BB0;
  --organizar-pendente-fim: #5521B0;
  --sobre-organizar-botao: #213BB0;
}
:root[data-modo="escuro"][data-paleta="alto_contraste"] {
  --texto: #FFFFFF;
  --texto-2: #E4E7EC;
  --texto-3: #C9CED6;
  --borda: #8A8F99;
  --acento: #9CC0FF;
  --acento-forte: #CFE0FF;
  --verde: #7EE0A2;
  --vermelho: #FF9A92;
  --amarelo: #FFD27A;
  --fundo: #000000;
  --fundo-coluna: #0A0A0A;
  --superficie: #0F0F0F;
  --superficie-alt: #141414;
  --captura: #8FE3F0;
  --captura-forte: #B8EEF6;
  --sobre-captura: #000000;
  --organizar-pendente-inicio: #1F36A0;
  --organizar-pendente-fim: #4B1E9E;
  --sobre-organizar-botao: #1F36A0;
}