/**
 * OS TigerLab — Search Palette (Cmd+K / Ctrl+K)
 *
 * Modal full-screen con campo de búsqueda + tabs + resultados.
 * Activación: <kbd>Cmd</kbd>/<kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>/</kbd>, o
 * cualquier elemento con [data-ostl-search-open].
 */

.ostl-search-palette {
    position: fixed;
    inset: 0;
    z-index: 5900;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: max(var(--safe-top, env(safe-area-inset-top, 0px)), clamp(24px, 8vh, 100px))
        max(var(--sp-3, 12px), env(safe-area-inset-right, 0px))
        max(var(--sp-3), var(--safe-bottom, env(safe-area-inset-bottom, 0px)))
        max(var(--sp-3, 12px), env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}
.ostl-search-palette[data-open="true"] {
    display: flex;
    animation: ostl-search-fade var(--d-base, 240ms) ease-out;
}

.ostl-search-palette__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.65);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ostl-search-palette__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--color-bg-elevated, #1E1E1E);
    color: var(--color-text-primary, #F5F5F5);
    border: 1px solid var(--color-border-default, #2A2A2A);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-4, 0 24px 64px rgba(0,0,0,0.6));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(72vh, calc(100svh - clamp(72px, 14vh, 160px)));
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    animation: ostl-search-pop var(--d-base, 240ms) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* Search input */
.ostl-search-palette__input-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    border-bottom: 1px solid var(--color-border-default, #2A2A2A);
}
.ostl-search-palette__input-wrap svg { color: var(--color-text-secondary, #B3B3B3); flex-shrink: 0; }

.ostl-search-palette__input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--color-text-primary, #F5F5F5);
    font-family: var(--font-body);
    font-size: var(--fs-lg, 1.125rem);
    padding: var(--sp-2);
    outline: none;
    min-width: 0;
}
.ostl-search-palette__input::placeholder { color: var(--color-text-secondary, #B3B3B3); }

.ostl-search-palette__kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-bg-secondary, #161616);
    color: var(--color-text-secondary, #B3B3B3);
    border: 1px solid var(--color-border-default, #2A2A2A);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    flex-shrink: 0;
}

/* Tabs */
.ostl-search-palette__tabs {
    display: flex;
    gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--color-border-default);
    overflow-x: auto;
    scrollbar-width: none;
}
.ostl-search-palette__tabs::-webkit-scrollbar { display: none; }

.ostl-search-palette__tab {
    background: transparent;
    border: 0;
    color: var(--color-text-secondary, #B3B3B3);
    padding: 6px 12px;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--fs-sm, 0.9375rem);
    cursor: pointer;
    transition: background var(--d-fast, 160ms), color var(--d-fast);
    white-space: nowrap;
}
.ostl-search-palette__tab:hover { background: var(--color-bg-secondary, #161616); color: var(--color-text-primary); }
.ostl-search-palette__tab[data-active="true"] {
    background: color-mix(in oklab, var(--color-accent, #00FF9C) 18%, var(--color-bg-secondary));
    color: var(--color-accent, #00FF9C);
}

/* Results */
.ostl-search-palette__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2) 0;
}

.ostl-search-palette__hint {
    text-align: center;
    color: var(--color-text-secondary, #B3B3B3);
    padding: var(--sp-6) var(--sp-4);
    font-size: var(--fs-sm);
}
.ostl-search-palette__hint kbd {
    display: inline-block;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    margin: 0 2px;
}

.ostl-search-result-group {
    padding: var(--sp-1, 4px) 0;
}
.ostl-search-result-group__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary, #B3B3B3);
    padding: var(--sp-2, 8px) var(--sp-4, 16px) var(--sp-1, 4px);
    margin: 0;
    font-weight: 600;
}

.ostl-search-result {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    padding: var(--sp-2, 8px) var(--sp-4, 16px);
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text-primary, #F5F5F5);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background var(--d-instant, 80ms);
}
.ostl-search-result:hover,
.ostl-search-result[data-selected="true"] {
    background: color-mix(in oklab, var(--color-accent, #00FF9C) 10%, var(--color-bg-secondary, #161616));
}
.ostl-search-result__icon {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-secondary);
    color: var(--color-accent);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.ostl-search-result__body { flex: 1; min-width: 0; }
.ostl-search-result__title {
    font-size: var(--fs-sm, 0.9375rem);
    font-weight: 600;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ostl-search-result__sub {
    font-size: 12px;
    color: var(--color-text-secondary, #B3B3B3);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ostl-search-result__meta {
    font-size: 11px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.ostl-search-result mark {
    background: color-mix(in oklab, var(--color-accent, #00FF9C) 32%, transparent);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* Footer hint */
.ostl-search-palette__footer {
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--color-border-default);
    background: var(--color-bg-secondary);
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--color-text-secondary);
}
.ostl-search-palette__footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@keyframes ostl-search-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ostl-search-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .ostl-search-palette__input {
        font-size: 16px;
    }
    .ostl-search-palette__panel {
        max-height: min(82vh, calc(100dvh - var(--sp-6)));
        border-radius: var(--radius-md, 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ostl-search-palette,
    .ostl-search-palette__panel { animation: none !important; }
    .ostl-search-palette__panel { opacity: 1; transform: none; }
}
[data-theme="light"] .ostl-search-palette__panel { background: #FFFFFF; color: #0A0A0A; }
[data-theme="light"] .ostl-search-palette__footer { background: #F5F5F5; }