/* ==========================================================================
   Pestañas del sistema (barra de navegación superior) · Liquid Glass
   Mismo lenguaje que citas-liquid-glass.css / pacientes-liquid-glass.css /
   cierre-caja-liquid-glass.css: vidrio real (blur) en la única superficie
   grande de la barra, color del tema clínico activo (--primary/--secondary/
   --accent, ver js/theme.js — .main-nav YA los usaba, aquí solo se vuelven
   translúcidos con color-mix() para que el blur se note), brillo especular
   y modo oscuro. No toca layout, z-index, ni las variantes alternativas de
   nav (nav-style-dock/floating/megamenu tienen su propio fondo con mayor
   especificidad y siguen intactas).
   ========================================================================== */

.main-nav {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 88%, transparent) 0%,
        color-mix(in srgb, var(--secondary) 88%, transparent) 50%,
        color-mix(in srgb, var(--accent) 88%, transparent) 100%) !important;
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

/* Brillo especular diagonal — lo que hace que se lea como vidrio y no como
   una barra de color plano semitransparente. z-index:0 para quedar detrás
   del contenido real de la barra (logo, pestañas, menú de usuario). */
.main-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .35) 48%, transparent 60%);
    opacity: .5;
    mix-blend-mode: screen;
}

.main-nav .nav-content {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .main-nav {
    background: linear-gradient(135deg,
        color-mix(in srgb, #0f172a 88%, transparent) 0%,
        color-mix(in srgb, #1e293b 88%, transparent) 100%) !important;
}

/* Equipos de bajos recursos / "reducir movimiento": el blur es lo más caro,
   se apaga entero — el degradado de color ya da sensación de vidrio. */
@media (prefers-reduced-motion: reduce) {
    .main-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: none !important;
    }

    .main-nav::after {
        display: none !important;
    }
}