/** * ZARZA Player — la piel. * * NEGRO DE CRISTAL. Decision de Lawrence (2-sep-2026): el player deja de ser * rojo. El rojo es de la MARCA -- las ocho puertas son rojas de arriba abajo -- * y una barra roja sobre una pagina roja no se distingue de la pagina; en * TicosLand, encima, era una banda roja a lo ancho metida en la cabecera de un * tema ajeno. El player tiene que poder posarse sobre CUALQUIER sitio, tambien * el de un cliente, sin discutir con sus colores. * * Del rojo solo queda el punto de AL AIRE, de 6 px: es convencion universal y se * lee de un vistazo sin tener que leer nada. * * Dos formas, un solo componente: * .zzp-fijo la barra de siempre, pegada abajo * .zzp-incrustado dentro de un contenedor de la pagina (el embed) * Dos tamanos: * .zzp-mini una linea: que suena y el boton. Es como nace. * .zzp-abierto ademas progreso, saltos, volumen y velocidad. */ .zzp{ /* La paleta es PROPIA y no hereda del tema: si el sitio de un cliente define --zz-* con otra cosa, el player no puede cambiar de aspecto por sorpresa. */ --zzp-fondo:rgba(9,9,11,.72); --zzp-fondo-solido:#0b0b0d; --zzp-tinta:#f5f3f1; --zzp-tenue:rgba(245,243,241,.60); --zzp-linea:rgba(255,255,255,.10); --zzp-vivo:#ff3b30; --zzp-alto-mini:56px; --zzp-alto:88px; background:var(--zzp-fondo); color:var(--zzp-tinta); font-family:var(--zz-cuerpo,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); } /* Sin desenfoque no puede quedarse translucido: se leeria la pagina a traves del texto. Ahi el fondo pasa a solido, que es feo pero legible. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .zzp{background:var(--zzp-fondo-solido)} } .zzp[hidden]{display:none} /* --- pegada abajo --------------------------------------------------- */ .zzp-fijo{ position:fixed;left:0;right:0;bottom:0;z-index:9990; border-top:1px solid var(--zzp-linea); box-shadow:0 -18px 50px -30px rgba(0,0,0,.95); transform:translateY(100%);transition:transform .28s ease; } .zzp-fijo.zzp-visible{transform:translateY(0)} /* 🔴 Valores literales, no `var()`. Las variables del player viven en `.zzp`, que es DESCENDIENTE de body: desde aqui no se ven, y el `var()` caia siempre al respaldo -- o sea que cambiar la altura del panel no movia el hueco. */ body.zzp-con-player{padding-bottom:56px} body.zzp-con-player.zzp-cuerpo-abierto{padding-bottom:88px} /* --- incrustado en la pagina (el embed) ------------------------------ */ .zzp-incrustado{ position:relative;border:1px solid var(--zzp-linea);border-radius:12px; box-shadow:0 20px 50px -35px rgba(0,0,0,.8); background:var(--zzp-fondo-solido); /* aqui no hay pagina detras que velar */ } /* --- la onda: el FONDO de la barra entera ---------------------------- */ /* 🔴 Ocupa toda la anchura, detras del contenido. Antes eran doce barritas en una esquina y no se leia como sonido: se leia como un icono. Ahora la barra ENTERA se mueve mientras suena, que es lo que se pidio. */ /* 🔴 SIN `position` AQUI. Este bloque va DESPUES de `.zzp-fijo{position:fixed}` y tiene la misma especificidad, asi que un `position:relative` lo pisaba: la barra dejaba de estar pegada a la ventana y se quedaba al final del documento -- «abajo abajo», que es como lo describio Lawrence al encontrarlo en una ficha de podcast. La onda no lo necesita: sus dos anclajes, `.zzp-fijo` (fixed) y `.zzp-incrustado` (relative), ya son contextos posicionados. */ .zzp{overflow:hidden;isolation:isolate} .zzp-onda{ position:absolute;inset:0;z-index:0;display:flex;align-items:flex-end; gap:1px;padding:0 2px;pointer-events:none; } .zzp-onda i{ flex:1 1 0;min-width:0;height:100%;display:block;border-radius:1px 1px 0 0; transform:scaleY(.03);transform-origin:50% 100%; background:linear-gradient(to top, rgba(255,255,255,.16) 0%, rgba(255,255,255,.075) 55%, rgba(255,255,255,.02) 100%); transition:transform .5s cubic-bezier(.2,.7,.3,1); } /* Mientras suena manda el requestAnimationFrame: sin transicion, o cada cuadro arrastraria el anterior y la onda iria medio segundo por detras del sonido. */ .zzp.zzp-sonando .zzp-onda i{transition:none} /* Al aire, la onda se tine del rojo del directo -- muy poco, lo justo para que se distinga de un fichero. */ .zzp.zzp-aire.zzp-sonando .zzp-onda i{ background:linear-gradient(to top, color-mix(in srgb, var(--zzp-vivo) 26%, rgba(255,255,255,.16)) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.02) 100%); } .zzp-caja{position:relative;z-index:1;display:flex;align-items:center;gap:.85rem; max-width:1400px;margin:0 auto;padding:.55rem clamp(.7rem,2.2vw,1.5rem)} .zzp-mandos{flex:0 0 auto;display:flex;align-items:center;gap:.3rem} /* --- el disco: gira SOLO mientras suena de verdad --------------------- */ .zzp-disco{flex:0 0 auto;width:34px;height:34px;border-radius:50%; background: radial-gradient(circle at 50% 50%, #2e2e33 0 15%, transparent 15.5%), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 3px), radial-gradient(circle at 34% 28%, #26262b 0%, #0a0a0c 62%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:grid;place-items:center; transition:width .2s ease,height .2s ease} .zzp-disco i{width:8px;height:8px;border-radius:50%;display:block; background:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(0,0,0,.6)} /* Con caratula el disco pasa a ser un picture disc: la imagen es la cara y el agujero central se queda encima para que se siga leyendo como un disco. */ .zzp-disco.zzp-portada{background-size:cover;background-position:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 14px rgba(0,0,0,.55)} .zzp-disco.zzp-portada i{box-shadow:0 0 0 3px rgba(0,0,0,.78)} .zzp.zzp-gira .zzp-disco{animation:zzp-gira 2.6s linear infinite} @keyframes zzp-gira{to{transform:rotate(360deg)}} /* --- botones ---------------------------------------------------------- */ .zzp-btn{border:0;background:none;color:inherit;cursor:pointer;display:grid; place-items:center;padding:0;line-height:0} /* El play en blanco hueso con el glifo negro: sobre cristal negro es lo unico que se ve sin gritar, y no toma prestado ningun color de la marca. */ .zzp-play{width:40px;height:40px;flex:0 0 auto;border-radius:50%; background:var(--zzp-tinta);transition:filter .15s ease,transform .15s ease} .zzp-play svg{width:18px;height:18px;fill:#0b0b0d} .zzp-play .zzp-i-pausa{display:none} .zzp.zzp-sonando .zzp-play .zzp-i-play{display:none} .zzp.zzp-sonando .zzp-play .zzp-i-pausa{display:block} .zzp-play:hover,.zzp-play:focus-visible{transform:scale(1.06)} .zzp-chico{width:28px;height:28px;opacity:.6;border-radius:50%} .zzp-chico svg{width:15px;height:15px;fill:currentColor} .zzp-chico:hover,.zzp-chico:focus-visible{opacity:1;background:rgba(255,255,255,.08)} .zzp-cerrar svg,.zzp-abrir svg{fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .zzp-abrir svg{transition:transform .2s ease} .zzp-abierto .zzp-abrir svg{transform:rotate(180deg)} .zzp-btn:focus-visible{outline:2px solid var(--zzp-tinta);outline-offset:2px} /* --- datos ------------------------------------------------------------ */ .zzp-datos{min-width:0;flex:1 1 12rem;display:flex;flex-direction:column;gap:1px} .zzp-titulo{font-weight:600;font-size:.9rem;line-height:1.3;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .zzp-meta{font-family:var(--zz-mono,ui-monospace,monospace);font-size:.66rem; letter-spacing:.08em;color:var(--zzp-tenue);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:flex;align-items:center;gap:.4rem} /* 🔴 Lo unico rojo que queda. Solo cuando es una EMISION: en un fichero no hay nada «al aire» y encender el punto ahi seria decir algo que no es. */ .zzp.zzp-aire .zzp-meta::before{content:"";flex:0 0 auto;width:6px;height:6px; border-radius:50%;background:var(--zzp-vivo); box-shadow:0 0 0 3px rgba(255,59,48,.18)} .zzp.zzp-aire.zzp-sonando .zzp-meta::before{animation:zzp-late 2s ease-in-out infinite} @keyframes zzp-late{50%{box-shadow:0 0 0 5px rgba(255,59,48,.08)}} /* --- tiempo ------------------------------------------------------------ */ .zzp-tiempo{flex:2 1 22rem;display:flex;align-items:center;gap:.5rem;min-width:0} .zzp-t-actual,.zzp-t-total{font-family:var(--zz-mono,ui-monospace,monospace); font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--zzp-tenue);white-space:nowrap} .zzp-barra{flex:1 1 auto;height:4px;border-radius:2px;background:rgba(255,255,255,.14); position:relative;cursor:pointer;min-width:4rem} .zzp-cargado,.zzp-relleno{position:absolute;inset:0 auto 0 0;border-radius:2px} .zzp-cargado{background:rgba(255,255,255,.18);width:0} .zzp-relleno{background:var(--zzp-tinta);width:0} /* 🔴 En directo NO HAY BARRA. Una emision no tiene duracion, asi que un riel a lo ancho -- aunque este apagado-- promete un control que no existe y sugiere una posicion que no significa nada. Se retira, y con ella los saltos. Lo que si queda es el tiempo que lleva puesto el oyente, que si es un dato. El rotulo EN VIVO tampoco se repite aqui: ya lo dice el pie, con su punto. */ .zzp.zzp-directo .zzp-barra, .zzp.zzp-directo .zzp-t-total, .zzp.zzp-directo .zzp-atras, .zzp.zzp-directo .zzp-adelante{display:none} .zzp.zzp-directo .zzp-tiempo{flex:0 0 auto} /* Y la velocidad tampoco: acelerar una emision en vivo no adelanta nada -- la fuente llega a tiempo real--, solo agota el buffer y provoca cortes. */ .zzp.zzp-directo .zzp-vel{display:none} /* --- extras ------------------------------------------------------------ */ .zzp-extra{flex:0 0 auto;display:flex;align-items:center;gap:.4rem} .zzp-vol{width:72px;accent-color:var(--zzp-tinta)} /* 🔴 La lista desplegable la pinta el SISTEMA, no esta hoja: hereda el `color` del