/*
 * Ajustes → Acortador de enlaces. Tokens del tema (claro y oscuro).
 * Animaciones: órbitas del encabezado, brillo y «compresión» del botón Acortar, palomita al terminar, tarjeta del
 * resultado que entra, eslabón que se dibuja, código que se descifra, partículas, subrayado y QR que se revela.
 * Con «reducir movimiento» base.css las acorta a casi cero.
 */
.sl{max-width:860px}
.sl-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:calc(var(--r) + 6px);padding:26px 22px 22px;background:var(--login-grad);color:#fff;box-shadow:var(--shadow-2);margin:6px 0 18px;
  animation:sl-rise .5s var(--ease) both}
.sl-orbs{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sl-orbs i{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.16)}
.sl-orbs i:nth-child(1){width:260px;height:260px;right:-80px;top:-110px;animation:sl-orb 14s linear infinite}
.sl-orbs i:nth-child(2){width:150px;height:150px;right:60px;top:-50px;border-color:rgba(242,111,34,.45);border-style:dashed;animation:sl-orb 22s linear infinite reverse}
.sl-orbs i:nth-child(3){width:340px;height:340px;left:-160px;bottom:-240px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%);border:0}
@keyframes sl-orb{to{transform:rotate(360deg)}}
.sl-kick{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);font-size:var(--fs-caption);font-weight:700;letter-spacing:.02em}
.sl-kick svg{width:15px;height:15px;color:var(--brand-orange-m)}
.sl-h1{margin:12px 0 6px;font-family:var(--font-brand);font-size:var(--fs-title1);line-height:1.1;letter-spacing:-.01em}
.sl-lead{margin:0 0 18px;max-width:560px;color:rgba(255,255,255,.82);font-size:var(--fs-subhead);line-height:1.45}
.sl-ro{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.12);font-size:var(--fs-footnote)}
.sl-ro svg{width:16px;height:16px;flex:none;margin-top:1px}

/* Campo del enlace largo */
.sl-form{display:grid;gap:12px}
.sl-field{display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border-radius:var(--r);padding:6px 6px 6px 14px;box-shadow:0 8px 28px rgba(5,15,45,.28);
  transition:box-shadow .2s,transform .25s var(--ease)}
.sl-field:focus-within{box-shadow:0 8px 28px rgba(5,15,45,.28),0 0 0 3px var(--brand-orange-m)}
.sl-fic{color:var(--muted);display:grid}
.sl-fic svg{width:20px;height:20px;transition:transform .4s var(--ease),color .2s}
.sl-field.has .sl-fic svg{color:var(--tint);transform:rotate(-45deg)}
.sl-url{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;font-size:var(--fs-body);padding:10px 0;outline:none;transition:letter-spacing .5s var(--ease),opacity .5s,filter .5s}
.sl-url::placeholder{color:var(--muted)}
.sl-paste{flex:none;border:0;border-radius:var(--r-sm);padding:9px 12px;background:var(--fill);color:var(--ink-2);font:inherit;font-size:var(--fs-footnote);font-weight:650;cursor:pointer}
.sl-paste:hover{background:var(--blue-t);color:var(--tint)}
.sl-field.squeeze .sl-url{letter-spacing:-.32em;opacity:.35;filter:blur(1px)}
.sl-field.shake,.sl-go.shake,.sl-alias .in.shake,.in.shake{animation:sl-shake .42s}
@keyframes sl-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

/* Personalizar */
.sl-more{border-radius:var(--r);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.sl-more summary{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;list-style:none;font-weight:650;font-size:var(--fs-footnote)}
.sl-more summary::-webkit-details-marker{display:none}
.sl-more summary svg{width:16px;height:16px}
.sl-more summary small{color:rgba(255,255,255,.7);font-weight:500}
.sl-more summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.sl-more[open] summary::after{transform:rotate(-135deg)}
.sl-opts{background:var(--surface);color:var(--ink);border-radius:0 0 var(--r) var(--r);padding:14px 14px 6px;animation:sl-drop .3s var(--ease)}
@keyframes sl-drop{from{opacity:0;transform:translateY(-6px)}}
.sl-alias{display:flex;align-items:stretch}
.sl-pre{display:flex;align-items:center;padding:0 10px;border:1px solid var(--line-2);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--fill);color:var(--ink-2);font-weight:650;font-size:var(--fs-footnote);white-space:nowrap}
.sl-alias .in{border-radius:0 var(--r-sm) var(--r-sm) 0;min-width:0}
.fhint.bad{color:var(--danger)}
.sl-exp .seg-b{font-size:var(--fs-caption)}

/* Botón Acortar */
.sl-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border:0;border-radius:var(--r);cursor:pointer;
  background:linear-gradient(135deg,var(--brand-orange) 0%,var(--brand-orange-d) 100%);color:#fff;font:inherit;font-size:var(--fs-body);font-weight:750;letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(242,111,34,.38);transition:transform .2s var(--ease),box-shadow .2s,background .35s}
.sl-go::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sl-shine 3.6s ease-in-out infinite 1s}
@keyframes sl-shine{0%,60%{left:-60%}100%{left:130%}}
.sl-go:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(242,111,34,.45)}
.sl-go:active{transform:scale(.97)}
.sl-go svg{width:20px;height:20px}
.sl-go-ic{display:grid;transition:transform .3s var(--ease)}
.sl-go:hover .sl-go-ic{transform:translateX(5px)}
.sl-go-dots,.sl-go-ok{position:absolute;right:20px;display:none}
.sl-go-dots i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#fff;animation:sl-dot .8s ease-in-out infinite}
.sl-go-dots i:nth-child(2){animation-delay:.12s}.sl-go-dots i:nth-child(3){animation-delay:.24s}
@keyframes sl-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}
.sl-go.busy{pointer-events:none;animation:sl-pulse 1s ease-in-out infinite}
.sl-go.busy::before{animation:sl-shine .9s linear infinite}
.sl-go.busy .sl-go-ic{display:none}
.sl-go.busy .sl-go-dots{display:block;position:static}
@keyframes sl-pulse{50%{box-shadow:0 0 0 8px rgba(242,111,34,.22),0 10px 24px rgba(242,111,34,.38)}}
.sl-go.ok{background:linear-gradient(135deg,#22A262,#1E7A4C);box-shadow:0 10px 24px rgba(30,122,76,.4)}
.sl-go.ok .sl-go-ic{display:none}
.sl-go.ok .sl-go-ok{display:grid;position:static;animation:sl-pop .45s var(--ease)}
.sl-go.ok .sl-go-ok svg{stroke-dasharray:30;stroke-dashoffset:30;animation:sl-draw .4s .1s var(--ease) forwards}
@keyframes sl-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes sl-draw{to{stroke-dashoffset:0}}
.sl-err{margin:0;min-height:0;color:#FFD9C7;font-size:var(--fs-footnote);font-weight:600;max-height:0;opacity:0;transition:opacity .2s,max-height .25s}
.sl-err.on{max-height:80px;opacity:1}
.sheet .sl-err{color:var(--danger);margin-bottom:10px}

/* Resultado */
.sl-result{margin:0 0 20px}
.sl-card{position:relative;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:20px;box-shadow:var(--shadow-1);overflow:hidden}
.sl-result .sl-card{opacity:0;transform:translateY(18px) scale(.97);filter:blur(4px)}
.sl-result.show .sl-card{opacity:1;transform:none;filter:none;transition:opacity .45s var(--ease),transform .5s var(--ease),filter .45s}
.sl-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--blue),var(--brand-orange));transform:scaleX(0);transform-origin:left;transition:transform .8s .2s var(--ease)}
.sl-result.show .sl-card::before{transform:scaleX(1)}
.sl-from{color:var(--muted);font-size:var(--fs-footnote);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .6s .3s,transform .6s .3s var(--ease)}
.sl-from span{background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/0 1.5px;transition:background-size .5s .25s var(--ease)}
.sl-result.show .sl-from{opacity:.65;transform:scale(.96)}
.sl-result.show .sl-from span{background-size:100% 1.5px}
.sl-link-svg{display:block;margin-left:auto!important;margin-right:auto!important;width:120px;height:24px;margin:8px 0 6px;fill:none;stroke:var(--brand-orange);stroke-width:2.2;stroke-linecap:round}
.sl-link-svg *{stroke-dasharray:80;stroke-dashoffset:80}
.sl-result.show .sl-link-svg *{animation:sl-draw .6s .25s var(--ease) forwards}
.sl-result.show .sl-link-svg rect{animation-delay:.45s}
.sl-to{position:relative;display:inline-block;max-width:100%}
.sl-short{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;text-decoration:none;font-size:clamp(22px,5.4vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--ink);word-break:break-all}
.sl-dom{color:var(--tint);opacity:0;transform:translateX(-10px);display:inline-block;transition:opacity .35s .3s,transform .4s .3s var(--ease)}
.sl-result.show .sl-dom{opacity:1;transform:none}
.sl-code{font-family:var(--f-mono,"JetBrains Mono",ui-monospace,Menlo,monospace);color:var(--cta-ink)}
.sl-ch{display:inline-block;opacity:.45;transform:translateY(-3px)}
.sl-ch.set{opacity:1;transform:none;animation:sl-set .35s var(--ease)}
@keyframes sl-set{0%{transform:translateY(-10px) scale(1.3);color:var(--brand-orange)}100%{transform:none}}
.sl-ul{position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--brand-orange));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.sl-result.done .sl-ul{transform:scaleX(1)}
.sl-burst{position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none}
.sl-burst i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--brand-orange);opacity:0}
.sl-burst i:nth-child(odd){background:var(--blue-m);width:5px;height:5px}
.sl-result.done .sl-burst i{animation:sl-burst .8s var(--ease) forwards}
@keyframes sl-burst{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--d) * 2.4)) scale(.3)}}
.sl-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:14px 0 16px;color:var(--muted);font-size:var(--fs-caption);font-weight:600}
.sl-facts span{display:inline-flex;align-items:center;gap:5px}
.sl-facts svg{width:13px;height:13px}
.sl-facts b{color:var(--ok);font-size:var(--fs-footnote);font-variant-numeric:tabular-nums}
.sl-body{text-align:left;display:flex;gap:16px;align-items:center}
.sl-qr{flex:none;width:148px;height:148px;display:grid;place-items:center;border-radius:var(--r);background:#fff;border:1px solid var(--line);clip-path:circle(0% at 50% 50%);transition:clip-path .7s var(--ease)}
.sl-result.done .sl-qr{clip-path:circle(75% at 50% 50%)}
.sl-qr img{width:132px;height:132px;image-rendering:pixelated}
.sl-qrph{width:110px;height:110px;border-radius:8px;background:repeating-linear-gradient(45deg,var(--fill) 0 8px,transparent 8px 16px)}
.sl-acts{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.sl-act{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-footnote);font-weight:650;cursor:pointer;text-decoration:none;
  opacity:0;transform:translateY(8px);transition:background .2s,border-color .2s,transform .2s var(--ease)}
.sl-result.done .sl-act{opacity:1;transform:none;transition:opacity .35s calc(var(--k,0) * 70ms),transform .4s calc(var(--k,0) * 70ms) var(--ease),background .2s,border-color .2s}
.sl-act:nth-child(2){--k:1}.sl-act:nth-child(3){--k:2}.sl-act:nth-child(4){--k:3}
.sl-act:hover{border-color:var(--blue-m);background:var(--blue-t)}
.sl-act svg{width:17px;height:17px}
.sl-act.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.sl-act.pri:hover{background:var(--blue-d)}
.sl-act .t2{display:none;align-items:center;gap:6px}
.sl-act.copied{background:var(--ok);border-color:var(--ok)}
.sl-act.copied svg:first-child,.sl-act.copied .t1{display:none}
.sl-act.copied .t2{display:inline-flex;animation:sl-pop .35s var(--ease)}

/* Lista */
.sl-lg .grp-h{display:flex;align-items:center;gap:8px}
.sl-count{min-width:22px;padding:1px 8px;border-radius:var(--r-pill);background:var(--blue-t);color:var(--tint);font-size:var(--fs-caption);font-weight:700;text-align:center}
.sl-count:empty{display:none}
.sl-search{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--muted)}
.sl-search svg{width:17px;height:17px;flex:none}
.sl-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-subhead);padding:11px 0;outline:none}
.sl-list{display:grid;gap:8px}
.sl-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
  animation:sl-rise .4s calc(var(--i,0) * 45ms) var(--ease) both;transition:border-color .2s,transform .2s var(--ease),opacity .3s,max-height .3s}
.sl-row:hover{border-color:var(--line-2);transform:translateY(-1px)}
.sl-row.fresh{animation:sl-fresh 1.4s var(--ease)}
@keyframes sl-fresh{0%{opacity:0;transform:translateY(-12px)}25%{opacity:1;transform:none;box-shadow:0 0 0 3px var(--brand-orange-m)}100%{box-shadow:var(--shadow-1)}}
.sl-row.gone{opacity:0;transform:translateX(40px) scale(.96)}
@keyframes sl-rise{from{opacity:0;transform:translateY(10px)}}
.sl-rqr{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);border:0;background:var(--blue-t);color:var(--tint);cursor:pointer;transition:transform .2s var(--ease),background .2s}
.sl-rqr:hover{transform:rotate(-6deg) scale(1.06)}
.sl-rqr svg{width:22px;height:22px}
.sl-rm{flex:1;min-width:0;display:grid;gap:3px}
.sl-rl{font-weight:750;color:var(--ink);text-decoration:none;font-size:var(--fs-subhead);overflow-wrap:anywhere}
.sl-rl:hover{color:var(--tint)}
.sl-rd{color:var(--ink-2);font-size:var(--fs-footnote);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-rd b{font-weight:650}
.sl-rpath{color:var(--muted)}
.sl-rmeta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:var(--fs-caption);font-weight:600}
.sl-rmeta span{display:inline-flex;align-items:center;gap:4px}
.sl-rmeta svg{width:13px;height:13px}
.sl-hits{color:var(--tint)}
.sl-expc{color:var(--warn)}
.sl-ra{display:flex;gap:4px;flex:none}
.sl-ib{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.sl-ib:hover{background:var(--fill);color:var(--ink)}
.sl-ib svg{width:18px;height:18px}
.sl-ib.copied{color:var(--ok);animation:sl-pop .35s var(--ease)}
.sl-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:30px 16px;border:1.5px dashed var(--line-2);border-radius:var(--r);color:var(--muted);font-size:var(--fs-footnote)}
.sl-empty svg{width:28px;height:28px;color:var(--tint)}
.sl-empty b{color:var(--ink);font-size:var(--fs-subhead)}
.sl-skel{display:grid;gap:8px}
.sl-skel i{height:74px;border-radius:var(--r);background:linear-gradient(90deg,var(--fill) 0%,var(--surface-2) 50%,var(--fill) 100%) 0 0/200% 100%;animation:sl-skel 1.2s linear infinite}
@keyframes sl-skel{to{background-position:-200% 0}}
.sl-qrbig{display:grid;justify-items:center;gap:6px;padding:10px 0 18px;text-align:center}
.sl-qrbig img{width:240px;height:240px;image-rendering:pixelated;background:#fff;border-radius:var(--r);padding:8px;box-shadow:var(--shadow-1);animation:sl-pop .45s var(--ease)}
.sl-qrbig b{font-size:var(--fs-title3);word-break:break-all}
.sl-qrbig small{color:var(--muted)}

@media (max-width:620px){
  .sl-hero{padding:22px 16px 16px;margin-left:-4px;margin-right:-4px}
  .sl-h1{font-size:var(--fs-title2)}
  .sl-body{flex-direction:column;align-items:stretch}
  .sl-qr{align-self:center}
  .sl-rpath{display:none}
  .sl-rqr{display:none}
  .sl-row{padding:12px 8px 12px 14px;gap:6px}
  .sl-acts{grid-template-columns:1fr 1fr}
}
/* Reducir movimiento: sin esperas, todo aparece directo */
@media (prefers-reduced-motion:reduce){.sl *,.sl{transition-delay:0s!important;animation-delay:0s!important}.sl-orbs i{animation:none!important}}