/* ---------------------------------------------------------------------------
   Diagramma psicrometrico — aspetto.

   Il disegno (FisicaTecnica.Contenuti/Grafica/DiagrammaPsicrometrico.cs) non
   contiene nessun colore: emette solo classi. I colori stanno qui e sono quelli
   del sito, presi dalle variabili di sito.css. Due conseguenze volute: il
   diagramma segue il tema chiaro e scuro da sé, e in stampa diventa leggibile
   in bianco e nero senza che il codice C# sappia niente di stampanti.

   Caricato solo dalle pagine che lo usano, con la sezione "Testa" del layout:
   è un foglio in più per due pagine su venti.
--------------------------------------------------------------------------- */

.diagramma-psicrometrico{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  background:var(--superficie);
}

/* --- sfondo: deve esserci ma non farsi notare ------------------------- */

.diagramma-psicrometrico .griglia line{stroke:var(--filo);stroke-width:.6}
.diagramma-psicrometrico .isoentalpica polyline{
  fill:none;stroke:var(--ciano);stroke-width:.7;opacity:.42;
}
.diagramma-psicrometrico .umidita-relativa polyline{
  fill:none;stroke:var(--grigio-chiaro);stroke-width:.9;
}
.diagramma-psicrometrico .saturazione{
  fill:none;stroke:var(--verde);stroke-width:2.2;stroke-linejoin:round;
}
.diagramma-psicrometrico .assi line,
.diagramma-psicrometrico .assi .tacca{stroke:var(--filo-forte);stroke-width:1}

/* --- quote ------------------------------------------------------------ */

.diagramma-psicrometrico .quota{
  fill:var(--grigio);font-size:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
.diagramma-psicrometrico .quota-ur{fill:var(--grigio-chiaro);font-size:12.5px}
.diagramma-psicrometrico .titolo-asse{fill:var(--grigio);font-size:15px;letter-spacing:.02em}

/* --- la trasformazione: è lei che si deve vedere ---------------------- */

.diagramma-psicrometrico .percorso{
  fill:none;stroke:var(--rosso);stroke-width:2.6;
  stroke-linejoin:round;stroke-linecap:round;
}
.diagramma-psicrometrico .percorso.tratteggiato{stroke-dasharray:7 5}
.diagramma-psicrometrico .percorso.ambiente{stroke:var(--ambra);stroke-width:2}
.diagramma-psicrometrico .percorso.miscela{stroke:var(--grigio);stroke-width:1.6}
.diagramma-psicrometrico .freccia{fill:var(--rosso)}

.diagramma-psicrometrico .punto{fill:var(--rosso);stroke:var(--superficie);stroke-width:1.6}
.diagramma-psicrometrico .punto.apparato{fill:var(--ciano)}
.diagramma-psicrometrico .punto.secondario{fill:var(--ambra)}
.diagramma-psicrometrico .etichetta-punto{fill:var(--inchiostro);font-size:16.5px;font-weight:600}

/* --- stampa -----------------------------------------------------------
   Su carta i colori tenui spariscono e il nero non distingue più niente:
   si riprende a distinguere con lo spessore e col tratteggio, che è come
   sono fatti i diagrammi stampati da sempre.
---------------------------------------------------------------------- */

@media print{
  .diagramma-psicrometrico{background:#fff;break-inside:avoid}
  .diagramma-psicrometrico .griglia line{stroke:#c8c8c8}
  .diagramma-psicrometrico .isoentalpica polyline{stroke:#9a9a9a;opacity:.6}
  .diagramma-psicrometrico .umidita-relativa polyline{stroke:#8a8a8a}
  .diagramma-psicrometrico .saturazione{stroke:#000;stroke-width:1.6}
  .diagramma-psicrometrico .assi line,
  .diagramma-psicrometrico .assi .tacca{stroke:#000}
  .diagramma-psicrometrico .quota,
  .diagramma-psicrometrico .quota-ur,
  .diagramma-psicrometrico .titolo-asse{fill:#000}
  .diagramma-psicrometrico .percorso{stroke:#000;stroke-width:2.4}
  .diagramma-psicrometrico .percorso.ambiente{stroke:#000;stroke-width:1.4;stroke-dasharray:6 4}
  .diagramma-psicrometrico .percorso.miscela{stroke:#000;stroke-width:1.2;stroke-dasharray:2 3}
  .diagramma-psicrometrico .freccia{fill:#000}
  .diagramma-psicrometrico .punto{fill:#000;stroke:#fff}
  .diagramma-psicrometrico .punto.apparato{fill:#fff;stroke:#000;stroke-width:2}
  .diagramma-psicrometrico .punto.secondario{fill:#666}
  .diagramma-psicrometrico .etichetta-punto{fill:#000}
}

/* --- lettura dal vivo (solo quando è accesa) --------------------------- */

.figura-diagramma.con-lettura{position:relative}

.diagramma-psicrometrico.cliccabile{cursor:crosshair}

.diagramma-psicrometrico .mirino line{stroke:var(--ciano);stroke-width:.8;stroke-dasharray:4 4}
.diagramma-psicrometrico .mirino circle{fill:var(--ciano);stroke:var(--superficie);stroke-width:1.4}
.diagramma-psicrometrico .mirino.fuori line{stroke:var(--grigio-chiaro)}
.diagramma-psicrometrico .mirino.fuori circle{fill:var(--grigio-chiaro)}

.lettura-diagramma{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  background:var(--superficie);border:1px solid var(--filo-forte);
  padding:.4rem .6rem;font-size:.8rem;line-height:1.45;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  color:var(--grigio);pointer-events:none;
}
.lettura-diagramma strong{color:var(--inchiostro)}
.lettura-diagramma span{display:block}
.lettura-diagramma .fuori-scala{color:var(--ambra)}

@media print{
  .lettura-diagramma,.diagramma-psicrometrico .mirino{display:none}
}

/* ======================================================= diagramma per bande

   Potere fonoisolante, tempo di riverbero, assorbimento: tutto quello che si
   legge in funzione della frequenza. Stesse regole del diagramma psicrometrico —
   nessun colore nell'SVG, tutto qui, e in stampa si distingue col tratto.
--------------------------------------------------------------------------- */

.diagramma-bande{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  background:var(--superficie);
}

.diagramma-bande .griglia line{stroke:var(--filo);stroke-width:.6}
.diagramma-bande .assi line{stroke:var(--filo-forte);stroke-width:1}
.diagramma-bande .quota{
  fill:var(--grigio);font-size:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
}
.diagramma-bande .titolo-asse{fill:var(--grigio);font-size:15px;letter-spacing:.02em}

/* La banda su cui si perde di più: una riga verticale, non un'etichetta. */
.diagramma-bande .banda-critica{stroke:var(--ambra);stroke-width:1.4;stroke-dasharray:3 3;opacity:.8}

/* Le curve. La principale in rosso, i termini di confronto più tenui. */
.diagramma-bande polyline{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.diagramma-bande polyline.tratteggiata{stroke-dasharray:7 5}

.diagramma-bande .curva{stroke:var(--rosso)}
.diagramma-bande .curva-punto{fill:var(--rosso);stroke:var(--superficie);stroke-width:1.2}

.diagramma-bande .riferimento{stroke:var(--grigio);stroke-width:1.8}
.diagramma-bande .riferimento-punto{fill:var(--grigio)}

.diagramma-bande .confronto{stroke:var(--ciano);stroke-width:1.8}
.diagramma-bande .confronto-punto{fill:var(--ciano);stroke:var(--superficie);stroke-width:1.2}

.diagramma-bande .secondaria{stroke:var(--ambra);stroke-width:1.6}
.diagramma-bande .secondaria-punto{fill:var(--ambra);stroke:var(--superficie);stroke-width:1.2}

.diagramma-bande .terziaria{stroke:var(--grigio-chiaro);stroke-width:1.4}
.diagramma-bande .terziaria-punto{fill:var(--grigio-chiaro)}

/* Gli scostamenti sfavorevoli: l'area fra curva misurata e riferimento. */
.diagramma-bande .scostamento{fill:var(--rosso);opacity:.14;stroke:none}

@media print{
  .diagramma-bande{background:#fff;break-inside:avoid}
  .diagramma-bande .griglia line{stroke:#c8c8c8}
  .diagramma-bande .assi line{stroke:#000}
  .diagramma-bande .quota,.diagramma-bande .titolo-asse{fill:#000}
  .diagramma-bande .curva{stroke:#000;stroke-width:2.2}
  .diagramma-bande .curva-punto{fill:#000}
  .diagramma-bande .riferimento{stroke:#000;stroke-width:1.2;stroke-dasharray:6 4}
  .diagramma-bande .riferimento-punto{fill:#000}
  .diagramma-bande .confronto{stroke:#555;stroke-width:1.4;stroke-dasharray:3 3}
  .diagramma-bande .confronto-punto{fill:#555}
  .diagramma-bande .secondaria{stroke:#777;stroke-width:1.2;stroke-dasharray:8 3}
  .diagramma-bande .secondaria-punto{fill:#777}
  .diagramma-bande .terziaria{stroke:#999;stroke-width:1}
  .diagramma-bande .terziaria-punto{fill:#999}
  .diagramma-bande .scostamento{fill:#000;opacity:.12}
  .diagramma-bande .banda-critica{stroke:#000;stroke-width:1}
}

/* Legenda del diagramma per bande. */
.diagramma-bande .legenda line{stroke-width:2.4;fill:none}
.diagramma-bande .legenda line.tratteggiata{stroke-dasharray:7 5}
.diagramma-bande .legenda .voce{fill:var(--grigio);font-size:14.5px}
@media print{ .diagramma-bande .legenda .voce{fill:#000} }

/* Fascia di tolleranza intorno a un obiettivo: va dietro a tutto e non deve
   attirare l'occhio più delle curve. */
.diagramma-bande .fascia-obiettivo{fill:var(--verde);opacity:.10;stroke:none}
@media print{ .diagramma-bande .fascia-obiettivo{fill:#000;opacity:.07} }

/* ======================================================= mappa in pianta

   Curve isolux e fasce di livello. Otto classi da livello-0 (il più buio) a
   livello-7 (il più chiaro): una scala a tinta unica, perché il dato è una
   quantità che cresce e non una categoria. Scale a più colori qui mentirebbero,
   facendo sembrare «diverso» quello che è solo «di più».
--------------------------------------------------------------------------- */

.mappa-isolux{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  background:var(--superficie);
}

.mappa-isolux .fasce rect,
.mappa-isolux .legenda-mappa rect{stroke:none}

.mappa-isolux .livello-0{fill:#f4f1e8}
.mappa-isolux .livello-1{fill:#f6e9c6}
.mappa-isolux .livello-2{fill:#f7dc9f}
.mappa-isolux .livello-3{fill:#f5cd78}
.mappa-isolux .livello-4{fill:#efba53}
.mappa-isolux .livello-5{fill:#e4a434}
.mappa-isolux .livello-6{fill:#d18a1d}
.mappa-isolux .livello-7{fill:#b96f0c}

.mappa-isolux .isolinee line{stroke:var(--inchiostro);stroke-width:.9;opacity:.55}
.mappa-isolux .quota-isolinea{
  fill:var(--inchiostro);font-size:12.5px;opacity:.75;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

.mappa-isolux .stanza{fill:none;stroke:var(--filo-forte);stroke-width:1.6}
.mappa-isolux .apparecchi line{stroke:var(--inchiostro);stroke-width:1.8;opacity:.8}

.mappa-isolux .quota{
  fill:var(--grigio);font-size:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
}
.mappa-isolux .titolo-asse{fill:var(--grigio);font-size:15px}
.mappa-isolux .titolo-legenda{fill:var(--grigio);font-size:14px;letter-spacing:.02em}

/* Sul tema scuro la scala va al contrario: il buio della stanza è il buio del
   foglio, e la luce resta luce. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-0{fill:#21241f}
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-1{fill:#2e2a1d}
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-2{fill:#3e341d}
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-3{fill:#53431d}
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-4{fill:#6b551c}
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-5{fill:#876a1a}
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-6{fill:#a98417}
  :root:not([data-tema="chiaro"]) .mappa-isolux .livello-7{fill:#d1a62a}
}
:root[data-tema="scuro"] .mappa-isolux .livello-0{fill:#21241f}
:root[data-tema="scuro"] .mappa-isolux .livello-1{fill:#2e2a1d}
:root[data-tema="scuro"] .mappa-isolux .livello-2{fill:#3e341d}
:root[data-tema="scuro"] .mappa-isolux .livello-3{fill:#53431d}
:root[data-tema="scuro"] .mappa-isolux .livello-4{fill:#6b551c}
:root[data-tema="scuro"] .mappa-isolux .livello-5{fill:#876a1a}
:root[data-tema="scuro"] .mappa-isolux .livello-6{fill:#a98417}
:root[data-tema="scuro"] .mappa-isolux .livello-7{fill:#d1a62a}

@media print{
  .mappa-isolux{background:#fff;break-inside:avoid}
  .mappa-isolux .livello-0{fill:#ffffff}
  .mappa-isolux .livello-1{fill:#efefef}
  .mappa-isolux .livello-2{fill:#e0e0e0}
  .mappa-isolux .livello-3{fill:#cfcfcf}
  .mappa-isolux .livello-4{fill:#bcbcbc}
  .mappa-isolux .livello-5{fill:#a6a6a6}
  .mappa-isolux .livello-6{fill:#8d8d8d}
  .mappa-isolux .livello-7{fill:#737373}
  .mappa-isolux .isolinee line{stroke:#000;opacity:1}
  .mappa-isolux .quota-isolinea,.mappa-isolux .quota,
  .mappa-isolux .titolo-asse,.mappa-isolux .titolo-legenda{fill:#000}
  .mappa-isolux .stanza,.mappa-isolux .apparecchi line{stroke:#000}
}

/* --- curva fotometrica in coordinate polari ---------------------------- */

.curva-fotometrica{
  width:100%;max-width:26rem;height:auto;display:block;margin:0 auto;
  font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--superficie);
}
.curva-fotometrica .griglia circle{fill:none;stroke:var(--filo);stroke-width:.7}
.curva-fotometrica .griglia line{stroke:var(--filo);stroke-width:.6}
.curva-fotometrica polyline{fill:none;stroke-width:2.2;stroke-linejoin:round}
.curva-fotometrica .piano-c0{stroke:var(--rosso)}
.curva-fotometrica .piano-c90{stroke:var(--ciano);stroke-dasharray:6 4}
.curva-fotometrica .quota{
  fill:var(--grigio);font-size:11px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.curva-fotometrica .legenda line{stroke-width:2.2}
.curva-fotometrica .legenda .voce{fill:var(--grigio);font-size:11.5px}

@media print{
  .curva-fotometrica{background:#fff;break-inside:avoid}
  .curva-fotometrica .griglia circle,.curva-fotometrica .griglia line{stroke:#c8c8c8}
  .curva-fotometrica .piano-c0{stroke:#000}
  .curva-fotometrica .piano-c90{stroke:#000;stroke-dasharray:5 4;stroke-width:1.4}
  .curva-fotometrica .quota,.curva-fotometrica .legenda .voce{fill:#000}
}

/* --- profilo cartesiano (fattore di luce diurna in profondità) --------- */

.diagramma-profilo{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--superficie);
}
.diagramma-profilo .griglia line{stroke:var(--filo);stroke-width:.6}
.diagramma-profilo .assi line{stroke:var(--filo-forte);stroke-width:1}
.diagramma-profilo .fascia-utile{fill:var(--verde);opacity:.09}
.diagramma-profilo .soglia{stroke:var(--verde);stroke-width:1.6;stroke-dasharray:6 4}
.diagramma-profilo .quota{
  fill:var(--grigio);font-size:12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.diagramma-profilo .quota-soglia{fill:var(--verde);font-size:13px}
.diagramma-profilo .titolo-asse{fill:var(--grigio);font-size:13.5px;letter-spacing:.02em}
.diagramma-profilo polyline{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.diagramma-profilo polyline.tratteggiata{stroke-dasharray:7 5}
.diagramma-profilo .curva{stroke:var(--rosso)}
.diagramma-profilo .curva-punto{fill:var(--rosso);stroke:var(--superficie);stroke-width:1.2}
.diagramma-profilo .confronto{stroke:var(--ciano);stroke-width:1.8}
.diagramma-profilo .confronto-punto{fill:var(--ciano);stroke:var(--superficie);stroke-width:1.2}
.diagramma-profilo .secondaria{stroke:var(--ambra);stroke-width:1.8}
.diagramma-profilo .secondaria-punto{fill:var(--ambra);stroke:var(--superficie);stroke-width:1.2}
.diagramma-profilo .legenda line{stroke-width:2.4;fill:none}
.diagramma-profilo .legenda line.tratteggiata{stroke-dasharray:7 5}
.diagramma-profilo .legenda .voce{fill:var(--grigio);font-size:13px}

@media print{
  .diagramma-profilo{background:#fff;break-inside:avoid}
  .diagramma-profilo .griglia line{stroke:#c8c8c8}
  .diagramma-profilo .assi line{stroke:#000}
  .diagramma-profilo .fascia-utile{fill:#000;opacity:.06}
  .diagramma-profilo .soglia{stroke:#000;stroke-width:1.2}
  .diagramma-profilo .curva{stroke:#000}
  .diagramma-profilo .confronto{stroke:#000;stroke-dasharray:5 4;stroke-width:1.3}
  .diagramma-profilo .secondaria{stroke:#666;stroke-width:1.3}
  .diagramma-profilo .quota,.diagramma-profilo .quota-soglia,
  .diagramma-profilo .titolo-asse,.diagramma-profilo .legenda .voce{fill:#000}
}

/* --- diagramma pressione-entalpia -------------------------------------- */

.diagramma-ph{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--superficie);
}
.diagramma-ph .griglia line{stroke:var(--filo);stroke-width:.6}
.diagramma-ph .assi line{stroke:var(--filo-forte);stroke-width:1}
.diagramma-ph polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}

.diagramma-ph .campana,
.diagramma-ph .legenda line.campana{stroke:var(--inchiostro);stroke-width:2;fill:none}
.diagramma-ph .critico{fill:var(--inchiostro)}

.diagramma-ph .isoterme polyline,
.diagramma-ph .legenda line.isoterme{stroke:var(--ciano);stroke-width:1;opacity:.75;fill:none}
.diagramma-ph .quota-isoterma{fill:var(--ciano);font-size:12.5px;opacity:.9}

.diagramma-ph .isotitolo polyline,
.diagramma-ph .legenda line.isotitolo{stroke:var(--grigio-chiaro);stroke-width:.9;stroke-dasharray:3 3;fill:none}

.diagramma-ph .isoentropiche polyline,
.diagramma-ph .legenda line.isoentropiche{stroke:var(--ambra);stroke-width:.9;opacity:.8;fill:none}

.diagramma-ph .ciclo,
.diagramma-ph .legenda line.ciclo{stroke:var(--rosso);stroke-width:2.6;fill:none}
.diagramma-ph .ideale,
.diagramma-ph .legenda line.ideale{stroke:var(--rosso);stroke-width:1.4;stroke-dasharray:6 4;opacity:.7}

.diagramma-ph .punti-ciclo circle{fill:var(--rosso);stroke:var(--superficie);stroke-width:1.6}
.diagramma-ph .punti-ciclo text{fill:var(--inchiostro);font-size:16.5px;font-weight:600}

.diagramma-ph .quota{
  fill:var(--grigio);font-size:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.diagramma-ph .titolo-asse{fill:var(--grigio);font-size:15px;letter-spacing:.02em}
.diagramma-ph .titolo-legenda{fill:var(--inchiostro);font-size:16.5px;font-weight:600}
.diagramma-ph .legenda .voce{fill:var(--grigio);font-size:14px}

@media print{
  .diagramma-ph{background:#fff;break-inside:avoid}
  .diagramma-ph .griglia line{stroke:#d4d4d4}
  .diagramma-ph .assi line,.diagramma-ph .campana,
  .diagramma-ph .legenda line.campana{stroke:#000}
  .diagramma-ph .critico,.diagramma-ph .punti-ciclo circle{fill:#000}
  .diagramma-ph .isoterme polyline,.diagramma-ph .legenda line.isoterme{stroke:#777}
  .diagramma-ph .isoentropiche polyline,.diagramma-ph .legenda line.isoentropiche{stroke:#aaa}
  .diagramma-ph .ciclo,.diagramma-ph .legenda line.ciclo,
  .diagramma-ph .ideale,.diagramma-ph .legenda line.ideale{stroke:#000}
  .diagramma-ph .quota,.diagramma-ph .quota-isoterma,.diagramma-ph .titolo-asse,
  .diagramma-ph .titolo-legenda,.diagramma-ph .legenda .voce,
  .diagramma-ph .punti-ciclo text{fill:#000}
}

/* --- piante, sezioni e prospetti ---------------------------------------- */

.disegno-tecnico{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--superficie);
}

/* Due disegni affiancati, che sulla stessa pagina si leggono insieme.
   Sotto i 46rem si impilano da soli, perché una pianta larga mezzo telefono
   non è una pianta. */
.coppia-disegni{display:flex;gap:1rem;flex-wrap:wrap}
.coppia-disegni > figure{flex:1 1 18rem;margin:0}

/* Diagrammi messi uno accanto all'altro PER ESSERE CONFRONTATI.
   Non è la stessa cosa di .coppia-disegni, che usa flex: lì l'ultimo elemento di
   una riga incompleta si allarga a prendersi lo spazio avanzato, e con tre
   diagrammi il terzo esce grande il doppio degli altri due. Confrontare due
   disegni di dimensione diversa non si può: la griglia tiene le colonne fisse,
   così l'ultimo di una riga spaiata resta largo quanto i suoi compagni. */
.griglia-diagrammi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:1rem;
  align-items:start;
}
.griglia-diagrammi > figure{margin:0;min-width:0}

.disegno-tecnico .muro{fill:var(--filo-forte);stroke:none}
.disegno-tecnico .muro-forte{fill:var(--rosso);stroke:none}
.disegno-tecnico .ambiente{fill:var(--superficie);stroke:var(--filo);stroke-width:.6}
.disegno-tecnico .ambiente-sorgente{fill:var(--sfondo-tenue,#f0ede4);stroke:var(--filo);stroke-width:.6}
/* I pieni colorati stanno sotto delle scritte scure: vanno tenuti chiari,
   altrimenti o si legge il colore o si legge la scritta. */
.disegno-tecnico .vetro{fill:var(--ciano);opacity:.32;stroke:none}
.disegno-tecnico .cassonetto{fill:var(--ambra);opacity:.42;stroke:none}
.disegno-tecnico .aeratore{fill:var(--ambra);opacity:.7;stroke:none}
.disegno-tecnico .massetto{fill:var(--filo);stroke:none}
.disegno-tecnico .resiliente{fill:var(--ciano);opacity:.55;stroke:none}
.disegno-tecnico .zona-calcolo{fill:none;stroke:var(--grigio-chiaro);stroke-width:1;stroke-dasharray:5 4}
.disegno-tecnico .zona-utile{fill:var(--verde);opacity:.12;stroke:none}
.disegno-tecnico .limite-utile{stroke:var(--verde);stroke-width:1.4;stroke-dasharray:5 4}
.disegno-tecnico .piano-lavoro{stroke:var(--grigio);stroke-width:1;stroke-dasharray:6 4}
.disegno-tecnico .quota-apparecchi{stroke:var(--grigio-chiaro);stroke-width:.8;stroke-dasharray:3 4}
.disegno-tecnico .raggio{stroke:var(--ambra);stroke-width:1.4}
.disegno-tecnico .croce{stroke:var(--inchiostro);stroke-width:1.6;opacity:.8}

.disegno-tecnico .quota-linea line{stroke:var(--grigio-chiaro);stroke-width:.9}
.disegno-tecnico .quota-testo{
  fill:var(--grigio);font-size:11px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
/* Le diciture del disegno non devono ereditare nulla dal componente
   «etichetta» del sito, che è una pillola in maiuscoletto: qui si azzerano
   trasformazione e spaziatura di proposito. */
.disegno-tecnico text{text-transform:none;letter-spacing:0}
.disegno-tecnico .dicitura{fill:var(--inchiostro);font-size:12.5px}
.disegno-tecnico .dicitura-muro{fill:var(--superficie);font-size:11px;font-weight:600}
.disegno-tecnico .dettaglio{fill:var(--grigio);font-size:10.5px}

@media print{
  .disegno-tecnico{background:#fff;break-inside:avoid}
  .disegno-tecnico .muro{fill:#9a9a9a}
  .disegno-tecnico .muro-forte{fill:#000}
  .disegno-tecnico .ambiente{fill:#fff;stroke:#000}
  .disegno-tecnico .ambiente-sorgente{fill:#f0f0f0;stroke:#000}
  .disegno-tecnico .vetro,.disegno-tecnico .resiliente{fill:#555}
  .disegno-tecnico .cassonetto,.disegno-tecnico .aeratore{fill:#777}
  .disegno-tecnico .massetto{fill:#ccc}
  .disegno-tecnico .zona-calcolo,.disegno-tecnico .limite-utile,
  .disegno-tecnico .piano-lavoro,.disegno-tecnico .raggio{stroke:#000}
  .disegno-tecnico .zona-utile{fill:#000;opacity:.07}
  .disegno-tecnico .croce{stroke:#000}
  .disegno-tecnico .quota-linea line{stroke:#666}
  .disegno-tecnico .quota-testo,.disegno-tecnico .etichetta,
  .disegno-tecnico .dettaglio{fill:#000}
  .disegno-tecnico .dicitura-muro{fill:#fff}
}
.disegno-tecnico .richiamo{stroke:var(--grigio-chiaro);stroke-width:.9}
@media print{ .disegno-tecnico .richiamo{stroke:#666} }

/* ---------------------------------------------------------------- stratigrafia
   La sezione della parete con sopra il profilo delle temperature, e il
   diagramma di Glaser. I quattro toni degli strati si alternano: devono
   distinguere uno strato dal successivo, non classificare i materiali — un
   codice colore per materiale sarebbe una convenzione in più da imparare, e
   nessuno la imparerebbe. */
.stratigrafia{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--superficie);
}
.stratigrafia text{text-transform:none;letter-spacing:0}

/* Un aspetto per materiale, non per resistenza. Sei tinte tenute chiare —
   sotto ci vanno le scritte dei nomi — più tre tratteggi: ventiquattro
   combinazioni, molte più degli strati di qualunque parete. «Dove sta la
   resistenza» lo racconta la pendenza del profilo delle temperature, che lo
   racconta meglio di una scala di colore. */
.stratigrafia .materiale-1{fill:#cfd9cd}
.stratigrafia .materiale-2{fill:#ecdfc4}
.stratigrafia .materiale-3{fill:#c6d6e0}
.stratigrafia .materiale-4{fill:#e7cfca}
.stratigrafia .materiale-5{fill:#d7d2e2}
.stratigrafia .materiale-6{fill:#e3ead0}
.stratigrafia .tratteggio{stroke:none}
.stratigrafia .tratto{stroke:var(--grigio-chiaro);stroke-width:1;opacity:.75}
.stratigrafia .punto{fill:var(--grigio-chiaro);opacity:.8}
.stratigrafia .contorno-sezione{fill:none;stroke:var(--filo-forte);stroke-width:1.2}
.stratigrafia .nome-strato{fill:var(--inchiostro);font-size:12px}
.stratigrafia .lato{fill:var(--grigio-chiaro);font-size:12px;font-style:italic}

.stratigrafia .quote line{stroke:var(--grigio-chiaro);stroke-width:.9}
.stratigrafia .quota-testo{
  fill:var(--grigio);font-size:12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

.stratigrafia .griglia line{stroke:var(--filo);stroke-width:.6}
.stratigrafia .assi line{stroke:var(--filo-forte);stroke-width:1}
.stratigrafia .zero{stroke:var(--grigio-chiaro);stroke-width:1;stroke-dasharray:4 3}
.stratigrafia .tacca{stroke:var(--filo-forte);stroke-width:1}
.stratigrafia .quota{
  fill:var(--grigio);font-size:12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.stratigrafia .titolo-asse{fill:var(--grigio);font-size:13.5px}

/* Le verticali che legano il grafico alla sezione: devono esserci e non
   devono farsi notare, altrimenti competono con le curve. */
.stratigrafia .confini line{stroke:var(--filo);stroke-width:.8;stroke-dasharray:3 3}

.stratigrafia polyline{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.stratigrafia .profilo-temperatura{stroke:var(--rosso)}
.stratigrafia .nodo{fill:var(--rosso);stroke:var(--superficie);stroke-width:1.2}
.stratigrafia .valore{
  fill:var(--rosso);font-size:13px;font-weight:600;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

.stratigrafia .rugiada{stroke:var(--ciano);stroke-width:1.4;stroke-dasharray:6 4}
.stratigrafia .etichetta-rugiada{fill:var(--ciano);font-size:12px}

.stratigrafia .saturazione{stroke:var(--ciano)}
.stratigrafia .vapore{stroke:var(--rosso)}
.stratigrafia.glaser .nodo{fill:var(--rosso)}
.stratigrafia .vapore-teorico{stroke:var(--grigio-chiaro);stroke-width:1.6;stroke-dasharray:6 4}
.stratigrafia .piano-condensa{stroke:var(--rosso);stroke-width:1.4;stroke-dasharray:5 3;opacity:.75}
.stratigrafia .etichetta-condensa{fill:var(--rosso);font-size:13px;font-weight:600}
.stratigrafia .legenda line{stroke-width:2.4;fill:none}
.stratigrafia .legenda .voce{fill:var(--grigio);font-size:13px}

@media print{
  .stratigrafia{background:#fff;break-inside:avoid}
  .stratigrafia .materiale-1{fill:#f4f4f4}
  .stratigrafia .materiale-2{fill:#e6e6e6}
  .stratigrafia .materiale-3{fill:#f0f0f0}
  .stratigrafia .materiale-4{fill:#dcdcdc}
  .stratigrafia .materiale-5{fill:#ececec}
  .stratigrafia .materiale-6{fill:#e0e0e0}
  .stratigrafia .tratto{stroke:#666}
  .stratigrafia .punto{fill:#666}
  .stratigrafia .contorno-sezione{stroke:#000}
  .stratigrafia .nome-strato,.stratigrafia .quota,
  .stratigrafia .quota-testo,.stratigrafia .titolo-asse{fill:#000}
  .stratigrafia .profilo-temperatura,.stratigrafia .vapore{stroke:#000}
  .stratigrafia .saturazione{stroke:#666}
  .stratigrafia .rugiada{stroke:#666}
  .stratigrafia .vapore-teorico{stroke:#999}
  .stratigrafia .piano-condensa{stroke:#000}
  .stratigrafia .etichetta-condensa{fill:#000}
}

/* Le quattro curve della giornata. Le due arie sono i dati e vanno piene; le
   due superfici sono il risultato e vanno tratteggiate — la distinzione fra
   «quello che ho dichiarato» e «quello che ne viene» è l'informazione più utile
   del grafico, e un colore diverso da solo non la dice. */
.diagramma-profilo .aria-esterna{stroke:var(--rosso)}
.diagramma-profilo .superficie-esterna{stroke:var(--ambra)}
.diagramma-profilo .superficie-interna{stroke:var(--verde)}
.diagramma-profilo .aria-interna{stroke:var(--ciano)}

@media print{
  .diagramma-profilo .aria-esterna{stroke:#000}
  .diagramma-profilo .superficie-esterna{stroke:#555}
  .diagramma-profilo .superficie-interna{stroke:#555}
  .diagramma-profilo .aria-interna{stroke:#888}
}

/* ------------------------------------------------------------ onda termica
   Le quattro temperature nelle 24 ore. Le due arie sono i dati e vanno piene;
   le due superfici sono il risultato del calcolo e vanno tratteggiate: la
   distinzione fra «quello che ho dichiarato» e «quello che ne viene» è
   l'informazione più utile del grafico, e il colore da solo non la dice. */
.onda-termica{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--superficie);
}
.onda-termica text{text-transform:none;letter-spacing:0}
.onda-termica .griglia line{stroke:var(--filo);stroke-width:.6}
.onda-termica .assi line{stroke:var(--filo-forte);stroke-width:1}
.onda-termica .quota,.onda-termica .quota-ampiezza{
  fill:var(--grigio);font-size:12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.onda-termica .titolo-asse{fill:var(--grigio);font-size:13.5px}

.onda-termica polyline{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.onda-termica polyline.tratteggiata{stroke-dasharray:7 5}
.onda-termica .aria-esterna{stroke:var(--rosso)}
.onda-termica .superficie-esterna{stroke:var(--ambra)}
.onda-termica .superficie-interna{stroke:var(--verde)}
.onda-termica .aria-interna{stroke:var(--ciano)}

.onda-termica .picco{stroke:var(--superficie);stroke-width:1.6}
.onda-termica circle.aria-esterna{fill:var(--rosso)}
.onda-termica circle.superficie-esterna{fill:var(--ambra)}
.onda-termica circle.superficie-interna{fill:var(--verde)}
.onda-termica circle.aria-interna{fill:var(--ciano)}

.onda-termica .etichetta-picco{font-size:11.5px;font-weight:600}
.onda-termica text.aria-esterna{fill:var(--rosso)}
.onda-termica text.superficie-esterna{fill:var(--ambra)}
.onda-termica text.superficie-interna{fill:var(--verde)}
.onda-termica text.aria-interna{fill:var(--ciano)}

/* La misura dello sfasamento: deve leggersi come una quota di disegno, non
   come una quinta curva. */
.onda-termica .misura line{stroke:var(--inchiostro);stroke-width:1}
.onda-termica .misura .traccia{stroke:var(--grigio-chiaro);stroke-width:.8;stroke-dasharray:3 4}
.onda-termica .etichetta-misura{fill:var(--inchiostro);font-size:13px;font-weight:600}

.onda-termica .ampiezza line{stroke-width:1.2}
.onda-termica g.ampiezza.superficie-esterna line{stroke:var(--ambra)}
.onda-termica g.ampiezza.superficie-interna line{stroke:var(--verde)}
.onda-termica .etichetta-rapporto{
  fill:var(--inchiostro);font-size:14.5px;font-weight:600;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.onda-termica .etichetta-rapporto.piccola{
  font-size:11px;font-weight:400;fill:var(--grigio);font-family:inherit;
}
.onda-termica .legenda line{stroke-width:2.4;fill:none}
.onda-termica .legenda line.tratteggiata{stroke-dasharray:7 5}
.onda-termica .legenda .voce{fill:var(--grigio);font-size:13px}

@media print{
  .onda-termica{background:#fff;break-inside:avoid}
  .onda-termica .aria-esterna{stroke:#000}
  .onda-termica .superficie-esterna{stroke:#555}
  .onda-termica .superficie-interna{stroke:#555}
  .onda-termica .aria-interna{stroke:#888}
  .onda-termica circle.aria-esterna,.onda-termica text.aria-esterna{fill:#000}
  .onda-termica circle.superficie-esterna,.onda-termica text.superficie-esterna,
  .onda-termica circle.superficie-interna,.onda-termica text.superficie-interna{fill:#555}
  .onda-termica circle.aria-interna,.onda-termica text.aria-interna{fill:#888}
  .onda-termica .misura line,.onda-termica .etichetta-misura,
  .onda-termica .etichetta-rapporto{stroke:#000;fill:#000}
}
.onda-termica .etichetta-misura.piccola{font-size:11px;font-weight:400;fill:var(--grigio)}

/* ------------------------------------------- scritte sopra le linee
   Un'etichetta appoggiata alla curva che nomina viene attraversata dalla curva
   stessa, e le cifre si leggono male: succede alle isolinee della mappa, alle
   isoterme del diagramma pressione-entalpia, alle curve di umidità relativa e
   alle diciture ruotate dei disegni. La correzione è la stessa dovunque: si
   contorna il testo del colore del fondo PRIMA di riempirlo, così la scritta si
   apre uno spazio nella linea invece di mescolarcisi.

   paint-order è l'unico modo di farlo senza duplicare ogni testo: senza, il
   contorno verrebbe disegnato sopra il riempimento e si mangerebbe le lettere. */
.mappa-isolux .quota-isolinea,
.diagramma-ph .quota-isoterma,
.diagramma-ph .quota-isoentropica,
.diagramma-psicrometrico .quota-ur,
.diagramma-psicrometrico .etichetta-punto,
.disegno-tecnico .dicitura,
.disegno-tecnico .dettaglio,
.onda-termica .etichetta-picco,
.onda-termica .etichetta-misura{
  paint-order:stroke fill;
  stroke:var(--superficie);
  stroke-width:3px;
  stroke-linejoin:round;
}

@media print{
  .mappa-isolux .quota-isolinea,
  .diagramma-ph .quota-isoterma,
  .diagramma-ph .quota-isoentropica,
  .diagramma-psicrometrico .quota-ur,
  .diagramma-psicrometrico .etichetta-punto,
  .disegno-tecnico .dicitura,
  .disegno-tecnico .dettaglio,
  .onda-termica .etichetta-picco,
  .onda-termica .etichetta-misura{stroke:#fff}
}

/* ------------------------------------------- l'onda termica sulla parete
   Il disegno classico: la parete in mezzo, l'oscillazione della faccia esterna
   a sinistra e quella della faccia interna a destra. Qui l'esterno sta a
   SINISTRA, al contrario della sezione quotata: è la convenzione dei libri, e i
   due lati sono scritti grandi proprio perché la differenza si noti. */
.onda-parete{
  width:100%;height:auto;display:block;
  font-family:"IBM Plex Sans",system-ui,sans-serif;background:var(--superficie);
}
.onda-parete text{text-transform:none;letter-spacing:0}

.onda-parete .materiale-1{fill:#cfd9cd}
.onda-parete .materiale-2{fill:#ecdfc4}
.onda-parete .materiale-3{fill:#c6d6e0}
.onda-parete .materiale-4{fill:#e7cfca}
.onda-parete .materiale-5{fill:#d7d2e2}
.onda-parete .materiale-6{fill:#e3ead0}
.onda-parete .tratteggio{stroke:none}
.onda-parete .tratto{stroke:var(--grigio-chiaro);stroke-width:1;opacity:.75}
.onda-parete .punto{fill:var(--grigio-chiaro);opacity:.8}
.onda-parete .contorno-muro{fill:none;stroke:var(--filo-forte);stroke-width:1.4}
.onda-parete .nome-strato{fill:var(--inchiostro);font-size:12px}

.onda-parete .media line{stroke:var(--inchiostro);stroke-width:2}
.onda-parete .nome-media{fill:var(--inchiostro);font-size:15px;font-weight:600}

.onda-parete polyline{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.onda-parete .onda-esterna{stroke:var(--rosso)}
.onda-parete .onda-interna{stroke:var(--rosso)}
/* Dentro il muro: la media è la spezzata del regime stazionario, l'inviluppo
   dice fin dove l'oscillazione arriva a quella profondità. */
.onda-parete .media-muro{stroke:var(--inchiostro);stroke-width:2}
.onda-parete .inviluppo{stroke:var(--rosso);stroke-width:1.6;stroke-dasharray:6 4;opacity:.85}

.onda-parete .ore line{stroke:var(--grigio-chiaro);stroke-width:.9}
.onda-parete .ore .asse{stroke:var(--filo-forte);stroke-width:1}
.onda-parete .ora{
  fill:var(--grigio);font-size:12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.onda-parete .nota{fill:var(--grigio-chiaro);font-size:11px}

.onda-parete .escursione line{stroke:var(--inchiostro);stroke-width:1.2}
.onda-parete .quota-escursione{fill:var(--inchiostro);font-size:13px;font-weight:600}

.onda-parete .misura line{stroke:var(--inchiostro);stroke-width:1.2}
.onda-parete .misura .traccia{stroke:var(--grigio-chiaro);stroke-width:.9;stroke-dasharray:3 4}
.onda-parete .etichetta-misura{fill:var(--inchiostro);font-size:13px;font-weight:600}

.onda-parete .lato-grande{fill:var(--ciano);font-size:19px;font-weight:700}
.onda-parete .attenuazione{
  fill:var(--inchiostro);font-size:13.5px;font-weight:600;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

/* Le scritte appoggiate alle onde si aprono uno spazio nella linea. */
.onda-parete .quota-escursione,
.onda-parete .etichetta-misura,
.onda-parete .nome-media,
.onda-parete .nome-strato{
  paint-order:stroke fill;stroke:var(--superficie);stroke-width:3px;stroke-linejoin:round;
}

@media print{
  .onda-parete{background:#fff;break-inside:avoid}
  .onda-parete .materiale-1{fill:#f4f4f4}
  .onda-parete .materiale-2{fill:#e6e6e6}
  .onda-parete .materiale-3{fill:#f0f0f0}
  .onda-parete .materiale-4{fill:#dcdcdc}
  .onda-parete .materiale-5{fill:#ececec}
  .onda-parete .materiale-6{fill:#e0e0e0}
  .onda-parete .tratto{stroke:#666}
  .onda-parete .punto{fill:#666}
  .onda-parete .onda-esterna,.onda-parete .onda-interna,.onda-parete .inviluppo{stroke:#000}
  .onda-parete .lato-grande{fill:#000}
  .onda-parete .quota-escursione,.onda-parete .etichetta-misura,
  .onda-parete .nome-media,.onda-parete .nome-strato{stroke:#fff}
}