/* ============================================================
   STARGATE · GRABAR, PUNTOS DE RESTAURACIÓN, ARSENAL Y MODO SALA
   ------------------------------------------------------------
   Todo vive dentro del panel del Studio, fuera de #deck.
   ============================================================ */

/* ============================================================
   1. ESTADO DE GRABADO
   ============================================================ */
.sv-state-row{
  display:flex;align-items:center;gap:.6em;
  margin-bottom:9px;font-size:11.5px;
}
.sv-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--text-faint,#64748b);
}
.sv-dot.is-clean{background:#34d399;box-shadow:0 0 7px rgba(52,211,153,.65)}
.sv-dot.is-dirty{background:var(--amber,#fbbf24);box-shadow:0 0 7px rgba(251,191,36,.65)}
.sv-state-txt{flex:1 1 auto;color:var(--text-soft,#cbd5e1);font-weight:600}
.sv-depth-tag{
  font-size:10px;color:var(--text-faint,#64748b);
  font-family:var(--mono,ui-monospace,monospace);
}
.sv-depth-tag b{color:var(--accent,#38bdf8)}

/* ============================================================
   2. PUNTOS DE RESTAURACIÓN
   ============================================================ */
.sv-points{
  display:flex;flex-direction:column;gap:6px;
  max-height:230px;overflow-y:auto;margin-bottom:9px;
}
.sv-empty{
  margin:0;padding:12px 10px;text-align:center;
  font-size:11px;color:var(--text-faint,#64748b);line-height:1.5;
  border:1px dashed var(--line,rgba(255,255,255,.12));border-radius:9px;
}
.sv-point{
  display:flex;align-items:center;gap:.7em;
  padding:.6em .7em;border-radius:9px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:var(--glass,rgba(255,255,255,.04));
}
.sv-pt-info{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.sv-pt-name{
  font-size:11.5px;font-weight:700;color:var(--text,#e8eefc);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sv-pt-meta{font-size:9.5px;color:var(--text-faint,#64748b)}
.sv-pt-acts{display:flex;gap:3px;flex:0 0 auto}
.sv-pt-acts button{
  width:24px;height:24px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line,rgba(255,255,255,.12));border-radius:6px;
  background:transparent;color:var(--text-dim,#93a4c3);font-size:10px;
}
.sv-pt-acts button:hover{background:rgba(56,189,248,.2);color:var(--text,#e8eefc)}
.sv-pt-acts button.is-danger:hover{
  background:rgba(255,90,90,.2);color:#ff9d9d;border-color:rgba(255,90,90,.6);
}

/* ============================================================
   3. ARSENAL DE COMPONENTES
   ============================================================ */
.cp-count{
  float:right;font-size:9.5px;font-weight:600;
  color:var(--text-faint,#64748b);letter-spacing:0;text-transform:none;
}
.cp-tag-input{max-width:110px}
.cp-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:250px;overflow-y:auto;margin:8px 0;
}
.cp-empty{
  margin:0;padding:12px 10px;text-align:center;
  font-size:11px;color:var(--text-faint,#64748b);line-height:1.5;
  border:1px dashed var(--line,rgba(255,255,255,.12));border-radius:9px;
}
.cp-item{
  display:flex;align-items:center;gap:.7em;
  padding:.6em .7em;border-radius:9px;cursor:pointer;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:var(--glass,rgba(255,255,255,.04));
  transition:background .15s ease,border-color .15s ease;
}
.cp-item:hover{background:rgba(56,189,248,.12);border-color:var(--accent,#38bdf8)}
.cp-info{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.cp-name{
  font-size:11.5px;font-weight:700;color:var(--text,#e8eefc);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cp-meta{font-size:9.5px;color:var(--text-faint,#64748b)}
.cp-tag{
  align-self:flex-start;margin-top:2px;
  font-size:8.5px;padding:.15em .5em;border-radius:4px;
  background:rgba(56,189,248,.18);color:var(--accent,#38bdf8);
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
.cp-acts{display:flex;gap:3px;flex:0 0 auto}
.cp-acts button{
  width:24px;height:24px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line,rgba(255,255,255,.12));border-radius:6px;
  background:transparent;color:var(--text-dim,#93a4c3);font-size:10px;
}
.cp-acts button:hover{background:rgba(56,189,248,.2);color:var(--text,#e8eefc)}
.cp-acts button.is-danger:hover{
  background:rgba(255,90,90,.2);color:#ff9d9d;border-color:rgba(255,90,90,.6);
}

/* ============================================================
   4. MODO SALA (SIN CONEXIÓN)
   ============================================================ */
.off-state-row{
  display:flex;align-items:center;gap:.6em;
  margin-bottom:8px;font-size:11.5px;
}
.off-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.off-dot.is-off{background:var(--text-faint,#64748b)}
.off-dot.is-idle{background:var(--amber,#fbbf24);box-shadow:0 0 7px rgba(251,191,36,.6)}
.off-dot.is-on{background:#34d399;box-shadow:0 0 7px rgba(52,211,153,.65)}
.off-state-txt{color:var(--text-soft,#cbd5e1);font-weight:600}

.off-track{
  height:4px;border-radius:999px;overflow:hidden;margin-bottom:8px;
  background:rgba(255,255,255,.08);
}
.off-bar{
  display:block;height:100%;width:0;border-radius:999px;
  background:var(--accent,#38bdf8);transition:width .3s ease;
}
.off-warn{
  border-left:2px solid var(--amber,#fbbf24);
  padding-left:.7em;color:var(--text-dim,#93a4c3);
}
.off-warn i{color:var(--amber,#fbbf24)}

/* Aviso global de pérdida de red */
body.is-offline #btn-menu::after{
  content:'';position:absolute;top:3px;right:3px;
  width:6px;height:6px;border-radius:50%;
  background:var(--amber,#fbbf24);
}
.tool{position:relative}