/** * 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; 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, y NO hay variable que los acompane. Hubo dos -- `--zzp-alto-mini` y `--zzp-alto` -- y no las leia nadie: viven en `.zzp`, que es DESCENDIENTE de body, asi que desde aqui no se ven y el `var()` caia siempre al respaldo. Una variable que promete gobernar una medida y no la gobierna es peor que no tenerla, asi que se retiraron. Cambiar el alto del player es tocar estos dos numeros y el `padding` de `.zzp-caja`. */ 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} /* --- botones ---------------------------------------------------------- */ .zzp-btn{border:0;background:none;color:inherit;cursor:pointer;display:grid; place-items:center;padding:0;line-height:0} /* ======================================================================= */ /* EL DISCO ES EL BOTON DE PLAY. Un solo elemento, tres caras: */ /* */ /* detenido -> boton de play, blanco hueso con el glifo negro */ /* sonando -> disco de vinilo girando (o la caratula) */ /* sonando + raton -> la PAUSA, sobre el disco */ /* */ /* 🔴 Estuvieron separados y era un error: dos circulos seguidos, uno */ /* decorativo y otro pulsable, compitiendo por la misma mirada -- y a */ /* pantalla completa, un disco enorme con un boton suelto debajo. */ /* */ /* 🔴 La cara del disco va en un `::before` porque es LO UNICO QUE GIRA. */ /* Rotando el elemento entero, los glifos giraban con el y la pausa salia */ /* inclinada en un angulo cualquiera. */ /* ======================================================================= */ .zzp-play{width:40px;height:40px;flex:0 0 auto;border-radius:50%;position:relative; background:var(--zzp-tinta);isolation:isolate; transition:background-color .25s ease,transform .15s ease,width .2s ease,height .2s ease} .zzp-play::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:0; opacity:0;transition:opacity .25s ease; 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)} /* El disco se ve desde que HAY PISTA, no solo mientras suena: en pausa se atenua y el play se queda encima. Sin fuente si es un boton de play a secas, que es cuando no hay ninguna identidad que conservar todavia. */ .zzp.zzp-con-fuente .zzp-play{background:transparent} .zzp.zzp-con-fuente .zzp-play::before{opacity:1} .zzp.zzp-con-fuente:not(.zzp-sonando) .zzp-play::before{opacity:.5} .zzp.zzp-con-fuente:not(.zzp-sonando) .zzp-play::after{content:"";position:absolute; inset:0;border-radius:50%;z-index:2;background:rgba(0,0,0,.42)} .zzp.zzp-con-fuente:not(.zzp-sonando) .zzp-play .zzp-i-play{fill:#fff} .zzp.zzp-gira .zzp-play::before{animation:zzp-gira 2.6s linear infinite} @keyframes zzp-gira{to{transform:rotate(360deg)}} /* Con caratula, picture disc: la imagen es la cara del disco. La pone el JS en una VARIABLE, no en `background-image`, para que viaje al `::before`. */ .zzp-play.zzp-portada::before{background-image:var(--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)} /* El agujero central NO gira: esta centrado y girarlo no se veria, pero si arrastraria al resto si colgara del `::before`. */ .zzp-play > i{display:none;position:absolute;left:50%;top:50%;z-index:1; width:20%;height:20%;min-width:7px;min-height:7px;border-radius:50%; transform:translate(-50%,-50%);background:rgba(255,255,255,.22); box-shadow:0 0 0 3px rgba(0,0,0,.6)} .zzp.zzp-con-fuente .zzp-play > i{display:block} .zzp-play.zzp-portada > i{box-shadow:0 0 0 3px rgba(0,0,0,.78)} /* Los glifos, SIEMPRE derechos y por encima de todo. */ .zzp-play svg{position:relative;z-index:3;width:18px;height:18px;fill:#0b0b0d} .zzp-play .zzp-i-pausa{display:none} /* Sonando no hay glifo: se ve el disco. */ .zzp.zzp-sonando .zzp-play .zzp-i-play{display:none} /* ...hasta que se pasa el raton por encima. Entonces, la pausa sobre el disco, con un velo oscuro detras para que se lea tambien sobre una caratula clara. */ .zzp.zzp-sonando .zzp-play:hover::after, .zzp.zzp-sonando .zzp-play:focus-visible::after{content:"";position:absolute; inset:0;border-radius:50%;z-index:2;background:rgba(0,0,0,.55)} .zzp.zzp-sonando .zzp-play:hover .zzp-i-pausa, .zzp.zzp-sonando .zzp-play:focus-visible .zzp-i-pausa{display:block;fill:#fff} .zzp.zzp-sonando .zzp-play:hover > i, .zzp.zzp-sonando .zzp-play:focus-visible > i{display:none} .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} /* 🔴 CERRAR NACE APAGADO. En zarza y en TicosLand el player es un elemento principal y no interesa que se pueda apagar: se enciende con `ZZP.permiteCerrar`. A pantalla completa se muestra SIEMPRE, porque alli la X significa otra cosa -- salir de la vista -- y una vista a pantalla completa sin salida visible es una trampa. Y entonces el chevron sobra: los dos harian exactamente lo mismo. */ .zzp-cerrar{display:none} .zzp-permite-cerrar .zzp-cerrar{display:grid} .zzp-abierto .zzp-cerrar{display:grid} .zzp-abierto .zzp-abrir{display:none} .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, pero ESO YA NO SE HACE AQUI: lo decide `modoSelector()` en el motor, que en una emision pone el hueco en modo idiomas o vecinas y la velocidad no llega a pintarse. 🔴 La regla que habia -- `.zzp.zzp-directo .zzp-vel{display:none}` -- se RETIRO: con ella puesta, el modo velocidad ganaba la clase y perdia contra el `display:none`, asi que no aparecia nunca y no habia error que mirar. No volver a anadirla. */ /* --- extras ------------------------------------------------------------ */ .zzp-extra{flex:0 0 auto;display:flex;align-items:center;gap:.5rem} /* --- EL HUECO: uno solo, tres contenidos ------------------------------ */ /* Quien manda es `.zzp-modo-*` sobre `#zzp`, y nadie mas. Los tres -- casi blanco -- y la dibuja sobre su propio fondo blanco, asi que los numeros quedaban invisibles. Hay que vestir tambien las