/* =========================================================
   MODO ESCURO — Rendaki
   Ativado por <html data-theme="dark"> (botão da lua no topo).
   Carregado depois de style.css e layout.css.
   ========================================================= */

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1016;
  --bg-glow: #11151d;
  --panel: #151a23;
  --field: #1b212c;
  --border: #252c39;
  --border-strong: #333c4c;
  --text: #e8ecf4;
  --muted: #949db0;
  --accent: #ff7a2e;
  --accent-2: #ff9550;
  --accent-soft: rgba(255, 122, 46, 0.15);
  --teal: #34d399;
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --error: #f87171;
  --dark: #090c11;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ---------- Estrutura ---------- */
html[data-theme="dark"] .app-topbar { background: rgba(13, 16, 22, 0.86); border-color: var(--border); }
html[data-theme="dark"] .bottom-nav { background: rgba(17, 21, 29, 0.96); border-color: var(--border); }
html[data-theme="dark"] .sidebar { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .side-link,
html[data-theme="dark"] .stat-card__label { color: #c3cad8; }
html[data-theme="dark"] .side-link:hover { background: var(--field); }
html[data-theme="dark"] .side-plan { background: linear-gradient(160deg, #1c222e, #0b0e14); border: 1px solid var(--border); }
html[data-theme="dark"] .hero-card { background: linear-gradient(150deg, #1b2130 0%, #0b0e14 100%); border: 1px solid var(--border); }
html[data-theme="dark"] .user-chip { background: var(--panel); border-color: var(--border); }

/* ---------- Ícones e selos claros ---------- */
html[data-theme="dark"] .row-item__icon--groups { background: rgba(80, 140, 255, 0.16) !important; color: #7fa8ff !important; }
html[data-theme="dark"] .row-item__icon--link { background: rgba(150, 110, 255, 0.16) !important; }
html[data-theme="dark"] .sk-kpi__ico--g { background: rgba(52, 211, 153, 0.14); color: #34d399; }
html[data-theme="dark"] .sk-kpi__ico--b { background: rgba(80, 140, 255, 0.16); color: #7fa8ff; }
html[data-theme="dark"] .sk-kpi__ico--r { background: rgba(248, 113, 113, 0.14); color: #f87171; }
html[data-theme="dark"] .sk-av__ini { background: rgba(80, 140, 255, 0.18); color: #9dbcff; }
html[data-theme="dark"] .sk-av--wa .sk-av__ini { background: rgba(37, 211, 102, 0.16); color: #4ade80; }
html[data-theme="dark"] .sk-av__plat { border-color: var(--panel); }

/* ---------- Radar ---------- */
html[data-theme="dark"] .radar-searchbar__box:focus-within { background: var(--field); }
html[data-theme="dark"] .radar-produto-card__media { background: #1f2531; }
html[data-theme="dark"] .radar-produto-card__share { background: rgba(21, 26, 35, 0.92); color: var(--text); }
html[data-theme="dark"] .ai-promo { background: linear-gradient(180deg, #2a1b12 0%, var(--panel) 70%); border-color: #4a2d1c; }
html[data-theme="dark"] .ai-promo__list li { background: var(--field); }
html[data-theme="dark"] .ai-promo__ico--wa { background: rgba(52, 211, 153, 0.14); color: #34d399; }
html[data-theme="dark"] .ai-promo__ico--tag { background: rgba(150, 110, 255, 0.16); }
html[data-theme="dark"] .ai-promo__ico--vid { background: rgba(255, 122, 46, 0.15); }
html[data-theme="dark"] .produto-detalhe__foto-unica,
html[data-theme="dark"] .whatsapp-qr-box { background: #fff; } /* QR Code e fotos precisam de fundo branco */
html[data-theme="dark"] .flow-btn { background: #000; border: 1px solid var(--border); }

/* ---------- Agendamento (novo visual) ---------- */
html[data-theme="dark"] .sk2-oferta,
html[data-theme="dark"] .sk2-dica { background: #23170f; border-color: #4a2d1c; }
html[data-theme="dark"] .sk2-oferta__img,
html[data-theme="dark"] .sk2-bubble__img { background: #0f1218; }
html[data-theme="dark"] .sk2-oferta-vazia { background: #1d1611; border-color: #5a3620; }
html[data-theme="dark"] .sk2-resumo { background: rgba(52, 211, 153, 0.1); color: #6ee7b7; }
html[data-theme="dark"] .sked-card__ofertas { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }
html[data-theme="dark"] .sked-card__ofertas small { color: #a7f3d0; }
html[data-theme="dark"] .sk2-off { background: rgba(52, 211, 153, 0.14); color: #4ade80; }
html[data-theme="dark"] .sk2-mini.is-warn { color: #fbbf24; }
html[data-theme="dark"] .sk2-mini.is-ok { color: #4ade80; }
html[data-theme="dark"] .sk2-phone__top { background: #202c33; }
html[data-theme="dark"] .sk2-phone[data-plat="telegram"] .sk2-phone__top { background: #17212b; }
html[data-theme="dark"] .sk2-phone__chat { background-color: #0b141a; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); }
html[data-theme="dark"] .sk2-phone[data-plat="telegram"] .sk2-phone__chat { background-color: #0e1621; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); }
html[data-theme="dark"] .sk2-bubble { background: #005c4b; color: #e9edef; }
html[data-theme="dark"] .sk2-phone[data-plat="telegram"] .sk2-bubble { background: #2b5278; color: #f5f5f5; }
html[data-theme="dark"] .sk2-bubble__txt a { color: #53bdeb; }
html[data-theme="dark"] .sk2-bubble__hora { color: rgba(233, 237, 239, 0.6); }
html[data-theme="dark"] .sk2-bubble__vazio { color: #8696a0; }
html[data-theme="dark"] .sk2-tgbtn { background: rgba(43, 82, 120, 0.7); color: #e2f0ff; }
html[data-theme="dark"] .sk2-bubble__txt .var { background: rgba(255, 122, 46, 0.25); color: #ffb48a; }

/* ---------- Formulários ---------- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: var(--text); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6f7889; }
html[data-theme="dark"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--field) inset;
}
html[data-theme="dark"] ::selection { background: rgba(255, 122, 46, 0.35); }
html[data-theme="dark"] img { color-scheme: light; }


/* =========================================================
   BOTÃO DA LUA / SOL
   ========================================================= */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle__svg { overflow: visible; transition: transform .6s cubic-bezier(.68, -0.55, .27, 1.55); }
.theme-toggle__core { transition: r .45s cubic-bezier(.68, -0.4, .27, 1.4), fill .4s ease; }
.theme-toggle__bite { transition: cx .55s cubic-bezier(.68, -0.4, .27, 1.4), cy .55s cubic-bezier(.68, -0.4, .27, 1.4); }
.theme-toggle__rays { transform-origin: 12px 12px; transition: transform .55s cubic-bezier(.68, -0.4, .27, 1.4), opacity .35s ease; }
.theme-toggle__star { transform-origin: center; transition: opacity .3s ease, transform .5s ease; }

/* Claro: mostra a LUA (clique leva pro escuro) */
html:not([data-theme="dark"]) .theme-toggle__svg { transform: rotate(-30deg); }
html:not([data-theme="dark"]) .theme-toggle__core { r: 9px; fill: currentColor; }
html:not([data-theme="dark"]) .theme-toggle__bite { cx: 16.5px; cy: 7px; }
html:not([data-theme="dark"]) .theme-toggle__rays { transform: scale(.4) rotate(-90deg); opacity: 0; }
html:not([data-theme="dark"]) .theme-toggle__star { opacity: 1; transform: scale(1); }

/* Escuro: mostra o SOL (clique leva pro claro) */
html[data-theme="dark"] .theme-toggle { color: #ffc24a; }
html[data-theme="dark"] .theme-toggle__svg { transform: rotate(90deg); }
html[data-theme="dark"] .theme-toggle__core { r: 5px; fill: currentColor; }
html[data-theme="dark"] .theme-toggle__bite { cx: 30px; cy: 0px; }
html[data-theme="dark"] .theme-toggle__rays { transform: scale(1) rotate(0deg); opacity: 1; }
html[data-theme="dark"] .theme-toggle__star { opacity: 0; transform: scale(0); }

.theme-toggle.is-spinning .theme-toggle__svg { animation: tt-pop .6s ease; }
@keyframes tt-pop { 40% { scale: .75; } 70% { scale: 1.12; } 100% { scale: 1; } }

/* Faíscas que saem do botão */
.tt-spark {
  position: fixed; z-index: 10000; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; pointer-events: none; background: var(--c, #ffc24a);
  animation: tt-spark .7s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes tt-spark {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Revelação em círculo a partir do botão (navegadores com View Transitions) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: tt-reveal .75s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes tt-reveal {
  from { clip-path: circle(0 at var(--tt-x, 100%) var(--tt-y, 0)); }
  to   { clip-path: circle(var(--tt-r, 150vmax) at var(--tt-x, 100%) var(--tt-y, 0)); }
}

/* Plano B (sem View Transitions): troca suave das cores */
html.tt-fade, html.tt-fade *, html.tt-fade *::before, html.tt-fade *::after {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, box-shadow .45s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
  .theme-toggle__svg, .theme-toggle__core, .theme-toggle__bite, .theme-toggle__rays { transition: none; }
  .tt-spark { display: none; }
}

/* No celular a lua também aparece (os outros botões do topo ficam no menu) */
.topbar-actions .topbar-btn.theme-toggle { display: grid; }