/* Playlist create/edit form — page-specific styles only (design tokens, base components and
   the title bar live in carteleria.css). */

/* — Diseño radio-cards — */
.pe-option-group { display: flex; gap: 12px; }
.pe-option {
  flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  border: 1px solid var(--color-divider); cursor: pointer;
}
.pe-option:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pe-option:has(input:checked) {
  border: 2px solid var(--color-accent); padding: 7px;
  background: var(--color-accent-100);
}
.pe-option-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pe-option-thumb { aspect-ratio: 16/9; background: var(--color-neutral-300); max-width: 100%; margin: 0 auto; }
.pe-option-thumb.vertical { aspect-ratio: 9/16; max-width: 96px; }
.pe-option-thumb-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: none; }
.pe-option-thumb-collage span { background: var(--color-neutral-300); }
/* active card: diagram cells switch from neutral to the accent tint (per the handoff, only the
   selected design's diagram is tinted — the other stays neutral gray) */
.pe-option:has(input:checked) .pe-option-thumb:not(.pe-option-thumb-collage) { background: var(--color-accent-300); }
.pe-option:has(input:checked) .pe-option-thumb-collage span { background: var(--color-accent-300); }
.pe-option-body { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 4px; }
.pe-option-body strong { font-size: 13px; }
.pe-option-body span { font-size: 11px; color: var(--color-neutral-700); }

/* — note replacing the Collage-only fields when Secuencial is selected — */
.pe-collage-note {
  padding: 14px 16px; background: var(--color-surface);
  box-shadow: inset 3px 0 0 var(--color-neutral-500);
  font-size: 12px; color: var(--color-neutral-700);
}