@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;          /* escala de la pantalla: 1 px de diseño = --s px reales (la calcula app.js) */
  --dial:240px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--marron);color:var(--crema);font-family:"Poppins",system-ui,sans-serif;overflow:hidden;
  display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:12px 12px 52px}

/* ---------- Dispositivo ---------- */
.device{display:flex;flex-direction:column;align-items:center;gap:calc(var(--s)*14px);
  padding:calc(var(--s)*14px);background:#1d0d06;border:1px solid var(--marron2);border-radius:calc(var(--s)*26px)}
.screen-wrap{width:calc(284px*var(--s));height:calc(76px*var(--s));  /* ratio exacto 284:76 */
  background:var(--negro);border-radius:calc(var(--s)*4px);overflow:hidden;position:relative;
  box-shadow:0 0 0 calc(var(--s)*3px) #0a0402}
.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}

/* ---------- Dial ---------- */
.controls{display:flex;align-items:center;gap:calc(var(--dial)*.08)}
.dial{position:relative;width:var(--dial);height:var(--dial);border-radius:50%;cursor:grab;outline:none;touch-action:none;flex:none}
.dial:active{cursor:grabbing}
.dial:focus-visible{box-shadow:0 0 0 3px var(--ambar)}
.knurl{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(#cfd0d5 0 3deg,var(--plata) 3deg 6deg);
  box-shadow:inset 0 0 0 3px #b9bac0,0 6px 0 #0a0402;transition:transform .07s linear}
.cap{position:absolute;inset:18%;border-radius:50%;background:var(--crema);box-shadow:inset 0 0 0 2px #d9cfbb}
.mark{position:absolute;left:50%;top:7%;width:11%;height:11%;margin-left:-5.5%;border-radius:50%;background:var(--naranja2)}
.ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke:var(--naranja);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.dial.hold .ring circle{animation:hold 2s linear forwards}
@keyframes hold{to{stroke-dashoffset:0}}
.dial.pressed .cap{transform:scale(.97)}
.turn{width:calc(var(--dial)*.2);height:calc(var(--dial)*.2);min-width:36px;min-height:36px;border-radius:50%;border:1px solid var(--marron2);
  background:transparent;color:var(--crema);font-size:20px;line-height:1;cursor:pointer;opacity:.75;flex:none}
.turn:hover{opacity:1;background:var(--marron2)}
.turn:active{transform:scale(.94)}

.eject{display:flex;align-items:center;gap:6px;border:1px solid var(--marron2);background:transparent;color:var(--crema);
  font:500 11px/1 "Poppins",sans-serif;padding:7px 12px;border-radius:999px;cursor:pointer;opacity:.85}
.eject svg{width:11px;height:11px;fill:currentColor}
.eject:hover{background:var(--marron2);opacity:1}
.toast{margin:0;min-height:14px;font-size:11px;color:var(--ambar);opacity:0;transition:opacity .2s}
.toast.on{opacity:1}

/* ---------- 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}

/* ---------- Panel de pruebas y franjas ---------- */
.panel{position:fixed;left:10px;bottom:56px;background:#1d0d06;border:1px solid var(--marron2);border-radius:12px;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;font-size:12px;max-width:230px;z-index:5}
.panel fieldset{border:1px solid var(--marron2);border-radius:8px;margin:0;padding:4px 8px;display:flex;flex-direction:column;gap:2px}
.panel button{background:var(--marron2);color:var(--crema);border:0;border-radius:8px;padding:6px 8px;font:inherit;cursor:pointer}
.panel small{color:var(--ambar);line-height:1.4}
.stripes{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column}
.stripes i{display:block;height:10px}
.stripes i:nth-child(1){background:var(--marron2)}.stripes i:nth-child(2){background:var(--rojo)}
.stripes i:nth-child(3){background:var(--naranja2)}.stripes i:nth-child(4){background:var(--ambar)}
@media (prefers-reduced-motion:reduce){.screen .v{animation:none}.mq.on>span{animation:none}}