/* Stile di famiglia Ampero (lo stesso del banco 3D): arancione #ef5223, pannelli bianchi su fondo #eef2f6. */
:root { color-scheme: light; --p:#ef5223; --pScuro:#d8481d; --bordo:#dbe2e8; --tenue:#5b6672; --testo:#1f2933; --fondo:#eef2f6; }
* { box-sizing: border-box; }
html, body { height:100%; overscroll-behavior:none; }
body { margin:0; font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif; color:var(--testo); background:var(--fondo);
       display:grid; grid-template-columns:292px 1fr; grid-template-rows:52px 1fr; overflow:hidden; }
[hidden] { display:none !important; }

h1 { font-size:17px; margin:0; }
h2 { font-size:11px; font-weight:600; color:var(--tenue); text-transform:uppercase; letter-spacing:.04em; margin:16px 0 6px; }
.nota { font-size:12px; color:var(--tenue); }
.spazio { flex:1; }
.fila { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

button, .bottone { font:inherit; font-size:12px; padding:6px 11px; border-radius:9px; cursor:pointer; border:1px solid #cfd8e0;
                   background:#fff; color:var(--testo); text-decoration:none; display:inline-block; line-height:1.3; }
button:hover:not(:disabled), .bottone:hover { background:#f5f8fa; }
button.p, .bottone.p { background:var(--p); border-color:var(--p); color:#fff; font-weight:600; }
button.p:hover:not(:disabled), .bottone.p:hover { background:var(--pScuro); border-color:var(--pScuro); }
button.s, .bottone.s { border-color:var(--p); color:var(--p); font-weight:600; }
button.s:hover:not(:disabled), .bottone.s:hover { background:#fff4f0; }
button.attivo { background:#1f2933; border-color:#1f2933; color:#fff; }
button:disabled { cursor:default; border-color:var(--bordo); color:#aab4bd; background:#f7f9fb; }
input, select, textarea { font:inherit; font-size:12px; padding:4px 6px; border:1px solid #cfd8e0; border-radius:6px; background:#fff; color:var(--testo); }
input:focus, select:focus, textarea:focus { outline:2px solid #ffd2c4; border-color:var(--p); }

/* ---------------------------------------------------------------- testata */
#testata { grid-column:1 / 3; display:flex; align-items:center; gap:10px; padding:0 16px; background:#fff; border-bottom:1px solid var(--bordo); }
.marchio b { font-size:18px; letter-spacing:.06em; color:var(--p); margin-right:10px; }
.marchio span { font-weight:600; }
.poc { font-size:11px; color:var(--tenue); border:1px solid var(--bordo); border-radius:20px; padding:2px 9px; }

/* ---------------------------------------------------------------- colonna dei lavori */
#colonnaLavori { background:#fff; border-right:1px solid var(--bordo); padding:14px; overflow-y:auto; }
#zona { display:block; border:2px dashed #f3b9a6; border-radius:12px; padding:18px 12px; text-align:center; cursor:pointer; background:#fff8f5; }
#zona b { display:block; color:var(--p); font-size:14px; }
#zona span { font-size:12px; color:var(--tenue); }
#zona.sopra { background:#ffe9e1; border-color:var(--p); }
.voceLavoro { border:1px solid var(--bordo); border-radius:10px; padding:8px 10px; margin-bottom:7px; cursor:pointer; background:#fff; }
.voceLavoro { position:relative; padding-right:40px; }
.voceLavoro:hover { border-color:#b9c4cd; }
.cestino { position:absolute; top:7px; right:7px; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center;
           border-radius:8px; border-color:transparent; background:transparent; color:#8a96a3; }
.cestino:hover:not(:disabled) { background:#fdecea; border-color:#f3b4ad; color:#8c1d18; }
.voceLavoro.scelto { border-color:var(--p); box-shadow:0 0 0 2px #ffe1d7; }
.voceLavoro .c { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voceLavoro .t { font-size:12px; color:var(--tenue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stato { font-size:11px; border-radius:20px; padding:1px 8px; display:inline-block; margin-top:4px; }
.stato.pronto { background:#e8f5e9; color:#1b5e20; }
.stato.corso { background:#eef4ff; color:#0b3d91; }
.stato.errore { background:#fdecea; color:#8c1d18; }

/* ---------------------------------------------------------------- area del lavoro */
#lavoro { min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.centro { margin:auto; text-align:center; max-width:640px; padding:24px; }
.centro h1 { font-size:22px; margin-bottom:8px; }
.centro ol { text-align:left; display:inline-block; font-size:12px; color:var(--tenue); max-height:240px; overflow:auto; margin-top:14px; }
.giro { width:38px; height:38px; margin:0 auto 14px; border-radius:50%; border:4px solid #ffd9cc; border-top-color:var(--p); animation:giro 1s linear infinite; }
@keyframes giro { to { transform:rotate(360deg); } }
#pronto { display:flex; flex-direction:column; flex:1; min-height:0; }
#barraLavoro { display:flex; align-items:center; gap:14px; padding:9px 16px; background:#fff; border-bottom:1px solid var(--bordo); flex-wrap:wrap; }
#barraLavoro .titolo { display:flex; flex-direction:column; min-width:0; }
#schedeComponenti button.attivo { background:var(--p); border-color:var(--p); }
#corpo { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 480px; }
#corpo.senzaTavola { grid-template-columns:minmax(0,1fr) 480px; }
#corpo.senzaTavola #tavola { display:none; }

#vista { position:relative; min-width:0; min-height:0; }
#scena { position:absolute; inset:0; }
#scena canvas { display:block; }
#comandiVista { position:absolute; left:12px; top:12px; z-index:5; }
#aiutoVista { position:absolute; left:12px; bottom:8px; margin:0; z-index:5; }
#cubo { position:absolute; top:10px; right:12px; z-index:6; cursor:pointer; filter:drop-shadow(0 2px 8px rgba(31,41,51,.18)); }
#guasto { position:absolute; bottom:34px; left:12px; right:12px; z-index:9; display:none; background:#fdecea; color:#8c1d18;
          border:1px solid #f3b4ad; border-radius:10px; padding:10px 12px; font:12px/1.4 ui-monospace,monospace; white-space:pre-wrap; }

#tavola { background:#fff; border-left:1px solid var(--bordo); display:flex; flex-direction:column; min-width:0; min-height:0; padding:8px; gap:6px; }
#fogli { flex:1; min-height:0; overflow:auto; border:1px solid var(--bordo); border-radius:8px; background:#fafbfc; }
#foglio { width:100%; display:block; cursor:zoom-in; }
#foglio.grande { width:220%; cursor:zoom-out; }

#lato { background:#fff; border-left:1px solid var(--bordo); display:flex; flex-direction:column; min-height:0; }
.linguette { display:flex; border-bottom:1px solid var(--bordo); }
.linguette button { flex:1; border:0; border-radius:0; padding:10px; font-size:13px; font-weight:600; color:var(--tenue); border-bottom:3px solid transparent; }
.linguette button.attivo { background:#fff; color:var(--testo); border-bottom-color:var(--p); }
.linguetta { flex:1; min-height:0; overflow-y:auto; padding:12px 14px 18px; scrollbar-gutter:stable; }
fieldset { border:1px solid #e3e9ee; border-radius:10px; padding:10px 12px; margin:0 0 12px; min-width:0; }
legend { font-size:11px; font-weight:600; color:var(--tenue); padding:0 6px; text-transform:uppercase; letter-spacing:.04em; }
.riga { display:flex; align-items:center; gap:6px; }
.riga input[type=range] { flex:1 1 40px; min-width:40px; accent-color:var(--p); }
.riga input[type=number] { width:70px; text-align:right; }
.passo { width:32px; flex:0 0 32px; padding:4px 0; text-align:center; font-weight:800; font-size:15px; line-height:1;
         background:var(--p); border-color:var(--p); color:#fff; border-radius:9px; }
.passo:hover:not(:disabled) { background:var(--pScuro); border-color:var(--pScuro); }

#totali { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.cifra { border:1px solid #e3e9ee; border-radius:10px; padding:9px 11px; }
.cifra.grande { grid-column:1 / 3; background:#fff8f5; border-color:#f6cdbf; }
.cifra .e { font-size:11px; color:var(--tenue); text-transform:uppercase; letter-spacing:.04em; }
.cifra .v { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.cifra.grande .v { font-size:28px; color:var(--pScuro); }
.cifra .d { font-size:11px; color:var(--tenue); }
.barra { display:flex; height:8px; border-radius:6px; overflow:hidden; margin-top:6px; background:#eef2f6; }
.barra i { display:block; height:100%; }
.barra .m { background:#7fa7c9; } .barra .b { background:#ef5223; } .barra .x { background:#f2b632; }

table { width:100%; border-collapse:collapse; font-size:12px; }
td, th { padding:3px 4px; vertical-align:top; text-align:left; }
th { font-size:11px; color:var(--tenue); font-weight:600; border-bottom:1px solid #e3e9ee; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.voce td { border-bottom:1px solid #f0f3f6; }
.voce .f { font-weight:600; }
.voce .dd { color:var(--tenue); font-size:11px; }
.fonte { font-size:10px; border-radius:20px; padding:1px 7px; white-space:nowrap; font-weight:600; }
.fonte.mdm { background:#e8f5e9; color:#1b5e20; }
.fonte.ipotesi { background:#fff3d6; color:#7a5200; }
.esito { font-size:12px; padding:8px 10px; border-radius:8px; margin:0 0 8px; }
.esito.ok { background:#e8f5e9; color:#1b5e20; }
.esito.ko { background:#fdecea; color:#8c1d18; }
.esito.av { background:#fff3d6; color:#7a5200; }
ul.lista { margin:0; padding-left:18px; font-size:12px; }
ul.lista li { margin-bottom:4px; }
ul.lista li.av { color:#8c1d18; }

/* ---------------------------------------------------------------- quote lette */
#tabellaQuote input, #tabellaQuote select { width:100%; min-width:0; }
#tabellaQuote table { table-layout:fixed; }
#tabellaQuote td { padding:2px 3px; }
#tabellaQuote td:last-child, #tabellaQuote th:last-child { width:36px; text-align:right; }
#tabellaQuote .campi { display:grid; grid-template-columns:120px minmax(0,1fr); gap:4px 8px; align-items:center; font-size:12px; }
#tabellaQuote .fila select { width:auto; flex:0 0 auto; }
#tabellaQuote .lav { border:1px solid #e3e9ee; border-radius:8px; padding:7px 8px; margin-bottom:7px; }
#tabellaQuote .lav .fila { margin-bottom:5px; }
#tabellaQuote .lav .coppie { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 8px; }
#tabellaQuote .lav label { font-size:11px; color:var(--tenue); display:flex; flex-direction:column; gap:1px; min-width:0; }
.togli { padding:1px 7px; border-radius:6px; color:#8c1d18; border-color:#f3b4ad; }
.fissa { position:sticky; bottom:-18px; background:#fff; padding:10px 0 4px; border-top:1px solid #e3e9ee; margin-top:8px; }

/* ---------------------------------------------------------------- parametri */
#velo { position:fixed; inset:0; background:rgba(31,41,51,.38); z-index:50; display:flex; justify-content:flex-end; }
#parametri { width:min(860px, 96vw); height:100%; background:#fff; padding:16px 20px; overflow-y:auto; box-shadow:-4px 0 24px rgba(20,30,40,.18); }
#parametri input[type=number] { width:92px; text-align:right; }
#parametri td { border-bottom:1px solid #f0f3f6; vertical-align:middle; }

@media (max-width: 1250px) {
  #corpo { grid-template-columns:minmax(0,1fr) 440px; }
  #tavola { display:none; }
}
@media print {
  body { display:block; overflow:visible; }
  #testata, #colonnaLavori, #vista, #tavola, .linguette, #barraLavoro .fila, .fissa, #velo { display:none !important; }
  #corpo { display:block; } #lato { border:0; } .linguetta { overflow:visible; }
}