/* ============================================================
   MODO LIBRE: MOVERSE POR TODO EL TABLERO (sólo desarrollo)
   ============================================================
   Tecla L. Mientras está puesto, el lienzo se puede arrastrar y alejar para
   ver el campo entero —index y las cinco secciones a la vez—; apagado, la
   página se comporta exactamente como siempre.

   LAS TRANSICIONES NO SE TOCAN. El paneo a mano va SIN transición (si no,
   arrastrar da tirones), pero los saltos a una zona siguen usando la
   panorámica de siempre: así se puede revisar el viaje además del sitio.
   ============================================================ */

/* el paneo a mano no puede ir con transición: se pone esta clase mientras
   se arrastra y se quita al soltar, sin tocar la regla original */
.lienzo.lb-suelto{ transition:none !important; }
.lb-agarrando, .lb-agarrando *{ cursor:grabbing !important; }
.lb-listo{ cursor:grab; }

/* ---------------- el panel ---------------- */
.lb-hud{
  position:fixed; z-index:102; left:14px; top:14px; width:250px;
  background:rgba(16,26,34,.93); color:#dfe9f0; border-radius:4px;
  font:600 11px/1.4 'Nunito', sans-serif;
  box-shadow:0 4px 20px rgba(0,0,0,.45);
  transition:opacity .18s ease, transform .18s ease;
}
.lb-hud.oculto{ opacity:0; pointer-events:none; transform:translateY(-8px); }
.lb-hud header{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid rgba(223,233,240,.16);
}
.lb-hud header b{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.lb-hud header .lb-sep{ flex:1; }
.lb-hud .lb-x{ border:0; background:transparent; color:#dfe9f0; opacity:.6; cursor:pointer; font-size:15px; line-height:1; }
.lb-hud .lb-x:hover{ opacity:1; }
.lb-cifras{
  padding:8px 10px; font:600 10.5px/1.6 'Consolas', monospace;
  color:#9fd0e8; letter-spacing:.02em;
}
.lb-cifras span{ color:#dfe9f0; }
.lb-rejilla{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; padding:0 10px 8px; }
.lb-hud button.lb-b{
  border:0; border-radius:3px; cursor:pointer; padding:5px 4px;
  background:rgba(223,233,240,.12); color:#dfe9f0;
  font:600 9.5px/1.2 'Nunito',sans-serif; letter-spacing:.05em; text-transform:uppercase;
}
.lb-hud button.lb-b:hover{ background:rgba(223,233,240,.26); }
.lb-hud button.lb-b.ancho{ grid-column:1 / -1; background:rgba(72,150,200,.3); }
.lb-hud button.lb-b.ancho:hover{ background:#4896c8; color:#0b1620; }
.lb-ayuda{ padding:0 10px 9px; font-size:9.5px; line-height:1.55; opacity:.6; }

/* la lengüeta para volver si se cierra el panel */
.lb-lengueta{
  position:fixed; z-index:102; left:0; top:96px;
  border:0; border-radius:0 3px 3px 0; cursor:pointer;
  background:rgba(16,26,34,.9); color:#dfe9f0;
  font:700 10px/1 'Nunito',sans-serif; letter-spacing:.14em;
  text-transform:uppercase; padding:9px 8px;
  writing-mode:vertical-rl; text-orientation:mixed;
  box-shadow:0 2px 12px rgba(0,0,0,.34);
  opacity:0; pointer-events:none; transform:translateX(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.lb-lengueta.ver{ opacity:.92; pointer-events:auto; transform:none; }
.lb-lengueta:hover{ opacity:1; background:#4896c8; color:#0b1620; }