/* Fonte de terror guardada no próprio sistema (não depende do Google Fonts) */
@font-face {
  font-family: 'CT Creepster';
  src: url('fontes/creepster.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
/* ==========================================================================
   TEMA HALLOWEEN 🎃  (ativado pelo admin em: menu do perfil > Tema do sistema)
   Paleta: preto-arroxeado, roxo de bruxa e laranja de abóbora.
   Sempre no modo escuro. As decorações animadas ficam no halloween.js.
   ========================================================================== */

body.app-body.tema-halloween {
  --hw-bg: #0a0610;
  --hw-panel: #130c1b;
  --hw-panel-2: #1a1024;
  --hw-borda: rgba(168, 85, 247, 0.16);
  --hw-borda-forte: rgba(168, 85, 247, 0.3);
  --hw-texto: #f3e8ff;
  --hw-mudo: #a99bbd;
  --hw-laranja: #f97316;
  --hw-laranja-2: #fb923c;
  --hw-laranja-3: #fdba74;
  --hw-roxo: #a855f7;
  --hw-grad: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #c2410c 100%);

  --cz-bg: var(--hw-bg);
  --cz-panel: var(--hw-panel);
  --cz-panel-2: var(--hw-panel-2);
  --cz-border: var(--hw-borda);
  --cz-border-strong: var(--hw-borda-forte);
  --cz-text: var(--hw-texto);
  --cz-muted: var(--hw-mudo);
  --cz-soft: rgba(249, 115, 22, 0.1);
  --cz-green: var(--hw-laranja);
  --cz-green-2: #ea580c;
  --cz-green-3: var(--hw-laranja-2);
  --cz-glow: rgba(249, 115, 22, 0.45);
  --cz-star: rgba(253, 186, 116, 0.8);
  --cz-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
  --bg-main: var(--hw-bg);
  --bg-panel: var(--hw-panel);
  --primary: var(--hw-laranja);
  --primary-light: rgba(249, 115, 22, 0.12);
  --border-color: var(--hw-borda);
  --sidebar-hover: rgba(249, 115, 22, 0.08);
  --text-main: var(--hw-texto);
  background-color: var(--hw-bg) !important;
  color: var(--hw-texto) !important;
}

/* ---------- Fundo: noite roxa com brilho de abóbora ---------- */
body.app-body.tema-halloween::before {
  background:
    radial-gradient(circle, rgba(168, 85, 247, 0.12) 1px, transparent 1.6px) 0 0 / 24px 24px,
    radial-gradient(60% 45% at 50% -10%, rgba(126, 34, 206, 0.35), transparent 70%),
    radial-gradient(45% 40% at 100% 105%, rgba(249, 115, 22, 0.22), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(88, 28, 135, 0.3), transparent 70%),
    #0a0610 !important;
}
body.app-body.tema-halloween #cosmos { display: none !important; }
html:has(body.tema-halloween) { background: #0a0610 !important; }

/* ---------- Menu lateral ---------- */
body.app-body.tema-halloween .sidebar {
  background:
    radial-gradient(120% 26% at 50% 0%, rgba(126, 34, 206, 0.32), transparent 72%),
    radial-gradient(90% 24% at 50% 100%, rgba(249, 115, 22, 0.18), transparent 72%),
    linear-gradient(180deg, #1a0f24 0%, #110a19 55%, #0a0610 100%) !important;
  border-color: rgba(168, 85, 247, 0.22) !important;
  box-shadow: 0 24px 60px -24px rgba(126, 34, 206, 0.55) !important;
}
body.app-body.tema-halloween .sidebar-header,
body.app-body.tema-halloween .sidebar .sidebar-foot { border-color: rgba(168, 85, 247, 0.16) !important; }
body.app-body.tema-halloween .sidebar .brand-word b,
body.app-body.tema-halloween .brand-word b {
  background: var(--hw-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
body.app-body.tema-halloween .sidebar .brand-sub,
body.app-body.tema-halloween .sidebar .nav-label,
body.app-body.tema-halloween .sidebar .tutinauta-label { color: #8e7ba8 !important; }
body.app-body.tema-halloween .sidebar .nav-item { color: #ddd0ee !important; }
body.app-body.tema-halloween .sidebar .nav-item i { color: #8e7ba8 !important; }
body.app-body.tema-halloween .sidebar .nav-item:hover { background: rgba(249, 115, 22, 0.08) !important; }
body.app-body.tema-halloween .sidebar .nav-item:hover i { color: var(--hw-laranja-2) !important; }
body.app-body.tema-halloween .sidebar .nav-item.active,
body.app-body.tema-halloween.theme-green .sidebar .nav-item.active {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.2), rgba(126, 34, 206, 0.08)) !important;
  border-color: rgba(251, 146, 60, 0.5) !important;
  box-shadow: 0 10px 24px -14px rgba(249, 115, 22, 0.9) !important;
}
body.app-body.tema-halloween .sidebar .nav-item.active i { color: var(--hw-laranja-2) !important; }
body.app-body.tema-halloween .sidebar .nav-item.active::after { background: var(--hw-laranja) !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), 0 0 10px var(--hw-laranja) !important; }
body.app-body.tema-halloween .sidebar .sidebar-foot b { color: var(--hw-laranja-2) !important; }
body.app-body.tema-halloween .sidebar .nav-badge { background: var(--hw-laranja) !important; color: #1a0f24 !important; }

/* ---------- Cabeçalho ---------- */
body.app-body.tema-halloween .top-header {
  background: rgba(19, 12, 27, 0.96) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9) !important;
}
body.app-body.tema-halloween .hdr-icon { background: var(--hw-grad) !important; box-shadow: 0 10px 22px -10px rgba(249, 115, 22, 0.9) !important; }
body.app-body.tema-halloween .hdr-crumb b { color: var(--hw-laranja-2) !important; }
body.app-body.tema-halloween .hdr-clock { background: rgba(168, 85, 247, 0.06) !important; border-color: rgba(168, 85, 247, 0.18) !important; }
body.app-body.tema-halloween .hdr-clock i { color: var(--hw-laranja) !important; }
body.app-body.tema-halloween .hdr-avatar:not(.tem-foto) { background: linear-gradient(135deg, #2e1065, #12091c) !important; color: var(--hw-laranja-2) !important; }
body.app-body.tema-halloween .profile-btn { background: var(--hw-panel) !important; border-color: var(--hw-borda-forte) !important; }
body.app-body.tema-halloween .profile-menu { background: #130c1b !important; border-color: rgba(168, 85, 247, 0.25) !important; }

/* ---------- "Central de Comando" vira noite de lua cheia ---------- */
body.tema-halloween .cosmic-hero-bg {
  background:
    radial-gradient(40% 90% at 50% 140%, rgba(249, 115, 22, 0.38), transparent 70%),
    radial-gradient(35% 80% at 82% 10%, rgba(254, 240, 138, 0.18), transparent 60%),
    linear-gradient(170deg, #2a1240 0%, #160b23 45%, #0b0612 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 26px 60px -28px rgba(126, 34, 206, 0.7) !important;
}
body.tema-halloween #czgHeroPlanet stop:nth-child(1), body.tema-halloween #czgHeroPlanetShared stop:nth-child(1) { stop-color: #fffbeb !important; }
body.tema-halloween #czgHeroPlanet stop:nth-child(2), body.tema-halloween #czgHeroPlanetShared stop:nth-child(2) { stop-color: #fde68a !important; }
body.tema-halloween #czgHeroPlanet stop:nth-child(3), body.tema-halloween #czgHeroPlanetShared stop:nth-child(3) { stop-color: #d6a74a !important; }
body.tema-halloween .cz-hero-planet { filter: drop-shadow(0 0 28px rgba(254, 240, 138, 0.55)); }
body.tema-halloween .cz-hero-planet ellipse { display: none; }
body.tema-halloween .cz-hero-orbit, body.tema-halloween .cz-hero-ufo, body.tema-halloween .cz-hero-shoot { display: none !important; }
body.tema-halloween .cz-chip { background: rgba(249, 115, 22, 0.12) !important; border-color: rgba(251, 146, 60, 0.35) !important; color: #fed7aa !important; }
body.tema-halloween .cz-chip .dot { background: var(--hw-laranja) !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25), 0 0 10px var(--hw-laranja) !important; }
body.tema-halloween .cosmic-hero h2 {
  font-family: 'CT Creepster', 'Creepster', 'Poppins', cursive !important;
  font-weight: 400 !important; letter-spacing: 1.5px !important;
  text-shadow: 0 0 18px rgba(249, 115, 22, 0.35);
}
body.tema-halloween #heroSaudacao { color: var(--hw-laranja-2) !important; }
body.tema-halloween .cosmic-hero h2 .hl { color: #f3e8ff !important; background: none !important; -webkit-text-fill-color: currentColor; }
body.tema-halloween .cosmic-hero p.cz-sub { color: #d8c7ee !important; }
body.tema-halloween .cz-ph-icon { background: var(--hw-grad) !important; box-shadow: 0 10px 22px -10px rgba(249, 115, 22, 0.9) !important; border: 0 !important; color: #fff !important; }
body.app-body.tema-halloween .cosmic-hero .filter-bar { background: rgba(19, 12, 27, 0.85) !important; border: 1px solid rgba(251, 146, 60, 0.3) !important; }
body.app-body.tema-halloween .cosmic-hero .filter-title i { color: var(--hw-laranja) !important; }

/* ---------- Cartões e painéis ---------- */
html body.app-body.tema-halloween :is(.card, .panel, .content-card, .section-card, .table-container, .table-card, .filter-bar,
  .filter-section-modern, .dist-panel, .tab-content-section, .info-section, .stat-card-modern, .stat-card-new, .gb-stat-card,
  .stat-card, .stat-card-vend, .bd-stat-card, .chart-card, .bd-table-card, .kanban-column, .ucard, .dx-lote, .dx-kpi, .dx-sec, .dx-pag, .um-sec) {
  background:
    radial-gradient(rgba(168, 85, 247, 0.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(160deg, #170e21, #0f0916) !important;
  border-color: rgba(168, 85, 247, 0.18) !important;
}
html body.app-body.tema-halloween :is(.stat-card-modern, .stat-card-new, .gb-stat-card, .stat-card, .stat-card-vend, .bd-stat-card, .chart-card, .ucard):hover {
  border-color: rgba(251, 146, 60, 0.45) !important;
  box-shadow: 0 18px 40px -20px rgba(249, 115, 22, 0.5) !important;
}
html body.app-body.tema-halloween :is(h1, h2, h3, h4, h5, .card-title, .section-title, .page-title, .ul-nome, .dx-lote-nome) { color: #f3e8ff; }
html body.app-body.tema-halloween thead th { color: #b9a6d3 !important; }
html body.app-body.tema-halloween td { border-color: rgba(168, 85, 247, 0.1) !important; }
html body.app-body.tema-halloween tbody tr:hover td { background-color: rgba(249, 115, 22, 0.06) !important; }

/* ---------- Campos ---------- */
html body.app-body.tema-halloween :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background-color: #0e0815 !important; border-color: #2f2240 !important; color: #f3e8ff !important;
}
html body.app-body.tema-halloween :is(input, select, textarea):focus { border-color: var(--hw-laranja) !important; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15) !important; }
html body.app-body.tema-halloween :is(input, textarea)::placeholder { color: #6d5d84 !important; }

/* ---------- Botões principais: de verde para abóbora ---------- */
html body.app-body.tema-halloween.tema-halloween :is(
  .btn-primary, .btn-apply, .btn-gm-save, .btn-add, .btn-novo-banco:not(#btnVerArquivados), .btn-start-sim, .btn-primary-modal,
  .pc-btn:not(.ghost):not(.pc-btn-test):not(.pc-btn-off):not(.pc-btn-on):not(.pc-btn-del), .global-modal-btn.primary,
  .tab-btn.active, .page-btn.active, .gb-filter-btn.active, .pc-tipo-btn.ativo, .btn-novo-usuario, .header-action-sm.btn-export-sm,
  .ms-pri, .dx-btn.pri, .um-btn.pri, .cli-btn.leilao, .btn-proximo-lead-top, .btn-copiar-todos, .btn-telefone-plus, .btn-modal-import,
  .dx-pag-num.ativo, .ue-btn.ativo, .fp-shortcut-btn.active) {
  background: var(--hw-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px -10px rgba(249, 115, 22, 0.85) !important;
}
html body.app-body.tema-halloween.tema-halloween :is(.tab-btn, .gb-filter-btn, .pc-tipo-btn, .page-btn, .dx-pag-num, .dx-pag-seta):hover:not(.active):not(.ativo) {
  color: var(--hw-laranja-2) !important; border-color: var(--hw-laranja) !important;
}
html body.app-body.tema-halloween :is(.progress-bar-fill, .bank-progress-fill) { background: var(--hw-grad) !important; }
html body.app-body.tema-halloween .theme-mode-btn.active { background: rgba(249, 115, 22, 0.15) !important; border-color: var(--hw-laranja) !important; color: var(--hw-laranja-2) !important; }
html body.app-body.tema-halloween :is(.ul-email, .ucard-login, .dx-chip, .ul-chip.on, .ul-chip.admin) { color: var(--hw-laranja-3) !important; }
html body.app-body.tema-halloween :is(.dx-chip, .ul-chip.on, .ul-chip.admin, .dx-contador) { background: rgba(249, 115, 22, 0.14) !important; }

/* ---------- Cabeçalhos de modal ---------- */
html body.tema-halloween :is(.ms-head, .dx-head, .um-head) {
  background:
    radial-gradient(60% 170% at 92% 130%, rgba(249, 115, 22, 0.35), transparent 62%),
    linear-gradient(120deg, #2a1240 0%, #160b23 50%, #0b0612 100%) !important;
}
html body.tema-halloween :is(.ms-head, .dx-head, .um-head) :is(p, small) { color: #fed7aa !important; }
html body.tema-halloween :is(.ms-head, .dx-head) i:not(.ms-x i) { color: var(--hw-laranja-2) !important; }
html body.tema-halloween :is(.dx-head-ico, .um-avatar:not(:has(img))) { background: var(--hw-grad) !important; }
html body.tema-halloween :is(.ms-box, .dx-box, .um-box, .cli-box, .ue-box) { background: #120b1a !important; border-color: rgba(168, 85, 247, 0.22) !important; }
html body.tema-halloween :is(.ms-foot, .dx-foot, .um-foot) { background: #120b1a !important; border-color: rgba(168, 85, 247, 0.16) !important; }

/* ---------- Calendário ---------- */
body.tema-halloween .flatpickr-calendar, body.tema-halloween .dp-popup { background: #130c1b !important; border-color: rgba(168, 85, 247, 0.25) !important; }
body.tema-halloween .flatpickr-day.selected, body.tema-halloween .flatpickr-day.startRange, body.tema-halloween .flatpickr-day.endRange,
body.tema-halloween .dp-grid button.dp-start, body.tema-halloween .dp-grid button.dp-end { background: var(--hw-grad) !important; color: #fff !important; }
body.tema-halloween .flatpickr-day.inRange { background: rgba(249, 115, 22, 0.16) !important; box-shadow: -3px 0 0 rgba(249, 115, 22, 0.16), 3px 0 0 rgba(249, 115, 22, 0.16) !important; color: #fed7aa !important; }
body.tema-halloween .flatpickr-day.today { border-color: var(--hw-laranja) !important; }
body.tema-halloween .flatpickr-day:hover { background: rgba(168, 85, 247, 0.15) !important; color: #f3e8ff !important; }
body.tema-halloween .cal-rodape button { color: var(--hw-laranja-2) !important; }
body.tema-halloween .dp-wrap { --dp-accent: #f97316 !important; --dp-tint: rgba(249, 115, 22, 0.16) !important; }

/* ---------- Rolagem ---------- */
body.tema-halloween ::-webkit-scrollbar-thumb { background: rgba(249, 115, 22, 0.35) !important; }
body.tema-halloween ::-webkit-scrollbar-thumb:hover { background: rgba(249, 115, 22, 0.6) !important; }
body.tema-halloween * { scrollbar-color: rgba(249, 115, 22, 0.35) transparent; }

/* ---------- Seletor de temas no menu ---------- */
body.tema-halloween .pm-tema.ativo { background: rgba(249, 115, 22, 0.12) !important; border-color: var(--hw-laranja) !important; color: var(--hw-laranja-3) !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important; }
body.tema-halloween .pm-tema.ativo::after { background: var(--hw-laranja) !important; }
body.tema-halloween .pm-tema { background: #1a1024 !important; border-color: #2f2240 !important; color: #ddd0ee !important; }
body.tema-halloween .pm-tema-tag { background: rgba(249, 115, 22, 0.15) !important; color: #fdba74 !important; }

/* ==========================================================================
   DECORAÇÕES (criadas pelo halloween.js)
   ========================================================================== */
.hw-camada { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.hw-fundo { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* névoa no rodapé */
.hw-nevoa {
  position: absolute; left: -50%; bottom: -40px; width: 200%; height: 220px;
  background:
    radial-gradient(30% 60% at 20% 70%, rgba(196, 181, 253, 0.10), transparent 70%),
    radial-gradient(25% 55% at 55% 80%, rgba(196, 181, 253, 0.09), transparent 70%),
    radial-gradient(30% 60% at 85% 75%, rgba(196, 181, 253, 0.10), transparent 70%);
  filter: blur(6px);
  animation: hwNevoa 38s linear infinite;
}
.hw-nevoa.n2 { bottom: -70px; opacity: .8; animation-duration: 55s; animation-direction: reverse; }
@keyframes hwNevoa { from { transform: translateX(0); } to { transform: translateX(25%); } }

/* teias nos cantos */
.hw-teia { position: absolute; width: 150px; height: 150px; opacity: .5; }
.hw-teia.d { right: 0; top: 0; transform: scaleX(-1); }
.hw-teia.e { left: 0; bottom: 0; transform: scaleY(-1); width: 120px; height: 120px; opacity: .35; }

/* aranha pendurada */
.hw-aranha { position: absolute; top: 0; right: 13%; width: 26px; animation: hwAranha 7s ease-in-out infinite; transform-origin: top center; }
.hw-aranha .fio { position: absolute; left: 50%; top: -400px; width: 1px; height: 400px; background: rgba(226, 214, 245, 0.45); }
@keyframes hwAranha { 0%, 100% { transform: translateY(70px); } 45% { transform: translateY(150px); } 60% { transform: translateY(140px); } }

/* morcegos voando pela tela */
.hw-morcego { position: absolute; left: -80px; width: 46px; opacity: .9; animation: hwVoo linear forwards; }
.hw-morcego svg { width: 100%; height: auto; animation: hwBater .22s ease-in-out infinite alternate; transform-origin: center; }
@keyframes hwVoo {
  0% { transform: translate(0, 0) scale(var(--esc, 1)); }
  25% { transform: translate(28vw, -40px) scale(var(--esc, 1)); }
  50% { transform: translate(55vw, 25px) scale(var(--esc, 1)); }
  75% { transform: translate(82vw, -30px) scale(var(--esc, 1)); }
  100% { transform: translate(115vw, 10px) scale(var(--esc, 1)); }
}
@keyframes hwBater { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

/* fantasma passeando */
.hw-fantasma { position: absolute; bottom: 60px; left: -120px; width: 70px; opacity: 0; animation: hwFantasma 16s ease-in-out forwards; }
@keyframes hwFantasma {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .75; }
  50% { transform: translate(50vw, -50px); }
  90% { opacity: .75; }
  100% { transform: translate(105vw, 0); opacity: 0; }
}

/* abóboras e morcegos dentro do banner */
.hw-hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hw-hero-deco .abobora { position: absolute; bottom: -4px; width: 54px; filter: drop-shadow(0 0 16px rgba(249, 115, 22, 0.55)); }
.hw-hero-deco .abobora.a1 { right: 5%; width: 64px; }
.hw-hero-deco .abobora.a2 { right: 11%; width: 42px; bottom: -6px; }
.hw-hero-deco .abobora.a3 { right: 16%; width: 30px; bottom: -4px; opacity: .9; }
.hw-hero-deco .morcego-fixo { position: absolute; width: 34px; animation: hwPairar 3.2s ease-in-out infinite; }
.hw-hero-deco .morcego-fixo svg { width: 100%; animation: hwBater .28s ease-in-out infinite alternate; }
.hw-hero-deco .m1 { top: 18%; right: 33%; }
.hw-hero-deco .m2 { top: 40%; right: 27%; width: 24px; animation-delay: -1.1s; }
.hw-hero-deco .m3 { top: 12%; right: 8%; width: 20px; animation-delay: -2s; }
@keyframes hwPairar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, 8px); } }
.hw-chama { animation: hwChama 1.6s ease-in-out infinite alternate; }
@keyframes hwChama { from { opacity: .75; } to { opacity: 1; } }

/* chapéu de bruxa no Tutinauta */
.tutinauta-img-container, .mascote-area { position: relative; }
.hw-chapeu { position: absolute; z-index: 3; pointer-events: none; transform: rotate(-12deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.tutinauta-img-container .hw-chapeu { width: 58px; top: -16px; left: 50%; margin-left: -34px; }

@media (prefers-reduced-motion: reduce) {
  .hw-nevoa, .hw-aranha, .hw-morcego, .hw-fantasma, .hw-hero-deco .morcego-fixo, .hw-hero-deco .morcego-fixo svg, .hw-chama { animation: none !important; }
}
@media (max-width: 760px) {
  .hw-teia { width: 90px; height: 90px; }
  .hw-hero-deco .abobora.a2, .hw-hero-deco .abobora.a3, .hw-hero-deco .m2 { display: none; }
}

/* ==========================================================================
   TELA DE LOGIN
   ========================================================================== */
html.tema-halloween, html.tema-halloween[data-theme] {
  --primary: #f97316;
  --primary-dark: #c2410c;
  --primary-soft: rgba(249, 115, 22, 0.16);
  --bg: #0a0610;
  --glow-1: rgba(126, 34, 206, 0.22);
  --glow-2: rgba(249, 115, 22, 0.14);
  --dot: rgba(168, 85, 247, 0.12);
  --card: #130c1b;
  --card-border: #2a1d3a;
  --text: #f3e8ff;
  --muted: #a99bbd;
  --label: #ddd0ee;
  --input-bg: #0e0815;
  --input-border: #2f2240;
  --input-focus-bg: #0e0815;
  --panel-bg: radial-gradient(45% 50% at 50% 115%, rgba(249, 115, 22, 0.4), transparent 70%), radial-gradient(35% 40% at 78% 8%, rgba(254, 240, 138, 0.16), transparent 60%), linear-gradient(170deg, #2a1240 0%, #160b23 50%, #0b0612 100%);
  --panel-text: #f3e8ff;
  --panel-muted: #fdba74;
  --panel-chip: rgba(255, 255, 255, 0.05);
  --panel-chip-border: rgba(251, 146, 60, 0.3);
  --star: rgba(253, 186, 116, 0.8);
  --badge-bg: #1a1024;
  --badge-text: #a99bbd;
}
html.tema-halloween body { background-color: #0a0610 !important; }
html.tema-halloween .login-right .panel-top h1 { font-family: 'CT Creepster', 'Creepster', 'Poppins', cursive; font-weight: 400; letter-spacing: 2px; font-size: 2.6rem; }
html.tema-halloween .panel-top h1 span, html.tema-halloween .login-titles h1 span, html.tema-halloween .brand span, html.tema-halloween [class*="logo"] span { color: #f97316 !important; }
html.tema-halloween .btn-primary { background: linear-gradient(135deg, #fb923c, #f97316 45%, #c2410c) !important; box-shadow: 0 16px 30px -14px rgba(249, 115, 22, 0.8) !important; }
html.tema-halloween .planeta-anel::after { background: #f97316 !important; box-shadow: 0 0 14px #f97316 !important; }
html.tema-halloween .planeta-anel.r2::after { background: #a855f7 !important; box-shadow: 0 0 14px #a855f7 !important; }
html.tema-halloween .mascote-area .hw-chapeu { width: 96px; top: 18%; left: 50%; margin-left: -54px; }
html.tema-halloween .login-right .hw-hero-deco .abobora.a1 { right: 8%; bottom: 120px; width: 70px; }
html.tema-halloween .login-right .hw-hero-deco .abobora.a2 { right: auto; left: 10%; bottom: 128px; width: 50px; }
html.tema-halloween .login-right .hw-hero-deco .abobora.a3 { display: none; }

/* ==========================================================================
   MAIS ASSUSTADOR: teias extras, abóboras penduradas, olhos, relâmpago,
   sangue escorrendo e bordas escuras
   ========================================================================== */
/* bordas da tela mais escuras */
.hw-vinheta { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.42) 100%); }

/* teias pequenas presas nos cantos dos blocos */
.hw-teia-mini { position: absolute; pointer-events: none; z-index: 2; opacity: .45; }
.hw-teia-mini svg { width: 100%; height: 100%; display: block; }
.hw-teia-mini.se { top: 0; left: 0; }
.hw-teia-mini.sd { top: 0; right: 0; transform: scaleX(-1); }
.hw-teia-mini.ie { bottom: 0; left: 0; transform: scaleY(-1); }
.hw-teia-mini.id { bottom: 0; right: 0; transform: scale(-1, -1); }
.cosmic-hero, .stat-card-modern, .stat-card-new, .stat-card, .chart-card, .bd-stat-card, .gb-stat-card, .stat-card-vend { position: relative; }

/* abóboras penduradas balançando */
.hw-pendurada { position: absolute; top: 0; z-index: 2; pointer-events: none; transform-origin: top center; animation: hwBalanco 4.2s ease-in-out infinite; }
.hw-pendurada .corda { display: block; width: 1.5px; margin: 0 auto; background: linear-gradient(#5b4a6e, #2b2136); }
.hw-pendurada .abobora { display: block; margin-top: -2px; filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.6)); }
.hw-pendurada .abobora svg { width: 100%; height: auto; display: block; }
@keyframes hwBalanco { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* olhos vermelhos piscando no escuro */
.hw-olhos { position: absolute; display: flex; gap: 7px; pointer-events: none; z-index: 2; animation: hwPiscar 6s infinite; }
.hw-olhos span {
  width: 7px; height: 4px; border-radius: 50% 50% 45% 45%;
  background: #ef4444; box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.8);
}
@keyframes hwPiscar { 0%, 44%, 48%, 92%, 100% { transform: scaleY(1); opacity: 1; } 46%, 94% { transform: scaleY(0.1); } 70% { opacity: .2; } }

/* relâmpago */
.hw-raio { position: absolute; inset: 0; background: rgba(216, 200, 255, 0.0); pointer-events: none; }
.hw-raio.agora { animation: hwRaio 0.9s ease-out; }
@keyframes hwRaio {
  0% { background: rgba(216, 200, 255, 0); }
  6% { background: rgba(216, 200, 255, 0.28); }
  12% { background: rgba(216, 200, 255, 0.02); }
  20% { background: rgba(216, 200, 255, 0.18); }
  100% { background: rgba(216, 200, 255, 0); }
}
body.tema-halloween .cosmic-hero.hw-clarao .cosmic-hero-bg { filter: brightness(1.6) saturate(1.2); transition: filter .05s; }

/* sangue escorrendo do título do banner */
.hw-sangue { position: absolute; top: 0; left: 30%; width: 240px; height: 0; z-index: 2; pointer-events: none; }
.hw-sangue svg { position: absolute; top: 0; left: 0; width: 240px; height: 56px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.hw-gota { animation: hwGota 4.5s ease-in infinite; transform-box: fill-box; transform-origin: top; }
.hw-gota.g2 { animation-delay: -1.5s; animation-duration: 5.5s; }
.hw-gota.g3 { animation-delay: -3s; animation-duration: 6.2s; }
@keyframes hwGota { 0% { transform: scaleY(.25); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1.15); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hw-pendurada, .hw-olhos, .hw-gota, .hw-raio.agora { animation: none !important; }
}
@media (max-width: 760px) {
  .hw-pendurada.p3, .hw-olhos.o2 { display: none; }
}

@media (max-width: 760px) { .hw-sangue { left: 45%; width: 160px; } .hw-sangue svg { width: 160px; } }

/* sangue removido do tema */
.hw-sangue { display: none !important; }

/* ==========================================================================
   MODO CLARO DO HALLOWEEN
   O tema segue o botão Claro / Escuro / Sistema, igual ao padrão.
   No claro: fundo cor de pergaminho com pontinhos roxos, cartões brancos
   e detalhes em abóbora. Menu lateral e banner continuam "noite".
   ========================================================================== */
body.app-body.tema-halloween.theme-light {
  --hw-bg: #fbf6ef;
  --hw-panel: #ffffff;
  --hw-panel-2: #fdf8f3;
  --hw-borda: rgba(124, 58, 237, 0.14);
  --hw-borda-forte: rgba(124, 58, 237, 0.26);
  --hw-texto: #2a1538;
  --hw-mudo: #7a6890;
  --cz-soft: rgba(249, 115, 22, 0.08);
  --cz-shadow: 0 16px 34px -20px rgba(76, 29, 149, 0.28);
  --primary-light: rgba(249, 115, 22, 0.1);
  --sidebar-hover: rgba(249, 115, 22, 0.08);
}
body.app-body.tema-halloween.theme-light::before {
  background:
    radial-gradient(circle, rgba(124, 58, 237, 0.16) 1px, transparent 1.6px) 0 0 / 24px 24px,
    radial-gradient(60% 45% at 50% -10%, rgba(167, 139, 250, 0.22), transparent 70%),
    radial-gradient(45% 40% at 100% 105%, rgba(251, 146, 60, 0.2), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(196, 181, 253, 0.25), transparent 70%),
    #fbf6ef !important;
}
html:has(body.tema-halloween.theme-light) { background: #fbf6ef !important; }

/* cabeçalho claro */
body.app-body.tema-halloween.theme-light .top-header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(124, 58, 237, 0.14) !important;
  box-shadow: 0 14px 30px -20px rgba(76, 29, 149, 0.3) !important;
}
body.app-body.tema-halloween.theme-light :is(.page-title, .hdr-title, .top-header h1) { color: #2a1538 !important; }
body.app-body.tema-halloween.theme-light .hdr-crumb { color: #7a6890 !important; }
body.app-body.tema-halloween.theme-light .hdr-crumb b { color: #ea580c !important; }
body.app-body.tema-halloween.theme-light .hdr-clock { background: #fff7ed !important; border-color: rgba(249, 115, 22, 0.22) !important; color: #2a1538 !important; }
body.app-body.tema-halloween.theme-light .profile-btn { background: #ffffff !important; border-color: rgba(124, 58, 237, 0.18) !important; color: #2a1538 !important; }
body.app-body.tema-halloween.theme-light .profile-menu { background: #ffffff !important; border-color: rgba(124, 58, 237, 0.18) !important; color: #2a1538 !important; }
body.app-body.tema-halloween.theme-light .pm-tema { background: #ffffff !important; border-color: #eadff5 !important; color: #2a1538 !important; }
body.app-body.tema-halloween.theme-light .pm-tema.ativo { background: #fff7ed !important; color: #c2410c !important; }
body.app-body.tema-halloween.theme-light .pm-tema-tag { background: #ffedd5 !important; color: #c2410c !important; }
body.app-body.tema-halloween.theme-light .theme-mode-btn.active { background: #fff7ed !important; color: #c2410c !important; }

/* cartões e painéis brancos */
html body.app-body.tema-halloween.theme-light :is(.card, .panel, .content-card, .section-card, .table-container, .table-card, .filter-bar,
  .filter-section-modern, .dist-panel, .tab-content-section, .info-section, .stat-card-modern, .stat-card-new, .gb-stat-card,
  .stat-card, .stat-card-vend, .bd-stat-card, .chart-card, .bd-table-card, .kanban-column, .ucard, .dx-lote, .dx-kpi, .dx-sec, .dx-pag, .um-sec) {
  background:
    radial-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(160deg, #ffffff, #fdf8f3) !important;
  border-color: rgba(124, 58, 237, 0.14) !important;
  box-shadow: 0 14px 30px -22px rgba(76, 29, 149, 0.35) !important;
}
html body.app-body.tema-halloween.theme-light :is(.stat-card-modern, .stat-card-new, .gb-stat-card, .stat-card, .stat-card-vend, .bd-stat-card, .chart-card, .ucard):hover {
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 18px 36px -20px rgba(249, 115, 22, 0.45) !important;
}
html body.app-body.tema-halloween.theme-light :is(h1, h2, h3, h4, h5, .card-title, .section-title, .page-title, .ul-nome, .dx-lote-nome) { color: #2a1538; }
html body.app-body.tema-halloween.theme-light .cosmic-hero :is(h1, h2, h3) { color: inherit; }
html body.app-body.tema-halloween.theme-light thead th { color: #7a6890 !important; }
html body.app-body.tema-halloween.theme-light td { border-color: rgba(124, 58, 237, 0.08) !important; }
html body.app-body.tema-halloween.theme-light tbody tr:hover td { background-color: #fff7ed !important; }

/* campos claros (o filtro do banner continua escuro) */
html body.app-body.tema-halloween.theme-light :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background-color: #ffffff !important; border-color: #e4d8f0 !important; color: #2a1538 !important;
}
html body.app-body.tema-halloween.theme-light :is(input, textarea)::placeholder { color: #a596b8 !important; }
html body.app-body.tema-halloween.theme-light .cosmic-hero :is(input, select) { background-color: #0e0815 !important; border-color: #2f2240 !important; color: #f3e8ff !important; }
html body.app-body.tema-halloween.theme-light :is(.ul-email, .ucard-login, .dx-chip, .ul-chip.on, .ul-chip.admin) { color: #c2410c !important; }

/* modais: cabeçalho continua noite, corpo fica claro */
html body.tema-halloween.theme-light :is(.ms-box, .dx-box, .um-box, .cli-box, .ue-box) { background: #ffffff !important; border-color: rgba(124, 58, 237, 0.16) !important; color: #2a1538; }
html body.tema-halloween.theme-light :is(.ms-foot, .dx-foot, .um-foot) { background: #fdf8f3 !important; border-color: rgba(124, 58, 237, 0.12) !important; }

/* calendário claro */
body.tema-halloween.theme-light .flatpickr-calendar, body.tema-halloween.theme-light .dp-popup { background: #ffffff !important; border-color: rgba(124, 58, 237, 0.18) !important; }
body.tema-halloween.theme-light .flatpickr-day.inRange { color: #9a3412 !important; }
body.tema-halloween.theme-light .flatpickr-day:hover { background: #f3e8ff !important; color: #2a1538 !important; }

/* decorações no claro: teias e névoa em roxo, sem escurecer as bordas */
body.tema-halloween.theme-light .hw-teia svg,
body.tema-halloween.theme-light .hw-teia-mini svg { stroke: rgba(91, 33, 182, 0.35); }
body.tema-halloween.theme-light .cosmic-hero .hw-teia-mini svg { stroke: rgba(226, 214, 245, 0.55); }
body.tema-halloween.theme-light .hw-nevoa { opacity: .9; filter: blur(8px) hue-rotate(10deg) saturate(1.6); }
body.tema-halloween.theme-light .hw-vinheta { background: radial-gradient(ellipse at center, transparent 60%, rgba(76, 29, 149, 0.10) 100%); }
body.tema-halloween.theme-light .hw-fantasma { filter: drop-shadow(0 0 1px rgba(76, 29, 149, 0.7)) drop-shadow(0 6px 10px rgba(76, 29, 149, 0.25)); }
body.tema-halloween.theme-light .hw-aranha .fio { background: rgba(76, 29, 149, 0.35); }
body.tema-halloween.theme-light .hw-raio.agora { animation: none; }

/* login no modo claro: fundo claro, painel da direita continua noite */
html.tema-halloween[data-theme="light"] {
  --bg: #fbf6ef;
  --glow-1: rgba(167, 139, 250, 0.22);
  --glow-2: rgba(251, 146, 60, 0.16);
  --dot: rgba(124, 58, 237, 0.14);
  --card: #ffffff;
  --card-border: #eadff5;
  --text: #2a1538;
  --muted: #7a6890;
  --label: #4c3a60;
  --input-bg: #ffffff;
  --input-border: #e4d8f0;
  --input-focus-bg: #ffffff;
  --badge-bg: #f5effb;
  --badge-text: #7a6890;
}
html.tema-halloween[data-theme="light"] body { background-color: #fbf6ef !important; }

/* Fonte de Halloween em TODOS os títulos de banner (algumas telas têm uma
   regra "Poppins em tudo" muito forte, por isso o seletor reforçado) */
html body.app-body.tema-halloween.tema-halloween.tema-halloween .cosmic-hero.cosmic-hero :is(h1, h2),
html body.app-body.tema-halloween.tema-halloween.tema-halloween .cosmic-hero.cosmic-hero :is(h1, h2) * {
  font-family: 'CT Creepster', 'Creepster', 'Poppins', cursive !important;
  font-weight: 400 !important; letter-spacing: 1.5px !important;
}