/* Chrome de demos.naoweesuite.com: topbar y layout con la misma receta que momentum-web
   (naowee-design-system v1.9.0 + Inter). Solo tokens del DS; sin colores crudos. */
:root { --demos-topbar-h: 52px; --naowee-font-family: 'Inter', sans-serif; }
.demos-body { margin: 0; background: var(--naowee-color-background-secondary); color: var(--naowee-color-text-primary); font-family: var(--naowee-font-family); -webkit-font-smoothing: antialiased; min-height: 100vh; }
.demos-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--naowee-spacing-gap-micro); height: var(--demos-topbar-h); padding: 0 var(--naowee-spacing-padding-xtiny); background: var(--naowee-color-fill-primary); border-bottom: 1px solid var(--naowee-color-border-default); }
.demos-topbar__brand { display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro); min-width: 0; }
.demos-topbar__mark { display: block; width: 20px; height: 20px; border-radius: var(--naowee-border-radius-tiny); background: linear-gradient(135deg, var(--naowee-color-brand-gradient-start), var(--naowee-color-brand-gradient-end)); flex-shrink: 0; }
.demos-topbar__wordmark { font-size: var(--naowee-font-size-16); font-weight: var(--naowee-font-weight-bold); line-height: var(--naowee-font-line-height-20); letter-spacing: -0.3px; color: var(--naowee-color-text-primary); text-decoration: none; white-space: nowrap; }
.demos-topbar__scope { font-size: 11px; font-weight: var(--naowee-font-weight-bold); letter-spacing: .4px; text-transform: uppercase; color: var(--naowee-color-text-accent); white-space: nowrap; }
.demos-topbar__sep { width: 1px; height: 20px; background: var(--naowee-color-border-default); flex-shrink: 0; }
.demos-topbar__crumbs { display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro); font-size: var(--naowee-font-size-14); color: var(--naowee-color-text-secondary); min-width: 0; overflow: hidden; white-space: nowrap; }
.demos-topbar__crumbs a { color: var(--naowee-color-text-secondary); text-decoration: none; } .demos-topbar__crumbs a:hover { color: var(--naowee-color-text-primary); }
.demos-topbar__crumbs strong { color: var(--naowee-color-text-primary); font-weight: var(--naowee-font-weight-semibold); overflow: hidden; text-overflow: ellipsis; }
.demos-topbar__spacer { flex: 1; }
.demos-topbar__session { display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro); min-width: 0; }
.demos-chrome-label { font-size: var(--naowee-font-size-10); font-weight: var(--naowee-font-weight-bold); letter-spacing: .4px; text-transform: uppercase; color: var(--naowee-color-text-secondary); }
.demos-topbar__value { font-size: var(--naowee-font-size-13, 13px); color: var(--naowee-color-text-primary); max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demos-main { max-width: 64rem; margin: 0 auto; padding: var(--naowee-spacing-padding-small) var(--naowee-spacing-padding-xtiny) var(--naowee-spacing-padding-large); }
.demos-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--naowee-spacing-gap-small); margin-bottom: var(--naowee-spacing-padding-small); flex-wrap: wrap; }
.demos-page-header h1 { margin: 0; font-size: var(--naowee-font-size-24); font-weight: var(--naowee-font-weight-bold); letter-spacing: -.3px; line-height: var(--naowee-font-line-height-32); }
.demos-page-header p { margin: var(--naowee-spacing-gap-xnano) 0 0; color: var(--naowee-color-text-secondary); font-size: var(--naowee-font-size-14); max-width: 46rem; }
.demos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--naowee-spacing-gap-small); }
.demos-card { display: flex; flex-direction: column; gap: var(--naowee-spacing-gap-xmicro); text-decoration: none; color: inherit; }
.demos-card__meta { display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro); margin-top: auto; padding-top: var(--naowee-spacing-padding-micro); font-size: var(--naowee-font-size-12); color: var(--naowee-color-text-secondary); }
.demos-empty { padding: var(--naowee-spacing-padding-medium); text-align: center; color: var(--naowee-color-text-secondary); }
.demos-latest { display: flex; align-items: center; gap: var(--naowee-spacing-gap-small); flex-wrap: wrap; margin-bottom: var(--naowee-spacing-padding-small); }
.demos-latest__text { flex: 1; min-width: 14rem; } .demos-latest__text strong { display: block; font-size: var(--naowee-font-size-14); } .demos-latest__text span { font-size: var(--naowee-font-size-12); color: var(--naowee-color-text-secondary); }
.demos-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--naowee-font-size-12); color: var(--naowee-color-text-secondary); font-variant-numeric: tabular-nums; }
.demos-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--naowee-spacing-padding-small) 0 var(--naowee-spacing-gap-xmicro); }
.demos-section-head h2 { margin: 0; font-size: var(--naowee-font-size-14); font-weight: var(--naowee-font-weight-semibold); text-transform: uppercase; letter-spacing: .4px; color: var(--naowee-color-text-secondary); }
.demos-login { max-width: 26rem; margin: 10vh auto 0; }
.demos-login .naowee-textfield { margin-bottom: var(--naowee-spacing-gap-small); }
.demos-login__hint { font-size: var(--naowee-font-size-12); color: var(--naowee-color-text-secondary); margin: 0 0 var(--naowee-spacing-gap-small); }
.demos-footer { margin-top: var(--naowee-spacing-padding-large); font-size: var(--naowee-font-size-12); color: var(--naowee-color-text-secondary); }