/* ============================================================
   STARGATE — NUBE Y COMENTARIOS DE REVISIÓN
   ------------------------------------------------------------
   Enlaces cortos, marcadores de comentario anclados sobre la
   lámina y panel de revisión.

   NOTA: los marcadores viven dentro de .slide, por lo que aquí
   NO se usan color-mix() ni backdrop-filter, para no alterar la
   fidelidad de la exportación con html2canvas.
   ============================================================ */

/* ============================================================
   1. CAPA DE COMENTARIOS SOBRE LA LÁMINA
   ============================================================ */
.cmt-layer{
  position:absolute;inset:0;z-index:14;pointer-events:none;
}
body.cmt-on .cmt-layer{pointer-events:none}

.cmt-pin{
  position:absolute;transform:translate(-50%,-50%);
  width:calc(var(--u) * 3.1);height:calc(var(--u) * 3.1);
  min-width:22px;min-height:22px;
  border-radius:50% 50% 50% 4px;
  cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);
  border:1.5px solid rgba(255,255,255,.72);
  box-shadow:0 4px 14px rgba(0,0,0,.42);
  font-family:var(--font);font-size:calc(var(--u) * 1.25);
  font-weight:900;line-height:1;
  transition:transform .16s ease;
}
.cmt-pin:hover{transform:translate(-50%,-50%) scale(1.14)}
.cmt-pin.is-done{
  background:rgba(120,130,150,.62);
  border-color:rgba(255,255,255,.4);
}

/* Cursor de colocación */
body.cmt-placing #deck,
body.cmt-placing .slide{cursor:crosshair!important}

/* ---------- Burbuja del comentario ---------- */
.cmt-bubble{
  position:absolute;z-index:16;pointer-events:auto;
  width:min(46%,290px);
  padding:calc(var(--u) * 1.3);
  border-radius:calc(var(--u) * 1.2);
  background:rgba(8,13,26,.97);
  border:1px solid rgba(var(--accent-rgb),.42);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  font-family:var(--font);
}
body[data-theme="day"] .cmt-bubble{
  background:rgba(255,255,255,.985);
  border-color:rgba(10,25,55,.2);
}
.cmt-bubble .cb-head{
  display:flex;align-items:center;gap:6px;margin-bottom:.45em;
}
.cmt-bubble .cb-head b{
  font-size:calc(var(--u) * 1.4);font-weight:800;color:var(--accent);
}
.cmt-bubble .cb-done{
  padding:1px 6px;border-radius:5px;
  border:1px solid var(--line);
  font-size:calc(var(--u) * 1.05);color:var(--text-dim);
}
.cmt-bubble p{
  margin:0 0 .7em;
  font-size:calc(var(--u) * 1.42);line-height:1.5;
  color:var(--text-soft);word-break:break-word;
}
.cmt-bubble .cb-acts{display:flex;flex-wrap:wrap;gap:5px}
.cmt-bubble .cb-acts button{
  padding:.4em .65em;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);
  color:var(--text-soft);
  font-family:var(--font);font-size:calc(var(--u) * 1.16);font-weight:700;
}
.cmt-bubble .cb-acts button:hover{
  border-color:var(--accent);color:var(--text);
}
.cmt-bubble .cb-acts button.danger:hover{
  background:rgba(230,57,70,.24);border-color:rgba(230,57,70,.6);color:#fff;
}

/* Los marcadores no deben salir en la exportación */
#export-stage .cmt-layer{display:none}

/* ============================================================
   2. PANEL DE NUBE EN EL STUDIO
   ============================================================ */
.cl-url-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:.5em 0}
.cl-url-row input{
  flex:1 1 160px;min-width:0;
  background:var(--glass);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-family:var(--font);font-size:12px;
  padding:.62em .7em;outline:none;
}
.cl-url-row input:focus{border-color:var(--accent)}

.cl-code-field{
  width:100%;text-align:center;letter-spacing:.28em;
  font-weight:900;font-size:19px!important;color:var(--accent)!important;
  text-transform:uppercase;
}

#cl-result{
  margin:.55em 0 0;padding:.7em .8em;border-radius:9px;
  background:rgba(var(--accent-rgb),.1);
  border:1px solid var(--line);
  font-size:11.5px;line-height:1.6;color:var(--text-dim);
}
#cl-result b{color:var(--accent)}

.cl-list{display:flex;flex-direction:column;gap:5px;margin-top:.5em}
.cl-item{
  display:flex;align-items:center;gap:8px;
  padding:.55em .65em;border-radius:9px;
  border:1px solid var(--line);background:var(--glass);
}
.cl-item b{
  flex:0 0 auto;font-family:var(--font);font-size:11.5px;
  font-weight:900;letter-spacing:.1em;color:var(--accent);
}
.cl-item span{
  flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cl-item button{
  flex:0 0 auto;padding:.35em .6em;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:transparent;
  color:var(--text-soft);font-family:var(--font);font-size:10.5px;font-weight:700;
}
.cl-item button:hover{border-color:var(--accent);color:var(--text)}

/* ---------- Listado de comentarios ---------- */
.cmt-list{
  display:flex;flex-direction:column;gap:4px;
  max-height:280px;overflow-y:auto;margin-top:.5em;
}
.cmt-item{
  display:flex;align-items:flex-start;gap:8px;
  padding:.6em .65em;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);
  transition:border-color .16s ease;
}
.cmt-item:hover{border-color:var(--accent)}
.cmt-item.is-done{opacity:.5}
.cmt-item .ci-slide{
  flex:0 0 auto;padding:2px 6px;border-radius:6px;
  background:rgba(var(--accent-rgb),.16);
  font-size:10px;font-weight:900;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.cmt-item .ci-mid{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;
}
.cmt-item .ci-mid b{font-size:11px;font-weight:800;color:var(--text-soft)}
.cmt-item .ci-mid span{
  font-size:11px;line-height:1.5;color:var(--text-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* Aviso de privacidad: debe verse, no esconderse */
.cl-warn{
  margin:.6em 0 0;padding:.75em .8em;border-radius:9px;
  background:rgba(250,204,21,.1);
  border:1px solid rgba(250,204,21,.32);
  font-size:11px;line-height:1.6;color:var(--text-dim);
}
.cl-warn b{color:#FACC15}

@media (max-width:640px){
  .cmt-bubble{width:min(74%,260px)}
  .cmt-pin{min-width:26px;min-height:26px}
}