/* ── Command Palette — SGE Glassmorphism ──────────────────────── */
/* Ctrl+K overlay. Inspired by Linear/Vercel, with SGE color tokens */

.cp-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.cp-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Dialog box */
.cp-dialog {
    width: 100%;
    max-width: 560px;
    background: rgba(10, 18, 35, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(55, 138, 221, 0.08);
    overflow: hidden;
    transform: translateY(-8px) scale(.98);
    transition: transform .18s ease;
}
.cp-overlay.open .cp-dialog {
    transform: translateY(0) scale(1);
}

/* Search bar */
.cp-search {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-search-icon {
    color: rgba(55, 138, 221, 0.7);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.cp-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    caret-color: #378ADD;
}
.cp-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.cp-kbd {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .2rem .45rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

/* Results area */
.cp-results {
    max-height: 380px;
    overflow-y: auto;
    padding: .4rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(55, 138, 221, 0.2) transparent;
}

/* Group header */
.cp-group-label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    padding: .6rem 1.1rem .3rem;
}

/* Action item */
.cp-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.1rem;
    cursor: pointer;
    transition: background .12s;
    border-radius: 0;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: .86rem;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.cp-item:hover,
.cp-item.active {
    background: rgba(55, 138, 221, 0.12);
    color: #fff;
}
.cp-item.active {
    background: rgba(24, 95, 165, 0.18);
    outline: none;
}
.cp-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background .12s;
}
.cp-item:hover .cp-item-icon,
.cp-item.active .cp-item-icon {
    background: rgba(55, 138, 221, 0.15);
    border-color: rgba(55, 138, 221, 0.25);
}
.cp-item-body {
    flex: 1;
    min-width: 0;
}
.cp-item-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-item-sub {
    font-size: .72rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-item-shortcut {
    font-size: .65rem;
    font-weight: 600;
    padding: .18rem .45rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Empty state */
.cp-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: .84rem;
}

/* Footer hint */
.cp-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: .68rem;
    color: rgba(255, 255, 255, 0.22);
}
.cp-footer kbd {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .35rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-family: inherit;
    font-size: .65rem;
    color: rgba(255, 255, 255, 0.35);
}

/* Topbar trigger button */
.cp-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 8px;
    background: rgba(24, 95, 165, 0.07);
    border: 1px solid rgba(24, 95, 165, 0.16);
    /* #64748b medía 4.29:1 sobre el fondo real del topbar (bajo AA 4.5:1,
       ORCH-EXPERIENCE-16). Un paso mas oscuro en la misma escala de slate.
       Sin tokenizar (ORCH-EXPERIENCE-17): no existe un token canonico para
       este slate-600 en sge-tokens.css/sge-design-system.css (no confundir
       con --sge-surface-b-text-faint, que es #64748b, el valor VIEJO que
       este fix reemplazo). Crear un token nuevo excede este WO -- hex
       explicito, deuda documentada. */
    color: #475569;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.cp-topbar-btn:hover {
    background: rgba(24, 95, 165, 0.13);
    border-color: rgba(24, 95, 165, 0.28);
    color: #185FA5;
}
.cp-topbar-btn iconify-icon {
    font-size: .9rem;
    color: #185FA5;
}
.cp-topbar-btn-kbd {
    font-family: inherit;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    padding: .18rem .35rem;
    border-radius: 5px;
    background: rgba(24, 95, 165, 0.10);
    border: 1px solid rgba(24, 95, 165, 0.20);
    color: #185FA5;
    letter-spacing: .02em;
}

/* Dark mode override */
[data-bs-theme="dark"] .cp-topbar-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.50);
}
[data-bs-theme="dark"] .cp-topbar-btn:hover {
    background: rgba(55, 138, 221, 0.12);
    border-color: rgba(55, 138, 221, 0.28);
    color: rgba(255, 255, 255, 0.80);
}
[data-bs-theme="dark"] .cp-topbar-btn iconify-icon {
    color: #378ADD;
}
[data-bs-theme="dark"] .cp-topbar-btn-kbd {
    background: rgba(55, 138, 221, 0.14);
    border-color: rgba(55, 138, 221, 0.30);
    color: #7AA7FF;
}

/* Icon color variants */
.cp-icon-blue  { color: #378ADD; }
.cp-icon-teal  { color: #2dd4bf; }
.cp-icon-green { color: #4ade80; }
.cp-icon-amber { color: #fbbf24; }
.cp-icon-red   { color: #f87171; }
.cp-icon-cyan  { color: #00E5FF; }