/* CHIIK · demo: barra superior y modo captura (los colores y el logo son los de la app) */

: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: #0B2545; color: #fff;
    font: 600 13px/1.2 'Inter', system-ui, sans-serif;
}
.demo-tag { background: #E0A100; color: #0B2545; 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: #0B2545; 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: #0B2545; background: #fff; text-decoration: none; font-weight: 800; padding: 7px 15px; border-radius: 999px; white-space: nowrap; }
.demo-cta:hover { background: #E3F4F0; }
.demo-pista { margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: #E3F4F0; color: #0B2545; 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; }