@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* Get rid of all default margins/paddings. Set typeface */
body {
  box-sizing: border-box;
  margin: 100;
  padding: 0;
  background-color: white;
  font-family: "lato", sans-serif;
}

/* Puts the form in the center both horizontally and vertically. Sets its height to 100% of the viewport's height */

/*
.delegados {
//  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
*/

.signupFrm {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}



.form {

//  background:linear-gradient(to bottom, #8B2394, #DBC9F5);
  background-color: white;
  width: 400px;
  border-radius: 8px;
  padding: 20px 40px;
  box-shadow: 0 10px 25px rgba(92, 99, 105, .2);

}

.title {
  font-size: 20px;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 15px;
  margin-bottom: 20px;
}

.subtitlemin {
  font-size: 10px;
  margin-bottom: 50px;
}

.inputContainer {
  position: relative;
  height: 45px;
  width: 90%;
  margin-bottom: 17px;
}

.direcContainer {
  position: relative;
  height: 45px;
  width: 90%;
  margin-bottom: 80px;
}

.logo {
  max-width:35%;
  height: auto;
  opacity: 0,1;
}


/* Style the inputs */

.input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid #DADCE0;
  border-radius: 7px;
  font-size: 16px;
  padding: 0 20px;
  outline: none;
  background: none;
  z-index: 1;
}

/* Hide the placeholder texts (a) */

::placeholder {
  color: transparent;
}


/* Styling text labels */

.label {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 0 4px;
  background-color: white;
  color: #A4A5A9;
  font-size: 16px;
  transition: 0.5s;
  z-index: 0;
}

.input:focus + .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
  color: #EA1680;
}

.input:focus {
  border: 2px solid #EA1680;
}
.input:not(:placeholder-shown)+ .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
}


/* Estilos para el textarea */

#obssocio, #direc {
  width: 100%;
  min-height: 100px; /* Asegura que tenga una altura mínima */
  padding: 10px;
  border: 1px solid #DADCE0;
  font-size: 16px;
  border-radius: 7px;
  box-sizing: border-box;
  resize: none; /* Evita el cambio de tamaño */

  margin-top: 10px; /* Espacio entre el textarea y los inputs anteriores */
  margin-bottom: 70px; /* Espacio entre el textarea y el botón */

}

#obssocio, #direc:focus {
  border: 2px solid #EA1680;
}
#obssocio, #direc:not(:placeholder-shown)+ .label {
  top: -7px;
  left: 3px;
  z-index: 10;
  font-size: 14px;
  font-weight: 600;
}

/* Estilo de Botones */

.submitBtn {
  display: block;
  margin-left: auto;
  padding: 15px 30px;
  border: none;
  background-color: #EA1680;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 80px;
}

.submitBtn:hover {
  background-color: #FC0F86;
  transform: translateY(-2px);
}

.cancelBtn {
  display: block;
  margin-left: auto;
  padding: 15px 30px;
  border: none;
  background-color: #000000;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 30px;
}

.cancelBtn:hover {
  background-color: #252525;
  transform: translateY(-2px);
}
// **************************************************


.contenedor {
 display: flex;
justify-content:center;
}

.boton {
//  display: block;
//  margin-left: auto;
  padding: 15px 30px;
  border: none;
  background-color: #EA1680;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
}

.boton:hover {
  background-color: #FC0F86;
  transform: translateY(-2px);
}


// ***************************************************
/* Estilo de imagen - Logo */
/*-- Mostrar Contraseña en formularios */

.password-icon {
        float: right;
        position: relative;
        margin: -25px 10px 0 0;
        cursor: pointer;
    }

 #toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* La consulta de medios no se muestra aquí. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Mostrar en la parte superior derecha del contenedor */
  position: absolute;
  top: 0;
  right: 0;
}

.calculaFrm {
  display: block;
  justify-content: center;
  align-items: center;
  height: 40vh;
}