/* ============================================================================= NTM – Modo compacto Se activa cuando tiene la clase "fi-compact" ============================================================================= */ /* ── Sidebar: navegación ─────────────────────────────────────────────────── */ html.fi-compact .fi-sidebar-item-btn { padding-top: 0.3125rem !important; /* 5 px (normal ≈ 8 px) */ padding-bottom: 0.3125rem !important; font-size: 0.8125rem !important; /* 13 px */ } html.fi-compact .fi-sidebar-item-icon { width: 1rem !important; height: 1rem !important; } html.fi-compact .fi-sidebar-item-label { font-size: 0.8125rem !important; } html.fi-compact .fi-sidebar-group-label { padding-top: 0.375rem !important; padding-bottom: 0.25rem !important; font-size: 0.6875rem !important; /* 11 px */ letter-spacing: 0.08em !important; } html.fi-compact .fi-sidebar-group-items { gap: 0 !important; } html.fi-compact .fi-sidebar-nav-groups { gap: 0.375rem !important; } /* Sidebar header logo area */ html.fi-compact .fi-sidebar-header-ctn { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } /* ── Tabla de datos ───────────────────────────────────────────────────────── */ html.fi-compact .fi-ta-cell { padding-top: 0.25rem !important; /* 4 px (normal ≈ 12–16 px) */ padding-bottom: 0.25rem !important; font-size: 0.8125rem !important; } html.fi-compact .fi-ta-header-cell { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; font-size: 0.6875rem !important; } html.fi-compact .fi-ta-record { font-size: 0.8125rem !important; } /* Tabla: cabecera (búsqueda / filtros) */ html.fi-compact .fi-ta-header-ctn { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } html.fi-compact .fi-ta-search-field { --input-height: 1.75rem !important; font-size: 0.8125rem !important; } /* ── Secciones / Tarjetas ────────────────────────────────────────────────── */ html.fi-compact .fi-sc-section { --section-padding: 0.75rem !important; } html.fi-compact .fi-sc-section-content-ctn { gap: 0.5rem !important; padding: 0.75rem !important; } html.fi-compact .fi-sc-section-label-ctn { padding: 0.625rem 0.875rem !important; } html.fi-compact .fi-sc-section-label { font-size: 0.875rem !important; } html.fi-compact .fi-section-content { padding: 0.75rem !important; gap: 0.5rem !important; } /* ── Página principal ────────────────────────────────────────────────────── */ html.fi-compact .fi-page-content { padding: 1rem !important; gap: 0.75rem !important; } html.fi-compact .fi-page-header-main-ctn { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } html.fi-compact .fi-header-heading { font-size: 1.125rem !important; line-height: 1.5rem !important; } /* ── Widgets stats ───────────────────────────────────────────────────────── */ html.fi-compact .fi-wi-stats-overview-stat { padding: 0.875rem 1rem !important; } html.fi-compact .fi-wi-stats-overview-stat-value { font-size: 1.375rem !important; line-height: 1.75rem !important; } html.fi-compact .fi-wi-stats-overview-stat-label { font-size: 0.75rem !important; } html.fi-compact .fi-wi-stats-overview-stat-description { font-size: 0.75rem !important; } /* ── Badges / Tags ───────────────────────────────────────────────────────── */ html.fi-compact .fi-badge { padding: 0.125rem 0.375rem !important; font-size: 0.6875rem !important; } /* ── Formularios ─────────────────────────────────────────────────────────── */ html.fi-compact .fi-fo-field-wrp { gap: 0.25rem !important; } html.fi-compact .fi-fo-field-wrp-label { font-size: 0.8125rem !important; line-height: 1.25rem !important; } /* ── Indicador de modo compacto ─────────────────────────────────────────── */ .ntm-density-btn { display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; padding: 0.4rem; color: var(--gray-400); transition: color 0.15s, background-color 0.15s; cursor: pointer; border: none; background: transparent; } .ntm-density-btn:hover { background-color: color-mix(in srgb, var(--gray-400) 15%, transparent); color: var(--gray-600); } html.dark .ntm-density-btn:hover { background-color: color-mix(in srgb, var(--gray-500) 20%, transparent); color: var(--gray-300); } html.fi-compact .ntm-density-btn { color: var(--primary-500); }