body {
    background-color: #1F2937; /* bg-gray-900 */
    color: #FFFFFF; /* text-white */
    padding: 2rem; /* p-8 */
    font-family: 'Nunito', sans-serif;
    margin: 0; /* Remove margem padrão */
}

.top-bar {
    display: flex;
    justify-content: space-between; /* Setores à esquerda, config à direita */
    align-items: center;
    background-color: #2D3748; /* bg-gray-800 */
    padding: 10px; /* p-5 ajustado */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* Fica acima do conteúdo */
    box-sizing: border-box; /* Garante que o padding não aumente a largura total */
}

.sectors-container {
    display: flex;
    flex-grow: 1; /* Faz o container dos setores ocupar todo o espaço disponível */
    margin-right: 1rem; /* Espaço entre os setores e o config-button */
}

.sector-button {
    flex: 1; /* Faz cada botão crescer igualmente para preencher o espaço */
    padding: 1rem; /* p-2 ajustado */
    background-color: #4B5563; /* bg-gray-700 */
    border-radius: 1rem; /* rounded ajustado */
    color: #FFFFFF;
    font-size: 1rem; /* text-xl */
    font-family: 'Nunito', sans-serif;
    border: none;
    cursor: pointer; /* Indica que é clicável */
    margin: 0 0.25rem; /* Pequena margem lateral entre os botões */
}

.config-button {
    background-color: #4B5563; /* bg-gray-700 */
    border-radius: 0.5rem; /* rounded */
    border: none; /* Sem borda */
    width: 2rem; /* Tamanho quadrado fixo */
    height: 2rem; /* Tamanho quadrado fixo */
    display: flex;
    justify-content: center; /* Centraliza o ícone horizontalmente */
    align-items: center; /* Centraliza o ícone verticalmente */
    margin-right: 10px; /* Adiciona margem à direita para não ficar fora da tela */
}
.sector-button:hover {
    background-color: #3A4364; /* hover:bg-gray-600 */
    transform: scale(1.05);
}


.config-button i {
    font-size: 1.1rem; /* Tamanho do ícone ajustado */
    color: #FFFFFF; /* Cor branca */
}

.config-button:hover {
    background-color: #3A4364; /* hover:bg-gray-600 */
    transform: scale(1.05);
}

.main-content {
    flex: 1; /* flex-1 */
    margin-top: 4rem; /* Espaço para a barra superior fixa */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 60px;
    width: 80%;
    padding: 20px;
    margin: 50px auto;
    opacity: 1; /* Estado inicial visível */
    transition: opacity 0.3s ease; /* Transição suave para opacidade */
}

.grid-container.fade {
    opacity: 0; /* Estado durante a animação */
}

.link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #3A4364;
    padding: 5px; /* p-4 ajustado */
    border-radius: 8px; /* rounded-lg ajustado */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background-color 0.2s; /* transition ajustado */
    width: 6rem; /* w-24 */
    height: 6rem; /* h-24 */
    justify-content: center;
    cursor: pointer;
}

.link-card:hover {
    background-color: #29304A; /* hover:bg-gray-600 */
    transform: scale(1.05);
}

.link-icon {
    width: 5rem; /* w-12 */
    height: 5rem; /* h-12 */
    margin-bottom: 0.5rem; /* mb-2 */
}

.link-title {
    color: #FFFFFF; /* text-white */
    font-weight: 600; /* font-semibold */
    text-align: center;
    font-size: 1rem; /* text-sm */
    text-decoration: none; /* Remove sublinhado padrão */
}

.link-title:visited {
    color: #FFFFFF; /* Mantém a cor branca mesmo após visitar */
    text-decoration: none; /* Remove a linha azul/padrão de visitado */
}

.no-links {
    grid-column: span 3; /* col-span-3 */
    text-align: center;
    color: #9CA3AF; /* text-gray-400 */
}

@media (min-width: 640px) { /* sm: */
    .link-card {
        width: 7rem; /* sm:w-32 */
        height: 7rem; /* sm:h-32 */
    }
    .link-icon {
        width: 3rem; /* sm:w-16 ajustado */
        height: 3rem; /* sm:h-16 ajustado */
    }
}

@media (min-width: 768px) { /* md: */
    .link-card {
        width: 8rem; /* md:w-36 */
        height: 8rem; /* md:h-36 */
    }
        .link-icon {
        width: 3.5rem; /* sm:w-16 ajustado */
        height: 3.5rem; /* sm:h-16 ajustado */
    }
}

@media (min-width: 1024px) { /* lg: */
    .link-card {
        width: 9rem; /* lg:w-40 */
        height: 9rem; /* lg:h-40 */
    }
        .link-icon {
        width: 4rem; /* sm:w-16 ajustado */
        height: 4rem; /* sm:h-16 ajustado */
    }
}