/* From Uiverse.io by Rohankumar620 */

.formu {
/* display: flex; */
flex-direction: column;
font-family: 'Myriad Pro', sans-serif;
gap: 100px;
background-image: url(https://th.bing.com/th/id/R.e71dad9835dc81e9c631736fcb31063a?rik=hw91lp9QCKB9kw&pid=ImgRaw&r=0);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin: 0px auto;
}

.contenedori {
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px; /* Efecto 3D */
margin: 2rem auto; /* Cambiado a rem para mejor escalabilidad */
padding: 1rem;
}

/* Contenedor que agrupa ambos formularios y permite la rotación */
.form_wrapi {
position: relative;
width: 100%; /* Cambiado a porcentaje para flexibilidad */
max-width: 380px; /* Limita el ancho máximo */
height: auto; /* Altura automática para adaptarse al contenido */
width: 350px;
height: 250px;
transform-style: preserve-3d;
transition: transform 1s ease;
color: black;
padding: 1rem;
}

/* Estilos base para los formularios */
.formula {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.2rem;
background-color: rgba(255, 255, 255, 0.493);/* padding: 65px 45px; */
padding: 1.5rem; /* Cambiado a rem para mejor escalabilidad */
border-radius: 8px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
backface-visibility: hidden;
}
/* 
 Estilos para el formulario de inicio de sesión */
.formula_formulas {
z-index: 2;
}

/* Estilos para el formulario de registro */
.formula_back {
transform: rotateY(180deg);
}

/* Efecto de rotación cuando se activa el checkbox */
.contanedori #signup_toggles:checked + .form_wrapi {
transform: rotateY(180deg);
} 

/* Estilos para los inputs */
.inputts {
width: 100%;
max-width: 245px;
min-height: 45px;
color: black;
outline: none;
transition: 0.35s;
padding: 0 05.rem;
background-color: #0f3b53e8;
border-radius: 6px;
border: none;
}

.inputts::placeholder {
color: white;
opacity: 0.8; /* Añadido para mejor legibilidad */
}

/* Botón */
.bttn {
padding: 0.625rem 2.1875rem;
background-color: #0f3b53e8;
border-radius: 6px;
color: white;
font-size: 1rem;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

/* Texto de cambio de formulario */
.switchss {
font-size: 13px;
color: rgb(0, 0, 0);
}

.switchss .signup_tog {
font-weight: 700;
cursor: pointer;
text-decoration: underline;
}

/* Ocultar checkbox */
#signup_toggles {
display: none;
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
  .formu {
      gap: 3rem; /* Reducido el gap para pantallas más pequeñas */
  }

  .formss {
      padding: 1rem; /* Reducido el padding para pantallas más pequeñas */
  }

  .input, .inputts {
      min-height: 40px; /* Reducido la altura para pantallas más pequeñas */
  }

  .bttn {
      padding: 0.5rem 1.5rem; /* Reducido el padding para pantallas más pequeñas */
  }
}

@media (max-width: 480px) {
  .formu {
      gap: 2rem; /* Reducido el gap para pantallas muy pequeñas */
  }

  .formss {
      padding: 0.75rem; /* Reducido el padding para pantallas muy pequeñas */
  }

  .input, .inputts {
      min-height: 35px; /* Reducido la altura para pantallas muy pequeñas */
  }

  .bttn {
      padding: 0.5rem 1rem; /* Reducido el padding para pantallas muy pequeñas */
  }

  .switchss {
      font-size: 0.75rem; /* Reducido el tamaño de la fuente para pantallas muy pequeñas */
  }
}