/* Un foglio solo, niente JavaScript. Si usa anche da tablet. */
:root { --testo: #1d1d1f; --tenue: #6b6b70; --riga: #e3e3e6;
        --sfondo: #fbfbfd; --accento: #1c4f8b; --male: #a3202a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--sfondo); color: var(--testo);
       font: 17px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center;
         gap: 1rem; padding: .8rem 1rem; background: #fff;
         border-bottom: 1px solid var(--riga); }
.marchio { font-weight: 600; color: var(--testo); text-decoration: none; }
.esci { display: flex; align-items: center; gap: .6rem; margin: 0;
        color: var(--tenue); font-size: .9rem; }
.esci button { padding: .35rem .8rem; font-size: .9rem; }
main { max-width: 46rem; margin: 0 auto; padding: 1.2rem 1rem 4rem; }
h1 { font-size: 1.5rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .6rem; color: var(--tenue);
     text-transform: uppercase; letter-spacing: .04em; }
form { margin: 1.2rem 0; }
label { display: block; margin-bottom: .3rem; font-weight: 600; }
input[type=email], input[type=text], textarea {
  width: 100%; padding: .7rem; font: inherit; background: #fff;
  border: 1px solid #c4c4c8; border-radius: 8px; }
button { font: inherit; padding: .7rem 1.2rem; border: 0; border-radius: 8px;
         background: var(--accento); color: #fff; cursor: pointer; }
button.grande { width: 100%; padding: 1rem; font-size: 1.1rem; }
table { width: 100%; border-collapse: collapse; background: #fff;
        border: 1px solid var(--riga); border-radius: 8px; overflow: hidden; }
th, td { padding: .5rem .7rem; text-align: left;
         border-bottom: 1px solid var(--riga); }
th { background: #f4f4f6; font-size: .85rem; color: var(--tenue); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.totale td { font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.esito-errore { color: var(--male); font-weight: 600; }
.piede { color: var(--tenue); font-size: .85rem; margin-top: 2rem; }
.avviso-sviluppo { margin: 0; padding: .6rem 1rem; background: #fff3cd;
                   border-bottom: 1px solid #e0cd8a; color: #6a5200;
                   font-size: .9rem; }
a { color: var(--accento); }
.quante { color: var(--tenue); font-size: .9rem; margin: 0 0 .5rem; }
dl.odoo, dl.sito { display: grid; grid-template-columns: 11rem 1fr; gap: .3rem 1rem;
  background: #fff; border: 1px solid var(--riga); border-radius: 8px; padding: .8rem; }
dl dt { color: var(--tenue); font-size: .85rem; }
dl dd { margin: 0; }
code { background: #f2f2f5; padding: .1rem .35rem; border-radius: 4px;
       font-size: .95em; word-break: break-word; }
.fascia { padding: .5rem .8rem; border-radius: 8px; margin: .5rem 0; }
.fascia-alta { background: #e4f4e6; border: 1px solid #9ccfa4; }
.fascia-media { background: #fff3cd; border: 1px solid #e0cd8a; }
.fascia-bassa { background: #fae3e4; border: 1px solid #d79ba1; }
.fascia-nessuna { background: #f2f2f5; border: 1px solid var(--riga); }
.motivo { color: var(--tenue); font-size: .92rem; }
.spento { background: #fff3cd; border: 1px solid #e0cd8a; border-radius: 8px;
          padding: .7rem .9rem; }
.anteprima { background: #fff; border: 1px solid var(--riga); border-radius: 8px;
             padding: .8rem; }
.altri-pulsanti { display: flex; gap: .8rem; }
.altri-pulsanti form { margin: 0; flex: 1; }
button.secondario { width: 100%; background: #fff; color: var(--testo);
                    border: 1px solid #c4c4c8; }
button[disabled] { opacity: .45; cursor: not-allowed; }
.messaggi { list-style: none; margin: 0 0 1rem; padding: .7rem .9rem;
            background: #e8eef7; border: 1px solid #b5c7e0; border-radius: 8px; }
.vai-alla-coda { font-weight: 600; }
.grave { background: #fae3e4; border: 1px solid #d79ba1; border-radius: 8px;
         padding: .8rem .9rem; }
.non-sicuro { color: var(--tenue); word-break: break-all; }