/* PULSO · metrónomo — paleta: #1F2638 · #2AA6FE · #004280 */
:root{
  --pu-accent:#2AA6FE;
  --pu-accent2:color-mix(in srgb, var(--pu-accent), #fff 45%);
  --pu-accent-soft:color-mix(in srgb, var(--pu-accent), #fff 78%);
  --pu-navy:#1F2638;
  --pu-deep:#004280;
  --pu-navy-hi:color-mix(in srgb, var(--pu-navy), #fff 7%);
  --pu-navy-lo:color-mix(in srgb, var(--pu-navy), #000 22%);
  --pu-screen:color-mix(in srgb, var(--pu-navy), #000 48%);
  --pu-line:color-mix(in srgb, var(--pu-deep), #fff 14%);
  --pu-ink:#EDF3FC;
  --pu-mut:#9AA9C6;
  --pu-disp:'Unbounded',system-ui,sans-serif;
  --pu-mono:'Share Tech Mono',ui-monospace,monospace;
}

/* ---------- botones ---------- */
.pulso-open{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--pu-disp);font-weight:700;font-size:.85rem;letter-spacing:.02em;
  color:var(--pu-deep);background:linear-gradient(155deg,var(--pu-accent2),var(--pu-accent));
  border:none;border-radius:999px;padding:12px 22px;
  box-shadow:0 6px 20px color-mix(in srgb,var(--pu-accent) 35%,transparent);
  transition:transform .22s,box-shadow .22s;margin:6px 0;
}
.pulso-open:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 30px color-mix(in srgb,var(--pu-accent) 50%,transparent)}
.pulso-open:active{transform:scale(.96)}
.pulso-arrow{transition:transform .22s}
.pulso-open:hover .pulso-arrow{transform:translateX(4px)}
.pulso-big{font-size:1.05rem;padding:16px 30px}
.pulso-sm{padding:9px 16px;font-size:.72rem;margin:0}

/* ---------- barra automática ---------- */
.pulso-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(140deg,var(--pu-navy-hi),var(--pu-navy-lo));
  border:1px solid var(--pu-line);border-radius:14px;
  padding:16px 20px;margin:0 0 26px;color:var(--pu-ink);
  box-shadow:0 12px 34px rgba(3,10,25,.35);
}
.pulso-bar-dot{width:11px;height:11px;flex:none;border-radius:3px;background:var(--pu-accent);
  animation:pulat 1s ease-in-out infinite;box-shadow:0 0 14px var(--pu-accent)}
@keyframes pulat{0%,100%{transform:scale(1)}12%{transform:scale(1.55)}}
.pulso-bar-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:160px}
.pulso-bar-txt strong{font-family:var(--pu-disp);font-size:.9rem}
.pulso-bar-txt span{font-family:var(--pu-mono);font-size:.75rem;color:var(--pu-accent)}
.pulso-bar .pulso-open{margin:0}

/* ---------- rejilla [pulso_canciones] ---------- */
.pulso-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:20px 0}
.pg-card{display:flex;flex-direction:column;gap:12px;color:var(--pu-ink);
  background:linear-gradient(160deg,var(--pu-navy-hi),var(--pu-navy-lo));
  border:1px solid var(--pu-line);border-radius:14px;padding:16px;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.pg-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pu-accent) 45%,transparent);
  box-shadow:0 16px 36px rgba(2,8,20,.4)}
.pg-cover{height:110px;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg,hsl(var(--pg-hue) 75% 55%),hsl(calc(var(--pg-hue) + 40) 70% 35%))}
.pg-nota{font-size:2.2rem;color:rgba(4,20,40,.55)}
.pg-thumb{width:100%;height:100%;object-fit:cover}
.pg-info h3{font-size:.95rem;margin:0 0 8px;color:#fff;line-height:1.3}
.pg-chips{display:flex;gap:6px;flex-wrap:wrap}
.pg-chip{font-family:var(--pu-mono);font-size:.65rem;color:var(--pu-mut);
  border:1px solid var(--pu-line);border-radius:999px;padding:3px 9px}
.pg-bpm{color:var(--pu-accent);border-color:color-mix(in srgb,var(--pu-accent) 40%,transparent)}
.pg-card .pulso-open{margin-top:auto;justify-content:center}
.pulso-vacio{color:var(--pu-mut);font-style:italic}

/* ---------- popup ---------- */
.pmp{
  position:fixed;top:92px;right:28px;width:356px;z-index:99990;
  font-family:'Outfit',system-ui,sans-serif;color:var(--pu-ink);
  background:linear-gradient(var(--pu-navy-hi),var(--pu-navy-lo));
  border:1px solid color-mix(in srgb,var(--pu-deep) 70%,var(--pu-accent) 12%);
  border-radius:16px;
  box-shadow:0 30px 70px rgba(2,8,20,.65),0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0;transform:translateY(12px) scale(.97);
}
.pmp.in{opacity:1;transform:none;transition:.28s cubic-bezier(.2,.9,.3,1.2)}
.pmp *,.pmp *::before,.pmp *::after{box-sizing:border-box}
.pmp button{font-family:inherit}

.pmp-head{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:grab;user-select:none;
  background:linear-gradient(color-mix(in srgb,var(--pu-navy),#000 14%),color-mix(in srgb,var(--pu-navy),#000 28%));
  border-bottom:1px solid var(--pu-line);border-radius:16px 16px 0 0}
.pmp-head.dragging{cursor:grabbing}
.pmp-grip{width:14px;height:18px;flex:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--pu-deep),#fff 30%) 1.3px,transparent 1.6px) 0 0/6px 6px}
.pmp-song{min-width:0;flex:1}
.pmp-song h3{font-family:var(--pu-disp);font-weight:700;font-size:.8rem;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--pu-ink)}
.pmp-song p{font-family:var(--pu-mono);font-size:.68rem;color:var(--pu-mut);margin:2px 0 0}
.pmp-song p b{color:var(--pu-accent);font-weight:400}
.pmp-hbtn{width:28px;height:28px;flex:none;border-radius:8px;border:1px solid var(--pu-line);
  background:color-mix(in srgb,var(--pu-navy),#000 32%);color:var(--pu-mut);
  cursor:pointer;font-size:.75rem;transition:.2s;padding:0}
.pmp-hbtn:hover{color:var(--pu-ink);border-color:var(--pu-accent)}
#pmpPlayMini{color:var(--pu-accent)}

.pmp-body{padding:15px}
.pmp.mini .pmp-body,.pmp.mini .pmp-foot{display:none}

.pmp-stage{display:grid;grid-template-columns:1fr 104px;gap:12px}
.pmp-screen{background:var(--pu-screen);border:1px solid color-mix(in srgb,var(--pu-deep),#fff 8%);
  border-radius:12px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.75)}
.pmp-leds{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.pmp-leds .led{width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb,var(--pu-deep),#000 25%);
  border:1px solid color-mix(in srgb,var(--pu-deep),#fff 12%);transition:.08s}
.pmp-leds .led.on{background:var(--pu-accent);border-color:var(--pu-accent2);
  box-shadow:0 0 10px var(--pu-accent)}
.pmp-leds .led.acc.on{background:var(--pu-accent2);border-color:#fff;
  box-shadow:0 0 14px var(--pu-accent),0 0 26px color-mix(in srgb,var(--pu-accent) 60%,transparent)}
.pmp-leds .led.boom{transform:scale(1.45)}
.pmp-bpmbox{display:flex;align-items:baseline;gap:7px}
#pmpBpm{font-family:var(--pu-mono);font-size:2.9rem;line-height:1;color:var(--pu-accent);
  text-shadow:0 0 18px color-mix(in srgb,var(--pu-accent) 55%,transparent)}
#pmpBpm.tick{animation:ptick .12s}
@keyframes ptick{50%{color:var(--pu-accent2);text-shadow:0 0 30px var(--pu-accent2)}}
.pmp-bpmbox small{font-family:var(--pu-mono);font-size:.68rem;color:var(--pu-mut);letter-spacing:.25em}
.pmp-sub{font-family:var(--pu-mono);font-size:.66rem;color:color-mix(in srgb,var(--pu-mut),#000 15%);letter-spacing:.12em}

.pmp-pendwrap{position:relative;background:var(--pu-screen);
  border:1px solid color-mix(in srgb,var(--pu-deep),#fff 8%);border-radius:12px;overflow:hidden;min-height:150px;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.75)}
.pmp-pendwrap::before{content:'';position:absolute;top:26px;left:10px;right:10px;height:34px;
  border-top:1px dashed color-mix(in srgb,var(--pu-deep),#fff 18%);border-radius:50%}
.pmp-base{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:44px;height:8px;
  background:color-mix(in srgb,var(--pu-deep),#000 10%);border-radius:4px}
.pmp-pend{position:absolute;left:50%;top:14px;width:3px;height:calc(100% - 32px);margin-left:-1.5px;
  transform-origin:50% 100%;transition:transform .5s linear;
  background:linear-gradient(var(--pu-accent2),var(--pu-deep))}
.pmp-weight{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--pu-accent2),var(--pu-accent));
  box-shadow:0 0 10px color-mix(in srgb,var(--pu-accent) 55%,transparent)}
.pmp-pivot{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:10px;height:10px;
  border-radius:50%;background:color-mix(in srgb,var(--pu-deep),#fff 22%);z-index:2}

.pmp-transport{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:15px 0 13px}
.pmp-nudges{display:grid;grid-template-columns:1fr 1fr;gap:5px;justify-self:start}
.pmp-nudges button{font-family:var(--pu-mono);font-size:.7rem;padding:7px 9px;border-radius:7px;cursor:pointer;
  background:color-mix(in srgb,var(--pu-navy),#000 32%);border:1px solid var(--pu-line);
  color:var(--pu-mut);transition:.15s}
.pmp-nudges button:hover:not(:disabled){color:var(--pu-accent);border-color:var(--pu-accent)}
.pmp-nudges button:active{transform:scale(.93)}
.pmp-play{position:relative;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;justify-self:center;
  background:linear-gradient(155deg,var(--pu-accent2),var(--pu-accent));color:var(--pu-deep);font-size:1.15rem;
  box-shadow:0 8px 24px color-mix(in srgb,var(--pu-accent) 35%,transparent),inset 0 2px 4px rgba(255,255,255,.5);
  transition:.2s}
.pmp-play:hover{transform:scale(1.06)}
.pmp-play:active{transform:scale(.95)}
.pmp.playing .pmp-play{background:linear-gradient(155deg,color-mix(in srgb,var(--pu-deep),#fff 14%),var(--pu-deep));
  color:var(--pu-accent2);box-shadow:0 8px 24px color-mix(in srgb,var(--pu-accent) 30%,transparent)}
.pmp.playing .pmp-play::after{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--pu-accent) 55%,transparent);animation:pring 1s ease-out infinite}
@keyframes pring{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.pmp-tap{justify-self:end;font-family:var(--pu-disp);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  width:52px;height:52px;border-radius:50%;cursor:pointer;color:var(--pu-accent);
  background:color-mix(in srgb,var(--pu-navy),#000 32%);
  border:2px solid color-mix(in srgb,var(--pu-accent) 50%,transparent);transition:.15s}
.pmp-tap:hover:not(:disabled){border-color:var(--pu-accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--pu-accent) 35%,transparent)}
.pmp-tap.hit{animation:ptaph .18s}
@keyframes ptaph{40%{background:var(--pu-accent);color:var(--pu-deep);transform:scale(.9)}}

.pmp-slider{display:flex;align-items:center;gap:10px;font-size:.68rem;color:var(--pu-mut);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.pmp-mon{font-family:var(--pu-mono);color:var(--pu-accent);min-width:30px;text-align:right;font-size:.8rem}
.pmp input[type=range]{flex:1;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;
  background:color-mix(in srgb,var(--pu-deep),#000 15%);cursor:pointer;margin:0}
.pmp input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--pu-accent2),var(--pu-accent));border:2px solid var(--pu-navy-lo);
  box-shadow:0 0 8px color-mix(in srgb,var(--pu-accent) 60%,transparent)}
.pmp input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--pu-accent);border:2px solid var(--pu-navy-lo)}
.pmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.pmp-field{display:flex;flex-direction:column;gap:5px}
.pmp-field>span{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pu-mut)}
.pmp select{background:color-mix(in srgb,var(--pu-navy),#000 32%);border:1px solid var(--pu-line);
  border-radius:8px;color:var(--pu-ink);font-size:.8rem;padding:7px 9px;cursor:pointer;width:100%}
.pmp select:hover{border-color:var(--pu-accent)}
.pmp-seg{display:flex;border:1px solid var(--pu-line);border-radius:8px;overflow:hidden}
.pmp-seg button{flex:1;padding:6px 0;background:color-mix(in srgb,var(--pu-navy),#000 32%);
  border:none;color:var(--pu-mut);font-size:.9rem;cursor:pointer;transition:.15s}
.pmp-seg button+button{border-left:1px solid var(--pu-line)}
.pmp-seg button.on{background:color-mix(in srgb,var(--pu-accent) 16%,transparent);color:var(--pu-accent)}
.pmp-lock{display:flex;align-items:center;gap:9px;margin-top:13px;padding:9px 12px;border-radius:9px;
  background:color-mix(in srgb,var(--pu-deep) 30%,transparent);
  border:1px solid color-mix(in srgb,var(--pu-accent) 35%,transparent);
  font-size:.76rem;color:var(--pu-accent-soft)}
.pmp-mini{margin-left:auto;background:var(--pu-accent);border:none;border-radius:7px;color:var(--pu-deep);
  font-weight:700;font-size:.7rem;padding:5px 11px;cursor:pointer;text-decoration:none}
.pmp-actions{display:flex;gap:9px;margin-top:13px}
.pmp-save{flex:1;background:linear-gradient(155deg,var(--pu-accent2),var(--pu-accent));border:none;border-radius:9px;
  color:var(--pu-deep);font-weight:700;font-size:.8rem;padding:10px;cursor:pointer;transition:.2s}
.pmp-save:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 6px 18px color-mix(in srgb,var(--pu-accent) 40%,transparent)}
.pmp-reset{background:transparent;border:1px solid var(--pu-line);border-radius:9px;color:var(--pu-mut);
  font-weight:600;font-size:.8rem;padding:10px 14px;cursor:pointer;transition:.2s}
.pmp-reset:hover:not(:disabled){border-color:var(--pu-accent);color:var(--pu-accent)}
.pmp .pmp-lockable:disabled{opacity:.4;cursor:not-allowed}
.pmp-foot{padding:9px;border-top:1px solid var(--pu-line);text-align:center;margin:0;
  font-family:var(--pu-mono);font-size:.58rem;color:color-mix(in srgb,var(--pu-mut),#000 20%);letter-spacing:.08em}

.pmp-toast{position:absolute;left:50%;bottom:-52px;transform:translate(-50%,10px);opacity:0;white-space:nowrap;
  background:var(--pu-navy-lo);border:1px solid color-mix(in srgb,var(--pu-accent) 45%,transparent);
  border-radius:10px;padding:10px 18px;font-size:.8rem;font-weight:600;color:var(--pu-ink);
  box-shadow:0 14px 40px rgba(2,8,20,.5);pointer-events:none;transition:.3s}
.pmp-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:640px){
  .pmp{left:10px;right:10px;top:auto;bottom:12px;width:auto}
  .pulso-bar{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .pulso-bar-dot,.pmp.playing .pmp-play::after{animation:none}
}