/* Radio Viva Player - styles */
.rvp-card {
  width: 100%;
  max-width: 820px;
  margin: 12px auto;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.rvp-inner { display:flex; align-items:center; padding:12px; }
.rvp-left { flex: 0 0 96px; }
.rvp-logo-img { width:80px; height:80px; object-fit:contain; border-radius:8px; }
.rvp-center { flex:1; display:flex; align-items:center; gap:14px; }
.rvp-play-toggle { width:56px; height:56px; border-radius:50%; border:none; font-size:20px; cursor:pointer; background:#F3F3F3; box-shadow: 0 4px 10px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; }
.rvp-play-toggle:hover { filter: brightness(0.98); }
.rvp-play-icon { color: #B11A19; font-weight:700; font-size:20px; line-height:1; }
.rvp-texts { text-align:left; }
.rvp-title { font-weight:700; font-size:18px; }
.rvp-subtitle { font-weight:600; opacity:0.95; }
.rvp-right { display:flex; gap:8px; align-items:center; }
.rvp-icon { background: rgba(255,255,255,0.12); padding:6px 8px; border-radius:8px; font-weight:700; }
.rvp-playing .rvp-play-toggle { background: rgba(255,255,255,0.95); }
.rvp-logo-placeholder { width:80px; height:80px; border-radius:8px; background:#FFFFFF; display:flex; align-items:center; justify-content:center; color:#777; font-weight:600; }
@media (max-width: 480px) {
  /* Mantener el diseño en una sola línea en móviles */
  .rvp-inner {
    flex-direction: row;       /* 🔴 clave: mantiene disposición horizontal */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  /* Logo más pequeño para adaptarse al ancho */
  .rvp-left {
    flex: 0 0 auto;
  }

  .rvp-logo-img,
  .rvp-logo-placeholder {
    width: 60px;
    height: 60px;
  }

  /* Centro: botón + textos */
  .rvp-center {
    flex: 1;
    width: auto;
  }

  .rvp-play-toggle {
    width: 48px;
    height: 48px;
    margin-right: 10px;
  }

  /* Tipografía ligeramente más pequeña para mejor encaje */
  .rvp-title {
    font-size: 16px;
  }

  .rvp-subtitle {
    font-size: 14px;
  }

  /* Íconos a la derecha: que no se apilen */
  .rvp-right {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
  }
}