@font-face{font-family:GCond;src:url(fuentes/ArchivoCondensada-ExtraBold.ttf)}
@font-face{font-family:GAncha;src:url(fuentes/ArchivoAncha-ExtraBold.ttf)}
@font-face{font-family:GInter;src:url(fuentes/InterTight-ExtraBold.ttf)}
@font-face{font-family:GGeist;src:url(fuentes/Geist-ExtraBold.ttf)}
@font-face{font-family:GSerif;src:url(fuentes/InstrumentSerif-Regular.ttf)}
:root{
  --bg:var(--mx-fondo); --panel:var(--mx-fondo); --linea:var(--mx-linea); --tx:var(--mx-texto); --tx2:var(--mx-sec); --tx3:var(--mx-apagado);
  --campo:var(--mx-sup); --campo2:var(--mx-sup-2); --pista:var(--mx-linea-2); --foco:var(--mx-texto);
  --ui:var(--mx-sans);
}
*{box-sizing:border-box}
html, body{height:100%;margin:0;background:var(--bg);color:var(--tx2);font:400 12.5px/1.35 var(--ui);-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-columns:280px minmax(0,1fr);height:100vh;height:100dvh}
.panel{background:var(--panel);border-right:1px solid var(--linea);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--campo2) transparent;display:flex;flex-direction:column}
.cabeza{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--linea)}
.cabeza h1{margin:0;;;}
.grupo{padding:12px 14px 14px;border-bottom:1px solid var(--linea)}
.tit{display:block;font:500 12px/1 var(--ui);color:var(--tx);margin-bottom:10px}
.tit2{margin-top:14px}
button, input, textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.btn{height:30px;padding:0 11px;background:var(--campo);border:0;border-radius:var(--mx-r);color:var(--tx);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.btn:hover{background:var(--campo2)}
.btn:active{transform:translateY(.5px)}
.pri{background:var(--tx);color:var(--bg);font-weight:500;min-width:84px}
.pri:hover{background:var(--mx-puro)}
textarea{display:block;width:100%;resize:none;background:var(--campo);border:1px solid transparent;border-radius:var(--mx-r);padding:8px 10px;font-weight:500;line-height:1.3}
textarea:focus{outline:none;border-color:var(--tx3)}
.fuentes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.fuentes button{height:34px;background:var(--campo);border:0;border-radius:var(--mx-r);font-size:15px;color:var(--tx2);cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .15s,color .15s}
.fuentes button:hover{background:var(--campo2);color:var(--tx)}
.fuentes button[aria-checked=true]{background:var(--tx);color:var(--bg)}
.subir{display:block;margin-top:6px;height:30px;line-height:30px;color:var(--tx2);cursor:pointer;background:var(--campo);border-radius:var(--mx-r);text-align:center;position:relative}
.subir:hover{background:var(--campo2);color:var(--tx)}
.subir input{position:absolute;opacity:0;width:1px;height:1px}
.subir:focus-within{outline:2px solid var(--foco);outline-offset:1px}
.desl{margin-top:10px}
.desl:first-child{margin-top:0}
.desl .et{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.desl output{color:var(--tx);font-variant-numeric:tabular-nums}
.desl input{display:block;width:100%}
.muestras{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
.muestras button{height:28px;border:1px solid var(--linea);border-radius:var(--mx-r);cursor:pointer;padding:0;position:relative;overflow:hidden;background:none}
.muestras button i{position:absolute;left:0;right:0;bottom:0;height:45%}
.muestras button[aria-checked=true]{box-shadow:0 0 0 1.5px var(--panel),0 0 0 3px var(--tx)}
.colores{display:grid;grid-template-columns:1fr 1fr auto;gap:6px}
.colores label{display:flex;align-items:center;justify-content:space-between;gap:6px;height:30px;padding:0 4px 0 9px;background:var(--campo);border-radius:var(--mx-r)}
input[type=color]{-webkit-appearance:none;appearance:none;width:22px;height:22px;padding:0;border:0;border-radius:var(--mx-r);background:none;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:1px solid var(--linea);border-radius:var(--mx-r)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;background:var(--campo);border-radius:var(--mx-r)}
.seg button{height:26px;padding:0 4px;background:transparent;border:0;border-radius:var(--mx-r);color:var(--tx2);font-size:12px;cursor:pointer;transition:background .15s,color .15s}
.seg button:hover{color:var(--tx)}
.seg button[aria-checked=true]{background:var(--campo2);color:var(--tx)}
.exportar{position:sticky;bottom:0;margin-top:auto;background:var(--panel);border-top:1px solid var(--linea);border-bottom:0}
.exporta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.chk{display:flex;align-items:center;gap:8px;margin-top:5px;cursor:pointer}
.chk input{accent-color:var(--mx-texto);margin:0}
.escena{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.lienzo{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px 18px 10px}
canvas{display:block;touch-action:none;cursor:grab;background:#efefec;border-radius:2px}
canvas.agarra{cursor:grabbing}
.barra{display:flex;align-items:center;gap:8px;padding:0 18px 14px;min-height:44px}
.avance{flex:1;min-width:40px;height:2px;background:var(--pista);border-radius:var(--mx-r);overflow:hidden}
.avance i{display:block;height:100%;background:var(--foco);transform-origin:0 50%;transform:scaleX(0)}
.cuenta{font-variant-numeric:tabular-nums;color:var(--tx2);white-space:nowrap;min-width:92px;text-align:right}
.aviso{margin:0 18px 14px;padding:10px 12px;border:1px solid var(--linea);color:var(--tx);border-radius:var(--mx-r)}
@media (max-width:860px){
  html, body{height:auto}
  .app{display:flex;flex-direction:column;height:auto}
  .escena{order:1;position:sticky;top:0;z-index:5}
  .lienzo{padding:10px 10px 8px;flex:none}
  .panel{order:2;border-right:0;border-top:1px solid var(--linea);overflow:visible}
  .barra{padding:0 10px 10px;gap:6px;flex-wrap:wrap;max-width:100vw}
  .escena{max-width:100vw}
  .btn{padding:0 9px}
  .btn{height:36px}
  .seg button{height:32px}
  .avance{order:5;flex:1 1 55%;min-width:0}
  .cuenta{order:6;flex:none;min-width:0}
  .exportar{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}