@font-face {
    font-family: "Baloo-Regular"; /* Nombre personalizado */
    src: url("/fonts/Baloo-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


body {
    background-image: url('../resources/fondo.png');
    background-size: cover;
    /* Ajusta la imagen para cubrir todo el fondo */
    background-repeat: repeat;
    /* Evita que la imagen se repita */
}

.esquina-izquierda {
    position: absolute;
    /* Establece la posición absoluta para que la imagen se coloque con respecto al cuerpo de la página */
    bottom: 0;
    /* Coloca la imagen en la parte inferior */
    left: 0;
    /* Coloca la imagen en la esquina izquierda */
    /* width: 40%; */
    /* Ajusta el ancho de la imagen */
    height: 20%;
    /* La altura se ajustará automáticamente para mantener la relación de aspecto */
    z-index: -1;
    /* Asegura que la imagen aparezca encima del contenido si hay superposiciones */
}

.esquina-derecha {
    position: absolute;
    /* Establece la posición absoluta para que la imagen se coloque con respecto al cuerpo de la página */
    bottom: 0;
    /* Coloca la imagen en la parte inferior */
    right: 0;
    /* Coloca la imagen en la esquina izquierda */
    /* width: 40%; */
    /* Ajusta el ancho de la imagen */
    height: 20%;
    /* La altura se ajustará automáticamente para mantener la relación de aspecto */
    z-index: -1;
    /* Asegura que la imagen aparezca encima del contenido si hay superposiciones */
}

.esquina-superior-derecha {
    position: absolute;
    /* Establece la posición absoluta para que la imagen se coloque con respecto al cuerpo de la página */
    top: 0;
    /* Coloca la imagen en la parte inferior */
    right: 0;
    /* Coloca la imagen en la esquina izquierda */
    /* width: 40%; */
    /* Ajusta el ancho de la imagen */
    height: 17%;
    /* La altura se ajustará automáticamente para mantener la relación de aspecto */
    z-index: 23;
    /* Asegura que la imagen aparezca encima del contenido si hay superposiciones */
}



.centrado {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* Altura total del viewport */
}

.sga{
    margin-top: -43vh;
    font-family: "Baloo-Regular";
    font-size: 250%;
    color: white;
}

.iniciarSesion {
    margin-top: 2%;

}

.oculto {
    display: none !important;
}

.label-esquina {
    position: absolute;
    top: 2%;
    left: 2%;
    color: white;
    font-weight: bold;
}

.cerrarSesion {
    position: absolute;
    top: 7%;
    left: 2%;


}

.adminPanel {
    position: absolute;
    top: 14%;
    left: 2%;
}

#candidatos {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 10px;

}

.subirvh {
    margin-top: -20vh;
}

#candidatos img {

    width: 20%;
    /* Ancho de las imágenes */
    height: auto;
    /* Altura ajustada automáticamente */
}

#botonRecargar {

    position: absolute;
    /* Establece la posición absoluta para que la imagen se coloque con respecto al cuerpo de la página */
    bottom: 10%;
    /* Coloca la imagen en la parte inferior */
    left: 45%;
    /* Coloca la imagen en la esquina izquierda */
    width: 10%;
    /* Ajusta el ancho de la imagen */
    z-index: 5;
    /* Asegura que la imagen aparezca encima del contenido si hay superposiciones */

}

.bannerSuperior {
    display: flex;
    /* Flexbox layout to align items */
    flex-direction: column;
    /* Align items vertically */
    height: 15vh;
    /* background-color: black !important; */
    background: linear-gradient(to right, #ff5757, #8c52ff);
}

.ley {
    display: flex;
    /* Flexbox layout to align items */
    flex-direction: row;
    /* Align items vertically */
    justify-content: center;
    height: 5vh;
    /* background-color: black !important; */
    background-color: white;

    border-top: 5px solid;
    border-bottom: 5px solid;
    border-image: linear-gradient(to right, #FF66C4, #FFDE59) 1;
}

.ley label{
    font-weight: bold;
}

.candidato-img{
    border-radius: 20px 0px 20px 0px;
}