/* Vino Nuevo Radio · «Pide una canción» (06/11/2026)
   Colores de la app: noche #0f1830 / #1B2A4A, vino #B61942, lavanda #9575CE, oro de las estrellas #D9B45A */
.hub-card--cancion { background: linear-gradient(145deg, #9575CE, #4b2f86); box-shadow: 0 6px 20px rgba(149,117,206,0.45); }

.pc { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; }
.pc[hidden] { display: none; }
.pc-fondo { position: absolute; inset: 0; background: rgba(4, 7, 16, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pc-hoja {
  --pc-noche: #0f1830; --pc-azul: #1B2A4A; --pc-vino: #B61942; --pc-lavanda: #9575CE; --pc-oro: #D9B45A;
  --pc-texto: #F3F1FA; --pc-sub: #A9B1C7; --pc-linea: rgba(255,255,255,0.10);
  position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 22px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 0%, var(--pc-azul) 0%, var(--pc-noche) 70%);
  color: var(--pc-texto); border-radius: 26px 26px 0 0; border-top: 1px solid rgba(149,117,206,0.35);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.55);
  font-family: 'Open Sans', system-ui, sans-serif;
  animation: pc-subir .32s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 700px) {
  .pc { align-items: center; }
  .pc-hoja { border-radius: 26px; border: 1px solid rgba(149,117,206,0.30); max-height: 86vh; }
  .pc-asa { display: none; }
}
@keyframes pc-subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.pc-asa { display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.22); margin: 0 auto 10px; }
.pc-cerrar { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.07); color: var(--pc-texto); font-size: 1.05rem; }
.pc-cerrar:hover { background: rgba(255,255,255,0.14); }

.pc-titulo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.55rem, 6vw, 1.9rem); line-height: 1.1;
  letter-spacing: -0.02em; margin: 6px 44px 6px 0; color: #fff; }
.pc-intro { margin: 0 0 18px; color: var(--pc-sub); font-size: 0.95rem; line-height: 1.5; }
.pc-sub { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; margin: 22px 0 6px; color: #fff; }

.pc-buscador { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px; border-radius: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--pc-linea); transition: border-color .2s, background .2s; }
.pc-buscador:focus-within { border-color: var(--pc-lavanda); background: rgba(149,117,206,0.10); }
.pc-buscador i { color: var(--pc-lavanda); }
.pc-buscador input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: 1rem; }
.pc-buscador input::placeholder { color: #7f88a3; }
.pc-estado { margin: 10px 2px 0; min-height: 1.2em; color: var(--pc-sub); font-size: 0.85rem; }

.pc-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.pc-lista li + li { border-top: 1px solid var(--pc-linea); }
.pc-cancion { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 4px; background: none; border: 0;
  color: inherit; text-align: left; cursor: pointer; font: inherit; border-radius: 12px; }
.pc-cancion:hover { background: rgba(255,255,255,0.04); }
.pc-cancion-texto { flex: 1; min-width: 0; }
.pc-cancion-titulo { display: block; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-cancion-artista { display: block; font-size: 0.85rem; color: var(--pc-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-cancion-pedir { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--pc-lavanda); padding: 6px 12px;
  border: 1px solid rgba(149,117,206,0.45); border-radius: 999px; }
.pc-cancion:hover .pc-cancion-pedir { background: var(--pc-lavanda); color: #160d2b; }
.pc-estrellas { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pc-estrellas-fila { color: rgba(217,180,90,0.25); font-size: 0.8rem; letter-spacing: 1px; }
.pc-estrellas-fila b { color: var(--pc-oro); font-weight: normal; }
.pc-estrellas small { font-size: 0.72rem; color: var(--pc-sub); }

.pc-atras { background: none; border: 0; color: var(--pc-sub); font: inherit; font-size: 0.88rem; cursor: pointer; padding: 6px 0; margin-top: 4px; }
.pc-atras:hover { color: #fff; }
.pc-ticket { display: flex; align-items: center; gap: 16px; margin: 12px 0 20px; padding: 16px; border-radius: 20px;
  background: linear-gradient(120deg, rgba(182,25,66,0.28), rgba(149,117,206,0.20)); border: 1px solid rgba(255,255,255,0.12); }
.pc-ticket-texto { min-width: 0; }
.pc-ticket-titulo { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: #fff; }
.pc-ticket-artista { margin: 4px 0 0; color: #d7d2ea; font-size: 0.9rem; }

.pc-form { display: grid; gap: 14px; }
.pc-campo { position: relative; display: grid; gap: 6px; }
.pc-campo > span { font-size: 0.85rem; font-weight: 600; color: #e6e3f2; }
.pc-campo em { font-style: normal; font-weight: 400; color: var(--pc-sub); }
.pc-campo input, .pc-campo textarea { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 14px; font: inherit; font-size: 1rem;
  color: #fff; background: rgba(255,255,255,0.06); border: 1px solid var(--pc-linea); outline: 0; resize: none; transition: border-color .2s; }
.pc-campo input::placeholder, .pc-campo textarea::placeholder { color: #7f88a3; }
.pc-campo input:focus, .pc-campo textarea:focus { border-color: var(--pc-lavanda); }
.pc-cuenta { position: absolute; right: 12px; bottom: 10px; font-size: 0.72rem; color: #7f88a3; }
.pc-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pc-error { margin: 0; min-height: 1em; color: #ff8fa6; font-size: 0.9rem; line-height: 1.4; }
.pc-error:empty { display: none; }

.pc-boton { width: 100%; height: 54px; border: 0; border-radius: 16px; cursor: pointer; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 1rem; color: #fff; background: var(--pc-vino); box-shadow: 0 10px 26px rgba(182,25,66,0.40); transition: transform .15s, filter .2s; }
.pc-boton:hover { filter: brightness(1.08); }
.pc-boton:active { transform: scale(0.98); }
.pc-boton:disabled { opacity: .6; cursor: wait; }
.pc-hoja :focus-visible { outline: 2px solid var(--pc-oro); outline-offset: 2px; }

/* El disco: el momento que se recuerda */
.pc-disco { position: relative; display: block; width: 168px; height: 168px; border-radius: 50%; margin: 18px auto 22px;
  background:
    radial-gradient(circle, transparent 0 21%, rgba(255,255,255,0.07) 21.5% 22%, transparent 22.5%),
    repeating-radial-gradient(circle, #121212 0 2px, #1d1d22 2px 4px),
    #141418;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 0 0 4px #0b0b0d;
  animation: pc-girar 2.4s linear infinite; }
.pc-disco::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 20%, rgba(255,255,255,0.10) 25%, transparent 32% 70%, rgba(255,255,255,0.07) 76%, transparent 82%); }
.pc-disco-etiqueta { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #0b0b0d 0 9%, var(--pc-vino) 10% 100%);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.95rem; color: #fff; letter-spacing: .04em; }
.pc-disco--mini { width: 58px; height: 58px; margin: 0; flex: 0 0 auto; animation: none;
  background: radial-gradient(circle, var(--pc-vino) 0 30%, #0b0b0d 31% 34%, transparent 35%), repeating-radial-gradient(circle, #121212 0 2px, #1d1d22 2px 3px); }
@keyframes pc-girar { to { transform: rotate(360deg); } }
.pc-paso--listo { text-align: center; padding-bottom: 6px; }
.pc-paso--listo .pc-titulo { margin: 0 0 8px; }
.pc-listo-cancion { margin: 0 0 16px; color: #e6e3f2; font-size: 1rem; }
.pc-aviso { margin: 0 auto 22px; max-width: 32ch; color: var(--pc-oro); font-size: 0.98rem; line-height: 1.5; font-weight: 600; }
.pc-aviso i { margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pc-hoja, .pc-disco { animation: none; }
}

/* La fila de accesos ahora va arriba del todo: aire por encima */
#home-section > .hub-accesos { padding-top: 16px; }

.pc-buscador input:focus-visible { outline: none; }   /* el aro de foco lo pinta la caja entera */
@media (min-width: 700px) { .pc-asa { display: none; } }

/* Aviso cuando las peticiones están cerradas (directo o «Tiempo Con Dios») */
.pc-cerrado { margin: -6px 0 16px; padding: 12px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.45;
  color: #f3e3b8; background: rgba(217,180,90,0.10); border: 1px solid rgba(217,180,90,0.35); }
.pc-cerrado[hidden] { display: none; }

.pc-nota { margin: -4px 0 0; font-size: 0.82rem; color: var(--pc-sub); line-height: 1.4; }
.pc-nota i { color: var(--pc-lavanda); margin-right: 4px; }

/* Ventana «Suena ahora a petición de…» */
.pc-sonando { position: fixed; z-index: 10040; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%);
  width: min(440px, calc(100vw - 24px)); display: flex; align-items: center; gap: 14px; padding: 14px 44px 14px 14px;
  border-radius: 20px; color: #F3F1FA; font-family: 'Open Sans', system-ui, sans-serif;
  background: linear-gradient(120deg, rgba(27,42,74,0.97), rgba(36,24,64,0.97));
  border: 1px solid rgba(149,117,206,0.45); box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  animation: pc-bajar .4s cubic-bezier(.2,.8,.2,1); }
.pc-sonando[hidden] { display: none; }
@keyframes pc-bajar { from { transform: translate(-50%, -24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.pc-disco--sonando { width: 54px; height: 54px; margin: 0; flex: 0 0 auto;
  background: radial-gradient(circle, #B61942 0 30%, #0b0b0d 31% 34%, transparent 35%), repeating-radial-gradient(circle, #121212 0 2px, #1d1d22 2px 3px);
  animation: pc-girar 2.4s linear infinite; }
.pc-sonando-texto { min-width: 0; }
.pc-sonando-texto p { margin: 0; }
.pc-sonando-quien { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.98rem; line-height: 1.25; color: #fff; }
.pc-sonando-cancion { margin-top: 2px !important; font-size: 0.86rem; color: #d7d2ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-sonando-para { margin-top: 6px !important; font-size: 0.86rem; font-weight: 600; color: #D9B45A; }
.pc-sonando-mensaje { margin-top: 2px !important; font-size: 0.9rem; line-height: 1.4; color: #F3F1FA; font-style: italic; }
.pc-sonando-cerrar { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.08); color: #fff; }
@media (prefers-reduced-motion: reduce) { .pc-sonando, .pc-disco--sonando { animation: none; } }

.pc-hoja, .pc-sonando { box-sizing: border-box; }

/* 06/11/2026 · El botón del chat va DENTRO de la barra del reproductor (a la derecha),
   para que no tape la tarjeta «Pedir canción» ni ningún otro contenido de la página.
   Solo en la portada de la radio (este archivo no se carga en las páginas de podcasts). */
body .chat-widget-container { top: auto; bottom: 80px; right: 14px; }      /* 60 menú + (90 reproductor − 50 botón) / 2 */
body .player-container .player-grid { padding-right: 58px; box-sizing: border-box; }   /* hueco para el botón */
@media (max-width: 480px) {
  body .chat-widget-container { top: auto; bottom: 80px; right: 12px; }
}
body #directo-control-wrapper { right: 70px !important; }   /* el botón DIRECTO del administrador, a la izquierda del chat */

/* 06/11/2026 · Barra de tiempo del reproductor (assets/js/barra-tiempo.js) */
.player-container .track-info .bt { display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-size: 0.68rem; line-height: 1; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.player-container .track-info .bt[hidden] { display: none; }
.bt-barra { flex: 1; min-width: 40px; height: 3px; border-radius: 2px; background: rgba(128,128,128,0.28); overflow: hidden; }
.bt-relleno { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #E7C04A, #C9A227); transition: width 1s linear; }
.player-container #display-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-container #display-title { margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .bt-relleno { transition: none; } }