/* =========================
   THEME / TOKENS  (PointZER)
   ========================= */
:root{
  --brand:#5806B5;      /* primario */
  --brand2:#8B5CF6;     /* gradiente/acento */
  --accent:#A78BFA;

  --bg:#121115;
  --panel:#1a1622cc;
  --panel-solid:#1a1622;
  --panel-top:#ffffff08;
  --panel-border:#ffffff22;
  --panel-div:#ffffff19;

  --text:#EEF0F6;
  --muted:#A7A3B5;
  --ring:#5806B580;

  --input-bg:color-mix(in oklab, #000 10%, #1a1622 90%);
  --input-border:rgba(255,255,255,.14);

  --guide-blue:#6E59F7; /* guías */
  --dot-green:#c6ff00;

  --thumb-bg:#0006;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;

  --shadow-card:0 20px 60px #000c;
}
:root.light{
  --bg:#F7F6FB;
  --panel:#ffffffdd;
  --panel-solid:#fff;
  --panel-top:#0f172a08;
  --panel-border:#0f172a22;
  --panel-div:#0f172a19;

  --text:#0E0C14;
  --muted:#5D5A6A;
  --ring:#5806B566;

  --input-bg:color-mix(in oklab, #fff 94%, #000 6%);
  --input-border:rgba(0,0,0,.15);
  --thumb-bg:#fff;
  --guide-blue:#5B4AF2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 95% -10%,#5f2bb433 0,transparent 60%),
    radial-gradient(900px 600px at -10% 10%,#3a225e33 0,transparent 55%),
    var(--bg);
}
.wrap{
  max-width:1600px;
  margin:0 auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* =========================
   HEADER
   ========================= */
.headerLine{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.titleCol{ min-width:200px; }
h1{
  margin:0;
  font-size:clamp(20px,2vw,28px);
  line-height:1.2;
  font-weight:600;
}
.sub{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}
.actionsCol{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}
.themeToggle{
  border-radius:var(--radius-md);
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
  background:var(--panel-top);
  border:1px solid var(--panel-border);
  color:var(--text);
}
.themeToggle:focus{outline:2px solid var(--ring);outline-offset:2px}

/* =========================
   DROPZONE
   ========================= */
.dropWrap{
  border-radius:var(--radius-lg);
  background-color:var(--panel-top);
  border:2px dashed var(--brand);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.dropWrap.dragOver{
  background-color:color-mix(in oklab, var(--brand) 10%, transparent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 30%, transparent);
}
.dropMainText{
  color:var(--brand);
  font-weight:600;
  font-size:clamp(18px,2vw,26px);
}
.dropMainText b{
  display:inline-block;
  padding:0 .4em;
  border-radius:6px;
  background:color-mix(in oklab, var(--brand) 18%, transparent);
  border:1px solid color-mix(in oklab, var(--brand) 55%, transparent);
  font-size:.8em;
}
.dropRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1.4;
  color:var(--text);
}
.inlineKey{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0000;
  border:1px solid var(--brand2);
  border-radius:4px;
  padding:2px 4px;
  color:var(--brand2);
  font-weight:600;
  font-size:.8em;
  line-height:1.2em;
}
.pickBtn{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  border-radius:var(--radius-md);
  border:0;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  padding:8px 12px;
  line-height:1.2;
}
.pickBtn:focus{outline:2px solid var(--ring);outline-offset:2px}
.dzPreview{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
}
.thumb{
  width:48px;
  height:48px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--panel-border);
  background:var(--thumb-bg);
}
.metaName{
  color:var(--text);
  font-weight:600;
}

/* =========================
   LAYOUT MAIN
   ========================= */
.mainFlex{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
}
.controlsPanel{
  flex:0 0 360px;
  max-width:360px;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);
  padding:16px;
  display:grid;
  grid-template-columns:1fr;
  row-gap:12px;
  color:var(--text);
}
@media(max-width:1050px){
  .controlsPanel{ flex:1 1 100%; max-width:100%; }
}
.viewerPanel{
  flex:1 1 600px;
  min-width:480px;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:480px;
  color:var(--text);
}
@media(max-width:1050px){
  .viewerPanel{ flex:1 1 100%; min-width:100%; }
}

/* =========================
   FORM CONTROLS
   ========================= */
.groupRow{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  column-gap:12px;
  row-gap:10px;
  font-size:14px;
}
.groupRow label{
  display:flex;
  flex-direction:column;
  font-size:13px;
  color:var(--text);
  gap:4px;
}
.groupRow .lbl-inline{
  flex-direction:row;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.smallNote{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}
input[type="number"],
input[type="text"],
select{
  appearance:none;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  color:var(--text);
  font-size:14px;
  line-height:1.3;
  padding:8px 10px;
  min-width:64px;
  outline:none;
}
input[type="number"]:focus,
input[type="text"]:focus,
select:focus{
  box-shadow:0 0 0 3px var(--ring);
}
input[readonly]{ opacity:.6; }
input[type="checkbox"]{
  width:16px;
  height:16px;
  border-radius:4px;
  cursor:pointer;
}
.colorPickerRow{ display:flex; flex-direction:column; font-size:13px; }
.colorPickerRow .swatchRow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#colorSwatch{
  width:32px; height:32px;
  border-radius:6px;
  border:1px solid var(--panel-border);
  background:var(--brand);
}
#dotColor{
  width:32px; height:32px; padding:0;
  border-radius:6px;
  border:1px solid var(--panel-border);
  background:#0000;
  cursor:pointer;
}
.inlineUpload{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; }
.miniBox{
  display:grid;
  grid-template-rows:auto auto;
  justify-items:center;
  text-align:center;
  font-size:11px;
  line-height:1.3;
  color:var(--muted);
  width:60px;
}
.svgMini{
  width:54px; height:54px;
  border-radius:10px;
  background:var(--panel-top);
  border:1px dashed var(--panel-border);
  display:grid; place-items:center;
  overflow:hidden;
}
.miniLabel{
  max-width:56px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.badgeNPF{
  height:28px; padding:0 8px;
  border-radius:999px;
  background:#ffffff15;
  border:1px solid #ffffff30;
  color:var(--text);
  font-size:12px; line-height:26px;
  font-weight:600;
  white-space:nowrap;
  display:inline-block;
}
.offset-on .guideSizeAny{ display:flex; }

.offsetOnly, .scaleOnly { display:none; }

/* cuando #rowGuideMode tiene .offset-on => solo se ven los de offset */
.offset-on .offsetOnly { display:flex; }
.offset-on .scaleOnly  { display:none; }

/* cuando #rowGuideMode tiene .scale-on => solo se ven los de escala (XY) */
.scale-on  .scaleOnly  { display:flex; }
.scale-on  .offsetOnly { display:none; }

/* show/hide rows per main mode */
.modeRow{ display:none; }
.modeRow.active{ display:flex; flex-wrap:wrap; gap:10px; }

/* sub-head para secciones en Ondas */
.subHead{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin-top:4px;
  flex-basis:100%;
}

/* Radial vs Uniforme (controlado por clase que añade JS a #rowNPF) */
.radialOnly{ display:none; }
.uniformOnly{ display:none; }
.radial-on .radialOnly{ display:flex; }
.uniform-on .uniformOnly{ display:flex; }

/* footer info row in controls */
.ctrlFooterRow{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
  font-size:13px;
  border-top:1px solid var(--panel-div);
  padding-top:12px;
}
.btnMain{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  border-radius:var(--radius-md);
  border:0;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  padding:8px 12px;
  line-height:1.2;
}
.btnSecondary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  border-radius:var(--radius-md);
  background:var(--input-bg);
  border:1px solid var(--input-border);
  color:var(--text);
  padding:8px 12px;
  line-height:1.2;
}
.btnMain:focus,.btnSecondary:focus{ outline:2px solid var(--ring); outline-offset:2px }

/* zoom slider inline */
.zoomRow{
  flex:1;
  min-width:200px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--text);
}
.zoomRow input[type="range"]{ flex:1; }

/* =========================
   VIEWERS
   ========================= */
.viewTop{
  flex:1;
  min-height:300px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--panel-border);
  border-bottom:1px solid var(--panel-border);
}
.viewer{
  background:var(--panel-solid);
  position:relative;
  overflow:auto;
  border:0;
  display:flex;
  flex-direction:column;
  min-height:320px;
  color:var(--text);
}
.viewer h3{
  margin:0;
  font-size:13px;
  font-weight:500;
  background:var(--panel-top);
  color:var(--muted);
  padding:6px 8px;
  position:sticky;
  top:0;
  z-index:2;
  border-bottom:1px solid var(--panel-div);
}
.stageOuter{
  position:relative;
  flex:1;
  background:#fff;
  color:#000;
  min-width:800px; /* grande para que el scroll exista */
  min-height:800px;
  display:grid;
  place-items:start;
}
.stageInner{
  position:relative;
  width:1100px;
  height:1100px;
  transform-origin:0 0; /* escalamos con transform: scale() */
}
.stageInner canvas,
.stageInner svg{
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
}
.viewFoot{
  font-size:12px;
  line-height:1.4;
  color:var(--muted);
  padding:6px 8px;
  background:var(--panel-top);
  border-top:1px solid var(--panel-div);
}

/* =========================
   FULLSCREEN LOADING
   ========================= */
.fullScreenLoading{
  position:fixed;
  inset:0;
  background:#0009;
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  color:#fff;
  font-family:inherit;
}
.fullScreenLoading .box{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  min-width:240px;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.spinner{
  width:40px;
  height:40px;
  border-radius:50%;
  border:4px solid #fff3;
  border-top-color:var(--brand);
  margin:0 auto 12px;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loadingMsg{font-size:14px;margin-bottom:12px;color:#fff;font-weight:500}
.progressWrap{ margin:0 0 16px; font-size:13px; color:#fff; }
.progressBar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:#fff2;
  overflow:hidden;
}
.progressFill{
  height:100%;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  width:0%;
}
.progressPct{ margin-top:6px; font-weight:600; color:#fff; }
.btnCancel{
  border:0;
  border-radius:var(--radius-md);
  background:#fff2;
  color:#fff;
  font-weight:600;
  padding:8px 12px;
  cursor:pointer;
}
.btnCancel:hover{background:#fff3;}
.btnCancel:focus{outline:2px solid var(--ring);outline-offset:2px}

/* =========================
   MISC
   ========================= */
.statsRow{
  font-size:13px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  row-gap:4px;
  column-gap:12px;
  justify-content:space-between;
  padding-top:8px;
}
hr.slim{
  border:0;
  border-top:1px solid var(--panel-div);
  margin:8px 0;
}