/* Tema claro do funil Tribo de Vendas.
   O escuro é o padrão (identidade da marca) e vive no :root de cada página.
   Aqui só ficam as sobrescritas de quando o usuário opta pelo claro.
   O PDF do diagnóstico NÃO é afetado (tem estilos inline fixos, de propósito). */

:root[data-theme="light"]{
  --bg:#ffffff;
  --surface:#f5f6f8;
  --card:#ffffff;
  --card-hover:#f2f4f7;
  --border:#e3e6ec;
  --accent:#ea580c;            /* laranja um tom mais fechado: legível sobre branco */
  --accent-hover:#c2410c;
  --accent-10:rgba(234,88,12,.08);
  --accent-20:rgba(234,88,12,.28);
  --text:#101319;
  --text-2:#4d5563;
  --muted:#79818f;
  --green:#15803d;
  --green-bg:rgba(21,128,61,.10);
  --red:#dc2626;
}

/* Texto sobre laranja: escuro no tema escuro, branco no claro */
:root[data-theme="light"] .btn,
:root[data-theme="light"] mark,
:root[data-theme="light"] .annbar,
:root[data-theme="light"] .offerbar,
:root[data-theme="light"] .bonus-tag,
:root[data-theme="light"] .bonus .tagb,
:root[data-theme="light"] .step .n,
:root[data-theme="light"] .pain.on .ball:after{ color:#fff }

/* Barras fixas do topo */
:root[data-theme="light"] .topbar{ background:rgba(255,255,255,.85); }

/* Fundos com gradiente escuro */
:root[data-theme="light"] .hero{ background:radial-gradient(ellipse at top,#fff7ed,var(--bg) 70%); }
:root[data-theme="light"] body.page-obrigado{ background:radial-gradient(ellipse at top,#fff7ed,#ffffff 70%); }

/* Mockup da planilha */
:root[data-theme="light"] .mockup{ background:#ffffff; box-shadow:0 18px 40px rgba(16,19,25,.12); }

/* Bolinha das dores (não marcada) */
:root[data-theme="light"] .pain .ball{ background:#ffffff; }

/* Sombras: mais leves no claro */
:root[data-theme="light"] .depcard img{ box-shadow:0 12px 30px rgba(16,19,25,.16); }
:root[data-theme="light"] .btn{ box-shadow:0 8px 22px rgba(234,88,12,.28); }

/* ── Botão de alternar tema ─────────────────────────────────────────────── */
.tema-btn{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  color:var(--text-2);font-size:15px;line-height:1;cursor:pointer;
  transition:.15s;padding:0;opacity:.75;
}
.tema-btn:hover{ opacity:1;border-color:var(--accent);color:var(--accent); }
.tema-btn:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
/* dentro de uma topbar existente (todas já são position:sticky) */
.tema-btn[data-pos="topbar"]{ position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:30 }
/* páginas sem topbar */
.tema-btn[data-pos="fixo"]{ position:fixed;top:14px;right:14px;z-index:999;background:var(--card) }

@media (max-width:420px){
  .tema-btn{ width:30px;height:30px;font-size:13.5px }
  .tema-btn[data-pos="topbar"]{ right:10px }
}
@media print{ .tema-btn{ display:none } }