/* Celular: deslizar filas, completar con animación y deshacer. Solo transform/opacity/height. */
[data-swipe-id]{position:relative;isolation:isolate;touch-action:pan-y;-webkit-user-select:none;user-select:none}
[data-swipe-id].sw-on{overflow:hidden}
[data-swipe-id].sw-on>*{position:relative;z-index:2;transform:translateX(var(--sx,0));transition:none}
[data-swipe-id].sw-on::after{content:'';position:absolute;inset:0;z-index:1;background:var(--sw-face,#fff);border-radius:inherit;transform:translateX(var(--sx,0))}
[data-swipe-id].sw-on::before{position:absolute;inset:0;z-index:0;display:flex;align-items:center;padding:0 22px;border-radius:inherit;font:700 14px/1 -apple-system,system-ui,sans-serif;letter-spacing:.02em;color:#fff;transition:background-color .15s}
[data-swipe-id].sw-left::before{content:'Borrar';justify-content:flex-end;background:#c9c9d1}
[data-swipe-id].sw-left.sw-armed::before{background:#ff0043}
[data-swipe-id].sw-right::before{content:'Hecho';justify-content:flex-start;background:#c9c9d1}
[data-swipe-id][data-swipe=social].sw-right::before{content:'Publicada'}
[data-swipe-id].sw-right.sw-armed::before{background:#1ea86a}
[data-swipe-id]:not(.sw-on)>*{transition:transform .28s cubic-bezier(.23,1,.32,1)}
/* Completar: el círculo se llena de verde con un latido y el título se tacha */
@media (prefers-reduced-motion:no-preference){
 .is-celebrating :is(.ag-check,.hm-check,.db-next-done){background:#1ea86a!important;border-color:#1ea86a!important;color:#fff!important;animation:sw-pop .42s cubic-bezier(.34,1.56,.64,1)}
 .is-celebrating :is(.ag-main strong,.hm-task strong,.db-next-title){text-decoration:line-through;text-decoration-color:#1ea86a;opacity:.55;transition:opacity .3s}
 .is-collapsing{transition:height .3s cubic-bezier(.23,1,.32,1),opacity .22s ease,margin .3s,padding .3s!important;opacity:0;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}
}
@keyframes sw-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
/* Aviso con «Deshacer» */
#toast{display:flex;align-items:center;gap:14px}
#toast[hidden]{display:none}
#toast .toast-action{all:unset;cursor:pointer;font-weight:800;color:#ff4d7a;padding:6px 4px;margin-left:auto;white-space:nowrap}
/* Celular: zonas de toque más grandes y filas más cómodas */
@media (max-width:700px){
 #content :is(.ag-check,.hm-check){width:34px!important;height:34px!important;min-width:34px}
 #content .hm-list li{padding:12px 0}
 #content .ag-row{padding:14px 12px}
 #content .round-edit{min-width:40px;min-height:40px}
}

@media (max-width:700px){
 /* Aviso: ancho completo arriba de la barra, sin correrse de costado */
 #toast{left:14px!important;right:14px!important;max-width:none!important;transform:none!important;bottom:calc(104px + env(safe-area-inset-bottom))!important;border-radius:16px;padding:14px 18px;font-size:15px;font-weight:600;box-shadow:0 14px 34px -14px rgba(0,0,0,.45)}
 #toast:not([hidden]){animation:sw-toast .32s cubic-bezier(.23,1,.32,1)}
 /* Barra de abajo: el elegido es una pastilla con aire a los costados (el texto no toca el borde) */
 .topbar #nav a{font-size:10.5px!important;letter-spacing:-.01em;padding:9px 2px 8px!important}
 .topbar #nav a:is([aria-current],.active){border-radius:22px!important;padding:9px 6px 8px!important;flex:1.25!important}
 /* La hora del iPhone no se pisa con el contenido al bajar */
 body::after{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);z-index:60;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none}
 html[data-theme=dark] body::after{background:rgba(21,22,28,.88)}
}
@keyframes sw-toast{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:700px){
 /* Festival: índice fijo arriba para saltar a cada sección */
 .sec-jump{position:sticky;top:env(safe-area-inset-top);z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px 14px;padding:10px 20px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(37,38,50,.06)}
 .sec-jump::-webkit-scrollbar{display:none}
 .sec-jump button{all:unset;flex:none;padding:8px 14px;border-radius:999px;background:#f2f2f5;font:600 13px/1 -apple-system,system-ui,sans-serif;color:#252632;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
 .sec-jump button.on{background:#ff0043;color:#fff}
 html[data-theme=dark] .sec-jump{background:rgba(21,22,28,.92);border-color:rgba(255,255,255,.06)}html[data-theme=dark] .sec-jump button{background:rgba(255,255,255,.08);color:#e6e6ec}
 /* Artistas: tarjetas compactas, se ven más por pantalla */
 #content .artist-card{grid-template-columns:64px minmax(0,1fr)!important;gap:12px!important;padding:10px!important;align-items:center!important}
 #content .artist-card .artist-cover{width:64px!important;height:64px!important;border-radius:14px!important;font-size:20px!important}
 #content .artist-card .artist-body>*{margin-top:2px!important;margin-bottom:2px!important}
 /* Barra: primero el resultado, después el formulario */
 #bar-form>.grid{display:flex!important;flex-direction:column}
 #bar-form .bar-results{order:-1}
 /* Que el final de cada pantalla no quede tapado por la barra de abajo */
 .workspace main,#main{padding-bottom:calc(120px + env(safe-area-inset-bottom))!important}
}
/* Tirar para actualizar */
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 4px);z-index:70;width:38px;height:38px;margin-left:-19px;border-radius:50%;background:#fff;box-shadow:0 8px 22px -8px rgba(0,0,0,.35);display:grid;place-items:center;opacity:0;transform:translateY(calc(var(--py,0px) - 44px));pointer-events:none}
.ptr.show{opacity:1}
.ptr.leaving{transition:transform .26s cubic-bezier(.4,0,1,1),opacity .26s ease;opacity:0}
.ptr.spin{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.ptr i{width:18px;height:18px;border-radius:50%;border:2.5px solid #d6d6dc;border-top-color:#ff0043;transform:rotate(var(--pr,0deg))}
.ptr.armed i{border-color:#ffd0dc;border-top-color:#ff0043}
.ptr.spin i{animation:ptr-spin .8s linear infinite;border-color:#ffd0dc;border-top-color:#ff0043}
@keyframes ptr-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
html[data-theme=dark] .ptr{background:#2a2b36}
/* Pastilla deslizante de la barra de navegación (compu y celu) */
#nav{position:relative}
#nav .nav-pill{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:#ff0043;box-shadow:0 8px 20px -10px rgba(255,0,67,.75);pointer-events:none;transition:transform .5s cubic-bezier(.34,1.18,.64,1),width .5s cubic-bezier(.34,1.18,.64,1),height .5s cubic-bezier(.34,1.18,.64,1)}
#nav a{position:relative;z-index:1}
html #nav a:is([aria-current],.active),html[data-theme=dark] #nav a:is([aria-current],.active),html:not([data-theme=dark]) #nav a:is([aria-current],.active){background:transparent!important;box-shadow:none!important;color:#fff!important}
#nav a{transition:color .35s ease!important}
@media (max-width:700px){#nav .nav-pill{border-radius:22px}}
@media (prefers-reduced-motion:reduce){#nav .nav-pill{transition:none}}
/* Movimiento general más suave */
@media (prefers-reduced-motion:no-preference){
 dialog[open]{animation-duration:.38s!important;animation-timing-function:cubic-bezier(.16,1,.3,1)!important}
 @media (max-width:700px){dialog[open]{animation-duration:.46s!important}}
 button:not(:disabled):active,.button:active{transition-duration:.12s!important}
 .sc-chip,.hm-list li,.ag-row{transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s ease,background-color .2s}
}


/* La carga se desvanece suave al terminar */
#boot-loader{transition:opacity .3s ease}
#boot-loader.is-out{opacity:0;pointer-events:none}