@font-face{font-family:"Geist";src:url(fuentes/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fuentes/geist-mono.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}
:root{
  --fondo:#000;--tablero:var(--mx-fondo);--raya:var(--mx-linea);--raya2:var(--mx-linea-2);--sobre:var(--mx-sup);
  --t1:var(--mx-texto);--t2:var(--mx-sec);--t3:var(--mx-apagado);--pista:var(--mx-linea-2);--tope:var(--mx-puro);--acento:var(--mx-texto);--ancho:276px;
}
*{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}
body{display:grid;grid-template-columns:minmax(0,1fr) var(--ancho);height:100dvh;overflow:hidden}
#obra{position:relative;min-width:0;min-height:0;background:#000;overflow:hidden}
.papel-blanco #obra{background:#f6f6f4}
#lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;outline:none}
#lectura, #pista{position:absolute;pointer-events:none;font-size:12px;font-variant-numeric:tabular-nums;color:#7d7d84}
#lectura{left:16px;top:14px;white-space:pre}
#pista{left:16px;right:16px;bottom:14px;transition:opacity .9s}
#pista.fuera{opacity:0}
.papel-blanco #lectura, .papel-blanco #pista{color:var(--mx-apagado)}
#recentrar{position:absolute;right:14px;top:12px;background:rgba(10,10,11,.7)}
#recentrar[hidden]{display:none}
.papel-blanco #recentrar{color:var(--mx-fondo);background:rgba(255,255,255,.8);border-color:#c8c8cc}
#suelta{position:absolute;inset:12px;border:1px solid var(--t1);border-radius:12px;display:grid;place-items:center;background:rgba(0,0,0,.6);pointer-events:none;font-weight:500}
#suelta[hidden]{display:none}
#sinwebgl{position:absolute;left:16px;right:16px;top:40px;max-width:44ch}

#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 14px 18px}
#tablero header{display:flex;align-items:center;justify-content:space-between;padding:13px 0 11px;position:sticky;top:0;background:var(--tablero);z-index:2;border-bottom:1px solid var(--raya)}
h1{;}
.bloque{padding:13px 0 10px;border-bottom:1px solid var(--raya)}
.bloque:last-child{border-bottom:0}
h2, summary{;;margin:0 0 10px}
summary{margin:0;cursor:pointer;list-style-position:outside}
details[open] summary{margin-bottom:10px}
.sub{color:var(--t2);font-size:12px;margin:9px 0 6px}
button, select{font:inherit;color:inherit}
.bot{height:30px;padding:0 10px;background:transparent;border:1px solid var(--raya2);border-radius:var(--mx-r);cursor:pointer;font-weight:500;transition:background .15s,border-color .15s;white-space:nowrap}
.bot:hover{background:var(--sobre)}
.bot:active{background:var(--raya)}
.bot[aria-pressed=true]{background:var(--t1);color:var(--mx-fondo);border-color:var(--t1)}
:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
select{appearance:none;-webkit-appearance:none;height:30px;width:100%;background:transparent;border:1px solid var(--raya2);border-radius:var(--mx-r);padding:0 10px;cursor:pointer;font-weight:500}
select option{background:#111}
.campo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:6px;font-size:12.5px}

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

#sujetos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
#sujetos button{aspect-ratio:1;padding:0;border:0;border-radius:var(--mx-r);background:#000;overflow:hidden;cursor:pointer}
#sujetos img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:opacity .15s}
#sujetos button:hover img{opacity:1}
#sujetos button[aria-pressed=true]{outline:1.5px solid var(--t1);outline-offset:1px}
#sujetos button[aria-pressed=true] img{opacity:1}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--sobre);border-radius:var(--mx-r);padding:2px}
.seg button{height:25px;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(--mx-fondo)}
.ajustes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ajustes button{height:27px;padding:0 1px;background:transparent;border:1px solid var(--raya);border-radius:var(--mx-r);cursor:pointer;font-size:12px;font-weight:500;transition:background .15s,border-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ajustes button:hover{background:var(--sobre)}
.ajustes button[aria-pressed=true]{border-color:var(--t1)}
.conms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.conm{height:27px;padding:0 2px;background:transparent;border:1px solid var(--raya);border-radius:var(--mx-r);color:var(--t2);cursor:pointer;font-size:12.5px;font-weight:500;transition:color .15s,border-color .15s,background .15s}
.conm:hover{background:var(--sobre)}
.conm[aria-pressed=true]{color:var(--t1);border-color:var(--t1)}
.tonos{display:flex;gap:7px;align-items:center;margin-bottom:11px}
.tonos button{width:20px;height:20px;border-radius:50%;border:0;background:var(--c);cursor:pointer;padding:0}
.tonos button[aria-pressed=true]{outline:1.5px solid var(--t1);outline-offset:2px}
.otro{width:20px;height:20px;border-radius:50%;border:1px dashed var(--t3);overflow:hidden;cursor:pointer;display:block}
.otro input{opacity:0;width:100%;height:100%;cursor:pointer}
.nota{color:var(--t2);font-size:12px;margin-top:7px}

@media (max-width:820px){
  html, body{height:auto}
  body{display:block;height:auto;overflow:auto}
  #obra{height:58dvh;position:sticky;top:0;z-index:3;border-bottom:1px solid var(--raya)}
  #tablero{border-left:0;overflow:visible;padding:0 16px 32px}
  #tablero header{position:static}
  .fila input{height:28px}
  .bot, select{height:36px}
  .seg button{height:32px}
  .ajustes button, .conm{height:34px}
  #pista{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}