/*
 * Login del panel: el mismo mundo que el hero del sitio. Navy de fondo, la señal de
 * transmisión en anillos dorados y la ola roja del arte de lanzamiento; encima, el logo
 * y un formulario blanco con una sola acción roja. Valores de tokens-admin.css.
 */

body.login {
  min-height: 100vh;
  font-family: var(--avl-font-sans);
  color: var(--avl-text-primary);
  background-color: var(--avl-surface-brand);
  /* De adelante hacia atrás: la ola roja, los anillos de la señal y el disco de marca. */
  background-image:
    radial-gradient(ellipse 70% 38% at 50% 112%, color-mix(in srgb, var(--avl-surface-accent) 26%, transparent), transparent 70%),
    radial-gradient(circle at 86% 30%, transparent 0 128px, color-mix(in srgb, var(--avl-surface-gold) 42%, transparent) 129px 131px, transparent 132px),
    radial-gradient(circle at 86% 30%, transparent 0 228px, color-mix(in srgb, var(--avl-surface-gold) 28%, transparent) 229px 231px, transparent 232px),
    radial-gradient(circle at 86% 30%, transparent 0 328px, color-mix(in srgb, var(--avl-surface-gold) 17%, transparent) 329px 331px, transparent 332px),
    radial-gradient(circle at 86% 30%, transparent 0 428px, color-mix(in srgb, var(--avl-surface-gold) 9%, transparent) 429px 431px, transparent 432px),
    radial-gradient(circle at 86% 30%, var(--avl-surface-accent) 0 9px, transparent 10px),
    radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--avl-surface-brand-soft) 80%, transparent) 0 220px, transparent 221px);
  background-attachment: scroll;
  caret-color: var(--avl-focus-ring);
}

body.login ::selection {
  background: color-mix(in srgb, var(--avl-surface-gold) 40%, var(--avl-surface-base));
  color: var(--avl-text-primary);
}

#login {
  width: min(360px, calc(100vw - 32px));
  padding: 9vh 0 var(--avl-space-6);
}

/* ── Logo ─────────────────────────────────────────────────────────────── */

.login h1 {
  margin-bottom: var(--avl-space-6);
}

.login h1 a {
  width: 100%;
  max-width: 340px;
  height: 66px;
  margin: 0 auto;
  background-image: var(--avl-logo);
  background-size: contain;
  background-position: center;
}

.login h1 a:focus-visible {
  outline: 3px solid var(--avl-focus-ring-on-brand);
  outline-offset: 6px;
  box-shadow: none;
}

/* ── Formulario ───────────────────────────────────────────────────────── */

.login form {
  margin-top: 0;
  padding: var(--avl-space-6) var(--avl-space-6) var(--avl-space-5);
  background: var(--avl-surface-base);
  border: 0;
  border-radius: var(--avl-radius-lg);
  box-shadow: var(--avl-shadow-lg);
}

.login label {
  margin-bottom: var(--avl-space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--avl-text-primary);
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  min-height: 44px;
  margin: 0 0 var(--avl-space-4);
  padding: 4px var(--avl-space-3);
  font-size: 16px;
  border: 1px solid var(--avl-border-subtle);
  border-radius: var(--avl-radius-sm);
  background: var(--avl-surface-base);
  box-shadow: none;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--avl-focus-ring);
  outline: 3px solid var(--avl-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.login .wp-pwd {
  margin-bottom: 0;
}

.login .button.wp-hide-pw {
  min-width: 44px;
  height: 44px;
  color: var(--avl-surface-brand-soft);
}

.login .button.wp-hide-pw:focus-visible {
  outline: 3px solid var(--avl-focus-ring);
  outline-offset: -3px;
  border-color: transparent;
  box-shadow: none;
}

.login .forgetmenot {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
}

.login .forgetmenot label {
  margin: 0;
  font-weight: 500;
  color: var(--avl-text-secondary);
}

.login input[type="checkbox"] {
  border-color: var(--avl-border-strong);
}

.login input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--avl-surface-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.login input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--avl-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* La única acción roja de la pantalla. */
.login .submit {
  clear: both;
  padding-top: var(--avl-space-3);
}

.login .button-primary {
  float: none;
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--avl-surface-accent);
  border: 0;
  border-radius: var(--avl-radius-pill);
  color: var(--avl-text-on-accent);
  box-shadow: none;
  text-shadow: none;
  transition: background-color var(--avl-duration-fast) var(--avl-ease-expresivo),
    transform var(--avl-duration-fast) var(--avl-ease-expresivo);
}

.login .button-primary:hover,
.login .button-primary:focus {
  background: var(--avl-surface-accent-hover);
  color: var(--avl-text-on-accent);
}

.login .button-primary:active {
  transform: translateY(1px);
}

.login .button-primary:focus-visible {
  outline: 3px solid var(--avl-focus-ring);
  outline-offset: 3px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .login .button-primary:active { transform: none; }
}

/* ── Mensajes ─────────────────────────────────────────────────────────── */

.login #login_error,
.login .message,
.login .notice,
.login .success {
  margin-bottom: var(--avl-space-4);
  padding: var(--avl-space-3) var(--avl-space-4);
  border: 0;
  border-left: 0;
  border-radius: var(--avl-radius-md);
  background: var(--avl-surface-base);
  box-shadow: var(--avl-shadow-md);
  color: var(--avl-text-primary);
  font-size: 14px;
  line-height: 1.5;
}

.login #login_error,
.login .notice-error {
  background: color-mix(in srgb, var(--avl-surface-accent) 8%, var(--avl-surface-base));
  color: var(--avl-text-accent);
}

.login #login_error strong {
  color: var(--avl-text-accent);
}

/* ── Enlaces sobre el navy ────────────────────────────────────────────── */

.login #nav,
.login #backtoblog,
.avilive-login-pie {
  margin: var(--avl-space-4) 0 0;
  padding: 0 var(--avl-space-2);
  text-align: center;
  font-size: 13px;
}

.login #nav a,
.login #backtoblog a,
.avilive-login-pie,
.avilive-login-pie a {
  color: color-mix(in srgb, var(--avl-text-on-brand) 78%, transparent);
  text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.avilive-login-pie a:hover {
  color: var(--avl-text-on-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login #nav a:focus-visible,
.login #backtoblog a:focus-visible,
.avilive-login-pie a:focus-visible {
  outline: 3px solid var(--avl-focus-ring-on-brand);
  outline-offset: 3px;
  box-shadow: none;
  color: var(--avl-text-on-brand);
}

/* Sin correo no hay enlace de recuperación y el párrafo queda vacío, con su margen. */
.login #nav:not(:has(a)) {
  display: none;
}

/* "Volver al sitio" lleva al login otra vez (el WordPress no tiene frontend): sobra. */
.login #backtoblog {
  display: none;
}

.avilive-login-pie {
  margin-top: var(--avl-space-6);
  color: color-mix(in srgb, var(--avl-text-on-brand) 62%, transparent);
}

.avilive-login-ayuda {
  max-width: 34ch;
  margin: var(--avl-space-4) auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--avl-text-on-brand) 78%, transparent);
}

.avilive-login-pie a {
  font-weight: 600;
}

.login .privacy-policy-page-link {
  display: none;
}

/* ── Pantallas chicas ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
  body.login {
    background-image:
      radial-gradient(ellipse 90% 30% at 50% 110%, color-mix(in srgb, var(--avl-surface-accent) 26%, transparent), transparent 70%),
      radial-gradient(circle at 100% 0, transparent 0 128px, color-mix(in srgb, var(--avl-surface-gold) 32%, transparent) 129px 131px, transparent 132px),
      radial-gradient(circle at 100% 0, transparent 0 208px, color-mix(in srgb, var(--avl-surface-gold) 18%, transparent) 209px 211px, transparent 212px);
  }

  #login {
    padding-top: 7vh;
  }

  .login form {
    padding: var(--avl-space-5) var(--avl-space-5) var(--avl-space-4);
  }

  .login h1 a {
    height: 52px;
  }
}