.tl-layout, .tl-player, .tl-sheet {
  --tl-accent: #1E5B3A;
  --tl-gold: #E2B13C;
  --tl-ink: #1C1B18;
  --tl-muted: #5E5A50;
  --tl-line: #D9D1BF;
  --tl-paper: #FBF8F1;
  --tl-row: #E9E1CE;
  --tl-text: "Fira Sans", sans-serif;
  --tl-display: "Oswald", sans-serif;
}

.tl-head { scroll-margin-top: 24px; }
.tl-vinyl { display: block; flex-shrink: 0; animation: tl-spin 14s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@keyframes tl-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* Aside escritorio */
.tl-aside { display: none; }
@media (min-width: 992px) {
  .tl-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 720px);
    gap: 56px;
    align-items: start;
    max-width: 1076px;
    margin: 0 auto;
  }
  .tl-aside {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border-radius: 20px;
    background: var(--tl-paper);
    border: 1px solid var(--tl-line);
    color: var(--tl-ink);
  }
}

.tl-head-box { display: flex; align-items: center; gap: 16px; }
.tl-head-box > div { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.tl-album { font-family: var(--tl-display); font-size: 22px; line-height: 1.1; }
.tl-meta { font-family: var(--tl-text); font-size: 12px; letter-spacing: .08em; color: var(--tl-muted); }

.tl-progress { display: flex; flex-direction: column; gap: 8px; }
.tl-progress-row { display: flex; justify-content: space-between; font-family: var(--tl-text); font-size: 12px; color: var(--tl-muted); }
.tl-bar { height: 4px; border-radius: 2px; background: var(--tl-line); overflow: hidden; }
.tl-fill { height: 100%; width: 0; background: var(--tl-accent); transition: width .2s; }

.tl-aside nav, .tl-sheet nav { display: flex; flex-direction: column; gap: 2px; margin: 0 -12px; }
.tl-trk {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--tl-ink);
}
.tl-trk:hover { background: #EDE6D6; color: var(--tl-ink); }
.tl-trk.is-active { background: var(--tl-row); }
.tl-trk:focus-visible, .tl-flip:focus-visible, .tl-player a:focus-visible, .tl-player button:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }
.tl-num { height: 22px; display: flex; align-items: center; font-family: var(--tl-text); font-size: 13px; color: var(--tl-muted); }
.tl-trk.is-done .tl-n { color: #8A8474; }
.tl-eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.tl-eq span { width: 3px; height: 14px; background: var(--tl-accent); border-radius: 1px; transform-origin: bottom; animation: tl-eq .9s ease-in-out infinite; }
.tl-eq span:nth-child(2) { animation-delay: .25s; }
.tl-eq span:nth-child(3) { animation-delay: .5s; }
.tl-trk.is-active .tl-n { display: none; }
.tl-trk.is-active .tl-eq { display: flex; }
.tl-txt { display: flex; flex-direction: column; gap: 2px; }
.tl-title { font-family: var(--tl-text); font-size: 17px; line-height: 1.25; }
.tl-trk.is-active .tl-title { font-weight: 600; }
.tl-trk.is-done .tl-title { color: var(--tl-muted); }
.tl-echo { font-size: 14px; font-style: italic; color: var(--tl-muted); }

.tl-flip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--tl-ink);
  color: var(--tl-ink);
  text-decoration: none;
  font-family: var(--tl-text);
  font-size: 13px;
}
.tl-flip:hover { background: var(--tl-ink); color: #fff; }
.tl-flip-solid { background: var(--tl-accent); border-color: var(--tl-accent); color: #fff; }

.tl-banner {
  margin-top: 48px;
  padding: 28px;
  border-radius: 20px;
  background: #1E5B3A;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 28px;
}
.tl-banner > div { display: flex; flex-direction: column; gap: 12px; }
.tl-banner-kicker { font-family: "Fira Sans", sans-serif; font-size: 12px; letter-spacing: .1em; color: #E2B13C; }
.tl-banner-title { font-family: "Oswald", sans-serif; font-size: 28px; line-height: 1.1; }
.tl-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.tl-banner-actions a { display: flex; align-items: center; gap: 10px; min-height: 48px; font-family: "Fira Sans", sans-serif !important; font-size: 14px !important; color: #fff !important; }
.tl-banner .tl-banner-cta { padding: 0 20px; border-radius: 999px; background: #fff; color: #1C1B18 !important; text-decoration: none !important; font-weight: 500 !important; }
.tl-banner-top { padding: 0 12px; }
@media (max-width: 575px) {
  .tl-banner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Mini reproductor móvil */
.tl-player, .tl-sheet { display: none; }
@media (max-width: 991px) {
  body.has-tracklist { padding-bottom: 96px; }
  .tl-player {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1000;
    border-radius: 18px;
    background: var(--tl-ink);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(28, 27, 24, .25);
    transition: transform .25s, opacity .25s;
  }
  .tl-player.is-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .tl-player .tl-bar { height: 3px; border-radius: 0; background: #3A3833; }
  .tl-player .tl-fill { background: var(--tl-gold); }
  .tl-player-row { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 10px; }
  .tl-open {
    flex-grow: 1;
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    cursor: pointer;
  }
  .tl-player-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .tl-kicker { font-family: var(--tl-text); font-size: 11px; letter-spacing: .08em; color: var(--tl-gold); }
  .tl-now { font-family: var(--tl-display); font-size: 16px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-prev, .tl-next { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 22px; }
  .tl-prev:hover, .tl-next:hover { color: var(--tl-gold); }

  .tl-sheet[open] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    margin: 0;
    box-sizing: border-box;
    padding: 12px 20px 28px;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--tl-paper);
    color: var(--tl-ink);
    overflow-y: auto;
  }
  .tl-sheet::backdrop { background: rgba(20, 19, 17, .55); }
  .tl-sheet nav { margin: 0 -8px; }
  .tl-sheet .tl-trk { align-items: center; min-height: 56px; padding: 6px 8px; }
  .tl-grip { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--tl-line); }
  .tl-sheet .tl-head-box { gap: 14px; }
  .tl-close { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tl-line); border-radius: 22px; background: #fff; color: var(--tl-ink); cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-vinyl, .tl-eq span { animation: none; }
}