/* Reproductor y cifrado compartidos (index.html y dashboard.html): tarjeta de
   canción, "Reproducir todo" y repetir, corazón, línea de tiempo y visor de
   cifrado. La lógica vive en reproductor.js. Usa las variables de color de
   la página (--ac, --ink, --muted…). */
.todo-btn{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ac);background:transparent;color:var(--ac);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.todo-btn.on{background:var(--ac);color:var(--on-ac)}
.repetir-btn{position:relative;width:34px;height:34px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--shade) 15%,transparent);background:transparent;color:var(--muted2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.repetir-btn.on{border-color:var(--ac);color:var(--ac)}
.repetir-1{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;border-radius:999px;background:var(--ac);color:var(--on-ac);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.bloque-lista{display:flex;flex-direction:column;gap:8px}
.can{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);gap:12px 8px;align-items:center;padding:14px 16px;background:var(--card);border-radius:12px;box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 5%,transparent);transition:background .15s}
.can-num{grid-column:1;grid-row:1;align-self:start;padding-top:3px}
.can-info{grid-column:2/-1;grid-row:1;padding-right:68px}
.can .like{grid-column:3;grid-row:1;justify-self:end;align-self:start;min-width:56px}
.can .tono{grid-column:2;grid-row:2}
.can .play{grid-column:3;grid-row:2}
.can.sin-play .tono{grid-column:2/-1}
.play.oculto{display:none}
.can.sonando{background:var(--sel)}
.can-num{font-size:12px;font-weight:700;color:var(--muted3);font-variant-numeric:tabular-nums}
.can-info{min-width:0}
.can-t{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.can-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:3px}
.can-meta strong{color:var(--ink);font-weight:600}
.tono{display:flex;align-items:center;justify-content:center;gap:4px;min-height:36px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:800;background:var(--ac-lt);color:var(--ac);white-space:nowrap;border:1.5px solid transparent;font-family:inherit}
.tono-btn{cursor:pointer;border-color:var(--ac)}
.tono-btn:hover{background:var(--ac);color:var(--on-ac)}
.play{display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 10px;border-radius:8px;border:1.5px solid var(--ac);background:transparent;color:var(--ac);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;font-family:inherit}
.play.on{background:var(--ac);color:var(--on-ac)}
.play.oculto{visibility:hidden;pointer-events:none}
.like{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;line-height:1}
.like-btn{display:flex;padding:2px;border:0;background:transparent;color:var(--muted3);cursor:pointer}
.like-btn svg{display:block;transition:transform .12s}
.like-btn:hover svg{transform:scale(1.12)}
.like.mio .like-btn{color:var(--like)}
.like-n{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.like.mio .like-n{color:var(--like)}
.can-prog{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:10px;margin-top:-2px}
.can-prog-t{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;min-width:32px}
.can-prog-t:last-child{text-align:right}
.prog-r{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:18px;margin:0;background:transparent;cursor:pointer}
.prog-r:disabled{cursor:default}
.prog-r::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(var(--ac),var(--ac)) 0 0/var(--p,0%) 100% no-repeat,color-mix(in srgb,var(--shade) 14%,transparent)}
.prog-r::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:var(--ac)}
.prog-r:disabled::-webkit-slider-thumb{visibility:hidden}
.prog-r::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in srgb,var(--shade) 14%,transparent)}
.prog-r::-moz-range-progress{height:4px;border-radius:2px;background:var(--ac)}
.prog-r::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ac)}
.prog-r:disabled::-moz-range-thumb{visibility:hidden}
.prog-r:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
.cifrado-overlay{position:fixed;inset:0;z-index:5000;background:color-mix(in srgb,var(--scrim) 40%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.cifrado-modal{width:min(100%,760px);max-height:90vh;display:flex;flex-direction:column;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px color-mix(in srgb,var(--shadow) 28%,transparent)}
.cifrado-head{padding:16px 20px 12px;border-bottom:1px solid var(--edge);flex:none}
.cifrado-body{padding:16px 20px 20px;overflow-y:auto;flex:1 1 auto;min-height:0}
.cifrado-hoja{font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.45;overflow-x:auto;padding:4px 0}
.cifrado-linea{white-space:pre;min-height:1.45em}
.cifrado-ctrl{font-size:13px;font-weight:800;border:1px solid color-mix(in srgb,var(--shade) 18%,transparent);border-radius:6px;background:var(--card);color:var(--ink);padding:4px 10px;cursor:pointer;min-width:38px}
.cifrado-ctrl:hover{border-color:var(--ink)}
a.cifrado-fuente{font-size:12px;border-bottom:1px solid var(--ac)}
@media (max-width:860px){
  .can{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 8px;padding:14px;border-radius:14px}
  .can-info{grid-column:1/-1;grid-row:1;padding-left:26px;padding-right:68px}
  .can-num{grid-column:1;grid-row:1;padding-top:4px}
  .can .like{grid-column:2;grid-row:1;justify-self:end;align-self:start;min-width:56px}
  .can .tono{grid-column:1;grid-row:2;min-height:40px}
  .can .play{grid-column:2;grid-row:2;min-height:40px}
  .can.sin-play .tono{grid-column:1/-1}
  .play.oculto{display:none}
  .can-t{font-size:16px}
  .can-meta{font-size:13px;margin-top:3px;gap:4px}
  .can-prog{grid-row:3}
  .prog-r{height:28px}
  .prog-r::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6px}
  .prog-r::-moz-range-thumb{width:16px;height:16px}
  .cifrado-overlay{padding:0}
  .cifrado-modal{width:100%;height:100%;max-height:none;border-radius:0}
  .cifrado-head,.cifrado-body{padding-left:16px;padding-right:16px}
}