* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body, html {
  height: 100%;
}

.container {
  display: flex;
  height: 100vh;
}

/* Mitad izquierda */
.left-side {
  width: 60%;
  background: url('../img/14571534_5479108 (1).jpg') no-repeat center center/cover;
  position: relative;
}

.left-side .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ✅ coloca el contenido abajo */
  align-items: center;
  text-align: center;
  padding-bottom: 30px; /* ✅ separa el texto 30px del borde inferior */
}


.right-side h1 {
  font-size: 3rem;
  text-align: center; /* ✅ centra el texto horizontalmente */
}

.left-side p {
  font-size: 1.2rem;
  font-style: oblique; /* ✅ hace que el texto sea oblicuo */
}


/* Mitad derecha */
.right-side {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f7f7;
  
}

.login-box {
  width: 80%;
  max-width: 600px;
  
  padding: 40px;
  border-radius: 4px;
 
}

.login-box h2 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
}

button {
  width: 100%;
  padding: 12px;
  background: #007BFF;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #0056b3;
}

#error-message {
  color: red;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 1000px) {
  .container {
    flex-direction: column;
  }

  .left-side {
    display: none;
  }

  .right-side {
    height: 100vh;
    width: 100%;
    
  }

  /* 🔧 Ajuste de padding en móvil */
  .login-box {
    width: 100%;
    padding: 20px; /* ✅ reduce el espacio lateral en móviles */
  }
  
  .input-group input {
    padding: 14px;      /* antes 10px → más alto y táctil */
    font-size: 16px;    /* texto más legible */
    border-radius: 10px; /* bordes más suaves */
  }
  
}

@media (max-width: 500px) {
  .right-side {
    justify-content: flex-start;   /* 👈 coloca el contenido hacia arriba */
    align-items: center;           /* 👈 mantiene centrado horizontalmente */
    padding-top: 0px;             /* 👈 un poco de espacio arriba */
    padding-bottom: 100px;         /* 👈 más espacio abajo */
  }}