html {
    font-family: sans-serif; /* Define la fuente predeterminada de la página como sans-serif */
}

body::before {
    content: ""; /* Inserta un contenido vacío */
    position: absolute; /* Posiciona de forma absoluta respecto al body */
    width: 100%; /* Cubre todo el ancho */
    height: 100%; /* Cubre toda la altura */
    background: url("img/eva12.webp"), #000; /* Imagen de fondo sobre fondo negro */
    background-position: center; /* Centra la imagen */
    background-size: cover; /* Ajusta la imagen para cubrir el área */
    z-index: -1; /* Coloca el pseudo-elemento detrás del contenido del body */
}

body {
    width: 100%; /* Establece que el cuerpo ocupa todo el ancho de la ventana */
    display: flex; /* Usa flexbox para organizar su contenido */
    align-items: center; /* Centra verticalmente los elementos hijos */
    justify-content: center; /* Centra horizontalmente los elementos hijos */
    min-height: 100vh; /* Hace que el cuerpo tenga al menos el alto de la ventana */
    color: white; /* Color de texto blanco */
    margin: 0; /* Elimina márgenes exteriores */
}

.wrapper {
    width: 490px; /* Ancho fijo de 490px */
    border-radius: 8px; /* Bordes redondeados */
    padding: 8px; /* Espaciado interno */
    text-align: center; /* Centra el texto */
    border: 1px solid #ffffff80; /* Borde blanco semitransparente */
    backdrop-filter: blur(8px); /* Aplica un desenfoque al fondo */
}

form {
    display: flex; /* Flexbox para el formulario */
    flex-direction: column; /* Organiza los elementos en columna */
    width: 100%; 
}

h2 {
    font-size: 2.5rem; /* Tamaño de fuente grande para el título */
    margin-bottom: 20px; /* Espacio debajo del título */
    color: #965fd4; /* Color morado */
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18, 2px 2px 2px rgba(124,58,206,0); /* Sombra colores neon */
}

.input-field {
    position: relative; /* Contenedor relativo para posicionar el label */
    width: 100%; 
    margin: 20px 0px; /*Margen superior/inferior a 20 y derecha/izquierda a 0 */
}

/* Estilo inicial del input */
.input-field input {
    width: 90%;
    margin: 10px 15px; /*Margen superior/inferior a 10 y derecha/izquierda a 15 */
    padding: 12px 0 5px 0;
    font-size: 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #ccc; /* Borde base gris claro */
    color: #965fd4;
    outline: none;
    box-sizing: border-box; /* MUY IMPORTANTE para que padding no desborde */
}

/* Estilo del label */
.input-field label {
    display: block;
    text-align:left;
    position: absolute;
    margin: 10px 15px; /*Margen superior/inferior a 10 y derecha/izquierda a 15 */
    top: 12px;
    left: 15px;
    color: #ccc;
    transform: translateY(-50%);
    transition: 0.2s ease all;
    pointer-events: none;
    font-size: 16px;
}

.input-field::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #aeee39; /* Color verde lima */
    transition: 0.3s ease all;
    transform: translateX(-50%);
}

/* Al hacer foco en el input o cuando tiene contenido */
.input-field input:focus ~ label,
.input-field input:not(:placeholder-shown) ~ label {
    top: -10px; /* El label sube */
    font-size: 12px; /* Y se hace más pequeño */
    color: #aeee39; /* Cambia a verde lima */
}

/* Al hacer foco, la línea se expande */
.input-field input:focus ~ .input-field::after {
    width: 100%;
}

.forget {
    display: flex; /* Flexbox para organizar elementos */
    align-items: center; /* Alinea verticalmente */
    justify-content: space-evenly; /* Espacia los elementos */
    margin: 25px 0 35px 0; /* Margen superior, cero en laterales y 35px abajo */
    color: #fff; /* Color blanco */
}

.forget label {
    display: flex; /* Flexbox en el label */
    align-items: center; /* Alinea el contenido verticalmente */
}

#remember {
    accent-color: #aeee39; /* Color blanco para el checkbox */
}

a {
    color: rgb(166, 238, 57); /* Color verde para los enlaces */
}

.forget label a {
    margin-left: 8px; /* Separación entre el checkbox y el enlace */
}

.wrapper p {
    color: #efefef; /* Color gris claro */
   
}

.register {
    text-align: center; /* Centra el contenido */
    margin-top: 30px; /* Margen superior */
    color: #fff; /* Color blanco */
}

button {
    background-color: rgb(166, 238, 57); /* Color de fondo verde */
    margin: 20px; /*Margen alrededor*/
    color: #000; /* Texto negro */
    font-weight: 600; /* Fuente en negrita */
    border: none; /* Sin borde */
    padding: 12px 20px; /* Espaciado interno */
    cursor: pointer; /* Cursor tipo mano al pasar encima */
    border-radius: 3px; /* Bordes ligeramente redondeados */
    font-size: 16px; /* Tamaño de fuente */
    border: 2px solid transparent; /* Borde invisible (para efectos futuros) */
    transition: 0.3s ease; /* Transición suave en cambios */
}

button:hover{
    background: url("img/evaojo.jpg"), #000 no-repeat; /* Imagen de fondo sobre fondo negro */
    background-position: center; /* Centramos la imagen */
    background-size: cover; /* Que la imagen ocupe el espacio del contenedor */
    color: #aeee39; /* Color letra para verse con la imagen de fondo */

}