/* Ampero × MDM — preventivatore da disegno.
   Tutti i colori passano da variabili: il tema scuro ridefinisce solo quelle (blocco [data-tema="scuro"]).
   L'accento è il blu del marchio MDM; l'arancione Ampero resta nel solo logo. Per cambiarlo basta --p e i suoi derivati.

   Scala (decisa in revisione, non aggiungere eccezioni):
     raggi      6 px controlli · 10 px riquadri · 14 px pannelli grandi · 999 px etichette
     spazi      4 · 8 · 12 · 16 · 24 · 32 px
     testo      11 etichette · 12 tabelle e note · 13 controlli · 14 testo · 16 titolo del lavoro · 20 titolo delle schermate vuote · 28 totale
     altezze    32 px i controlli · 28 px quelli dentro le barre che galleggiano sul 3D e dentro le tabelle dell'editor
     ombre      solo su ciò che galleggia (menu, barre sopra il 3D) e sui pannelli che si aprono; mai sui riquadri */
:root {
  color-scheme: light;
  --p:#19228b; --pForte:#111a6e; --pSu:#fff;                 /* accento pieno (bottoni) e testo sopra */
  --pTesto:#19228b;                                          /* accento usato come testo o contorno */
  --pTenue:#eef0fb; --pBordo:#c3c9ef; --pAlone:rgba(25,34,139,.18);
  --fondo:#eef1f6; --pannello:#fff; --incavo:#f5f7fa; --rialzo:#fff;
  --bordo:#dbe1e9; --bordoTenue:#e8edf3; --bordoForte:#c6cfda;
  --testo:#1b2430; --tenue:#5b6675; --spento:#a6b0bc;
  --ok:#1b5e20; --okFondo:#e7f5e9; --ko:#8c1d18; --koFondo:#fdecea; --koBordo:#f3b4ad;
  --av:#7a5200; --avFondo:#fff3d6; --info:#0b3d91; --infoFondo:#e9f0ff;
  --ombraFlottante:0 2px 8px rgb(16 24 40 / 8%); --ombraPannello:0 16px 40px rgb(16 24 40 / 18%);
  --r1:6px; --r2:10px; --r3:14px;
  --scena1:#f8fafc; --scena2:#dde3ec;                        /* fondo del visualizzatore 3D (sfumatura) */
  --spigoli:#566270; --taglioFondo:#e8edf2; --taglioLinea:#7d8997;
  --rettifica:#3a6ee0; --lappatura:#19bcd6;          /* facce da rettificare e da lappare nel 3D */
  --asseX:#c94a4a; --asseY:#2f8f57; --asseZ:#2f62c9;
  --cuboFaccia:#f7f6f2; --cuboBordo:#c9ccd1; --cuboTesto:#3a4149;
  --barraM:#8fb0cf; --barraB:#19228b; --barraX:#f2b632;
  --velo:rgba(27,36,48,.40);
  --lato:clamp(380px, 29vw, 440px);                          /* larghezza del pannello di destra */
}
:root[data-tema="scuro"] {
  color-scheme: dark;
  --p:#4553dc; --pForte:#5866ee; --pSu:#fff;
  --pTesto:#aeb6ff;
  --pTenue:#1b2040; --pBordo:#363f80; --pAlone:rgba(124,138,255,.30);
  --fondo:#0d1015; --pannello:#161a21; --incavo:#11151b; --rialzo:#1d222b;
  --bordo:#272e39; --bordoTenue:#20262f; --bordoForte:#3a4351;
  --testo:#e7eaf0; --tenue:#98a2b1; --spento:#566070;
  --ok:#8fdc98; --okFondo:#14301a; --ko:#ff9a92; --koFondo:#3a1715; --koBordo:#6b2a26;
  --av:#ffd27a; --avFondo:#3a2c0c; --info:#9fc0ff; --infoFondo:#14244a;
  --ombraFlottante:0 2px 10px rgb(0 0 0 / 45%); --ombraPannello:0 16px 44px rgb(0 0 0 / 60%);
  --scena1:#10151d; --scena2:#080b10;
  --spigoli:#4c5867; --taglioFondo:#272e37; --taglioLinea:#748292;
  --rettifica:#5b8cff; --lappatura:#3fd2ea;
  --asseX:#ff7a7a; --asseY:#6fd39a; --asseZ:#7ea6ff;
  --cuboFaccia:#252c37; --cuboBordo:#434d5c; --cuboTesto:#dde2ea;
  --barraM:#6f93b5; --barraB:#6f7cff; --barraX:#e0a82a;
  --velo:rgba(0,0,0,.55);
}

* { 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:var(--colonna) 1fr; grid-template-rows:56px 1fr; overflow:hidden; transition:grid-template-columns .2s ease; }
body { --colonna:248px; }
body.colonnaChiusa { --colonna:0px; }
[hidden] { display:none !important; }
:root[data-tema="scuro"] .soloChiaro, :root:not([data-tema="scuro"]) .soloScuro { display:none !important; }

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

/* ---------------------------------------------------------------- controlli */
button, .bottone { font:inherit; font-size:13px; min-height:32px; padding:0 12px; border-radius:var(--r1); cursor:pointer; border:1px solid var(--bordoForte);
                   background:var(--rialzo); color:var(--testo); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
                   line-height:1.2; white-space:nowrap; transition:background .12s, border-color .12s, color .12s, box-shadow .12s; }
button:hover:not(:disabled), .bottone:hover { background:var(--incavo); border-color:var(--tenue); }
button:focus-visible, .bottone:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--pAlone); outline-offset:1px; border-color:var(--pTesto); }
button.p, .bottone.p { background:var(--p); border-color:var(--p); color:var(--pSu); font-weight:600; }
button.p:hover:not(:disabled), .bottone.p:hover { background:var(--pForte); border-color:var(--pForte); }
button.s, .bottone.s { border-color:var(--pBordo); color:var(--pTesto); font-weight:600; }
button.s:hover:not(:disabled), .bottone.s:hover { background:var(--pTenue); border-color:var(--pTesto); }
button.attivo { background:var(--pTenue); border-color:var(--pBordo); color:var(--pTesto); font-weight:600; }
button:disabled { cursor:default; border-color:var(--bordo); color:var(--spento); background:var(--incavo); }
button.p:disabled { background:var(--incavo); }
button.icona, .bottone.icona { width:32px; padding:0; }
input, select, textarea { font:inherit; font-size:13px; min-height:30px; padding:4px 8px; border:1px solid var(--bordoForte); border-radius:var(--r1); background:var(--rialzo); color:var(--testo); }
textarea { width:100%; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--pAlone); border-color:var(--pTesto); }
input[type=checkbox] { accent-color:var(--p); min-height:0; }
input[type=range] { accent-color:var(--p); min-height:0; padding:0; border:0; background:transparent; }
output { font-size:12px; font-variant-numeric:tabular-nums; color:var(--tenue); }

/* gruppo di bottoni a scelta unica (disposizione, pagine della tavola, piano di sezione) */
.segmenti { display:inline-flex; border:1px solid var(--bordoForte); border-radius:var(--r1); overflow:hidden; background:var(--rialzo); }
.segmenti button { border:0; border-radius:0; min-height:30px; background:transparent; color:var(--tenue); font-weight:500; }
.segmenti button + button { border-left:1px solid var(--bordo); }
.segmenti button:hover:not(:disabled) { background:var(--incavo); color:var(--testo); }
.segmenti button.attivo { background:var(--pTenue); color:var(--pTesto); font-weight:600; }

/* menu a tendina fatti con <details> */
details.menu { position:relative; }
details.menu > summary { list-style:none; user-select:none; }
details.menu > summary::-webkit-details-marker { display:none; }
details.menu[open] > summary { background:var(--incavo); border-color:var(--tenue); }
.tendina { position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:220px; padding:4px; display:flex; flex-direction:column; gap:2px;
           background:var(--rialzo); border:1px solid var(--bordo); border-radius:var(--r2); box-shadow:var(--ombraFlottante); }
.tendina a, .tendina button { justify-content:flex-start; border:0; background:transparent; color:var(--testo); text-decoration:none; font-size:13px;
                              min-height:32px; padding:0 8px; border-radius:var(--r1); display:flex; align-items:center; cursor:pointer; }
.tendina a:hover, .tendina button:hover:not(:disabled) { background:var(--incavo); }
.tendina button:disabled { background:transparent; color:var(--spento); cursor:default; }
.tendina .pericolo { color:var(--ko); }
.tendina .pericolo:hover:not(:disabled) { background:var(--koFondo); }

/* ---------------------------------------------------------------- testata */
#testata { grid-column:1 / 3; display:flex; align-items:center; gap:8px; padding:0 16px; background:var(--pannello); border-bottom:1px solid var(--bordo); z-index:3; }
.marchio { display:flex; align-items:center; gap:12px; min-width:0; }
.marchio img { display:block; flex:none; }
.marchio .ampero { height:30px; }      /* logo Ampero certificato: segno e scritta in un pezzo solo, arancione nei due temi */
.marchio .mdm { height:44px; }
.marchio .per { font-size:20px; color:var(--testo); font-weight:700; line-height:1; }

/* ---------------------------------------------------------------- colonna dei lavori */
#colonnaLavori { background:var(--pannello); border-right:1px solid var(--bordo); padding:12px; overflow-y:auto; min-width:0; }
body.colonnaChiusa #colonnaLavori { visibility:hidden; padding:0; border:0; }
/* tasto per chiudere e riaprire la colonna: a metà del bordo, a cavallo fra colonna e lavoro */
#bColonna { position:fixed; z-index:20; top:calc(56px + (100vh - 56px) / 2); left:calc(var(--colonna) - 12px); transform:translateY(-50%);
            width:24px; min-height:56px; padding:0; border-radius:999px; color:var(--tenue); background:var(--rialzo); box-shadow:var(--ombraFlottante);
            transition:left .2s ease, color .12s, border-color .12s; }
#bColonna:hover { color:var(--pTesto); border-color:var(--pTesto); }
#bColonna svg { transition:transform .2s ease; }
body.colonnaChiusa #bColonna { left:0; border-radius:0 10px 10px 0; border-left:0; }
body.colonnaChiusa #bColonna svg { transform:rotate(180deg); }
#zona { display:block; border:1.5px dashed var(--pBordo); border-radius:var(--r3); padding:16px 12px; text-align:center; cursor:pointer; background:var(--pTenue);
        transition:background .12s, border-color .12s, box-shadow .12s; }
#zona:hover { border-color:var(--pTesto); }
#zona b { display:block; color:var(--pTesto); font-size:14px; margin-bottom:4px; }
#zona span { font-size:12px; color:var(--tenue); }
#zona.sopra { border-color:var(--pTesto); border-style:solid; box-shadow:0 0 0 4px var(--pAlone); }
#esitoCarica:empty { display:none; }
#esitoCarica { margin-top:8px; }
.voceLavoro { position:relative; border:1px solid var(--bordo); border-radius:var(--r2); padding:8px 40px 8px 12px; margin-bottom:8px; cursor:pointer; background:var(--rialzo);
              transition:border-color .12s, box-shadow .12s; }
.voceLavoro:hover { border-color:var(--bordoForte); }
.cestino { position:absolute; top:6px; right:6px; width:28px; min-height:28px; padding:0; border-color:transparent; background:transparent; color:var(--spento); }
.voceLavoro:hover .cestino { color:var(--tenue); }
.cestino:hover:not(:disabled) { background:var(--koFondo); border-color:var(--koBordo); color:var(--ko); }
.voceLavoro.scelto { border-color:var(--pTesto); box-shadow:0 0 0 3px var(--pAlone); }
.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:999px; padding:1px 8px; display:inline-block; margin-top:4px; font-weight:500; }
.stato.pronto { background:var(--okFondo); color:var(--ok); }
.stato.corso { background:var(--infoFondo); color:var(--info); }
.stato.errore { background:var(--koFondo); color:var(--ko); }

/* ---------------------------------------------------------------- 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:680px; padding:24px; }
.centro h1 { font-size:20px; margin-bottom:8px; }
#pronto { display:flex; flex-direction:column; flex:1; min-height:0; }

/* attesa della lettura: fasi vere, tempo trascorso, miniatura della tavola */
#attesaMiniatura { display:block; margin:0 auto 16px; max-height:200px; max-width:100%; border:1px solid var(--bordoForte); border-radius:var(--r2); background:#fff; }
.fasi { list-style:none; display:flex; justify-content:center; gap:0; padding:0; margin:16px 0 8px; font-size:12px; color:var(--spento); }
.fasi li { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.fasi li::before { content:""; width:10px; height:10px; border-radius:50%; border:2px solid var(--bordoForte); flex:none; }
.fasi li + li { margin-left:8px; padding-left:36px; background:linear-gradient(var(--bordoForte), var(--bordoForte)) left center / 28px 1px no-repeat; }
.fasi li.fatta { color:var(--tenue); }
.fasi li.fatta::before { background:var(--ok); border-color:var(--ok); }
.fasi li.corrente { color:var(--testo); font-weight:600; }
.fasi li.corrente::before { border-color:var(--pTesto); background:var(--pTesto); animation:battito 1.4s ease-in-out infinite; }
@keyframes battito { 0%, 100% { box-shadow:0 0 0 0 var(--pAlone); } 50% { box-shadow:0 0 0 6px var(--pAlone); } }
.tempo { font-size:16px; font-variant-numeric:tabular-nums; margin:8px 0; }
#attesaDettagli { margin-top:16px; }
#attesaDettagli summary { cursor:pointer; }
#attesaPassi { text-align:left; display:block; font-size:12px; color:var(--tenue); max-height:180px; overflow:auto; margin:8px auto 0; max-width:420px; }

/* barra del lavoro: due righe volute — titolo e azioni sopra, componenti sotto */
#barraLavoro { background:var(--pannello); border-bottom:1px solid var(--bordo); }
.rigaTitolo { display:flex; align-items:center; gap:8px; padding:4px 16px; min-height:48px; }
.rigaTitolo > * { flex:none; }      /* si accorcia solo il titolo, mai i comandi */
.rigaTitolo .spazio { flex:1; }
.rigaTitolo .titolo { display:flex; flex-direction:column; flex:0 1 auto; min-width:0; }
.rigaTitolo .titolo h1, .rigaTitolo .titolo .nota { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#schedeComponenti { display:flex; gap:4px; padding:0 16px; overflow-x:auto; scrollbar-width:thin; border-top:1px solid var(--bordoTenue); }
#schedeComponenti button { flex:none; border:0; border-radius:0; background:transparent; color:var(--tenue); min-height:32px; padding:0 12px; font-weight:500;
                           border-bottom:2px solid transparent; }
#schedeComponenti button:hover { background:var(--incavo); color:var(--testo); }
#schedeComponenti button.attivo { color:var(--pTesto); border-bottom-color:var(--pTesto); font-weight:600; background:transparent; }
/* il pezzo selezionato nel 3D si segna con un puntino: il fondo pieno sembrerebbe una seconda scheda attiva */
#schedeComponenti button.evidenza { color:var(--testo); }
#schedeComponenti button.evidenza::after { content:""; width:6px; height:6px; border-radius:999px; background:var(--pTesto); }

#corpo { flex:1; min-height:0; display:grid; grid-template-columns:minmax(360px,1fr) minmax(360px,1fr) var(--lato); }
#corpo[data-d="3d"] { grid-template-columns:minmax(0,1fr) var(--lato); }
#corpo[data-d="3d"] #tavola { display:none; }
#corpo[data-d="tavola"] { grid-template-columns:minmax(0,1fr) var(--lato); }
#corpo[data-d="tavola"] #vista { display:none; }

/* ---------------------------------------------------------------- visualizzatore 3D */
#vista { position:relative; min-width:0; min-height:0; container-type:inline-size; background:radial-gradient(120% 95% at 50% 38%, var(--scena1), var(--scena2)); }
#scena { position:absolute; inset:0; }
#scena canvas { display:block; }
#comandiVista, #pannelloSezione { position:absolute; left:12px; z-index:5; display:flex; align-items:center; background:var(--pannello); border:1px solid var(--bordo);
                                  border-radius:var(--r2); box-shadow:var(--ombraFlottante); }
#comandiVista { top:12px; gap:0; padding:3px; }
#comandiVista button { border-color:transparent; background:transparent; min-height:28px; }
#comandiVista button:hover:not(:disabled) { background:var(--incavo); }
#comandiVista button.attivo { background:var(--pTenue); color:var(--pTesto); }
#pannelloSezione { top:56px; gap:8px; padding:4px 12px 4px 8px; max-width:calc(100% - 24px); }
#pannelloSezione > * { flex:none; }
#pannelloSezione .segmenti button { min-height:28px; padding:0 8px; font-size:12px; }
#pannelloSezione input[type=range] { flex:1 1 140px; width:140px; min-width:56px; }
/* quando il 3D è stretto il pannello della sezione scende sotto il cubo delle viste, invece di finirci sotto */
@container (max-width: 560px) { #pannelloSezione { top:104px; } }
#pannelloSezione output { min-width:76px; text-align:right; color:var(--testo); }
#cubo { position:absolute; top:10px; right:12px; z-index:6; cursor:pointer; filter:drop-shadow(0 2px 8px rgb(16 24 40 / 8%)); }
#terna { position:absolute; right:8px; bottom:4px; z-index:4; pointer-events:none; }
#legenda { position:absolute; left:12px; bottom:12px; z-index:5; max-width:calc(100% - 120px); display:flex; flex-wrap:wrap; align-items:center;
           gap:4px 12px; padding:6px 12px; font-size:12px; background:var(--pannello); border:1px solid var(--bordo); border-radius:var(--r2); }
#legenda .voceLegenda { display:inline-flex; align-items:center; gap:6px; color:var(--testo); white-space:nowrap; }
#legenda i { width:10px; height:10px; border-radius:3px; }
#legenda i.rettifica { background:var(--rettifica); }
#legenda i.lappatura { background:var(--lappatura); }
#guasto { position:absolute; bottom:48px; left:12px; right:12px; z-index:9; display:none; background:var(--koFondo); color:var(--ko);
          border:1px solid var(--koBordo); border-radius:var(--r2); padding:8px 12px; font:12px/1.4 ui-monospace,monospace; white-space:pre-wrap; }

/* ---------------------------------------------------------------- tavola */
#tavola { background:var(--pannello); border-left:1px solid var(--bordo); display:flex; flex-direction:column; min-width:0; min-height:0; padding:8px; gap:8px; }
.testaTavola { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.testaTavola > * { flex:none; }
.testaTavola .spazio { flex:1; }
.testaTavola .segmenti::before { content:"Pag."; align-self:center; padding:0 8px; font-size:12px; color:var(--tenue); border-right:1px solid var(--bordo); }
.testaTavola .segmenti button { padding:0 8px; min-width:30px; }
.testaTavola .icona { width:28px; }
.testaTavola #zAdatta { min-width:48px; padding:0 4px; font-size:12px; font-variant-numeric:tabular-nums; }
#fogli { flex:1; min-height:0; overflow:auto; display:flex; border:1px solid var(--bordoForte); border-radius:var(--r2); background:var(--incavo); padding:12px;
         touch-action:none; scrollbar-width:thin; }
#foglio { margin:auto; flex:none; display:block; cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='white' fill-opacity='.6' stroke='black' stroke-width='3'/%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='white' stroke-width='1.2'/%3E%3Cpath d='M15 15l6 6' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M10 7v6M7 10h6' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") 10 10, pointer; background:#fff; outline:1px solid var(--bordoForte); user-select:none; -webkit-user-drag:none; }
#fogli.ingrandita #foglio { cursor:move; }
#fogli.ingrandita:active #foglio { cursor:move; }
:root[data-tema="scuro"] #foglio, :root[data-tema="scuro"] #attesaMiniatura { filter:brightness(.94) contrast(1.08); }   /* resta carta chiara, solo meno abbagliante */

/* ---------------------------------------------------------------- pannello di destra */
#lato { background:var(--pannello); border-left:1px solid var(--bordo); display:flex; flex-direction:column; min-height:0; min-width:0; }
.linguette { display:flex; border-bottom:1px solid var(--bordo); }
.linguette button { flex:1; border:0; border-radius:0; min-height:40px; font-size:13px; font-weight:600; color:var(--tenue); background:transparent;
                    border-bottom:2px solid transparent; margin-bottom:-1px; }
.linguette button:hover:not(:disabled) { background:var(--incavo); }
.linguette button.attivo { background:transparent; color:var(--testo); border-bottom-color:var(--pTesto); }
.linguette button.conModifiche::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--pTesto); }
.linguetta { flex:1; min-height:0; overflow-y:auto; padding:16px 16px 24px; scrollbar-gutter:stable; scrollbar-width:thin; }
fieldset { border:1px solid var(--bordoTenue); border-radius:var(--r2); padding:8px 12px 12px; margin:0 0 16px; min-width:0; }
legend { font-size:11px; font-weight:600; color:var(--tenue); padding:0 4px; text-transform:uppercase; letter-spacing:.04em; }
.riga { display:flex; align-items:center; gap:8px; }
.riga input[type=range] { flex:1 1 40px; min-width:40px; }
.riga input[type=number] { width:64px; text-align:center; font-weight:600; }
.passo { width:32px; flex:0 0 32px; padding:0; font-size:16px; }

/* materiale: una riga compatta per componente */
.matSolo select { width:100%; }
.matSolo .nota { margin-top:4px; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
.matRiga { display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:8px; align-items:center; min-height:36px; padding:4px 0; }
.matRiga + .matRiga { border-top:1px solid var(--bordoTenue); }
.matRiga .chi { display:flex; align-items:center; gap:4px; min-width:0; font-size:12px; }
.matRiga .chi > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matRiga select { width:100%; min-width:0; min-height:28px; font-size:12px; }

/* scorciatoie di quantità */
#scala { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin-top:8px; }
.chipQ { flex-direction:column; gap:0; min-height:40px; padding:2px 0; }
.chipQ b { font-size:12px; font-weight:600; }
.chipQ span { font-size:11px; color:var(--tenue); font-variant-numeric:tabular-nums; }
.chipQ.attivo span { color:var(--pTesto); }

#totali { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.cifra { border:1px solid var(--bordoTenue); border-radius:var(--r2); padding:8px 12px; }
.cifra.grande { grid-column:1 / 3; background:var(--pTenue); border-color:var(--pBordo); padding:12px; }
.cifra .e { font-size:11px; color:var(--tenue); text-transform:uppercase; letter-spacing:.04em; }
.cifra .v { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.cifra.grande .v { font-size:28px; line-height:1.25; color:var(--pTesto); letter-spacing:-.01em; }
.cifra .d { font-size:11px; color:var(--tenue); }
.barra { display:flex; height:6px; border-radius:999px; overflow:hidden; margin:8px 0 4px; background:var(--pannello); }
.barra i { display:block; height:100%; }
.barra .m { background:var(--barraM); } .barra .b { background:var(--barraB); } .barra .x { background:var(--barraX); }

table { width:100%; border-collapse:collapse; font-size:12px; }
td, th { padding:4px; vertical-align:top; text-align:left; }
th { font-size:11px; color:var(--tenue); font-weight:600; border-bottom:1px solid var(--bordoTenue); }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.voce td { border-bottom:1px solid var(--bordoTenue); padding-top:6px; padding-bottom:6px; }
tr.voce:last-child td { border-bottom:0; }
/* grezzi dell'assieme: una riga per componente, il nome si accorcia e la misura resta intera */
.grezzi { table-layout:fixed; }
.grezzi td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grezzi td:first-child { width:34%; }
.grezzi td:last-child { width:72px; }
.voce .f { font-weight:600; }
.voce .dd { color:var(--tenue); font-size:11px; }
.fonte { font-size:11px; border-radius:999px; padding:0 8px; white-space:nowrap; font-weight:600; flex:none; }
.fonte.mdm { background:var(--okFondo); color:var(--ok); }
.fonte.ipotesi { background:var(--avFondo); color:var(--av); }
.esito { font-size:12px; padding:8px 12px; border-radius:var(--r1); margin:0 0 8px; }
.esito.ok { background:var(--okFondo); color:var(--ok); }
.esito.ko { background:var(--koFondo); color:var(--ko); }
.esito.av { background:var(--avFondo); color:var(--av); }
.sbagliato { border-color:var(--ko) !important; background:var(--koFondo) !important; }
ul.lista { margin:0; padding-left:16px; font-size:12px; }
ul.lista li { margin-bottom:4px; }

/* ---------------------------------------------------------------- quote lette */
details.sezione { border:1px solid var(--bordoTenue); border-radius:var(--r2); margin-bottom:8px; }
details.sezione > summary { display:flex; align-items:center; gap:8px; min-height:32px; padding:0 12px; cursor:pointer; list-style:none; user-select:none; border-radius:var(--r2); }
details.sezione > summary::-webkit-details-marker { display:none; }
details.sezione > summary::before { content:"▸"; color:var(--tenue); font-size:11px; transition:transform .12s; }
details.sezione[open] > summary::before { transform:rotate(90deg); }
details.sezione > summary:hover { background:var(--incavo); }
details.sezione .t { font-size:13px; font-weight:600; }
details.sezione .conta { font-size:11px; color:var(--tenue); background:var(--incavo); border-radius:999px; padding:0 8px; }
#materiale details.sezione { margin:0; border:0; }
#materiale details.sezione > summary { padding:0 4px; }
#materiale details.sezione .dentro { padding:4px 0 0; }
details.sezione.toccata > summary::after { content:"modificata"; margin-left:auto; font-size:11px; font-weight:600; color:var(--pTesto); }
details.sezione .dentro { padding:0 12px 12px; }
details.sezione .dentro > .nota { margin:0 0 8px; }
#tabellaQuote input, #tabellaQuote select { width:100%; min-width:0; min-height:28px; font-size:12px; padding:2px 6px; }
#tabellaQuote table { table-layout:fixed; }
#tabellaQuote td { padding:2px; }
#tabellaQuote td:last-child, #tabellaQuote th:last-child { width:32px; text-align:right; }
#tabellaQuote .campi { display:grid; grid-template-columns:130px minmax(0,1fr); gap:4px 8px; align-items:center; font-size:12px; margin-bottom:8px; }
#tabellaQuote .fila select { width:auto; flex:0 0 auto; }
#tabellaQuote .lav { border:1px solid var(--bordoTenue); border-radius:var(--r1); padding:8px; margin-bottom:8px; background:var(--incavo); }
#tabellaQuote .lav .fila { margin-bottom:4px; flex-wrap:nowrap; }
#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:2px; min-width:0; }
#tabellaQuote .modificato { border-color:var(--pTesto); background:var(--pTenue); }
.aggiungi { margin-top:8px; min-height:28px; font-size:12px; }
.aggiungi.fuori { margin:0 0 8px; }
.togli { min-height:24px; width:24px; padding:0; color:var(--ko); border-color:var(--koBordo); }
.togli.largo { width:auto; padding:0 8px; margin:8px 0 0 8px; font-size:12px; min-height:28px; }
.togli:hover:not(:disabled) { background:var(--koFondo); border-color:var(--ko); }
.fissa { position:sticky; bottom:-24px; background:var(--pannello); padding:12px 0 8px; border-top:1px solid var(--bordoTenue); margin-top:8px; }
/* Contatore ATK: ultimo a destra della riga, discreto. Nessuna etichetta e nessun suggerimento: il numero e basta. */
.atk { margin-left:auto; font-size:12px; color:var(--tenue); font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; }

/* ---------------------------------------------------------------- finestra di conferma (parametri non salvati) */
dialog { border:1px solid var(--bordo); border-radius:var(--r3); background:var(--pannello); color:var(--testo); padding:24px; max-width:480px;
         box-shadow:var(--ombraPannello); }
dialog::backdrop { background:var(--velo); }
dialog h1 { margin-bottom:8px; }
dialog .fila { margin-top:16px; }

/* ---------------------------------------------------------------- parametri */
#velo { position:fixed; inset:0; background:var(--velo); z-index:50; display:flex; justify-content:flex-end; }
#parametri { width:min(900px, 96vw); height:100%; background:var(--pannello); display:flex; flex-direction:column; box-shadow:var(--ombraPannello); border-left:1px solid var(--bordo); }
.testaParametri { display:flex; align-items:flex-start; gap:16px; justify-content:space-between; padding:16px 24px 12px; border-bottom:1px solid var(--bordo); }
.testaParametri p { margin:4px 0 0; }
.dueColonne { flex:1; min-height:0; display:grid; grid-template-columns:184px minmax(0,1fr); }
#indiceParametri { overflow-y:auto; padding:16px 8px 16px 16px; border-right:1px solid var(--bordoTenue); display:flex; flex-direction:column; gap:2px; }
#indiceParametri a { display:block; padding:8px; border-radius:var(--r1); font-size:12px; color:var(--tenue); text-decoration:none; }
#indiceParametri a:hover { background:var(--incavo); color:var(--testo); }
#indiceParametri a[aria-current="true"] { background:var(--pTenue); color:var(--pTesto); font-weight:600; }
#corpoParametri { overflow-y:auto; padding:16px 24px; scrollbar-width:thin; }
#corpoParametri fieldset { scroll-margin-top:8px; }
#parametri input[type=number] { width:92px; text-align:right; }
#parametri td { border-bottom:1px solid var(--bordoTenue); vertical-align:middle; }
#parametri tr:last-child td { border-bottom:0; }
#parametri .piede { padding:12px 24px; border-top:1px solid var(--bordo); }

/* ---------------------------------------------------------------- pagina di accesso */
body.accesso { display:flex; align-items:center; justify-content:center; padding:24px;
               background:radial-gradient(60% 50% at 50% 42%, var(--pTenue), transparent 72%), var(--fondo); }
.accesso form { background:var(--pannello); border:1px solid var(--bordo); border-radius:var(--r3); padding:32px 32px 24px; width:min(360px, 100%);
                box-shadow:var(--ombraPannello); display:flex; flex-direction:column; gap:12px; }
.accesso .loghi { display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 4px; }
.accesso .loghi img { display:block; }
.accesso .loghi .ampero { height:42px; }
.accesso .loghi .mdm { height:72px; }
.accesso .loghi .per { font-size:28px; color:var(--testo); font-weight:700; line-height:1; }
.accesso .titolo { text-align:center; font-size:16px; font-weight:600; }
.accesso .sotto { text-align:center; margin:-8px 0 8px; }
.accesso label { font-size:12px; color:var(--tenue); display:flex; flex-direction:column; gap:4px; }
.accesso input { font-size:14px; min-height:40px; padding:0 12px; }
.accesso .conOcchio { position:relative; display:flex; }
.accesso .conOcchio input { flex:1; padding-right:44px; }
.accesso .conOcchio button { position:absolute; right:4px; top:4px; width:32px; min-height:32px; padding:0; border-color:transparent; background:transparent; color:var(--tenue); }
.accesso .conOcchio button:hover { background:var(--incavo); }
.accesso button.p { font-size:14px; min-height:40px; margin-top:8px; }
.accesso .esito { margin:0; }
.accesso #bTema { position:fixed; top:12px; right:12px; }

@media print {
  body { display:block; overflow:visible; }
  #testata, #colonnaLavori, #vista, #tavola, .linguette, .rigaTitolo > :not(.titolo), #schedeComponenti, .fissa, #velo { display:none !important; }
  #corpo { display:block; } #lato { border:0; } .linguetta { overflow:visible; }
}