/* Trama · panel sobrio; el color lo pone el resultado. */
:root{
  --fondo:var(--mx-fondo); --banco:var(--mx-fondo); --placa:var(--mx-fondo); --placa2:var(--mx-sup);
  --filo:var(--mx-linea); --filo2:var(--mx-linea-2);
  --tx:var(--mx-texto); --tx2:var(--mx-sec); --tx3:var(--mx-apagado); --luz:var(--mx-puro); --acento:var(--mx-texto);
  --sans:var(--mx-sans);
  --mono:var(--mx-sans);
  --panel:320px; --cons:84px; --barra:48px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html, body{margin:0;height:100%;background:var(--fondo);color:var(--tx);font:13px/1.35 var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
button, input, label{font:inherit;color:inherit}
h1, h2, ol, p{margin:0;padding:0}
ol{list-style:none}
h2{;}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* barra */
#barra{flex:none;height:var(--barra);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 12px 0 16px;border-bottom:1px solid var(--filo);background:var(--placa)}
#barra h1{;;}
.barra-der{display:flex;gap:4px;flex:none}
button.fuerte, #pausa, #planchas{border:0;border-radius:var(--mx-r);background:var(--placa2);padding:0 11px;height:28px;cursor:pointer;color:var(--luz);font-weight:500;transition:background-color .15s}
#pausa:hover, #planchas:hover:not(:disabled), button.fuerte:hover{background:var(--filo2)}
#planchas:disabled{opacity:.38;cursor:default}
#planchas[aria-pressed=true]{background:var(--luz);color:var(--mx-fondo)}
#azar{background:var(--luz);color:var(--mx-fondo)}
#azar:hover{background:#fff}

/* mesa */
#mesa{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--panel);grid-template-rows:minmax(0,1fr) var(--cons);grid-template-areas:"banco panel" "cons panel"}
#banco{grid-area:banco;position:relative;background:var(--banco);overflow:hidden;min-height:0}
#panel{grid-area:panel;background:var(--placa);border-left:1px solid var(--filo);min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--filo2) transparent}
#consola{grid-area:cons;background:var(--placa);border-top:1px solid var(--filo);display:flex;gap:0;align-items:stretch;min-width:0;overflow-x:auto;scrollbar-width:thin;position:relative}
.con-fuente{flex:1 1 auto}

/* pliego */
#pliego{position:absolute;left:0;top:0}
#lienzo{display:block;width:100%;height:100%;background:#000}
#marcas{display:none}
#pie-pliego{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;gap:10px;align-items:center;font:12px/14px var(--mono);color:var(--tx3);white-space:nowrap;pointer-events:none}
#tira{display:none}
#ficha{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#fps{flex:none;color:var(--tx3)}

/* comparación */
#linea{position:absolute;top:0;bottom:0;left:0;width:0;cursor:ew-resize;touch-action:none;z-index:3}
#linea::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.55);opacity:0;transition:opacity .15s}
#linea::after{content:"";position:absolute;top:0;bottom:0;left:-11px;width:22px}
#linea.activa::before{opacity:1}
#linea .grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:0;font:500 12px/1 var(--sans)}
#linea .grip b{font-weight:500;padding:4px 7px;border-radius:var(--mx-r);background:rgba(0,0,0,.72);color:#fff;opacity:0;transition:opacity .15s;white-space:nowrap}
#linea .grip b:first-child{position:absolute;right:calc(100% + 4px)}
#linea .grip b:last-child{position:absolute;left:calc(100% + 4px)}
#linea.activa .grip b{opacity:1}
#linea .grip i{display:block;width:14px;height:32px;background:#fff;border-radius:var(--mx-r);position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
#linea .grip i::before{content:"";position:absolute;left:4px;right:4px;top:10px;bottom:10px;border-left:1px solid #555;border-right:1px solid #555}
#linea:not(.activa) .grip{transform:translate(0,-50%);opacity:.7;transition:opacity .15s}
#linea:hover .grip, #linea:focus-visible .grip{opacity:1}
#linea.oculta, #linea.sin{display:none}
@media (hover:hover){#pliego:not(:hover) #linea:not(.activa) .grip{opacity:0}}

#suelta{position:absolute;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:5;border:1px dashed #aaa;border-radius:12px;margin:10px;pointer-events:none}
#suelta[hidden]{display:none}
#suelta span{font-size:15px;color:#fff}
#aviso{position:absolute;left:14px;top:12px;font:12px/1.3 var(--sans);color:var(--luz);z-index:4;pointer-events:none;background:rgba(0,0,0,.72);border-radius:var(--mx-r);padding:4px 8px;opacity:0;transition:opacity .2s}
#aviso.ve{opacity:1}

/* panel */
#panel section{padding:14px 16px;border-bottom:1px solid var(--filo)}
#panel section h2{margin-bottom:10px}
#ajustes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#ajustes button{all:unset;display:block;min-width:0;cursor:pointer;border-radius:var(--mx-r)}
#ajustes button i{display:block;width:100%;aspect-ratio:4/5;border-radius:var(--mx-r);background:#000 center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
#ajustes button span{display:block;margin-top:4px;font-size:12px;line-height:1.15;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ajustes button:hover span{color:var(--luz)}
#ajustes button[aria-pressed=true] i{box-shadow:0 0 0 2px var(--placa),0 0 0 3px var(--luz)}
#ajustes button[aria-pressed=true] span{color:var(--luz)}
#ajustes button:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

#agrega{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
#agrega button{border:0;border-radius:var(--mx-r);background:var(--placa2);padding:0 8px;font-size:12px;color:var(--tx);cursor:pointer;white-space:nowrap;height:24px;transition:background-color .15s}
#agrega button:hover{background:var(--filo2);color:var(--luz)}
#lista{border-top:1px solid var(--filo)}
#lista li{display:grid;grid-template-columns:18px 22px 1fr 20px 20px 20px;align-items:center;gap:2px;height:30px;border-bottom:1px solid var(--filo);padding:0 2px 0 4px;cursor:pointer;color:var(--tx);user-select:none}
#lista li:hover{background:var(--placa2)}
#lista li.sel{background:var(--filo2);color:var(--luz)}
#lista li.apagada .nom{text-decoration:line-through;opacity:.5}
#lista .num{font:12px var(--mono);color:var(--tx3);cursor:grab;touch-action:none}
#lista li.sel .num{color:var(--tx2)}
#lista .nom{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0;text-align:left;padding:0;cursor:pointer;color:inherit}
#lista button.mini{background:none;border:0;padding:0;width:20px;height:24px;font:12px/1 var(--sans);color:inherit;opacity:.55;cursor:pointer}
#lista button.mini:hover{opacity:1}
#lista button.ojo{width:12px;height:12px;border:1px solid currentColor;border-radius:50%;background:none;padding:0;cursor:pointer;opacity:.85}
#lista button.ojo[aria-pressed=true]{background:currentColor}

#controles{display:flex;flex-direction:column}
.fila{display:grid;grid-template-columns:76px minmax(0,1fr) 42px;align-items:center;gap:8px;min-height:28px}
.fila label, .fila>.et{font-size:12.5px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila output{font:12px var(--mono);text-align:right;color:var(--tx2);font-variant-numeric:tabular-nums}
.fila.sel-fila{grid-template-columns:76px minmax(0,1fr);margin:2px 0}
.fila.col-fila{grid-template-columns:76px minmax(0,1fr)}
.sep{height:1px;background:var(--filo);margin:8px 0}
.seg{display:flex;flex-wrap:wrap;gap:2px;padding:2px;background:var(--fondo);border-radius:var(--mx-r);min-width:0}
.seg button{flex:1 1 auto;border:0;border-radius:var(--mx-r);background:none;color:var(--tx);padding:0 5px;font-size:12px;cursor:pointer;height:24px;white-space:nowrap;transition:background-color .15s}
.seg button:hover{color:var(--luz);background:var(--placa2)}
.seg button[aria-pressed=true]{background:var(--filo2);color:var(--luz);font-weight:500}
.pozos{display:flex;gap:4px}
.pozo{position:relative;display:block;width:30px;height:22px;border-radius:var(--mx-r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer}
.pozo input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0}
.pozo:focus-within{outline:2px solid var(--acento);outline-offset:2px}
button.accion{border:0;border-radius:var(--mx-r);background:var(--placa2);padding:4px 8px;cursor:pointer;font-size:12px;width:100%;height:28px}

#sec-salida{position:sticky;bottom:0;z-index:2;background:var(--placa);border-bottom:0!important;border-top:1px solid var(--filo);margin-top:-1px}
.salida-fila{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:6px;margin-top:6px}
.salida-fila:first-of-type{margin-top:0}
.salida-fila .fuerte{padding:0 4px;height:28px}
#saca-png{background:var(--luz);color:var(--mx-fondo)}
#saca-png:hover{background:#fff}
#saca-video.grabando{color:var(--acento)}

/* consola */
.con-grupo{padding:10px 14px;border-right:1px solid var(--filo);flex:none;min-width:0}
.con-grupo h2{margin-bottom:7px}
.con-fuente{display:grid;grid-template-columns:auto auto;grid-template-rows:auto 1fr;column-gap:6px}
.con-fuente h2{grid-column:1/3}
#muestras{display:flex;gap:3px}
#muestras button{width:30px;height:42px;padding:0;border:0;border-radius:var(--mx-r);background:#000 center/cover;cursor:pointer;opacity:.78;position:relative;transition:opacity .15s}
#muestras button:hover{opacity:1}
#muestras button.pat{border-radius:50% / 22%}
#muestras button[aria-pressed=true]{opacity:1;outline:1px solid var(--luz);outline-offset:1px}
.abrir-col{display:flex;flex-direction:column;gap:2px;height:42px}
.abrir{display:flex;align-items:center;justify-content:center;width:58px;flex:1;min-height:0;border:0;border-radius:var(--mx-r);background:var(--placa2);padding:0;font-size:12px;color:var(--tx);cursor:pointer;transition:background-color .15s}
.abrir:hover{background:var(--filo2);color:var(--luz)}
#camara[aria-pressed=true]{background:var(--luz);color:var(--mx-fondo)}
#archivo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#archivo:focus-visible + .abrir, .abrir:focus-within{outline:2px solid var(--acento)}
.con-formato .seg{width:136px}
.con-formato .seg button{flex:1 1 30%;padding:0}
.firma{position:absolute;right:8px;bottom:5px;font:12px var(--sans);color:var(--tx3);text-decoration:none}
.firma:hover{color:var(--tx)}

#sin-webgl{position:fixed;inset:0;background:var(--fondo);display:flex;align-items:center;justify-content:center;padding:24px;z-index:9}
#sin-webgl[hidden]{display:none}
#sin-webgl p{max-width:42ch;font-size:15px;line-height:1.5}

@media (max-width:1100px){
  #consola{flex-wrap:wrap;overflow:visible}
  :root{--cons:152px}
  .con-fuente{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--filo)}
  .con-formato{flex:1 1 100%;border-right:0}
  .con-formato .seg{width:100%}
}
/* pantallas chicas: lienzo arriba, controles debajo */
@media (max-width:860px){
  body{height:auto;min-height:100dvh;overflow:auto;display:block}
  #barra{position:sticky;top:0;z-index:6;height:48px;padding:0 10px}
  #mesa{display:block}
  #banco{position:sticky;top:48px;z-index:5;height:min(56dvh,118vw);border-bottom:1px solid var(--filo)}
  #panel{border-left:0;overflow:visible}
  #consola{flex-wrap:wrap;overflow:visible;padding-bottom:24px}
  .con-grupo{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--filo)}
  #muestras{flex-wrap:wrap}
  #muestras button{width:36px;height:44px}
  .abrir-col{height:44px}.abrir{width:64px}
  .con-fuente{grid-template-columns:1fr auto}
  .con-formato .seg{width:auto}
  #sec-salida{position:static}
  .fila{min-height:36px}
  #agrega button{height:32px}
  #lista li{height:36px}
  .seg button{height:32px}
  #pie-pliego #fps{display:none}
  #pie-pliego{font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}