/* Taller PCB · estilos de disenar_pcb.php (misma línea que Taller 3D) */
:root{--azul:#0284a8;--azul-claro:#e3f3f8;--texto:#16213a;--gris:#7a8494;--borde:#e2e6ec;--fondo:#f3f5f8;--tarjeta:#fff;--cobre:#c27a3e;--placa:#f4ead8}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:var(--fondo)}
main{max-width:1280px;margin:0 auto;padding:24px 16px 40px}
header h1{margin:0 0 4px;font-size:26px;font-weight:800}
header p{margin:0 0 16px;color:var(--gris)}
h2{margin:16px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
h2:first-child{margin-top:0}
.gris{color:var(--gris)}
.peq{font-size:12.5px}

button,select,input{font:600 13px system-ui,sans-serif;color:var(--texto)}
button{padding:7px 12px;border:1px solid var(--borde);border-radius:10px;background:#fff;cursor:pointer}
button:hover{border-color:#c9d0da}
button.pri{background:var(--azul);border-color:var(--azul);color:#fff}
button.on{background:var(--azul-claro);border-color:var(--azul);color:var(--azul)}
select,input{padding:6px 8px;border:1px solid var(--borde);border-radius:10px;background:#fff}
input[type=number]{width:64px}

.barra{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-bottom:14px}
.grupo{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.barra label{display:flex;align-items:center;gap:6px;color:var(--gris);font-size:13px}

.banco{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.visor{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;overflow:hidden}
.herramientas{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--borde)}
.sep{width:1px;background:var(--borde);margin:0 4px}
#lienzo{height:min(64vh,600px);background:#fbfcfd}
#svg{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.controles{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--borde);font-size:13px;color:var(--gris)}

.ficha{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;padding:16px}
dl{margin:0}
dl div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--borde);font-size:13.5px}
dt{color:var(--gris)}
dd{margin:0;display:flex;align-items:center;gap:4px}
dd input[type=number]{width:58px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:8px}
.col{display:flex;flex-direction:column;gap:6px}
#info{font-size:13.5px;margin:0}

/* Dibujo */
.placa{fill:var(--placa);stroke:#cdb892;stroke-width:.3}
.rejilla{stroke:#e6d9bf;stroke-width:.08}
.pista{fill:none;stroke:var(--cobre);stroke-linecap:round;stroke-linejoin:round}
.pad{fill:var(--cobre)}
.agujero{fill:#fff}
.serigrafia{fill:none;stroke:#8a94a6;stroke-width:.2}
.ref{fill:#5c6678;font:1.6px system-ui,sans-serif;text-anchor:middle}
.sel .pad,.sel.pista{stroke:#0284a8;stroke-width:.35}
.sel.pista{stroke:#0e9fc7}
.sel .serigrafia{stroke:#0284a8}
.previa{fill:none;stroke:#0e9fc7;stroke-dasharray:1 .6;stroke-linecap:round;opacity:.8}
.cursor{fill:none;stroke:#0284a8;stroke-width:.2}

@media (max-width:860px){.banco{grid-template-columns:1fr}#lienzo{height:62vh}}