/* Ocultar as colunas para telas menores que 992px (tamanho lg) */
@media (max-width: 991px) {
    .col-oculta {
        display: none;
    }
}

/* Exibir as colunas apenas para telas grandes (lg ou superiores) */
@media (min-width: 992px) {
    .col-oculta {
        display: table-cell;
    }
}

/* Seu CSS */
.disabled-card {
    opacity: 0.6; /* Reduz a opacidade para 60% */
    pointer-events: none; /* Desabilita eventos de mouse (cliques, hover) */
    cursor: not-allowed; /* Altera o cursor para indicar que não é clicável */
    filter: grayscale(80%); /* Opcional: Deixa a imagem em escala de cinza */
    transition: opacity 0.3s ease, filter 0.3s ease; /* Transição suave para a opacidade e filtro */
}

/* Se você quiser que a borda também fique mais clara */
.disabled-card.border-secondary {
    border-color: rgba(108, 117, 125, 0.3) !important; /* Exemplo: #6c757d é o cinza do secondary, 0.3 é a opacidade */
}

/* Garante que os parágrafos dentro de list-group-item se comportem como blocos */
.list-group-item p {
    display: block; /* Força o comportamento de bloco, se houver um flex/grid pai */
    white-space: normal; /* Permite quebras de linha */
    margin-bottom: 1rem !important; /* Garante o espaçamento, ajustando se necessário */
}

/* Garante que o HR apareça e tenha espaçamento */
.list-group-item hr {
    display: block; /* Garante que seja um elemento de bloco */
    border: none; /* Remove bordas padrão, se houver */
    border-top: 1px solid #ccc; /* Define a sua linha divisória */
    margin-top: 10px; /* Espaço acima */
    margin-bottom: 10px; /* Espaço abaixo */
    width: 100%; /* Garante que ocupe a largura total */
}

/* Se houver um display:flex/grid no li.list-group-item que esteja atrapalhando os filhos */
.list-group-item {
    flex-direction: column; /* Se o li tiver display:flex, force a direção da coluna */
    align-items: stretch; /* Garante que os itens internos se estiquem */
    /* Outros ajustes podem ser necessários dependendo do que o inspetor de elementos mostrar */
}