/* Color de fondo general (lo puedes mantener) */
body {
  background-color: #EDF6F9;
  margin: 0;
  padding: 0;
  min-height: 100vh; /* mantiene el fondo completo, no influye en el layout del footer */
  box-sizing: border-box;
}

/* --- Nuevo: centrado dentro del main del layout (NO usar 100vh aquí) --- */
.login-wrapper {
  /* ocupar el 100% de la altura disponible del main (main.app-main) */
  height: 100%;

  /* centrar el contenido interior (la tarjeta) */
  display: flex;
  align-items: center;       /* CENTRADO VERTICAL */
  justify-content: center;   /* CENTRADO HORIZONTAL */

  /* algo de padding para dejar espacio en pantallas pequeñas */
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* tarjeta y botones — sin cambios funcionales */
.btn-custom{
    background-color: #83C5BE;
}

.btn-custom:hover,
.btn-custom:focus {
  background-color: #5DA69E;
}

/* active: mientras se mantiene pulsado */
.btn.btn-custom:active,
.btn.btn-custom.active,
button.btn-custom:active {
  background-color: #FFDDD2;
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
  color: #000;
}

/* Si quieres que el estado .active (toggle) sea exactamente igual */
.btn.btn-custom.active {
  background-color: #FFDDD2;
}