/* «Escuchar esta noticia» — prefijo .na- */
.na-player {
  --na-purple: var(--purple, #23104d);
  --na-green: var(--green, #00fe49);
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 4px; padding: 10px 12px 10px 10px;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--na-purple) 0%, #3a1c78 100%);
  color: #fff; width: 100%; max-width: 640px; box-sizing: border-box; contain: inline-size;
  box-shadow: 0 10px 28px -14px rgb(35 16 77 / 60%);
}
.na-play {
  position: relative; flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--na-green); color: #0b0a12; cursor: pointer; display: grid; place-items: center;
  transition: transform .15s ease, box-shadow .2s ease;
}
.na-play:hover { transform: scale(1.06); box-shadow: 0 0 0 6px rgb(0 254 73 / 18%); }
.na-play:focus-visible, .na-queue:focus-visible, .na-card-queue:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.na-play svg { width: 22px; height: 22px; }
.na-i-pause, .na-spinner { display: none; }
.na-player.is-playing .na-i-play { display: none; }
.na-player.is-playing .na-i-pause { display: block; }
.na-player.is-loading .na-i-play, .na-player.is-loading .na-i-pause { display: none; }
.na-player.is-loading .na-spinner { display: block; }
.na-player.is-loading .na-play { cursor: progress; }
.na-player.is-loading .na-copy small { color: var(--na-green); }
.na-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgb(11 10 18 / 25%); border-top-color: #0b0a12; animation: na-spin .8s linear infinite; }
@keyframes na-spin { to { transform: rotate(360deg); } }
.na-copy { min-width: 0; flex: 1; }
.na-copy strong { display: block; font: 800 19px/1.1 var(--display, "Barlow Condensed", Arial, sans-serif); letter-spacing: .01em; text-transform: uppercase; }
.na-copy small { display: block; margin-top: 3px; font-size: 12.5px; color: rgb(255 255 255 / 78%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-bars { display: none; align-items: flex-end; gap: 3px; height: 20px; }
.na-bars i { width: 3px; height: 30%; border-radius: 2px; background: var(--na-green); animation: na-bar 1s ease-in-out infinite; }
.na-bars i:nth-child(2) { animation-delay: -.3s; }
.na-bars i:nth-child(3) { animation-delay: -.6s; }
.na-bars i:nth-child(4) { animation-delay: -.15s; }
.na-player.is-playing .na-bars { display: inline-flex; }
@keyframes na-bar { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .na-bars i, .na-spinner { animation: none; } }
.na-queue {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 99px; border: 1px solid rgb(255 255 255 / 35%); background: transparent; color: #fff;
  font: 700 13px var(--body, Inter, Arial, sans-serif); cursor: pointer; transition: background .15s, border-color .15s;
}
.na-queue:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }
.na-queue svg { width: 18px; height: 18px; }
.na-queue.is-loading { opacity: .6; pointer-events: none; }
.na-queue.is-done { border-color: var(--na-green); color: var(--na-green); }

.news-card { position: relative; }
.na-card-queue {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 2px;
  height: 34px; padding: 0 9px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgb(17 19 23 / 78%); color: #fff; backdrop-filter: blur(6px);
  opacity: .92; transition: background .15s, transform .15s, opacity .15s;
}
.na-card-queue svg { width: 17px; height: 17px; }
.na-card-queue b { font-size: 15px; line-height: 1; color: var(--green, #00fe49); }
.na-card-queue:hover { background: var(--purple, #23104d); transform: scale(1.05); opacity: 1; }
.na-card-queue.is-loading { opacity: .5; pointer-events: none; }
.na-card-queue.is-done { background: var(--green, #00fe49); color: #0b0a12; }
.na-card-queue.is-done b { color: #0b0a12; }

.na-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; z-index: 9999;
  background: #111317; color: #fff; padding: 10px 16px; border-radius: 10px; font: 600 13px var(--body, Inter, Arial, sans-serif);
  transition: opacity .2s, transform .2s; pointer-events: none; }
.na-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .na-player { gap: 10px; padding: 9px; }
  .na-copy strong { font-size: 17px; }
  .na-copy small { white-space: normal; }
  .na-queue span { display: none; }
  .na-queue { width: 40px; padding: 0; justify-content: center; }
}