@layer components {

    /* Header - Navbar */
    .nav-bar {
        @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;

        /* REMOVIDO: @apply relative; */

        /* 1. ADICIONADO: 'top-0 left-0' para "colar" no topo */
        @apply fixed top-0 left-0 z-50 w-full;
        @apply bg-transparent text-black;
        @apply border-b border-transparent;
        @apply transition-colors duration-700 ease-in-out;
    }

    .nav-bar::before {
        content: '';
        @apply absolute top-0 left-0 w-full h-full;

        /* 2. ESTADO BASE (Topo): Fundo e Sombra */
        @apply bg-white;
        @apply shadow-md shadow-blue-400;
        /* 4. REMOVIDO: As classes 'border-b border-white' saíram daqui */

        /* 3. TRANSIÇÃO (Correto) */
        @apply transition-all duration-700 ease-in-out;

        @apply -z-10;
    }


    .navbar-scrolled {
        @apply border-white shadow-md;
    }

    .navbar-scrolled::before {
        @apply opacity-0;
        @apply shadow-none;
    }

    .nav-bar>.navbar-items>a:hover,
    .nav-bar>.navbar-items>a {
        @apply transition-all duration-300 transform hover:scale-105;
        @apply mr-7;
        @apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
    }

    .nav-bar-logo {
        /* Garante que a largura não ultrapasse 100% */
        @apply rounded-md max-w-25 mr-10;
        height: auto;
        /* Altura proporcional à largura */
    }

    .navbar-items {
        @apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10;
    }

    .profile-menu {
        @apply absolute right-5;
        @apply rounded-xl;
        @apply max-w-7 max-h-7;
        @apply shadow-md shadow-blue-400;
    }

    .profile-list-items {
        /* 1. Posicionamento (Correto) */
        @apply absolute top-full right-0 ml-4 mt-2;

        @apply block w-full;
        /* Adicionei mt-2 para descolar do ícone */

        /* 2. Largura Fixa (Mais limpo) */
        @apply w-56;

        /* 3. Estilos do Contêiner (Profissional) */
        @apply bg-white p-2 rounded-md shadow-xl;
        /* Sombra mais forte */
        @apply border border-gray-200;

        /* 4. Divisórias Sutis entre os <li> */
        @apply divide-y divide-gray-100;
    }

    .profile-link {
        /* 1. FAZ O LINK PREENCHER O <li> */
        @apply block w-full;
    
        /* 2. CORREÇÃO: Força a cor e remove sublinhado */
        @apply text-gray-700 no-underline; 
        
        /* 3. (Opcional) Hover direto no link */
        @apply hover:text-black;
    }
    .profile-items {
        /* 1. Limpeza (Classes antigas removidas) */

        /* 2. Espaçamento Interno (Respiro) */
        @apply px-4 py-2;

        /* 3. Estilos de Texto */
        @apply text-sm text-gray-700;

        /* 4. Interatividade */
        @apply hover:bg-blue-100 cursor-pointer;

        /* 5. Transição Suave */
        @apply transition-colors duration-150 ease-in-out;

        /* 6. Cantos do Hover */
        @apply rounded-md;
    }

    .nav-bar-logo img {
        @apply w-full;
        /* Largura 100% para se ajustar ao container */
        height: auto;
        /* Mantém a proporção original da imagem */
    }

    .nav-bar>.navbar-items>form>button {
        @apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
    }

    /*End Header - Navbar */
}