/* reinicio general */
* {
    margin: 0; /* elimina márgenes por defecto */
    padding: 0; /* elimina padding por defecto */
    box-sizing: border-box; /* incluye el padding y borde en el tamaño total del elemento */
}

/* estilo del body */
body {
    font-family: arial; /* fuente principal */
    min-height: 100vh; /* ocupa al menos toda la altura de la pantalla */

    /* fondo */
    background-image: url('../img/fondo.webp'); /* imagen de fondo */
    background-size: cover; /* cubre toda la pantalla */
    background-attachment: fixed; /* fondo fijo al hacer scroll */
    background-position: center 70%; /* ajusta la posición del fondo un poco hacia abajo */
    background-repeat: no-repeat; /* evita que se repita la imagen */

    /* centrar el contenido */
    display: flex; /* usa flexbox */
    flex-direction: column; /* organiza en columna */
    align-items: center; /* centra horizontalmente */
    justify-content: center; /* centra verticalmente */

    /* animación de aparición */
    transform: translateY(100px); /* desplaza hacia abajo al inicio */
    animation: slideupfade 1s ease-out forwards; /* animación de entrada suave */
}

/* animación de aparición */
@keyframes slideupfade {
    to {
        opacity: 1; /* termina visible */
        transform: translateY(0); /* vuelve a su posición original */
    }
}

/* contenedor del formulario de login */
.login {
    width: 90%; /* ocupa 90% del ancho disponible */
    max-width: 400px; /* no supera 400px */
    margin: 2rem auto; /* centrado con margen */
    padding: 2rem; /* espaciado interno */
    color: white; /* texto blanco */
    background: lch(0% 0 0 / 0.247); /* fondo negro muy transparente */
    border-radius: 10px; /* bordes redondeados */
    box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.847); /* sombra alrededor */
}

/* título del login */
.login h5 {
    text-align: center; /* centrado */
    margin-bottom: 1.5rem; /* espacio inferior */
    padding-bottom: 1rem; /* espacio interior debajo del texto */
    border-bottom: 1px solid white; /* línea inferior blanca */
    font-size: 1.5rem; /* tamaño del texto */
}

/* efecto al pasar el cursor por el título */
h5:hover {
    cursor: pointer; /* cursor tipo mano */
    color: #f39c12; /* cambia a color dorado */
}

/* campos de entrada */
.controls {
    width: 100%; /* ocupa todo el ancho del contenedor */
    padding: 5px; /* espaciado interno */
    margin-bottom: 1rem; /* espacio entre campos */
    border: 9px solid hwb(0 100% 0%); /* borde blanco */
    border-radius: 4px; /* bordes redondeados */
    font-size: 1rem; /* tamaño del texto */
    background: white; /* fondo blanco */
    border-radius: 2%; /* bordes suavizados */
    box-shadow: 0 0 4px 1px lab(100% 0.01 -0.01 / 0.744); /* sombra suave */
}

/* color del texto dentro del placeholder */
::placeholder {
    color: black; /* texto gris oscuro */
}

/* efecto hover en los campos de entrada */
.controls:hover {
    transform: translateY(-2px); /* se eleva ligeramente */
}

/* botón de envío */
.boton {
    width: 100%; /* ocupa todo el ancho */
    padding: 0.8rem; /* espaciado interno */
    background: rgba(0, 0, 0, 0.7); /* fondo negro semitransparente */
    color: white; /* texto blanco */
    border: none; /* sin borde */
    border-radius: 5px; /* bordes redondeados */
    cursor: pointer; /* cambia el cursor al pasar */
    font-size: 1rem; /* tamaño del texto */
    margin: 1rem 0; /* espaciado vertical */
    box-shadow: 0 0 4px 1px hwb(0 0% 100% / 0.547); /* sombra blanca suave */
}

/* efecto hover del botón */
.boton:hover {
    background-color: #121212ee; /* fondo más oscuro */
    transform: translateY(-2px); /* se eleva ligeramente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* sombra más pronunciada */
}

/* texto y enlaces del login */
.login p {
    height: 40px; /* altura del contenedor */
    text-align: center; /* centra el texto */
    border-bottom: 1px solid; /* línea inferior */
    border-radius: 10%; /* bordes redondeados */
}

.login a {
    color: white; /* texto blanco */
    text-decoration: none; /* sin subrayado */
    font-size: 14px; /* tamaño pequeño */
}

/* efecto hover en los enlaces */
.login a:hover {
    text-decoration: underline; /* subrayado */
    color: #fbf8f8c5; /* blanco más suave */
    text-shadow: 0.1em 0.1em 0.2em hwb(0 5% 16%); /* brillo ligero */
}

/* pie de página */
.pie {
    width: 100%; /* ocupa todo el ancho */
    text-align: center; /* centra el texto */
    position: fixed; /* fija en la parte inferior */
    bottom: 20px; /* separado 20px del borde inferior */
    left: 0; /* alineado a la izquierda */
    z-index: 2; /* prioridad de visualización */
    color: white; /* texto blanco */
    padding: 20px; /* espaciado interno */
    transition: color 0.3s ease; /* transición suave del color */
    text-shadow: black 0.1em 0.1em 0.2em; /* sombra para legibilidad */
    font-size: clamp(12px, 1.5vw, 14px); /* tamaño de fuente adaptable */
}

/* efecto hover en el pie */
.pie:hover {
    color: #f39c12; /* cambia a color dorado */
}

/* estilos para el formulario de registro */
#registroform {
    animation: fadein 0.5s ease-in; /* animación de entrada suave */
}

/* animación de entrada para el formulario */
@keyframes fadein {
    from {
        opacity: 0; /* comienza invisible */
        transform: translateY(-20px); /* desplazado hacia arriba */
    }
    to {
        opacity: 1; /* termina visible */
        transform: translateY(0); /* vuelve a su posición original */
    }
}

/* mejora visual para los enlaces de alternancia */
.login p a {
    color: #f39c12; /* color dorado */
    font-weight: bold; /* texto en negrita */
}

.login p a:hover {
    color: #e67e22; /* naranja más intenso */
    text-decoration: underline; /* subrayado al pasar el mouse */
}