/* Contenedor principal: Centra el formulario */
@import url("https://fonts.googleapis.com/css2?family=Eagle+Lake&family=Life+Savers:wght@400;700;800&family=Righteous&family=Rubik+Wet+Paint&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Righteous&family=Rubik+Wet+Paint&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Life+Savers:wght@400;700;800&family=Righteous&family=Rubik+Wet+Paint&display=swap");
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  /* Fondo atractivo para la vista de escritorio */
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  padding: 1.25rem; /* 20px de padding */
}

/* La caja del formulario */
.login-box {
  background: linear-gradient(
    135deg,
    rgb(0, 255, 255) 0%,
    rgb(255, 32, 255) 100%
  );
  padding: 2.5rem; /* 40px */
  border-radius: 0.625rem; /* 10px */
  box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2); /* Sombra */
  width: 100%;
  max-width: 25rem; /* 400px, el ancho máximo */
  text-align: center;
}

.login-box h2 {
  font-family: "Rubik Wet Paint", system-ui;
  margin-bottom: 1.5625rem; /* 25px */
  color: #272424;

  font-size: 1.8rem;
}

/* División para agrupar Label e Input */
.input-group {
  margin-bottom: 1.25rem; /* 20px */
  font-family: "Eagle Lake", serif;
  text-align: left;
}

.input-group label {
  display: block;
  margin-bottom: 0.5rem; /* 8px */
  font-weight: bold;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 0.75rem; /* 12px */
  border: 1px solid #ccc;
  font-family: "Life Savers", serif;
  border-radius: 0.3125rem; /* 5px */
  font-size: 1rem;
  transition: border-color 0.3s;
}

.input-group input:focus {
  border-color: #2575fc;
  outline: none;
}

/* Estilo del botón */
.login-button {
  width: 100%;
  padding: 0.75rem; /* 12px */
  border: none;
  border-radius: 0.3125rem; /* 5px */
  font-family: "Righteous", sans-serif;
  background: linear-gradient(135deg, #27caf3 0%, #005eff 100%);
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 0.625rem; /* 10px */
}

.login-button:hover {
  background-color: #0e63e2;
}

/* -------------------------------------- */
/* MEDIA QUERY: RESPONSIVE MÓVILES */
/* -------------------------------------- */

/* Estilos aplicados cuando la pantalla mide 600px o menos */
@media (max-width: 600px) {
  /* El contenedor principal simula una vista de aplicación */
  .login-container {
    padding: 0; /* Quita el padding exterior */
    background: #fdfdfd; /* Fondo blanco liso */
    align-items: flex-start; /* Mueve el formulario arriba */
    min-height: auto;
  }

  /* La caja del formulario se expande y pierde los adornos de tarjeta */
  .login-box {
    padding: 1.5rem; /* 24px de padding interno */
    margin-top: 2rem; /* 32px de espacio superior */
    width: 100%;
    max-width: 100%;
    box-shadow: none; /* Elimina la sombra */
    border-radius: 0; /* Elimina el borde redondeado */
    border: none;
  }

  .login-box h2 {
    font-size: 1.7rem; /* Ajuste sutil del tamaño */
    text-align: left;
  }

  .input-group input {
    padding: 1rem; /* Aumenta el padding para un mejor toque táctil (16px) */
  }
}