/* =========================================
   MODO CLARO (Tus verdes tibios)
   ========================================= */
:root {
    --bg-topbar: #f0fdf4;
    --bg-sidebar: #f9fefb;
    --bg-item-active: #dcfce7;
    --text-active: #166534;
    --border-stats: #dcfce7;
}

/* =========================================
   MODO OSCURO (Ajuste automático)
   ========================================= */
.dark {
    --bg-topbar: #064e3b;      /* Verde muy oscuro (Emerald 900) */
    --bg-sidebar: #022c22;    /* Verde casi negro */
    --bg-item-active: #065f46; /* Verde bosque */
    --text-active: #d1fae5;    /* Texto menta claro */
    --border-stats: #065f46;
}

/* --- APLICACIÓN DE ESTILOS --- */

/* Cabecera */
.fi-topbar {
    background-color: var(--bg-topbar) !important;
}

/* Sidebar */
.fi-sidebar {
    background-color: var(--bg-sidebar) !important;
}

/* Logo */
.fi-logo {
    color: #22c55e !important; /* Un verde que se ve bien en ambos */
}

/* Ítem Activo */
.fi-sidebar-item-active {
    background-color: var(--bg-item-active) !important;
    border-radius: 8px !important;
    margin-inline: 8px !important;
}

.fi-sidebar-item-active span, 
.fi-sidebar-item-active svg {
    color: var(--text-active) !important;
}

/* Títulos de grupos */
.fi-sidebar-group-label {
    color: #4ade80 !important; /* Verde vivo para que destaque siempre */
}

/* Hover */
.fi-sidebar-item-button:hover {
    background-color: var(--bg-item-active) !important;
    opacity: 0.8;
}

/* Los 4 botones del inicio (Stats) */
.fi-wi-stats-overview-stat {
    border: 1px solid var(--border-stats) !important;
    border-bottom: 4px solid #22c55e !important;
}

.dark .fi-wi-stats-overview-stat {
    background-color: #064e3b !important;
}