/* =========================================================================
   TEMA FUTURISTA — preto e dourado (escuro) e branco e dourado (claro).
   Vem depois do estilo.css e troca só as variáveis e o acabamento; a estrutura é a mesma.
   O tema fica em <html data-tema="escuro|claro"> (botão no menu; lembrado neste navegador).
   ========================================================================= */
:root,:root[data-tema="escuro"]{
  --fundo:#07070a; --fundo2:#0d0d12; --papel:rgba(20,20,26,.62); --papelSolido:#14141a;
  --linha:rgba(212,168,74,.26); --linha2:rgba(255,255,255,.07); --borda:rgba(212,168,74,.24);
  --texto:#f4efe3; --suave:#bab29d; --fraco:#7f7863;
  --marca:#ecca75; --marca2:#d4a84a; --prata:#d9bd7a; --prataClara:#2a2519; --brilho:#ecca75;
  --ouro:#d4a84a; --ouroClaro:#2a2314; --ouroGrad:linear-gradient(135deg,#f6dd92 0%,#d4a84a 48%,#a8802c 100%);
  --ok:#55d6a0; --okFundo:rgba(85,214,160,.13); --alerta:#f2bb50; --alertaFundo:rgba(242,187,80,.14);
  --erro:#ff7a72; --erroFundo:rgba(255,122,114,.14); --info:#8dbdf0; --infoFundo:rgba(141,189,240,.14);
  --raio:16px; --sombra:0 10px 34px rgba(0,0,0,.5); --metal:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  --brilhoFundo:rgba(212,168,74,.16); --grade:rgba(212,168,74,.07);
  --menuFundo:linear-gradient(180deg,rgba(16,16,21,.94),rgba(7,7,10,.97)); --menuTexto:#cfc7b3; --menuForte:#fff7e0;
  --campo:rgba(255,255,255,.045); --cabTabela:rgba(212,168,74,.09); --hoverLinha:rgba(212,168,74,.08);
  --botaoPri:var(--ouroGrad); --botaoPriTexto:#14110a; --botaoPriBorda:#a8802c;
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --fundo:#f8f5ee; --fundo2:#eee7d6; --papel:rgba(255,255,255,.8); --papelSolido:#ffffff;
  --linha:rgba(168,128,44,.32); --linha2:rgba(70,52,10,.09); --borda:rgba(168,128,44,.3);
  --texto:#19150b; --suave:#6a604a; --fraco:#9a9078;
  --marca:#8a6516; --marca2:#a8802c; --prata:#b98f35; --prataClara:#f3e8c9; --brilho:#c99a2e;
  --ouro:#b98f35; --ouroClaro:#f6ecd0; --ouroGrad:linear-gradient(135deg,#f0d27a 0%,#d0a23f 48%,#9c7424 100%);
  --ok:#1b7a50; --okFundo:#e0f2e9; --alerta:#9a6400; --alertaFundo:#f9efd6;
  --erro:#b3261e; --erroFundo:#fae3e0; --info:#2b5d8c; --infoFundo:#e3ecf6;
  --raio:16px; --sombra:0 8px 28px rgba(120,88,20,.13); --metal:linear-gradient(180deg,#ffffff,#fbf6e8);
  --brilhoFundo:rgba(212,168,74,.2); --grade:rgba(168,128,44,.09);
  --menuFundo:linear-gradient(180deg,rgba(255,255,255,.82),rgba(250,243,226,.9)); --menuTexto:#5b5238; --menuForte:#17130a;
  --campo:#ffffff; --cabTabela:rgba(212,168,74,.14); --hoverLinha:rgba(212,168,74,.1);
  --botaoPri:linear-gradient(180deg,#2a251a,#0f0d08); --botaoPriTexto:#f3d98b; --botaoPriBorda:#0f0d08;
  color-scheme:light;
}

/* ---- fundo: brilho dourado, grade fina e uma luz que passeia devagar ---- */
html{background:var(--fundo)}
body{background:radial-gradient(900px 520px at 90% -10%,var(--brilhoFundo),transparent 62%),radial-gradient(760px 520px at -6% 108%,var(--brilhoFundo),transparent 62%),linear-gradient(180deg,var(--fundo),var(--fundo2));background-attachment:fixed;transition:background .5s,color .3s}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--grade) 1px,transparent 1px),linear-gradient(90deg,var(--grade) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 72% 0%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 80% 70% at 72% 0%,#000 0%,transparent 72%);animation:gradeAndar 60s linear infinite}
body::after{content:"";position:fixed;width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;z-index:0;pointer-events:none;background:radial-gradient(circle,var(--brilhoFundo),transparent 62%);filter:blur(30px);animation:luzPassear 38s ease-in-out infinite alternate}
@keyframes gradeAndar{to{background-position:46px 46px,46px 46px}}
@keyframes luzPassear{0%{transform:translate(0,0)}100%{transform:translate(70vw,45vh)}}
#app,#telaEntrada{position:relative;z-index:1}
::selection{background:rgba(212,168,74,.4);color:inherit}
a{color:var(--marca)}
*{scrollbar-width:thin;scrollbar-color:rgba(212,168,74,.45) transparent}

/* ---- menu lateral ---- */
#lateral{background:var(--menuFundo);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-right:1px solid transparent;border-image:linear-gradient(180deg,rgba(212,168,74,.55),rgba(212,168,74,.06) 70%) 1;box-shadow:none;color:var(--menuTexto)}
#lateral .logo{border-bottom:1px solid var(--linha2);padding:22px 18px 16px}
#lateral .logo b{background:var(--ouroGrad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:15.5px;letter-spacing:.6px;filter:drop-shadow(0 0 10px rgba(212,168,74,.25))}
#lateral .logo small{color:var(--fraco);letter-spacing:2.2px}
#menu button{color:var(--menuTexto);border-radius:12px;transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
#menu button:hover{background:rgba(212,168,74,.09);color:var(--menuForte);transform:translateX(4px)}
#menu button.ativo{background:linear-gradient(90deg,rgba(212,168,74,.24),rgba(212,168,74,.04));border-color:rgba(212,168,74,.38);color:var(--marca);font-weight:650;box-shadow:inset 3px 0 0 var(--marca2),0 0 22px rgba(212,168,74,.16)}
:root[data-tema="claro"] #menu button.ativo{color:#7a560d}
#menu .cont{background:var(--ouroGrad);color:#14110a}
#lateral .rodape{border-top:1px solid var(--linha2);color:var(--suave)}
#lateral .rodape button{background:rgba(212,168,74,.07);border:1px solid var(--linha);color:var(--menuForte);transition:all .2s}
#lateral .rodape button:hover{border-color:var(--marca2);box-shadow:0 0 14px rgba(212,168,74,.22)}
.btTema{display:inline-flex;align-items:center;gap:6px}
#luzIA,.luzIA{background:rgba(212,168,74,.07);border-color:var(--linha);color:var(--menuForte)}
.luzIA{color:var(--texto)}

/* ---- topo e títulos ---- */
.topo h1{background:var(--ouroGrad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:24px;letter-spacing:-.2px;filter:drop-shadow(0 0 14px rgba(212,168,74,.18))}
.cartao h2{letter-spacing:.2px}
.cartao h3{color:var(--marca2);letter-spacing:1.6px}

/* ---- cartões: vidro com borda de ouro que some nas pontas ---- */
.cartao{position:relative;background:var(--papel);border:1px solid var(--linha2);border-radius:var(--raio);box-shadow:var(--sombra);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.cartao::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,rgba(212,168,74,.6),transparent 32%,transparent 68%,rgba(212,168,74,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.numero{background:var(--papel);border:1px solid var(--linha2);border-radius:var(--raio);box-shadow:var(--sombra);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.numero:hover{transform:translateY(-3px);border-color:var(--linha);box-shadow:var(--sombra),0 0 26px rgba(212,168,74,.2)}
.numero::after{height:2px;background:linear-gradient(90deg,transparent,var(--marca2),transparent);background-size:200% 100%;animation:brilhoLinha 4.5s linear infinite}
.numero small{color:var(--suave);letter-spacing:1.4px}
.numero b{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;font-weight:700;background:var(--ouroGrad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:26px;letter-spacing:-1px}
.numero.ok b{background:none;color:var(--ok)}.numero.erro b{background:none;color:var(--erro)}.numero.alerta b{background:none;color:var(--alerta)}
@keyframes brilhoLinha{0%{background-position:200% 0}100%{background-position:-200% 0}}
.vazio{color:var(--fraco)}

/* ---- botões e campos ---- */
.bt{background:var(--campo);border:1px solid var(--linha);color:var(--texto);border-radius:11px;box-shadow:none;transition:transform .2s,box-shadow .25s,border-color .2s,background .2s}
.bt:hover{border-color:var(--marca2);background:rgba(212,168,74,.1);box-shadow:0 0 18px rgba(212,168,74,.18)}
.bt.pri,.bt.peq.ativo{background:var(--botaoPri);color:var(--botaoPriTexto);border-color:var(--botaoPriBorda);font-weight:650;box-shadow:0 6px 20px rgba(212,168,74,.22)}
.bt.pri:hover{background:var(--botaoPri);transform:translateY(-1px);box-shadow:0 0 0 3px rgba(212,168,74,.22),0 10px 28px rgba(212,168,74,.32);filter:brightness(1.07)}
.bt.ouro{background:var(--ouroGrad);color:#14110a;border-color:#a8802c}
.bt.perigo{color:var(--erro)}.bt.perigo:hover{border-color:var(--erro);box-shadow:0 0 16px rgba(255,100,90,.2)}
input,select,textarea{background:var(--campo);border:1px solid var(--linha);border-radius:11px;color:var(--texto);box-shadow:none}
input::placeholder,textarea::placeholder{color:var(--fraco)}
input:focus,select:focus,textarea:focus{border-color:var(--marca2);box-shadow:0 0 0 3px rgba(212,168,74,.2),0 0 20px rgba(212,168,74,.12)}
input[type=checkbox],input[type=radio]{accent-color:var(--marca2)}
label.campo{color:var(--suave)}
select option{background:var(--papelSolido);color:var(--texto)}

/* ---- tabelas ---- */
.tabela th{background:var(--cabTabela);color:var(--marca2);border-bottom:1px solid var(--linha);letter-spacing:1.3px}
.tabela td{border-bottom:1px solid var(--linha2)}
.tabela tr.clica:hover td{background:var(--hoverLinha)}
.rolar{background:transparent;border:1px solid var(--linha2);border-radius:14px}

/* ---- etiquetas ---- */
.tag{background:rgba(212,168,74,.12);color:var(--marca);border:1px solid var(--linha)}
:root[data-tema="claro"] .tag{color:#7a560d}
.tag.ok{background:var(--okFundo);color:var(--ok);border-color:transparent}.tag.erro{background:var(--erroFundo);color:var(--erro);border-color:transparent}
.tag.alerta{background:var(--alertaFundo);color:var(--alerta);border-color:transparent}.tag.info{background:var(--infoFundo);color:var(--info);border-color:transparent}
.tag.ouro{background:var(--ouroGrad);color:#14110a;border-color:transparent}

/* ---- abas em pílula ---- */
.abas{display:flex;width:fit-content;max-width:100%;gap:2px;padding:4px;margin-bottom:16px;border:1px solid var(--linha);border-radius:999px;background:var(--papel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.abas button{border:0;border-radius:999px;padding:7px 17px;color:var(--suave);font-weight:550;transition:background .3s,color .3s,box-shadow .3s}
.abas button:hover{color:var(--texto);background:rgba(212,168,74,.1)}
.abas button.ativo{background:var(--ouroGrad);color:#14110a;font-weight:700;text-shadow:none;box-shadow:0 4px 18px rgba(212,168,74,.35);animation:abaPop .4s cubic-bezier(.2,.9,.3,1.3)}
@keyframes abaPop{0%{transform:scale(.92)}100%{transform:scale(1)}}

/* ---- transição entre telas e abas: sobe com desfoque e uma linha de luz varre o topo ---- */
#principal{position:relative}
#principal.entra>*{animation:telaEntra .6s cubic-bezier(.2,.8,.2,1) both}
#principal.entra>*:nth-child(2){animation-delay:.05s}#principal.entra>*:nth-child(3){animation-delay:.1s}#principal.entra>*:nth-child(4){animation-delay:.15s}#principal.entra>*:nth-child(5){animation-delay:.2s}#principal.entra>*:nth-child(n+6){animation-delay:.25s}
#principal.entra .grade>*{animation:telaEntra .6s cubic-bezier(.2,.8,.2,1) both}
#principal.entra .grade>*:nth-child(2){animation-delay:.08s}#principal.entra .grade>*:nth-child(3){animation-delay:.16s}#principal.entra .grade>*:nth-child(4){animation-delay:.24s}#principal.entra .grade>*:nth-child(n+5){animation-delay:.3s}
#principal.entra::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,#f6dd92,transparent);box-shadow:0 0 18px 2px rgba(212,168,74,.7);animation:varrer .9s ease-out both}
@keyframes telaEntra{0%{opacity:0;transform:translateY(16px) scale(.985);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes varrer{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:0}}

/* ---- janelas ---- */
#fundoJanela{background:rgba(3,3,6,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fundoEntra .25s both}
:root[data-tema="claro"] #fundoJanela{background:rgba(60,45,10,.28)}
.janela{background:var(--papelSolido);border:1px solid var(--linha);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(212,168,74,.08),0 0 60px rgba(212,168,74,.1);animation:janelaEntra .38s cubic-bezier(.2,.9,.3,1.1) both}
.janela header{background:linear-gradient(180deg,rgba(212,168,74,.12),transparent);border-bottom:1px solid var(--linha);border-radius:20px 20px 0 0}
.janela header h2{color:var(--marca)}
.janela footer{background:rgba(212,168,74,.05);border-top:1px solid var(--linha);border-radius:0 0 20px 20px}
.fechar{color:var(--suave);transition:color .2s,transform .3s}.fechar:hover{color:var(--marca);transform:rotate(90deg)}
@keyframes fundoEntra{0%{opacity:0}100%{opacity:1}}
@keyframes janelaEntra{0%{opacity:0;transform:translateY(24px) scale(.95);filter:blur(5px)}100%{opacity:1;transform:none;filter:none}}

/* ---- avisos ---- */
.aviso{background:var(--papelSolido);color:var(--texto);border:1px solid var(--linha);border-left:4px solid var(--marca2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 22px rgba(212,168,74,.15);animation:avisoEntra .4s cubic-bezier(.2,.9,.3,1.2) both}
.aviso.erro{background:var(--papelSolido);border-left-color:var(--erro);color:var(--erro)}
@keyframes avisoEntra{0%{opacity:0;transform:translateX(40px)}100%{opacity:1;transform:none}}

/* ---- entrada (login) ---- */
#telaEntrada{background:radial-gradient(800px 480px at 70% 8%,var(--brilhoFundo),transparent 62%),linear-gradient(160deg,var(--fundo),var(--fundo2))}
#telaEntrada .caixa{position:relative;background:var(--papel);border:1px solid var(--linha);border-radius:24px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 80px rgba(212,168,74,.12);animation:janelaEntra .7s cubic-bezier(.2,.9,.3,1.1) both}
#telaEntrada h1{background:var(--ouroGrad);-webkit-background-clip:text;background-clip:text;color:transparent}
#telaEntrada p{color:var(--suave)}
#telaEntrada .btTema{margin-top:16px}

/* ---- demais peças ---- */
.linhaTempo li{border-left:1px solid var(--linha)}
.linhaTempo li::before{background:var(--ouroGrad);border:0;box-shadow:0 0 10px rgba(212,168,74,.6)}
.barra{background:rgba(212,168,74,.12)}.barra i{background:var(--ouroGrad)!important;box-shadow:0 0 12px rgba(212,168,74,.4)}
.barraDia i{background:var(--ouroGrad);box-shadow:0 0 14px rgba(212,168,74,.35)}
.coluna{background:var(--papel);border:1px solid var(--linha2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.coluna h4{color:var(--marca2)}
.cartaoCaso{background:var(--papelSolido);border:1px solid var(--linha2);border-radius:12px;box-shadow:none;transition:transform .25s,border-color .25s,box-shadow .25s}
.cartaoCaso:hover{transform:translateY(-2px);border-color:var(--marca2);box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 16px rgba(212,168,74,.18)}
.crmFunil .coluna.soltar{background:rgba(212,168,74,.14);outline-color:var(--marca2)}
.agCol.hoje{background:color-mix(in srgb,var(--marca2) 8%,transparent)}
.agChip.on{box-shadow:0 0 12px color-mix(in srgb,var(--c) 40%,transparent)}
.agCartao{border-radius:var(--raio)}
.linhaReuniao:hover{background:var(--hoverLinha);border-color:var(--linha)}
.permissoes label{color:var(--texto)}
.regras{border-color:var(--linha)}
.dica{color:var(--suave)}
.doc{background:#fffdf8;color:#17130a}
#menuMovel{color:var(--marca)}
.filtros input.busca{border-radius:999px;padding-left:14px}

/* cores escritas direto nas telas (feitas para o fundo claro) */
[style*="background:#fff7d6"]{background:var(--alertaFundo)!important;color:var(--texto)}
[style*="background:#fbf7ee"],[style*="background:#eef7f0"],[style*="background:#eef3fb"]{background:var(--hoverLinha)!important}
[style*="color:#b3261e"]{color:var(--erro)!important}[style*="color:#7a5b00"]{color:var(--alerta)!important}[style*="color:#1a7f4b"]{color:var(--ok)!important}

@media (prefers-reduced-motion:reduce){
  body::before,body::after,.numero::after,#principal.entra::before{animation:none}
  #principal.entra>*,#principal.entra .grade>*,.janela,#fundoJanela,.aviso,.abas button.ativo,#telaEntrada .caixa{animation:none}
}
@media print{
  body::before,body::after,#principal::before{display:none}
  html,body{background:#fff!important;color:#000!important}
  .cartao,.numero{background:#fff!important;color:#000!important;box-shadow:none!important}
  .cartao::before{display:none}
}

#lateral .logo b .ne{opacity:.82;font-weight:600}
#lateral .logo b .pv{font-weight:800}