/* Acortador de enlaces (prefijo sl-). Usa las piezas tl- de mm-tools.css. */
.sl [hidden] { display: none !important; }
.sl-form { display: grid; gap: 20px; }

/* Alias con prefijo de dominio en la misma caja */
.sl-alias { display: flex; align-items: center; min-height: 48px; border-radius: 14px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .2s; overflow: hidden; }
.sl-alias:focus-within { box-shadow: inset 0 0 0 1.5px #f036e1; }
.sl-alias-pre { flex: 0 0 auto; padding: 0 0 0 16px; font-size: 14px; color: var(--paper-faint); white-space: nowrap; }
.sl-alias input { flex: 1; min-width: 0; height: 48px; border: 0; outline: none; background: none; color: var(--paper); font-size: 15px; padding: 0 16px 0 1px; }
.sl-alias input::placeholder { color: var(--paper-faint); opacity: .7; }
.pg-field.invalid .sl-alias { box-shadow: inset 0 0 0 1px #ff7a8a; }
@media (max-width: 400px) { .sl-alias-pre { font-size: 12.5px; padding-left: 12px; } }

/* UTM */
.sl-utm-box { padding: 6px 0 0; border-top: 1px solid var(--line); }
.sl-utm { display: grid; gap: 14px; padding-top: 10px; animation: tlIn .4s cubic-bezier(.16,1,.3,1) both; }
.sl-prev { padding: 14px 16px; border-radius: 16px; background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); }
.sl-prev .tl-h { margin-bottom: 8px; }
.sl-prev-url { display: block; font-size: 12.5px; line-height: 1.6; color: var(--paper-dim); word-break: break-all; }

.sl-err:empty { display: none; }
.sl-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sl-submit .btn { min-height: 52px; gap: 10px; }
.sl-submit .btn[disabled] { opacity: .65; pointer-events: none; }
.sl-submit .btn.is-loading svg { animation: slPulse 1s ease-in-out infinite; }
@keyframes slPulse { 50% { opacity: .35; } }
@media (max-width: 560px) { .sl-submit .btn { width: 100%; justify-content: center; } }

/* Resultado */
.sl-res { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sl-res > .tl-empty { min-height: 320px; align-content: center; }
.sl-res:has(.sl-result) { justify-content: flex-start; }
.sl-result { display: grid; gap: 16px; }
.sl-res-head .tl-h { margin: 0; }
.sl-res-head .tl-pill svg { width: 14px; height: 14px; }
.sl-short { display: block; font-size: clamp(16px, 2vw, 24px); line-height: 1.35; color: var(--paper-dim); text-decoration: none; overflow-wrap: anywhere; letter-spacing: -0.01em; }
.sl-short b { color: var(--paper); font-weight: 500; background: linear-gradient(110deg, #f036e1, #9149ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sl-short:hover { text-decoration: underline; text-decoration-color: rgba(240,54,225,.6); text-underline-offset: 4px; }
.sl-dest { margin: -6px 0 0; font-size: 13px; color: var(--paper-faint); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.sl-dest span { color: var(--paper-faint); }
.sl-dest a { color: var(--paper-dim); text-decoration: none; }
.sl-dest a:hover { color: var(--paper); }
.sl-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sl-act .btn { justify-content: center; min-height: 48px; gap: 8px; }
.sl-act .tl-btn { min-height: 48px; }
.sl-qr { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); }
.sl-qr-img { width: 168px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px -18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.06); }
.sl-qr-img svg { display: block; width: 100%; height: 100%; }
.sl-qr-side b { display: block; font-size: 15px; color: var(--paper); }
.sl-qr-side p { margin: 4px 0 12px; font-size: 13px; color: var(--paper-dim); line-height: 1.5; }
@media (max-width: 1040px) and (min-width: 561px) { .sl-qr { grid-template-columns: 190px minmax(0, 1fr); } .sl-qr-img { width: 190px; } }
@media (max-width: 420px) { .sl-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sl-qr-img { width: min(220px, 100%); } .sl-qr-side .tl-actions { justify-content: center; } }

/* Esqueletos */
.sl-skel { display: grid; gap: 12px; }
.sl-skel i { display: block; height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--glass-bg-strong) 0%, rgba(var(--glass-tint), .11) 50%, var(--glass-bg-strong) 100%); background-size: 200% 100%; animation: slShim 1.1s linear infinite; }
.sl-skel .a { width: 34%; height: 11px; } .sl-skel .b { width: 86%; height: 26px; } .sl-skel .c { width: 60%; }
.sl-skel .q { width: 168px; height: 168px; border-radius: 16px; margin-top: 8px; }
.sl-skel .g { height: 96px; border-radius: 14px; }
.sl-skel.st { padding: 4px 0; }
@keyframes slShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Mis enlaces */
.sl-mine { margin-top: 20px; }
.sl-mine-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.sl-mine-head .tl-h { margin-bottom: 10px; }
.sl-count { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line); color: var(--paper-dim); letter-spacing: 0; }
.sl-mine-note { display: flex; gap: 8px; align-items: flex-start; max-width: 760px; }
.sl-mine-note svg { flex-shrink: 0; margin-top: 2px; color: var(--tl-ok); }
.sl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sl-list:empty { display: none; }
.sl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sl-item-main { display: grid; gap: 3px; min-width: 0; }
.sl-item-short { font-size: 15px; color: var(--paper-dim); text-decoration: none; word-break: break-all; }
.sl-item-short b { color: var(--paper); font-weight: 500; }
.sl-item-short:hover b { color: var(--tl-acc); }
.sl-item-url { font-size: 13px; color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-item-date { font-size: 12px; color: var(--paper-faint); }
.sl-item-act { display: flex; gap: 6px; align-items: center; }
.sl-item-act .tl-btn[aria-expanded="true"] { background: linear-gradient(135deg, rgba(240,54,225,.12), rgba(145,73,255,.12)); box-shadow: inset 0 0 0 1px rgba(240,54,225,.5); }
.sl-item-act .tl-btn.confirm { color: var(--tl-bad); box-shadow: inset 0 0 0 1px var(--tl-bad); }
.sl-stats { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 640px) {
  .sl-item { grid-template-columns: minmax(0, 1fr); }
  .sl-item-act { flex-wrap: wrap; }
  .sl-item-act .tl-btn[data-a="stats"] { flex: 1; }
}

/* Estadísticas */
.sl-st { display: grid; gap: 16px; padding: 18px; border-radius: 20px; background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); }
.sl-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
.sl-kpis > div { border-bottom: 0; padding: 4px 16px !important; border-left: 1px solid var(--line); }
.sl-kpis > div:first-child { padding-left: 0 !important; border-left: 0; }
.sl-kpis dd.sm { font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
@media (max-width: 760px) {
  .sl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .sl-kpis > div:nth-child(odd) { padding-left: 0 !important; border-left: 0; }
}
.sl-spark { margin: 0; padding-top: 14px; position: relative; outline: none; border-radius: 14px; }
.sl-spark:focus-visible { box-shadow: 0 0 0 2px #f036e1; }
.sl-spark-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12.5px; }
.sl-spark-top figcaption { color: var(--paper-dim); }
.sl-spark-max { color: var(--paper-faint); font-family: 'JetBrains Mono', monospace; font-size: 12px; white-space: nowrap; }
.sl-spark-plot { position: relative; height: 96px; color: var(--tl-acc); touch-action: pan-y; cursor: crosshair; }
.sl-spark-plot svg { position: absolute; inset: 0; display: block; overflow: visible; }
.sl-spark-plot .base { stroke: var(--line-strong); stroke-width: 1; }
.sl-spark-plot .ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sl-spark-plot .cross { stroke: var(--paper-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.sl-spark-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }
.sl-tip { position: absolute; left: 0; top: -46px; z-index: 2; display: grid; gap: 1px; padding: 7px 11px; border-radius: 10px; background: rgba(22,16,26,.94); color: #f4eef6; font-size: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1); }
.sl-tip b { font-size: 13px; font-weight: 600; }
.sl-tip span { color: rgba(244,238,246,.7); }
.sl-spark-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--paper-faint); }
.sl-st-retry { justify-content: flex-start; }
.sl-st-retry .tl-btn { margin-left: -8px; }
.sl-stats > .tl-verdict { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .sl-skel i, .sl-submit .btn.is-loading svg, .sl-utm { animation: none; } }