:root { color-scheme: dark; --bg:#0c1420; --fg:#edf5ff; --mut:#9eafc5; --acc:#57c8e8; --bad:#e26371; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; background:var(--bg); color:var(--fg); overscroll-behavior:none; font-family:system-ui,"Segoe UI",sans-serif; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
button,input,select { font:inherit; padding:.6rem .8rem; border-radius:9px; border:1px solid #33465e; background:#162337; color:var(--fg); }
input,select { -webkit-user-select:text; user-select:text; }
button { cursor:pointer; min-height:42px; touch-action:manipulation; }
button:hover { background:#243b54; border-color:var(--acc); }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
button:disabled { opacity:.6; cursor:wait; }
button.primary,button.active { background:var(--acc); border-color:var(--acc); color:#06212b; font-weight:650; }
button.danger { color:#ffdce0; border-color:#743443; background:#3b1c2a; }
.muted { color:var(--mut); font-size:.86rem; line-height:1.6; }
.hint { color:var(--mut); font-size:.77rem; line-height:1.6; }
#login { max-width:400px; margin:8vh auto 0; display:flex; flex-direction:column; gap:.8rem; padding:1.6rem; }
#login h1 { font-size:2.7rem; letter-spacing:-.06em; margin:.1rem 0; }
#login h1 span { color:var(--acc); font-size:1rem; vertical-align:super; padding-left:.4rem; }
#login p { margin:0 0 .4rem; } #login label { font-size:.85rem; margin-top:.5rem; }
#login input,#login .primary { min-height:48px; }
.eyebrow { font-size:.65rem; color:var(--acc); letter-spacing:.18em; margin-top:1rem!important; }
#status:empty { display:none; } #status { overflow-wrap:anywhere; }
#session { display:flex; flex-direction:column; height:100%; height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#toolbar { background:#101c2c; border-bottom:1px solid #283b53; }
#toolbar.hidden { display:none; }
.toolbar-row,.options-row { display:flex; gap:.4rem; align-items:center; padding:.55rem .65rem; flex-wrap:wrap; }
.wordmark { letter-spacing:-.04em; padding-right:.5rem; }
.seg { display:inline-flex; gap:2px; } .seg button { border-radius:5px; }
.pill { padding:.35rem .65rem; border-radius:20px; background:#293b51; font-size:.78rem; white-space:nowrap; }
.pill.ok { color:#a0eccd; background:#143d35; } .pill.warn { color:#ffe6ac; background:#514220; } .pill.bad { color:#ffdce0; background:#572b36; }
#options { padding:0 .7rem; } summary { cursor:pointer; font-size:.8rem; color:var(--mut); padding:.25rem 0; }
.options-row { padding:.65rem 0; } .options-row label { display:flex; align-items:center; gap:.5rem; font-size:.8rem; }
#sensitivity { width:100px; padding:0; } #text { width:200px; } #metrics { margin:.3rem 0; }
.status-row { display:flex; flex-wrap:wrap; gap:.3rem .8rem; justify-content:space-between; padding:.2rem .7rem .4rem; font-size:.7rem; color:var(--mut); }
#notice { color:#ffe6ac; overflow-wrap:anywhere; }
#stage { position:relative; flex:1; min-height:0; background:#03070d; outline:none; overflow:hidden; touch-action:none; }
#stage.offline::after { content:"Conexión en pausa…"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:.8rem 1rem; border-radius:12px; background:#101c2cea; color:#ffe6ac; pointer-events:none; }
#view { position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
#screen { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
#stage.mouse { cursor:none; }
#pointer { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid #ff6571; background:#ff657133; border-radius:50%; pointer-events:none; box-shadow:0 0 0 1px #140207; }
#toggle-bar { position:absolute; top:.5rem; right:.5rem; z-index:5; opacity:.8; cursor:pointer; min-width:44px; background:#142137dc; }
#kb { position:fixed; left:0; bottom:0; width:1px; height:1px; opacity:0; padding:0; border:0; }
@media(max-width:850px) { .toolbar-row { flex-wrap:nowrap; overflow-x:auto; } .toolbar-row>* { flex:0 0 auto; } .wordmark { display:none; } #options[open] { max-height:32vh; overflow:auto; } .status-row { font-size:.65rem; } #login { margin-top:4vh; } }
@media(prefers-reduced-motion:no-preference) { button { transition:background .14s,border-color .14s; } }
/* Browser access and exchange tools. */
#login { max-width:460px; margin-top:3vh; padding-bottom:2rem; }
#login .check { display:flex; align-items:flex-start; gap:.6rem; line-height:1.5; }
#login .check input { min-height:0; margin:.3rem 0 0; }
#login details input { width:100%; margin-top:.6rem; }
#screen-jpeg { width:100%; height:100%; object-fit:contain; pointer-events:none; display:block; }
#stage.reading #screen-jpeg { image-rendering:pixelated; }
#frame-size { color:#b7e5bf; }
#lens { position:absolute; left:12px; bottom:12px; width:180px; height:180px; border:2px solid var(--acc); border-radius:16px; background:#03070d; box-shadow:0 6px 30px #000a; pointer-events:none; z-index:3; }
dialog { width:min(720px,calc(100vw - 24px)); max-height:85dvh; overflow:auto; border:1px solid #33465e; border-radius:18px; background:var(--bg); color:var(--fg); padding:1.25rem; }
dialog::backdrop { background:#02060bba; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.dialog-head h2 { margin:.4rem 0; }
dialog details { border-top:1px solid #283b53; padding:.8rem 0; }
dialog summary { color:var(--fg); font-size:.95rem; }
dialog textarea { width:100%; margin-top:.8rem; background:#162337; border:1px solid #33465e; color:var(--fg); border-radius:9px; padding:.7rem; font:inherit; user-select:text; -webkit-user-select:text; }
dialog a { color:var(--acc); overflow-wrap:anywhere; }
dialog .item { padding:.6rem 0; display:flex; align-items:center; justify-content:space-between; gap:.7rem; border-bottom:1px solid #233348; font-size:.85rem; overflow-wrap:anywhere; }
dialog .item span { min-width:0; }
#tool-status { color:#ffe6ac; font-size:.85rem; }
.code { display:block; font:700 1.7rem ui-monospace,monospace; color:var(--acc); letter-spacing:.15em; padding:.7rem 0; user-select:text; -webkit-user-select:text; }
progress { width:100%; accent-color:var(--acc); margin-top:.8rem; }
@media(max-width:500px) { #lens { width:130px; height:130px; } dialog { padding:1rem; } }