@font-face{font-family:"Geist";src:url(fuentes/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fuentes/inter-tight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url(fuentes/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fuentes/instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --fondo:var(--mx-fondo);--tablero:var(--mx-fondo);--raya:var(--mx-linea);--raya2:var(--mx-linea-2);
  --t1:var(--mx-texto);--t2:var(--mx-sec);--t3:var(--mx-apagado);--pista:var(--mx-linea-2);--tope:var(--mx-puro);--sobre:var(--mx-sup);
  --acento:var(--mx-texto);--ancho:296px;
}
*{box-sizing:border-box;margin:0}
html, body{height:100%;background:var(--fondo);color:var(--t1);font:400 13px/1.3 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#tz{display:grid;grid-template-columns:minmax(0,1fr) var(--ancho);height:100dvh}
#marco{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;background:var(--sobre)}
#marco.libre{background:transparent}
#lienzo{display:block;touch-action:none;cursor:crosshair;outline:none}
#sinwebgl{position:absolute;left:16px;bottom:16px;color:var(--mx-fondo);background:#fff;padding:6px 10px;border-radius:var(--mx-r);max-width:44ch}
#suelta{position:absolute;inset:12px;border:1px solid var(--t1);border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--fondo) 82%,transparent);font-weight:500}
#suelta[hidden]{display:none}

#tablero{border-left:1px solid var(--raya);background:var(--tablero);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--raya2) transparent;min-height:0;padding:0 16px 20px}
.cab{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;background:var(--tablero);padding:14px 0 12px;border-bottom:1px solid var(--raya)}
h1{;}
.grupo{padding:14px 0 12px;border-bottom:1px solid var(--raya)}
.grupo:last-child{border-bottom:0}
h2{;;margin:0 0 10px}

button, select, textarea{font:inherit;color:inherit}
.bot{height:30px;padding:0 11px;background:transparent;border:1px solid var(--raya2);border-radius:var(--mx-r);cursor:pointer;font-weight:500;transition:background .15s,border-color .15s}
.bot:hover{background:var(--sobre)}
.bot:active{background:var(--raya)}
.bot.grabando{border-color:var(--acento);color:var(--acento)}
:focus-visible{outline:2px solid var(--acento);outline-offset:1px}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--sobre);border-radius:var(--mx-r);padding:2px;margin-bottom:8px}
.seg button{height:26px;background:transparent;border:0;border-radius:var(--mx-r);cursor:pointer;color:var(--t2);font-weight:500;font-size:12.5px;transition:color .15s,background .15s;white-space:nowrap;padding:0 4px}
.seg button:hover{color:var(--t1)}
.seg button[aria-pressed=true]{background:var(--t1);color:var(--fondo)}
.seg button:disabled{opacity:.4;cursor:default}

textarea{display:block;width:100%;height:58px;resize:vertical;padding:7px 9px;background:transparent;border:1px solid var(--raya2);border-radius:var(--mx-r);margin-bottom:8px;font:500 15px/1.15 var(--mx-sans);letter-spacing:-.01em}
textarea:focus{outline:none;border-color:var(--t1)}

.rail{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:2px;margin-bottom:9px}
.rail label{color:var(--t1);font-size:12.5px}
.rail output{color:var(--t2);font-size:12px;font-variant-numeric:tabular-nums}
.rail input{grid-column:1/-1}

.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.chips button{height:28px;padding:0 2px;background:transparent;border:1px solid var(--raya);border-radius:var(--mx-r);cursor:pointer;font-size:12.5px;font-weight:500;color:var(--t1);transition:background .15s,border-color .15s;white-space:nowrap}
.chips button:hover{background:var(--sobre)}
.chips button[aria-pressed=true]{border-color:var(--t1)}

.fotos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:8px}
.fotos button{aspect-ratio:1;padding:0;border:0;border-radius:var(--mx-r);overflow:hidden;background:var(--sobre);cursor:pointer;position:relative}
.fotos img{width:100%;height:100%;object-fit:cover;display:block}
.fotos button[aria-pressed=true]{outline:2px solid var(--t1);outline-offset:1px}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.fila2 .bot{width:100%}
.color{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 4px 0 9px;border:1px solid var(--raya2);border-radius:var(--mx-r);font-size:12.5px;cursor:pointer}
.color input{width:22px;height:22px;padding:0;border:0;border-radius:var(--mx-r);overflow:hidden;background:none;cursor:pointer}
.color input::-webkit-color-swatch-wrapper{padding:0}
.color input::-webkit-color-swatch{border:1px solid var(--raya2);border-radius:var(--mx-r)}
.oculto{display:none!important}
.nota{color:var(--t2);font-size:12px;margin-top:2px}

@media (max-width:820px){
  html, body{height:auto}
  #tz{display:block;height:auto}
  #marco{position:sticky;top:0;z-index:3;height:56dvh;border-bottom:1px solid var(--raya)}
  #tablero{border-left:0;overflow:visible;padding:0 16px 32px}
  .cab{position:static}
  .seg button{height:32px}
  .bot{height:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}