/* Layout della scheda "Visualizzazione 3D" (comune alle pagine di schermatura) */
.viz-controls { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0; }
.viz-controls .wrap { min-width: 16rem; }
.viz-controls .viz-src { min-width: 14rem; }
.viz-controls .viz-src label { display: block; margin-bottom: 0.15rem; }
.viz-controls .viz-t { min-width: 14rem; }
.viz-controls .viz-cmp { align-self: center; margin: 0 0.25rem; }
.viz-canvas { width: 100%; height: 70vh; min-height: 360px; max-height: 560px;
  position: relative; border: 1px solid #333; border-radius: 6px; overflow: hidden; background: #0e1116; }
.viz-canvas canvas { display: block; }
.viz-hud { margin: 0.5rem 0; font-size: 0.95rem; line-height: 1.7; }
.viz-2d { width: 100%; height: 220px; margin-top: 0.5rem; }
.viz-msg:not(:empty) { margin: 0.5rem 0; }
.viz-section { width: 100%; height: 150px; display: block; margin-top: 0.5rem;
  border: 1px solid #333; border-radius: 6px; background: #0e1116; }

/* Etichette ancorate a punti della scena (proiettate dal motore a ogni frame) */
.viz-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.viz-label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; text-align: center;
  font-size: 0.78rem; line-height: 1.25; padding: 0.15rem 0.4rem; border-radius: 4px;
  background: rgba(14, 17, 22, 0.72); color: #e8edf3; border: 1px solid rgba(255, 255, 255, 0.18); }
.viz-label small { font-size: 0.7rem; opacity: 0.8; }
.viz-label-src { border-color: #ff5a5a; }
.viz-label-inc { color: #ff9c9c; }
.viz-label-ref { color: #ffcf8a; border-color: rgba(255, 177, 74, 0.6); }
.viz-label-tr { color: #b9f0b9; border-color: rgba(155, 226, 155, 0.6); }
.viz-label-wall { color: #d9dee5; }

/* Bilancio in decibel: SE = R + A + B, larghezze proporzionali ai termini */
.viz-bar { display: flex; width: 100%; max-width: 40rem; height: 1.35rem; border-radius: 4px; overflow: hidden;
  border: 1px solid #999; font-size: 0.78rem; line-height: 1.35rem; color: #fff; }
.viz-seg { display: block; overflow: hidden; text-align: center; white-space: nowrap; }
.viz-seg-r { background: #d98a2b; }
.viz-seg-a { background: #c04a3a; }
.viz-seg-b { background: #4a7fc0; }
.viz-seg-bneg { background: repeating-linear-gradient(45deg, #4a7fc0 0 4px, #1f3a63 4px 8px); }

/* Legenda graduata dei colori del campo: sovrapposizione dentro il riquadro, a
   destra. I nomi .viz-bar/.viz-seg sono gia' presi dal bilancio in dB. */
.viz-scale { position: absolute; top: 0.6rem; right: 0.6rem; display: flex; flex-direction: column;
  align-items: flex-end; padding: 0.35rem 0.45rem; border-radius: 5px; pointer-events: none;
  background: rgba(14, 17, 22, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); }
.viz-scale-row { display: flex; align-items: flex-start; gap: 0.3rem; }
.viz-scale-bar { display: block; height: 240px; width: 16px; border: 1px solid rgba(255, 255, 255, 0.35); }
.viz-scale-ticks { position: relative; height: 242px; width: 3.6rem; }
.viz-scale-tick { position: absolute; left: 0; transform: translateY(50%);
  font-size: 0.7rem; line-height: 1; color: #cfd6de; white-space: nowrap; }
.viz-scale-tick::before { content: ""; position: absolute; left: -0.3rem; top: 50%; width: 0.22rem;
  height: 1px; background: rgba(255, 255, 255, 0.55); }
.viz-scale-tick-forte { color: #e8edf3; font-weight: 600; }
.viz-scale-tick-se { color: #b9f0b9; font-weight: 600; }
.viz-scale-tick-se::before { width: 0.5rem; left: -0.55rem; height: 2px; background: #b9f0b9; }
.viz-scale-cap { margin-top: 0.35rem; max-width: 9.5rem; font-size: 0.68rem; line-height: 1.2;
  color: #cfd6de; text-align: right; }

/* schermi stretti: la legenda ruberebbe troppo campo */
@media (max-width: 576px) { .viz-scale { display: none; } }

/* Avvisi del modello: sotto la scena, non sopra, perche' sono frasi da leggere e
   dentro il riquadro coprirebbero il campo. */
.viz-warn { margin: 0.45rem 0 0; padding: 0.45rem 0.6rem; border-radius: 5px;
  font-size: 0.82rem; line-height: 1.35; color: #6b4400;
  background: rgba(255, 193, 7, 0.14); border: 1px solid rgba(255, 193, 7, 0.55); }
.viz-warn .bi { margin-right: 0.3rem; color: #b8860b; }