/*
 * Paneles de negocios (/app) y super (/super) — solo computadora, 1024 px en adelante. 21/10/2026.
 * Mismo criterio que la portada (Linear, Stripe, Vercel), pero discreto: es pantalla de trabajo.
 * Barra superior translúcida, menú con marca del lugar activo, tarjetas y estadísticas que
 * responden al mouse, y filas de tabla con guía a la izquierda.
 */
@media (min-width: 1024px) {
    /* Barra superior translúcida. */
    .fi-topbar > nav {
        background: rgba(255, 255, 255, 0.82) !important;
        backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    }
    .dark .fi-topbar > nav { background: rgba(17, 17, 20, 0.80) !important; }

    /* Menú lateral: barra de color en el lugar activo y desplazamiento suave al pasar. */
    .fi-sidebar-item > a, .fi-sidebar-item-button { position: relative; transition: background 0.15s ease, padding-left 0.15s ease; }
    .fi-sidebar-item:not(.fi-active) > a:hover { padding-left: 0.95rem; }
    .fi-sidebar-item.fi-active > a::before {
        content: ''; position: absolute; left: -0.5rem; top: 22%; bottom: 22%; width: 3px;
        border-radius: 3px; background: rgb(var(--primary-500));
    }

    /* Tarjetas y estadísticas: brillo que sigue al mouse y leve elevación. */
    .fi-section, .fi-wi-stats-overview-stat { position: relative; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
    .fi-section::after, .fi-wi-stats-overview-stat::after {
        content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        opacity: 0; transition: opacity 0.25s ease;
        background: radial-gradient(380px circle at var(--pw-x, 50%) var(--pw-y, 50%), rgba(var(--primary-500), 0.07), transparent 45%);
    }
    .fi-section:hover::after, .fi-wi-stats-overview-stat:hover::after { opacity: 1; }
    .fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.35); }

    /* Tablas: guía de color en la fila bajo el mouse. */
    .fi-ta-row { transition: background 0.12s ease; }
    .fi-ta-row:hover { box-shadow: inset 3px 0 0 rgb(var(--primary-500)); }

    /* Botones principales: halo suave. */
    .fi-btn-color-primary { transition: box-shadow 0.2s ease, transform 0.15s ease; }
    .fi-btn-color-primary:hover { box-shadow: 0 8px 22px -8px rgba(var(--primary-500), 0.65); }
    .fi-btn-color-primary:active { transform: translateY(1px); }

    /* Al cambiar de pantalla, el contenido entra suave. */
    .fi-main > * { animation: pw-entra 0.28s ease both; }
    @keyframes pw-entra { from { opacity: 0; transform: translateY(6px); } }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .fi-main > * { animation: none; }
    .fi-wi-stats-overview-stat:hover { transform: none; }
    .fi-sidebar-item:not(.fi-active) > a:hover { padding-left: revert; }
}