/* Módulos de Studio Meter: recortes vivos, NO capturas ni procesamiento de audio.
   Sólo multimeter.php. El SVG se elimina al salir del viewport. Sin will-change
   permanente ni filtros costosos; movimiento exclusivamente transform/opacity. */
.sm-live{margin:0;min-width:0;overflow:hidden;contain:layout paint style;background:#1f2e40;border:1px solid #536779;border-radius:6px;color:#f1f3f6;box-shadow:0 16px 32px #0002;font-family:StudioMeterRoboto,Arial,sans-serif}
.sm-live-stage{position:relative;width:100%;aspect-ratio:810/540;overflow:hidden;contain:layout paint style;background:#1f2e40;line-height:1}
.sm-live-stage>svg{display:block;width:100%;height:100%;font-family:StudioMeterRoboto,Arial,sans-serif;user-select:none}
.sm-live-stage:empty{background:#1f2e40}
.sm-live[data-live-module=views] .sm-live-stage{aspect-ratio:810/720}
.sm-live-knob{width:100%;height:100%;background-image:url('../img/studio-meter/knob-100.webp');background-repeat:no-repeat;background-size:100% 10000%}
.sm-live[data-live-module=hud] .sm-live-stage{cursor:crosshair;touch-action:pan-y}
.sm-live[data-live-module=hud] .sm-live-stage:focus-visible{outline:2px solid #ffdf7a;outline-offset:-3px}
.sm-live figcaption{padding:.65rem .8rem;border-top:1px solid #ffffff1c;color:#bdcbd5;background:#182735;text-align:center;font:400 .56rem/1.7 var(--font-mono)}
.sm-live .image-note{display:block;margin:.3rem auto 0;max-width:46ch;color:#93a6b4;font-size:.5rem;line-height:1.55;letter-spacing:.015em;opacity:.9}
.sm-live .sm-live-help{font:400 .68rem/1.7 var(--font-sans);color:#b8c7d3;margin:0;padding:.65rem .8rem;text-align:center;border-top:1px solid #ffffff17}
.sm-live-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;padding:.6rem .7rem;border-top:1px solid #91a6b840;background:linear-gradient(#1d3041,#18293a);font:400 .7rem/1.3 StudioMeterRoboto,Arial,sans-serif}
.sm-live-tools>span{font-size:.62rem;letter-spacing:.12em;color:#d6e0e9;margin-right:.2rem}
.sm-live-tools button,.band-pills button{font:400 .72rem/1 StudioMeterRoboto,Arial,sans-serif;color:#f1f3f6;min-height:36px;padding:.5rem .75rem;border:1px solid #647079;border-radius:3px;background:linear-gradient(#24282e,#1d2126 48%,#101215);box-shadow:inset 0 1px #70777d9e;cursor:pointer}
.sm-live-tools button[aria-pressed=true],.band-pills button[aria-pressed=true]{color:#101317;border-color:#ae9965;background:linear-gradient(#ffdf7a,#f7cc70 48%,#eeb75b);box-shadow:inset 0 1px #ffefb3}
.sm-live-tools button:hover,.band-pills button:hover{border-color:#b7c9d5}
.sm-live-tools button:focus-visible,.band-pills button:focus-visible{outline:2px solid #00a4c0;outline-offset:3px}
.band-pills{align-items:center}
.band-pills button{min-width:48px}
.control-card .sm-live{margin-top:1.6rem}
.control-card .sm-live-footnote{font-size:.78rem;line-height:1.8;margin:1rem 0 0}
.meter-feature .sm-live{box-shadow:none}
/* Todos los recorridos quedan dentro de la caja local de la gráfica. */
.sm-live-band{transform-box:fill-box;transform-origin:center bottom;animation:sml-band var(--duration,3.4s) ease-in-out var(--delay,0s) infinite}
.sm-live-peak{animation-name:sml-peak}
.sm-live-retention{animation:sml-retention 6s linear infinite}
.sm-live-secondary{animation-direction:reverse;animation-duration:4.2s}
.sm-live-fft{transform-box:fill-box;transform-origin:center bottom;animation:sml-fft 3.8s ease-in-out infinite}
.sm-live-cloud{transform-box:fill-box;transform-origin:center;animation:sml-cloud 5.6s ease-in-out infinite}
.sm-live-vcloud{transform-box:fill-box;transform-origin:center bottom;animation:sml-vcloud 4.4s ease-in-out infinite}
.sm-live-correlation{animation:sml-correlation 4.8s ease-in-out infinite}
.sm-live-number>text{opacity:0;animation:sml-reading 3.4s steps(1,end) var(--delay,0s) infinite}
.sm-live-number>text:nth-child(2){animation-name:sml-reading-two}
.sm-live-number>text:nth-child(3){animation-name:sml-reading-three}
.sm-live[data-frozen=true] [data-live-stage] *,.motion-paused .sm-live *,.page-hidden .sm-live *{animation-play-state:paused!important}
/* Cancelar también las animaciones del héroe y distintivo que ya no se ven:
   no conservar animaciones/compositores pausados fuera de pantalla. */
.sm-device:not(.is-inview) *,.sm-device[data-graphics=suspended] *,.release-pill:not(.is-inview)::before,.release-pill:not(.is-inview)::after,.modal-open .release-pill::before,.modal-open .release-pill::after{animation:none!important}
.sm-static-visuals .sm-live *,.sm-static-visuals .sm-device *{animation:none!important}
@keyframes sml-band{0%,100%{transform:scaleY(1)}38%{transform:scaleY(var(--low,.7))}69%{transform:scaleY(.9)}}
@keyframes sml-peak{0%,100%{transform:scaleY(1)}55%{transform:scaleY(.94)}}
@keyframes sml-retention{0%,50%{transform:translateY(0)}100%{transform:translateY(16px)}}
@keyframes sml-fft{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.88)}75%{transform:scaleY(.95)}}
@keyframes sml-cloud{0%,100%{transform:rotate(-4deg) scale(.94)}45%{transform:rotate(6deg) scale(1.02)}}
@keyframes sml-vcloud{0%,100%{transform:scaleX(.83) scaleY(1)}50%{transform:scaleX(1.08) scaleY(.92)}}
@keyframes sml-correlation{0%,100%{transform:translateX(0)}45%{transform:translateX(-50px)}72%{transform:translateX(-18px)}}
@keyframes sml-reading{0%,100%{opacity:1}38%{opacity:0}69%{opacity:0}}
@keyframes sml-reading-two{0%,100%{opacity:0}38%{opacity:1}69%{opacity:0}}
@keyframes sml-reading-three{0%,100%{opacity:0}38%{opacity:0}69%{opacity:1}}
@media(max-width:575.98px){.sm-live figcaption{font-size:.51rem;padding:.6rem .65rem}.sm-live .image-note{font-size:.46rem}.sm-live-tools{gap:.4rem;padding:.55rem .5rem}.sm-live-tools button{padding:.5rem .6rem;font-size:.68rem}.sm-live-tools>span{font-size:.57rem}.sm-live .sm-live-help{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.sm-live *{animation:none!important;transition:none!important}.sm-live-number>text:first-child{opacity:1}}
.sm-static-visuals .sm-live-number>text:first-child{opacity:1}