/* BASE — «Especialidades y modelos» (modules/specialties.js). Paso 2 especialidad→modelo. */
.sp-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.sp-bar input[type=text],.sp-bar select,.sp-ed select{background:var(--win-bg);border:1px solid var(--win-border);color:var(--win-text);border-radius:8px;padding:5px 9px;font:inherit;font-size:.82rem;}
.sp-btn{background:var(--win-bg);border:1px solid var(--win-border);color:var(--win-text);border-radius:8px;padding:4px 9px;cursor:pointer;font:inherit;font-size:.78rem;white-space:nowrap;}
.sp-btn:hover{border-color:var(--accent);}
.sp-btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-text);}
.sp-btn[disabled]{opacity:.45;cursor:not-allowed;}
.sp-sug{margin-left:6px;font-size:.72rem;padding:2px 7px;}
.sp-chip{display:inline-block;padding:1px 7px;border-radius:10px;border:1px solid var(--win-border);font-size:.74rem;margin:1px 0;}
.sp-off td{opacity:.55;}
.sp-ed td{background:color-mix(in srgb,var(--accent) 7%,transparent)!important;white-space:normal;}
.sp-ed .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0;}
.sp-kpi{font-size:.8rem;color:var(--text-muted);margin-left:auto;}
.sp-badge{display:inline-flex;gap:4px;align-items:center;border-radius:10px;border:1px solid var(--win-border);padding:2px 9px;font:inherit;font-size:.74rem;cursor:pointer;background:var(--win-bg);color:var(--win-text);white-space:nowrap;}
.sp-badge.on{color:#10b981;border-color:color-mix(in srgb,#10b981 45%,var(--win-border));}
.sp-badge.off{color:var(--text-muted);opacity:.85;}
.sp-badge[disabled],span.sp-badge{cursor:default;}

/* ── Vista «Hilos» (telar SVG especialidad→modelo) ─────────────────────────── */
.sp-hint{font-size:.8rem;color:var(--win-text);margin-bottom:8px;}
.sp-selbar{display:flex;gap:10px;align-items:center;font-size:.8rem;padding:6px 10px;border:1px solid var(--win-border);border-radius:10px;margin-bottom:8px;}
.sp-loom{position:relative;overflow:auto;max-height:62vh;border:1px solid var(--win-border);border-radius:12px;background:var(--win-bg);}
.sp-wires{position:absolute;top:0;left:0;pointer-events:none;z-index:1;overflow:visible;}
.sp-cols{position:relative;display:flex;align-items:flex-start;min-height:100%;z-index:2;}
/* Ancho: al ensanchar crece el HUECO (.sp-mid), no las columnas (tope 320). En ANGOSTO se invierte:
   el hueco conserva un mínimo de 200px para que los hilos se distingan y las que se encogen son las
   columnas (texto con … + nombre completo en el tooltip). */
.sp-col{flex:1 1 130px;min-width:96px;max-width:320px;}
.sp-mid{flex:1 1 200px;min-width:200px;}
.sp-colhead{position:sticky;top:0;z-index:3;display:flex;gap:8px;align-items:center;padding:8px 10px;background:color-mix(in srgb,var(--win-bg) 88%,transparent);backdrop-filter:blur(4px);border-bottom:1px solid var(--win-border);}
.sp-colhead input{flex:1;min-width:0;background:var(--win-card,var(--win-bg));border:1px solid var(--win-border);color:var(--win-text);border-radius:8px;padding:5px 9px;font:inherit;font-size:.8rem;}
.sp-colcount{font-size:.72rem;color:var(--text-muted);}
.sp-list{padding:4px 0;}
.sp-srow,.sp-mrow{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:.82rem;color:var(--win-text);cursor:pointer;border-bottom:1px solid var(--win-border-soft,rgba(128,128,128,.12));}
.sp-mrow{justify-content:flex-start;}
.sp-mrow-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-narrow{display:none;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;border:1px solid var(--win-border);border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:.8rem;color:var(--win-text);}
.sp-srow:hover,.sp-mrow:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.sp-srow.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);}
.sp-srow.linking{outline:2px solid var(--accent);outline-offset:-2px;}
.sp-srow.hot,.sp-mrow.hot{background:color-mix(in srgb,var(--accent) 22%,transparent);}
.sp-srow-nm{display:flex;flex-direction:column;min-width:0;flex:1;}
.sp-srow-nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sp-srow-sub{font-size:.7rem;color:var(--text-muted);}
/* Anclas reales: punto a la DERECHA en especialidades (color de origen), a la IZQUIERDA en modelos. */
.sp-anchor{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.sp-srow .sp-anchor.sp-dot{margin-left:8px;}
.sp-mrow .sp-anchor{width:8px;height:8px;margin-right:4px;background:color-mix(in srgb,var(--success) 65%,transparent);}
/* Marca de ORIGEN = secundaria: punto (derecha) + borde izquierdo en la especialidad (no pelea con el verde). */
.sp-dot{background:var(--dotc,#9aa0a6);}
.sp-srow{border-left:3px solid var(--dotc,transparent);}
.sp-srow.o-seed{--dotc:var(--accent);}
.sp-srow.o-claude{--dotc:#14b8a6;}
.sp-srow.o-fallback{--dotc:#9aa0a6;}
.sp-empty{padding:16px;text-align:center;color:var(--text-muted);font-size:.82rem;}
/* Hilos CONECTADOS = verde del tema CON glow (color-mix, sin literales). Punteado = auxiliar. */
.sp-wires .sp-glow{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--success) 75%,transparent)) drop-shadow(0 0 5px color-mix(in srgb,var(--success) 40%,transparent));}
.sp-wires .wire{fill:none;stroke:var(--success);stroke-width:1.4;opacity:.5;pointer-events:stroke;transition:opacity .12s,stroke-width .12s;}
.sp-wires .wire.dashed{stroke-dasharray:4 4;stroke-width:1.1;opacity:.42;}
.sp-wires .wire.dim{opacity:.08;}
.sp-wires .wire.hot{stroke-width:2.6;opacity:1;}
/* Hilo que se ARRASTRA (buscando destino) = rojo del tema, SIN glow. */
.sp-wires .sp-live{fill:none;stroke:var(--danger);stroke-width:2.4;stroke-dasharray:6 5;pointer-events:none;}
.sp-legend{display:flex;gap:14px;align-items:center;margin-top:8px;font-size:.74rem;color:var(--win-text);flex-wrap:wrap;}
.sp-legend .lg{display:inline-flex;align-items:center;gap:5px;}
.sp-legend .lg::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--success);}
.sp-legend .lg.wire-lg::before{box-shadow:0 0 4px color-mix(in srgb,var(--success) 60%,transparent);}
.sp-legend .lg.drag-lg::before{background:var(--danger);}
.sp-legend .lg.o-seed::before{background:var(--accent);height:9px;width:9px;border-radius:50%;}
.sp-legend .lg.o-claude::before{background:#14b8a6;height:9px;width:9px;border-radius:50%;}
.sp-legend .lg.o-fallback::before{background:#9aa0a6;height:9px;width:9px;border-radius:50%;}