/* ============================================================
   MicrobitLab — layout.css
   Barra superior, las tres zonas (simulador · caja de herramientas ·
   lienzo), consola inferior, diálogos y avisos.
   ============================================================ */

#app{
  display:grid;
  grid-template-rows:var(--topbar-h) minmax(0,1fr) var(--bottombar-h);
  height:100vh;height:100dvh;
}
/* Con el simulador plegado, todo lo que se alinea con él se recoge. */
#app.sim-oculto{--w-sim:0px!important}

/* ════════════════ BARRA SUPERIOR (azul) ════════════════ */
#topbar{
  display:flex;align-items:center;gap:6px;
  padding:0 10px 0 6px;
  background:var(--mc-azul);color:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.18);
  z-index:40;overflow:hidden;
}
.tb-marca{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:0 6px;color:#fff;user-select:none}
.tb-logo{width:34px;height:21px;flex:0 0 auto}
.tb-txt{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1}
.tb-barra{width:2px;height:26px;background:rgba(255,255,255,.85);border-radius:1px}
.tb-sub{font-size:19px;font-weight:400;opacity:.95;line-height:1}
@media (max-width:1180px){.tb-sub,.tb-barra{display:none}}
@media (max-width:760px){.tb-txt{display:none}}

.tb-esp{flex:1 1 auto;min-width:4px}
.tb-grupo{display:flex;align-items:center;gap:2px;flex:0 0 auto}

/* Iconos blancos de la barra */
.tb-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:#fff;--ico-hueco:var(--mc-azul);
  transition:background var(--t-fast);
}
.tb-ico svg.i{width:26px;height:26px}
.tb-ico:hover{background:rgba(255,255,255,.14);--ico-hueco:#4a66d8}
.tb-ico:focus-visible{outline:2px solid #fff;outline-offset:-2px}
#btnTema .ic-sol{display:none}
html[data-tema="oscuro"] #btnTema .ic-sol{display:block}
html[data-tema="oscuro"] #btnTema .ic-luna{display:none}

/* Botón blanco de la derecha (como el de «Iniciar sesión») */
.tb-retos{
  display:inline-flex;align-items:center;gap:10px;height:46px;margin-left:8px;
  padding:0 12px 0 16px;border:0;border-radius:4px;cursor:pointer;
  background:#fff;color:#1f1f1f;font-size:17px;font-weight:600;
  transition:background var(--t-fast);
}
.tb-retos svg.i{width:26px;height:26px;color:#1f1f1f}
.tb-retos:hover{background:#eef1fb}
@media (max-width:1000px){.tb-retos span{display:none}.tb-retos{padding:0 10px}}

/* Conmutador Bloques / JavaScript: cápsula azul oscura */
.vista-sw{
  display:flex;align-items:center;flex:0 0 auto;
  background:var(--mc-azul-2);border:2px solid var(--mc-azul-3);
  border-radius:999px;padding:0;height:46px;overflow:hidden;
}
.vista-sw button{
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:100%;min-width:168px;padding:0 22px;
  background:transparent;border:0;border-radius:999px;cursor:pointer;
  font-size:18px;font-weight:400;color:#fff;--ico-hueco:var(--mc-azul-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.vista-sw button svg.i{width:22px;height:22px}
.vista-sw button:hover{background:rgba(255,255,255,.1)}
.vista-sw button[aria-selected="true"]{background:#fff;color:var(--mc-azul);--ico-hueco:#fff}
.vista-sw button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (max-width:1100px){.vista-sw button{min-width:0;padding:0 16px;font-size:16px}}
@media (max-width:700px){.vista-sw button span{display:none}}

/* Menú desplegable genérico de la barra */
.menu-pop{
  position:absolute;z-index:120;min-width:210px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-l);
  box-shadow:var(--sh-3);padding:6px;animation:ml-pop var(--t-med) ease;color:var(--text);
}
.menu-pop .mi{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;background:transparent;border:0;border-radius:var(--r-s);
  font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;color:var(--text);
}
.menu-pop .mi:hover{background:var(--panel-3)}
.menu-pop .mi .ic{width:18px;text-align:center;font-size:14px}
.menu-pop .mi .k{margin-left:auto;font-size:11px;color:var(--text-3);font-family:var(--f-mono)}
.menu-pop .mi[disabled]{opacity:.4;cursor:not-allowed}
.menu-pop .sub-pop{margin:0 0 2px 14px;padding-left:6px;border-left:2px solid var(--border)}
.menu-pop .sub-pop[hidden]{display:none}
.menu-pop .mi .sub-fl{font-family:inherit;font-size:12px}
.menu-pop hr{border:0;border-top:1px solid var(--border);margin:5px 2px}
.menu-pop .rot{padding:6px 10px 3px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3)}

/* ════════════════ CUERPO: 3 ZONAS ════════════════
   SIMULADOR · CAJA DE HERRAMIENTAS · LIENZO, igual que en el
   editor de referencia.  Los bloques de una categoría salen en un
   panel superpuesto al lienzo, así nunca empujan el simulador.   */
#cuerpo{
  display:grid;
  grid-template-columns:var(--w-sim,440px) var(--w-toolbox,210px) minmax(0,1fr);
  min-height:0;position:relative;
}
#cuerpo.sin-paleta{grid-template-columns:var(--w-sim,440px) 0 minmax(0,1fr)}

/* Tirador para redimensionar el simulador */
.tirador{
  position:absolute;top:0;bottom:0;width:7px;z-index:30;cursor:col-resize;
  background:transparent;transition:background var(--t-fast);
}
.tirador:hover,.tirador.activo{background:var(--acc)}
.tirador.izq{left:calc(var(--w-sim,440px) - 3px)}
#app.sim-oculto .tirador{display:none}

/* Pestaña gris para plegar / desplegar el simulador */
.sim-plegar{
  position:absolute;z-index:31;top:50%;transform:translateY(-50%);
  left:calc(var(--w-sim,440px) - 18px);width:18px;height:74px;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:0;border-radius:12px 0 0 12px;cursor:pointer;
  background:#aab3bb;color:#fff;opacity:.85;transition:opacity var(--t-fast),background var(--t-fast);
}
.sim-plegar svg.i{width:16px;height:16px}
.sim-plegar:hover{opacity:1;background:#8e99a3}
#app.sim-oculto .sim-plegar{left:0;border-radius:0 12px 12px 0}
#app.sim-oculto .sim-plegar svg{transform:scaleX(-1)}
#app.sim-oculto #simulador{visibility:hidden}

/* ════════════════ ZONA CENTRAL ════════════════ */
#centro{
  position:relative;min-width:0;display:grid;
  grid-template-rows:1fr auto;background:var(--bg);
}
#zonaEditor{position:relative;min-height:0;overflow:hidden}
.vista{position:absolute;inset:0;display:none}
.vista.on{display:block}

/* ════════════════ CONSOLA ════════════════ */
#consola{
  display:flex;flex-direction:column;
  background:var(--panel);border-top:1px solid var(--border);
  height:var(--h-consola,178px);min-height:34px;transition:height var(--t-med);
}
#consola.plegada{height:35px}
#consola.plegada .con-cuerpo,#consola.plegada .con-serie{display:none}
.con-serie{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:4px 8px 5px 12px;border-top:1px solid var(--border)}
.con-serie .et{font:700 11.5px var(--f-mono);color:var(--text-3);flex:0 0 auto}
.con-serie input{flex:1 1 auto;min-width:0;height:26px;padding:0 9px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--panel-2);color:var(--text);font:12.2px var(--f-mono)}
.con-serie input:focus{outline:none;border-color:var(--acc);box-shadow:var(--ring)}
.con-serie .btn{height:26px;min-height:26px;padding:0 10px;font-size:11.5px}
.con-cab{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 12px;
  border-bottom:1px solid var(--border);flex:0 0 auto;cursor:pointer;user-select:none;
}
.con-cab h3{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.con-cab .cuenta{font-size:11px;color:var(--text-3)}
.con-cab .btn{height:26px;min-height:26px;padding:0 8px;font-size:11.5px}
.con-cab .btn.solo{width:26px;padding:0}
.con-cuerpo{flex:1 1 auto;overflow:auto;padding:6px 0;font-family:var(--f-mono);font-size:12.2px;line-height:1.6}
.con-linea{display:flex;gap:9px;padding:1px 12px;align-items:baseline}
.con-linea:hover{background:var(--panel-2)}
.con-linea .t{color:var(--text-3);font-size:10.5px;flex:0 0 58px;text-align:right;user-select:none}
.con-linea .m{white-space:pre-wrap;word-break:break-word;flex:1 1 auto}
.con-linea.info .m{color:var(--text)}
.con-linea.sys .m{color:var(--text-3)}
.con-linea.ok .m{color:var(--ok)}
.con-linea.evt .m{color:var(--info)}
.con-linea.val .m{color:var(--acc)}
.con-linea.warn .m{color:var(--warn)}
.con-linea.err .m{color:var(--err);font-weight:600}
.con-linea .veces{
  flex:0 0 auto;background:var(--panel-3);color:var(--text-2);
  border-radius:999px;padding:0 7px;font-size:10.5px;font-weight:700;align-self:center;
}
.con-vacia{padding:18px 14px;color:var(--text-3);font-family:var(--f-ui);font-size:12.5px;text-align:center}

/* ════════════════ BARRA INFERIOR ════════════════ */
#barraInf{
  display:grid;grid-template-columns:minmax(236px,var(--w-sim,440px)) minmax(0,1fr);
  background:var(--panel);border-top:1px solid var(--border);z-index:35;min-width:0;
}
.bi-descarga{display:flex;align-items:stretch;padding:8px 20px;min-width:0}
.bi-descargar{
  flex:1 1 auto;min-width:0;border:0;cursor:pointer;
  border-radius:4px 0 0 4px;background:var(--mc-morado);color:#fff;
  font-size:clamp(14px,1.45vw,21px);font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);transition:filter var(--t-fast);
}
.bi-mas{
  flex:0 0 66px;border:0;cursor:pointer;border-radius:0 4px 4px 0;
  background:var(--mc-morado-2);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);transition:filter var(--t-fast);
}
.bi-mas svg.i{width:26px;height:26px}
.bi-descargar:hover,.bi-mas:hover{filter:brightness(1.1)}
.bi-descargar:focus-visible,.bi-mas:focus-visible{outline:3px solid var(--text);outline-offset:1px}

.bi-resto{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 0;min-width:0}
.bi-proy{display:flex;align-items:stretch;gap:6px;height:46px;flex:0 1 auto;min-width:0}
#nombreProyecto{
  width:300px;max-width:32vw;min-width:90px;height:100%;
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:0 14px;font-size:18px;font-weight:400;text-overflow:ellipsis;color:var(--text);
}
#nombreProyecto:hover{border-color:var(--border-2)}
#nombreProyecto:focus{outline:none;border-color:var(--mc-azul);box-shadow:var(--ring)}

/* Botones cuadrados azules (guardar, abrir, deshacer, zoom…) */
.bi-azul{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:46px;border:0;border-radius:4px;cursor:pointer;
  background:var(--mc-azul);color:#fff;--ico-hueco:var(--mc-azul);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);transition:filter var(--t-fast),opacity var(--t-fast);
}
.bi-azul svg.i{width:24px;height:24px}
.bi-azul:hover{filter:brightness(1.1)}
.bi-azul:disabled{opacity:.6;cursor:default;filter:none}
.bi-azul:focus-visible{outline:3px solid var(--text);outline-offset:1px}
.bi-par{display:flex;align-items:stretch;flex:0 0 auto;height:46px}
.bi-par .bi-azul{border-radius:0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset -1px 0 0 rgba(0,0,0,.08)}
.bi-par .bi-azul:first-child{border-radius:4px 0 0 4px}
.bi-par .bi-azul:last-child{border-radius:0 4px 4px 0}
@media (max-width:1100px){.bi-azul{width:46px}#btnCentrar{display:none}}

/* Guardar en PC (solo icono)  |  👨‍🏫 Enviar (RED LAN) */
#btnGuardar,#btnAbrir{flex:0 0 auto}
.bi-red{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;
  height:46px;padding:0 16px;border:0;border-radius:4px;cursor:pointer;
  background:#0b8a5e;color:#fff;font-size:15px;font-weight:700;white-space:nowrap;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);transition:filter var(--t-fast),opacity var(--t-fast);
}
.bi-red .bi-red-em{font-size:21px;line-height:1}
.bi-red:hover{filter:brightness(1.1)}
.bi-red:focus-visible{outline:3px solid var(--text);outline-offset:1px}
.bi-red.ocupado{opacity:.7;cursor:progress}
@media (max-width:600px){.bi-red .bi-txt{display:none}.bi-red{padding:0 12px}}

/* «Actividades guardadas»: una sola ventana para lo guardado en este PC
   y lo enviado a la RED LAN (storage/redlan.js → ventana()). */
.ag-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.ag-filtros .campo{flex:1 1 200px;width:auto}
.ag-filtros select.campo{flex:0 0 150px}
.ag-chips{display:flex;gap:4px;flex-wrap:wrap}
.ag-chip{
  height:30px;padding:0 11px;border:1px solid var(--border);border-radius:999px;cursor:pointer;
  background:var(--panel-2);color:var(--text-2);font-size:12px;font-weight:700;white-space:nowrap;
}
.ag-chip:hover{border-color:var(--border-2);color:var(--text)}
.ag-chip[aria-pressed="true"]{background:var(--mc-azul);border-color:var(--mc-azul);color:#fff}
.ag-cuenta{font-size:12px;color:var(--text-3);margin-left:auto}
.ag-nota{font-size:12px;color:var(--text-3);margin:0 0 8px}
.ag-lista{display:flex;flex-direction:column;gap:7px}
.ag-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-m);
  cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast);
}
.ag-item:hover{border-color:var(--acc);background:var(--panel-3)}
.ag-item.actual{border-color:var(--mc-azul)}
.ag-item .em{font-size:22px;flex:0 0 auto}
.ag-item .tx{flex:1 1 auto;min-width:0}
.ag-item .tx b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-item .tx small{display:block;color:var(--text-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-insignias{display:flex;gap:5px;flex-wrap:wrap;margin:3px 0 1px}
.ag-ins{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.ag-ins.pc{background:rgba(52,84,209,.12);color:var(--mc-azul)}
.ag-ins.red{background:rgba(11,138,94,.14);color:#0b8a5e}
.ag-ins.sin{background:var(--panel-3);color:var(--text-3)}
html[data-tema="oscuro"] .ag-ins.pc{background:rgba(111,140,255,.16);color:#9fb3ff}
html[data-tema="oscuro"] .ag-ins.red{background:rgba(62,207,122,.14);color:#5fdc95}
.ag-acts{display:flex;gap:4px;flex:0 0 auto;align-items:center}
.ag-acts .btn{min-height:29px;height:29px;padding:0 10px;font-size:12px}
.ag-acts .btn.solo{width:29px;padding:0}
.ag-acts .btn.enviar{background:#0b8a5e;border-color:transparent;color:#fff}
.ag-acts .btn.enviar:hover{filter:brightness(1.1)}
.ag-vers{margin:-3px 0 2px 44px;padding:8px 10px;background:var(--panel-3);border-radius:var(--r-m)}
.red-vlista{display:flex;flex-wrap:wrap;gap:6px}
.red-vlista .btn{min-height:28px;font-size:12px;padding:0 10px}
.red-vlista .btn b{margin-right:4px}
@media (max-width:700px){.ag-item{flex-wrap:wrap}.ag-acts{width:100%;justify-content:flex-end}}

/* Configuración del aula (solo docente) */
.cfg-docente{border:1px solid var(--border);border-radius:var(--r-m);padding:12px 12px 2px;margin-bottom:14px;background:var(--panel-2)}
.cfg-docente-tit{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.cfg-docente-tit b{font-size:13.5px}
.cfg-docente-tit span{font-size:11.5px;color:var(--text-3)}
.cfg-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:4px}
.cfg-cat{
  display:flex;align-items:center;gap:7px;height:34px;padding:0 9px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-s);background:var(--panel);color:var(--text);
  font-size:12.5px;font-weight:700;text-align:left;transition:background var(--t-fast),opacity var(--t-fast);
}
.cfg-cat .pt{width:10px;height:10px;border-radius:50%;background:var(--col);flex:0 0 auto}
.cfg-cat .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-cat .cd{flex:0 0 auto;font-size:13px}
.cfg-cat:hover{border-color:var(--col)}
.cfg-cat.bloq{background:var(--panel-3);color:var(--text-3);border-style:dashed}
.cfg-cat.bloq .pt{filter:grayscale(1);opacity:.5}

/* Modal de Configuración: ancho, dos columnas, sin scroll */
.dlg.ancho:has(.cfg-cuerpo){width:min(860px,100%)}
.cfg-cuerpo{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
.cfg-cuerpo>.cfg-docente{grid-column:1/-1;margin-bottom:10px}
.cfg-cuerpo .campo-grupo{margin-bottom:12px}
.cfg-cuerpo .cfg-cats{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
@media (max-width:640px){.cfg-cuerpo{grid-template-columns:1fr}}
.sw.bloqueado{opacity:.6;cursor:not-allowed}
.sw.bloqueado input{cursor:not-allowed}

/* La consola la oculta el docente desde Configuración (para todo el aula) */
html.ml-sin-consola #consola{display:none}

/* ════════════════ AVISOS (toasts) ════════════════ */
#avisos{
  position:fixed;right:14px;bottom:14px;z-index:300;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;
}
.aviso{
  display:flex;align-items:flex-start;gap:10px;max-width:360px;
  padding:10px 13px;background:var(--panel);color:var(--text);
  border:1px solid var(--border);border-left:4px solid var(--acc);
  border-radius:var(--r-m);box-shadow:var(--sh-3);
  font-size:13px;animation:ml-suba .22s ease;pointer-events:auto;
}
.aviso.ok{border-left-color:var(--ok)}
.aviso.warn{border-left-color:var(--warn)}
.aviso.err{border-left-color:var(--err)}
.aviso .ic{font-size:16px;line-height:1.2;flex:0 0 auto}
.aviso b{display:block;font-size:13px}
.aviso small{display:block;color:var(--text-2);font-size:12px;margin-top:1px}
.aviso .x{margin-left:6px;background:transparent;border:0;color:var(--text-3);cursor:pointer;font-size:15px;line-height:1}

/* ════════════════ DIÁLOGOS ════════════════ */
.velo{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,14,22,.55);backdrop-filter:blur(3px);padding:18px;animation:ml-fade .15s ease;
}
.dlg{
  width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);animation:ml-pop .18s ease;overflow:hidden;
}
.dlg.ancho{width:min(920px,100%)}
.dlg-cab{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--border);flex:0 0 auto;
}
.dlg-cab h2{font-size:16px;flex:1 1 auto}
.dlg-cab .sub{font-size:12px;color:var(--text-3);font-weight:400;display:block;margin-top:1px}
.dlg-cue{padding:16px;overflow:auto;flex:1 1 auto}
.dlg-pie{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
  padding:12px 16px;border-top:1px solid var(--border);flex:0 0 auto;background:var(--panel-2);
}
.dlg-pie .izq{margin-right:auto}
.campo-grupo{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.campo-grupo label{font-size:12.5px;font-weight:700;color:var(--text-2)}
.campo-grupo .ayuda{font-size:11.5px;color:var(--text-3)}
.campo-grupo .campo{width:100%}

/* Lista de proyectos */
.lista-proy{display:flex;flex-direction:column;gap:7px}
.proy-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-m);
  cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast);
}
.proy-item:hover{border-color:var(--acc);background:var(--panel-3)}
.proy-item .em{font-size:22px;flex:0 0 auto}
.proy-item .tx{flex:1 1 auto;min-width:0}
.proy-item b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proy-item small{display:block;color:var(--text-3);font-size:11.5px}
.proy-item .acts{display:flex;gap:4px;flex:0 0 auto;opacity:0;transition:opacity var(--t-fast)}
.proy-item:hover .acts,.proy-item:focus-within .acts{opacity:1}
.proy-item .acts .btn{width:29px;height:29px;min-height:29px;padding:0}
.vacio{padding:26px 14px;text-align:center;color:var(--text-3)}
.vacio .em{font-size:34px;display:block;margin-bottom:6px}

/* ════════════════ RESPONSIVO ════════════════ */
/* Pantallas medianas: el simulador se estrecha antes que el lienzo. */
@media (max-width:1400px){
  #cuerpo{grid-template-columns:var(--w-sim,340px) var(--w-toolbox,196px) minmax(0,1fr)}
  #cuerpo.sin-paleta{grid-template-columns:var(--w-sim,340px) 0 minmax(0,1fr)}
  .tirador.izq{left:calc(var(--w-sim,340px) - 3px)}
  .sim-plegar{left:calc(var(--w-sim,340px) - 18px)}
  #barraInf{grid-template-columns:minmax(236px,var(--w-sim,340px)) minmax(0,1fr)}
}
@media (max-width:1100px){
  #cuerpo{grid-template-columns:var(--w-sim,286px) var(--w-toolbox,176px) minmax(0,1fr)}
  #cuerpo.sin-paleta{grid-template-columns:var(--w-sim,286px) 0 minmax(0,1fr)}
  .tirador.izq{left:calc(var(--w-sim,286px) - 3px)}
  .sim-plegar{left:calc(var(--w-sim,286px) - 18px)}
  #barraInf{grid-template-columns:minmax(200px,var(--w-sim,286px)) minmax(0,1fr)}
  .bi-descarga{padding:8px 12px}
  .bi-descargar{font-size:18px}
  .bi-mas{flex-basis:50px}
}

/* Base de los botones solo-móvil (categorías / placa). IMPORTANTE: debe ir
   ANTES del @media de 920px. Estaba después y, con el mismo !important,
   anulaba al @media: en tablet/celular nunca aparecían esos botones y no
   había forma de abrir la paleta de bloques ni la placa. */
.solo-movil{display:none!important}

@media (max-width:920px){
  #cuerpo{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .tirador,.sim-plegar{display:none}
  #paleta{position:absolute;left:0;top:0;bottom:0;width:210px;z-index:60;
    transform:translateX(-102%);transition:transform var(--t-med);box-shadow:var(--sh-3)}
  #paleta.abierta{transform:none}
  #simulador{position:absolute;left:0;top:0;bottom:0;width:min(360px,92vw);z-index:70;
    transform:translateX(-102%);transition:transform var(--t-med);box-shadow:var(--sh-3)}
  #simulador.abierto{transform:none}
  #app.sim-oculto #simulador{visibility:visible}
  #paleta.abierta ~ #centro #flyout{left:210px}
  .solo-movil{display:inline-flex!important}
  #barraInf{grid-template-columns:auto minmax(0,1fr)}
  .bi-descargar{padding:0 16px}
  #nombreProyecto{width:150px}
}
@media (max-width:600px){
  .bi-descarga{padding:8px}
  .bi-descargar{font-size:0;width:54px;padding:0}
  .bi-descargar .bi-ico{font-size:22px}
  .bi-par:last-child{display:none}
}
/* Celular angosto: la barra superior y la inferior no cabían en 375px.
   Se compactan y la inferior se puede deslizar si aún no cabe. */
@media (max-width:480px){
  #topbar{gap:2px;padding:0 4px}
  .tb-marca{display:none}
  .tb-ico{width:36px;height:40px}
  .tb-ico svg.i{width:23px;height:23px}
  .vista-sw{height:40px}
  .vista-sw button{padding:0 12px}
  .bi-descarga{padding:8px 6px 8px 8px}
  .bi-mas{flex-basis:40px}
  .bi-resto{gap:6px;padding-right:6px;overflow-x:auto;scrollbar-width:none}
  .bi-resto::-webkit-scrollbar{display:none}
  .bi-resto>*{flex-shrink:0}   /* sin esto «Enviar» quedaba encimado bajo deshacer */
  .bi-resto>.tb-esp{flex:0 0 0;min-width:0}
  .bi-azul{width:40px}
  #nombreProyecto{width:104px;min-width:80px;font-size:15px;padding:0 8px}
}

/* ════════════════ DESCARGAR PARA MICRO:BIT ════════════════ */
.dl{font-size:13px;line-height:1.55;max-width:640px}
.dl-intro{margin:0 0 12px;color:var(--text-2)}
.dl-fila{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
@media (max-width:620px){.dl-fila{grid-template-columns:1fr}}
.dl-col h4{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin:0 0 6px}
.dl-opciones{display:flex;flex-direction:column;gap:6px}
.dl-op{
  display:flex;align-items:flex-start;gap:9px;padding:8px 10px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-m);background:var(--panel-2);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.dl-op:hover{border-color:var(--acc)}
.dl-op:has(input:checked){border-color:var(--mc-morado,#6633cc);background:rgba(102,51,204,.08)}
.dl-op input{margin-top:3px;accent-color:var(--mc-morado,#6633cc)}
.dl-op-tx{display:flex;flex-direction:column;min-width:0}
.dl-op-tx b{font-size:13px}
.dl-op-tx small{font-size:11.5px;color:var(--text-3);line-height:1.4}
.dl-op.off{opacity:.45;cursor:not-allowed}
.dl-nota{margin:12px 0 0;font-size:12px;color:var(--text-2)}
.dl-estado{margin-top:12px;padding:10px 12px;border-radius:var(--r-m);border-left:3px solid var(--border-2);background:var(--panel-2)}
.dl-estado.trabajando{border-left-color:var(--acc)}
.dl-estado.ok{border-left-color:var(--ok);background:rgba(47,158,68,.1)}
.dl-estado.error{border-left-color:var(--err);background:rgba(224,49,49,.09)}
.dl-estado-tit{display:flex;align-items:center;gap:8px;font-size:13.5px}
.dl-estado.ok .dl-estado-tit{color:var(--ok)}
.dl-estado.error .dl-estado-tit{color:var(--err)}
.dl-estado small{display:block;margin-top:4px;color:var(--text-3)}
.dl-giro{width:15px;height:15px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--acc);animation:dl-gira .8s linear infinite;flex:0 0 auto}
@keyframes dl-gira{to{transform:rotate(360deg)}}
.dl-errores{margin:8px 0 0;padding-left:18px;font-size:12.3px}
.dl-errores li{margin-bottom:6px}
.dl-errores code{display:block;margin-top:2px;font-family:var(--f-mono);font-size:11.5px;color:var(--text-2);white-space:pre-wrap;word-break:break-word}
.dl-errores .btn{margin-top:4px;min-height:26px;font-size:11.5px;padding:0 9px}
.dl-aviso{margin:8px 0 0;padding:7px 9px;border-radius:6px;background:rgba(217,119,6,.12);font-size:12px}
.dl-pasos{margin:8px 0 0;font-size:12.3px;color:var(--text)}