/* ================== BASE ================== */
/* Reducir info (title + artist) en móvil */
@media (max-width: 768px) {
  .smart-track-player .info {
    font-size: 12px;
    line-height: 1.2;
  }

  .smart-track-player .info .title {
    font-size: 13px;
    line-height: 1.25;
  }

  .smart-track-player .info .artist {
    font-size: 11px;
    opacity: 0.8;
  }
}
.smart-player-wrapper{
  max-width:800px;
  margin: 20px 0px 20px 0px !Important;
}
.smart-player{
  display:flex; align-items:center;
  background:#191c30; color:#fff;
  padding:15px;
  border-radius:12px; gap:16px;
  max-height:120px; transition:max-height .5s ease;
  overflow:hidden;
  margin: 20px 0px 20px 0px !Important;
}
.smart-player.expanded{ max-height:200px; }

.play-btn{
  width:60px; height:60px;
  background:#f9cb40; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:none;
}
.play-btn svg{ width:28px; height:28px; fill:#191c30; }

.info{ flex:1;
padding-top:20px}

.title{ font-size: 16px;
    font-weight: 400 !important;
    line-height: 1.2 !important; }
.artist{ font-size:14px; color:#aaa; line-height:14px; }

/* ================== PROGRESO ================== */
.progress-container{
  position:relative;
  background:#ccc; height:8px;
  margin-top:6px;
  border-radius:999px;
  cursor:pointer;
  overflow:visible;
}
.progress-bar{
  height:100%; width:0%;
  background:#4169e1; border-radius:999px;
}

.progress-knob{
  position:absolute; top:50%; left:0%;
  transform:translate(-50%,-50%);
  width:16px; height:16px;
  background:#ffffff;
  border:2px solid #191c30;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  pointer-events:none;
}

.seek-tooltip{
  position:absolute; top:-34px; transform:translateX(-50%);
  background:#fff; color:#222;
  font-size:12px; font-weight:600;
  padding:4px 8px; border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  white-space:nowrap; min-width:max-content; z-index:10;
}
.seek-tooltip[hidden]{ display:none!important; }
.seek-tooltip::after{
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#fff;
}

/* ================== TIEMPOS (fade al dar Play) ================== */
.smart-player .durada{
  opacity:0; visibility:hidden;
  transition:opacity 1.5s ease, visibility 1.5s ease;
  height:20px; font-size:13px; margin-top:10px;
  color:#fff; font-family:sans-serif;
  display:flex; justify-content:space-between; gap:10px;
}
.smart-player .durada.visible{ opacity:1; visibility:visible; }

/* ================== DESCARGA ================== */
.smart-player .download-link{
  width:44px; height:44px; border:0; outline:0;
  background:transparent !important;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
  transition:color .18s ease, transform .08s ease;
  -webkit-tap-highlight-color:transparent;
}
.smart-player .download-link:focus-visible,
.smart-player .download-link:hover{
  color:#2e45ff;
  transform:translateY(-1px);
}
.smart-player .download-link:active{ transform:translateY(0); }

.smart-player .download-link svg{
  width:22px; height:22px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round;
  shape-rendering:geometricPrecision; text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.smart-player .download-link svg path{ vector-effect:non-scaling-stroke; }

.hidden{ display:none; }

@media (max-width:640px){
  .smart-player .download-link{ width:48px; height:48px; }
  .smart-player .download-link svg{ width:24px; height:24px; }
}
/* ✅ Permitir que el player crezca con títulos largos */
.smart-player{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  align-items: flex-start; /* así el texto puede crecer hacia abajo */
}

/* Si tu JS aplica la clase expanded, que no vuelva a limitar */
.smart-player.expanded{
  max-height: none !important;
}

/* ✅ Asegurar que el texto pueda hacer wrap correctamente */
.smart-player .info{
  min-width: 0;            /* CLAVE en flexbox para que el texto no “empuje” */
}

.smart-player .title,
.smart-player .artist{
  white-space: normal;
  word-break: break-word;  /* evita desbordes con palabras largas */
}

/* Mantener el botón play y descarga centrados verticalmente aunque el texto crezca */
.smart-player .play-btn,
.smart-player .download-link{
  align-self: center;
}
.smart-player--transparent{
  background: transparent !important;
}

body.nrll-programa-selected .smart-player{
  background: transparent !important;
}



/* Oculta el icono de audio nativo de Newspaper DESDE EL PRIMER PINTADO.
 * Así no aparece centrado durante uno o dos segundos antes de que actúe JavaScript.
 * :has() está soportado por Safari/iOS moderno y navegadores Chromium actuales. */
.td-video-play-ico:has(.td-icon-audio-thumb-play),
.td-video-play-ico:has([class*="td-icon-audio"]){
  display:none!important;
}
.td-icon-audio-thumb-play,
[class*="td-icon-audio-thumb-play"]{
  display:none!important;
}


/* ================== BOTÓN COMPACTO SOBRE MINIATURA ================== */
.nrll-image-audio-element,.nrll-listing-player,.nrll-original-audio-icon-hidden{display:none!important}
.td-icon-audio-thumb-play,[class*="td-icon-audio-thumb-play"]{display:none!important}
.td-video-play-ico:has(.td-icon-audio-thumb-play),.td-video-play-ico:has([class*="td-icon-audio"]){display:none!important}
.nrll-audio-thumb-host{position:relative!important}
.nrll-image-audio-control.nrll-title-audio-control{box-sizing:border-box;position:absolute!important;left:10px!important;bottom:10px!important;z-index:30!important;display:inline-flex!important;align-items:center!important;gap:8px!important;height:38px!important;min-width:38px!important;padding:3px 11px 3px 3px!important;border:1px solid rgba(0,0,0,.12)!important;border-radius:999px!important;background:#fff!important;color:#161616!important;box-shadow:0 2px 9px rgba(0,0,0,.16)!important;font-family:inherit!important;font-size:13px!important;font-weight:700!important;line-height:1!important;cursor:pointer!important;-webkit-appearance:none!important;appearance:none!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;white-space:nowrap!important}
.nrll-image-audio-control.nrll-title-audio-control:hover{transform:translateY(-1px);box-shadow:0 4px 13px rgba(0,0,0,.20)!important}
.nrll-image-audio-control.nrll-title-audio-control:active{transform:translateY(0) scale(.98)}
.nrll-image-audio-play{position:relative;display:block;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:#f9d400}
.nrll-image-audio-play:before{content:'';position:absolute;left:12px;top:8px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:11px solid #111}
.nrll-image-audio-control.is-playing .nrll-image-audio-play:before{left:10px;top:9px;width:4px;height:14px;border:0;background:#111;box-shadow:7px 0 0 #111}
.nrll-image-audio-label{letter-spacing:.01em}
.nrll-image-audio-duration{font-weight:600;opacity:.72;font-variant-numeric:tabular-nums}
.nrll-image-audio-duration:empty{display:none}
.nrll-image-audio-duration:not(:empty):before{content:'·';margin-right:7px;opacity:.55}
.nrll-module-without-thumb .nrll-image-audio-control.nrll-title-audio-control{position:relative!important;left:auto!important;bottom:auto!important;margin:7px 0 8px!important}
@media(max-width:767px){.nrll-image-audio-control.nrll-title-audio-control{left:8px!important;bottom:8px!important;height:36px!important;padding:2px 10px 2px 2px!important;font-size:12px!important;gap:7px!important}.nrll-image-audio-play{flex-basis:30px;width:30px;height:30px}.nrll-image-audio-play:before{left:11px;top:7px}.nrll-image-audio-control.is-playing .nrll-image-audio-play:before{left:9px;top:8px}.td-module-thumb.nrll-audio-thumb-host,.tdb-module-thumb.nrll-audio-thumb-host,.td-image-container.nrll-audio-thumb-host,.td-module-image.nrll-audio-thumb-host,.td-thumb-css.nrll-audio-thumb-host,.tdb-module-img.nrll-audio-thumb-host{overflow:visible!important}}

/* 2.0.1 — Botón de escucha más compacto y tipografía más ligera */
.nrll-image-audio-control.nrll-title-audio-control{
  height:34px!important;
  min-width:34px!important;
  padding:2px 10px 2px 2px!important;
  gap:7px!important;
  font-size:12px!important;
  font-weight:400!important;
}
.nrll-image-audio-play{
  flex:0 0 28px;
  width:28px;
  height:28px;
}
.nrll-image-audio-play:before{
  left:10px;
  top:7px;
  border-top-width:7px;
  border-bottom-width:7px;
  border-left-width:10px;
}
.nrll-image-audio-control.is-playing .nrll-image-audio-play:before{
  left:8px;
  top:7px;
  width:4px;
  height:14px;
}
.nrll-image-audio-label{
  font-size:11.5px!important;
  font-weight:400!important;
  letter-spacing:.015em!important;
}
.nrll-image-audio-duration{
  font-size:11.5px!important;
  font-weight:400!important;
  opacity:.72;
}
@media(max-width:767px){
  .nrll-image-audio-control.nrll-title-audio-control{
    height:32px!important;
    min-width:32px!important;
    padding:2px 9px 2px 2px!important;
    gap:6px!important;
    font-size:11px!important;
  }
  .nrll-image-audio-play{
    flex-basis:26px;
    width:26px;
    height:26px;
  }
  .nrll-image-audio-play:before{
    left:9px;
    top:6px;
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:9px;
  }
  .nrll-image-audio-control.is-playing .nrll-image-audio-play:before{
    left:7px;
    top:6px;
    height:14px;
  }
  .nrll-image-audio-label,
  .nrll-image-audio-duration{
    font-size:11px!important;
    font-weight:400!important;
  }
}