/**
 * Widget de Productos — modal selector de productos del catálogo.
 * Mobile-first. Centrado, sobre cualquier otro overlay (z muy alto).
 */

.pw {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pw.is-open .pw__backdrop { opacity: 1; }

.pw__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100vh - 32px);
    background: #fff;
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pw.is-open .pw__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pw__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border, #e5e7eb);
}

.pw__title { margin: 0; font-size: 1.0625rem; font-weight: 700; }

.pw__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted, #6b7280);
    padding: 0;
    width: 32px;
    height: 32px;
    min-height: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.pw__close:hover {
    background: var(--c-surface-2, #f3f4f6);
    color: var(--c-text, #111827);
}

.pw__tools {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border, #f3f4f6);
}

.pw__filter {
    width: 100%;
    font-size: 0.9375rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border, #d1d5db);
    border-radius: var(--radius-md, 8px);
}

.pw__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-4);
}

.pw__msg {
    color: var(--c-text-muted, #6b7280);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--space-5) 0;
}

.pw__msg--error { color: #b91c1c; }

.pw__section {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c-text-muted, #6b7280);
    margin: var(--space-3) 0 var(--space-2);
}

.pw__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.pw-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-2);
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pw-card:hover { border-color: var(--c-primary, #2563eb); }

.pw-card.is-picked {
    border-color: var(--c-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--c-primary, #2563eb) inset;
}

.pw-card.is-added {
    opacity: 0.55;
    cursor: not-allowed;
}

.pw-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
    background: var(--c-bg-soft, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pw-card__ph {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--c-text-muted, #6b7280);
}

.pw-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-card__price { font-size: 0.8125rem; font-weight: 600; color: var(--c-text, #111827); }

.pw-card__sub {
    font-size: 0.75rem;
    color: var(--c-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Item atenuado (p.ej. evento expirado) — se puede elegir, pero se ve secundario. */
.pw-card--muted { opacity: 0.5; filter: grayscale(0.6); }
.pw-card--muted:hover { opacity: 0.75; }

.pw-card__state {
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-primary, #2563eb);
}

.pw-card.is-added .pw-card__state { color: var(--c-text-muted, #6b7280); }

.pw__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--c-border, #e5e7eb);
}

.pw__count { font-size: 0.8125rem; color: var(--c-text-muted, #6b7280); }

.pw__foot-actions { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ── Tablet+ : más columnas ── */
@media (min-width: 600px) {
    .pw__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .pw__grid { grid-template-columns: repeat(4, 1fr); }
}