/* ============================================================================
   NovaHost — Support components v2 (F20.2)
   ============================================================================
   15 componentes canónicos compartidos entre nova (cliente) y admin_nova
   (admin). Reemplazan progresivamente el split .sa-* (admin) vs .nv-tkt-*
   (cliente). Naming: .nv-{component} base + .nv-{component}--{variant}.

   Depende de: _design-tokens.css (cargado antes).
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════════
   1. Shell / pane primitives — Layout 3-pane unificado
   ════════════════════════════════════════════════════════════════════════════ */

.nv-shell {
    position: relative;
    display: flex;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 0;
}
.nv-shell--cockpit {
    height: calc(100vh - 180px);
    min-height: 640px;
}
.nv-shell--detail {
    height: calc(100vh - 140px);
    min-height: 600px;
}

.nv-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.nv-pane--nav {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg-page);
    transition: width var(--duration-base) var(--ease-out);
}
.nv-pane--nav.is-collapsed {
    width: 0;
    border-right: none;
    overflow: hidden;
}
.nv-pane--list {
    flex: 1;
    border-right: 1px solid var(--color-border);
    min-width: 320px;
}
.nv-pane--detail {
    width: 480px;
    flex-shrink: 0;
    background: var(--color-bg-surface);
    transition: width var(--duration-base) var(--ease-out);
}
.nv-pane--detail.is-collapsed { width: 0; overflow: hidden; }

.nv-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-bg-surface);
}
.nv-pane__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-pane__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.nv-pane__foot {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-page);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Hook flotante para reabrir pane colapsado */
.nv-pane__hook {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 56px;
    padding: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    cursor: pointer;
    z-index: var(--z-base);
    box-shadow: var(--shadow-xs);
    transition: width var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.nv-pane__hook--left  { left: 0;  border-left: none;  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.nv-pane__hook--right { right: 0; border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.nv-pane__hook:hover {
    width: 28px;
    background: var(--color-primary);
    color: var(--color-text-on-dark);
}
.nv-pane__hook:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}


/* ════════════════════════════════════════════════════════════════════════════
   2. Toolbar — Top bar de página
   ════════════════════════════════════════════════════════════════════════════ */

.nv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.nv-toolbar__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}
.nv-toolbar__title svg { color: var(--color-primary); flex: 0 0 auto; }
.nv-toolbar__title h1 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    letter-spacing: var(--letter-spacing-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nv-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. Buttons — .nv-btn + variants
   ════════════════════════════════════════════════════════════════════════════ */

.nv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.55rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
}
.nv-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.nv-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}
.nv-btn--sm { padding: 0.35rem 0.65rem; font-size: var(--font-size-xs); }
.nv-btn--lg { padding: 0.75rem 1.4rem; font-size: var(--font-size-base); }

.nv-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
}
.nv-btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-cyan-glow);
}
.nv-btn--primary:active {
    transform: translateY(0);
    background: var(--color-primary-active);
}

.nv-btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.nv-btn--ghost:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.nv-btn--danger {
    background: var(--color-bg-surface);
    color: var(--color-danger);
    border-color: var(--color-danger-soft);
}
.nv-btn--danger:hover {
    background: var(--color-danger);
    color: var(--color-text-on-dark);
    border-color: var(--color-danger);
}

.nv-btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--color-text-soft);
}
.nv-btn--icon:hover {
    background: var(--color-bg-subtle);
    color: var(--color-primary);
}

.nv-btn--link {
    background: transparent;
    color: var(--color-text-link);
    padding: 0.25rem 0.5rem;
    border: none;
}
.nv-btn--link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. Cards — .nv-card + variants
   ════════════════════════════════════════════════════════════════════════════ */

.nv-card {
    display: block;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: var(--transition-base);
}
.nv-card--hover:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.nv-card--ticket {
    display: flex;
    gap: var(--space-3);
    cursor: pointer;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--color-border-soft);
    padding: var(--space-4) var(--space-4);
    position: relative;
}
.nv-card--ticket:hover { background: var(--color-primary-soft); }
.nv-card--ticket.is-active {
    background: var(--color-primary-soft);
    border-left: 3px solid var(--color-primary);
    padding-left: calc(var(--space-4) - 3px);
}
.nv-card--ticket.priority-urgent::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-danger);
}
.nv-card--ticket.priority-high::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-warning);
}

.nv-card--message {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.nv-card--message__bubble {
    flex: 1;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}
.nv-card--message.is-staff .nv-card--message__bubble {
    background: var(--color-primary-soft);
}

.nv-card--kpi {
    text-align: left;
    padding: var(--space-3) var(--space-4);
}
.nv-card--kpi__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}
.nv-card--kpi__value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
    margin-top: var(--space-1);
}


/* ════════════════════════════════════════════════════════════════════════════
   5. Badges — .nv-badge + variants (status, priority, SLA)
   ════════════════════════════════════════════════════════════════════════════ */

.nv-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem 0.55rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-text-soft);
    white-space: nowrap;
}
.nv-badge--pill { border-radius: var(--radius-pill); }

/* Status */
.nv-badge--status-open      { background: var(--color-primary-soft); color: var(--color-primary-text); }
.nv-badge--status-on_hold   { background: var(--color-warning-soft); color: var(--color-warning-text); }
.nv-badge--status-on_staff  { background: var(--color-warning-soft); color: var(--color-warning-text); }
.nv-badge--status-on_client { background: var(--color-info-soft);    color: var(--color-info); }
.nv-badge--status-closed    { background: var(--color-bg-muted);     color: var(--color-text-soft); }

/* Priority */
.nv-badge--priority-urgent { background: var(--nv-red-100);   color: var(--nv-red-700); }
.nv-badge--priority-high   { background: var(--nv-amber-100); color: var(--nv-amber-700); }
.nv-badge--priority-normal { background: var(--color-primary-soft); color: var(--color-primary-text); }
.nv-badge--priority-low    { background: var(--color-bg-muted);     color: var(--color-text-soft); }

/* SLA */
.nv-badge--sla-ok        { background: var(--color-success-soft); color: var(--color-success); }
.nv-badge--sla-soon      { background: var(--color-warning-soft); color: var(--color-warning); }
.nv-badge--sla-overdue   { background: var(--nv-red-100); color: var(--nv-red-700); }
.nv-badge--sla-responded { background: var(--color-bg-subtle); color: var(--color-text-soft); }

/* Dot variant — solo color, no fondo */
.nv-badge--dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. Avatars — .nv-avatar con color saturado por hash
   ════════════════════════════════════════════════════════════════════════════ */

.nv-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-soft);
    border: 2px solid transparent;
    box-sizing: border-box;
    position: relative;
}
/* F23 — fallback de iniciales cuando no hay background-image */
.nv-avatar[data-initials]:not([style*="background-image"])::before {
    content: attr(data-initials);
}
.nv-avatar--sm { width: 28px; height: 28px; font-size: var(--font-size-xs); }
.nv-avatar--lg { width: 48px; height: 48px; font-size: var(--font-size-base); }
.nv-avatar--xl { width: 64px; height: 64px; font-size: var(--font-size-lg); }

/* Color rings por hash (8 tonos) */
.nv-avatar[data-color-idx="1"] { border-color: var(--nv-cyan-500);  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15); }
.nv-avatar[data-color-idx="2"] { border-color: var(--nv-amber-500); box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15); }
.nv-avatar[data-color-idx="3"] { border-color: #db2777;             box-shadow: 0 0 0 2px rgba(219, 39, 119, 0.15); }
.nv-avatar[data-color-idx="4"] { border-color: #7c3aed;             box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15); }
.nv-avatar[data-color-idx="5"] { border-color: #16a34a;             box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15); }
.nv-avatar[data-color-idx="6"] { border-color: #ea580c;             box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15); }
.nv-avatar[data-color-idx="7"] { border-color: #2563eb;             box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.nv-avatar[data-color-idx="8"] { border-color: #0d9488;             box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15); }


/* ════════════════════════════════════════════════════════════════════════════
   7. Inputs — .nv-input + variants
   ════════════════════════════════════════════════════════════════════════════ */

.nv-input,
.nv-textarea,
.nv-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.nv-input:focus,
.nv-textarea:focus,
.nv-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.nv-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: var(--line-height-base);
}
.nv-input::placeholder,
.nv-textarea::placeholder {
    color: var(--color-text-muted);
}


/* ════════════════════════════════════════════════════════════════════════════
   8. Tabs — .nv-tabs unificado
   ════════════════════════════════════════════════════════════════════════════ */

.nv-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: thin;
}
.nv-tabs::-webkit-scrollbar { height: 3px; }
.nv-tabs::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.nv-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: transparent;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}
.nv-tab:hover { color: var(--color-text); }
.nv-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}
.nv-tab__count {
    background: var(--color-bg-subtle);
    color: var(--color-text-soft);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}
.nv-tab.is-active .nv-tab__count {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
}


/* ════════════════════════════════════════════════════════════════════════════
   9. Empty states — .nv-empty
   ════════════════════════════════════════════════════════════════════════════ */

.nv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
    gap: var(--space-3);
}
.nv-empty__art {
    width: 96px;
    height: 96px;
    color: var(--color-primary);
    opacity: 0.65;
}
.nv-empty__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
}
.nv-empty__msg {
    margin: 0;
    max-width: 38ch;
    line-height: var(--line-height-base);
    text-wrap: pretty;
}


/* ════════════════════════════════════════════════════════════════════════════
   10. Skeleton loaders — .nv-skeleton
   ════════════════════════════════════════════════════════════════════════════ */

.nv-skeleton {
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}
.nv-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
    animation: nv-skeleton-shimmer 1.4s ease-in-out infinite;
    transform: translateX(-100%);
}
@keyframes nv-skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.nv-skeleton--line   { height: 0.875rem; margin-bottom: var(--space-2); }
.nv-skeleton--title  { height: 1.4rem; width: 55%; margin-bottom: var(--space-3); }
.nv-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }


/* ════════════════════════════════════════════════════════════════════════════
   11. Modals — .nv-modal (wrapper sobre Bootstrap)
   ════════════════════════════════════════════════════════════════════════════ */

.nv-modal__panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
}
.nv-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.nv-modal__head h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}
.nv-modal__body { color: var(--color-text); }
.nv-modal__foot {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}


/* ════════════════════════════════════════════════════════════════════════════
   12. Nav sections — .nv-nav-section (collapsible <details>)
   ════════════════════════════════════════════════════════════════════════════ */

.nv-nav-section { margin: 0; }
.nv-nav-section + .nv-nav-section { margin-top: var(--space-1); }

.nv-nav-section__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.nv-nav-section__title::-webkit-details-marker { display: none; }
.nv-nav-section__title::marker { content: ''; }
.nv-nav-section__title:hover { color: var(--color-text); }
.nv-nav-section__chevron {
    transition: transform var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
    opacity: 0.55;
}
.nv-nav-section[open] .nv-nav-section__chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.nv-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.55rem var(--space-4) 0.55rem 0.85rem;
    color: var(--color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}
.nv-nav-link:hover {
    background: var(--color-primary-soft);
    color: var(--color-text);
}
.nv-nav-link.is-active {
    background: var(--color-primary-soft);
    border-left-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}
.nv-nav-link__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nv-nav-link__count {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    color: var(--color-text-soft);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: center;
}
.nv-nav-link.is-active .nv-nav-link__count {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
}
.nv-nav-link__count--danger { background: var(--color-danger); color: var(--color-text-on-dark); }


/* ════════════════════════════════════════════════════════════════════════════
   13. Cmd+K palette — .nv-cmdk
   ════════════════════════════════════════════════════════════════════════════ */

.nv-cmdk {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: nv-cmdk-fade var(--duration-base) var(--ease-out);
}
@keyframes nv-cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.nv-cmdk__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.nv-cmdk__panel {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: nv-cmdk-slide var(--duration-base) var(--ease-spring);
}
@keyframes nv-cmdk-slide {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ════════════════════════════════════════════════════════════════════════════
   14. Hero — .nv-hero (replaces _nha_hero include)
   ════════════════════════════════════════════════════════════════════════════ */

.nv-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-page) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-xs);
}
.nv-hero__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--nv-cyan-400));
    color: var(--color-text-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-cyan-glow);
}
.nv-hero__body { flex: 1; min-width: 0; }
.nv-hero__title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    letter-spacing: var(--letter-spacing-snug);
}
.nv-hero__subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}


/* ════════════════════════════════════════════════════════════════════════════
   15. Visual signature — Service strip + SLA halo (F20 visual signature)
   ════════════════════════════════════════════════════════════════════════════ */

/* Service strip — diferenciador NovaHost: pills monospace bajo el ticket
   header mostrando hostname, dominio, plan, server node. */
.nv-service-strip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--signature-service-strip-bg);
    border-left: 3px solid var(--signature-service-strip-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
}
.nv-service-strip__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem var(--space-2);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-soft);
}
.nv-service-strip__pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.nv-service-strip__pill--accent { color: var(--color-primary); border-color: var(--color-primary-soft); }

/* SLA halo — conic-gradient ring que decrece según tiempo restante */
.nv-sla-halo {
    --halo-pct: 100;          /* 0..100 */
    --halo-color: var(--signature-sla-halo-ok);
    position: relative;
    display: inline-flex;
}
.nv-sla-halo::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        var(--halo-color) calc(var(--halo-pct) * 1%),
        var(--color-border) 0
    );
    z-index: -1;
}
.nv-sla-halo--warn   { --halo-color: var(--signature-sla-halo-warn); }
.nv-sla-halo--danger { --halo-color: var(--signature-sla-halo-danger); animation: nv-sla-pulse 2s ease-in-out infinite; }
@keyframes nv-sla-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* Topo mesh — pattern para empty states + auth */
.nv-topo-bg {
    background-image:
        radial-gradient(circle at 25% 25%, var(--signature-topo-color) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, var(--signature-topo-color) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px;
    background-position: 0 0, 16px 16px;
}


/* ════════════════════════════════════════════════════════════════════════════
   F20.3 — Bridge: clases legacy .sa-*/.nv-tkt-* aliasean componentes nuevos.
   Permite migración gradual sin romper templates ni JS existentes.
   Estos extienden las reglas anteriores a más selectores.
   ════════════════════════════════════════════════════════════════════════════ */

/* Toolbar */
.sa-page-toolbar {
    /* Usa .nv-toolbar styles via duplicación selectiva — los display, padding,
       background ya vienen de las reglas .nv-toolbar arriba si se aplica también
       la clase. Si solo tiene .sa-page-toolbar, mantener compat con cockpit.css. */
}

/* Empty state — extender selector */
.sa-empty,
.sa-detail-empty,
.nv-tkt-empty-state,
.nv-tkt-empty {
    /* Estos ya tienen reglas en cockpit.css y custom-nv-support-client.css.
       No duplicamos — las reglas legacy siguen vigentes. El nuevo .nv-empty
       es para templates nuevos. */
}

/* ════════════════════════════════════════════════════════════════════════════
   Utility helpers
   ════════════════════════════════════════════════════════════════════════════ */

.nv-kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-soft);
    line-height: 1.2;
}

.nv-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: var(--color-bg-muted);
    color: var(--color-text-soft);
    font-size: 0.7rem;
    border-radius: var(--radius-pill);
    margin-right: var(--space-1);
}

.nv-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.nv-field__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-muted);
}
.nv-field__value {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}


/* ════════════════════════════════════════════════════════════════════════════
   F20.10 — Settings configuration hub
   ════════════════════════════════════════════════════════════════════════════ */

.sa-config-hub {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
}

.sa-config-section {
    margin-bottom: var(--space-7);
}

.sa-config-section__title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    letter-spacing: var(--letter-spacing-snug);
}

.sa-config-section__sub {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.sa-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.sa-config-card {
    --icon-bg: var(--color-primary-soft);
    --icon-fg: var(--color-primary);
    display: block;
    padding: var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
    position: relative;
}
.sa-config-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
}
.sa-config-card:hover .sa-config-card__cta {
    color: var(--color-primary);
}
.sa-config-card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.sa-config-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--icon-bg);
    color: var(--icon-fg);
    margin-bottom: var(--space-3);
    transition: transform var(--duration-base) var(--ease-spring);
}
.sa-config-card:hover .sa-config-card__icon {
    transform: scale(1.06) rotate(-3deg);
}

.sa-config-card__title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: var(--letter-spacing-snug);
}

.sa-config-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 var(--space-2);
    background: var(--color-bg-muted);
    color: var(--color-text-soft);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
.sa-config-card__count.has-pending {
    background: var(--color-warning);
    color: var(--color-text-on-dark);
    animation: nv-pulse 1.6s ease-in-out infinite;
}

.sa-config-card__desc {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    text-wrap: pretty;
}

.sa-config-card__cta {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-soft);
    transition: color var(--duration-fast) var(--ease-out);
}

@keyframes nv-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .sa-config-card__count.has-pending,
    .sa-config-card:hover .sa-config-card__icon { animation: none; transform: none; }
}

/* Mobile */
@media (max-width: 640px) {
    .sa-config-grid { grid-template-columns: 1fr; }
    .sa-config-section { margin-bottom: var(--space-5); }
}


/* ════════════════════════════════════════════════════════════════════════════
   F20.11 — Mobile responsive (3-pane → stack)
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet: 768-1199px — sidebar oculto, list+detail visibles */
@media (max-width: 1199px) {
    .nv-shell--cockpit,
    .sa-cockpit {
        height: calc(100vh - 140px);
    }
    .nv-pane--nav,
    .sa-pane-left {
        position: absolute;
        z-index: var(--z-drawer);
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        background: var(--color-bg-surface);
        box-shadow: var(--shadow-lg);
        transform: translateX(0);
        transition: transform var(--duration-base) var(--ease-out);
    }
    .nv-pane--nav.is-collapsed,
    .sa-pane-left.is-collapsed {
        transform: translateX(-100%);
        width: 280px; /* mantener ancho para que la transición se vea */
    }
}

/* Mobile: <768px — single-pane stack */
@media (max-width: 767px) {
    .sa-page-toolbar,
    .nv-toolbar {
        flex-wrap: wrap;
        padding: var(--space-3);
        gap: var(--space-2);
    }
    .sa-page-toolbar__title h1,
    .nv-toolbar__title h1 {
        font-size: var(--font-size-base);
    }
    .sa-page-toolbar__hint,
    .nv-kbd {
        display: none; /* hide ⌘K hint on mobile (no keyboard) */
    }

    .nv-shell--cockpit,
    .sa-cockpit {
        height: calc(100vh - 130px);
        min-height: 0;
        border-radius: var(--radius-md);
    }

    /* Detail pane: full-screen overlay sobre center cuando hay ticket */
    .nv-pane--detail,
    .sa-pane-right {
        position: absolute;
        z-index: var(--z-drawer);
        top: 0; right: 0; bottom: 0; left: 0;
        width: 100%;
        background: var(--color-bg-surface);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--duration-base) var(--ease-out);
    }
    .nv-pane--detail.is-shown,
    .sa-pane-right.is-shown,
    /* Cuando hay ticket cargado el JS quita is-hidden-mobile y muestra el panel */
    .sa-pane-right:not(.is-hidden-mobile) {
        transform: translateX(0);
    }

    /* Center pane ocupa todo el ancho cuando no hay detail abierto */
    .nv-pane--list,
    .sa-pane-center {
        flex: 1 1 100%;
        min-width: 0;
        border-right: none;
    }

    /* Sidebar nav: width 100% cuando se abre como drawer */
    .nv-pane--nav,
    .sa-pane-left {
        width: 280px;
    }

    /* Tap targets WCAG 2.5.5 AAA: mínimo 44x44 en mobile */
    .nv-btn,
    .nv-btn--icon,
    .sa-btn-icon,
    .sa-detail-actions .btn,
    .nv-tab,
    .sa-tab,
    .nv-pane-toggle,
    .sa-pane-toggle {
        min-height: 44px;
        min-width: 44px;
    }
    .nv-btn--sm,
    .btn-sm {
        min-height: 40px;
    }

    /* Detail header en mobile: más compacto */
    .sa-detail-header {
        padding: var(--space-3) var(--space-4);
    }
    .sa-detail-subject {
        font-size: var(--font-size-base);
    }
    .sa-detail-actions {
        gap: var(--space-1);
    }

    /* Composer en mobile: full-width sin tinte (foco en escribir) */
    .sa-reply-wrap {
        max-height: 50%;
        padding: var(--space-3);
    }

    /* Ticket cards en mobile */
    .sa-ticket-item,
    .nv-card--ticket {
        padding: var(--space-3) var(--space-4);
    }
    .sa-ticket-subject {
        font-size: var(--font-size-sm);
    }

    /* Empty state ajustado */
    .nv-empty,
    .sa-detail-empty {
        padding: var(--space-5) var(--space-4);
    }
    .nv-empty__art,
    .sa-empty-illustration {
        width: 80px;
        height: 80px;
    }

    /* Settings hub: padding compacto */
    .sa-config-hub {
        padding: var(--space-2);
    }
    .sa-config-section {
        margin-bottom: var(--space-5);
    }

    /* Cmd+K palette: full-screen en mobile */
    .nv-cmdk,
    .sa-cmdk {
        padding-top: 0;
        align-items: stretch;
    }
    .nv-cmdk__panel,
    .sa-cmdk__panel {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    /* Cheatsheet hint: bottom-sheet style */
    .sa-shortcuts-hint {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        padding: var(--space-4);
    }
}

/* Touch device — sin hover effects pesados */
@media (hover: none) {
    .nv-card--hover:hover,
    .sa-config-card:hover {
        transform: none;
    }
    .nv-btn:hover,
    .nv-btn--primary:hover {
        transform: none;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   F20.12 — Cmd+K type badges (action / ticket / view / config)
   ════════════════════════════════════════════════════════════════════════════ */
.sa-cmdk__type {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.05rem 0.5rem;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}
.sa-cmdk__type--ticket { background: var(--color-primary-soft); color: var(--color-primary-text); }
.sa-cmdk__type--view   { background: var(--nv-amber-100); color: var(--nv-amber-700); }
.sa-cmdk__type--config { background: var(--nv-navy-100); color: var(--nv-navy-700); }
.sa-cmdk__type--canned { background: rgba(217,119,6,0.10); color: var(--nv-amber-700); }


/* ════════════════════════════════════════════════════════════════════════════
   F23 — Mockup D híbrido: componentes nuevos
   ============================================================================
   nv-view-switcher, nv-row (compact list), nv-bubble, nv-composer-box,
   nv-note-chip, nv-notes-drawer, nv-agent-card, nv-metric.
   ============================================================================ */

/* ─── View switcher (Inbox / Board / Agentes / Reports) ─── */
.nv-view-switcher {
    display: inline-flex;
    background: var(--nv-gray-100);
    border-radius: 7px;
    padding: 2px;
    gap: 0;
}
.nv-view-switcher__btn {
    padding: 4px 12px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--nv-gray-500);
    cursor: pointer;
    transition: all 120ms;
}
.nv-view-switcher__btn:hover { color: var(--nv-navy-700); }
.nv-view-switcher__btn.is-active {
    background: var(--color-bg-surface);
    color: var(--nv-navy-700);
    box-shadow: var(--shadow-sm);
}

/* ─── Compact row (stream item, Linear-style) ─── */
.nv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--nv-gray-100);
    cursor: pointer;
    font-size: 13px;
    position: relative;
}
.nv-row:hover { background: var(--nv-page-bg); }
.nv-row.is-selected { background: rgba(8,145,178,0.05); }
.nv-row.is-selected::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 100%;
    background: var(--nv-cyan-500);
}
.nv-row__status {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.nv-row__status--new   { background: var(--nv-cyan-500); }
.nv-row__status--prog  { background: var(--nv-amber-500); }
.nv-row__status--wait  { background: var(--nv-gray-300); }
.nv-row__status--done  { background: var(--nv-green-500, #16a34a); }
.nv-row__id {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--nv-gray-500);
    min-width: 36px;
}
.nv-row__subject {
    flex: 1;
    color: var(--color-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.nv-row.is-unread .nv-row__subject { font-weight: 600; }
.nv-row__sla {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nv-gray-500);
    min-width: 50px;
    text-align: right;
}
.nv-row__sla.is-overdue { color: var(--nv-red-500, #ef4444); font-weight: 600; }

/* ─── Bubble (conversation message) ─── */
.nv-bubble {
    display: flex;
    gap: 10px;
    max-width: 92%;
}
.nv-bubble.is-staff { align-self: flex-end; flex-direction: row-reverse; }
.nv-bubble__body {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 9px 12px;
    box-shadow: var(--shadow-sm);
}
.nv-bubble.is-staff .nv-bubble__body {
    background: var(--nv-cyan-500);
    color: white;
    border-color: var(--nv-cyan-500);
}
.nv-bubble__head {
    display: flex; gap: 6px; align-items: baseline; margin-bottom: 3px;
}
.nv-bubble__name { font-size: 11.5px; font-weight: 600; }
.nv-bubble.is-staff .nv-bubble__name { color: rgba(255,255,255,0.95); }
.nv-bubble__time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nv-gray-500);
}
.nv-bubble.is-staff .nv-bubble__time { color: rgba(255,255,255,0.75); }
.nv-bubble__content { font-size: 13px; line-height: 1.5; }
.nv-bubble.is-staff .nv-bubble__content { color: white; }
.nv-thread-day {
    align-self: center;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nv-gray-500);
    font-weight: 600;
}

/* ─── Composer box (agrandado, con tabs Respuesta / Nota interna) ─── */
.nv-composer {
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
    padding: 14px 20px 16px;
    flex-shrink: 0;
    box-shadow: 0 -4px 16px rgba(15,37,64,0.04);
}
.nv-composer__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.nv-composer__tab {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--nv-gray-500);
    border: 1px solid transparent;
    background: transparent;
}
.nv-composer__tab.is-active {
    background: rgba(8,145,178,0.10);
    color: var(--nv-cyan-600);
    border-color: rgba(8,145,178,0.22);
}
.nv-composer__tab.is-active.is-internal {
    background: rgba(217,119,6,0.10);
    color: var(--nv-amber-600);
    border-color: rgba(217,119,6,0.30);
}
.nv-composer__box {
    border: 1.5px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-bg-surface);
    transition: border-color 120ms;
}
.nv-composer__box:focus-within {
    border-color: var(--nv-cyan-500);
    box-shadow: 0 0 0 3px rgba(8,145,178,0.08);
}
.nv-composer.is-internal .nv-composer__box:focus-within {
    border-color: var(--nv-amber-500);
    box-shadow: 0 0 0 3px rgba(217,119,6,0.10);
}
.nv-composer__bar {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--nv-gray-100);
}
.nv-composer__bar button {
    width: 28px; height: 28px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    color: var(--nv-gray-500);
    cursor: pointer;
    font-size: 13px;
}
.nv-composer__bar button:hover { background: var(--nv-gray-100); color: var(--nv-cyan-600); }
.nv-composer__input {
    width: 100%;
    min-height: 130px;
    padding: 12px 14px;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.55;
    background: transparent;
    resize: vertical;
    color: var(--color-text-primary);
}
.nv-composer__foot {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}
.nv-composer__hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--nv-gray-500);
}

/* ─── Context chip (en detail__head, abre ctx drawer Alt+I) ─── */
.nv-ctx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(8,145,178,0.08);
    border: 1px solid rgba(8,145,178,0.22);
    color: var(--nv-cyan-600);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 120ms;
}
.nv-ctx-chip:hover { background: rgba(8,145,178,0.14); }
.nv-ctx-chip svg { width: 11px; height: 11px; }

/* ─── Note chip (en detail__head) ─── */
.nv-note-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(217,119,6,0.10);
    border: 1px dashed rgba(217,119,6,0.45);
    color: var(--nv-amber-600);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 120ms;
}
.nv-note-chip:hover { background: rgba(217,119,6,0.16); }
.nv-note-chip svg { width: 11px; height: 11px; }
.nv-note-chip__count {
    background: var(--nv-amber-500);
    color: white;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 9.5px;
    line-height: 14px;
    min-width: 14px;
    text-align: center;
}

/* ─── Context drawer (Alt+I — cliente, servicios, tickets) ─── */
.nv-ctx-drawer {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: var(--color-bg-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 24px rgba(15,37,64,0.10);
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: var(--z-drawer, 50);
    display: flex;
    flex-direction: column;
}
.nv-ctx-drawer.is-open { transform: translateX(0); }
.nv-ctx-drawer__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.nv-ctx-drawer__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--nv-cyan-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex; align-items: center; gap: 6px;
}
.nv-ctx-drawer__title svg { width: 14px; height: 14px; }
.nv-ctx-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}
.nv-ctx-card {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.nv-ctx-card__head {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nv-gray-500);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 5px;
}
.nv-ctx-card__head svg { width: 11px; height: 11px; color: var(--nv-cyan-600); }

.nv-ctx-customer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nv-ctx-customer__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--nv-gray-200);
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--nv-cyan-500);
    box-shadow: 0 0 0 2px rgba(8,145,178,0.10);
}
.nv-ctx-customer__name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.nv-ctx-customer__email { font-size: 11.5px; color: var(--nv-gray-500); font-family: var(--font-mono); }

.nv-ctx-list dt {
    font-size: 10.5px;
    color: var(--nv-gray-500);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.nv-ctx-list dt:first-child { margin-top: 0; }
.nv-ctx-list dd {
    font-size: 12.5px;
    color: var(--color-text-primary);
    margin: 1px 0 0;
}
.nv-ctx-list dd.is-mono { font-family: var(--font-mono); font-size: 11.5px; }
.nv-ctx-list dd a { color: var(--nv-cyan-600); text-decoration: none; }

.nv-ctx-tickets li {
    list-style: none;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-primary);
    align-items: baseline;
}
.nv-ctx-tickets li:last-child { border: 0; }
.nv-ctx-tickets a { color: var(--nv-cyan-600); text-decoration: none; font-family: var(--font-mono); font-size: 11px; }

.nv-ctx-history {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nv-ctx-history li {
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 11.5px;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.nv-ctx-history li:last-child { border: 0; }
.nv-ctx-history__time {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--nv-gray-500);
    display: block;
    margin-bottom: 2px;
}
.nv-ctx-history__who {
    font-weight: 600;
}

/* ─── Notes drawer (slide-in lateral derecho) ─── */
.nv-notes-drawer {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 380px;
    background: #fffbeb;
    border-left: 1px solid rgba(217,119,6,0.30);
    box-shadow: -8px 0 24px rgba(15,37,64,0.10);
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: var(--z-drawer, 50);
    display: flex;
    flex-direction: column;
}
.nv-notes-drawer.is-open { transform: translateX(0); }
.nv-notes-drawer__head {
    padding: 14px 16px;
    border-bottom: 1px dashed rgba(217,119,6,0.35);
    display: flex;
    align-items: center;
    gap: 10px;
}
.nv-notes-drawer__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--nv-amber-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nv-notes-drawer__title svg { width: 14px; height: 14px; }
.nv-notes-drawer__close {
    margin-left: auto;
    width: 26px; height: 26px;
    border: 0;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    color: var(--nv-gray-500);
}
.nv-notes-drawer__close:hover { background: rgba(217,119,6,0.10); color: var(--nv-amber-600); }
.nv-notes-drawer__hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--nv-gray-500);
    padding: 8px 16px;
    border-bottom: 1px solid rgba(217,119,6,0.18);
    background: rgba(217,119,6,0.04);
}
.nv-notes-drawer__list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nv-note-item {
    background: var(--color-bg-surface);
    border: 1px dashed rgba(217,119,6,0.45);
    border-radius: 8px;
    padding: 10px 12px;
}
.nv-note-item__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}
.nv-note-item__name { font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
.nv-note-item__time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nv-gray-500);
    margin-left: auto;
}
.nv-note-item__content {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--color-text-primary);
}
.nv-notes-drawer__composer {
    padding: 12px 16px;
    border-top: 1px dashed rgba(217,119,6,0.35);
    background: rgba(255,251,235,0.5);
}
.nv-notes-drawer__textarea {
    width: 100%;
    min-height: 70px;
    padding: 8px 10px;
    border: 1px solid rgba(217,119,6,0.30);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    background: var(--color-bg-surface);
    resize: vertical;
    outline: none;
    color: var(--color-text-primary);
}
.nv-notes-drawer__textarea:focus {
    border-color: var(--nv-amber-500);
    box-shadow: 0 0 0 3px rgba(217,119,6,0.10);
}
.nv-drawer-backdrop {
    position: fixed;
    inset: 60px 0 0 0;
    background: transparent;
    z-index: 49;
    display: none;
}
.nv-drawer-backdrop.is-active { display: block; }

/* ─── Board (Kanban) ─── */
.nv-board {
    display: flex;
    height: 100%;
    overflow-x: auto;
    padding: 14px;
    gap: 12px;
    background: var(--color-bg-page);
}
.nv-board__col {
    flex: 0 0 280px;
    background: var(--nv-gray-100);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.nv-board__col.is-drop-target {
    background: rgba(8,145,178,0.08);
    outline: 2px dashed var(--nv-cyan-500);
    outline-offset: -2px;
}
.nv-board__col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 10px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 13px;
}
.nv-board__col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--nv-cyan-500);
}
.nv-board__col--new  .nv-board__col-dot { background: var(--nv-red-500, #ef4444); animation: nvPulse 1.6s infinite; }
.nv-board__col--prog .nv-board__col-dot { background: var(--nv-cyan-500); }
.nv-board__col--wait .nv-board__col-dot { background: var(--nv-amber-500); }
.nv-board__col--done .nv-board__col-dot { background: var(--nv-green-500, #16a34a); }
@keyframes nvPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.6; transform: scale(1.2); }
}
.nv-board__col-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nv-gray-500);
    background: var(--color-bg-surface);
    padding: 1px 6px;
    border-radius: 4px;
}
.nv-board__card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    box-shadow: var(--shadow-sm);
    transition: transform 100ms, box-shadow 100ms;
}
.nv-board__card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nv-board__card.is-dragging { opacity: 0.4; cursor: grabbing; }
.nv-board__card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.nv-board__card-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nv-gray-500);
}
.nv-board__card-sla {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nv-gray-500);
}
.nv-board__card-sla.is-overdue { color: var(--nv-red-500, #ef4444); font-weight: 600; }
.nv-board__card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 6px;
}
.nv-board__card-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--nv-gray-100);
    font-size: 12px;
    color: var(--nv-gray-700);
}

/* ─── Agent card (vista Agentes) ─── */
.nv-agents {
    height: 100%;
    overflow-y: auto;
    padding: 18px;
    background: var(--color-bg-page);
}
.nv-agents__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.nv-agent-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 120ms, box-shadow 120ms;
}
.nv-agent-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.nv-agent-card__head {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--nv-gray-100);
}
.nv-agent-card__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--nv-gray-200);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid;
    box-shadow: 0 0 0 3px;
    flex-shrink: 0;
    position: relative;
}
.nv-agent-card__avatar.is-online::after,
.nv-agent-card__avatar.is-away::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-bg-surface);
}
.nv-agent-card__avatar.is-online::after { background: var(--nv-green-500, #16a34a); }
.nv-agent-card__avatar.is-away::after   { background: var(--nv-amber-500); }
.nv-agent-card__name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}
.nv-agent-card__email {
    font-size: 11.5px;
    color: var(--nv-gray-500);
    font-family: var(--font-mono);
}
.nv-agent-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--nv-gray-100);
}
.nv-metric {
    padding: 9px 8px;
    text-align: center;
    border-right: 1px solid var(--nv-gray-100);
}
.nv-metric:last-child { border-right: 0; }
.nv-metric__value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}
.nv-metric__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nv-gray-500);
}
.nv-metric--open .nv-metric__value { color: var(--nv-cyan-600); }
.nv-metric--sla  .nv-metric__value { color: var(--nv-red-500, #ef4444); }
.nv-metric--done .nv-metric__value { color: var(--nv-green-500, #16a34a); }
.nv-agent-card__list { flex: 1; padding: 6px 0; }
.nv-agent-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--nv-gray-100);
    font-size: 12.5px;
    cursor: pointer;
}
.nv-agent-row:last-child { border-bottom: 0; }
.nv-agent-row:hover { background: var(--nv-page-bg); }
.nv-agent-row__id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nv-gray-500);
    flex-shrink: 0;
}
.nv-agent-row__subj {
    flex: 1;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.nv-agent-card__foot {
    padding: 8px 14px;
    border-top: 1px solid var(--nv-gray-100);
    background: var(--nv-page-bg);
    text-align: center;
}
.nv-agent-card__foot a {
    font-size: 12px;
    font-weight: 500;
    color: var(--nv-cyan-600);
    text-decoration: none;
    cursor: pointer;
}
.nv-agent-card__foot a:hover { color: var(--nv-cyan-700); text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════════════════
   F20.8 — Bridge selector list: clases legacy heredan reglas del v2
   ============================================================================
   Extiende los componentes .nv-* para que también apliquen a las clases
   legacy .sa-* y .nv-tkt-*. Esto sin necesidad de eliminar las reglas
   duplicadas en cockpit.css y custom-nv-support-client.css (~4500 LOC
   intactas) — los selectores adicionales sobrescriben gracias al orden
   de cascada (este file carga al final).
   ============================================================================ */

/* Shells */
.sa-cockpit,
.nv-tkt-wrap {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Panes — bordes y backgrounds consistentes */
.sa-pane-left,
.nv-tkt-list {
    background: var(--color-bg-page);
    border-color: var(--color-border);
}
.sa-pane-center,
.nv-tkt-main {
    border-color: var(--color-border);
}
.sa-pane-right,
.nv-tkt-sidebar {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
}

/* Pane headers/footers */
.sa-pane-header,
.nv-tkt-list-head,
.nv-tkt-sidebar-head {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
}

/* Cards — lift consistent */
.sa-config-card:hover,
.nv-tkt-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* Buttons — primary brand consistente */
.sa-btn-reply-all,
.nv-tkt-btn-reply,
.nv-tkt-btn-primary {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}
.sa-btn-reply-all:hover,
.nv-tkt-btn-reply:hover,
.nv-tkt-btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-cyan-glow);
}

/* Status badges */
.sa-badge-status,
.nv-tkt-status-badge {
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
}

/* Tabs — color consistente activo brand */
.sa-tab.active,
.nv-tkt-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Inputs — focus ring brand */
.sa-cockpit input.form-control:focus,
.sa-cockpit .form-select:focus,
.nv-tkt-search input:focus,
.nv-csat-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Empty states — colores muted consistentes */
.sa-empty,
.sa-detail-empty,
.nv-tkt-empty,
.nv-tkt-empty-state {
    color: var(--color-text-muted);
}

/* Composer en modo nota — ámbar consistente */
.sa-reply-wrap.is-note,
.nv-tkt-composer.is-note {
    background: rgba(217, 119, 6, 0.06);
    border-top-color: var(--color-warning);
}

/* Avatares — todos con border consistente */
.sa-msg-avatar,
.nv-tkt-msg-avatar {
    border: 2px solid transparent;
    box-sizing: border-box;
    border-radius: 50%;
    transition: transform var(--duration-fast) var(--ease-out);
}

/* SLA badges — variantes color-coded */
.nv-tkt-sla {
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
}
.nv-tkt-sla--ok      { background: var(--color-success-soft); color: var(--color-success); }
.nv-tkt-sla--soon    { background: var(--color-warning-soft); color: var(--color-warning); }
.nv-tkt-sla--overdue { background: var(--color-danger-soft); color: var(--color-danger); }

/* Modal headers — fonts consistentes */
.modal-title,
.nv-tkt-modal-title {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-snug);
    color: var(--color-accent);
}

/* Scrollbar — consistente y discreta */
.sa-pane-body::-webkit-scrollbar,
.sa-pane-body-flush::-webkit-scrollbar,
.sa-conversation::-webkit-scrollbar,
.nv-tkt-list-body::-webkit-scrollbar,
.nv-tkt-content::-webkit-scrollbar {
    width: 6px;
}
.sa-pane-body::-webkit-scrollbar-thumb,
.sa-pane-body-flush::-webkit-scrollbar-thumb,
.sa-conversation::-webkit-scrollbar-thumb,
.nv-tkt-list-body::-webkit-scrollbar-thumb,
.nv-tkt-content::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 3px;
}
.sa-pane-body::-webkit-scrollbar-thumb:hover,
.sa-pane-body-flush::-webkit-scrollbar-thumb:hover,
.sa-conversation::-webkit-scrollbar-thumb:hover,
.nv-tkt-list-body::-webkit-scrollbar-thumb:hover,
.nv-tkt-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}


/* ════════════════════════════════════════════════════════════════════════════
   F27 — UX upgrade del detail admin
   ============================================================================
   1. Detail flex:1 + lista compacta 380px (más espacio para conversación)
   2. Bubbles tipo conversación en .sa-msg (admin a la derecha cyan)
   3. Composer agrandado con focus ring
   4. Header del ticket compacto (acciones agrupadas)
   ============================================================================ */

/* ─── 1. Layout: detail toma todo el espacio sobrante ─── */
#sa-cockpit > #sa-pane-center {
    flex: 0 0 380px !important;
    width: 380px !important;
}
#sa-cockpit > #sa-pane-right {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 600px !important;
}

/* ─── 2. Bubbles en thread admin ─── */
.sa-conversation {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
    background: var(--color-bg-page);
}
.sa-conversation .sa-day-sep {
    align-self: center;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin: 0;
}

/* Bubble base: cliente alineado izquierda */
.sa-conversation .sa-msg {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    max-width: 80% !important;
    align-self: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.sa-conversation .sa-msg.sa-msg-admin,
.sa-conversation .sa-msg.is-staff {
    flex-direction: row-reverse !important;
    align-self: flex-end !important;
}

/* Avatar */
.sa-conversation .sa-msg-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    border: 2px solid var(--color-border) !important;
}
.sa-conversation .sa-msg.sa-msg-admin .sa-msg-avatar,
.sa-conversation .sa-msg.is-staff .sa-msg-avatar {
    border-color: var(--nv-cyan-500) !important;
    box-shadow: 0 0 0 2px rgba(8,145,178,0.15);
}
.sa-conversation .sa-msg.sa-msg-client .sa-msg-avatar {
    border-color: #db2777 !important;
    box-shadow: 0 0 0 2px rgba(219,39,119,0.10);
}

/* Body container (avatar + bubble + meta) */
.sa-conversation .sa-msg > div:not(.sa-msg-avatar) {
    min-width: 0;
    flex: 0 1 auto;
}

/* Bubble del cliente */
.sa-conversation .sa-msg-bubble {
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    line-height: 1.55;
    box-shadow: 0 1px 2px rgba(15,37,64,0.06);
    max-width: 100%;
    word-wrap: break-word;
}

/* Bubble del staff: cyan */
.sa-conversation .sa-msg.sa-msg-admin .sa-msg-bubble,
.sa-conversation .sa-msg.is-staff .sa-msg-bubble {
    background: var(--nv-cyan-500) !important;
    color: white !important;
    border-color: var(--nv-cyan-500) !important;
}
.sa-conversation .sa-msg.sa-msg-admin .sa-msg-bubble a,
.sa-conversation .sa-msg.is-staff .sa-msg-bubble a {
    color: white;
    text-decoration: underline;
}
.sa-conversation .sa-msg.sa-msg-admin .sa-msg-bubble code,
.sa-conversation .sa-msg.is-staff .sa-msg-bubble code,
.sa-conversation .sa-msg.sa-msg-admin .sa-msg-bubble pre,
.sa-conversation .sa-msg.is-staff .sa-msg-bubble pre {
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
    border-color: rgba(255,255,255,0.30) !important;
}

/* Meta (autor + fecha) */
.sa-conversation .sa-msg-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
    padding: 0 6px;
    font-family: var(--font-mono);
}
.sa-conversation .sa-msg.sa-msg-admin .sa-msg-meta,
.sa-conversation .sa-msg.is-staff .sa-msg-meta {
    text-align: right;
}

/* ─── 3. Composer agrandado ─── */
.sa-reply-wrap {
    background: var(--color-bg-surface) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 14px 20px 16px !important;
    box-shadow: 0 -4px 16px rgba(15,37,64,0.04);
    flex-shrink: 0;
}
.sa-reply-wrap.is-note {
    background: rgba(217,119,6,0.04) !important;
}
.sa-reply-mode-hint {
    font-size: 12px;
    font-weight: 500;
    color: var(--nv-cyan-600);
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(8,145,178,0.08);
    display: inline-block;
}
.sa-reply-wrap.is-note .sa-reply-mode-hint {
    color: var(--nv-amber-600);
    background: rgba(217,119,6,0.10);
}
.sa-reply-toolbar {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sa-reply-wrap .ck-editor {
    border: 1.5px solid var(--color-border) !important;
    border-radius: 9px !important;
    overflow: hidden;
    transition: border-color 120ms, box-shadow 120ms;
}
.sa-reply-wrap .ck-editor:focus-within {
    border-color: var(--nv-cyan-500) !important;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.08);
}
.sa-reply-wrap.is-note .ck-editor:focus-within {
    border-color: var(--nv-amber-500) !important;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.10);
}
.sa-reply-wrap .ck-editor__editable {
    min-height: 140px !important;
    max-height: 400px !important;
    padding: 10px 14px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13.5px;
    line-height: 1.55;
    overflow-y: auto !important;
    transition: height 120ms ease-out;
}
.sa-reply-wrap textarea#sa-reply-content:not(.ck-hidden) {
    min-height: 140px;
    border: 1.5px solid var(--color-border);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.55;
}
#sa-btn-reply {
    height: 36px;
    padding: 0 18px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(8,145,178,0.30);
}
#sa-btn-reply:hover { box-shadow: 0 2px 8px rgba(8,145,178,0.36); }

/* ─── 4. Header del ticket compacto (objetivo ~120px altura total) ─── */
.sa-detail-header {
    padding: 10px 18px 8px !important;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
}
/* Fila 1: ID + chips Info/Notas + status + prioridad */
.sa-detail-header > .d-flex.mb-2 {
    margin-bottom: 4px !important;
    align-items: center;
    gap: 8px !important;
}
/* Subject grande pero compacto */
.sa-detail-subject {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    line-height: 1.25;
    margin-bottom: 4px;
}
/* Cliente: avatar + nombre + email + service strip en una sola fila */
.sa-detail-client {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 4px !important;
    font-size: 12px;
    gap: 8px !important;
}
.sa-detail-client > div:first-child + div { font-size: 12px; line-height: 1.3; }
.sa-detail-client strong { font-weight: 600; font-size: 12.5px; }
.sa-detail-client .ms-auto { font-size: 11px; }

/* Service strip oculto del header (los servicios afectados están en drawer ctx via Alt+I) */
.sa-detail-header .nv-service-strip {
    display: none !important;
}

.sa-detail-actions {
    margin-top: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.sa-detail-actions .btn {
    height: 26px;
    padding: 0 8px;
    font-size: 11.5px;
}
.sa-detail-actions .dropdown-toggle::after { margin-left: 4px; }

/* ─── 5. Eliminar tabs visualmente — solo thread ─── */
#sa-detail .nav-tabs {
    display: none !important;
}

/* Hyperlink cliente al perfil */
.sa-client-link {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 120ms;
    border-bottom: 1px dashed transparent;
}
.sa-client-link:hover {
    color: var(--nv-cyan-600);
    border-bottom-color: var(--nv-cyan-600);
}
.sa-client-link strong { color: inherit; }

/* Filter chip — indicador de filtro activo en lista */
.sa-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(8,145,178,0.10);
    color: var(--nv-cyan-700);
    border: 1px solid rgba(8,145,178,0.30);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.sa-filter-chip__close {
    width: 14px; height: 14px;
    border: 0;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    border-radius: 3px;
}
.sa-filter-chip__close:hover { background: rgba(8,145,178,0.20); }
.sa-filter-chip__close svg { width: 10px; height: 10px; }

/* Composer tabs visuales (Respuesta / Nota interna) */
.sa-reply-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.sa-reply-tab {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--nv-gray-500);
    border: 1px solid transparent;
    background: transparent;
    transition: all 120ms;
    user-select: none;
}
.sa-reply-tab:hover { background: var(--nv-gray-100); }
.sa-reply-tab.is-active {
    background: rgba(8,145,178,0.10);
    color: var(--nv-cyan-600);
    border-color: rgba(8,145,178,0.22);
}
.sa-reply-tab.is-active.is-internal {
    background: rgba(217,119,6,0.10);
    color: var(--nv-amber-600);
    border-color: rgba(217,119,6,0.30);
}
/* Ocultar el switch legacy is-note checkbox (lo reemplazamos por tabs) */
.sa-reply-toolbar > .form-switch {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   F32.4 — Responsive breakpoints
   ============================================================================
   Tablet (768-1199): nav colapsable, lista compacta, detail prioritario
   Mobile (<768): stack vertical, drawers fullscreen
   ============================================================================ */

/* Tablet: 768-1199px */
@media (max-width: 1199.98px) {
    /* Nav más estrecho */
    #sa-cockpit > #sa-pane-left { width: 200px !important; }
    /* Lista compacta */
    #sa-cockpit > #sa-pane-center { flex: 0 0 320px !important; width: 320px !important; }
    /* Detail toma resto */
    #sa-cockpit > #sa-pane-right { min-width: 0 !important; }
    /* Drawers más estrechos */
    .nv-notes-drawer, .nv-ctx-drawer { width: 300px !important; }
    /* View switcher más compacto */
    .nv-view-switcher__btn { padding: 4px 9px; font-size: 11.5px; }
}

/* Mobile: <768px — stack vertical */
@media (max-width: 767.98px) {
    /* Toolbar y view-switcher se centran */
    .nv-toolbar { flex-wrap: wrap; padding: 10px 12px !important; gap: 8px; }
    .nv-toolbar__title h1 { font-size: 16px; }
    .nv-view-switcher { width: 100%; justify-content: center; }
    .nv-toolbar__actions { flex-wrap: wrap; }

    /* Shell stack vertical: nav drawer, lista o detail según selección */
    #sa-cockpit { flex-direction: column !important; height: auto !important; }
    #sa-cockpit > #sa-pane-left {
        position: fixed !important;
        top: 60px; left: 0; bottom: 0;
        width: 280px !important;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 220ms;
        background: var(--color-bg-surface);
        box-shadow: 8px 0 24px rgba(15,37,64,0.10);
    }
    #sa-cockpit > #sa-pane-left.is-mobile-open { transform: translateX(0); }
    #sa-cockpit > #sa-pane-center {
        width: 100% !important; flex: none !important;
        display: block;
    }
    #sa-cockpit > #sa-pane-right {
        position: fixed !important;
        top: 60px; right: 0; bottom: 0;
        width: 100% !important;
        z-index: 55;
        background: var(--color-bg-surface);
        transform: translateX(100%);
        transition: transform 220ms;
        max-width: none !important;
        min-width: 0 !important;
    }
    #sa-cockpit > #sa-pane-right.is-mobile-open { transform: translateX(0); }

    /* Drawers: fullscreen en mobile */
    .nv-notes-drawer, .nv-ctx-drawer {
        width: 100% !important;
        max-width: 100vw;
        top: 0 !important;
        z-index: 100;
    }
    .nv-drawer-backdrop { inset: 0 !important; background: rgba(15,37,64,0.30) !important; }

    /* Header del ticket aún más compacto */
    .sa-detail-header { padding: 8px 12px !important; }
    .sa-detail-subject { font-size: 14px; }
    .sa-detail-actions { gap: 4px; }
    .sa-detail-actions .btn { font-size: 11px; padding: 0 6px; height: 24px; }

    /* Conversación full width */
    .sa-conversation { padding: 12px !important; }
    .sa-conversation .sa-msg { max-width: 92% !important; }

    /* Composer compacto */
    .sa-reply-wrap { padding: 10px 12px !important; }
    .sa-reply-wrap .ck-editor__editable { min-height: 100px !important; max-height: 240px !important; }

    /* Board: 1 columna a la vez con scroll horizontal */
    .nv-board { padding: 10px !important; gap: 8px; }
    .nv-board__col { flex: 0 0 75vw !important; }

    /* Agentes: 1 columna */
    .nv-agents__grid { grid-template-columns: 1fr !important; }
}

/* Cliente mobile (themes/nova) */
@media (max-width: 767.98px) {
    .nv-shell--detail {
        flex-direction: column;
    }
    .nv-shell--detail > .nv-pane--nav {
        flex: none !important;
        width: 100% !important;
        max-height: 200px;
        overflow-y: auto;
    }
    .nv-tkt-info-drawer {
        width: 100% !important;
        max-width: 100vw;
        top: 0 !important;
        z-index: 100;
    }
}
#sa-detail .tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#sa-detail .tab-content > .tab-pane {
    display: none;
}
#sa-detail .tab-content > #sa-tab-msg {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    opacity: 1 !important;
    overflow: hidden;
}
#sa-detail .tab-content > #sa-tab-msg .sa-conversation {
    flex: 1;
    overflow-y: auto;
}

/* DARK MODE — panel de notas internas, tinte ambar. */
[data-bs-theme="dark"] .nv-notes-drawer {
    background: var(--nv-warning-soft);
}