:root {
    /* Modo claro */
    --sidebar-bg-light: #F2F2F2;
    --sidebar-bg-hover-light: #F5EAEA;
    --sidebar-icon-light-active: #E63948;
    --sidebar-icon-label-light: #1D1D1D;

    /* Modo oscuro */
    --sidebar-bg-dark: #1D1D1D;
    --sidebar-bg-dark-hover: #4A1F1F;
    --sidebar-icon-dark-active: #E63948;
    --sidebar-icon-label-dark: #F2F2F2;

    --sidebar-bg: var(--sidebar-bg-light);
    --sidebar-bg-hover: var(--sidebar-bg-hover-light);
    --sidebar-icon-active: var(--sidebar-icon-light-active);
    --sidebar-icon-label: var(--sidebar-icon-label-light);

}

.dark {
    --sidebar-bg: var(--sidebar-bg-dark);
    --sidebar-bg-hover: var(--sidebar-bg-dark-hover);
    --sidebar-icon-active: var(--sidebar-icon-dark-active);
    --sidebar-icon-label: var(--sidebar-icon-label-dark);
}

.light {
    --sidebar-bg: var(--sidebar-bg-light);
    --sidebar-bg-hover: var(--sidebar-bg-hover-light);
    --sidebar-icon-active: var(--sidebar-icon-light-active);
    --sidebar-icon-label: var(--sidebar-icon-label-light);
}

/* Sidebar: Fondo del contenedor principal - Modo claro */
nav.fi-sidebar-nav{
    background-color: var(--sidebar-bg) !important;
}

.fi-topbar nav{
    background-color: var(--sidebar-bg) !important;
}

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

.fi-sidebar-item.fi-active{
    background-color: var(--sidebar-bg) !important;
}

.fi-sidebar-item-button{
    background-color: var(--sidebar-bg) !important;
}

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

.fi-sidebar-item-button:hover{
    background-color: var(--sidebar-bg-hover) !important;
}

.fi-sidebar-group-items {
    background-color: var(--sidebar-bg) !important;
}

/* Íconos y etiquetas - Modo claro */
.fi-sidebar-item-icon{
    color: var(--sidebar-icon-label) !important;
}

.fi-sidebar-item-label{
    color: var(--sidebar-icon-label) !important;
}

.fi-sidebar-group-label {
    color: var(--sidebar-icon-label) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--sidebar-icon-active) !important; 
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--sidebar-icon-active) !important; 
}

header.fi-sidebar-header{
    width: 15rem !important;
}

/* Sidebar abierto */
aside.fi-sidebar.fi-sidebar-open nav.fi-sidebar-nav {
    width: 15rem !important;
}

/* Sidebar colapsado */
aside.fi-sidebar:not(.fi-sidebar-open) nav.fi-sidebar-nav {
    width: 5rem;
}

.fi-sidebar{
width: 15rem !important;
}

/* Tarjeta de widget */
.widget-card {
    display: flex;
    align-items: center;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); /* shadow */
    transition: background-color 0.2s, border-color 0.2s; /* transition */
    border: 1px solid var(--sidebar-bg);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-icon-label);
    text-decoration: none; /* para <a> */
}

.widget-card:hover {
    background-color: var(--sidebar-bg-hover);
    cursor: pointer;
}

/* Icono en los widgets */
.widget-icon {
    width: 2.5rem; /* h-10 */
    height: 2.5rem; /* w-10 */
    color: var(--sidebar-icon-active);
    flex-shrink: 0; /* evita que se reduzca si el contenedor es pequeño */
}

/* Título de la tarjeta */
.widget-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;    /* font-semibold */
    color: var(--sidebar-icon-label);
    display: block;
}

/* Descripción de la tarjeta */
.widget-subtitle {
    font-size: 0.875rem; /* text-sm */
    color: var(--sidebar-icon-label);
    display: block;
}