/* Borde de los campos de formulario más grueso y oscuro, para que el usuario
   distinga con claridad dónde empieza y termina cada campo. */
.fi-input-wrp:not(.fi-invalid) {
    box-shadow: 0 0 0 1.5px #94a3b8;
}

.dark .fi-input-wrp:not(.fi-invalid) {
    box-shadow: 0 0 0 1.5px #64748b;
}

.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1.5px var(--danger-600);
}

.dark .fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1.5px var(--danger-500);
}

/* Nombre de la marca en el color primario del panel */
.fi-logo {
    color: var(--primary-600);
}

.dark .fi-logo {
    color: var(--primary-400);
}

/* Ítem del menú lateral seleccionado: fondo primario y letras blancas */
li.fi-sidebar-item.fi-active > a.fi-sidebar-item-btn {
    background-color: var(--primary-600);
}

li.fi-sidebar-item.fi-active > a.fi-sidebar-item-btn:hover,
li.fi-sidebar-item.fi-active > a.fi-sidebar-item-btn:focus-visible {
    background-color: var(--primary-700);
}

li.fi-sidebar-item.fi-active > a.fi-sidebar-item-btn > .fi-icon,
li.fi-sidebar-item.fi-active > a.fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #fff;
}

/* Al pasar el mouse, cualquier ítem del menú se ve como el ítem seleccionado */
li.fi-sidebar-item > a.fi-sidebar-item-btn:hover {
    background-color: var(--primary-600);
}

li.fi-sidebar-item > a.fi-sidebar-item-btn:hover > .fi-icon,
li.fi-sidebar-item > a.fi-sidebar-item-btn:hover > .fi-sidebar-item-label {
    color: #fff;
}