/* Estilos da sobreposição do modal (fundo escuro) */
.meu-modal-overlay {
    display: none; /* Oculto por padrão */
    position: fixed; /* Fixado na viewport */
    z-index: 1000; /* Acima de outros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    overflow: auto; /* Adiciona scroll se o conteúdo for muito grande */
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    align-items: center; /* Centraliza verticalmente o conteúdo */
}

/* Exibe a sobreposição quando a classe 'active' é adicionada */
.meu-modal-overlay.active {
    display: flex; /* Usa flexbox para centralizar */
}

/* Estilos do conteúdo do modal */
.meu-modal-conteudo {
    background-color: #fefefe;
    margin: auto; /* Ajuda a centralizar em navegadores antigos */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largura padrão */
    max-width: 600px; /* Largura máxima */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative; /* Para o botão de fechar */
    border-radius: 8px; /* Cantos arredondados */
}

/* Botão de fechar (X) */
.meu-modal-fechar {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.meu-modal-fechar:hover,
.meu-modal-fechar:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Estilos para o corpo do modal (onde o conteúdo vai) */
.meu-modal-corpo {
    margin-top: 20px;
    max-height: 70vh; /* Altura máxima para o scroll */
    overflow-y: auto; /* Habilita scroll vertical se o conteúdo for grande */
}

/* Exemplo de estilo para o botão que abre o modal (pode ser personalizado) */
.btn-abrir-modal {
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn-abrir-modal:hover {
    background-color: #005177;
}