/* Estilos generales para replicar la apariencia de las imágenes */
body {
    background-color: #f8f9fa; /* Fondo gris claro */
}

/* Estilo para las tarjetas de candidatos */
.candidato-card {
    cursor: pointer;
    border: 3px solid #ccc !important;
    transition: all 0.2s ease-in-out;
}

/* Estilo para el candidato seleccionado */
.candidato-card.selected {
    border-color: #007bff !important; /* Borde azul para selección */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    background-color: #e9f5ff; /* Fondo ligeramente azulado */
}

/* Ajuste para el botón EMITIR VOTO ÚNICO */
.btn-lg {
    border-radius: 0.5rem;
}

/* Estilos específicos para la modal de confirmación */
#modalConfirmacion .modal-content {
    border: none;
    border-radius: 1rem;
    padding: 2rem;
}

/* Estilos para los resultados (replicando las barras azules) */
.progress-bar {
    background-color: #007bff; /* Azul primario */
    font-weight: bold;
}
/* Busca la regla que aplica a la sección del gráfico, o agrégala si no existe */
.chart-container {
    height: 450px; 
    padding-top: 40px; /* Le da espacio de 40px arriba */
    overflow: visible !important; 
}

/* Y esta regla ayuda a que el contenedor principal no lo corte */
.card-body, .panel-body {
    overflow: visible !important;
}