/* StrucPlan — estilos del lienzo SVG (requiere tokens.css) */
.sp-lienzo { display: block; width: 100%; height: 100%; background: var(--lienzo); touch-action: none; user-select: none; font-family: var(--fuente); }
.sp-rejilla { fill: none; stroke: var(--rejilla); stroke-width: 1; }
.sp-barra { stroke: var(--estructura); stroke-width: 4; stroke-linecap: round; fill: none; transition: opacity var(--transicion); }
.sp-barra.tenue { stroke-width: 3; opacity: .55; }
.sp-toque { stroke: transparent; stroke-width: 28; fill: none; cursor: pointer; }
.sp-toque:hover { stroke: color-mix(in srgb, var(--primario) 12%, transparent); }
.sp-sel-halo { stroke: var(--seleccion); stroke-width: 13; stroke-linecap: round; opacity: .35; fill: none; }
.sp-nudo { fill: var(--superficie); stroke: var(--estructura); stroke-width: 2.2; }
.sp-nudo.sel { stroke: var(--seleccion); stroke-width: 3; }
.sp-apoyo-cuerpo { fill: var(--primario-suave); stroke: var(--apoyo); stroke-width: 1.8; stroke-linejoin: round; }
.sp-tierra { stroke: var(--apoyo); stroke-width: 2; stroke-linecap: round; fill: none; }
.sp-rayado { stroke: var(--apoyo); stroke-width: 1.2; opacity: .6; fill: none; }
.sp-rotula { fill: var(--superficie); stroke: var(--c-rotula, #d97706); stroke-width: 2.6; pointer-events: none; }
.sp-rotula-barra { stroke-width: 2.4; }
.sp-resorte { stroke: var(--apoyo); stroke-width: 1.8; fill: none; stroke-linejoin: round; }
.sp-carga { stroke: var(--cc, var(--carga)); stroke-width: 2; fill: none; stroke-linecap: round; }
.sp-carga-punta { fill: var(--cc, var(--carga)); }
.sp-carga-area { fill: var(--cc, var(--carga)); opacity: .08; }
.sp-cota, .sp-cota-guia { stroke: var(--texto-3); stroke-width: 1; fill: none; }
.sp-cota-guia { stroke-dasharray: 2 3; opacity: .6; }
.sp-relleno { stroke: none; }
.sp-diag-m { fill: var(--diag-m); opacity: var(--diag-relleno); }
.sp-diag-v { fill: var(--diag-v); opacity: var(--diag-relleno); }
.sp-diag-n { fill: var(--diag-n); opacity: var(--diag-relleno); }
.sp-negativo { fill: var(--diag-neg); opacity: var(--diag-relleno); }
.sp-contorno { fill: none; stroke-width: 2; stroke-linejoin: round; }
.sp-diag-m-linea { stroke: var(--diag-m); } .sp-diag-v-linea { stroke: var(--diag-v); } .sp-diag-n-linea { stroke: var(--diag-n); }
.sp-punto { fill: var(--lienzo); stroke-width: 2; }
.sp-deformada { fill: none; stroke: var(--deformada); stroke-width: 2.5; stroke-dasharray: 7 4; stroke-linecap: round; }
.sp-lienzo text { paint-order: stroke; stroke: var(--lienzo); stroke-width: 4px; stroke-linejoin: round; }
.sp-eti-nudo { fill: var(--texto-2); font-weight: 600; }
.sp-eti-barra { fill: var(--primario); font-weight: 600; }
.sp-eti-carga { fill: var(--cc, var(--carga)); font-weight: 600; font-family: var(--fuente-num); }
.sp-eti-cota { fill: var(--texto-3); font-family: var(--fuente-num); }
.sp-eti-valor { fill: var(--texto-2); font-family: var(--fuente-num); }
.sp-eti-valor.fuerte { fill: var(--texto); font-weight: 700; }
.sp-reac { stroke: var(--exito); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.sp-reac-punta { fill: var(--exito); }
.sp-eti-reaccion { fill: var(--exito); font-weight: 600; font-family: var(--fuente-num); }
.sp-capa-cotas, .sp-capa-diag, .sp-capa-apoyos, .sp-capa-cargas, .sp-capa-etis, .sp-lienzo text { pointer-events: none; }
.sp-arrastrando{cursor:grabbing!important}
/* halo para que los valores se lean sobre barras y rellenos */
.sp-eti-valor, .sp-eti-reaccion, .sp-eti-carga, .sp-eti-cota, .sp-eti-nudo, .sp-eti-barra { paint-order: stroke; stroke: var(--lienzo); stroke-width: 3.5px; stroke-linejoin: round; }

.sp-toque-nudo { fill: transparent; cursor: pointer; }
.sp-fantasma-linea { stroke: var(--primario); stroke-width: 3; stroke-dasharray: 6 5; fill: none; opacity: .8; pointer-events: none; }
.sp-fantasma-punto { fill: var(--primario); opacity: .7; pointer-events: none; }
.sp-fantasma-origen { fill: none; stroke: var(--primario); stroke-width: 2.5; pointer-events: none; }
.sp-fantasma { pointer-events: none; }

.sp-marca { fill: none; stroke: var(--seleccion); stroke-width: 3; pointer-events: none; }

.sp-toque-apoyo { fill: transparent; stroke: none; cursor: pointer; }

/* colores por tipo de carga (también en la leyenda de la pestaña Cargas) */
:root { --c-inercia: #8a5a00; --c-rotula: #d97706; --c-puntual: #c2410c; --c-uniforme: #0e7490; --c-trapecio: #7e22ce; --c-momento: #be185d; }
:root[data-theme="dark"] { --c-inercia: #f2c14e; --c-rotula: #fbbf24; --c-puntual: #ff9a5a; --c-uniforme: #5ee0f2; --c-trapecio: #d7b0ff; --c-momento: #ff8fc2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-inercia: #f2c14e; --c-rotula: #fbbf24; --c-puntual: #ff9a5a; --c-uniforme: #5ee0f2; --c-trapecio: #d7b0ff; --c-momento: #ff8fc2; } }
.sp-c-p { --cc: var(--c-puntual); } .sp-c-w { --cc: var(--c-uniforme); } .sp-c-t { --cc: var(--c-trapecio); } .sp-c-m { --cc: var(--c-momento); }
/* inercia distinta por barra: la barra más rígida se dibuja más gruesa y lleva su rótulo (I, 2I, 3I…) */
.sp-barra-n { stroke-linecap: butt; }
.sp-eti-inercia { fill: var(--c-inercia); font-weight: 700; font-family: var(--fuente-num); paint-order: stroke; stroke: var(--lienzo); stroke-width: 3.5px; stroke-linejoin: round; }