/* Añadir borde inferior al header */
body:not(.dark) .fi-topbar.bg-white,
body:not(.dark) .fi-topbar > .bg-white,
body:not(.dark) .fi-layout .fi-topbar.bg-white,
body:not(.dark) nav.bg-white,
body:not(.dark) header.bg-white {
    border-bottom: 2px solid #73c8fa !important;
}

.fi-sidebar-header {
    background-color: #f5f8fa !important;
}

.fi-topbar nav {
    background-color: #f5f8fa !important;
}

/* Hacer el botón independiente del tema */
.fi-topbar .fi-icon-btn.fi-color-gray svg {
    stroke: rgb(114, 113, 113) !important;
}

.fi-sidebar-header button.fi-color-gray svg {
    stroke: rgb(114, 113, 113) !important;
}

/* Estilos mejorados para el menú lateral en modo claro con estilo futurista */
body:not(.dark) .fi-sidebar-item {
    margin-bottom: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
}

/* Efecto de estado inactivo */
body:not(.dark) .fi-sidebar-item:not(.fi-active) {
    border-left: 3px solid transparent;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(250, 250, 250, 0.3));
}

/* Efecto hover sofisticado */
body:not(.dark) .fi-sidebar-item:hover:not(.fi-active) {
    transform: translateX(2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, rgba(245, 250, 255, 0.8), rgba(240, 245, 255, 0.4));
    border-left: 3px solid rgba(115, 200, 250, 0.5);
}

/* Estilo para elementos activos */
body:not(.dark) .fi-sidebar-item.fi-active {
    background: linear-gradient(145deg, rgba(115, 200, 250, 0.2), rgba(115, 200, 250, 0.1));
    border-left: 3px solid #52b8f3;
    box-shadow: 0 2px 6px rgba(8, 107, 165, 0.15);
    transform: translateX(2px);
}

/* Efectos adicionales de transición */
body:not(.dark) .fi-sidebar-item .fi-sidebar-item-button {
    transition: padding 0.3s ease;
}

body:not(.dark) .fi-sidebar-item:hover .fi-sidebar-item-button,
body:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    padding-left: 1rem;
}

/* Mantener el estilo del header de la barra lateral en modo oscuro */
html.dark .fi-sidebar-header,
.dark .fi-sidebar-header,
[data-mode="dark"] .fi-sidebar-header {
    background-color: rgb(10, 24, 43) !important;
}

/* No cambiar header en modo oscuro pero mantener borde */
html.dark .fi-topbar.bg-white,
.dark .fi-topbar .bg-white,
[data-mode="dark"] .fi-topbar.bg-white {
    background-color: rgb(15, 23, 42) !important;
}

/* Mejorar contraste en elementos del menú lateral en modo oscuro */
html.dark .fi-sidebar-item:not(.fi-active),
.dark .fi-sidebar-item:not(.fi-active),
[data-mode="dark"] .fi-sidebar-item:not(.fi-active) {
    border-left: 3px solid transparent;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.3));
}

/* Efecto hover para modo oscuro */
html.dark .fi-sidebar-item:hover:not(.fi-active),
.dark .fi-sidebar-item:hover:not(.fi-active),
[data-mode="dark"] .fi-sidebar-item:hover:not(.fi-active) {
    transform: translateX(2px);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.5));
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Elemento activo en modo oscuro */
html.dark .fi-sidebar-item.fi-active,
.dark .fi-sidebar-item.fi-active,
[data-mode="dark"] .fi-sidebar-item.fi-active {
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.3), rgba(30, 58, 138, 0.1));
    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.2);
    transform: translateX(2px);
}