@import "constants.css"; /* Certifique-se de que as variáveis estão definidas corretamente */

/* Barra de Acesso Rápido */
.quick-access-bar {
    display: flex;
    justify-content: center; /* Alinha os itens no centro horizontalmente */
    align-items: center; /* Alinha os itens no centro verticalmente */
    background-color: #003366; /* Azul escuro para fundo */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse a largura da barra */
    padding: 5px 0; /* Reduz o espaçamento interno */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    position: fixed; /* Mantém a barra fixa no topo */
    width: 100%;
    top: 0;
    z-index: 999; /* Garante que a barra esteja acima dos demais elementos */
}

/* Links da Barra */
.quick-access-bar a {
    display: flex;
    flex-direction: column; /* Organiza ícone e texto verticalmente */
    align-items: center;
    justify-content: center;
    color: #ffffff; /* Cor do texto branca */
    text-align: center;
    padding: 5px 10px; /* Reduz o espaçamento interno */
    text-decoration: none;
    font-weight: 400; /* Fonte com peso leve */
    font-size: 0.9em; /* Fonte menor para reduzir o visual poluído */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza a mudança de cor e adiciona leve animação */
    border-radius: 4px; /* Bordas arredondadas mais sutis */
    margin: 0 8px; /* Espaçamento entre os itens */
}

/* Ícones dos Links */
.quick-access-bar a img {
    width: 20px; /* Tamanho reduzido dos ícones */
    height: 20px;
    margin-bottom: 3px; /* Espaçamento reduzido entre ícone e texto */
}

/* Efeito ao Passar o Mouse sobre os Links */
.quick-access-bar a:hover {
    color: #003366; /* Azul escuro para o texto ao passar o mouse */
    background-color: #e6f0ff; /* Azul claro para o fundo ao passar o mouse */
    transform: scale(1.05); /* Leve aumento de tamanho ao passar o mouse */
    border-radius: 6px; /* Bordas arredondadas mais suaves */
}

/* Adicionando uma pequena margem no conteúdo abaixo para não ficar escondido pela barra */
body {
    margin-top: 50px; /* Ajusta dependendo da altura da barra */
}

/* Tablets (768px a 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .quick-access-bar {
        display: none; /* Esconde a barra de acesso rápido em telas pequenas */
    }

    body {
        margin-top: 0; /* Remove a margem superior quando a barra estiver oculta */
    }
}

/* Responsividade: ocultar a barra em telas menores */
@media (max-width: 767px) {
    .quick-access-bar {
        display: none; /* Esconde a barra de acesso rápido em telas pequenas */
    }

    body {
        margin-top: 0; /* Remove a margem superior quando a barra estiver oculta */
    }
}