/* ─────────────────────────────────────────────────────
   FIM Latinoamérica — Corporate Blue Theme
   Primary: #0047AB  |  Navy sidebar: #002960
   ───────────────────────────────────────────────────── */

/* Sidebar — fondo azul marino FIM */
.fi-sidebar {
    background-color: #002960 !important;
}

.fi-sidebar-header {
    background-color: #002960 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.fi-sidebar-nav {
    background-color: #002960 !important;
}

/* Fondo del footer del sidebar */
.fi-sidebar > div {
    background-color: #002960 !important;
}

/* Navigation group labels */
.fi-sidebar-group-label {
    color: #93C5FD !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Nav items — texto siempre blanco sobre fondo oscuro */
.fi-sidebar-item-button {
    color: #ffffff !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Nav item activo — modo oscuro */
.dark .fi-sidebar .fi-active,
.dark .fi-sidebar .fi-sidebar-item-button.fi-active,
.dark .fi-sidebar a.fi-active,
.dark .fi-sidebar button.fi-active,
.dark .fi-sidebar li .fi-active {
    background-color: #0047AB !important;
    color: #ffffff !important;
}

/* Iconos heredan color del botón */
.fi-sidebar-item-button svg {
    color: inherit !important;
}

/* Texto de los items (span label) siempre blanco */
.fi-sidebar-item-button span,
.fi-sidebar-item-label {
    color: #ffffff !important;
}

/* Nombre de marca en sidebar */
.fi-sidebar-header a,
.fi-sidebar-header span.fi-brand-name,
.fi-brand-name {
    color: #ffffff !important;
}

/* Logo — filtro blanco para que sea visible sobre fondo oscuro */
.fi-sidebar-header img,
.fi-brand-logo {
    filter: brightness(0) invert(1) !important;
}

/* Botón colapsar sidebar */
.fi-sidebar-close-btn,
.fi-sidebar-close-btn svg {
    color: #ffffff !important;
}

/* User avatar menu en sidebar (si existe) */
.fi-sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    background-color: #001f4e !important;
}

/* Separadores de grupo en sidebar */
.fi-sidebar-group {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ───── Login page ───── */
.fi-simple-layout {
    background-color: #f0f4ff !important;
}

.fi-simple-main {
    border-top: 4px solid #0047AB !important;
}

/* ───── Topbar ───── */
.fi-topbar nav {
    border-bottom-color: #E2E8F0 !important;
}

/* ───── Stat widgets highlight ───── */
.fi-wi-stats-overview-stat {
    border-radius: 0.5rem;
}

/* ─────────────────────────────────────────────────────
   DARK MODE — sidebar con fondo negro
   El resto del panel usa los colores oscuros de Filament.
   ───────────────────────────────────────────────────── */
.dark .fi-sidebar,
.dark .fi-sidebar-header,
.dark .fi-sidebar-nav,
.dark .fi-sidebar > div {
    background-color: #000000 !important;
}

.dark .fi-sidebar-footer {
    background-color: #000000 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}