/* Area admin: stessi colori del brand Novaservice usati nel viewer. */
:root{
  --rosso:#E63329; --verde:#76B82A; --verde-scuro:#005422;
  --fondo:#f2f2f0; --carta:#fff; --testo:#1c1c1c; --grigio:#6b6b6b; --bordo:#dcdcd8;
  --avviso-fondo:#fff6dc; --avviso-bordo:#d9a400;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fondo);color:var(--testo);font:15px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100vh}
a{color:var(--verde-scuro)}
a:hover{color:var(--verde)}
:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}

.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--carta);border-bottom:1px solid var(--bordo)}
.marchio{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--testo)}
.marchio img{height:24px;display:block}
.marchio span{border-left:1px solid var(--bordo);padding-left:14px;font-size:14px;font-weight:600;letter-spacing:.2px}

main{max-width:980px;margin:0 auto;padding:32px 24px 64px}
h1{font-size:24px;line-height:1.25;margin-bottom:6px;overflow-wrap:anywhere}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--grigio);margin-bottom:14px}
.sotto{color:var(--grigio);margin-bottom:24px}
.briciole{font-size:13px;margin-bottom:10px}
.intestazione{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}

.pannello{background:var(--carta);border:1px solid var(--bordo);border-radius:4px;padding:22px 24px;margin-bottom:20px}
.pannello.stretto{max-width:420px;margin:48px auto}
.codice{font-size:13px;font-weight:700;color:var(--rosso);letter-spacing:.6px}
.nota{font-size:13px;color:var(--grigio);margin-top:8px}
.vuoto{color:var(--grigio);padding:32px 0}

.primario,.secondario,.pulsante{display:inline-block;padding:10px 18px;border-radius:2px;font:inherit;font-size:13px;font-weight:600;letter-spacing:.3px;cursor:pointer;white-space:nowrap;text-decoration:none;border:1px solid var(--verde-scuro)}
.primario{background:var(--verde-scuro);color:#fff}
.primario:hover{background:var(--verde);border-color:var(--verde);color:#fff}
.secondario{background:var(--carta);color:var(--verde-scuro)}
.secondario:hover{border-color:var(--verde);color:var(--verde)}

.modulo{display:grid;gap:18px}
.modulo label{display:grid;gap:6px;font-size:13px;font-weight:600}
.modulo small{font-weight:400;color:var(--grigio)}
input[type=text],input[type=password],input:not([type]),select,textarea{width:100%;padding:10px 12px;border:1px solid var(--bordo);border-radius:2px;font:inherit;font-size:15px;background:var(--carta);color:var(--testo)}
input[type=file]{font:inherit;font-size:14px}
.modulo button{justify-self:start}
.pannello > .modulo{margin-top:16px}

.errore{background:#fdecea;border-left:4px solid var(--rosso);padding:12px 16px;margin-bottom:18px;font-size:14px}
.errore ul{margin:6px 0 0 18px}
.avviso{background:var(--avviso-fondo);border-left:4px solid var(--avviso-bordo);padding:10px 14px;margin-top:10px;font-size:13.5px}
.avviso strong{display:block;margin-bottom:2px}

.tabella{overflow-x:auto;background:var(--carta);border:1px solid var(--bordo);border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--bordo);white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--grigio);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td.titolo{white-space:normal;min-width:180px}

.stato{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.2px}
.stato.ok{background:#e6f3dc;color:var(--verde-scuro)}
.stato.modifiche{background:#fdecea;color:#b0241c}
.stato.attesa{background:#ececea;color:var(--grigio)}
.stato.attenzione{background:var(--avviso-fondo);color:#7a5c00}
.conferma{background:#e6f3dc;border-left:4px solid var(--verde-scuro);padding:12px 16px;margin-bottom:18px;font-size:14px}
.pannello.spaziato{margin-top:20px}
.destra{display:flex;align-items:center;gap:18px}
.voce{font-size:14px;font-weight:600;text-decoration:none}

.link{display:flex;gap:10px}
.link input{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.versioni{list-style:none}
.versioni li{padding:16px 0;border-top:1px solid var(--bordo)}
.versioni li:first-child{border-top:0;padding-top:0}
.versioni .riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.versioni .data{color:var(--grigio);font-size:13px}
.versioni .file{font-size:13px;margin-top:6px}
.esito-nota{margin-top:8px;font-size:14px}
.esito-nota q{display:block;margin-top:4px;padding-left:12px;border-left:3px solid var(--bordo);white-space:pre-line;quotes:none;overflow-wrap:anywhere}

@media (max-width:640px){
  .barra{gap:10px}
  .destra{gap:12px}
  th,td{white-space:normal;padding:10px 12px}
  td.titolo{min-width:0}
  .barra{padding:12px 16px}
  main{padding:24px 16px 48px}
  .link{flex-direction:column}
}

/* telefoni stretti: solo il logo, così Sistema ed Esci stanno nella barra */
@media (max-width:480px){
  .marchio span{display:none}
  .marchio img{height:20px}
}

.riga-filtri{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin-top:14px}
.riga-filtri label{display:grid;gap:6px;font-size:13px;font-weight:600}
.riga-filtri .spunta{display:flex;align-items:center;gap:8px}
.guida{margin-bottom:24px}
.guida .intestazione{margin-bottom:10px}
.guida svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--bordo)}

/* Tipologie: anteprima 3D della fustella stesa; [hidden] vince sulle classi che impostano display */
[hidden]{display:none!important}
.anteprima-stesa{display:block;width:100%;height:420px;border:1px solid var(--bordo);background:#f2f2f0}
.avviso.blocco{margin:0 0 20px}
@media (max-width:640px){.anteprima-stesa{height:300px}}

/* Importa fustella */
.riga-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
#importa label{display:grid;gap:6px;font-size:13px;font-weight:600}
#importa small{font-weight:400;color:var(--grigio)}
.disegno{margin-top:16px;border:1px solid var(--bordo);background:#fff;max-height:60vh;overflow:auto}
.disegno svg{display:block;width:100%;height:auto}
.legenda{margin-top:16px;display:grid;gap:10px}
.legenda select{width:auto;padding:6px 8px;font-size:14px}
.campione{display:inline-block;width:14px;height:14px;border:1px solid var(--bordo);vertical-align:-2px;margin-right:8px}
.avvisi{margin:0 0 16px 18px;font-size:14px;color:#7a5c00}
.avvisi:empty{display:none}
.parte-trovata{margin:0 0 18px}
.parte-trovata figcaption{font-size:13px;margin-bottom:6px}
.parte-trovata svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--bordo)}
.campi-salva{display:grid;gap:18px}
.campi-salva button{justify-self:start}
#nomi-parti{display:grid;gap:14px}
.scelta-pagina{margin-top:14px;max-width:240px}
.opzioni-import{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:6px}
.campo-mm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:400}
.campo-mm input{width:5.5em}
.campo-mm select{width:auto}
.parte-trovata figcaption .piccolo{margin-left:8px}
.parte-trovata.esclusa svg{opacity:.3}
.parte-trovata.esclusa figcaption{color:var(--grigio)}

/* Editor del montaggio */
main:has(#editor){max-width:1440px}
.editor{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
.editor-scena{position:sticky;top:12px;display:grid;gap:10px}
.editor-scena canvas{display:block;width:100%;height:min(70vh,640px);border:1px solid var(--bordo);background:#f2f2f0}
.stati{display:flex;flex-wrap:wrap;gap:8px}
.stati .attivo{background:var(--verde-scuro);border-color:var(--verde-scuro);color:#fff}
.editor-sezioni .pannello{margin-bottom:14px}
.editor-sezioni h3{font-size:13px;margin:14px 0 6px}
.editor-sezioni label{display:inline-grid;gap:4px;font-size:13px;font-weight:600;margin:4px 12px 4px 0}
.editor-sezioni label.spunta{display:flex;align-items:center;gap:8px}
.editor-sezioni fieldset{border:1px solid var(--bordo);border-radius:4px;padding:10px 12px;margin-top:12px}
.editor-sezioni legend{font-size:12px;font-weight:600;color:var(--grigio);padding:0 4px}
.editor-sezioni input.corto{width:84px}
.editor-sezioni select{width:auto}
.azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.schede{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.piccolo{padding:5px 10px;font-size:12px}
.disegno-parte svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--bordo);margin-top:10px}
.disegno-parte polygon,.disegno-parte .cliccabile{cursor:pointer}
table.pieghe td{white-space:normal}
table.pieghe tr.scelta td{background:#fbe3e1}
.elenco{list-style:none;display:grid;gap:8px}
.mancano{color:#7a5c00}
details.pannello summary{cursor:pointer;font-weight:600}
@media (max-width:900px){.editor{grid-template-columns:1fr}.editor-scena{position:static}}
.editor button:disabled{opacity:.45;cursor:not-allowed}

/* Grafiche della bozza: un campo per parte stampata */
.grafiche{display:grid;gap:18px}

/* Grafica a foglio intero: scelta del modo e anteprima dei ritagli */
.modo-grafiche select{width:auto}
.ritagli{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.ritagli figure{margin:0}
.ritagli img{display:block;max-width:240px;max-height:150px;border:1px solid var(--bordo);background:#fff}
.ritagli figcaption{font-size:12px;color:var(--grigio);margin-top:4px}

/* Elimina bozza */
.conferma{display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:400}
.conferma input{margin-top:3px}
.pericolo{border-color:var(--rosso);color:var(--rosso)}
.pericolo:hover{background:var(--rosso);color:#fff;border-color:var(--rosso)}