/**
 * Alter ego — o tema sério (guia anônima) do login, da landing e do painel.
 * Mesma estrutura, outra pele: grafite profundo, acentos aço e osso; a
 * sombra-luz continua dura, só troca de matiz. Tudo entra por sobreposição das
 * mesmas variáveis que as páginas já consomem, então nenhuma regra de
 * componente precisa saber que existe um segundo tema.
 *
 * Na inversão, `--marca-azul` deixa de ser azul-vivo e vira o grafite dos
 * painéis; `--marca-amarelo` é a "luz" do logo virando aço; e `--marca-tinta`
 * inverte de preto para claro, porque é ela que pinta bordas, sombras duras e
 * títulos.
 *
 * O PAINEL não inverte a pele. Trabalhar horas seguidas sobre um fundo
 * grafite cansa, e o painel é ferramenta de expediente — ele fica no tema
 * claro sempre. Quem responde ao tema sério lá dentro é só a faixa de
 * provedores de IA do Analytics, que troca de PALETA (grafite e aço no lugar
 * do amarelo/azul da marca) mantendo a superfície clara: cartão sóbrio numa
 * página viva, sem escurecer o fundo.
 *
 * O medalhão de troca (`.tema`) fica fixo no lado OPOSTO ao da navegação, e a
 * troca desliza como página de carrossel: `.tema-trocando` empurra para o lado
 * do botão (`--tema-direcao`), a pele muda no meio do caminho e a página volta.
 */

[data-tema="serio"] .login,
[data-tema="serio"] .lp,
[data-tema="serio"] .legal {
  --marca-azul: #1c2430;
  --marca-amarelo: #8fa6b8;
  --marca-tinta: #e8eaee;
  --tinta-inversa: #10131a;

  --sup-fundo: #10131a;
  --sup-cartao: #171c24;
  --sup-elevada: #1d232d;
  --sup-afundada: rgba(232, 234, 238, .07);

  --tinta-1: #e8eaee;
  --tinta-2: #9aa3b0;
  --tinta-3: #6b7480;
  --separador: rgba(232, 234, 238, .14);
  --borda-cartao: rgba(232, 234, 238, .16);

  --sem-info: #7fb4d1;
  --sem-critico: #e08097;
  --foco: 0 0 0 3px rgba(143, 166, 184, .45);

  /* Verde e âmbar de tema claro reprovam sobre o grafite (3,4:1) e é neles que
     o estado dos serviços escreve o rótulo do selo. Aqui eles clareiam, e os
     `--suave-*` acompanham a matiz nova para o fundo do chip não brigar com a
     letra que carrega. */
  --sem-bom:        #6fbf8b;
  --sem-atencao:    #e0ae63;
  --sem-neutro:     #9aa3b0;
  --suave-bom:      rgba(111, 191, 139, .14);
  --suave-atencao:  rgba(224, 174, 99, .14);
  --suave-critico:  rgba(224, 128, 151, .14);
  --suave-info:     rgba(127, 180, 209, .14);
}

[data-tema="serio"] .lp { background: #10131a; }

[data-tema="serio"] .lp__forma { opacity: .1; filter: saturate(.25) brightness(1.6); }

[data-tema="serio"] .lp__forma--selo { opacity: .05; }

[data-tema="serio"] .lp__hero p { color: rgba(232, 234, 238, .72); }

[data-tema="serio"] .lp__hero h1 strong,
[data-tema="serio"] .lp__hero p strong { color: #fff; }

[data-tema="serio"] .lp__cookies { box-shadow: 6px 6px 0 var(--marca-amarelo); }

[data-tema="serio"] .login__wa { background: #1f5c54; }

/* Na inversão o botão preto vira claro, e aí o rótulo em `--marca-amarelo`
   (aço) fica em 1,9:1 sobre ele. Tinta escura no lugar: mesma placa, letra
   legível. */
[data-tema="serio"] .login__botao { color: var(--tinta-inversa); }

.tema {
  position: fixed;
  top: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--e2);
  border: 0;
  background: none;
  color: var(--marca-tinta);
  cursor: pointer;
  font: inherit;
  font-size: var(--t-apoio);
  font-weight: var(--peso-negro);
}

.tema svg {
  flex: none;
  box-sizing: content-box;
  padding: 11px;
  background: var(--sup-cartao);
  border: 2px solid var(--marca-tinta);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--marca-amarelo);
  transition: box-shadow var(--transicao), background var(--transicao),
              transform var(--transicao);
}

.tema:hover svg { background: var(--marca-amarelo); transform: rotate(180deg); }

.tema__dica {
  letter-spacing: .03em;
  opacity: 0;
  transition: opacity var(--transicao), transform var(--transicao);
}

.tema:hover .tema__dica { opacity: 1; transform: none; }

.tema--esquerda { left: var(--e4); flex-direction: row; }
.tema--esquerda .tema__dica { transform: translateX(-6px); }

.tema--direita { right: var(--e4); flex-direction: row-reverse; }
.tema--direita .tema__dica { transform: translateX(6px); }

.tema-trocando {
  transform: translateX(var(--tema-direcao, -48px));
  opacity: 0;
}

@media (max-width: 700px) {
  .tema { top: max(var(--e4), env(safe-area-inset-top)); transform: none; }
  .tema__dica { display: none; }
}

[data-tema="serio"] .ana-llm__tile {
  --marca-amarelo: #8fa6b8;
  --marca-tinta: #2b3440;
  --tinta-1: #1b222c;
  --tinta-2: #4a5666;
  --tinta-3: #78849440;
  --separador: rgba(43, 52, 64, .16);
  --borda-cartao: rgba(43, 52, 64, .18);

  background: #f4f6f8;
  border-color: #2b3440;
}

[data-tema="serio"] .ana-llm__tile .ana-llm__rotulo,
[data-tema="serio"] .ana-llm__tile .ana-llm__modelo,
[data-tema="serio"] .ana-llm__tile .ana-llm__tarifa,
[data-tema="serio"] .ana-llm__tile .ana-llm__ag-nome,
[data-tema="serio"] .ana-llm__tile .ana-llm__ag-val { color: #5b6675; }

[data-tema="serio"] .ana-llm__tile .ana-llm__nome,
[data-tema="serio"] .ana-llm__tile .ana-llm__val,
[data-tema="serio"] .ana-llm__tile .ana-llm__usd { color: #1b222c; }

[data-tema="serio"] .ana-llm__tile--bom     { box-shadow: 6px 6px 0 #5f7f6b; }
[data-tema="serio"] .ana-llm__tile--critico { box-shadow: 6px 6px 0 #9c5a68; }
[data-tema="serio"] .ana-llm__tile--atencao { box-shadow: 6px 6px 0 #9c8a5a; }
[data-tema="serio"] .ana-llm__tile--apagado { box-shadow: 6px 6px 0 #8a939e; }

[data-tema="serio"] .ana-llm__tile .ana-llm__ponto--bom {
  background: #5f7f6b;
  box-shadow: 0 0 0 4px rgba(95, 127, 107, .2);
}
[data-tema="serio"] .ana-llm__tile .ana-llm__ponto--critico { background: #9c5a68; }
[data-tema="serio"] .ana-llm__tile .ana-llm__val--ok   { color: #4a6b56; }
[data-tema="serio"] .ana-llm__tile .ana-llm__val--ruim  { color: #8c4a58; }

[data-tema="serio"] .ana-llm__tile .ana-llm__logo {
  filter: saturate(.35);
  border-color: rgba(43, 52, 64, .2);
}