/* KlipTok v17 · interacción social + visor de infografías + guardar sonido (kt-v17.css)
   Solo AÑADE reglas con prefijo k17-. Quitar: borrar este archivo y su <link>. */

/* ===== Panel de interacción (columna derecha de cada tarjeta) ===== */
.k17-sep { width: 1.75rem; height: 2px; border-radius: 2px; background: rgba(255,255,255,.3); flex-shrink: 0; margin: .1rem 0; }
.k17-rail-btn { position: relative; }
.k17-score, .k17-avg { font-size: 10px; font-weight: 700; line-height: 1.1; min-width: 1ch; text-align: center; }
.k17-up[aria-pressed="true"]   { color: #ff7a45; background: rgba(255,122,69,.24); border-color: rgba(255,122,69,.55); }
.k17-down[aria-pressed="true"] { color: #7c9bff; background: rgba(124,155,255,.24); border-color: rgba(124,155,255,.55); }
.k17-rev[data-mine="1"] svg { color: #fbbf24; fill: #fbbf24; }
.k17-badge { position: absolute; top: -.3rem; right: -.3rem; font-size: .8rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); pointer-events: none; }
.k17-rail-btn:focus-visible, .k17-pick button:focus-visible, .k17-snd:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
.k17-busy { opacity: .55; pointer-events: none; }

/* ===== Selector flotante de reacciones ===== */
.k17-pick { position: absolute; z-index: 40; display: flex; gap: .15rem; padding: .3rem .4rem; border-radius: 9999px;
  background: rgba(15,18,36,.94); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: k17-pop .16s ease-out; transform-origin: right center; }
.k17-pick[hidden] { display: none; }
.k17-pick button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .25rem .4rem; border: 0; border-radius: 9999px; background: transparent; color: #e8ebf7; cursor: pointer; transition: transform .12s; }
.k17-pick button:hover, .k17-pick button:focus-visible { transform: scale(1.22) translateY(-2px); background: rgba(255,255,255,.1); }
.k17-pick button[aria-checked="true"] { background: rgba(52,211,153,.25); box-shadow: inset 0 0 0 1px rgba(52,211,153,.7); }
.k17-pick .e { font-size: 1.5rem; line-height: 1; }
.k17-pick small { font: 700 9px/1 system-ui, sans-serif; opacity: .85; }
@keyframes k17-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ===== Guardar sonido: va junto al autor de la pista, NO en el panel social ===== */
.k17-snd { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; padding: .22rem .6rem; border-radius: 9999px; cursor: pointer;
  font: 600 10px/1.2 system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); }
.k17-snd:hover { background: rgba(0,0,0,.65); }
.k17-snd[aria-pressed="true"] { background: rgba(124,58,237,.75); border-color: rgba(196,181,253,.7); }
.k17-snd svg { width: .8rem; height: .8rem; }

/* ===== Visor de infografías (InfographViewer) ===== */
.feed-card[data-cat="infographic"] .k17-info { position: relative; width: 100%; height: 100%; background: #0b0f1d; }
.k17-info-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; border-radius: inherit; outline: none; overscroll-behavior-y: auto; }
.k17-info-scroll::-webkit-scrollbar { display: none; }
.k17-info-scroll:focus-visible { box-shadow: inset 0 0 0 3px #34d399; }
.feed-card[data-cat="infographic"] .k17-info img { display: block; width: 100% !important; height: auto !important; min-height: 0 !important; object-fit: contain !important; object-position: top center; }
.k17-info-bar { position: absolute; top: .75rem; bottom: .75rem; right: .3rem; width: 5px; border-radius: 9999px; background: rgba(255,255,255,.18); z-index: 25; pointer-events: none; opacity: 0; transition: opacity .25s; }
.k17-info[data-scrollable="1"] .k17-info-bar { opacity: 1; }
.k17-info-thumb { position: absolute; left: 0; right: 0; top: 0; height: 20%; border-radius: 9999px; background: linear-gradient(180deg, #34d399, #8b5cf6); box-shadow: 0 0 8px rgba(139,92,246,.6); }
.k17-info-pct { position: absolute; left: .75rem; bottom: 5.2rem; z-index: 25; padding: .15rem .55rem; border-radius: 9999px; font: 700 10px/1.4 system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.55); pointer-events: none; opacity: 0; transition: opacity .25s; }
.k17-info[data-scrollable="1"] .k17-info-pct { opacity: 1; }
.k17-info-hint { position: absolute; left: 50%; bottom: 5.4rem; transform: translateX(-50%); z-index: 25; padding: .3rem .8rem; border-radius: 9999px; font: 600 11px/1 system-ui, sans-serif; color: #fff;
  background: rgba(0,0,0,.6); pointer-events: none; animation: k17-bob 1.4s ease-in-out infinite; transition: opacity .4s; }
.k17-info[data-moved="1"] .k17-info-hint, .k17-info:not([data-scrollable="1"]) .k17-info-hint { opacity: 0; }
@keyframes k17-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
/* En escritorio el feed fuerza tarjetas 16:9 (kt-layout). Las infografías son tarjetas verticales 9:16, no reels. */
@media (min-width: 1024px) {
  #feed-container .feed-card[data-cat="infographic"] { width: min(100%, calc((100cqh - 1rem) * .5625)) !important; }
}
@media (prefers-reduced-motion: reduce) { .k17-info-scroll { scroll-behavior: auto; } .k17-info-hint, .k17-pick { animation: none; } }
body.clean-screen .k17-info-hint, body.clean-screen .k17-info-pct { display: none; }

/* ===== Reseñas (dentro del panel modal) ===== */
.k17-stars { display: inline-flex; gap: .15rem; }
.k17-stars button { background: none; border: 0; padding: .1rem; cursor: pointer; font-size: 1.6rem; line-height: 1; color: #cbd5e1; transition: transform .1s, color .1s; }
.dark .k17-stars button { color: #475569; }
.k17-stars button[data-on="1"] { color: #f59e0b; }
.k17-stars button:hover { transform: scale(1.15); }
.k17-stars button:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; border-radius: 6px; }
.k17-ro { color: #f59e0b; letter-spacing: .05em; }

/* ===== Vídeo → GIF / Sticker ===== */
.k17c video { width: 100%; max-height: 38vh; background: #000; border-radius: .75rem; display: block; }
.k17c canvas.k17c-out, .k17c img.k17c-out { max-width: 100%; max-height: 34vh; border-radius: .75rem; display: block; margin: 0 auto;
  background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% / 14px 14px; }
.k17c label { display: block; font: 600 11px/1.3 system-ui, sans-serif; margin: .55rem 0 .2rem; opacity: .8; }
.k17c .row { display: flex; gap: .5rem; align-items: center; }
.k17c .row > * { flex: 1; min-width: 0; }
.k17c input[type=text], .k17c select { width: 100%; padding: .45rem .6rem; border-radius: .6rem; border: 1px solid rgba(148,163,184,.5); background: transparent; color: inherit; font-size: .8rem; }
.k17c input[type=range] { width: 100%; padding: 0; }
.k17c .bar { height: 6px; border-radius: 9999px; background: rgba(148,163,184,.3); overflow: hidden; margin-top: .6rem; }
.k17c .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #10b981, #7c3aed); transition: width .1s; }
.k17c .btn { cursor: pointer; padding: .55rem .9rem; border-radius: .75rem; border: 1px solid rgba(148,163,184,.5); background: transparent; color: inherit; font: 600 .78rem system-ui, sans-serif; }
.k17c .btn.pri { border: 0; color: #fff; background: linear-gradient(90deg, #10b981, #7c3aed); }
.k17c .btn:disabled { opacity: .5; cursor: progress; }
.k17c .note { font: 500 10.5px/1.45 system-ui, sans-serif; opacity: .7; margin-top: .5rem; }