:root{--bg: #f6f7fb;--panel: #ffffff;--panel-2: #f3f4f8;--border: #e5e7ee;--border-strong: #d3d7e2;--ink: #1a1d29;--ink-dim: #6b7280;--azure: #6366f1;--azure-dim: #eef0ff;--azure-tint: #4338ca;--eosin: #ef4444;--eosin-dim: #fef2f2;--eosin-tint: #b91c1c;--accent: var(--azure);--accent-dim: var(--azure-dim);--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;--radius: 10px;--radius-sm: 7px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);--shadow-md: 0 2px 8px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100%}header{padding:14px 24px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;justify-content:space-between;background:var(--panel)}header h1{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}.sample-id-label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--azure-tint);background:var(--azure-dim);border:1px solid var(--azure);border-radius:var(--radius-sm);padding:4px 10px}header .sub{font-family:var(--font-body);font-size:13px;color:var(--ink-dim)}header .sub a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid transparent}header .sub a:hover{color:var(--azure);border-bottom-color:var(--azure)}main{flex:1;display:flex;min-height:0}#stage-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,#10141a,#080a0e 72%),repeating-linear-gradient(0deg,rgba(108,98,176,.05) 0 1px,transparent 1px 42px),repeating-linear-gradient(90deg,rgba(108,98,176,.05) 0 1px,transparent 1px 42px),repeating-linear-gradient(0deg,rgba(108,98,176,.09) 0 1px,transparent 1px 210px),repeating-linear-gradient(90deg,rgba(108,98,176,.09) 0 1px,transparent 1px 210px)}#eyepiece{position:relative;width:min(72vh,72vw);height:min(72vh,72vw);border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #08090c,0 0 0 5px #333d4d,inset 0 0 60px 20px #000000d9,0 0 90px 12px #000000a6;cursor:grab;background:#f2e9e6;touch-action:none}#eyepiece.dragging{cursor:grabbing}#canvas{display:block;width:100%;height:100%}#crosshair{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;justify-content:center}#crosshair:before,#crosshair:after{content:"";position:absolute;background:#ffffff1f}#crosshair:before{width:1px;height:100%}#crosshair:after{height:1px;width:100%}aside{width:230px;border-right:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:20px;background:var(--panel);font-family:var(--font-body);overflow-y:auto}#counter-panel{border-right:none;border-left:1px solid var(--border)}#counter-total-wrap{margin-top:10px;display:flex;align-items:baseline;gap:4px}#counter-total{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}.counter-total-max{font-size:13px;color:var(--ink-dim)}#counter-alarm{display:none;margin-top:10px;padding:9px 11px;background:var(--eosin-dim);border:1px solid #fecaca;border-left:3px solid var(--eosin);border-radius:var(--radius-sm);color:var(--eosin-tint);font-size:12px;line-height:1.5}#counter-alarm.visible{display:block}#counter-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:4px}.counter-btn{position:relative;aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:9px;overflow:hidden;cursor:pointer;color:#fff;font-family:var(--font-body);background:linear-gradient(135deg,#36c0c9 0,#36c0c9 52%,#2b8fb0 52%,#2b8fb0);box-shadow:0 2px #1f6f86,0 3px 8px #143c5040;transition:transform .06s,box-shadow .06s,filter .12s;-webkit-tap-highlight-color:transparent}#counter-buttons.otras .counter-btn{aspect-ratio:auto;height:74px;background:linear-gradient(135deg,#5b8fe0 0,#5b8fe0 52%,#3c6fc0 52%,#3c6fc0);box-shadow:0 2px #24508f,0 3px 8px #14285a40}.counter-btn:hover:not(:disabled){filter:brightness(1.06)}.counter-btn.pulsada:not(:disabled){transform:translateY(2px);box-shadow:0 0 #1f6f86,0 1px 4px #143c5040;filter:brightness(1.1)}.counter-btn:disabled{cursor:not-allowed;opacity:.45}.counter-btn-corta{position:absolute;top:9%;right:9%;font-size:26px;font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 0 rgba(0,0,0,.15)}#counter-buttons.otras .counter-btn-corta{top:12%;font-size:15.5px}.counter-btn-larga{position:absolute;top:40%;right:9%;font-size:9.5px;font-weight:600;opacity:.95;white-space:nowrap}#counter-buttons.otras .counter-btn-larga{top:42%}.counter-btn-count{position:absolute;left:9%;bottom:7%;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.counter-btn-key{position:absolute;top:7%;left:8%;padding:1px 4px;border-radius:4px;background:#ffffff38;font-size:10px;font-weight:700}#counter-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:4px}#counter-actions button{height:46px;border:0;border-radius:9px;color:#fff;font-family:var(--font-body);font-size:15px;font-weight:800;cursor:pointer;background:#36c0c9;box-shadow:0 2px #1f6f86,0 3px 8px #143c5040;-webkit-tap-highlight-color:transparent}#counter-actions button:hover{filter:brightness(1.06)}#counter-actions button:active{transform:translateY(2px);box-shadow:0 0 #1f6f86}#counter-actions #counter-capa{grid-column:1 / -1;background:linear-gradient(135deg,#3c7fd1,#2b5fb0);box-shadow:0 2px #1d4686,0 3px 8px #14285a40}#counter-actions #counter-capa.abierto{background:#1d4686}.block-label-row{display:flex;align-items:center;justify-content:space-between}#counter-config-toggle{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--ink-dim);width:24px;height:24px;line-height:1;cursor:pointer;font-size:13px;transition:border-color .12s,color .12s}#counter-config-toggle:hover{color:var(--ink);border-color:var(--azure)}#counter-config-view{display:flex;flex-direction:column;gap:12px;font-family:var(--font-body)}.empty-hint{font-size:12.5px;color:var(--ink-dim);line-height:1.6}#counter-config-rows{display:flex;flex-direction:column;gap:8px}.counter-config-grupo{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}.counter-config-row{display:flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 10px}.counter-config-row-tipo{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--ink);font-weight:500}.counter-config-row-tipo span{font-size:11px;color:var(--ink-dim);font-weight:400}.counter-config-row .counter-key-input{flex:0 0 52px;width:52px}.counter-config-row .counter-key-clear{align-self:stretch}.counter-config-defecto{margin-top:4px;padding:7px 6px;background:var(--panel);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);color:var(--ink-dim);font-family:var(--font-body);font-size:12px;cursor:pointer}.counter-config-defecto:hover{color:var(--ink);border-color:var(--azure)}.counter-config-row-fields{display:flex;gap:6px}.counter-key-input{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--ink);padding:6px 7px;font-family:var(--mono);font-size:12px;text-align:center;cursor:pointer}.counter-key-input.listening{border-color:var(--azure);color:var(--azure-tint);box-shadow:0 0 0 3px var(--azure-dim)}.counter-key-clear{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--ink-dim);width:26px;cursor:pointer;font-size:11px}.counter-key-clear:hover{border-color:var(--eosin);color:var(--eosin-tint)}#counter-config-actions{display:flex;gap:8px}#counter-config-actions button{flex:1;padding:8px 6px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;border-radius:var(--radius-sm);transition:border-color .12s,box-shadow .12s}#counter-config-save{background:var(--azure);border:1px solid var(--azure);color:#fff;font-weight:500}#counter-config-save:hover{box-shadow:var(--shadow-md)}#counter-config-cancel{background:var(--panel);border:1px solid var(--border);color:var(--ink-dim)}#counter-config-cancel:hover{color:var(--ink);border-color:var(--border-strong)}.block-label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}#objectives{display:flex;flex-direction:column;gap:6px}.obj-btn{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--ink);padding:9px 11px;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:13px;display:flex;justify-content:space-between;align-items:center;transition:border-color .15s,box-shadow .15s}.obj-btn:hover{border-color:var(--azure);box-shadow:var(--shadow-sm)}.obj-btn.active{background:var(--azure-dim);border-color:var(--azure);color:var(--azure-tint);font-weight:500}.obj-btn .tag{color:var(--ink-dim);font-size:11px}.obj-btn.active .tag{color:var(--azure-tint)}#speed-control{display:flex;align-items:center;gap:10px;font-family:var(--font-body)}#speed-slider{flex:1;accent-color:var(--azure)}#speed-value{font-size:12.5px;color:var(--ink);min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums}#readout{font-size:12.5px;color:var(--ink-dim);line-height:1.9}#readout span{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}#legend{font-size:12.5px;color:var(--ink-dim);line-height:1.8}.legend-row{display:flex;align-items:center;gap:8px;margin-bottom:3px}.swatch{width:10px;height:10px;border-radius:50%;flex:none}footer{padding:10px 24px;border-top:1px solid var(--border);background:var(--panel);font-family:var(--font-body);font-size:11.5px;color:var(--ink-dim);display:flex;gap:26px}body.visor-espejo header,body.visor-espejo aside,body.visor-espejo footer,body.visor-espejo #crosshair{display:none!important}body.visor-espejo #stage-wrap{background:#000}body.visor-espejo #eyepiece{width:100vmin;height:100vmin;border-radius:0;box-shadow:none}body.visor-embebido header{padding-left:340px}body.visor-atlas header,body.visor-atlas footer{display:none}body.visor-atlas #eyepiece{width:min(94vh,72vw);height:min(94vh,72vw);width:min(94dvh,72vw);height:min(94dvh,72vw)}@media (max-height: 640px){body.visor-atlas #eyepiece{width:min(86vh,72vw);height:min(86vh,72vw);width:min(86dvh,72vw);height:min(86dvh,72vw)}}body.visor-tactil{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body.visor-tactil #counter-panel,body.visor-tactil .counter-btn{touch-action:pan-y}body.visor-tactil input,body.visor-tactil textarea{-webkit-user-select:text;user-select:text}#zona-mando,#volver-telefono{display:none}@media (orientation: landscape){body.visor-telefono header,body.visor-telefono footer{display:none}body.visor-telefono #volver-telefono{display:block;position:fixed;top:8px;right:8px;z-index:20;padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;box-shadow:0 2px 6px #1e145026}body.visor-telefono #app,body.visor-telefono main{height:100vh;height:100dvh}body.visor-telefono main>aside:first-child{width:22vw;padding:52px 8px 8px;gap:8px;position:relative;overflow:hidden}body.visor-telefono main>aside:first-child>div:not(:first-child):not(#zona-mando),body.visor-telefono main>aside:first-child .block-label{display:none}body.visor-telefono #objectives{flex-direction:row;gap:4px}body.visor-telefono .obj-btn{flex:1;justify-content:center;padding:6px 0;font-size:12px}body.visor-telefono .obj-btn .tag{display:none}body.visor-telefono #zona-mando{display:block;position:absolute;left:0;right:0;top:92px;bottom:0;border-top:1px dashed var(--border);background:#6c62b00a;touch-action:none;user-select:none;-webkit-user-select:none}body.visor-telefono .mando-base{position:absolute;left:50%;top:45%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:1.5px solid rgba(91,80,160,.35);background:#5b50a014;box-shadow:inset 0 1px #fff;pointer-events:none}body.visor-telefono .mando-base.activo{background:#5b50a024}body.visor-telefono .mando-perilla{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#fff,#e4e6f0);box-shadow:inset 0 1px #fff,0 3px 10px #1e14504d}body.visor-telefono .mando-ayuda{position:absolute;left:0;right:0;bottom:12px;padding:0 6px;text-align:center;color:var(--ink-dim);font-size:11px;pointer-events:none}body.visor-telefono #stage-wrap{flex:none;width:50vw;background:var(--panel)}body.visor-telefono #eyepiece{width:min(100vh,50vw);height:min(100vh,50vw);width:min(100dvh,50vw);height:min(100dvh,50vw);box-shadow:0 0 0 2px #d6d9e4,0 4px 18px #2828502e,inset 0 0 40px 10px #00000059}body.visor-telefono #counter-panel{width:28vw;padding:52px 7px 8px;gap:6px;overflow-y:auto;border-left:1px solid var(--border);border-right:0}body.visor-telefono #counter-panel .block-label-row{display:none}body.visor-telefono #counter-total-wrap{margin:0}body.visor-telefono #counter-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}body.visor-telefono #counter-buttons.otras .counter-btn{height:44px}body.visor-telefono .counter-btn-corta{top:6%;right:7%;font-size:15px}body.visor-telefono #counter-buttons.otras .counter-btn-corta{top:8%;font-size:9.5px}body.visor-telefono .counter-btn-larga,body.visor-telefono .counter-btn-key{display:none}body.visor-telefono .counter-btn-count{left:8%;bottom:5%;font-size:14px}body.visor-telefono #counter-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}body.visor-telefono #counter-actions button{height:34px;font-size:12px}body.visor-telefono #counter-actions #counter-capa{grid-column:auto;font-size:11px;line-height:1.1}}