/* Ampero × Neuma Sax Quartet — configuratore di bocchini.
   Tutti i colori passano da variabili: il tema scuro ridefinisce solo quelle (blocco [data-tema="scuro"]).
   L'accento è l'oro del Neuma Sax Quartet (#C9A84C, scurito sul tema chiaro per la leggibilità); l'arancione Ampero resta nel solo logo.

   Scala (la stessa di mdm, 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 note · 13 controlli · 14 testo · 16 titoli · 20 schermate vuote
     altezze    32 px i controlli · 28 px quelli sopra il 3D e dentro le righe dei parametri
     ombre      solo su ciò che galleggia (menu, barre sopra il 3D, fumetti ⓘ) e sui pannelli che si aprono */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');
:root {
  color-scheme: light;
  --p:#8a6a1f; --pForte:#735816; --pSu:#fff;                 /* accento pieno (bottoni) e testo sopra */
  --pTesto:#7a5c14;                                          /* accento usato come testo o contorno */
  --pTenue:#f8f2e2; --pBordo:#e2d2a4; --pAlone:rgba(201,168,76,.32);
  --oro:#C9A84C;                                             /* oro Neuma: marchio e dettagli */
  --fondo:#f1f0ec; --pannello:#fff; --incavo:#f7f6f3; --rialzo:#fff;
  --bordo:#e0ddd4; --bordoTenue:#ebe8e0; --bordoForte:#cdc8bb;
  --testo:#1d1b17; --tenue:#635d52; --spento:#aaa59a;
  --ok:#1b5e20; --okFondo:#e7f5e9; --ko:#8c1d18; --koFondo:#fdecea; --koBordo:#f3b4ad;
  --av:#7a5200; --avFondo:#fff3d6; --info:#0b3d91; --infoFondo:#e9f0ff;
  --ombraFlottante:0 2px 8px rgb(30 24 10 / 10%); --ombraPannello:0 16px 40px rgb(30 24 10 / 20%);
  --r1:6px; --r2:10px; --r3:14px;
  --scena1:#fbfaf7; --scena2:#e3e0d8;                        /* fondo del visualizzatore 3D (sfumatura) */
  --pezzo:#34302b;                                           /* ebanite nera */
  --spigoli:#8b8478; --taglioFondo:#efe6cf; --taglioLinea:#a8893f;
  --asseX:#c94a4a; --asseY:#2f8f57; --asseZ:#2f62c9;
  --cuboFaccia:#f7f6f2; --cuboBordo:#cdc8bb; --cuboTesto:#3a3630;
  --velo:rgba(29,27,23,.42);
  --colonna:264px;
  --lato:clamp(360px, 28vw, 430px);                          /* larghezza del pannello dei parametri */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
:root[data-tema="scuro"] {
  color-scheme: dark;
  --p:#C9A84C; --pForte:#dfc27a; --pSu:#1a1406;
  --pTesto:#dfc27a;
  --pTenue:#2a2312; --pBordo:#5a4a20; --pAlone:rgba(201,168,76,.32);
  --fondo:#0c0c0b; --pannello:#151513; --incavo:#10100f; --rialzo:#1c1c19;
  --bordo:#2a2925; --bordoTenue:#222120; --bordoForte:#3b3933;
  --testo:#ecebe6; --tenue:#a3a094; --spento:#5e5b53;
  --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:#1a1916; --scena2:#090908;
  --pezzo:#4a453e;
  --spigoli:#6f6a60; --taglioFondo:#3a3220; --taglioLinea:#b8964a;
  --asseX:#ff7a7a; --asseY:#6fd39a; --asseZ:#7ea6ff;
  --cuboFaccia:#24231f; --cuboBordo:#45423a; --cuboTesto:#e2dfd6;
  --velo:rgba(0,0,0,.58);
}

* { 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) minmax(0,1fr) var(--lato); grid-template-rows:60px minmax(0,1fr); overflow:hidden; }
[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:16px 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 (gli stessi di mdm) */
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); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--pAlone); border-color:var(--pTesto); }
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); }
.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; }

/* ---------------------------------------------------------------- testata e marchi */
#testata { grid-column:1 / 4; 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:14px; 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 .per { font-size:20px; color:var(--testo); font-weight:700; line-height:1; }
/* Neuma Sax Quartet: il loro marchio è tipografico (lo stesso del sito neumasaxquartet.it) */
.neuma { display:flex; flex-direction:column; gap:2px; line-height:1; }
.neuma b { font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.12em; text-transform:uppercase; color:var(--testo); white-space:nowrap; }
.neuma span { font-size:8.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--oro); font-weight:600; white-space:nowrap; padding-left:1px; }
.titoloApp { margin-left:16px; padding-left:16px; border-left:1px solid var(--bordo); font-size:13px; color:var(--tenue); white-space:nowrap; }

/* ---------------------------------------------------------------- colonna dei modelli salvati */
#colonna { background:var(--pannello); border-right:1px solid var(--bordo); display:flex; flex-direction:column; min-height:0; min-width:0; }
#colonna .testa { padding:12px; border-bottom:1px solid var(--bordoTenue); display:flex; flex-direction:column; gap:8px; }
#colonna .testa button { width:100%; }
#cercaModelli { width:100%; }
#elenco { flex:1; overflow-y:auto; padding:8px 12px 16px; scrollbar-width:thin; }
#elenco h2 { margin-top:8px; display:flex; justify-content:space-between; }
.voce { position:relative; border:1px solid var(--bordo); border-radius:var(--r2); padding:8px 40px 8px 8px; margin-bottom:8px; cursor:pointer; background:var(--rialzo);
        transition:border-color .12s, box-shadow .12s; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; align-items:center; }
.voce:hover { border-color:var(--bordoForte); }
.voce:focus-visible { outline:2px solid var(--pAlone); border-color:var(--pTesto); }
.voce.scelto { border-color:var(--pTesto); box-shadow:0 0 0 3px var(--pAlone); }
.voce .num { grid-row:1 / 3; min-width:40px; height:40px; padding:0 6px; border-radius:var(--r1); background:var(--pTenue); color:var(--pTesto); border:1px solid var(--pBordo);
             display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.voce .n { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voce .t { font-size:12px; color:var(--tenue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cestino { position:absolute; top:50%; transform:translateY(-50%); right:6px; width:28px; min-height:28px; padding:0; border-color:transparent; background:transparent; color:var(--spento); }
.voce:hover .cestino { color:var(--tenue); }
.cestino:hover:not(:disabled) { background:var(--koFondo); border-color:var(--koBordo); color:var(--ko); }

/* ---------------------------------------------------------------- centro: barra del modello e 3D */
#centro { min-width:0; min-height:0; display:flex; flex-direction:column; }
#barra { display:flex; align-items:center; gap:8px; padding:6px 16px; min-height:52px; background:var(--pannello); border-bottom:1px solid var(--bordo); }
#barra > * { flex:none; }
#barra .titolo { display:flex; flex-direction:column; flex:0 1 auto; min-width:0; }
#barra .titolo h1, #barra .titolo .nota { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#barra .spazio { flex:1; }
.pallino { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--oro); margin-left:6px; vertical-align:middle; }

#vista { position:relative; flex:1; 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:160px; min-width:56px; }
@container (max-width: 600px) { #pannelloSezione { top:104px; } }
#pannelloSezione output { min-width:84px; 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(30 24 10 / 10%)); }
#terna { position:absolute; right:8px; bottom:4px; z-index:4; pointer-events:none; }
#misure { position:absolute; left:12px; bottom:12px; z-index:5; display:flex; flex-wrap:wrap; gap:4px; max-width:calc(100% - 110px); }
#misure .cifra { background:var(--pannello); border:1px solid var(--bordo); border-radius:var(--r2); padding:4px 10px; box-shadow:var(--ombraFlottante); }
#misure .e { font-size:10px; color:var(--tenue); text-transform:uppercase; letter-spacing:.04em; display:block; }
#misure .v { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
#stato3d { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:8px; padding:4px 12px; font-size:12px;
           background:var(--pannello); border:1px solid var(--bordo); border-radius:999px; box-shadow:var(--ombraFlottante); color:var(--tenue); }
#stato3d::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--oro); animation:battito 1.2s 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); } }
#avvisi { position:absolute; left:12px; right:120px; bottom:68px; z-index:5; display:flex; flex-direction:column; align-items:flex-start; gap:4px; pointer-events:none; }
#avvisi .esito { margin:0; box-shadow:var(--ombraFlottante); pointer-events:auto; max-width:560px; }
#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; }

/* ---------------------------------------------------------------- destra: parametri */
#lato { background:var(--pannello); border-left:1px solid var(--bordo); display:flex; flex-direction:column; min-height:0; min-width:0; }
#lato .testa { padding:12px 16px; border-bottom:1px solid var(--bordoTenue); display:flex; flex-direction:column; gap:8px; }
#lato .testa h2 { margin:0; }
#tipiSax { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
#tipiSax button { padding:0 4px; }
#preset { display:flex; flex-wrap:wrap; gap:4px; }
#preset:empty { display:none; }
.chip { min-height:26px; padding:0 10px; font-size:12px; border-radius:999px; }
#parametri { flex:1; min-height:0; overflow-y:auto; padding:12px 16px 24px; scrollbar-gutter:stable; scrollbar-width:thin; }
details.gruppo { border:1px solid var(--bordoTenue); border-radius:var(--r2); margin-bottom:8px; }
details.gruppo > summary { display:flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; cursor:pointer; list-style:none; user-select:none; border-radius:var(--r2); }
details.gruppo > summary::-webkit-details-marker { display:none; }
details.gruppo > summary::before { content:"▸"; color:var(--tenue); font-size:11px; transition:transform .12s; }
details.gruppo[open] > summary::before { transform:rotate(90deg); }
details.gruppo > summary:hover { background:var(--incavo); }
details.gruppo .t { font-size:13px; font-weight:600; }
details.gruppo .conta { margin-left:auto; font-size:11px; font-weight:600; color:var(--pTesto); }
details.gruppo .dentro { padding:2px 8px 8px 12px; }
.param { display:grid; grid-template-columns:minmax(0,1fr) 108px 28px; gap:6px; align-items:center; min-height:38px; padding:2px 0; }
.param + .param { border-top:1px solid var(--bordoTenue); }
.param .nome { font-size:12.5px; line-height:1.25; min-width:0; }
.param .nome small { display:block; font-size:11px; color:var(--spento); font-variant-numeric:tabular-nums; }
.param .valore { display:flex; align-items:center; border:1px solid var(--bordoForte); border-radius:var(--r1); background:var(--rialzo); overflow:hidden; }
.param .valore:focus-within { outline:2px solid var(--pAlone); border-color:var(--pTesto); }
.param .valore input { border:0; outline:0; min-height:28px; width:100%; min-width:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; padding:0 4px; background:transparent; }
.param .valore span { font-size:11px; color:var(--tenue); padding:0 6px 0 2px; }
.param.modificato .valore { border-color:var(--pTesto); background:var(--pTenue); }
.param.sbagliato .valore { border-color:var(--ko); background:var(--koFondo); }
.param.sbagliato .nome { color:var(--ko); }
button.info { width:26px; min-height:26px; padding:0; border-radius:999px; font:italic 700 14px/1 Georgia, serif; color:var(--pTesto); border-color:var(--pBordo); background:var(--pTenue); }
button.info:hover:not(:disabled), button.info.aperto { background:var(--p); border-color:var(--p); color:var(--pSu); }
#lato .piede { padding:12px 72px 12px 16px; border-top:1px solid var(--bordo); display:flex; gap:8px; align-items:center; }

/* ---------------------------------------------------------------- fumetto ⓘ */
#fumetto { position:fixed; z-index:60; width:min(460px, calc(100vw - 24px)); max-height:min(84vh, 720px); overflow-y:auto; background:var(--pannello);
           border:1px solid var(--bordo); border-radius:var(--r3); box-shadow:var(--ombraPannello); padding:16px; scrollbar-width:thin; }
#fumetto .testaF { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
#fumetto .testaF > div { flex:1; min-width:0; }
#fumetto .disegno { border:1px solid var(--bordoTenue); border-radius:var(--r2); background:var(--incavo); margin:0 0 4px; padding:8px; }
#fumetto .disegno svg { display:block; width:100%; height:auto; }
#fumetto h3 { font-size:11px; font-weight:700; color:var(--pTesto); text-transform:uppercase; letter-spacing:.05em; margin:12px 0 4px; }
#fumetto p { margin:0; font-size:13px; }
#fumetto .fonti { margin-top:12px; font-size:11px; color:var(--tenue); overflow-wrap:anywhere; }
#fumetto .fonti a { color:var(--tenue); }

/* ---------------------------------------------------------------- finestre */
dialog { border:1px solid var(--bordo); border-radius:var(--r3); background:var(--pannello); color:var(--testo); padding:24px; width:min(440px, 94vw);
         box-shadow:var(--ombraPannello); }
dialog::backdrop { background:var(--velo); }
dialog h1 { margin-bottom:8px; }
dialog p { margin:0; }
dialog .fila { margin-top:20px; }
dialog label { font-size:12px; color:var(--tenue); display:flex; flex-direction:column; gap:4px; margin-top:12px; }
dialog input { font-size:14px; min-height:36px; }
dialog .esito { margin:12px 0 0; }
button.pericolo { background:var(--ko); border-color:var(--ko); color:#fff; font-weight:600; }
button.pericolo:hover:not(:disabled) { background:var(--ko); border-color:var(--ko); filter:brightness(1.12); }
.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); }
#notifica { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:70; box-shadow:var(--ombraPannello); margin:0; }

/* ---------------------------------------------------------------- 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(440px, 100%);
                box-shadow:var(--ombraPannello); display:flex; flex-direction:column; gap:12px; }
.accesso .loghi { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 8px; }
.accesso .loghi img { display:block; height:28px; }
.accesso .neuma b { font-size:16px; letter-spacing:.1em; }
.accesso .neuma span { font-size:7.5px; letter-spacing:.26em; }
.accesso .loghi .per { font-size:20px; color:var(--testo); font-weight:700; line-height:1; }
.accesso .titolo { text-align:center; font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:.02em; line-height:1.1; }
.accesso .sotto { text-align:center; margin:-6px 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; }

/* schermi più stretti: la colonna dei modelli si restringe, i parametri restano interi */
@media (max-width: 1240px) { :root { --colonna:220px; } .titoloApp { display:none; } }