/* Temas de login festivos (Halloween / Navidad) + aviso */

.login-aviso {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(560px, calc(100% - 24px));
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(15, 12, 10, 0.88);
  color: #ffe8c8;
  border: 1px solid rgba(255, 140, 40, 0.55);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(8px);
}
.login-aviso strong { color: #ffb15a; }

/* —— Fondos —— */
.login-screen--halloween {
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(20, 10, 6, 0.35), rgba(8, 6, 12, 0.72)),
    url("/img/temas/halloween-bg.jpg") center / cover no-repeat fixed;
  padding: 28px 16px 40px;
}
.login-screen--navidad {
  background:
    radial-gradient(ellipse 65% 55% at 50% 40%, rgba(8, 18, 14, 0.25), rgba(4, 10, 12, 0.55)),
    url("/img/temas/navidad-bg.jpg") center / cover no-repeat fixed;
  padding: 28px 16px 40px;
}

/* —— Halloween: tarjeta blanca + calavera (solo Halloween) —— */
.login-dialog--halloween {
  border: 0;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 140, 40, 0.22),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(255, 110, 0, 0.18);
}
.login-dialog--halloween .login-dialog__brand-panel {
  gap: 14px;
}
.login-dialog__brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-dialog--halloween .login-dialog__logo {
  width: min(100%, 260px);
  flex: 1 1 auto;
}
.login-dialog__skull {
  flex: 0 0 auto;
  width: 78px;
  height: auto;
  max-height: 96px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}
.login-dialog--halloween .login-dialog__tagline {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.login-dialog--halloween .login-dialog__titular {
  font-size: 12px;
  color: #6b6b6b;
}
.login-dialog--halloween .input {
  background: #eef3fb;
  border-color: #d5dde8;
}
.login-dialog--halloween .input:focus {
  border-color: #c0561a;
  box-shadow: 0 0 0 3px rgba(192, 86, 26, 0.18);
}
.btn-halloween,
.login-dialog--halloween .btn-halloween {
  background: #c0561a !important;
  border-color: #c0561a !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px rgba(192, 86, 26, 0.35);
}
.btn-halloween:hover,
.login-dialog--halloween .btn-halloween:hover {
  filter: brightness(1.06);
}

@media (max-width: 720px) {
  .login-dialog__brand-row {
    justify-content: center;
  }
  .login-dialog__skull {
    width: 56px;
    max-height: 72px;
  }
}

/* —— Navidad A: tarjeta blanca 2 columnas, solo logo —— */
.login-dialog--navidad {
  border: 0;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(180, 40, 50, 0.22),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(40, 120, 70, 0.18);
}
.login-dialog--navidad .login-dialog__brand-panel {
  gap: 14px;
}
.login-dialog--navidad .login-dialog__logo {
  width: min(100%, 300px);
}
.login-dialog--navidad .login-dialog__tagline {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.login-dialog--navidad .login-dialog__titular {
  font-size: 12px;
  color: #6b6b6b;
}
.login-dialog--navidad .input {
  background: #eef3fb;
  border-color: #d5dde8;
}
.login-dialog--navidad .input:focus {
  border-color: #b3262e;
  box-shadow: 0 0 0 3px rgba(179, 38, 46, 0.18);
}
.btn-navidad,
.login-dialog--navidad .btn-navidad {
  background: #b3262e !important;
  border-color: #b3262e !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px rgba(140, 30, 40, 0.35);
}
.btn-navidad:hover,
.login-dialog--navidad .btn-navidad:hover {
  filter: brightness(1.06);
}