@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    --azul: rgba(95, 194, 203, 1);
    --rosa: rgba(255, 141, 158, 1);
    --cinza: rgba(101, 101, 101, 1);
    --branco: rgba(255, 255, 255, 1);
    --branco-claro: rgba(255, 255, 255, 0.5);
    --cinza-claro: rgba(227, 227, 227, 1);
    --preto: rgba(2, 2, 2, 1);
    --azul-bg: #3e8dfe;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    background: #FFFFFF;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.container-result {
    display: flex;
    flex-direction: column;
    width: 700px;
    height: 550px;
    background-color: #e9f2fd;
    align-items: center;
    justify-content: center;
    margin-top: 125px;
    border-radius: 10px;

}

.container-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 820px;
    width: 450px;
    margin-bottom: 100px;
    position: absolute;
}

.text-input {
    font-size: 13px;
    color: #555555;
    text-transform: uppercase;
}

/* .text-redes {
    font-size: 12px;
    color: #555555;
    text-transform: uppercase;
} */

.bar-top {
    height: 580px;
    width: 380px;
    padding-top: 10px;
    background-color: #ffffff;
    /* border: 1px solid #b25d5d; */
    position: absolute;
    margin-bottom: 200px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;

    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    /* z-index: 300; */
    align-items: flex-start;
}

.bar-top h3 {
    text-align: start;
    padding-left: 10px;
    padding-top: 5px;
    color: #555555;
    font-size: 19px;
}

.bar-top img {
    width: 100px;
    height: auto;
    object-fit: contain;
    display: none;
    padding-top: 10px;
    padding-right: 10px;

}


#resultado-votacao {
    width: 320px;
    height: 535px;
    background-color: var(--azul-bg);
    position: absolute;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

.imagem-dep {
    width: 140px;
    height: 140px;
    margin-top: -100px;
    border-radius: 50%;

}

.imagem-dep img#foto-deputado {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--azul-bg);
    object-fit: cover;
}

.info-dep {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    color: #FFFFFF;
}

.info-dep h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.info-dep p {
    font-size: 14px;
    font-weight: 400;
}

.votacoes-dep {
    margin-top: 20px;

}

.votacoes-dep .lengenda {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #FFFFFF;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: -6px;
    padding: 0px 14px;
}

.votacoes-dep #votacoes-lista {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.votacoes-dep #votacoes-lista .container-voto {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.votacoes-dep #votacoes-lista .container-voto p.item-proposta {
    font-size: 13.5px;
    color: #6b6b6b;
    width: 65%;
}


.votacoes-dep #votacoes-lista .container-voto p.item-voto {
    width: 35%;
    height: 25px;
    background-color: var(--azul-bg);
    color: #FFFFFF;
    text-align: center;
    padding-top: 9px;
    border-radius: 29px;
    text-transform: uppercase;
    font-size: 12px;

}

.votacoes-dep #votacoes-lista .container-voto p.item-voto.contra {
    background-color: #ff472f;
}

.votacoes-dep #votacoes-lista .container-voto p.item-voto.afavor {
    background-color: #42b99c;
}


.votacoes-dep #votacoes-lista .container-voto p.item-voto.ausente {
    background-color: #9b9b9b;
}

.votacoes-dep #votacoes-lista .container-voto p.item-voto.abstencao {
    background-color: #ceb528;
}

/* --- ESTILOS DO INPUT DE BUSCA (ATUALIZADO) --- */
.container-inputs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.search {
    position: relative;
    width: 350px;
    display: flex;
    justify-content: center;
    z-index: 100;
}

#input-deputado {
    width: 220px;
    height: 34px;
    /* Aumentado o padding da direita para dar espaço aos botões X e seta */
    padding: 12px 45px 12px 20px;
    background-color: var(--azul-bg);
    border: 2px solid transparent;
    border-radius: 60px;
    color: var(--branco);
    text-align: left;
    /* Mudado para left para texto longo não sumir no centro */
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#input-deputado::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#input-deputado:focus {
    border-color: var(--azul);
    box-shadow: 0 4px 12px rgba(62, 141, 254, 0.3);
}

/* Container para os ícones dentro do input */
.search-controls {
    position: absolute;
    right: 55px;
    /* Ajuste fino baseado na largura do input (350-220)/2 aprox + padding */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 17px;
}

.btn-search {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: bold;
    user-select: none;
    transition: color 0.2s;
}

.btn-search:hover {
    color: #ffffff;
}

.btn-search.hidden {
    display: none;
}

#btn-expandir {
    font-size: 12px;
    /* Seta um pouco menor */
}

/* Dropdown */
.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 5px;
    display: none;
}

.dropdown-list li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    color: #333;
    text-align: left;
    /* Alinhamento do texto da lista */
}

.dropdown-list li:hover {
    background-color: #f0f0f0;
}

/* ---------------------------------------- */

/* .info-estadao {
    margin-bottom: 30px;
} */

.info-estadao p:nth-child(1) {
    font-size: 14px;
}

.info-estadao p:nth-child(2) {
    font-size: 14px;
    margin-top: 10px;
}

.info-estadao p {
    margin-top: 15px;
    margin-bottom: 3px;
    color: #ffffff;
    /* text-transform: uppercase; */
    text-align: center;
}

/* --- NOVO ESTILO PARA O BOTÃO --- */
.container-btn-download {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 40px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 200;
}

#btn-baixar {
    background-color: var(--azul-bg);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.2s;
    text-transform: uppercase;
}

#btn-baixar:hover {
    background-color: #2b7de0;
    /* Um tom ligeiramente mais escuro para hover */
    transform: translateY(-2px);
}

#btn-baixar:active {
    transform: translateY(0);
}

.bar-top h3,
.info-dep h2 {
    letter-spacing: 0.5px;
}

.info-estadao p {
    letter-spacing: 0.3px;
}


.votacoes-dep .lengenda,
.text-input,
#btn-baixar {
    letter-spacing: 0.4px;
}




@media (max-width: 720px) {

    .container-result {
        width: 90%;
        margin-top: 100px;
    }

    .container-main {
        display: flex;

        flex-direction: column;
        align-items: center;
    }





}



@media (max-width: 550px) {

    .container-result {
        width: 90%;
        margin-top: 100px;
    }

    .container-main {
        display: flex;

        flex-direction: column;
        align-items: center;
    }

    .container-download {
        width: 100%;
        height: 850px;
    }

    .bar-top {
        width: 90%;
        justify-content: space-between;
    }

    #resultado-votacao {
        width: 80%;
        padding: 30px 20px;
    }

    .search {
        width: 90%;
    }

    .search-controls {

        right: 25px;
        gap: 10px;
    }

    .bar-top h3 {

        padding-left: 6px;
        font-size: 19px;
        max-width: 50%;

    }

    .bar-top img {
        max-width: 50%;
            
    }




}