/* Diapositivas: las mismas reglas en previews, pantallas y control remoto */
.slide {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: inherit;
}
.sl {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6cqw;
  padding: 6cqw 8cqw;
  background: var(--bg-slide, #000);
  color: var(--fg, #fff);
  font-family: var(--font, Onest), sans-serif;
  text-align: center;
}
.sl.left { align-items: flex-start; text-align: left; }
.sl.right { align-items: flex-end; text-align: right; }
.sl.upper { text-transform: uppercase; }
.sl.shadow .sl-text { text-shadow: 0 .25cqw 1.2cqw rgba(0, 0, 0, .55); }
.sl-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-media.contain { object-fit: contain; }
.sl-dim { position: absolute; inset: 0; background: #000; }
.sl-text { position: relative; z-index: 1; max-width: 100%; }
.sl-title { font-size: calc(var(--size, 8) * .5625cqw * 1.5 * var(--fit, 1)); line-height: 1.05; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sl-body { font-size: calc(var(--size, 8) * .5625cqw * var(--fit, 1)); line-height: 1.25; white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.sl mark { background: none; color: var(--em, #ffd166); }
.sl-footer { position: absolute; z-index: 1; right: 5cqw; bottom: 4cqw; font-size: 2.2cqw; opacity: .75; font-family: Onest, sans-serif; text-transform: none; }
.sl-black { background: #000; }
.sl-logo .sl-title { font-family: Anton, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.sl-logo .sl-mark { width: 12cqw; height: 12cqw; color: #00ccbe; }
.sl-count .sl-kicker { font-size: 2.2cqw; letter-spacing: .3em; text-transform: uppercase; opacity: .7; font-family: Onest, sans-serif; }
.sl-count .sl-digits { font: 400 16cqw/1 Anton, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sl-clock .sl-digits { font: 400 18cqw/1 Anton, sans-serif; font-variant-numeric: tabular-nums; }
.sl-missing { position: relative; color: #ffffff80; font: 500 3cqw Onest, sans-serif; }

/* Acordes sobre la letra */
.chords { font-family: Onest, sans-serif; }
.chords .cl { white-space: pre-wrap; }
.chords .cl.has-chords { padding-top: 1.05em; }
.chords .seg { position: relative; display: inline; }
.chords .seg b { position: absolute; bottom: 100%; left: 0; font-size: .78em; font-weight: 700; color: #fbbf24; line-height: 1.1; white-space: nowrap; margin-bottom: .05em; }

/* Overlay para transmisión */
.ov { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 6cqw 5cqw; font-family: var(--font, Onest), sans-serif; }
.ov-box { background: var(--ov-box); color: var(--ov-fg); padding: 1.6cqw 3.2cqw; border-radius: 1cqw; text-align: center; max-width: 100%; }
.ov-title { font-size: calc(var(--ov-size, 5) * .5625cqw * 1.2); font-weight: 700; line-height: 1.15; white-space: pre-line; }
.ov-body { font-size: calc(var(--ov-size, 5) * .5625cqw); line-height: 1.25; white-space: pre-line; }
.ov-ref { font-size: 1.8cqw; opacity: .8; margin-top: .6cqw; }
.ov mark { background: none; color: var(--em, #ffd166); }

/* Rótulo con nombre (tercio inferior) */
.lt { position: absolute; left: 5cqw; right: 5cqw; bottom: 8cqw; z-index: 6; display: flex; pointer-events: none; overflow: hidden; padding: 1cqw 0; }
.lt.center { justify-content: center; }
.lt-box { background: var(--lt-bg); color: var(--lt-fg); border-left: .8cqw solid var(--lt-accent); padding: 1.3cqw 3cqw 1.4cqw 2.2cqw; border-radius: 0 .8cqw .8cqw 0; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .35); font-family: Onest, sans-serif; transform: translateX(-115%); opacity: 0; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s; max-width: 70%; }
.lt.center .lt-box { transform: translateY(140%); }
.lt.on .lt-box { transform: none; opacity: 1; }
.lt-name { font-size: 3.1cqw; font-weight: 700; line-height: 1.1; }
.lt-title { font-size: 1.9cqw; font-weight: 500; margin-top: .4cqw; color: var(--lt-accent); text-transform: uppercase; letter-spacing: .08em; }