/* =========================================================
   03 · CONTROLS
   Flechas anterior / siguiente. Se centran en el área libre a la izquierda del panel.
   Animación: controls-in
   ========================================================= */
.controls{
  position:fixed;z-index:11;left:calc((100% - var(--panel-w)) / 2);bottom:clamp(24px,5vh,44px);
  display:flex;gap:2px;padding:4px;border-radius:999px;background:#111;border:1px solid var(--line);
  translate:-50% 0;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;
}
.controls.is-open{opacity:1;visibility:visible;transition:opacity .4s,visibility 0s;animation:controls-in .8s var(--ease) .3s backwards}
.controls__btn{display:grid;place-items:center;width:40px;height:34px;border-radius:999px;color:var(--text);transition:background .3s,opacity .3s}
.controls__btn:hover:not(:disabled){background:rgba(255,255,255,.1)}
.controls__btn:disabled{opacity:.3}

@keyframes controls-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:760px){
  .controls{left:50%;bottom:calc(var(--sheet-h) + 16px)}
}