/* =====================================================================
   ing.cmae — fx-lab.css · LÁM. 04B «Canal de ensayo: contenga el resalto»
   Se carga sin bloquear el render (media="print" → all): la sección
   está bajo el pliegue. Usa los tokens de :root de css/styles.css.
   ===================================================================== */

#laboratorio.dark { background-color: #0f2338; }
.fx-lab { display: grid; gap: 1.2rem; }

/* Figura estática (sin JavaScript o sin Canvas 2D) */
.fxl-fallback { margin: 0; }
.fxl-fallback svg { width: 100%; height: auto; display: block; background: #0b1f33; border: 1px solid var(--line-l); }
.fxl-fallback figcaption { font: .82rem/1.5 var(--mono); color: #c6d4e2; margin-top: .6rem; }

/* Lámina y escenario */
.fxl-sheet { border: 1px solid var(--line-l); background: #0b1f33; padding: .6rem; }
/* pan-y: el deslizamiento vertical siempre desplaza la página; pinch-zoom: se puede ampliar el dibujo
   (los navegadores que no aceptan el doble valor se quedan con pan-y) */
.fxl-stage { position: relative; aspect-ratio: 12/5; touch-action: pan-y; touch-action: pan-y pinch-zoom; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
@supports not (aspect-ratio: 1) { .fxl-stage { height: 0; padding-top: 41.667%; } }
.fxl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Asas de arrastre (compuerta y nivel de cola): solo ellas bloquean el desplazamiento */
.fxl-handle { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid var(--gold); background: rgba(10, 26, 43, .85); cursor: ns-resize; touch-action: none; z-index: 2; transition: background .15s; }
.fxl-handle::after { content: '⇕'; display: grid; place-items: center; height: 100%; color: var(--gold); font: 600 14px/1 var(--mono); }
.fxl-handle:hover, .fxl-handle.is-drag { background: var(--gold); }
.fxl-handle:hover::after, .fxl-handle.is-drag::after { color: var(--navy); }
@media (pointer: coarse) { .fxl-handle { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }

/* Sonda y sello de aprobación */
.fxl-tip { position: absolute; left: 0; top: 0; pointer-events: none; font: 12px/1.4 var(--mono); background: rgba(10, 26, 43, .92); border-left: 3px solid var(--gold); padding: .35rem .5rem; color: #e8eef5; white-space: nowrap; z-index: 3; font-variant-numeric: tabular-nums; }
.fxl-stamp { position: absolute; right: 6%; top: 12%; transform: rotate(-8deg); border: 3px double var(--gold); color: var(--gold); font: 700 1.6rem/1 var(--mono); letter-spacing: .14em; padding: .4rem .8rem; text-align: center; background: rgba(10, 26, 43, .55); pointer-events: none; z-index: 3; }
.fxl-stamp b, .fxl-stamp small { display: block; }
.fxl-stamp small { font-size: .8rem; font-weight: 600; letter-spacing: .06em; margin-top: .35rem; }
.fxl-stamp.is-on { animation: fxl-stamp .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fxl-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .fxl-stamp.is-on { animation: none; } }
/* «Pausar animación» del sitio congela las animaciones (.paused * { animation-play-state: paused });
   congelado en el fotograma «from» (opacidad 0) el sello no se vería: sin animación, aparece directo */
.paused .fxl-stamp.is-on { animation: none; }
.fxl-disclaimer { font: .78rem/1.4 var(--mono); color: #c6d4e2; margin: .5rem 0 0; }

/* Panel: datos, lecturas y ensayo */
.fxl-panel { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .fxl-panel { grid-template-columns: 1.1fr 1fr 1fr; } }
.fxl-box { border: 1px solid var(--line-l); padding: 1rem; margin: 0; min-width: 0; }
.fxl-box legend, .fxl-box h3 { font: 600 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.fxl-box legend { padding: 0 .4rem; }
.fxl-box h3 { margin: 0 0 .9rem; }
.fxl-field { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; margin-bottom: .8rem; align-items: baseline; }
.fxl-field label, .fxl-probe label { font-size: .9rem; color: #dde6ef; }
.fxl-field label { grid-row: 1; grid-column: 1; }
.fxl-field output { grid-row: 1; grid-column: 2; text-align: right; font: 600 .9rem var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fxl-field input[type=range] { grid-row: 2; grid-column: 1/-1; width: 100%; min-height: 44px; accent-color: var(--gold); margin: 0; }
.fxl-note { grid-row: 3; grid-column: 1/-1; font: .74rem/1.4 var(--mono); color: var(--gold-l); }

/* Botones (conmutadores, escenarios, audio) */
.fxl-toggles, .fxl-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.fx-lab button { min-height: 44px; padding: .5rem .8rem; background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r); color: #e8eef5; font: 600 .78rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.fx-lab button:hover { border-color: var(--gold); color: var(--gold); }
.fxl-toggle[aria-pressed=true], .fxl-toggle[aria-pressed=true]:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.fxl-audio { width: 100%; }

/* Desplegables */
.fx-lab details { margin: 0 0 .9rem; }
.fx-lab summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; font: 600 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-l); list-style: none; }
.fx-lab summary::-webkit-details-marker { display: none; }
/* Signo decorativo: texto alternativo vacío para que no se lea «más/menos» (doble declaración de respaldo) */
.fx-lab summary::before { content: "+"; content: "+" / ""; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border: 1px solid currentColor; font-size: .9rem; line-height: 1; flex: none; }
.fx-lab details[open] > summary::before { content: "−"; content: "−" / ""; }
.fxl-probe input[type=range] { width: 100%; min-height: 44px; accent-color: var(--gold); margin: 0; }
.fxl-probe output { display: block; font: .78rem/1.45 var(--mono); color: var(--gold); min-height: 2.9em; font-variant-numeric: tabular-nums; }

/* Lecturas tipo instrumento */
.fxl-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .8rem; margin: 0; }
.fxl-readouts > div { min-width: 0; border-top: 1px solid var(--line-l); padding-top: .4rem; }
.fxl-readouts dt { font: .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #9fb4c8; }
.fxl-readouts dd { margin: .2rem 0 0; font: 1rem/1.3 var(--mono); color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Ensayo */
.fxl-state { min-height: 4.8em; color: #e8eef5; font-size: .95rem; }
.fxl-ey { margin: 0 0 1rem; }
.fxl-ey-canvas { display: block; width: 220px; height: 150px; max-width: 100%; background: #0b1f33; border: 1px solid var(--line-l); }
.fxl-ey figcaption { font: .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #9fb4c8; margin-top: .35rem; }
.fxl-reto { font-size: .92rem; color: #dde6ef; }
.fxl-reto b { color: var(--gold); }
#fxl-best { font-family: var(--mono); color: var(--gold-l); }
.fxl-cta a { display: inline-block; color: var(--gold-l); font-weight: 600; font-size: .9rem; margin: 0 .8rem .5rem 0; padding: .25rem 0; }
.fxl-cta a:hover { color: #fff; }
.fxl-calc table { width: 100%; border-collapse: collapse; font: .76rem/1.35 var(--mono); }
.fxl-calc th, .fxl-calc td { padding: .32rem .35rem; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.fxl-calc th { text-align: left; font-weight: 400; color: #c6d4e2; }
.fxl-calc td { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
/* «Cómo funciona» es contenido real del HTML (visible e indexable sin JavaScript), bajo el panel */
.fx-lab > .fxl-how { margin: 0; padding: .25rem 1rem; }
.fx-lab > .fxl-how[open] { padding-bottom: .6rem; }
.fxl-how p { font-size: .92rem; color: #d3dfeb; margin: .4rem 0 .8rem; max-width: 72ch; }

/* Móvil */
@media (max-width: 767px) {
  .fxl-stage { aspect-ratio: 16/10; }
  @supports not (aspect-ratio: 1) { .fxl-stage { padding-top: 62.5%; } }
  .fxl-tip { white-space: normal; max-width: 78%; font-size: 11px; }
  .fxl-stamp { font-size: 1.1rem; right: 4%; top: 18%; }
}