/* ============================================================
   skin-creator.css
   Estilos del módulo "Skin Creator" (editor de skins clásicas de
   Minecraft Bedrock, estilo Blockbench: lienzo 2D + vista previa 3D
   en vivo). Igual que obj-skin-studio.css, todo va escopado bajo
   #skinCreatorStudio para no chocar con el resto del sitio.
   ============================================================ */
#skinCreatorStudio {
  --bg:#0b0b0f;
  --bg-elevated:#18181f;
  --bg-elevated-2:#1f1f28;
  --border:#27272f;
  --text:#f4f4f5;
  --text-dim:#a1a1aa;
  --accent:#4ade80;
  --accent-dim:#14532d;
  --accent-strong:#22c55e;
  --danger:#ef4444;
  --warn:#f59e0b;
  --radius:10px;
  --radius-sm:6px;
}
[data-palette="green"] #skinCreatorStudio {
  --accent:#4ade80; --accent-dim:#14532d; --accent-strong:#16a34a;
}
[data-palette="minecraft"] #skinCreatorStudio {
  --bg:#1a160f; --bg-elevated:#2b2116; --bg-elevated-2:#332819;
  --border:#5a4a30; --text:#f1ead9; --text-dim:#b8ab8c;
  --accent:#8bc34a; --accent-dim:#3f6b2a; --accent-strong:#5b8f3b;
  --warn:#d9a521; --danger:#b02e26; --radius:3px; --radius-sm:2px;
}
[data-palette="custom"] #skinCreatorStudio {
  --accent:var(--purple); --accent-dim:var(--purple-dark); --accent-strong:var(--primary);
}
#skinCreatorStudio * { box-sizing:border-box; }
#skinCreatorStudio {
  position:relative;
  height:880px;
  max-height:88vh;
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  overflow-x:auto; overflow-y:hidden; user-select:none;
  border-radius:12px;
  border:1px solid var(--border);
  display:flex; flex-direction:row;
  min-width:900px;
}
@media (min-width:951px){ #skinCreatorStudio { min-width:900px; } }
#skinCreatorStudio button,
#skinCreatorStudio input,
#skinCreatorStudio select { font-family:inherit; }

/* ---------- Panel izquierdo: herramientas ---------- */
#skinCreatorStudio #scTools {
  width:270px; min-width:270px;
  background:var(--bg-elevated);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  padding:14px;
  gap:0;
}
#skinCreatorStudio .scPanelHeader { margin-bottom:4px; }
#skinCreatorStudio .scPanelHeader h1 { font-size:15px; font-weight:800; margin:0; }
#skinCreatorStudio .scSection {
  padding:14px 0; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}
#skinCreatorStudio .scSection:last-child { border-bottom:none; }
#skinCreatorStudio .scLabel {
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); margin-top:4px;
}
#skinCreatorStudio .scLabel:first-child { margin-top:0; }
#skinCreatorStudio .scHint { font-size:11px; color:var(--text-dim); margin:0; line-height:1.4; }
#skinCreatorStudio .scHintCenter { text-align:center; }

#skinCreatorStudio .scSegRow { display:flex; gap:4px; flex-wrap:wrap; }
#skinCreatorStudio .scSegBtn {
  flex:1 1 auto; min-width:0;
  padding:7px 8px; font-size:11.5px; font-weight:600;
  background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text-dim);
  border-radius:var(--radius-sm); cursor:pointer; transition:.15s;
  white-space:nowrap;
}
#skinCreatorStudio .scSegBtn:hover { color:var(--text); }
#skinCreatorStudio .scSegBtn.active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }

#skinCreatorStudio .scCheckRow {
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-dim); cursor:pointer;
}
#skinCreatorStudio .scCheckRow input[type="checkbox"] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; }
#skinCreatorStudio .scCheckRowInline { color:var(--text); }

#skinCreatorStudio .scToolGrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#skinCreatorStudio .scToolBtn {
  display:flex; align-items:center; gap:7px; padding:9px 8px;
  background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text-dim);
  border-radius:var(--radius-sm); cursor:pointer; transition:.15s ease;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
#skinCreatorStudio .scToolBtn svg { width:16px; height:16px; flex-shrink:0; }
#skinCreatorStudio .scToolBtn span { overflow:hidden; text-overflow:ellipsis; }
#skinCreatorStudio .scToolBtn:hover { color:var(--text); border-color:var(--accent); }
#skinCreatorStudio .scToolBtn.active { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }

#skinCreatorStudio .scSwatchRow { display:flex; flex-wrap:wrap; gap:6px; }
#skinCreatorStudio .scSwatch {
  width:22px; height:22px; border-radius:6px; border:1px solid rgba(255,255,255,.15);
  cursor:pointer; padding:0;
}
#skinCreatorStudio .scSwatch.active { outline:2px solid var(--accent); outline-offset:1px; }

#skinCreatorStudio .scFileBtn {
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; padding:9px 10px; font-size:12px; font-weight:600;
  background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); cursor:pointer;
}
#skinCreatorStudio .scFileBtn:hover { border-color:var(--accent); }
#skinCreatorStudio .scFileBtnPrimary { background:var(--accent-strong); color:#0b0f0c; border-color:var(--accent-strong); font-weight:700; }
#skinCreatorStudio .scFileBtn + .scFileBtn { margin-top:8px; }

/* ---------- Centro: lienzo 2D ---------- */
#skinCreatorStudio #scCanvasWrap {
  flex-grow:1; min-width:0;
  display:flex; flex-direction:column;
  background:radial-gradient(ellipse at center, #201d26 0%, #0f1011 75%);
  position:relative;
}
#skinCreatorStudio #scCanvasToolbar {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--border);
  background:rgba(18,18,23,.7);
}
#skinCreatorStudio .scViewBtn {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; cursor:pointer; font-size:16px; line-height:1;
}
#skinCreatorStudio #scZoomLabel { font-size:11.5px; color:var(--text-dim); min-width:44px; text-align:center; }
#skinCreatorStudio .scToolbarSep { width:1px; height:18px; background:var(--border); margin:0 4px; }
#skinCreatorStudio .scModeRow { display:flex; gap:4px; }
#skinCreatorStudio .scModeBtn {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid var(--border); background:var(--bg-elevated-2);
  color:var(--text-dim); cursor:pointer;
}
#skinCreatorStudio .scModeBtn svg { width:14px; height:14px; }
#skinCreatorStudio .scModeBtn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

#skinCreatorStudio #scCanvasScroll {
  flex-grow:1; overflow:hidden; touch-action:none; display:flex; align-items:center; justify-content:center; padding:24px;
}
#skinCreatorStudio #scCanvasStage {
  position:relative; flex:0 0 auto; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.5);
  will-change:transform;
}
#skinCreatorStudio #scPixelCanvas,
#skinCreatorStudio #scGridCanvas {
  position:absolute; top:0; left:0;
  image-rendering:pixelated; image-rendering:-moz-crisp-edges; image-rendering:crisp-edges;
}
#skinCreatorStudio #scPixelCanvas { touch-action:none; cursor:crosshair; }
#skinCreatorStudio #scGridCanvas { pointer-events:none; }
#skinCreatorStudio #scCanvasStatus {
  margin:0; padding:6px 14px; font-size:11px; color:var(--text-dim);
  border-top:1px solid var(--border); background:rgba(18,18,23,.7);
}

/* ---------- Panel derecho: vista previa 3D ---------- */
#skinCreatorStudio #scPreview3d {
  width:300px; min-width:300px;
  background:var(--bg-elevated);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:14px;
}
#skinCreatorStudio #scViewport3d {
  flex-grow:1; border-radius:var(--radius-sm); overflow:hidden; margin-top:10px;
  background:radial-gradient(ellipse at center, #201d26 0%, #0f1011 75%);
  min-height:180px;
}
#skinCreatorStudio #scViewport3d canvas { display:block; width:100%; height:100%; }

/* ---------- Móvil: paneles laterales como bottom sheets ---------- */
#skinCreatorStudio #scMobileBackdrop {
  display:none; position:absolute; inset:0; z-index:60; background:rgba(6,9,13,.6);
}
#skinCreatorStudio #scMobileBackdrop.active { display:block; }
#skinCreatorStudio #scMobileTabBar {
  display:none; position:absolute; left:0; right:0; bottom:0; z-index:45;
  background:rgba(15,12,8,.95); backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
}
#skinCreatorStudio .scMobileTabBtn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px 4px 7px; background:none; border:none; color:var(--text-dim); cursor:pointer;
}
#skinCreatorStudio .scMobileTabBtn svg { width:19px; height:19px; }
#skinCreatorStudio .scMobileTabBtn span { font-size:10px; font-weight:600; }
#skinCreatorStudio .scMobileTabBtn.active { color:var(--accent); }
#skinCreatorStudio .scMobileClose {
  display:none; position:absolute; top:10px; right:10px; z-index:2;
  width:30px; height:30px; align-items:center; justify-content:center;
  background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:8px;
  color:var(--text); cursor:pointer; font-size:16px; line-height:1;
}
#skinCreatorStudio .scMobileSheetHandle { display:none; }

@media (max-width:950px) and (min-width:761px){
  #skinCreatorStudio { min-width:0; }
  #skinCreatorStudio #scTools { width:220px; min-width:220px; }
  #skinCreatorStudio #scPreview3d { width:240px; min-width:240px; }
}

@media (max-width:760px){
  #skinCreatorStudio { height:88vh; max-height:88vh; min-width:0; overflow-x:hidden; }
  #skinCreatorStudio { position:relative; }
  #skinCreatorStudio #scTools,
  #skinCreatorStudio #scPreview3d {
    position:absolute; left:0; right:0; top:auto; bottom:0; z-index:65;
    width:100%; max-width:none; min-width:0;
    height:72vh; max-height:72vh;
    border-radius:16px 16px 0 0;
    overflow-x:hidden;
    transition:transform .28s cubic-bezier(.32,.72,0,1); box-shadow:0 -8px 40px rgba(0,0,0,.55);
    transform:translateY(100%);
  }
  #skinCreatorStudio #scTools.open,
  #skinCreatorStudio #scPreview3d.open { transform:translateY(0); }
  #skinCreatorStudio .scMobileSheetHandle {
    display:block; position:absolute; top:0; left:0; right:0; height:22px; cursor:grab; touch-action:none;
  }
  #skinCreatorStudio .scMobileSheetHandle::before {
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:2px; background:var(--border);
  }
  #skinCreatorStudio .scPanelHeader { padding-top:16px; }
  #skinCreatorStudio #scMobileTabBar { display:flex; }
  #skinCreatorStudio .scMobileClose { display:flex; }
  #skinCreatorStudio #scCanvasWrap { padding-bottom:52px; }
}