/* =========================================================================
   Schemi di regia — solo quello che e' suo.

   ⚠ Barra, ispettore, pulsanti, elenco e foglio di stampa stanno in
   strumento.css, che questo foglio dà per caricato prima. Qui restano gli
   apparati, le porte e i cavi: le uniche cose che non servono a nessun altro
   strumento.
   ====================================================================== */

#disegno { display: block; cursor: grab; touch-action: none; }
#disegno:active { cursor: grabbing; }

.nodo__corpo {
    fill: #16202D;
    stroke: #2A3849;
    stroke-width: 1;
}

.nodo--scelto .nodo__corpo { stroke: var(--segnale); stroke-width: 2; }

.nodo__testa { fill: rgba(255,255,255,.045); cursor: move; }
.nodo__nome  { fill: #E8EFF9; font: 700 14px system-ui, sans-serif; cursor: move; }
.nodo__modello { fill: #6F8299; font: 400 11.5px system-ui, sans-serif; cursor: move; }

.porta__bersaglio { fill: transparent; cursor: crosshair; }
.porta__pallino   { stroke: #0D131C; stroke-width: 2; pointer-events: none; }
.porta__nome      { fill: #A9B8CC; font: 400 11.5px system-ui, sans-serif; pointer-events: none; }

.porta:hover .porta__pallino { r: 7; }
.porta:hover .porta__nome    { fill: #FFF; }

/* La porta da cui si sta tirando un cavo. */
.porta--attesa .porta__pallino { stroke: var(--segnale); stroke-width: 3; }

/* Un ingresso gia' collegato: si vede prima di provarci. */
.porta--presa .porta__nome { fill: #5D6E85; }

.cavo {
    fill: none;
    stroke-width: 2;
    pointer-events: none;
}

.cavo__bersaglio {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    cursor: pointer;
}

/* Il cavo che cambia famiglia di segnale: tratteggiato, si nota. */
.cavo--converte { stroke-dasharray: 7 5; }

.gruppo-cavo--scelto .cavo { stroke-width: 4; }

.cavo--fantasma { stroke: var(--segnale); stroke-dasharray: 5 5; opacity: .8; }

.cavo__targhetta  { fill: #0D131C; stroke: #2A3849; pointer-events: none; }
.cavo__etichetta  { fill: #C9D6E8; font: 600 10.5px ui-monospace, monospace; pointer-events: none; }

/* Il rettangolo con cui si prendono piu' apparati in un colpo. */
.lazo {
    fill: rgba(47,224,198,.09);
    stroke: var(--segnale);
    stroke-width: 1;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* I pulsantini di allinea e distribuisci, tre per riga. */
.fila { display: flex; gap: 6px; margin-bottom: 6px; }
.fila .btn { flex: 1; justify-content: center; padding-left: 4px; padding-right: 4px; }

/* L'elenco delle porte nell'ispettore: nome, tipo di segnale, e il meno. */
.porte { display: flex; flex-direction: column; gap: 6px; }

.porta-riga { display: grid; grid-template-columns: 1fr 118px 30px; gap: 5px; }
.porta-riga input, .porta-riga select { font-size: 13px; padding: 5px 7px; }

/* La riga della distinta dove due famiglie di segnale si toccano. */
.stampa .converte td { background: #fff7e6; }