*{
    font-family:Arial, Helvetica, sans-serif; /*aplicando la fuente a toda la pagina*/
    margin: 0; /*eliminando el margen por defecto de los elementos*/
    box-sizing: border-box; /*haciendo que el padding y el borde se incluyan en el tamaño total de los elementos*/
}

/*----------dandole estilo al cuerpo de manera general------------*/
body{
    background-image: url('../imagenes/fondo.png'); 
    background-size: cover; /*ajustamos la imagen para que cubra toda la pantalla*/
    background-repeat: no-repeat; /*evitamos que la imagen se repita*/
    display: flex; /* haciendo que el cuerpo sea un contenedor flexible para */
    flex-direction: column; /* organizando los elementos en columna */
    align-items: stretch; /* los elementos se estiran para ocupar el ancho disponible */
    min-height: 100vh; /*hacemos que el cuerpo tenga al menos la altura de la pantalla*/
    
}

/*-----------MODIFICACION EN EL HEADER---------------------*/
/*modificacion para los elemenetos del header*/
header{
    gap: 1em; 
    background-color: rgb(162, 167, 157);
    padding: 0.5em 1em;
    /*activando el modo flex*/
    display: flex;
    align-items: center; 
}
/*redimensionar el logo de la caja*/
.cajaLogo{
    width: 8rem;
    max-width: 100px; /* límite en pantallas grandes */
    height: auto;
}

/*----------------modificando el formulario-------------------*/

/*modificacion para el formulario general*/
.formularioCompleto{
    display: flex; /* centramos el formulario */
    justify-content: center; /* contenedor principal centrado */
    flex: 1; /* el formulario ocupa el espacio disponible para empujar el footer hacia abajo */
}

/*modificacion para el formulario de inicio de sesion*/
form{
    background-color: none; /* que el fomrulario no tenga fondo */
    border-radius: 20px; 
    margin: 30px auto;
    padding: 1.25rem;
    width: 90%; /* ancho fluido */
    max-width: 480px; /* tope para pantallas grandes */
    /*activando el modo flex*/
    display: flex;
    align-items: center;
}

/* modificacion de la eticketa fieldset*/
fieldset{
    border-radius: 20px;
    border: none;
    padding: 1.25rem;
    background-color: rgb(230, 236, 225);
    width: 100%;
}

/*redimensionar el logo del formulario*/
.fantasmaLogoLogin{ 
    width: 6rem; /*poniendo el ancho del logo*/
    max-width: 100px; /* límite en pantallas grandes */
    height: auto; /*ajustando la altura automáticamente para mantener la proporción*/
}

/*modificacion para el logo del formulario*/
legend{
    text-align: center; 
    background-color:rgb(230, 236, 225) ;
    border-radius: 70%;
}

/*modificacion de los elementos del formulario*/
.contenidoLogin{
    font-weight: bold; /*letras en negrita*/
    display: flex;
    flex-direction: column; /* para que los elementos de registro se muestren en columna */
    align-items: center;
    gap: 0.625rem; /* espacio entre los elementos */
}

/*poniendo el texto a la izquierda*/
label{
    margin-right: auto;
}

/*estilo para los campos de entrada*/
input{
    border: 1px solid rgb(161, 165, 157);
    border-radius: 10px;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    padding: 0.5rem;
}

/*---------------------modificacion de los botones----------------------*/

/*modificando los elementos para ingresar datos */
.accionesLogin{
    gap: 0.625rem;
    padding: 1.25rem;
    display: flex; 
    align-items: center;
    flex-direction: row; /*los botones estaran en fila*/
    justify-content: center;
}   

/*modificando los botones de sesion*/
button{
    border-radius: 15px;
    padding: 0.5rem 1rem;
    border: none;
    background-color: rgb(127, 124, 120);
    color: white;
    cursor: pointer;
    font-weight: bold;  /*poniendo las letras en negrita*/
    margin: 0.5em;
    transition: 0.3s ease; /*transicion suave para los efectos de hover*/

}
/*aplicando efectos para los botones de inicar sesion*/
button:hover{ /*efectos de color al pasar el mouse sobre el boton */
    background-color: rgb(161, 165, 157);
    color: rgb(0, 0, 0);
    transform: translateY(-6px); /*efecto de elevacion al pasar el mouse*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*agregando una sombra al pasar el mouse*/
}




/*modificando el estilo del pie de pagina*/
.footer_contenedor{
    display: flex;
    flex-direction: column; /* los elementos estarán en columna */
    margin-top: auto; /* empuja el footer hacia abajo  de manera automática */
    background-color: rgb(162, 167, 157);
    padding: 10px;
    width: 100%;
}
/*modificando el estilo del contenido de pie de pagina*/
.footer_principal{
    display: flex;
    flex-direction: column; /*los elementos estaran en fila*/
    justify-content: center; /*centramos el contenido horizontalmente*/
    align-items: center; /*centramos los elementos*/
    gap: 0.5em; /*espacio entre los elementos*/

}
/*alineando las redes sociales*/
.footer_redSocial{
    display:flex;
    flex-direction: row; /*los elementos estaran en columna*/
    gap: 2em;
}
a{
    color: black;
    text-decoration:none; /*eliminamos el subrayado de los enlaces*/

}
/*cambiando de color cuanndo pase el mouse sobre una red social*/
a:hover{
    color: rgb(230, 236, 225);;
}

/* ------------------------Media queries---------------------------------*/
@media (max-width: 600px) { /* ajustes para 600px o menos */
    /*ajustando la cabecera*/
    header{
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }
    /*ajustando el logo para que sea más pequeño*/
    .cajaLogo{
        width: 70px; 
        height: 70px;
    }

    .formularioCompleto{
        padding: 0 1em;
    }
    form{
        width: 100%; /*usar todo el ancho disponible*/
        margin: 20px 0;
        padding: 15px;
    }
    fieldset{
        width: 100%;
        padding: 15px;
    }
    .fantasmaLogoLogin{
        width: 80px;
        height: 80px;
    }
    .contenidoLogin{
        align-items: stretch; /*los inputs ocupan todo el ancho*/
    }
    input{
        width: 100%;
        box-sizing: border-box;
    }
    .accionesLogin{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    button{
        width: 100%;
        max-width: 280px;
    }
    .footer_contenedor{
        margin-top: 2em;
        padding: 12px;
    }
    .footer_redSocial{
        gap: 1em;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    /* ajustes para tablets y pantallas intermedias */
    .cajaLogo{
        width: 85px;
        height: 85px;
    }
    form{
        width: 80%;
        max-width: 480px;
    }
    input{
        width: 100%;
    }
}