/* Detalhe - Não é mencionado que todas as declarações CSS seguem esse padrão, onde a linha de classes declaradas segue a ordem das tags, indo da mais externa ("Quem inicia a linha") para a mais interna ("Quem dá o fim para a linha"). Seguindo esse modelo de declaração de classes, todos os elementos se tornam extremamente únicos, minimizando as chances de existirem conflitos de classes. */

/* ========================================= Estrutura de decisão, para qual grupo de relatórios apresentar OFF, ON, ERRO =============================================== */

/* Este caminho de classes aponta para a classe .painel_Cap, onde é determinada a estilização principal do painel. Além disso, ele alinha todos os elementos dentro dele e define um scroll vertical (overflow-y: auto), permitindo que, caso os elementos ultrapassem a altura do painel, um deslocamento seja criado para que o usuário consiga visualizar os itens além da altura do painel, sem sair da área do painel. */

.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap {
    width: 90%;
    height: 40vh;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    align-content: center;

    gap: 1vw;
    overflow-y: auto;

    padding: 2vh;
    background-color: var(--Cor_Segundaria_5_1);
}

/* Esta linha de classe aponta para a classe .coluna_1, onde ela é usada somente para alinhar os elementos dentro dela. */

.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 {
    width: 100%;
    margin-bottom: 2vh;
}

/* Esta linha de classe aponta para a tag button, com estilizações detalhadas para ela. */

.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 button {
    outline: none;
    background: none;
    border: none;

    width: 32.33%;
    height: 6vh;

    font-family: var(--font_titulo);
    font-size: 1vw;

    cursor: pointer;
}

/* ========================================= Fechamento da estrutura de decisão =============================================== */

/* Esta linha de classe aponta para a classe .coluna_2, onde ela é utilizada apenas para definir o alinhamento dos itens dentro dela, sendo os painéis de relatórios de cada um dos casos de escolha. */

.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}