:root{
  --navy:#0A1222; --panel:#111c31; --panel2:#0e1728; --line:#22304d;
  --ink:#eaf0fb; --muted:#8aa0c6; --accent:#2f6df6; --ok:#22c55e; --warn:#f59e0b;
  --gold:#e9c63f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #16233c 0%, var(--navy) 55%);
  color:var(--ink); font:15px/1.45 -apple-system,Segoe UI,Roboto,system-ui,sans-serif;
  display:flex; flex-direction:column; min-height:100%;
  overflow-x:hidden;
}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) 14px max(22px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);background:rgba(10,18,34,.6);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:11px;font-size:18px;letter-spacing:.2px}
.brand .logo{height:32px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.brand b{color:var(--gold);font-weight:700}
.conn{font-size:13px;color:var(--muted)}
.conn.on{color:var(--ok)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px;max-width:1100px;margin:0 auto;width:100%;flex:1}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
@media(max-width:480px){
  .topbar{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
  .brand{font-size:19px;gap:11px}
  .brand .logo{height:38px}
  .grid{padding:14px;gap:14px}
  .card{padding:16px}
  .idbox{padding:12px}
  .row{flex-wrap:wrap}
  .row input#remoteId{flex:1 1 100%}
  .row input.pinin{max-width:none;flex:1 1 90px;text-align:center}
  .row #btnConnect{flex:1 1 120px}
  .row input{font-size:16px;letter-spacing:2px}
  #remoteVideo{cursor:default}
}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.card h2{margin:0;font-size:16px}
.muted{color:var(--muted);margin:0;font-size:13px}
.idbox{background:#060c17;border:1px dashed var(--line);border-radius:12px;padding:14px;text-align:center;overflow:hidden}
.idbox span{font:700 clamp(20px,6.5vw,30px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:clamp(2px,1.4vw,6px);color:#fff;white-space:nowrap}
.btn{appearance:none;border:0;border-radius:10px;padding:11px 14px;font-weight:600;cursor:pointer;font-size:14px}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:disabled{background:#26324a;color:#6b7c9c;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.row{display:flex;gap:8px}
.row input{flex:1;background:#060c17;border:1px solid var(--line);border-radius:10px;color:#fff;
  padding:11px 12px;font:600 18px/1 ui-monospace,monospace;letter-spacing:4px}
.row input:focus{outline:2px solid var(--accent);border-color:transparent}
.status{font-size:13px;color:var(--muted);min-height:18px;margin:0}
.status.ok{color:var(--ok)} .status.warn{color:var(--warn)}
.hidden{display:none!important}
/* sesiones recientes */
.recent{margin-top:10px}
.recent-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.recent-item{display:flex;gap:8px;align-items:stretch}
.rgo{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#0e1a30;border:1px solid var(--line);border-radius:11px;padding:13px 14px;cursor:pointer;color:var(--ink);text-align:left}
.rgo:hover{border-color:var(--gold)}
.rgo .rn{font-weight:700;font-size:15px}
.rgo .ri{font:600 15px/1 ui-monospace,monospace;color:var(--gold);letter-spacing:1px}
.redit{flex:0 0 auto;width:46px;background:#0e1a30;border:1px solid var(--line);border-radius:11px;cursor:pointer;font-size:17px;line-height:1}
.redit:hover{border-color:var(--gold)}
.rdel{flex:0 0 auto;width:42px;background:#0e1a30;border:1px solid var(--line);border-radius:11px;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.rdel:hover{color:#f87171;border-color:#7f1d1d}
.rname-input{flex:1;background:#060c17;border:1px solid var(--gold);border-radius:11px;color:#fff;padding:13px 14px;font-size:16px;font-weight:700}
.rname-input:focus{outline:2px solid var(--gold)}
.link{background:none;border:0;color:var(--accent);cursor:pointer;text-decoration:underline;font-size:13px}
/* controlado: overlay de prueba del canal de control */
.overlay-wrap{margin-top:6px}
.overlay{position:relative;height:150px;background:#060c17;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cursor{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(47,109,246,.25);transform:translate(-50%,-50%);left:50%;top:50%;transition:all .03s linear}
.keylog{margin-top:6px;font:12px ui-monospace,monospace;color:var(--muted);white-space:nowrap;overflow:hidden}
/* controlador: pantalla remota */
.screen-wrap{margin-top:6px}
.video-box{position:relative;line-height:0}
#remoteVideo{width:100%;border-radius:10px;background:#000;border:1px solid var(--line);display:block}
/* Aviso cuando el equipo quedó en la pantalla de bloqueo del sistema:
   el video se ve negro y el control no llega. Se dice, no se disimula. */
.lock-note{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;gap:8px;
  align-items:center;justify-content:center;text-align:center;padding:18px;border-radius:10px;
  background:rgba(6,12,23,.86);line-height:1.5;pointer-events:none}
.lock-note b{font-size:16px;color:var(--warn,#f59e0b)}
.lock-note span{font-size:13px;color:var(--muted);max-width:420px}
.lock-note.hidden{display:none}
/* capa transparente que captura los toques (evita conflictos de iOS con el video) */
.touch-layer{position:absolute;inset:0;z-index:2;touch-action:none;cursor:crosshair}
/* Puntería instantánea: aro rojo + punto central que sigue el dedo SIN latencia,
   así ves exactamente dónde caerá el cursor del equipo remoto (el dedo tapa el punto,
   pero el aro sobresale). El cursor real del PC llega con el pelín de retardo de la red. */
.ctrl-cursor{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .12s}
.ctrl-cursor.on{opacity:.92}
.ctrl-cursor::before{content:"";position:absolute;left:-27px;top:-27px;width:54px;height:54px;border:2px solid rgba(255,55,55,.95);border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.55)}
.ctrl-cursor::after{content:"";position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:#ff3737;box-shadow:0 0 4px rgba(0,0,0,.6)}
/* pantalla completa: el equipo remoto llena todo el celular */
.screen-wrap.fs{position:fixed;inset:0;z-index:1000;background:#000;margin:0;padding:0;display:flex;flex-direction:column}
.screen-wrap.fs .video-box{flex:1;position:relative;overflow:hidden}
.screen-wrap.fs #remoteVideo{width:100%;height:100%;object-fit:contain;border:0;border-radius:0}
.screen-wrap.fs .touch-layer{position:absolute;inset:0}
.screen-wrap.fs .controls{position:fixed;left:0;right:0;bottom:0;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0));z-index:1001;gap:22px}
.screen-wrap.fs .gest-hint{position:fixed;left:0;right:0;top:calc(8px + env(safe-area-inset-top,0px));margin:0;z-index:1001;
  color:#cdd6e6;background:rgba(0,0,0,.35);padding:6px;backdrop-filter:blur(4px)}
.screen-wrap.fs .chatbox{display:none}
/* Auto-ocultar la UI en pantalla completa: no debe tapar el equipo remoto ni robar los toques */
.screen-wrap.fs .controls,.screen-wrap.fs .gest-hint{transition:opacity .3s ease}
.screen-wrap.fs.ui-hidden .controls,.screen-wrap.fs.ui-hidden .gest-hint{opacity:0;pointer-events:none}
/* Pestaña lateral para volver a mostrar los controles (borde derecho: no tapa menú ni Dock) */
#uiHandle{display:none}
.screen-wrap.fs #uiHandle{display:flex;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1002;
  width:26px;height:64px;align-items:center;justify-content:center;color:#fff;cursor:pointer;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.18);border-right:0;border-radius:13px 0 0 13px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.screen-wrap.fs #uiHandle svg{width:20px;height:20px}
.screen-wrap.fs.ui-hidden #uiHandle{opacity:.55;pointer-events:auto}
/* Teclado flotante: SOLO en pantalla completa y SIEMPRE visible (aunque la barra se auto-oculte),
   en la esquina inferior izquierda (libre: los íconos van centrados). Nunca se pierde el teclado. */
#fsKbd{display:none}
.screen-wrap.fs #fsKbd{display:flex;position:fixed;z-index:1003;
  left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:50px;height:50px;border-radius:50%;align-items:center;justify-content:center;color:#fff;cursor:pointer;
  background:rgba(20,28,48,.62);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.42);
  -webkit-tap-highlight-color:transparent}
.screen-wrap.fs #fsKbd svg{width:26px;height:26px}
.screen-wrap.fs #fsKbd:active{transform:scale(.92)}
.screen-wrap.fs #fsKbd.active{background:#fff;color:#0A1222;border-color:#fff}
/* barra de controles estilo iOS (botones circulares con íconos) */
.controls{display:flex;gap:16px;justify-content:center;align-items:flex-start;margin-top:12px;flex-wrap:wrap}
.ctl{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent}
.ctl .ico{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .12s,background .15s}
.badge{position:absolute;top:0;right:0;width:14px;height:14px;border-radius:50%;background:#ff3b30;border:2px solid var(--navy);display:none}
.badge.on{display:block}
.ctl .ico svg{width:25px;height:25px}
.ctl .lbl{font-size:12px;color:var(--muted);font-weight:600}
.ctl:active .ico{transform:scale(.9)}
.ctl.active .ico{background:#fff;color:#0A1222;border-color:#fff}
.ctl.active .lbl{color:var(--ink)}
.ctl .i-compress{display:none}
.ctl.active .i-expand{display:none}
.ctl.active .i-compress{display:block}
.ctl-end .ico{background:#ff3b30;border-color:#ff3b30;color:#fff}
.ctl-end:active .ico{background:#ff5a50}
.gest-hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px}
.kbd-capture{position:fixed;bottom:0;left:0;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;font-size:16px;pointer-events:none}
#remoteVideo{touch-action:none}
/* clave de sesión */
.pin{font-size:13px;color:var(--muted);margin:0}
.pin b{color:var(--gold);font:700 15px ui-monospace,monospace;letter-spacing:2px}
.row input.pinin{max-width:90px;flex:0 0 auto;letter-spacing:3px;text-align:center}
/* chat */
.chatbox{margin-top:8px;background:#060c17;border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px}
.msgs{max-height:120px;min-height:40px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.msg{max-width:80%;padding:5px 9px;border-radius:9px;font-size:13px;word-break:break-word}
.msg.me{align-self:flex-end;background:var(--accent);color:#fff}
.msg.them{align-self:flex-start;background:#1b2740;color:var(--ink)}
.chatrow{display:flex;gap:6px}
.chatrow input{flex:1;background:#0b1220;border:1px solid var(--line);border-radius:8px;color:#fff;padding:8px 10px;font-size:13px}
.chatrow input:focus{outline:1px solid var(--accent)}
.chatrow .btn{padding:8px 12px;font-size:13px}
.foot{padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:12px;color:var(--muted);text-align:center}