/* ======================================================================
   VISUAL CYBER (padrão). Vale quando o <body> tem .tema-cyber.
   Cores tiradas da logo: ciano #3ee8ff → azul #5b8cff → roxo #a66cff.
   ====================================================================== */
body.tema-cyber {
  --fundo: #060a14; --cartao: rgba(13, 21, 40, .62); --cartao2: rgba(91, 140, 255, .07); --borda: rgba(120, 170, 255, .10); --campo: rgba(120, 170, 255, .18);
  --texto: #9fb0cc; --titulo: #e9f1ff; --apagado: #5d6d8c;
  --azul: #5b8cff; --azul2: #6ff0ff; --vermelho: #ff5d7a; --verde: #2ef2a0; --laranja: #ffb547; --roxo: #a66cff;
  --g1: #3ee8ff; --g2: #5b8cff; --g3: #a66cff;
  --grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
  --grad-suave: linear-gradient(135deg, rgba(62, 232, 255, .16), rgba(166, 108, 255, .14));
  --barra: linear-gradient(180deg, var(--g1), var(--g3)); --barra-neg: linear-gradient(180deg, #ff7a93, #c2375a);
  --c-pix: #3ee8ff; --c-cartao: #a66cff; --c-boleto: #ffb547; --c-outro: #ff5d7a;
  --f1: #3ee8ff; --f2: #5b8cff; --f3: #a66cff;
  --sombra: 0 18px 50px -20px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .04);
  --raio: 14px;
  font-family: Inter, system-ui, sans-serif; color: var(--texto);
  background: radial-gradient(1100px 650px at 8% -8%, rgba(62, 232, 255, .10), transparent 60%),
              radial-gradient(1000px 700px at 108% 108%, rgba(166, 108, 255, .13), transparent 60%),
              url(/cyber/fundo.webp) center / cover fixed, var(--fundo);
}
.tema-cyber h1, .tema-cyber h2, .tema-cyber h3, .tema-cyber .topo .titulo, .tema-cyber .kpi .v, .tema-cyber .kpi.grafico .t { font-family: 'Space Grotesk', Inter, sans-serif; letter-spacing: -.01em; }
.tema-cyber ::selection { background: rgba(62, 232, 255, .3); }
.tema-cyber * { scrollbar-width: thin; scrollbar-color: rgba(91, 140, 255, .45) transparent; }
.tema-cyber ::-webkit-scrollbar { width: 8px; height: 8px; } .tema-cyber ::-webkit-scrollbar-thumb { background: linear-gradient(var(--g1), var(--g3)); border-radius: 8px; }

/* vidro: todo cartão, menu, topo, gaveta e janela */
.tema-cyber .cartao, .tema-cyber .topo, .tema-cyber .menu, .tema-cyber .gaveta, .tema-cyber .janela, .tema-cyber .dica, .tema-cyber .toast {
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.tema-cyber .cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
/* luz que segue o mouse (o app.js põe --mx/--my no cartão) + borda em degradê no hover */
.tema-cyber .cartao::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 140, 255, .13), transparent 42%); }
.tema-cyber .cartao::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 240, 255, .75), rgba(166, 108, 255, .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tema-cyber .cartao:hover::before, .tema-cyber .cartao:hover::after { opacity: 1; }
.tema-cyber .cartao > * { position: relative; z-index: 1; }
.tema-cyber .kpi:hover, .tema-cyber .midia:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -24px rgba(91, 140, 255, .45), var(--sombra); }
.tema-cyber .cartao > .cab { border-bottom-color: var(--borda); }
.tema-cyber .cartao > .cab h2, .tema-cyber .cartao > .cab h3 { font-weight: 600; }

/* ---------- menu ---------- */
.tema-cyber .menu { background: linear-gradient(180deg, rgba(10, 17, 34, .78), rgba(8, 12, 26, .86)); border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, rgba(62, 232, 255, .35), rgba(166, 108, 255, .25) 50%, transparent) 1; box-shadow: 12px 0 40px -20px rgba(0, 0, 0, .8); }
.tema-cyber .menu .logo { height: 86px; gap: 12px; }
.tema-cyber .menu .logo .marca { height: 44px; width: auto; filter: drop-shadow(0 0 10px rgba(62, 232, 255, .35)); transition: transform .5s, filter .5s; }
.tema-cyber .menu .logo:hover .marca { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 16px rgba(62, 232, 255, .7)); }
.tema-cyber .menu .logo .palavra { height: 17px; width: auto; }
.tema-cyber .menu .item { border-radius: 10px; color: #b8c6e3; font-size: 14.6px; position: relative; transition: padding .25s, background .25s, color .25s; }
.tema-cyber .menu .item svg { transition: color .25s, filter .25s, transform .25s; }
.tema-cyber .menu .item:hover { background: rgba(91, 140, 255, .08); color: #fff; }
.tema-cyber .menu .item:hover svg { color: var(--g1); filter: drop-shadow(0 0 6px rgba(62, 232, 255, .7)); transform: scale(1.08); }
.tema-cyber .menu .item.grupo { background: rgba(255, 255, 255, .03); border: 1px solid rgba(120, 170, 255, .07); }
.tema-cyber .menu .item.ativo { background: linear-gradient(90deg, rgba(62, 232, 255, .20), rgba(91, 140, 255, .12) 55%, rgba(166, 108, 255, .08)); color: #fff; box-shadow: inset 0 0 0 1px rgba(111, 240, 255, .18), 0 8px 26px -12px rgba(62, 232, 255, .6); }
.tema-cyber .menu .item.ativo::before { content: ''; position: absolute; left: -15px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 12px var(--g1); }
.tema-cyber .menu .item.ativo svg { color: var(--g1); filter: drop-shadow(0 0 8px rgba(62, 232, 255, .9)); }
.tema-cyber .menu .rotulo { color: #6a7ea6; letter-spacing: 2px; font-size: 10.5px; }
.tema-cyber .menu .rotulo::after { content: ''; display: block; height: 1px; margin-top: 8px; background: linear-gradient(90deg, rgba(91, 140, 255, .35), transparent); }

/* ---------- topo ---------- */
.tema-cyber .topo { background: rgba(12, 19, 37, .62); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); position: relative; }
.tema-cyber .topo::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(62, 232, 255, .55), rgba(166, 108, 255, .55), transparent); }
.tema-cyber .topo .titulo { font-weight: 600; }
.tema-cyber .topo .icone { transition: color .2s, transform .2s; } .tema-cyber .topo .icone:hover { color: var(--g1); transform: translateY(-1px); }
.tema-cyber .barra { background: rgba(255, 255, 255, .06); } .tema-cyber .barra > i { background: var(--grad); box-shadow: 0 0 12px rgba(62, 232, 255, .7); }
.tema-cyber .topo .meta .l1 span:first-child { color: var(--g1); }
.tema-cyber .avatar { background: var(--grad); color: #06101f; font-weight: 700; box-shadow: 0 0 0 2px rgba(6, 10, 20, .9), 0 0 0 3px rgba(111, 240, 255, .5), 0 0 18px rgba(62, 232, 255, .45); }

/* ---------- botões ---------- */
.tema-cyber .btn { border: 0; border-radius: 10px; background: var(--grad); color: #04111f; font-weight: 600; position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 10px 30px -12px rgba(62, 232, 255, .65); transition: transform .2s, box-shadow .25s, filter .25s; }
.tema-cyber .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.tema-cyber .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(91, 140, 255, .85); filter: brightness(1.06); }
.tema-cyber .btn:hover::after { transform: translateX(120%); }
.tema-cyber .btn:active { transform: translateY(0) scale(.98); }
.tema-cyber .btn.contorno { color: var(--titulo); border: 1px solid transparent; background: linear-gradient(rgba(10, 16, 32, .9), rgba(10, 16, 32, .9)) padding-box, var(--grad) border-box; box-shadow: none; }
.tema-cyber .btn.contorno:hover { background: linear-gradient(rgba(20, 32, 60, .9), rgba(20, 32, 60, .9)) padding-box, var(--grad) border-box; box-shadow: 0 10px 30px -14px rgba(91, 140, 255, .8); }
.tema-cyber .btn.perigo { background: linear-gradient(135deg, #ff7a93, #c2375a); color: #fff; }
.tema-cyber .btn:disabled { filter: grayscale(.6); opacity: .4; transform: none; box-shadow: none; }
.tema-cyber .btn-icone { background: rgba(91, 140, 255, .08); color: #c9d6f2; transition: background .2s, color .2s; } .tema-cyber .btn-icone:hover { background: rgba(62, 232, 255, .16); color: var(--g1); }
.tema-cyber .grupo-icones { border-radius: 10px; border: 1px solid var(--borda); }

/* ---------- formulários ---------- */
.tema-cyber .campo input, .tema-cyber .campo select, .tema-cyber .campo textarea, .tema-cyber select.sel, .tema-cyber input.inp {
  background-color: rgba(6, 11, 24, .55); border: 1px solid var(--campo); border-radius: 10px; color: var(--titulo); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.tema-cyber .campo input:hover, .tema-cyber .campo select:hover, .tema-cyber select.sel:hover, .tema-cyber input.inp:hover { border-color: rgba(111, 240, 255, .35); }
.tema-cyber .campo input:focus, .tema-cyber .campo select:focus, .tema-cyber .campo textarea:focus, .tema-cyber input.inp:focus { border-color: var(--g1); box-shadow: 0 0 0 3px rgba(62, 232, 255, .15), 0 0 24px -6px rgba(62, 232, 255, .5); background-color: rgba(8, 16, 34, .8); }
.tema-cyber .campo select, .tema-cyber select.sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ff0ff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.tema-cyber .campo select option, .tema-cyber select.sel option { background: #0c1428; color: var(--titulo); }
.tema-cyber .campo > label { color: #b3c3e2; font-weight: 500; }
.tema-cyber input[type=checkbox] { border-radius: 5px; background: rgba(6, 11, 24, .6); }
.tema-cyber input[type=checkbox]:checked { background: var(--grad); box-shadow: 0 0 10px rgba(62, 232, 255, .6); }
.tema-cyber .chave { background: rgba(255, 255, 255, .1); } .tema-cyber .chave.on { background: var(--grad); box-shadow: 0 0 14px rgba(62, 232, 255, .55); }

/* ---------- tabelas ---------- */
.tema-cyber table.t th { background: rgba(91, 140, 255, .07); color: #b9c8e8; font-size: 11.2px; letter-spacing: 1.2px; border-bottom: 1px solid var(--borda); }
.tema-cyber table.t td { border-top-color: rgba(120, 170, 255, .06); }
.tema-cyber table.t tbody tr { transition: background .2s; }
.tema-cyber table.t tbody tr:hover td { background: linear-gradient(90deg, rgba(62, 232, 255, .06), rgba(166, 108, 255, .04)); }
.tema-cyber table.t tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--g1); }
.tema-cyber table.t tr.total td { background: linear-gradient(90deg, rgba(62, 232, 255, .10), rgba(166, 108, 255, .08)); color: #fff; }
.tema-cyber .neg { text-shadow: 0 0 12px rgba(255, 93, 122, .35); } .tema-cyber .pos { text-shadow: 0 0 12px rgba(46, 242, 160, .3); }

/* ---------- abas, etiquetas, avisos ---------- */
.tema-cyber .abas .aba { transition: color .2s; } .tema-cyber .abas .aba:hover { color: #fff; }
.tema-cyber .abas .aba.on { color: var(--g1); border-bottom: 2px solid transparent; border-image: var(--grad) 1; text-shadow: 0 0 14px rgba(62, 232, 255, .55); }
.tema-cyber .abas.cartoes .aba { background: rgba(13, 21, 40, .55); border: 1px solid var(--borda); border-bottom: 0; border-radius: 12px 12px 0 0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tema-cyber .abas.cartoes .aba.on { background: rgba(20, 32, 62, .8); box-shadow: inset 0 2px 0 var(--g1); border-image: none; }
.tema-cyber .etiqueta { border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.tema-cyber .etiqueta.verde { background: rgba(46, 242, 160, .1); border-color: rgba(46, 242, 160, .3); }
.tema-cyber .etiqueta.vermelho { background: rgba(255, 93, 122, .1); border-color: rgba(255, 93, 122, .3); }
.tema-cyber .etiqueta.azul { background: rgba(62, 232, 255, .1); border-color: rgba(62, 232, 255, .3); color: var(--g1); }
.tema-cyber .etiqueta.laranja { background: rgba(255, 181, 71, .1); border-color: rgba(255, 181, 71, .3); }
.tema-cyber .selo-ok { background: rgba(46, 242, 160, .12); color: var(--verde); border: 1px solid rgba(46, 242, 160, .35); border-radius: 999px; }
.tema-cyber .aviso { border-radius: 10px; border: 1px solid rgba(255, 181, 71, .25); }
.tema-cyber .aviso.azul { background: rgba(62, 232, 255, .07); border-color: rgba(62, 232, 255, .22); color: #9fe9ff; }
.tema-cyber .aviso.vermelho { border-color: rgba(255, 93, 122, .3); }

/* ---------- KPIs ---------- */
.tema-cyber .kpi .t { color: #b9c8e8; font-weight: 500; }
.tema-cyber .kpi { padding: 14px 18px 12px; }
.tema-cyber .kpi .v { font-size: 23px; line-height: 1.25; font-weight: 600; color: #fff; text-shadow: 0 0 22px rgba(91, 140, 255, .35); }
.tema-cyber .kpi .falta { margin-top: 1px; }
.tema-cyber .kpi.ruim .v { color: var(--vermelho); text-shadow: 0 0 18px rgba(255, 93, 122, .45); } .tema-cyber .kpi.ruim .t { color: #ff8ea3; }
.tema-cyber .info { color: #7f93ba; transition: color .2s; } .tema-cyber .info:hover { color: var(--g1); }

/* ---------- gaveta, janela, dica, aviso ---------- */
.tema-cyber .veu { background: rgba(2, 5, 12, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: aparece .25s both; }
.tema-cyber .gaveta { background: rgba(10, 16, 32, .88); border-left: 1px solid var(--borda); animation: desliza .35s cubic-bezier(.2, .8, .2, 1) both; }
.tema-cyber .gaveta .cab { background: linear-gradient(90deg, rgba(62, 232, 255, .10), rgba(166, 108, 255, .06)); border-bottom: 1px solid var(--borda); }
.tema-cyber .janela { background: rgba(10, 16, 32, .9); border: 1px solid var(--borda); border-radius: 16px; animation: surge .3s cubic-bezier(.2, .8, .2, 1) both; }
.tema-cyber .janela .cab, .tema-cyber .janela .pe { border-color: var(--borda); }
.tema-cyber .dica { background: rgba(8, 13, 28, .92); border: 1px solid rgba(111, 240, 255, .25); border-radius: 10px; box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .8); }
.tema-cyber .toast { background: rgba(12, 20, 40, .9); border: 1px solid var(--borda); border-left: 3px solid var(--g1); border-radius: 12px; animation: surge .3s both; }
.tema-cyber .toast.erro { border-left-color: var(--vermelho); }
.tema-cyber .soltar { border-color: rgba(111, 240, 255, .25); border-radius: 12px; transition: all .25s; }
.tema-cyber .soltar:hover, .tema-cyber .soltar.em-cima { border-color: var(--g1); background: rgba(62, 232, 255, .06); color: #fff; box-shadow: inset 0 0 30px -10px rgba(62, 232, 255, .5); }
.tema-cyber .midia { background: rgba(91, 140, 255, .06); border-radius: 12px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.tema-cyber .midia.sel { border-color: var(--g1); box-shadow: 0 0 0 1px var(--g1), 0 0 26px -6px rgba(62, 232, 255, .7); }
.tema-cyber .palavras span.gancho { background: linear-gradient(90deg, rgba(62, 232, 255, .35), rgba(91, 140, 255, .35)); }
.tema-cyber .linha-tempo .g { background: linear-gradient(90deg, rgba(62, 232, 255, .55), rgba(166, 108, 255, .45)); }

/* ---------- login ---------- */
.tema-cyber .login .cartao { width: 400px; padding: 36px 32px; border-radius: 22px; background: rgba(10, 16, 32, .6); }
.tema-cyber .login .logo { flex-direction: column; gap: 16px; }
.tema-cyber .login .logo .marca { height: 112px; width: auto; filter: drop-shadow(0 0 22px rgba(62, 232, 255, .45)); animation: flutua 6s ease-in-out infinite; }
.tema-cyber .login .logo .palavra { height: 26px; width: auto; }

/* ---------- entrada das telas ---------- */
.tema-cyber #pagina > *, .tema-cyber .grade > * { animation: sobe .55s cubic-bezier(.2, .8, .2, 1) both; }
.tema-cyber .grade > * { animation-delay: calc(var(--i, 0) * 28ms); }
.intro-revela .menu { animation: entra-esq .9s cubic-bezier(.2, .8, .2, 1) both; }
.intro-revela .topo { animation: entra-cima .8s .12s cubic-bezier(.2, .8, .2, 1) both; }
.intro-revela .grade > *, .intro-revela #pagina > * { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i, 0) * 45ms); }
.intro-revela .login .cartao { animation: surge 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
body.com-intro [data-logo-c], body.com-intro [data-logo-texto] { visibility: hidden; }

/* ---------- a cena da intro ---------- */
.intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.intro-fundo { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(14, 24, 46, .55), rgba(3, 6, 14, .96) 70%), url(/cyber/fundo.webp) center / cover, #04070f; }
.intro-video { position: relative; height: min(100svh, 100vw * 1.7778); width: auto; mix-blend-mode: screen; filter: contrast(1.32) brightness(1.06) saturate(1.1);
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 60% at 50% 46%, #000 62%, transparent 100%); }
.intro-voa { position: fixed; z-index: 3; transform-origin: 0 0; pointer-events: none; opacity: 0; will-change: transform, filter; }
.intro-voa.rastro { z-index: 2; opacity: 0; filter: blur(2px); }
.intro-pular { position: absolute; right: 26px; bottom: 24px; z-index: 4; background: rgba(10, 16, 32, .6); color: #cfe3ff; border: 1px solid rgba(111, 240, 255, .3); border-radius: 999px; padding: 9px 18px; font: 500 13px Inter, sans-serif; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: all .2s; }
.intro-pular:hover { border-color: var(--g1, #3ee8ff); color: #fff; box-shadow: 0 0 20px -4px rgba(62, 232, 255, .7); }

/* ---------- escolha do visual (Configurações) ---------- */
.visuais { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visual { border-radius: 14px; border: 2px solid var(--borda); padding: 10px; cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; }
.visual:hover { transform: translateY(-2px); }
.visual.on { border-color: var(--azul2); box-shadow: 0 0 0 1px var(--azul2), 0 0 28px -8px var(--azul2); }
.visual .mini { height: 92px; border-radius: 9px; display: grid; grid-template-columns: 26% 1fr; gap: 6px; padding: 6px; overflow: hidden; }
.visual .mini i { display: block; border-radius: 5px; } .visual .mini b { display: grid; grid-template-rows: 16px 1fr; gap: 6px; } .visual .mini b span { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.visual .mini.v-cyber { background: radial-gradient(circle at 20% 0, rgba(62, 232, 255, .25), transparent 60%), radial-gradient(circle at 100% 100%, rgba(166, 108, 255, .3), transparent 60%), #070b16; }
.visual .mini.v-cyber i, .visual .mini.v-cyber em { background: rgba(255, 255, 255, .07); border: 1px solid rgba(111, 240, 255, .25); }
.visual .mini.v-utmify { background: #161d31; } .visual .mini.v-utmify i, .visual .mini.v-utmify em { background: #283046; }
.visual .mini em { display: block; border-radius: 5px; }
.visual .nome { margin-top: 10px; font-weight: 600; color: var(--titulo); display: flex; justify-content: space-between; align-items: center; }

@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes entra-cima { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes surge { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.tema-cyber .toast, .intro-revela .login .cartao { animation-name: sobe; }
@keyframes desliza { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .tema-cyber *, .intro-revela * { animation: none !important; transition: none !important; } }