:root {
  --halloween-orange: #e8892d;
  --halloween-gold: #d7a23a;
  --halloween-plum: #4a3458;
  --halloween-ink: #17324d;
}

@keyframes halloween-drift {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}

@keyframes halloween-fade {
  0%, 100% { opacity: .18; }
  50% { opacity: .42; }
}

@keyframes halloween-witch-flight {
  0% { transform: translateX(-70px) translateY(7px) rotate(-5deg); opacity: 0; }
  6% { opacity: 0; }
  10% { opacity: .42; }
  27% { transform: translateX(48vw) translateY(-5px) rotate(3deg); opacity: .42; }
  33% { transform: translateX(calc(100vw + 80px)) translateY(-7px) rotate(4deg); opacity: 0; }
  100% { transform: translateX(calc(100vw + 80px)) translateY(-7px) rotate(4deg); opacity: 0; }
}

/* Login: corporate base with discreet seasonal details. */
body.login-page {
  background:
    radial-gradient(circle at 8% 12%, rgba(232, 137, 45, .12), transparent 23%),
    radial-gradient(circle at 92% 86%, rgba(74, 52, 88, .1), transparent 25%),
    linear-gradient(135deg, #edf5f8 0%, #e2edf2 52%, #fafbfc 100%);
}

body.login-page:before {
  content: "🦇";
  position: fixed;
  right: 8vw;
  top: 8vh;
  z-index: 0;
  color: var(--halloween-plum);
  font-size: 35px;
  opacity: .2;
  pointer-events: none;
  animation: halloween-drift 6s ease-in-out infinite;
}

body.login-page:after {
  content: "🎃";
  position: fixed;
  left: 5vw;
  bottom: 5vh;
  z-index: 0;
  font-size: 31px;
  opacity: .22;
  pointer-events: none;
  animation: halloween-drift 7s ease-in-out infinite reverse;
}

body.login-page .login-card:before {
  content: "🦇  🦇";
  position: fixed;
  left: 44vw;
  top: 4vh;
  z-index: 3;
  color: #24142f;
  font-size: 22px;
  letter-spacing: 18px;
  opacity: .2;
  pointer-events: none;
  animation: halloween-drift 10s ease-in-out infinite;
}

.login-shell:before {
  content: "🕷️";
  position: fixed;
  right: 21vw;
  bottom: 11vh;
  z-index: 0;
  font-size: 24px;
  opacity: .18;
  pointer-events: none;
  animation: halloween-drift 5s ease-in-out infinite reverse;
}

.login-shell:after {
  content: "👻";
  position: fixed;
  left: 18vw;
  top: 10vh;
  z-index: 0;
  font-size: 28px;
  opacity: .14;
  pointer-events: none;
  animation: halloween-drift 9s ease-in-out infinite;
}

.login-card {
  border-color: rgba(23, 63, 99, .14);
  box-shadow: 0 28px 70px rgba(18, 59, 96, .18), 0 0 0 5px rgba(232, 137, 45, .06);
}

.login-brand {
  background: linear-gradient(145deg, #092b49, #173f63 60%, #147b88);
}

.login-brand:before {
  content: "🕸️";
  width: auto;
  height: auto;
  right: 30px;
  top: 22px;
  border: 0;
  font-size: 34px;
  opacity: .2;
  animation: halloween-fade 5s ease-in-out infinite;
}

.login-brand:after {
  content: "👻";
  width: auto;
  height: auto;
  right: 34px;
  bottom: 28px;
  border: 0;
  color: #fff;
  font-size: 36px;
  opacity: .17;
  box-shadow: none;
  animation: halloween-drift 8s ease-in-out infinite;
}

.login-kicker { color: #d5e982; }
.login-panel { position: relative; }
.login-logo-frame {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 34px;
}
.login-logo-frame:before {
  content: "🕸️";
  position: absolute;
  left: 20%;
  top: 7%;
  z-index: 3;
  font-size: 76px;
  line-height: 1;
  opacity: .42;
  filter: grayscale(1) brightness(.18) contrast(1.5);
  pointer-events: none;
  transform: rotate(-13deg);
  animation: halloween-fade 7s ease-in-out infinite;
}
.login-logo-frame:after {
  content: "🕸️";
  position: absolute;
  right: -13px;
  top: -14px;
  font-size: 24px;
  opacity: .32;
  pointer-events: none;
  animation: halloween-fade 6s ease-in-out infinite;
}
.login-logo-frame .login-logo { margin: 0; }
.login-submit { background: linear-gradient(135deg, #147b88, #173f63); }
.login-submit:hover { box-shadow: 0 16px 28px rgba(20, 123, 136, .28); }
.login-field input:focus { border-color: #147b88; box-shadow: 0 0 0 4px rgba(20, 123, 136, .12); }
.login-links a { color: #147b88; }
.contractor-link { border-color: #d8c39e; background: #fffaf1; color: #173f63; }
.contractor-link:hover { background: #fff4df; border-color: var(--halloween-orange); }
.login-panel:after { content: "🕸️"; position: absolute; right: 22px; bottom: 18px; font-size: 24px; opacity: .13; animation: halloween-fade 6s ease-in-out infinite; }

/* Application shell: preserve the existing logo contrast and add only accents. */
body.halloween-app,
body.halloween-app #contenedor {
  background: linear-gradient(180deg, #fff 0%, #f7fafb 58%, #f6f1f8 100%);
}

body.halloween-app #cabezote {
  position: relative;
  background: #fff;
  border-bottom: 3px solid rgba(232, 137, 45, .72);
  box-shadow: 0 6px 20px rgba(23, 63, 99, .12);
}

body.halloween-app .halloween-witch {
  position: absolute;
  left: 0;
  top: 7px;
  z-index: 4;
  display: block;
  width: 148px;
  height: 72px;
  object-fit: contain;
  object-position: center;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  animation: halloween-witch-flight 60s ease-in-out infinite;
}

body.halloween-app #cabezote:before {
  content: "🦇";
  position: absolute;
  right: 18%;
  top: 9px;
  z-index: 0;
  font-size: 23px;
  opacity: .2;
  pointer-events: none;
  animation: halloween-drift 6s ease-in-out infinite;
}

body.halloween-app #cabezote:after {
  content: "🎃  Halloween";
  position: absolute;
  right: 14px;
  bottom: 5px;
  color: #a96b25;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .7;
  pointer-events: none;
}

body.halloween-app #halloween-egg {
  position: absolute;
  right: 29%;
  bottom: 7px;
  z-index: 5;
  border: 0;
  padding: 2px 5px;
  background: transparent;
  color: #9a682d;
  font-size: 18px;
  line-height: 1;
  opacity: .45;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}

body.halloween-app #halloween-egg:hover,
body.halloween-app #halloween-egg:focus-visible {
  opacity: .9;
  transform: rotate(-12deg) scale(1.15);
  outline: 2px solid rgba(232, 137, 45, .4);
  outline-offset: 3px;
}

body.halloween-app .halloween-surprise #halloween-egg,
body.halloween-app.halloween-surprise #halloween-egg {
  animation: halloween-drift 1.2s ease-in-out infinite;
}

body.halloween-app.halloween-surprise #cabezote:before {
  content: "🦇   🦇   🦇";
  right: 39%;
  opacity: .38;
  letter-spacing: 8px;
}

body.halloween-app.halloween-surprise #contenido:before {
  content: "👻";
  position: fixed;
  right: 7vw;
  bottom: 14vh;
  z-index: 4;
  font-size: 30px;
  opacity: .22;
  pointer-events: none;
  animation: halloween-drift 4s ease-in-out infinite;
}

body.halloween-app .header-title:after {
  content: "🕸️";
  position: absolute;
  right: 8%;
  top: 16px;
  font-size: 20px;
  opacity: .15;
  pointer-events: none;
  animation: halloween-fade 6s ease-in-out infinite;
}

body.halloween-app #pie {
  position: relative;
}

body.halloween-app #pie:before {
  content: "🎃";
  position: absolute;
  left: 18px;
  top: 7px;
  font-size: 17px;
  opacity: .32;
  animation: halloween-drift 7s ease-in-out infinite;
}

body.halloween-app #pie:after {
  content: "👻";
  position: absolute;
  right: 18px;
  top: 7px;
  font-size: 16px;
  opacity: .28;
  animation: halloween-drift 8s ease-in-out infinite reverse;
}

body.halloween-app .tareas {
  border-color: rgba(232, 137, 45, .38);
  box-shadow: 0 18px 45px rgba(23, 63, 99, .18);
}

body.halloween-app #contenedor:before {
  content: "🕷️";
  position: fixed;
  left: 9px;
  top: 48%;
  z-index: 3;
  font-size: 19px;
  opacity: .2;
  pointer-events: none;
  animation: halloween-drift 8s ease-in-out infinite reverse;
}

@media (max-width: 760px) {
  body.login-page:before { right: 4vw; top: 4vh; font-size: 27px; }
  body.login-page:after { left: 4vw; bottom: 3vh; font-size: 25px; }
  body.halloween-app #cabezote:after { right: 8px; font-size: 8px; }
  body.halloween-app #halloween-egg { right: 22%; }
  body.halloween-app .halloween-witch { width: 106px; height: 54px; animation-duration: 60s; }
  .login-logo-frame:before { left: 16%; top: 8%; font-size: 58px; }
  .login-shell:before { right: 10vw; bottom: 8vh; }
  .login-shell:after { left: 8vw; top: 7vh; }
  .login-logo-frame { margin-bottom: 24px; }
}