@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;700&display=swap');

/* Forzar fuente moderna */
:root {
    --font-family: 'DM Sans', sans-serif;
}

body {
    font-family: var(--font-family);
}

/* --- SIDEBAR PERSONALIZADO (Brand Dynamic) --- */
.fi-sidebar {
    background: var(--primary-brand, rgb(var(--primary-900))) !important;
    border-right: none !important;
}

/* Color de texto e iconos en Sidebar (Blanco/Transparente para contraste) */
.fi-sidebar-group-label,
.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

.fi-sidebar-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Iconos y Logo de Escalah + Botón Colapso */
.fi-sidebar-item-icon,
.fi-sidebar-header .fi-icon-btn,
.escalah-iso,
.escalah-wordmark {
    color: white !important;
}

/* Transparencias consistentes para Hover, Focus y Active (Elimina grises de modo claro) */
.fi-sidebar-item-button {
    background-color: transparent !important;
    transition: background-color 0.2s ease !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Elemento Activo en Sidebar */
.fi-sidebar-item-active,
.fi-sidebar-item-button.fi-active {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
    color: white !important;
    font-weight: 700 !important;
}

/* --- ESTILIZACIÓN DE TARJETAS (Soft UI) --- */
/* Hacer las tarjetas (Widgets, Forms, Tables) más amigables */
.fi-section,
.fi-fo-component-container,
.fi-ta-content {
    border-radius: 1rem !important;
    /* Bordes más redondos (16px) */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025) !important;
    /* Sombra suave */
    border: 1px solid rgba(var(--gray-200), 0.5);
}

/* Botones Principales más redondos */
.fi-btn {
    border-radius: 0.75rem !important;
}

/* Topbar flotante (Opcional, limpia la cabecera) */
.fi-topbar {
    background-color: white !important;
    /* O dark:bg-gray-900 */
    border-bottom: 1px solid rgb(var(--gray-100));
}