/* Paez440Pro · Audio440Pro · Simulador de procesamiento · estilos (9-oct-2026)
   Herramienta de una sola pantalla (main.toolShell.singleScrollShell > section.singleScrollFrame), modelo apps/stage-plot/index.html.
   Dominio AUDIO = azul/gris. Piezas oficiales: unidades 2U (arte 2U-BODY-RACK-TOOLS-0N), marco 9-slice de ventana (VENTANA-PANTALLA-9SLICE),
   controles de /shared/ui/p440-controls.{css,js} (knobs-set-02, knob73, bundle010-gray, vu06, Button-02 POWER, Package-07, Button-08, kit-04).
   Cada unidad se diseña a 1086 × 184 px y se escala al ancho real con --p440-2u-scale (la fija app.js); en móvil (≤760 px) pasa a flujo normal.
   HOOKS para la revisión visual:  .simUnit[data-unit] · .simFace · .simId · .simCell · .simPower · .simVu · .simWin/.simLcd · .simScope.scopeDeck ·
   .simCanvasWrap (esquina inferior derecha = redimensionar) · .trackStrip · .simTabs · .simLegend · .labMotto. */

:root{--lab-line:#2e9bff;--lab-lcd:#9fe0ff;--lab-ink:#0b1116;--lab-edge:rgba(120,170,200,.30);--lab-warn:#ffb13b;--lab-red:#ff4a5d}

/* ── base de página (equivale a standalone-web-v2.css para esta herramienta) ── */
html,body{overflow-x:clip!important}
body[data-single-tool="audio-lab"]{background:#05080a!important;color:var(--p440-label-color,#C9BBA6)!important}
body[data-single-tool="audio-lab"] .singleScrollShell{width:var(--p440-rack-width,min(1086px,100vw))!important;max-width:var(--p440-rack-width,min(1086px,100vw))!important;margin:0 auto!important}
body[data-single-tool="audio-lab"] .singleScrollFrame{
  width:100%!important;margin:0!important;padding:5.55% 8.15%!important;
  background-color:var(--p440-rack-joint,#071018)!important;
  background-position:top center,bottom center,center top!important;
  background-size:91.712707% auto,91.712707% auto,91.712707% auto!important;
  background-repeat:no-repeat,no-repeat,repeat-y!important;
  filter:none!important
}
body[data-single-tool="audio-lab"] .p440-site-footer-v2{margin:0 auto!important}
.audioLabFrame{min-height:720px}
.labApp{--p440-2u-scale:1;display:flex;flex-direction:column;gap:10px;font:var(--p440-label-font);letter-spacing:var(--p440-label-track,.06em);-webkit-font-smoothing:antialiased}
.labApp *{box-sizing:border-box}
.labApp button{font-family:inherit}
.labApp :focus-visible{outline:2px solid rgba(127,208,255,.85);outline-offset:2px}

/* ── cabecera ── */
.labHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 2px}
.labTitle{margin:0;font:italic 900 26px/1 Arial,Helvetica,sans-serif;letter-spacing:0;color:var(--p440-official-text,#C9BBA6);text-shadow:0 2px 3px #000a;text-transform:none}
.labSub{margin:5px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:5px;font:var(--p440-label-font);font-size:10px;letter-spacing:var(--p440-label-track);color:var(--p440-label-color)}
.labSub i{font-style:normal;color:var(--lab-line)}
.labSub em{font-style:normal;margin-left:10px;color:var(--p440-official-sub,#B8AA95)}
.labLangBtn{display:none;align-items:center;gap:8px;border:1px solid #6d7c86;background:#0a0e12;color:var(--p440-official-text,#C9BBA6);border-radius:16px;padding:5px 9px;font:800 11px Arial,sans-serif;cursor:pointer}
.labLangBtn i{width:26px;height:11px;border-radius:9px;background:#0c4f78;box-shadow:inset 0 0 5px #000;position:relative}
.labLangBtn i:after{content:"";position:absolute;top:1px;left:1px;width:9px;height:9px;border-radius:50%;background:#9fe0ff;transition:transform .15s}
html[lang="en"] .labLangBtn i:after{transform:translateX(15px)}
html.p440-desktop .labLangBtn,html.p440-embedded .labLangBtn{display:inline-flex}

/* ── paneles generales ── */
.labPanel{border:1px solid var(--lab-edge);border-radius:6px;background:linear-gradient(180deg,#14222d 0,#0d1820 100%);box-shadow:inset 0 0 0 1px #00000066,inset 0 1px 0 #ffffff12,0 6px 16px #0008;padding:9px 12px 10px}
.labPanelHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px;border-bottom:1px solid rgba(120,170,200,.22);padding-bottom:5px}
.labPanelHead b{font:italic 900 15px/1 Arial,Helvetica,sans-serif;letter-spacing:0;color:var(--p440-official-text,#C9BBA6);text-shadow:0 2px 3px #000a}
.labPanelHead em{font-style:normal;color:var(--lab-line);font-size:10px}
.labHint,.labNote{margin:0;color:var(--p440-official-sub,#B8AA95);font:600 10.5px/1.35 "Arial Narrow",Arial,sans-serif;letter-spacing:.02em;text-transform:none}
.labMotto{margin:6px 0 2px;text-align:center;font:italic 800 14px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.02em;color:var(--p440-official-text,#C9BBA6);text-shadow:0 0 12px rgba(46,155,255,.35),0 2px 3px #000a;text-transform:none}

/* ── unidades 2U ── */
.simUnit{position:relative;width:100%;aspect-ratio:1086/184;overflow:hidden;background-color:#153e58;background-position:center;background-repeat:no-repeat;background-size:100% 100%;border-radius:2px}
.simUnit[data-art="1"]{background-image:url("/shared/design-system/rack/v1/assets/2U-cuerpo/2U-BODY-RACK-TOOLS-01.png")}
.simUnit[data-art="2"]{background-image:url("/shared/design-system/rack/v1/assets/2U-cuerpo/2U-BODY-RACK-TOOLS-02.png")}
.simUnit[data-art="3"]{background-image:url("/shared/design-system/rack/v1/assets/2U-cuerpo/2U-BODY-RACK-TOOLS-03.png")}
.simUnit[data-art="4"]{background-image:url("/shared/design-system/rack/v1/assets/2U-cuerpo/2U-BODY-RACK-TOOLS-04.png")}
.simUnit[data-art="5"]{background-image:url("/shared/design-system/rack/v1/assets/2U-cuerpo/2U-BODY-RACK-TOOLS-05.png")}
.simUnit[data-art="6"]{background-image:url("/shared/design-system/rack/v1/assets/2U-cuerpo/2U-BODY-RACK-TOOLS-06.png")}
.simFace{position:absolute;left:0;top:0;width:1086px;height:184px;transform-origin:0 0;transform:scale(var(--p440-2u-scale,1));display:flex;align-items:center;gap:10px;padding:0 60px 0 66px;color:var(--p440-official-text,#C9BBA6);font:700 11px/1.1 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.simId{flex:0 0 124px;display:flex;flex-direction:column;justify-content:center;align-self:stretch}
.simId b{font:italic 900 25px/1 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;color:var(--p440-official-text,#C9BBA6);text-shadow:0 2px 3px #000a}
.simId small{margin-top:6px;color:var(--p440-label-color);font:var(--p440-label-font);font-size:9.5px;letter-spacing:var(--p440-label-track)}
.simCell{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;min-width:78px}
.simCell .p440-lbl{font-size:10px}
.simCell .p440k-val{min-height:12px}
.simBtns .p440-pkg.p440-pkg{--p440-pkg-size:46px;min-width:62px;font-size:10px}
.simBtns .p440-pkg.p440-pkg.toggle{--p440-pkg-size:44px;min-width:92px}
.simPower{min-width:66px}
.simPower .p440-pkg.p440-pkg{min-width:60px}
.simVu{min-width:120px}
.simVu .p440-meter.vu06{margin:0 auto}
.simVu .p440-lbl{margin-top:1px}
/* unidad encendida / apagada (Orden A: apagada = controles atenuados; POWER siempre activo) */
.simUnit.p440-unit-on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--p440-line,#2e9bff) 55%,transparent),inset 0 0 22px 2px color-mix(in srgb,var(--p440-line,#2e9bff) 28%,transparent)}
.simUnit.simOff .simCell:not(.simPower):not(.simVu){opacity:.4;filter:saturate(.4);pointer-events:none}
.simUnit.simOff .simVu{opacity:.55}

/* ── ventanas (LCD): marco 9-slice oficial ── */
.simWin,.simScope{border-style:solid;border-width:3px;border-image:url("/shared/design-system/rack/v1/assets/ventana/VENTANA-PANTALLA-9SLICE.png") 56 fill / 28px round;position:relative;color:var(--lab-lcd);text-shadow:0 0 9px rgba(46,155,255,.5)}
.simWin{border-image-width:22px;padding:12px 14px;text-transform:none;letter-spacing:0}
.simLcd{flex:0 0 auto;min-width:128px;text-align:center}
.simLcd b{display:block;font:700 26px/1 "Courier New",monospace;white-space:nowrap}
.simLcd small,.simStatus small{display:block;margin-top:6px;font:var(--p440-label-font);font-size:10px;color:var(--p440-label-color);letter-spacing:var(--p440-label-track);text-shadow:none;text-transform:uppercase}
.simChan{min-width:176px}
.simChan b{font-size:20px}
.simEqLcd{min-width:196px;text-align:left}
.simEqLcd b{font-size:16px;letter-spacing:.04em}
.simEqLcd span{display:block;margin-top:5px;font:700 17px/1 "Courier New",monospace;white-space:nowrap}
.simEqLcd span+span{font-size:13px;color:var(--p440-official-sub,#B8AA95)}
.simClip{position:relative;padding-left:40px;min-width:150px}
.simClip b{font-size:20px}
.simLamp{position:absolute;left:14px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:50%;background:#2a3a44;box-shadow:inset 0 0 0 1px #000,inset 0 1px 2px #fff3}
.simClip.on .simLamp{background:var(--lab-red);box-shadow:0 0 0 1px #000,0 0 12px 3px rgba(255,74,93,.8)}
.simClip.on b{color:var(--p440-official-text,#C9BBA6);text-shadow:0 0 8px rgba(255,74,93,.8)}
.simStatus{flex:1 1 auto;min-width:0;text-align:left}
.simStatus b{display:block;font:700 15px/1.15 "Courier New",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simStatus small{text-transform:none;letter-spacing:.02em;white-space:normal;line-height:1.25;max-height:2.5em;overflow:hidden}
.simProg{margin-top:7px;height:7px;border-radius:4px;background:#02070b;box-shadow:inset 0 0 0 1px #3b5566;overflow:hidden}
.simProg i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1f78c9,#6fd0ff);transition:width .12s linear}
.simProg.done i{background:linear-gradient(90deg,#1f9e68,#5fe0a0)}

/* ── pistas: tira de canales (mezclador horizontal) ── */
.simTracks .labPanelHead{align-items:center}
.simTracks .labPanelHead .simUpload{margin-left:auto}
.simUpload{display:flex;align-items:center;gap:8px}
.simUpload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.simUpload .p440-pkg.p440-pkg{flex-direction:row!important;--p440-pkg-size:26px;min-width:0!important;gap:7px!important;font-size:10px!important;white-space:nowrap}
.trackList{display:grid;grid-template-columns:repeat(14,minmax(56px,1fr));gap:4px;margin:7px 0 6px;overflow-x:auto;padding-bottom:2px}
.trackStrip{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 3px 6px;border:1px solid #2d4352;border-radius:4px;background:linear-gradient(#0c161e,#081018);min-width:56px}
.trackStrip.active{border-color:var(--lab-line);background:linear-gradient(#10283a,#0a1a27);box-shadow:inset 0 0 0 1px rgba(46,155,255,.35),0 0 12px rgba(46,155,255,.35)}
.trackStrip.isMuted .stripSel b{opacity:.45;text-decoration:line-through}
.stripSel{display:flex;flex-direction:column;align-items:center;width:100%;border:0;background:none;padding:0;color:var(--p440-official-text,#C9BBA6);cursor:pointer;text-align:center;font:800 10.5px/1.05 "Arial Narrow","Roboto Condensed",Arial,sans-serif;letter-spacing:.02em}
.stripSel .num{color:var(--p440-official-sub,#B8AA95);font-size:9px}
.stripSel b{min-height:22px;display:flex;align-items:center;justify-content:center;font-weight:800;text-transform:uppercase;max-width:100%;overflow:hidden}
.stripSel b.long{font-size:8.5px;letter-spacing:0}
.stripSel b.xlong{font-size:7.3px;letter-spacing:-.01em}
.stripSel small{font-size:8px;color:var(--p440-official-sub,#B8AA95);letter-spacing:.06em}
.stripKnob{display:flex;flex-direction:column;align-items:center;min-height:50px}
.stripKnob output{font:700 9px/1 "Courier New",monospace;color:var(--p440-official-text,#C9BBA6);margin-top:1px;min-height:9px}
.stripBtns{display:flex;gap:3px;justify-content:center}
.stripBtns .p440-pkg.p440-pkg{--p440-pkg-size:20px;min-width:0!important;gap:1px!important;font-size:8.5px!important;padding:0 1px!important}
.stripLevel{display:block;width:90%;height:3px;border-radius:2px;background:#050b10;overflow:hidden;box-shadow:inset 0 0 0 1px #243745}
.stripLevel i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2e9bff,#9fe0ff)}
.stripCustom{position:absolute;right:2px;top:2px;width:15px;height:15px;border-radius:50%;border:0;background:#c98a1e;color:#150d00;font:900 9px/15px Arial;text-align:center;cursor:pointer;padding:0}
.stripCustom[hidden]{display:none}

/* ── gráficas ── */
.simScopePanel{padding:8px 12px 8px}
.simTabs{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 6px}
.simTabs .tab{border-radius:3px!important}
.simTabs .tab.active{box-shadow:inset 0 -2px 0 var(--lab-line)!important}
.simTabs .p440-pkg.p440-pkg{flex-direction:row!important;--p440-pkg-size:24px;min-width:0!important;gap:7px!important;font-size:10.5px!important;padding:0 3px!important}
.simScope{border-image-width:28px;padding:16px 20px;background-clip:padding-box}
.simCanvasWrap{position:relative;width:100%;height:330px;min-height:200px;max-height:80vh;resize:vertical;overflow:hidden;border-radius:3px;background:#03070a}
.simCanvasWrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#03070a;cursor:crosshair;touch-action:none}
@media (pointer:coarse){.simCanvasWrap canvas{touch-action:pan-y}}
.simScopeFoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin-top:6px;min-height:28px}
.simReadout{flex:1 1 100%;font:700 12px/1.3 "Courier New",monospace;color:var(--lab-lcd);letter-spacing:0;text-transform:none;text-shadow:0 0 6px rgba(46,155,255,.45);min-height:16px}
.simLegend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font:var(--p440-label-font);font-size:10px;color:var(--p440-label-color);letter-spacing:var(--p440-label-track);text-transform:uppercase}
.simLegend .lg{display:inline-flex;align-items:center;gap:5px}
.simLegend .sw{display:inline-block;width:18px;height:0;border-top:3px solid currentColor;vertical-align:middle}
.simLegend .sw.dash{border-top-style:dashed}
.simLegend .sw.dot{width:9px;height:9px;border:0;border-radius:50%;background:currentColor}
.simLegend .p440-pkg.p440-pkg{flex-direction:row!important;--p440-pkg-size:22px;min-width:0!important;gap:6px!important;font-size:10px!important;padding:0 2px!important}
.simLegend .note{text-transform:none;letter-spacing:.02em;color:var(--p440-official-sub,#B8AA95);font-size:10px;flex:1 1 100%;order:9}

/* ── rack de procesamiento ── */
.labRack{display:flex;flex-direction:column;gap:0}

/* barra de gráfica fija mientras se giran los controles (solo si hay altura suficiente) */
@media (min-width:900px) and (min-height:700px){
  .simScopePanel{position:sticky;top:6px;z-index:6;background:linear-gradient(180deg,#14222d 0,#0d1820 100%)}
  .simCanvasWrap{height:clamp(190px,36vh,340px);max-height:56vh}
}

/* ── móvil: las unidades dejan de escalarse y pasan a flujo normal ── */
@media (max-width:760px){
  body[data-single-tool="audio-lab"] .singleScrollFrame{padding:5.8vw 4.4vw!important;background-size:100% auto,100% auto,100% auto!important}
  .labTitle{font-size:19px}
  .simUnit{aspect-ratio:auto;overflow:visible;background-image:none!important;background:linear-gradient(180deg,#1a4560,#10303f);border:1px solid #3a6c8a;box-shadow:inset 0 0 0 1px #000a,inset 0 1px 0 #ffffff1c;border-radius:6px;margin-bottom:8px}
  .simFace{position:relative;width:auto;height:auto;transform:none;flex-wrap:wrap;justify-content:center;gap:10px 12px;padding:12px 8px}
  .simId{flex:1 1 100%;align-self:auto;flex-direction:row;align-items:baseline;gap:10px}
  .simStatus,.simEqLcd,.simChan{flex:1 1 100%}
  .simCanvasWrap{height:260px}
  .labPanel{padding:8px}
  .simScope{padding:12px 12px}
  .trackList{grid-template-columns:repeat(14,64px)}
}
@media (prefers-reduced-motion:reduce){.simProg i,.labLangBtn i:after{transition:none}}