/* =====================================================================
   TEMA ONDA — preto e branco no estilo do menu do PS3 (XMB).
   Mesmo vidro líquido do tema Neon, com cores sóbrias e acentos pastel.
   Tudo aqui vale só com <html data-paleta="onda">; os outros temas não mudam.
   Organização:
   1. Tokens (escuro e claro)
   2. Fundo: brilho suave + fita de ondas
   3. Componentes (pílulas brancas/pretas no lugar dos degradês neon)
   4. Detalhes por página
   ===================================================================== */

/* A fita só aparece neste tema */
.ondas { display: none; }

/* ---------- 1. TOKENS ---------- */
[data-paleta="onda"] {
  --f-display: 'Outfit', 'Manrope', system-ui, sans-serif;
}

[data-paleta="onda"][data-tema="escuro"] {
  --fundo: #040406;
  --fundo-2: #0d0e13;
  --tinta: #f5f6fa;
  --tinta-2: #b3b9c8;
  --tinta-3: #767c8c;
  --roxo: #b8c2ff;        /* azul-lavanda pastel: o acento principal */
  --roxo-forte: #8e9cf5;
  --rosa: #d7c6ff;        /* lilás claro no lugar do rosa neon */
  --ciano: #aee3fa;
  --verde: #a8eccb;
  --cor-aula: #8577e0;    /* gráficos: aula × treino (os pastéis acima ficam iguais lado a lado) */
  --cor-treino: #169fb6;
  --ouro: #f0dca2;
  --perigo: #ff9fac;

  --vidro: rgba(14, 15, 21, .58);
  --vidro-forte: rgba(14, 15, 20, .92);
  --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);
  --vidro-reflexo: rgba(255, 255, 255, .1);
  --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;

  /* "pílula" = item selecionado (botão principal, aba ativa, check marcado) */
  --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);
  --onda-faixa: rgba(200, 212, 255, .035);
  --ceu-brilho: rgba(92, 112, 170, .17);
}

[data-paleta="onda"][data-tema="claro"] {
  --fundo: #eceef3;
  --fundo-2: #e2e5ec;
  --tinta: #0c0d12;
  --tinta-2: #444a5a;
  --tinta-3: #7a8091;
  --roxo: #5263d6;
  --roxo-forte: #3b49b5;
  --rosa: #8a6fd8;
  --ciano: #2a8fb8;
  --verde: #1f8f63;
  --cor-aula: #6152d6;
  --cor-treino: #0d8ba6;
  --ouro: #a67a12;
  --perigo: #d0405c;

  --vidro: rgba(255, 255, 255, .72);
  --vidro-forte: rgba(250, 251, 253, .95);
  --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);
  --vidro-reflexo: rgba(120, 140, 220, .12);
  --linha: rgba(15, 20, 40, .09);
  --campo: rgba(255, 255, 255, .62);
  --campo-borda: rgba(15, 20, 40, .12);
  --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, .06);
  --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);
  --onda-faixa: rgba(82, 99, 214, .03);
  --ceu-brilho: rgba(255, 255, 255, .9);
}

/* ---------- 2. FUNDO ---------- */
[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%);
}
[data-paleta="onda"] .a2 { opacity: calc(var(--aurora-opac) * .7); }
[data-paleta="onda"] .a3 { opacity: calc(var(--aurora-opac) * .6); }
[data-paleta="onda"] .grade { background-size: 64px 64px; filter: blur(2px); }

[data-paleta="onda"] .ondas {
  display: block; position: absolute; left: 0; right: 0; top: 18vh;
  width: 100%; height: 72vh; overflow: visible;
}
.ondas .l { fill: none; stroke: var(--onda-linha); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ondas .l2 { opacity: .55; }
.ondas .faixa { fill: var(--onda-faixa); }
/* fundo desfocado: as linhas viram faixas de luz macias, sem disputar com o conteúdo */
[data-paleta="onda"] .ondas { filter: blur(5px); }
.ondas .fita { animation: onda-corre 34s linear infinite; }
.ondas .f2 { animation-duration: 70s; animation-direction: reverse; }
@keyframes onda-corre { to { transform: translateX(-1440px); } }
.ondas .f2 { animation-name: onda-corre-2; }
@keyframes onda-corre-2 { to { transform: translateX(-2880px); } }
.leve .ondas .fita { animation: none; }

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

[data-paleta="onda"] .marca-logo { filter: drop-shadow(0 0 8px rgba(220, 228, 255, .55)); }
[data-paleta="onda"][data-tema="claro"] .marca-logo { filter: none; }
[data-paleta="onda"] .marca-nome { font-weight: 500; letter-spacing: .02em; }

[data-paleta="onda"] .nav-item.ativo { background: linear-gradient(90deg, color-mix(in srgb, var(--tinta) 12%, transparent), transparent); }
[data-paleta="onda"] .nav-item.ativo::before { background: var(--tinta); box-shadow: 0 0 12px color-mix(in srgb, var(--tinta) 70%, transparent); }
[data-paleta="onda"] .nav-item.ativo .ic { color: var(--tinta); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tinta) 60%, transparent)); }
[data-paleta="onda"] .topo-esq b { color: var(--tinta); }

/* Títulos mais finos e elegantes */
[data-paleta="onda"] .titulo-pagina { font-weight: 400; letter-spacing: -.02em; }
[data-paleta="onda"] .cursor { background: var(--tinta); box-shadow: 0 0 14px color-mix(in srgb, var(--tinta) 60%, transparent); }
[data-paleta="onda"] .hero-texto h2,
[data-paleta="onda"] .nivel-hero h2,
[data-paleta="onda"] .cel-caixa h2 { font-weight: 400; letter-spacing: -.02em; }
[data-paleta="onda"] .rotulo { letter-spacing: .18em; }

/* ---------- 4. COMPONENTES: pílulas no lugar do degradê neon ---------- */
[data-paleta="onda"] .btn-primario,
[data-paleta="onda"] .seg button.ativo,
[data-paleta="onda"] .chip.ativo,
[data-paleta="onda"] .nav-item .contador,
[data-paleta="onda"] .chip-nivel .selo,
[data-paleta="onda"] .toast .ic-t,
[data-paleta="onda"] .avatar,
[data-paleta="onda"] .bt-play,
[data-paleta="onda"] .barra-inferior .central .ic-bolha {
  background: var(--pilula); color: var(--pilula-tinta); box-shadow: var(--pilula-sombra);
}
[data-paleta="onda"] .btn-primario { --cor: var(--pilula-tinta); background-size: 100% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--pilula-sombra); }
[data-paleta="onda"] .btn-primario:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px -8px color-mix(in srgb, var(--roxo) 80%, transparent); }
[data-paleta="onda"] .bt-play { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 8px color-mix(in srgb, var(--tinta) 8%, transparent), 0 14px 40px -10px color-mix(in srgb, var(--roxo) 70%, transparent); }
[data-paleta="onda"] .barra-inferior .central .ic { color: var(--pilula-tinta) !important; }
[data-paleta="onda"] .barra-inferior .ativo { background: color-mix(in srgb, var(--tinta) 12%, transparent); }
[data-paleta="onda"] .barra-inferior .ativo .ic { color: var(--tinta); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tinta) 50%, transparent)); }
[data-paleta="onda"] .ripple { background: color-mix(in srgb, var(--roxo) 45%, transparent); }

/* Check: marcado vira pílula com o "v" escuro */
[data-paleta="onda"] .check { border-color: color-mix(in srgb, var(--tinta) 30%, var(--campo-borda)); }
[data-paleta="onda"] .check:hover { border-color: var(--tinta); box-shadow: 0 0 14px color-mix(in srgb, var(--tinta) 30%, transparent); }
[data-paleta="onda"] .check[aria-checked="true"] { background: var(--pilula); box-shadow: var(--pilula-sombra); }
[data-paleta="onda"] .check svg { stroke: var(--pilula-tinta); }

/* Interruptor e slider */
[data-paleta="onda"] .chave input:checked + .trilho { background: var(--pilula); box-shadow: var(--pilula-sombra); }
[data-paleta="onda"] .chave input:checked + .trilho::after { background: var(--pilula-tinta); }
[data-paleta="onda"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--tinta) var(--v, 50%), var(--campo-borda) var(--v, 50%)); }
[data-paleta="onda"] input[type="range"]::-moz-range-progress { background: var(--tinta); }
[data-paleta="onda"] input[type="range"]::-webkit-slider-thumb { background: var(--fundo); border: 2px solid var(--tinta); box-shadow: 0 0 16px color-mix(in srgb, var(--roxo) 60%, transparent); }
[data-paleta="onda"] input[type="range"]::-moz-range-thumb { background: var(--fundo); border: 2px solid var(--tinta); box-shadow: 0 0 16px color-mix(in srgb, var(--roxo) 60%, transparent); }

/* Barras de progresso: lavanda até o branco, brilho perolado */
[data-paleta="onda"] .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); }
[data-paleta="onda"][data-tema="claro"] .barra > i { background: linear-gradient(90deg, var(--roxo), var(--roxo-forte) 50%, var(--tinta)); }

/* Campos */
[data-paleta="onda"] .campo:focus,
[data-paleta="onda"] .campo-select: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); }
[data-paleta="onda"] :focus-visible { outline-color: var(--tinta); }
[data-paleta="onda"] .btn:hover { border-color: color-mix(in srgb, var(--tinta) 30%, transparent); }

/* Selos hexagonais (nível, celebração) em prata */
[data-paleta="onda"] .selo-nivel,
[data-paleta="onda"] .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));
}
[data-paleta="onda"][data-tema="claro"] .selo-nivel,
[data-paleta="onda"][data-tema="claro"] .cel-icone { background: linear-gradient(150deg, #3a3f50, #0c0d12 60%, var(--roxo-forte)); color: #fff; }
[data-paleta="onda"] .cel-caixa.ouro .cel-icone { background: linear-gradient(150deg, #fffaf0, var(--ouro)); color: #2a2210; }
[data-paleta="onda"] .cel-caixa.verde .cel-icone { background: linear-gradient(150deg, #f4fffa, var(--verde)); color: #0d2a1e; }
[data-paleta="onda"] .cel-caixa.fogo .cel-icone { background: linear-gradient(150deg, #fff4ec, #ffc8a8); color: #3a1a0a; }
[data-paleta="onda"] .cel-raios { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tinta) 16%, transparent) 0 10deg, transparent 10deg 30deg); }
[data-paleta="onda"] .cel-caixa .rotulo { color: var(--tinta-2); }

/* Medalhas: ouro pastel, sem laranja */
[data-paleta="onda"] .badge .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)); }
[data-paleta="onda"] .badge.trancada .medalha { background: var(--campo); color: var(--tinta-3); filter: none; }

/* Ofensiva: o fogo continua, só que mais suave */
[data-paleta="onda"] .chip-ofensiva.acesa .ic,
[data-paleta="onda"] .chama-grande.acesa { color: #ffb48a; }
[data-paleta="onda"] .semana-pontos i.feito { background: linear-gradient(150deg, #ffe3cf, #ffb3a1); box-shadow: 0 0 12px -2px rgba(255, 170, 140, .6); }
[data-paleta="onda"] .semana-pontos i.feito .ic { color: #3a1a0a; }
[data-paleta="onda"] .semana-pontos i.hoje { outline-color: var(--tinta); }
[data-paleta="onda"] .pilula-timer { border-color: color-mix(in srgb, var(--tinta) 30%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--roxo) 25%, transparent); }
[data-paleta="onda"] .pilula-timer .ponto-vivo { background: var(--tinta); box-shadow: 0 0 10px var(--tinta); }
[data-paleta="onda"] .pilula-timer.treino .ponto-vivo { background: var(--ciano); box-shadow: 0 0 10px var(--ciano); }

/* Ícone de "vazio" e itens selecionados */
[data-paleta="onda"] .vazio .ic-vazio { background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 18%, transparent); }
[data-paleta="onda"] .mais-item .ic { color: var(--tinta); }
[data-paleta="onda"] .mais-item.ativo,
[data-paleta="onda"] .escolha:has(input:checked) { border-color: color-mix(in srgb, var(--tinta) 60%, transparent); }
[data-paleta="onda"] .nota-item.ativa { background: color-mix(in srgb, var(--tinta) 9%, transparent); border-color: color-mix(in srgb, var(--tinta) 22%, transparent); }

/* Código: preto puro com realce pastel */
[data-paleta="onda"] .md pre,
[data-paleta="onda"] pre.codigo { background: rgba(0, 0, 0, .62); border-color: rgba(255, 255, 255, .1); color: #e8ebf3; }
[data-paleta="onda"][data-tema="claro"] .md pre,
[data-paleta="onda"][data-tema="claro"] pre.codigo { background: #111218; }
[data-paleta="onda"] .tk-k { color: #cbbcff; }
[data-paleta="onda"] .tk-s { color: #b6efd2; }
[data-paleta="onda"] .tk-n { color: #f3dca4; }
[data-paleta="onda"] .tk-c { color: #7d8494; }
[data-paleta="onda"] .tk-f { color: #b2dcff; }

/* ---------- 5. PÁGINAS ---------- */
/* Orbe do painel: líquido perolado */
[data-paleta="onda"] .orbe-arco { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tinta) 50%, transparent)); }
[data-paleta="onda"] .orbe-fundo { fill: color-mix(in srgb, var(--tinta) 5%, transparent); }
[data-paleta="onda"] .orbe-centro strong { font-weight: 400; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
[data-paleta="onda"] .orbe.cheio { animation-name: orbe-pulso-onda; }
@keyframes orbe-pulso-onda { 50% { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--tinta) 45%, transparent)); } }

/* Timer do foco */
[data-paleta="onda"] .timer .arco { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tinta) 45%, transparent)); }
[data-paleta="onda"] .timer-fase { color: var(--tinta-2); }
[data-paleta="onda"] .timer-tempo { font-weight: 400; }
[data-paleta="onda"] .timer.rodando .timer-tempo { text-shadow: 0 0 24px color-mix(in srgb, var(--tinta) 40%, transparent); }
[data-paleta="onda"] .timer-ciclos i.ok { background: var(--tinta); box-shadow: 0 0 8px var(--tinta); }

/* Barras da semana */
[data-paleta="onda"] .barras-semana .bar { background: linear-gradient(to top, color-mix(in srgb, var(--tinta) 10%, transparent), color-mix(in srgb, var(--tinta) 30%, transparent)); }
[data-paleta="onda"] .barras-semana .bar.hoje { background: var(--pilula); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--roxo) 70%, transparent); }

/* Trilha: cor de cada módulo em tom pastel */
[data-paleta="onda"] .cor-h { --cor-mod: hsl(var(--h, 270) 75% 83%); }
[data-paleta="onda"][data-tema="claro"] .cor-h { --cor-mod: hsl(var(--h, 270) 45% 45%); }
[data-paleta="onda"] .modulo-cabeca::before { box-shadow: 0 0 10px color-mix(in srgb, var(--cor-mod) 70%, transparent); }
[data-paleta="onda"] .grupo-cabeca h2 { font-weight: 400; letter-spacing: 0; }
[data-paleta="onda"] .dia-col.hoje { border-color: color-mix(in srgb, var(--tinta) 40%, transparent); box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 0 34px -12px color-mix(in srgb, var(--tinta) 60%, transparent), var(--vidro-sombra); }
[data-paleta="onda"] .dia-col.hoje header b { color: var(--tinta); }
[data-paleta="onda"] .pilha-cartas i { background: linear-gradient(150deg, rgba(255, 255, 255, .5), color-mix(in srgb, var(--roxo) 35%, transparent)); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--roxo) 60%, transparent); }

/* Atalho do portal: borda prata com brilho correndo, ícone em pílula */
[data-paleta="onda"] .atalho-portal {
  --borda-atalho: linear-gradient(120deg, color-mix(in srgb, var(--tinta) 15%, transparent), var(--tinta), var(--roxo), color-mix(in srgb, var(--tinta) 15%, transparent));
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--tinta) 6%, var(--vidro-forte)), var(--vidro-forte)) padding-box,
    var(--borda-atalho) border-box;
  background-size: 100% 100%, 300% 300%;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6), inset 0 1px 0 var(--vidro-brilho);
}
[data-paleta="onda"] .atalho-portal:hover { box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--roxo) 60%, transparent), inset 0 1px 0 var(--vidro-brilho); }
[data-paleta="onda"] .atalho-icone { background: var(--pilula); color: var(--pilula-tinta); box-shadow: var(--pilula-sombra); }
[data-paleta="onda"] .btn-portal {
  background:
    linear-gradient(var(--fundo-2), var(--fundo-2)) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--tinta) 15%, transparent), var(--tinta), var(--roxo), color-mix(in srgb, var(--tinta) 15%, transparent)) border-box;
  background-size: 100% 100%, 300% 300%;
}
[data-paleta="onda"] .btn-portal:hover { box-shadow: 0 0 20px -6px color-mix(in srgb, var(--tinta) 50%, transparent); }
[data-paleta="onda"] .btn-portal > .ic:first-child { color: var(--tinta); }
[data-paleta="onda"] .mais-portal { border-color: color-mix(in srgb, var(--tinta) 45%, transparent); box-shadow: 0 0 18px -8px color-mix(in srgb, var(--tinta) 50%, transparent); }