/* Saqmol · demo: colores de marca Pixan, logo Saqmol, barra superior y modo captura */

/* Colores Pixan sobre el tema de la app (solo en la demo) */
:root {
    --primary: #1F6B53; --primary-2: #164D3C; --secondary: #2F8A6C; --tertiary: #9FD8BF; --tertiary-ink: #164D3C;
    --band: #173A2E; --band-2: #1F4A3B; --nav-bg: #E6EEE8;
    --bg: #F3F5F1; --surface: #FFFFFF; --surface-2: #F7F9F6;
    --text: #14201C; --muted: #5F6E67; --line: #DCE4DD;
    --ok: #164D3C; --info-bg: rgba(31, 107, 83, 0.10);
    --inset-sm: inset 0 0 0 1px #C5D4CA;
    --grad-primary: linear-gradient(135deg, #24795E 0%, #1F6B53 100%);
    --grad-secondary: linear-gradient(135deg, #3B9C7B 0%, #2F8A6C 100%);
    --grad-tertiary: linear-gradient(135deg, #CBEBDD 0%, #9FD8BF 100%);
}

/* Logo Saqmol: la S glifo (isotipo) + el texto SAQMOL como logotipo */
.brand-mark { background: #1D4432; }
.brand-mark svg { width: 22px; height: 26px; color: #9FD8BF; }
.brand-lg .brand-mark svg { width: 28px; height: 33px; }
.brand-name svg { display: block; height: 15px; width: auto; color: #272725; margin-bottom: 4px; }
.brand-lg .brand-name svg { height: 21px; margin-bottom: 6px; }

:root { --demo-h: 46px; }
body:not(.shot) { padding-top: var(--demo-h); }
body:not(.shot) .sidebar { top: var(--demo-h); }
body:not(.shot) .topbar { top: var(--demo-h); }
body:not(.shot) .busy-bar { top: var(--demo-h); }
body:not(.shot) .app-shell { min-height: calc(100dvh - var(--demo-h)); }
@media (max-width: 959px) {
    body:not(.shot) .sidebar, body:not(.shot) .sidebar-backdrop { top: calc(var(--demo-h) + var(--topbar-h)); }
}

.demo-bar {
    position: fixed; inset: 0 0 auto 0; height: var(--demo-h); z-index: 90;
    display: flex; align-items: center; gap: 12px; padding: 0 16px;
    background: #1F6B53; color: #fff;
    font: 600 13px/1.2 'Inter', system-ui, sans-serif;
}
.demo-tag { background: #fff; color: #1F6B53; font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 4px 9px; border-radius: 999px; }
.demo-sp { flex: 1; }
.demo-como { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.demo-como select {
    font: inherit; font-weight: 700; color: #14201C; background: #fff;
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 5px 12px; cursor: pointer; max-width: 230px;
}
.demo-como select:focus-visible, .demo-cta:focus-visible, .demo-reset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.demo-reset { all: unset; cursor: pointer; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.demo-reset:hover { background: rgba(255, 255, 255, .12); }
.demo-cta { color: #164D3C; background: #fff; text-decoration: none; font-weight: 800; padding: 7px 15px; border-radius: 999px; white-space: nowrap; }
.demo-cta:hover { background: #E2ECE6; }
.demo-pista { margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: #E2ECE6; color: #164D3C; font-size: .85rem; line-height: 1.45; text-align: left; }
@media (max-width: 1180px) { .demo-txt { display: none; } }
@media (max-width: 560px) { .demo-como > span, .demo-reset { display: none; } .demo-bar { gap: 8px; padding: 0 10px; } .demo-como select { max-width: 170px; } }

/* Modo captura (?shot=1): sin barra, sin animaciones, sin barras de desplazamiento */
body.shot .demo-bar { display: none; }
body.shot *, body.shot *::before, body.shot *::after { animation: none !important; transition: none !important; caret-color: transparent; }
body.shot ::-webkit-scrollbar { display: none; }
body.shot { scrollbar-width: none; }