/* ============================================================
   MicrobitLab — blocks.css
   Caja de herramientas, panel desplegable de bloques, lienzo de
   programación y aspecto de los bloques.

   GEOMETRÍA CALCADA DEL EDITOR OFICIAL (MakeCode), medida sobre
   sus trazados SVG y llevada a su escala por defecto (0,9):
     · fila de instrucción / evento ... 43 px de alto
     · muesca y lengüeta ............... 32 × 7 px, a 11 px del borde
     · brazo de los bloques en C ....... 14 px
     · boca vacía de la C .............. 22 px · pie de la C: 29 px
     · LED de «mostrar leds» ........... 22 px, blanco encendido

   La forma de puzle se dibuja con dos pseudoelementos recortados
   con una máscara SVG (la curva suave del original):
     ::before  muesca (hueco) arriba, del color de lo que hay detrás
               (--lienzo)
     ::after   lengüeta abajo, del color del propio bloque, con
               z-index:1 para que tape la muesca del bloque de abajo
               y los dos se vean como una sola pieza continua.
   ============================================================ */

.blk,#flyout,#mundo,#fantasma{
  --notch-x:11px;          /* distancia del borde izquierdo a la muesca */
  --notch-w:32px;
  --notch-h:7px;
  --brazo:14px;            /* lomo de la C */
  --led-celda:22px;
  /* Muesca: trapecio de curvas suaves, ancho arriba y estrecho abajo. */
  --m-muesca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0c2 0 3 1 4 2l4 4c1 1 2 2 4 2h12c2 0 3-1 4-2l4-4c1-1 2-2 4-2z'/%3E%3C/svg%3E");
  /* Lengüeta: la misma curva con 1 px de solape hacia arriba para que no quede costura. */
  --m-lengueta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 9' preserveAspectRatio='none'%3E%3Cpath d='M0 0h36v1c-2 0-3 1-4 2l-4 4c-1 1-2 2-4 2h-12c-2 0-3-1-4-2l-4-4c-1-1-2-2-4-2z'/%3E%3C/svg%3E");
}

/* ════════════════ CAJA DE HERRAMIENTAS ════════════════
   Filas con franja de color a la izquierda, icono y nombre en el
   color de la categoría; la categoría abierta se rellena de su
   color con el texto en blanco.  Al pulsar una, los bloques
   aparecen en #flyout, superpuesto al lienzo.                     */
#paleta{
  display:flex;flex-direction:column;min-width:0;
  background:var(--panel);border-right:1px solid var(--border);
  z-index:26;
}
.tbx-buscar{
  position:relative;display:flex;align-items:center;flex:0 0 auto;
  height:48px;border-bottom:1px solid var(--border);cursor:text;
}
.tbx-buscar input{
  width:100%;height:100%;border:0;background:transparent;outline:none;
  padding:0 44px 0 18px;font-size:16px;color:var(--text);
}
.tbx-buscar input::placeholder{color:var(--text-3);opacity:1}
.tbx-buscar input::-webkit-search-cancel-button{display:none}
.tbx-buscar svg.i{position:absolute;right:14px;width:21px;height:21px;color:var(--text-3)}
.tbx-buscar:focus-within{box-shadow:inset 0 -2px 0 var(--mc-azul)}
.tbx-buscar.activa svg.i{color:var(--mc-azul)}

.tbx-lista{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 0 16px;min-height:0}

/* Filas compactas (36 px), como en el editor oficial. */
.tbx-cat{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  height:36px;padding:0 10px 0 20px;margin:0;border:0;
  border-bottom:1px solid var(--border);
  background:transparent;color:var(--col,#888);
  font-size:16px;font-weight:400;text-align:left;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
}
.tbx-cat::before{                           /* franja de color */
  content:'';position:absolute;left:0;top:0;bottom:-1px;width:8px;background:var(--col,#888);
}
.tbx-cat .ico{display:flex;flex:0 0 auto;--ico-hueco:var(--panel)}
.tbx-cat .ico svg{width:21px;height:21px;display:block}
.tbx-cat .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbx-cat:hover{background:var(--panel-2)}
.tbx-cat:hover .ico{--ico-hueco:var(--panel-2)}
.tbx-cat[aria-selected="true"]{background:var(--col,#888);color:#fff}
/* Bloqueada por el docente: el estudiante la ve apagada y con candado */
.tbx-cat .candado{flex:0 0 auto;font-size:12px;margin-left:2px}
.tbx-cat.bloqueada[aria-disabled="true"]{opacity:.45;filter:grayscale(.85);cursor:not-allowed}
.tbx-cat.bloqueada[aria-disabled="true"]:hover{background:transparent}
.tbx-cat[aria-selected="true"] .ico{--ico-hueco:var(--col,#888)}
.tbx-cat:focus-visible{outline:2px solid var(--col);outline-offset:-3px;border-radius:0}

/* Fila «…más» bajo la categoría abierta */
.tbx-cat.tbx-mas{height:30px;padding-left:52px;font-size:15px}
.tbx-cat.tbx-mas::before{width:8px}
.tbx-cat.tbx-mas .nm{font-style:normal}

.tbx-sep{height:5px;background:var(--panel-2);border-bottom:1px solid var(--border)}
.tbx-avanzado{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  height:38px;padding:0 10px 0 20px;margin-top:6px;border:0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;
  font-size:16px;font-weight:400;text-align:left;
}
.tbx-avanzado::before{content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:8px;background:#0f2a2a}
.tbx-avanzado:hover{background:var(--panel-2)}
.tbx-avanzado .fl{display:flex;transition:transform var(--t-fast)}
.tbx-avanzado .fl svg{width:21px;height:21px}
.tbx-avanzado.abierto .fl{transform:rotate(180deg)}
.tbx-nota{padding:10px 14px;color:var(--text-3);font-size:12px;line-height:1.5}

/* ════════════════ PANEL DESPLEGABLE DE BLOQUES ════════════════
   Gris oscuro, como el del editor oficial.                        */
#flyout{
  position:absolute;left:0;top:0;bottom:0;z-index:24;
  display:flex;flex-direction:column;
  width:max-content;min-width:270px;max-width:min(560px,82%);
  background:#4b4949;color:#fff;
  box-shadow:6px 0 18px rgba(0,0,0,.28);
  animation:fly-entra .16s ease;
  --lienzo:#4b4949;
}
html[data-tema="oscuro"] #flyout{background:#2b2d31;--lienzo:#2b2d31;box-shadow:6px 0 18px rgba(0,0,0,.55)}
@keyframes fly-entra{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.fly-cab{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:10px 8px 6px 16px;background:transparent;color:#fff;
}
.fly-cab .fly-punto{display:flex;flex:0 0 auto;color:var(--col,#888);--ico-hueco:#4b4949}
.fly-cab .fly-punto svg{width:22px;height:22px;display:block}
html[data-tema="oscuro"] .fly-cab .fly-punto{--ico-hueco:#2b2d31}
.fly-cab b{flex:1 1 auto;font-size:18px;font-weight:600;white-space:nowrap;letter-spacing:.01em}
.fly-cab .btn.fantasma{color:#fff}
.fly-cab .btn.fantasma:hover{background:rgba(255,255,255,.16)}
.fly-lista{flex:1 1 auto;overflow-y:auto;overflow-x:auto;min-height:0;
  /* el hueco de la derecha deja sitio a la estrella de favoritos */
  padding:6px 34px 26px 16px}

/* Título de grupo dentro del panel («Melodía», «Tono», «micro:bit (V2)»…) */
.fly-grupo{
  margin:14px 0 10px;padding-bottom:5px;
  font-size:14.5px;font-weight:600;color:#fff;letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.28);max-width:260px;
}
.fly-grupo:first-child{margin-top:4px}

/* Bloque dentro del panel desplegable */
.pal-blk{display:block;width:max-content;margin:0 0 15px;cursor:grab;user-select:none;position:relative}
.pal-blk:active{cursor:grabbing}
.pal-blk .blk{pointer-events:none}
.pal-blk .fav{
  position:absolute;right:-24px;top:9px;width:20px;height:20px;border:0;border-radius:50%;
  background:transparent;color:rgba(255,255,255,.7);font-size:13px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity var(--t-fast);z-index:3;
}
.pal-blk:hover .fav,.pal-blk .fav.on{opacity:1}
.pal-blk .fav.on{color:#ffc53d}
.pal-vacia{padding:16px 4px;color:rgba(255,255,255,.75);font-size:12.5px;line-height:1.5;max-width:260px}

/* Botones de crear variable / función */
.pal-accion{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:216px;
  margin:2px 0 12px;padding:9px 12px;border:1px dashed var(--border-2);border-radius:var(--r-m);
  background:transparent;color:var(--text-2);font-weight:700;font-size:12.5px;cursor:pointer;
}
.pal-accion:hover{border-color:var(--acc);color:var(--text);background:var(--panel-2)}
/* En el panel oscuro, como el botón «Crear una variable…» del original */
#flyout .pal-accion{
  border:1px solid rgba(0,0,0,.35);background:#e6e6e6;color:#222;border-radius:4px;
  font-size:14px;font-weight:600;padding:9px 14px;margin:8px 0 14px;
}
#flyout .pal-accion:hover{background:#fff;color:#000}

/* Barra de desplazamiento del panel: más ancha (20 px) para agarrarla fácil.
   `auto` devuelve el control a ::-webkit-scrollbar en Chrome/Edge. */
.fly-lista{scrollbar-width:auto;scrollbar-color:auto}
.fly-lista::-webkit-scrollbar{width:20px;height:20px}
.fly-lista::-webkit-scrollbar-track{background:rgba(0,0,0,.18)}
.fly-lista::-webkit-scrollbar-thumb{background:rgba(255,255,255,.42);border:4px solid transparent;border-radius:10px;background-clip:content-box}
.fly-lista::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.62);background-clip:content-box}
.fly-lista::-webkit-scrollbar-corner{background:transparent}

/* ════════════════ LIENZO ════════════════ */
#lienzo{
  position:absolute;inset:0;overflow:auto;
  background-color:var(--bg);
  /* Rejilla de crucecitas (2,4 px, 20 % del tamaño original) cada 60 px (azulejo SVG en línea). */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 28.8v2.4M28.8 30h2.4' stroke='%23cbd2d8' stroke-width='1'/%3E%3C/svg%3E");
  background-size:60px 60px;
  /* En tableta el lienzo se desplaza con el dedo; el arrastre de un
     bloque se reserva con touch-action:none en el propio bloque.     */
  touch-action:pan-x pan-y;
  /* Barras de desplazamiento del área de trabajo: 200 % más gruesas
     (30 px en vez de 10 px).  `auto` en scrollbar-width/color es lo
     que deja actuar a ::-webkit-scrollbar en Chrome/Edge.            */
  scrollbar-width:auto;scrollbar-color:auto;
}
#lienzo::-webkit-scrollbar{width:30px;height:30px}
#lienzo::-webkit-scrollbar-track{background:transparent}
#lienzo::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border:6px solid transparent;border-radius:15px;background-clip:content-box}
#lienzo::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.36);background-clip:content-box}
#lienzo::-webkit-scrollbar-corner{background:transparent}
html[data-tema="oscuro"] #lienzo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);background-clip:content-box}
html[data-tema="oscuro"] #lienzo::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36);background-clip:content-box}
html[data-tema="oscuro"] #lienzo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 28.8v2.4M28.8 30h2.4' stroke='%233a4049' stroke-width='1'/%3E%3C/svg%3E")}
#mundo{position:relative;width:4000px;height:3000px;transform-origin:0 0}
/* Arrastrar el fondo mueve el área de trabajo (mano), sin seleccionar texto. */
#lienzo{cursor:grab;-webkit-user-select:none;user-select:none}
#lienzo.paneando,#lienzo.paneando *{cursor:grabbing!important}
#lienzo input,#lienzo textarea{-webkit-user-select:text;user-select:text}

/* Herramientas flotantes del lienzo */
.lienzo-tools{
  position:absolute;right:12px;bottom:12px;z-index:12;
  display:flex;flex-direction:column;gap:5px;
}
.lienzo-tools .btn{width:34px;padding:0;background:var(--panel);box-shadow:var(--sh-2)}
.lienzo-info{
  position:absolute;left:12px;bottom:36px;z-index:12;display:flex;gap:6px;align-items:center;
  font-size:11.5px;color:var(--text-3);background:var(--panel);border:1px solid var(--border);
  border-radius:999px;padding:3px 11px;box-shadow:var(--sh-1);pointer-events:none;
}

/* Papelera: abajo a la derecha, junto a los controles de zoom, para
   no quedar debajo del panel desplegable de bloques. */
#papelera{
  position:absolute;right:40px;bottom:40px;z-index:14;
  width:54px;height:54px;border-radius:50%;
  display:none;align-items:center;justify-content:center;font-size:24px;
  background:var(--panel);border:2px dashed var(--border-2);box-shadow:var(--sh-2);
  transition:transform var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
#papelera.visible{display:flex;animation:ml-pop .15s ease}
#papelera.activa{border-color:var(--err);background:rgba(224,49,49,.14);transform:scale(1.18)}

/* ════════════════ BLOQUES ════════════════ */
.pila{position:absolute;z-index:1;width:fit-content}
.pila.arrastrando{z-index:60;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}

/* Los bloques se ajustan a su contenido (fit-content); si ocuparan
   todo el ancho disponible, una pila se vería como barras enormes. */
/* El relleno, el contorno y la forma de puzle (muesca, lengüeta, boca
   de la C) los dibuja el <svg class="blk-forma"> que render.js pone
   detrás de cada bloque; las filas son transparentes.  `isolation`
   hace que ese svg (z-index:-1) quede detrás del contenido del propio
   bloque pero no detrás del bloque anterior: así la lengüeta del de
   arriba se ve por el hueco de la muesca del de abajo. */
.blk{
  position:relative;display:block;width:fit-content;min-width:58px;isolation:isolate;
  font:600 14.4px/1.2 Consolas,Monaco,Menlo,'Ubuntu Mono','Cascadia Mono',monospace;
}
.blk-forma{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none}
.blk-forma path{
  fill:var(--col,#666);
  stroke:rgba(0,0,0,.26);stroke-width:1;stroke-linejoin:round;
  transition:stroke .12s,stroke-width .12s;
}
/* En el lienzo el propio trazado recibe el puntero: la mano sale en
   todo el bloque (lomo y pie de la C incluidos), no solo arriba. */
#mundo .blk-forma path{pointer-events:visiblePainted;cursor:grab}
#mundo .blk-forma path:active{cursor:grabbing}
.blk-fila{
  position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;
  min-height:43px;padding:5px 9px 5px 8px;
  color:#fff;
  cursor:grab;user-select:none;
}
.blk-fila:active,.blk-rama:active,.blk-pie:active{cursor:grabbing}
.blk-rama,.blk-pie{cursor:grab}
.blk-fila,.blk-rama,.blk-pie,.pal-blk{touch-action:none}
.blk-fila > .et,.blk-rama > .et{white-space:nowrap}

/* Sombrero (eventos): arriba plano con esquinas redondeadas, sin conectores. */
.blk.hat > .blk-fila{min-height:43px;padding-top:5px;min-width:144px}
.blk.hat > .blk-pie{min-width:144px}

/* Contenedor en C */
.blk-cuerpo{
  position:relative;min-height:22px;
  border-left:var(--brazo) solid transparent;   /* el «lomo» de la C (lo pinta la silueta) */
  padding:0;
  /* Lo que hay dentro NO ensancha la C: la fila de arriba y el pie
     miden lo que su texto, y los bloques interiores más anchos
     sobresalen por la derecha (como en el editor oficial). */
  contain:inline-size;
}
/* La boca vacía de la C deja pasar el puntero al lienzo (como en el
   original); el lomo lo recibe la silueta de detrás. */
#mundo .blk-cuerpo{pointer-events:none}
#mundo .blk-cuerpo > *{pointer-events:auto}
.blk-cuerpo > .blk{width:max-content}
.blk-cuerpo.vacio{min-height:22px}
.blk-pie{position:relative;min-height:29px;min-width:72px}
.blk-rama{
  position:relative;display:flex;align-items:center;gap:6px;min-height:36px;padding:5px 9px 5px 8px;
  color:#fff;
}

/* Bloques de valor (redondos) y booleanos (hexagonales) */
.blk.valor,.blk.bool{display:inline-block;vertical-align:middle;min-width:0}
.blk.valor > .blk-fila{min-height:32px;padding:2px 11px}
.blk.bool > .blk-fila{min-height:32px;padding:2px 17px}
/* Un valor encajado dentro de otro bloque queda un poco más bajo. */
.ranura > .blk.valor > .blk-fila,.ranura > .blk.bool > .blk-fila{min-height:30px}

/* «mostrar leds» / «crear imagen»: texto arriba, cuadrícula debajo */
.blk-fila.con-mat{flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px 10px 8px}

/* ── Campos dentro de un bloque ──
   Números y textos: píldora blanca con texto gris oscuro.
   Menús desplegables: cápsula oscura con texto blanco y ▾.        */
.cmp{
  flex:0 0 auto;height:28px;min-width:34px;max-width:260px;
  font:600 14.4px/1 Consolas,Monaco,Menlo,'Ubuntu Mono','Cascadia Mono',monospace;
  padding:0 9px;border:0;border-radius:999px;
  background:#fff;color:#575e75;
  text-align:center;
}
.cmp:focus{outline:2px solid #fff;outline-offset:1px}
.cmp.txt{text-align:left;min-width:44px}
select.cmp{
  padding:0 26px 0 11px;text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none;
  color:#fff;background-color:rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.22);
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select.cmp:hover{background-color:rgba(0,0,0,.3)}
select.cmp option{color:#1f1f1f;background:#fff}
select.cmp.var{background-color:rgba(0,0,0,.2);color:#fff}
span.cmp.var{display:inline-flex;align-items:center;background:rgba(0,0,0,.2);color:#fff;border:1px solid rgba(0,0,0,.22)}

/* Selector de ícono (como el oficial): caja oscura con la miniatura
   5×5 (LEDs blancos, apagados en azul oscuro) y un ▼ blanco. */
.cmp-ico{
  position:relative;display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:6px 11px 6px 7px;border-radius:5px;
  background:rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.14);cursor:pointer;
}
.cmp-ico .mini{
  display:grid;grid-template-columns:repeat(5,6px);gap:2px;flex:0 0 auto;
}
.cmp-ico .mini i{width:6px;height:6px;border-radius:1.5px;background:rgba(0,0,0,.34)}
.cmp-ico .mini i.on{background:#fff}
.cmp-ico .flecha{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #fff}
.cmp-ico:hover{background:rgba(0,0,0,.26)}
.cmp-ico:focus-visible{outline:2px solid #fff;outline-offset:1px}
.cmp-ico[aria-expanded="true"]{background:rgba(0,0,0,.3)}

/* Cuadrícula desplegable de íconos: del color del bloque, 5 columnas,
   el elegido en oscuro con borde claro. */
.ico-pop{
  position:fixed;z-index:320;display:grid;grid-template-columns:repeat(5,68px);gap:8px;
  max-height:min(430px,calc(100vh - 24px));overflow-y:auto;overscroll-behavior:contain;
  padding:9px 8px 9px 9px;border-radius:4px;
  background:var(--col,#1e90ff);border:1px solid rgba(0,0,0,.28);
  box-shadow:0 6px 22px rgba(0,0,0,.32);
  animation:ml-pop .12s ease;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.55) rgba(0,0,0,.12);
}
.ico-pop::-webkit-scrollbar{width:14px}
.ico-pop::-webkit-scrollbar-track{background:#f1f1f1}
.ico-pop::-webkit-scrollbar-thumb{background:#a8a8a8;border:3px solid #f1f1f1;border-radius:7px}
.ico-celda{
  width:68px;height:68px;display:flex;align-items:center;justify-content:center;padding:0;
  background:transparent;border:1px solid rgba(0,0,0,.24);border-radius:4px;cursor:pointer;
  transition:background .1s,box-shadow .1s;
}
.ico-celda:hover{background:rgba(255,255,255,.14)}
.ico-celda:focus{outline:none}
.ico-celda:focus-visible{box-shadow:0 0 0 2px #fff}
.ico-celda.sel{background:rgba(0,0,0,.3);border-color:rgba(0,0,0,.35);box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.ico-mat{display:grid;grid-template-columns:repeat(5,8px);gap:3px}
.ico-mat i{width:8px;height:8px;border-radius:1.5px;background:rgba(0,0,0,.3)}
.ico-mat i.on{background:#fff}

/* Ranura para encajar bloques de valor */
.ranura{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:28px;border-radius:999px;
  background:rgba(0,0,0,.2);
}
.ranura.bool{
  min-width:50px;border-radius:0;background:transparent;position:relative;z-index:0;
}
.ranura.bool::before{
  content:'';position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.24);
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.ranura.ok{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
.ranura > .blk{margin:0}

/* Editor de matriz de LEDs dentro del bloque (22 px, blanco encendido) */
.mat5{
  display:grid;grid-template-columns:repeat(5,var(--led-celda));gap:5px 6px;
  padding:2px 2px 0;
}
.mat5 b{
  width:var(--led-celda);height:var(--led-celda);border-radius:4.5px;
  background:rgba(0,0,0,.2);cursor:pointer;
  transition:background var(--t-fast);
}
.mat5 b:hover{background:rgba(255,255,255,.35)}
.mat5 b.on{background:#fff}
.mat5 b.on:hover{background:#f1f1f1}
.mat5.ancha{--led-celda:18px;gap:4px 5px}

/* Botones ⊕ / ⊖ de las ramas del «si» */
.mini-btn{
  width:22px;height:22px;border:2px solid rgba(255,255,255,.9);border-radius:50%;cursor:pointer;
  background:transparent;color:#fff;font:700 16px/1 Arial,sans-serif;
  display:inline-flex;align-items:center;justify-content:center;padding:0 0 1px;
}
.mini-btn:hover{background:rgba(255,255,255,.22)}

/* ── Estados ──
   Se pinta el CONTORNO completo de la silueta (fila, lomo, boca y pie
   de la C), no solo la fila de arriba. */
.blk.ejecutando > .blk-forma path{
  stroke:#ffd43b;stroke-width:4;
  filter:drop-shadow(0 0 5px rgba(255,212,59,.9));
}
.blk.error > .blk-forma path{stroke:var(--err);stroke-width:4;filter:drop-shadow(0 0 5px rgba(224,49,49,.7))}
.blk.resaltado > .blk-forma path{animation:ml-late 1.1s ease 2}
@keyframes ml-late{0%,100%{stroke:rgba(0,0,0,.26);stroke-width:1}50%{stroke:#fff;stroke-width:4}}
.blk.deshabilitado{opacity:.45;filter:grayscale(.6)}

/* Marca de inserción al arrastrar: solo para las ranuras de valor.
   Las instrucciones muestran en su lugar un «hueco» gris con la forma
   del bloque (.marcador-ins) que ensancha el bloque destino. */
#marca{
  position:absolute;z-index:55;pointer-events:none;display:none;
  border:3px solid #ffd43b;border-radius:999px;box-shadow:0 0 10px rgba(255,212,59,.7);
}

/* Hueco de inserción: silueta gris de lo que se va a soltar, metida
   en el sitio exacto.  El bloque que la recibe crece para hacerle
   sitio (su silueta se rehace sola con el ResizeObserver). */
.marcador-ins{width:max-content;pointer-events:none}
.marcador-ins .blk-forma path{fill:rgba(0,0,0,.2);stroke:rgba(0,0,0,.28);pointer-events:none!important}
.marcador-ins .blk-fila,.marcador-ins .blk-rama,.marcador-ins .blk-pie{visibility:hidden}
html[data-tema="oscuro"] .marcador-ins .blk-forma path{fill:rgba(255,255,255,.2);stroke:rgba(255,255,255,.3)}

/* Fantasma que sigue al puntero */
#fantasma{position:fixed;z-index:400;pointer-events:none;opacity:.92;display:none;transform-origin:0 0;--lienzo:var(--bg)}

/* Menú contextual */
#ctx{
  position:fixed;z-index:180;min-width:198px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-m);
  box-shadow:var(--sh-3);padding:5px;display:none;animation:ml-pop .12s ease;
}
#ctx button{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;
  background:transparent;border:0;border-radius:var(--r-s);cursor:pointer;
  font-size:12.8px;font-weight:600;color:var(--text);text-align:left;
}
#ctx button:hover{background:var(--panel-3)}
#ctx button[disabled]{opacity:.4;cursor:not-allowed}
#ctx button .k{margin-left:auto;font-size:10.5px;color:var(--text-3);font-family:var(--f-mono)}
#ctx hr{border:0;border-top:1px solid var(--border);margin:4px 2px}
#ctx .peli{color:var(--err)}

/* Selección múltiple: rectángulo de goma */
#goma{
  position:absolute;z-index:50;border:1.5px dashed var(--acc);
  background:rgba(52,84,209,.12);pointer-events:none;display:none;border-radius:4px;
}

/* ════════════════ EDITOR DE JAVASCRIPT ════════════════ */
#vistaJS{display:none;position:absolute;inset:0;flex-direction:column;background:var(--panel)}
#vistaJS.on{display:flex}
.js-barra{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-bottom:1px solid var(--border);flex:0 0 auto;flex-wrap:wrap;
}
.js-barra .nota{font-size:11.5px;color:var(--text-3);margin-left:auto}
.js-wrap{flex:1 1 auto;position:relative;min-height:0;display:flex}
.js-num{
  flex:0 0 auto;margin:0;padding:10px 8px 10px 12px;text-align:right;
  font-family:var(--f-mono);font-size:12.8px;line-height:1.55;
  color:var(--text-3);background:var(--panel-2);border-right:1px solid var(--border);
  user-select:none;overflow:hidden;white-space:pre;
}
/* Editor con colores: el <textarea> (texto transparente, solo se ve el
   cursor y la selección) va encima de un <pre> que pinta el mismo texto
   coloreado.  Ambos comparten fuente, relleno y desplazamiento. */
.js-editor{flex:1 1 auto;position:relative;min-width:0;background:var(--panel)}
#codigoJS,.js-color{
  position:absolute;inset:0;margin:0;border:0;padding:10px 14px;
  font-family:var(--f-mono);font-size:12.8px;line-height:1.55;font-weight:400;
  tab-size:4;white-space:pre;letter-spacing:0;word-spacing:0;font-variant-ligatures:none;
}
#codigoJS{
  width:100%;height:100%;outline:none;resize:none;overflow:auto;z-index:1;
  background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--text);
}
#codigoJS::selection{background:rgba(52,84,209,.28);color:transparent;-webkit-text-fill-color:transparent}
.js-color{overflow:hidden;pointer-events:none;color:#000;z-index:0}
/* Colores del editor JavaScript de MakeCode (tema claro de Monaco + un
   color por espacio de nombres, el mismo de su categoría de bloques). */
.js-color .k{color:#0000ff}          /* palabras clave: let, function, if… */
.js-color .s{color:#a31515}          /* textos */
.js-color .n{color:#098658}          /* números */
.js-color .c{color:#008000}          /* comentarios */
.js-color .ns{color:var(--ns,#000)}  /* basic, input, music… y su función */
html[data-tema="oscuro"] .js-color{color:#d4d4d4}
html[data-tema="oscuro"] .js-color .k{color:#569cd6}
html[data-tema="oscuro"] .js-color .s{color:#ce9178}
html[data-tema="oscuro"] .js-color .n{color:#b5cea8}
html[data-tema="oscuro"] .js-color .c{color:#6a9955}
html[data-tema="oscuro"] .js-color .ns{color:var(--ns-osc,var(--ns,#d4d4d4))}
.js-estado{
  flex:0 0 auto;padding:7px 12px;border-top:1px solid var(--border);
  font-size:12px;display:flex;align-items:center;gap:8px;background:var(--panel-2);
}
.js-estado.err{color:var(--err)}
.js-estado.ok{color:var(--ok)}

/* Bloque seleccionado (clic o rectángulo de selección) */
.blk.sel2 > .blk-forma path{stroke:#ffd43b;stroke-width:3.5}

/* Nota/comentario adjunto a un bloque */
.blk-nota{
  display:block;margin-left:14px;margin-bottom:-2px;padding:2px 9px;
  background:#fff3bf;color:#5c4200;border-radius:6px 6px 0 0;
  font-size:11px;font-weight:600;max-width:260px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-tema="oscuro"] .blk-nota{background:#4a3c10;color:#ffe8a3}

/* Tema oscuro: los colores de categoría más oscuros se aclaran solo
   en el texto de la caja de herramientas, para que se puedan leer. */
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="led"]{color:#b48ae8}
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="matematicas"]{color:#c77dff}
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="funciones"]{color:#8fa6ff}
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="serial"]{color:#8fb0e0}
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="control"]{color:#c9c9c9}
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="pines"]{color:#ff6b6b}
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="juego"]{color:#3fcf8e}
html[data-tema="oscuro"] .tbx-cat:not([aria-selected="true"])[data-cat^="imagenes"]{color:#c77dff}
html[data-tema="oscuro"] .tbx-avanzado::before{background:#6b7a7a}

/* ════════════════ DESPLEGABLE CON DIBUJOS (gestos) ════════════════
   En el bloque: un menú normal (texto + ▾).  Abierto: 4 columnas del
   color del bloque, dibujo blanco/cian arriba y nombre recortado. */
span.cmp-menu{
  display:inline-flex;align-items:center;cursor:pointer;
  padding:0 26px 0 11px;color:#fff;background-color:rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.22);
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;white-space:nowrap;
}
span.cmp-menu:hover,span.cmp-menu[aria-expanded="true"]{background-color:rgba(0,0,0,.3)}
span.cmp-menu:focus-visible{outline:2px solid #fff;outline-offset:1px}
.ico-pop.pic-pop{grid-template-columns:repeat(4,108px);gap:10px;padding:10px;max-height:min(520px,calc(100vh - 24px))}
.pic-celda{
  width:108px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px 5px 8px;background:transparent;border:1px solid rgba(0,0,0,.2);border-radius:4px;cursor:pointer;
  color:var(--col,#d400d4);transition:background .1s,box-shadow .1s;
}
.pic-celda:hover{background:rgba(255,255,255,.14)}
.pic-celda:focus{outline:none}
.pic-celda:focus-visible{box-shadow:0 0 0 2px #fff}
.pic-celda.sel{background:rgba(0,0,0,.28);border-color:rgba(0,0,0,.3)}
.pic-img{display:block;width:84px;height:67px}
.pic-img svg{display:block;width:100%;height:100%}
.pic-txt{
  display:block;max-width:100%;color:#fff;font:400 14px/1.2 var(--f-ui);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ════════════════ CAMPO MELODÍA ════════════════ */
.cmp-mel{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:30px;
  padding:0 10px 0 9px;border-radius:999px;cursor:pointer;
  background:#e9e9ec;border:1px solid rgba(0,0,0,.22);
}
.cmp-mel:hover{background:#fff}
.cmp-mel:focus-visible{outline:2px solid #fff;outline-offset:1px}
.cmp-mel .mel-nota{font-size:16px;line-height:1;color:#575e75}
.mel-res{display:inline-flex;gap:2px}
.mel-res i{width:7px;height:16px;border-radius:2px;background:#fff;border:1px solid rgba(0,0,0,.28)}

.mel-pop{
  position:fixed;z-index:320;width:352px;border-radius:4px;overflow:hidden;
  background:var(--col,#e63022);border:1px solid rgba(0,0,0,.3);
  box-shadow:0 6px 22px rgba(0,0,0,.32);animation:ml-pop .12s ease;
  font-family:var(--f-ui);
}
.mel-cab{padding:9px 0 9px;display:flex;justify-content:center}
.mel-tabs{display:flex;background:rgba(0,0,0,.18);border:2px solid rgba(0,0,0,.18);border-radius:6px;padding:0}
.mel-tab{
  width:122px;height:42px;border:0;border-radius:4px;background:transparent;cursor:pointer;
  color:#fff;font:400 19px/1 var(--f-ui);
}
.mel-tab[aria-selected="true"]{background:#fff;color:var(--col,#e63022)}
.mel-tab:focus-visible{outline:2px solid #fff;outline-offset:1px}
.mel-marco{background:rgba(0,0,0,.26);padding:20px 0 18px}
.mel-cuerpo{display:flex;flex-direction:column;align-items:center}
.mel-rejilla{display:grid;grid-template-columns:repeat(8,34px);gap:6px}
.mel-celda{
  width:34px;height:36px;padding:0;border-radius:6px;cursor:pointer;
  background:#dedede;border:1px solid rgba(255,255,255,.65);
  transition:background .08s,transform .08s;
}
.mel-celda:hover{background:#f1f1f1}
.mel-celda.on{background:var(--nota);border-color:rgba(255,255,255,.85)}
.mel-celda.ahora{box-shadow:0 0 0 2px #fff;transform:scale(1.06)}
.mel-celda:focus{outline:none}
.mel-celda:focus-visible{box-shadow:0 0 0 2px #fff}
.mel-aviso{margin:-6px 18px 12px;font-size:12px;line-height:1.4;color:#fff;background:rgba(0,0,0,.22);padding:7px 9px;border-radius:4px}
.mel-pie{display:flex;gap:9px;margin-top:22px;width:316px}
.mel-tempo{
  width:62px;height:36px;border:0;border-radius:2px;padding:0 8px;
  font:400 19px/1 var(--f-ui);color:#111;background:#fff;-moz-appearance:textfield;
}
.mel-tempo::-webkit-inner-spin-button{opacity:.4}
.mel-play{
  flex:1 1 auto;height:36px;border:0;border-radius:2px;cursor:pointer;background:#7f8c8d;
  display:flex;align-items:center;justify-content:center;
}
.mel-play:hover{filter:brightness(1.1)}
.mel-play .tri{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:17px solid #fff}
.mel-play.sonando .tri{width:15px;height:15px;border:0;background:#fff;border-radius:1px}
.mel-listo{
  width:88px;height:36px;border:0;border-radius:2px;cursor:pointer;
  background:var(--col,#e63022);color:#fff;font:400 19px/1 var(--f-ui);
}
.mel-listo:hover{filter:brightness(1.1)}
.mel-galeria{display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;padding:0 16px}
.mel-galeria[hidden]{display:none}
.mel-gal-item{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:9px 12px;border:1px solid rgba(255,255,255,.35);border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;font:400 15px/1.2 var(--f-ui);text-align:left;
}
.mel-gal-item:hover{background:rgba(255,255,255,.22)}
.mel-gal-item .mel-res i{width:10px;height:20px}