/* ============================================================
   STARGATE — PRESENTAR · BARRA DE HERRAMIENTAS · EXPORTACIÓN
   ------------------------------------------------------------
   1. Barra de marcaje estilo pizarra (badges de atajo, candado)
   2. Desplegable «Presentar»
   3. Panel de exportación rediseñado
   4. Modal «Enviar a Google Slides»
   Fuera de #deck: puede usar backdrop-filter sin afectar html2canvas.
   ============================================================ */

/* ============================================================
   1. BARRA DE MARCAJE
   ============================================================ */
#toolbar{position:relative}
#toolbar .tool{position:relative;overflow:visible}

/* Badge con la tecla del atajo (como en Excalidraw) */
#toolbar .tool[data-key]::after{
  content:attr(data-key);
  position:absolute;right:-1px;bottom:-1px;
  min-width:11px;height:11px;padding:0 2px;border-radius:4px;
  font:800 7.5px/11px var(--font);letter-spacing:0;text-align:center;
  color:var(--text-faint);background:var(--glass-2);
  border:1px solid var(--line-soft);
  pointer-events:none;
}
#toolbar .tool[data-key][aria-pressed="true"]::after{
  color:var(--accent-ink);background:rgba(255,255,255,.55);border-color:transparent;
}
@media (hover:none) and (pointer:coarse){ #toolbar .tool[data-key]::after{display:none} }

/* Con 25 controles, el riel vertical se compacta en pantallas bajas
   para no recortarse (escritorio 1280×800, portátiles). */
@media (min-width:821px) and (max-height:900px){
  #toolbar{gap:.42vh;padding:.7vh .6vh}
  #toolbar .tool,#toolbar .swatch{width:clamp(22px,3.15vh,34px);height:clamp(22px,3.15vh,34px);font-size:clamp(9px,1.3vh,13px)}
  #toolbar .tool-sep{margin:.25vh .2vh}
}

/* Candado */
#btn-sticky{color:var(--text-faint)}
#btn-sticky[aria-pressed="true"]{
  background:rgba(var(--accent-rgb),.22);color:var(--accent);border-color:rgba(var(--accent-rgb),.5);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25) inset;
}

/* Mano: cursor de agarre sobre el escenario */
body.hand-mode #deck-area,body.hand-mode #deck{cursor:grab}
body.hand-mode.is-panning #deck-area,body.hand-mode.is-panning #deck{cursor:grabbing}

/* En horizontal, si sobra ancho, el riel se convierte en barra
   flotante centrada arriba (la lectura de la imagen de referencia). */
@media (min-width:1100px) and (min-aspect-ratio:16/10){
  body[data-ratio="16-9"]:not(.edit-mode):not(.viewer-mode) #stage{
    padding-top:calc(48px + clamp(8px,1.6vh,18px));
  }
  body[data-ratio="16-9"]:not(.edit-mode):not(.viewer-mode) #toolbar{
    position:fixed;top:10px;left:50%;transform:translateX(-50%);
    flex-direction:row;padding:5px 8px;gap:5px;
    max-width:min(96vw,980px);overflow-x:auto;overflow-y:hidden;
    z-index:40;
  }
  body[data-ratio="16-9"]:not(.edit-mode):not(.viewer-mode) #toolbar .tool-sep{width:1px;height:20px;margin:0 3px;align-self:center}
  body[data-ratio="16-9"]:not(.edit-mode):not(.viewer-mode).clean-ui #toolbar{transform:translate(-50%,-18px)}
}

/* ============================================================
   2. BOTÓN Y DESPLEGABLE «PRESENTAR»
   ============================================================ */
#btn-present{
  background:linear-gradient(150deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  border-color:transparent;box-shadow:0 0 18px rgba(var(--accent-rgb),.35);
}
#btn-present:hover{transform:translateY(-2px) scale(1.04);color:var(--accent-ink)}
#btn-present[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.28),0 0 18px rgba(var(--accent-rgb),.35)}

.present-menu{
  position:fixed;z-index:8600;
  min-width:280px;max-width:min(92vw,380px);
  padding:6px;border-radius:14px;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--stroke);box-shadow:0 24px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;gap:2px;
  animation:pmIn .18s ease both;
}
.present-menu[hidden]{display:none}
@keyframes pmIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.pm-item{
  display:grid;grid-template-columns:22px 1fr;align-items:center;gap:10px;
  width:100%;text-align:left;cursor:pointer;
  padding:9px 10px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--text);font-family:var(--font);
  transition:background .15s ease,border-color .15s ease;
}
.pm-item:hover,.pm-item:focus-visible{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.28);outline:none}
.pm-item i{color:var(--accent);font-size:14px;text-align:center}
.pm-item span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-item b{font-size:13px;font-weight:700;letter-spacing:.01em}
.pm-item small{font-size:11px;color:var(--text-dim);line-height:1.35}
.pm-sep{height:1px;background:var(--line);margin:3px 6px}

/* ============================================================
   3. PANEL DE EXPORTACIÓN
   ============================================================ */
.ex-card{gap:.85em}
.ex-grid[hidden],#ex-range[hidden]{display:none!important}
.ex-label{font-size:12.5px;font-weight:700;color:var(--text-soft);letter-spacing:.02em;margin-top:.25em}
.ex-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.ex-fmt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:112px;padding:14px 8px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--glass);color:var(--text-dim);
  font-family:var(--font);
  transition:transform .16s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.ex-fmt:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.5);color:var(--text)}
.ex-fmt.is-on{
  border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset,0 8px 26px rgba(var(--accent-rgb),.18);
}
.ex-fmt b{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.ex-fmt-ico{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  font-size:22px;color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.ico-pdf{background:linear-gradient(160deg,#ff6b6b,#d7263d)}
.ico-ppt{background:linear-gradient(160deg,#ff8a4c,#c43e1c)}
.ico-gs{background:linear-gradient(160deg,#ffd54f,#f4b400);color:#5a3b00}
.ico-png{background:linear-gradient(160deg,#5eead4,#0e9f8a)}
.ico-txt{background:linear-gradient(160deg,#a5b4fc,#4f46e5)}
.ex-fmt-hint{font-size:11.5px;color:var(--text-dim);line-height:1.4;margin-top:-.2em}

.ex-range{display:flex;flex-direction:column;gap:8px}
.ex-radio{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-soft);cursor:pointer}
.ex-radio input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex:0 0 auto}
.ex-radio input:disabled + span{opacity:.45}
.ex-radio em{font-style:normal;color:var(--text-dim)}
.ex-custom{display:flex;align-items:center;gap:10px;padding-left:26px}
.ex-custom[hidden]{display:none}
.ex-custom input{
  flex:1 1 auto;min-width:0;background:var(--glass);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-family:var(--font);font-size:13px;padding:.5em .7em;outline:none;
}
.ex-custom input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.ex-custom-n{font-size:11.5px;color:var(--text-dim);white-space:nowrap}
.ex-custom-n.is-bad{color:var(--crimson)}

.ex-adv{border-top:1px solid var(--line);padding-top:.6em}
.ex-adv summary{cursor:pointer;font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:.5em;list-style:none;user-select:none}
.ex-adv summary::-webkit-details-marker{display:none}
.ex-adv summary::after{content:'▾';margin-left:auto;transition:transform .2s ease}
.ex-adv[open] summary::after{transform:rotate(180deg)}
.ex-adv .ex-opts{border:none;padding:.7em 0 0}

.ex-go{
  display:flex;align-items:center;justify-content:center;gap:.6em;
  width:100%;padding:.9em 1.2em;border-radius:12px;cursor:pointer;
  border:none;background:linear-gradient(150deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  font-family:var(--font);font-size:14px;font-weight:800;letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(var(--accent-rgb),.3);
  transition:transform .16s ease,box-shadow .2s ease,opacity .2s ease;
}
.ex-go:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--accent-rgb),.4)}
.ex-go:disabled{opacity:.55;cursor:progress;transform:none}

/* ============================================================
   4. MODAL GOOGLE SLIDES
   ============================================================ */
.gs-modal{
  position:fixed;inset:0;z-index:8700;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(var(--page-rgb),.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.gs-modal.is-open{display:flex;animation:fadeIn .25s ease both}
.gs-card{
  width:min(540px,100%);max-height:92vh;overflow-y:auto;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--stroke);border-radius:22px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  padding:clamp(16px,2.6vh,28px);display:flex;flex-direction:column;gap:1em;
}
.gs-card h2{font-size:clamp(15px,2.2vh,19px);font-weight:900;letter-spacing:.02em;color:var(--text);display:flex;align-items:center;gap:.6em}
.gs-card h2 .ex-fmt-ico{width:34px;height:34px;font-size:17px;border-radius:9px}
.gs-card .close{
  margin-left:auto;cursor:pointer;border-radius:999px;border:1px solid var(--line);
  background:var(--glass);color:var(--text);width:34px;height:34px;display:grid;place-items:center;font-size:14px;
}
.gs-sub{font-size:12.5px;color:var(--text-dim);line-height:1.5}
.gs-steps{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0;margin:0}
.gs-steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.gs-steps .n{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--accent-rgb),.16);color:var(--accent);font-weight:800;font-size:12.5px;
}
.gs-steps li > div{display:flex;flex-direction:column;gap:5px}
.gs-steps b{font-size:13.5px;color:var(--text)}
.gs-steps small{font-size:11.5px;color:var(--text-dim);line-height:1.45}
.gs-steps small em{font-style:normal;color:var(--text)}
.gs-btn{
  display:inline-flex;align-items:center;gap:.55em;align-self:flex-start;margin-top:4px;
  padding:.6em 1em;border-radius:10px;cursor:pointer;text-decoration:none;
  border:none;background:linear-gradient(150deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  font-family:var(--font);font-size:12.5px;font-weight:800;
}
.gs-btn:disabled{opacity:.55;cursor:progress}
.gs-btn-alt{background:var(--glass-2);color:var(--text);border:1px solid var(--line)}
.gs-btn-alt.is-hot{background:linear-gradient(150deg,#ffd54f,#f4b400);color:#5a3b00;border-color:transparent;box-shadow:0 0 22px rgba(244,180,0,.35)}

/* ============================================================
   5. TRANSICIONES ENTRE LÁMINAS (body[data-transition])
   ------------------------------------------------------------
   La base (rise) vive en style.css. Aquí se redefinen el estado
   de reposo, el activo y el saliente para cada variante. Solo
   transform/opacity: html2canvas nunca ve estos estados porque la
   exportación compone en su propio escenario.
   ============================================================ */
body[data-transition="fade"] .slide{transform:none;transition:opacity .55s ease,visibility .55s}
body[data-transition="fade"] .slide.leaving{transform:none}

body[data-transition="slide"] .slide{transform:translate3d(9%,0,0);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),visibility .45s}
body[data-transition="slide"] .slide.is-active{transform:none}
body[data-transition="slide"] .slide.leaving{transform:translate3d(-9%,0,0)}

body[data-transition="zoom"] .slide{transform:scale(.82);transition:opacity .5s ease,transform .65s cubic-bezier(.16,1,.3,1),visibility .5s}
body[data-transition="zoom"] .slide.is-active{transform:none}
body[data-transition="zoom"] .slide.leaving{transform:scale(1.12)}

body[data-transition="flip"] #slides-viewport{perspective:1800px}
body[data-transition="flip"] .slide{transform:rotateY(-70deg) translate3d(6%,0,0);transform-origin:left center;backface-visibility:hidden;transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility .45s}
body[data-transition="flip"] .slide.is-active{transform:none}
body[data-transition="flip"] .slide.leaving{transform:rotateY(60deg) translate3d(-6%,0,0);transform-origin:right center}

body[data-transition="drop"] .slide{transform:translate3d(0,-14%,0);transition:opacity .4s ease,transform .7s cubic-bezier(.34,1.56,.64,1),visibility .4s}
body[data-transition="drop"] .slide.is-active{transform:none}
body[data-transition="drop"] .slide.leaving{transform:translate3d(0,10%,0);transition-timing-function:ease-in}

body[data-transition="none"] .slide{transform:none;transition:none}
body[data-transition="none"] .slide.leaving{transform:none;opacity:0}
body[data-transition="none"] .slide.is-active .slide-inner > *,
body[data-transition="none"] .slide.is-active .bullets > li,
body[data-transition="none"] .slide.is-active .kpi,
body[data-transition="none"] .slide.is-active .mod,
body[data-transition="none"] .slide.is-active .timeline .tl,
body[data-transition="none"] .slide.is-active .tag,
body[data-transition="none"] .slide.is-active .bar-row{animation:none}

/* Selector de transición en el Studio (pestaña Diseño) */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px}
.tr-opt{
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  padding:8px 6px;border-radius:10px;border:1px solid var(--line);background:var(--glass);
  color:var(--text-dim);font-family:var(--font);font-size:10.5px;font-weight:700;letter-spacing:.02em;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.tr-opt:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--text)}
.tr-opt.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent)}
.tr-opt .tr-demo{
  width:34px;height:22px;border-radius:4px;position:relative;overflow:hidden;
  background:var(--glass-2);border:1px solid var(--line);
}
.tr-opt .tr-demo::after{
  content:'';position:absolute;inset:4px;border-radius:3px;
  background:linear-gradient(150deg,var(--accent-2),var(--accent));
  animation:trDemoRise 1.8s ease-in-out infinite;
}
.tr-opt[data-tr="fade"]  .tr-demo::after{animation-name:trDemoFade}
.tr-opt[data-tr="slide"] .tr-demo::after{animation-name:trDemoSlide}
.tr-opt[data-tr="zoom"]  .tr-demo::after{animation-name:trDemoZoom}
.tr-opt[data-tr="flip"]  .tr-demo::after{animation-name:trDemoFlip}
.tr-opt[data-tr="drop"]  .tr-demo::after{animation-name:trDemoDrop}
.tr-opt[data-tr="none"]  .tr-demo::after{animation:none}
@keyframes trDemoRise{0%,15%{opacity:0;transform:translateY(60%)}45%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-40%)}}
@keyframes trDemoFade{0%,15%{opacity:0}45%,70%{opacity:1}100%{opacity:0}}
@keyframes trDemoSlide{0%,15%{opacity:0;transform:translateX(70%)}45%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-70%)}}
@keyframes trDemoZoom{0%,15%{opacity:0;transform:scale(.4)}45%,70%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.4)}}
@keyframes trDemoFlip{0%,15%{opacity:0;transform:rotateY(-80deg)}45%,70%{opacity:1;transform:none}100%{opacity:0;transform:rotateY(80deg)}}
@keyframes trDemoDrop{0%,15%{opacity:0;transform:translateY(-90%)}45%{transform:translateY(8%)}55%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(60%)}}

/* Enlaces del riel hacia las otras herramientas */
a.tool{text-decoration:none}
#btn-project{color:#a8a5ff}
#btn-project:hover{background:rgba(105,101,219,.25);color:#fff}
body.viewer-mode #btn-project,body.viewer-mode #btn-home{display:none!important}

/* Modo visor: nada de esto llega al invitado */
body.viewer-mode #btn-present,body.viewer-mode #btn-sticky{display:none!important}

@media (max-width:640px){
  .ex-formats{grid-template-columns:repeat(3,1fr);gap:8px}
  .ex-fmt{min-height:96px;padding:10px 6px}
  .ex-fmt-ico{width:38px;height:38px;font-size:19px}
  .ex-fmt b{font-size:11.5px}
  .present-menu{left:8px!important;right:8px!important;max-width:none}
}