/* ============================================================
   breadwire · tema compartido
   ------------------------------------------------------------
   Fuente única de las variables de color para las tres vistas
   (Esquema, Protoboard 2D y Protoboard 3D).

   Lenguaje de diseño: vidrio + pan + electrónica.
   · Sustrato cálido (charcoal tostado) en vez del azul-negro: es
     la "miga" sobre la que se apoya todo.
   · Escala de vidrio en tres alturas (--glass-1 panel, --glass-2
     barra, --glass-3 flotante) con borde especular interior, que
     es lo que hace que el vidrio parezca vidrio.
   · Metales (cobre y soldadura) y máscara de soldadura como
     acentos de la parte electrónica.
   · El acento (--accent / --accent-rgb) lo aplica js/theme.js en
     línea sobre <html>; el resto de las vistas usan las variables.

   Los nombres de variable no cambian: editor.css y protoboard.css
   los consumen tal cual. Aquí solo cambian los valores y se añaden
   los tokens de vidrio.
   ============================================================ */
/* Mientras la interfaz no está traducida se oculta el contenido, para
   que no se vea primero en español y luego en inglés. La clase la pone
   el <script> en línea del <head> (sólo cuando el idioma guardado no es
   español) y la retira `initI18n()`; el fondo del <body> sigue a la
   vista, así que lo que se ve mientras tanto es el sustrato, no un
   destello blanco. */
html.i18n-pending body > *{visibility:hidden}

:root{
  --bg:#0c0a09; --bg2:#141110; --surface:#1a1614;
  --border:#2b2421; --border-hi:#3d342e;
  --text:#efe9e0; --text-dim:#a79c90; --text-mute:#8a8078;
  --accent:#00e0ff; --accent-rgb:0,224,255; --accent-2-rgb:184,115,51;
  --ok:#34d399; --ok-rgb:52,211,153;
  --warn:#ffb84d; --warn-rgb:255,184,77;
  --err:#ff5566; --err-rgb:255,85,102;
  --info:#5b8cff; --float:#4a423b;
  --canvas-bg:#0a0807; --canvas-grid:#241f1c;
  --canvas-ink:#efe9e0; --canvas-ink2:#a79c90; --canvas-paper:#0a0807;
  --wire-ink:#9a8f84;
  /* Superficies translúcidas (cabecera, barras, paneles flotantes) */
  --panel-rgb:14,12,10;
  --panel2-rgb:22,18,16;
  /* Tintes mínimos sobre superficies oscuras (se invierten en claro) */
  --hair-rgb:255,255,255;
  --stage-bg:radial-gradient(ellipse at center, #14100d 0%, #070605 100%);
  --body-glow:radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--accent-rgb),.08), transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%, rgba(192,138,78,.07), transparent 60%);
  --code-bg:#080706; --code-fg:#9fd4e6;
  --head-grad-a:#efe9e0; --head-grad-b:var(--accent);
  --shadow:rgba(0,0,0,.6);
  /* Acento para texto. Sobre sustrato oscuro el acento puro ya contrasta;
     js/theme.js lo oscurece en el tema claro, donde el cian se queda en
     1.5:1 y es ilegible. Aquí va el valor de respaldo sin JS. */
  --accent-ink:var(--accent);
  --sans:'Familjen Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---------- Escala de vidrio ----------
     Tres alturas: panel (superficies grandes), barra (chrome) y
     flotante (widgets sobre el lienzo). El borde especular es el
     brillo interior de 1px del canto superior. */
  --glass-1:rgba(14,12,10,.55);
  --glass-2:rgba(20,17,15,.62);
  --glass-3:rgba(28,23,20,.74);
  --glass-border:rgba(255,255,255,.10);
  --glass-border-hi:rgba(255,255,255,.18);
  --glass-specular:inset 0 1px 0 rgba(255,255,255,.10);
  --glass-shadow:0 18px 44px rgba(0,0,0,.55);
  --blur-1:8px; --blur-2:14px; --blur-3:24px;
  /* Controles (botones, campos, chips) y vidrio opaco para texto
     pequeño o para cuando el blur se apaga. */
  --glass-control:rgba(255,255,255,.05);
  --glass-control-hi:rgba(255,255,255,.09);
  --glass-solid:rgba(20,17,15,.97);

  /* ---------- Metales y pan ---------- */
  --metal-copper:#b87333;
  --metal-solder:#d4af37;
  --bread-crumb:#f2e8d5;
  --bread-crust:#c08a4e;
  --mask-green:#0f6e56;
}

/* ---------- Tema claro ---------- */
html[data-theme="light"]{
  --bg:#efe9df; --bg2:#e7e0d4; --surface:#ffffff;
  --border:#d9d0c2; --border-hi:#c2b6a4;
  --text:#1c1713; --text-dim:#57504a; --text-mute:#776d64;
  --ok:#0b7a5a; --ok-rgb:11,122,90;
  --warn:#8f5c06; --warn-rgb:143,92,6;
  --err:#cc2439; --err-rgb:204,36,57;
  --info:#3b6fe0; --float:#94a3b8;
  --canvas-bg:#ffffff; --canvas-grid:#e2dacb;
  --canvas-ink:#1c1713; --canvas-ink2:#57504a; --canvas-paper:#ffffff;
  --wire-ink:#6b615a;
  --panel-rgb:255,255,255;
  --panel2-rgb:252,250,246;
  --hair-rgb:28,23,19;
  --stage-bg:radial-gradient(ellipse at center, #fffdf9 0%, #e9e2d5 100%);
  --body-glow:radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--accent-rgb),.10), transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%, rgba(192,138,78,.10), transparent 60%);
  --code-bg:#f5f1e8; --code-fg:#1d3557;
  --head-grad-a:#1c1713; --head-grad-b:var(--accent);
  --shadow:rgba(60,48,36,.2);
  --accent-ink:#0a6c7d;

  /* Sobre fondo claro el vidrio es blanco lechoso, no oscuro. */
  --glass-1:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.72);
  --glass-3:rgba(255,255,255,.84);
  --glass-border:rgba(255,255,255,.75);
  --glass-border-hi:rgba(255,255,255,.95);
  --glass-specular:inset 0 1px 0 rgba(255,255,255,.95);
  --glass-shadow:0 18px 44px rgba(70,56,42,.18);
  --glass-control:rgba(255,255,255,.72);
  --glass-control-hi:rgba(255,255,255,.92);
  --glass-solid:rgba(255,255,255,.97);
}

/* ============================================================
   Degradación del vidrio
   ------------------------------------------------------------
   Sin `backdrop-filter` el cristal translúcido deja el texto
   ilegible, así que las tres alturas pasan a ser casi opacas. Con
   `prefers-reduced-transparency` se hace lo mismo a propósito.
   ============================================================ */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  :root{
    --glass-1:rgba(14,12,10,.96);
    --glass-2:rgba(20,17,15,.96);
    --glass-3:rgba(28,23,20,.97);
  }
  html[data-theme="light"]{
    --glass-1:rgba(255,255,255,.97);
    --glass-2:rgba(255,255,255,.97);
    --glass-3:rgba(255,255,255,.98);
  }
}
@media (prefers-reduced-transparency:reduce){
  :root{
    --glass-1:rgba(14,12,10,.96);
    --glass-2:rgba(20,17,15,.96);
    --glass-3:rgba(28,23,20,.97);
    --glass-specular:none;
  }
  html[data-theme="light"]{
    --glass-1:rgba(255,255,255,.97);
    --glass-2:rgba(255,255,255,.97);
    --glass-3:rgba(255,255,255,.98);
  }
}

/* ============================================================
   Componentes de vidrio (comunes a las tres vistas)
   ------------------------------------------------------------
   Van aquí y no en cada vista para no duplicarlos. Llevan el
   prefijo `html` a propósito: así ganan en la cascada a las reglas
   sin prefijo de editor.css / protoboard.css, que se cargan
   después. Si algún día una vista necesita otra cosa, tiene que
   usar también el prefijo `html`.
   ============================================================ */
/* ---------- Botones de herramienta: pastillas de vidrio ---------- */
html .tool{
  background:var(--glass-control);
  border:1px solid var(--glass-border);
  border-radius:9px;
  box-shadow:var(--glass-specular);
  color:var(--text-dim);
}
html .tool:hover{
  background:var(--glass-control-hi);
  border-color:var(--glass-border-hi);
  color:var(--text);
  box-shadow:var(--glass-specular), 0 0 14px rgba(var(--accent-rgb),.12);
}
html .tool.on{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.10));
  border-color:rgba(var(--accent-rgb),.5);
  color:var(--accent);
  box-shadow:var(--glass-specular), 0 0 16px rgba(var(--accent-rgb),.22);
}
html .tool.warn-armed{
  background:linear-gradient(180deg,rgba(var(--err-rgb),.28),rgba(var(--err-rgb),.12));
  border-color:rgba(var(--err-rgb),.55);
  color:var(--err);
  box-shadow:var(--glass-specular), 0 0 16px rgba(var(--err-rgb),.3);
}

/* ---------- Menús desplegables (Esquema y Protoboard) ----------
   Los dos comparten armazón para que se desplieguen igual: `.dd` es el
   contenedor, `.dd-btn` el disparador, `.dd-pop` el panel flotante y
   `.dd-item` una fila de lista (menú Archivo). El selector de módulos
   añade su cuadrícula (.modgrid/.modcell) dentro del mismo panel.
   El comportamiento de apertura vive en js/dropdown.js. */
html .dd{position:relative;display:inline-flex}
html .dd-btn{gap:7px}
html .dd-ico{flex:none;width:15px;height:15px}
html .dd-val{
  font:600 12.5px var(--mono);color:var(--accent-ink);
  min-width:40px;text-align:right;
}
html .dd-chev{
  color:var(--text-dim);font-size:10px;line-height:1;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
html .dd.open .dd-chev{transform:rotate(180deg);color:var(--accent-ink)}
html .dd-pop{
  position:absolute;top:calc(100% + 7px);left:0;z-index:60;
  min-width:186px;padding:11px 12px 10px;
  background:var(--glass-3);
  backdrop-filter:blur(var(--blur-3));
  -webkit-backdrop-filter:blur(var(--blur-3));
  border:1px solid var(--glass-border-hi);border-radius:12px;
  box-shadow:var(--glass-shadow), var(--glass-specular), 0 0 18px rgba(var(--accent-rgb),.12);
  user-select:none;
}
html .dd-pop[hidden]{display:none}
html .dd-head{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
html .dd-head-val{font:600 13px var(--mono);color:var(--accent-ink)}
html .dd-head-unit{font-size:11px;color:var(--text-mute)}
/* Lista (menú Archivo del esquema) */
html .dd-pop-list{min-width:242px;padding:6px}
html .dd-pop-list .dd-head{padding:5px 9px 9px;margin-bottom:4px;border-bottom:1px solid var(--glass-border)}
html .dd-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 9px;background:transparent;
  border:1px solid transparent;border-radius:8px;
  color:var(--text-dim);font:500 13px var(--sans);
  text-align:left;cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
html .dd-item .dd-ico{color:var(--text-mute);transition:color .15s ease}
html .dd-item:hover,html .dd-item:focus-visible{
  background:rgba(var(--accent-rgb),.10);color:var(--accent);
  border-color:rgba(var(--accent-rgb),.22);
}
html .dd-item:hover .dd-ico,html .dd-item:focus-visible .dd-ico{color:var(--accent)}
html .dd-sep{height:1px;margin:5px 4px;background:var(--glass-border)}
/* Menú de idioma: cuelga de la cabecera, a la derecha de los pasos. El
   panel se alinea a la derecha para que no se salga de la ventana. */
html header .lang-pick{margin-left:6px;flex:none}
html header .lang-pick .dd-pop{left:auto;right:0;min-width:150px;padding:6px}
html header .lang-pick .dd-item[aria-current="true"]{color:var(--accent);border-color:rgba(var(--accent-rgb),.22)}
html header .lang-pick .dd-item[aria-current="true"]::after{content:'✓';margin-left:auto;color:var(--accent)}
/* Cuadrícula del selector de módulos */
html .modgrid{display:grid;grid-template-columns:repeat(3,26px);grid-auto-rows:26px;gap:4px}
html .modcell{
  width:26px;height:26px;padding:0;
  /* `--hair-rgb` se invierte con el tema (blanco en oscuro, tinta en
     claro), así que la casilla vacía se ve sobre el vidrio en los dos. */
  background:rgba(var(--hair-rgb),.05);
  border:1px solid rgba(var(--hair-rgb),.20);
  border-radius:5px;cursor:pointer;
  box-shadow:var(--glass-specular);
  transition:background .1s ease, border-color .1s ease, box-shadow .1s ease;
}
html .modcell:hover{background:rgba(var(--hair-rgb),.10);border-color:rgba(var(--hair-rgb),.42)}
html .modcell.on{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),.10));
  border-color:var(--accent-ink);
}
html .modcell.live{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.26));
  border-color:var(--accent);
  box-shadow:var(--glass-specular), 0 0 10px rgba(var(--accent-rgb),.35);
}

/* ---------- Lista del selector de tamaño de protoboard ----------
   Reutiliza `.dd-item` (misma fila que el menú Archivo) pero en dos
   líneas: nombre + puntos arriba, para qué sirve abajo, y un ✓ en el
   preset activo. Necesita algo más de ancho que el menú Archivo para
   que la descripción entre en una sola línea. */
html .dd-pop-size{min-width:300px}
html .dd-item.sizeitem{
  display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:1px 8px;
}
html .sizeitem .sz-name{grid-area:1/1;font:500 13px var(--sans)}
html .sizeitem .sz-pts{grid-area:1/2;font:600 11.5px var(--mono);color:var(--accent-ink);opacity:.85;white-space:nowrap}
html .sizeitem .sz-check{grid-area:1/3;width:12px;text-align:right;color:var(--accent);opacity:0;font-weight:700;transition:opacity .15s ease}
html .sizeitem .sz-note{grid-area:2/1/3/3;font-size:11px;color:var(--text-mute);line-height:1.3}
html .dd-item.sizeitem:hover .sz-note{color:var(--text-dim)}
html .dd-item.sizeitem.on{
  background:rgba(var(--accent-rgb),.08);
  border-color:rgba(var(--accent-rgb),.28);
  color:var(--accent);
}
html .dd-item.sizeitem.on .sz-check{opacity:1}

/* ---------- Segunda página del menú «Tamaño»: Personalizada ----------
   Al pulsar «Personalizada» la lista se sustituye por esta página, con
   el campo de columnas y sus botones − / +. Se queda dentro del mismo
   panel desplegable, así que no hay que salir del menú para medir. */
html .sz-custom{padding:2px 0 0}
html .sz-custom[hidden]{display:none}
html .sz-custom .dd-back{
  width:100%;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
  font-weight:600;color:var(--text-dim);
}
html .sz-custom .dd-back .dd-ico{font:700 15px/1 var(--mono);color:var(--accent)}
html .sz-custom .sz-row{
  display:flex;align-items:center;gap:6px;
  padding:0 2px;
}
html .sz-custom .sz-row .lab{margin-right:2px}
html .sz-custom .sz-row input[type=number]{
  width:74px;padding:5px 8px;text-align:center;
  font:500 13px var(--mono);
}
html .sz-custom .sz-hint{
  margin:9px 2px 2px;
  font-size:11px;line-height:1.4;color:var(--text-mute);
}

/* ---------- Barra de estado (Esquema y Protoboard) ----------
   El botón × que retira la ayuda. Lo usan #statusbar del esquema y de
   la protoboard, así que vive aquí, en la capa compartida. */
html #statusbar .sb-close{
  margin-left:auto;flex:none;
  width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;background:transparent;color:inherit;
  border:1px solid transparent;border-radius:5px;cursor:pointer;
  font:700 14px/1 var(--mono);opacity:.6;
  transition:opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
html #statusbar .sb-close:hover{opacity:1;background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.35);color:var(--accent)}

/* ---------- Widget de zoom (las tres vistas) ----------
   Cuatro lupas: acercar, alejar, ajustar/centrar (recuadro) y zoom a
   una zona arrastrando un recuadro. Antes cada página repetía su copia
   con los mismos valores; vive aquí porque ahora es idéntico en las
   tres. */
html #zoomWidget{
  position:absolute;bottom:14px;left:14px;
  display:flex;align-items:center;gap:1px;
  padding:3px;
  background:var(--glass-3);
  backdrop-filter:blur(var(--blur-2));-webkit-backdrop-filter:blur(var(--blur-2));
  border:1px solid var(--glass-border-hi);
  border-radius:9px;
  box-shadow:var(--glass-shadow), var(--glass-specular), 0 0 14px rgba(var(--accent-rgb),.05);
  z-index:10;user-select:none;
}
html #zoomWidget button{
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--text-dim);cursor:pointer;
  font:500 13px var(--mono);line-height:1;
  transition:all .15s ease;
}
html #zoomWidget button:hover{background:rgba(var(--accent-rgb),.08);color:var(--accent);border-color:rgba(var(--accent-rgb),.25);box-shadow:0 0 8px rgba(var(--accent-rgb),.15)}
html #zoomWidget button:active{transform:scale(.94)}
html #zoomWidget button.on{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));
  color:var(--accent);border-color:rgba(var(--accent-rgb),.45);
}
html #zoomWidget .zi{width:15px;height:15px;display:block;pointer-events:none}
html #zoomWidget .zoom-level{display:inline-flex;align-items:center;justify-content:center;padding:0 6px;height:26px;min-width:40px;font:500 10.5px var(--mono);color:var(--accent);text-shadow:0 0 5px rgba(var(--accent-rgb),.5);letter-spacing:.02em}
html #zoomWidget .divider{width:1px;height:16px;background:var(--border);margin:0 2px}
/* Recuadro que se arrastra para el zoom por zona (protoboards: es un
   div sobre el lienzo; el esquema lo dibuja dentro del SVG). */
html .zoom-area{
  position:absolute;display:none;pointer-events:none;z-index:14;
  border:1.5px dashed var(--accent);border-radius:6px;
  background:rgba(var(--accent-rgb),.10);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.35);
}
html .zoom-area.on{display:block}
/* Mientras se elige la zona el cursor es una cruz en todo el lienzo. */
html.bw-zooming .canvas-zoom-target{cursor:crosshair}

/* ---------- Navegación entre vistas ---------- */
html header nav a{border:1px solid transparent;border-radius:9px}
html header nav a:hover{
  background:var(--glass-control);
  border-color:var(--glass-border);
  color:var(--text);
}
html header nav a[aria-current]{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));
  border-color:rgba(var(--accent-rgb),.45);
  color:var(--accent);
  box-shadow:var(--glass-specular), 0 0 20px rgba(var(--accent-rgb),.16);
}

/* ---------- Teclas, chips y bloques de código ---------- */
html kbd{
  background:var(--glass-control);
  border:1px solid var(--glass-border);
  border-radius:5px;
  color:var(--text-dim);
  opacity:.85;
  box-shadow:var(--glass-specular);
}
html .chip{
  background:var(--glass-control);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-specular);
}
html pre{
  background:var(--glass-control);
  backdrop-filter:blur(var(--blur-1));
  -webkit-backdrop-filter:blur(var(--blur-1));
  border:1px solid var(--glass-border);
  color:var(--code-fg);
}

/* ---------- Campos y controles ---------- */
html select,html input[type=text],html input[type=number],html input[type=search]{
  background:var(--glass-control);
  border:1px solid var(--glass-border-hi);
  border-radius:8px;
  color:var(--text);
  box-shadow:var(--glass-specular);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
html select:hover,html input[type=text]:hover,html input[type=number]:hover{background:var(--glass-control-hi);border-color:var(--glass-border-hi)}
html select:focus,html input[type=text]:focus,html input[type=number]:focus,html input[type=search]:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--glass-specular), 0 0 0 3px rgba(var(--accent-rgb),.18);
}
/* La lista desplegable la pinta el sistema: necesita fondo opaco. */
html select option{background:var(--surface);color:var(--text)}

html input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border-radius:6px;
  background:var(--glass-control);
  border:1px solid var(--glass-border-hi);
  box-shadow:var(--glass-specular);
  cursor:pointer;position:relative;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
html input[type=checkbox]:hover{background:var(--glass-control-hi)}
html input[type=checkbox]:checked{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.36),rgba(var(--accent-rgb),.16));
  border-color:var(--accent);
  box-shadow:var(--glass-specular), 0 0 12px rgba(var(--accent-rgb),.3);
}
html input[type=checkbox]:checked::after{
  content:'';position:absolute;left:5px;top:1.5px;width:5px;height:10px;
  border:2px solid var(--accent);border-top:0;border-left:0;transform:rotate(42deg);
}

html input[type=range]{
  appearance:none;-webkit-appearance:none;
  height:7px;border-radius:999px;
  background:var(--glass-control);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-specular);
}
html input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:1px solid rgba(0,0,0,.4);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.5);cursor:pointer;
}
html input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:1px solid rgba(0,0,0,.4);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.5);cursor:pointer;
}

/* ---------- Botones secundarios y de las barras flotantes ---------- */
html .copy{
  background:var(--glass-control);
  border:1px solid var(--glass-border-hi);
  border-radius:9px;
  box-shadow:var(--glass-specular);
}
html .copy:hover{background:var(--glass-control-hi);border-color:var(--accent);color:var(--accent)}
html #guideBar button,html #zoomWidget button{border-radius:7px}
html #guideBar button:hover:not(:disabled),html #zoomWidget button:hover{
  background:var(--glass-control-hi);
  box-shadow:var(--glass-specular), 0 0 10px rgba(var(--accent-rgb),.15);
}

/* ---------- Aviso flotante ---------- */
html .toast{
  background:var(--glass-3);
  backdrop-filter:blur(var(--blur-2));
  -webkit-backdrop-filter:blur(var(--blur-2));
  border:1px solid rgba(var(--accent-rgb),.4);
  box-shadow:var(--glass-shadow), var(--glass-specular), 0 0 24px rgba(var(--accent-rgb),.2);
}

/* ---------- Barras de desplazamiento ---------- */
html *{scrollbar-width:thin;scrollbar-color:var(--glass-border-hi) transparent}
html ::-webkit-scrollbar{width:10px;height:10px}
html ::-webkit-scrollbar-track{background:transparent}
html ::-webkit-scrollbar-thumb{
  background:var(--glass-border-hi);
  border:2px solid transparent;background-clip:padding-box;border-radius:999px;
}
html ::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),.45);background-clip:padding-box}
html ::-webkit-scrollbar-corner{background:transparent}

/* ============================================================
   El acento como texto
   ------------------------------------------------------------
   El acento lo elige el usuario y puede ser muy claro (el cian lo
   es). Sobre el vidrio oscuro contrasta de sobra, pero sobre el
   claro se queda en 1.5:1 y no se lee. `--accent-ink` es la misma
   tonalidad oscurecida lo justo para pasar AA como texto; el
   acento puro sigue usándose en rellenos, bordes y halos, donde no
   hace falta leer nada.
   ============================================================ */
html header nav a:hover,
html header nav a[aria-current],
html .tool:hover,
html .tool.on,
html .tabs button:hover,
html .tabs button.on,
html .pitem:hover,
html .pitem.on,
html .phead:hover .pchev,
html .pgroup.open .pchev,
html .copy:hover,
html .cc .h .pos,
html #statusbar b,
html #statusbar .coords,
html #zoomWidget .zoom-level,
html #guideBar .g-step,
html #balanceVal,
html #transPanel .trans-title,
html #resPanel .res-title,
html .toast{
  color:var(--accent-ink);
}
/* Los indicadores de estado y el foco también necesitan 3:1 (WCAG 1.4.11),
   así que usan la tinta, no el acento puro. */
html header nav a[aria-current],
html .tool.on,
html select:focus,
html input[type=text]:focus,
html input[type=number]:focus,
html input[type=search]:focus{
  border-color:var(--accent-ink);
}
html .tabs button.on{border-bottom-color:var(--accent-ink)}

/* ============================================================
   Coste del desenfoque
   ------------------------------------------------------------
   `backdrop-filter` obliga a recomponer y desenfocar la zona cada
   vez que el fondo cambia. Al arrastrar o hacer zoom sobre la
   placa el fondo cambia en cada frame, así que durante el gesto el
   vidrio flotante suelta el blur y pasa a ser opaco: el gesto va
   fluido y al soltar vuelve el cristal. La clase `bw-moving` la
   pone y la quita js/protoboard/viewport.js y js/editor/viewport.js.
   ============================================================ */
html.bw-moving #zoomWidget,
html.bw-moving #guideBar,
html.bw-moving #transPanel,
html.bw-moving #resPanel,
html.bw-moving .notice,
html.bw-moving .toast{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:var(--glass-solid);
}

/* ============================================================
   Accesibilidad
   ============================================================ */
/* Anillo de foco: tinta + halo, siempre visible sobre el vidrio. */
html :focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22);
}
/* Sin animaciones si el sistema lo pide: la guía, el flujo de los
   cables y las transiciones dejan de moverse. */
@media (prefers-reduced-motion:reduce){
  html *,html *::before,html *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   Menú de configuración (engranaje junto al widget de zoom)
   ============================================================ */
#themeGear svg{width:14px;height:14px;display:block}
.settings-pop{
  position:absolute;left:14px;bottom:52px;z-index:45;
  width:min(302px,calc(100% - 28px));
  padding:12px 14px 13px;
  background:var(--glass-3);
  backdrop-filter:blur(var(--blur-3));
  -webkit-backdrop-filter:blur(var(--blur-3));
  border:1px solid var(--glass-border-hi);
  border-radius:12px;
  box-shadow:var(--glass-shadow), var(--glass-specular), 0 0 18px rgba(var(--accent-rgb),.12);
  color:var(--text);font-size:13px;user-select:none;
}
.settings-pop[hidden]{display:none}
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.sp-head h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--text)}
.sp-close{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--text-dim);cursor:pointer;font:700 12px/1 var(--mono);
  transition:all .15s ease;
}
.sp-close:hover{color:var(--err);border-color:rgba(var(--err-rgb),.4);background:rgba(var(--err-rgb),.08)}
.sp-sec{margin-top:12px}
.sp-sec:first-of-type{margin-top:0}
.sp-sec>label{
  display:block;margin-bottom:7px;
  font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;color:var(--text-dim);
}
.sp-seg{display:flex;gap:5px}
.sp-seg button{
  flex:1 1 0;padding:7px 4px;
  background:var(--glass-control);border:1px solid var(--glass-border);border-radius:8px;
  color:var(--text-dim);cursor:pointer;font:500 12px var(--sans);
  box-shadow:var(--glass-specular);
  transition:all .16s ease;
}
.sp-seg button:hover{color:var(--text);border-color:var(--glass-border-hi);background:var(--glass-control-hi)}
.sp-seg button.on{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));
  color:var(--accent);border-color:var(--accent);
  box-shadow:var(--glass-specular), 0 0 12px rgba(var(--accent-rgb),.22);
}
.sp-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.sp-swatch{
  width:100%;aspect-ratio:1/1;padding:0;
  border:1px solid var(--border-hi);border-radius:6px;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.sp-swatch:hover{transform:scale(1.14);box-shadow:0 0 8px rgba(var(--accent-rgb),.3)}
.sp-swatch.on{outline:2px solid var(--text);outline-offset:2px}
.sp-accents.off{opacity:.4;pointer-events:none}
.sp-hint{margin:9px 0 0;font-size:11px;line-height:1.4;color:var(--text-mute)}

/* ---------- Avisos del montaje y bloqueo («Fijar») ----------
   El panel lateral que explicaba el montaje está oculto, así que los
   problemas del montaje se anuncian en la barra de herramientas como una
   insignia. Un montaje correcto no se anuncia: la insignia solo existe
   cuando hay algo que arreglar. Y los controles que cambian el montaje se
   apagan cuando el circuito está fijado. */
html .vbadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;border:1px solid transparent;
  font:600 12px var(--mono);letter-spacing:.01em;white-space:nowrap;
  cursor:default;
}
html .vbadge[hidden]{display:none}
html .vbadge.bad{color:var(--err);border-color:rgba(var(--err-rgb),.5);background:rgba(var(--err-rgb),.12)}
html .tool:disabled,html .dd-btn:disabled{opacity:.42;cursor:not-allowed}
/* Un botón apagado (Deshacer sin pasos, controles con el circuito
   fijado) no debe encenderse al pasar por encima: el resalte de
   `.tool:hover` es solo para lo que se puede pulsar. */
html .tool:disabled:hover{background:transparent;color:var(--text-dim);border-color:transparent;box-shadow:none}
html .dd.locked{opacity:.6}
html input[type=range]:disabled{opacity:.42;cursor:not-allowed}
html .check input:disabled{cursor:not-allowed}
html body.locked #canvasWrap{cursor:not-allowed}