/* Ventanas del panel que se manejan con el dedo (14-oct). Gestos en panel-cortina.js, riel en panel.js (rielHTML).
   En la compu (900 px o más) las ventanas quedan como estaban. */

/* ---------- Celu: todas las ventanas suben desde abajo como hoja y bajan enteras ---------- */
@media (max-width:899px){
  .pago:not(.filtro-hoja){opacity:1;transform:translateY(calc(100% + 16px));transition:transform .26s cubic-bezier(.4,0,1,1)}
  .pago:not(.filtro-hoja).ver{opacity:1;transform:none;transition:transform .5s cubic-bezier(.32,.72,0,1)}
  .pago .agarre{width:40px;height:5px;border-radius:999px;background:#D5D7CE;margin:8px auto 0}
  .pago.arrastrando,.hoja.arrastrando,.ft-dialogo.arrastrando{transition:none!important}
  .pago,.hoja{will-change:transform}

  /* Recortar la foto: también hoja de abajo, con su manija */
  .ft-dialogo{margin:auto 0 0;width:100%;max-width:100%;max-height:calc(100dvh - 24px);border-radius:22px 22px 0 0;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -10px 40px -10px rgba(21,22,28,.35)}
  .ft-dialogo[open]{animation:hoja-sube .5s cubic-bezier(.32,.72,0,1)}
  .ft-dialogo.saliendo{transform:translateY(calc(100% + 16px));transition:transform .26s cubic-bezier(.4,0,1,1)}
  .ft-dialogo .ft-caja{padding-top:22px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));position:relative}
  .ft-dialogo .ft-caja::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:999px;background:#D5D7CE}
}
@keyframes hoja-sube{from{transform:translateY(100%)}}

/* ---------- Deslizá para canjear ---------- */
/* En pantallas táctiles (celu o tablet) el canje es un riel; en la compu con mouse queda el botón de siempre. */
.desliza{display:none}
@media (max-width:899px),(pointer:coarse){
  .acc .btn.canj,.fila-acc .btn.canj{display:none}
  .desliza{--x:0px;--p:0;position:relative;display:flex;align-items:center;flex:1;min-width:200px;height:52px;padding:4px;border-radius:999px;background:var(--ok-suave);box-shadow:inset 0 0 0 1.5px #BFE3CD;overflow:hidden;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
  .desliza-pista{position:absolute;inset:4px;border-radius:999px;overflow:hidden}
  .desliza-relleno{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:999px;background:var(--ok);transform:translateX(calc(var(--x) - 100% + 44px));transition:transform .45s cubic-bezier(.32,.72,0,1)}
  .desliza-txt,.desliza-ok{position:absolute;inset:0 14px 0 56px;display:flex;align-items:center;justify-content:center;gap:2px;font-weight:600;font-size:.98rem;white-space:nowrap;pointer-events:none}
  .desliza-txt{color:var(--ok);opacity:calc(1 - var(--p) * 1.7);transition:opacity .3s ease}
  .desliza-txt svg{width:16px;height:16px;margin-right:-4px;opacity:.7}
  .desliza-ok{inset:0 56px 0 14px;color:#fff;opacity:0}
  .desliza.canjeando .desliza-ok{opacity:1;transition:opacity .2s ease .1s}
  .desliza-bola{position:relative;z-index:1;flex:none;width:44px;height:44px;padding:0;border:none;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 8px -2px rgba(21,22,28,.35);transform:translateX(var(--x));transition:transform .45s cubic-bezier(.32,.72,0,1);touch-action:pan-y;cursor:grab}
  .desliza-bola svg{width:20px;height:20px}
  .desliza-bola:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
  .desliza.arrastrando .desliza-bola{cursor:grabbing}
  .desliza.arrastrando .desliza-bola,.desliza.arrastrando .desliza-relleno,.desliza.arrastrando .desliza-txt{transition:none}
  .desliza.canjeando .desliza-bola{transition:transform .2s ease}
  .desliza.canjeando .desliza-relleno{transition:transform .2s ease}
  .desliza.amago .desliza-bola{animation:desliza-amago .7s cubic-bezier(.32,.72,0,1)}
}
@media (max-width:899px){.fila .acc .desliza{min-width:0}}
@keyframes desliza-amago{0%,100%{transform:translateX(0)}35%{transform:translateX(26px)}}

@media (prefers-reduced-motion:reduce) and (max-width:899px){
  .pago:not(.filtro-hoja),.pago:not(.filtro-hoja).ver,.filtro-hoja,.filtro-hoja.ver{transform:none;transition:opacity .2s ease}
  .pago:not(.ver){opacity:0}
  .pago.ver{opacity:1}
  .ft-dialogo[open]{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .desliza.amago .desliza-bola{animation:none}
  .desliza-bola,.desliza-relleno{transition:none}
}