/* =============================================================================
   SIMULAZIONE INCENDIO IN APPARTAMENTO — style.css
   ============================================================================= */
:root{
  --blu:#1e3a5f; --blu2:#2c5282; --bordo:#d5dce5; --sfondo:#f4f6f9; --card:#fff;
  --testo:#1a2330; --muto:#63718a; --ok:#15803d; --warn:#b45309; --err:#b91c1c;
  --fuoco:#d64200; --acqua:#0e7490;
  --ombra:0 1px 3px rgba(16,32,56,.10), 0 1px 2px rgba(16,32,56,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--testo); background:var(--sfondo);
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.25; font-weight:650}
h1{font-size:19px} h2{font-size:17px} h3{font-size:15px} h4{font-size:13.5px}
a{color:var(--blu2)}
code,kbd{font-family:ui-monospace,Consolas,monospace;font-size:.92em}

/* ------------------------------- intestazione ------------------------------ */
header.app{
  background:linear-gradient(135deg,var(--blu),#31527d); color:#fff;
  padding:12px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
header.app h1{margin:0; font-size:17px; letter-spacing:.2px}
header.app .sub{font-size:12px; opacity:.82}
header.app .spacer{flex:1}
header.app button{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3)}
header.app button:hover{background:rgba(255,255,255,.24)}

/* ---------------------------------- tabs ----------------------------------- */
nav.tabs{display:flex; gap:2px; background:#e7ecf3; padding:0 10px; border-bottom:1px solid var(--bordo); overflow-x:auto}
nav.tabs button{
  border:0; background:transparent; padding:10px 15px; font-size:13.5px; font-weight:600;
  color:var(--muto); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; border-radius:0;
}
nav.tabs button:hover{color:var(--blu)}
nav.tabs button.on{color:var(--blu); border-bottom-color:var(--fuoco); background:var(--card)}
main{padding:16px; max-width:1500px; margin:0 auto}
section.tab{display:none} section.tab.on{display:block}

/* --------------------------------- schede ---------------------------------- */
.card{background:var(--card); border:1px solid var(--bordo); border-radius:8px; padding:14px; margin-bottom:14px; box-shadow:var(--ombra)}
.card > h3:first-child, .card > h2:first-child{margin-top:0}
.griglia{display:grid; gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g-plan{grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:1100px){.g2,.g3,.g-plan{grid-template-columns:1fr}}

/* -------------------------------- controlli -------------------------------- */
button{
  font:inherit; font-size:13px; font-weight:600; padding:6px 12px; border-radius:6px;
  border:1px solid var(--bordo); background:#fff; color:var(--testo); cursor:pointer;
}
button:hover{background:#eef2f7}
button.pri{background:var(--fuoco); border-color:var(--fuoco); color:#fff}
button.pri:hover{background:#b93a00}
button.sec{background:var(--blu); border-color:var(--blu); color:#fff}
button.sec:hover{background:#16304f}
button.mini{padding:3px 8px; font-size:12px; font-weight:500}
button.danger{color:var(--err); border-color:#f0c4c4}
button:disabled{opacity:.45; cursor:not-allowed}
input,select,textarea{
  font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--bordo);
  border-radius:5px; background:#fff; color:var(--testo); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid #b9cbe4; outline-offset:-1px; border-color:var(--blu2)}
input[type=range]{padding:0}
label.f{display:block; margin-bottom:8px}
label.f > span{display:block; font-size:11.5px; color:var(--muto); font-weight:600; margin-bottom:2px; text-transform:uppercase; letter-spacing:.3px}
.riga{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.riga.fine{gap:6px}
fieldset{border:1px solid var(--bordo); border-radius:7px; padding:10px 12px; margin:0 0 12px}
legend{font-size:12px; font-weight:700; color:var(--blu); padding:0 5px; text-transform:uppercase; letter-spacing:.4px}

/* -------------------------------- tabelle ---------------------------------- */
table{border-collapse:collapse; width:100%; font-size:12.5px}
th,td{border:1px solid var(--bordo); padding:5px 7px; text-align:right}
th{background:#eef2f7; font-weight:650; text-align:center; font-size:11.5px; color:var(--blu)}
td.txt,th.txt{text-align:left}
tbody tr:nth-child(even){background:#fafbfd}
tbody tr.sel{background:#fff3e8}
td input,td select{padding:2px 5px; font-size:12px}
.scroll{overflow-x:auto}

/* --------------------------------- badge ----------------------------------- */
.b{display:inline-block; padding:1px 8px; border-radius:11px; font-size:11px; font-weight:700; letter-spacing:.2px}
.b.ok{background:#dcfce7; color:#14532d}
.b.warn{background:#fef3c7; color:#78350f}
.b.err{background:#fee2e2; color:#7f1d1d}
.b.info{background:#dbeafe; color:#1e3a8a}
.b.fuoco{background:#ffe0d0; color:#7c2d12}

/* --------------------------------- avvisi ---------------------------------- */
.nota{border-left:3px solid var(--blu2); background:#f0f5fb; padding:8px 11px; border-radius:0 5px 5px 0; font-size:12.5px; margin:8px 0}
.nota.warn{border-color:var(--warn); background:#fffaeb}
.nota.err{border-color:var(--err); background:#fef2f2}
.dav{color:var(--warn); font-weight:700; font-size:11px; letter-spacing:.3px}
.muto{color:var(--muto)}
.small{font-size:12px}
.mono{font-family:ui-monospace,Consolas,monospace}

/* --------------------------------- canvas ---------------------------------- */
.canvbox{position:relative; background:#fbfcfe; border:1px solid var(--bordo); border-radius:7px; overflow:hidden}
canvas{display:block; width:100%; touch-action:none; cursor:default}
canvas.edit{cursor:crosshair}
.legenda{display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--muto); padding:7px 4px 0}
.legenda i{display:inline-block; width:13px; height:13px; border-radius:3px; vertical-align:-2px; margin-right:4px}

/* --------------------------------- grafici --------------------------------- */
.graf{position:relative; background:#fff; border:1px solid var(--bordo); border-radius:8px; padding:4px}
.graf svg{display:block; width:100%; height:auto}
.graf-tip{position:absolute; display:none; z-index:30; background:rgba(255,255,255,.97);
  border:1px solid var(--bordo); border-radius:7px; box-shadow:0 4px 16px rgba(16,32,56,.16);
  padding:7px 10px; font-size:11.5px; pointer-events:none; min-width:150px; max-width:250px}
.gt-t{font-weight:700; color:var(--blu); border-bottom:1px solid var(--bordo);
  padding-bottom:3px; margin-bottom:4px; font-size:11px; text-transform:uppercase; letter-spacing:.3px}
.gt-r{display:flex; align-items:center; gap:6px; line-height:1.55}
.gt-r i{width:9px; height:9px; border-radius:2px; flex:0 0 auto}
.gt-n{flex:1; color:#33465e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gt-r b{font-variant-numeric:tabular-nums; color:var(--testo)}
.serie-leg{display:flex; gap:6px 14px; flex-wrap:wrap; font-size:11.5px; padding:7px 8px 3px}
.serie-leg span{display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none;
  padding:2px 7px 2px 5px; border-radius:11px; border:1px solid transparent; transition:background .12s}
.serie-leg span:hover{background:#eef2f7; border-color:var(--bordo)}
.serie-leg span.off{opacity:.4; text-decoration:line-through}
.serie-leg i{width:15px; height:3.5px; border-radius:2px; display:inline-block; flex:0 0 auto}

/* ------------------------------- cronologia -------------------------------- */
.crono{list-style:none; margin:0; padding:0; font-size:12.5px}
.crono li{padding:5px 0 5px 14px; border-left:2px solid var(--bordo); position:relative}
.crono li::before{content:''; position:absolute; left:-5px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--blu2)}
.crono li.flashover::before{background:var(--fuoco)}
.crono li.innesco::before{background:#dc2626}
.crono li.vetro::before,.crono li.porta::before{background:var(--acqua)}
.crono li.insostenibile::before{background:var(--warn)}
.crono b{font-variant-numeric:tabular-nums}

/* -------------------------------- relazione -------------------------------- */
.rel{background:#fff; padding:22px; border:1px solid var(--bordo); border-radius:8px}
.rel h2{border-bottom:2px solid var(--blu); padding-bottom:4px; margin-top:22px}
.rel table{margin:8px 0 14px}
.rel .firma{margin-top:36px; font-size:12.5px}

@media print{
  header.app,nav.tabs,.noprint{display:none !important}
  body{background:#fff}
  main{padding:0; max-width:none}
  section.tab{display:none !important}
  section.tab.on{display:block !important}
  .card,.rel{border:0; box-shadow:none; padding:0; margin-bottom:12px}
  .rel h2{page-break-after:avoid}
  table{page-break-inside:avoid}
}

/* ---------------------------- sotto-schede strutture ----------------------- */
nav.sub{display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap}
nav.sub button{border:1px solid var(--bordo); background:#fff; padding:7px 13px; font-size:12.5px; border-radius:6px}
nav.sub button.on{background:var(--blu); border-color:var(--blu); color:#fff}
.sub-panel{display:none}
.sub-panel.on{display:block}
@media print{ nav.sub{display:none} .sub-panel{display:block !important} }

/* --------------------- pulsanti di modalità della pianta ------------------- */
#modoBtns button.on{background:var(--blu); border-color:var(--blu); color:#fff}
#cardSfondo table{font-size:12px}
#cardSfondo td input[type=number]{text-align:right}
@media print{ #cardSfondo,#msgStore{display:none} }

/* ================================== HOME ================================== */
.hero{position:relative; border-radius:10px; overflow:hidden; min-height:430px;
  display:flex; align-items:center; box-shadow:0 6px 22px rgba(16,32,56,.20)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero-txt{position:relative; padding:44px 46px; max-width:760px; color:#fff}
.hero-occhiello{font-size:11.5px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:#ffb057; margin-bottom:14px}
.hero-tit{font-size:35px; line-height:1.16; font-weight:700; margin:0 0 14px; letter-spacing:-.4px;
  text-shadow:0 2px 18px rgba(0,0,0,.42)}
.hero-sub{font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.82); margin:0 0 24px; max-width:600px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px}
.hero-cta button{padding:9px 18px; font-size:13.5px}
.hero-cta button:not(.pri){background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.34)}
.hero-cta button:not(.pri):hover{background:rgba(255,255,255,.22)}
.hero-by{display:inline-flex; flex-direction:column; gap:1px; padding:13px 20px 14px;
  border-left:3px solid #ffb057; background:rgba(255,255,255,.07); border-radius:0 6px 6px 0}
.hero-by-lab{font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.62)}
.hero-by-nome{font-size:16px; font-weight:650; color:#fff; letter-spacing:.2px}
.hero-by-brand{font-size:12.5px; font-weight:700; letter-spacing:3.4px; color:#ffb057; margin-top:3px}
@media (max-width:820px){
  .hero{min-height:0} .hero-txt{padding:30px 24px} .hero-tit{font-size:26px}
}
.home-card{text-align:left}
.home-ico{font-size:26px; line-height:1; margin-bottom:8px}
.home-card h3{margin-bottom:6px}
.home-card p{margin:0}
ol.passi{margin:0 0 10px; padding-left:22px; font-size:13px; line-height:1.75}
ol.passi li{margin-bottom:3px}

/* =========================== FORMULE E PARAMETRI ========================== */
.doc{max-width:1000px; margin:0 auto}
.doc h1{font-size:23px}
.doc h2{font-size:18px; color:var(--blu); border-bottom:2px solid var(--blu); padding-bottom:5px;
  margin:34px 0 6px; scroll-margin-top:14px}
.doc h3{font-size:14.5px; color:var(--blu2); margin:20px 0 6px}
.doc p{font-size:13.5px; line-height:1.65}
.doc-toc{background:#f0f5fb; border-left:3px solid var(--blu2); border-radius:0 6px 6px 0;
  padding:12px 16px; font-size:13px; margin:16px 0 6px}
.doc-toc ol{margin:6px 0 0; padding-left:20px; columns:2; column-gap:26px}
.doc-toc li{margin-bottom:2px; break-inside:avoid}
.doc-toc a{text-decoration:none} .doc-toc a:hover{text-decoration:underline}
ul.doc-el,.doc ol.doc-el{font-size:13.5px; line-height:1.65; padding-left:22px; margin:6px 0 10px}
ul.doc-el li,ol.doc-el li{margin-bottom:5px}
.fx{background:#f7f9fc; border-left:3px solid var(--fuoco); border-radius:0 6px 6px 0;
  padding:13px 18px; margin:10px 0; text-align:center;
  font-family:"Cambria","Georgia",serif; font-size:16px; line-height:1.9; color:#14243a; overflow-x:auto}
.fx sub,.fx sup{font-size:.66em}
.fx-nota{margin-top:8px; font-family:-apple-system,"Segoe UI",Arial,sans-serif; font-size:11.5px;
  line-height:1.5; color:var(--muto); text-align:left}
dl.fx-leg{display:grid; grid-template-columns:auto 1fr; gap:3px 14px; font-size:12.5px;
  margin:8px 0 12px; padding-left:4px}
dl.fx-leg dt{font-family:"Cambria","Georgia",serif; font-size:14px; font-weight:600; color:var(--blu);
  text-align:right; white-space:nowrap}
dl.fx-leg dd{margin:0; color:#33465e; line-height:1.5}
@media (max-width:700px){ .doc-toc ol{columns:1} dl.fx-leg{grid-template-columns:1fr} dl.fx-leg dt{text-align:left} }
@media print{
  .hero{min-height:0} .doc h2{page-break-after:avoid} .fx{page-break-inside:avoid}
  .doc-toc{page-break-after:avoid}
}

/* ----------------------------- popup di aiuto ----------------------------- */
button.q{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  margin-left:4px; padding:0; border-radius:50%; border:1px solid var(--blu2); background:#fff;
  color:var(--blu2); font-size:10px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle}
button.q:hover{background:var(--blu2); color:#fff}
.pop{position:absolute; z-index:200; background:#fff; border:1px solid var(--bordo); border-radius:9px;
  box-shadow:0 10px 34px rgba(16,32,56,.24); overflow:hidden}
.pop-tit{background:var(--blu); color:#fff; padding:9px 13px; font-size:13.5px; font-weight:650;
  display:flex; align-items:center; gap:8px}
.pop-tit sub,.pop-tit sup{font-size:.7em}
.pop-x{margin-left:auto; background:rgba(255,255,255,.16); border:0; color:#fff; width:22px; height:22px;
  border-radius:50%; padding:0; font-size:11px; cursor:pointer}
.pop-x:hover{background:rgba(255,255,255,.32)}
.pop-corpo{padding:11px 14px 13px; font-size:12.8px; line-height:1.55; max-height:60vh; overflow-y:auto}
.pop-corpo p{margin:0 0 8px} .pop-corpo p:last-child{margin-bottom:0}
.pop-fx{background:#f7f9fc; border-left:3px solid var(--fuoco); padding:7px 11px; border-radius:0 5px 5px 0;
  font-family:"Cambria",Georgia,serif; font-size:14.5px; text-align:center}
.pop-att{background:#fffaeb; border-left:3px solid var(--warn); padding:7px 11px; border-radius:0 5px 5px 0}
/* barra della potenza nell'animazione */
.barraQ{height:5px; background:#e9eef5; border-radius:3px; margin-top:6px; overflow:hidden}
.barraQ i{display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#ffce54,#e8500f); transition:width .12s linear}

/* ------------------------ provenienza dei valori -------------------------- */
.ver{color:#15803d; font-weight:650; font-size:11.5px; letter-spacing:.2px}
.lett{color:#0e7490; font-weight:650; font-size:11.5px; letter-spacing:.2px}
.doc-prov{background:#f7f9fc; border:1px solid var(--bordo); border-radius:8px; padding:12px 16px; margin:14px 0}
.doc-prov p{margin:6px 0; font-size:12.8px; line-height:1.55}

/* ----------------------- pannelli divulgativi ----------------------------- */
.srm-bar{height:9px; background:#e9eef5; border-radius:5px; overflow:hidden; min-width:110px}
.srm-bar i{display:block; height:100%; border-radius:5px; transition:width .1s linear}
.racconto p{font-size:13.5px; line-height:1.7; margin:0 0 10px}
.racconto p:last-child{margin-bottom:0}
#cardSerramenti td{vertical-align:middle}

/* --------------------------------- glossario ------------------------------ */
.gl{border-bottom:1.5px dotted var(--blu2); color:var(--blu2); cursor:help; font-weight:600}
.gl:hover{background:#eaf1fa}
.gl:focus{outline:2px solid #b9cbe4; outline-offset:2px}
.gl-demo{border-bottom:1.5px dotted var(--blu2); color:var(--blu2); font-weight:600}
.gl-indice{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px 18px; margin-top:10px}
.gl-cat b{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--blu); margin-bottom:3px}
.gl-cat ul{margin:0; padding-left:16px; font-size:12.5px; line-height:1.65}
.gl-cat a{text-decoration:none} .gl-cat a:hover{text-decoration:underline}
.gl-voce{border-left:3px solid var(--bordo); padding:2px 0 8px 13px; margin-bottom:16px; scroll-margin-top:16px}
.gl-voce:last-child{margin-bottom:0}
.gl-voce h4{margin:0 0 4px; color:var(--blu); font-size:14.5px}
.gl-voce.acceso{border-left-color:var(--fuoco); background:#fff8f3; border-radius:0 6px 6px 0; padding-right:10px}
.gl-breve{margin:0 0 8px; font-size:13px; font-weight:600; color:#33465e}
.gl-est p{margin:0 0 7px; font-size:13px; line-height:1.6}
.gl-est p:last-child{margin-bottom:0}
.gl-rif{margin-top:6px; font-size:11.5px; color:var(--muto)}
.gl-vedi{margin-top:5px; font-size:12px; color:var(--muto)}
.gl-vedi a{color:var(--blu2)}
.gl-pop .pop-tit{background:var(--blu2)}

/* ======================= scheda «Muri REI» ================================= */
.rei-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.rei-tabs button{border:1px solid var(--bordo); background:#fff; padding:8px 14px; border-radius:7px;
  font-weight:600; color:var(--muto)}
.rei-tabs button.on{background:var(--blu); color:#fff; border-color:var(--blu)}

.rei-box{border-radius:8px; padding:12px 16px; margin:12px 0; text-align:center; border:2px solid}
.rei-box.rei-req{background:#fffaeb; border-color:var(--warn); color:#7c3d00}
.rei-box.rei-ok{background:#f0fdf4; border-color:var(--ok); color:#14532d}
.rei-box.rei-no{background:#fef2f2; border-color:var(--err); color:#7f1d1d}
.rei-big{font-size:26px; font-weight:750; letter-spacing:.5px}
.rei-box .small{opacity:.78; text-transform:uppercase; letter-spacing:.6px; font-size:11px; font-weight:600}

.rei-det{margin:10px 0; border:1px solid var(--bordo); border-radius:7px; padding:8px 12px; background:#fbfcfe}
.rei-det > summary{cursor:pointer; font-weight:650; font-size:13px; color:var(--blu2)}
.rei-det table{margin-top:8px}
tr.rei-att > td{background:#fff3cd !important; font-weight:700}

.rei-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin:12px 0}
.rei-card{border:1px solid var(--bordo); border-left-width:4px; border-radius:7px; padding:10px 12px; background:#fff}
.rei-card.rei-ok{border-left-color:var(--ok)}
.rei-card.rei-req{border-left-color:var(--warn)}
.rei-card.rei-no{border-left-color:var(--err)}
.rei-card.rei-neu{border-left-color:var(--blu2)}
.rei-ct{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muto); font-weight:650}
.rei-cv{font-size:20px; font-weight:700; margin:3px 0}
.rei-cs{font-size:11.5px; color:var(--muto); line-height:1.4}

.rei-verd{display:flex; gap:14px; align-items:center; border-radius:8px; padding:14px 16px; border:2px solid}
.rei-verd.rei-ok{background:#f0fdf4; border-color:var(--ok)}
.rei-verd.rei-no{background:#fef2f2; border-color:var(--err)}
.rei-vi{font-size:34px; line-height:1}
.rei-vt{font-size:17px; font-weight:700}
.rei-vs{font-size:13px; color:var(--muto); margin-top:2px}

.rei-strat td{text-align:center}
.rei-strat td:nth-child(2){text-align:left}
.rei-fuoco{font-size:11px}
.rei-chk{display:flex; align-items:center; gap:8px; margin:12px 0; font-size:13px;
  background:#f0f5fb; padding:8px 12px; border-radius:6px; width:auto}
.rei-chk input{width:auto}

#reiCv{width:100%; max-width:960px; border:1px solid var(--bordo); border-radius:7px; background:#fbfcfe; display:block}
.rei-t{font-variant-numeric:tabular-nums; font-weight:700; min-width:64px; text-align:right}
.rei-scala{display:flex; margin:10px 0 4px; border-radius:5px; overflow:hidden; border:1px solid var(--bordo)}
.rei-scala span{flex:1; text-align:center; font-size:10.5px; padding:3px 0; color:#1a2330; font-weight:600}
.rei-scala span:nth-child(n+8){color:#fff}