/* BREKA_MOBILE_LOGIN_V2
   Ajustes exclusivos para la entrada universal en móviles.
   Mantiene intacta la composición de escritorio. */

@media (max-width: 900px) {
  html,
  body.login-premium {
    min-height: 100%;
  }

  body.login-premium {
    min-height: 100dvh;
    overflow-x: hidden;
    background: #f8fafc;
  }

  .login-shell {
    min-height: 100dvh;
  }

  .login-form-panel {
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:
      max(20px, env(safe-area-inset-top))
      18px
      max(24px, env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, #071426 0, #071426 196px, #f8fafc 196px, #f8fafc 100%);
  }

  .login-card {
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .login-mobile-brand {
    min-height: 74px;
    margin: 0 4px 14px;
    gap: 11px;
  }

  .login-mobile-brand .login-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 19px;
    flex: 0 0 40px;
  }

  .login-mobile-brand .login-brand-name {
    font-size: 18px;
  }

  .login-mobile-brand .login-brand-group {
    margin-top: 4px;
    font-size: 8px;
  }

  .login-mobile-brand .login-brand-platform {
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  .login-card-inner {
    box-sizing: border-box;
    padding: 24px 20px 20px;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .11);
  }

  .login-card-header {
    margin-bottom: 20px;
  }

  .login-card-header h2 {
    font-size: clamp(27px, 8vw, 31px);
    line-height: 1.08;
    letter-spacing: -.04em;
  }

  .login-card-header p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.48;
  }

  .login-form {
    gap: 14px;
  }

  .login-field label {
    margin-bottom: 6px;
    font-size: 12.5px;
  }

  .login-input-wrap input {
    min-height: 52px;
    padding-left: 44px;
    padding-right: 46px;
    border-radius: 13px;
    font-size: 16px;
  }

  .login-input-icon {
    left: 14px;
    width: 19px;
    height: 19px;
  }

  .login-password-toggle {
    right: 8px;
    width: 38px;
    height: 38px;
  }

  .login-submit {
    min-height: 52px;
    margin-top: 0;
    border-radius: 13px;
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .20);
  }

  #login-error .error {
    padding: 10px 12px;
    font-size: 12.5px;
  }

  .login-auth-divider {
    margin: 14px 0 11px;
  }

  .login-google {
    min-height: 52px;
    border-radius: 13px;
    font-size: 14.5px;
  }

  .login-create {
    margin-top: 13px;
    padding: 0 4px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .login-security {
    margin-top: 13px;
    font-size: 11px;
  }

  /* El instalador PWA no debe tapar acciones del formulario. */
  .install-prompt,
  .pwa-install,
  #install-prompt {
    max-width: calc(100vw - 24px);
  }

  [data-breka-signup-link] {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .login-form-panel {
    padding-left: 12px;
    padding-right: 12px;
    background:
      linear-gradient(180deg, #071426 0, #071426 184px, #f8fafc 184px, #f8fafc 100%);
  }

  .login-mobile-brand {
    min-height: 68px;
    margin-bottom: 11px;
  }

  .login-card-inner {
    padding: 22px 18px 18px;
    border-radius: 20px;
  }

  .login-card-header {
    margin-bottom: 18px;
  }

  .login-card-header h2 {
    font-size: 27px;
  }

  .login-card-header p {
    font-size: 13.5px;
  }
}

/* Pantallas de baja altura: compacta sin sacrificar áreas táctiles. */
@media (max-width: 900px) and (max-height: 720px) {
  .login-form-panel {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, #071426 0, #071426 156px, #f8fafc 156px, #f8fafc 100%);
  }

  .login-mobile-brand {
    min-height: 56px;
    margin-bottom: 8px;
  }

  .login-mobile-brand .login-brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 17px;
  }

  .login-mobile-brand .login-brand-platform {
    display: none !important;
  }

  .login-card-inner {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .login-card-header {
    margin-bottom: 14px;
  }

  .login-card-header p {
    margin-top: 5px;
    line-height: 1.38;
  }

  .login-form {
    gap: 11px;
  }

  .login-input-wrap input,
  .login-submit,
  .login-google {
    min-height: 50px;
  }

  .login-auth-divider {
    margin: 10px 0 8px;
  }

  .login-create,
  .login-security {
    margin-top: 9px;
  }
}