/* =====================================================================
   TEMA "APROVA" · estilo ONDA — preto e branco no estilo do menu do PS3.
   Adaptado de kit-visual-gamificacao/css/kit-tema-onda.css.
   Só vale com <html data-visual="aprova" data-paleta="onda">.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
html[data-visual="aprova"][data-paleta="onda"] {
  --f-display: 'Outfit', 'Manrope', system-ui, sans-serif;
}
html[data-visual="aprova"][data-paleta="onda"][data-tema="escuro"] {
  --fundo: #040406;
  --fundo-2: #0d0e13;
  --tinta: #f5f6fa;
  --tinta-2: #b3b9c8;
  --tinta-3: #80869a;
  --roxo: #b8c2ff;
  --roxo-forte: #8e9cf5;
  --rosa: #d7c6ff;
  --ciano: #aee3fa;
  --verde: #a8eccb;
  --ouro: #f0dca2;
  --perigo: #ff9fac;
  --vidro: rgba(14, 15, 21, .58);
  --vidro-forte: rgba(14, 15, 20, .93);
  --vidro-borda: rgba(255, 255, 255, .12);
  --vidro-brilho: rgba(255, 255, 255, .2);
  --vidro-sombra: 0 24px 50px -24px rgba(0, 0, 0, .9);
  --linha: rgba(255, 255, 255, .08);
  --campo: rgba(255, 255, 255, .05);
  --campo-borda: rgba(255, 255, 255, .13);
  --brilho-roxo: 0 0 24px rgba(200, 212, 255, .22);
  --grade: rgba(255, 255, 255, .015);
  --aurora-1: #26324f;
  --aurora-2: #362f4f;
  --aurora-3: #1f4560;
  --aurora-opac: .32;
  --calor-0: rgba(255, 255, 255, .05);
  --calor-1: rgba(184, 194, 255, .22);
  --calor-2: rgba(184, 194, 255, .45);
  --calor-3: #c9d1ff;
  --calor-4: #ffffff;
  --pilula: linear-gradient(160deg, #ffffff 0%, #e9ecf4 55%, #cfd6ff 100%);
  --pilula-tinta: #0a0b0f;
  --pilula-sombra: 0 8px 26px -8px rgba(210, 220, 255, .55);
  --onda-linha: rgba(255, 255, 255, .16);
  --ceu-brilho: rgba(92, 112, 170, .17);
}
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] {
  --fundo: #eceef3;
  --fundo-2: #e2e5ec;
  --tinta: #0c0d12;
  --tinta-2: #444a5a;
  --tinta-3: #6c7283;
  --roxo: #4555c8;
  --roxo-forte: #3b49b5;
  --rosa: #7a5fd0;
  --ciano: #1f7fa6;
  --verde: #1b7f58;
  --ouro: #8f690c;
  --perigo: #c3354f;
  --vidro: rgba(255, 255, 255, .72);
  --vidro-forte: rgba(250, 251, 253, .96);
  --vidro-borda: rgba(255, 255, 255, .85);
  --vidro-brilho: rgba(255, 255, 255, .95);
  --vidro-sombra: 0 20px 44px -24px rgba(20, 26, 50, .3);
  --linha: rgba(15, 20, 40, .1);
  --campo: rgba(255, 255, 255, .62);
  --campo-borda: rgba(15, 20, 40, .13);
  --brilho-roxo: 0 0 20px rgba(82, 99, 214, .2);
  --grade: rgba(15, 20, 40, .035);
  --aurora-1: #c6cfee;
  --aurora-2: #d9d0f2;
  --aurora-3: #c4e2f2;
  --aurora-opac: .45;
  --calor-0: rgba(15, 20, 40, .07);
  --calor-1: rgba(82, 99, 214, .2);
  --calor-2: rgba(82, 99, 214, .42);
  --calor-3: #5263d6;
  --calor-4: #0c0d12;
  --pilula: linear-gradient(160deg, #2a2d38 0%, #121318 60%, #050506 100%);
  --pilula-tinta: #ffffff;
  --pilula-sombra: 0 8px 22px -8px rgba(10, 12, 20, .5);
  --onda-linha: rgba(20, 28, 60, .1);
  --ceu-brilho: rgba(255, 255, 255, .9);
}
/* no Onda, o "item selecionado" é a pílula (branca no escuro, preta no claro) */
html[data-visual="aprova"][data-paleta="onda"] {
  --primario: var(--pilula);
  --primario-tinta: var(--pilula-tinta);
  --primario-sombra: var(--pilula-sombra);
}

/* ---------- 2. FUNDO: brilho suave + fita de ondas ---------- */
html[data-visual="aprova"][data-paleta="onda"] .ceu {
  background:
    radial-gradient(ellipse 90% 60% at 50% 62%, var(--ceu-brilho), transparent 70%),
    linear-gradient(180deg, var(--fundo) 0%, var(--fundo-2) 100%);
}
html[data-visual="aprova"][data-paleta="onda"] .ceu .a2 { opacity: calc(var(--aurora-opac) * .7); }
html[data-visual="aprova"][data-paleta="onda"] .ceu .a3 { opacity: calc(var(--aurora-opac) * .6); }
html[data-visual="aprova"][data-paleta="onda"] .ceu .grade { background-size: 64px 64px; filter: blur(2px); }
html[data-visual="aprova"][data-paleta="onda"] .ceu .ondas {
  display: block; position: absolute; left: 0; right: 0; top: 18vh;
  width: 100%; height: 72vh; overflow: visible; filter: blur(5px);
}
html[data-visual="aprova"] .ceu .ondas .l { fill: none; stroke: var(--onda-linha); stroke-width: 2; vector-effect: non-scaling-stroke; }
html[data-visual="aprova"] .ceu .ondas .l2 { opacity: .55; }
html[data-visual="aprova"] .ceu .ondas .fita { animation: aprova-onda-corre 34s linear infinite; }
html[data-visual="aprova"] .ceu .ondas .f2 { animation: aprova-onda-corre-2 70s linear infinite reverse; }
@keyframes aprova-onda-corre { to { transform: translateX(-1440px); } }
@keyframes aprova-onda-corre-2 { to { transform: translateX(-2880px); } }
html[data-visual="aprova"].leve .ceu .ondas .fita { animation: none; }

/* ---------- 3. VIDRO E ESTRUTURA ---------- */
html[data-visual="aprova"][data-paleta="onda"] :where(.card, .side, .modal) {
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
}
html[data-visual="aprova"][data-paleta="onda"] :where(.card) {
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 45%), var(--vidro);
}
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] :where(.card) {
  background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%), var(--vidro);
}
html[data-visual="aprova"][data-paleta="onda"] .card::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
html[data-visual="aprova"].leve[data-paleta="onda"] :where(.card, .side, .modal) { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* títulos mais finos e elegantes */
html[data-visual="aprova"][data-paleta="onda"] .ph h1 { font-weight: 400; letter-spacing: -.02em; }
html[data-visual="aprova"][data-paleta="onda"] :is(.card > h3, .card .ch h3, .rep .sect > h2, .modal header h2) { font-weight: 500; letter-spacing: -.01em; }
html[data-visual="aprova"][data-paleta="onda"] :is(.kpi .val, .scard .big) { font-weight: 500; letter-spacing: -.03em; }
html[data-visual="aprova"][data-paleta="onda"] .logo b { font-weight: 500; letter-spacing: .02em; }

/* menu: item ativo em branco (escuro) / preto (claro) */
html[data-visual="aprova"][data-paleta="onda"] .nav button.on { background: linear-gradient(90deg, color-mix(in srgb, var(--tinta) 12%, transparent), transparent); }
html[data-visual="aprova"][data-paleta="onda"] .nav button.on::before { background: var(--tinta); box-shadow: 0 0 12px color-mix(in srgb, var(--tinta) 70%, transparent); }

/* ---------- 4. COMPONENTES: pílulas no lugar do degradê neon ---------- */
html[data-visual="aprova"][data-paleta="onda"] .btn.gold { background-size: 100% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--pilula-sombra); }
html[data-visual="aprova"][data-paleta="onda"] .btn.gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px -8px color-mix(in srgb, var(--roxo) 80%, transparent); }
html[data-visual="aprova"][data-paleta="onda"] .btn:hover { border-color: color-mix(in srgb, var(--tinta) 30%, transparent); }
html[data-visual="aprova"][data-paleta="onda"] .tabs .tb.on { box-shadow: var(--pilula-sombra); }
html[data-visual="aprova"][data-paleta="onda"] .ripple { background: color-mix(in srgb, var(--roxo) 45%, transparent); }
html[data-visual="aprova"][data-paleta="onda"] :where(.bar) > :where(i) {
  background: linear-gradient(90deg, var(--roxo-forte), var(--roxo) 55%, var(--tinta));
  box-shadow: 0 0 14px color-mix(in srgb, var(--roxo) 55%, transparent);
}
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] :where(.bar) > :where(i) { background: linear-gradient(90deg, var(--roxo), var(--roxo-forte) 50%, var(--tinta)); }
html[data-visual="aprova"][data-paleta="onda"] input[type=checkbox],
html[data-visual="aprova"][data-paleta="onda"] input[type=range] { accent-color: var(--tinta); }
html[data-visual="aprova"][data-paleta="onda"] :is(input, select, textarea):focus {
  border-color: color-mix(in srgb, var(--tinta) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--roxo) 18%, transparent), var(--brilho-roxo);
}
html[data-visual="aprova"][data-paleta="onda"] :focus-visible { outline-color: var(--tinta); }
html[data-visual="aprova"][data-paleta="onda"] .cal .d.today,
html[data-visual="aprova"][data-paleta="onda"] .wcol.today { border-color: color-mix(in srgb, var(--tinta) 55%, transparent); box-shadow: 0 0 22px -10px color-mix(in srgb, var(--tinta) 70%, transparent); }
html[data-visual="aprova"][data-paleta="onda"] .vis-op.on { border-color: var(--tinta); }

/* ---------- 5. GAMIFICAÇÃO · efeitos no Onda: prata e pastel ---------- */
html[data-visual="aprova"][data-paleta="onda"] .gm-cel-icone { background: linear-gradient(150deg, #ffffff, #dfe4f2 40%, var(--roxo) 100%); color: #0a0b0f; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--roxo) 55%, transparent)); }
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] .gm-cel-icone { background: linear-gradient(150deg, #3a3f50, #0c0d12 60%, var(--roxo-forte)); color: #fff; }
html[data-visual="aprova"][data-paleta="onda"] .gm-cel-caixa.ouro .gm-cel-icone { background: linear-gradient(150deg, #fffaf0, var(--ouro)); color: #2a2210; }
html[data-visual="aprova"][data-paleta="onda"] .gm-cel-caixa.verde .gm-cel-icone { background: linear-gradient(150deg, #f4fffa, var(--verde)); color: #0d2a1e; }
html[data-visual="aprova"][data-paleta="onda"] .gm-cel-raios { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tinta) 16%, transparent) 0 10deg, transparent 10deg 30deg); }
html[data-visual="aprova"][data-paleta="onda"] .gm-rotulo { color: var(--tinta-2); letter-spacing: .18em; }
html[data-visual="aprova"][data-paleta="onda"] .gm-cel-caixa h2 { font-weight: 400; letter-spacing: -.02em; }

/* ---------- 6. GAMIFICAÇÃO · peças no Onda (prata, pastel, sem neon) ---------- */
html[data-visual="aprova"][data-paleta="onda"] { --gm-c1: #ffffff; --gm-c2: var(--roxo); --gm-c3: #e9ecf4; --gm-c4: var(--roxo-forte); }
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] { --gm-c1: var(--roxo); --gm-c2: var(--roxo-forte); --gm-c3: #7d8cf0; --gm-c4: #2a2d38; }
html[data-visual="aprova"][data-paleta="onda"] .gm-barra > i { background: linear-gradient(90deg, var(--roxo-forte), var(--roxo) 55%, var(--tinta)); box-shadow: 0 0 14px color-mix(in srgb, var(--roxo) 55%, transparent); }
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] .gm-barra > i { background: linear-gradient(90deg, var(--roxo), var(--roxo-forte) 50%, var(--tinta)); }
html[data-visual="aprova"][data-paleta="onda"] .gm-barra.ouro > i { background: linear-gradient(90deg, #fffaf0, var(--ouro)); }
html[data-visual="aprova"][data-paleta="onda"] .gm-orbe-arco { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tinta) 50%, transparent)); }
html[data-visual="aprova"][data-paleta="onda"] .gm-orbe-fundo { fill: color-mix(in srgb, var(--tinta) 5%, transparent); }
html[data-visual="aprova"][data-paleta="onda"] .gm-orbe-centro strong { font-weight: 400; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
html[data-visual="aprova"][data-paleta="onda"] .gm-orbe.alto .gm-orbe-centro strong { color: #0a0b0f; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
html[data-visual="aprova"][data-paleta="onda"] .gm-orbe.alto .gm-orbe-centro span { color: rgba(10, 11, 15, .8); }
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] .gm-orbe.alto .gm-orbe-centro strong { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] .gm-orbe.alto .gm-orbe-centro span { color: rgba(255, 255, 255, .9); }
html[data-visual="aprova"][data-paleta="onda"] .gm-orbe.cheio { animation-name: aprova-orbe-pulso-onda; }
@keyframes aprova-orbe-pulso-onda { 50% { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--tinta) 45%, transparent)); } }
html[data-visual="aprova"][data-paleta="onda"] .gm-selo-nivel { background: linear-gradient(150deg, #ffffff, #dfe4f2 40%, var(--roxo) 100%); color: #0a0b0f; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--roxo) 55%, transparent)); }
html[data-visual="aprova"][data-paleta="onda"][data-tema="claro"] .gm-selo-nivel { background: linear-gradient(150deg, #3a3f50, #0c0d12 60%, var(--roxo-forte)); color: #fff; }
html[data-visual="aprova"][data-paleta="onda"] :is(.gm-nivel-hero h2, .gm-num-grande, .gm-contagem b) { font-weight: 400; letter-spacing: -.02em; }
html[data-visual="aprova"][data-paleta="onda"] .gm-medalha { background: linear-gradient(150deg, #fffaf0, var(--ouro) 60%, #e6dcff); color: #2a2210; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ouro) 45%, transparent)); }
html[data-visual="aprova"][data-paleta="onda"] .gm-badge.trancada .gm-medalha { background: var(--campo); color: var(--tinta-3); filter: none; }
html[data-visual="aprova"][data-paleta="onda"] .gm-chip-ofensiva.acesa .gm-ic,
html[data-visual="aprova"][data-paleta="onda"] .gm-chama-grande.acesa { color: #ffb48a; }
html[data-visual="aprova"][data-paleta="onda"] .gm-semana i.feito { background: linear-gradient(150deg, #ffe3cf, #ffb3a1); box-shadow: 0 0 12px -2px rgba(255, 170, 140, .6); }
html[data-visual="aprova"][data-paleta="onda"] .gm-semana i.feito .gm-ic { color: #3a1a0a; }
html[data-visual="aprova"][data-paleta="onda"] .gm-semana i.hoje { outline-color: var(--tinta); }

/* ---------- 7. PÍLULA DO RELÓGIO no Onda ---------- */
html[data-visual="aprova"][data-paleta="onda"] .tm-pill:not([hidden]) { border-color: color-mix(in srgb, var(--tinta) 30%, transparent); box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 0 18px color-mix(in srgb, var(--roxo) 25%, transparent), var(--vidro-sombra); }
html[data-visual="aprova"][data-paleta="onda"] .tm-ponto { background: var(--tinta); box-shadow: 0 0 10px var(--tinta); }
html[data-visual="aprova"][data-paleta="onda"] .tm-pill.rodando .tm-tempo { text-shadow: 0 0 18px color-mix(in srgb, var(--tinta) 35%, transparent); }