:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ---- Variables de tema: la lámpara (#lampToggle) alterna la clase
     body.lamp-off (apagada/oculta) o body.lamp-night (encendida pero con
     el contraste oscuro, cuando el sistema ya estaba en modo noche al
     cerrar sesión), que sobreescriben estas mismas variables más abajo. ---- */
  --login-body-bg: radial-gradient(1100px 620px at 12% -8%, #dbe8ff 0%, transparent 60%),
                    radial-gradient(900px 560px at 100% 100%, #eaf1ff 0%, transparent 55%),
                    #f3f6fb;
  --login-card-bg: #ffffff;
  --login-form-bg: #eef1f5;
  --login-shadow-light: #ffffff;
  --login-shadow-dark: #c7cdd6;
  --login-text-title: #111827;
  --login-text-body: #6b7280;
  --login-text-label: #374151;
  --login-text-muted: #9ca3af;
  --login-visual-grad: linear-gradient(160deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
}

body.lamp-off,
body.lamp-night {
  color-scheme: dark;
  --login-body-bg: radial-gradient(1100px 620px at 12% -8%, #1c2333 0%, transparent 60%),
                    radial-gradient(900px 560px at 100% 100%, #161b28 0%, transparent 55%),
                    #0d1017;
  --login-card-bg: #1a1d23;
  --login-form-bg: #20242b;
  --login-shadow-light: #2b3140;
  --login-shadow-dark: #0a0c10;
  --login-text-title: #f3f4f6;
  --login-text-body: #9ca3af;
  --login-text-label: #d1d5db;
  --login-text-muted: #6b7280;
  --login-visual-grad: linear-gradient(160deg, #1e3a8a 0%, #172554 55%, #0f172a 100%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--login-body-bg);
  color: var(--login-text-body);
  transition: background .5s ease, color .5s ease;
}

a {
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
}
a:hover {
  color: #1d4ed8;
}

#root {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* ---- Compuerta de la lámpara: el formulario permanece oculto hasta que
   se prende la luz (clic en la lámpara), y se ilumina como si la luz
   viajara desde la lámpara (arriba a la derecha) hacia el formulario. ---- */
.login-form-component-root {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.94) translateY(18px);
  pointer-events: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
body:not(.lamp-off) .login-form-component-root {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body::before {
  content: "";
  position: fixed;
  top: -12%;
  right: -8%;
  width: 75vw;
  height: 75vw;
  max-width: 950px;
  max-height: 950px;
  background: radial-gradient(circle, rgba(253, 230, 138, .30) 0%, rgba(253, 230, 138, .10) 42%, transparent 70%);
  opacity: 0;
  transition: opacity .9s ease .1s;
  pointer-events: none;
  z-index: 1;
}
body:not(.lamp-off)::before {
  opacity: 1;
}

/* ---- tarjeta partida en dos: panel del personaje + panel del formulario,
   inspirada en el layout "Huddle" que Jose mandó de referencia (Code & Chill) ---- */
.login-card {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--login-card-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 24px 60px -12px rgba(16, 24, 40, .22);
  animation: loginCardEnter .6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes loginCardEnter {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .login-card {
    animation: none;
  }
}

.login-card-visual {
  background: var(--login-visual-grad);
  color: #fff;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}

.login-brand {
  align-self: flex-start;
}
.login-brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.rive-wrapper {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
/* El propio display:flex de arriba le ganaba al atributo [hidden] que pone
   login-extras.js (misma prioridad de cascada, y "hidden" no trae !important)
   — por eso Aira y Personajes se veían los dos a la vez. Con el atributo en
   el selector, esta regla es más específica y sí lo oculta de verdad. */
.rive-wrapper[hidden],
.login-characters[hidden] {
  display: none;
}
.rive-container {
  width: 100%;
  height: 280px;
  min-width: 0;
  display: block;
}

/* ---- Personajes ilustrados (alternativa a aira, estilo "Huddle" que Jose
   mandó de referencia): cierran los ojos y voltean la cabeza para no ver la
   contraseña mientras se escribe, y saltan un poco al enfocar el usuario. ---- */
.login-characters {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 0;
  height: 220px;
  padding-bottom: 0;
}
.buddy {
  position: relative;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: bottom center;
}
/* Suben con un saltito al aparecer (cada uno con un pequeño retraso) */
.login-characters:not([hidden]) .buddy {
  animation: buddyRise .4s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.login-characters:not([hidden]) .buddy:nth-child(2) { animation-delay: .06s; }
.login-characters:not([hidden]) .buddy:nth-child(3) { animation-delay: .12s; }
@keyframes buddyRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.buddy-body {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 45% 45% 50% 50% / 55% 55% 45% 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .1);
}
.buddy--a .buddy-body { background: #fbbf24; border-radius: 50%; }
.buddy--b .buddy-body { background: #f97316; border-radius: 18px; }
.buddy--c .buddy-body { background: #ffffff; border-radius: 50% 50% 46% 46%; }

.buddy-eyes {
  display: flex;
  gap: 10px;
}
.eye {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1f2937;
  transition: height .2s ease, border-radius .2s ease, margin-top .2s ease;
}
.buddy-mouth {
  width: 14px;
  height: 7px;
  border-radius: 0 0 14px 14px;
  border-bottom: 2.5px solid #1f2937;
  transition: transform .2s ease;
}

/* Enfocar usuario: los personajes "prestan atención" con un saltito */
.login-characters.is-watching .buddy {
  transform: translateY(-6px);
}
.login-characters.is-watching .buddy:nth-child(2) {
  transform: translateY(-10px);
  transition-delay: .05s;
}
.login-characters.is-watching .buddy:nth-child(3) {
  transform: translateY(-6px);
  transition-delay: .1s;
}

/* Escribiendo la contraseña: cierran los ojos (quedan como una rayita) y
   voltean la cabeza hacia un lado — ninguno mira la pantalla. */
.login-characters.is-shy .buddy {
  transform: rotate(-14deg) translateX(-4px);
}
.login-characters.is-shy .buddy:nth-child(2) {
  transform: rotate(16deg) translateX(5px);
  transition-delay: .04s;
}
.login-characters.is-shy .buddy:nth-child(3) {
  transform: rotate(-10deg) translateX(-3px);
  transition-delay: .08s;
}
.login-characters.is-shy .eye {
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
}
.login-characters.is-shy .buddy-mouth {
  transform: scaleX(.55);
}

.login-visual-caption {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
  max-width: 26ch;
}

/* Pastilla para elegir entre el personaje aira y el video de fondo */
.login-visual-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
}
.login-visual-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.login-visual-btn:hover {
  background: rgba(255, 255, 255, .12);
}
.login-visual-btn.active {
  background: #fff;
  color: #1d4ed8;
}

.login-card-form {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Fondo neutro para que las sombras duales del neumorfismo se lean bien —
     el truco solo funciona si el elemento es casi del mismo tono que su
     fondo (referencia: preview.colorlib.com, tema "neumorphism"). */
  background: var(--login-form-bg);
}
.login-card,
.login-card-visual,
.login-card-form,
.login-eyebrow,
.login-title,
.login-subtitle,
.login-field-label,
.login-footer {
  transition: background .4s ease, color .4s ease;
}

.login-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--login-text-body);
}
.login-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--login-text-title);
}
.login-subtitle {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--login-text-body);
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--login-text-label);
}

.form-container input,
.login-field input {
  height: 46px;
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  color: var(--login-text-title);
  background-color: var(--login-form-bg);
  outline: none;
  padding: 0 14px;
  cursor: text;
  border: none;
  border-radius: 12px;
  /* "hundido" en la superficie: sombra clara arriba-izquierda + oscura
     abajo-derecha, ambas hacia adentro (inset). */
  box-shadow: inset 4px 4px 8px var(--login-shadow-dark), inset -4px -4px 8px var(--login-shadow-light);
  transition: box-shadow .15s ease, background-color .4s ease, color .4s ease;
}
.form-container input::placeholder,
.login-field input::placeholder {
  color: var(--login-text-muted);
}
.form-container input:focus,
.login-field input:focus {
  box-shadow: inset 3px 3px 6px var(--login-shadow-dark), inset -3px -3px 6px var(--login-shadow-light), 0 0 0 3px rgba(37, 99, 235, .18);
}

.login-field-input-wrap {
  position: relative;
}
.login-field-input-wrap input {
  padding-right: 42px;
}
.login-pass-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: var(--login-form-bg);
  color: var(--login-text-muted);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 2px 2px 5px var(--login-shadow-dark), -2px -2px 5px var(--login-shadow-light);
  transition: box-shadow .15s ease, color .15s ease, background-color .4s ease;
}
.login-pass-toggle:hover {
  color: var(--login-text-label);
}
.login-pass-toggle:active {
  box-shadow: inset 2px 2px 4px var(--login-shadow-dark), inset -2px -2px 4px var(--login-shadow-light);
}

.login-btn {
  display: block;
  border: none;
  height: 46px;
  width: 100%;
  text-align: center;
  font-size: 15px;
  border-radius: 999px;
  margin-top: 6px;
  cursor: pointer;
  font-weight: 600;
  background-color: #2563eb;
  color: #fff;
  /* Mismo truco de sombra dual que los inputs, pero "elevado" (sombras hacia
     afuera) en vez de hundido — el botón parece salirse de la superficie. */
  box-shadow: 5px 5px 12px var(--login-shadow-dark), -5px -5px 12px var(--login-shadow-light);
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.login-btn:hover {
  background-color: #1d4ed8;
}
.login-btn:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, .25), inset -3px -3px 6px rgba(255, 255, 255, .12);
}
.login-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.login-footer {
  margin: 26px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--login-text-muted);
}

/* ---- Lámpara: interruptor de luz/oscuridad para todo el login (referencia
   de Jose: la lámpara de RETE FIJA, que ilumina la escena al prender el
   cordón). Clic en cualquier parte del botón = tirar del cordón. ---- */
.lamp-widget {
  position: fixed;
  top: 14px;
  right: 26px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lamp-toggle {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lamp-caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--login-text-muted);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease, color .4s ease;
  white-space: nowrap;
}
body:not(.lamp-off) .lamp-caption {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.lamp-glow {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 130, .55) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
body:not(.lamp-off) .lamp-glow {
  opacity: 1;
}

.lamp-shade {
  fill: #3a3f4b;
  transition: fill .35s ease, filter .35s ease;
}
.lamp-stand,
.lamp-base {
  fill: #4b5058;
  transition: fill .35s ease;
}
.lamp-bead {
  fill: #6b7280;
  transition: fill .35s ease, transform .15s ease;
}
.lamp-toggle:active .lamp-bead {
  transform: translateY(4px);
}

body:not(.lamp-off) .lamp-shade {
  fill: #fde68a;
  filter: drop-shadow(0 0 10px rgba(253, 230, 138, .9));
}
body:not(.lamp-off) .lamp-stand,
body:not(.lamp-off) .lamp-base {
  fill: #d1d5db;
}
body:not(.lamp-off) .lamp-bead {
  fill: #fde68a;
}

@media (max-width: 760px) {
  .login-card {
    grid-template-columns: 1fr;
  }
  .login-card-visual {
    padding: 24px;
  }
  .rive-container {
    height: 200px;
  }
  .login-video {
    height: 200px;
  }
  .login-card-form {
    padding: 32px 24px 36px;
  }
}