/* ==========================================================================
   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, brillo especular y modo oscuro. Usa --glass-primary/
   --glass-secondary/--glass-accent (ver js/theme.js) en vez de --primary/
   --secondary/--accent crudo: son versiones del tema con la saturación
   topada y la luminosidad centrada para que se vean bien mezcladas a baja
   opacidad bajo blur — los temas muy vivos (naranja, rubí, dorado) se ven
   sucios si se usa el color de marca sin ese ajuste. 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-light) 74%, white) 0%,
        color-mix(in srgb, var(--accent) 34%, white) 52%,
        color-mix(in srgb, var(--secondary) 22%, white) 100%) !important;
    border-bottom-color: color-mix(in srgb, var(--primary) 24%, white) !important;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--primary) 15%, transparent), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

/* Las pestañas claras de la referencia necesitan tinta clínica, no texto
   blanco. El color de marca conserva el contraste y unifica iconos/estados. */
html:not([data-glass-palette="nocheClinica"]) .main-nav .nav-item,
html:not([data-glass-palette="nocheClinica"]) .main-nav .nav-section-toggle {
    color: var(--primary-dark) !important;
}

html:not([data-glass-palette="nocheClinica"]) .main-nav .nav-section {
    background: rgba(255,255,255,.36);
    border-color: rgba(255,255,255,.8);
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}

html:not([data-glass-palette="nocheClinica"]) .main-nav .nav-item.active {
    color: var(--primary) !important;
    background: rgba(255,255,255,.68) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, white) !important;
    box-shadow: inset 0 1px 0 #fff, 0 8px 22px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

html[data-glass-palette="nocheClinica"] .main-nav {
    background: linear-gradient(135deg, #f7f9fc 0%, #dce2e9 48%, #b8c3d0 100%) !important;
    border-bottom-color: rgba(255,255,255,.82) !important;
    box-shadow: 0 14px 32px rgba(51,65,85,.18), inset 0 2px 0 rgba(255,255,255,.95) !important;
}

html[data-glass-palette="nocheClinica"] .main-nav .nav-item.active {
    color: #ffffff !important;
    background: #20262e !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 8px 22px rgba(17,20,24,.26), inset 0 2px 0 rgba(255,255,255,.28) !important;
}

/* Navbar V4 renderizado por liquid-glass-preview.js. Estas son las fichas que
   el usuario ve realmente; antes solo heredaban el acento del tema y su
   superficie seguía fija en gris perla. */
html:not([data-glass-palette="nocheClinica"]) body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-v3-ready {
    background:
        radial-gradient(120% 170% at 10% 0%, rgba(255,255,255,.98), rgba(255,255,255,.48) 48%, transparent 76%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary-light) 82%, white),
            color-mix(in srgb, var(--accent) 38%, white)) !important;
    border-color: color-mix(in srgb, var(--primary) 22%, white) !important;
    box-shadow: inset 0 2px 0 #fff, 0 18px 44px -25px color-mix(in srgb, var(--primary) 34%, transparent) !important;
}

html:not([data-glass-palette="nocheClinica"]) body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 {
    --v4-accent: var(--primary);
    --v4-accent-2: var(--secondary);
    --v4-shade: color-mix(in srgb, var(--primary) 30%, transparent);
    --v4-irid: linear-gradient(115deg, var(--secondary), rgba(255,255,255,.96) 35%, var(--accent) 60%, var(--primary) 100%);
}

html:not([data-glass-palette="nocheClinica"]) body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble {
    background: linear-gradient(180deg,
        rgba(255,255,255,.94) 0%,
        color-mix(in srgb, var(--primary-light) 68%, rgba(255,255,255,.76)) 52%,
        color-mix(in srgb, var(--accent) 25%, rgba(255,255,255,.72)) 100%) !important;
    border-color: color-mix(in srgb, var(--primary) 22%, white) !important;
    color: var(--primary-dark) !important;
    box-shadow: inset 0 2px 1px #fff, inset 0 -8px 14px -7px color-mix(in srgb, var(--primary) 30%, transparent), 0 8px 22px -10px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

html:not([data-glass-palette="nocheClinica"]) body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble .lg-v3-icon,
html:not([data-glass-palette="nocheClinica"]) body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble .lg-v3-label {
    color: var(--primary-dark) !important;
}

html:not([data-glass-palette="nocheClinica"]) body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active {
    background: linear-gradient(180deg, rgba(255,255,255,.98), color-mix(in srgb, var(--primary-light) 52%, white) 48%, color-mix(in srgb, var(--secondary) 32%, white)) !important;
    border-color: color-mix(in srgb, var(--primary) 58%, white) !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-v3-ready {
    background:
        radial-gradient(110% 150% at 15% 0%, rgba(255,255,255,.96), transparent 58%),
        linear-gradient(135deg, #f7f9fc, #dce2e9 55%, #b8c3d0) !important;
    border-color: rgba(255,255,255,.92) !important;
    box-shadow: inset 0 2px 0 #fff, inset 0 -14px 28px -20px rgba(51,65,85,.22), 0 18px 38px -22px rgba(51,65,85,.32) !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble {
    background: linear-gradient(180deg, #ffffff 0%, #e8edf2 40%, #aeb9c6 100%) !important;
    border-color: rgba(255,255,255,.92) !important;
    color: #263442 !important;
    box-shadow: inset 0 2px 1px #fff, inset 0 -8px 13px -7px rgba(51,65,85,.3), 0 8px 18px rgba(51,65,85,.16) !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble .lg-v3-icon,
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble .lg-v3-label {
    color: #263442 !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-icon,
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-label {
    color: #ffffff !important;
}

/* En Plata clínica la ficha seleccionada es el único acento oscuro. Esto
   evita teñir todo el dashboard de gris y deja inequívoco el módulo activo. */
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active {
    background: linear-gradient(180deg, #46515e 0%, #27303a 48%, #171d24 100%) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: inset 0 2px 1px rgba(255,255,255,.42), inset 0 -8px 14px rgba(0,0,0,.28), 0 9px 22px rgba(15,23,42,.3) !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-active-dot {
    background: linear-gradient(90deg, #9ca3af, #ffffff) !important;
    box-shadow: 0 0 12px rgba(255,255,255,.62) !important;
}

/* Evita mostrar durante unos milisegundos el navbar clásico/critical antes
   de que liquid-glass-preview.js termine de construir las fichas V4. */
body.liquid-glass-preview .main-nav:not(.lg-v3-ready):not(.lgb-goo-ready) {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity .18s ease !important;
}

/* Override final de máxima especificidad: liquid-glass-preview.css conserva
   varias generaciones del nav y algunas reglas antiguas repetían clases para
   imponer el activo azul. Plata clínica debe ganar incluso contra ellas. */
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active {
    --v4-irid: linear-gradient(115deg, #6b7280, #ffffff 38%, #9ca3af 68%, #252b32) !important;
    background: linear-gradient(180deg, #4b5560 0%, #262d35 48%, #111418 100%) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: inset 0 2px 1px rgba(255,255,255,.42), inset 0 -9px 15px rgba(0,0,0,.3), 0 9px 22px rgba(17,20,24,.3) !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active .lg-v3-icon,
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active .lg-v3-label,
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active .lg-v3-chevron {
    color: #ffffff !important;
}

/* 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). */
/* Plata clínica: las categorías con subpestañas son contenedores claros.
   El negro identifica exclusivamente la pestaña real seleccionada. Inicio,
   que sí es una pestaña directa, conserva el negro cuando está activo. */
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active:not(.is-single) {
    --v4-irid: linear-gradient(115deg, #ffffff, #cfd6dd 48%, #ffffff) !important;
    background: linear-gradient(180deg, #ffffff 0%, #e8edf2 40%, #aeb9c6 100%) !important;
    border-color: rgba(255,255,255,.92) !important;
    color: #263442 !important;
    box-shadow: inset 0 2px 1px #fff, inset 0 -8px 13px -7px rgba(51,65,85,.3), 0 8px 18px rgba(51,65,85,.16) !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active:not(.is-single) > .lg-v3-main .lg-v3-icon,
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active:not(.is-single) > .lg-v3-main .lg-v3-label,
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active:not(.is-single) > .lg-v3-main .lg-v3-chevron {
    color: #263442 !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.is-active .lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.is-active {
    background:
        radial-gradient(90% 42% at 50% 0%, rgba(255,255,255,.16), transparent 72%),
        linear-gradient(180deg, #171a1e 0%, #090b0e 52%, #020304 100%) !important;
    border-color: rgba(255,255,255,.76) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 1px rgba(255,255,255,.28), inset 0 -9px 15px rgba(0,0,0,.62), 0 10px 22px rgba(0,0,0,.34) !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.is-active .lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.is-active .lg-v3-child-icon,
html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.is-active .lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.is-active .lg-v3-child-label {
    color: #ffffff !important;
    text-shadow: 0 1px 2px #000 !important;
}

html[data-glass-palette="nocheClinica"] body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview
.lg-v3-bubble.lg-v3-bubble.is-active .lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.lg-v3-child.is-active::after {
    background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.12) 48%, transparent 72%) !important;
    opacity: .28 !important;
}

.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;
    }
}

/* Vista previa ligera de las ventanas: una mini interfaz ilustrativa, sin
   iframes ni consultas adicionales. */
#nav-window-preview { position:fixed; z-index:10050; width:420px; padding:14px; border:1px solid color-mix(in srgb,var(--primary) 24%,white); border-radius:20px; color:#14243a; background:linear-gradient(145deg,rgba(255,255,255,.96),color-mix(in srgb,var(--primary-light) 55%,rgba(255,255,255,.9))); box-shadow:0 24px 58px rgba(25,52,84,.22),inset 0 1px 0 white; backdrop-filter:blur(24px) saturate(1.25); -webkit-backdrop-filter:blur(24px) saturate(1.25); pointer-events:auto; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(-7px) scale(.97); transform-origin:50% 0; transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility .16s; }
#nav-window-preview.is-visible { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
#nav-window-preview.is-launching { opacity:0; transform:translateY(16px) scale(1.055); }
#nav-window-preview:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 55%,white); outline-offset:3px; }
.nwp-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.nwp-top > span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:white; background:linear-gradient(145deg,var(--primary),var(--secondary)); box-shadow:0 7px 16px color-mix(in srgb,var(--primary) 28%,transparent); }
.nwp-top div { min-width:0; display:flex; flex-direction:column; }
.nwp-top small { color:#7890a7; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.nwp-top strong { overflow:hidden; font-size:14px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.nwp-live { position:relative; height:218px; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:14px; background:#f6f9fc; box-shadow:inset 0 1px 0 white; }
.nwp-live-source { transform:scale(.305)!important; transform-origin:0 0!important; pointer-events:none!important; }
.nwp-live-source * { animation:none!important; transition:none!important; }
.nwp-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#6f8498; text-align:center; background:linear-gradient(135deg,#f9fbfd,color-mix(in srgb,var(--primary-light) 35%,white)); }
.nwp-empty > span { color:var(--primary); font-size:28px; }
.nwp-empty b { color:#29435d; font-size:12px; }
.nwp-empty small { font-size:10px; }
.nwp-canvas i { display:block; width:44%; height:9px; margin-bottom:13px; border-radius:9px; background:color-mix(in srgb,var(--primary) 72%,white); }
.nwp-canvas div { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.nwp-canvas b { height:43px; border:1px solid color-mix(in srgb,var(--primary) 12%,white); border-radius:9px; background:rgba(255,255,255,.78); box-shadow:0 5px 12px rgba(31,73,125,.06); }
.nwp-canvas > span { position:absolute; bottom:11px; height:5px; border-radius:6px; background:color-mix(in srgb,var(--primary) 16%,white); }
.nwp-canvas > span:nth-last-child(2) { left:13px; width:48%; }
.nwp-canvas > span:last-child { right:13px; width:29%; background:color-mix(in srgb,var(--secondary) 35%,white); }
.nwp-foot { display:flex; align-items:center; gap:12px; margin:10px 2px 0; }
#nav-window-preview .nwp-foot p { flex:1; margin:0; color:#5f748a; font-size:11px; line-height:1.45; }
.nwp-foot > span { flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; padding:6px 9px; border-radius:9px; color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,white); font-size:10px; font-weight:800; }
.nwp-foot > span i { font-size:14px; transition:transform .16s ease; }
#nav-window-preview:hover .nwp-foot > span i { transform:translateX(2px); }
@media (hover:none),(pointer:coarse),(max-width:800px) { #nav-window-preview { display:none!important; } }
@media (prefers-reduced-motion:reduce) { #nav-window-preview { transition:none; } }