/* ================= Campos y botón ========================================= */
#login-page #login,
#login-page #password {
  border: 2.5px solid #F36F21 !important;
  border-radius: 12px;
}

#login-page #login:focus,
#login-page #password:focus {
  outline: none;
  border-color: #F36F21;
  box-shadow: 0 0 0 3px rgba(243, 111, 33, .35);
}

#login-page button[type="submit"] {
  background: #FFE11A;
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 10px;
  padding: .75rem 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
  transition: filter .2s ease, transform .05s ease;
}

#login-page button[type="submit"]:hover { filter: brightness(1.03); }
#login-page button[type="submit"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 225, 26, .45); }
#login-page button[type="submit"]:active { transform: translateY(1px); }

#login-page #remember_me {
  accent-color: #F36F21;
  border: 2.5px solid #F36F21 !important;
}
#login-page #remember_me:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(243, 111, 33, .35);
}

/* ==================== RESPONSIVE: espaciado del container ================== */
/* Usamos un espaciador ::before controlado por --mobile-offset (desde el HTML) */
@media (max-width: 768px), (pointer: coarse) {
  #auth-wrapper {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* el espaciador hace el empuje */
    padding-bottom: clamp(12px, 3vh, 48px);
  }
  @supports (height: 100svh) { #auth-wrapper { min-height: 100svh; } }

  /* ESPACIADOR: 60px mínimo para no colapsar, preferido = --mobile-offset */
  #auth-wrapper::before {
    content: "";
    display: block;
    height: calc(
      clamp(60px, var(--mobile-offset, 7vh), 420px)
      + env(safe-area-inset-top, 0px)
    );
    width: 100%;
  }

  /* Card centrado y cómodo en móvil */
  #auth-card {
    width: min(92vw, 480px);
    margin: clamp(6px, 1.5vh, 16px) auto 0 auto !important;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .10);
  }
}