body{
    background:#f5f7fb;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

.hero{
    background:linear-gradient(135deg,#0d6efd,#0b5ed7);
    color:#fff;
    padding:70px 0;
}

.hero h1{
    font-weight:bold;
}

.card{
    border:none;
    border-radius:15px;
}
.candidato-card img{

    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:contain;
  

}
.candidato-card{
    transition:.3s;
}

.candidato-card:hover{
    transform:translateY(-8px);
    height:100%;
    overflow:hidden;


}

.btn-votar{
    width:100%;
    font-weight:bold;
}

footer{
    margin-top:60px;
}

.partido{
    color:#777;
    font-size:15px;
}

.numero{
    position:absolute;
    top:15px;
    right:15px;
    background:#0d39fd;
    color:white;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}
/* =======================================
   DISEÑO RESPONSIVE
======================================= */

img {
    max-width: 100%;
    height: auto;
}

.card {
    border-radius: 15px;
}

.table-responsive {
    overflow-x: auto;
}

canvas {
    max-width: 100%;
}

@media (max-width: 992px) {

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .card {
        margin-bottom: 20px;
    }

}

@media (max-width: 768px) {

    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .rounded-circle {
        width: 120px !important;
        height: 120px !important;
    }

    .table th,
    .table td {
        font-size: 14px;
        white-space: nowrap;
    }

    #graficoVotos {
        height: 300px !important;
    }

}

@media (max-width: 576px) {

    body {
        font-size: 14px;
    }

    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .card-body {
        padding: 15px;
    }

    .rounded-circle {
        width: 90px !important;
        height: 90px !important;
    }

    .progress {
        height: 20px !important;
    }

}