html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}
body::before {
  content: "";
  position: absolute;
  top: 0rem;
  left: 31%;
  width: 35%;
  height: 21%;
  background-image: url('/assets/img/fondologin.png');
  background-size:contain;
  background-position: right;
  background-repeat: no-repeat;
  filter: blur(1px);
  z-index: -1;
}
/* Media query para pantallas medianas (tablets) */
@media (max-width: 768px) {
  body::before {
    width: 60%;
    left: 55%;
    transform: translateX(-55%);
  }
}

/* Media query para pantallas pequeñas (celulares) */
@media (max-width: 576px) {
  body::before {
    width: 90vw; /* Reducido ligeramente para mejor ajuste */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste perfecto al centro */
    top: 3vh; /* Mantener margen superior */
  }
}
h1 {position: relative;
  top: clamp(-90px, -90px + 10vw, 0px);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2em, 2vw, 2vw); /* Mínimo 2em, adaptable a la pantalla, máximo 4em */
  font-weight: 400;
  color: #313131;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
  padding-bottom: clamp(1rem, 1vw, 4rem);
}
.card{background-color: #ffffff63;}

label{
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.75rem);
  color: #666565;
}

input.form-control {
  color: black;
background-color: transparent; /* Hace el fondo transparente */
border: none; /* Elimina los bordes predeterminados */
border-bottom: 1px solid #2a58ff; /* Borde inferior negro */
border-left: 1px solid #2a58ff; /* Borde izquierdo negro */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sobre los bordes */
padding-left: 10px; /* Espaciado interno para que el texto no esté pegado al borde izquierdo */
/*font-size: 1.25rem;*/
font-size: clamp(1em, 1.5em, 1.5em); 
}

/* Cuando el input está enfocado */
input.form-control:focus {
color: black;
background-color: transparent; /* Hace el fondo transparente */
border: none; /* Elimina los bordes predeterminados */
border-top: 1px solid rgb(149, 1, 255); /* Borde inferior negro */
border-right: 1px solid rgb(149, 1, 255); /* Borde izquierdo negro */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sobre los bordes */
padding-left: 10px; /* Espaciado interno para que el texto no esté pegado al borde izquierdo */
font-size: 1.25rem;
}
a{
color: black;
display: inline-block;
padding-top: .5rem;  
font-size: clamp(1em, 1.5em, 1.5em); 
}
button{
width: 200px;
height: 50px;
font-size: 1.5rem !important;
}
button {
width: 200px;
height: 50px;
font-size: 1.5rem !important;
font-weight: bold;
color: white;
background: linear-gradient(135deg, #8690b7, #44374f); /* Degradado azul-violeta */
border: none;
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra elegante */
transition: all 0.3s ease-in-out;
}

/* Efecto hover */
button:hover {
background: linear-gradient(135deg, #002afc, #181f09); /* Cambio de dirección en hover */
transform: scale(1.05); /* Ligera ampliación */
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

/* Efecto cuando se presiona */
button:active {
transform: scale(0.98);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}