/* ==========================================================================
   Momentia — modo TV (pensado para pantallas grandes y proyectores)
   ========================================================================== */
.tv { --accent: #ff3e8a; --accent-rgb: 255 62 138; --on-accent: #fff;
  --title-font: var(--font-display); --title-weight: 800; --title-style: normal;
  margin: 0; height: 100vh; overflow: hidden; background: #07050d; color: #fff; cursor: none; }
.tv[data-theme="marfil"], .tv[data-theme="esmeralda"], .tv[data-theme="gala"], .tv[data-theme="sagrado"], .tv[data-theme="bendicion"] { --title-font: var(--font-script); --title-weight: 400; --title-style: normal; }
.tv[data-theme="rose"], .tv[data-theme="brindis"] { --title-font: var(--font-garamond); --title-weight: 500; --title-style: italic; }
.tv[data-theme="jardin"], .tv[data-theme="confites"], .tv[data-theme="cosmos"] { --title-font: var(--font-round); --title-weight: 600; }
.tv[data-theme="minimal"] { --title-font: var(--font-body); --title-weight: 750; }
.tv.show-ui { cursor: default; }

.tv-stage { position: fixed; inset: 0; }
.tv-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.tv-slide.is-on { opacity: 1; }
.tv-slide__bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) brightness(.45) saturate(1.3); transform: scale(1.1); }
.tv-slide__img { position: absolute; inset: 4vh 4vw; width: calc(100% - 8vw); height: calc(100% - 8vh); object-fit: contain; filter: drop-shadow(0 30px 60px rgb(0 0 0 / .55)); }
.tv-slide.is-on .tv-slide__img { animation: kb var(--dur, 7s) linear both; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.045); } }

.tv-head { position: fixed; left: 3vw; top: 3vh; z-index: 5; text-shadow: 0 2px 20px rgb(0 0 0 / .6); }
.tv-title { font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style); font-size: clamp(1.6rem, 3vw, 3rem); letter-spacing: -.03em; line-height: 1; }
.tv-count { margin-top: .5rem; font-size: clamp(.9rem, 1.2vw, 1.2rem); color: rgb(255 255 255 / .75); }
.tv-count b { color: #fff; font-variant-numeric: tabular-nums; }

.tv-new { position: fixed; left: 3vw; bottom: 4vh; z-index: 6; display: inline-flex; align-items: center; gap: .7rem; padding: .8rem 1.4rem .8rem 1.1rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.4rem); box-shadow: 0 20px 50px -10px rgb(var(--accent-rgb) / .8); animation: pop .6s var(--ease); }
.tv-new .i { width: 1.4em; height: 1.4em; }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.9); } }

.tv-qr { position: fixed; right: 2.5vw; bottom: 3.5vh; z-index: 5; display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.4rem 1rem 1rem; border-radius: 20px; background: rgb(255 255 255 / .96); color: #140e26; box-shadow: 0 25px 60px -15px rgb(0 0 0 / .7); transition: opacity .4s, transform .4s; }
.tv-qr.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
.tv-qr__code { width: clamp(90px, 9vw, 150px); aspect-ratio: 1; }
.tv-qr__code svg { width: 100%; height: 100%; }
.tv-qr__text b { display: block; font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.6rem); letter-spacing: -.02em; line-height: 1.1; }
.tv-qr__text span { display: block; margin-top: .2rem; font-size: clamp(.8rem, 1vw, 1rem); color: #5d5578; }
.tv-qr__text small { display: block; margin-top: .5rem; font-size: clamp(.75rem, .9vw, .95rem); font-weight: 650; color: var(--accent); filter: saturate(1.2) brightness(.85); }

.tv-msg { position: fixed; left: 50%; bottom: 4vh; z-index: 5; transform: translateX(-50%); width: min(44vw, 720px); padding: 1.3rem 1.8rem; border-radius: 22px; background: rgb(12 8 22 / .72); backdrop-filter: blur(16px); border: 1px solid rgb(255 255 255 / .1); text-align: center; animation: pop .7s var(--ease); }
.tv-msg p { font-family: var(--font-serif); font-size: clamp(1.1rem, 1.7vw, 1.7rem); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv-msg span { display: block; margin-top: .6rem; font-weight: 650; color: rgb(255 255 255 / .7); }

.tv-empty { position: fixed; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 1.5rem; text-align: center; background: radial-gradient(circle at 50% 40%, rgb(var(--accent-rgb) / .3), transparent 60%); }
.tv-empty__qr { width: min(38vh, 380px); aspect-ratio: 1; padding: 18px; background: #fff; border-radius: 26px; }
.tv-empty__qr svg { width: 100%; height: 100%; }
.tv-empty h2 { font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style); font-size: clamp(2rem, 4.5vw, 4rem); letter-spacing: -.03em; }
.tv-empty p { font-size: clamp(1rem, 1.6vw, 1.5rem); color: rgb(255 255 255 / .7); }
.tv-empty ~ .tv-qr { display: none; }

.tv-controls { position: fixed; top: 3vh; right: 2.5vw; z-index: 7; display: flex; gap: .4rem; padding: .4rem; border-radius: 999px; background: rgb(12 8 22 / .7); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.tv.show-ui .tv-controls { opacity: 1; }
.tv-controls button { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.tv-controls button:hover { background: rgb(255 255 255 / .12); }
.tv-controls .i { width: 22px; height: 22px; }