/* ==========================================================================
   Iniciar sesión (Views/Account/Login.cshtml, con _LayoutPublico), como la página de acceso de la web
   (pidefacil.es): el logo y la tarjeta en el centro, sobre el verde de la marca. Solo lo propio; lo común
   está en pf.css
   ========================================================================== */

.login {
  /* El fondo de la web: degradado de verdes con dos brillos (lima y verde de marca) */
  --login-fondo:
    radial-gradient(1694px 1072px at 78% 34%, rgba(223, 255, 122, .32) 0%, rgba(223, 255, 122, 0) 24%),
    radial-gradient(1932px 1222px at 88% 78%, rgba(152, 176, 106, .36) 0%, rgba(152, 176, 106, 0) 28%),
    linear-gradient(147.69deg, var(--pf-title) 0%, #4a5f2c 48%, #223111 100%);
  --login-sombra: 0 40px 90px rgba(0, 0, 0, .35);
  --login-brillo: drop-shadow(0 22px 27px rgba(152, 176, 106, .28));   /* bajo el botón de entrar */

  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: clamp(32px, 5.6vw, 80px) 16px;
  background-image: var(--login-fondo);
}
.login-logo { display: block; width: 168px; height: auto; }

.login-card { width: 100%; max-width: 560px; padding: clamp(32px, 3.8vw, 54px) clamp(24px, 4vw, 54px); border-radius: clamp(24px, 3.5vw, 40px); background: var(--pf-paper); box-shadow: var(--login-sombra); }
.login-card h1 { margin: 0; font: 800 clamp(26px, 2.54vw, 36px)/1 var(--pf-display); letter-spacing: -.01em; }
.login-lead { margin: 10px 0 0; font-size: clamp(15px, 1.41vw, 18px); color: var(--pf-muted); }

/* El formulario: campos de 48 px y las etiquetas en verde oscuro, como en la web */
.login-form { gap: 18px; margin-top: clamp(24px, 2.5vw, 32px); }
.login-form .pf-field > label { margin-bottom: 4px; font-size: 13.5px; color: var(--pf-title); }
.login-form .form-control { min-height: 48px; padding: 0 16px; border-radius: 12px; }
.login-form .pf-btn { width: 100%; min-height: 52px; margin-top: 6px; font-size: 15px; filter: var(--login-brillo); }
.login-clave { position: relative; }
.login-clave .form-control { padding-right: 52px; }
.login-clave .pf-icon-btn { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); }
.login-clave input::-ms-reveal, .login-clave input::-ms-clear { display: none; }   /* el ojo de Edge: ya está el nuestro */

/* Ayuda: los mismos contactos de siempre y, para quien aún no es cliente, el contacto de la web */
.login-ayuda { margin-top: clamp(24px, 2.5vw, 32px); padding-top: clamp(20px, 2vw, 24px); border-top: 1px solid var(--pf-line); text-align: center; }
.login-ayuda-titulo { margin: 0; font: 600 13.5px var(--pf-ui); color: var(--pf-title); }
.login-ayuda-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 10px; }
.login-ayuda-enlaces a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--pf-muted); text-decoration: none; }
.login-ayuda-enlaces a:hover { color: var(--pf-title); }
.login-ayuda-enlaces i { font-size: 17px; color: var(--pf-dark); }
.login-alta { margin: 16px 0 0; font-size: 14.5px; color: var(--pf-muted); }
.login-alta a { font-weight: 600; color: var(--pf-title); text-decoration: underline; text-underline-offset: 2px; }

/* Portátiles (pantalla ancha pero baja): todo algo más pequeño y más junto, para que quepa sin desplazar la página */
@media (min-width: 768px) and (max-height: 860px) {
  .login { gap: 18px; padding-top: clamp(16px, 3dvh, 32px); padding-bottom: clamp(16px, 3dvh, 32px); }
  .login-logo { width: 140px; }
  .login-card { max-width: 480px; padding: clamp(24px, 4dvh, 36px) 40px; border-radius: 28px; }
  .login-card h1 { font-size: 28px; }
  .login-lead { margin-top: 8px; font-size: 15px; }
  .login-form { gap: 14px; margin-top: 20px; }
  .login-form .form-control { min-height: 44px; }
  .login-form .pf-btn { min-height: 46px; margin-top: 4px; }
  .login-ayuda { margin-top: 20px; padding-top: 16px; }
  .login-ayuda-enlaces { margin-top: 8px; }
  .login-alta { margin-top: 10px; }
}

@media (max-width: 767.98px) {
  .login { justify-content: flex-start; gap: 22px; }
  .login-clave .pf-icon-btn { width: 40px; height: 40px; right: 4px; }   /* cabe en el campo de 48 px */
}