/* =====================================================================
   SISGEEM — Panel con el estilo del POS (cristal oscuro + aurora)
   Solo se carga con POS_UI_TACTIL=true (hoy: demo). Ver AdminPanelProvider.
   RENDIMIENTO: fondo ESTÁTICO y sin backdrop-filter en elementos que se
   repiten o están siempre en pantalla (tarjetas, filas, tablas, barras);
   el desenfoque solo va en ventanas y menús que aparecen un momento.
   ===================================================================== */

/* ---------- Fondo aurora (estático) ---------- */
html.fi { background: #05060b !important; }
html.fi body.fi-body { background: transparent !important; }
html.fi body.fi-body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 45% 38% at 22% 8%, rgba(190, 24, 93, .40) 0%, transparent 70%),
        radial-gradient(ellipse 40% 36% at 72% 6%, rgba(124, 58, 237, .42) 0%, transparent 70%),
        radial-gradient(ellipse 36% 40% at 98% 55%, rgba(162, 28, 175, .28) 0%, transparent 70%),
        radial-gradient(ellipse 42% 40% at 4% 85%, rgba(8, 145, 178, .36) 0%, transparent 70%),
        radial-gradient(ellipse 48% 42% at 60% 95%, rgba(29, 78, 216, .36) 0%, transparent 70%);
}
html.fi body.fi-body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- Barra superior y lateral ---------- */
html.fi nav.fi-topbar {
    background: rgba(9, 8, 20, .86) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25) !important;
}
html.fi .fi-sidebar {
    background: linear-gradient(180deg, rgba(30, 20, 60, .55) 0%, rgba(10, 10, 24, .55) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .07) !important;
}
html.fi .fi-sidebar-header { background: transparent !important; box-shadow: none !important; }
html.fi .fi-sidebar-group-label { color: #94a3b8 !important; letter-spacing: .04em; }
html.fi .fi-sidebar-item-btn { border-radius: 12px !important; transition: background .12s ease; }
html.fi .fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, .06) !important; }
html.fi .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html.fi .fi-sidebar-item-btn.fi-active {
    background: linear-gradient(90deg, rgba(249, 115, 22, .22), rgba(249, 115, 22, .06)) !important;
    box-shadow: inset 2px 0 0 #f97316 !important;
}
html.fi .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html.fi .fi-sidebar-item-btn.fi-active .fi-sidebar-item-label { color: #fff !important; }
html.fi .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html.fi .fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon { color: #fb923c !important; }

/* ---------- Superficies de cristal (sin desenfoque) ---------- */
html.fi :is(.mod-card, .fi-header, .fi-tabs, .fi-ta-ctn, .fi-section, .fi-wi-widget, .fi-wi-stats-overview-stat,
            .fi-ta-record, .fi-in-entry-wrp, .fi-fo-repeater-item, .fi-fieldset,
            .dx-hero, .dx-filtros, .dx-strip, .dx-panel, .dx-card, .dx-kpi) {
    background: linear-gradient(160deg, rgba(88, 50, 170, .16) 0%, rgba(255, 255, 255, .035) 60%, rgba(255, 255, 255, .025) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
html.fi :is(.mod-card, .fi-ta-record) { transition: transform .15s ease, border-color .15s ease, background .15s ease !important; }
html.fi :is(.mod-card, .fi-ta-record.fi-clickable):hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .22) !important;
    background: linear-gradient(160deg, rgba(88, 50, 170, .24) 0%, rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .04) 100%) !important;
}
html.fi :is(.mod-card, .fi-section, .fi-ta-ctn, .dx-panel, .dx-hero, .dx-filtros, .dx-strip) { border-radius: 20px !important; }
html.fi .fi-ta-record { border-radius: 18px !important; }
html.fi .fi-section-header, html.fi .fi-ta-header, html.fi .fi-ta-header-toolbar { background: transparent !important; }
html.fi .fi-ta-table thead tr, html.fi .fi-ta-table thead th { background: rgba(255, 255, 255, .03) !important; }
html.fi .fi-ta-row:hover, html.fi .fi-ta-table tbody tr:hover { background: rgba(255, 255, 255, .035) !important; }
html.fi .fi-ta-table, html.fi .fi-ta-content { background: transparent !important; }

/* Módulos propios (tablero, contabilidad, reportes…): mismas variables de color. */
html.fi .dx {
    --papel: rgba(255, 255, 255, .035);
    --hairline: rgba(255, 255, 255, .10);
    --tinta: #1c1238;
    --tinta-2: #141a36;
    --verde: #fb923c;
    --verde-suave: rgba(249, 115, 22, .14);
    --ambar-suave: rgba(251, 191, 36, .12);
}
html.fi .dx-btn { background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; }
html.fi .dx-btn:hover { background: rgba(255, 255, 255, .12) !important; }

/* ---------- Campos (cápsulas translúcidas) ---------- */
html.fi .fi-input-wrp {
    background: rgba(255, 255, 255, .06) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) !important;
}
html.fi .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .7), 0 0 0 3px rgba(249, 115, 22, .18) !important; }
html.fi .dx input, html.fi .dx select {
    background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px !important; color: #fff !important;
}

/* ---------- Botones ---------- */
html.fi .fi-btn { border-radius: 12px !important; transition: transform .08s ease, filter .12s ease, box-shadow .12s ease; }
html.fi .fi-btn:active { transform: scale(.97); }
html.fi .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) {
    background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .35), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
html.fi .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover { filter: brightness(1.06); }
html.fi .fi-btn.fi-color-gray:not(.fi-link) {
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) !important;
}

/* ---------- Pestañas ---------- */
html.fi .fi-tabs { border-radius: 16px !important; padding: 4px !important; }
html.fi .fi-tabs-item { border-radius: 12px !important; }
html.fi .fi-tabs-item.fi-active {
    background: rgba(249, 115, 22, .16) !important;
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .45) !important;
}

/* ---------- Ventanas, menús y avisos (desenfoque: aparecen un momento) ---------- */
html.fi .fi-modal-window, html.fi .fi-dropdown-panel, html.fi .fi-no-notification {
    background: linear-gradient(160deg, rgba(42, 36, 74, .82) 0%, rgba(18, 18, 30, .88) 100%) !important;
    backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
html.fi .fi-modal-window { border-radius: 22px !important; }
html.fi .fi-dropdown-panel { border-radius: 18px !important; }
html.fi .fi-dropdown-list-item { border-radius: 10px !important; }
html.fi .fi-modal-close-overlay { background: rgba(3, 4, 10, .6) !important; }

/* ---------- Entrada al panel (login) ---------- */
html.fi .fi-simple-main {
    background: linear-gradient(160deg, rgba(42, 36, 74, .72) 0%, rgba(18, 18, 30, .82) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 24px !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

/* ---------- Logo "S" naranja junto a SISGEEM (igual que el POS) ---------- */
html.fi .fi-logo { display: inline-flex !important; align-items: center; gap: 10px; }
html.fi .fi-logo::before {
    content: 'S'; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #f97316 0%, #ea580c 100%); color: #fff; font-weight: 900; font-size: 16px;
    box-shadow: 0 3px 10px rgba(249, 115, 22, .35);
}

/* ---------- Barras de desplazamiento finas (sin la gris de Windows) ---------- */
html.fi ::-webkit-scrollbar { width: 6px; height: 6px; }
html.fi ::-webkit-scrollbar-track { background: transparent; }
html.fi ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .22); border-radius: 999px; }
html.fi ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .4); }
html.fi ::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
@supports (-moz-appearance: none) { html.fi * { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .25) transparent; } }