/* Personalización de la barra de navegación superior para que siempre sea oscura */
.fi-topbar {
    @apply bg-gray-900 dark:bg-gray-900;
}

/* Logo en la barra superior */
.fi-topbar-brand {
    @apply text-white;
}

/* Enlaces de navegación en la barra superior */
.fi-topbar-nav {
    @apply text-white;
}

.fi-topbar-nav-item {
    @apply text-gray-300 hover:text-white hover:bg-gray-800;
}

/* Botón de usuario en la barra superior */
.fi-topbar-user-menu-trigger {
    @apply text-white hover:bg-gray-800;
}

/* Dropdown del menú de usuario */
.fi-topbar-user-menu {
    @apply bg-gray-900 border-gray-700;
}

.fi-topbar-user-menu-item {
    @apply text-gray-300 hover:text-white hover:bg-gray-800;
}

/* Botón de modo oscuro/claro (si existe) */
.fi-topbar-theme-toggle {
    @apply text-white hover:bg-gray-800;
}

/* Cualquier otro elemento en la barra superior */
.fi-topbar * {
    @apply text-white;
}

/* Asegurar que el logo se vea bien en fondo oscuro */
.fi-topbar-brand img {
    @apply brightness-0 invert;
}