/* ============================================================
   STARGATE — MOTOR DE MAQUETACIÓN LIBRE v2.0 "FREEFORM SUPREME"
   ------------------------------------------------------------
   · Lienzo libre real: todo bloque de la lámina puede moverse
   · Overlay de selección con 8 manijas + manija de rotación
   · Guías de imán vivas
   · Inspector de elemento (relleno, borde, radio, opacidad…)
   Se carga DESPUÉS de css/editor.css.
   ============================================================ */

/* ============================================================
   1. INTERRUPTOR RÁPIDO DE SUBMODO
   ============================================================ */
.edit-submode-switch{
  position:fixed;top:10px;left:50%;transform:translate(-50%,46px);
  z-index:77;display:none;gap:4px;padding:4px;border-radius:999px;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--stroke);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
body.edit-mode .edit-submode-switch{display:flex}
.ess-btn{
  min-width:34px;height:30px;padding:0 .7em;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--text-dim);cursor:pointer;
  display:inline-flex;align-items:center;gap:.4em;justify-content:center;font-size:12px;
  font-family:var(--font);font-weight:800;letter-spacing:.04em;
  transition:background .16s ease,color .16s ease;
}
.ess-btn span{font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.ess-btn:hover{color:var(--text);background:rgba(var(--accent-rgb),.14)}
.ess-btn.is-on{background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--accent-ink)}

/* ============================================================
   2. LÁMINA EN MODO MAQUETAR
   ============================================================ */
body.layout-mode .slide.is-active{cursor:default}
body.layout-mode.lay-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.layout-mode.lay-dragging *{cursor:grabbing!important}

/* Todo el contenido de la lámina activa se vuelve arrastrable */
body.layout-mode .slide.is-active .slide-inner > *:not(.free-canvas){
  cursor:grab;
}
body.layout-mode:not(.lay-text-edit) .slide.is-active .slide-inner > *:not(.free-canvas):hover{
  outline:1.5px dashed rgba(var(--accent-rgb),.5);outline-offset:3px;
  border-radius:6px;
}
/* En modo maquetar el texto no se selecciona por accidente al arrastrar */
body.layout-mode:not(.lay-text-edit) .slide.is-active .slide-inner{
  user-select:none;-webkit-user-select:none;
}

/* ============================================================
   3. LIENZO LIBRE
   ------------------------------------------------------------
   position:absolute + inset:0 no aporta a scrollHeight, así que
   no interfiere con el motor de encaje fitSlide() de js/main.js.
   ============================================================ */
.free-canvas{
  position:absolute;inset:0;z-index:5;pointer-events:none;
}
.free-canvas.is-freed{z-index:4}

/* Cuando la lámina está liberada, el .slide-inner deja de apilar
   en columna: los bloques viven dentro del lienzo absoluto. */
.slide-inner.has-free{
  display:block;gap:0;height:100%;min-height:100%;
}
.slide-inner.has-free > *:not(.free-canvas){display:none}

.free-el{
  position:absolute;box-sizing:border-box;
  pointer-events:auto;
}
body.layout-mode .free-el{cursor:grab}
body:not(.layout-mode) .free-el{pointer-events:none}
body:not(.layout-mode) .free-el a,
body:not(.layout-mode) .free-el button{pointer-events:auto}

/* Los bloques liberados conservan intacta la apariencia original */
.free-el[data-lay-type="block"] > *{
  margin:0;width:100%;height:100%;
}
.free-el[data-lay-type="block"]{overflow:visible}

body.layout-mode .free-el:hover:not(.lay-selected){
  outline:1.5px dashed rgba(var(--accent-rgb),.5);outline-offset:3px;
}
.free-el[data-lay-lock="1"]{cursor:not-allowed!important}
body.layout-mode .free-el[data-lay-lock="1"]::after{
  content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;top:2px;right:3px;font-size:9px;
  color:var(--accent);opacity:.75;pointer-events:none;
}
.free-el.has-shadow{box-shadow:0 calc(var(--u,8px) * 1.4) calc(var(--u,8px) * 3.4) rgba(0,0,0,.42)}

/* --- Grupos: una sola pieza que contiene una composición --- */
.free-group{overflow:visible}
body.layout-mode .free-group{cursor:move}
/* Los hijos de un grupo no capturan el puntero salvo que el grupo
   esté seleccionado: así se arrastra el conjunto, no la pieza. */
body.layout-mode .free-group:not(.lay-selected) .free-el{pointer-events:none}
body.layout-mode .free-group.lay-selected{outline:1.5px dashed rgba(var(--accent-rgb),.55);outline-offset:2px}
body.layout-mode .free-group::before{
  content:'\f247';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;top:2px;left:3px;font-size:9px;
  color:var(--accent);opacity:.6;pointer-events:none;
}

/* --- Texto libre --- */
.free-text{
  display:flex;align-items:center;justify-content:center;
  padding:.25em .4em;color:var(--text);
  font-family:var(--font-head,var(--font));
  font-size:calc(var(--u) * var(--fs,2.4) * var(--t,1));
  font-weight:800;line-height:1.2;letter-spacing:-.01em;
  text-align:center;word-break:break-word;overflow:hidden;
  border-radius:var(--rad,0);
}
.free-text[contenteditable="true"]{
  outline:2px solid var(--accent);cursor:text;
  user-select:text;-webkit-user-select:text;
}

/* --- Imagen libre --- */
.free-img{overflow:hidden;border-radius:var(--rad,.9%)}
.free-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;border-radius:inherit;
}

/* --- Figuras libres --- */
.free-shape{border-radius:var(--rad,.9%)}
.free-shape > .shp{
  display:block;width:100%;height:100%;
  background:var(--fill,rgba(var(--accent-rgb),.18));
  border:calc(var(--u,8px) * var(--sw,.28)) solid var(--stroke,var(--accent));
  border-radius:inherit;
}
.free-shape[data-shape="ellipse"],
.free-shape[data-shape="ellipse"] > .shp{border-radius:50%}
.free-shape[data-shape="pill"],
.free-shape[data-shape="pill"] > .shp{border-radius:999px}
.free-shape[data-shape="line"] > .shp{
  border:0;background:var(--stroke,var(--accent));border-radius:999px;
}

/* Los bloques liberados con contenido editable */
.free-el [contenteditable="true"]{
  outline:2px solid var(--accent);cursor:text;
  user-select:text;-webkit-user-select:text;border-radius:6px;
}

/* ============================================================
   4. CAPA DE INTERFAZ (nunca se guarda en el HTML)
   ============================================================ */
.lay-ui{
  position:absolute;z-index:15;pointer-events:none;
}
.lay-guides{position:absolute;inset:0;pointer-events:none}
.lay-guide{position:absolute;background:var(--accent);opacity:.9}
.lay-guide.v{top:-8%;height:116%;width:1px;box-shadow:0 0 8px var(--accent)}
.lay-guide.h{left:-8%;width:116%;height:1px;box-shadow:0 0 8px var(--accent)}

.lay-overlay{
  position:absolute;display:none;pointer-events:auto;
  box-shadow:0 0 0 2px var(--accent);
  cursor:move;touch-action:none;
}
.lay-overlay.is-on{display:block}
.lay-overlay.is-locked{box-shadow:0 0 0 2px var(--amber);cursor:not-allowed}
.lay-overlay.is-locked .lay-handle,
.lay-overlay.is-locked .lay-rot{display:none}
.lay-overlay.is-editing{box-shadow:0 0 0 2px var(--accent);opacity:.4}
.lay-overlay.is-editing .lay-handle,
.lay-overlay.is-editing .lay-rot{display:none}

.lay-handle{
  position:absolute;width:14px;height:14px;border-radius:4px;
  background:var(--accent);border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  pointer-events:auto;touch-action:none;z-index:3;
}
.lay-h-nw{left:-7px;top:-7px;cursor:nwse-resize}
.lay-h-n{left:50%;top:-7px;margin-left:-7px;cursor:ns-resize}
.lay-h-ne{right:-7px;top:-7px;cursor:nesw-resize}
.lay-h-e{right:-7px;top:50%;margin-top:-7px;cursor:ew-resize}
.lay-h-se{right:-7px;bottom:-7px;cursor:nwse-resize}
.lay-h-s{left:50%;bottom:-7px;margin-left:-7px;cursor:ns-resize}
.lay-h-sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.lay-h-w{left:-7px;top:50%;margin-top:-7px;cursor:ew-resize}

.lay-rot{
  position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);border:2px solid #fff;
  display:grid;place-items:center;font-size:11px;
  cursor:grab;pointer-events:auto;touch-action:none;z-index:3;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.lay-rot::before{
  content:'';position:absolute;top:100%;left:50%;
  width:2px;height:18px;margin-left:-1px;background:var(--accent);
}
.lay-tag{
  position:absolute;left:0;bottom:calc(100% + 6px);
  padding:2px 7px;border-radius:5px;white-space:nowrap;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font);font-size:9px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;pointer-events:none;
}

/* ============================================================
   5. BARRA FLOTANTE DE ELEMENTO
   ============================================================ */
#element-bar{
  position:fixed;z-index:83;display:none;
  align-items:center;gap:4px;flex-wrap:wrap;
  max-width:min(560px,94vw);
  padding:6px 8px;border-radius:14px;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--stroke);
  box-shadow:0 22px 54px rgba(0,0,0,.55);
}
#element-bar.is-open{display:flex;animation:fadeIn .18s ease both}
#element-bar button{
  min-width:30px;height:30px;padding:0 7px;cursor:pointer;
  border-radius:8px;border:1px solid transparent;
  background:var(--glass);color:var(--text-soft);
  font-size:12px;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
#element-bar button:hover{background:rgba(var(--accent-rgb),.2);color:var(--text);transform:translateY(-1px)}
#element-bar button.is-on{background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--accent-ink)}
#element-bar .fb-sep{width:1px;height:20px;background:var(--line);margin:0 2px}

/* ============================================================
   6. PESTAÑA «MAQUETAR» DEL STUDIO
   ============================================================ */
.lay-mode-switch{display:flex;gap:8px}
.lay-mode-btn{
  flex:1 1 0;cursor:pointer;font-family:var(--font);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.75em .6em;border-radius:10px;border:1px solid var(--line);
  background:var(--glass);color:var(--text-soft);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  transition:background .18s ease,color .18s ease;
}
.lay-mode-btn.is-on{background:linear-gradient(130deg,var(--accent-2),var(--accent));color:var(--accent-ink);border-color:transparent}

.shape-grid{display:flex;flex-wrap:wrap;gap:8px}
.shape-btn{
  flex:1 1 calc(50% - 8px);cursor:pointer;font-family:var(--font);font-size:11px;font-weight:700;
  padding:.65em .5em;border-radius:10px;border:1px solid var(--line);
  background:var(--glass);color:var(--text-soft);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  transition:background .18s ease,color .18s ease,transform .16s ease;
}
.shape-btn:hover{background:rgba(var(--accent-rgb),.16);color:var(--text);transform:translateY(-2px)}

.align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.align-btn{
  cursor:pointer;padding:.6em;border-radius:10px;border:1px solid var(--line);
  background:var(--glass);color:var(--text-soft);font-size:13px;
  transition:background .18s ease,color .18s ease,opacity .18s ease;
}
.align-btn:hover:not(:disabled){background:rgba(var(--accent-rgb),.16);color:var(--text)}
.align-btn:disabled{opacity:.4;cursor:not-allowed}

.layer-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.layer-item{
  display:flex;align-items:center;gap:.6em;
  padding:.55em .7em;border-radius:9px;
  border:1px solid var(--line);background:var(--glass);color:var(--text-soft);
  cursor:pointer;font-size:11.5px;
  transition:background .18s ease,border-color .2s ease;
}
.layer-item:hover{background:rgba(var(--accent-rgb),.13)}
.layer-item.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.17);color:var(--text)}
.layer-item.is-locked{opacity:.68}
.layer-item .li-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-item .li-actions{display:flex;gap:3px;flex:0 0 auto}
.layer-item .li-actions button{
  width:22px;height:22px;border-radius:6px;border:1px solid var(--line);
  background:transparent;color:var(--text-dim);cursor:pointer;font-size:10px;
  display:grid;place-items:center;
}
.layer-item .li-actions button:hover{color:var(--text);background:rgba(var(--accent-rgb),.18)}

/* ============================================================
   6bis. MULTISELECCIÓN Y CUADRÍCULA MAGNÉTICA
   ============================================================ */
/* Elementos que acompañan al de referencia en el conjunto */
.free-el.lay-co-selected{
  outline:1.5px solid var(--accent);outline-offset:2px;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);
  border-radius:4px;
}

/* Retícula de fondo cuando la cuadrícula magnética está activa */
body.lay-grid-on.layout-mode .slide.is-active::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(var(--accent-rgb),.16) 0 1px,transparent 1px var(--lay-grid,5%)),
    repeating-linear-gradient(to bottom,rgba(var(--accent-rgb),.16) 0 1px,transparent 1px var(--lay-grid,5%));
}

/* ============================================================
   6ter. BARRA DE HISTORIAL (deshacer / rehacer)
   ============================================================ */
#hist-bar{
  position:fixed;z-index:78;display:none;
  top:10px;left:50%;transform:translate(calc(-50% + 132px),46px);
  align-items:center;gap:3px;padding:4px;border-radius:999px;
  background:linear-gradient(170deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--stroke);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
body.edit-mode #hist-bar{display:flex}
#hist-bar button{
  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,opacity .16s ease;
}
#hist-bar button:hover:not(:disabled){background:rgba(var(--accent-rgb),.2);color:var(--text)}
#hist-bar button:disabled{opacity:.32;cursor:not-allowed}
#hist-bar .hist-count{
  min-width:20px;text-align:center;
  font-family:var(--font);font-size:9.5px;font-weight:800;
  color:var(--text-dim);font-variant-numeric:tabular-nums;
}

/* ============================================================
   7. INSPECTOR DE ELEMENTO
   ============================================================ */
#insp{display:none;flex-direction:column;gap:12px}
#insp.is-on{display:flex;animation:fadeIn .2s ease both}
.insp-head{
  display:flex;align-items:center;gap:.55em;
  padding:.55em .75em;border-radius:10px;
  background:rgba(var(--accent-rgb),.14);border:1px solid var(--accent);
}
.insp-head i{color:var(--accent);font-size:11px}
.insp-head b{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.insp-head .insp-actions{margin-left:auto;display:flex;gap:4px}
.insp-head .insp-actions button{
  width:26px;height:26px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);color:var(--text-soft);font-size:11px;
}
.insp-head .insp-actions button:hover{background:rgba(var(--accent-rgb),.2);color:var(--text)}

.insp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.insp-field{display:flex;flex-direction:column;gap:3px}
.insp-field label{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.insp-field input{
  width:100%;background:var(--glass);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-family:var(--font);font-size:12px;padding:.5em .6em;outline:none;
  font-variant-numeric:tabular-nums;
}
.insp-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}

.insp-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.insp-row > .st-btn{flex:1 1 auto}
.insp-swatch{
  width:38px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--glass);cursor:pointer;padding:2px;flex:0 0 auto;
}
.insp-mini{
  min-width:32px;height:32px;padding:0 .6em;cursor:pointer;
  border-radius:9px;border:1px solid var(--line);
  background:var(--glass);color:var(--text-soft);font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  transition:background .16s ease,color .16s ease;
}
.insp-mini:hover{background:rgba(var(--accent-rgb),.18);color:var(--text)}
.insp-mini.is-on{background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--accent-ink);border-color:transparent}
.insp-mini.wide{flex:1 1 auto}

/* Bloques del inspector que solo aplican a ciertos tipos */
.insp-only-shape,.insp-only-text,.insp-only-image{display:none}
#insp[data-type="shape"] .insp-only-shape{display:flex}
#insp[data-type="text"] .insp-only-text{display:flex}
#insp[data-type="block"] .insp-only-text{display:flex}
#insp.has-image .insp-only-image{display:flex}

@media (max-width:640px){
  .edit-submode-switch{transform:translate(-50%,42px)}
  .lay-handle{width:18px;height:18px}
  .lay-h-nw{left:-9px;top:-9px}
  .lay-h-n{top:-9px;margin-left:-9px}
  .lay-h-ne{right:-9px;top:-9px}
  .lay-h-e{right:-9px;margin-top:-9px}
  .lay-h-se{right:-9px;bottom:-9px}
  .lay-h-s{bottom:-9px;margin-left:-9px}
  .lay-h-sw{left:-9px;bottom:-9px}
  .lay-h-w{left:-9px;margin-top:-9px}
  .lay-rot{width:30px;height:30px;top:-40px}
}