/* ═══════════════════════════════════════════════════════════════════════
   MiniLombiFooter — componente de animación interactiva (SVG + GSAP)
   • Fondo transparente · responsive · sin tocar los SVG originales.
   • Todas las poses comparten ancho de viewBox y tienen la línea azul a
     ~20px del fondo → se alinean por el BORDE INFERIOR (bottom:0).
   • La línea azul "viva" es un SVG propio animado; la línea horneada de
     cada pose se recorta abajo (--mlf-clip) para no duplicarla.
   Quitar = borrar la carpeta del componente y su <link>/<script>.
   ═══════════════════════════════════════════════════════════════════════ */

.mlf-root{
  /* ── Variables de tamaño (única medida a tocar) ── */
  --mlf-w: 300px;                       /* ancho del personaje */
  --mlf-line-h: 36px;                   /* alto del lienzo de la línea */
  --mlf-line-base: calc(var(--mlf-w) * 0.0214); /* altura de la línea ORIGINAL del SVG sobre la base del personaje (≈20u de 935) */
  --mlf-line-tune: 0px;                 /* ajuste fino: nudge ± para encajar al pixel con la línea original */
  --mlf-char-drop: 0px;                 /* desplazamiento vertical del personaje (la línea lo sigue para mantenerse alineada) */
  --mlf-gap: 0px;                       /* hueco central de la línea base: 0 = continua (idle); en DJ se anima al ancho de la cabina */
  --mlf-track-y: calc(var(--mlf-w) * 0.04 - 15px); /* altura de la pantalla de pista en el hueco de la cabina (−15px para no tapar el arte) */
  --mlf-mq-dur: 12s;                    /* velocidad del scroll del título (mayor = más lento) */
  --mlf-blue1: #2581C4;
  --mlf-blue2: #60C6EF;

  position: fixed; left: 50%; transform: translateX(-50%); bottom: 46px; z-index: 60;
  width: var(--mlf-w);
  pointer-events: none;                 /* solo el personaje/botones capturan clicks */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
}
.mlf-root *{ box-sizing: border-box; }

/* ── Escenario ── */
.mlf-stage{ position: relative; width: 100%; }

/* Línea base continua de lado a lado, detrás del personaje, centrada en su base.
   En modo DJ se PARTE en dos vía máscara (hueco central = --mlf-gap) para encajar
   con las líneas de continuidad de la cabina. --mlf-gap: 0 = continua. */
.mlf-line{
  position: absolute; left: 50%; transform: translateX(-50%);
  /* Y EXACTA de la línea original del SVG (misma referencia que el personaje) → sin escalón vertical */
  bottom: calc(var(--mlf-line-base) - var(--mlf-char-drop) - var(--mlf-line-h) / 2 + var(--mlf-line-tune));
  width: 100vw;                          /* de lado a lado de la PANTALLA, sin cortes */
  height: var(--mlf-line-h);
  overflow: visible; pointer-events: none; z-index: 0;
  /* máscara: corta un hueco de ancho --mlf-gap centrado (centro del viewport = centro de la cabina) */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--mlf-gap) / 2), transparent calc(50% - var(--mlf-gap) / 2), transparent calc(50% + var(--mlf-gap) / 2), #000 calc(50% + var(--mlf-gap) / 2), #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--mlf-gap) / 2), transparent calc(50% - var(--mlf-gap) / 2), transparent calc(50% + var(--mlf-gap) / 2), #000 calc(50% + var(--mlf-gap) / 2), #000 100%);
}
.mlf-line svg{ width: 100%; height: 100%; display: block; }
.mlf-line path{
  fill: none; stroke: url(#mlfLineGrad); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(96,198,239,.35));   /* grosor/glow igualados a las líneas de la cabina */
}

/* ── Personaje (poses apiladas, crossfade) ── */
.mlf-figure{
  position: relative; width: 100%; z-index: 1;   /* el personaje/booth flota POR ENCIMA de la onda */
  top: var(--mlf-char-drop);                       /* baja al personaje para fundir su línea con la estática */
  /* alto = el de la pose más alta (DJ, viewBox 935×505). SIN recortar → personaje completo */
  height: calc(var(--mlf-w) * 0.5401);
  pointer-events: auto; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.mlf-figure:focus-visible{ box-shadow: 0 0 0 2px var(--mlf-blue2); border-radius: 10px; }
.mlf-pose{
  position: absolute; left: 0; bottom: 0;   /* poses alineadas por la base, sin recorte */
  width: 100%; height: auto; display: block; pointer-events: none;
  opacity: 0; will-change: opacity, transform;
}
.mlf-pose.is-on{ opacity: 1; }

/* ── Bocadillo ── */
.mlf-bubble{
  position: absolute; left: 50%; bottom: calc(var(--mlf-w) * 0.40); z-index: 5; /* por encima del personaje (z-index:1) para que los botones sean clicables */
  transform: translate(-50%, 8px) scale(.9); transform-origin: bottom center;
  width: max-content; max-width: 220px; padding: 12px 14px 13px;
  background: rgba(12,14,22,.92); border: 1px solid rgba(96,198,239,.45);
  border-radius: 14px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), 0 0 18px rgba(37,129,196,.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.mlf-bubble.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.mlf-bubble::after{ /* pico del bocadillo */
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px; background: rgba(12,14,22,.92);
  border-right: 1px solid rgba(96,198,239,.45); border-bottom: 1px solid rgba(96,198,239,.45);
}
.mlf-bubble-q{ font-size: 13px; line-height: 1.35; color: #eef2f8; text-align: center; margin-bottom: 10px; font-weight: 500; }
.mlf-bubble-actions{ display: flex; gap: 8px; justify-content: center; }
.mlf-btn{
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 6px 16px; border-radius: 999px; cursor: pointer; transition: filter .15s, background .15s;
}
.mlf-btn-yes{ border: none; color: #06121c; background: linear-gradient(135deg, var(--mlf-blue2), var(--mlf-blue1)); }
.mlf-btn-yes:hover{ filter: brightness(1.08); }
.mlf-btn-no{ background: transparent; border: 1px solid rgba(255,255,255,.22); color: #cdd6e2; }
.mlf-btn-no:hover{ background: rgba(255,255,255,.08); }

/* ── Bocadillo de AVISO de emisión en directo (calendario) ── */
.mlf-alert{
  position: absolute; left: 50%; bottom: calc(var(--mlf-w) * 0.40); z-index: 6;
  transform: translate(-50%, 8px) scale(.9); transform-origin: bottom center;
  width: max-content; max-width: 232px; padding: 13px 15px 14px;
  background: rgba(12,14,22,.95); border: 1px solid rgba(245,180,60,.5);
  border-radius: 14px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), 0 0 18px rgba(245,180,60,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none; text-align: center;
}
.mlf-alert.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.mlf-alert.is-urgent{ border-color: rgba(255,140,66,.6); }
.mlf-alert.is-live{ border-color: rgba(68,224,160,.55); }
.mlf-alert::after{ content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px; background:rgba(12,14,22,.95); border-right:1px solid rgba(245,180,60,.5); border-bottom:1px solid rgba(245,180,60,.5); }
.mlf-alert.is-urgent::after{ border-color: rgba(255,140,66,.6); }
.mlf-alert.is-live::after{ border-color: rgba(68,224,160,.55); }
.mlf-alert-head{ font-size: 13px; font-weight: 700; color: #ffd9a0; line-height: 1.25; }
.mlf-alert.is-urgent .mlf-alert-head{ color: #ffb088; }
.mlf-alert.is-live .mlf-alert-head{ color: #8df0bd; }
.mlf-alert-show{ font-size: 11px; font-weight: 600; color: #eef2f8; margin-top: 3px; }
.mlf-alert-sub{ font-size: 10px; color: #9fb0c4; margin-top: 1px; margin-bottom: 11px; }
.mlf-alert-cta{
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em; border: none; cursor: pointer;
  padding: 7px 17px; border-radius: 999px; color: #2a1700; background: #f5b43c;
  display: inline-flex; align-items: center; gap: 7px;
  animation: mlfAmber 1.1s ease-in-out infinite;
}
.mlf-alert-cta:hover{ filter: brightness(1.08); }
.mlf-alert-cta .dot{ width: 7px; height: 7px; border-radius: 50%; background: #b40000; box-shadow: 0 0 6px #ff2d2d; }
.mlf-alert.is-urgent .mlf-alert-cta{ background: #ff8c42; color: #2a0f00; animation-duration: .6s; }
.mlf-alert.is-live .mlf-alert-cta{ background: #44e0a0; color: #04130c; animation-duration: 1.3s; }
.mlf-alert.is-live .mlf-alert-cta .dot{ background: #04130c; box-shadow: 0 0 6px rgba(255,255,255,.5); }
@keyframes mlfAmber{ 0%,100%{ opacity: 1; box-shadow: 0 0 12px rgba(245,180,60,.55); } 50%{ opacity: .55; box-shadow: 0 0 3px rgba(245,180,60,.25); } }
.mlf-alert-tv{ display: none; font-size: 11px; color: #cdd6e2; align-items: center; gap: 6px; }
.mlf-alert.is-tv .mlf-alert-cta{ display: none; }
.mlf-alert.is-tv .mlf-alert-tv{ display: inline-flex; }
.mlf-alert-close{ position: absolute; top: 4px; right: 7px; width: 16px; height: 16px; cursor: pointer;
  color: #8b97a8; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mlf-alert-close:hover{ color: #fff; }
@media (prefers-reduced-motion: reduce){ .mlf-alert-cta{ animation: none !important; } }

/* ── Pantalla de pista DENTRO de la cabina (modo DJ) ── */
.mlf-track{
  position: absolute; left: 50%; bottom: var(--mlf-track-y); transform: translate(-50%, 6px);
  display: flex; align-items: center; gap: 7px; max-width: 78%; padding: 5px 9px; z-index: 8;
  background: rgba(6,10,16,.86); border: 1px solid rgba(96,198,239,.45); border-radius: 8px;
  box-shadow: 0 0 12px rgba(37,129,196,.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.mlf-track.is-on{ opacity: 1; visibility: visible; }
/* mini ecualizador animado (las "barras" de la canción) */
.mlf-eq{ display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.mlf-eq i{ width: 2.5px; height: 40%; border-radius: 1px; background: linear-gradient(var(--mlf-blue2), var(--mlf-blue1)); animation: mlfEq .9s ease-in-out infinite; }
.mlf-eq i:nth-child(2){ animation-delay: .2s } .mlf-eq i:nth-child(3){ animation-delay: .45s } .mlf-eq i:nth-child(4){ animation-delay: .15s }
@keyframes mlfEq{ 0%,100%{ height: 28% } 50%{ height: 100% } }
/* textos */
.mlf-track-txt{ display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.mlf-track-status{ font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #7fe0a8; display: flex; align-items: center; gap: 4px; }
.mlf-track-status.is-live{ color: #ff6b6b; }
.mlf-track-status .dot{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: mlfPulse 1.4s ease-in-out infinite; }
@keyframes mlfPulse{ 0%,100%{ opacity: 1 } 50%{ opacity: .3 } }
/* título con SCROLL horizontal continuo (marquee): el texto va pasando lentamente */
.mlf-track-title{ font-size: 10px; font-weight: 600; color: #eaf2fb; overflow: hidden; max-width: calc(var(--mlf-w) * 0.46); }
.mlf-track-scroll{ display: inline-flex; white-space: nowrap; will-change: transform; }
.mlf-track.is-on .mlf-track-scroll{ animation: mlfMarquee var(--mlf-mq-dur) linear infinite; }
.mlf-mq{ padding-right: 2em; }   /* separación entre las dos copias para un bucle sin saltos */
@keyframes mlfMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mlf-track.is-on .mlf-track-scroll{ animation: none; } }

/* ── Botón CERRAR (esquina sup-derecha de la cabina, estilo cerrar ventana; solo en DJ) ── */
.mlf-close{
  position: absolute; top: var(--mlf-close-top, calc(var(--mlf-w) * 0.04)); right: var(--mlf-close-right, calc(var(--mlf-w) * 0.03)); z-index: 9;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #d4e9f7; cursor: pointer; pointer-events: auto;
  background: rgba(8,12,18,.66); border: 1px solid rgba(96,198,239,.45);
  box-shadow: 0 0 10px rgba(37,129,196,.28), inset 0 0 0 1px rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transform: scale(.8);
  transition: opacity .3s ease, transform .22s cubic-bezier(.34,1.56,.64,1), background .18s, border-color .18s, box-shadow .18s;
}
.mlf-root.is-dj .mlf-close{ opacity: 1; visibility: visible; transform: scale(1); }   /* aparece con la cabina */
.mlf-close:hover{ background: rgba(96,198,239,.16); border-color: #60C6EF; box-shadow: 0 0 16px rgba(96,198,239,.55); }
.mlf-close:active{ transform: scale(.9); }
.mlf-close:focus-visible{ outline: none; border-color: #60C6EF; box-shadow: 0 0 0 2px rgba(96,198,239,.55); }
.mlf-close svg{ width: 11px; height: 11px; display: block; }

/* ── Responsive ── */
@media (max-width: 760px){ .mlf-root{ --mlf-w: 220px; } }
@media (max-width: 460px){ .mlf-root{ --mlf-w: 168px; } .mlf-bubble{ max-width: 170px; } .mlf-bubble-q{ font-size: 12px; } }
@media (max-height: 440px){ .mlf-root{ display: none; } }

/* ── Accesibilidad: respeta reduce-motion (el JS también lo comprueba) ── */
@media (prefers-reduced-motion: reduce){
  .mlf-pose, .mlf-line path{ transition: none !important; }
  .mlf-eq i, .mlf-track-status .dot{ animation: none !important; }
  .mlf-eq i{ height: 70% !important; }
}