/* Caracol · instrumento de caída. El color lo pone la imagen. */
: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);
  --sans:var(--mx-sans);
  --tit:var(--mx-sans);
  --mono:var(--mx-sans);
  --panel:324px; --barra:42px;
}
*{box-sizing:border-box}
html, body{margin:0;height:100%;background:var(--fondo);color:var(--tx);font:12px/1.3 var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
button, input, label, select{font:inherit;color:inherit}
h1, h2, p{margin:0;padding:0}
:focus{outline:none}
:focus-visible{outline:1.5px solid var(--luz);outline-offset:1px}

#barra{flex:none;height:var(--barra);display:flex;align-items:center;gap:16px;padding:0 14px;border-bottom:1px solid var(--filo);background:var(--placa)}
#barra h1{display:flex;align-items:center;gap:8px;;;}
#logo{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round}
#ajustes{display:flex;gap:1px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
#ajustes::-webkit-scrollbar{display:none}
#ajustes button{background:none;border:0;padding:6px 10px;color:var(--tx2);cursor:pointer;white-space:nowrap}
#ajustes button:hover{color:var(--luz)}
#ajustes button[aria-pressed=true]{color:var(--mx-fondo);background:var(--tx)}
.barra-der{display:flex;gap:6px;flex:none}
button.fuerte, #entrar, .boton, .chico{border:1px solid var(--filo2);background:none;padding:5px 12px;cursor:pointer;color:var(--tx)}
#entrar{min-width:68px}
#entrar:hover, button.fuerte:hover, .boton:hover, .chico:hover{border-color:var(--luz);color:var(--luz)}
#azar{background:var(--tx);color:var(--mx-fondo);border-color:var(--tx);font-weight:500}
#azar:hover{background:var(--luz);color:var(--mx-fondo)}

#mesa{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--panel)}
#banco{position:relative;background:var(--banco);overflow:hidden;min-height:0;display:flex;flex-direction:column;padding:18px 18px 0}
#marco-lienzo{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}
#escena{position:relative;flex:none;touch-action:none;overflow:hidden;background:#000}
#lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
#pie-lienzo{flex:none;height:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font:12px/12px var(--mono);color:var(--tx3)}
#pie-lienzo #fps{text-align:right}
#pie-lienzo #ficha{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pie-lienzo .seg{font:12px/1 var(--sans)}
#pie-lienzo .seg button{padding:5px 11px}
#aviso{position:absolute;left:50%;top:14px;transform:translateX(-50%);max-width:80%;padding:6px 10px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s}
#aviso.ver{opacity:1}
#suelta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);border:1px dashed #fff;margin:10px;pointer-events:none}
#suelta[hidden]{display:none}

/* asa del centro */
#centro{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:0;background:none;padding:0;cursor:grab;touch-action:none;z-index:2;opacity:.0;transition:opacity .2s}
#banco:hover #centro, #centro:focus-visible, #centro.arrastra{opacity:1}
#centro i{position:absolute;left:9px;top:9px;width:16px;height:16px;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35)}
#centro i::before, #centro i::after{content:"";position:absolute;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.6)}
#centro i::before{left:50%;top:-6px;bottom:-6px;width:1px;margin-left:-.5px}
#centro i::after{top:50%;left:-6px;right:-6px;height:1px;margin-top:-.5px}
#centro.arrastra{cursor:grabbing}
@media (hover:none){#centro{opacity:.4}}

/* panel */
#panel{background:var(--placa);border-left:1px solid var(--filo);overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:var(--filo2) transparent;padding-bottom:30px}
#panel section{padding:12px 14px 12px;border-bottom:1px solid var(--filo)}
h2{;;margin-bottom:10px;display:flex;gap:8px;align-items:baseline}
h2 .sub{;;text-transform:none;}
.nota{font:12px/1.35 var(--sans);color:var(--tx3);margin:6px 0 0}

#fuentes{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#fuentes button{position:relative;aspect-ratio:4/3;padding:0;border:1px solid var(--filo);background:#000 center/cover no-repeat;cursor:pointer;overflow:hidden}
#fuentes button span{position:absolute;left:0;right:0;bottom:0;padding:8px 3px 2px;font-size:12px;line-height:1;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))}
#fuentes button:hover{border-color:var(--tx2)}
#fuentes button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 1px #fff}
.fila-abrir{margin-top:8px}
.boton{display:block;text-align:center;font-size:12px}
#archivo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#archivo:focus-visible + *{outline:1.5px solid #fff}
.boton:has(+ #archivo:focus-visible){outline:1.5px solid #fff;outline-offset:1px}

#mini-caja{background:#000;margin-top:8px;display:flex;justify-content:center;border:1px solid var(--filo)}
#mini{display:block;width:100%;height:auto;max-width:100%;cursor:crosshair;touch-action:none}
.chico[hidden]{display:none}
.chico{margin-top:8px;padding:3px 9px;font-size:12px;color:var(--tx2)}

.seg{display:flex;gap:0;border:1px solid var(--filo2)}
.seg button{flex:1;background:none;border:0;border-right:1px solid var(--filo2);padding:6px 4px;cursor:pointer;color:var(--tx2);white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--luz)}
.seg button[aria-pressed=true]{background:var(--tx);color:var(--mx-fondo)}

.fila{display:grid;grid-template-columns:86px minmax(0,1fr) 44px;align-items:center;gap:8px;margin-top:9px;min-height:20px}
.fila[hidden]{display:none}
.fila label{color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila output{font:12px/1 var(--mono);color:var(--tx);text-align:right}
#sentido{margin-bottom:0}

.salida{display:flex;gap:8px;align-items:center;margin-top:8px}
.salida .seg{flex:1}
.salida .nota{flex:1;margin:0}
.salida button.fuerte{flex:none;min-width:96px}
button:disabled{opacity:.4;cursor:default}

.firma{display:block;margin:12px 14px 0;font:12px/1 var(--sans);color:var(--tx3);text-decoration:none}
#salida{position:fixed;left:-99999px;top:0;width:16px;height:16px;pointer-events:none}

@media (max-width:760px){
  body{height:auto;min-height:100dvh;overflow:auto}
  #mesa{display:flex;flex-direction:column;flex:none}
  #banco{flex:none;padding:0}
  #marco-lienzo{flex:none}
  #pie-lienzo #fps{display:none}
  #pie-lienzo{grid-template-columns:1fr auto}
  #pie-lienzo{height:40px;padding:0 12px}
  #panel{border-left:0;border-top:1px solid var(--filo);overflow:visible}
  #barra{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  #ajustes{order:3;flex-basis:100%}
  .barra-der{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Moxen: lo propio de esta herramienta ── */
#logo { display: none; }