:root{
  --negro:#121212; --panel:var(--mx-fondo); --panel2:var(--mx-sup); --raya:var(--mx-linea); --raya2:var(--mx-linea-2);
  --tenue:var(--mx-apagado); --medio:var(--mx-sec); --claro:var(--mx-texto); --blanco:var(--mx-puro);
  --acento:var(--mx-texto);
  --sans:var(--mx-sans);
  --mono:var(--mx-sans);
  --panel-ancho:292px;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html, body{height:100%;background:var(--negro);color:var(--medio);font:12px/1.35 var(--sans);-webkit-font-smoothing:antialiased}
body{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-ancho);height:100dvh;overflow:hidden}
#obra{position:relative;min-width:0;min-height:0;background:var(--negro);overflow:hidden}
#lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer;outline:none}
#lienzo.gira{cursor:grabbing}
#lienzo:focus-visible{box-shadow:inset 0 0 0 1px var(--claro)}
#lectura, #pista, #firma{position:absolute;pointer-events:none;font-size:12px;font-variant-numeric:tabular-nums}
#lectura{left:16px;top:14px;color:#c9c9cc;white-space:pre}
#pista{left:16px;right:80px;bottom:14px;color:#a6a6aa;transition:opacity .9s}
#pista.fuera{opacity:0}
#firma{right:16px;bottom:14px;color:var(--mx-apagado)}
#suelta{position:absolute;inset:12px;border:1px dashed var(--claro);border-radius:10px;display:grid;place-items:center;background:rgba(0,0,0,.55);color:var(--claro);pointer-events:none}
#sinwebgl{position:absolute;left:16px;top:52px;color:var(--claro);max-width:46ch;z-index:2;background:rgba(0,0,0,.82);border:1px solid var(--raya2);border-radius:var(--mx-r);padding:8px 10px}
#estado{position:fixed;left:16px;bottom:40px;color:var(--claro);background:rgba(18,18,19,.94);padding:6px 10px;border:1px solid var(--raya2);border-radius:var(--mx-r);z-index:5}

#tablero{border-left:1px solid var(--raya);background:var(--panel);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333 transparent;min-height:0}
#tablero header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 14px;border-bottom:1px solid var(--raya);position:sticky;top:0;background:var(--panel);z-index:2}
h1{;;}
button, select, input[type=text], textarea{font:inherit;color:var(--claro);background:var(--panel2);border:1px solid var(--raya2);border-radius:var(--mx-r);height:28px;padding:0 10px;cursor:pointer;transition:background .12s,border-color .12s}
button:hover, select:hover{background:var(--mx-sup-2);border-color:var(--mx-apagado)}
button:active{background:var(--mx-sup-2)}
button[aria-pressed=true]{background:var(--mx-texto);color:var(--mx-fondo);border-color:var(--mx-texto);font-weight:500}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid var(--blanco);outline-offset:1px}
select{width:100%}
select option{background:#111}
textarea{width:100%;height:52px;padding:6px 10px;resize:none;cursor:text;line-height:1.3}
input[type=text]{width:100%;cursor:text}
input[type=color]{-webkit-appearance:none;appearance:none;width:100%;height:26px;padding:0;border:1px solid var(--raya2);border-radius:var(--mx-r);background:none;cursor:pointer;overflow:hidden}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0}
input[type=color]::-moz-color-swatch{border:0}

.bloque{border-bottom:1px solid var(--raya);padding:12px 14px 13px;display:flex;flex-direction:column;gap:6px}
.bloque>h2{;;margin:0 0 3px}
.fila{display:grid;grid-template-columns:76px minmax(0,1fr) 46px;align-items:center;column-gap:8px;min-height:24px}
.fila label{color:var(--medio);white-space:nowrap}
.fila output{color:var(--claro);text-align:right;font:12px var(--mono);white-space:nowrap}
.fila.ancha{grid-template-columns:76px minmax(0,1fr)}
.fila.ancha:has(> label:empty){grid-template-columns:minmax(0,1fr)}
.fila.ancha:has(> label:empty)>label{display:none}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.tres label{display:block;color:var(--medio);font-size:12px;margin-bottom:3px}
.tresb{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tresb button{padding:0 2px;font-size:12px}
.seg{display:flex;border:1px solid var(--raya2);border-radius:var(--mx-r);overflow:hidden}
.seg button{flex:1;height:26px;padding:0 4px;border:0;border-radius:var(--mx-r);background:transparent;font-size:12px;min-width:0}
.seg button+button{border-left:1px solid var(--raya2)}
.seg button[aria-pressed=true]{background:var(--mx-texto);color:var(--mx-fondo);font-weight:500}
.sw{display:flex;align-items:center;gap:8px;min-height:24px;color:var(--medio);cursor:pointer}
.sw input{appearance:none;-webkit-appearance:none;width:26px;height:15px;border-radius:var(--mx-r);background:#38383c;position:relative;margin:0;cursor:pointer;transition:background .15s;flex:none}
.sw input::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:left .15s}
.sw input:checked{background:var(--acento)}
.sw input:checked::after{left:13px}

#tirar{width:100%;height:34px;background:var(--acento);border-color:var(--acento);color:var(--mx-fondo);font-weight:600}
#tirar:hover{background:var(--mx-puro);border-color:var(--mx-puro)}
#ola, .ancho{width:100%}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:4px}
#muestras{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
#muestras button{height:auto;aspect-ratio:1;padding:0;border:1px solid var(--raya2);border-radius:var(--mx-r);background:#000;overflow:hidden}
#muestras button img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.8)}
#muestras button:hover img{filter:grayscale(.3)}
#muestras button[aria-pressed=true]{border-color:var(--blanco);background:#000}
#muestras button[aria-pressed=true] img{filter:none}
#ajustes{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
#ajustes button{text-align:left;display:flex;align-items:center;gap:7px}
#ajustes i{display:inline-block;width:11px;height:11px;border-radius:var(--mx-r);border:1px solid #555;flex:none}
.nota{color:var(--tenue);font-size:12px;min-height:14px;line-height:1.35}
#fila-subir button{width:100%}
#fila-subir{display:block}

@media (max-width:820px){
  body{grid-template-columns:1fr;grid-template-rows:56dvh minmax(0,1fr);height:100dvh}
  #tablero{border-left:0;border-top:1px solid var(--raya)}
  #pista{display:none}
  .seg button, .tresb button{height:32px}
  button{height:32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
#seg-olad button{font-size:10px;padding:0}