/* ============================================================
   RADIO MEGA — temáticas festivas (las activa js/temas.js)
   Los colores llegan desde el panel /admin (js/temas.js los aplica).
   Las animaciones llevan !important para que se vean también en
   ordenadores con "efectos de animación" desactivados (en ese caso
   js/temas.js pone la mitad de decoraciones).
   ============================================================ */

/* ---------- Fondos con el color de la temática ---------- */
[data-tema] body { background-color: var(--bg); }
[data-tema] .hero::before {
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(var(--tema-a), .28), transparent 60%),
    radial-gradient(50% 50% at 90% 30%, rgba(var(--tema-b), .22), transparent 60%),
    radial-gradient(60% 60% at 60% 110%, rgba(var(--tema-a), .16), transparent 60%);
}
[data-tema] .shell { background: radial-gradient(120% 60% at 50% -10%, rgba(var(--tema-a), .24), transparent 60%), var(--bg); }
[data-tema] .hero-logo, [data-tema] .brand-logo, [data-tema] .topbar-brand img { box-shadow: 0 0 0 1px rgba(var(--tema-a), .5), 0 0 40px rgba(var(--tema-a), .6); }
[data-tema] .hero-tagline, [data-tema] .tagline { text-shadow: 0 0 4px #fff, 0 0 12px rgb(var(--tema-a)), 0 0 28px rgba(var(--tema-a), .8); }
[data-tema] .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; }

[data-tema-fondo="lunares"] body {
  background-image: radial-gradient(rgba(var(--tema-c), .09) 3px, transparent 3.5px), radial-gradient(rgba(var(--tema-a), .08) 3px, transparent 3.5px);
  background-size: 40px 40px; background-position: 0 0, 20px 20px;
}
[data-tema-fondo="lunares"] .shell {
  background: radial-gradient(rgba(var(--tema-c), .09) 3px, transparent 3.5px) 0 0 / 40px 40px,
              radial-gradient(rgba(var(--tema-a), .08) 3px, transparent 3.5px) 20px 20px / 40px 40px,
              radial-gradient(120% 60% at 50% -10%, rgba(var(--tema-a), .24), transparent 60%), var(--bg);
}
[data-tema-fondo="estrellas"] body {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.2px 1.2px at 68% 42%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(2px 2px at 38% 76%, rgba(var(--tema-c), .8), transparent),
    radial-gradient(1.2px 1.2px at 86% 88%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.6px 1.6px at 52% 8%, rgba(var(--tema-c), .6), transparent);
  background-size: 260px 260px;
}

/* ---------- Aviso de la temática ---------- */
.tema-aviso {
  display: flex; justify-content: center; padding: 9px 16px; text-align: center;
  background: var(--grad); color: #fff; font: 800 .92rem/1.3 var(--font-display, system-ui); letter-spacing: .02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .8);
}
.tema-aviso span { animation: temaPulso 2.6s ease-in-out infinite !important; }
@keyframes temaPulso { 50% { transform: scale(1.03); } }
.player .tema-aviso { border-radius: 14px; margin: 0 0 14px; font-size: .85rem; }

/* ---------- Adorno sobre el logotipo ---------- */
.tema-badge { position: relative; display: inline-block; line-height: 0; flex: none; }
.tema-badge[data-badge]::after {
  content: attr(data-badge); position: absolute; top: -26%; right: -18%; line-height: 1;
  font-size: 22px; transform: rotate(14deg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  animation: temaBadge 3s ease-in-out infinite !important; pointer-events: none;
}
.tema-badge.is-big[data-badge]::after { font-size: 58px; top: -14%; right: -10%; }
@keyframes temaBadge { 50% { transform: rotate(4deg) translateY(-3px) scale(1.06); } }

/* ---------- Capas de animación ---------- */
.tema-fx { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.tema-fx span { position: absolute; display: block; line-height: 1; will-change: transform; }
.tema-fx span, .tema-fx span > i { animation-duration: var(--d, 12s) !important; animation-delay: var(--dl, 0s) !important; animation-iteration-count: infinite !important; }
.tema-fx span > i { display: block; font-style: normal; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }

/* Nieve: caen recto y se mecen */
.ef-nieve span { top: -30px; animation-name: temaCaeRecto !important; animation-timing-function: linear !important; }
.ef-nieve span > i { animation-name: temaVaiven !important; animation-timing-function: ease-in-out !important; animation-direction: alternate !important; filter: none; }
.ef-nieve .copo { border-radius: 50%; background: radial-gradient(circle, #fff 0 45%, rgba(255, 255, 255, .55) 60%, transparent 72%); box-shadow: 0 0 6px rgba(255, 255, 255, .6); }

/* Lluvia de emojis girando */
.ef-cae span { top: -60px; animation-name: temaCae !important; animation-timing-function: linear !important; }

/* Flotan hacia arriba */
.ef-flota span { bottom: -60px; animation-name: temaFlota !important; animation-timing-function: ease-in-out !important; }

/* Vuelan de lado a lado ondulando (murciélagos, calaveras…) */
.ef-vuela span { left: -12vw; animation-name: temaVuela !important; animation-timing-function: linear !important; }
.ef-vuela span.izq { left: auto; right: -12vw; animation-name: temaVuelaIzq !important; }
.ef-vuela span > i { animation-name: temaAleteo !important; animation-timing-function: ease-in-out !important; animation-direction: alternate !important; }

/* Pétalos al viento */
.ef-petalos span { top: -40px; animation-name: temaPetalo !important; animation-timing-function: linear !important; }
.ef-petalos span > i { animation-name: temaGiro3d !important; animation-timing-function: linear !important; }

/* Confeti */
.ef-confeti span { top: -20px; animation-name: temaCaeRecto !important; animation-timing-function: linear !important; }
.ef-confeti .papel { animation-name: temaPapel !important; animation-timing-function: linear !important; filter: none; }

/* Bailarines en las esquinas */
.ef-baile .bailarin { bottom: calc(var(--dock-h, 80px) + 24px); left: 1.5%; font-size: 58px; opacity: .92; }
.ef-baile .bailarin.der { left: auto; right: 1.5%; }
.ef-baile .bailarin.alto { bottom: 46%; font-size: 44px; opacity: .7; }
.ef-baile .bailarin > i { transform-origin: 50% 100%; animation-name: temaBaile !important; animation-timing-function: ease-in-out !important; animation-direction: alternate !important; }
@media (max-width: 760px) { .ef-baile .bailarin { bottom: 150px; font-size: 34px; opacity: .8; } }

/* Fuegos artificiales */
.ef-fuegos .fuego { width: 0; height: 0; animation-name: none !important; }
.ef-fuegos .chispa { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; filter: none; box-shadow: 0 0 8px currentColor, 0 0 3px #fff;
  animation-name: temaChispa !important; animation-timing-function: cubic-bezier(.15, .7, .3, 1) !important; }
@keyframes temaChispa {
  0%, 8% { transform: rotate(var(--ang)) translateY(0) scale(.4); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: rotate(var(--ang)) translateY(-100px) scale(1); opacity: 1; }
  80%, 100% { transform: rotate(var(--ang)) translateY(-130px) scale(.3); opacity: 0; }
}
@media (max-width: 760px) { @keyframes temaChispa {
  0%, 8% { transform: rotate(var(--ang)) translateY(0) scale(.4); opacity: 0; } 12% { opacity: 1; }
  55% { transform: rotate(var(--ang)) translateY(-52px) scale(1); opacity: 1; }
  80%, 100% { transform: rotate(var(--ang)) translateY(-66px) scale(.3); opacity: 0; } } }

/* Latidos */
.ef-latido span { animation-name: temaLatido !important; animation-timing-function: ease-in-out !important; }
@keyframes temaLatido {
  0% { transform: scale(0); opacity: 0; }
  15% { transform: scale(1.15); opacity: .9; }
  25% { transform: scale(.9); } 35% { transform: scale(1.2); } 45% { transform: scale(.95); }
  55% { transform: scale(1.1); opacity: .9; }
  100% { transform: scale(.2) translateY(-40px); opacity: 0; }
}

/* Niebla (fondo) */
.niebla-capa { z-index: 44; }
.niebla-capa .niebla {
  left: -50%; width: 200%; height: 42%;
  background: radial-gradient(40% 60% at 25% 60%, rgba(220, 220, 255, .55), transparent 70%),
              radial-gradient(35% 55% at 70% 50%, rgba(var(--tema-b), .5), transparent 70%),
              radial-gradient(30% 50% at 50% 70%, rgba(200, 200, 230, .45), transparent 70%);
  filter: blur(28px); animation-name: temaNiebla !important; animation-timing-function: ease-in-out !important; animation-direction: alternate !important;
}

@keyframes temaCaeRecto { to { transform: translate3d(0, 112vh, 0); } }
@keyframes temaVaiven { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
@keyframes temaCae {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(30px, 55vh, 0) rotate(180deg); }
  100% { transform: translate3d(-20px, 115vh, 0) rotate(360deg); }
}
@keyframes temaFlota {
  0% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  25% { transform: translate3d(28px, -30vh, 0) rotate(8deg); }
  50% { transform: translate3d(-24px, -60vh, 0) rotate(-6deg); }
  75% { transform: translate3d(20px, -90vh, 0) rotate(6deg); }
  100% { transform: translate3d(0, -120vh, 0) rotate(-8deg); }
}
@keyframes temaVuela { to { transform: translate3d(124vw, 0, 0); } }
@keyframes temaVuelaIzq { to { transform: translate3d(-124vw, 0, 0); } }
@keyframes temaAleteo { from { transform: translateY(-28px) rotate(-12deg) scale(.92); } to { transform: translateY(28px) rotate(10deg) scale(1.06); } }
@keyframes temaPetalo {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(70px, 38vh, 0); }
  66% { transform: translate3d(-40px, 76vh, 0); }
  100% { transform: translate3d(50px, 114vh, 0); }
}
@keyframes temaGiro3d { to { transform: rotate3d(1, .6, .3, 360deg); } }
@keyframes temaPapel { to { transform: rotate3d(1, 1, 0, 720deg); } }
@keyframes temaBaile {
  0% { transform: rotate(-14deg) translateY(0) scale(1); }
  50% { transform: rotate(0deg) translateY(-16px) scale(1.08); }
  100% { transform: rotate(14deg) translateY(0) scale(1); }
}
@keyframes temaNiebla { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(22%, -4%, 0); } }

/* ============================================================
   BANNERS ANIMADOS (js/temas-banner.js)
   Un dibujo a todo lo ancho con el mensaje en la letra de la temática.
   Todas las animaciones llevan !important (ver nota del principio).
   ============================================================ */
@font-face { font-family: "RM Creepster"; src: url("../assets/fonts/creepster.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "RM Nosifer"; src: url("../assets/fonts/nosifer.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "RM Christmas"; src: url("../assets/fonts/mountains-of-christmas.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "RM Oleo"; src: url("../assets/fonts/oleo-script.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "RM Lobster"; src: url("../assets/fonts/lobster.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "RM Luckiest"; src: url("../assets/fonts/luckiest-guy.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "RM Monoton"; src: url("../assets/fonts/monoton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "RM GreatVibes"; src: url("../assets/fonts/great-vibes.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "RM Shrikhand"; src: url("../assets/fonts/shrikhand.woff2") format("woff2"); font-display: swap; }

.tema-banner {
  --tb-bg: radial-gradient(60% 90% at 20% 30%, rgba(var(--tema-a), .45), transparent 60%), radial-gradient(60% 90% at 80% 70%, rgba(var(--tema-b), .45), transparent 60%), #0b0b14;
  position: relative; overflow: hidden; isolation: isolate; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tb-bg); border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 -30px 50px -40px rgba(0, 0, 0, .8), 0 12px 30px -18px rgba(0, 0, 0, .9);
}
.player .tema-banner { width: 100%; justify-self: stretch; min-height: 136px; margin: 0 0 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); }
.tb-escena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tb-it { position: absolute; display: block; height: auto; overflow: visible; }
.tb-texto { position: relative; z-index: 2; margin: 0; padding: 22px 17%; text-align: center; }
.tb-msg { position: relative; display: inline-block; font-family: var(--tb-font); font-size: clamp(1.6rem, 3.3vw, 3rem); line-height: 1.18; color: #fff; letter-spacing: .01em; }
.tb-w { display: inline-block; white-space: nowrap; font-weight: inherit; }
.tb-msg i { display: inline-block; font-style: normal; }
.player .tb-texto { padding: 16px 16px; }
.player .tb-msg { font-size: 1.45rem; }
.player .tb-solo-pc { display: none; }
@media (max-width: 760px) { .tb-solo-pc { display: none; } .tb-texto { padding: 18px 14px; } .tema-banner { min-height: 150px; } }
/* ajuste de tamaño según la letra */
.tb-f-creepster .tb-msg { font-size: clamp(1.9rem, 4vw, 3.6rem); letter-spacing: .03em; }
.player .tb-f-creepster .tb-msg { font-size: 1.75rem; }
.tb-f-nosifer .tb-msg { font-size: clamp(1.1rem, 2.3vw, 2.1rem); }
.player .tb-f-nosifer .tb-msg { font-size: 1.05rem; }
.tb-f-monoton .tb-msg { font-size: clamp(1.3rem, 2.6vw, 2.4rem); }
.player .tb-f-monoton .tb-msg { font-size: 1.15rem; }
.tb-f-greatvibes .tb-msg { font-size: clamp(1.9rem, 3.6vw, 3.3rem); }
.player .tb-f-greatvibes .tb-msg { font-size: 2rem; }
.tb-f-navidad .tb-msg { font-weight: 700; font-size: clamp(1.9rem, 3.9vw, 3.5rem); }
.player .tb-f-navidad .tb-msg { font-size: 1.75rem; }
.tb-f-oleo .tb-msg { font-weight: 700; }
.tb-f-luckiest .tb-msg { letter-spacing: .03em; }

/* Animaciones comunes */
.tb-p { position: absolute; top: -14px; display: block; animation: tbCaeP var(--d) linear var(--dl) infinite !important; }
.tb-vuela { left: -90px; animation: tbCruza var(--d) linear var(--dl) infinite !important; }
.tb-ave .tb-aleteo, .tb-gaviota .tb-aleteo { transform-box: fill-box; transform-origin: 50% 80%; animation: tbAletea .45s ease-in-out infinite alternate !important; }
@keyframes tbCaeP { to { transform: translate3d(24px, 260px, 0) rotate(360deg); } }
@keyframes tbCruza { to { transform: translate3d(calc(100vw + 260px), 0, 0); } }
@keyframes tbCruzaOnda { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(calc(25vw + 70px), -10px, 0); } 50% { transform: translate3d(calc(50vw + 140px), 6px, 0); } 75% { transform: translate3d(calc(75vw + 200px), -8px, 0); } 100% { transform: translate3d(calc(100vw + 300px), 0, 0); } }
@keyframes tbAletea { to { transform: scaleY(.35); } }
@keyframes tbBota { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes tbTitila { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes tbGira { to { transform: rotate(360deg); } }
@keyframes tbOnda { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tbSube { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate3d(14px, -230px, 0) scale(1.1); opacity: 0; } }
@keyframes tbFlotaGira { 0% { transform: translateY(0) rotate(-8deg); } 100% { transform: translateY(-12px) rotate(8deg); } }

/* ---------- HALLOWEEN ---------- */
.tb-halloween { --tb-bg: radial-gradient(18% 40% at 86% 28%, rgba(255, 236, 180, .35), transparent 70%), linear-gradient(180deg, #0c0417 0%, #26092f 55%, #3d1406 100%); }
.tb-halloween .tb-msg i {
  color: #c40000; background: linear-gradient(180deg, #ff4a4a 0%, #c00000 50%, #5a0000 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #1a0000) drop-shadow(0 0 12px rgba(255, 0, 0, .5));
  animation: tbTiembla 4s steps(1) calc(var(--i) * -.41s) infinite !important;
}
.tb-halloween .tb-msg { animation: tbParpadeo 7s linear infinite !important; }
@keyframes tbTiembla { 0%, 86%, 100% { transform: none; } 88% { transform: translate(1px, -1px) rotate(-3deg); } 91% { transform: translate(-1px, 1px) rotate(2deg); } 94% { transform: translate(0, 1px); } }
@keyframes tbParpadeo { 0%, 90%, 94%, 100% { opacity: 1; } 91%, 93% { opacity: .35; } 92% { opacity: .9; } }
.tb-gotas { position: absolute; left: 0; right: 0; top: 74%; height: 0; pointer-events: none; }
.tb-gotas em { position: absolute; top: 0; width: 7px; height: 11px; background: radial-gradient(circle at 40% 70%, #ff3a3a, #8a0000 70%); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  transform-origin: 50% 0; animation: tbGota var(--d) cubic-bezier(.55, 0, .9, .5) var(--dl) infinite !important; }
@keyframes tbGota { 0% { transform: translateY(0) scale(.4, .2); opacity: 0; } 12% { opacity: 1; } 45% { transform: translateY(2px) scale(.9, 1.5); opacity: 1; } 90% { transform: translateY(120px) scale(.8, 1.2); opacity: .9; } 100% { transform: translateY(130px) scale(.8, 1); opacity: 0; } }
.tb-luna { filter: drop-shadow(0 0 22px rgba(255, 240, 200, .75)); animation: tbLuna 6s ease-in-out infinite alternate !important; }
@keyframes tbLuna { to { filter: drop-shadow(0 0 36px rgba(255, 240, 200, .95)); } }
.tb-murcielago .tb-alas { transform-box: fill-box; transform-origin: 50% 40%; animation: tbAletea .22s ease-in-out infinite alternate !important; }
.tb-calabaza { animation: tbBota 2.8s ease-in-out var(--dl, 0s) infinite !important; transform-origin: 50% 100%; filter: drop-shadow(0 0 18px rgba(255, 120, 0, .45)); }
.tb-calabaza .tb-cara { animation: tbVela 1.7s ease-in-out infinite !important; }
@keyframes tbVela { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #ffcf3f); } 30% { opacity: .65; filter: none; } 55% { opacity: .95; } 70% { opacity: .55; } }
.tb-fantasma { animation: tbFantasma 8s ease-in-out infinite !important; }
@keyframes tbFantasma { 0%, 100% { transform: translate(0, 0); opacity: .15; } 30% { transform: translate(-30px, -8px); opacity: .85; } 60% { transform: translate(20px, 10px); opacity: .7; } 85% { opacity: .1; } }
.tb-arana { animation: tbArana 5s ease-in-out var(--dl, 0s) infinite alternate !important; }
@keyframes tbArana { 0% { transform: translateY(-58px); } 100% { transform: translateY(0); } }
.tb-suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; }
.tb-suelo-hw { background: linear-gradient(180deg, #1c0a20, #0a030c); border-radius: 50% 50% 0 0 / 12px 12px 0 0; }
.tb-niebla { position: absolute; left: -50%; bottom: -30px; width: 200%; height: 90px; filter: blur(16px); opacity: .5;
  background: radial-gradient(30% 50% at 20% 60%, rgba(210, 200, 255, .6), transparent 70%), radial-gradient(30% 50% at 60% 50%, rgba(160, 90, 220, .55), transparent 70%), radial-gradient(25% 45% at 85% 60%, rgba(220, 220, 240, .5), transparent 70%);
  animation: tbNiebla 22s ease-in-out infinite alternate !important; }
.tb-niebla.tb-n2 { opacity: .35; bottom: -10px; animation-duration: 31s !important; animation-direction: alternate-reverse !important; }
@keyframes tbNiebla { to { transform: translate3d(20%, 0, 0); } }

/* ---------- NAVIDAD ---------- */
.tb-navidad { --tb-bg: radial-gradient(14% 36% at 11% 26%, rgba(255, 250, 220, .28), transparent 70%), linear-gradient(180deg, #050f2c 0%, #0f2c66 62%, #2c5596 100%); }
.tb-navidad .tb-msg i {
  color: #fff; background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #cfe9ff 70%, #9fd0ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(190, 225, 255, .9)) drop-shadow(0 3px 0 #b5161e) drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
  animation: tbOnda 3s ease-in-out calc(var(--i) * -.12s) infinite !important;
}
.tb-astro { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation: tbTitila 3s ease-in-out var(--dl) infinite !important; }
.tb-trineo { left: -280px; animation: tbCruzaOnda 17s linear infinite !important; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.tb-trineo .tb-galope { animation: tbOnda .5s ease-in-out infinite !important; }
.tb-trineo .tb-galope2 { animation: tbOnda .9s ease-in-out infinite !important; }
.tb-trineo .tb-nariz { animation: tbTitila .8s ease-in-out infinite !important; filter: drop-shadow(0 0 4px #ff2020); }
.tb-colinas { left: 0; bottom: 0; width: 100%; height: 44px; }
.tb-pino .tb-luces circle { animation: tbTitila 1.3s ease-in-out var(--dl) infinite !important; }
.tb-pino .tb-estrella { filter: drop-shadow(0 0 6px #ffd23f); animation: tbTitila 2.4s ease-in-out infinite !important; }
.tb-copo { border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, .8); opacity: .9; }

/* ---------- FERIA ---------- */
.tb-feria { --tb-bg: radial-gradient(rgba(255, 255, 255, .07) 4px, transparent 4.5px) 0 0 / 34px 34px, radial-gradient(rgba(255, 255, 255, .07) 4px, transparent 4.5px) 17px 17px / 34px 34px, linear-gradient(180deg, #33060f 0%, #6f0d1c 65%, #94121f 100%); }
.tb-feria .tb-msg i { color: #fff; text-shadow: 2px 2px 0 #e3262f, 4px 4px 0 #ffcf33, 0 8px 16px rgba(0, 0, 0, .55); animation: tbOnda 2.4s ease-in-out calc(var(--i) * -.1s) infinite !important; }
.tb-toldo { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, #fff 0 20px, #e3262f 20px 40px); }
.tb-toldo::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 9px;
  background: radial-gradient(circle at 10px 0, #fff 9.5px, transparent 10px) 0 0 / 40px 9px repeat-x, radial-gradient(circle at 30px 0, #e3262f 9.5px, transparent 10px) 0 0 / 40px 9px repeat-x; }
.tb-feria .tb-escena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(180deg, #f0c25a, #c8902c); }
.tb-guirnalda { left: 0; top: 18px; width: 100%; height: 60px; }
.tb-farolillo { margin-top: 18px; transform-origin: 50% 0; filter: drop-shadow(0 0 8px rgba(255, 200, 80, .55)); animation: tbFarol 2.6s ease-in-out var(--dl) infinite alternate !important; }
@keyframes tbFarol { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.tb-flamenca { transform-origin: 50% 100%; animation: tbBaila 1.5s ease-in-out var(--dl, 0s) infinite alternate !important; }
.tb-flamenca.tb-der { --sx: -1; }
@keyframes tbBaila { from { transform: scaleX(var(--sx, 1)) rotate(-4deg); } to { transform: scaleX(var(--sx, 1)) rotate(4deg) translateY(-3px); } }
.tb-flamenca .tb-falda { transform-box: fill-box; transform-origin: 50% 0; animation: tbFalda .75s ease-in-out infinite alternate !important; }
@keyframes tbFalda { from { transform: skewX(-9deg) scaleX(.96); } to { transform: skewX(9deg) scaleX(1.06); } }
.tb-flamenca .tb-brazo-i, .tb-flamenca .tb-brazo-d { transform-box: fill-box; transform-origin: 50% 100%; animation: tbBrazo 1.5s ease-in-out infinite alternate !important; }
.tb-flamenca .tb-brazo-d { animation-direction: alternate-reverse !important; }
@keyframes tbBrazo { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
.tb-abanico .tb-varillas { transform-box: fill-box; transform-origin: 50% 100%; animation: tbAbanico 2.2s ease-in-out var(--dl, 0s) infinite alternate !important; }
@keyframes tbAbanico { from { transform: scaleX(.25); } to { transform: scaleX(1); } }

/* ---------- ROCÍO ---------- */
.tb-rocio { --tb-bg: linear-gradient(180deg, #ffa274 0%, #ff7395 42%, #cf4d82 68%, #6b2f6b 100%); }
.tb-rocio .tb-msg i { color: #fff; text-shadow: 0 3px 0 #b0306a, 0 0 18px rgba(255, 255, 255, .45), 0 8px 16px rgba(60, 0, 40, .45); animation: tbOnda 3s ease-in-out calc(var(--i) * -.1s) infinite !important; }
.tb-sol-bajo { position: absolute; left: 50%; bottom: 26px; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%;
  background: radial-gradient(circle, #fff3b0 0 45%, #ffcf6b 60%, rgba(255, 180, 90, 0) 72%); animation: tbSolBajo 5s ease-in-out infinite alternate !important; }
@keyframes tbSolBajo { to { transform: scale(1.08); opacity: .85; } }
.tb-pinos { left: 0; bottom: 34px; width: 100%; height: 56px; opacity: .85; }
.tb-marisma { position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: repeating-linear-gradient(180deg, rgba(255, 220, 230, .25) 0 2px, transparent 2px 9px), linear-gradient(180deg, #a5508c, #4f2556);
  background-size: 200% 100%, 100% 100%; animation: tbBrilloAgua 6s linear infinite !important; }
@keyframes tbBrilloAgua { 50% { opacity: .85; } }
.tb-carreta { left: -200px; animation: tbCruza 34s linear infinite !important; }
.tb-carreta .tb-rueda { transform-box: fill-box; transform-origin: center; animation: tbGira 2.4s linear infinite !important; }
.tb-carreta .tb-paso { animation: tbOnda .7s ease-in-out infinite !important; }
.tb-ermita .tb-campana { transform-box: fill-box; transform-origin: 50% 0; animation: tbCampana 1.4s ease-in-out infinite alternate !important; }
@keyframes tbCampana { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.tb-gaviota path { stroke: #4a2040; }
.tb-petalo { width: 10px; height: 7px; border-radius: 70% 0 70% 0; background: #ff5f97; opacity: .85; }
.tb-rocio .tb-petalo:nth-child(3n) { background: #fff; }

/* ---------- CARNAVAL ---------- */
.tb-carnaval { --tb-bg: linear-gradient(120deg, #26094f 0%, #5b0f6e 50%, #0b3a6e 100%); }
.tb-carnaval .tb-msg i { color: #ffd400; text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(255, 255, 255, .25); animation: tbSalto 1.1s ease-in-out calc(var(--i) * -.08s) infinite !important; }
.tb-carnaval .tb-msg i:nth-child(4n+2) { color: #00d5ff; } .tb-carnaval .tb-msg i:nth-child(4n+3) { color: #ff3fb0; } .tb-carnaval .tb-msg i:nth-child(4n) { color: #7cff4f; }
@keyframes tbSalto { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-9px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.tb-focos i { position: absolute; bottom: -20%; width: 36%; height: 170%; background: linear-gradient(to top, rgba(255, 255, 255, .28), transparent 85%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); transform-origin: 50% 100%; animation: tbFoco 5s ease-in-out infinite alternate !important; }
.tb-focos i:first-child { left: 2%; } .tb-focos i:last-child { right: 2%; animation-direction: alternate-reverse !important; }
@keyframes tbFoco { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.tb-serpentinas { left: 0; top: 0; width: 100%; height: 100%; opacity: .75; }
.tb-serpentinas path { animation: tbSerp 3s linear var(--dl) infinite !important; }
@keyframes tbSerp { to { stroke-dashoffset: -56; } }
.tb-antifaz { animation: tbFlotaGira 2.6s ease-in-out var(--dl, 0s) infinite alternate !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.tb-confeti { width: 7px; height: 11px; border-radius: 2px; }

/* ---------- ANIVERSARIO ---------- */
.tb-aniversario { --tb-bg: radial-gradient(70% 90% at 50% 120%, rgba(255, 31, 154, .4), transparent 70%), linear-gradient(180deg, #0a0614 0%, #1e0a30 100%); }
.tb-aniversario .tb-msg i { color: #ffe9f6; text-shadow: 0 0 3px #fff, 0 0 10px #ff1f9a, 0 0 24px #ff1f9a, 0 0 44px #a24dff; animation: tbNeon 5s linear calc(var(--i) * -.53s) infinite !important; }
@keyframes tbNeon { 0%, 88%, 92%, 100% { opacity: 1; } 89%, 91% { opacity: .3; } }
.tb-aniversario .tb-focos i { background: linear-gradient(to top, rgba(255, 120, 210, .3), transparent 85%); }
.tb-tarta { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
.tb-tarta .tb-llama { transform-box: fill-box; transform-origin: 50% 100%; animation: tbLlama .35s ease-in-out var(--dl) infinite alternate !important; filter: drop-shadow(0 0 5px #ffb020); }
@keyframes tbLlama { from { transform: scale(.85, .9) rotate(-5deg); } to { transform: scale(1.1, 1.15) rotate(5deg); } }
.tb-globo { transform-origin: 50% 100%; animation: tbGlobo 3.6s ease-in-out var(--dl) infinite alternate !important; }
@keyframes tbGlobo { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-16px) rotate(5deg); } }
.tb-brillo { top: auto; bottom: -10px; width: 6px; height: 6px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation-name: tbSube !important; }

/* ---------- SAN VALENTÍN ---------- */
.tb-sanvalentin { --tb-bg: radial-gradient(60% 90% at 50% 50%, rgba(255, 60, 140, .35), transparent 70%), linear-gradient(135deg, #42061f 0%, #85103f 50%, #521266 100%); }
.tb-sanvalentin .tb-msg i { color: #fff; text-shadow: 0 0 8px #ff8fd0, 0 0 20px #ff2d6f, 0 4px 10px rgba(0, 0, 0, .4); animation: tbOnda 3.4s ease-in-out calc(var(--i) * -.09s) infinite !important; }
.tb-late { animation: tbLatido 1.25s ease-in-out var(--dl, 0s) infinite !important; filter: drop-shadow(0 0 14px rgba(255, 45, 111, .7)); }
@keyframes tbLatido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(.97); } 45% { transform: scale(1.1); } 60% { transform: scale(1); } }
.tb-flecha { left: -170px; animation: tbCruza 6s cubic-bezier(.4, 0, .6, 1) infinite !important; }
.tb-corazoncito { top: auto; bottom: -20px; font-size: 15px; color: #ff8fd0; animation-name: tbSube !important; }
.tb-corazoncito::before { content: "❤"; }

/* ---------- VERANO ---------- */
.tb-verano { --tb-bg: linear-gradient(180deg, #1976d2 0%, #4fc3f7 46%, #ffd89a 74%, #ffb36b 100%); }
.tb-verano .tb-msg i { color: #fff8dc; text-shadow: 3px 3px 0 #ff6f3c, 6px 6px 0 rgba(120, 40, 0, .22), 0 0 18px rgba(255, 255, 255, .35); animation: tbOnda 2.6s ease-in-out calc(var(--i) * -.1s) infinite !important; }
.tb-sol { filter: drop-shadow(0 0 20px rgba(255, 220, 80, .9)); }
.tb-sol .tb-rayos { transform-box: fill-box; transform-origin: center; animation: tbGira 18s linear infinite !important; }
.tb-olas { position: absolute; left: 0; bottom: 30px; width: 200%; height: 36px; animation: tbOla 9s linear infinite !important; }
.tb-olas svg { display: block; width: 100%; height: 100%; }
.tb-olas.tb-o2 { bottom: 12px; height: 32px; animation-duration: 6s !important; animation-direction: reverse !important; }
.tb-verano .tb-escena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30px; height: 30px; background: #1f8fd6; opacity: .75; z-index: -1; }
@keyframes tbOla { to { transform: translate3d(-50%, 0, 0); } }
.tb-arena { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(180deg, #ffe0a3, #e9b765); }
.tb-barco { left: -70px; animation: tbCruzaOnda 46s linear infinite !important; }
.tb-verano .tb-ave path { stroke: #fff; }
.tb-palmera { transform-origin: 50% 100%; animation: tbPalmera 3.8s ease-in-out var(--dl, 0s) infinite alternate !important; }
.tb-palmera.tb-der { --sx: -1; }
@keyframes tbPalmera { from { transform: scaleX(var(--sx, 1)) rotate(-2deg); } to { transform: scaleX(var(--sx, 1)) rotate(3deg); } }

/* ---------- SENCILLO (temáticas nuevas) ---------- */
.tb-generico .tb-msg i { color: #fff; text-shadow: 0 0 10px rgba(var(--tema-a), .9), 0 0 26px rgba(var(--tema-b), .8), 0 4px 10px rgba(0, 0, 0, .5); animation: tbOnda 2.8s ease-in-out calc(var(--i) * -.1s) infinite !important; }
.tb-emoji { position: absolute; font-style: normal; opacity: .75; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); animation: tbFlotaGira var(--d) ease-in-out var(--dl) infinite alternate !important; }

/* Emojis del mensaje: con sus colores de siempre */
.tema-banner .tb-msg i.tb-emo { background: none !important; -webkit-text-fill-color: initial !important; color: initial; text-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); font-family: system-ui, "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: .8em; margin-left: .15em; }
/* En el móvil (dentro del reproductor) los dibujos van más pequeños para no tapar el texto */
.player .tb-calabaza { width: 60px !important; } .player .tb-calabaza.tb-peque { width: 48px !important; }
.player .tb-luna { width: 46px !important; } .player .tb-fantasma { width: 28px !important; } .player .tb-arana { width: 18px !important; }
.player .tb-murcielago { max-width: 34px; }
.player .tb-pino { width: 46px !important; } .player .tb-flamenca { width: 54px !important; }
.player .tb-antifaz { width: 62px !important; } .player .tb-corazon { width: 46px !important; }
.player .tb-palmera { width: 62px !important; } .player .tb-ermita { width: 58px !important; }
.player .tb-colinas { height: 28px; } .player .tb-sol-bajo { width: 96px; height: 96px; margin-left: -48px; }
.player .tema-banner .tb-escena > .tb-it, .player .tema-banner .tb-escena > .tb-p { opacity: .9; }
.player .tb-texto { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.player .tb-serpentinas { opacity: .4; } .player .tb-focos { opacity: .6; }