/* ============================================================
   obj-skin-studio.css
   Estilos del módulo "OBJ -> Skin 1.8" (antes obj-skin-studio.html,
   una página aparte cargada por iframe). Ahora vive embebido dentro
   de index.html, así que TODAS las reglas de este archivo están
   escopadas bajo el contenedor #objSkinStudio para no chocar con
   style.css ni con el resto de la página (mismos nombres de clase
   genéricos como .btn, .active, .lang-switch, etc. se usan en ambos
   lados). No edites una regla sin mantener ese prefijo.
   ============================================================ */
#objSkinStudio {
  --bg:#0b0b0f;
  --bg-elevated:#18181f;
  --bg-elevated-2:#1f1f28;
  --border:#27272f;
  --text:#f4f4f5;
  --text-dim:#a1a1aa;
  --accent:#a855f7;
  --accent-dim:#3a2560;
  --accent-strong:#7c3aed;
  --danger:#ef4444;
  --danger-dim:#4a1f1f;
  --warn:#f59e0b;
  --radius:10px;
  --radius-sm:6px;
}

/* El estudio tenía su propia paleta fija, sin enterarse del selector de
   tema del sitio (data-palette en <html>). La conectamos aquí para que
   Verde/Minecraft también se apliquen dentro de esta herramienta. */
[data-palette="green"] #objSkinStudio {
  --accent:#4ade80;
  --accent-dim:#14532d;
  --accent-strong:#16a34a;
}
[data-palette="minecraft"] #objSkinStudio {
  --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;
}
/* El tema personalizado define --primary/--purple/--accent de forma
   dinámica (vía JS) en <html>; aquí solo los reenviamos a las variables
   propias del estudio en vez de fijar literales. */
[data-palette="custom"] #objSkinStudio {
  --accent:var(--purple);
  --accent-dim:var(--purple-dark);
  --accent-strong:var(--primary);
}
#objSkinStudio * {box-sizing:border-box;}
#objSkinStudio {
  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);
}
#objSkinStudio button,
#objSkinStudio input,
#objSkinStudio select { font-family:inherit; }
/* min-width evita que #app se aplaste por debajo de lo que sidebar+inspector
   realmente necesitan -- si la ventana es más angosta que eso, en vez de
   recortar/tapar el panel de Huesos (inaccesible salvo en pantalla completa),
   ahora aparece scroll horizontal para poder llegar a él igual. */
#objSkinStudio #app { display:flex; flex-direction:row; height:100%; width:100%; }
/* Salvavidas solo para el nivel de escritorio "completo" (>950px, donde
   sidebar+inspector usan su ancho fijo más grande de 270+290px): si la
   ventana es más angosta que lo que esos paneles + un viewport usable
   realmente necesitan, en vez de recortar/tapar el panel de Huesos
   (inaccesible salvo en pantalla completa) aparece scroll horizontal. */
@media (min-width:951px){
  #objSkinStudio #app { min-width:780px; }
}

/* ---------- botones (estilo MBSM: "3D press" con box-shadow) ---------- */
#objSkinStudio .btn {
  border:1px solid var(--border);
  background:var(--bg-elevated-2);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:7px 12px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  transition:background .15s, border-color .15s, transform .05s;
}
#objSkinStudio .btn:hover { background:#2e3238; border-color:#4a4f57; }
#objSkinStudio .btn:active { transform:scale(0.97); }
#objSkinStudio .btn.small { padding:4px 8px; font-size:11.5px; }
#objSkinStudio .btn.wide { width:100%; margin-top:8px; }
#objSkinStudio .btnPrimary {
  background:var(--accent); border:1px solid var(--accent-strong);
  color:#101210; font-weight:800;
  box-shadow:0 4px 0 var(--accent-strong);
}
#objSkinStudio .btnPrimary:hover { transform:translateY(1px); box-shadow:0 3px 0 var(--accent-strong); }
#objSkinStudio .btnPrimary:active { transform:translateY(3px); box-shadow:0 1px 0 var(--accent-strong); }
#objSkinStudio .btnGhost { background:transparent; }
#objSkinStudio .btnGhost:hover { border-color:var(--accent); color:var(--accent); }
#objSkinStudio .btnDanger {
  background:transparent; border-color:var(--danger-dim); color:#ff8a80;
  width:100%; margin-top:10px;
}
#objSkinStudio .btnDanger:hover { background:rgba(255,90,90,.12); }

/* ---------- toggle segmentado (Fancy / Compacto) ---------- */
#objSkinStudio .segmentToggle {
  display:flex;
  background:var(--bg-elevated-2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
  gap:2px;
  margin:2px 0 12px;
}
#objSkinStudio .segmentBtn {
  flex:1;
  border:none;
  background:transparent;
  color:var(--text-dim);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
#objSkinStudio .segmentBtn:hover:not(.active) { background:#2e3238; color:var(--text); }
#objSkinStudio .segmentBtn.active {
  background:linear-gradient(180deg, var(--accent), var(--accent-strong));
  color:#fff;
  font-weight:600;
}

/* ---------- Sidebar ---------- */
#objSkinStudio #sidebar {
  width:270px; min-width:270px;
  background:var(--bg-elevated);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  /* Antes: overflow:hidden. En viewports muy bajos (p. ej. con el teclado
     táctil abierto en el móvil, o una ventana muy corta) el contenido de
     las secciones de abajo (lista de proyectos, archivos, partes) no cabe
     en 100vh. Con overflow:hidden y flex-shrink por defecto en todos los
     hijos, el navegador APLASTABA cada sección por debajo de su propio
     contenido en vez de dejar hacer scroll, así que el texto se recortaba
     a mitad (justo lo que se veía en el bug: la segunda línea del
     proyecto y "PARTES DEL MODELO" cortadas). Con overflow-y:auto aquí,
     si no cabe todo, el sidebar completo se puede desplazar en vez de
     recortar contenido. */
  overflow-y:auto; overflow-x:hidden;
}
#objSkinStudio #sidebarHeader { padding:14px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
#objSkinStudio .sidebarHeaderTop { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
#objSkinStudio .sidebarHeaderTop h1 { margin:0; }
#objSkinStudio .lang-switch {
  display:flex; gap:3px; background:#17191d; border:1px solid var(--border);
  border-radius:9px; padding:3px; flex-shrink:0;
}
#objSkinStudio .lang-btn {
  border:none; background:transparent; color:var(--text-dim); font-weight:800;
  font-size:10.5px; letter-spacing:.4px; padding:4px 8px; border-radius:6px; cursor:pointer; transition:.15s;
}
#objSkinStudio .lang-btn:hover { color:#fff; }
#objSkinStudio .lang-btn.active { background:var(--accent); color:#101210; box-shadow:0 2px 0 var(--accent-strong); }
#objSkinStudio #sidebarHeader h1 {
  font-size:14px; margin:0 0 10px; font-weight:600; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
#objSkinStudio .badgeVer {
  font-size:10px; font-weight:700; background:var(--accent-dim); color:var(--accent);
  padding:2px 6px; border-radius:20px;
}

#objSkinStudio #projectList {
  list-style:none; margin:0; padding:8px; overflow-y:auto; max-height:38%;
  border-bottom:1px solid var(--border);
  /* flex-shrink:0 evita que el flexbox del sidebar aplaste esta lista por
     debajo de su propio contenido (lo que cortaba la segunda línea de
     cada tarjeta de proyecto en viewports bajos); si no cabe todo, ahora
     hace scroll el #sidebar completo en vez de recortar texto aquí. */
  flex-shrink:0;
}
#objSkinStudio .projectItem {
  display:flex; align-items:center; gap:9px; padding:7px; border-radius:var(--radius-sm);
  cursor:pointer; margin-bottom:4px; border:1px solid transparent;
}
#objSkinStudio .projectItem:hover { background:var(--bg-elevated-2); }
#objSkinStudio .projectItem.selected { background:rgba(79,195,247,.12); border-color:var(--accent-dim); }
#objSkinStudio .projThumb {
  width:32px; height:32px; border-radius:5px;
  background:#0a0a0b repeating-conic-gradient(#201f24 0% 25%, #0a0a0b 0% 50%) 0/10px 10px;
  background-size:8px 8px; overflow:hidden; flex-shrink:0; border:1px solid var(--border);
}
#objSkinStudio .projThumb img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
#objSkinStudio .projInfo { flex-grow:1; min-width:0; }
#objSkinStudio .projName { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#objSkinStudio .projMeta { font-size:10px; color:var(--text-dim); }
#objSkinStudio .projDelete { opacity:0; color:var(--text-dim); font-size:14px; padding:2px 5px; border-radius:4px; }
#objSkinStudio .projectItem:hover .projDelete { opacity:1; }
#objSkinStudio .projDelete:hover { color:#ff8a80; background:rgba(239,83,80,.12); }

#objSkinStudio #partsSection {
  display:flex; flex-direction:column; flex-grow:1; padding:10px 0 0;
  /* Antes tenía overflow:hidden con un min-height chico: si el contenido
     de esta sección (encabezado + buscador + asignación rápida + lista)
     no cabía en el alto que le tocaba dentro del sidebar, se recortaba
     en vez de dejar hacer scroll -- esto se puso peor al agregar la caja
     de "Asignación rápida por nombre", que ocupa más espacio. #sidebar
     ya hace scroll (overflow-y:auto) cuando su contenido no cabe, así
     que basta con dejar que esta sección crezca a su alto natural en
     vez de recortarla ella misma. */
  min-height:150px;
}
#objSkinStudio .sectionHeader { display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
#objSkinStudio .sectionHeader h3 { font-size:12px; margin:0; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
#objSkinStudio #partsSearch {
  box-sizing:border-box;   /* sin esto el buscador se salía ~18px por la derecha */
  margin:8px 14px; width:calc(100% - 28px);
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-sm); padding:6px 8px; font-size:12px; outline:none;
}
#objSkinStudio #partsList { list-style:none; margin:0; padding:4px 8px 12px; overflow-y:auto; flex-grow:1; min-height:140px; }

/* ---------- Asignación rápida por coincidencia de nombre ---------- */
#objSkinStudio .partsBulkAssign {
  margin:0 14px 8px; padding:8px; border:1px dashed var(--border);
  border-radius:var(--radius-sm); background:var(--bg-elevated-2);
}
#objSkinStudio .partsBulkAssignCount {
  display:block; font-size:10.5px; color:var(--text-dim); margin-bottom:6px; line-height:1.3;
}
#objSkinStudio .partsBulkAssignRow { display:flex; flex-wrap:wrap; gap:6px; }
#objSkinStudio #bulkAssignBoneSelect {
  flex:1 1 auto; min-width:0; background:var(--bg); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius-sm); padding:6px 6px; font-size:11.5px;
}
#objSkinStudio #btnBulkAssign { flex:0 0 auto; white-space:nowrap; }
#objSkinStudio #btnBulkAssign:disabled { opacity:.45; cursor:not-allowed; }
#objSkinStudio .partItem {
  display:flex; align-items:center; gap:8px; padding:6px 6px; border-radius:var(--radius-sm);
  margin-bottom:3px; cursor:pointer;
}
#objSkinStudio .partItem:hover { background:var(--bg-elevated-2); }
#objSkinStudio .partItem.highlighted { background:rgba(79,195,247,.14); }
#objSkinStudio .partSwatch { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
#objSkinStudio .partName { flex-grow:1; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#objSkinStudio .partBone {
  font-size:10px; color:var(--text-dim); background:var(--bg-elevated-2);
  border:1px solid var(--border); padding:1px 6px; border-radius:10px; flex-shrink:0;
}
#objSkinStudio .partBone.unassigned { color:var(--warn); border-color:#5a4620; }

/* ---------- Viewport ---------- */
#objSkinStudio #viewport { position:relative; flex-grow:1; background:radial-gradient(ellipse at center, #201d26 0%, #0f1011 75%); }
#objSkinStudio #canvas { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#objSkinStudio #canvas:active { cursor:grabbing; }

#objSkinStudio #emptyState {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px; color:var(--text-dim); gap:2px;
}
#objSkinStudio #emptyState h2 { color:var(--text); font-size:16px; margin:6px 0; }
#objSkinStudio #emptyState p { font-size:12.5px; max-width:380px; margin:2px 0; }
#objSkinStudio #emptyState .emptyHint { font-size:11px; opacity:.75; margin:6px 0 14px; }
#objSkinStudio #emptyState code { background:var(--bg-elevated-2); padding:1px 5px; border-radius:4px; font-size:11px; }
#objSkinStudio .emptyIcon { font-size:36px; }

#objSkinStudio #toolbar {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px;
  background:rgba(18,24,34,.9); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:10px; padding:5px;
}
#objSkinStudio .toolBtn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text); border-radius:6px; cursor:pointer; font-size:14px;
}
#objSkinStudio .toolBtn:hover { background:var(--bg-elevated-2); }
#objSkinStudio .toolBtn.toggle.active { background:var(--accent-dim); color:var(--accent); }
#objSkinStudio .toolSep { width:1px; height:18px; background:var(--border); margin:0 3px; }

#objSkinStudio #creditLink {
  position:absolute; bottom:12px; right:14px; font-size:10.5px;
  color:var(--text-dim); text-decoration:none; opacity:.7;
  transition:opacity .15s, color .15s;
}
#objSkinStudio #creditLink:hover { opacity:1; color:var(--accent); text-decoration:underline; }

#objSkinStudio #viewportStatus {
  position:absolute; bottom:12px; left:14px; font-size:11px; color:var(--text-dim);
  background:rgba(18,24,34,.85); padding:4px 9px; border-radius:6px; border:1px solid var(--border);
  pointer-events:none; max-width:60%;
}

/* ---------- Inspector ---------- */
#objSkinStudio #inspector { width:290px; min-width:290px; background:var(--bg-elevated); border-left:1px solid var(--border); display:flex; flex-direction:column; }
#objSkinStudio #inspectorTabs { display:flex; border-bottom:1px solid var(--border); }
#objSkinStudio .tabBtn {
  flex:1; padding:10px 6px; background:transparent; border:none; color:var(--text-dim);
  cursor:pointer; font-size:12px; border-bottom:2px solid transparent;
}
#objSkinStudio .tabBtn:hover { color:var(--text); }
#objSkinStudio .tabBtn.active { color:var(--accent); border-bottom-color:var(--accent); }
#objSkinStudio .tabPanel { display:none; padding:16px 14px; overflow-y:auto; overflow-x:hidden; flex-grow:1; }
#objSkinStudio .tabPanel.active { display:block; }
#objSkinStudio #bonesEmpty,
#objSkinStudio #exportEmpty { color:var(--text-dim); font-size:12.5px; text-align:center; margin-top:30px; }

#objSkinStudio #boneTree,
#objSkinStudio #boneTree ul { list-style:none; margin:0; padding-left:14px; }
#objSkinStudio #boneTree { padding-left:0; }
#objSkinStudio .boneNode {
  padding:4px 6px; border-radius:5px; font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:6px; white-space:nowrap;
}
#objSkinStudio .boneNode:hover { background:var(--bg-elevated-2); }
#objSkinStudio .boneNode.selected { background:rgba(79,195,247,.14); color:var(--accent); }
#objSkinStudio .boneMeshCount { color:var(--text-dim); font-size:10px; }
#objSkinStudio .boneParentTag { color:var(--text-dim); font-size:9.5px; opacity:.75; }

#objSkinStudio #boneBreadcrumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:2px;
  font-size:11px; color:var(--text-dim); margin:2px 0 12px;
}
#objSkinStudio #boneBreadcrumb .crumb {
  cursor:pointer; padding:1px 3px; border-radius:4px;
}
#objSkinStudio #boneBreadcrumb .crumb:hover { background:var(--bg-elevated-2); color:var(--accent); }
#objSkinStudio #boneBreadcrumb .crumb.current { color:var(--text); font-weight:600; cursor:default; }
#objSkinStudio #boneBreadcrumb .crumb.current:hover { background:transparent; }
#objSkinStudio #boneBreadcrumb .crumbSep { color:var(--border); }

#objSkinStudio #boneDetail { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
#objSkinStudio .panelTitle { font-size:12.5px; margin:0 0 8px; font-weight:600; }
#objSkinStudio .panelTitle.small { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.3px; margin-top:14px; }
#objSkinStudio .infoLabel { display:block; font-size:11px; color:var(--text-dim); margin-bottom:4px; margin-top:8px; }
#objSkinStudio #boneNameInput,
#objSkinStudio #boneParentSelect,
#objSkinStudio #exportNameInput,
#objSkinStudio #exportIdentifierInput,
#objSkinStudio #partsSearch {
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:7px 8px; border-radius:var(--radius-sm); font-size:12.5px;
}
#objSkinStudio #exportIdentifierInput { color:var(--text-dim); }
#objSkinStudio .vec3Row { display:flex; gap:6px; }
#objSkinStudio .vec3Row input {
  width:33%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:6px 6px; border-radius:var(--radius-sm); font-size:12px;
}
#objSkinStudio #boneAssignedParts { list-style:none; margin:6px 0 0; padding:0; max-height:120px; overflow-y:auto; }
#objSkinStudio #boneAssignedParts li { font-size:11.5px; padding:3px 0; color:var(--text-dim); }

#objSkinStudio .infoGrid { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border); padding-top:12px; margin-top:14px; }
#objSkinStudio .infoGrid > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; font-size:12px; }
#objSkinStudio .infoKey { color:var(--text-dim); }
#objSkinStudio .infoVal { font-weight:600; text-align:right; }

#objSkinStudio #exportWarnings { margin:12px 0; }
#objSkinStudio .warnBox {
  background:rgba(240,185,107,.1); border:1px solid #5a4620; color:var(--warn);
  border-radius:var(--radius-sm); padding:8px 10px; font-size:11.5px; margin-bottom:6px; line-height:1.4;
}
#objSkinStudio .hintDivider { height:1px; background:var(--border); margin:14px 0; }
#objSkinStudio .hint { font-size:11px; color:var(--text-dim); margin-top:10px; line-height:1.4; }
#objSkinStudio .hint code { background:var(--bg-elevated-2); padding:1px 4px; border-radius:3px; }

/* ---------- Drag & drop overlay ---------- */
#objSkinStudio #dropOverlay {
  position:absolute; inset:0; z-index:999; background:rgba(11,15,20,.88);
  display:none; align-items:center; justify-content:center; border:3px dashed var(--accent); pointer-events:none;
}
#objSkinStudio #dropOverlay.active { display:flex; }
#objSkinStudio #dropOverlayInner { text-align:center; color:var(--text); }
#objSkinStudio .dropIcon { font-size:40px; display:block; margin-bottom:10px; }

#objSkinStudio *::-webkit-scrollbar { width:8px; height:8px; }
#objSkinStudio *::-webkit-scrollbar-track { background:transparent; }
#objSkinStudio *::-webkit-scrollbar-thumb { background:#3a3d42; border-radius:4px; }
#objSkinStudio *::-webkit-scrollbar-thumb:hover { background:var(--accent-dim); }

#objSkinStudio .toolBtn svg { width:16px; height:16px; }
#objSkinStudio .emptyIcon { width:40px; height:40px; color:var(--text-dim); }
#objSkinStudio .dropIcon { width:42px; height:42px; color:var(--accent); display:block; margin:0 auto 10px; }

/* ---------- Filas de archivo del proyecto (modelo / textura) ---------- */
#objSkinStudio #projectFiles { padding:10px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
#objSkinStudio .fileRow {
  display:flex; align-items:center; gap:9px; padding:7px 8px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-elevated-2); cursor:pointer; transition:border-color .15s, background .15s;
}
#objSkinStudio .fileRow:hover { border-color:var(--accent-dim); }
#objSkinStudio .fileRow.dragover { border-color:var(--accent); background:rgba(79,195,247,.12); }
#objSkinStudio .fileRow.filled { border-color:#2f4a3a; }
#objSkinStudio .fileRowIcon {
  width:30px; height:30px; flex-shrink:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--text-dim); border:1px solid var(--border);
}
#objSkinStudio .fileRowIcon svg { width:16px; height:16px; }
#objSkinStudio .fileRowThumb { overflow:hidden; background:#0a0a0b repeating-conic-gradient(#201f24 0% 25%, #0a0a0b 0% 50%) 0/8px 8px; background-size:8px 8px; }
#objSkinStudio .fileRowThumb img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
#objSkinStudio .fileRowInfo { flex-grow:1; min-width:0; }
#objSkinStudio .fileRowLabel { font-size:10.5px; color:var(--text-dim); }
#objSkinStudio .fileRowValue { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#objSkinStudio .fileRow.filled .fileRowValue { color:var(--text); }

/* ---------- Select de hueso inline en cada parte ---------- */
#objSkinStudio .partBoneSelect {
  font-size:10.5px; background:var(--bg-elevated-2); color:var(--text-dim);
  border:1px solid var(--border); border-radius:10px; padding:2px 5px;
  flex-shrink:0; max-width:92px; cursor:pointer;
}
#objSkinStudio .partBoneSelect.unassigned { color:var(--warn); border-color:#5a4620; }
#objSkinStudio .partBoneSelect:focus { outline:none; border-color:var(--accent-dim); color:var(--text); }

/* ---------- Parts nested inside the bone tree ---------- */
#objSkinStudio .boneParts { list-style:none; margin:2px 0 4px 20px; padding:0; }
#objSkinStudio .bonePartChip {
  font-size:10.5px; color:var(--text-dim); padding:2px 0 2px 14px; position:relative;
}
#objSkinStudio .bonePartChip::before { content:''; position:absolute; left:2px; top:9px; width:6px; height:1px; background:var(--border); }

@media (max-width: 950px){
  #objSkinStudio #sidebar { width:210px; min-width:210px; }
  #objSkinStudio #inspector { width:240px; min-width:240px; }
}

/* ---------- Mobile: sidebar and inspector become slide-in panels ---------- */
#objSkinStudio #mobileBackdrop {
  display:none; position:absolute; inset:0; z-index:60; background:rgba(6,9,13,.6);
}
#objSkinStudio #mobileBackdrop.active { display:block; }

/* Barra de pestañas inferior en móvil: reemplaza los dos botones flotantes
   de las esquinas (fáciles de pasar por alto) por una barra fija, con
   etiqueta de texto, para que sea obvio que "Huesos" es un panel aparte
   al que se puede entrar sin necesidad de pantalla completa. */
#objSkinStudio #mobileTabBar {
  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);
}
#objSkinStudio .mobileTabBtn {
  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;
}
#objSkinStudio .mobileTabBtn svg { width:19px; height:19px; }
#objSkinStudio .mobileTabBtn span { font-size:10px; font-weight:600; }
#objSkinStudio .mobileTabBtn.active { color:var(--accent); }

#objSkinStudio .mobileClose {
  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;
}
#objSkinStudio .mobileSheetHandle { display:none; }

@media (max-width: 760px){
  #objSkinStudio { height:88vh; max-height:88vh; overflow-x:hidden; }
  #objSkinStudio #app { position:relative; overflow:hidden; min-width:0; }

  /* Estilo Blockbench-mobile: los paneles laterales de escritorio se
     convierten en hojas que suben desde abajo (como un bottom sheet),
     no en cajones desde el costado -- dejan ver el viewport 3D detrás
     y se sienten como un panel nativo de app en vez de un menú lateral. */
  #objSkinStudio #sidebar,
#objSkinStudio #inspector {
    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%);
  }
  #objSkinStudio #sidebar.open,
#objSkinStudio #inspector.open { transform:translateY(0); }
  #objSkinStudio .mobileSheetHandle {
    display:block; position:absolute; top:0; left:0; right:0; height:22px;
    cursor:grab; touch-action:none;
  }
  #objSkinStudio .mobileSheetHandle::before {
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:2px; background:var(--border);
  }
  #objSkinStudio #sidebarHeader { padding-top:16px; }
  #objSkinStudio #inspectorTabs { padding-top:10px; }

  #objSkinStudio #mobileTabBar { display:flex; }
  #objSkinStudio .mobileClose { display:flex; }
  #objSkinStudio #sidebarHeader { padding-right:14px; }
  #objSkinStudio #inspectorTabs { padding-right:40px; position:relative; }
  #objSkinStudio #viewportStatus { bottom:60px; }

  #objSkinStudio #toolbar {
    max-width:calc(100vw - 24px);
    flex-wrap:wrap; justify-content:center;
    top:8px; padding:4px;
  }
  #objSkinStudio .toolBtn { width:27px; height:27px; }

  #objSkinStudio #viewportStatus { max-width:80%; font-size:10.5px; }
  #objSkinStudio #creditLink { display:none; }

  #objSkinStudio .fileRow { padding:8px 7px; }
  #objSkinStudio #partsSection { min-height:120px; }
}


/* Locators editor (bone inspector) */
#objSkinStudio #locatorList { display:flex; flex-direction:column; gap:8px; margin:4px 0 8px; }
#objSkinStudio .locatorRow { display:flex; flex-direction:column; gap:4px; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:8px; }
#objSkinStudio .locatorRow .locatorName { width:100%; }
#objSkinStudio .locatorRow .btnDanger { align-self:flex-end; padding:2px 10px; }
#objSkinStudio .locatorRow .locatorAuto { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); cursor:pointer; }
#objSkinStudio .locatorRow input:disabled { opacity:.55; }


/* ---------- Móvil: las hojas (sidebar / inspector) deben poder desplazarse ----------
   Bug: dentro de la hoja, #partsSection (y la lista de partes) se encogían por
   flexbox hasta quedar con alto ~0 -- la lista de partes y sus selectores de
   hueso quedaban fuera de alcance y no había nada que desplazar. Ahora los
   bloques de la hoja no se encogen y la hoja entera hace scroll vertical. */
@media (max-width: 760px){
  #objSkinStudio #sidebar,
  #objSkinStudio #inspector {
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  #objSkinStudio #sidebar > * { flex-shrink:0; }
  #objSkinStudio #partsSection { flex-grow:0; flex-shrink:0; padding-bottom:40px; }
  #objSkinStudio #partsList { overflow:visible; flex-grow:0; flex-shrink:0; max-height:none; min-height:0; }
  /* la X de cerrar ya no tapa el selector ES/EN */
  #objSkinStudio #sidebarHeader { padding-right:56px; }
}

/* El buscador de partes: la regla agrupada de arriba le ponía width:100% (más
   su margen y padding) y se salía por la derecha de la hoja. */
#objSkinStudio #partsSearch { box-sizing:border-box; width:calc(100% - 28px); }