/* ============================================================================
   Login · ABAKU
   NAMESPACE: login-box (legacy del HTML público) + tokens --abk-*
   Identidad: violeta profundo + cyan acento (matching abaku.mx)
   ============================================================================ */

/* ===== Layout base ===== */
body {
  margin: 0;
  padding: 0;
  font-family: var(--abk-font-family);
  background: #0d0820;            /* deep purple-black, matching site --bg dark */
  color: #ebe5ff;                  /* lavanda muy clara */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ★ GALAXY login — starfield real ★ */
html[data-abk-variant="galaxy"] body {
  background:
    radial-gradient(1.5px 1.5px at 8% 12%,  rgba(255,255,255,1),   transparent),
    radial-gradient(1px 1px     at 22% 8%,  rgba(196,181,253,.85), transparent),
    radial-gradient(2px 2px     at 35% 22%, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px     at 48% 6%,  rgba(255,255,255,.70), transparent),
    radial-gradient(1.5px 1.5px at 62% 18%, rgba(103,232,249,.90), transparent),
    radial-gradient(2px 2px     at 78% 12%, rgba(240,171,252,.95), transparent),
    radial-gradient(1px 1px     at 92% 25%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 12% 38%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px     at 28% 55%, rgba(196,181,253,.95), transparent),
    radial-gradient(1px 1px     at 42% 68%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.5px 1.5px at 88% 58%, rgba(240,171,252,.85), transparent),
    radial-gradient(2px 2px     at 72% 78%, rgba(103,232,249,.95), transparent),
    radial-gradient(1px 1px     at 18% 82%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 8% 95%,  rgba(196,181,253,.80), transparent),
    radial-gradient(2px 2px     at 95% 90%, rgba(255,255,255,1),   transparent),
    linear-gradient(135deg, #020010 0%, #0d0820 30%, #1e1b4b 70%, #050020 100%);
  background-attachment: fixed;
}

/* ===== Glow radiales ambiente (matching abaku.mx grad-hero) ===== */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,.45), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.20), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ===== Contenedor principal ===== */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ===== Caja del login (glassmorphism + gradient border) ===== */
.login-box {
  position: relative;
  z-index: 2;
  background: rgba(26,18,50,.55);                /* surface noir traslúcido */
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(168,85,247,.22);
  border-radius: 22px;
  padding: 44px 32px 36px;
  width: 360px;
  max-width: 92vw;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 8px 30px rgba(109,40,217,.30),
    0 0 0 1px rgba(255,255,255,.04) inset;
  text-align: center;
  transition:
    box-shadow .4s cubic-bezier(.29,1.01,1,1.01),
    transform .22s cubic-bezier(.29,1.01,1,1.01),
    border-color .25s ease;
  overflow: visible;
}

/* Borde con gradient interior (violet → cyan) */
.login-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(168,85,247,.55),
    rgba(34,211,238,.30) 50%,
    rgba(168,85,247,.10) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .80;
  transition: opacity .4s;
}

/* Glow inferior animado */
.login-box::after {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  transform: translate(-50%,-30%);
  width: 130%;
  height: 80px;
  background: radial-gradient(ellipse at center,
    rgba(168,85,247,.30) 0%,
    rgba(34,211,238,.15) 40%,
    transparent 100%);
  filter: blur(14px);
  z-index: -1;
  opacity: .85;
  pointer-events: none;
  transition: opacity .5s;
}

.login-box:hover,
.login-box:focus-within {
  box-shadow:
    0 36px 100px rgba(0,0,0,.65),
    0 14px 40px rgba(109,40,217,.45),
    0 0 0 1px rgba(255,255,255,.08) inset;
  transform: translateY(-4px) scale(1.012);
}
.login-box:hover::before,
.login-box:focus-within::before { opacity: 1; }
.login-box:hover::after,
.login-box:focus-within::after  { opacity: 1; }

/* ===== Logo (wrapper + 2 variantes) ===== */
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
}
.logo {
  width: 80%;
  max-width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(168,85,247,.30));
  transition: filter .3s;
}
.login-box:hover .logo {
  filter: drop-shadow(0 4px 24px rgba(168,85,247,.50));
}

/* En modo "fondo color" (default deep purple) → muestra logo principal */
.login-brand .login-logo-dark  { display: block; }
.login-brand .login-logo-light { display: none; }

/* En modo "fondo blanco" → muestra logo white-friendly */
body.abk-login-bg-light .login-brand .login-logo-dark  { display: none; }
body.abk-login-bg-light .login-brand .login-logo-light { display: block; }

/* Si NO hay logo white-friendly subido, el wrapper lleva --needs-frame.
   Aplicamos un fondo oscuro automático SOLO en modo "fondo blanco" para
   proteger el logo principal (que está pensado para fondos oscuros). */
body.abk-login-bg-light .login-brand--needs-frame {
  background: #0a0a0a;
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .20);
}
body.abk-login-bg-light .login-brand--needs-frame .logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25));
  margin: 0;
}

/* ===== Texto bienvenida ===== */
.welcome-text {
  color: rgba(235,229,255,.78);
  font-size: 14.5px;
  margin-bottom: 18px;
  letter-spacing: .01em;
  position: relative;
  z-index: 1;
}

/* ===== Título ===== */
.login-box h2 {
  color: #ffffff;
  margin: 0 0 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 22px;
  position: relative;
  z-index: 1;
}

/* ===== Inputs ===== */
.login-box input {
  width: 100%;
  padding: 13px 15px;
  margin: 11px 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(168,85,247,.28);
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .25s, background .3s, box-shadow .22s;
  font-weight: 500;
  font-family: inherit;
  position: relative;
  z-index: 1;
}
.login-box input::placeholder {
  color: rgba(235,229,255,.45);
  font-weight: 400;
  letter-spacing: .02em;
}
.login-box input:focus {
  border-color: rgba(168,85,247,.65);
  background: rgba(168,85,247,.10);
  box-shadow:
    0 0 0 3px rgba(168,85,247,.20),
    0 0 18px rgba(168,85,247,.25);
}

/* ===== Botón Entrar (matching abaku.mx grad-1: purple → violet → indigo) ===== */
.login-box button {
  width: 100%;
  padding: 14px;
  margin-top: 14px;
  background: linear-gradient(135deg, #a855f7 0%, #6d28d9 60%, #4338ca 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 8px 30px rgba(109,40,217,.45),
    0 0 0 1px rgba(255,255,255,.08) inset;
  transition:
    transform .2s cubic-bezier(.27,1.01,1,1.01),
    box-shadow .21s cubic-bezier(.27,1.01,1,1.01);
  z-index: 1;
}

/* Shine sweep on hover */
.login-box button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.20) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.login-box button > * { position: relative; z-index: 1; }

.login-box button:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 12px 40px rgba(168,85,247,.55),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 40px rgba(34,211,238,.20);              /* el cyan accent toca aquí */
}
.login-box button:hover::before { transform: translateX(100%); }
.login-box button:active { transform: translateY(0) scale(.99); }

/* ===== Link "olvidaste contraseña" ===== */
.forgot-password {
  display: block;
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(196,181,253,.85);
  text-decoration: none;
  transition: color .23s, text-shadow .23s;
  position: relative;
  z-index: 1;
}
.forgot-password:hover {
  color: #67e8f9;                                /* cyan-300 — el accent pop */
  text-shadow: 0 0 12px rgba(34,211,238,.50);
}

/* ===== Mensajes de error (vienen del JS como inline style) ===== */
.login-box form > div[style*="color: #ffdedf"] {
  margin-top: 10px;
  border: 1px solid rgba(239,68,68,.35);
  background: linear-gradient(90deg, rgba(239,68,68,.12), rgba(239,68,68,.20));
  color: #fecaca;
  border-radius: 10px;
  font-size: 14.2px;
  padding: 9px 12px;
  letter-spacing: .01em;
  transition: opacity .32s;
  position: relative;
  z-index: 1;
}

/* ===== Animación de entrada (anti-flash) ===== */
.container,
.login-box {
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.is-preload .container,
.is-preload .login-box {
  opacity: 0;
  transform: translateY(12px) scale(.98);
}

@media (prefers-reduced-motion: reduce) {
  .container,
  .login-box,
  .login-box button::before { transition: none !important; animation: none !important; }
  .is-preload .container,
  .is-preload .login-box { opacity: 1; transform: none; }
}

/* ============================================================================
   ★ SPLIT MODE — pantalla dividida 60/40 (TODO EL MOLE)
   Izquierda 60%: starfield multi-capa tiritando + cometa + orbital + marca
   Derecha 40%:   el form ES el modal — sin caja flotante extra
   ============================================================================ */
body.abk-login-bg-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: stretch;
  padding: 0;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  /* Cosmos sólido para el lado izquierdo */
  background:
    radial-gradient(ellipse 50% 45% at 25% 35%, rgba(34,211,238,.22), transparent 65%),
    radial-gradient(ellipse 55% 55% at 75% 65%, rgba(168,85,247,.28), transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 90%, rgba(244,114,182,.15), transparent 65%),
    linear-gradient(135deg, #020010 0%, #050020 25%, #1e1b4b 50%, #312e81 75%, #1e3a8a 100%);
}
body.abk-login-bg-split::before { display: none; }

/* ───── COSMOS WRAPPER — FIXED al viewport, debajo de los 2 paneles.
   Sin overflow del body: el cosmos cubre el viewport completo y el container
   con backdrop-filter SÍ ve las estrellas a través del cristal. */
.abk-login-cosmos {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ───── PANEL DERECHO (login) — gradient con ALPHA VARIABLE ─────
   Gradient con transparencia distinta en cada stop (más transparente al
   medio, más opaco arriba/abajo) — las estrellas del cosmos detrás se ven
   naturalmente a través sin necesidad de backdrop-filter. */
body.abk-login-bg-split .container {
  grid-column: 2;
  position: relative;
  overflow: hidden;
  padding: 0;
  z-index: 2;
  background: linear-gradient(180deg, #0d0820ad 0%, #15102e45 50%, #1e1b4bf0 100%);
}
/* Glow violet en la esquina derecha */
body.abk-login-bg-split .container::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 500px at 100% 50%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(400px 300px at 0% 0%, rgba(34,211,238,.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* ESTRELLAS SIMULADAS encima del container — combinadas con el gradient
   alpha del bg dan el efecto cósmico que el user busca. */
.abk-glass-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    /* Estrellas grandes brillantes (8) — gradient con halo más rico */
    radial-gradient(circle 4px at 12% 8%,  rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 25%, rgba(255,255,255,.18) 55%, transparent 80%),
    radial-gradient(circle 4px at 32% 25%, rgba(196,181,253,1) 0%, rgba(196,181,253,.55) 25%, rgba(196,181,253,.18) 55%, transparent 80%),
    radial-gradient(circle 4px at 58% 12%, rgba(103,232,249,1) 0%, rgba(103,232,249,.55) 25%, rgba(103,232,249,.18) 55%, transparent 80%),
    radial-gradient(circle 4px at 72% 38%, rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 25%, rgba(255,255,255,.18) 55%, transparent 80%),
    radial-gradient(circle 4px at 22% 55%, rgba(240,171,252,1) 0%, rgba(240,171,252,.55) 25%, rgba(240,171,252,.18) 55%, transparent 80%),
    radial-gradient(circle 4px at 88% 65%, rgba(196,181,253,1) 0%, rgba(196,181,253,.55) 25%, rgba(196,181,253,.18) 55%, transparent 80%),
    radial-gradient(circle 4px at 45% 82%, rgba(103,232,249,1) 0%, rgba(103,232,249,.55) 25%, rgba(103,232,249,.18) 55%, transparent 80%),
    radial-gradient(circle 4px at 78% 92%, rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 25%, rgba(255,255,255,.18) 55%, transparent 80%),
    /* Polvo cósmico (16) — texturizado con halo suave (no más puntos planos) */
    radial-gradient(circle 2.5px at 5% 22%,  rgba(255,255,255,.95) 0%, rgba(255,255,255,.50) 25%, rgba(255,255,255,.15) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 18% 38%, rgba(196,181,253,.90) 0%, rgba(196,181,253,.45) 25%, rgba(196,181,253,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 26% 18%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.40) 25%, rgba(255,255,255,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 42% 45%, rgba(103,232,249,.95) 0%, rgba(103,232,249,.45) 25%, rgba(103,232,249,.15) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 52% 32%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.40) 25%, rgba(255,255,255,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 64% 62%, rgba(240,171,252,.95) 0%, rgba(240,171,252,.45) 25%, rgba(240,171,252,.15) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 76% 18%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.45) 25%, rgba(255,255,255,.15) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 82% 48%, rgba(196,181,253,.90) 0%, rgba(196,181,253,.45) 25%, rgba(196,181,253,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 92% 32%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.40) 25%, rgba(255,255,255,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 8%  72%, rgba(103,232,249,.95) 0%, rgba(103,232,249,.45) 25%, rgba(103,232,249,.15) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 28% 88%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.40) 25%, rgba(255,255,255,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 38% 70%, rgba(240,171,252,.95) 0%, rgba(240,171,252,.45) 25%, rgba(240,171,252,.15) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 56% 78%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.45) 25%, rgba(255,255,255,.15) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 68% 88%, rgba(196,181,253,.90) 0%, rgba(196,181,253,.45) 25%, rgba(196,181,253,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 88% 80%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.40) 25%, rgba(255,255,255,.12) 55%, transparent 80%),
    radial-gradient(circle 2.5px at 95% 95%, rgba(103,232,249,.95) 0%, rgba(103,232,249,.45) 25%, rgba(103,232,249,.15) 55%, transparent 80%);
  animation: art-twinkle-3 2.6s ease-in-out infinite alternate;
}
/* 2 estrellas grandes extra brillantes con pulso fuerte dentro del modal */
.abk-glass-stars::before,
.abk-glass-stars::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 12px #ffffff,
    0 0 22px rgba(196,181,253,.95),
    0 0 36px rgba(34,211,238,.65);
  animation: art-twinkle-big 4s ease-in-out infinite;
}
.abk-glass-stars::before { top: 18%; left: 65%; animation-delay: -1s; }
.abk-glass-stars::after  { top: 72%; left: 28%; animation-delay: -3s; }
/* Glow interno violet en el panel right (sobre el glass, no filtrado) */
body.abk-login-bg-split .container::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 500px at 100% 50%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(400px 300px at 0% 0%, rgba(34,211,238,.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Línea decorativa vertical entre los 2 panels */
body.abk-login-bg-split .container::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(196,181,253,.45) 25%,
    rgba(34,211,238,.65) 50%,
    rgba(244,114,182,.45) 75%,
    transparent 100%);
  filter: blur(.5px);
  z-index: 3;
  box-shadow: 0 0 14px rgba(34,211,238,.40);
}
body.abk-login-bg-split .container > * { position: relative; z-index: 2; }

/* En split: el .login-box deja de ser un "card flotante" — se integra en el
   panel derecho. Sin background propio, sin border, sin shadow. */
body.abk-login-bg-split .login-box {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 60px 56px !important;
  width: 100% !important;
  max-width: 440px !important;
}
body.abk-login-bg-split .login-box::before,
body.abk-login-bg-split .login-box::after { display: none !important; }
body.abk-login-bg-split .login-box:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* En split: inputs más grandes y limpios (estilo SaaS pro) */
body.abk-login-bg-split .login-box input {
  padding: 16px 18px;
  font-size: 16px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(196,181,253,.20);
  border-radius: 10px;
}
body.abk-login-bg-split .login-box input:focus {
  background: rgba(168,85,247,.08);
  border-color: rgba(196,181,253,.55);
  box-shadow: 0 0 0 3px rgba(168,85,247,.18), 0 0 20px rgba(34,211,238,.18);
}

/* Botón más grande en split */
body.abk-login-bg-split .login-box button {
  padding: 16px;
  font-size: 16px;
  margin-top: 18px;
  border-radius: 10px;
}

/* Logo: en split sin margen extra, alineado izquierda */
body.abk-login-bg-split .login-brand { justify-content: flex-start; margin-bottom: 24px; }
body.abk-login-bg-split .logo { max-width: 160px; margin: 0; }

/* Título alineado izquierda en split */
body.abk-login-bg-split .login-box h2 {
  text-align: left;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
}
body.abk-login-bg-split .welcome-text {
  text-align: left;
  font-size: 14.5px;
  margin-bottom: 28px;
}
body.abk-login-bg-split .forgot-password { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════════════
   ───── PANEL IZQUIERDO (arte) — sobre el cosmos del body ─────
   El background cósmico ahora vive en el body (para que el glass right lo
   pueda mostrar a través). El art solo lleva el contenido + ring + jewel.
   ═══════════════════════════════════════════════════════════════════════════ */
.abk-login-art {
  grid-column: 1;
  position: relative;
  overflow: visible;       /* permite que las estrellas fixed se vean */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  z-index: 2;              /* sobre las estrellas fixed (z:0) */
}
/* El ring + content del art quedan en su z-index local sobre las estrellas */
.abk-login-art > * { z-index: 2; }

/* ───── STARFIELD MULTI-CAPA — 3 capas tiritando con velocidades distintas ─────
   Viven en .abk-login-cosmos (que cubre todo el viewport). El panel right
   glass las muestra a través del backdrop blur. */
.abk-login-art-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Capa 1 — estrellas chiquitas, rápidas (1.8s) */
.abk-login-art-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(.8px .8px at 5%  10%, #ffffff, transparent),
    radial-gradient(1px 1px     at 14% 6%,  rgba(196,181,253,.95), transparent),
    radial-gradient(.8px .8px at 23% 22%, #ffffff, transparent),
    radial-gradient(1px 1px     at 32% 14%, rgba(255,255,255,.85), transparent),
    radial-gradient(.8px .8px at 41% 30%, rgba(103,232,249,.90), transparent),
    radial-gradient(1px 1px     at 52% 8%,  #ffffff, transparent),
    radial-gradient(.8px .8px at 61% 26%, rgba(240,171,252,.90), transparent),
    radial-gradient(1px 1px     at 70% 18%, rgba(196,181,253,.85), transparent),
    radial-gradient(.8px .8px at 79% 34%, #ffffff, transparent),
    radial-gradient(1px 1px     at 88% 12%, rgba(103,232,249,.85), transparent),
    radial-gradient(.8px .8px at 97% 28%, #ffffff, transparent),
    radial-gradient(1px 1px     at 8%  46%, rgba(255,255,255,.80), transparent),
    radial-gradient(.8px .8px at 18% 60%, rgba(196,181,253,.85), transparent),
    radial-gradient(1px 1px     at 28% 70%, #ffffff, transparent),
    radial-gradient(.8px .8px at 38% 82%, rgba(240,171,252,.85), transparent),
    radial-gradient(1px 1px     at 48% 56%, rgba(255,255,255,.90), transparent),
    radial-gradient(.8px .8px at 58% 72%, #ffffff, transparent),
    radial-gradient(1px 1px     at 68% 84%, rgba(103,232,249,.90), transparent),
    radial-gradient(.8px .8px at 78% 60%, rgba(196,181,253,.80), transparent),
    radial-gradient(1px 1px     at 88% 76%, #ffffff, transparent),
    radial-gradient(.8px .8px at 98% 92%, rgba(255,255,255,.85), transparent);
  animation: art-twinkle-1 1.8s ease-in-out infinite alternate;
}
/* Capa 2 — estrellas medianas, intermedias (3.2s) */
.abk-login-art-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #ffffff, transparent),
    radial-gradient(2px 2px     at 28% 8%,  rgba(196,181,253,.95), transparent),
    radial-gradient(1.5px 1.5px at 44% 24%, rgba(103,232,249,1), transparent),
    radial-gradient(2px 2px     at 60% 14%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 76% 30%, rgba(240,171,252,.95), transparent),
    radial-gradient(2px 2px     at 92% 20%, rgba(196,181,253,.90), transparent),
    radial-gradient(1.5px 1.5px at 4%  42%, rgba(103,232,249,.95), transparent),
    radial-gradient(2px 2px     at 20% 54%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 36% 66%, rgba(196,181,253,.90), transparent),
    radial-gradient(2px 2px     at 52% 78%, rgba(240,171,252,1), transparent),
    radial-gradient(1.5px 1.5px at 68% 90%, #ffffff, transparent),
    radial-gradient(2px 2px     at 84% 80%, rgba(103,232,249,.95), transparent),
    radial-gradient(1.5px 1.5px at 96% 94%, rgba(196,181,253,.90), transparent);
  animation: art-twinkle-2 3.2s ease-in-out infinite alternate -.8s;
}
@keyframes art-twinkle-1 {
  0%   { opacity: .35; transform: scale(.95); }
  100% { opacity: 1.00; transform: scale(1.05); }
}
@keyframes art-twinkle-2 {
  0%   { opacity: .50; }
  100% { opacity: 1.00; }
}

/* Capa 3 — estrellas GRANDES con glow que pulsan fuerte
   Distribuidas a lo ancho del viewport. Distintos delays para movimiento
   asincrónico que da vida real al cosmos. */
.abk-login-art-stars-big {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.abk-login-art-stars-big::before,
.abk-login-art-stars-big::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 14px #ffffff,
    0 0 28px rgba(196,181,253,.95),
    0 0 44px rgba(34,211,238,.75);
  animation: art-twinkle-big 4s ease-in-out infinite;
}
.abk-login-art-stars-big::before { top: 12%; left: 8%;  animation-delay: 0s; }
.abk-login-art-stars-big::after  { top: 78%; left: 88%; animation-delay: -2s; }
@keyframes art-twinkle-big {
  0%, 100% {
    opacity: .50;
    transform: scale(.75);
    box-shadow: 0 0 10px #ffffff, 0 0 18px rgba(196,181,253,.65), 0 0 26px rgba(34,211,238,.45);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
    box-shadow: 0 0 18px #ffffff, 0 0 36px rgba(196,181,253,1), 0 0 60px rgba(34,211,238,.95);
  }
}

/* ───── CAPA DRIFT — partículas de polvo cósmico que se mueven sutilmente ─────
   Estrellas adicionales con micro-drift + estrellas grandes extras (4 más)
   distribuidas en el viewport para más actividad visual. */
.abk-login-art-stars-drift {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* 6 estrellas grandes adicionales — más brillantes y grandes para
       que se vean a través del backdrop blur del panel right */
    radial-gradient(3.5px 3.5px at 38% 28%, rgba(255,255,255,1), rgba(255,255,255,.5) 30%, transparent 60%),
    radial-gradient(3.5px 3.5px at 65% 42%, rgba(196,181,253,1), rgba(196,181,253,.5) 30%, transparent 60%),
    radial-gradient(3.5px 3.5px at 25% 65%, rgba(103,232,249,1), rgba(103,232,249,.5) 30%, transparent 60%),
    radial-gradient(3.5px 3.5px at 82% 78%, rgba(240,171,252,1), rgba(240,171,252,.5) 30%, transparent 60%),
    radial-gradient(3px 3px     at 72% 22%, rgba(255,255,255,1), rgba(255,255,255,.5) 30%, transparent 60%),
    radial-gradient(3px 3px     at 18% 38%, rgba(196,181,253,1), rgba(196,181,253,.5) 30%, transparent 60%),
    /* Polvo cósmico — partículas chiquitas */
    radial-gradient(1px 1px at 7% 28%,  rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 16% 48%, rgba(196,181,253,.85), transparent),
    radial-gradient(1px 1px at 31% 12%, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 44% 76%, rgba(103,232,249,.95), transparent),
    radial-gradient(1px 1px at 56% 62%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 71% 8%,  rgba(240,171,252,.95), transparent),
    radial-gradient(1px 1px at 86% 32%, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 92% 68%, rgba(196,181,253,.85), transparent),
    radial-gradient(1px 1px at 12% 84%, rgba(255,255,255,.90), transparent),
    radial-gradient(1px 1px at 28% 36%, rgba(103,232,249,.90), transparent),
    radial-gradient(1px 1px at 48% 22%, rgba(255,255,255,.80), transparent),
    radial-gradient(1px 1px at 76% 90%, rgba(240,171,252,.95), transparent);
  animation: art-drift 14s linear infinite, art-twinkle-3 2.4s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes art-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-6px, -3px); }
  100% { transform: translate(0, 0); }
}
@keyframes art-twinkle-3 {
  0%   { opacity: .55; }
  100% { opacity: 1.00; }
}

/* ───── ORBS blur grandes (estáticos, ambient) ───── */
.abk-login-art-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .55;
}
.abk-login-art-orb--violet {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  top: -12%; left: 12%;
}
.abk-login-art-orb--cyan {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
  bottom: -10%; right: 10%;
  opacity: .42;
}
.abk-login-art-orb--pink {
  display: block;
  width: 240px; height: 240px;
  background: radial-gradient(circle, #ec4899 0%, transparent 70%);
  top: 45%; left: 65%;
  opacity: .25;
}

/* ───── 1 ANILLO ORBITAL sutil + ESTRELLA JEWEL ─────
   El anillo rota lento (90s — casi el doble de lento que antes), llevando
   al jewel como una estrella en órbita. La estrella jewel es la "cereza
   sobre la cereza": punto cyan + doble glow + rays cruzados + respiración. */
.abk-login-art-ring--1 {
  position: absolute;
  width: 580px; height: 580px;
  border-radius: 50%;
  border: 1px solid rgba(196,181,253,.22);
  top: 50%;
  left: 50%;
  box-shadow:
    0 0 30px rgba(34,211,238,.12) inset,
    0 0 24px rgba(168,85,247,.10);
  pointer-events: none;
  animation: art-ring-orbit 90s linear infinite;
}
@keyframes art-ring-orbit {
  from { transform: translate(-50%,-50%) rotate(-20deg); }
  to   { transform: translate(-50%,-50%) rotate(340deg); }
}

/* JEWEL: punto luminoso central — "estrella" cyan con glow profundo */
.abk-login-art-ring--1::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    #ffffff 0%,
    #a5f3fc 35%,
    #67e8f9 60%,
    transparent 80%);
  box-shadow:
    0 0 10px #ffffff,
    0 0 18px #67e8f9,
    0 0 32px rgba(34,211,238,.85),
    0 0 50px rgba(34,211,238,.50),
    0 0 70px rgba(168,85,247,.30);
  animation: art-jewel-pulse 3.5s ease-in-out infinite;
  z-index: 2;
}

/* RAYS: 4 rayos cruzados (cardinal + diagonal) saliendo del jewel */
.abk-login-art-ring--1::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    /* Ray vertical */
    linear-gradient(0deg,
      transparent 40%,
      rgba(103,232,249,.65) 49%,
      rgba(255,255,255,.95) 50%,
      rgba(103,232,249,.65) 51%,
      transparent 60%),
    /* Ray horizontal */
    linear-gradient(90deg,
      transparent 40%,
      rgba(103,232,249,.55) 49%,
      rgba(255,255,255,.85) 50%,
      rgba(103,232,249,.55) 51%,
      transparent 60%),
    /* Ray diagonal 45° */
    linear-gradient(45deg,
      transparent 44%,
      rgba(103,232,249,.35) 49.5%,
      rgba(196,181,253,.55) 50%,
      rgba(103,232,249,.35) 50.5%,
      transparent 56%),
    /* Ray diagonal -45° */
    linear-gradient(-45deg,
      transparent 44%,
      rgba(103,232,249,.35) 49.5%,
      rgba(196,181,253,.55) 50%,
      rgba(103,232,249,.35) 50.5%,
      transparent 56%);
  /* Mascara radial para que los rays se desvanezcan al alejarse */
  -webkit-mask: radial-gradient(circle, #000 6px, transparent 60%);
          mask: radial-gradient(circle, #000 6px, transparent 60%);
  filter: blur(.4px);
  animation: art-jewel-rays 4s ease-in-out infinite;
  z-index: 1;
}
@keyframes art-jewel-pulse {
  0%, 100% {
    transform: translateX(-50%) scale(.92);
    box-shadow:
      0 0 8px #ffffff,
      0 0 14px #67e8f9,
      0 0 24px rgba(34,211,238,.70),
      0 0 40px rgba(34,211,238,.40),
      0 0 60px rgba(168,85,247,.22);
  }
  50% {
    transform: translateX(-50%) scale(1.18);
    box-shadow:
      0 0 14px #ffffff,
      0 0 24px #67e8f9,
      0 0 42px rgba(34,211,238,1),
      0 0 64px rgba(34,211,238,.60),
      0 0 90px rgba(168,85,247,.40);
  }
}
@keyframes art-jewel-rays {
  0%, 100% { opacity: .55; transform: translateX(-50%) rotate(0deg); }
  50%      { opacity: 1.00; transform: translateX(-50%) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .abk-login-art-ring--1,
  .abk-login-art-ring--1::before,
  .abk-login-art-ring--1::after { animation: none !important; }
}

/* Grid mesh (textura HUD sutil) */
.abk-login-art-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196,181,253,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,181,253,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  opacity: .55;
}

/* ───── CONTENIDO CENTRAL — brand + tagline ───── */
.abk-login-art-content {
  position: relative;
  z-index: 5;
  text-align: left;
  color: #ebe5ff;
  max-width: 520px;
}
.abk-login-art-glyph {
  display: inline-block;
  font-size: 96px;
  line-height: 1;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #67e8f9 0%, #c4b5fd 50%, #f472b6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(34,211,238,.65));
  animation: art-glyph-breathe 4s ease-in-out infinite;
}
@keyframes art-glyph-breathe {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 26px rgba(34,211,238,.55));
  }
  50% {
    transform: scale(1.07) rotate(2deg);
    filter: drop-shadow(0 0 40px rgba(168,85,247,.75));
  }
}
.abk-login-art-title {
  margin: 0 0 14px;
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.abk-login-art-tagline {
  margin: 0;
  font-size: 17px;
  color: rgba(235,229,255,.85);
  letter-spacing: .2px;
  line-height: 1.55;
  max-width: 440px;
}
.abk-login-art-content::after {
  content: '';
  display: block;
  margin-top: 26px;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #67e8f9 0%, #c4b5fd 50%, #f472b6 100%);
  box-shadow: 0 0 16px rgba(34,211,238,.50), 0 0 28px rgba(244,114,182,.30);
}

@media (prefers-reduced-motion: reduce) {
  .abk-login-art-stars::before,
  .abk-login-art-stars::after,
  .abk-login-art-stars-big::before,
  .abk-login-art-stars-big::after,
  .abk-login-art-stars-drift,
  .abk-login-art-glyph { animation: none !important; }
}

/* ============================================================================
   ★ VARIANTES DE COSMIC BLUE EN EL LOGIN CLÁSICO
   Las variantes (aurora/nebula/ember/pearl/galaxy) tiñen el AMBIENTE del
   login: glows del body::before, orbs, botón Entrar, input focus y link
   "olvidaste contraseña". El MODAL en sí (deep purple glassmorphism) se
   queda igual — solo cambian los matices del acento.

   Cada variante aplica tanto en fondo COLOR (default deep purple) como en
   fondo BLANCO (body.abk-login-bg-light). Las variantes NO se aplican al
   modo SPLIT — ahí ya hay arte propio (el cosmos a la izquierda).
   ============================================================================ */

/* ─── AURORA (pink) — login clásico ─────────────────────────────────────── */
html[data-abk-variant="aurora"] body:not(.abk-login-bg-split)::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(236,72,153,.40), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(244,114,182,.22), transparent 60%);
}
html[data-abk-variant="aurora"] body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(236,72,153,.18), transparent 60%) !important;
}
html[data-abk-variant="aurora"] .abk-orb {
  background: radial-gradient(closest-side, rgba(236,72,153,.55), transparent 70%) !important;
}
html[data-abk-variant="aurora"] .login-box button {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 55%, #6d28d9 100%);
  box-shadow:
    0 8px 30px rgba(236,72,153,.45),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
html[data-abk-variant="aurora"] .login-box button:hover {
  box-shadow:
    0 12px 40px rgba(236,72,153,.55),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 40px rgba(244,114,182,.30);
}
html[data-abk-variant="aurora"] .login-box input:focus {
  border-color: rgba(236,72,153,.65);
  background: rgba(236,72,153,.10);
  box-shadow:
    0 0 0 3px rgba(236,72,153,.20),
    0 0 18px rgba(236,72,153,.25);
}
html[data-abk-variant="aurora"] .forgot-password:hover {
  color: #f9a8d4;
  text-shadow: 0 0 12px rgba(236,72,153,.50);
}
html[data-abk-variant="aurora"] .login-box::before {
  background: linear-gradient(135deg,
    rgba(236,72,153,.55),
    rgba(168,85,247,.30) 50%,
    rgba(236,72,153,.10) 100%);
}
html[data-abk-variant="aurora"] .login-box::after {
  background: radial-gradient(ellipse at center,
    rgba(236,72,153,.35) 0%,
    rgba(168,85,247,.15) 40%,
    transparent 100%);
}

/* ─── NEBULA (cyan-neon) — login clásico ────────────────────────────────── */
html[data-abk-variant="nebula"] body:not(.abk-login-bg-split)::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(6,182,212,.45), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.30), transparent 60%);
}
html[data-abk-variant="nebula"] body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(6,182,212,.20), transparent 60%) !important;
}
html[data-abk-variant="nebula"] .abk-orb {
  background: radial-gradient(closest-side, rgba(34,211,238,.65), transparent 70%) !important;
}
html[data-abk-variant="nebula"] .login-box button {
  background: linear-gradient(135deg, #22d3ee 0%, #6d28d9 55%, #312e81 100%);
  box-shadow:
    0 8px 30px rgba(6,182,212,.45),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
html[data-abk-variant="nebula"] .login-box button:hover {
  box-shadow:
    0 12px 40px rgba(34,211,238,.55),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 50px rgba(6,182,212,.40);
}
html[data-abk-variant="nebula"] .login-box input:focus {
  border-color: rgba(34,211,238,.75);
  background: rgba(34,211,238,.08);
  box-shadow:
    0 0 0 3px rgba(34,211,238,.25),
    0 0 22px rgba(6,182,212,.30);
}
html[data-abk-variant="nebula"] .forgot-password:hover {
  color: #67e8f9;
  text-shadow: 0 0 14px rgba(34,211,238,.65);
}
html[data-abk-variant="nebula"] .login-box::before {
  background: linear-gradient(135deg,
    rgba(34,211,238,.60),
    rgba(168,85,247,.25) 50%,
    rgba(6,182,212,.20) 100%);
}
html[data-abk-variant="nebula"] .login-box::after {
  background: radial-gradient(ellipse at center,
    rgba(6,182,212,.35) 0%,
    rgba(168,85,247,.15) 40%,
    transparent 100%);
}

/* ─── CANARIO (id: ember) — minimalista: amarillo + negro + blanco ──────── */
html[data-abk-variant="ember"] body:not(.abk-login-bg-split)::before {
  /* Glows muy contained — el mood es minimal, no hay bombas de color */
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(250,204,21,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(0,0,0,.15), transparent 60%);
}
html[data-abk-variant="ember"] body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(250,204,21,.14), transparent 60%) !important;
}
html[data-abk-variant="ember"] .abk-orb {
  /* Orbs amarillos pero con baja opacidad — sutiles */
  background: radial-gradient(closest-side, rgba(250,204,21,.55), transparent 70%) !important;
  opacity: .55;
}
html[data-abk-variant="ember"] .login-box button {
  /* Botón AMARILLO sólido con texto NEGRO — máximo contraste editorial */
  background: #facc15;
  color: #0a0a0a;
  font-weight: 800;
  letter-spacing: .4px;
  box-shadow:
    0 6px 18px rgba(250,204,21,.40),
    0 0 0 1px #0a0a0a inset;
  text-shadow: none;
}
html[data-abk-variant="ember"] .login-box button:hover {
  background: #fde047;
  box-shadow:
    0 10px 26px rgba(250,204,21,.55),
    0 0 0 1px #0a0a0a inset;
}
html[data-abk-variant="ember"] .login-box input:focus {
  border-color: #facc15;
  background: rgba(250,204,21,.06);
  box-shadow:
    0 0 0 3px rgba(250,204,21,.35),
    0 0 0 1px #0a0a0a;
}
html[data-abk-variant="ember"] .forgot-password:hover {
  color: #facc15;
  text-shadow: none;
}
html[data-abk-variant="ember"] .login-box::before {
  /* Borde amarillo→negro sólido (no gradient violet) */
  background: linear-gradient(135deg,
    rgba(250,204,21,.65),
    rgba(0,0,0,.40) 100%);
}
html[data-abk-variant="ember"] .login-box::after {
  background: radial-gradient(ellipse at center,
    rgba(250,204,21,.30) 0%,
    rgba(0,0,0,.10) 50%,
    transparent 100%);
}

/* ─── PEARL (ultra-light) — login clásico ───────────────────────────────────
   En fondo COLOR: deep purple base con glows MUY contained (sin pop saturado)
   En fondo LIGHT: lavanda casi blanco con glows ínfimos — mood "minimal pro".
   El modal sigue deep purple pero con un halo más limpio. ───────────────── */
html[data-abk-variant="pearl"] body:not(.abk-login-bg-split)::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.10), transparent 60%);
}
html[data-abk-variant="pearl"] body.abk-login-bg-light {
  background: #ffffff !important;
}
html[data-abk-variant="pearl"] body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(67,56,202,.06), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.04), transparent 60%) !important;
}
html[data-abk-variant="pearl"] .abk-orb {
  opacity: .35 !important;
}
html[data-abk-variant="pearl"] .login-box {
  border-color: rgba(168,85,247,.30);
  box-shadow:
    0 30px 80px rgba(15,23,42,.50),
    0 8px 30px rgba(67,56,202,.25),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
html[data-abk-variant="pearl"] body.abk-login-bg-light .login-box {
  box-shadow:
    0 30px 80px rgba(15,23,42,.18),
    0 8px 30px rgba(67,56,202,.18),
    0 0 0 1px rgba(168,85,247,.22) inset !important;
}
html[data-abk-variant="pearl"] .login-box button {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 50%, #312e81 100%);
  box-shadow:
    0 8px 24px rgba(67,56,202,.30),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
html[data-abk-variant="pearl"] .login-box button:hover {
  box-shadow:
    0 12px 30px rgba(67,56,202,.40),
    0 0 0 1px rgba(255,255,255,.14) inset;
}

/* ─── GALAXY (cosmos atrevido) — login completo ★ ─────────────────────────
   La regla `html[data-abk-variant="galaxy"] body` (línea 23) ya pinta el
   starfield de fondo. Aquí aplicamos la firma cromática completa:
   magenta + cyan + violet con un toque pink (los 4 hues de la nebulosa). */
html[data-abk-variant="galaxy"] body:not(.abk-login-bg-split)::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(192,38,211,.55), transparent 60%),
    radial-gradient(900px  500px at 10% 30%, rgba(34,211,238,.30),  transparent 60%),
    radial-gradient(800px  450px at 50% 90%, rgba(244,114,182,.25), transparent 60%);
}
/* Light bg variant — más sutil pero conserva los 3 hues */
html[data-abk-variant="galaxy"] body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(192,38,211,.20), transparent 60%),
    radial-gradient(900px  500px at 10% 30%, rgba(34,211,238,.15),  transparent 60%) !important;
}
/* Orbs cromáticos — magenta + cyan alternando */
html[data-abk-variant="galaxy"] .abk-orb {
  background: radial-gradient(closest-side, rgba(192,38,211,.65), transparent 70%) !important;
}
html[data-abk-variant="galaxy"] .abk-orbs:nth-of-type(2n) .abk-orb {
  background: radial-gradient(closest-side, rgba(34,211,238,.55), transparent 70%) !important;
}
/* Modal frame — gradient prismático cyan+magenta+pink */
html[data-abk-variant="galaxy"] .login-box::before {
  background: linear-gradient(135deg,
    rgba(192, 38,211,.65),
    rgba(34, 211,238,.45) 50%,
    rgba(240,171,252,.35) 100%);
  opacity: 1;
}
/* Modal halo posterior — nebulosa galáctica detrás del card */
html[data-abk-variant="galaxy"] .login-box::after {
  background: radial-gradient(ellipse at center,
    rgba(192, 38,211,.40) 0%,
    rgba(34, 211,238,.20) 35%,
    rgba(168, 85,247,.10) 65%,
    transparent 100%);
}
/* Botón ATREVIDO — gradient prismático magenta → violet → cyan con triple glow */
html[data-abk-variant="galaxy"] .login-box button {
  background: linear-gradient(135deg, #c026d3 0%, #a855f7 35%, #6d28d9 65%, #06b6d4 100%);
  box-shadow:
    0 8px 30px rgba(192,38,211,.50),
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 32px rgba(34,211,238,.25);
}
html[data-abk-variant="galaxy"] .login-box button:hover {
  background: linear-gradient(135deg, #d946ef 0%, #c026d3 30%, #a855f7 60%, #22d3ee 100%);
  box-shadow:
    0 14px 44px rgba(192,38,211,.65),
    0 0 0 1px rgba(255,255,255,.20) inset,
    0 0 60px rgba(34,211,238,.45);
}
/* Inputs focus — magenta border + cyan glow ring */
html[data-abk-variant="galaxy"] .login-box input:focus {
  border-color: rgba(192,38,211,.75);
  background: rgba(192,38,211,.10);
  box-shadow:
    0 0 0 3px rgba(192,38,211,.25),
    0 0 22px rgba(34,211,238,.30);
}
html[data-abk-variant="galaxy"] .forgot-password:hover {
  color: #f0abfc;
  text-shadow: 0 0 14px rgba(192,38,211,.65);
}

/* En modo split, NO aplicar las variantes al ambiente — el split tiene
   su propio cosmos. Pero sí afectar el botón y los acentos del modal. */
html[data-abk-variant="aurora"] body.abk-login-bg-split .login-box button {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 60%, #6d28d9 100%);
}
html[data-abk-variant="nebula"] body.abk-login-bg-split .login-box button {
  background: linear-gradient(135deg, #22d3ee 0%, #6d28d9 55%, #312e81 100%);
}
html[data-abk-variant="ember"] body.abk-login-bg-split .login-box button {
  background: #facc15;
  color: #0a0a0a;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 6px 18px rgba(250,204,21,.40), 0 0 0 1px #0a0a0a inset;
}
html[data-abk-variant="pearl"] body.abk-login-bg-split .login-box button {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 50%, #312e81 100%);
}
html[data-abk-variant="galaxy"] body.abk-login-bg-split .login-box button {
  background: linear-gradient(135deg, #c026d3 0%, #a855f7 35%, #6d28d9 65%, #06b6d4 100%);
  box-shadow:
    0 8px 30px rgba(192,38,211,.55),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 38px rgba(34,211,238,.30);
}

/* Responsive — mobile colapsa */
@media (max-width: 880px) {
  body.abk-login-bg-split {
    grid-template-columns: 1fr;
    grid-template-rows: 280px 1fr;
  }
  .abk-login-art {
    grid-column: 1; grid-row: 1;
    padding: 28px;
    text-align: center;
  }
  .abk-login-art-content { text-align: center; }
  .abk-login-art-content::after { margin: 22px auto 0; }
  body.abk-login-bg-split .container { grid-column: 1; grid-row: 2; }
  body.abk-login-bg-split .container::before { display: none; }
  body.abk-login-bg-split .login-box { padding: 36px 28px !important; }
  .abk-login-art-glyph   { font-size: 60px; margin-bottom: 12px; }
  .abk-login-art-title   { font-size: 28px; }
  .abk-login-art-tagline { font-size: 13.5px; }
  .abk-login-art-orb     { opacity: .35; }
  .abk-login-art-ring--1 { width: 320px; height: 320px; }
}

/* ============================================================================
   ★ VARIANTES DEL TEMA EN EL LOGIN — REDISEÑO DRAMÁTICO
   El user pidió que las variantes se SIENTAN distintas en el login. El
   diseño actual (deep purple base) corresponde al estilo "Original".
   Cada otra variante reemplaza el body bg, los orbs, los glows y el ambient
   completo del login — tanto en clásico (color/light) como en split.
   ============================================================================ */

/* ─── AURORA — pink dominante (sunset-like) ──────────────────────────────── */
html[data-abk-variant="aurora"] body:not(.abk-login-bg-light):not(.abk-login-bg-split) {
  background:
    radial-gradient(ellipse 80% 60% at 75% 25%, rgba(244,114,182,.55), transparent 65%),
    radial-gradient(ellipse 70% 60% at 20% 75%, rgba(168,85,247,.45), transparent 65%),
    linear-gradient(135deg, #18021a 0%, #2d0a4e 30%, #4a044e 60%, #831843 100%);
}
html[data-abk-variant="aurora"] body.abk-login-bg-light {
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(244,114,182,.18), transparent 65%),
    linear-gradient(135deg, #fef7ff 0%, #fce7f3 60%, #fbcfe8 100%) !important;
}
html[data-abk-variant="aurora"] .abk-orb {
  background: radial-gradient(closest-side, rgba(244,114,182,.70), transparent 70%) !important;
  box-shadow: 0 0 60px rgba(244,114,182,.40);
}
html[data-abk-variant="aurora"] body.abk-login-bg-split {
  background:
    radial-gradient(ellipse 50% 45% at 25% 35%, rgba(244,114,182,.32), transparent 65%),
    radial-gradient(ellipse 55% 55% at 75% 65%, rgba(192,38,211,.28), transparent 65%),
    linear-gradient(135deg, #18021a 0%, #2d0a4e 25%, #4a044e 50%, #831843 75%, #500724 100%);
}
html[data-abk-variant="aurora"] .abk-login-art-glyph {
  background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 50%, #db2777 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(244,114,182,.65));
}

/* ─── NEBULA — cyan eléctrico ────────────────────────────────────────────── */
html[data-abk-variant="nebula"] body:not(.abk-login-bg-light):not(.abk-login-bg-split) {
  background:
    radial-gradient(ellipse 80% 60% at 75% 25%, rgba(34,211,238,.55), transparent 65%),
    radial-gradient(ellipse 70% 60% at 20% 75%, rgba(67,56,202,.45), transparent 65%),
    linear-gradient(135deg, #020617 0%, #0c1a3d 30%, #0e3a4e 60%, #155e75 100%);
}
html[data-abk-variant="nebula"] body.abk-login-bg-light {
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(34,211,238,.18), transparent 65%),
    linear-gradient(135deg, #f0fdff 0%, #cffafe 60%, #a5f3fc 100%) !important;
}
html[data-abk-variant="nebula"] .abk-orb {
  background: radial-gradient(closest-side, rgba(34,211,238,.75), transparent 70%) !important;
  box-shadow: 0 0 60px rgba(34,211,238,.50);
}
html[data-abk-variant="nebula"] body.abk-login-bg-split {
  background:
    radial-gradient(ellipse 50% 45% at 25% 35%, rgba(34,211,238,.40), transparent 65%),
    radial-gradient(ellipse 55% 55% at 75% 65%, rgba(67,56,202,.30), transparent 65%),
    linear-gradient(135deg, #020617 0%, #0c1a3d 25%, #155e75 50%, #0891b2 75%, #1e1b4b 100%);
}
html[data-abk-variant="nebula"] .abk-login-art-glyph {
  background: linear-gradient(135deg, #a5f3fc 0%, #22d3ee 50%, #06b6d4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(34,211,238,.85));
}

/* ─── CANARIO (id: ember) — body bg minimalista (negro o blanco) ──────── */
html[data-abk-variant="ember"] body:not(.abk-login-bg-light):not(.abk-login-bg-split) {
  /* COLOR mode: NEGRO puro con un kiss amarillo en la esquina */
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(250,204,21,.18), transparent 60%),
    #0a0a0a;
}
html[data-abk-variant="ember"] body.abk-login-bg-light {
  /* LIGHT mode: BLANCO puro con kiss amarillo */
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(250,204,21,.16), transparent 65%),
    #ffffff !important;
}
html[data-abk-variant="ember"] body.abk-login-bg-split {
  /* SPLIT: cosmos negro/amarillo en el lado izquierdo */
  background:
    radial-gradient(ellipse 55% 50% at 25% 35%, rgba(250,204,21,.22), transparent 65%),
    radial-gradient(ellipse 50% 55% at 75% 70%, rgba(0,0,0,.40), transparent 65%),
    linear-gradient(135deg, #000000 0%, #0a0a0a 30%, #1a1a1a 70%, #0a0a0a 100%);
}
html[data-abk-variant="ember"] .abk-login-art-glyph {
  /* Glyph: amarillo sólido (sin gradient) — minimalista */
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #facc15;
  filter: drop-shadow(0 0 24px rgba(250,204,21,.65));
}
html[data-abk-variant="ember"] .abk-login-art-title,
html[data-abk-variant="ember"] .abk-login-art-tagline {
  color: #ffffff;
}

/* ─── PEARL — luz total ─────────────────────────────────────────────────────
   Pearl en login se vuelve una experiencia ULTRA LIGHT: bg blanco lavanda
   con glows muy contained. El modal sigue deep purple para que destaque. */
html[data-abk-variant="pearl"] body:not(.abk-login-bg-split) {
  background: #fcfcfd;
}
html[data-abk-variant="pearl"] body:not(.abk-login-bg-split)::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(67,56,202,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(34,211,238,.06), transparent 60%);
}
html[data-abk-variant="pearl"] body.abk-login-bg-light {
  background: #ffffff !important;
}
html[data-abk-variant="pearl"] body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(67,56,202,.06), transparent 60%) !important;
}
html[data-abk-variant="pearl"] .abk-orb {
  opacity: .30 !important;
}
/* ─── GALAXY — cosmos atrevido en sus 3 modos de bg ─────────────────────────
   Aunque el body ya tiene starfield desde línea 23, aquí refinamos por
   modo (color/light/split) para que cada uno se sienta distinto. */
html[data-abk-variant="galaxy"] body.abk-login-bg-light {
  /* LIGHT mode: nebulosa CLARA con shimmer iridiscente magenta+cyan+pink
     sobre base pearl. Las estrellas ya vienen del rule global pero le
     pegamos un overlay suave para suavizarlas. */
  background:
    radial-gradient(ellipse 60% 50% at 20% 25%, rgba(192,38,211,.18), transparent 65%),
    radial-gradient(ellipse 55% 50% at 80% 75%, rgba(34,211,238,.15),  transparent 65%),
    radial-gradient(ellipse 50% 45% at 50% 50%, rgba(244,114,182,.12), transparent 65%),
    linear-gradient(135deg, #fdf4ff 0%, #fae8ff 25%, #f0f9ff 55%, #faf5ff 80%, #fdf4ff 100%) !important;
  background-attachment: fixed;
}
html[data-abk-variant="galaxy"] body.abk-login-bg-light::before {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(192,38,211,.20), transparent 60%),
    radial-gradient(900px  500px at 10% 30%, rgba(34,211,238,.15),  transparent 60%) !important;
}
html[data-abk-variant="galaxy"] body.abk-login-bg-split {
  /* SPLIT mode: cosmos dramático en ambos lados. Magenta + cyan dueto. */
  background:
    radial-gradient(ellipse 50% 45% at 25% 30%, rgba(192,38,211,.55), transparent 60%),
    radial-gradient(ellipse 55% 55% at 75% 70%, rgba(34,211,238,.35),  transparent 60%),
    radial-gradient(ellipse 45% 50% at 50% 90%, rgba(244,114,182,.30), transparent 60%),
    linear-gradient(135deg, #020010 0%, #1e0840 30%, #4c1d95 60%, #1e1b4b 85%, #050020 100%) !important;
}
html[data-abk-variant="galaxy"] .abk-login-art-glyph {
  /* Glyph atrevido — gradient prismático magenta + cyan + pink */
  background: linear-gradient(135deg, #f0abfc 0%, #c026d3 35%, #a855f7 65%, #67e8f9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(192,38,211,.75)) drop-shadow(0 0 18px rgba(34,211,238,.45));
}
html[data-abk-variant="galaxy"] .abk-login-art-title {
  background: linear-gradient(120deg, #ffffff 0%, #f0abfc 50%, #67e8f9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 8px rgba(192,38,211,.45));
}
html[data-abk-variant="galaxy"] .abk-login-art-tagline {
  color: #f0abfc;
  text-shadow: 0 1px 6px rgba(192,38,211,.50);
}

html[data-abk-variant="pearl"] body.abk-login-bg-split {
  background:
    radial-gradient(ellipse 50% 45% at 25% 35%, rgba(67,56,202,.18), transparent 65%),
    radial-gradient(ellipse 55% 55% at 75% 65%, rgba(192,38,211,.10), transparent 65%),
    linear-gradient(135deg, #ffffff 0%, #f3f0ff 35%, #ede9fe 70%, #ddd6fe 100%);
}
html[data-abk-variant="pearl"] body.abk-login-bg-split .abk-login-art-title,
html[data-abk-variant="pearl"] body.abk-login-bg-split .abk-login-art-tagline {
  color: #1e1b4b;
}
html[data-abk-variant="pearl"] body.abk-login-bg-split .abk-login-art-glyph {
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 50%, #06b6d4 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(67, 56, 202, .35));
}

/* ─── GALAXY — el bg starfield ya está definido arriba (línea 23).
   Solo refinamos el split de Galaxy con cosmos extra denso. ─── */
html[data-abk-variant="galaxy"] body.abk-login-bg-split {
  background:
    radial-gradient(ellipse 50% 45% at 25% 35%, rgba(34,211,238,.30), transparent 60%),
    radial-gradient(ellipse 55% 55% at 75% 65%, rgba(168,85,247,.40), transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 90%, rgba(244,114,182,.20), transparent 60%),
    linear-gradient(135deg, #000004 0%, #050020 25%, #1e1b4b 50%, #312e81 75%, #050020 100%);
}
html[data-abk-variant="galaxy"] .abk-login-art-glyph {
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 30%, #67e8f9 60%, #f472b6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(196,181,253,.85));
}

/* ============================================================================
   ★ MODOS DEL LOGIN — afectan DISEÑO, no solo colores ★
   ----------------------------------------------------------------------------
   Body classes que pueden estar activas:
     (sin clase)          → Modo completo: full identity
     .abk-sober-variant   → Modo sobrio: colores del tema, sin decoraciones
     .abk-sober           → Modo minimalista: solo el form, todo plano
   ============================================================================ */

/* ── MODO SOBRIO — quita decoraciones animadas, conserva colores ── */
body.abk-sober-variant .abk-orbs,
body.abk-sober-variant .abk-orb,
body.abk-sober-variant .abk-login-art-stars,
body.abk-sober-variant .abk-login-art-stars-big,
body.abk-sober-variant .abk-login-art-stars-drift,
body.abk-sober-variant .abk-login-art-grid,
body.abk-sober-variant .abk-login-art-ring,
body.abk-sober-variant .abk-glass-stars {
  display: none !important;
}
/* Orbs estáticos del split: muy sutiles, sin animación */
body.abk-sober-variant .abk-login-art-orb {
  filter: blur(40px);
  opacity: .15;
  animation: none !important;
}
/* Card: sin glassmorphism, fondo más sólido */
body.abk-sober-variant .login-box,
body.abk-sober-variant .container .login-box {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Glyph y title del art-side: planos, sin gradient text ni glow */
body.abk-sober-variant .abk-login-art-glyph {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--abk-primary-soft, #c4b5fd);
  filter: none !important;
}
body.abk-sober-variant .abk-login-art-title {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: #ffffff;
  filter: none !important;
}

/* ── MODO MINIMALISTA — solo el form de login centrado, todo lo demás fuera ── */
body.abk-sober .abk-orbs,
body.abk-sober .abk-orb,
body.abk-sober .abk-login-cosmos,
body.abk-sober .abk-login-art,
body.abk-sober .abk-login-art-stars,
body.abk-sober .abk-login-art-stars-big,
body.abk-sober .abk-login-art-stars-drift,
body.abk-sober .abk-login-art-orb,
body.abk-sober .abk-login-art-ring,
body.abk-sober .abk-login-art-grid,
body.abk-sober .abk-login-art-content,
body.abk-sober .abk-login-art-glyph,
body.abk-sober .abk-login-art-title,
body.abk-sober .abk-login-art-tagline,
body.abk-sober .abk-glass-stars {
  display: none !important;
}

/* Layout split → colapsa a clásico (sin panel art) en minimal */
body.abk-sober.abk-login-bg-split {
  /* Ignora el grid 60/40 y centra el form como en login clásico */
  background: var(--abk-bg-shell, #f8fafc) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.abk-sober .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: transparent !important;
}

/* Card simple: fondo sólido (sin glass), border discreto */
body.abk-sober .login-box {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

/* En modo minimalista los headings van en indigo plano (no gradient) */
body.abk-sober .login-box h2,
body.abk-sober .welcome-text {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}
body.abk-sober .login-box h2 { color: #1e1b4b; }
body.abk-sober .welcome-text { color: #475569; }

/* Botón en minimal: sólido, sin gradient ni glow */
body.abk-sober .login-box button[type="submit"] {
  background: #1e1b4b !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
}
body.abk-sober .login-box button[type="submit"]:hover {
  background: #312e81 !important;
}

/* ============================================================================
   ★ LOGIN BG CUSTOM — color override o foto override ★
   Cuando el admin elige un color HEX o sube una foto desde la pestaña
   Background del módulo Temas, body recibe la clase + inline style.
   Aquí solo refinamos: para foto, oscurecemos el body::before (dim) para
   que el modal sea legible. Para color HEX no hace falta extra.
   ============================================================================ */
body.abk-login-bg-custom-photo::before {
  /* Dim layer encima de la foto para legibilidad del modal */
  background: rgba(13, 8, 32, .55) !important;
  opacity: 1 !important;
}
body.abk-login-bg-custom-color::before {
  /* Cuando se eligió color HEX, suavizamos el ::before para no recolorear */
  opacity: .35 !important;
  mix-blend-mode: overlay;
}