/* Radio Impulsa likes card — final responsive placement */
@media (min-width: 992px) {
  /* el boton de Google (220px) se escala para caber en la tarjeta lateral */
  #radio-likes .radio-google-login{ width:100% !important; display:flex !important; justify-content:center !important; overflow:visible !important; }
  #radio-likes .radio-google-login > div{ flex:0 0 auto !important; transform:scale(.7) !important; transform-origin:center top !important; }
  #radio-likes.radio-likes {
    position: fixed !important;
    left: clamp(1rem, 2.4vw, 2.25rem) !important;
    top: 53% !important;
    z-index: 55 !important;
    width: clamp(150px, 13vw, 185px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: .7rem .65rem !important;
  }
}
@media (max-width: 991px) {
  #radio-likes.radio-likes {
    position: fixed !important;
    left: clamp(.75rem, 6.5vw, 2rem) !important;
    top: max(3.25rem, 8vh) !important;
    z-index: 55 !important;
    width: min(44vw, 185px) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: .62rem .55rem !important;
    overflow: visible !important;
    border-radius: 11px !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.34) !important;
  }
  #radio-likes .radio-likes-title {
    margin: 0 0 .42rem !important;
    font-size: clamp(.68rem, 2.7vw, .82rem) !important;
    line-height: 1.22 !important;
    white-space: nowrap !important;
  }
  #radio-likes .radio-likes-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: .25rem !important;
  }
  #radio-likes .radio-like-button {
    width: 100% !important;
    justify-content: center !important;
    padding: .4rem .45rem !important;
    font-size: .68rem !important;
  }
  #radio-likes .radio-google-login {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #radio-likes .radio-google-login iframe {
    width: 100% !important;
    height: 40px !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  #radio-likes .radio-like-status {
    margin: .38rem 0 0 !important;
    font-size: .6rem !important;
    line-height: 1.25 !important;
  }
  #radio-likes small {
    margin-top: .3rem !important;
    font-size: .57rem !important;
    line-height: 1.2 !important;
  }
}
/* RI_LIKES_REFERENCE_MOBILE_V4 — tarjeta bajo el encabezado, como la referencia móvil */
@media (max-width:991px){
  #radio-likes.radio-likes{
    left:clamp(.7rem,5.5vw,1.5rem) !important;
    top:6.35rem !important;
    width:min(39vw,180px) !important;
    padding:.5rem .45rem !important;
    z-index:52 !important;
    border-radius:10px !important;
  }
  #radio-likes .radio-likes-title{font-size:clamp(.62rem,2.4vw,.76rem) !important;margin-bottom:.3rem !important}
  #radio-likes .radio-like-button{font-size:.62rem !important;padding:.34rem .38rem !important}
  #radio-likes .radio-google-login{height:34px !important;min-height:34px !important}
  #radio-likes .radio-google-login iframe{height:34px !important}
  #radio-likes .radio-like-status{font-size:.56rem !important;margin-top:.28rem !important}
  #radio-likes small{font-size:.53rem !important;margin-top:.22rem !important}
}

/* RI_LIKES_INLINE_MOBILE_V6 — la tarjeta va en el flujo, debajo del header y
   encima de los botones (Bravia TV / Karaoke / Mi QR). No tapa el video. */
@media (max-width:991px){
  #radio-likes.radio-likes{
    position:static !important;
    left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    transform:none !important;
    order:-1 !important;
    display:block !important;
    box-sizing:border-box !important;
    width:min(54vw,236px) !important;
    max-width:none !important;
    margin:0 auto .85rem !important;
    padding:.8rem .5rem !important;
    border-radius:16px !important;
    z-index:auto !important;
    text-align:center !important;
  }
  #radio-likes .radio-likes-title{
    font-size:clamp(.78rem,3vw,.92rem) !important;
    line-height:1.25 !important;
    white-space:normal !important;
    margin:0 0 .45rem !important;
  }
  #radio-likes .radio-likes-actions{ display:flex !important; flex-direction:column !important; gap:.35rem !important; }
  #radio-likes .radio-like-button{
    width:100% !important; justify-content:center !important;
    font-size:clamp(.72rem,2.8vw,.9rem) !important;
    padding:.45rem .7rem !important; gap:.35rem !important;
  }
  #radio-likes .radio-like-heart{ font-size:1rem !important; }
  #radio-likes .radio-google-login{
    height:auto !important; min-height:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    overflow:visible !important;
    margin:0 0 -2rem !important;
  }
  #radio-likes .radio-google-login > div{
    width:220px !important; height:auto !important; margin:0 auto !important;
  }
  #radio-likes .radio-google-login iframe{
    width:auto !important; max-width:100% !important;
    height:44px !important; margin:0 !important; transform:none !important;
  }
  #radio-likes .radio-like-status{
    font-size:clamp(.62rem,2.4vw,.76rem) !important;
    line-height:1.3 !important; margin:.35rem 0 0 !important;
  }
  #radio-likes small{
    font-size:clamp(.56rem,2.2vw,.68rem) !important;
    line-height:1.25 !important; margin-top:.35rem !important;
  }
}

/* =============================================================
   RI_LIKES_ANCHO_V7 — tarjeta «¿Te gusta Radio Impulsa?» más ancha
   -------------------------------------------------------------
   Motivo: con 185px (escritorio) y 236px (móvil) el contenido se
   recortaba: el botón de Google, el texto de estado y la nota
   «Un Me gusta por cuenta de Google» se salían de la tarjeta.
   Ahora la tarjeta es más ancha y todo el contenido entra, con
   los textos permitidos en varias líneas.
   ============================================================= */
@media (min-width: 992px){
  #radio-likes.radio-likes{
    width: clamp(214px, 15.5vw, 262px) !important;
    padding: .85rem .8rem !important;
    text-align: center !important;
  }
  #radio-likes .radio-likes-title{
    white-space: normal !important;
    font-size: clamp(.8rem, .95vw, .98rem) !important;
    line-height: 1.25 !important;
    margin: 0 0 .5rem !important;
  }
  #radio-likes .radio-like-button{
    font-size: .8rem !important;
    padding: .5rem .6rem !important;
    gap: .34rem !important;
  }
  #radio-likes .radio-like-heart{ font-size: 1.05rem !important; }
  #radio-likes .radio-google-login{
    min-height: 44px !important;
    overflow: visible !important;
  }
  #radio-likes .radio-google-login > div{
    transform: scale(.9) !important;
    transform-origin: center top !important;
  }
  #radio-likes .radio-like-status{
    font-size: .72rem !important;
    line-height: 1.35 !important;
    margin: .45rem 0 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #radio-likes small{
    display: block !important;
    font-size: .66rem !important;
    line-height: 1.3 !important;
    margin-top: .35rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #radio-likes .ri-vote-live-title{ font-size: .7rem !important; letter-spacing: .03em !important; }
  #radio-likes .ri-vote-live-show{
    font-size: .78rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3 !important;
  }
  #radio-likes .ri-vote-live-actions{ gap: .7rem !important; }
}
@media (max-width: 991px){
  #radio-likes.radio-likes{
    width: min(88vw, 340px) !important;
    max-width: calc(100vw - 1.4rem) !important;
    padding: .85rem .75rem !important;
    margin: 0 auto .85rem !important;
  }
  #radio-likes .radio-likes-title{
    white-space: normal !important;
    font-size: clamp(.84rem, 3.4vw, 1rem) !important;
    line-height: 1.25 !important;
  }
  #radio-likes .radio-like-button{
    font-size: clamp(.78rem, 3vw, .95rem) !important;
    padding: .5rem .8rem !important;
    gap: .34rem !important;
  }
  #radio-likes .radio-google-login{
    margin: 0 !important;
    min-height: 44px !important;
    height: auto !important;
  }
  #radio-likes .radio-google-login > div{
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  #radio-likes .radio-google-login iframe{
    height: 44px !important;
  }
  #radio-likes .radio-like-status{
    font-size: clamp(.68rem, 2.6vw, .82rem) !important;
    line-height: 1.35 !important;
    margin: .4rem 0 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #radio-likes small{
    display: block !important;
    font-size: clamp(.62rem, 2.4vw, .74rem) !important;
    line-height: 1.3 !important;
    margin-top: .35rem !important;
    white-space: normal !important;
  }
  #radio-likes .ri-vote-live-title{ font-size: .74rem !important; }
  #radio-likes .ri-vote-live-show{
    font-size: .8rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3 !important;
    margin: .2rem 0 .5rem !important;
  }
  #radio-likes .ri-vote-live .ri-vote-btn{ width: 2.35rem !important; height: 2.35rem !important; }
  #radio-likes .ri-vote-live .ri-vote-btn svg{ width: 1.15rem !important; height: 1.15rem !important; }
  #radio-likes .ri-vote-live-actions{ gap: .8rem !important; margin-bottom: .2rem !important; }
}

/* =============================================================
   RI_LIKES_SIN_SOLAPE_V8 — la tarjeta no queda debajo de los botones
   -------------------------------------------------------------
   Al hacerse más ancha y alta, la tarjeta fija del lateral llegaba a
   la fila de botones (Bravia TV / Karaoke / Mi QR). Ahora se centra
   verticalmente y queda siempre por encima del resto de la interfaz.
   ============================================================= */
@media (min-width: 992px){
  #radio-likes.radio-likes{
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 80 !important;
  }
}