.yubia-live{--yl-cyan:#42d8ff;--yl-blue:#3298ff;position:relative;overflow:hidden;width:100%;box-sizing:border-box;padding:26px;border:1px solid rgba(65,181,255,.30);border-radius:18px;background:linear-gradient(110deg,#14284e 0%,#1d3976 52%,#2847a0 100%);color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.18);font-family:inherit}.yubia-live:after{content:"";position:absolute;inset:-40% -10% auto 45%;height:300px;background:radial-gradient(circle,rgba(56,189,248,.12),transparent 66%);pointer-events:none}.yubia-live__topline{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.yubia-live__eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.12em;color:#7ddcff}.yubia-live__dot{width:9px;height:9px;border-radius:50%;background:#ff334f;box-shadow:0 0 0 5px rgba(255,51,79,.13)}.yubia-live__status{padding:7px 10px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(4,15,34,.25);font-size:10px;font-weight:800;letter-spacing:.08em;color:#d9efff}.yubia-live__main{position:relative;z-index:1;display:grid;grid-template-columns:150px minmax(0,1fr);gap:25px;align-items:center}.yubia-live__art-wrap{position:relative;width:150px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#081528;box-shadow:0 10px 25px rgba(0,0,0,.25)}.yubia-live__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}.yubia-live__art.is-ready{opacity:1}.yubia-live__art-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:900;letter-spacing:.03em;color:#fff;background:linear-gradient(145deg,#07162a,#153b78)}.yubia-live__art-fallback span{color:var(--yl-cyan)}.yubia-live__info{min-width:0}.yubia-live__label{display:block;margin-bottom:7px;color:#70d9ff;font-size:10px;font-weight:800;letter-spacing:.14em}.yubia-live__title{margin:0 0 4px!important;color:#fff!important;font-size:clamp(22px,2.4vw,34px)!important;line-height:1.12!important;font-weight:800!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yubia-live__subtitle{margin:0!important;color:#c9d8ed!important;font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yubia-live__spectrum{height:43px;margin:18px 0 15px;display:flex;align-items:center;gap:4px;overflow:hidden}.yubia-live__spectrum i{display:block;width:3px;height:9px;border-radius:4px;background:linear-gradient(to top,#309bff,#5ee7ff);opacity:.8;transform-origin:center;animation:ylWave 1.15s ease-in-out infinite;animation-delay:calc(var(--i) * -45ms);animation-play-state:paused}.yubia-live.is-playing .yubia-live__spectrum i{animation-play-state:running}.yubia-live__spectrum i:nth-child(3n){height:18px}.yubia-live__spectrum i:nth-child(4n){height:28px}.yubia-live__spectrum i:nth-child(7n){height:36px}@keyframes ylWave{0%,100%{transform:scaleY(.35);opacity:.45}50%{transform:scaleY(1);opacity:1}}.yubia-live__controls{display:flex;align-items:center;gap:15px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}.yubia-live__play{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:.2s ease}.yubia-live__play:hover{transform:scale(1.04);background:rgba(255,255,255,.08)}.yubia-live__play-icon{font-size:20px;line-height:1;margin-left:3px}.yubia-live.is-playing .yubia-live__play-icon{margin-left:0}.yubia-live__live-text{display:flex;flex-direction:column;gap:2px;min-width:110px}.yubia-live__live-text strong{font-size:12px;letter-spacing:.08em;color:#fff}.yubia-live__live-text small{font-size:10px;color:#a9bed7}.yubia-live__volume{margin-left:auto;display:flex;align-items:center;gap:9px}.yubia-live__mute{border:0;background:transparent;color:#fff;font-size:17px;cursor:pointer;padding:5px}.yubia-live__volume input{width:105px;accent-color:#fff}.yubia-live.is-buffering .yubia-live__status{color:#ffe08a}.yubia-live.is-error .yubia-live__status{color:#ff9ba8}@media(max-width:700px){.yubia-live{padding:20px}.yubia-live__topline{align-items:flex-start}.yubia-live__status{display:none}.yubia-live__main{grid-template-columns:92px minmax(0,1fr);gap:16px}.yubia-live__art-wrap{width:92px;border-radius:12px}.yubia-live__title{font-size:20px!important}.yubia-live__spectrum{margin:13px 0 10px;height:30px;gap:3px}.yubia-live__spectrum i{width:2px}.yubia-live__controls{grid-column:1/-1;margin-left:-108px}.yubia-live__play{width:48px;height:48px;flex-basis:48px}.yubia-live__volume input{width:80px}}@media(max-width:430px){.yubia-live__main{grid-template-columns:76px minmax(0,1fr)}.yubia-live__art-wrap{width:76px}.yubia-live__controls{margin-left:-92px}.yubia-live__live-text{display:none}.yubia-live__volume{margin-left:auto}.yubia-live__eyebrow{font-size:10px}}


/* v1.1.1 · alineación con YubiaFM Programación */
@media (min-width: 1025px) {
  .yubia-live {
    height: 100% !important;
    min-height: 318px !important;
  }
}
@media (min-width: 1025px) and (max-width: 1500px) {
  .yubia-live { min-height: 300px !important; padding: 20px !important; }
  .yubia-live__topline { margin-bottom: 14px !important; }
  .yubia-live__main { grid-template-columns: 130px minmax(0,1fr) !important; gap: 18px !important; }
  .yubia-live__art-wrap { width: 130px !important; }
  .yubia-live__spectrum { margin: 13px 0 11px !important; height: 36px !important; }
}


/* v1.1.2 · ajuste fino de escritorio/1080p
   Evita desbordes, reduce carátula y reserva espacio real para volumen. */
.yubia-live,
.yubia-live * { box-sizing: border-box; }

.yubia-live__main,
.yubia-live__info,
.yubia-live__controls,
.yubia-live__control-row {
    min-width: 0;
}

.yubia-live input[type="range"] {
    max-width: 100%;
}

/* Escritorio intermedio: 1920px de pantalla suele dejar ~500px por columna. */
@media (min-width: 1025px) and (max-width: 1700px) {
    .yubia-live {
        min-height: 318px !important;
        padding: 18px !important;
    }

    .yubia-live__topline {
        margin-bottom: 12px !important;
    }

    .yubia-live__main {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .yubia-live__art-wrap {
        width: 112px !important;
        max-width: 112px !important;
    }

    .yubia-live__label {
        margin-bottom: 5px !important;
    }

    .yubia-live__title {
        font-size: clamp(21px, 1.75vw, 28px) !important;
    }

    .yubia-live__subtitle {
        font-size: 13px !important;
    }

    .yubia-live__spectrum {
        height: 32px !important;
        margin: 10px 0 9px !important;
    }

    .yubia-live__controls {
        gap: 10px !important;
    }

    .yubia-live__volume {
        min-width: 0 !important;
        width: 118px !important;
        max-width: 34% !important;
        margin-left: auto !important;
    }

    .yubia-live__volume input[type="range"],
    .yubia-live__range {
        width: 82px !important;
        max-width: calc(100% - 26px) !important;
        min-width: 48px !important;
    }
}

/* Columnas especialmente estrechas: compactamos antes de pasar a móvil. */
@media (min-width: 1025px) and (max-width: 1250px) {
    .yubia-live {
        padding: 16px !important;
    }

    .yubia-live__main {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    .yubia-live__art-wrap {
        width: 96px !important;
        max-width: 96px !important;
    }

    .yubia-live__title {
        font-size: 21px !important;
    }

    .yubia-live__volume {
        width: 100px !important;
    }
}


/* v1.1.3 · corrección definitiva del layout del player en columnas de Elementor */
@media (min-width: 769px) {
  .yubia-live {
    padding: 20px !important;
  }

  .yubia-live__main {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .yubia-live__art-wrap {
    width: 88px !important;
    max-width: 88px !important;
    min-width: 88px !important;
    height: 88px !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center !important;
  }

  .yubia-live__art-fallback {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .yubia-live__info {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .yubia-live__title,
  .yubia-live__subtitle {
    max-width: 100% !important;
  }

  .yubia-live__controls {
    display: grid !important;
    grid-template-columns: 48px minmax(82px, 1fr) minmax(105px, 132px) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .yubia-live__play {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .yubia-live__live-text {
    min-width: 0 !important;
  }

  .yubia-live__volume {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 132px !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }

  .yubia-live__mute {
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
  }

  .yubia-live__volume input[type="range"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* 1080p / columnas alrededor de 500 px: todavía más compacto. */
@media (min-width: 769px) and (max-width: 1500px) {
  .yubia-live {
    padding: 16px !important;
  }

  .yubia-live__main {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .yubia-live__art-wrap {
    width: 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
  }

  .yubia-live__art-fallback {
    font-size: 14px !important;
  }

  .yubia-live__title {
    font-size: 23px !important;
  }

  .yubia-live__controls {
    grid-template-columns: 44px minmax(72px, 1fr) minmax(92px, 116px) !important;
    gap: 8px !important;
  }

  .yubia-live__play {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .yubia-live__volume {
    max-width: 116px !important;
  }
}


/* v1.1.14 · Play/Pausa definitivo.
   Un solo SVG visible cada vez. El JS controla explícitamente cuál se muestra. */
.yubia-live button.yubia-live__play {
    box-sizing: border-box !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    padding: 8px !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    cursor: pointer !important;
    line-height: 0 !important;
}

.yubia-live button.yubia-live__play:hover {
    background: rgba(255,255,255,.10) !important;
}

.yubia-live button.yubia-live__play > svg {
    position: static !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #fff !important;
    fill: currentColor !important;
    flex: 0 0 100% !important;
    pointer-events: none !important;
}

.yubia-live button.yubia-live__play > svg path {
    fill: currentColor !important;
}

@media (max-width:700px) {
    .yubia-live button.yubia-live__play {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
        padding: 7px !important;
    }
}


/* v1.1.15 · ajuste final de tamaño del control Play/Pausa */
.yubia-live button.yubia-live__play {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 10px !important;
    border-width: 3px !important;
}

@media (max-width:700px) {
    .yubia-live button.yubia-live__play {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        padding: 9px !important;
    }
}


/* v1.1.16 · SOLO tamaño del icono interior.
   El círculo se mantiene en 44px; Play/Pausa pasan a 24px reales. */
.yubia-live button.yubia-live__play {
    padding: 0 !important;
}

.yubia-live button.yubia-live__play > svg.yubia-live__ico-play,
.yubia-live button.yubia-live__play > svg.yubia-live__ico-pause {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px !important;
}

@media (max-width:700px) {
    .yubia-live button.yubia-live__play {
        padding: 0 !important;
    }
    .yubia-live button.yubia-live__play > svg.yubia-live__ico-play,
    .yubia-live button.yubia-live__play > svg.yubia-live__ico-pause {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex-basis: 22px !important;
    }
}

/* v1.1.19 · REDISEÑO VISUAL DIRECTO
   Solo presentación: iguala la presencia vertical del Chat y unifica YubiaFM navy/cyan.
   No modifica audio, metadatos, endpoints ni comportamiento. */
@media (min-width: 1025px) {
  .yubia-live {
    min-height: 444px !important;
    height: 444px !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    background:
      radial-gradient(circle at 88% 8%, rgba(56,189,248,.10), transparent 34%),
      linear-gradient(145deg, #07162d 0%, #0b1d3d 55%, #0d2854 100%) !important;
    border: 1px solid rgba(66,216,255,.25) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.20) !important;
  }

  .yubia-live:after {
    inset: -45% -12% auto 42% !important;
    height: 330px !important;
    background: radial-gradient(circle,rgba(50,152,255,.11),transparent 67%) !important;
  }

  .yubia-live__topline {
    flex: 0 0 auto !important;
    margin-bottom: 20px !important;
  }

  .yubia-live__eyebrow {
    color: #55d8ff !important;
  }

  .yubia-live__status {
    background: rgba(4,15,34,.52) !important;
    border-color: rgba(83,211,255,.16) !important;
    color: #dff6ff !important;
  }

  .yubia-live__main {
    flex: 1 1 auto !important;
    grid-template-columns: 96px minmax(0,1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }

  .yubia-live__art-wrap {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    align-self: center !important;
    border: 1px solid rgba(84,211,255,.18) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.28) !important;
  }

  .yubia-live__info {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .yubia-live__label {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    color: #55d8ff !important;
  }

  .yubia-live__title {
    font-size: clamp(24px,1.8vw,31px) !important;
  }

  .yubia-live__subtitle {
    color: #b9cae2 !important;
  }

  .yubia-live__spectrum {
    height: 54px !important;
    margin: 24px 0 18px !important;
  }

  .yubia-live__spectrum i {
    background: linear-gradient(to top,#258cff,#56ddff) !important;
  }

  .yubia-live__controls {
    margin-top: auto !important;
    padding-top: 18px !important;
    border-top-color: rgba(112,210,255,.14) !important;
    grid-template-columns: 44px minmax(82px,1fr) minmax(105px,132px) !important;
  }

  .yubia-live button.yubia-live__play {
    border-color: #eaf8ff !important;
    background: rgba(30,112,201,.18) !important;
    box-shadow: 0 0 0 1px rgba(70,203,255,.06), 0 8px 20px rgba(0,0,0,.18) !important;
  }

  .yubia-live button.yubia-live__play:hover {
    background: rgba(50,152,255,.28) !important;
  }
}

/* Portátiles/columnas más estrechas: misma altura, contenido algo más compacto. */
@media (min-width: 1025px) and (max-width: 1500px) {
  .yubia-live {
    min-height: 444px !important;
    height: 444px !important;
    padding: 20px !important;
  }
  .yubia-live__main {
    grid-template-columns: 82px minmax(0,1fr) !important;
    gap: 16px !important;
  }
  .yubia-live__art-wrap {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 82px !important;
  }
  .yubia-live__spectrum {
    height: 48px !important;
    margin: 20px 0 16px !important;
  }
}

/* Tablet y móvil conservan el comportamiento responsive existente. */
@media (max-width: 1024px) {
  .yubia-live {
    height: auto !important;
    min-height: 0 !important;
  }
}