*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,system-ui,Segoe UI,sans-serif;background:#090e16;color:#e8eef8}
body{overflow:hidden}
header{height:64px;background:#111927;border-bottom:1px solid #26344a;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
header strong{display:block;font-size:18px}
header span{display:block;margin-top:2px;font-size:11px;color:#8ea0ba}
.actions{display:flex;gap:8px}
button,.button{border:1px solid #344764;background:#172338;color:#e5edf8;border-radius:8px;padding:9px 12px;font-weight:650;font-size:12px;cursor:pointer}
button:hover,.button:hover{background:#1b2942}
.button input{display:none}
.primary{background:#3267df;border-color:#5b86ef;color:#fff}
main{height:calc(100vh - 64px);display:grid;grid-template-columns:360px 1fr}
aside{overflow:auto;padding:14px;background:#0e1622;border-right:1px solid #26344a}
aside section{padding:13px;border:1px solid #25354d;border-radius:10px;background:#121c2b;margin-bottom:12px}
h2{margin:0 0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#91acd5}
.stats .big{font-size:25px;font-weight:800;color:#83e3b2;margin-bottom:4px}
.stats div:nth-child(3){font-size:11px;color:#9cabc0}
small{display:block;color:#73859d;font-size:10px;line-height:1.45;margin-top:8px}
label{display:grid;gap:6px;font-size:12px;color:#cad7e8;margin:10px 0}
select,input[type=number]{width:100%;background:#0b1320;color:#e9f0fa;border:1px solid #31445f;border-radius:6px;padding:7px}
input[type=range]{width:100%}
input[type=color]{width:100%;height:35px;border:1px solid #31445f;border-radius:6px;background:#0b1320}
.switch{display:flex;align-items:center;justify-content:space-between}
.editor{border-color:#465f8d}
.axis{display:grid;grid-template-columns:1fr 74px;gap:8px;align-items:end;margin:12px 0}
.axis>div{display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:center}
.axis b{text-align:center}
.axis.x b{color:#ff7582}.axis.y b{color:#79e4a5}.axis.z b{color:#6faeff}
.axis.x input[type=range]{accent-color:#e85a69}
.axis.y input[type=range]{accent-color:#45ce7e}
.axis.z input[type=range]{accent-color:#4b8ff1}
.axis input[type=number]{padding:6px}
.two,.three{display:grid;gap:7px;margin-top:12px}
.two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:1fr 1fr 1fr}
.viewport{position:relative;overflow:hidden;background:radial-gradient(circle at center,#162236 0,#0b111b 60%,#070b11 100%)}
.viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.viewport #pointOverlay{pointer-events:auto;touch-action:none}
.legend,#status{position:absolute;background:#101827dc;border:1px solid #2d3c54;border-radius:8px;color:#aebbd0;font-size:11px;padding:7px 9px;pointer-events:none}
.legend{left:14px;bottom:14px}
#status{right:14px;top:14px;max-width:46ch}
@media(max-width:980px){main{grid-template-columns:320px 1fr}header span{display:none}}

button:disabled{opacity:.38;cursor:not-allowed;background:#141c29;color:#6f7e92}

.floating-tool{
  position:absolute;
  right:18px;
  top:62px;
  z-index:8;
  width:58px;
  height:58px;
  border-radius:50%;
  border:1px solid #49658d;
  background:rgba(17,28,44,.94);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  padding:0;
  color:#dce9fa;
  backdrop-filter:blur(8px);
}
.floating-tool:hover{background:#1b2c46}
.floating-tool.active{
  background:#214e3d;
  border-color:#65e6aa;
  box-shadow:0 0 0 2px rgba(101,230,170,.14),0 8px 24px rgba(0,0,0,.4);
}
.tool-ring{
  position:relative;
  display:block;
  width:30px;
  height:30px;
}
.tool-ring i{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8cb6f4;
  left:12px;
  top:12px;
  transform-origin:3px 3px;
}
.tool-ring i:nth-child(1){transform:translate(0,-12px)}
.tool-ring i:nth-child(2){transform:translate(10px,-6px)}
.tool-ring i:nth-child(3){transform:translate(10px,6px)}
.tool-ring i:nth-child(4){transform:translate(0,12px)}
.tool-ring i:nth-child(5){transform:translate(-10px,6px)}
.tool-ring i:nth-child(6){transform:translate(-10px,-6px)}
.floating-tool.active .tool-ring i{background:#79efb4}
.tool-label{
  position:absolute;
  font-size:9px;
  font-weight:800;
  line-height:1;
}
.tool-hint{
  position:absolute;
  right:82px;
  top:75px;
  z-index:7;
  padding:6px 9px;
  border:1px solid #31445f;
  background:rgba(10,17,28,.92);
  border-radius:7px;
  color:#9eafc6;
  font-size:10px;
  opacity:0;
  transform:translateX(4px);
  transition:.15s ease;
  pointer-events:none;
}
.floating-tool:hover + .tool-hint,
.floating-tool.active + .tool-hint{
  opacity:1;
  transform:translateX(0);
}

.circle-size-controls{
  position:absolute;
  right:14px;
  top:126px;
  z-index:9;
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px;
  border:1px solid #37506f;
  border-radius:12px;
  background:rgba(11,18,29,.94);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
  opacity:0;
  transform:translateY(-4px) scale(.96);
  pointer-events:none;
  transition:.14s ease;
  backdrop-filter:blur(8px);
}
.circle-size-controls.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.circle-size-btn{
  width:34px;
  height:34px;
  padding:0;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
  font-weight:800;
  background:#18263a;
  border-color:#425d7e;
}
.circle-size-btn:hover{
  background:#24415a;
  border-color:#65e6aa;
}
#circleSizeLabel{
  min-width:43px;
  text-align:center;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:#b9c9dd;
  user-select:none;
}

#boneSelect:disabled,#playBoneTest:disabled,#stopBoneTest:disabled{opacity:.45}

.bones-editor hr{border:0;border-top:1px solid #2b3d57;margin:14px 0}
.bone-value-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.bone-value-row span{font-size:11px;color:#9fb1c8}
.bone-value-row button{padding:6px 9px}

.drop-mesh-overlay{
  position:absolute;
  inset:12px;
  z-index:30;
  display:grid;
  place-items:center;
  border:2px dashed rgba(103,230,170,.85);
  border-radius:18px;
  background:rgba(7,14,22,.72);
  opacity:0;
  pointer-events:none;
  transform:scale(.995);
  transition:.13s ease;
  backdrop-filter:blur(4px);
}
.drop-mesh-overlay.visible{
  opacity:1;
  transform:scale(1);
}
.drop-mesh-card{
  min-width:260px;
  padding:22px 28px;
  text-align:center;
  border:1px solid #416a61;
  border-radius:14px;
  background:rgba(18,35,37,.96);
  box-shadow:0 16px 50px rgba(0,0,0,.38);
}
.drop-mesh-card strong{
  display:block;
  font-size:17px;
  color:#8df0bd;
}
.drop-mesh-card span{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#a9bccc;
}

.bones-editor #animationName{width:100%;background:#0b1320;color:#e9f0fa;border:1px solid #31445f;border-radius:6px;padding:7px}
#animationCollectionInfo{color:#8fb6dc}

/* v16.9.2 · paneles expansibles tipo acordeón */
aside{
  padding:12px;
}
aside section{
  margin-bottom:0;
}
.accordion-panel{
  margin-bottom:9px;
  border:1px solid #25354d;
  border-radius:10px;
  background:#121c2b;
  overflow:hidden;
}
.accordion-panel[open]{
  border-color:#3b5274;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.accordion-panel>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  padding:11px 13px;
  cursor:pointer;
  user-select:none;
  color:#91acd5;
  background:#111b2a;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
  transition:background .14s ease,color .14s ease;
}
.accordion-panel>summary::-webkit-details-marker{display:none}
.accordion-panel>summary:hover{
  background:#172338;
  color:#b9cff0;
}
.accordion-panel[open]>summary{
  background:#17263a;
  color:#9fd0ff;
  border-bottom:1px solid #2a3d59;
}
.accordion-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.accordion-chevron{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  flex:0 0 20px;
  font-size:20px;
  line-height:1;
  color:#7f97b9;
  transform:rotate(0deg);
  transition:transform .16s ease,color .16s ease;
}
.accordion-panel[open] .accordion-chevron{
  transform:rotate(90deg);
  color:#79e4a5;
}
.accordion-content{
  padding:12px 13px 13px;
}
.accordion-panel.stats .accordion-content{
  padding-top:11px;
}
.accordion-panel.editor{
  border-color:#35496a;
}
.accordion-panel.bones-editor{
  border-color:#334a66;
}
.accordion-panel.bones-editor[open]{
  border-color:#4a7391;
}


/* ==========================================================
   v16.9.3 · Modo móvil
   ========================================================== */
.mobile-tools-btn,
.mobile-quick-tools,
.mobile-gesture-hint,
.mobile-sidebar-backdrop{
  display:none;
}

@media (max-width: 760px){
  html,body{
    width:100%;
    height:100%;
    overscroll-behavior:none;
    touch-action:none;
  }

  body{
    overflow:hidden;
  }

  header{
    height:58px;
    padding:6px 8px;
    gap:7px;
    position:relative;
    z-index:80;
  }

  header>div:first-child{
    min-width:0;
    flex:0 1 auto;
  }

  header strong{
    font-size:14px;
    white-space:nowrap;
  }

  header span{
    display:none;
  }

  .mobile-tools-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:8px 10px;
    flex:0 0 auto;
    font-size:11px;
  }

  .actions{
    min-width:0;
    flex:1 1 auto;
    justify-content:flex-end;
    gap:5px;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .actions::-webkit-scrollbar{display:none}

  .actions button,
  .actions .button{
    min-height:42px;
    min-width:42px;
    padding:8px 9px;
    flex:0 0 auto;
    white-space:nowrap;
    font-size:10px;
  }

  #resetCurrentTop{
    display:none;
  }

  #exportBtn{
    max-width:112px;
  }

  main{
    height:calc(100dvh - 58px);
    display:block;
    position:relative;
  }

  .viewport{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .viewport #pointOverlay{
    touch-action:none;
  }

  aside{
    position:fixed;
    z-index:70;
    left:0;
    top:58px;
    bottom:0;
    width:min(88vw,380px);
    max-width:380px;
    padding:10px;
    border-right:1px solid #344b6a;
    transform:translateX(-103%);
    transition:transform .2s ease;
    box-shadow:18px 0 45px rgba(0,0,0,.42);
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  aside.mobile-open{
    transform:translateX(0);
  }

  .mobile-sidebar-backdrop{
    position:fixed;
    z-index:65;
    top:58px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(3,8,14,.58);
    backdrop-filter:blur(2px);
  }

  .mobile-sidebar-backdrop.visible{
    display:block;
  }

  .accordion-panel{
    margin-bottom:7px;
  }

  .accordion-panel>summary{
    min-height:48px;
    padding:13px 12px;
    font-size:11px;
  }

  .accordion-content{
    padding:10px 11px 12px;
  }

  button,.button,
  select,
  input[type=number],
  input[type=text]{
    min-height:44px;
  }

  input[type=range]{
    min-height:34px;
  }

  input[type=checkbox]{
    width:22px;
    height:22px;
  }

  .two,.three{
    gap:6px;
  }

  .three{
    grid-template-columns:1fr;
  }

  .axis{
    grid-template-columns:minmax(0,1fr) 76px;
  }

  .legend{
    display:none;
  }

  #status{
    right:8px;
    top:8px;
    max-width:calc(100vw - 118px);
    font-size:10px;
    padding:6px 8px;
  }

  .floating-tool{
    right:10px;
    top:62px;
    width:52px;
    height:52px;
  }

  .tool-hint{
    display:none;
  }

  .circle-size-controls{
    right:8px;
    top:120px;
  }

  .mobile-quick-tools{
    display:flex;
    position:absolute;
    z-index:12;
    left:50%;
    bottom:max(12px, env(safe-area-inset-bottom));
    transform:translateX(-50%);
    gap:6px;
    padding:5px;
    border:1px solid #334b69;
    border-radius:14px;
    background:rgba(10,17,28,.91);
    backdrop-filter:blur(8px);
    box-shadow:0 10px 28px rgba(0,0,0,.35);
  }

  .mobile-quick-tools button{
    min-width:48px;
    min-height:44px;
    padding:7px 10px;
    border-radius:10px;
  }

  #mobileAddSelectBtn.active{
    background:#214e3d;
    border-color:#65e6aa;
    color:#dfffee;
  }

  .mobile-gesture-hint{
    display:block;
    position:absolute;
    z-index:7;
    left:8px;
    bottom:76px;
    max-width:230px;
    padding:6px 8px;
    border:1px solid #2d3c54;
    border-radius:8px;
    background:rgba(9,15,24,.76);
    color:#8fa2bb;
    font-size:9px;
    line-height:1.35;
    pointer-events:none;
  }

  @media (orientation:landscape){
    aside{
      width:min(55vw,360px);
    }

    .mobile-gesture-hint{
      bottom:12px;
      left:12px;
    }

    .mobile-quick-tools{
      left:auto;
      right:10px;
      bottom:10px;
      transform:none;
    }
  }
}

@media (max-width: 430px){
  header strong{
    max-width:116px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-tools-btn{
    font-size:0;
    width:44px;
    padding:0;
  }

  .mobile-tools-btn::before{
    content:'☰';
    font-size:20px;
  }

  .actions #undoBtn,
  .actions #redoBtn{
    font-size:0;
    width:42px;
    padding:0;
  }

  .actions #undoBtn::before{
    content:'↶';
    font-size:19px;
  }

  .actions #redoBtn::before{
    content:'↷';
    font-size:19px;
  }

  .actions .button{
    max-width:74px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #exportBtn{
    max-width:72px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}