/* Modo claro e escuro do Controller (site, app, admin e página de obrigado).
   O tema é escolhido por assets/tema.js, que coloca data-theme="light" ou "dark" no <html>.
   Este arquivo deve ser o último CSS da página. */

/* ---------- Botão de trocar o tema ---------- */
.tema-btn{display:inline-grid;place-items:center;width:42px;height:42px;min-width:42px;min-height:42px;padding:0;border-radius:10px;border:1px solid var(--line,#e1e7f2);background:transparent;font-size:1.1rem;line-height:1;cursor:pointer;transition:background .15s}
.tema-btn:hover{background:rgba(36,99,223,.1)}
.tema-canto{position:fixed;top:14px;right:14px;z-index:70;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(10,42,94,.15)}
body:has(#app:not(.hidden)) .tema-canto{display:none}
#app .top-ctrls .tema-btn{background:#fff}
@media(max-width:900px){#app .top-ctrls .tema-btn{order:1}}
@media(max-width:600px){header.nav .tema-btn{width:38px;height:38px;min-width:38px;min-height:38px;font-size:1rem}}

/* ---------- Pequenos ajustes no modo claro ---------- */
html[data-theme="light"] .inp{background:#fff}

/* =========================================================
   MODO ESCURO
   ========================================================= */
html[data-theme="dark"]{
  color-scheme:dark;
  /* site */
  --navy:#dbe7ff; --blue:#6cc4ee; --blue2:#5792ff; --sky:#1a2b4a; --sky2:#0f1a2e;
  --white:#0b1424;
  /* app e admin */
  --dark:#dbe7ff; --green:#7aa7ff; --light:#1a2b4a; --red:#ff8a80; --lred:#3a1d22;
  --lblue:#11304a; --gold:#b4bfff; --lgold:#1e2448; --yel:#7fb2ff;
  --bg:#0b1424; --card:#111d33;
  /* comum */
  --text:#e6edf8; --muted:#9fb0c9; --line:#24344f;
  --shadow:0 3px 16px rgba(0,0,0,.35);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .tema-btn{border-color:var(--line)}
html[data-theme="dark"] .tema-btn:hover{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .tema-canto,html[data-theme="dark"] #app .top-ctrls .tema-btn{background:#16243f}
html[data-theme="dark"] :where(a,button,input,select,textarea,summary):focus-visible{outline-color:#7aa7ff}

/* ---------- Site (página de vendas) ---------- */
html[data-theme="dark"] header.nav{background:rgba(11,20,36,.94);border-bottom-color:var(--line)}
html[data-theme="dark"] .nav-links a{color:var(--muted)}
html[data-theme="dark"] .nav-links a:hover{color:#fff}
html[data-theme="dark"] .nav-links .btn{background:#2463df;color:#fff}
html[data-theme="dark"] .nav-links .btn:hover{background:#1a4fb4}
html[data-theme="dark"] .tag{color:#7aa7ff}
html[data-theme="dark"] .btn-pri{background:#2463df}
html[data-theme="dark"] .btn-pri:hover{background:#1a4fb4}
html[data-theme="dark"] .hero{background:radial-gradient(ellipse at 20% 0%,#1b3d73 0%,transparent 55%),radial-gradient(ellipse at 95% 85%,#183a70 0%,transparent 55%),#0b1a33}
html[data-theme="dark"] .hero .btn-pri{background:#fff;color:#102e58}
html[data-theme="dark"] .hero .btn-pri:hover{background:#e1ecff}
html[data-theme="dark"] .shot{background:#111d33}
html[data-theme="dark"] .faixa{background:var(--sky2);border-bottom-color:var(--line)}
html[data-theme="dark"] .faixa .grid>div+div{border-left-color:var(--line)}
html[data-theme="dark"] .bg-soft{background:var(--sky2)}
html[data-theme="dark"] :is(.dor,.card,.passo,.chips span,details,.box,.modal){background:#111d33;border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .card:hover{box-shadow:0 12px 30px rgba(0,0,0,.35)}
html[data-theme="dark"] .card .ico{background:#1a2b4a;border-color:#263c63}
html[data-theme="dark"] .dor .x{background:#3a1d22}
html[data-theme="dark"] .check li::before{background:#1a2b4a;color:#7aa7ff}
html[data-theme="dark"] .passo::before{background:#1a2b4a;color:#7aa7ff}
html[data-theme="dark"] .frame{border-color:var(--line);box-shadow:0 16px 50px rgba(0,0,0,.4)}
html[data-theme="dark"] .phone{border-color:#1f3258}
html[data-theme="dark"] .preco{background:radial-gradient(ellipse at top,#1b3d73,transparent 70%),#0b1a33}
html[data-theme="dark"] .box .selo{background:#1a2b4a;color:#9cc2ff}
html[data-theme="dark"] .box li::before,html[data-theme="dark"] summary::after{color:#7aa7ff}
html[data-theme="dark"] .garantia{background:#111d33;border-color:var(--line)}
html[data-theme="dark"] .garantia .selo7{background:#2463df;box-shadow:0 0 0 8px #1a2b4a}
html[data-theme="dark"] .final{background:#0f1a2e}
html[data-theme="dark"] .final .btn[style]{background:#111d33!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-theme="dark"] footer{background:#070f1d}
html[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .modal input{background:#0b1424;border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .modal input:focus{border-color:#5792ff}
html[data-theme="dark"] .modal .err{background:#3a1d22}

/* ---------- App ---------- */
html[data-theme="dark"] .auth{background:radial-gradient(ellipse at 10% 10%,#1b3d73 0%,transparent 55%),#0b1a33}
html[data-theme="dark"] .auth-box{background:#111d33;border-color:var(--line)}
html[data-theme="dark"] :is(.field input,.field select,.field textarea,.toolbar input,.toolbar select,.inp){background:#0b1424;border-color:var(--line);color:var(--text)}
html[data-theme="dark"] :is(.field input,.field select,.field textarea,.toolbar input,.toolbar select,.inp):focus{border-color:#5792ff}
html[data-theme="dark"] ::placeholder{color:#6f819d}
html[data-theme="dark"] :is(#app,#auth,#modal-root,.integration-dialog) .btn{background:#2463df;color:#fff}
html[data-theme="dark"] :is(#app,#auth,#modal-root,.integration-dialog) .btn:hover{background:#1a4fb4}
html[data-theme="dark"] :is(#app,#auth,#modal-root,.integration-dialog) .btn.red{background:#c0392b}
html[data-theme="dark"] :is(#app,#auth,#modal-root,.integration-dialog) .btn.red:hover{background:#a83224}
html[data-theme="dark"] :is(#app,#auth,#modal-root,.integration-dialog) .btn.ghost{background:transparent;color:#9cc2ff;border-color:#3b5f9e}
html[data-theme="dark"] :is(#app,#auth,#modal-root,.integration-dialog) .btn.ghost:hover{background:#1a2b4a}
html[data-theme="dark"] .side{background:linear-gradient(175deg,#10223f,#0a1730);border-right:1px solid var(--line)}
html[data-theme="dark"] .demo-bar{background:#14264a;border-bottom-color:#22396a;color:var(--text)}
html[data-theme="dark"] .demo-bar a{color:#9cc2ff}
html[data-theme="dark"] :is(.mes-sel,.pill-sel,.seg-tabs,.tit,.choice button){background:#111d33;border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .seg-tabs button.on{background:#2463df;color:#fff}
html[data-theme="dark"] .card{border-color:var(--line)}
html[data-theme="dark"] .kpi{background:#111d33;border-color:var(--line)}
html[data-theme="dark"] .alerta{border-color:#263c63;border-left-color:#5792ff}
html[data-theme="dark"] .alerta.red{border-color:#5a2a30;border-left-color:var(--red)}
html[data-theme="dark"] th{background:#1a2b4a;color:#dbe7ff}
html[data-theme="dark"] td{background:#111d33;border-bottom-color:var(--line)}
html[data-theme="dark"] tr:nth-child(even) td{background:#0f1a2e}
html[data-theme="dark"] tr.lvl1 td{background:#1a2b4a}
html[data-theme="dark"] tr.tot td{background:#11304a}
html[data-theme="dark"] .baixar:hover{background:#2463df;color:#fff}
html[data-theme="dark"] .ico-btn:hover{background:#1a2b4a}
html[data-theme="dark"] .fab{background:#2463df;color:#fff}
html[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .toast{background:#e6edf8;color:#0b1424}
html[data-theme="dark"] .integration-notice{border-color:#263c63}
html[data-theme="dark"] .integration-secret{background:#0f1a2e;border-color:#2f4f86}
html[data-theme="dark"] .integration-secret textarea{background:#0b1424;border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .integration-dialog{background:#111d33;color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .password-input .password-toggle{color:#9cc2ff}
html[data-theme="dark"] .password-input .password-toggle:hover{background:#1a2b4a}
@media(max-width:900px){
  html[data-theme="dark"] .side{background:#0f1a2e;border-right:0;border-top-color:var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.4)}
  html[data-theme="dark"] .nav-btn{color:#8fa2bf}
  html[data-theme="dark"] .nav-btn.active{color:#9cc2ff;background:#1a2b4a;box-shadow:inset 0 3px #5792ff}
  html[data-theme="dark"] .tit .acts{border-top-color:var(--line)}
}

/* ---------- Admin ---------- */
html[data-theme="dark"] body > .box{background:#111d33;color:var(--text);box-shadow:0 2px 14px rgba(0,0,0,.4)}
html[data-theme="dark"] body > .box input{background:#0b1424;border-color:var(--line);color:var(--text)}
html[data-theme="dark"] body > .box button:not(.password-toggle){background:#2463df}
html[data-theme="dark"] body > .box button.sec{background:transparent;color:#9cc2ff;border-color:#3b5f9e}
html[data-theme="dark"] body > .box button.del{background:transparent;color:var(--red);border-color:#7a3a3a}
html[data-theme="dark"] body > .box .msg.err{background:#3a1d22}
html[data-theme="dark"] body > .box td[colspan]{color:var(--muted)!important}

/* ---------- Página de obrigado ---------- */
html[data-theme="dark"] body.pg-obrigado{background:radial-gradient(900px 400px at 80% -10%,#1b3d73 0%,transparent 60%),#0b1a33}
html[data-theme="dark"] body.pg-obrigado .box p,html[data-theme="dark"] body.pg-obrigado small{color:var(--muted)}
html[data-theme="dark"] body.pg-obrigado ol{color:var(--text)}
html[data-theme="dark"] body.pg-obrigado .btn{background:#2463df}