.hhd-active-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hhd-space-4);
    width: 100%;
    min-width: 0;
}

.hhd-active-context-primary { min-width: 0; }
.hhd-active-context-brandline { display: flex; align-items: center; gap: var(--hhd-space-2); margin-bottom: .3rem; }
.hhd-context-type,
.hhd-context-warning {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hhd-accent) 12%, var(--hhd-surface-panel));
    color: var(--hhd-accent-strong);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hhd-context-warning { background: color-mix(in srgb, var(--hhd-warning) 12%, var(--hhd-surface-panel)); color: var(--hhd-warning); }

.hhd-active-context-values { display: flex; align-items: center; gap: var(--hhd-space-5); min-width: 0; }
.hhd-active-context-values > div { display: grid; min-width: 0; }
.hhd-active-context-values span { color: var(--hhd-text-secondary); font-size: .68rem; }
.hhd-active-context-values strong { overflow: hidden; max-width: 15rem; color: var(--hhd-text-primary); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }

.hhd-active-context-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--hhd-space-2); flex-wrap: wrap; }
.hhd-context-user {
    display: grid;
    min-width: 0;
    max-width: 14rem;
    padding: .35rem .55rem;
    border-left: 1px solid var(--hhd-border);
}
.hhd-context-user span { color: var(--hhd-text-secondary); font-size: .64rem; }
.hhd-context-user strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.hhd-context-action-link {
    display: inline-flex;
    align-items: center;
    gap: var(--hhd-space-2);
    min-height: 2.4rem;
    padding: .45rem .72rem;
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-sm);
    color: var(--hhd-text-primary);
    background: var(--hhd-surface-panel);
    text-decoration: none;
    font-size: .78rem;
}
.hhd-context-action-link:hover { border-color: var(--hhd-accent); }
.hhd-context-action-button.e-btn { min-height: 2.4rem; border-color: var(--hhd-border); color: var(--hhd-text-primary); }

.hhd-context-technical-details { position: relative; }
.hhd-context-technical-details > summary {
    cursor: pointer;
    padding: .48rem .65rem;
    color: var(--hhd-text-secondary);
    font-size: .74rem;
}
.hhd-context-technical-details[open] dl {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 1200;
    width: min(28rem, 82vw);
    margin: 0;
    padding: var(--hhd-space-4);
    background: var(--hhd-surface-panel);
    border: 1px solid var(--hhd-border);
    border-radius: var(--hhd-radius-md);
    box-shadow: var(--hhd-shadow-md);
}
.hhd-context-technical-details dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--hhd-space-3); padding: .35rem 0; border-bottom: 1px solid var(--hhd-border); }
.hhd-context-technical-details dl > div:last-child { border-bottom: 0; }
.hhd-context-technical-details dt { color: var(--hhd-text-secondary); font-size: .72rem; }
.hhd-context-technical-details dd { overflow-wrap: anywhere; margin: 0; font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.hhd-workspace-state {
    display: grid;
    gap: var(--hhd-space-3);
    width: min(48rem, calc(100% - 2rem));
    margin: 10vh auto;
    padding: var(--hhd-space-8);
    background: var(--hhd-surface-panel);
    border: 1px solid var(--hhd-border);
    border-left: .35rem solid var(--hhd-accent);
    border-radius: var(--hhd-radius-lg);
    box-shadow: var(--hhd-shadow-md);
    color: var(--hhd-text-primary);
}
.hhd-workspace-state-deny { border-left-color: var(--hhd-danger); }
.hhd-workspace-state-loading { border-left-color: var(--hhd-warning); }
.hhd-workspace-eyebrow { margin: 0; color: var(--hhd-text-secondary); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hhd-workspace-state h1 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.hhd-workspace-state p { margin: 0; color: var(--hhd-text-secondary); }
.hhd-workspace-state-detail { padding: var(--hhd-space-3); border-radius: var(--hhd-radius-sm); background: var(--hhd-surface-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; overflow-wrap: anywhere; }
.hhd-workspace-state-extra { display: grid; gap: var(--hhd-space-3); }
.hhd-workspace-state-actions { display: flex; flex-wrap: wrap; gap: var(--hhd-space-2); margin-top: var(--hhd-space-2); }
.hhd-workspace-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: .55rem .9rem; border-radius: var(--hhd-radius-sm); background: var(--hhd-accent); color: #fff; text-decoration: none; font-weight: 700; }
.hhd-workspace-button.secondary { background: var(--hhd-surface-muted); color: var(--hhd-text-primary); border: 1px solid var(--hhd-border); }

.hhd-workspace-content > .hhd-foundation-hero-card:first-child { margin-top: 0; }
.hhd-workspace-content .hhd-foundation-hero-card,
.hhd-workspace-content .hhd-foundation-card {
    border-color: var(--hhd-border);
    box-shadow: var(--hhd-shadow-sm);
}

.hhd-active-role-context { min-width: 10rem; }
.hhd-active-role-selector.e-control-wrapper { min-width: 11rem; }
.hhd-active-context-error {
    flex: 1 0 100%;
    margin: 0;
    padding: .4rem .65rem;
    border-radius: var(--hhd-radius-sm);
    background: color-mix(in srgb, var(--hhd-danger) 10%, var(--hhd-surface-panel));
    color: var(--hhd-danger);
    font-size: .72rem;
}

/* HHD-UI-04-FIX07 — patrón canónico para colecciones acotadas. */
.hhd-bounded-collection {
    max-height:min(62vh,38rem);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}