/* Pantalla LCD ámbar de matriz, LED de conexión, footswitches de escena y tempo */
.lcdbox { display: flex; flex-direction: column; gap: .35rem; }
.lcd { position: relative; width: 19.6rem; min-height: 6.5rem; padding: .5rem .7rem .45rem; border-radius: .4rem; border: .22rem solid #0a0908; color: #ffb23e;
  background: radial-gradient(ellipse at 50% 0%, #4a2d08 0%, #2a1704 55%, #190d02 100%);
  box-shadow: inset 0 .25rem .7rem rgba(0,0,0,.9), inset 0 0 1.2rem rgba(255,150,30,.18), 0 0 0 .1rem #4a4642, 0 .1rem 0 .16rem #1c1a19, 0 .3rem .6rem rgba(0,0,0,.6); font-family: var(--f-lcd); overflow: hidden; }
.lcd::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(10,5,0,.72) 52%) 0 0 / .19rem .19rem, linear-gradient(180deg, rgba(255,255,255,.07), transparent 38%); }
.lcd > div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; white-space: nowrap; text-shadow: 0 0 .35rem rgba(255,160,40,.85), 0 0 .08rem #ffd68a; }
.lcd .l1 { justify-content: flex-start; font-size: 1.95rem; line-height: 1.02; }
.lcd .slotno { padding: 0 .35rem; margin-right: .5rem; color: #1d0f02; background: #ffb23e; text-shadow: none; border-radius: .1rem; }
.lcd .name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; font: inherit; text-align: left; color: inherit; text-shadow: inherit; background: none; border: 0; padding: 0; cursor: text; letter-spacing: .02em; }
.lcd .name:hover { color: #ffe0a0; }
.lcd .name-edit { flex: 1; min-width: 0; font: inherit; color: #ffe0a0; background: rgba(255,178,62,.14); border: 0; outline: .08rem solid #ffb23e; padding: 0 .2rem; text-shadow: inherit; letter-spacing: .02em; text-transform: none; }
.lcd .l2 { font-size: 1.45rem; line-height: 1.02; margin-top: .2rem; }
.lcd .l3 { font-size: 1.22rem; line-height: 1; margin-top: .25rem; opacity: 1; color: #ffc766; }   /* la trama de puntos (::after) borroneaba la línea chica con opacidad .78 */
.lcd-leds { display: flex; align-items: center; gap: .5rem; padding-left: .2rem; font: 600 .66rem var(--f-body); letter-spacing: .16em; color: var(--cream-dim); }
.led-conn { width: .8rem; height: .8rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #777, #333 60%, #111); box-shadow: 0 0 0 .1rem #080706, inset 0 -.08rem .1rem rgba(0,0,0,.6); }
.led-conn.virtual { background: radial-gradient(circle at 35% 30%, #cfe6ff, #3d86ff 55%, #123a8a); box-shadow: 0 0 0 .1rem #080706, 0 0 .7rem #3d86ff, 0 0 1.4rem rgba(61,134,255,.55); }
.led-conn.real { background: radial-gradient(circle at 35% 30%, #d6ffdc, #36d65c 55%, #0e6a25); box-shadow: 0 0 0 .1rem #080706, 0 0 .7rem #36d65c, 0 0 1.4rem rgba(54,214,92,.55); }

.scenes { display: grid; grid-template-columns: repeat(3, 4.5rem); gap: .3rem .5rem; justify-items: center; }
.sw { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; }
.sw .led { width: 1.5rem; height: .4rem; border-radius: .1rem; background: #1f2b1d; box-shadow: 0 0 0 .08rem #050403, inset 0 .06rem .1rem rgba(0,0,0,.8); transition: all .15s; }
.sw.on .led { background: #6bff7c; box-shadow: 0 0 0 .08rem #050403, 0 0 .6rem #44ff5c, 0 0 1.2rem rgba(68,255,92,.6); }
.sw .foot { position: relative; width: 3.1rem; height: 3.1rem; border-radius: 50%; cursor: pointer; border: 0; font: 600 1.05rem var(--f-label); letter-spacing: .02em; color: #26282b; text-shadow: 0 .06rem 0 rgba(255,255,255,.6);
  background: radial-gradient(circle at 34% 28%, #fff 0, #e3e5e8 14%, #a3a8ae 42%, #62666c 75%, #2f3135 100%);
  box-shadow: 0 0 0 .2rem #0a0908, 0 0 0 .32rem #6f7378, 0 0 0 .4rem #0a0908, 0 .5rem .6rem .3rem rgba(0,0,0,.6), inset 0 -.15rem .3rem rgba(0,0,0,.45); transition: transform .06s; }
.sw .foot::before { content: ''; position: absolute; inset: .18rem; border-radius: 50%; background: repeating-conic-gradient(rgba(0,0,0,.14) 0 3deg, transparent 3deg 6deg); mask: radial-gradient(circle, transparent 66%, #000 68%); -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%); pointer-events: none; }
.sw .foot:active { transform: translateY(.14rem); }
.sw .sl { max-width: 4.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .66rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); }
.sw.on .sl { color: #bfffc6; }
.scenes .copy { grid-column: 1 / -1; width: 100%; margin-top: .2rem; }

.tempo { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.bpmbox { display: flex; align-items: center; gap: .3rem; padding: .25rem .35rem .25rem .55rem; border-radius: .3rem; border: .16rem solid #0a0908; background: radial-gradient(ellipse at 50% 0%, #4a2d08, #1d1004); box-shadow: inset 0 .15rem .4rem rgba(0,0,0,.9), 0 0 0 .08rem #4a4642; }
.bpmlab { font: 600 .6rem var(--f-body); letter-spacing: .16em; color: #b9741f; }
#bpm { width: 3.1rem; padding: 0; text-align: right; font: 1.95rem/1 var(--f-lcd); color: #ffb23e; background: none; border: 0; text-shadow: 0 0 .35rem rgba(255,160,40,.85); }
#bpm:focus { outline: .08rem solid #ffb23e; }
.bpmstep { display: flex; flex-direction: column; }
.bpmstep button { width: 1.3rem; height: 1.05rem; padding: 0; font-size: .7rem; line-height: 1; color: #ffb23e; background: rgba(255,178,62,.1); border: .06rem solid #3a2a0c; cursor: pointer; }
.bpmstep button:first-child { border-radius: .2rem .2rem 0 0; } .bpmstep button:last-child { border-radius: 0 0 .2rem .2rem; }
.bpmstep button:hover { background: rgba(255,178,62,.3); }
.key.tap { padding: .75rem .5rem .68rem; font-size: 1rem; letter-spacing: .22em; }
.key.tap.blink { background: linear-gradient(180deg, #ffd27a, #e6962e 60%, #bf7413); color: #1b130a; text-shadow: none; }

/* LED genérico de equipo */
.led { display: inline-block; }