/**
 * Wapu UI Kit · wapu-picker
 *
 * Picker visual de entidades (producto, categoría, imagen, video, etc.).
 * Reemplaza gradualmente:
 *   - .pg-picker (Playground editor)
 *   - .pg-product-pick / .pg-category-pick / .pg-img-preview (Playground legacy)
 *
 * Usado típicamente en inspectores de campos lookup del Field Registry.
 * Click abre un modal picker o invoca un media frame.
 *
 * Diseño: card compacta (thumb + meta + caret), hover sutil, focus visible.
 * Variantes BEM: --empty (sin valor seleccionado)
 * Modificadores de thumb: __thumb--category (icono 📂), __thumb--video (icono ▶)
 *
 * Tokens del drop / contexto:
 *   --wapu-picker-bg          (fondo del picker)
 *   --wapu-picker-border      (borde)
 *   --wapu-picker-border-hover
 *
 * @package WapuCore
 * @since   5.7.0
 */

/* ── Base · button-like card ────────────────────────────────────── */
.wapu-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    background: var(--wapu-picker-bg, #fff);
    border: 1px solid var(--wapu-picker-border, rgba(15, 23, 42, .12));
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
    font-family: inherit;
    color: inherit;
}
.wapu-picker:hover,
.wapu-picker:focus-visible {
    border-color: var(--wapu-picker-border-hover, rgba(15, 23, 42, .28));
    outline: none;
}

/* ── Empty state ────────────────────────────────────────────────── */
.wapu-picker--empty .wapu-picker__thumb {
    background: rgba(15, 23, 42, .04);
    color: rgba(15, 23, 42, .35);
}
.wapu-picker--empty .wapu-picker__title {
    color: rgba(15, 23, 42, .55);
    font-style: italic;
}

/* ── Thumb (cuadrado, 44px) ─────────────────────────────────────── */
.wapu-picker__thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .04);
    font-size: 18px;
    color: rgba(15, 23, 42, .55);
}
.wapu-picker__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Variantes del thumb */
.wapu-picker__thumb--category::before { content: '📂'; }
.wapu-picker__thumb--video::before    { content: '▶'; }

/* ── Meta (texto al lado del thumb) ─────────────────────────────── */
.wapu-picker__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.wapu-picker__eyebrow {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, .45);
    line-height: 1.2;
}
.wapu-picker__title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(15, 23, 42, .92);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wapu-picker__caption {
    font-size: 11px;
    color: rgba(15, 23, 42, .55);
    line-height: 1.3;
}

/* ── Caret indicador ────────────────────────────────────────────── */
.wapu-picker__caret {
    flex-shrink: 0;
    font-size: 14px;
    color: rgba(15, 23, 42, .35);
    line-height: 1;
}

/* ── Disabled ───────────────────────────────────────────────────── */
.wapu-picker:disabled,
.wapu-picker[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}