@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"DSEG14";font-weight:400;font-display:swap;src:url(fonts/dseg14-classic-400-normal.woff2) format("woff2")}

:root{
  /* Paleta de la guía de estilo del Figma */
  --negro:#000; --linea:#404040; --texto:#f4f1ea; --texto2:#7b7b7b;
  --naranja:#ff6a13; --azul:#2f6bd9; --plata:#e3e4e8;
  /* Paleta de la presentación (marco del dispositivo) */
  --marron:#2a1209; --marron2:#562717; --rojo:#c21717; --naranja2:#e76219; --ambar:#fea712; --crema:#fbf1df;
  --s:1; --dial:64px;          /* escala de la pantalla: 1 px de diseño = --s px reales (la calcula app.js) */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:#000;color:var(--crema);font-family:"Poppins",system-ui,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.stage{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;background:#000}

/* La pantalla es lo único visible: ocupa la ventana conservando el ratio exacto 284:76 */
.screen-wrap{box-shadow:0 0 0 1px #1f1f1f;width:calc(284px*var(--s));height:calc(76px*var(--s));background:var(--negro);position:relative;overflow:hidden;cursor:pointer;flex:none}
.screen{position:absolute;left:0;top:0;width:284px;height:76px;transform:scale(var(--s));transform-origin:0 0;
  background:var(--negro);overflow:hidden;color:var(--texto);font-family:"Poppins",sans-serif;font-weight:500;font-size:10px;line-height:normal}

/* ---------- Pantallas (coordenadas en px de diseño, 284 × 76) ---------- */
.screen .v{position:absolute;inset:0;animation:fadein .15s ease-out both}
.screen .v.out{opacity:0;transition:opacity .4s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.screen .a{position:absolute;white-space:nowrap}
.t16{font-weight:600;font-size:16px;line-height:24px;color:var(--texto)}
.t10{font-weight:500;font-size:10px;line-height:16px;color:var(--texto2)}
.t10n{font-weight:500;font-size:10px;line-height:normal}
.dim{color:var(--texto2)!important}
.mq{overflow:hidden}
.mq>span{display:inline-block;will-change:transform}
.mq.on>span{animation:mq var(--D) linear infinite alternate}
@keyframes mq{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(calc(-1*var(--d)))}}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.blink2{animation:blink2 .5s steps(1) 4 both}      /* parpadea 2 veces al entrar */
@keyframes blink2{50%{opacity:0}}
.seg{position:absolute;left:0;top:0;width:284px;height:76px;overflow:visible}
.seg.led text{font-family:"DSEG14",monospace;fill:var(--naranja)}
.prog{position:absolute;height:2px;background:var(--naranja);border-radius:1px;left:44px;top:64px;width:0;animation:load 2s linear forwards}
@keyframes load{to{width:196px}}
.opt{position:absolute;top:10px;width:124px;height:56px;border-radius:8px;border:1px solid var(--linea);overflow:hidden}
.opt.on{background:var(--linea);border:1.5px solid var(--naranja)}
.opt .n{position:absolute;font-weight:600;font-size:14px;line-height:20px;color:var(--texto2)}
.opt.on .n{color:var(--texto)}
.opt .d{position:absolute;font-weight:500;font-size:10px;line-height:16px;color:var(--texto2)}
.ico{position:absolute;display:block}

/* ---------- Ajustes: cajón desplegable en el borde izquierdo ---------- */
.panel{position:fixed;left:0;top:0;bottom:0;width:240px;transform:translateX(-100%);transition:transform .25s ease;z-index:5;
  font-size:12px;touch-action:auto;user-select:auto;-webkit-user-select:auto}
.panel.open{transform:none}
.panel .body{height:100%;overflow:auto;background:#1d0d06;border-right:1px solid var(--marron2);padding:16px 14px;
  display:flex;flex-direction:column;gap:8px}
.panel .tab{position:absolute;left:100%;top:50%;transform:translateY(-50%);width:28px;height:44px;border:0;border-radius:0 10px 10px 0;
  background:#1d0d06;color:var(--crema);cursor:pointer;opacity:.28;display:grid;place-items:center;padding:0;transition:opacity .2s}
.panel .tab:hover,.panel.open .tab,.panel .tab:focus-visible{opacity:1}
.panel .tab svg{width:18px;height:18px}
.panel fieldset{border:1px solid var(--marron2);border-radius:8px;margin:0;padding:4px 8px;display:flex;flex-direction:column;gap:2px}
.panel label{display:flex;align-items:center;gap:6px}
.panel button:not(.tab){background:var(--marron2);color:var(--crema);border:0;border-radius:8px;padding:7px 8px;font:inherit;cursor:pointer}
.panel small{color:var(--ambar);line-height:1.4;min-height:1.4em}
.panel .help{margin:6px 0 0;padding:10px 0 0 0;border-top:1px solid var(--marron2);list-style:none;display:flex;flex-direction:column;gap:4px;color:#cdbfae}
.panel .help b{color:var(--crema);font-weight:600}
@media (prefers-reduced-motion:reduce){.screen .v{animation:none}.mq.on>span{animation:none}.panel{transition:none}}

/* ---------- Dial ---------- */
.dial{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:var(--dial);height:var(--dial);flex:none;touch-action:none;cursor:grab;position:relative;outline:0}
.dial svg{width:100%;height:100%;display:block;overflow:visible}
.dial.grab{cursor:grabbing}
#dialRot{transform-origin:50px 50px}
#dialBtn{transform-origin:50px 50px;transition:transform .08s ease-out;cursor:pointer}
.dial.press #dialBtn{transform:scale(.94)}
.dial .mark{fill:var(--naranja)}
.dial .holdring{stroke:var(--naranja);stroke-dasharray:189;stroke-dashoffset:189;opacity:0}
.dial.hold .holdring{opacity:1;animation:holdfill 2s linear forwards}
@keyframes holdfill{to{stroke-dashoffset:0}}

/* ---------- Guía de pruebas (panel lateral) ---------- */
.guide{position:fixed;z-index:4;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;max-height:58vh;max-height:58dvh;background:#120a06;border-top:1px solid var(--marron2);color:var(--crema);
  font-size:14px;line-height:1.45;display:flex;flex-direction:column;touch-action:auto;user-select:text;-webkit-user-select:text;padding-bottom:env(safe-area-inset-bottom)}
.guide[hidden]{display:none}
@media (min-width:820px), (orientation:landscape) and (min-width:560px){
  .guide{left:auto;top:0;bottom:0;right:0;width:clamp(270px,38vw,360px);height:auto;max-height:none;border-top:0;border-left:1px solid var(--marron2);padding-bottom:0}
}
.g-head{padding:14px 18px;border-bottom:1px solid var(--marron2);display:flex;align-items:center;gap:12px;font-size:12px;color:#cdbfae;flex:none}
.g-bar{flex:1;display:flex;gap:4px}
.g-bar i{flex:1;height:4px;border-radius:2px;background:var(--marron2)}
.g-bar i.on{background:var(--ambar)}
.g-bar i.cur{background:var(--crema)}
.g-body{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:14px;touch-action:pan-y}
.g-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ambar);font-weight:600}
.guide h2{margin:0;font-size:20px;line-height:1.25;font-weight:600}
.guide p{margin:0;color:#e6dac8}
.g-screen{border:1px solid var(--marron2);border-radius:10px;padding:10px 12px;background:#1d0d06;display:flex;flex-direction:column;gap:2px}
.g-screen span{font-size:11px;color:#a89885;text-transform:uppercase;letter-spacing:.06em}
.g-screen b{font-weight:600}
.g-hint{font-size:13px;color:#a89885!important}
.guide button.g-btn{background:var(--ambar);color:#1a0d05;border:0;border-radius:10px;padding:12px 14px;font:inherit;font-weight:600;cursor:pointer}
.guide button.g-btn:disabled{opacity:.35;cursor:default}
.guide button.g-btn.sec{background:transparent;color:#cdbfae;border:1px solid var(--marron2);font-weight:500}
.guide input[type=text],.guide textarea{width:100%;background:#1d0d06;border:1px solid var(--marron2);border-radius:10px;color:var(--crema);font:inherit;padding:10px 12px}
.guide textarea{min-height:96px;resize:vertical}
.g-scale{display:flex;gap:6px}
.g-scale button{flex:1;aspect-ratio:1;max-height:48px;border-radius:10px;border:1px solid var(--marron2);background:#1d0d06;color:var(--crema);font:inherit;font-weight:600;cursor:pointer}
.g-scale button.on,.g-opt button.on,.g-yn button.on{background:var(--ambar);color:#1a0d05;border-color:var(--ambar)}
.g-ends{display:flex;justify-content:space-between;font-size:12px;color:#a89885}
.g-yn{display:flex;gap:8px}.g-yn button,.g-opt button{flex:1;padding:12px;border-radius:10px;border:1px solid var(--marron2);background:#1d0d06;color:var(--crema);font:inherit;cursor:pointer}
.g-opt{display:flex;flex-direction:column;gap:8px}.g-opt button{text-align:left}
.g-pulse{display:flex;align-items:center;gap:10px;color:#cdbfae}
.g-pulse i{width:10px;height:10px;border-radius:50%;background:var(--ambar);animation:blink 1.2s ease-in-out infinite}
.g-ok{font-size:22px;font-weight:600;color:var(--ambar)}
.g-foot{flex:none;padding:8px 18px;border-top:1px solid var(--marron2);font-size:11px;color:#8d7d6c;display:flex;justify-content:space-between}
.g-sl{display:flex;flex-direction:column;gap:6px;font-size:13px}
.g-sl b{color:var(--ambar);margin-left:6px}
.g-sl input[type=range]{width:100%;accent-color:var(--ambar)}
.g-sl input.unset{opacity:.45}
.g-opt button.on{font-weight:600}
.guide input[type=text],.guide textarea{font-size:16px}   /* evita el zoom automático de iOS al enfocar */
.g-body{min-height:0}
@media (max-width:559px){
  .g-head{padding:10px 14px}.g-body{padding:14px;gap:12px}.guide h2{font-size:18px}.g-foot{padding:6px 14px}
}