@font-face {
  font-family: 'Josefin-Light';
  src: url('../Fonts/Josefin_Sans/static/JosefinSans-Light.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Josefin-Regular';
  src: url('../Fonts/Josefin_Sans/static/JosefinSans-Regular.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Josefin-Medium';
  src: url('../Fonts/Josefin_Sans/static/JosefinSans-Medium.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Josefin-SemiBold';
  src: url('../Fonts/Josefin_Sans/static/JosefinSans-SemiBold.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Josefin-Bold';
  src: url('../Fonts/Josefin_Sans/static/JosefinSans-Thin.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

html, body{
  height: 100%;
}
/*Nubes flotantes*/
.nubeS {
  position: absolute;
  opacity: 0.8;
  z-index: 100;
  width: 300px;
  pointer-events: none; 
}
body {
  margin: 0;
  background-color: #f2dce4;
  font-family: 'Josefin-Regular', sans-serif;
  position: relative;
  overflow-x: hidden;   
}

.login{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
  height: 100%;

}
.ladoizquierda img{
  max-width: 432px;
  height: auto;

}

.ladoderecha{
  text-align: center;
}

.login-box{
  padding-top: 25px;
}
.decor {
  position: absolute;
  z-index: -1;
}
.decor-top-leftw {
  top: -70px;
  width: 271px;
  left: -45px;
}
.decor-bottom-rightw {
  bottom: -5px;
  right: -38px;
  max-width: 215px; 
}
.decor-top-right {
  top: -44px;
  width: 313px;
  right: -38px;
}
.login-box h2 {
  font-family: 'Satisfy', cursive;
  font-weight: 400;
  font-size: 5rem;
  color: #d19393;
}

.subtitle {
  font-family: 'Josefin-Regular';
  color: #eaa1a3;
  font-size: 20px;
}
/* Formulario */
.input-group {
  display: flex;
  align-items: center;
  border-bottom: 3px solid #d297a3;
  margin-bottom: 30px;
  padding: 5px 0;
}

.cloud-container {
  position: fixed;   /* ocupa siempre toda la pantalla */
  top: 0;
  left: 0;
  width: 100vw;      /* ancho completo */
  height: 100vh;     /* alto completo */
  overflow: hidden;  /* oculta lo que se salga */
  z-index: 0;        /* detrás del login */
}

.contenedor.login {
  position: relative;
  z-index: 1;  /* login encima de las nubes */
}

.nubeS {
  position: absolute;
}


.input-group .icon {
  font-size: 1.2rem;
  margin-right: 10px;
  color: #d19393;
  min-width: 25px; 
  text-align: center;
}

.input-group input{
  border: none;
  outline: none;
  font-family: 'Josefin-Regular';
  background: none;
  flex: 1;
  font-size: 1rem;
  color: #d19393;
  padding: 8px 0;
}
#formLogin{
  padding: 39px 0px;
}
.input-group input::placeholder {
  color: #d19393;
  font-size: 20px;
  opacity: 1; 
}

button {
  background: #eaa1a3;
  color: #ffffff;
  border: none;
  padding: 7px 10px;
  width: 55%;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  font-family: 'Josefin-SemiBold';
}

button:hover {
  background: #d297a3;
}
.alerta-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #f5c6cb;
    text-align: center;
    font-size: 14px;
}

/* Tablets y laptops pequeñas */


@media (max-width: 1440px) {
  .decor-bottom-rightw {
    /*bottom: -16px;*/
    right: -37px;
    max-width: 215px;
}
}

@media (max-width: 1024px) {
  .login {
    gap: 4rem; 
  }
  .login-box h2 {
    font-size: 3.5rem;
  }
  .ladoizquierda img {
    max-width: 300px;
  }
}

/* Celulares */
@media (max-width: 768px) {
  .login {
    flex-direction: column; 
    gap: 2rem;
    text-align: center;
    align-items: center;
    height: auto;
  }
  .ladoizquierda{
    order: 2;
  }
  .ladoizquierda img {
    max-width: 220px;
  }

  .login-box h2 {
    font-size: 2.5rem;
  }
  .ladoderecha{
    order: 1;
  }
  button {
    width: 80%; 
  }

  .nubeS {
    display: none;
    width: 150px;
  }

  .decor{
    display: none;
  }
}

@media (max-width: 1024px) {
  .decor-bottom-rightw {
    /*bottom: -144px;*/
    right: -37px;
    max-width: 215px;
  }
  .content-cloud{
    max-width: 200px;
  }
}