/* ============================================================
   STARGATE · MENÚ PRINCIPAL Y VISOR DE INVITADO
   ------------------------------------------------------------
   Nota: este archivo pinta capas que viven FUERA de #deck, así
   que puede usar backdrop-filter sin afectar la exportación
   con html2canvas.
   ============================================================ */

/* ============================================================
   1. MENÚ DE HERRAMIENTAS
   ============================================================ */
#main-menu{
  position:fixed;inset:0;z-index:9000;
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
#main-menu.is-open{display:flex}

#menu-backdrop{
  position:absolute;inset:0;
  background:rgba(3,7,18,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.mn-card{
  position:relative;z-index:1;
  width:min(920px,100%);max-height:88vh;
  display:flex;flex-direction:column;
  background:var(--panel,#0d1524);
  border:1px solid var(--line,rgba(255,255,255,.12));
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  overflow:hidden;
  animation:mnIn .18s ease-out;
}
@keyframes mnIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

.mn-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line,rgba(255,255,255,.12));
}
.mn-head h2{
  margin:0;font-size:14px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text,#e8eefc);
  display:flex;align-items:center;gap:.6em;
}
.mn-head h2 i{color:var(--accent,#38bdf8)}
.mn-close{
  width:30px;height:30px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:transparent;color:var(--text-dim,#93a4c3);font-size:13px;
}
.mn-close:hover{background:rgba(255,255,255,.08);color:var(--text,#e8eefc)}

.mn-searchwrap{
  display:flex;align-items:center;gap:.7em;
  padding:12px 18px;border-bottom:1px solid var(--line,rgba(255,255,255,.12));
  color:var(--text-dim,#93a4c3);
}
#menu-search{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--text,#e8eefc);font-size:14px;font-family:inherit;
}
#menu-search::placeholder{color:var(--text-faint,#64748b)}

#menu-body{overflow-y:auto;padding:6px 18px 18px;flex:1}

.mn-group{margin-top:16px}
.mn-gtitle{
  margin:0 0 8px;font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim,#93a4c3);
  display:flex;align-items:center;gap:.6em;
}
.mn-gtitle i{color:var(--accent,#38bdf8);font-size:11px}

.mn-grid{
  display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}

.mn-item{
  display:flex;align-items:center;gap:.75em;
  padding:.7em .8em;border-radius:10px;cursor:pointer;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:var(--glass,rgba(255,255,255,.04));
  color:var(--text-soft,#cbd5e1);
  font-family:inherit;font-size:12.5px;text-align:left;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.mn-item:hover{
  background:rgba(56,189,248,.14);
  border-color:var(--accent,#38bdf8);
  color:var(--text,#e8eefc);
}
.mn-item:active{transform:scale(.985)}
.mn-ic{
  flex:0 0 auto;width:16px;text-align:center;
  color:var(--accent,#38bdf8);font-size:12.5px;
}
.mn-name{flex:1 1 auto;line-height:1.3}
.mn-key{
  flex:0 0 auto;font-size:9.5px;padding:.2em .5em;
  border:1px solid var(--line,rgba(255,255,255,.12));border-radius:5px;
  color:var(--text-faint,#64748b);background:rgba(0,0,0,.25);
  font-family:var(--mono,ui-monospace,monospace);white-space:nowrap;
}

#menu-empty{
  margin:0;padding:22px 18px;text-align:center;
  color:var(--text-faint,#64748b);font-size:12.5px;
}

.mn-foot{
  display:flex;flex-wrap:wrap;gap:14px;
  padding:10px 18px;border-top:1px solid var(--line,rgba(255,255,255,.12));
  font-size:10.5px;color:var(--text-faint,#64748b);
}
.mn-foot kbd{
  font-size:9.5px;padding:.15em .4em;border-radius:4px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:rgba(0,0,0,.3);font-family:var(--mono,ui-monospace,monospace);
}

/* El botón del menú destaca sobre el resto del riel */
.tool.is-menu{
  background:rgba(56,189,248,.16)!important;
  border-color:var(--accent,#38bdf8)!important;
  color:var(--accent,#38bdf8)!important;
}

/* ============================================================
   2. VISOR DE INVITADO
   ============================================================ */

/* En modo visor se retira del alcance del invitado todo lo que
   modifica la presentación. No es seguridad: es supresión de la
   interfaz para que solo pueda mirar. */
body.viewer-mode #btn-editor,
body.viewer-mode #btn-import,
body.viewer-mode #btn-export,
body.viewer-mode #btn-comments,
body.viewer-mode #btn-presenter,
body.viewer-mode #btn-share,
body.viewer-mode #toolbar,
body.viewer-mode #side-info,
body.viewer-mode .oracle-trigger{
  display:none!important;
}
body.viewer-mode:not(.viewer-can-edit) #gb-fork{display:none!important}

/* Barra inferior del invitado */
#guest-viewbar{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:8000;display:none;align-items:center;gap:4px;
  padding:6px 8px;border-radius:999px;
  background:rgba(9,14,26,.9);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.viewer-mode #guest-viewbar{display:flex}
body.clean-mode #guest-viewbar{opacity:.15}
body.clean-mode #guest-viewbar:hover{opacity:1}

#guest-viewbar button{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;color:#cbd5e1;font-size:13px;
  transition:background .15s ease,color .15s ease;
}
#guest-viewbar button:hover:not(:disabled){
  background:rgba(56,189,248,.22);color:#fff;border-color:#38bdf8;
}
#guest-viewbar button:disabled{opacity:.3;cursor:not-allowed}

.gv-count,.gv-zoom{
  font-size:11px;font-weight:700;color:#e8eefc;
  font-family:var(--mono,ui-monospace,monospace);
  min-width:52px;text-align:center;letter-spacing:.04em;
}
.gv-zoom{min-width:42px;color:#93a4c3}
.gv-sep{width:1px;height:20px;background:rgba(255,255,255,.14);margin:0 3px}

/* Portada de arranque */
#gv-start{
  position:fixed;inset:0;z-index:9500;
  display:grid;place-items:center;padding:24px;
  background:rgba(3,7,18,.94);
}
#gv-start[hidden]{display:none}
.gvs-card{
  max-width:420px;text-align:center;
  color:var(--text,#e8eefc);
}
.gvs-icon{
  font-size:30px;color:var(--accent,#38bdf8);
  margin-bottom:16px;display:block;
}
.gvs-card h2{
  margin:0 0 8px;font-size:20px;font-weight:800;line-height:1.25;
}
#gv-start-sub{margin:0 0 22px;font-size:13px;color:var(--text-dim,#93a4c3)}
.gvs-acts{display:flex;flex-direction:column;gap:9px}
.gvs-primary,.gvs-ghost{
  padding:.85em 1.2em;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;
  border:1px solid var(--accent,#38bdf8);
}
.gvs-primary{background:var(--accent,#38bdf8);color:#04121f}
.gvs-primary:hover{filter:brightness(1.1)}
.gvs-ghost{background:transparent;color:var(--text-soft,#cbd5e1);border-color:rgba(255,255,255,.16)}
.gvs-ghost:hover{background:rgba(255,255,255,.07)}
.gvs-note{
  margin:18px 0 0;font-size:11px;color:var(--text-faint,#64748b);line-height:1.5;
}

/* ============================================================
   3. MÓVIL
   ============================================================ */
@media (max-width:640px){
  #main-menu{padding:0}
  .mn-card{width:100%;height:100%;max-height:100%;border-radius:0;border:0}
  .mn-grid{grid-template-columns:1fr}
  .mn-key{display:none}
  .mn-foot{display:none}

  #guest-viewbar{
    bottom:10px;gap:2px;padding:5px 6px;
    max-width:calc(100vw - 16px);
  }
  #guest-viewbar button{width:32px;height:32px;font-size:12px}
  .gv-count{min-width:44px;font-size:10px}
  .gv-zoom{min-width:34px;font-size:9.5px}
  /* En pantalla estrecha el giro manual sobra: ya es automático */
  #gv-rotate{display:none}
}

/* El HUD de zoom del autor estorba al invitado: tiene el suyo */
body.viewer-mode #zoom-hud{display:none!important}