/*
 * NexoPlay · Renovación visual de autenticación · V1 · 2026-10-30
 * Solo presentación: conserva campos, nombres de inputs, rutas, RPC y flujo de Auth.
 * El mazo de cuatro tarjetas del App Lock mantiene sus estilos y animaciones originales.
 */

/* Fondo de acceso coherente con el wallpaper grafito aprobado. */
body.auth-active {
  background: #0b0e13 !important;
  color-scheme: dark;
}

body.auth-active .auth-scene {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(22px, 4vh, 44px) 16px 64px;
  background: #0b0e13;
  color: #f4f6fa;
}

body.auth-active .auth-background {
  inset: -2%;
  background-image: url("../assets/backgrounds/nexoplay-grafito-watermark.webp");
  background-size: cover;
  background-position: center center;
  filter: blur(2px) saturate(.68) brightness(.34);
  transform: scale(1.035);
}

body.auth-active .auth-vignette {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(57, 112, 190, .13), transparent 40%),
    linear-gradient(180deg, rgba(5, 8, 13, .48), rgba(5, 8, 13, .79)),
    linear-gradient(90deg, rgba(5, 8, 13, .28), rgba(5, 8, 13, .08), rgba(5, 8, 13, .28));
}

/* Tarjetas principales: carbón/grafito, con bordes finos y sin brillos excesivos. */
body.auth-active .auth-card {
  width: min(500px, 100%);
  padding: 24px 30px 22px;
  border: 1px solid rgba(136, 153, 176, .27);
  border-radius: 21px;
  background: linear-gradient(150deg, rgba(18, 24, 33, .975), rgba(9, 13, 20, .985) 72%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .46),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(18px) saturate(1.08);
}

body.auth-active .mode-register .auth-card {
  width: min(640px, 100%);
  padding: 23px 32px 21px;
}

body.auth-active .auth-topline {
  min-height: 22px;
}

body.auth-active .auth-title {
  color: #f4f6fa;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -.25px;
}

body.auth-active .auth-status {
  color: #8290a2;
  font-size: 8px;
  letter-spacing: 1.8px;
}

body.auth-active .auth-divider {
  margin: 11px 0 14px;
  background: linear-gradient(90deg, transparent, rgba(112, 143, 183, .42), transparent);
}

body.auth-active .auth-kicker {
  color: #77a8f6;
  font-size: 9px;
  letter-spacing: 2.7px;
  font-weight: 850;
}

body.auth-active .auth-card h1 {
  margin: 13px 0 7px;
  color: #f5f7fb;
  font-size: clamp(21px, 2.5vw, 25px);
  line-height: 1.2;
  letter-spacing: -.7px;
  font-weight: 800;
}

body.auth-active .auth-card h1 span {
  color: #73a8ff;
}

body.auth-active .auth-intro {
  color: #9aa7b8;
  font-size: 12px;
  line-height: 1.55;
}

body.auth-active .auth-brand {
  gap: 10px;
  margin: 17px 0 16px;
}

body.auth-active .auth-logo-mark {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 5px 14px rgba(65, 119, 230, .18));
}

body.auth-active .auth-wordmark b {
  color: #f2f5fa;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.9px;
}

body.auth-active .auth-wordmark b span {
  color: #63a6ff;
}

body.auth-active .auth-wordmark small {
  color: #7e8b9d;
  letter-spacing: 2.5px;
}

body.auth-active .auth-form-head {
  margin: 3px 0 17px;
  text-align: center;
}

body.auth-active .auth-form-head h2 {
  color: #f5f7fb;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -.9px;
  font-weight: 850;
}

body.auth-active .auth-form-head p {
  margin-top: 6px;
  color: #8d9bad;
  font-size: 11px;
  line-height: 1.5;
}

body.auth-active .auth-form {
  gap: 13px;
}

body.auth-active .auth-form label {
  gap: 6px;
  color: #dce3ed;
  font-size: 10px;
  font-weight: 750;
}

body.auth-active .auth-grid-two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

body.auth-active .auth-input {
  min-width: 0;
  height: 49px;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid #354252;
  border-radius: 11px;
  background: rgba(5, 9, 15, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body.auth-active .auth-input:hover {
  border-color: #52647a;
}

body.auth-active .auth-input:focus-within {
  border-color: #5798ed;
  background: rgba(8, 15, 25, .94);
  box-shadow: 0 0 0 3px rgba(62, 131, 226, .12);
}

body.auth-active .auth-input > span {
  width: 17px;
  color: #8292a7;
  font-size: 13px;
  opacity: .9;
}

body.auth-active .auth-input input {
  min-width: 0;
  color: #f4f7fb;
  font-size: 12px;
}

body.auth-active .auth-input input::placeholder {
  color: #6f7c8e;
  opacity: 1;
}

body.auth-active .password-wrap {
  padding-right: 7px;
}

body.auth-active .show-password,
body.auth-active .forgot {
  color: #9eb3cd;
  font-size: 10px;
  font-weight: 750;
}

body.auth-active .show-password:hover,
body.auth-active .forgot:hover {
  color: #83b8ff;
}

body.auth-active .auth-submit {
  min-height: 49px;
  height: 49px;
  margin-top: 3px;
  border: 1px solid rgba(116, 164, 255, .7);
  border-radius: 11px;
  background: linear-gradient(105deg, #176fdb 0%, #3156e8 52%, #7042dc 100%);
  box-shadow: 0 9px 23px rgba(34, 89, 190, .18), inset 0 1px 0 rgba(255, 255, 255, .19);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .05px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

body.auth-active .auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 12px 27px rgba(34, 89, 190, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
}

body.auth-active .auth-switch {
  padding-top: 2px;
  color: #8996a7;
  font-size: 10px;
}

body.auth-active .auth-switch button {
  color: #8bb9ff;
  text-decoration: none;
}

body.auth-active .auth-switch button:hover {
  color: #c2d9ff;
  text-decoration: underline;
}

body.auth-active .auth-pin-setup-note {
  margin: -2px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(86, 125, 177, .22);
  border-radius: 9px;
  background: rgba(81, 115, 160, .07);
  color: #94a5ba;
  font-size: 9px;
  line-height: 1.45;
}

body.auth-active .optional,
body.auth-active .field-help {
  color: #8291a4;
  font-size: 9px;
}

body.auth-active .auth-message {
  border-radius: 10px;
  font-size: 11px;
}

body.auth-active .auth-footer {
  color: rgba(151, 164, 181, .66);
  font-size: 8px;
  letter-spacing: .35px;
}

/* Verificación del correo: se conserva el paso OTP de seis dígitos. */
body.auth-active .auth-verify-card {
  width: min(540px, 100%);
}

body.auth-active .verify-icon {
  border: 1px solid rgba(103, 149, 207, .35);
  background: linear-gradient(145deg, rgba(67, 96, 139, .18), rgba(33, 53, 83, .23));
  box-shadow: none;
  color: #a8c8f4;
}

body.auth-active .verify-hero h2 {
  color: #f2f5fa;
  font-size: 27px;
  letter-spacing: -.8px;
}

body.auth-active .verify-hero p,
body.auth-active .verify-hint {
  color: #9aa8ba;
}

body.auth-active .verify-email {
  color: #dce9fb;
}

body.auth-active .otp-input {
  border-color: #46556a;
  border-radius: 12px;
  background: rgba(5, 10, 17, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.auth-active .otp-input:focus {
  border-color: #6aa7f4;
  box-shadow: 0 0 0 3px rgba(76, 137, 219, .13);
}

body.auth-active .resend-btn:not(:disabled):hover {
  color: #9dc4ff;
}

body.auth-active .verify-security {
  color: #8290a3;
}

/*
 * App Lock PIN: se actualiza el entorno exterior al mazo.
 * IMPORTANTE: no se sobrescriben .nx-lock-deck, .nx-lock-card ni sus keyframes.
 * El efecto de las cuatro tarjetas, su abanico, giro, selección y animación de éxito
 * permanecen exactamente como en el proyecto recibido.
 */
.nx-lock-root .nx-lock-scene {
  background:
    linear-gradient(180deg, rgba(7, 11, 17, .74), rgba(7, 11, 17, .86)),
    url("../assets/backgrounds/nexoplay-grafito-watermark.webp") center center / cover no-repeat,
    #0b0e13;
}

.nx-lock-root .nx-lock-scene:before {
  opacity: .14;
  background-image:
    radial-gradient(rgba(173, 190, 214, .25) .7px, transparent .8px),
    linear-gradient(135deg, transparent 0 48%, rgba(116, 145, 184, .07) 48.2% 48.5%, transparent 48.7%);
  background-size: 22px 22px, 100% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.nx-lock-root .nx-lock-scene:after {
  background: radial-gradient(ellipse at center, rgba(9, 15, 24, .12) 18%, rgba(0, 0, 0, .58) 100%);
}

.nx-lock-root .nx-lock-grid-glow {
  background: radial-gradient(circle, rgba(91, 133, 196, .11), rgba(75, 74, 160, .045) 36%, transparent 68%);
}

.nx-lock-root .nx-lock-orbit {
  border-color: rgba(131, 158, 199, .10);
}

.nx-lock-root .nx-lock-orbit-two {
  border-color: rgba(116, 104, 182, .10);
}

.nx-lock-root .nx-lock-panel {
  border-color: rgba(130, 151, 180, .36);
  background: linear-gradient(148deg, rgba(18, 25, 35, .985), rgba(8, 13, 20, .99) 65%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(191, 207, 229, .035),
    inset 0 1px 0 rgba(255, 255, 255, .065);
}

.nx-lock-root .nx-lock-panel:before {
  background: radial-gradient(ellipse at 50% 0, rgba(92, 138, 201, .13), transparent 72%);
}

.nx-lock-root .nx-lock-panel:after {
  background: radial-gradient(ellipse at center, rgba(77, 107, 166, .06), transparent 68%);
}

.nx-lock-root .nx-lock-kicker {
  color: #9bbbe8;
}

.nx-lock-root .nx-lock-description {
  color: #aab6c6;
}

.nx-lock-root .nx-lock-account {
  border-color: rgba(125, 151, 187, .24);
  background: linear-gradient(110deg, rgba(27, 40, 58, .74), rgba(13, 21, 32, .78));
}

.nx-lock-root .nx-lock-account small {
  color: #91a1b7;
}

.nx-lock-root .nx-lock-hero-icon {
  border-color: rgba(125, 158, 205, .24);
  background: linear-gradient(145deg, rgba(47, 76, 116, .32), rgba(20, 31, 49, .64));
  color: #a9c9f5;
  box-shadow: none;
}

.nx-lock-root .nx-lock-foot {
  border-top-color: rgba(130, 151, 180, .18);
  color: #99a8bb;
}

.nx-lock-root .nx-lock-foot svg {
  stroke: #a4bddd;
}

.nx-lock-root .nx-lock-bottom-note {
  color: rgba(163, 178, 199, .58);
}

.nx-lock-root .nx-lock-bottom-note b {
  color: #91a9cb;
}

/* Menos movimiento cuando el usuario lo solicita desde su sistema. */
@media (prefers-reduced-motion: reduce) {
  body.auth-active .auth-submit,
  body.auth-active .auth-input {
    transition: none;
  }
}

@media (max-width: 640px) {
  body.auth-active .auth-scene {
    padding: 14px 10px 54px;
  }

  body.auth-active .auth-card,
  body.auth-active .mode-register .auth-card {
    width: min(100%, 560px);
    margin: 8px auto 22px;
    padding: 19px 17px 17px;
    border-radius: 18px;
  }

  body.auth-active .auth-grid-two {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.auth-active .auth-input {
    height: 47px;
  }

  body.auth-active .auth-form-head h2 {
    font-size: 25px;
  }

  body.auth-active .auth-brand {
    margin: 14px 0 13px;
  }

  body.auth-active .auth-footer {
    position: relative;
    bottom: auto;
    margin-top: 4px;
  }
}

@media (max-height: 760px) and (min-width: 641px) {
  body.auth-active .auth-scene {
    place-items: start center;
  }

  body.auth-active .auth-card {
    margin: 0 auto 24px;
  }
}

/* Botón de regreso a la presentación pública desde login y registro. */
body.auth-active .auth-topline-leading{display:flex;align-items:center;gap:12px;min-width:0}
body.auth-active .auth-back-button{min-height:29px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid rgba(90,225,150,.28);border-radius:8px;background:rgba(18,43,34,.46);color:#8bf0b2;font-size:9px;font-weight:850;letter-spacing:1px;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
body.auth-active .auth-back-button:hover{background:rgba(26,88,57,.48);border-color:rgba(96,245,156,.7);box-shadow:0 0 18px rgba(47,227,125,.13);transform:translateY(-1px)}
body.auth-active .auth-back-button:focus-visible{outline:2px solid #72f3a5;outline-offset:3px}
@media(max-width:420px){body.auth-active .auth-topline-leading{gap:8px}body.auth-active .auth-back-button{min-height:28px;padding:0 8px;font-size:8px}body.auth-active .auth-title{font-size:14px}}