:root {
    --active-color: #6ee7f2;
    --sung-color: #f6f8fb;
    --future-color: #a5abb4;
    --font-scale: 1;
    --background-opacity: .76;
    --background-blur: 24px;
    --transition-duration: 450ms;
}

.player-page { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.stage { position: relative; height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 35%, #172534, #07090f 68%); }
.song-background { position: absolute; z-index: -3; inset: -3rem; background-image: var(--background-image, linear-gradient(135deg, #102b37, #090c15 65%)); background-position: center; background-size: cover; filter: blur(var(--background-blur)) saturate(.6); opacity: .62; transform: scale(1.08); }
.background-overlay { position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at center, transparent 0, rgba(4,6,10,.33) 52%, rgba(4,6,10,.9) 100%), linear-gradient(180deg, rgba(6,8,13,.58), rgba(6,8,13,var(--background-opacity))); pointer-events: none; }
.player-top { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 6.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(1.3rem, env(safe-area-inset-top)) clamp(1.2rem, 3vw, 3rem) 1rem; transition: opacity .3s, transform .3s; }
.player-top::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(5,7,11,.65), transparent); }
.round-button, .icon-button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.round-button { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); background: rgba(9,12,18,.28); backdrop-filter: blur(12px); border-radius: 50%; transition: background .2s, border-color .2s, transform .2s; }
.round-button:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); transform: translateY(-1px); }
.round-button:last-child { justify-self: end; }
.now-playing { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.now-playing img, .mini-cover { width: 2.7rem; height: 2.7rem; border-radius: 7px; object-fit: cover; box-shadow: 0 5px 20px rgba(0,0,0,.3); }
.mini-cover { display: grid; place-items: center; background: #1c5060; color: var(--cyan); }
.now-playing div { display: grid; min-width: 0; }
.now-playing span { color: var(--active-color); font-size: .51rem; font-weight: 800; letter-spacing: .25em; margin-bottom: .2rem; }
.now-playing h1 { max-width: 38vw; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
.now-playing small { display: none; color: #9aa1ad; font-size: .72rem; }
.lyrics-viewport { position: absolute; inset: 0; overflow: hidden; mask-image: linear-gradient(to bottom, transparent 5%, black 20%, black 78%, transparent 96%); }
.lyrics-track { position: absolute; z-index: 2; top: 45%; left: clamp(1.5rem, 8vw, 10rem); right: clamp(1.5rem, 8vw, 10rem); transform: translate3d(0, var(--lyrics-offset, 0), 0); will-change: transform; transition: transform var(--transition-duration) cubic-bezier(.22,.8,.28,1); text-align: center; }
.karaoke-line { margin: 0 auto; padding: clamp(.62rem, 1.6vh, 1.25rem) 0; max-width: 1200px; font-size: calc(clamp(2rem, 3.5vw, 3.45rem) * var(--font-scale)); font-weight: 750; line-height: 1.22; letter-spacing: -.04em; color: var(--future-color); opacity: .28; transform: scale(.86); transform-origin: center; transition: opacity var(--transition-duration), transform var(--transition-duration), filter var(--transition-duration); }
.karaoke-line.line-active { opacity: 1; transform: scale(1); filter: drop-shadow(0 8px 30px rgba(0,0,0,.3)); }
.karaoke-line.line-past { opacity: .21; transform: scale(.86); }
.karaoke-line.is-distant { opacity: .06; }
.karaoke-line.is-other-part { visibility: hidden; opacity: 0; pointer-events: none; }
.karaoke-word { position: relative; display: inline-block; white-space: nowrap; color: var(--future-color); opacity: .72; transition: color .16s, opacity .16s, text-shadow .2s; }
.karaoke-word.word-past { color: var(--sung-color); opacity: .82; }
.karaoke-word.word-active { color: var(--active-color); opacity: 1; text-shadow: 0 0 12px color-mix(in srgb, var(--active-color) 70%, transparent), 0 0 32px color-mix(in srgb, var(--active-color) 30%, transparent); }
.lyrics-unavailable { color: #bbc0c9; font-size: clamp(1.4rem, 3vw, 2.4rem); }
.entry-guide { --entry-progress: 0%; position: absolute; z-index: 12; top: clamp(6.2rem, 12vh, 7.5rem); left: 50%; width: min(480px, calc(100% - 3rem)); translate: -50% 0; padding: .65rem .8rem .6rem; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; opacity: .66; background: rgba(8,12,18,.34); backdrop-filter: blur(10px); box-shadow: 0 8px 28px rgba(0,0,0,.16); animation: entry-guide-in .28s both; transition: opacity .25s; }
.entry-guide[hidden] { display: none; }
.entry-guide-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.entry-guide-heading > span { color: color-mix(in srgb, var(--active-color) 70%, #9ca4af); font-size: .52rem; font-weight: 800; letter-spacing: .2em; }
.entry-guide-heading strong { color: rgba(255,255,255,.82); font-size: .88rem; font-variant-numeric: tabular-nums; }
.entry-guide-heading small { color: #8f98a6; font-size: .65rem; font-weight: 600; }
.entry-guide-bar { position: relative; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.09); }
.entry-guide-bar i { position: absolute; inset: 0 auto 0 0; width: var(--entry-progress); border-radius: inherit; background: color-mix(in srgb, var(--active-color) 72%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--active-color) 28%, transparent); transition: width .08s linear; }
.entry-guide-bar b { position: absolute; z-index: 1; top: 0; bottom: 0; width: 1px; background: rgba(5,8,12,.55); }
.entry-guide-bar b:nth-of-type(1) { left: 25%; }
.entry-guide-bar b:nth-of-type(2) { left: 50%; }
.entry-guide-bar b:nth-of-type(3) { left: 75%; }
.entry-guide p { margin: .4rem 0 0; overflow: hidden; color: rgba(190,197,207,.62); font-size: .67rem; white-space: nowrap; text-overflow: ellipsis; }
.entry-guide.is-imminent { opacity: .82; }
.entry-guide.is-imminent .entry-guide-bar i { animation: entry-guide-pulse .8s ease-in-out infinite alternate; }
@keyframes entry-guide-in { from { opacity: 0; translate: -50% 8px; } }
@keyframes entry-guide-pulse { to { filter: brightness(1.45); } }
.player-controls { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; padding: 1rem clamp(1.2rem, 3vw, 3rem) max(1.35rem, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(5,7,11,.85), rgba(5,7,11,.5) 58%, transparent); transition: opacity .3s, transform .3s; }
.controls-hidden .player-controls { opacity: 0; transform: translateY(20px); pointer-events: none; }
.controls-hidden .player-top { opacity: 0; transform: translateY(-15px); pointer-events: none; }
.controls-hidden { cursor: none; }
.timeline-row { display: grid; grid-template-columns: 3.2rem 1fr 3.2rem; align-items: center; gap: .75rem; color: #adb4bf; font-size: .7rem; font-variant-numeric: tabular-nums; }
.timeline-row > span:last-child { text-align: right; }
.timeline-label { display: flex; }
input[type="range"] { --range-progress: 0%; appearance: none; height: 20px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--active-color) 0 var(--range-progress), rgba(255,255,255,.18) var(--range-progress)); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); }
input[type="range"]::-moz-range-progress { height: 3px; background: var(--active-color); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .2s, transform .2s; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus::-webkit-slider-thumb { opacity: 1; }
#seek-bar { width: 100%; }
.control-row { height: 3.8rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: .25rem; }
.control-side { display: flex; align-items: center; gap: .5rem; }
.control-side.end { justify-content: flex-end; }
.guide-vocal-control { display: flex; align-items: center; gap: .5rem; }
.guide-vocal-button { height: 2.55rem; padding: 0 .75rem; display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #aeb6c2; background: rgba(9,12,18,.32); cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.guide-vocal-button svg { width: 1.05rem; }
.guide-vocal-button span { display: grid; gap: .05rem; text-align: left; line-height: 1; }
.guide-vocal-button strong { font-size: .65rem; }
.guide-vocal-button small { color: #747f8d; font-size: .52rem; }
.guide-vocal-button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.guide-vocal-button.is-active { color: #071015; border-color: var(--active-color); background: var(--active-color); box-shadow: 0 0 24px color-mix(in srgb, var(--active-color) 22%, transparent); }
.guide-vocal-button.is-active small { color: rgba(7,16,21,.65); }
.guide-vocal-button:disabled { opacity: .4; cursor: not-allowed; }
.guide-vocal-volume { width: 7.2rem; display: flex; align-items: center; gap: .35rem; }
.guide-vocal-volume input { min-width: 0; width: 100%; }
.guide-vocal-volume output { width: 2rem; color: #8e98a5; font-size: .58rem; font-variant-numeric: tabular-nums; text-align: right; }
.guide-vocal-control:not(.is-active) .guide-vocal-volume { opacity: .48; }
.transport { display: flex; align-items: center; gap: 1.1rem; }
.icon-button { position: relative; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: #d6d9df; border-radius: 50%; transition: color .2s, background .2s, transform .2s; }
.icon-button:hover { color: #fff; background: rgba(255,255,255,.08); transform: scale(1.05); }
.skip-button small { position: absolute; font-size: .5rem; font-weight: 800; }
.play-button { width: 3.55rem; height: 3.55rem; border: 0; display: grid; place-items: center; color: #071015; background: var(--active-color); border-radius: 50%; cursor: pointer; box-shadow: 0 8px 30px color-mix(in srgb, var(--active-color) 30%, transparent); transition: transform .2s; }
.play-button:hover { transform: scale(1.06); }
.play-button svg { grid-area: 1/1; width: 1.35rem; height: 1.35rem; fill: currentColor; stroke: none; }
.play-button .play-icon { margin-left: .17rem; }
.pause-icon { display: none; }
.is-playing .pause-icon { display: block; }
.is-playing .play-icon { display: none; }
.volume-range { width: 5.5rem; }
.volume-icon path { vector-effect: non-scaling-stroke; }
.start-overlay { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: rgba(4,6,10,.46); backdrop-filter: blur(6px); transition: opacity .45s, visibility .45s; }
.start-overlay.is-dismissed { opacity: 0; visibility: hidden; }
.start-card { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.5rem 1rem 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(12,16,23,.72); backdrop-filter: blur(20px); cursor: pointer; box-shadow: 0 20px 70px rgba(0,0,0,.45); transition: transform .2s, border-color .2s; }
.start-card:hover { transform: scale(1.025); border-color: rgba(110,231,242,.6); }
.start-play { width: 3.8rem; height: 3.8rem; display: grid; place-items: center; border-radius: 50%; color: #061014; background: var(--active-color); }
.start-play svg { fill: currentColor; stroke: none; margin-left: .2rem; }
.start-card > span:last-child { display: grid; text-align: left; }
.start-card strong { font-size: 1rem; }
.start-card small { margin-top: .3rem; color: #9ea6b3; }
.settings-panel { position: absolute; z-index: 40; top: 1rem; right: 1rem; bottom: 1rem; width: min(360px, calc(100% - 2rem)); padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(12,16,23,.94); backdrop-filter: blur(24px); box-shadow: 0 25px 80px rgba(0,0,0,.45); transform: translateX(calc(100% + 2rem)); transition: transform .35s cubic-bezier(.22,.8,.28,1); }
.settings-panel.is-open { transform: none; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 2rem; }
.panel-heading span { color: var(--active-color); font-size: .55rem; font-weight: 800; letter-spacing: .24em; }
.panel-heading h2 { margin: .3rem 0 0; font-size: 1.35rem; }
.panel-heading button { border: 0; background: transparent; color: #9fa6b1; font-size: 1.8rem; cursor: pointer; }
.settings-panel > label:not(.switch-row) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.settings-panel input[type="color"] { width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: none; overflow: hidden; cursor: pointer; }
.settings-panel input[type="range"] { width: 7rem; }
.switch-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; cursor: pointer; }
.switch-row span { display: grid; }
.switch-row small { color: #7f8793; margin-top: .25rem; }
.switch-row input { position: absolute; opacity: 0; }
.switch-row i { width: 2.5rem; height: 1.4rem; padding: 3px; flex: 0 0 auto; border-radius: 999px; background: #343a44; transition: background .2s; }
.switch-row i::after { content: ""; display: block; width: .98rem; height: .98rem; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch-row input:checked + i { background: var(--active-color); }
.switch-row input:checked + i::after { transform: translateX(1.1rem); background: #071015; }
.reset-settings { width: 100%; margin-top: 1.5rem; padding: .8rem; border: 1px solid var(--border); border-radius: 9px; color: #b4bac4; background: transparent; cursor: pointer; }
.track-information { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.track-information nav { display: flex; flex-wrap: wrap; gap: .4rem; color: #7f8996; font-size: .65rem; line-height: 1.5; }
.track-information nav a { color: var(--active-color); }
.track-information h2 { margin: .8rem 0; font-size: 1.15rem; line-height: 1.25; }
.track-information p { margin: 0; color: #939ca9; font-size: .76rem; line-height: 1.65; }
.track-information dl { margin: 1rem 0; display: grid; gap: .4rem; }
.track-information dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; }
.track-information dt { color: #77818e; }
.track-information dd { margin: 0; color: #c4cbd3; text-align: right; }
.track-information h3 { margin: 1.4rem 0 .6rem; font-size: .82rem; }
.track-information ul { margin: 0; padding-left: 1rem; display: grid; gap: .55rem; }
.track-information li { color: #8f99a6; font-size: .7rem; line-height: 1.45; }
.track-information li a:hover { color: var(--active-color); }
.offset-toast { position: absolute; z-index: 50; top: 7rem; left: 50%; transform: translate(-50%, -10px); padding: .55rem .85rem; border-radius: 7px; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); font-size: .75rem; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.offset-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.debug-panel { position: absolute; z-index: 60; top: 6.5rem; left: 1rem; padding: .7rem; white-space: pre; color: #8ff4a8; background: rgba(0,0,0,.75); font: 11px/1.5 monospace; border-radius: 6px; pointer-events: none; }

/* Modo incrustado (?embed=1): la cancion la maneja Proyecto RP desde su panel,
   asi que en la pantalla de la iglesia sobra todo lo que es para el operador.
   Queda la letra sobre el fondo, y la guia de entrada, que si le sirve a quien
   canta. El aviso de "presiona para comenzar" tambien se va: si el navegador
   bloquea el audio automatico, quien tiene que enterarse es el operador por el
   puente, no la congregacion por un cartel en mitad de la pantalla. La unica
   excepcion es un error fatal: ahi vale mas un mensaje visible que un vacio. */
.is-embedded .player-top,
.is-embedded .player-controls,
.is-embedded .settings-panel,
.is-embedded .offset-toast,
.is-embedded .start-overlay:not(.is-fatal) { display: none; }
.is-embedded .stage { cursor: none; }

@media (max-width: 700px) {
    .player-top { height: 5.4rem; padding-left: 1rem; padding-right: 1rem; }
    .now-playing img, .mini-cover { display: none; }
    .now-playing { text-align: center; }
    .now-playing h1 { max-width: 56vw; }
    .lyrics-track { left: 1.15rem; right: 1.15rem; }
    .karaoke-line { font-size: calc(clamp(1.65rem, 8.2vw, 2.65rem) * var(--font-scale)); padding: .55rem 0; line-height: 1.18; }
    .player-controls { padding-left: 1rem; padding-right: 1rem; }
    .entry-guide { top: 5.5rem; width: min(420px, calc(100% - 2rem)); }
    .control-side .volume-range { display: none; }
    .guide-vocal-button { width: 2.5rem; padding: 0; justify-content: center; }
    .guide-vocal-button span { display: none; }
    .guide-vocal-volume { width: 4rem; }
    .guide-vocal-volume output { display: none; }
    .control-row { grid-template-columns: 1fr auto 1fr; }
    .transport { gap: .6rem; }
    .start-card { border-radius: 18px; }
    .start-play { width: 3.2rem; height: 3.2rem; }
}
@media (min-width: 1500px) {
    .karaoke-line { max-width: 1500px; font-size: calc(clamp(3rem, 4vw, 4.9rem) * var(--font-scale)); }
    .now-playing small { display: block; }
}
@media (orientation: landscape) and (max-height: 520px) {
    .player-top { height: 4rem; padding-top: .6rem; }
    .karaoke-line { padding: .35rem 0; font-size: calc(clamp(1.5rem, 5vh, 2.3rem) * var(--font-scale)); }
    .lyrics-track { top: 42%; }
    .player-controls { padding-bottom: .5rem; }
    .entry-guide { top: 4.1rem; width: min(440px, calc(100% - 2rem)); padding: .5rem .7rem; }
    .control-row { height: 2.8rem; }
    .play-button { width: 2.9rem; height: 2.9rem; }
}
:fullscreen .stage, .stage:fullscreen { height: 100vh; }
:fullscreen .karaoke-line, .stage:fullscreen .karaoke-line { font-size: calc(clamp(2.7rem, 5vw, 5.6rem) * var(--font-scale)); }
@media (prefers-reduced-motion: reduce) {
    .lyrics-track { transition-duration: .01ms; }
    .karaoke-line { transform: none !important; }
    .song-background { transform: scale(1.02); }
}