/* ============================================================================
   TEMA CLARO das páginas PHP — telas de conta (moldura do pagina.php),
   /planos/ e /premium/ (10/11/2026, README cap. 89.1)
   ----------------------------------------------------------------------------
   O CSS de cada página continua sendo o ESCURO (o azul de sempre). Tudo aqui
   vale só quando o <html> NÃO está com data-tema="escuro" — e a primeira
   visita é sempre clara. Mesmas cores do tema.py: fundo #f4f6fb, cartão
   branco, texto #0f1b47, texto suave #4a557a, azul da marca #1d3fa6 nos
   títulos/links. O amarelo continua nos botões e selos (fundo amarelo com
   texto azul-escuro); como TEXTO, amarelo no branco não se lê, então vira
   azul (ou um dourado escuro, #8a5d00, onde era destaque de bônus).
   O cabeçalho continua azul-marinho nos dois temas.

   Por que "html:not(...)" e não ":where(...)": algumas páginas (alerta,
   comprar, histórico, minha conta, plano, pro) põem o próprio <style> no
   corpo, DEPOIS deste arquivo. O "html:not(...)" deixa estas regras mais
   fortes que as da página, então a ordem não importa. Só o "a" geral usa
   ":where" para não passar por cima dos botões que são links.
   Estilo escrito na própria tag (style="...") só cai com !important — é o
   bloco "estilos na tag", no fim.
   ============================================================================ */

/* ---------- botão 🌙/☀️ (nos dois temas, igual ao do site) ---------- */
.tema-bt { width:36px; height:36px; border-radius:10px; flex-shrink:0; cursor:pointer;
  display:inline-grid; place-items:center; font-size:18px; line-height:1; padding:0; margin:0;
  color:inherit; font-weight:400; vertical-align:middle;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); }
.tema-bt:hover { border-color:rgba(255,201,7,.6); background:rgba(255,201,7,.12); }
@media (max-width:760px) { .tema-bt { width:32px; height:32px; font-size:16px; } }
.wrap > header:not(.topo) .tema-bt { margin-left:auto; }   /* telas de conta */
/* planos e premium: o botão entra no começo do menu; o menu fica numa linha só */
.topo nav { display:flex; align-items:center; }
.topo nav a { white-space:nowrap; }
@media (max-width:430px) {
  header.topo { gap:8px; }
  .topo .marca { gap:8px; }
  .topo .marca img { width:32px; height:32px; }
  .topo .marca b { font-size:12px; letter-spacing:.02em; white-space:nowrap; }
  .topo nav a { margin-left:10px; font-size:13px; }
  .topo nav .tema-bt { width:30px; height:30px; font-size:15px; }
}

html[data-tema="escuro"] { color-scheme:dark; }

/* ---------- base ---------- */
html:not([data-tema="escuro"]) {
  color-scheme:light;
  --claro:#4a557a;          /* texto suave */
  --azul2:#ffffff;          /* cartões */
  --verde:#1a7f3c;
}
html:not([data-tema="escuro"]) body { background:#f4f6fb; color:#0f1b47; }
:where(html:not([data-tema="escuro"])) a { color:#1d3fa6; }
html:not([data-tema="escuro"]) h1 span { color:#1d3fa6; }

/* ---------- cabeçalho: continua azul-marinho, de ponta a ponta ----------
   (a sombra larga + clip-path esticam o fundo até as bordas da tela sem
   mexer no HTML; não cria rolagem lateral) */
html:not([data-tema="escuro"]) .wrap > header:not(.topo),
html:not([data-tema="escuro"]) header.topo {
  --claro:#b9c4ea; color:#fff; background:#0f1b47;
  box-shadow:0 0 0 100vmax #0f1b47; clip-path:inset(0 -100vmax);
}
html:not([data-tema="escuro"]) .wrap > header:not(.topo) { margin-top:-28px; padding:14px 0; }

/* ---------- cartões ---------- */
html:not([data-tema="escuro"]) .cartao,
html:not([data-tema="escuro"]) .pix,
html:not([data-tema="escuro"]) .resumo div,
html:not([data-tema="escuro"]) .passo,
html:not([data-tema="escuro"]) .faq details,
html:not([data-tema="escuro"]) .lista li:has(.linha2),
html:not([data-tema="escuro"]) .pacote:not(.escolhido):not(.melhor) {
  box-shadow:0 0 0 1px rgba(15,27,71,.10), 0 2px 6px rgba(15,27,71,.06);
}
html:not([data-tema="escuro"]) .cartao .resumo div { box-shadow:0 0 0 1px rgba(15,27,71,.10); }

/* ---------- campos ---------- */
html:not([data-tema="escuro"]) input[type=email],
html:not([data-tema="escuro"]) input[type=password],
html:not([data-tema="escuro"]) input[type=text],
html:not([data-tema="escuro"]) input[type=number],
html:not([data-tema="escuro"]) input[type=url],
html:not([data-tema="escuro"]) textarea,
html:not([data-tema="escuro"]) select {
  background:#fff; color:#0f1b47; border:1px solid #c3cbe3;
}
html:not([data-tema="escuro"]) input:focus,
html:not([data-tema="escuro"]) textarea:focus,
html:not([data-tema="escuro"]) select:focus { border-color:#1d3fa6; outline:2px solid rgba(29,63,166,.18); }
html:not([data-tema="escuro"]) input:disabled { background:#eef1f8; color:#4a557a; }

/* ---------- avisos ---------- */
html:not([data-tema="escuro"]) .aviso   { background:#fdeef1; border-color:#e7a9b8; color:#8a1f3a; }
html:not([data-tema="escuro"]) .certo   { background:#e8f6ec; border-color:#9fd3ad; color:#1d5e30; }
html:not([data-tema="escuro"]) .atencao { background:#fff6dc; border-color:#e8cf86; color:#6b4f00; }
html:not([data-tema="escuro"]) .ok-msg  { background:#e8f6ec; color:#1d5e30; }

/* ---------- textos e links que eram amarelos/brancos ---------- */
html:not([data-tema="escuro"]) .texto p,
html:not([data-tema="escuro"]) .faq details p { color:#2a3563; }
html:not([data-tema="escuro"]) .texto h2,
html:not([data-tema="escuro"]) .cartao h2 { color:#1d3fa6; }
html:not([data-tema="escuro"]) .bt2 { color:#1d3fa6; border-color:rgba(29,63,166,.45); }
html:not([data-tema="escuro"]) .bt2:hover { background:rgba(29,63,166,.06); }
html:not([data-tema="escuro"]) .ok-pago,
html:not([data-tema="escuro"]) .verde { color:#1a7f3c; }
html:not([data-tema="escuro"]) .aviso-pg { border-top-color:rgba(15,27,71,.12); }
html:not([data-tema="escuro"]) .vazio { color:#4a557a; }

/* comprar (pacotes de crédito) */
html:not([data-tema="escuro"]) .pacote.destaque { border-color:#e0ac3a; }
html:not([data-tema="escuro"]) .pacote .bonus { color:#8a5d00; }

/* alerta de preço */
html:not([data-tema="escuro"]) .prod .ag { color:#4a557a; }
html:not([data-tema="escuro"]) .prod .ag b { color:#0f1b47; }
html:not([data-tema="escuro"]) .sug button { background:#eef2fb; color:#0f1b47; border-color:rgba(15,27,71,.16); }
html:not([data-tema="escuro"]) .sug button.forte { background:rgba(255,199,7,.22); border-color:#e0ac3a; color:#6b4f00; }
html:not([data-tema="escuro"]) .lista li:has(.linha2) { background:#fff; }   /* cartões da lista de alertas */
html:not([data-tema="escuro"]) .lista .linha2 { color:#4a557a; }
html:not([data-tema="escuro"]) .lista form button { color:#4a557a; border-color:rgba(15,27,71,.2); }
html:not([data-tema="escuro"]) .selo { background:rgba(15,27,71,.08); }
html:not([data-tema="escuro"]) .selo.ok { background:#e3f5e8; color:#1d5e30; }

/* histórico e minha conta: linhas divisórias */
html:not([data-tema="escuro"]) th,
html:not([data-tema="escuro"]) td,
html:not([data-tema="escuro"]) .lista li { border-bottom-color:rgba(15,27,71,.10); }
html:not([data-tema="escuro"]) .prod,
html:not([data-tema="escuro"]) .linha-lote { border-top-color:rgba(15,27,71,.10); }
html:not([data-tema="escuro"]) .linha-lote:first-of-type { border-top:0; }

/* ======================= /planos/ ======================= */
/* 10/11/2026 (cap. 94): o cartão do Teste grátis fica em .teste-grade, fora de
   .planos; sem ele aqui, ficava azul-marinho com texto escuro no tema claro. */
html:not([data-tema="escuro"]) .planos .plano,
html:not([data-tema="escuro"]) .teste-grade .plano { background:#fff; border-color:rgba(15,27,71,.12);
  box-shadow:0 2px 10px rgba(15,27,71,.06); }
html:not([data-tema="escuro"]) .plano li { border-top-color:rgba(15,27,71,.08); }
/* --c é a cor do plano (fundo do botão, ícone); no branco, o TEXTO usa --ct,
   o mesmo tom bem mais escuro */
html:not([data-tema="escuro"]) .plano.teste   { --ct:#4a5687; }
html:not([data-tema="escuro"]) .plano.basico  { --ct:#0b6f80; }
html:not([data-tema="escuro"]) .plano.premium { --ct:#8a5d00; }
html:not([data-tema="escuro"]) .plano.pro     { --ct:#6d28d9; }
html:not([data-tema="escuro"]) .plano.credito { --ct:#1a7f3c; }
html:not([data-tema="escuro"]) .planos .preco,
html:not([data-tema="escuro"]) .teste-grade .preco,
html:not([data-tema="escuro"]) .plano .inclui b,
html:not([data-tema="escuro"]) .planos .plano li::before { color:var(--ct, #4a5687); }
html:not([data-tema="escuro"]) .plano li.nao { color:#6b7499; }
html:not([data-tema="escuro"]) .planos .plano li.nao::before,
html:not([data-tema="escuro"]) .teste-grade .plano li.nao::before { color:#6b7499; }
html:not([data-tema="escuro"]) .teste-grade .plano li::before { color:var(--ct, #4a5687); }
/* cap. 94: o selo "+10 de bônus" ficava cinza e meio transparente (a regra
   geral de .selo acima) e a borda do cartão passava por trás dele. */
html:not([data-tema="escuro"]) .plano .selo.verde { background:#1a7f3c; color:#fff; box-shadow:0 2px 6px rgba(15,27,71,.18); }
html:not([data-tema="escuro"]) .plano .imagens { color:#1a7f3c; }
html:not([data-tema="escuro"]) .bt-plano.tracejado { border-color:rgba(15,27,71,.30); }
html:not([data-tema="escuro"]) .planos .plano.pro {
  background:linear-gradient(180deg,#f1ecff 0%,#ffffff 60%);
  box-shadow:0 0 0 5px rgba(167,139,250,.18), 0 14px 32px rgba(15,27,71,.10); }
html:not([data-tema="escuro"]) .planos .plano.credito.destaque { border-color:#3ccf6e;
  box-shadow:0 0 0 5px rgba(60,207,110,.14), 0 14px 32px rgba(15,27,71,.08); }
html:not([data-tema="escuro"]) .passos { background:#fff; border-color:rgba(15,27,71,.12); }
html:not([data-tema="escuro"]) .passos li { color:#2a3563; }
html:not([data-tema="escuro"]) .passos li b.n { color:#1d3fa6; }
html:not([data-tema="escuro"]) .avulso { background:#fff; border-color:rgba(15,27,71,.12); }
html:not([data-tema="escuro"]) .avulso a { color:#1d3fa6; }

/* ======================= /premium/ ======================= */
html:not([data-tema="escuro"]) .comparar .plano li { border-top-color:rgba(15,27,71,.08); }
html:not([data-tema="escuro"]) .comparar .plano:not(.vip):not(.pro) { box-shadow:0 0 0 1px rgba(15,27,71,.10), 0 2px 6px rgba(15,27,71,.06); }
html:not([data-tema="escuro"]) .comparar .plano.vip { background:linear-gradient(180deg,#fff8e1,#ffffff); border-color:#e0ac3a; }
html:not([data-tema="escuro"]) .comparar .plano.vip li::before { color:#8a5d00; }
html:not([data-tema="escuro"]) .comparar .plano.pro { background:linear-gradient(180deg,#f1ecff,#ffffff);
  box-shadow:0 0 0 4px rgba(167,139,250,.18); }
html:not([data-tema="escuro"]) .comparar .plano.pro li::before { color:#6d28d9; }
html:not([data-tema="escuro"]) .pacote.melhor { border-color:#e0ac3a; box-shadow:0 0 0 3px rgba(224,172,58,.20); }
html:not([data-tema="escuro"]) .faq summary::after { color:#1d3fa6; }
html:not([data-tema="escuro"]) .vitrine img { box-shadow:0 8px 20px rgba(15,27,71,.16); }
html:not([data-tema="escuro"]) .final { background:linear-gradient(180deg,#e8eefb,#ffffff);
  box-shadow:0 0 0 1px rgba(15,27,71,.10); }

/* ===== página "Copiar o texto" do lote por e-mail (premium_arte.php) ===== */
html:not([data-tema="escuro"]) .tema-arte p.sub { color:#4a557a; }
html:not([data-tema="escuro"]) .tema-arte a.bt { color:#1d3fa6; border-color:rgba(29,63,166,.45); }
html:not([data-tema="escuro"]) .tema-arte #ok { color:#1a7f3c; }

/* ===== estilos na tag (style="..."): só caem com !important ===== */
html:not([data-tema="escuro"]) body.tema-arte[style] { background:#f4f6fb !important; color:#0f1b47 !important; }
html:not([data-tema="escuro"]) .tema-arte a[style*="#ffc707"] { color:#1d3fa6 !important; }
html:not([data-tema="escuro"]) body [style*="color:#b9c4ea"] { color:#4a557a !important; }
html:not([data-tema="escuro"]) body [style*="color:#9be8b0"] { color:#1a7f3c !important; }
html:not([data-tema="escuro"]) body [style*="color:#a78bfa"] { color:#6d28d9 !important; }
html:not([data-tema="escuro"]) body [style*="color:#fff;"],
html:not([data-tema="escuro"]) body [style$="color:#fff"] { color:#0f1b47 !important; }
html:not([data-tema="escuro"]) body [style*="solid #fff"] { border-color:#0f1b47 !important; }
html:not([data-tema="escuro"]) body [style*="border-color:rgba(255,255,255,.12)"] { border-color:rgba(15,27,71,.14) !important; }