@charset "UTF-8";
@import '@tabler/core/dist/css/tabler.min.css';
@import 'bootstrap/dist/css/bootstrap.min.css';
.card {
    cursor: pointer;
}

.modal-dialog {
    max-width: 75%;
    max-height: 75%;
    margin: auto;
}

/* Efeito de pulsação */
.drilldown:hover {
    cursor: pointer;
    animation: pulse 0.4s forwards;
    /* Pulsação única com 0.5s de duração */
    font-weight: bold;
    /* Mantém o texto em negrito após a animação */
}

/* Estilização para a linha da tabela no modal ao passar o mouse */
.modal-body table tbody tr:hover {
    font-weight: bold;
    /* Deixa o texto em negrito */
    transform: translateY(-3px);
    /* Efeito de "saltar" para cima */
    transition: all 0.2s ease-in-out;
    /* Animação suave para o efeito */
    background-color: #f8f9fa;
    /* Cor de fundo suave ao passar o mouse */
}

/* Animação de pulsação */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
        font-weight: normal;
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 10px rgba(0, 123, 255, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
        font-weight: bold;
        /* Aplica o negrito ao final da animação */
    }
}

/* Estilização geral para inputs e selects */
.form-group .form-select {
    font-size: 1.25rem !important;
    /* Aumenta o tamanho da fonte */
    padding: 10px 15px !important;
    /* Aumenta o espaçamento interno */
    border-radius: 0 !important;
    /* Remove bordas arredondadas para todos */
    border: 2px solid #ccc !important;
    /* Borda mais visível */
    width: 100% !important;
    /* Ocupa toda a largura do container */
    box-sizing: border-box !important;
    /* Inclui o padding e a borda na largura total */
    appearance: none !important;
    /* Remove a aparência padrão do select */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"%3E%3Cpath d="M6 9l6 6 6-6"/%3E%3C/svg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    padding-right: 40px !important;
    /* Espaço extra para o ícone customizado */
}

/* Arredondar apenas a borda inferior do último select */
.form-group:last-child .form-select {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Estilização para o label */
.form-group .form-label {
    font-weight: bold !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: 1.1rem !important;
    /* Aumenta o tamanho da fonte dos labels */
}

/* Estilização do container da form-group */
.form-group {
    margin-bottom: 20px !important;
}

/* Estilização geral dos modais */
.modal-content {
    border-radius: 15px;
    /* Arredonda as bordas do modal */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* Adiciona uma sombra ao redor do modal */
    overflow: hidden;
    /* Garante que o conteúdo respeite as bordas arredondadas */
}

/* Estilização dos títulos dos modais */
.modal-header .modal-title {
    font-size: 2rem;
    /* Aumenta o tamanho da fonte do título */
    font-weight: bold;
    /* Deixa o título em negrito */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    /* Adiciona uma sombra suave ao título */
    color: #333;
    /* Cor do título */
}

/* Estilo para os cabeçalhos das tabelas nos modais */
.table thead th {
    font-size: 1.25rem;
    /* Aumenta o tamanho da fonte dos títulos das colunas */
    font-weight: bold;
    /* Deixa os títulos das colunas em negrito */
    color: #000;
    /* Cor dos títulos das colunas */
    text-transform: uppercase;
    /* Transforma o texto em maiúsculas */
    background-color: #f8f9fa;
    /* Cor de fundo do cabeçalho */
    padding: 12px;
    /* Aumenta o padding para dar mais espaço ao texto */
    border-bottom: 2px solid #dee2e6;
    /* Adiciona uma borda inferior */
}

/* Responsividade para telas menores */
@media (max-width: 576px) {
    .modal-header .modal-title {
        font-size: 1.5rem;
        /* Tamanho do título menor em telas pequenas */
    }

    .table thead th {
        font-size: 1rem;
        /* Tamanho menor das colunas em telas pequenas */
    }
}

/* Sombra adicional no título */
.modal-header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra abaixo do título */
    border-bottom: none;
    /* Remove a borda padrão abaixo do header */
}

/* Estilização dos botões de fechar */
.modal-header .btn-close {
    background-color: transparent;
    /* Torna o fundo do botão transparente */
    border-radius: 0;
    /* Remove as bordas arredondadas */
    box-shadow: none;
    /* Remove qualquer sombra do botão */
    border: none;
    /* Remove qualquer borda */
    padding: 0.5rem;
    /* Adiciona um pequeno padding */
    opacity: 0.7;
    /* Deixa o botão um pouco mais sutil */
    margin-top: auto;
    /* Adiciona um auto margin para centralizar verticalmente */
    margin-bottom: auto;
    /* Garante o alinhamento vertical */
    align-self: center;
    /* Centraliza o botão em relação à altura do header */
}

.modal-header {
    display: flex;
    align-items: center;
    /* Alinha todos os itens no centro verticalmente */
    justify-content: space-between;
    /* Distribui o espaço entre o título e o botão de fechar */
}

.modal-header .btn-close:hover {
    opacity: 1;
    /* Aumenta a visibilidade do botão ao passar o mouse */
}

/* Sombra nos botões de ação */
.modal-footer .btn {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Sombra nos botões de fechar e voltar */
    border-radius: 8px;
    /* Arredonda os botões */
}

/* Estilização do campo de busca */
.modal-header .form-control {
    border-radius: 20px;
    /* Arredonda as bordas do campo de busca */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Sombra interna e externa suave */
    border: 1px solid #ccc;
    /* Borda suave */
    padding: 10px 15px 10px 40px;
    /* Ajusta o padding interno, com espaço para o ícone */
    width: 12.5em;
    /* Define a largura do campo de busca */
    background-color: #f9f9f9;
    /* Cor de fundo mais clara */
    position: relative;
    /* Para posicionar o ícone dentro do campo */
}

/* Ícone de busca dentro do campo */
.modal-header .form-control::before {
    content: "\f002";
    /* Unicode do ícone de busca */
    font-family: "Font Awesome 5 Free";
    /* Fonte do Font Awesome */
    font-weight: 900;
    /* Peso da fonte para o ícone */
    position: absolute;
    /* Posicionamento absoluto dentro do campo */
    left: 15px;
    /* Espaçamento à esquerda */
    top: 50%;
    /* Alinha verticalmente no meio */
    transform: translateY(-50%);
    /* Ajuste para centralizar */
    color: #666;
    /* Cor do ícone */
    font-size: 1.1rem;
    /* Tamanho do ícone */
}

/* Foco no campo de busca */
.modal-header .form-control:focus {
    border-color: #007bff;
    /* Altera a cor da borda ao focar */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 123, 255, 0.3);
    /* Sombra azul ao focar */
    outline: none;
    /* Remove o contorno padrão */
}