/* ============================================================
   Movistar Music widget — Bootstrap shim (scoped)
   Replica clases: content-boxed, mt-4, pb-3, card, d-flex,
   align-self-center, ms-auto_, m-0, p-0, p-2, rounded-m, shadow-xl,
   mb-0, d-block, opacity-50, font-*
   + overlay styles (music-overlay...)
   ============================================================ */

#music-widget{
  /* ajusta si tu layout ya tiene contenedor */
}

/* container spacing */
#music-widget.content-boxed{
  max-width: 100%;     /* ajusta a tu grid global */

margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
	background-color: white;
	
	border-radius: var(--r-lg);
}

/* spacing utilities */
#music-widget .mt-4{ margin-top: 1.5rem; }
#music-widget .pb-3{ padding-bottom: 1rem; }
#music-widget .m-0{ margin: 0 !important; }
#music-widget .p-0{ padding: 0 !important; }
#music-widget .p-2{ padding: .5rem !important; }
#music-widget .mb-0{ margin-bottom: 0 !important; }

/* display utilities */
#music-widget .d-block{ display:block !important; }
#music-widget .d-flex{
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px 14px; /* cabecera */
}

/* alignment */
#music-widget .align-self-center{ align-self: center !important; }
#music-widget .ms-auto_{ margin-left: auto !important; }

/* card */
#music-widget .card{
  /*background: rgba(255,255,255,0.06); 
  border: 1px solid rgba(255,255,255,0.10);*/
  border-radius: var(--r-lg);
}

/* tu clase extra */
#music-widget .card-style{
  /* look premium */
  /*backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);*/
}

/* rounded + shadow */
#music-widget .rounded-m{ border-radius: var(--r-lg) !important; }

#music-widget .shadow-xl{
  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    0 2px 8px rgba(0,0,0,0.18);
}

/* wrapper que usa el overlay */
#music-widget .music-reveal{
  position: relative; /* necesario para overlay */
  overflow: hidden;
}

/* tipografía utilitaria (replica “font-xx font-700”) */
#music-widget .font-28{ font-size: 28px; line-height: 1.08; }
#music-widget .font-20{ font-size: 20px; line-height: 1.15; }
#music-widget .font-700{ font-weight: 700; }
#music-widget .font-600{ font-weight: 600; }

/* opacity */
#music-widget .opacity-50{ opacity: .5; }

/* color-highlight (pon tu variable real) */
#music-widget .color-highlight{
  color: var(--ma-accent, #1c9aec);
}

/* SVG logo (el que se ve en cabecera) */
#music-widget svg.movistar_music{
  display:block;
/*width: 100px;
  height: 100px;*/
	width: 3vw;
	height: 3vw;
	padding: 0px !important;
}

/* Iframe */
#music-widget iframe{
  display:block;
  width: 100%;
  border: 0;
}
#music-widget .word-movistar {
	color : #0066FF;
	margin-top: 0px;
}

/* ============================================================
   Overlay (igual que el original: cubre toda la card)
   ============================================================ */
#music-widget .music-overlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  background: #fff; /* overlay blanco como en tu animación */
  opacity: 1;
  pointer-events:none;
}

/* salida */
#music-widget .music-overlay.out{
  opacity: 0;
  transition: opacity 520ms ease;
}

/* logo clonado dentro del overlay */
#music-widget .music-overlay__logo{
  width: min(320px, 72%);
  transform: translateZ(0);
  will-change: transform, opacity;
}
#music-widget .music-overlay__logo svg{
  width: 100%;
  height: auto;
  display:block;
}

/* loader */
#music-widget .music-overlay__loader{
  position:absolute;
  left: 16px;
  bottom: 14px;
  z-index: 21;
  display:inline-flex;
  align-items: baseline;
  gap: 8px;

  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: rgba(0,0,0,.55);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

#music-widget .music-overlay__loader.on{
  opacity: 1;
  transform: translateY(0);
}

#music-widget .music-overlay__loader.out{
  opacity: 0;
}

/* dots */
#music-widget .music-overlay__loader .dots{
  display: inline-flex;
  gap: 2px;
  min-width: 18px;
}
#music-widget .music-overlay__loader .dot{
  display:inline-block;
  opacity:.35;
  animation: maMusicDot 900ms infinite ease-in-out;
}
#music-widget .music-overlay__loader .dot:nth-child(2){ animation-delay: 150ms; }
#music-widget .music-overlay__loader .dot:nth-child(3){ animation-delay: 300ms; }

@keyframes maMusicDot{
  0%,100%{ opacity:.25; transform: translateY(0); }
  50%    { opacity:.9;  transform: translateY(-1px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #music-widget .music-overlay,
  #music-widget .music-overlay__loader,
  #music-widget .music-overlay__logo{
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   Movistar Music — Colores del logotipo (cabecera)
   (sobrescribe fill="white" del <svg>)
   ============================================================ */

#music-widget svg.movistar_music{
  /* no dependas del fill del svg raíz */
  fill: none;
	
}

/* La "M" (path_logo) en azul */
#music-widget svg.movistar_music .path_logo{
  fill: #1c9aec !important; /* azul */
}

/* Barras en morado (puedes ajustar el tono) */
#music-widget svg.movistar_music .path_1,
#music-widget svg.movistar_music .path_2,
#music-widget svg.movistar_music .path_3,
#music-widget svg.movistar_music .path_4,
#music-widget svg.movistar_music .path_5{
  fill: #8b5cf6 !important; /* morado */
}

/* Por si st0/st1 están jugando, reforzamos */
#music-widget svg.movistar_music .st0{ fill: #1c9aec !important; }
#music-widget svg.movistar_music .st1{ fill: #8b5cf6 !important; }

#music-widget .music-reveal iframe{
  overflow: hidden;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0px !important; /* ← importante */
}