/* Copia recortada de player/public/motor/piezas.css: solo vúmetro y perilla (lo global del iframe no va en una página). */
/* ---------- Vúmetro ---------- */
.pz-vu{--vu-fondo:#f3efe0;--vu-tinta:#222;--vu-rojo:#d11;--vu-aguja:#111;--vu-eje:#222;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 20%,#fff,var(--vu-fondo) 70%);border-radius:6px;box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.pz-vu-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pz-vu-escala{stroke:var(--vu-tinta);stroke-width:1.6}
.pz-vu-rojo{stroke:var(--vu-rojo);stroke-width:5}
.pz-vu-marca{stroke:var(--vu-tinta);stroke-width:1.6}.pz-vu-marca.rojo{stroke:var(--vu-rojo)}.pz-vu-marca.chica{stroke-width:1}
.pz-vu-num{fill:var(--vu-tinta);font:bold 11px Arial}.pz-vu-num.rojo{fill:var(--vu-rojo)}
.pz-vu-rotulo{fill:var(--vu-tinta);font:bold 14px Arial;letter-spacing:1px}
.pz-vu-signo{fill:var(--vu-tinta);font:bold 18px Arial}.pz-vu-signo.rojo{fill:var(--vu-rojo)}
.pz-vu-marca-txt{fill:var(--vu-rojo);font:bold italic 9px Arial}
.pz-vu-aguja{transform-box:view-box;transform-origin:100px 135px;transition:transform .08s linear}
.pz-vu-aguja line{stroke:var(--vu-aguja);stroke-width:2;stroke-linecap:round}
.pz-vu-eje{fill:var(--vu-eje)}

/* ---------- Perilla ---------- */
.pz-perilla{--per-cuerpo:#222;--per-indice:#eee;--per-marcas:#888;position:relative;border-radius:50%}
.pz-per-marcas{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from -141deg,var(--per-marcas) 0 2deg,transparent 2deg 20deg);
  /* anillo de marcas solo en el recorrido de la perilla (-140° a +140°) */
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63% 72%,transparent 73%),conic-gradient(from -142deg,#000 0 286deg,transparent 0);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle,transparent 62%,#000 63% 72%,transparent 73%),conic-gradient(from -142deg,#000 0 286deg,transparent 0);
  mask-composite:intersect}
.pz-per-cuerpo{position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--per-cuerpo) 55%,#fff),var(--per-cuerpo) 55%,#000);
  box-shadow:0 3px 6px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.25);
  transform:rotate(calc(-140deg + var(--vol,.8) * 280deg))}
.pz-per-indice{position:absolute;left:50%;top:8%;width:8%;height:32%;margin-left:-4%;border-radius:2px;background:var(--per-indice);box-shadow:0 0 3px var(--per-indice)}