/* ============================================================
   STARGATE — ZOOM, BIBLIOTECA Y COMPARTIR v1.0 "ENVOY"
   ------------------------------------------------------------
   · HUD de zoom y lupa de área (presentador e invitados)
   · Gestor de presentaciones múltiples
   · Modal de compartir: enlace directo, WhatsApp, QR
   · Barra del modo invitado
   Se carga DESPUÉS de css/layout.css.
   ============================================================ */

/* ============================================================
   1. HUD DE ZOOM
   ============================================================ */
#zoom-hud{
  position:absolute;z-index:13;
  left:50%;bottom:calc(var(--u) * 7.4);transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;
  padding:4px 6px;border-radius:999px;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--stroke);
  box-shadow:0 10px 28px rgba(0,0,0,.42);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
/* Aparece al pasar el ratón por el escenario, al hacer zoom o en táctil */
#deck-area:hover #zoom-hud,
#zoom-hud.is-active,
body.is-zoomed #zoom-hud,
body.zoom-marquee-mode #zoom-hud{opacity:1;pointer-events:auto}
body.clean-mode #zoom-hud{opacity:0}
body.clean-mode.is-zoomed #zoom-hud{opacity:1;pointer-events:auto}

.zoom-btn{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:1px solid transparent;background:var(--glass);color:var(--text-soft);
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.zoom-btn:hover{background:rgba(var(--accent-rgb),.2);color:var(--text);transform:translateY(-1px)}
.zoom-btn.is-on{background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--accent-ink)}
.zoom-lvl{
  min-width:42px;text-align:center;
  font-family:var(--font);font-size:10px;font-weight:800;
  letter-spacing:.08em;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

/* Cursores de paneo y lupa */
body.is-zoomed #deck-area{cursor:grab}
body.is-panning #deck-area,
body.is-panning *{cursor:grabbing!important}
body.zoom-marquee-mode #deck-area{cursor:crosshair}

/* El deck no debe desbordar el área al ampliarse */
#deck-area{overflow:hidden}

/* Rectángulo de la lupa de área */
.zoom-marquee{
  position:fixed;z-index:90;display:none;pointer-events:none;
  border:1.5px dashed var(--accent);
  background:rgba(var(--accent-rgb),.13);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 22px rgba(var(--accent-rgb),.3);
  border-radius:4px;
}

/* ============================================================
   2. BIBLIOTECA DE PRESENTACIONES
   ============================================================ */
.deck-list{display:flex;flex-direction:column;gap:7px;max-height:290px;overflow-y:auto}
.deck-item{
  display:flex;align-items:center;gap:.65em;
  padding:.6em .7em;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);color:var(--text-soft);
  transition:background .18s ease,border-color .2s ease;
}
.deck-item:hover{background:rgba(var(--accent-rgb),.12)}
.deck-item.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.16);color:var(--text)}
.deck-item > i{color:var(--accent);font-size:12px;flex:0 0 auto}
.deck-item .di-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.deck-item .di-name{
  font-size:12px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.deck-item .di-meta{font-size:9.5px;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase}
.deck-item .di-acts{display:flex;gap:3px;flex:0 0 auto}
.deck-item .di-acts button{
  width:24px;height:24px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--text-dim);
  font-size:10px;display:grid;place-items:center;
}
.deck-item .di-acts button:hover{color:var(--text);background:rgba(var(--accent-rgb),.2)}
.deck-item .di-acts button.danger:hover{background:rgba(230,57,70,.24);color:#fff}

/* ============================================================
   3. MODAL DE COMPARTIR
   ============================================================ */
#share-modal{
  position:fixed;inset:0;z-index:96;display:none;
  align-items:center;justify-content:center;padding:5vh 4vw;
  background:rgba(3,5,12,.82);
}
#share-modal.is-open{display:flex;animation:fadeIn .2s ease both}
.sh-card{
  width:min(560px,96vw);max-height:90vh;overflow-y:auto;
  padding:clamp(18px,3.2vw,28px);border-radius:20px;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--stroke);
  box-shadow:0 40px 90px rgba(0,0,0,.62);
}
.sh-card h2{
  display:flex;align-items:center;gap:.5em;margin:0 0 .3em;
  font-family:var(--font-head,var(--font));font-size:clamp(17px,2.4vw,22px);
  font-weight:900;color:var(--text);letter-spacing:-.01em;
}
.sh-card h2 i{color:var(--accent)}
.sh-card h2 .close{
  margin-left:auto;width:30px;height:30px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);color:var(--text-soft);font-size:13px;
}
.sh-card h2 .close:hover{background:rgba(230,57,70,.22);color:#fff}
.sh-sub{margin:0 0 1.1em;font-size:12.5px;line-height:1.6;color:var(--text-dim)}

.sh-link{
  display:flex;gap:7px;align-items:center;margin-bottom:.9em;flex-wrap:wrap;
}
.sh-link input{
  flex:1 1 200px;min-width:0;
  background:var(--glass);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:var(--font);font-size:11.5px;
  padding:.7em .8em;outline:none;
}
.sh-link input:focus{border-color:var(--accent)}

.sh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin-bottom:1em}
.sh-btn{
  display:flex;flex-direction:column;align-items:center;gap:.35em;
  padding:1em .7em;border-radius:13px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);color:var(--text-soft);
  font-family:var(--font);text-align:center;
  transition:transform .16s ease,border-color .2s ease,background .2s ease;
}
.sh-btn:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--text)}
.sh-btn i{font-size:19px;color:var(--accent)}
.sh-btn b{font-size:12.5px;font-weight:800;color:var(--text)}
.sh-btn span{font-size:10px;line-height:1.4;color:var(--text-dim)}
.sh-btn.wa i{color:#25D366}

.sh-opts{display:flex;flex-direction:column;gap:7px;margin-bottom:1em}
.sh-note{
  margin:0;padding:.75em .85em;border-radius:10px;
  background:rgba(var(--accent-rgb),.09);border:1px solid var(--line);
  font-size:11px;line-height:1.6;color:var(--text-dim);
}
.sh-size{font-size:11px;color:var(--text-dim);margin:.2em 0 1em}
.sh-size b{color:var(--accent)}
.sh-qr{display:none;justify-content:center;padding:14px 0}
.sh-qr.is-on{display:flex}
.sh-qr img{
  width:180px;height:180px;border-radius:12px;
  background:#fff;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ============================================================
   4. BARRA DEL MODO INVITADO
   ============================================================ */
#guest-bar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:none;align-items:center;gap:.7em;
  padding:.55em clamp(10px,2.4vw,22px);
  background:linear-gradient(100deg,rgba(var(--accent-rgb),.22),var(--panel-b));
  border-bottom:1px solid var(--accent);
  backdrop-filter:blur(14px);
}
body.guest-mode #guest-bar{display:flex}
body.guest-mode #stage{padding-top:38px}
#guest-bar i{color:var(--accent);font-size:12px;flex:0 0 auto}
#guest-bar .gb-text{
  flex:1 1 auto;min-width:0;font-family:var(--font);font-size:11.5px;color:var(--text-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#guest-bar .gb-text b{color:var(--text)}
#guest-bar button{
  flex:0 0 auto;cursor:pointer;padding:.45em .8em;border-radius:8px;
  border:1px solid var(--line);background:var(--glass);color:var(--text-soft);
  font-family:var(--font);font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.4em;
}
#guest-bar button:hover{background:rgba(var(--accent-rgb),.2);color:var(--text)}
#guest-bar button.primary{
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);border-color:transparent;
}

@media (max-width:640px){
  /* En táctil no hay hover, así que el HUD queda visible; se
     coloca en vertical sobre el lateral derecho para no tapar el
     pie de la lámina ni los puntos de navegación. */
  #zoom-hud{
    left:auto;right:calc(var(--u) * 1.2);
    top:50%;bottom:auto;
    transform:translateY(-50%);
    flex-direction:column;gap:5px;
    padding:6px 4px;border-radius:999px;
    opacity:1;pointer-events:auto;
  }
  .zoom-lvl{
    min-width:0;width:100%;font-size:8.5px;letter-spacing:.02em;
    writing-mode:horizontal-tb;
  }
  .zoom-btn{width:32px;height:32px;font-size:12px}
  #guest-bar .gb-text{font-size:10.5px}
  .sh-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}