* {
    margin: 0; /* elimina márgenes por defecto en todos los elementos */
    padding: 0; /* elimina relleno por defecto */
    box-sizing: border-box; /* incluye borde y relleno en el tamaño total */
}

/* estilo del body */
body {
    font-family: arial; /* usa la fuente arial para todo el texto */
    min-height: 100vh; /* asegura que el cuerpo ocupe al menos toda la altura de la pantalla */
    background: rgba(0, 0, 0, 0.5); /* fondo negro con transparencia */
    display: flex; /* activa flexbox para organizar elementos */
    flex-direction: column; /* organiza los elementos en columna */
    align-items: center; /* centra horizontalmente */
    justify-content: center; /* centra verticalmente */
    opacity: 0; /* comienza invisible */
    transform: translateY(100px); /* desplazamiento hacia abajo */
    animation: slideupfade 1s ease-out forwards; /* animación de entrada suave */
}

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

/* enlaces principales */
a {
    text-decoration: none; /* sin subrayado */
    color: #8b0000; /* color rojo oscuro */
    font-weight: 600; /* texto seminegrita */
    transition: color 0.3s; /* transición suave al cambiar color */
}

/* efecto hover en enlaces */
a:hover {
    color: #a00000; /* rojo más brillante al pasar el mouse */
    text-decoration: underline; /* subraya el texto al pasar el mouse */
}

/* video de fondo */
.video {
    position: fixed; /* posición fija en la pantalla */
    top: 0; /* desde el borde superior */
    left: 0; /* desde el borde izquierdo */
    width: 100%; /* ocupa todo el ancho */
    height: 100%; /* ocupa toda la altura */
    object-fit: cover; /* cubre el área sin deformarse */
    z-index: -1; /* se coloca detrás de todo el contenido */
}

/* enlaces secundarios (sobrescribe los anteriores) */
a {
    text-decoration: none; /* sin subrayado */
    color: white; /* color blanco */
}

/* efecto hover en enlaces secundarios */
a:hover {
    text-decoration: none; /* mantiene sin subrayado */
    color: white; /* mantiene color blanco */
}

/* botones generales */
button {
    padding: 5% 6px; /* espaciado interno vertical y horizontal */
    border-radius: 8px; /* bordes redondeados */
    cursor: pointer; /* cursor tipo mano al pasar el mouse */
    letter-spacing: 1px; /* espacio entre letras */
    box-shadow: 0 2px 8px hwb(0 0% 100%); /* sombra blanca suave */
    background-color: hsl(0, 0%, 100%); /* fondo blanco */
    background: lch(0% 0 0 / 0.777); /* fondo oscuro semitransparente */
    margin-top: 5px; /* margen superior */
    transition: all 0.3s ease; /* transición suave para todos los cambios */
}

/* efecto hover en botones */
button:hover {
    background: #a00000; /* cambia el fondo a rojo oscuro */
    transform: translateY(-2px); /* se eleva ligeramente */
    box-shadow: 0 6px 20px rgba(139, 0, 0, 0.5); /* sombra más intensa */
}

/* contenedor del formulario */
.recuperar {
    width: 90%; /* ocupa el 90% del ancho disponible */
    max-width: 400px; /* ancho máximo de 400px */
    margin: 2rem auto; /* centrado con margen vertical */
    padding: 2.5rem; /* espaciado interno */
    color: white; /* texto blanco */
    background-color: rgba(0, 0, 0, 0.449); /* fondo oscuro semitransparente */
    border-radius: 10px; /* bordes redondeados */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 40px rgba(139,0,0,0.18); /* sombras combinadas */
}

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

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

/* campos de entrada */
.controls {
    width: 100%; /* ocupa todo el ancho disponible */
    padding: 1rem; /* espaciado interno */
    margin-bottom: 1rem; /* espacio inferior entre campos */
    border: 1px solid rgba(139, 0, 0, 0.5); /* borde rojo transparente */
    border-radius: 8px; /* bordes redondeados */
    font-size: 1rem; /* tamaño del texto */
    background: rgba(0, 0, 0, 0.599); /* fondo oscuro semitransparente */
    color: white; /* texto blanco */
    transition: all 0.3s ease; /* transición suave */
}

/* color del texto del placeholder */
::placeholder {
    color: #fffffffa; /* blanco con opacidad */
}

/* efecto hover en campos de entrada */
.controls:hover {
    background: rgba(40, 40, 40, 0.9); /* fondo más claro */
    transform: translateY(-2px); /* se eleva ligeramente */
    box-shadow: 0 5px 15px rgba(139, 0, 0, 0.3); /* sombra roja suave */
    border-color: #8b0000; /* cambia el borde a rojo oscuro */
}

/* botón principal */
.boton {
    width: 100%; /* ocupa todo el ancho */
    padding: 1rem; /* espaciado interno */
    background: #8b0000; /* fondo rojo oscuro */
    color: white; /* texto blanco */
    border: none; /* sin borde */
    border-radius: 8px; /* bordes redondeados */
    cursor: pointer; /* cursor tipo mano */
    font-weight: 600; /* texto seminegrita */
    margin: 5% 0; /* margen vertical */
    transition: all 0.3s ease; /* transición suave */
    text-transform: uppercase; /* convierte el texto en mayúsculas */
    letter-spacing: 1px; /* espacio entre letras */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* sombra suave */
}

/* efecto hover en botón principal */
.boton:hover {
    background: #a00000; /* rojo más brillante */
    transform: translateY(-2px); /* se eleva ligeramente */
    box-shadow: 0 6px 20px rgba(139, 0, 0, 0.5); /* sombra más intensa */
}

/* texto dentro del login */
.recuperar p {
    height: 40px; /* altura fija */
    text-align: center; /* texto centrado */
    border-radius: 10%; /* bordes redondeados */
}

/* efecto hover en párrafos */
.recuperar p:hover {
    color: #f39c12; /* cambia a dorado */
}

/* pie de página */
.pie {
    width: 100%; /* ocupa todo el ancho */
    text-align: center; /* texto centrado */
    padding-top: 5%; /* espacio desde el borde inferior */
    left: 0; /* alineado a la izquierda */
    z-index: 2; /* se muestra sobre el fondo */
    color: white; /* texto blanco */
    transition: color 0.3s ease; /* transición suave de color */
    text-shadow: black 0.1em 0.1em 0.2em; /* sombra para contraste */
    font-size: clamp(12px, 1.5vw, 14px); /* tamaño adaptable a pantalla */
}

/* efecto hover en pie de página */
.pie:hover {
    color: #f39c12; /* cambia a dorado */
}

/* botón para generar código */
.boton-generar {
    background: linear-gradient(135deg, #8b0000, #a52a2a) !important; /* degradado rojo oscuro */
    transition: all 0.3s ease !important; /* transición suave */
    font-weight: bold !important; /* texto en negrita */
}

/* efecto hover en botón generar */
.boton-generar:hover {
    background: linear-gradient(135deg, #a52a2a, #8b0000) !important; /* aplica un degradado inverso */
}