/* ==========================================================================
   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-real-snapshot { display:block; width:100%; height:100%; object-fit:cover; object-position:top left; background:#f5f9ff; }
.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-empty.nwp-ready { background:linear-gradient(145deg,#f8fbff,color-mix(in srgb,var(--primary-light) 42%,white)); }
.nwp-empty.nwp-ready > span { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 14%,white),rgba(255,255,255,.92)); border:1px solid color-mix(in srgb,var(--primary) 22%,white); box-shadow:0 12px 24px -16px color-mix(in srgb,var(--primary) 55%,transparent); }
.nwp-canvas { position:absolute; inset:0; padding:18px; background:linear-gradient(145deg,#f8fbff,color-mix(in srgb,var(--primary-light) 36%,white)); }
.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-mini-sale { position:absolute; inset:0; padding:13px; color:#1d3553; background:linear-gradient(145deg,#f7fbff,#eef5ff 54%,#f8f4ff); }
.nwp-sale-head { display:flex; align-items:center; gap:7px; }
.nwp-sale-head > span { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; color:#fff; font-size:18px; background:linear-gradient(145deg,var(--primary),var(--secondary)); box-shadow:0 8px 16px -10px var(--primary); }
.nwp-sale-head strong { margin-right:auto; font-size:13px; }
.nwp-sale-head em { color:#8295aa; font-size:7px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.nwp-sale-head b { font-size:11px; }
.nwp-sale-search { height:31px; margin:10px 0; padding:0 10px; display:flex; align-items:center; gap:7px; color:#8496aa; border:1px solid #d4e2f5; border-radius:10px; background:rgba(255,255,255,.86); font-size:9px; }
.nwp-sale-search > span:first-child { color:var(--primary); font-size:16px; }
.nwp-sale-grid { display:grid; grid-template-columns:1.55fr .85fr; gap:9px; }
.nwp-sale-grid section,.nwp-sale-grid aside { height:111px; padding:10px; border:1px solid rgba(190,211,239,.82); border-radius:12px; background:rgba(255,255,255,.72); box-shadow:0 9px 22px -20px #315b91; }
.nwp-sale-grid small { display:block; margin-bottom:8px; color:#7188a1; font-size:7px; font-weight:900; letter-spacing:.09em; }
.nwp-sale-grid section i { display:block; height:16px; margin-top:6px; border:1px solid #dae6f5; border-radius:6px; background:#fff; }
.nwp-sale-grid aside { display:flex; flex-direction:column; }
.nwp-sale-grid aside strong { color:var(--primary); font-size:20px; line-height:1; }
.nwp-sale-grid aside span { margin-top:4px; color:#90a0b2; font-size:7px; }
.nwp-sale-grid button { margin-top:auto; height:25px; border:0; border-radius:8px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); font:800 8px inherit; }
.nwp-module-mini { position:absolute; inset:0; padding:12px; color:#1d3553; background:linear-gradient(145deg,#f8fbff,#eef5ff 58%,#faf7ff); }
.nwp-module-bar { display:flex; align-items:center; gap:7px; height:27px; }
.nwp-module-bar > span { color:var(--primary); font-size:19px; }
.nwp-module-bar > strong { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.nwp-module-bar > i { flex:1; height:20px; border:1px solid #dce7f4; border-radius:7px; background:rgba(255,255,255,.76); }
.nwp-module-bar > b { width:22px; height:22px; display:grid; place-items:center; border-radius:7px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)); font-size:14px; }
.nwp-mini-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:9px 0; }
.nwp-mini-kpis article { height:43px; padding:7px 8px; border:1px solid rgba(199,216,239,.82); border-radius:9px; background:rgba(255,255,255,.78); box-shadow:0 7px 16px -15px #315b91; }
.nwp-mini-kpis small,.nwp-mini-kpis b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nwp-mini-kpis small { color:#7f93a8; font-size:6.5px; font-weight:800; text-transform:uppercase; }
.nwp-mini-kpis b { margin-top:3px; color:var(--primary); font-size:12px; }
.nwp-mini-table { padding:2px 5px; border:1px solid #dce7f4; border-radius:9px; background:rgba(255,255,255,.72); }
.nwp-mini-table i { display:block; height:20px; border-bottom:1px solid #e7eef7; background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 13%,white) 0 21%,transparent 21% 25%,#edf3fa 25% 58%,transparent 58% 62%,#e5eef9 62% 100%); }
.nwp-mini-table i:last-child { border-bottom:0; }
.nwp-mini-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:6px; border:1px solid #dbe7f5; border-radius:9px; background:rgba(255,255,255,.74); }
.nwp-mini-calendar i { height:13px; border-radius:4px; background:#edf3fa; }
.nwp-mini-calendar i:nth-child(9),.nwp-mini-calendar i:nth-child(12),.nwp-mini-calendar i:nth-child(17) { background:color-mix(in srgb,var(--primary) 32%,white); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 18%,white); }
.nwp-mini-patient { height:24px; display:flex; align-items:center; gap:6px; padding:0 8px; border:1px solid #dbe7f5; border-radius:7px; background:#fff; }
.nwp-mini-patient > span { color:var(--primary); font-size:14px; }
.nwp-mini-patient > i { width:55%; height:5px; border-radius:5px; background:#dce7f5; }
.nwp-mini-rx { display:grid; grid-template-columns:24px repeat(3,1fr); gap:3px; margin-top:6px; }
.nwp-mini-rx > * { height:20px; display:grid; place-items:center; border:1px solid #dfe8f3; border-radius:5px; background:rgba(255,255,255,.8); color:#6e84a0; font-size:7px; }
.nwp-mini-chart { height:62px; padding:7px 9px; display:flex; align-items:flex-end; gap:7px; border:1px solid #dce7f4; border-radius:9px; background:rgba(255,255,255,.72); }
.nwp-mini-chart i { flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--secondary),var(--primary)); opacity:.72; }
.nwp-mini-chart i:nth-child(1){height:35%}.nwp-mini-chart i:nth-child(2){height:62%}.nwp-mini-chart i:nth-child(3){height:48%}.nwp-mini-chart i:nth-child(4){height:82%}.nwp-mini-chart i:nth-child(5){height:58%}.nwp-mini-chart i:nth-child(6){height:92%}.nwp-mini-chart i:nth-child(7){height:72%}
.nwp-mini-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.nwp-mini-cards article { height:62px; padding:7px; border:1px solid #dce7f4; border-radius:9px; background:rgba(255,255,255,.78); }
.nwp-mini-cards article i { display:block; width:19px; height:19px; border-radius:7px; background:color-mix(in srgb,var(--primary) 24%,white); }
.nwp-mini-cards article b,.nwp-mini-cards article span { display:block; height:5px; margin-top:7px; border-radius:4px; background:#dce7f5; }
.nwp-mini-cards article span { width:68%; margin-top:5px; background:#e8eef6; }
.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; } }