/* Profile highlights (Destacadas). Circle row: Task 6; management pages: Task 4. */

/* ---- Management ---- */
.hl-head-action { margin-left: auto; }
.hl-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hl-list-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hl-list-row form { margin: 0; display: flex; gap: 4px; }
.hl-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hl-list-main span { font-size: 12px; color: var(--text-soft); }
.hl-list-row button:disabled { opacity: .35; cursor: default; }
.hl-back { font-size: 13px; }
.hl-form-title { font-size: 18px; margin: 0; }
.hl-form { display: flex; flex-direction: column; gap: 12px; }
.hl-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
.hl-field input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text-primary); }
.hl-help { margin: 0; font-size: 12.5px; color: var(--text-soft); }
.hl-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hl-pick { display: flex; flex-direction: column; gap: 4px; }
.hl-pick-cell { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.hl-pick-cell img, .hl-pick-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-pick-cell input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; z-index: 1; accent-color: var(--accent); }
.hl-pick-cell:has(input:checked) { outline: 2px solid var(--accent); outline-offset: -2px; }
.hl-cover { font-size: 11.5px; color: var(--text-soft); display: flex; align-items: center; gap: 4px; }
.hl-actions { display: flex; gap: 8px; }
.hl-subtitle { font-size: 14px; margin: 22px 0 8px; }
.hl-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-order li { display: flex; align-items: center; gap: 10px; }
.hl-order img, .hl-order-blank { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.hl-order form { margin: 0; display: flex; gap: 4px; }
@media (max-width: 640px) { .hl-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Circle row (above the tab bar on Galería and Reels) ---- */
.hl-row { list-style: none; margin: 0 0 4px; display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.hl-row::-webkit-scrollbar { display: none; }
.hl-circle { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-primary); text-align: center; }
.hl-ring { width: 76px; height: 76px; padding: 3px; border-radius: 50%; background: conic-gradient(var(--accent), var(--accent-strong), var(--accent)); }
.hl-img { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 2px solid var(--ink, #0a0d10); background: var(--surface-2); font-size: 26px; color: var(--text-soft); }
.hl-img img, .hl-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-title { max-width: 76px; font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-circle:hover .hl-ring { filter: brightness(1.15); }
.hl-new .hl-ring { background: none; border: 1.5px dashed var(--line-hover, var(--line)); }
.hl-new .hl-img { border: 0; background: none; }
.hl-set[hidden] { display: none; }

/* The highlight editor (highlight_edit.html; the rows themselves are clip_editor.css). */
.me-editor .hl-field { margin-bottom: 14px; }
.me-add { margin-top: 12px; padding: 14px 16px; }
.me-add > summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.me-add .hl-pick-grid { margin-top: 10px; }