/* ============================================================
   CircuitLab — estilos base, tema y maquetación
   ============================================================ */
:root{
  --bg:#0b1220;
  --bg2:#0e1626;
  --panel:#121c2e;
  --panel2:#16223a;
  --line:#25324b;
  --line2:#1b2740;
  --text:#e8eefc;
  --text-dim:#9fb0cd;
  --text-mute:#6c7f9e;
  --acc:#22d3ee;
  --acc2:#818cf8;
  --ok:#34d399;
  --warn:#fbbf24;
  --err:#f87171;
  --grid:rgba(120,150,200,.10);
  --stage:#0d1626;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --r:12px;
  --topbar-h:44px;
  --toolbar2-h:34px;      /* barra de herramientas del lienzo */
  --console-h:170px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,"DejaVu Sans Mono",monospace;
}
body.light{
  --bg:#eef2f8;
  --bg2:#e6ecf5;
  --panel:#ffffff;
  --panel2:#f4f7fc;
  --line:#d6dfec;
  --text:#132039;
  --text-dim:#4a5b76;
  --text-mute:#7c8ca5;
  --grid:rgba(30,60,110,.10);
  --stage:#f7f9fd;
  --shadow:0 10px 26px rgba(20,40,80,.14);
}

*{box-sizing:border-box}
/* El atributo hidden debe ganarle a cualquier display declarado más abajo
   (modales, cajones, panel de código…), o quedarían siempre visibles. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--text-mute)}

/* ------------------------- BARRA SUPERIOR ------------------------- */
#topbar{
  height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:0 10px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  z-index:40;
}
#topbar::-webkit-scrollbar{height:0}
.tb-brand{display:flex;align-items:center;gap:7px;padding-right:8px;flex:0 0 auto}
.tb-logo{width:34px;height:34px;flex:0 0 auto;object-fit:contain}
.tb-intranet{display:flex;align-items:center;gap:3px;height:32px;padding:0 6px 0 4px;flex:0 0 auto;
  border-radius:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:var(--text);
  text-decoration:none;transition:.15s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body.light .tb-intranet{background:rgba(46,49,146,.06);border-color:rgba(46,49,146,.18);color:#2e3192}
.tb-intranet:hover{border-color:var(--acc);background:rgba(34,211,238,.14);box-shadow:0 0 0 2px rgba(34,211,238,.25)}
.tb-intranet svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tb-intranet img{height:24px;width:auto;display:block}
/* tema oscuro: el logo es azul marino; un respaldo claro solo detrás de él lo mantiene legible */
body:not(.light) .tb-intranet img{background:rgba(255,255,255,.82);border-radius:6px;padding:1px 3px;height:22px}
/* símbolo de GALATCXIS: transparente, se ve bien en los dos temas */
.tb-intranet img.tb-gx,body:not(.light) .tb-intranet img.tb-gx{background:none;padding:0;border-radius:0;height:24px;width:auto}
.tb-title strong{display:block;font-size:13px;letter-spacing:.3px;line-height:1.05}
.tb-title span{display:block;font-size:9px;color:var(--text-mute);line-height:1.15}
.tb-proj{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-right:6px}
#projName{
  width:172px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:4px 9px;font-size:12px;outline:none;
}
#projName:focus{border-color:var(--acc)}
.proj-state{font-size:10px;color:var(--text-mute);white-space:nowrap}
.proj-state.dirty{color:var(--warn)}

.tb-group{display:flex;align-items:center;gap:4px;padding:0 6px;flex:0 0 auto;
  border-left:1px solid var(--line);height:30px}
.tb-group:first-of-type{border-left:0}
.tb-spacer{flex:1 1 auto;min-width:4px}
/* el grupo final queda siempre a la vista aunque la barra tenga que desplazarse */
.tb-group.end{position:sticky;right:0;border-left:0;padding-left:12px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--panel) 30%)}
.tb-btn{
  display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;
  background:var(--bg2);border:1px solid transparent;color:var(--text-dim);
  font-size:12px;white-space:nowrap;transition:.15s;
}
.tb-btn span{font-size:14px;line-height:1}
.tb-btn i{font-style:normal}
.tb-btn:hover{background:var(--panel2);color:var(--text);border-color:var(--line)}
.tb-btn.ico{padding:5px 8px}
.tb-btn.ico i{display:none}
.tb-btn.mute{opacity:.55}                /* sonido silenciado */

/* --------- desplegable "Aprender" (Modo / Curso / Ejemplos / Ejercicios / Retos / Profesor / Ayuda) ---------
   #topbar tiene overflow-y:hidden (para el scroll horizontal sin barra vertical), así que este panel
   NO puede vivir dentro de la barra: recortaría cualquier cosa que sobresalga hacia abajo. Vive como
   hijo directo de <body> (ver index.html) y JS le pone left/top en px según el botón disparador. */
.tb-btn .dd-caret{font-style:normal;font-size:9px;margin-left:-2px;opacity:.7}
.tb-dropdown-menu{
  position:fixed;z-index:140;min-width:210px;max-height:70vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:6px;display:flex;flex-direction:column;gap:2px;animation:min .16s ease;
}
.tb-dropdown-menu .dd-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;
  background:none;border:0;color:var(--text-dim);font-size:12.5px;text-align:left;cursor:pointer;white-space:nowrap;
}
.tb-dropdown-menu .dd-item span{font-size:15px;width:19px;text-align:center;flex:none}
.tb-dropdown-menu .dd-item i{font-style:normal}
.tb-dropdown-menu .dd-item:hover{background:var(--bg2);color:var(--text)}
.dd-sep{height:1px;background:var(--line);margin:4px 2px}
/* botones destacados de la derecha, al estilo de Tinkercad */
.tb-btn.destacado{padding:6px 13px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.tb-btn.destacado i{display:inline!important}
.tb-btn.run{background:#16a34a;border-color:#15803d;color:#fff;font-weight:600}
.tb-btn.run:hover{background:#15803d;color:#fff}
.tb-btn.run.detener{background:#dc2626;border-color:#b91c1c}
.tb-btn.run.detener:hover{background:#b91c1c}
.tb-btn.active{background:linear-gradient(180deg,var(--acc),#0ea5b7);color:#04222a;border-color:transparent;font-weight:600}
.tb-btn[disabled]{opacity:.4;pointer-events:none}
body[data-modo="aprendizaje"] #btnModo{background:linear-gradient(180deg,#a78bfa,#7c3aed);color:#fff}
/* icono dibujado (SVG) dentro de un botón de la barra */
.tb-btn .ico-svg{display:inline-flex;align-items:center;justify-content:center}
.tb-btn .ico-svg svg{width:17px;height:17px;display:block}

/* --------- selector de vista: Circuito / Componentes ---------
   Pastilla blanca con dos segmentos; el activo se marca con un aro azul,
   al estilo de las pestañas de Tinkercad. */
.view-switch{
  display:flex;align-items:center;gap:2px;flex:0 0 auto;
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px;
}
.vs-btn{
  display:flex;align-items:center;gap:6px;padding:4px 13px;border-radius:999px;
  border:1.6px solid transparent;background:none;color:var(--text-dim);
  font-size:12px;white-space:nowrap;transition:.15s;
}
.vs-btn svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vs-btn:hover{color:var(--text)}
.vs-btn.active{border-color:#3b82f6;color:#3b82f6;font-weight:600}
body:not(.light) .vs-btn.active{border-color:var(--acc);color:var(--acc)}

/* ------------------------- MAQUETA ------------------------- */
/* Reparto de la pantalla: Inspector a la izquierda, Componentes a la derecha.
   Los ids #panelLeft/#panelRight son históricos; el sitio lo decide `order`. */
/* overflow:hidden recorta el panel plegado (queda fuera con margen negativo).
   Sin esto la página entera se puede desplazar en horizontal y da un salto en
   cuanto un botón recibe el foco. */
#layout{flex:1 1 auto;display:flex;min-height:0;position:relative;overflow:hidden}
.panel{
  width:262px;flex:0 0 262px;background:var(--panel);
  display:flex;flex-direction:column;min-height:0;transition:margin .22s ease;
}
#panelLeft{order:3;border-left:1px solid var(--line)}       /* Componentes → derecha */
#workspace{order:2}
#panelRight{order:1;border-right:1px solid var(--line);width:310px;flex-basis:310px}  /* Inspector → izquierda */
.panel-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim)}
.panel-head .ph-acc{display:flex;align-items:center;gap:2px}
.collapse-btn{color:var(--text-mute);font-size:18px;line-height:1;padding:2px 6px;border-radius:6px}
#btnPersoPaleta{font-size:14px}
.collapse-btn:hover{background:var(--bg2);color:var(--text)}
/* Título del panel + botón «Ocultar» bien visible justo al lado */
.panel-head .ph-titulo{display:flex;align-items:center;gap:8px;min-width:0}
.ocultar-panel-btn{
  display:inline-flex;align-items:center;gap:3px;padding:3px 9px 3px 6px;border-radius:999px;
  background:var(--acc);color:#04222a;font-size:11px;font-weight:700;line-height:1;
  border:1px solid transparent;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.15s;white-space:nowrap;
}
.ocultar-panel-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ocultar-panel-btn:hover{filter:brightness(1.1);transform:translateX(1px)}
.ocultar-panel-btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
body.light .ocultar-panel-btn{background:#0891b2;color:#fff}
/* Lo que solo ve el docente (sesión de GALATCXIS, PC-A o sin servidor): ver CL.cuenta.esDocente() */
body:not(.es-docente) .solo-docente{display:none!important}
body.hide-left #panelLeft{margin-right:-262px}
body.hide-right #panelRight{margin-left:-310px}

/* Pestañas para volver a abrir un panel plegado */
.panel-tab{
  position:absolute;top:50%;transform:translateY(-50%);z-index:60;
  width:28px;min-height:104px;height:auto;padding:12px 0;box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--acc);
  font-size:15px;font-weight:700;box-shadow:var(--shadow);
}
.panel-tab b{writing-mode:vertical-rl;font-size:10px;font-weight:600;line-height:1;white-space:nowrap;
  letter-spacing:.6px;color:var(--text-dim);text-transform:uppercase}
.panel-tab:hover{background:var(--panel2)}
.panel-tab:hover b{color:var(--text)}
.panel-tab.izq{left:0;border-left:0;border-radius:0 12px 12px 0;transition:left .22s ease}
.panel-tab.der{right:0;border-right:0;border-radius:12px 0 0 12px;transition:right .22s ease}
/* la flecha indica la acción: abrir con el panel plegado, cerrar con él abierto */
.panel-tab .pt-fl::before{line-height:1}
.panel-tab.izq .pt-fl::before{content:'‹'}
body.hide-right .panel-tab.izq .pt-fl::before{content:'›'}
.panel-tab.der .pt-fl::before{content:'›'}
body.hide-left .panel-tab.der .pt-fl::before{content:'‹'}
.panel-foot{padding:8px 12px;border-top:1px solid var(--line);color:var(--text-mute);font-size:11px}

.search-wrap{padding:8px 10px}
.search-wrap input{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;font-size:12.5px;outline:none;
}
.search-wrap input:focus{border-color:var(--acc)}

/* ------------------------- PALETA ------------------------- */
.palette{flex:1 1 auto;overflow-y:auto;padding:0 8px 12px}
.cat{margin-bottom:6px}
.cat-head{
  display:flex;align-items:center;gap:7px;width:100%;padding:8px 8px;border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text-dim);
}
.cat-head:hover{background:var(--bg2)}
.cat-head .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.cat-head .arw{margin-left:auto;font-size:10px;color:var(--text-mute);transition:.2s}
.cat.closed .arw{transform:rotate(-90deg)}
.cat.closed .cat-items{display:none}
.cat-items{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 2px 8px}
.pal-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 5px;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;cursor:grab;
  text-align:center;transition:.14s;user-select:none;
}
.pal-item:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.pal-item:active{cursor:grabbing;transform:scale(.97)}
.pal-item .pi-ico{width:44px;height:34px;display:flex;align-items:center;justify-content:center}
.pal-item .pi-ico svg{max-width:100%;max-height:100%;overflow:visible}
.pal-item .pi-name{font-size:10.5px;line-height:1.15;color:var(--text-dim)}
.pal-item.wide{grid-column:span 2;flex-direction:row;justify-content:flex-start;gap:9px;text-align:left;padding:8px 10px}
.pal-item.wide .pi-ico{width:52px;height:30px}
.pal-item.dragging{opacity:.45}
/* tamaño de la imagen fijado por el docente (--pi-esc, 1 = original) */
.pal-item .pi-ico{width:calc(44px * var(--pi-esc,1));height:calc(34px * var(--pi-esc,1));max-width:100%}
.pal-item.wide .pi-ico{width:calc(52px * var(--pi-esc,1));height:calc(30px * var(--pi-esc,1))}
.pal-item .pi-ico svg{width:100%;height:100%}

/* ------------------------- ÁREA DE TRABAJO ------------------------- */
#workspace{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--stage)}
#stageWrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
#stage{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
body.modo-seleccion #stage{cursor:default}
#stage.panning{cursor:grabbing}
#stage.wiring{cursor:crosshair}
#gridRect{pointer-events:none}
body.no-grid #gridRect{display:none}

/* Abrir proyecto: secciones (carpeta del servidor / navegador) y botón de visibilidad */
.proj-sec{font-size:12.5px;margin:14px 0 8px;color:var(--text)}
.proj-sec small{font-weight:400;color:var(--text-mute);margin-left:4px}
.proj-item .pi-a .pi-vis{width:auto;padding:0 9px;font-size:11.5px;font-weight:600;border-radius:999px;
  background:rgba(148,163,184,.16);color:var(--text-dim);white-space:nowrap}
.proj-item .pi-a .pi-vis.on{background:rgba(34,197,94,.16);color:#15803d}
.proj-item .pi-a button[data-a="mover"]{width:auto;padding:0 8px;font-size:11.5px;white-space:nowrap}

/* --------- Barra de herramientas pegada a la cabecera ---------
   Ocupa el sitio del antiguo panel flotante del lienzo y de la barrita que
   aparecía sobre lo seleccionado. Se desplaza en horizontal si no cabe, igual
   que #topbar, para no robarle alto al área de trabajo. */
#toolbar2{
  flex:0 0 auto;height:var(--toolbar2-h);display:flex;align-items:center;gap:2px;padding:0 10px;
  background:var(--panel);border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;z-index:39;
}
#toolbar2::-webkit-scrollbar{height:0}
.t2-group{display:flex;align-items:center;gap:2px;padding:0 7px;flex:0 0 auto;
  border-left:1px solid var(--line);height:26px}
.t2-group:first-child{border-left:0;padding-left:0}
.st-btn{width:30px;height:26px;border-radius:7px;color:var(--text-dim);font-size:14px;display:grid;place-items:center}
.st-btn:hover{background:var(--bg2);color:var(--text)}
.st-btn.tgl.on{background:rgba(34,211,238,.18);color:var(--acc)}
.st-btn.danger:hover{background:rgba(248,113,113,.18);color:#fca5a5}
/* las acciones de la selección se apagan solas cuando no hay nada elegido */
.st-btn[disabled]{opacity:.3;pointer-events:none}

/* Grupo final: Código e Iniciar simulación, pegados al borde derecho.
   Son .tb-btn (venían de la cabecera), aquí van un punto más compactos. */
.t2-group.end{margin-left:auto;height:auto;border-left:0;padding-right:0;padding-left:12px;
  position:sticky;right:0;z-index:2;background:linear-gradient(90deg,transparent,var(--panel) 22%)}
#toolbar2 .tb-btn{padding:4px 11px;font-size:11.5px}
#toolbar2 .tb-btn span{font-size:13px}
#toolbar2 .tb-btn .ico-svg svg{width:16px;height:16px}
/* el grupo final cambia con la vista: Código / Iniciar en el circuito,
   PDF / CSV en la lista de componentes */
.solo-lista{display:none}
body.vista-lista .solo-lista{display:flex}
body.vista-lista .solo-circuito{display:none}


/* ------------------------- CONSOLA ------------------------- */
#consoleWrap{
  flex:0 0 auto;height:var(--console-h);border-top:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;transition:height .2s;
}
body.console-min #consoleWrap{height:38px}
body.console-min .cw-body{display:none}
.cw-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px;height:37px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.cw-tabs{display:flex;gap:2px}
.cw-tab{padding:7px 12px;font-size:12px;color:var(--text-mute);border-radius:8px 8px 0 0}
.cw-tab:hover{color:var(--text)}
.cw-tab.active{color:var(--acc);border-bottom:2px solid var(--acc)}
.cw-actions{display:flex;gap:4px}
.mini{font-size:11px;padding:4px 9px;border-radius:7px;background:var(--bg2);color:var(--text-dim)}
.mini:hover{background:var(--panel2);color:var(--text)}
.cw-body{flex:1 1 auto;min-height:0;position:relative}
.cw-pane{display:none;position:absolute;inset:0;overflow-y:auto;padding:8px 10px}
.cw-pane.active{display:block}
#serialOut{margin:0;font-family:var(--mono);font-size:12px;color:#a7f3d0;white-space:pre-wrap;line-height:1.5}
.msg{
  display:flex;gap:9px;padding:7px 10px;border-radius:9px;margin-bottom:5px;font-size:12.5px;
  line-height:1.5;background:var(--bg2);border-left:3px solid var(--line);
}
.msg .m-ico{flex:0 0 auto;font-size:14px}
.msg .m-txt{flex:1 1 auto}
.msg .m-txt b{color:var(--text)}
.msg.ok{border-left-color:var(--ok);background:rgba(52,211,153,.09)}
.msg.warn{border-left-color:var(--warn);background:rgba(251,191,36,.09)}
.msg.err{border-left-color:var(--err);background:rgba(248,113,113,.09)}
.msg.info{border-left-color:var(--acc);background:rgba(34,211,238,.08)}
.msg .m-fix{display:block;margin-top:4px;color:var(--text-dim);font-size:12px}
.msg .m-actions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.msg .m-actions button{font-size:11px;padding:4px 9px;border-radius:7px;background:var(--panel2);
  border:1px solid var(--line);color:var(--text-dim)}
.msg .m-actions button:hover{border-color:var(--acc);color:var(--text)}

/* ------------------------- PANEL DERECHO ------------------------- */
.pr-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--line)}
.pr-tab{flex:1;padding:8px 6px;font-size:11.5px;color:var(--text-mute);border-radius:8px 8px 0 0}
.pr-tab.active{color:var(--acc);border-bottom:2px solid var(--acc);background:var(--bg2)}
.pr-body{flex:1 1 auto;min-height:0;position:relative}
.pr-pane{display:none;position:absolute;inset:0;overflow-y:auto;padding:12px}
.pr-pane.active{display:block}
.empty-note{color:var(--text-mute);font-size:12.5px;line-height:1.6;text-align:center;padding:26px 12px}

.insp-head{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.insp-head .ih-ico{width:56px;height:46px;display:grid;place-items:center;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;flex:0 0 auto}
.insp-head .ih-ico svg{max-width:48px;max-height:40px;overflow:visible}
.insp-head h3{font-size:15px;margin-bottom:2px}
.insp-head small{color:var(--text-mute);font-size:11px}
.prop-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.prop-row label{flex:0 0 96px;font-size:11.5px;color:var(--text-dim)}
.prop-row select,.prop-row input[type=text],.prop-row input[type=number]{
  flex:1 1 auto;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;outline:none
}
.prop-row select:focus,.prop-row input:focus{border-color:var(--acc)}
.prop-row input[type=range]{flex:1 1 auto;accent-color:var(--acc)}
.prop-row .val{font-size:11.5px;color:var(--acc);min-width:56px;text-align:right;font-family:var(--mono)}
.swatches{display:flex;gap:5px;flex-wrap:wrap}
.swatch{width:24px;height:24px;border-radius:7px;border:2px solid transparent;cursor:pointer}
.swatch.sel{border-color:var(--text)}
.swatches-grandes{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:7px;margin:10px 0}
.swatches-grandes .swatch{width:100%;height:30px;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:transform .1s}
.swatches-grandes .swatch:hover{transform:scale(1.12)}
.swatches-grandes .swatch.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.swatch-perso{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim)}
.swatch-perso input[type=color]{width:38px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
/* Ayuda F1: tabla de atajos */
.atajos-grupo{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.5px;margin:10px 0 4px}
.atajos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:3px 16px;font-size:12.5px}
.atajos>div{display:flex;align-items:center;gap:8px;color:var(--text-dim)}
.atajos-k{flex:0 0 118px;white-space:nowrap;color:var(--text-mute)}
.atajos kbd{display:inline-block;min-width:18px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  background:var(--bg2);color:var(--text);font:600 11px/1.4 var(--mono);text-align:center}

.sec{margin:14px 0 0;border-top:1px solid var(--line);padding-top:11px}
.sec > h4{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text-mute);margin-bottom:7px}
.sec p{font-size:12.5px;line-height:1.62;color:var(--text-dim);margin:0 0 8px}
.sec ul{margin:0 0 8px;padding-left:17px;font-size:12.5px;line-height:1.6;color:var(--text-dim)}
.sec li{margin-bottom:3px}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--text-mute)}
.kv span:last-child{color:var(--text);font-family:var(--mono)}
.tagline{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:20px;
  background:rgba(34,211,238,.14);color:var(--acc);margin-bottom:6px}

/* Panel de simulación (sensores) */
.sim-card{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 11px;margin-bottom:9px}
.sim-card .sc-head{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.sim-card .sc-head b{font-size:12.5px}
.sim-card .sc-head .sc-badge{margin-left:auto;font-size:10.5px;color:var(--acc);font-family:var(--mono)}
.sim-card .measure{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-dim);
  font-family:var(--mono);padding:2px 0}
.sim-card .measure b{color:var(--text)}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ------------------------- BOTONES ------------------------- */
.btn{
  padding:9px 15px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);
  color:var(--text-dim);font-size:12.5px;transition:.15s;
}
.btn:hover{border-color:var(--acc);color:var(--text)}
.btn.primary{background:linear-gradient(180deg,var(--acc),#0ea5b7);color:#04222a;border-color:transparent;font-weight:600}
.btn.primary:hover{filter:brightness(1.08);color:#04222a}
.btn.violet{background:linear-gradient(180deg,#a78bfa,#7c3aed);color:#fff;border-color:transparent;font-weight:600}
.btn.ok{background:linear-gradient(180deg,#34d399,#059669);color:#03251b;border-color:transparent;font-weight:600}
.btn.danger{background:rgba(248,113,113,.14);color:#fca5a5;border-color:rgba(248,113,113,.4)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 11px;font-size:11.5px;border-radius:8px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ------------------------- TOASTS / TOOLTIP ------------------------- */
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:120}
.toast{
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--acc);
  border-radius:11px;padding:11px 15px;font-size:12.5px;box-shadow:var(--shadow);max-width:330px;
  animation:tin .25s ease;line-height:1.5;
}
.toast.ok{border-left-color:var(--ok)}
.toast.warn{border-left-color:var(--warn)}
.toast.err{border-left-color:var(--err)}
.toast b{display:block;margin-bottom:2px}
@keyframes tin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transform:translateX(24px);transition:.25s}

#tooltip{
  position:fixed;z-index:200;background:#0f1a2e;color:#dbe7ff;border:1px solid var(--acc);
  border-radius:9px;padding:8px 11px;font-size:11.5px;max-width:270px;line-height:1.5;
  pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.5);
}
#tooltip b{color:var(--acc)}

/* ------------------------- MODALES ------------------------- */
#modalRoot{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:rgba(4,10,20,.68);backdrop-filter:blur(3px);padding:18px}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;animation:min .2s ease;
}
.modal.wide{width:min(900px,100%)}

/* --------- cuadrícula de tarjetas del modal "Más opciones" ---------
   Cada tarjeta es una fila: a la izquierda el icono, grande y ocupando
   todo el alto del botón; a la derecha el nombre, repartido en varios
   renglones cuando tiene más de una palabra (lo corta js/app.js). */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.menu-tile{
  display:flex;flex-direction:row;align-items:stretch;gap:0;min-height:78px;
  padding:0;border-radius:14px;background:var(--bg2);border:1px solid var(--line);
  color:var(--text-dim);cursor:pointer;text-align:left;transition:.15s;overflow:hidden;
}
.menu-tile:hover{background:var(--panel2);color:var(--text);border-color:var(--acc);transform:translateY(-2px)}
.menu-tile .mt-ico{
  flex:0 0 64px;align-self:stretch;display:grid;place-items:center;
  font-size:34px;line-height:1;background:rgba(34,211,238,.10);border-right:1px solid var(--line);
}
.menu-tile:hover .mt-ico{background:rgba(34,211,238,.18)}
.menu-tile .mt-etq{
  flex:1 1 auto;display:flex;align-items:center;padding:10px 12px;
  font-size:12.5px;font-weight:600;line-height:1.3;white-space:normal;
}
@media (max-width:560px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
@keyframes min{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15.5px}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1 1 auto;font-size:13px;line-height:1.6;color:var(--text-dim)}
.modal-body p{margin:0 0 10px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
.modal-body input[type=text]{width:100%;background:var(--bg2);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font-size:13px;outline:none;color:var(--text)}
.modal-body input[type=text]:focus{border-color:var(--acc)}

/* ------------------------- ASISTENTE ------------------------- */
#assistantFab{
  position:fixed;right:18px;bottom:calc(var(--console-h) + 22px);width:48px;height:48px;border-radius:50%;
  background:linear-gradient(160deg,#fbbf24,#f59e0b);color:#3a2600;font-size:22px;box-shadow:0 8px 22px rgba(245,158,11,.4);
  z-index:100;display:grid;place-items:center;transition:.2s;
}
#assistantFab:hover{transform:scale(1.08)}
#assistantFab.alert{animation:pulseA 1.4s infinite}
@keyframes pulseA{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}50%{box-shadow:0 0 0 14px rgba(245,158,11,0)}}
body.console-min #assistantFab{bottom:60px}

.asis-msg{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px;font-size:12.5px;line-height:1.6}
.asis-msg.tip{border-left:3px solid var(--warn)}
.asis-msg .am-head{display:flex;gap:7px;align-items:center;margin-bottom:5px;font-weight:600;color:var(--text)}
.asis-msg p{margin:0 0 6px;color:var(--text-dim)}
.asis-msg code{background:var(--panel2);padding:1px 5px;border-radius:5px;font-family:var(--mono);font-size:11.5px;color:var(--acc)}

/* ------------------------- CRONÓMETRO DE RETOS ------------------------- */
#challengeHud{
  position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--topbar-h) + var(--toolbar2-h) + 10px);z-index:90;
  display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:9px 15px;box-shadow:var(--shadow);
}
.ch-time{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--acc);min-width:76px;text-align:center}
#challengeHud.urgent .ch-time{color:var(--err);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}
.ch-info strong{display:block;font-size:13px}
.ch-info small{color:var(--text-mute);font-size:11px}
.ch-stats{display:flex;gap:10px;font-size:11.5px;color:var(--text-dim)}
.ch-stats b{color:var(--text)}

/* ------------------------- EDITOR DE CÓDIGO ------------------------- */
#codePanel{
  position:fixed;right:0;top:calc(var(--topbar-h) + var(--toolbar2-h));bottom:0;width:min(560px,94vw);z-index:60;
  background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:-14px 0 34px rgba(0,0,0,.35);animation:slidein .22s ease;
}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.cp-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cp-title strong{font-size:13.5px;display:block}
.cp-sub{font-size:10.5px;color:var(--text-mute)}
.cp-modes{display:flex;gap:3px;background:var(--bg2);border-radius:9px;padding:3px}
.cp-mode{padding:6px 11px;font-size:11.5px;border-radius:7px;color:var(--text-mute)}
.cp-mode.active{background:var(--panel2);color:var(--acc)}
.cp-actions{display:flex;gap:5px;margin-left:auto}
/* --- Herramientas del editor: tamaño de letra + Arduino real --- */
.cp-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--panel2)}
.cp-fuente,.cp-ard{display:flex;align-items:center;gap:4px}
.cp-ard{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.cp-tb{min-width:30px;height:28px;padding:0 8px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);
  color:var(--text-dim);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:5px;touch-action:manipulation}
.cp-tb:hover:not([disabled]){border-color:var(--acc);color:var(--text)}
.cp-tb[disabled]{opacity:.4;cursor:default}
.cp-tb:focus-visible,.cp-ard .btn:focus-visible,#ardPlaca:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.cp-fs{min-width:34px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--text-mute)}
#ardPlaca{height:28px;max-width:170px;background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:0 6px;font-size:11.5px;color:var(--text)}
.ard-puerto{font-weight:600;max-width:150px}
.ard-puerto span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-dot{width:8px;height:8px;border-radius:50%;background:var(--text-mute);flex:0 0 auto}
.ard-puerto.conectado .ap-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(52,211,153,.2)}
.cp-ard .btn[disabled]{opacity:.45;pointer-events:none}
.cp-estado{padding:8px 12px 10px;border-bottom:1px solid var(--line);background:var(--bg2);max-height:42%;overflow:auto;flex:0 0 auto}
.ard-pasos{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;padding:0;list-style:none;counter-reset:p}
.ard-pasos li{counter-increment:p;font-size:10.5px;padding:3px 8px 3px 6px;border-radius:999px;border:1px solid var(--line);color:var(--text-mute);background:var(--panel)}
.ard-pasos li::before{content:counter(p) ' ';font-weight:700;opacity:.6}
.ard-pasos li.act{border-color:var(--acc);color:var(--acc);animation:ardLatido 1s ease-in-out infinite}
.ard-pasos li.ok{border-color:rgba(52,211,153,.6);color:var(--ok);background:rgba(52,211,153,.08)}
.ard-pasos li.ok::before{content:'✓ ';opacity:1}
.ard-pasos li.err{border-color:rgba(248,113,113,.6);color:var(--err);background:rgba(248,113,113,.08)}
.ard-pasos li.err::before{content:'✕ ';opacity:1}
@keyframes ardLatido{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ard-pasos li.act{animation:none}}
.ard-barra{height:6px;border-radius:4px;background:var(--panel);overflow:hidden;margin:4px 0 6px}
.ard-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--ok));transition:width .15s linear}
.ard-msg{font-size:12px;line-height:1.5;color:var(--text-dim)}
.ard-msg.ok b{color:var(--ok)}
.ard-msg.err b{color:var(--err)}
.ard-msg small{color:var(--text-mute)}
.ard-errores{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.ard-errores li{font-size:11.5px;line-height:1.45;padding:5px 8px;border-radius:7px;background:var(--panel);border-left:3px solid var(--err);cursor:pointer}
.ard-errores li.aviso{border-left-color:var(--warn)}
.ard-errores li:hover,.ard-errores li:focus-visible{outline:1px solid var(--acc)}
.ard-errores li b{color:var(--text)}
.ard-errores .ae-tipo{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);margin-left:4px}
.ard-errores code{display:block;font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.ard-errores small{display:block;margin-top:3px;color:var(--text)}
.ard-nota{font-size:12.5px;color:var(--text-dim);margin:0 0 10px}
.ard-lista{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ard-op{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);text-align:left}
.ard-op:hover,.ard-op.on{border-color:var(--acc)}
.ard-op small{font-size:11px;color:var(--text-mute);font-family:var(--mono)}
.ard-ul{padding-left:18px;line-height:1.6}
.ard-ul code{font-size:11.5px;word-break:break-all}
.cp-body{flex:1 1 auto;min-height:0;position:relative}
.cp-view{display:none;position:absolute;inset:0;overflow:auto}
.cp-view.active{display:block}
.editor-shell{display:flex;height:100%;background:#0a1120;font-family:var(--mono);font-size:var(--code-fs,12.5px);line-height:1.55}
body.light .editor-shell{background:#f6f8fd}
.gutter{
  flex:0 0 auto;padding:10px 8px 10px 12px;text-align:right;color:var(--text-mute);
  background:var(--bg2);white-space:pre;user-select:none;font-size:var(--code-fs,12.5px);line-height:1.55;
}
/* --- Editor de codigo a dos capas ---------------------------------------
   El <pre> de abajo pinta el codigo coloreado y el <textarea> de encima
   lleva el texto transparente (solo se ve el cursor y la seleccion). Ambos
   TIENEN QUE compartir fuente, tamano, interlineado, padding y tab-size o
   las letras de color se desalinean de las que se escriben. */
.code-stack{position:relative;flex:1 1 auto;min-width:0;height:100%}
.code-hl,#codeArea{
  position:absolute;inset:0;margin:0;border:0;padding:10px 12px;
  font-family:var(--mono);font-size:var(--code-fs,12.5px);line-height:1.55;   /* --code-fs: botones A− / A+ */
  white-space:pre;tab-size:2;letter-spacing:0;word-spacing:0;
}
.code-hl{pointer-events:none;overflow:hidden;color:var(--syn-txt)}
#codeArea{
  background:transparent;outline:none;resize:none;overflow:auto;
  color:transparent;caret-color:var(--syn-caret);
}
#codeArea::selection{background:rgba(56,189,248,.32);color:transparent}

/* Paleta del codigo, la misma familia de colores que usa Tinkercad para
   Arduino: naranja los tipos y la estructura, turquesa las funciones de la
   libreria, azul las constantes y gris los comentarios. */
:root{
  --syn-txt:#dbeafe; --syn-caret:#7dd3fc;
  --syn-com:#8b9bb4; --syn-pre:#a3c93a; --syn-key:#ffa657;
  --syn-fun:#56d4dd; --syn-const:#79c0ff; --syn-str:#ffa198; --syn-num:#79c0ff;
}
body.light{
  --syn-txt:#12203a; --syn-caret:#0e7490;
  --syn-com:#7e8f99; --syn-pre:#728e00; --syn-key:#cc6600;
  --syn-fun:#00979c; --syn-const:#00699b; --syn-str:#b7410e; --syn-num:#00699b;
}
.tk-com{color:var(--syn-com);font-style:italic}
.tk-pre{color:var(--syn-pre)}
.tk-key{color:var(--syn-key)}
.tk-fun{color:var(--syn-fun)}
.tk-const{color:var(--syn-const)}
.tk-str{color:var(--syn-str)}
.tk-num{color:var(--syn-num)}
#blocksCode .tk-com,#blocksCode .tk-str{font-style:normal}
.blocks-wrap{display:flex;height:100%;min-height:0}
.blocks-lib{flex:0 0 190px;overflow-y:auto;padding:10px;border-right:1px solid var(--line);background:var(--bg2)}
.blocks-lib h5{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-mute);margin:10px 0 5px}
.blk{
  display:block;width:100%;text-align:left;padding:7px 9px;border-radius:8px;margin-bottom:4px;
  font-size:11.5px;background:var(--panel);border:1px solid var(--line);color:var(--text-dim);
}
.blk:hover{border-color:var(--acc);color:var(--text)}
.blk.ctrl{background:rgba(129,140,248,.13);border-color:rgba(129,140,248,.35);color:#c7d2fe}
.blk.io{background:rgba(34,211,238,.11);border-color:rgba(34,211,238,.3);color:#a5f3fc}
.blocks-prog{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.bp-head{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--text-dim)}
.bp-list{flex:1 1 auto;overflow-y:auto;padding:9px}
.bp-item{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--bg2);
  border:1px solid var(--line);border-radius:8px;margin-bottom:4px;font-size:11.5px;font-family:var(--mono)}
.bp-item .bp-move{margin-left:auto;display:flex;gap:2px}
.bp-item .bp-move button{width:20px;height:20px;border-radius:5px;background:var(--panel2);color:var(--text-mute);font-size:10px}
.bp-item .bp-move button:hover{color:var(--text)}
.bp-item input{width:62px;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:3px 6px;font-size:11px;font-family:var(--mono);outline:none;color:var(--text)}
.bp-item select{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 5px;font-size:11px;outline:none}
.bp-out{border-top:1px solid var(--line);padding:8px 11px;max-height:160px;overflow:auto;background:var(--bg2)}
.bp-out small{font-size:10px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.6px}
.bp-out pre{margin:5px 0 0;font-family:var(--mono);font-size:calc(var(--code-fs,12.5px) - 1.5px);color:#a5f3fc;white-space:pre-wrap;line-height:1.5}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}
.tpl{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:11px;text-align:left;transition:.15s}
.tpl:hover{border-color:var(--acc);transform:translateY(-2px)}
.tpl b{display:block;font-size:12.5px;margin-bottom:3px}
.tpl small{font-size:11px;color:var(--text-mute);line-height:1.45;display:block}

/* ------------------------- RESPONSIVE ------------------------- */
@media (max-width:1500px){
  .tb-btn i{display:none}                 /* solo iconos: así nunca se sale el grupo de la derecha */
  .tb-btn{padding:7px 9px}
}
@media (max-width:1180px){
  .panel{width:230px;flex-basis:230px}
  #panelRight{width:280px;flex-basis:280px}
  body.hide-left #panelLeft{margin-right:-230px}
  body.hide-right #panelRight{margin-left:-280px}
}
@media (max-width:860px){
  :root{--console-h:130px}
  .tb-brand .tb-title{display:none}
  .tb-proj{display:none}
  #layout{position:relative}
  .panel{position:absolute;top:0;bottom:0;z-index:30;box-shadow:var(--shadow);transition:transform .22s ease}
  #panelLeft{right:0}                     /* Componentes */
  #panelRight{left:0}                     /* Inspector */
  body.hide-left #panelLeft{margin-right:0;transform:translateX(102%)}
  body.hide-right #panelRight{margin-left:0;transform:translateX(-102%)}
  #challengeHud{flex-wrap:wrap;max-width:94vw;justify-content:center}
}
@media (max-width:560px){
  .cat-items{grid-template-columns:1fr 1fr}
  .tpl-grid{grid-template-columns:1fr}
  .vs-btn span{display:none}
  .vs-btn{padding:5px 10px}
}
@media print{
  #topbar,#toolbar2,#panelLeft,#panelRight,#consoleWrap,#assistantFab{display:none!important}
}

/* ============================================================
   VISTA "COMPONENTES" — lista de las piezas usadas en el circuito
   Comparte hueco con #workspace: el selector de la cabecera enciende
   body.vista-lista y se intercambian.
   ============================================================ */
#viewComponentes{
  order:2;flex:1 1 auto;min-width:0;min-height:0;
  display:flex;flex-direction:column;background:var(--stage);
}
body.vista-lista #workspace,
body.vista-lista #panelLeft,
body.vista-lista #panelRight,
body.vista-lista #assistantFab{display:none!important}
/* en la lista no pintan las herramientas del lienzo, pero sí Código / Iniciar */
body.vista-lista #toolbar2 .t2-group:not(.end){display:none}

.vc-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel);
}
.vc-head h2{font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim)}
.vc-head small{display:block;margin-top:2px;font-size:11.5px;color:var(--text-mute)}
.vc-body{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 18px 26px}
.vc-acc{display:flex;align-items:center;gap:8px;flex:0 0 auto}

table.vc-tabla{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:13px}
table.vc-tabla th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-mute);padding:0 12px 6px;
}
table.vc-tabla th.n{width:64px;text-align:right}
table.vc-tabla th.f{width:96px}
table.vc-tabla th.c{width:82px;text-align:center}
table.vc-tabla th.e{width:86px;text-align:center}
table.vc-tabla td{
  background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px 12px;vertical-align:middle;color:var(--text-dim);
}
table.vc-tabla td:first-child{border-left:1px solid var(--line);border-radius:11px 0 0 11px}
table.vc-tabla td:last-child{border-right:1px solid var(--line);border-radius:0 11px 11px 0}
table.vc-tabla tbody tr{cursor:pointer;transition:.14s}
table.vc-tabla tbody tr:hover td{border-color:var(--acc);background:var(--panel2)}
table.vc-tabla td.n{text-align:right;font-family:var(--mono);font-size:14px;color:var(--acc)}
.vc-foto{
  width:78px;height:52px;display:grid;place-items:center;background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.vc-foto svg{max-width:70px;max-height:46px;overflow:visible}
table.vc-tabla td.nom b{display:block;font-size:13px;color:var(--text);font-weight:400}
table.vc-tabla td.nom small{display:block;margin-top:2px;font-size:11px;color:var(--acc);font-family:var(--mono)}
table.vc-tabla td.mod{font-size:12px;line-height:1.45}
table.vc-tabla td.mod em{display:block;font-style:normal;font-size:11px;color:var(--text-mute);margin-top:2px}
/* cantidad: las piezas iguales se agrupan en una fila y aquí va cuántas hay */
table.vc-tabla td.c{text-align:center}
table.vc-tabla td.c b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:28px;padding:0 9px;border-radius:999px;
  background:rgba(34,211,238,.14);color:var(--acc);font-family:var(--mono);
  font-size:14px;font-weight:700;
}
.vc-pie{margin-top:12px;padding:0 4px;font-size:12px;color:var(--text-mute)}
.vc-pie b{color:var(--text)}
/* boton para personalizar el aspecto del componente */
table.vc-tabla td.e{text-align:center}
.vc-edit{
  width:34px;height:30px;border-radius:9px;font-size:15px;line-height:1;
  background:var(--bg2);border:1px solid var(--line);color:var(--text-dim);transition:.14s;
}
.vc-edit:hover{border-color:var(--acc);background:var(--panel2);transform:translateY(-1px)}
.vc-edit.on{border-color:var(--acc);background:rgba(34,211,238,.16)}

/* ---------- editor de aspecto (dialogo Personalizar) ---------- */
.perso{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.perso-vista{
  flex:0 0 262px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 10px;
}
.perso-prev{width:100%;min-height:180px;display:grid;place-items:center}
.perso-prev svg{max-width:100%;height:auto;overflow:visible}
.perso-vista small{color:var(--text-mute);font-size:11.5px}
.perso-ctrl{flex:1 1 300px;min-width:280px}
.perso-ctrl h4{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-mute);
  margin:2px 0 8px}
.perso-ctrl h4+*{margin-top:0}
.perso-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:7px;margin-bottom:16px}
.perso-parte{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--line);cursor:pointer;
}
.perso-parte:hover{border-color:var(--acc)}
.perso-parte.es-texto{border-style:dashed}
.perso-parte span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.perso-parte b{font-size:11.5px;color:var(--text);font-weight:600}
.perso-parte small{font-size:10px;color:var(--text-mute);font-family:var(--mono)}
.perso input[type=color]{
  flex:0 0 auto;width:32px;height:28px;padding:0;border:1px solid var(--line);
  border-radius:7px;background:none;cursor:pointer;
}
.perso input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.perso input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.perso-fila{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.perso-fila label{flex:0 0 128px;font-size:12px;color:var(--text-dim)}
.perso-fila input[type=range]{flex:1 1 auto;accent-color:var(--acc)}
.perso-fila b{font-family:var(--mono);font-size:12px;color:var(--acc);min-width:44px;text-align:right}
.perso-nota{font-size:11.5px;line-height:1.55;color:var(--text-mute);margin:10px 0 0}
@media (max-width:640px){
  .perso-vista{flex:1 1 100%}
  .perso-fila label{flex-basis:104px}
}

@media (max-width:700px){
  table.vc-tabla th.f,table.vc-tabla td.f{width:70px}
  .vc-foto{width:60px;height:44px}
  .vc-foto svg{max-width:54px;max-height:38px}
  .vc-body{padding:10px 10px 20px}
}

/* ============================================================
   Osciloscopio, multimetro y modo averia
   ============================================================ */
.cw-pane.sin-margen{padding:0;display:none;flex-direction:column}
.cw-pane.sin-margen.active{display:flex}
.scope-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;flex:0 0 auto}
.scope-bar select.mini{padding:3px 6px}
.sc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:4px}
.sc-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);
  border:1px solid var(--line);border-radius:20px;padding:2px 6px 2px 7px;background:var(--bg2)}
.sc-chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.sc-chip button{background:none;border:0;color:var(--text-mute);cursor:pointer;font-size:11px;padding:0 1px}
.sc-chip button:hover{color:var(--err)}
.scope-wrap{flex:1 1 auto;min-height:120px;position:relative}
.scope-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.scope-pins{display:flex;gap:8px;flex-wrap:wrap}

/* --- multimetro --- */
.mm-punta{cursor:grab}
.mm-punta:active{cursor:grabbing}
.mm-hit{fill:transparent}
#multiOut{
  position:absolute;left:12px;bottom:56px;z-index:24;width:190px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:8px 10px 10px;font-size:12px;
}
.mm-cab{display:flex;align-items:center;justify-content:space-between;font-weight:600;
  color:var(--text);margin-bottom:6px}
.mm-cab button{background:none;border:0;color:var(--text-mute);cursor:pointer;font-size:12px}
.mm-cab button:hover{color:var(--err)}
.mm-fila{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;color:var(--text-dim)}
.mm-fila b{font-family:var(--mono);color:var(--acc);font-size:13px}
.mm-fila.principal b{font-size:19px;color:var(--text)}
.mm-nota,.mm-vacio{margin-top:6px;font-size:10.5px;line-height:1.45;color:var(--text-mute)}

/* --- modo averia --- */
#faultHud{
  position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:40;
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--panel);border:1px solid var(--warn,#f59e0b);border-radius:14px;box-shadow:var(--shadow);
}
.fh-ico{font-size:20px}
.fh-info{display:flex;flex-direction:column;line-height:1.3}
.fh-info strong{font-size:12.5px;color:var(--text)}
.fh-info small{font-size:10.5px;color:var(--text-mute)}

/* --- lista de materiales --- */
table.bom{width:100%;border-collapse:collapse;font-size:12.5px}
table.bom th{text-align:left;color:var(--text-mute);font-weight:600;font-size:11px;
  border-bottom:1px solid var(--line);padding:5px 6px}
table.bom td{padding:5px 6px;border-bottom:1px solid var(--line);color:var(--text-dim)}
table.bom td.n{width:44px;font-family:var(--mono);color:var(--acc);text-align:right}
table.bom td.v{width:92px;font-family:var(--mono);text-align:right;color:var(--text-mute)}
.bom-pie{margin-top:9px;font-size:11.5px;color:var(--text-mute)}

@media (max-width:860px){
  #multiOut{left:8px;bottom:auto;top:8px;width:150px}
  #faultHud{flex-wrap:wrap;max-width:94vw}
}

/* ---------- galeria de aspecto (todos los componentes) ---------- */
.pg-busca{margin-bottom:12px}
.pg-busca input{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-size:13px;outline:none;color:var(--text);
}
.pg-busca input:focus{border-color:var(--acc)}
.pg-lista{max-height:56vh;overflow-y:auto;padding-right:4px}
.pg-lista h4{
  display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--text-mute);margin:14px 0 8px;
}
.pg-lista h4:first-child{margin-top:0}
.pg-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.pg-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  color:var(--text-dim);text-align:center;transition:.14s;position:relative;
}
.pg-item:hover{border-color:var(--acc);color:var(--text);transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.22)}
.pg-ico{width:64px;height:46px;display:grid;place-items:center}
.pg-ico svg{max-width:100%;max-height:100%;overflow:visible}
.pg-nom{font-size:10.5px;line-height:1.2}
/* punto turquesa en los que ya tienen el aspecto retocado */
.pg-item.retocado::after{
  content:'';position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 2px var(--bg2);
}

/* ============================================================
   BIBLIOTECA: pestañas de la paleta, resultados de búsqueda,
   destacados, ficha de componente y ensamblajes
   ============================================================ */
.pal-tabs{display:flex;gap:3px;margin:8px 10px 0;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:3px}
.pal-tabs button{flex:1;padding:6px 4px;font-size:11.5px;border-radius:7px;color:var(--text-mute);font-weight:600;white-space:nowrap}
.pal-tabs button.on{background:var(--panel);color:var(--acc);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.cat-head .cat-n{font-size:10px;font-weight:600;color:var(--text-mute);background:var(--bg2);border-radius:9px;padding:1px 6px;letter-spacing:0}

.pal-item{position:relative}
.pal-item .pi-txt{min-width:0}
.pal-item .pi-info{
  position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:50%;font-size:11px;line-height:17px;
  color:var(--text-mute);background:transparent;opacity:0;transition:.12s;cursor:pointer;padding:0;
}
.pal-item:hover .pi-info,.pal-item.fila .pi-info{opacity:1}
.pal-item .pi-info:hover{background:var(--acc);color:#04202a}
.pal-item .pi-star{position:absolute;top:3px;left:5px;font-size:10px;color:#facc15}
.pal-item.dest{border-color:rgba(250,204,21,.45)}
.pal-item.herr{cursor:pointer}
/* filas (resultados de búsqueda): imagen + nombre + categoría, sin ambigüedad */
.res-head{font-size:11px;color:var(--text-mute);padding:6px 4px 6px;font-weight:600}
.res-list{display:flex;flex-direction:column;gap:5px}
.pal-item.fila{flex-direction:row;align-items:center;text-align:left;gap:9px;padding:7px 28px 7px 8px}
.pal-item.fila .pi-ico{width:calc(48px * var(--pi-esc,1));height:calc(36px * var(--pi-esc,1));flex:0 0 auto}
.pal-item.fila .pi-name{font-size:12px;color:var(--text);font-weight:400}
.pal-item.fila .pi-sub{font-size:10.5px;color:var(--text-mute);line-height:1.3;margin-top:1px}
.pal-item.fila .pi-sub i{color:var(--acc);font-style:normal}
.pal-item.fila .pi-info{top:50%;transform:translateY(-50%);right:6px;width:20px;height:20px;line-height:20px;font-size:13px}
.res-ens{margin-top:12px;border-top:1px dashed var(--line);padding-top:4px}
.res-ens-it{display:block;width:100%;text-align:left;padding:7px 9px;margin-bottom:4px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--line);font-size:12px;color:var(--text-dim)}
.res-ens-it:hover{border-color:var(--acc);color:var(--text)}
.pal-ocultos{display:block;width:100%;margin-top:6px;padding:8px;border-radius:8px;font-size:11px;color:var(--text-mute);
  border:1px dashed var(--line);background:transparent}
.pal-ocultos:hover{color:var(--acc);border-color:var(--acc)}

/* ---- ficha de componente ---- */
.bib-ficha .bf-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:10px;flex-wrap:wrap}
.bib-ficha .bf-img{width:170px;height:128px;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;flex:0 0 auto}
.bib-ficha .bf-img svg{max-width:150px;max-height:112px;overflow:visible}
.bib-ficha .bf-datos{flex:1;min-width:200px;font-size:12.5px;color:var(--text-dim);display:flex;flex-direction:column;gap:5px}
.bib-ficha .bf-cat{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text)}
.bib-ficha .bf-cat .dot{width:9px;height:9px;border-radius:50%}
.bib-ficha .bf-tipo{font-style:italic}
.bf-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.bib-tag{--tag:#0891b2;display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:10px;
  color:var(--tag);border:1px solid var(--tag);background:rgba(127,127,127,.08);white-space:nowrap}
.bf-pines{display:flex;flex-wrap:wrap;gap:4px}
.bf-pin{font-size:10.5px;font-family:var(--mono);padding:2px 6px;border-radius:5px;background:var(--bg2);border:1px solid var(--line);color:var(--text-dim)}
.bf-pin.pos{border-color:#ef4444;color:#ef4444}
.bf-pin.neg{border-color:#64748b}
.bf-compat{display:flex;flex-wrap:wrap;gap:6px}
.bf-c,.bf-e{display:flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:9px;background:var(--bg2);
  border:1px solid var(--line);font-size:11.5px;color:var(--text-dim)}
.bf-c svg{overflow:visible}
.bf-c:hover,.bf-e:hover{border-color:var(--acc);color:var(--text)}

/* ---- ensamblajes en el panel ---- */
.ens-intro{font-size:11.5px;line-height:1.5;color:var(--text-mute);padding:2px 4px 8px}
.ens-intro b{color:var(--text-dim)}
.ens-ce{font-size:13px}
.ens-items{display:flex;flex-direction:column;gap:7px;padding:4px 2px 8px}
.cat.closed .ens-items{display:none}
.ens-card{position:relative;display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:7px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);cursor:grab;user-select:none;transition:.14s}
.ens-card:hover{border-color:var(--acc);transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.2)}
.ens-card.dest{border-color:rgba(250,204,21,.5)}
.ens-card.inactivo{cursor:not-allowed}
.ens-card.inactivo .ec-mini,.ens-card.inactivo .ec-txt>b{opacity:.5}
.ens-card.oculto{border-style:dashed}
.ens-card.oculto .ec-mini{opacity:.35}
/* cabecera de categoría + controles del docente (👁/🙈 · 🔓/🔒) */
.ens-cat-fila{display:flex;align-items:center}
.ens-cat-fila .cat-head{flex:1 1 auto;min-width:0;cursor:pointer;user-select:none}
.ens-cat-fila .cat-head:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ens-cat-fila .ens-cn{min-width:0;text-align:left}
/* 👁/🔓 del docente: solo icono, justo al lado del nombre de la categoría */
.cat-head>.ens-ctl{margin-left:2px;text-transform:none;letter-spacing:0}
.cat-head>.ens-ctl button{width:24px;height:22px;font-size:12px}
.ens-candado{font-size:11px;letter-spacing:0}
.cat-oculta>.ens-cat-fila .cat-head .ens-ce,.cat-oculta>.ens-cat-fila .cat-head .ens-cn{opacity:.55}
.ens-ctl{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.ens-ctl button{width:26px;height:24px;border-radius:7px;font-size:12.5px;line-height:1;display:grid;place-items:center;
  background:var(--bg2);border:1px solid var(--line);filter:grayscale(.2);transition:.12s}
.ens-ctl button:hover{border-color:var(--acc);transform:translateY(-1px)}
.ens-ctl button.on{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.45)}
.ens-ctl button.bloq{background:rgba(248,113,113,.15);border-color:rgba(248,113,113,.55)}
.ec-ctl{margin-top:4px;cursor:default}
.ec-mini{width:100%;height:76px;flex:0 0 auto;background:var(--stage);border-radius:8px;display:grid;place-items:center;overflow:hidden}
.ec-mini svg{width:100%;height:76px}
.ec-txt{min-width:0;display:flex;flex-direction:column;gap:2px;padding:0 22px 0 2px}
.ec-txt b{font-size:12px;line-height:1.25;color:var(--text);font-weight:400}
.ec-txt small{font-size:10.5px;color:var(--text-mute)}
.ec-info{position:absolute;bottom:8px;right:6px;width:20px;height:20px;border-radius:50%;font-size:13px;color:var(--text-mute)}
.ec-info:hover{background:var(--acc);color:#04202a}
.ens-ghost{background:var(--panel);border:1px solid var(--acc);border-radius:10px;padding:4px}

/* ---- ficha de un ensamblaje (cajón) ---- */
.ens-meta{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.ens-meta span{font-size:11px;padding:3px 8px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);color:var(--text-dim)}
.ens-meta span.warn{color:var(--warn);border-color:var(--warn)}
.ens-mini-grande{background:var(--stage);border:1px solid var(--line);border-radius:12px;padding:6px;margin-bottom:10px}
.ens-mini-grande svg{width:100%;height:auto;max-height:280px;display:block}
.ens-h4{font-size:12px;color:var(--acc);margin:14px 0 6px}
.ens-comps{display:flex;flex-wrap:wrap;gap:6px}
.ens-comp{display:flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);
  font-size:11.5px;color:var(--text-dim)}
.ens-comp svg{overflow:visible}
.ens-comp:hover{border-color:var(--acc);color:var(--text)}
.ens-conex{margin:0;padding-left:20px;font-size:12px;line-height:1.75;color:var(--text-dim)}
.ens-conex .wc{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ---- inspector: pieza de un ensamblaje ---- */
.ens-insp{border:1px dashed rgba(167,139,250,.6);border-radius:10px;padding:8px 9px;background:rgba(167,139,250,.06)}
.ens-miembros{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.ens-m{display:flex;align-items:center;gap:4px;padding:3px 7px 3px 4px;border-radius:7px;font-size:10.5px;color:var(--text-dim);
  background:var(--bg2);border:1px solid var(--line)}
.ens-m svg{overflow:visible}
.ens-m.on{border-color:var(--acc);color:var(--text)}

/* ---- contorno del ensamblaje en el lienzo ---- */
#layEns .ens-contorno{fill:rgba(167,139,250,.06);stroke:#a78bfa;stroke-width:1.6;stroke-dasharray:7 5;pointer-events:none}
#layEns .ens-etq{font-size:12px;font-weight:700;fill:#8b5cf6;font-family:var(--font);pointer-events:none}

/* ---- panel del docente: biblioteca ---- */
.bib-nota{font-size:12px;line-height:1.55;color:var(--text-dim);margin:0 0 10px}
.bib-nota small{color:var(--text-mute)}
.bib-subs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.bib-subs button{padding:6px 11px;border-radius:8px;font-size:11.5px;color:var(--text-mute);background:var(--bg2);border:1px solid var(--line)}
.bib-subs button.on{color:var(--acc);border-color:var(--acc);font-weight:600}
.bib-tam{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:10px}
.bib-tam label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px}
.bib-tam label b{color:var(--acc)}
.bib-tam-ctl{display:flex;align-items:center;gap:8px}
.bib-tam-ctl input[type=range]{flex:1}
.bib-filtros,.bib-nueva{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.bib-filtros input,.bib-filtros select,.bib-nueva input[type=text]{flex:1;min-width:140px;background:var(--bg2);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;font-size:12px;color:var(--text);outline:none}
.bib-nueva input[type=color],.bib-fila input[type=color]{width:30px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.bib-lista{display:flex;flex-direction:column;gap:5px;max-height:58vh;overflow-y:auto;padding-right:3px}
.bib-fila{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;background:var(--bg2);border:1px solid var(--line)}
.bib-fila.oculto{opacity:.55}
.bib-fila .bf-ico{width:44px;height:34px;display:grid;place-items:center;flex:0 0 auto}
.bib-fila .bf-ico svg{overflow:visible;max-width:44px;max-height:34px}
.bib-fila .bf-ico.ens{width:74px;height:46px;background:var(--stage);border-radius:6px}
.bib-fila .bf-ico.ens svg{max-width:72px;max-height:44px}
.bib-fila .bf-t{flex:1;min-width:0;font-size:12px;display:flex;flex-direction:column;gap:2px}
.bib-fila .bf-t small{color:var(--text-mute);font-size:10.5px}
.bib-fila .bf-t .dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.bib-fila .bf-a{display:flex;gap:3px;align-items:center;flex:0 0 auto}
.bib-fila .bf-a button{width:28px;height:28px;border-radius:7px;font-size:13px;color:var(--text-mute);border:1px solid transparent}
.bib-fila .bf-a button:hover:not(:disabled){border-color:var(--acc);color:var(--text)}
.bib-fila .bf-a button.on{color:var(--text)}
.bib-fila .bf-a button:disabled{opacity:.3;cursor:default}
.bib-form-top{display:flex;gap:12px;align-items:center;margin-bottom:10px;font-size:13px}
.bib-form-top svg{overflow:visible}
.bib-chk{display:flex;flex-wrap:wrap;gap:4px 10px;max-height:150px;overflow-y:auto;padding:6px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.bib-chk label{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-dim);cursor:pointer}
.bib-chk.grande{max-height:52vh;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.bib-chk.grande svg{overflow:visible}
.bib-chk input{accent-color:var(--acc)}
.bib-flags{display:flex;gap:18px}
.bib-flags label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim)}
@media (max-width:600px){
  .bib-fila{flex-wrap:wrap}
  .bib-flags{flex-direction:column;gap:6px}
}
.bib-fila .bf-t .bib-tag{align-self:flex-start}

/* ============================================================
   v1.21 — categorías alineadas a la izquierda, ancho de paneles
   ajustable e instrumentos resaltados en verde mientras se usan
   ============================================================ */
/* el texto de la cabecera de categoría se alinea a la izquierda aunque ocupe dos líneas */
.cat-head{text-align:left;justify-content:flex-start}

/* ancho elegido arrastrando el borde (vale para escritorio; en móvil los
   paneles flotan y el ancho no quita espacio al lienzo) */
body.ancho-comp #panelLeft{width:var(--w-comp);flex-basis:var(--w-comp)}
body.ancho-comp.hide-left #panelLeft{margin-right:calc(-1 * var(--w-comp))}
body.ancho-insp #panelRight{width:var(--w-insp);flex-basis:var(--w-insp)}
body.ancho-insp.hide-right #panelRight{margin-left:calc(-1 * var(--w-insp))}
@media (min-width:861px){ .panel{position:relative} }
@media (max-width:860px){
  body.ancho-comp.hide-left #panelLeft{margin-right:0}
  body.ancho-insp.hide-right #panelRight{margin-left:0}
  body.ancho-comp #panelLeft,body.ancho-insp #panelRight{max-width:92vw}
  /* en móvil los paneles flotan sobre el lienzo: la pestaña se pega a su borde */
  body:not(.hide-right) .panel-tab.izq{left:280px}
  body.ancho-insp:not(.hide-right) .panel-tab.izq{left:min(var(--w-insp),92vw)}
  body:not(.hide-left) .panel-tab.der{right:230px}
  body.ancho-comp:not(.hide-left) .panel-tab.der{right:min(var(--w-comp),92vw)}
}
.panel-resizer{position:absolute;top:0;bottom:0;width:8px;cursor:col-resize;z-index:6;touch-action:none}
#panelLeft .panel-resizer{left:-4px}
#panelRight .panel-resizer{right:-4px}
.panel-resizer::after{content:'';position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--acc);opacity:0;transition:opacity .15s}
.panel-resizer:hover::after,.panel-resizer.activo::after{opacity:.75}
body.redimensionando,body.redimensionando *{cursor:col-resize!important;user-select:none}
body.redimensionando .panel{transition:none}

/* instrumentos: botones que se encienden y se apagan, verde sutil mientras están en uso */
.pal-item.herr.activo{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.6);box-shadow:inset 0 0 0 1px rgba(34,197,94,.25)}
.pal-item.herr.activo .pi-name{color:#15803d;font-weight:400}
body:not(.light) .pal-item.herr.activo .pi-name{color:#4ade80}
.pal-item.herr:active{transform:scale(.97)}
#tglMulti.instr-activo,#btnScope.instr-activo,
.st-btn.instr-activo{background:rgba(34,197,94,.16)!important;color:#16a34a!important;box-shadow:inset 0 0 0 1px rgba(34,197,94,.45)}

/* El texto dibujado dentro del lienzo (9V, +, −, números, rótulos…) no se
   puede seleccionar: al arrastrar una pieza cerca de otra con texto, el
   navegador seleccionaba el texto en vez de mover la pieza. */
#stage,#stage *{-webkit-user-select:none;user-select:none}
/* Táctil: en la paleta, deslizar en vertical recorre la lista y deslizar en
   horizontal saca la pieza hacia el área de trabajo. El resto de la interfaz
   no hace zoom de página con doble toque (el zoom es del lienzo, con dos dedos). */
.pal-item,.ens-card{touch-action:pan-y}
body{touch-action:manipulation}
#stage{-webkit-touch-callout:none}
#stage text{pointer-events:none}
.bib-fila .bf-t b,.pal-item .pi-name{font-weight:400}

/* ============================================================
   v1.28.2 — celular en vertical: la cabecera pasa a DOS filas.
   En una sola fila el grupo final (Circuito/Componentes, cuenta,
   sonido, tema, menú) es sticky y TAPABA Archivo, Edición y
   Aprender. Ahora:
     fila 1 → volver a la Intranet, logo, Circuito/Componentes, cuenta, ☰
     fila 2 → Archivo, Edición, Analizar, Aprender … sonido, tema
   `display:contents` en el grupo final deja ordenar sus botones
   uno a uno; ::after es el salto de línea forzado.
   ============================================================ */
@media (max-width:600px){
  :root{--topbar-h:84px}
  #topbar{flex-wrap:wrap;align-content:space-evenly;row-gap:0;padding:0 8px;overflow:hidden}
  #topbar::after{content:'';flex:0 0 100%;height:0;order:6}
  #topbar .tb-brand{order:1;padding-right:2px}
  #topbar .tb-group.end{display:contents}
  #topbar #viewSwitch{order:2}
  #topbar .tb-spacer{order:3}
  #topbar #btnEnviarDocente,#topbar #btnCuenta{order:4}
  #topbar #btnMenu{order:5}
  #topbar > .tb-group:not(.end){order:7;padding:0 3px;gap:3px}
  #topbar .tb-btn{padding:6px 7px}
  #topbar #btnSonido{order:8;margin-left:auto}
  #topbar #btnTema{order:8}
}

/* v1.28.5 — menú de la pulsación larga (táctil): Eliminar, Girar, Duplicar / Color */
.menu-tactil{position:fixed;z-index:400;min-width:168px;padding:6px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);
  animation:mtEntra .14s ease-out}
.menu-tactil .mt-tit{font-size:11px;color:var(--text-mute);padding:3px 8px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.menu-tactil button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 10px;border-radius:9px;
  font-size:14px;color:var(--text);background:none;border:0;text-align:left;touch-action:manipulation}
.menu-tactil button span{width:22px;text-align:center;font-size:17px}
.menu-tactil button:active,.menu-tactil button:hover{background:var(--bg2)}
.menu-tactil button.peligro{color:var(--err)}
@keyframes mtEntra{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.menu-tactil{animation:none}}