/* Tudo - resetar os estilos
cada navegador tem sua própria forma de lidar com os estilos, por isso é importante resetar os estilos */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;/* Fonte do site */
    background-color: #f8f6f2;/* Cor de fundo do site */
    color:#2e6b47;/* Cor do texto do site */
    max-width: 520px;/* Largura máxima do site */;
    margin: 0 auto;/* Centralizar o site na tela */
    padding: 24px;/* Espaçamento interno do site */
    min-height: 100vh;/* Altura mínima do site */
}

.caixa-total {
    background-color: #4e82b4;/* Cor de fundo da caixa de total gasto */
    color: #ffffff;/* Cor do texto da caixa de total gasto */
    padding: 24px;/* Espaçamento interno da caixa de total gasto */
    text-align: center;/* Alinhamento do texto da caixa de total gasto */
    border-radius: 18px;/* Arredondamento dos cantos da caixa de total gasto */
    margin-bottom: 24px;/* Espaçamento externo da caixa de total gasto */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8);/* Sombra da caixa de total gasto */
    
}
h1 {
    color:#2b2b2b;;
    font-size: 2.4rem;
    text-align: center;
    line-height : 1.2;

}

.topo {
    color:#b96a4a;/* Cor do texto da classe topo */
    text-align: center;/* Alinhamento do texto da classe topo */
    margin : 16px 0 24px;/* Espaçamento externo da classe topo */
    font-size: 1.1rem;/* Tamanho da fonte da classe topo */

}
 .gasto-unitario {
    font-size: 1rem;/* Tamanho da fonte da classe gasto-unitario */
    
    margin-bottom: 8px;/* Espaçamento externo da classe gasto-unitario */
 }


.total-gasto {
    font-size: 2rem;/* Tamanho da fonte da classe total-gasto */
    font-weight: bold;/* Peso da fonte (negrito)da classe total-gasto */
    margin: 12px 0
}

.comprovantes {
    font-size: 1rem;/* Tamanho da fonte da classe comprovantes */
    opacity: 0.95;
}

label {
    background-color: #ffff;/* Cor de fundo do botão de selecionar imagem */
    color: #2b2b2b;/* Cor do texto do botão de selecionar imagem */
    border-radius: 16px;/* Arredondamento dos cantos do botão de selecionar imagem */
    padding: 28px 20px;/* Espaçamento interno do botão de selecionar imagem */
    text-align: center;/* Alinhamento do texto do botão de selecionar imagem */
    cursor: pointer;/* Cursor do mouse ao passar por cima do botão de selecionar imagem */
    font-weight: bold;/* Peso da fonte (negrito) do botão de selecionar imagem */
    border: 4px dashed #c3cfe0;/* Borda do botão de selecionar imagem */;
    display: block;/* Exibir o botão de selecionar imagem como bloco , o elemento ocupa a linha inteira*/
    margin-top: 16px;/* Espaçamento externo do botão de selecionar imagem */
    font-size: 1rem;/* Tamanho da fonte do botão de selecionar imagem */
    transition:all 0.2s ease;/* Transição de todos os elementos do botão de selecionar imagem */

}

input {
display: none;/* Esconder o input de selecionar imagem */

}

.lista-comprovantes {
    margin-top: 24px;/* Espaçamento externo da lista de comprovantes */
    display: flex;/* Exibir a lista de comprovantes como flexível */
    flex-direction: column;/* Direção da lista de comprovantes como coluna */
    gap: 16px;/* Espaçamento entre os elementos da lista de comprovantes */
}

/* Responsividade para telas pequenas */
@media (max-width: 480px) {
    body {
        padding: 16px;/* Espaçamento interno do site */
    }

    h1 {
        font-size: 1rem;/* Tamanho da fonte do título */
    }
    
    .topo {
        font-size: 1rem;/* Tamanho da fonte do texto do topo */
    }

    .caixa-total {
        padding: 20px;/* Espaçamento interno da caixa de total gasto */
    }

    .total-gasto {
        font-size: 1.7rem;/* Tamanho da fonte do total gasto */
    }

    label {
        padding: 22px 16px;/* Espaçamento interno do botão de selecionar imagem */
        font-size: 0.95rem;/* Tamanho da fonte do botão de selecionar imagem */
    }
}

.itens {
    white-space: pre-line;
    font-size: 15px;
    line-height: 1.8;
    color:#4a5b78;
}

.total-nota {
    display: flex;
    justify-content: space-between;
    border-top: 1px dashed #d6dee9;
    padding-top: 12px;
    margin-top: 12px;
    
}

.comprovante {
    background-color: #ffffff;/* Cor de fundo do comprovante */
    padding: 16px;/* Espaçamento interno do comprovante */
    border-radius: 12px;/* Arredondamento dos cantos do comprovante */
    margin-bottom: 12px;/* Espaçamento externo do comprovante */
    

}