/* ============================================================
   AMARANTHA · Login / Registro / Olvidé mi contraseña
   (16/10/2026 · pedido de Kd: "el inicio de sesión y registro tiene
   que también acomodarse a la estética de la página")
   ------------------------------------------------------------
   Todo va con `body[data-path="login"]` delante:
   · Frappe marca <body data-path="login"> en esas 3 pantallas
     (login, registro y olvidé la contraseña).
   · Así NADA de esto toca la tienda ni el panel.
   ⚠️ El tema de Frappe carga después de este archivo → se usa `body[…]`
      con `!important` donde el tema pisa.
   ============================================================ */

/* --- Fondo: el mismo aire crema/violeta de la tienda --- */
body[data-path="login"] {
  background:
    radial-gradient(circle at 12% 8%, rgba(200, 107, 192, .18), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(85, 71, 177, .16), transparent 45%),
    #FBF8FF !important;
  min-height: 100vh;
}
body[data-path="login"] .page_content { padding: 1.2rem 0 3rem; }
body[data-path="login"] .page-header-wrapper, body[data-path="login"] .page-breadcrumbs { display: none; }

/* --- La tarjeta: blanca, redondeada, con sombra suave --- */
body[data-path="login"] .login-content.page-card {
  background: #fff !important;
  border: 1px solid rgba(85, 71, 177, .10) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 60px -36px rgba(85, 71, 177, .45) !important;
  padding: 2.1rem 1.5rem 1.9rem !important;
  max-width: 26rem;
  margin: 1.2rem auto;
  /* el tema la estira a 100vh (queda un bloque blanco vacío abajo): que abrace su contenido */
  min-height: auto !important;
  height: auto !important;
}
body[data-path="login"] .page-card-head { text-align: center; border: none !important; display: block !important; }
body[data-path="login"] .page-card-head .app-logo { max-height: 58px; width: auto; margin: 0 auto .7rem; display: block; }
body[data-path="login"] .page-card-head h4 {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 1.62rem; font-weight: 600; color: #5547B1; margin: 0 0 .25rem;
}
body[data-path="login"] .page-card-subtitle { color: #6E6689; font-size: .9rem; }
body[data-path="login"] .page-card-body { padding: 0 !important; }
body[data-path="login"] .page-card-head-text { text-align: center; }

/* --- Campos --- */
body[data-path="login"] .form-label {
  font-size: .82rem; font-weight: 600; color: #5547B1; letter-spacing: .2px; margin-bottom: .3rem;
}
body[data-path="login"] .form-control {
  border-radius: 13px !important;
  border: 1px solid #E4DEF5 !important;
  background: #FFFDFF !important;
  padding: .78rem .9rem !important;
  font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body[data-path="login"] .form-control:focus {
  border-color: #5547B1 !important;
  box-shadow: 0 0 0 3px rgba(85, 71, 177, .13) !important;
  outline: none;
}
body[data-path="login"] .form-control.amx-error { border-color: #D6455E !important; box-shadow: 0 0 0 3px rgba(214, 69, 94, .12) !important; }
body[data-path="login"] .form-control::placeholder { color: #B3ACC6; }

/* --- Botones: el degradado de la marca ---
   ⚠️ El botón "Continuar" del login NO es .btn-primary: Frappe lo pinta con
   `.for-login .page-card .page-card-actions .btn-login{background:var(--gray-900)}`
   (negro). Por eso acá van los dos caminos y con `!important`. */
body[data-path="login"] .page-card .page-card-actions .btn,
body[data-path="login"] .page-card .page-card-actions .btn-login,
body[data-path="login"] .page-card .page-card-actions .btn-forgot,
body[data-path="login"] .page-card .page-card-actions .btn-signup,
body[data-path="login"] .page-card .page-card-actions .btn-default,
body[data-path="login"] .btn-primary {
  background: linear-gradient(120deg, #5547B1 0%, #C86BC0 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700;
  font-size: .95rem;
  padding: .82rem 1rem !important;
  box-shadow: 0 16px 30px -16px rgba(85, 71, 177, .75);
  transition: transform .25s ease, filter .25s ease;
}
body[data-path="login"] .page-card .page-card-actions .btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
body[data-path="login"] .btn-primary:disabled,
body[data-path="login"] .page-card .page-card-actions .btn:disabled { opacity: .55; transform: none; box-shadow: none; }
/* el secundario ("Iniciar sesión con enlace por correo") NO lleva degradado */
body[data-path="login"] .page-card .page-card-actions .btn-login-with-email-link,
body[data-path="login"] .page-card .page-card-actions .btn-login-with-email-link:hover,
body[data-path="login"] .btn-secondary {
  background: rgba(85, 71, 177, .07) !important;
  color: #5547B1 !important;
  border: 1px solid rgba(85, 71, 177, .16) !important;
  border-radius: 999px !important;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: none;
  transform: none;
}

/* --- Etiquetas y enlaces (el tema los deja grises) --- */
body[data-path="login"] .form-label { color: #5547B1 !important; font-weight: 600 !important; }
body[data-path="login"] a,
body[data-path="login"] .forgot-password-message,
body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message a {
  color: #5547B1 !important;
  font-weight: 600;
  text-decoration: none;
}
body[data-path="login"] a:hover { color: #C86BC0 !important; text-decoration: underline; }
body[data-path="login"] .sign-up-message { color: #6E6689 !important; font-size: .9rem; }
body[data-path="login"] .forgot-password-message a, body[data-path="login"] .sign-up-message a { font-weight: 700; }

/* --- Los íconos de los campos no deben pisar el texto --- */
body[data-path="login"] .email-field .form-control,
body[data-path="login"] .password-field .form-control,
body[data-path="login"] .phone-field .form-control { padding-left: 2.55rem !important; }
body[data-path="login"] .password-field .form-control { padding-right: 2.55rem !important; }

/* --- El carrito flotante no va en estas pantallas (el WhatsApp sí: ayuda) --- */
body[data-path="login"] .am-cart-fab { display: none !important; }

/* ============================================================
   El Totoro bailando del registro + el campo del celular
   ============================================================ */
body[data-path="login"] .amx-bienvenida {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin: 0 auto 1.1rem;
}
/* versión grande y centrada del muñeco (el CSS base es del carrito) */
body[data-path="login"] .amx-muneco--bienvenida {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 0;
  text-align: center;
}
body[data-path="login"] .amx-muneco--bienvenida .amx-muneco-caja { width: 124px; height: 121px; }
body[data-path="login"] .amx-muneco--bienvenida .amx-estrella { width: 12px; height: 12px; }
body[data-path="login"] .amx-muneco--bienvenida .amx-estrella.e1 { top: 4px; right: 6px; }
body[data-path="login"] .amx-muneco--bienvenida .amx-estrella.e2 { top: 38px; right: 46px; }
body[data-path="login"] .amx-muneco--bienvenida .amx-estrella.e3 { bottom: 2px; right: 14px; }
body[data-path="login"] .amx-muneco--bienvenida .amx-muneco-globo { right: -1.1rem; top: -.2rem; }
body[data-path="login"] .amx-muneco--bienvenida .amx-muneco-frase { font-size: .82rem; }
body[data-path="login"] .amx-bienvenida-texto {
  margin: 0 0 .2rem;
  font-size: .9rem;
  color: #6E6689;
  line-height: 1.45;
  text-align: center;
}
body[data-path="login"] .amx-bienvenida-texto b { color: #5547B1; }

body[data-path="login"] .amx-tel-grupo .form-label { display: block; }
body[data-path="login"] .amx-tel-ayuda { font-size: .74rem; color: #8C85A3; margin: .3rem 0 0; line-height: 1.4; }
body[data-path="login"] .amx-tel-error { color: #D6455E; font-size: .78rem; font-weight: 600; margin: .3rem 0 0; min-height: 1rem; }
body[data-path="login"] .amx-promos {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .7rem 0 0; font-size: .8rem; color: #5547B1; font-weight: 500; line-height: 1.35;
  cursor: pointer;
}
body[data-path="login"] .amx-promos input { margin-top: .15rem; accent-color: #5547B1; width: 16px; height: 16px; }

/* "menos movimiento": se ve todo, quieto */
@media (prefers-reduced-motion: reduce) {
  body[data-path="login"] .amx-muneco--bienvenida svg,
  body[data-path="login"] .amx-muneco--bienvenida .amx-mu-oreja,
  body[data-path="login"] .amx-muneco--bienvenida .amx-estrella { animation: none !important; }
}