:root {
    color-scheme: light;
    --demo-bg: #e4e8ef;
    --demo-surface: #f0f3f8;
    --demo-surface-strong: #f6f8fb;
    --demo-surface-soft: #e9edf4;
    --demo-border: #cdd4df;
    --demo-border-soft: rgba(67, 73, 93, .11);
    --demo-text: #596174;
    --demo-text-strong: #2c3343;
    --demo-muted: rgba(70, 78, 99, .62);
    --demo-faint: rgba(70, 78, 99, .42);
    --demo-accent: #696cff;
    --demo-accent-strong: #5659e8;
    --demo-accent-soft: rgba(105, 108, 255, .11);
    --demo-purple: #7654ad;
    --demo-success: #2b8465;
    --demo-success-soft: rgba(43, 132, 101, .11);
    --demo-warning: #a66f23;
    --demo-warning-soft: rgba(166, 111, 35, .12);
    --demo-danger: #bd5261;
    --demo-danger-soft: rgba(189, 82, 97, .11);
    --demo-info: #4776b8;
    --demo-info-soft: rgba(71, 118, 184, .11);
    --demo-shadow: 0 1px 2px rgba(35, 39, 52, .035), 0 14px 34px rgba(35, 39, 52, .035);
    --demo-sidebar: 224px;
    --demo-sidebar-collapsed: 72px;
    --demo-topbar: 64px;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --demo-bg: #090a0f;
    --demo-surface: #111219;
    --demo-surface-strong: #151720;
    --demo-surface-soft: #0e1016;
    --demo-border: rgba(255,255,255,.078);
    --demo-border-soft: rgba(255,255,255,.05);
    --demo-text: rgba(239, 236, 247, .82);
    --demo-text-strong: #f6f4fa;
    --demo-muted: rgba(218, 213, 230, .50);
    --demo-faint: rgba(210, 205, 221, .34);
    --demo-accent: #9799ff;
    --demo-accent-strong: #b4b5ff;
    --demo-accent-soft: rgba(105, 108, 255, .14);
    --demo-purple: #a78bdd;
    --demo-success: #63c39d;
    --demo-success-soft: rgba(62, 180, 137, .11);
    --demo-warning: #e0ae63;
    --demo-warning-soft: rgba(224, 174, 99, .11);
    --demo-danger: #ec7d8d;
    --demo-danger-soft: rgba(236, 125, 141, .11);
    --demo-info: #7da9e5;
    --demo-info-soft: rgba(125, 169, 229, .11);
    --demo-shadow: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.demo-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% -10%, rgba(105,108,255,.12), transparent 28%),
        radial-gradient(circle at 100% 12%, rgba(118,84,173,.08), transparent 25%),
        var(--demo-bg);
    color: var(--demo-text);
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
button { color: inherit; }

.demo-layout {
    min-height: 100vh;
}

.demo-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: var(--demo-sidebar);
    border-right: 1px solid var(--demo-border);
    background: color-mix(in srgb, var(--demo-surface) 95%, transparent);
    backdrop-filter: blur(20px);
    transition: width .2s ease, transform .2s ease;
}

.demo-sidebar-brand {
    position: relative;
    height: 98px;
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--demo-border-soft);
    overflow: hidden;
}
.demo-sidebar-brand img {
    width: 186px;
    max-width: none;
    height: auto;
    transform: scale(1.22);
    transform-origin: center;
}
.demo-sidebar-toggle {
    position: absolute;
    top: 32px;
    right: 7px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(105,108,255,.23);
    border-radius: 9px;
    background: var(--demo-accent-soft);
    color: var(--demo-accent-strong);
    cursor: pointer;
}
.demo-sidebar-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.demo-sidebar-scroll {
    height: calc(100vh - 98px);
    overflow-y: auto;
    padding: 15px 10px 26px;
    scrollbar-width: thin;
}
.demo-menu-group { margin-bottom: 18px; }
.demo-menu-label {
    margin: 0 9px 7px;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--demo-faint);
}
.demo-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 560;
    color: var(--demo-muted);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.demo-menu-link:hover { background: var(--demo-accent-soft); color: var(--demo-text-strong); }
.demo-menu-link.is-active {
    background: linear-gradient(135deg, rgba(105,108,255,.17), rgba(118,84,173,.10));
    color: var(--demo-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(105,108,255,.08);
}
.demo-menu-link.is-active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--demo-accent);
}
.demo-menu-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
}
.demo-menu-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-menu-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.demo-page {
    min-height: 100vh;
    margin-left: var(--demo-sidebar);
    transition: margin-left .2s ease;
}
.demo-topbar {
    position: sticky;
    top: 0;
    z-index: 55;
    height: var(--demo-topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 22px;
    border-bottom: 1px solid var(--demo-border);
    background: color-mix(in srgb, var(--demo-surface) 91%, transparent);
    backdrop-filter: blur(20px);
}
.demo-topbar-left, .demo-topbar-right { display: flex; align-items: center; gap: 11px; min-width: 0; }
.demo-mobile-toggle { display: none; }
.demo-context { min-width: 0; }
.demo-context strong {
    display: block;
    color: var(--demo-text-strong);
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.demo-context span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--demo-faint); }
.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(105,108,255,.19);
    border-radius: 999px;
    background: var(--demo-accent-soft);
    color: var(--demo-accent-strong);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
}
.demo-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(105,108,255,.10); }
.demo-language, .demo-theme-control {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--demo-border);
    border-radius: 9px;
    background: var(--demo-surface-soft);
}
.demo-language a, .demo-theme-control button {
    height: 27px;
    min-width: 29px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    text-decoration: none;
    color: var(--demo-faint);
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
}
.demo-language a.is-active, .demo-theme-control button[aria-pressed="true"] { background: var(--demo-accent-soft); color: var(--demo-accent-strong); }
.demo-role-switch {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--demo-border);
    border-radius: 9px;
    background: var(--demo-surface-soft);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 650;
    color: var(--demo-muted);
}
.demo-role-switch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.demo-main { padding: 18px 22px 36px; }
.demo-content { width: min(1460px, 100%); margin: 0 auto; }
.demo-page-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
    padding: 13px 16px 13px 20px;
    margin-bottom: 12px;
    border: 1px solid var(--demo-border);
    border-radius: 9px;
    background: var(--demo-surface);
    box-shadow: var(--demo-shadow);
    overflow: hidden;
}
.demo-page-head::before {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(var(--demo-accent), var(--demo-purple));
}
.demo-page-head-copy { min-width: 0; }
.demo-eyebrow { margin: 0 0 4px; color: var(--demo-accent); font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.demo-page-head h1 { margin: 0; color: var(--demo-text-strong); font-size: clamp(19px, 2.5vw, 25px); font-weight: 720; letter-spacing: -.025em; }
.demo-page-head p { margin: 4px 0 0; max-width: 850px; color: var(--demo-muted); font-size: 11.5px; line-height: 1.45; }
.demo-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }

.demo-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--demo-border);
    border-radius: 8px;
    background: var(--demo-surface-strong);
    color: var(--demo-text);
    font-size: 10.5px;
    font-weight: 680;
    text-decoration: none;
    cursor: pointer;
    transition: transform .13s ease, border-color .13s ease, background .13s ease;
}
.demo-button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--demo-accent) 38%, var(--demo-border)); }
.demo-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.demo-button.primary { border-color: rgba(105,108,255,.30); background: linear-gradient(135deg, #696cff, #7654ad); color: #fff; box-shadow: 0 6px 16px rgba(105,108,255,.14); }
.demo-button.success { border-color: rgba(43,132,101,.28); background: var(--demo-success-soft); color: var(--demo-success); }
.demo-button.danger { border-color: rgba(189,82,97,.26); background: var(--demo-danger-soft); color: var(--demo-danger); }
.demo-button.ghost { background: transparent; }
.demo-button.compact { min-height: 29px; padding: 5px 8px; font-size: 9.7px; }

.demo-mode-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    margin-bottom: 12px;
    border: 1px solid rgba(105,108,255,.15);
    border-radius: 8px;
    background: var(--demo-accent-soft);
    color: var(--demo-muted);
    font-size: 10px;
}
.demo-mode-note svg { width: 14px; height: 14px; color: var(--demo-accent); fill: none; stroke: currentColor; stroke-width: 1.8; }

.demo-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}
.demo-stat {
    position: relative;
    min-height: 105px;
    padding: 15px 16px;
    border: 1px solid var(--demo-border);
    border-radius: 9px;
    background: var(--demo-surface);
    box-shadow: var(--demo-shadow);
    overflow: hidden;
}
.demo-stat::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    right: -24px;
    top: -26px;
    border: 12px solid var(--demo-accent-soft);
    border-radius: 50%;
}
.demo-stat-value { position: relative; z-index: 1; color: var(--demo-text-strong); font-size: 24px; font-weight: 760; letter-spacing: -.04em; }
.demo-stat-label { position: relative; z-index: 1; margin-top: 7px; color: var(--demo-muted); font-size: 10.5px; font-weight: 620; }
.demo-stat-trend { position: relative; z-index: 1; margin-top: 4px; font-size: 9.5px; color: var(--demo-faint); }
.demo-stat-trend.positive { color: var(--demo-success); }
.demo-stat-trend.warning { color: var(--demo-warning); }

.demo-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 10px; margin-bottom: 10px; }
.demo-grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-panel {
    min-width: 0;
    border: 1px solid var(--demo-border);
    border-radius: 9px;
    background: var(--demo-surface);
    box-shadow: var(--demo-shadow);
    overflow: hidden;
}
.demo-panel-header {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--demo-border-soft);
}
.demo-panel-header h2 { margin: 0; color: var(--demo-text-strong); font-size: 12.5px; font-weight: 720; }
.demo-panel-header p { margin: 3px 0 0; color: var(--demo-faint); font-size: 9.8px; }
.demo-panel-body { padding: 13px; }
.demo-panel-body.flush { padding: 0; }
.demo-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 9px 13px; border-top: 1px solid var(--demo-border-soft); font-size: 9.5px; color: var(--demo-faint); }

.demo-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--demo-border-soft);
}
.demo-search { position: relative; flex: 1 1 240px; min-width: 180px; }
.demo-search svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); fill: none; stroke: var(--demo-faint); stroke-width: 1.8; }
.demo-input, .demo-select, .demo-textarea {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--demo-border);
    border-radius: 8px;
    outline: none;
    background: var(--demo-surface-strong);
    color: var(--demo-text);
    font-size: 10.5px;
}
.demo-search .demo-input { padding-left: 31px; }
.demo-input:focus, .demo-select:focus, .demo-textarea:focus { border-color: rgba(105,108,255,.48); box-shadow: 0 0 0 3px rgba(105,108,255,.08); }
.demo-select { width: auto; min-width: 150px; }
.demo-textarea { min-height: 90px; resize: vertical; }
.demo-field { display: grid; gap: 5px; }
.demo-field > span { color: var(--demo-muted); font-size: 9.7px; font-weight: 650; }
.demo-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.demo-form-grid .wide { grid-column: 1 / -1; }

.demo-table-wrap { width: 100%; overflow-x: auto; }
.demo-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 10.4px; }
.demo-table th {
    padding: 9px 11px;
    border-bottom: 1px solid var(--demo-border-soft);
    background: var(--demo-surface-soft);
    color: var(--demo-faint);
    text-align: left;
    font-size: 9px;
    font-weight: 780;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}
.demo-table td { padding: 10px 11px; border-bottom: 1px solid var(--demo-border-soft); color: var(--demo-muted); vertical-align: middle; }
.demo-table tbody tr:last-child td { border-bottom: 0; }
.demo-table tbody tr:hover td { background: color-mix(in srgb, var(--demo-accent-soft) 38%, transparent); }
.demo-table strong { color: var(--demo-text-strong); font-weight: 680; }
.demo-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9.8px; letter-spacing: .01em; white-space: nowrap; }
.demo-table .money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-table .nowrap { white-space: nowrap; }
.demo-row-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

.demo-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--demo-surface-soft);
    color: var(--demo-muted);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.demo-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.demo-status.active, .demo-status.ok, .demo-status.online, .demo-status.paid, .demo-status.available, .demo-status.authorized, .demo-status.checked_in { background: var(--demo-success-soft); color: var(--demo-success); }
.demo-status.pending, .demo-status.partial, .demo-status.scheduled, .demo-status.waiting, .demo-status.warning, .demo-status.busy, .demo-status.reserved, .demo-status.expected { background: var(--demo-warning-soft); color: var(--demo-warning); }
.demo-status.alert, .demo-status.overdue, .demo-status.review { background: var(--demo-danger-soft); color: var(--demo-danger); }
.demo-status.inside, .demo-status.published, .demo-status.occupied { background: var(--demo-info-soft); color: var(--demo-info); }
.demo-status.used, .demo-status.out, .demo-status.maintenance, .demo-status.inactive { background: var(--demo-surface-soft); color: var(--demo-faint); }

.demo-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.demo-chip { display: inline-flex; min-height: 21px; align-items: center; padding: 2px 6px; border: 1px solid var(--demo-border); border-radius: 6px; background: var(--demo-surface-strong); color: var(--demo-muted); font-size: 8.8px; font-weight: 650; }

.demo-list { display: grid; }
.demo-list-item {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--demo-border-soft);
}
.demo-list-item:last-child { border-bottom: 0; }
.demo-list-time { min-width: 42px; font-size: 9.3px; font-weight: 750; color: var(--demo-faint); font-variant-numeric: tabular-nums; }
.demo-list-copy { min-width: 0; }
.demo-list-copy strong { display: block; color: var(--demo-text-strong); font-size: 10.7px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-list-copy span { display: block; margin-top: 2px; color: var(--demo-faint); font-size: 9.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.demo-chart { position: relative; height: 174px; padding: 20px 13px 18px; }
.demo-chart-grid { position: absolute; inset: 18px 13px 22px; display: grid; grid-template-rows: repeat(4,1fr); }
.demo-chart-grid span { border-top: 1px dashed var(--demo-border-soft); }
.demo-bars { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; }
.demo-bar { min-height: 5%; border-radius: 5px 5px 2px 2px; background: linear-gradient(to top, rgba(105,108,255,.35), rgba(118,84,173,.82)); opacity: .9; transition: opacity .15s ease, transform .15s ease; }
.demo-bar:hover { opacity: 1; transform: translateY(-2px); }

.demo-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.demo-quick-action {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--demo-border);
    border-radius: 8px;
    background: var(--demo-surface-strong);
    color: var(--demo-muted);
    text-align: left;
    cursor: pointer;
}
.demo-quick-action:hover { border-color: rgba(105,108,255,.35); background: var(--demo-accent-soft); color: var(--demo-text-strong); }
.demo-quick-action svg { width: 17px; height: 17px; fill: none; stroke: var(--demo-accent); stroke-width: 1.8; }
.demo-quick-action span { font-size: 9.7px; font-weight: 690; }

.demo-structure-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.demo-structure-card { position: relative; padding: 13px; border: 1px solid var(--demo-border); border-radius: 8px; background: var(--demo-surface-strong); overflow: hidden; }
.demo-structure-card::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--demo-accent); }
.demo-structure-card .code { color: var(--demo-accent-strong); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.demo-structure-card strong { display: block; margin-top: 5px; color: var(--demo-text-strong); font-size: 11px; }
.demo-structure-card span { display: block; margin-top: 4px; color: var(--demo-faint); font-size: 9.3px; }

.demo-kpi-split { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.demo-kpi { padding: 12px; border: 1px solid var(--demo-border); border-radius: 8px; background: var(--demo-surface-strong); }
.demo-kpi strong { display: block; color: var(--demo-text-strong); font-size: 16px; }
.demo-kpi span { display: block; margin-top: 4px; color: var(--demo-faint); font-size: 9.3px; }

.demo-priority-list { display: grid; gap: 8px; }
.demo-priority-card { position: relative; padding: 12px 12px 12px 15px; border: 1px solid var(--demo-border); border-radius: 8px; background: var(--demo-surface-strong); overflow: hidden; }
.demo-priority-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--demo-info); }
.demo-priority-card.high::before { background: var(--demo-danger); }
.demo-priority-card.medium::before { background: var(--demo-warning); }
.demo-priority-card strong { display: block; color: var(--demo-text-strong); font-size: 10.5px; }
.demo-priority-card p { margin: 4px 0 0; color: var(--demo-muted); font-size: 9.5px; line-height: 1.45; }
.demo-priority-meta { margin-top: 7px; display: flex; gap: 8px; flex-wrap: wrap; color: var(--demo-faint); font-size: 8.8px; }

.demo-report-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.demo-report-card { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; padding: 14px; border: 1px solid var(--demo-border); border-radius: 9px; background: var(--demo-surface); box-shadow: var(--demo-shadow); }
.demo-report-card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--demo-accent-soft); color: var(--demo-accent-strong); }
.demo-report-card-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.demo-report-card h3 { margin: 0; color: var(--demo-text-strong); font-size: 11.5px; }
.demo-report-card p { margin: 4px 0 0; color: var(--demo-faint); font-size: 9.5px; line-height: 1.4; }

.demo-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.demo-setting-card { padding: 13px; border: 1px solid var(--demo-border); border-radius: 9px; background: var(--demo-surface); }
.demo-setting-card h3 { margin: 0 0 4px; color: var(--demo-text-strong); font-size: 11px; }
.demo-setting-card > p { margin: 0 0 12px; color: var(--demo-faint); font-size: 9.5px; }
.demo-setting-row { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--demo-border-soft); font-size: 9.8px; }
.demo-setting-row strong { color: var(--demo-text); font-weight: 650; }
.demo-toggle { width: 34px; height: 19px; position: relative; border: 0; border-radius: 999px; background: var(--demo-border); cursor: pointer; }
.demo-toggle::after { content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: left .15s ease; }
.demo-toggle.is-on { background: var(--demo-accent); }
.demo-toggle.is-on::after { left: 18px; }

.demo-scan-stage { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(320px,1.2fr); gap: 10px; }
.demo-scanner { min-height: 390px; display: grid; place-items: center; padding: 24px; border: 1px solid var(--demo-border); border-radius: 10px; background: radial-gradient(circle at center, rgba(105,108,255,.08), transparent 46%), var(--demo-surface); }
.demo-scan-frame { position: relative; width: min(290px, 82%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; background: var(--demo-surface-soft); }
.demo-scan-frame::before, .demo-scan-frame::after { content: ""; position: absolute; inset: 13px; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(var(--demo-surface-soft), var(--demo-surface-soft)) padding-box, conic-gradient(from 0deg, var(--demo-accent) 0 12%, transparent 12% 38%, var(--demo-accent) 38% 62%, transparent 62% 88%, var(--demo-accent) 88% 100%) border-box; opacity: .7; }
.demo-scan-line { position: absolute; left: 19%; right: 19%; top: 25%; height: 2px; background: linear-gradient(90deg, transparent, var(--demo-accent), transparent); box-shadow: 0 0 16px var(--demo-accent); animation: demoScan 2.4s ease-in-out infinite alternate; }
@keyframes demoScan { to { top: 74%; } }
.demo-scan-copy { position: relative; z-index: 3; text-align: center; }
.demo-scan-copy svg { width: 44px; height: 44px; fill: none; stroke: var(--demo-accent); stroke-width: 1.5; }
.demo-scan-copy strong { display: block; margin-top: 12px; color: var(--demo-text-strong); font-size: 13px; }
.demo-scan-copy span { display: block; margin-top: 5px; color: var(--demo-faint); font-size: 9.5px; }

.demo-access-result { min-height: 390px; padding: 16px; border: 1px solid var(--demo-border); border-radius: 10px; background: var(--demo-surface); }
.demo-access-result-head { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--demo-border-soft); }
.demo-access-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, rgba(105,108,255,.18), rgba(118,84,173,.18)); color: var(--demo-accent-strong); font-size: 16px; font-weight: 800; }
.demo-access-result h3 { margin: 0; color: var(--demo-text-strong); font-size: 14px; }
.demo-access-result-head p { margin: 3px 0 0; color: var(--demo-faint); font-size: 9.5px; }
.demo-access-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.demo-access-detail { padding: 10px; border: 1px solid var(--demo-border-soft); border-radius: 8px; background: var(--demo-surface-strong); }
.demo-access-detail span { display: block; color: var(--demo-faint); font-size: 8.7px; text-transform: uppercase; letter-spacing: .05em; }
.demo-access-detail strong { display: block; margin-top: 4px; color: var(--demo-text); font-size: 10.2px; }
.demo-access-decision { display: flex; gap: 7px; margin-top: 13px; }

.demo-unit-card { padding: 16px; border: 1px solid var(--demo-border); border-radius: 10px; background: var(--demo-surface); box-shadow: var(--demo-shadow); }
.demo-unit-top { display: flex; justify-content: space-between; gap: 12px; }
.demo-unit-code { display: inline-flex; padding: 4px 7px; border-radius: 6px; background: var(--demo-accent-soft); color: var(--demo-accent-strong); font-size: 9px; font-weight: 800; }
.demo-unit-card h3 { margin: 8px 0 3px; color: var(--demo-text-strong); font-size: 14px; }
.demo-unit-card p { margin: 0; color: var(--demo-faint); font-size: 9.6px; }
.demo-unit-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 14px; }
.demo-unit-detail { padding: 8px; border: 1px solid var(--demo-border-soft); border-radius: 7px; background: var(--demo-surface-strong); }
.demo-unit-detail span { display: block; color: var(--demo-faint); font-size: 8.5px; }
.demo-unit-detail strong { display: block; margin-top: 3px; color: var(--demo-text); font-size: 9.6px; }

.demo-notice-list { display: grid; gap: 8px; }
.demo-notice { padding: 12px; border: 1px solid var(--demo-border); border-radius: 8px; background: var(--demo-surface-strong); }
.demo-notice.unread { border-left: 3px solid var(--demo-accent); }
.demo-notice.important { border-left-color: var(--demo-warning); }
.demo-notice-head { display: flex; justify-content: space-between; gap: 10px; }
.demo-notice h3 { margin: 0; color: var(--demo-text-strong); font-size: 10.8px; }
.demo-notice time { color: var(--demo-faint); font-size: 8.8px; white-space: nowrap; }
.demo-notice p { margin: 5px 0 0; color: var(--demo-muted); font-size: 9.5px; line-height: 1.45; }

.demo-profile-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--demo-border); border-radius: 10px; background: var(--demo-surface); box-shadow: var(--demo-shadow); }
.demo-profile-avatar { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, rgba(105,108,255,.18), rgba(118,84,173,.18)); color: var(--demo-accent-strong); font-size: 23px; font-weight: 800; }
.demo-profile-card h2 { margin: 0; color: var(--demo-text-strong); font-size: 17px; }
.demo-profile-card p { margin: 4px 0 0; color: var(--demo-faint); font-size: 10px; }
.demo-profile-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.demo-profile-meta span { padding: 5px 8px; border: 1px solid var(--demo-border); border-radius: 7px; background: var(--demo-surface-strong); color: var(--demo-muted); font-size: 9px; }

.demo-qr-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--demo-border); border-radius: 9px; background: var(--demo-surface-strong); }
.demo-qr-visual { width: 104px; height: 104px; display: grid; grid-template-columns: repeat(11,1fr); grid-template-rows: repeat(11,1fr); gap: 1px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.demo-qr-visual i { background: #24242b; border-radius: 1px; }
.demo-qr-copy strong { display: block; color: var(--demo-text-strong); font-size: 13px; }
.demo-qr-copy code { display: inline-block; margin-top: 6px; color: var(--demo-accent-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.demo-qr-copy p { margin: 6px 0 0; color: var(--demo-faint); font-size: 9.5px; }

.demo-contingency-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.demo-step { position: relative; min-height: 160px; padding: 16px; border: 1px solid var(--demo-border); border-radius: 9px; background: var(--demo-surface); }
.demo-step-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--demo-accent-soft); color: var(--demo-accent-strong); font-size: 10px; font-weight: 800; }
.demo-step h3 { margin: 12px 0 5px; color: var(--demo-text-strong); font-size: 11px; }
.demo-step p { margin: 0; color: var(--demo-muted); font-size: 9.5px; line-height: 1.48; }

.demo-toast-stack { position: fixed; z-index: 120; top: 76px; right: 18px; width: min(360px, calc(100vw - 36px)); display: grid; gap: 8px; pointer-events: none; }
.demo-toast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(43,132,101,.22); border-radius: 9px; background: color-mix(in srgb, var(--demo-surface-strong) 94%, #5cc89a 6%); box-shadow: 0 15px 35px rgba(25,30,45,.13); color: var(--demo-text); pointer-events: auto; animation: demoToastIn .18s ease-out; }
.demo-toast.error { border-color: rgba(189,82,97,.25); }
.demo-toast-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: var(--demo-success-soft); color: var(--demo-success); }
.demo-toast.error .demo-toast-icon { background: var(--demo-danger-soft); color: var(--demo-danger); }
.demo-toast strong { display: block; color: var(--demo-text-strong); font-size: 10.4px; }
.demo-toast span { display: block; margin-top: 2px; color: var(--demo-faint); font-size: 9.2px; }
.demo-toast button { border: 0; background: transparent; color: var(--demo-faint); cursor: pointer; font-size: 15px; }
@keyframes demoToastIn { from { opacity: 0; transform: translateY(-7px); } }

.demo-modal-backdrop { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 18px; background: rgba(7,8,13,.58); backdrop-filter: blur(4px); }
.demo-modal-backdrop.is-open { display: grid; }
.demo-modal { width: min(580px, 100%); max-height: min(760px, calc(100vh - 36px)); overflow-y: auto; border: 1px solid var(--demo-border); border-radius: 12px; background: var(--demo-surface); box-shadow: 0 28px 80px rgba(0,0,0,.27); animation: demoModalIn .18s ease-out; }
@keyframes demoModalIn { from { opacity: 0; transform: translateY(9px) scale(.985); } }
.demo-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--demo-border-soft); }
.demo-modal-head h2 { margin: 0; color: var(--demo-text-strong); font-size: 14px; }
.demo-modal-head p { margin: 4px 0 0; color: var(--demo-faint); font-size: 9.5px; }
.demo-modal-close { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--demo-border); border-radius: 8px; background: var(--demo-surface-strong); color: var(--demo-muted); cursor: pointer; }
.demo-modal-body { padding: 15px 16px; }
.demo-modal-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 11px 16px; border-top: 1px solid var(--demo-border-soft); }

.demo-overlay { position: fixed; inset: 0; z-index: 65; display: none; background: rgba(7,8,13,.48); }

html.demo-sidebar-collapsed .demo-sidebar { width: var(--demo-sidebar-collapsed); }
html.demo-sidebar-collapsed .demo-page { margin-left: var(--demo-sidebar-collapsed); }
html.demo-sidebar-collapsed .demo-sidebar-brand img { width: 50px; transform: scale(1.12); }
html.demo-sidebar-collapsed .demo-sidebar-toggle svg { transform: rotate(180deg); }
html.demo-sidebar-collapsed .demo-menu-label, html.demo-sidebar-collapsed .demo-menu-text { display: none; }
html.demo-sidebar-collapsed .demo-menu-link { justify-content: center; padding-left: 8px; padding-right: 8px; }
html.demo-sidebar-collapsed .demo-menu-link.is-active::before { left: -10px; }

/* Landing */
.demo-landing { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.demo-landing-shell { width: min(1160px,100%); }
.demo-landing-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 35px; }
.demo-landing-logo img { width: 205px; height: auto; display: block; }
.demo-landing-hero { max-width: 720px; margin-bottom: 24px; }
.demo-landing-hero .demo-eyebrow { font-size: 10px; }
.demo-landing-hero h1 { margin: 0; color: var(--demo-text-strong); font-size: clamp(30px,5vw,54px); font-weight: 760; letter-spacing: -.055em; line-height: 1.02; }
.demo-landing-hero p { margin: 12px 0 0; max-width: 650px; color: var(--demo-muted); font-size: 14px; line-height: 1.55; }
.demo-role-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.demo-role-card { position: relative; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid var(--demo-border); border-radius: 12px; background: var(--demo-surface); box-shadow: var(--demo-shadow); overflow: hidden; text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.demo-role-card:hover { transform: translateY(-3px); border-color: rgba(105,108,255,.30); }
.demo-role-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -70px; border: 22px solid var(--demo-accent-soft); border-radius: 50%; }
.demo-role-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, rgba(105,108,255,.16), rgba(118,84,173,.12)); color: var(--demo-accent-strong); }
.demo-role-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.demo-role-card h2 { margin: 14px 0 6px; color: var(--demo-text-strong); font-size: 16px; }
.demo-role-card p { margin: 0; color: var(--demo-muted); font-size: 10.5px; line-height: 1.5; }
.demo-role-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.demo-role-meta span:first-child { color: var(--demo-faint); font-size: 9px; }
.demo-role-open { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--demo-accent-soft); color: var(--demo-accent-strong); }
.demo-role-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.demo-landing-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; color: var(--demo-faint); font-size: 9.5px; }

@media (max-width: 1180px) {
    .demo-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .demo-structure-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .demo-report-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .demo-role-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 991px) {
    .demo-sidebar { transform: translateX(-101%); width: min(290px, 84vw); box-shadow: 18px 0 50px rgba(0,0,0,.15); }
    .demo-page, html.demo-sidebar-collapsed .demo-page { margin-left: 0; }
    html.demo-mobile-open .demo-sidebar { transform: translateX(0); }
    html.demo-mobile-open .demo-overlay { display: block; }
    .demo-mobile-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--demo-border); border-radius: 8px; background: var(--demo-surface-soft); color: var(--demo-muted); cursor: pointer; }
    .demo-mobile-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
    .demo-sidebar-toggle { display: none; }
    html.demo-sidebar-collapsed .demo-sidebar { width: min(290px, 84vw); }
    html.demo-sidebar-collapsed .demo-sidebar-brand img { width: 186px; transform: scale(1.22); }
    html.demo-sidebar-collapsed .demo-menu-label, html.demo-sidebar-collapsed .demo-menu-text { display: block; }
    html.demo-sidebar-collapsed .demo-menu-link { justify-content: flex-start; padding: 8px 10px; }
    .demo-grid, .demo-grid.equal, .demo-grid.three, .demo-scan-stage { grid-template-columns: 1fr; }
    .demo-contingency-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .demo-topbar { padding: 0 12px; }
    .demo-main { padding: 12px 10px 28px; }
    .demo-context span { display: none; }
    .demo-topbar-right { gap: 5px; }
    .demo-role-switch span { display: none; }
    .demo-language a { min-width: 26px; padding: 0 5px; }
    .demo-theme-control { display: none; }
    .demo-page-head { align-items: flex-start; flex-direction: column; }
    .demo-page-actions { justify-content: flex-start; width: 100%; }
    .demo-stats { grid-template-columns: 1fr 1fr; }
    .demo-stat { min-height: 94px; padding: 13px; }
    .demo-stat-value { font-size: 20px; }
    .demo-structure-grid, .demo-report-grid, .demo-settings-grid { grid-template-columns: 1fr; }
    .demo-form-grid { grid-template-columns: 1fr; }
    .demo-form-grid .wide { grid-column: auto; }
    .demo-quick-actions { grid-template-columns: 1fr 1fr; }
    .demo-access-detail-grid { grid-template-columns: 1fr; }
    .demo-role-grid { grid-template-columns: 1fr; }
    .demo-landing-top { margin-bottom: 25px; }
    .demo-landing-logo img { width: 175px; }
    .demo-landing-foot { align-items: flex-start; flex-direction: column; }
    .demo-profile-card { grid-template-columns: 1fr; }
    .demo-unit-details { grid-template-columns: 1fr; }
    .demo-qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

@media (max-width: 480px) {
    .demo-stats { grid-template-columns: 1fr; }
    .demo-badge { display: none; }
    .demo-language { display: none; }
    .demo-quick-actions { grid-template-columns: 1fr; }
    .demo-access-decision { flex-direction: column; }
    .demo-access-decision .demo-button { width: 100%; }
}


/* DEMO FIRST V2 — financial/access breadth */
.demo-hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.demo-hub-card { min-height:148px; display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--demo-border); border-radius:11px; background:var(--demo-surface-strong); color:inherit; text-decoration:none; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.demo-hub-card:hover { transform:translateY(-2px); border-color:rgba(105,108,255,.32); background:var(--demo-accent-soft); }
.demo-hub-card h3 { margin:0; color:var(--demo-text-strong); font-size:12px; }
.demo-hub-card p { margin:3px 0 0; color:var(--demo-muted); font-size:9.6px; line-height:1.45; }
.demo-hub-card > span { margin-top:auto; color:var(--demo-accent-strong); font-size:9.5px; font-weight:700; }
.demo-summary-list { display:grid; gap:0; }
.demo-summary-list > div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--demo-border-soft); font-size:10px; }
.demo-summary-list > div:last-child { border-bottom:0; }
.demo-summary-list span { color:var(--demo-muted); }
.demo-summary-list strong { color:var(--demo-text-strong); text-align:right; }
.demo-progress-row > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--demo-text); font-size:10px; }
.demo-progress { height:7px; margin-top:8px; overflow:hidden; border-radius:999px; background:var(--demo-surface-soft); border:1px solid var(--demo-border-soft); }
.demo-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--demo-accent),var(--demo-purple)); }
.demo-progress-row small { display:block; margin-top:6px; color:var(--demo-faint); font-size:8.8px; }
.demo-budget-cell { min-width:140px; }
.demo-budget-cell > span { display:block; margin-bottom:4px; color:var(--demo-muted); font-size:9px; }
.demo-budget-cell .demo-progress { margin-top:0; }
.demo-money-positive { color:var(--demo-success); }
.demo-money-negative { color:var(--demo-danger); }
.demo-muted-copy { margin:5px 0 0; color:var(--demo-muted); font-size:10px; line-height:1.55; }
.demo-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1180px) { .demo-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .demo-hub-grid,.demo-grid.two { grid-template-columns:1fr; } }

/* DEMO FIRST V2.3 — manual alignment, role isolation and offline scenario */
.demo-restriction-note,
.demo-offline-banner {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
    padding:12px 14px;
    border:1px solid var(--demo-border);
    border-radius:11px;
    background:var(--demo-surface-strong);
}
.demo-restriction-note > svg,
.demo-offline-banner > svg {
    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:var(--demo-accent-strong);
    stroke-width:1.8;
}
.demo-restriction-note strong,
.demo-offline-banner strong { display:block; color:var(--demo-text-strong); font-size:11px; }
.demo-restriction-note p,
.demo-offline-banner span { margin:3px 0 0; color:var(--demo-muted); font-size:9.5px; line-height:1.5; }
.demo-offline-banner { align-items:center; border-color:rgba(224,154,36,.36); background:rgba(224,154,36,.08); }
.demo-offline-banner > div:nth-child(2) { min-width:0; flex:1; }
.demo-offline-dot { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--demo-warning); box-shadow:0 0 0 5px rgba(224,154,36,.12); }
.demo-offline-banner .demo-status { margin-left:auto; white-space:nowrap; }
.demo-landing-scenarios { margin-top:22px; }
.demo-scenario-head { margin-bottom:10px; }
.demo-scenario-head h2 { margin:3px 0 4px; color:var(--demo-text-strong); font-size:15px; }
.demo-scenario-head p:last-child { margin:0; color:var(--demo-muted); font-size:10px; }
.demo-scenario-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.demo-scenario-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--demo-border); border-radius:11px; background:var(--demo-surface); color:inherit; text-decoration:none; box-shadow:var(--demo-shadow); transition:transform .15s ease,border-color .15s ease; }
.demo-scenario-card:hover { transform:translateY(-2px); border-color:rgba(105,108,255,.30); }
.demo-scenario-card.offline { border-color:rgba(224,154,36,.28); background:color-mix(in srgb,var(--demo-surface) 92%,rgba(224,154,36,.12)); }
.demo-scenario-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--demo-accent-soft); color:var(--demo-accent-strong); }
.demo-scenario-card.offline .demo-scenario-icon { background:rgba(224,154,36,.12); color:var(--demo-warning); }
.demo-scenario-icon svg,.demo-scenario-arrow { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.demo-scenario-card strong { display:block; color:var(--demo-text-strong); font-size:11px; }
.demo-scenario-card span { display:block; margin-top:3px; color:var(--demo-muted); font-size:9.3px; line-height:1.45; }
.demo-scenario-arrow { color:var(--demo-faint); }
.demo-button[disabled] { opacity:.52; cursor:not-allowed; }
@media (max-width:720px) { .demo-scenario-grid { grid-template-columns:1fr; } .demo-offline-banner { align-items:flex-start; flex-wrap:wrap; } .demo-offline-banner .demo-status { margin-left:22px; } }

/* ============================================================
   DEMO FIRST V2.6 — structure, invoices, drawer and brand polish
   ============================================================ */
.demo-sidebar-brand {
    height: 76px;
    overflow: visible;
    padding: 8px 38px 8px 10px;
}
.demo-brand-lockup {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-decoration: none;
}
.demo-brand-mark {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    display: block;
    border-radius: 12px;
}
.demo-sidebar-brand .demo-brand-mark img {
    width: 54px;
    max-width: none;
    height: 54px;
    object-fit: cover;
    object-position: center top;
    transform: none;
}
.demo-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.demo-brand-copy strong {
    color: var(--demo-text-strong);
    font-size: 17px;
    letter-spacing: .14em;
    font-weight: 700;
}
.demo-brand-copy small {
    margin-top: 5px;
    color: var(--demo-faint);
    font-size: 8px;
    letter-spacing: .24em;
    font-weight: 750;
}
.demo-sidebar-toggle {
    top: 23px;
}
/* Expanded sidebar must point left (collapse); collapsed must point right (expand). */
.demo-sidebar-toggle svg {
    transform: rotate(180deg);
    transition: transform .18s ease;
}
.demo-sidebar-scroll {
    height: calc(100vh - 76px);
}
html.demo-sidebar-collapsed .demo-brand-copy { display: none; }
html.demo-sidebar-collapsed .demo-brand-lockup { justify-content: center; }
html.demo-sidebar-collapsed .demo-sidebar-brand { padding-left: 8px; padding-right: 8px; }
html.demo-sidebar-collapsed .demo-sidebar-brand .demo-brand-mark img { width: 54px; height: 54px; transform: none; }
html.demo-sidebar-collapsed .demo-sidebar-toggle svg { transform: none; }

.demo-structure-manager { overflow: hidden; }
.demo-structure-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--demo-border-soft);
    background: color-mix(in srgb, var(--demo-surface-strong) 75%, transparent);
}
.demo-structure-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--demo-muted);
    font-weight: 700;
    cursor: pointer;
}
.demo-structure-tab span {
    display: inline-grid;
    min-width: 23px;
    height: 20px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--demo-surface);
    color: var(--demo-faint);
    font-size: 9px;
}
.demo-structure-tab.is-active {
    border-bottom-color: var(--demo-accent);
    color: var(--demo-text-strong);
}
.demo-structure-tab.is-active span {
    background: var(--demo-accent-soft);
    color: var(--demo-accent-strong);
}
.demo-toolbar-between { justify-content: space-between; }
.demo-filter-cluster {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
.demo-filter-cluster .demo-search { min-width: 240px; flex: 1 1 300px; }
.demo-filter-cluster .demo-select { min-width: 150px; }

.demo-pagination {
    min-height: 46px;
    padding: 9px 12px;
    border-top: 1px solid var(--demo-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--demo-faint);
    font-size: 9.5px;
}
.demo-pagination > div { display: flex; align-items: center; gap: 8px; }
.demo-pagination [data-demo-page-info] {
    min-width: 82px;
    text-align: center;
    color: var(--demo-muted);
    font-weight: 650;
}
.demo-pagination button:disabled { opacity: .42; cursor: default; }

.demo-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 115;
    display: none;
    justify-content: flex-end;
    background: rgba(7,8,13,.48);
    backdrop-filter: blur(3px);
}
.demo-drawer-backdrop.is-open { display: flex; }
.demo-drawer {
    width: min(470px, 92vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--demo-border);
    background: var(--demo-surface);
    box-shadow: -24px 0 70px rgba(0,0,0,.24);
    animation: demoDrawerIn .18s ease-out;
}
@keyframes demoDrawerIn { from { transform: translateX(24px); opacity: .5; } to { transform: translateX(0); opacity: 1; } }
.demo-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--demo-border-soft);
}
.demo-drawer-head h2 { margin: 0; color: var(--demo-text-strong); font-size: 16px; }
.demo-drawer-head p { margin: 4px 0 0; color: var(--demo-faint); font-size: 9.5px; }
.demo-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 15px 16px 22px; }
.demo-drawer-actions { padding: 11px 16px; border-top: 1px solid var(--demo-border-soft); display: flex; justify-content: flex-end; }
.demo-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.demo-detail-item { padding: 10px; border: 1px solid var(--demo-border-soft); border-radius: 9px; background: var(--demo-surface-strong); }
.demo-detail-item span { display: block; color: var(--demo-faint); font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; }
.demo-detail-item strong { display: block; margin-top: 4px; color: var(--demo-text); font-size: 10.4px; overflow-wrap: anywhere; }
.demo-detail-note { margin-top: 12px; padding: 11px; border: 1px solid var(--demo-border-soft); border-radius: 9px; background: var(--demo-accent-soft); color: var(--demo-muted); font-size: 9.8px; line-height: 1.55; }

@media (max-width: 860px) {
    .demo-sidebar-brand { height: 76px; }
    .demo-brand-copy { display: flex !important; }
    .demo-brand-lockup { justify-content: flex-start !important; }
    html.demo-sidebar-collapsed .demo-sidebar-brand { padding: 8px 38px 8px 10px; }
    .demo-filter-cluster { width: 100%; }
    .demo-filter-cluster .demo-search, .demo-filter-cluster .demo-select { min-width: 100%; width: 100%; }
    .demo-toolbar-between { align-items: stretch; flex-direction: column; }
    .demo-toolbar-between > .demo-row-actions { justify-content: flex-end; }
    .demo-pagination { align-items: flex-start; flex-direction: column; }
    .demo-detail-grid { grid-template-columns: 1fr; }
}
/* Compact mark crops the tall source lockup to its network symbol; the wordmark is rendered beside it. */
.demo-sidebar-brand .demo-brand-mark img,
html.demo-sidebar-collapsed .demo-sidebar-brand .demo-brand-mark img {
    width: 70px;
    height: 70px;
    max-width: none;
    object-fit: contain;
    transform: translate(-8px, -2px);
}

/* V2.7 Finance review */
.demo-tabs { overflow-x: auto; scrollbar-width: thin; }
.demo-tabs .demo-structure-tab { white-space: nowrap; }
[data-demo-tab-panel][hidden] { display: none !important; }
/* ACCESS DEMO D2: hidden is semantic state even when components define display:flex/grid. */
[hidden] { display: none !important; }

.demo-evidence-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--demo-border, #2b2d3a); border-radius: 12px; background: rgba(255,255,255,.018); }
.demo-evidence-panel h4 { margin: 0 0 4px; font-size: 13px; }
.demo-evidence-panel > p { margin: 0 0 10px; font-size: 11px; color: var(--demo-muted, #8c8fa8); }
.demo-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.demo-evidence-card { min-width: 0; border: 1px solid var(--demo-border, #2b2d3a); border-radius: 10px; padding: 10px; background: #14151d; }
.demo-evidence-card.is-captured { border-color: rgba(52,211,153,.42); }
.demo-evidence-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.demo-evidence-meta strong { font-size: 12px; }
.demo-evidence-state { font-size: 10px; color: var(--demo-muted, #8c8fa8); }
.demo-evidence-state.is-ok { color:#5ee0b0; }
.demo-evidence-preview { min-height: 92px; border: 1px dashed rgba(139,132,255,.35); border-radius: 8px; display:flex; align-items:center; justify-content:center; padding:8px; overflow:hidden; }
.demo-id-prop { width:100%; max-width:240px; aspect-ratio:1.58/1; border-radius:8px; background:linear-gradient(135deg,#f2f0ea,#d9e5e1); color:#18202a; padding:9px; display:grid; grid-template-columns:44px 1fr; gap:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.demo-id-prop-photo { border-radius:6px; background:linear-gradient(160deg,#8494a7,#c4ccd4); position:relative; }
.demo-id-prop-photo:after { content:'DEMO'; position:absolute; inset:auto 3px 3px; font-size:8px; font-weight:800; text-align:center; color:#fff; background:rgba(0,0,0,.28); border-radius:3px; }
.demo-id-prop-copy { font-size:8px; line-height:1.35; }
.demo-id-prop-copy b { display:block; font-size:10px; margin-bottom:3px; }
.demo-id-prop-copy em { display:block; margin-top:5px; font-style:normal; font-weight:800; color:#8c2633; }
.demo-plate-prop { width:100%; max-width:240px; aspect-ratio:2.15/1; border-radius:7px; background:linear-gradient(#fafafa,#e7e7e7); color:#161616; display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid #b8bcc2; letter-spacing:.12em; font-weight:900; font-size:20px; }
.demo-plate-prop small { font-size:7px; letter-spacing:.08em; margin-top:4px; color:#8b2635; }
.demo-access-evidence-checklist { margin-top: 12px; }
.demo-access-evidence-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--demo-border, #2b2d3a); }
.demo-access-evidence-row:first-child { border-top:0; }
.demo-access-evidence-row p { margin:2px 0 0; font-size:11px; color:var(--demo-muted, #8c8fa8); }
.demo-button:disabled { opacity:.46; cursor:not-allowed; }
.demo-contingency-empty { padding:14px; border:1px dashed var(--demo-border, #2b2d3a); border-radius:10px; color:var(--demo-muted, #8c8fa8); }
@media (max-width: 720px) { .demo-evidence-grid { grid-template-columns:1fr; } }

.demo-stat-value { overflow-wrap: anywhere; }
.demo-table td .demo-row-actions { flex-wrap: wrap; }
@media (max-width: 1180px) {
    .demo-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* V2.8 Finance closure: clearer tabs, consistent pagination and DB-ready workspaces. */
.demo-tabs,
.demo-structure-tabs[role="tablist"] {
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--demo-border-soft);
    border-radius: 10px 10px 0 0;
    background: color-mix(in srgb, var(--demo-surface-strong) 86%, transparent);
}
.demo-tabs .demo-structure-tab,
.demo-structure-tabs[role="tablist"] .demo-structure-tab {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--demo-muted);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.demo-tabs .demo-structure-tab:hover,
.demo-structure-tabs[role="tablist"] .demo-structure-tab:hover {
    border-color: var(--demo-border);
    color: var(--demo-text);
}
.demo-tabs .demo-structure-tab.is-active,
.demo-structure-tabs[role="tablist"] .demo-structure-tab.is-active {
    border-color: color-mix(in srgb, var(--demo-accent) 48%, var(--demo-border));
    background: var(--demo-accent-soft);
    color: var(--demo-text-strong);
    box-shadow: inset 0 -2px 0 var(--demo-accent);
}

.demo-stats-fees { grid-template-columns: repeat(3, minmax(0,1fr)); }
.demo-stats-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.demo-payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}
.demo-payment-method-grid > * { min-width: 0; }

.demo-pagination-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.demo-page-size-label { display: inline-flex; align-items: center; gap: 6px; color: var(--demo-muted); }
.demo-page-size-label .demo-select { min-width: 68px; width: auto; }
.demo-page-numbers { display: inline-flex; align-items: center; gap: 4px; }
.demo-page-number { min-width: 30px; justify-content: center; }
.demo-page-number.is-active {
    border-color: color-mix(in srgb, var(--demo-accent) 55%, var(--demo-border));
    background: var(--demo-accent-soft);
    color: var(--demo-text-strong);
}
.demo-page-ellipsis { padding: 0 3px; color: var(--demo-faint); }
.demo-empty-cell { padding: 28px !important; text-align: center; color: var(--demo-muted); }

.demo-drawer-backdrop.is-document .demo-drawer { width: min(780px, 96vw); }
.demo-document-paper {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--demo-border);
    border-radius: 12px;
    background: var(--demo-surface-strong);
    box-shadow: var(--demo-shadow);
}
.demo-document-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--demo-border);
}
.demo-document-heading span,
.demo-document-heading small { color: var(--demo-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.demo-document-heading h2 { margin: 4px 0 3px; color: var(--demo-text-strong); font-size: 22px; }
.demo-document-heading p { margin: 0; color: var(--demo-muted); }
.demo-document-folio { text-align: right; min-width: 170px; }
.demo-document-folio strong { display: block; margin: 6px 0; color: var(--demo-text-strong); font-size: 15px; }
.demo-document-folio span { color: var(--demo-accent-strong); }
.demo-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 18px;
}
.demo-document-field { padding: 10px 0; border-bottom: 1px solid var(--demo-border-soft); }
.demo-document-field.wide { grid-column: 1 / -1; }
.demo-document-field span { display: block; color: var(--demo-faint); font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; }
.demo-document-field strong { display: block; margin-top: 4px; color: var(--demo-text); font-size: 11.5px; overflow-wrap: anywhere; }
.demo-document-lines { width: 100%; margin-top: 18px; border-collapse: collapse; }
.demo-document-lines th,
.demo-document-lines td { padding: 9px 7px; border-bottom: 1px solid var(--demo-border-soft); text-align: left; font-size: 10px; }
.demo-document-lines .money { text-align: right; }
.demo-document-footer { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--demo-border); color: var(--demo-faint); font-size: 9.5px; line-height: 1.5; }
.demo-document-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; max-width: 720px; margin: 12px auto 0; }

.demo-report-workspace { padding: 10px; }
.demo-report-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 2px 14px;
    border-bottom: 1px solid var(--demo-border-soft);
}
.demo-report-workspace-head h2 { margin: 0; color: var(--demo-text-strong); font-size: 19px; }
.demo-report-workspace-head p { margin: 3px 0 0; color: var(--demo-muted); }
.demo-report-filters { margin-top: 10px; }
.demo-report-kpis { margin-top: 10px; }
.demo-report-kpis .demo-stat-card {
    min-height: 82px;
    padding: 13px;
    border: 1px solid var(--demo-border);
    border-radius: 9px;
    background: var(--demo-surface);
}
.demo-report-kpis .demo-stat-card strong { display: block; color: var(--demo-text-strong); font-size: 20px; }
.demo-report-kpis .demo-stat-card span { display: block; margin-top: 5px; color: var(--demo-muted); font-size: 10px; }
.demo-api-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.demo-inline-copy { display: flex; gap: 7px; align-items: center; }
.demo-inline-copy > *:first-child { flex: 1 1 auto; }
.demo-form-help { color: var(--demo-faint); font-size: 9px; line-height: 1.45; }

@media (max-width: 1180px) {
    .demo-stats-fees,
    .demo-stats-three,
    .demo-payment-method-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .demo-stats-fees,
    .demo-stats-three,
    .demo-payment-method-grid,
    .demo-document-grid,
    .demo-api-field-grid { grid-template-columns: 1fr; }
    .demo-document-field.wide { grid-column: auto; }
    .demo-document-heading,
    .demo-report-workspace-head { flex-direction: column; align-items: stretch; }
    .demo-document-folio { text-align: left; min-width: 0; }
    .demo-document-actions { justify-content: stretch; }
    .demo-document-actions .demo-button { flex: 1 1 auto; }
}

@media print {
    body.demo-print-document .demo-shell > *:not(.demo-main),
    body.demo-print-document .demo-main > *:not(.demo-drawer-backdrop),
    body.demo-print-document .demo-drawer-head,
    body.demo-print-document .demo-drawer-actions,
    body.demo-print-document .demo-document-actions { display: none !important; }
    body.demo-print-document .demo-drawer-backdrop,
    body.demo-print-document .demo-drawer,
    body.demo-print-document .demo-drawer-body { position: static !important; display: block !important; width: 100% !important; height: auto !important; overflow: visible !important; background: white !important; box-shadow: none !important; }
    body.demo-print-document .demo-document-paper { max-width: none; border: 0; box-shadow: none; background: white; color: black; }
    body.demo-print-report [data-demo-report-catalog],
    body.demo-print-report .demo-sidebar,
    body.demo-print-report .demo-topbar,
    body.demo-print-report .demo-mode-note,
    body.demo-print-report [data-demo-report-back],
    body.demo-print-report [data-demo-report-export],
    body.demo-print-report .demo-report-filters,
    body.demo-print-report [data-demo-report-pagination] { display: none !important; }
    body.demo-print-report [data-demo-report-workspace] { display: block !important; }
}
.demo-manual-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 7px; }
.demo-manual-methods > div { padding: 9px; border: 1px solid var(--demo-border-soft); border-radius: 8px; background: var(--demo-surface-strong); }
.demo-manual-methods strong { display: block; color: var(--demo-text-strong); font-size: 10px; }
.demo-manual-methods span { display: block; margin-top: 3px; color: var(--demo-muted); font-size: 9px; line-height: 1.4; }
@media (max-width: 760px) { .demo-manual-methods { grid-template-columns: 1fr; } }

/* V2.8.2 finance closure */
.demo-finance-period-panel { margin-bottom: 0; }
.demo-finance-period-panel .demo-toolbar { padding: 12px 14px; }
.demo-inline-field { display: flex; align-items: center; gap: 8px; color: var(--demo-muted); font-size: 10px; }
.demo-inline-field > span { white-space: nowrap; font-weight: 650; }
.demo-finance-verification-note { margin-top: 10px; align-items: center; }
.demo-finance-verification-note .demo-button { margin-left: auto; white-space: nowrap; }
.demo-report-masterbar { border-bottom: 1px solid var(--demo-border-soft); padding-bottom: 10px; }
.demo-report-selector-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--demo-border-soft); }
.demo-report-picker-field { min-width: min(430px, 100%); }
.demo-report-picker-field .demo-select { min-width: 300px; }
.demo-report-workspace { padding-top: 12px; }
.demo-report-workspace-head { margin-bottom: 0; }
.demo-report-filters { border-top: 1px solid var(--demo-border-soft); margin-top: 12px; padding-top: 12px; }
.demo-report-center .demo-table-wrap { margin-top: 10px; }
@media (max-width: 720px) {
    .demo-finance-period-panel .demo-toolbar,
    .demo-report-selector-row { align-items: stretch; flex-direction: column; }
    .demo-finance-verification-note { align-items: flex-start; flex-wrap: wrap; }
    .demo-finance-verification-note .demo-button { margin-left: 22px; }
    .demo-report-picker-field { width: 100%; }
    .demo-report-picker-field .demo-select { min-width: 0; width: 100%; }
}


/* COMUNIDAD F1 — workspace forms, editable category catalogs and richer detail drawers */
.demo-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--demo-surface);
    box-shadow: 0 -8px 18px rgba(7,8,13,.12);
}
.demo-category-editor { display: grid; gap: 8px; }
.demo-category-row {
    display: grid;
    grid-template-columns: minmax(180px,1fr) auto auto;
    gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--demo-border-soft);
    border-radius: 9px;
    background: var(--demo-surface-strong);
}
.demo-category-active { display: inline-flex; align-items: center; gap: 6px; color: var(--demo-muted); white-space: nowrap; font-size: 10px; }
[data-demo-directory-manual-field].is-linked-source { opacity: .78; }
[data-demo-directory-manual-field].is-linked-source::after { content: 'Dato proveniente de la fuente maestra; se publica sólo si el canal está autorizado.'; display: block; margin-top: 5px; color: var(--demo-faint); font-size: 8.8px; }
.demo-drawer-backdrop.is-request .demo-drawer,
.demo-drawer-backdrop.is-document .demo-drawer,
.demo-drawer-backdrop.is-directory .demo-drawer { width: min(640px, 94vw); }
.demo-drawer-backdrop.is-request .demo-detail-grid,
.demo-drawer-backdrop.is-document .demo-detail-grid,
.demo-drawer-backdrop.is-directory .demo-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 640px) {
    .demo-category-row { grid-template-columns: 1fr; }
    .demo-category-row .demo-row-actions { justify-content: flex-start; }
    .demo-drawer-backdrop.is-request .demo-detail-grid,
    .demo-drawer-backdrop.is-document .demo-detail-grid,
    .demo-drawer-backdrop.is-directory .demo-detail-grid { grid-template-columns: 1fr; }
}


/* COMUNIDAD F1 · Amenidades ajuste visual final A1 */
.demo-amenity-catalog-toolbar {
    grid-template-columns: minmax(360px, 1.55fr) minmax(190px, .72fr) minmax(190px, .72fr) auto !important;
}
.demo-amenity-reservation-toolbar {
    grid-template-columns: minmax(380px, 1.55fr) minmax(180px, .72fr) minmax(170px, .68fr) minmax(150px, .62fr) auto !important;
}
.demo-amenity-search,
.demo-amenity-search .demo-input {
    width: 100%;
}
.demo-amenity-card-status {
    align-self: flex-start;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 24px;
    max-width: max-content;
    padding: 4px 8px;
    aspect-ratio: auto !important;
}

@media (max-width: 1050px) {
    .demo-amenity-catalog-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr) !important;
    }
    .demo-amenity-catalog-toolbar .demo-amenity-search {
        grid-column: 1 / -1;
    }
    .demo-amenity-reservation-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr) !important;
    }
    .demo-amenity-reservation-toolbar .demo-amenity-search {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .demo-amenity-catalog-toolbar,
    .demo-amenity-reservation-toolbar {
        grid-template-columns: 1fr !important;
    }
    .demo-amenity-catalog-toolbar .demo-amenity-search,
    .demo-amenity-reservation-toolbar .demo-amenity-search {
        grid-column: auto;
    }
}


/* COMUNIDAD · Amenidades A2 — cierre visual */
.demo-amenity-catalog-toolbar [data-demo-amenity-clear],
.demo-amenity-reservation-toolbar [data-demo-clear="amenity-reservations"] {
    width: auto;
    min-width: 74px;
    justify-self: end;
}

.demo-amenity-state {
    min-height: 22px;
    padding: 3px 7px;
    white-space: nowrap;
}
.demo-amenity-state[data-amenity-state="Programada"] {
    background: var(--demo-accent-soft);
    color: var(--demo-accent-strong);
}
.demo-amenity-state[data-amenity-state="Confirmada"] {
    background: var(--demo-success-soft);
    color: var(--demo-success);
}
.demo-amenity-state[data-amenity-state="En curso"] {
    background: var(--demo-info-soft);
    color: var(--demo-info);
}
.demo-amenity-state[data-amenity-state="Finalizada"] {
    background: var(--demo-surface-soft);
    color: var(--demo-faint);
}
.demo-amenity-state[data-amenity-state="Cancelada"] {
    background: var(--demo-danger-soft);
    color: var(--demo-danger);
}
.demo-amenity-state[data-amenity-state="No asistió"],
.demo-amenity-state[data-amenity-state="Bloqueada"],
.demo-amenity-state[data-amenity-state="Mantenimiento"] {
    background: var(--demo-warning-soft);
    color: var(--demo-warning);
}

.demo-amenity-card-status[data-amenity-operation-state="Disponible"] {
    background: var(--demo-success-soft);
    color: var(--demo-success);
}
.demo-amenity-card-status[data-amenity-operation-state="Mantenimiento"] {
    background: var(--demo-warning-soft);
    color: var(--demo-warning);
}
.demo-amenity-card-status[data-amenity-operation-state="Cerrada temporalmente"] {
    background: var(--demo-danger-soft);
    color: var(--demo-danger);
}
.demo-amenity-card-status[data-amenity-operation-state="Inactiva"] {
    background: var(--demo-surface-soft);
    color: var(--demo-faint);
}

.demo-amenity-demand[data-amenity-demand="Alta"] {
    background: var(--demo-warning-soft);
    color: var(--demo-warning);
    border-color: color-mix(in srgb, var(--demo-warning) 30%, transparent);
}
.demo-amenity-demand[data-amenity-demand="Media"] {
    background: var(--demo-info-soft);
    color: var(--demo-info);
    border-color: color-mix(in srgb, var(--demo-info) 30%, transparent);
}
.demo-amenity-demand[data-amenity-demand="Normal"] {
    background: var(--demo-surface-strong);
    color: var(--demo-muted);
}

@media (max-width: 1050px) {
    .demo-amenity-catalog-toolbar {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto !important;
    }
    .demo-amenity-catalog-toolbar .demo-amenity-search {
        grid-column: 1 / -1;
    }

    .demo-amenity-reservation-toolbar {
        grid-template-columns: repeat(3, minmax(0,1fr)) auto !important;
    }
    .demo-amenity-reservation-toolbar .demo-amenity-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .demo-amenity-reservation-toolbar {
        grid-template-columns: 1fr 1fr !important;
    }
    .demo-amenity-reservation-toolbar .demo-amenity-search {
        grid-column: 1 / -1;
    }
    .demo-amenity-reservation-toolbar [data-demo-clear="amenity-reservations"] {
        justify-self: end;
    }
}

@media (max-width: 640px) {
    .demo-amenity-catalog-toolbar,
    .demo-amenity-reservation-toolbar {
        grid-template-columns: 1fr !important;
    }
    .demo-amenity-catalog-toolbar [data-demo-amenity-clear],
    .demo-amenity-reservation-toolbar [data-demo-clear="amenity-reservations"] {
        justify-self: start;
    }
}


/* =====================================================================
   COMUNIDAD · DEMO CIERRE D1
   Pulido visual transversal sin cambiar la arquitectura de producción.
   ===================================================================== */

.demo-community-search,
.demo-community-search .demo-input {
    width: 100%;
    min-width: 0;
}

.demo-bulletin-toolbar [data-demo-bulletin-clear],
.demo-request-toolbar [data-demo-clear="requests"],
.demo-document-toolbar [data-demo-clear="documents"],
.demo-directory-toolbar [data-demo-clear="directory"] {
    width: auto !important;
    min-width: 74px;
    justify-self: end;
}

/* Estados y prioridades consistentes en COMUNIDAD */
.demo-community-state[data-community-state="Publicado"],
.demo-community-state[data-community-state="Confirmada"],
.demo-community-state[data-community-state="Atendida"] {
    background: var(--demo-success-soft);
    color: var(--demo-success);
}
.demo-community-state[data-community-state="Programado"],
.demo-community-state[data-community-state="Programada"] {
    background: var(--demo-accent-soft);
    color: var(--demo-accent-strong);
}
.demo-community-state[data-community-state="Borrador"],
.demo-community-state[data-community-state="Archivado"],
.demo-community-state[data-community-state="Cerrada"],
.demo-community-state[data-community-state="Vencido"] {
    background: var(--demo-surface-soft);
    color: var(--demo-faint);
}
.demo-community-state[data-community-state="Cancelada"] {
    background: var(--demo-danger-soft);
    color: var(--demo-danger);
}

.demo-community-priority[data-community-priority="Normal"] {
    background: var(--demo-surface-strong);
    color: var(--demo-muted);
}
.demo-community-priority[data-community-priority="Importante"] {
    background: var(--demo-info-soft);
    color: var(--demo-info);
}
.demo-community-priority[data-community-priority="Urgente"] {
    background: var(--demo-danger-soft);
    color: var(--demo-danger);
}

/* Drawers de expedientes/documentos/directorio */
.demo-drawer-backdrop.is-request .demo-drawer,
.demo-drawer-backdrop.is-document .demo-drawer,
.demo-drawer-backdrop.is-directory .demo-drawer {
    width: min(760px, 96vw);
}
.demo-detail-item.is-wide {
    grid-column: 1 / -1;
}
.demo-detail-item strong {
    line-height: 1.45;
}
.demo-detail-demo-hint {
    margin-top: 12px;
}

/* Directorio: menos columnas para evitar scroll horizontal en escritorio */
.demo-directory-table {
    min-width: 0;
    table-layout: fixed;
}
.demo-directory-table th:nth-child(1) { width: 19%; }
.demo-directory-table th:nth-child(2) { width: 19%; }
.demo-directory-table th:nth-child(3) { width: 11%; }
.demo-directory-table th:nth-child(4) { width: 20%; }
.demo-directory-table th:nth-child(5) { width: 16%; }
.demo-directory-table th:nth-child(6) { width: 15%; }
.demo-directory-table td {
    overflow-wrap: anywhere;
    vertical-align: top;
}
.demo-directory-actions {
    align-items: flex-start;
}

/* Formularios largos: separar visualmente bloques de audiencia/alcance */
[data-demo-audience-group] {
    margin-top: 4px;
}
.demo-form-grid > .demo-field.wide:has([data-demo-audience-group]) {
    padding-block: 4px;
}

@media (max-width: 1200px) {
    .demo-bulletin-toolbar {
        grid-template-columns: repeat(3, minmax(0,1fr)) auto !important;
    }
    .demo-bulletin-toolbar .demo-community-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1050px) {
    .demo-request-toolbar {
        grid-template-columns: repeat(3, minmax(0,1fr)) auto !important;
    }
    .demo-request-toolbar .demo-community-search {
        grid-column: 1 / -1;
    }
    .demo-request-toolbar.secondary {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .demo-document-toolbar {
        grid-template-columns: repeat(3, minmax(0,1fr)) auto !important;
    }
    .demo-document-toolbar .demo-community-search {
        grid-column: 1 / -1;
    }

    .demo-directory-toolbar {
        grid-template-columns: repeat(2, minmax(0,1fr)) auto !important;
    }
    .demo-directory-toolbar .demo-community-search {
        grid-column: 1 / -1;
    }

    .demo-directory-table {
        min-width: 760px;
        table-layout: auto;
    }
}

@media (max-width: 720px) {
    .demo-bulletin-toolbar,
    .demo-request-toolbar,
    .demo-request-toolbar.secondary,
    .demo-document-toolbar,
    .demo-directory-toolbar {
        grid-template-columns: 1fr !important;
    }

    .demo-bulletin-toolbar .demo-community-search,
    .demo-request-toolbar .demo-community-search,
    .demo-document-toolbar .demo-community-search,
    .demo-directory-toolbar .demo-community-search {
        grid-column: auto;
    }

    .demo-bulletin-toolbar [data-demo-bulletin-clear],
    .demo-request-toolbar [data-demo-clear="requests"],
    .demo-document-toolbar [data-demo-clear="documents"],
    .demo-directory-toolbar [data-demo-clear="directory"] {
        justify-self: start;
    }
}
/* PORTALES P1 · bulletin cards shared outside Administración */
.demo-bulletin-toolbar{display:grid;grid-template-columns:minmax(300px,1.4fr) minmax(170px,.7fr) minmax(150px,.6fr) minmax(150px,.6fr) auto;gap:10px;align-items:center}.demo-bulletin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-bulletin-card{display:flex;flex-direction:column;min-height:100%;border:1px solid var(--demo-border,#2a2d3a);border-radius:14px;overflow:hidden;background:var(--demo-panel,#12141c)}.demo-bulletin-cover{height:150px;background:#181b24 center/cover no-repeat}.demo-bulletin-content{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}.demo-bulletin-meta{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.demo-bulletin-category{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(112,89,255,.18);color:#c8c0ff;font-size:12px;font-weight:700}.demo-bulletin-date{font-size:12px;color:var(--demo-muted,#8d93a7)}.demo-bulletin-card h3{font-size:17px;line-height:1.2;margin:0}.demo-bulletin-card p{margin:0;color:var(--demo-muted,#9aa0b5);line-height:1.45}.demo-bulletin-actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}.demo-bulletin-actions .demo-button:first-child{flex:1}.demo-bulletin-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--demo-muted,#8d93a7)}@media(max-width:1200px){.demo-bulletin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-bulletin-toolbar{grid-template-columns:1fr 1fr}}@media(max-width:720px){.demo-bulletin-grid,.demo-bulletin-toolbar{grid-template-columns:1fr}}

/* IMPERA_PORTALES_P2_START */
.impera-portales-p2 .impera-p2-expired{
    opacity:.82;
}
.impera-portales-p2 .impera-p2-toast{
    background:var(--demo-panel,#151824);
    border:1px solid var(--demo-border,#303448);
    border-left:3px solid #7b67ff;
    border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    color:var(--demo-text,#f5f6fb);
    margin-top:8px;
    max-width:390px;
    padding:12px 14px;
}
.impera-portales-p2 .impera-p2-notification-extra{
    border-top:1px solid var(--demo-border,#2a2d3a);
    margin-top:6px;
}
.impera-portales-p2 .impera-p2-notification-row{
    align-items:center;
    border-bottom:1px solid var(--demo-border,#2a2d3a);
    display:flex;
    gap:14px;
    justify-content:space-between;
    min-height:44px;
    padding:8px 0;
}
.impera-portales-p2 .impera-p2-switch{
    background:#353847;
    border:0;
    border-radius:999px;
    cursor:pointer;
    height:22px;
    padding:2px;
    position:relative;
    width:38px;
}
.impera-portales-p2 .impera-p2-switch span{
    background:#fff;
    border-radius:50%;
    display:block;
    height:18px;
    transform:translateX(0);
    transition:transform .18s ease;
    width:18px;
}
.impera-portales-p2 .impera-p2-switch.is-on{
    background:#7663ff;
}
.impera-portales-p2 .impera-p2-switch.is-on span{
    transform:translateX(16px);
}
.impera-portales-p2 .impera-p2-how-pay{
    padding-bottom:14px!important;
}
.impera-portales-p2 .impera-p2-how-pay [class*="grid"]{
    align-items:stretch;
    gap:10px!important;
}
.impera-portales-p2 .impera-p2-how-pay [class*="card"],
.impera-portales-p2 .impera-p2-how-pay article{
    min-height:0!important;
    padding-top:14px!important;
    padding-bottom:14px!important;
}
.impera-portales-p2 .impera-p2-bulletin-card{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr);
    column-gap:12px;
    align-items:center;
}
.impera-portales-p2 .impera-p2-bulletin-thumb{
    align-self:stretch;
    border-radius:10px;
    display:block;
    grid-row:1 / span 8;
    min-height:64px;
    overflow:hidden;
    position:relative;
}
.impera-portales-p2 .impera-p2-bulletin-thumb::after{
    background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0));
    content:"";
    inset:0;
    position:absolute;
}
.impera-portales-p2 .impera-p2-bulletin-thumb.is-pool{
    background:
        radial-gradient(circle at 70% 25%,rgba(255,255,255,.45) 0 8%,transparent 9%),
        linear-gradient(150deg,#3a68b7,#2f9eaa 56%,#24476d);
}
.impera-portales-p2 .impera-p2-bulletin-thumb.is-community{
    background:
        radial-gradient(circle at 34% 38%,rgba(255,255,255,.28) 0 11%,transparent 12%),
        linear-gradient(145deg,#604d9f,#8572c9 58%,#34354c);
}
.impera-portales-p2 .impera-p2-charge-extra{
    border-top:1px solid var(--demo-border,#2a2d3a);
    margin-top:18px;
    padding-top:16px;
}
.impera-portales-p2 .impera-p2-charge-extra h3{
    font-size:14px;
    margin:0 0 12px;
}
.impera-portales-p2 .impera-p2-detail-grid{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.impera-portales-p2 .impera-p2-detail-grid>div{
    background:rgba(255,255,255,.025);
    border:1px solid var(--demo-border,#2a2d3a);
    border-radius:10px;
    display:grid;
    gap:4px;
    padding:10px 11px;
}
.impera-portales-p2 .impera-p2-detail-grid small{
    color:var(--demo-muted,#8d93a7);
}
.impera-portales-p2 .impera-p2-cfdi-summary{
    background:rgba(112,89,255,.06);
    border:1px solid rgba(112,89,255,.28);
    border-left:3px solid #7965ff;
    border-radius:10px;
    display:grid;
    gap:5px;
    margin:10px 0 14px;
    padding:10px 12px;
}
.impera-portales-p2 .impera-p2-cfdi-summary small{
    color:var(--demo-muted,#8d93a7);
    line-height:1.45;
}
@media (min-width:980px){
    .impera-portales-p2 .impera-p2-how-pay [class*="grid"]{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}
@media (max-width:720px){
    .impera-portales-p2 .impera-p2-detail-grid{
        grid-template-columns:1fr;
    }
    .impera-portales-p2 .impera-p2-bulletin-card{
        grid-template-columns:58px minmax(0,1fr);
    }
}
/* IMPERA_PORTALES_P2_END */

/* IMPERA_CONFIG_ESTANCIAS_H1_START */
.impera-config-estancias-h1 .impera-h1-master{
    border:1px solid rgba(116,96,255,.30);
    border-radius:14px;
    background:rgba(112,89,255,.045);
    margin:0 0 16px;
    padding:14px;
}
.impera-config-estancias-h1 .impera-h1-kicker{
    color:#9c8cff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.impera-config-estancias-h1 .impera-h1-master h3{margin:4px 0 4px}
.impera-config-estancias-h1 .impera-h1-master p{margin:0;color:var(--demo-muted,#8d93a7);line-height:1.45}
.impera-config-estancias-h1 .impera-h1-master-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}
.impera-config-estancias-h1 .impera-h1-switch-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    border:1px solid var(--demo-border,#2b2e3a);
    border-radius:11px;
    padding:11px 12px;
    background:rgba(255,255,255,.018);
}
.impera-config-estancias-h1 .impera-h1-switch-row>div{display:grid;gap:3px}
.impera-config-estancias-h1 .impera-h1-switch-row small{color:var(--demo-muted,#8d93a7);font-size:10px;line-height:1.35}
.impera-config-estancias-h1 .impera-h1-switch-row.is-locked{opacity:.92}
.impera-config-estancias-h1 .impera-h1-switch{
    flex:0 0 auto;
    width:40px;height:23px;padding:2px;border:0;border-radius:99px;background:#363948;cursor:pointer
}
.impera-config-estancias-h1 .impera-h1-switch span{
    display:block;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .18s
}
.impera-config-estancias-h1 .impera-h1-switch.is-on{background:#7864ff}
.impera-config-estancias-h1 .impera-h1-switch.is-on span{transform:translateX(17px)}
.impera-config-estancias-h1 .impera-h1-switch:disabled{cursor:not-allowed}
.impera-config-estancias-h1 .impera-h1-presets{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px
}
.impera-config-estancias-h1 .impera-h1-preset{
    text-align:left;border:1px solid var(--demo-border,#2b2e3a);border-radius:10px;background:transparent;
    color:inherit;padding:10px 11px;cursor:pointer;display:grid;gap:4px
}
.impera-config-estancias-h1 .impera-h1-preset span{font-size:10px;color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-preset.is-active{border-color:#7663ff;background:rgba(118,99,255,.08)}
.impera-config-estancias-h1 .impera-h1-policy,
.impera-config-estancias-h1 .impera-h1-note,
.impera-config-estancias-h1 .impera-h1-privacy,
.impera-config-estancias-h1 .impera-h1-audit{
    border-left:3px solid #7b68ff;
    background:rgba(112,89,255,.055);
    border-radius:9px;
    padding:10px 12px;
    margin-top:12px;
}
.impera-config-estancias-h1 .impera-h1-policy p,
.impera-config-estancias-h1 .impera-h1-note p,
.impera-config-estancias-h1 .impera-h1-privacy p,
.impera-config-estancias-h1 .impera-h1-audit p{
    margin:4px 0 0;color:var(--demo-muted,#8d93a7);font-size:11px;line-height:1.45
}
.impera-config-estancias-h1 .impera-h1-unit-tools{
    display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--demo-border,#2b2e3a)
}
.impera-config-estancias-h1 .impera-h1-model-note{
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:11px
}
.impera-config-estancias-h1 .impera-h1-model-note span{color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-layer{position:fixed;inset:0;z-index:9998}
.impera-config-estancias-h1 .impera-h1-backdrop{position:absolute;inset:0;background:rgba(3,5,12,.78);backdrop-filter:blur(5px)}
.impera-config-estancias-h1 .impera-h1-modal{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(760px,92vw);max-height:88vh;display:flex;flex-direction:column;
    border:1px solid var(--demo-border,#2b2e3a);border-radius:14px;background:var(--demo-panel,#12141c);
    color:var(--demo-text,#f4f5fa);box-shadow:0 24px 80px rgba(0,0,0,.5);overflow:hidden
}
.impera-config-estancias-h1 .impera-h1-head,
.impera-config-estancias-h1 .impera-h1-actions{padding:13px 15px;border-color:var(--demo-border,#2b2e3a);display:flex;align-items:center;justify-content:space-between;gap:12px}
.impera-config-estancias-h1 .impera-h1-head{border-bottom:1px solid var(--demo-border,#2b2e3a)}
.impera-config-estancias-h1 .impera-h1-actions{border-top:1px solid var(--demo-border,#2b2e3a);justify-content:flex-end}
.impera-config-estancias-h1 .impera-h1-head h2{margin:0;font-size:17px}
.impera-config-estancias-h1 .impera-h1-head p{margin:3px 0 0;color:var(--demo-muted,#8d93a7);font-size:11px}
.impera-config-estancias-h1 .impera-h1-close{border:1px solid var(--demo-border,#2b2e3a);border-radius:9px;background:transparent;color:inherit;width:32px;height:32px;cursor:pointer}
.impera-config-estancias-h1 .impera-h1-body{padding:14px 15px;overflow:auto}
.impera-config-estancias-h1 .impera-h1-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.impera-config-estancias-h1 .impera-h1-form-grid label{display:grid;gap:5px;font-size:11px;color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-form-grid .wide{grid-column:1/-1}
.impera-config-estancias-h1 .impera-h1-permissions{margin-top:14px}
.impera-config-estancias-h1 .impera-h1-permissions h3{font-size:13px;margin:0 0 8px}
.impera-config-estancias-h1 .impera-h1-permissions .impera-h1-switch-row{margin-top:7px}
.impera-config-estancias-h1 .impera-h1-limit{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:12px;margin-top:8px;font-size:11px}
.impera-config-estancias-h1 .impera-h1-success{display:flex;gap:10px;align-items:center;border:1px solid rgba(50,190,135,.25);background:rgba(50,190,135,.07);border-radius:11px;padding:12px}
.impera-config-estancias-h1 .impera-h1-success>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(50,190,135,.13);color:#56d6a2;font-size:20px}
.impera-config-estancias-h1 .impera-h1-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.impera-config-estancias-h1 .impera-h1-summary-grid>div{display:grid;gap:3px;border:1px solid var(--demo-border,#2b2e3a);border-radius:9px;padding:9px}
.impera-config-estancias-h1 .impera-h1-summary-grid small{color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-link{display:grid;gap:5px;font-size:11px;color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.impera-config-estancias-h1 .impera-h1-guest-card{display:flex;align-items:center;gap:12px;border:1px solid var(--demo-border,#2b2e3a);border-radius:11px;padding:12px}
.impera-config-estancias-h1 .impera-h1-guest-card>div:nth-child(2){flex:1}
.impera-config-estancias-h1 .impera-h1-guest-card h3{margin:0 0 3px}
.impera-config-estancias-h1 .impera-h1-guest-card p,.impera-config-estancias-h1 .impera-h1-guest-card small{margin:0;color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(118,99,255,.16);font-weight:800;color:#a99cff}
.impera-config-estancias-h1 .impera-h1-guest-actions{display:flex;gap:8px;margin:12px 0}
.impera-config-estancias-h1 .impera-h1-mini-table{margin-top:12px;border:1px solid var(--demo-border,#2b2e3a);border-radius:10px;overflow:hidden}
.impera-config-estancias-h1 .impera-h1-mini-table>div{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;padding:10px;border-bottom:1px solid var(--demo-border,#2b2e3a);font-size:11px}
.impera-config-estancias-h1 .impera-h1-mini-table>div:last-child{border-bottom:0}
.impera-config-estancias-h1 .impera-h1-mini-table span{color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-mini-table em{font-style:normal;color:#f2b85d}
.impera-config-estancias-h1 .impera-h1-profile-panel{margin-top:10px}
.impera-config-estancias-h1 .impera-h1-profile-units{padding:0 14px}
.impera-config-estancias-h1 .impera-h1-profile-units>div{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--demo-border,#2b2e3a);padding:10px 0}
.impera-config-estancias-h1 .impera-h1-profile-units>div>div{display:grid;gap:2px}
.impera-config-estancias-h1 .impera-h1-profile-units span{font-size:10px;color:var(--demo-muted,#8d93a7)}
.impera-config-estancias-h1 .impera-h1-profile-panel>.impera-h1-privacy{margin:12px 14px 14px}
.impera-config-estancias-h1 .impera-h1-toast{
    background:var(--demo-panel,#151824);border:1px solid var(--demo-border,#303448);border-left:3px solid #7b67ff;
    border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35);color:var(--demo-text,#f5f6fb);margin-top:8px;max-width:420px;padding:12px 14px
}
@media(max-width:820px){
    .impera-config-estancias-h1 .impera-h1-master-grid,
    .impera-config-estancias-h1 .impera-h1-presets{grid-template-columns:1fr}
    .impera-config-estancias-h1 .impera-h1-form-grid,
    .impera-config-estancias-h1 .impera-h1-summary-grid{grid-template-columns:1fr}
    .impera-config-estancias-h1 .impera-h1-form-grid .wide{grid-column:auto}
}
@media(max-width:560px){
    .impera-config-estancias-h1 .impera-h1-modal{width:96vw;max-height:92vh}
    .impera-config-estancias-h1 .impera-h1-mini-table>div{grid-template-columns:1fr}
    .impera-config-estancias-h1 .impera-h1-profile-units>div{align-items:flex-start;flex-direction:column}
}
/* IMPERA_CONFIG_ESTANCIAS_H1_END */

/* IMPERA_CIERRE_DEMO_S2_START */

/* Branding sidebar: isotipo oficial + copy limpio, como el sitio comercial */
.impera-cierre-demo-s2 .demo-sidebar-brand{
    min-height:78px;
    padding:12px 10px 12px 14px;
    gap:8px;
    overflow:visible;
}
.impera-cierre-demo-s2 .demo-brand-lockup{
    align-items:center;
    display:flex;
    gap:10px;
    min-width:0;
    overflow:visible;
}
.impera-cierre-demo-s2 .demo-brand-mark{
    align-items:center;
    display:flex;
    flex:0 0 44px;
    height:44px;
    justify-content:center;
    overflow:visible;
    width:44px;
}
.impera-cierre-demo-s2 .demo-brand-mark img{
    display:block;
    height:44px!important;
    max-height:none!important;
    max-width:none!important;
    object-fit:contain;
    width:44px!important;
}
.impera-cierre-demo-s2 .demo-brand-copy{
    display:grid;
    gap:1px;
    line-height:1;
    overflow:visible;
    white-space:nowrap;
}
.impera-cierre-demo-s2 .demo-brand-copy strong{
    font-size:16px;
    letter-spacing:.14em;
}
.impera-cierre-demo-s2 .demo-brand-copy small{
    color:#7d6cff;
    font-size:8px;
    font-weight:800;
    letter-spacing:.28em;
    padding-left:1px;
}
.impera-cierre-demo-s2 .demo-sidebar-toggle{
    flex:0 0 auto;
}

/* Selector comercial */
.impera-cierre-demo-s2 .impera-s2-role-badge{
    background:rgba(117,97,255,.10);
    border:1px solid rgba(117,97,255,.20);
    border-radius:999px;
    color:#8d7cff;
    display:inline-flex;
    font-size:9px;
    font-weight:800;
    letter-spacing:.02em;
    margin-top:7px;
    padding:4px 7px;
}

/* Guardia / Caseta */
.impera-cierre-demo-s2 .impera-s2-guard-home{
    display:grid;
    gap:12px;
    margin-top:12px;
}
.impera-cierre-demo-s2 .impera-s2-guard-title{
    align-items:flex-start;
    display:flex;
    justify-content:space-between;
    gap:14px;
}
.impera-cierre-demo-s2 .impera-s2-guard-title>div>span{
    color:#8f80ff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}
.impera-cierre-demo-s2 .impera-s2-guard-title h2{
    font-size:22px;
    margin:3px 0 4px;
}
.impera-cierre-demo-s2 .impera-s2-guard-title p{
    color:var(--demo-muted,#8d93a7);
    margin:0;
}
.impera-cierre-demo-s2 .impera-s2-shift{
    background:rgba(48,194,132,.09);
    border:1px solid rgba(48,194,132,.20);
    border-radius:999px;
    color:#50d59c;
    flex:0 0 auto;
    font-size:10px;
    font-weight:800;
    padding:7px 10px;
}
.impera-cierre-demo-s2 .impera-s2-primary-actions{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.impera-cierre-demo-s2 .impera-s2-action{
    align-items:center;
    border:1px solid rgba(117,97,255,.30);
    border-radius:16px;
    color:inherit;
    cursor:pointer;
    display:flex;
    gap:14px;
    min-height:112px;
    padding:18px 20px;
    text-align:left;
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.impera-cierre-demo-s2 .impera-s2-action:hover{
    transform:translateY(-1px);
}
.impera-cierre-demo-s2 .impera-s2-action.is-entry{
    background:linear-gradient(135deg,rgba(94,75,225,.18),rgba(94,75,225,.06));
}
.impera-cierre-demo-s2 .impera-s2-action.is-exit{
    background:linear-gradient(135deg,rgba(42,162,190,.15),rgba(42,162,190,.05));
    border-color:rgba(72,178,196,.28);
}
.impera-cierre-demo-s2 .impera-s2-action-icon{
    align-items:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    display:flex;
    flex:0 0 52px;
    font-size:28px;
    height:52px;
    justify-content:center;
}
.impera-cierre-demo-s2 .impera-s2-action strong{
    display:block;
    font-size:22px;
    line-height:1.1;
}
.impera-cierre-demo-s2 .impera-s2-action small{
    color:var(--demo-muted,#8d93a7);
    display:block;
    font-size:12px;
    margin-top:5px;
}
.impera-cierre-demo-s2 .impera-s2-instruction{
    align-items:center;
    background:rgba(245,177,72,.055);
    border:1px solid rgba(245,177,72,.24);
    border-radius:13px;
    display:grid;
    gap:12px;
    grid-template-columns:auto 1fr auto;
    padding:12px 14px;
}
.impera-cierre-demo-s2 .impera-s2-instruction.is-read{opacity:.66}
.impera-cierre-demo-s2 .impera-s2-instruction-mark{
    align-items:center;
    background:rgba(245,177,72,.12);
    border-radius:12px;
    color:#f4b455;
    display:flex;
    font-size:22px;
    font-weight:900;
    height:44px;
    justify-content:center;
    width:44px;
}
.impera-cierre-demo-s2 .impera-s2-instruction-copy>div{
    align-items:center;
    display:flex;
    gap:7px;
    margin-bottom:3px;
}
.impera-cierre-demo-s2 .impera-s2-instruction-copy span{
    color:#f1b357;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}
.impera-cierre-demo-s2 .impera-s2-instruction-copy em{
    background:rgba(64,194,137,.10);
    border-radius:999px;
    color:#54d7a0;
    font-size:9px;
    font-style:normal;
    padding:3px 6px;
}
.impera-cierre-demo-s2 .impera-s2-instruction-copy p{
    color:var(--demo-muted,#8d93a7);
    font-size:11px;
    margin:3px 0 0;
}
.impera-cierre-demo-s2 .impera-s2-instruction-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-end;
}
.impera-cierre-demo-s2 .impera-s2-secondary{
    display:grid;
    gap:8px;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.impera-cierre-demo-s2 .impera-s2-secondary button{
    background:rgba(255,255,255,.018);
    border:1px solid var(--demo-border,#2b2e3a);
    border-radius:11px;
    color:inherit;
    cursor:pointer;
    display:grid;
    gap:3px;
    min-height:66px;
    padding:10px 12px;
    text-align:left;
}
.impera-cierre-demo-s2 .impera-s2-secondary button:hover{
    background:rgba(117,97,255,.055);
    border-color:rgba(117,97,255,.28);
}
.impera-cierre-demo-s2 .impera-s2-secondary small{
    color:var(--demo-muted,#8d93a7);
    font-size:10px;
}

/* Quick Check-in / Check-out */
.impera-cierre-demo-s2 .impera-s2-quick-layer{
    inset:0;
    position:fixed;
    z-index:10010;
}
.impera-cierre-demo-s2 .impera-s2-quick-backdrop{
    background:rgba(2,4,10,.80);
    backdrop-filter:blur(5px);
    inset:0;
    position:absolute;
}
.impera-cierre-demo-s2 .impera-s2-quick-modal{
    background:var(--demo-panel,#12141c);
    border:1px solid var(--demo-border,#2b2e3a);
    border-radius:15px;
    box-shadow:0 26px 90px rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    left:50%;
    max-height:90vh;
    overflow:hidden;
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(650px,92vw);
}
.impera-cierre-demo-s2 .impera-s2-quick-modal>header{
    align-items:flex-start;
    border-bottom:1px solid var(--demo-border,#2b2e3a);
    display:flex;
    justify-content:space-between;
    padding:16px 17px;
}
.impera-cierre-demo-s2 .impera-s2-quick-modal>header span{
    color:#8f80ff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}
.impera-cierre-demo-s2 .impera-s2-quick-modal>header h2{
    font-size:20px;
    margin:3px 0;
}
.impera-cierre-demo-s2 .impera-s2-quick-modal>header p{
    color:var(--demo-muted,#8d93a7);
    margin:0;
}
.impera-cierre-demo-s2 .impera-s2-quick-modal>header button{
    background:transparent;
    border:1px solid var(--demo-border,#2b2e3a);
    border-radius:9px;
    color:inherit;
    cursor:pointer;
    height:32px;
    width:32px;
}
.impera-cierre-demo-s2 .impera-s2-quick-body{
    display:grid;
    gap:12px;
    overflow:auto;
    padding:16px 17px;
}
.impera-cierre-demo-s2 .impera-s2-step{
    align-items:center;
    display:flex;
    gap:10px;
}
.impera-cierre-demo-s2 .impera-s2-step>b{
    align-items:center;
    background:rgba(117,97,255,.13);
    border-radius:10px;
    color:#9b8cff;
    display:flex;
    height:34px;
    justify-content:center;
    width:34px;
}
.impera-cierre-demo-s2 .impera-s2-step p{
    color:var(--demo-muted,#8d93a7);
    font-size:11px;
    margin:2px 0 0;
}
.impera-cierre-demo-s2 .impera-s2-search-row{
    display:grid;
    gap:8px;
    grid-template-columns:1fr auto;
}
.impera-cierre-demo-s2 .impera-s2-result{
    background:rgba(57,190,137,.045);
    border:1px solid rgba(57,190,137,.20);
    border-radius:12px;
    padding:12px;
}
.impera-cierre-demo-s2 .impera-s2-result>div:first-child{
    align-items:center;
    display:flex;
    gap:9px;
}
.impera-cierre-demo-s2 .impera-s2-result p{
    color:var(--demo-muted,#8d93a7);
    font-size:11px;
    margin:2px 0 0;
}
.impera-cierre-demo-s2 .impera-s2-ok{
    align-items:center;
    background:rgba(57,190,137,.12);
    border-radius:50%;
    color:#54d79f;
    display:flex;
    height:32px;
    justify-content:center;
    width:32px;
}
.impera-cierre-demo-s2 .impera-s2-result dl{
    display:grid;
    gap:7px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin:12px 0 0;
}
.impera-cierre-demo-s2 .impera-s2-result dl>div{
    border-top:1px solid rgba(255,255,255,.06);
    display:grid;
    gap:2px;
    padding-top:7px;
}
.impera-cierre-demo-s2 .impera-s2-result dt{
    color:var(--demo-muted,#8d93a7);
    font-size:9px;
    text-transform:uppercase;
}
.impera-cierre-demo-s2 .impera-s2-result dd{
    font-size:12px;
    font-weight:700;
    margin:0;
}
.impera-cierre-demo-s2 .impera-s2-quick-modal>footer{
    border-top:1px solid var(--demo-border,#2b2e3a);
    display:flex;
    gap:8px;
    justify-content:flex-end;
    padding:13px 17px;
}
.impera-cierre-demo-s2 .impera-s2-confirm:disabled{
    cursor:not-allowed;
    opacity:.45;
}
.impera-cierre-demo-s2 .impera-s2-toast{
    background:var(--demo-panel,#151824);
    border:1px solid var(--demo-border,#303448);
    border-left:3px solid #7b67ff;
    border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    color:var(--demo-text,#f5f6fb);
    margin-top:8px;
    max-width:420px;
    padding:12px 14px;
}

@media(max-width:800px){
    .impera-cierre-demo-s2 .impera-s2-primary-actions,
    .impera-cierre-demo-s2 .impera-s2-secondary{
        grid-template-columns:1fr;
    }
    .impera-cierre-demo-s2 .impera-s2-instruction{
        align-items:flex-start;
        grid-template-columns:auto 1fr;
    }
    .impera-cierre-demo-s2 .impera-s2-instruction-actions{
        grid-column:1/-1;
        justify-content:flex-start;
    }
}
@media(max-width:560px){
    .impera-cierre-demo-s2 .impera-s2-guard-title{
        flex-direction:column;
    }
    .impera-cierre-demo-s2 .impera-s2-action{
        min-height:94px;
        padding:14px;
    }
    .impera-cierre-demo-s2 .impera-s2-action strong{
        font-size:19px;
    }
    .impera-cierre-demo-s2 .impera-s2-search-row,
    .impera-cierre-demo-s2 .impera-s2-result dl{
        grid-template-columns:1fr;
    }
}
/* IMPERA_CIERRE_DEMO_S2_END */

/* IMPERA_CIERRE_DEMO_S21_START */
.impera-cierre-demo-s21 .impera-s21-main-scanner{
    align-items:center;background:linear-gradient(135deg,rgba(102,82,238,.18),rgba(66,160,205,.08));
    border:1px solid rgba(111,92,245,.32);border-radius:16px;color:inherit;cursor:pointer;display:grid;
    gap:14px;grid-template-columns:auto 1fr auto;min-height:126px;padding:18px 20px;text-align:left;width:100%
}
.impera-cierre-demo-s21 .impera-s21-main-scanner:hover{border-color:rgba(111,92,245,.52);transform:translateY(-1px)}
.impera-cierre-demo-s21 .impera-s21-scanner-icon{align-items:center;background:rgba(117,97,255,.12);border:1px solid rgba(117,97,255,.22);border-radius:15px;display:flex;height:58px;justify-content:center;width:58px}
.impera-cierre-demo-s21 .impera-s21-scanner-icon svg{fill:#7764ff;height:30px;width:30px}
.impera-cierre-demo-s21 .impera-s21-scanner-copy{display:grid;gap:4px}
.impera-cierre-demo-s21 .impera-s21-scanner-copy>small{color:#806fff;font-size:9px;font-weight:900;letter-spacing:.12em}
.impera-cierre-demo-s21 .impera-s21-scanner-copy>strong{font-size:23px}
.impera-cierre-demo-s21 .impera-s21-scanner-copy>span{color:var(--demo-muted,#8d93a7);font-size:11px}
.impera-cierre-demo-s21 .impera-s21-scanner-arrow{font-size:26px}

.impera-cierre-demo-s21 .impera-s21-legacy-scan-hidden{display:none!important}
.impera-cierre-demo-s21 .impera-s21-scan-workspace{display:grid;gap:12px;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);margin-top:12px}
.impera-cierre-demo-s21 .impera-s21-scan-card,.impera-cierre-demo-s21 .impera-s21-manual-card{background:var(--demo-panel,#12141c);border:1px solid var(--demo-border,#2b2e3a);border-radius:14px;padding:14px}
.impera-cierre-demo-s21 .impera-s21-scan-card>header,.impera-cierre-demo-s21 .impera-s21-manual-card>header{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;margin-bottom:12px}
.impera-cierre-demo-s21 .impera-s21-scan-card header span:first-child,.impera-cierre-demo-s21 .impera-s21-manual-card header span:first-child{color:#8170ff;font-size:9px;font-weight:900;letter-spacing:.12em}
.impera-cierre-demo-s21 .impera-s21-scan-card h2,.impera-cierre-demo-s21 .impera-s21-manual-card h2{font-size:17px;margin:3px 0}
.impera-cierre-demo-s21 .impera-s21-scan-card header p,.impera-cierre-demo-s21 .impera-s21-manual-card header p{color:var(--demo-muted,#8d93a7);font-size:11px;margin:0}
.impera-cierre-demo-s21 .impera-s21-auto{background:rgba(53,192,135,.08);border:1px solid rgba(53,192,135,.20);border-radius:999px;color:#4fd49d;flex:0 0 auto;font-size:9px;font-weight:800;padding:5px 7px}
.impera-cierre-demo-s21 .impera-s21-camera{align-items:center;background:rgba(117,97,255,.035);border:1px dashed rgba(117,97,255,.28);border-radius:13px;display:flex;justify-content:center;min-height:280px;overflow:hidden;position:relative}
.impera-cierre-demo-s21 .impera-s21-camera video{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}
.impera-cierre-demo-s21 .impera-s21-camera-placeholder{align-items:center;display:flex;flex-direction:column;max-width:330px;padding:22px;text-align:center}
.impera-cierre-demo-s21 .impera-s21-camera-placeholder svg{fill:#7965ff;height:52px;margin-bottom:12px;width:52px}
.impera-cierre-demo-s21 .impera-s21-camera-placeholder p{color:var(--demo-muted,#8d93a7);font-size:11px;line-height:1.45;margin:5px 0 0}
.impera-cierre-demo-s21 .impera-s21-scan-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.impera-cierre-demo-s21 .impera-s21-manual-search{display:grid;gap:5px;margin-bottom:9px}
.impera-cierre-demo-s21 .impera-s21-manual-search>span{color:var(--demo-muted,#8d93a7);font-size:10px}
.impera-cierre-demo-s21 .impera-s21-manual-help{background:rgba(117,97,255,.045);border-left:3px solid #7763ff;border-radius:9px;margin-top:12px;padding:10px 11px}
.impera-cierre-demo-s21 .impera-s21-manual-help p{color:var(--demo-muted,#8d93a7);font-size:11px;line-height:1.45;margin:3px 0 0}
.impera-cierre-demo-s21 .impera-s21-access-result{background:rgba(52,191,137,.045);border:1px solid rgba(52,191,137,.20);border-radius:11px;margin-top:12px;padding:11px}
.impera-cierre-demo-s21 .impera-s21-result-head{align-items:center;display:flex;gap:9px}
.impera-cierre-demo-s21 .impera-s21-result-head p{color:var(--demo-muted,#8d93a7);font-size:10px;margin:2px 0 0}
.impera-cierre-demo-s21 .impera-s21-result-ok{align-items:center;background:rgba(52,191,137,.11);border-radius:50%;color:#50d59e;display:flex;height:32px;justify-content:center;width:32px}
.impera-cierre-demo-s21 .impera-s21-access-result dl{display:grid;gap:7px;grid-template-columns:repeat(2,minmax(0,1fr));margin:11px 0}
.impera-cierre-demo-s21 .impera-s21-access-result dl>div{border-top:1px solid rgba(255,255,255,.06);display:grid;gap:2px;padding-top:7px}
.impera-cierre-demo-s21 .impera-s21-access-result dt{color:var(--demo-muted,#8d93a7);font-size:8px;text-transform:uppercase}
.impera-cierre-demo-s21 .impera-s21-access-result dd{font-size:11px;font-weight:700;margin:0}

.impera-cierre-demo-s21 .impera-s21-hotel-banner{align-items:center;background:linear-gradient(135deg,rgba(117,97,255,.08),rgba(45,151,183,.035));border:1px solid rgba(117,97,255,.20);border-radius:13px;display:flex;gap:14px;justify-content:space-between;margin-top:12px;padding:12px 14px}
.impera-cierre-demo-s21 .impera-s21-hotel-banner>div:first-child{display:grid;gap:3px}
.impera-cierre-demo-s21 .impera-s21-hotel-banner>div:first-child>span{color:#8170ff;font-size:9px;font-weight:900;letter-spacing:.11em}
.impera-cierre-demo-s21 .impera-s21-hotel-banner p{color:var(--demo-muted,#8d93a7);font-size:10px;margin:0}
.impera-cierre-demo-s21 .impera-s21-hotel-modules{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.impera-cierre-demo-s21 .impera-s21-hotel-modules span{background:rgba(53,192,135,.07);border:1px solid rgba(53,192,135,.16);border-radius:999px;color:#4fd49d;font-size:9px;font-weight:700;padding:5px 7px}
.impera-cierre-demo-s21 .impera-s21-hotel-overview{display:grid;gap:11px;margin-top:12px}
.impera-cierre-demo-s21 .impera-s21-hotel-head{align-items:flex-start;display:flex;justify-content:space-between;gap:12px}
.impera-cierre-demo-s21 .impera-s21-hotel-head>div>span{color:#8170ff;font-size:9px;font-weight:900;letter-spacing:.11em}
.impera-cierre-demo-s21 .impera-s21-hotel-head h2{font-size:20px;margin:3px 0}
.impera-cierre-demo-s21 .impera-s21-hotel-head p{color:var(--demo-muted,#8d93a7);margin:0}
.impera-cierre-demo-s21 .impera-s21-hotel-status{background:rgba(53,192,135,.08);border:1px solid rgba(53,192,135,.18);border-radius:999px;color:#4fd49d;font-size:9px;font-weight:800;padding:6px 8px}
.impera-cierre-demo-s21 .impera-s21-hotel-kpis{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.impera-cierre-demo-s21 .impera-s21-hotel-kpis article{background:var(--demo-panel,#12141c);border:1px solid var(--demo-border,#2b2e3a);border-radius:11px;display:grid;gap:2px;padding:11px}
.impera-cierre-demo-s21 .impera-s21-hotel-kpis strong{font-size:21px}
.impera-cierre-demo-s21 .impera-s21-hotel-kpis span{font-size:10px;font-weight:700}
.impera-cierre-demo-s21 .impera-s21-hotel-kpis small{color:var(--demo-muted,#8d93a7);font-size:9px}
.impera-cierre-demo-s21 .impera-s21-hotel-grid{display:grid;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}
.impera-cierre-demo-s21 .impera-s21-hotel-grid>section{background:var(--demo-panel,#12141c);border:1px solid var(--demo-border,#2b2e3a);border-radius:12px;overflow:hidden}
.impera-cierre-demo-s21 .impera-s21-hotel-grid>section>header{border-bottom:1px solid var(--demo-border,#2b2e3a);padding:10px 11px}
.impera-cierre-demo-s21 .impera-s21-hotel-grid header div{display:grid;gap:2px}
.impera-cierre-demo-s21 .impera-s21-hotel-grid header small{color:var(--demo-muted,#8d93a7);font-size:9px}
.impera-cierre-demo-s21 .impera-s21-hotel-list>div{border-bottom:1px solid var(--demo-border,#2b2e3a);display:grid;font-size:10px;gap:3px;grid-template-columns:1fr 1fr auto;padding:9px 11px}
.impera-cierre-demo-s21 .impera-s21-hotel-list>div:last-child{border-bottom:0}
.impera-cierre-demo-s21 .impera-s21-hotel-list span{color:var(--demo-muted,#8d93a7)}
.impera-cierre-demo-s21 .impera-s21-hotel-list em{color:#d9a54d;font-style:normal}
.impera-cierre-demo-s21 .impera-s21-hotel-instructions{display:grid;gap:7px;padding:9px}
.impera-cierre-demo-s21 .impera-s21-hotel-instructions article{align-items:flex-start;background:rgba(245,177,72,.04);border:1px solid rgba(245,177,72,.15);border-radius:9px;display:grid;gap:9px;grid-template-columns:auto 1fr;padding:9px}
.impera-cierre-demo-s21 .impera-s21-hotel-instructions article>span{background:rgba(245,177,72,.10);border-radius:8px;color:#f2b45b;font-size:10px;font-weight:900;padding:5px 6px}
.impera-cierre-demo-s21 .impera-s21-hotel-instructions p{color:var(--demo-muted,#8d93a7);font-size:9px;line-height:1.4;margin:3px 0 0}
.impera-cierre-demo-s21 .impera-s21-toast{background:var(--demo-panel,#151824);border:1px solid var(--demo-border,#303448);border-left:3px solid #7b67ff;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35);color:var(--demo-text,#f5f6fb);margin-top:8px;max-width:420px;padding:12px 14px}

@media(max-width:980px){
    .impera-cierre-demo-s21 .impera-s21-scan-workspace,.impera-cierre-demo-s21 .impera-s21-hotel-grid{grid-template-columns:1fr}
    .impera-cierre-demo-s21 .impera-s21-hotel-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .impera-cierre-demo-s21 .impera-s21-main-scanner{grid-template-columns:auto 1fr}
    .impera-cierre-demo-s21 .impera-s21-scanner-arrow{display:none}
    .impera-cierre-demo-s21 .impera-s21-scanner-copy>strong{font-size:19px}
    .impera-cierre-demo-s21 .impera-s21-camera{min-height:230px}
    .impera-cierre-demo-s21 .impera-s21-access-result dl,.impera-cierre-demo-s21 .impera-s21-hotel-kpis{grid-template-columns:1fr}
    .impera-cierre-demo-s21 .impera-s21-hotel-banner,.impera-cierre-demo-s21 .impera-s21-hotel-head{align-items:flex-start;flex-direction:column}
    .impera-cierre-demo-s21 .impera-s21-hotel-modules{justify-content:flex-start}
    .impera-cierre-demo-s21 .impera-s21-hotel-list>div{grid-template-columns:1fr}
}
/* IMPERA_CIERRE_DEMO_S21_END */

/* IMPERA_CIERRE_DEMO_S23_START */
.impera-cierre-demo-s23 .impera-s23-legacy-wrapper-hidden{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
}
.impera-cierre-demo-s23 .impera-s21-scan-workspace{
    margin-bottom:0!important;
}
/* IMPERA_CIERRE_DEMO_S23_END */

/* IMPERA_CIERRE_DEMO_S24_START */

.impera-cierre-demo-s24 .impera-s24-server-artifact{
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
}

.impera-cierre-demo-s24 .impera-s24-evidence{
    border-top:1px solid rgba(255,255,255,.07);
    margin-top:12px;
    padding-top:12px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-head{
    align-items:flex-start;
    display:flex;
    gap:12px;
    justify-content:space-between;
    margin-bottom:10px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-head>div{
    display:grid;
    gap:3px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-head>div>span{
    color:#8b79ff;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.impera-cierre-demo-s24 .impera-s24-evidence-head h3{
    font-size:13px;
    margin:0;
}

.impera-cierre-demo-s24 .impera-s24-evidence-head p{
    color:var(--demo-muted,#8d93a7);
    font-size:9px;
    line-height:1.4;
    margin:0;
}

.impera-cierre-demo-s24 .impera-s24-policy-badge{
    background:rgba(117,97,255,.09);
    border:1px solid rgba(117,97,255,.22);
    border-radius:999px;
    color:#9a8dff;
    flex:0 0 auto;
    font-size:8px;
    font-weight:800;
    padding:5px 7px;
}

.impera-cierre-demo-s24 .impera-s24-policy-summary{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}

.impera-cierre-demo-s24 .impera-s24-policy-summary span{
    background:rgba(255,255,255,.025);
    border:1px solid var(--demo-border,#2b2e3a);
    border-radius:8px;
    color:var(--demo-muted,#8d93a7);
    font-size:8px;
    padding:5px 7px;
}

.impera-cierre-demo-s24 .impera-s24-policy-summary b{
    color:var(--demo-text,#f4f5fa);
}

.impera-cierre-demo-s24 .impera-s24-evidence-grid{
    display:grid;
    gap:8px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.impera-cierre-demo-s24 .impera-s24-evidence-tile{
    background:rgba(255,255,255,.018);
    border:1px solid var(--demo-border,#2b2e3a);
    border-radius:10px;
    padding:9px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-title{
    align-items:flex-start;
    display:flex;
    gap:8px;
    justify-content:space-between;
}

.impera-cierre-demo-s24 .impera-s24-evidence-title>div{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-title strong{
    font-size:10px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-title span{
    background:rgba(242,177,82,.10);
    border-radius:999px;
    color:#f1b45c;
    font-size:7px;
    font-weight:800;
    padding:3px 5px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-title em{
    color:var(--demo-muted,#8d93a7);
    font-size:8px;
    font-style:normal;
}

.impera-cierre-demo-s24 .impera-s24-evidence-title em.is-done{
    color:#54d79f;
}

.impera-cierre-demo-s24 .impera-s24-evidence-tile>p{
    color:var(--demo-muted,#8d93a7);
    font-size:8px;
    line-height:1.4;
    margin:5px 0 8px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-preview{
    align-items:center;
    background:rgba(117,97,255,.035);
    border:1px dashed rgba(117,97,255,.20);
    border-radius:8px;
    display:flex;
    justify-content:center;
    min-height:92px;
    overflow:hidden;
}

.impera-cierre-demo-s24 .impera-s24-evidence-preview img{
    height:92px;
    object-fit:cover;
    width:100%;
}

.impera-cierre-demo-s24 .impera-s24-evidence-preview div{
    color:var(--demo-muted,#8d93a7);
    font-size:8px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-actions{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:7px;
}

.impera-cierre-demo-s24 .impera-s24-evidence-tile>small{
    color:var(--demo-muted,#8d93a7);
    display:block;
    font-size:7px;
    line-height:1.35;
    margin-top:6px;
}

.impera-cierre-demo-s24 .impera-s24-privacy-note{
    background:rgba(117,97,255,.045);
    border-left:3px solid #7763ff;
    border-radius:8px;
    margin-top:9px;
    padding:8px 9px;
}

.impera-cierre-demo-s24 .impera-s24-privacy-note strong{
    font-size:9px;
}

.impera-cierre-demo-s24 .impera-s24-privacy-note p{
    color:var(--demo-muted,#8d93a7);
    font-size:8px;
    line-height:1.4;
    margin:3px 0 0;
}

.impera-cierre-demo-s24 .impera-s24-register-locked{
    cursor:not-allowed!important;
    opacity:.45!important;
}

.impera-cierre-demo-s24 .impera-s24-toast{
    background:var(--demo-panel,#151824);
    border:1px solid var(--demo-border,#303448);
    border-left:3px solid #7b67ff;
    border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    color:var(--demo-text,#f5f6fb);
    margin-top:8px;
    max-width:420px;
    padding:12px 14px;
}

@media(max-width:760px){
    .impera-cierre-demo-s24 .impera-s24-evidence-grid{
        grid-template-columns:1fr;
    }

    .impera-cierre-demo-s24 .impera-s24-evidence-head{
        flex-direction:column;
    }
}

/* IMPERA_CIERRE_DEMO_S24_END */