/* =====================================================
   LOGIN PAGE
===================================================== */

.login-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ================= IZQUIERDA ================= */

.login-left {
  flex: 1;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}


.login-box {
  max-width: 420px;
  width: 100%;

}

.login-box h2,
.login-box p {
  text-align: center;
}

.login-box h2 {
  font-weight: 800;
  margin-bottom: 15px;
}

.login-box p {
  color: #666;
  margin-bottom: 30px;
}

/* Marca */

.brand {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.brand strong {
  font-weight: 800;
}

.brand span {
  color: #c7ff3d;
  font-weight: 800;
}

/* Botón principal */

.btn-login {
  border-radius: 8px;
  padding: 10px;
  transition: 0.3s ease;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Divider */

.divider {
  text-align: center;
  margin: 25px 0;
  color: #999;
  position: relative;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #ddd;
}

.divider::before { left: 0; }
.divider::after { right: 0; }

/* Botones sociales */

.social-btn {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;  
  gap: 12px;                    
  padding: 10px 15px;
  font-weight: 500;
  transition: 0.3s ease;
  background: #fff;
  border: 1px solid #ddd;
}

.social-btn i {
  font-size: 18px;
}

/* Colores oficiales */

.google-btn i {
  color: #DB4437;   /* Google rojo */
}

.facebook-btn i {
  color: #1877F2;   /* Facebook azul */
}

.social-btn:hover {
  background: #f3f3f3;
  transform: translateY(-2px);
}



/* ================= DERECHA ================= */

.login-right {
  flex: 1;
  background: #c7ff3d;
  display: flex;
  align-items: center;
  justify-content: flex-start;  
  overflow: hidden;
  padding-left: 0;          
}


.login-right img {
  width: 90%;
  max-width: 500px;
  transform: translateX(112px);
}



.login-footer {
  display: none;
}



/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {

  .login-wrapper {
    flex-direction: column;
  }

  
  .login-right {
    display: none;   
  }



  .login-left {
    padding: 40px 25px;
  }

  
   .login-footer {
    display: block;
  }

}