/* UI-9 — Preferencias: tema oscuro, densidad compacta, escala de fuente */

html[data-font-scale="small"] {
    font-size: 13px;
}

html[data-font-scale="normal"] {
    font-size: 14px;
}

html[data-font-scale="large"] {
    font-size: 15px;
}

html[data-density="compact"] {
    --density-table-cell-x: 0.45rem;
    --density-table-cell-y: 0.28rem;
    --density-table-head-y: 0.38rem;
    --density-row-height: 30px;
}

html[data-density="compact"] .impulsa-form .form-control,
html[data-density="compact"] .impulsa-form .form-select {
    min-height: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

html[data-density="compact"] .impulsa-catalog-filters {
    padding: 0.6rem 0.75rem;
}

/* ── Tema oscuro (WinUI-inspired, legible en ERP) ─────────────── */
html[data-theme="dark"] {
    color-scheme: dark;

    --st-page-bg: #0e1922;
    --st-surface: #152433;
    --st-surface-elevated: #1b2d3d;
    --st-surface-border: #2a4054;
    --st-pearl: #1a2c3b;
    --st-silver-pearl: #1f3344;

    --st-text-primary: #e8f1f7;
    --st-text-secondary: #9eb3c4;
    --st-text-header: #ffffff;
    --st-text-header-muted: #b8d4e8;

    --st-topbar: #005a88;
    --st-table-header-bg: #006fa8;
    --st-table-zebra: rgba(0, 144, 208, 0.1);
    --st-table-hover: #1e3344;
    --st-table-selected: rgba(0, 144, 208, 0.22);
    --st-menu-active-bg: rgba(0, 144, 208, 0.2);

    --st-status-inactive-bg: #243848;
    --st-status-inactive-border: #3a5568;
    --st-status-inactive-text: #b8ccd9;

    --impulsa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --impulsa-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);

    --bs-body-bg: var(--st-page-bg);
    --bs-body-color: var(--st-text-primary);
    --bs-border-color: var(--st-surface-border);
    --bs-link-color: var(--st-deep-blue-light-2);
    --bs-link-hover-color: var(--st-deep-blue-light-1);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--st-surface-elevated);
    color: var(--st-text-primary);
    border-color: var(--st-surface-border);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--st-surface-elevated);
    color: var(--st-text-primary);
}

html[data-theme="dark"] .impulsa-sidebar-search input {
    background: var(--st-surface-elevated);
    color: var(--st-text-primary);
}

html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--st-text-secondary);
}

html[data-theme="dark"] .crud-grid-filter-row th {
    background: var(--st-surface-elevated);
}

html[data-theme="dark"] .menu-tree-area-toggle {
    background: var(--st-surface-elevated);
}

html[data-theme="dark"] .impulsa-login-body {
    background: linear-gradient(145deg, #0e1922 0%, #152433 45%, #1a3a52 100%);
}

/* Panel preferencias */
.display-prefs-dropdown .dropdown-menu {
    min-width: 280px;
    padding: 0.85rem;
    border-color: var(--st-surface-border);
    background: var(--st-surface);
    box-shadow: var(--impulsa-shadow-md);
}

.display-prefs-group + .display-prefs-group {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--st-surface-border);
}

.display-prefs-group legend {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--st-gold-intense);
    margin-bottom: 0.45rem;
}

.display-prefs-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.display-prefs-option input {
    accent-color: var(--st-deep-blue);
}

.display-prefs-accent-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.display-prefs-color-input {
    width: 2.75rem;
    height: 2rem;
    padding: 0.15rem;
}

.display-prefs-accent-code {
    font-size: 0.78rem;
    color: var(--st-text-secondary);
}

.display-prefs-accent-presets {
    display: flex;
    gap: 0.4rem;
}

.display-prefs-preset-btn {
    width: 1.65rem;
    height: 1.65rem;
    border: 2px solid var(--st-surface-border);
    border-radius: 999px;
    background: var(--preset-color);
    cursor: pointer;
    padding: 0;
}

.display-prefs-preset-btn:hover {
    transform: scale(1.06);
}