/* Estilo do container da enquete */
.enquete-container {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Estilo do título da enquete */
.enquete-container h4 {
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

/* Formulário de votação */
.enquete-form {
    display: flex;
    flex-direction: column;
}

.enquete-form label {
    margin-bottom: 8px;
    font-size: 1.1em;
}

/* Botão de "Votar" */
.enquete-form button[type="submit"] {
    background-color: #0073aa; /* Cor padrão do botão */
    border: none;
    color: white;
    font-size: 1.1em;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.enquete-form button[type="submit"]:hover {
    opacity: 0.8;
}

/* Estilo do container de resultados */
.enquete-resultado {
    display: none;
    margin-top: 0px;
    padding-top: 0px;

}

/* Título dos resultados */
.enquete-resultado h4 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

/* Estilo das opções de resultado */
.enquete-resultado .opcao {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2em;
    color: #333;
    font-weight: bold;
}

/* Barra de progresso com transição e bordas arredondadas */
.enquete-resultado .barra {
    width: 100%;
    height: 30px;
    background-color: #f1f1f1; /* Cor de fundo da barra */
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: width 0.5s ease-in-out; /* Transição suave ao carregar */
}

.enquete-resultado .barra .porcentagem {
    position: absolute;
    top: 0;
    right: 10px;
    font-weight: bold;
    color: white;
    padding-right: 10px;
}

.enquete-resultado .opcao span {
    font-size: 1.1em;
    margin-right: 10px;
    font-weight: normal;
}

/* Ajuste para a cor da barra de progresso */
.barra {
    background-color: #0073aa; /* Cor padrão da barra */
}

/* Estilização do botão e barra com as cores definidas no painel */
.enquete-form button[type="submit"] {
    background-color: var(--botao-cor, #0073aa); /* Cor do botão configurada pelo JS */
}

.barra {
    background-color: var(--barra-cor, #0073aa); /* Cor da barra configurada pelo JS */
}

/* Efeito hover sobre as opções */
.enquete-resultado .opcao:hover {
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 5px;
}

/* Estilos adicionais para a barra */
.barra {
    height: 40px; /* Aumentar altura para melhor visualização */
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.barra .porcentagem {
    font-size: 1.2em;
    font-weight: bold;
}





/* Estilo ajustado para visibilidade do texto */
.barra {
    height: 40px; /* Altura suficiente para o conteúdo */
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative; /* Para posicionamento do texto */
    background-color: var(--barra-cor, #0073aa); /* Cor da barra */
    min-width: 100px; /* Largura mínima para evitar cortes */
}

/* Ajuste do texto para manter visibilidade */
.barra .porcentagem {
    position: absolute;
    top: 50%; /* Centralizar verticalmente */
    left: 50%; /* Centralizar horizontalmente */
    transform: translate(-50%, -50%); /* Ajustar alinhamento */
    font-size: 1em; /* Tamanho do texto ajustável */
    font-weight: bold;
    color: white; /* Contraste com o fundo da barra */
    white-space: nowrap; /* Evitar quebra de linha */
}

/* Garantir legibilidade do texto mesmo em barras pequenas */
.barra[data-small="true"] .porcentagem {
    position: absolute;
    left: 100%; /* Mover texto para fora da barra */
    top: 50%;
    transform: translate(10px, -50%); /* Pequeno deslocamento à direita */
    color: black; /* Cor ajustável para visibilidade */
}




.enquete-resultado .barra .porcentagem {
    position: absolute;
    top: 0;
    right: -50px !important;
    font-weight: bold;
    color: white;
    padding-right: 10px;
}