/* Ordis — foglio di stile unico. Tema "neon ciano".

   Fondo di notte blu, un ciano elettrico per tutto quello che si può
   fare, un magenta per quello che va guardato adesso. Il bagliore sta
   sui bordi e sugli accenti, mai sul testo e mai sulle cifre: una
   colonna di importi che brilla non si ricontrolla.

   Dal marchio RG Creations restano i quattro angoli di inquadratura,
   che qui ritagliano i totali e i numeri che contano.

   Sul buio i ruoli dei colori si separano: il testo è chiaro, mentre
   bordi, barre e intestazioni vogliono tinte più scure del fondo delle
   schede. Per questo accanto a --inchiostro (il testo) ci sono
   --bordo-forte, --nav-fondo e --su-accento, che nel tema chiaro
   coincidevano tutti col nero.

   Nessuna risorsa esterna: il CSP del server le vieta. */

:root {
    --inchiostro: #e6f1ff;
    --carta: #0d1322;
    --fondo: #070b14;
    --fondo-cupo: #101829;
    --grafite: #7e93b4;
    --riga: #1d2b45;
    --bordo-forte: #2b3d5c;
    --nav-fondo: #05080f;
    --su-accento: #04121a;

    --blu: #00e5ff;
    --blu-cupo: #5cf0ff;
    --blu-velo: #07202b;
    --marcatore: #ff2d95;
    --verde: #2ee6a8;
    --allarme: #ff5c7a;
    --allarme-velo: #2a0f18;

    --bagliore: 0 0 14px rgba(0, 229, 255, 0.45);
    --bagliore-forte: 0 0 22px rgba(0, 229, 255, 0.6);
    --bagliore-magenta: 0 0 14px rgba(255, 45, 149, 0.45);

    /* Una sola famiglia, senza grazie, quella dell'interfaccia del
       dispositivo: niente da scaricare, niente CDN. Titoli e testo si
       distinguono per peso e spaziatura, non per famiglia. */
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Helvetica, Arial, sans-serif;
    --titolo: var(--sans);
    --testo: var(--sans);

    --passo: 1.5rem;
    --larghezza: 62rem;
    /* Al posto del rilievo stampato del tema chiaro, un alone: sul buio
       un'ombra nera non si vedrebbe. */
    --rilievo: var(--bagliore);
    --rilievo-piccolo: 0 0 10px rgba(0, 229, 255, 0.28);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    background-image:
        radial-gradient(circle at 12% -10%, rgba(0, 229, 255, 0.10), transparent 45%),
        radial-gradient(circle at 92% 2%, rgba(255, 45, 149, 0.08), transparent 40%);
    background-attachment: fixed;
    color: var(--inchiostro);
    font-family: var(--testo);
    font-size: 1.0625rem;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, th, .etichetta, button, .bottone, nav a, label {
    font-family: var(--titolo);
}

h1 {
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin: 0 0 1.1rem;
}

h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 2.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--blu);
}

h3 {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 1.75rem 0 0.6rem;
    color: var(--grafite);
}

p { margin: 0 0 1rem; max-width: 68ch; }

a { color: var(--blu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blu-cupo); text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--blu);
    outline-offset: 2px;
}

/* --- Impalcatura ------------------------------------------------------ */

.pagina { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--passo) 4rem; }

.testata {
    border-bottom: 1px solid var(--riga);
    background: var(--carta);
}

.testata-dentro {
    max-width: var(--larghezza);
    margin: 0 auto;
    padding: 1.3rem var(--passo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.marchio { display: flex; align-items: center; gap: 1rem; min-width: 0; }
/* Il logo caricato dal cliente e' quasi sempre nero su trasparente: su
   questo fondo sparirebbe. Gli si mette sotto un cartoncino chiaro,
   come una targhetta applicata. */
.marchio img {
    display: block;
    max-height: 46px;
    max-width: 170px;
    width: auto;
    background: #ffffff;
    padding: 0.3rem 0.45rem;
    border-radius: 3px;
}
/* Il nostro marchio invece e' gia' bianco su trasparente: niente
   targhetta, sta direttamente sul fondo di notte. */
.marchio img.marchio-rg {
    background: none;
    padding: 0;
    max-height: 40px;
}
.marchio .nome {
    font-family: var(--titolo);
    font-weight: 800;
    letter-spacing: -0.035em;
    font-size: 1.15rem;
    line-height: 1.1;
    display: block;
}
.marchio .sotto {
    font-size: 0.78rem;
    color: var(--grafite);
    font-family: var(--titolo);
    font-weight: 600;
    letter-spacing: 0.02em;
    display: block;
}

nav.barra {
    background: var(--nav-fondo);
    border-bottom: 1px solid var(--riga);
}
nav.barra ul {
    max-width: var(--larghezza);
    margin: 0 auto;
    padding: 0 var(--passo);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
nav.barra a {
    display: block;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--grafite);
    border-bottom: 3px solid transparent;
}
nav.barra li:first-child a { padding-left: 0; }
nav.barra a:hover { color: var(--inchiostro); }
nav.barra a.qui {
    color: var(--blu);
    background: transparent;
    border-bottom-color: var(--blu);
    text-shadow: var(--bagliore);
}
nav.barra li:first-child a.qui { padding-left: 1rem; margin-left: -1rem; }
nav.barra .conteggio {
    font-family: var(--testo);
    font-variant-numeric: tabular-nums;
    background: var(--marcatore);
    color: #ffffff;
    padding: 0 0.4rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    font-size: 0.82rem;
}
nav.barra a.qui .conteggio { background: var(--blu); color: var(--su-accento); }

/* --- Schede dentro una sezione ---------------------------------------- */

/* Non e' un secondo menu': sta dentro la pagina, quindi non prende il
   fondo scuro della barra ma solo un filetto sotto. */
.schede {
    margin: 1.2rem 0 0;
    border-bottom: 1px solid var(--riga);
}
.schede ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.schede a {
    display: block;
    padding: 0.55rem 0.9rem;
    font-family: var(--titolo);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--grafite);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.schede li:first-child a { padding-left: 0; }
.schede a:hover { color: var(--inchiostro); }
.schede a.qui { color: var(--blu); border-bottom-color: var(--blu); }
/* La scelta del periodo e' una parola, non un campo da riempire: un
   menu a tendina largo quanto la pagina prometterebbe altro. */
.riga-azioni.periodo select { width: auto; min-width: 11rem; }

/* --- Il mirino: il dispositivo preso dal marchio ---------------------- */

.mirino {
    position: relative;
    background: var(--carta);
    padding: 1.7rem 1.85rem;
    margin: 1.5rem 0;
    border: 1px solid var(--riga);
    border-radius: 4px;
    box-shadow: var(--rilievo-piccolo);
}
.mirino::before, .mirino::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--blu);
}
.mirino::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.mirino::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.mirino.doppio { padding: 2rem; }

/* --- Numeri del cruscotto --------------------------------------------- */

.numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
.numeri li {
    position: relative;
    background: var(--carta);
    padding: 1.45rem 1.55rem;
    border: 1px solid var(--riga);
    border-radius: 4px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.numeri li:hover {
    transform: translate(-2px, -2px);
    border-color: var(--blu);
    box-shadow: var(--bagliore);
}
.numeri li::before {
    content: "";
    position: absolute;
    top: 5px; left: 5px;
    width: 14px; height: 14px;
    border: 2px solid var(--blu);
    border-right: 0; border-bottom: 0;
}
.numeri a { text-decoration: none; display: block; color: inherit; }
.numeri .cifra {
    font-family: var(--titolo);
    font-size: 2.9rem;
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1;
    display: block;
    color: var(--blu);
}
.numeri .cosa {
    font-family: var(--titolo);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--grafite);
    display: block;
    margin-top: 0.4rem;
}
.numeri li.urgente { background: var(--allarme-velo); border-color: var(--allarme); }
.numeri li.urgente .cifra { color: var(--allarme); }
.numeri li.urgente::before { border-color: var(--allarme); }
.numeri li.acceso { border-color: var(--marcatore); box-shadow: var(--bagliore-magenta); }
.numeri li.acceso .cifra { color: var(--marcatore); }
.numeri li.acceso::before { border-color: var(--marcatore); }
/* Un importo non e' un conteggio: in cifre da conteggio andrebbe a capo. */
.numeri .cifra.importo { font-size: 1.95rem; letter-spacing: -0.03em; }

/* --- Elenchi: righe con filetto, non riquadri ------------------------- */

.elenco { list-style: none; margin: 1rem 0 0; padding: 0; }
/* Il testo ha una colonna sua, larga ma non elastica: cosi' il prezzo
   gli sta accanto invece di finire schiacciato contro il bordo destro,
   e resta comunque incolonnato da una riga all'altra, che e' quello che
   serve per confrontare due articoli con un'occhiata. */
.elenco > li {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: flex-start;
    padding: 1.15rem 0.9rem;
    border-bottom: 1px solid var(--riga);
    flex-wrap: wrap;
    transition: background 0.12s ease;
}
.elenco > li:hover { background: var(--carta); }
.elenco > li:first-child { border-top: 1px solid var(--bordo-forte); }
.elenco .corpo { flex: 0 1 24rem; min-width: 0; }
.elenco .nome { font-weight: 700; font-size: 1.08rem; }
.elenco .dettaglio { color: var(--grafite); font-size: 0.95rem; margin: 0.25rem 0 0; }
.elenco .dettaglio.listino {
    color: var(--blu);
    font-family: var(--titolo);
    font-size: 0.85rem;
    font-weight: 600;
}
.elenco .azione { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.elenco .azione label { margin: 0; white-space: nowrap; }
/* Allineato a destra nel suo spazio: le cifre si leggono per colonna,
   unita' e decimali uno sotto l'altro. */
.elenco .prezzo {
    font-weight: 700;
    white-space: nowrap;
    font-size: 1.1rem;
    min-width: 8.5rem;
    text-align: right;
}
.elenco .prezzo .minuto { font-weight: 600; }

/* --- Il catalogo con le foto ------------------------------------------
   Qui la riga non e' piu' una fila: il nome prende la riga intera, sotto
   la foto sta a sinistra e la descrizione le scorre intorno — e' un
   float, il comportamento di sempre del testo attorno a un'immagine. */
.elenco.catalogo > li {
    display: block;
    padding: 1.4rem 0.9rem;
}
.catalogo .nome {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 0.7rem;
    line-height: 1.25;
}
/* Il float esce dal suo contenitore se non lo si chiude: senza questo,
   la riga successiva salirebbe accanto alla foto. */
.scheda::after { content: ""; display: block; clear: both; }
.scheda .foto {
    position: relative;
    float: left;
    display: block;
    width: 13rem;
    margin: 0.2rem 1.1rem 0.7rem 0;
    line-height: 0;
    border: 1px solid var(--riga);
    border-radius: 4px;
    overflow: hidden;
    background: var(--fondo-cupo);
}
.scheda .foto img { display: block; width: 100%; height: auto; }
.scheda .foto:hover { border-color: var(--blu); box-shadow: var(--rilievo-piccolo); }
.scheda .foto .quante {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    background: var(--nav-fondo);
    color: var(--inchiostro);
    font-family: var(--titolo);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    border-radius: 3px;
}
.catalogo .scheda .dettaglio { margin: 0 0 0.5rem; }
/* La riga del prezzo sta sempre sotto la foto, mai di fianco. */
.catalogo .azione {
    clear: both;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

/* La galleria, senza una riga di JavaScript: il riquadro si accende
   quando l'indirizzo della pagina punta a lui, e le frecce sono
   collegamenti alla foto prima e dopo. */
.galleria { display: none; }
.galleria:target {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 3.6rem 1rem;
    background: rgba(3, 6, 12, 0.93);
}
/* Un velo cliccabile dietro la foto: fuori dall'immagine si chiude. */
.galleria .fondo { position: absolute; inset: 0; }
.galleria figure {
    position: relative;
    margin: 0;
    max-width: 58rem;
    text-align: center;
}
.galleria figure img {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    width: auto;
    margin: 0 auto;
    border: 1px solid var(--bordo-forte);
    border-radius: 4px;
}
.galleria figcaption {
    margin-top: 0.85rem;
    color: var(--inchiostro);
    font-size: 0.95rem;
}
.galleria figcaption .minuto { display: block; margin-top: 0.25rem; }
.galleria .scorri, .galleria .chiudi {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid var(--bordo-forte);
    border-radius: 50%;
    background: var(--carta);
    color: var(--inchiostro);
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 1;
}
.galleria .scorri:hover, .galleria .chiudi:hover {
    border-color: var(--blu);
    color: var(--blu);
}
.galleria .prec { left: 1rem; top: 50%; margin-top: -1.4rem; }
.galleria .succ { right: 1rem; top: 50%; margin-top: -1.4rem; }
.galleria .chiudi { right: 1rem; top: 1rem; font-size: 1.4rem; }

/* --- Tabelle ----------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    background: var(--carta);
    border: 1px solid var(--riga);
    border-radius: 4px;
}
caption {
    text-align: left;
    color: var(--grafite);
    font-size: 0.9rem;
    padding-bottom: 0.6rem;
}
th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--grafite);
    background: var(--fondo-cupo);
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--riga);
}
td { padding: 0.75rem 0.7rem; border-bottom: 1px solid var(--riga); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--fondo-cupo); }
tbody tr:hover { background: var(--blu-velo); }
/* Le cifre si leggono incolonnate a destra: vale per una cella di
   tabella come per le caselle del cruscotto. */
.destra, .destra .cifra, .destra .cosa, .destra .totale-grande { text-align: right; }
/* Il totale che non sta in colonna con nient'altro va in mezzo al suo
   riquadro, dove non sembra sbilanciato. */
.centro, .centro .cifra, .centro .cosa, .centro .totale-grande,
.centro .cifra.importo { text-align: center; }
/* I paragrafi hanno un limite di 68 caratteri per la leggibilita': in
   un riquadro allineato il testo si centrerebbe dentro quel limite e
   non dentro il riquadro, e l'etichetta finirebbe fuori asse rispetto
   alla cifra, che ha un corpo diverso e quindi un limite diverso. */
.centro p, .destra p { max-width: none; }
.crescita { color: var(--verde); font-weight: 700; }
.calo { color: var(--allarme); font-weight: 700; }
tfoot td { border-bottom: 0; padding-top: 0.5rem; background: transparent; }
tfoot tr:last-child td {
    border-top: 1px solid var(--bordo-forte);
    font-weight: 700;
    font-size: 1.1rem;
}

/* --- Stati: ognuno col suo segno -------------------------------------- */

.stato {
    display: inline-block;
    font-family: var(--titolo);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--bordo-forte);
    white-space: nowrap;
    border-radius: 999px;
}
.stato-ricevuto { background: var(--marcatore); color: #ffffff; border-color: var(--marcatore); }
.stato-confermato { background: var(--blu); color: var(--su-accento); border-color: var(--blu); }
.stato-in_lavorazione { background: var(--blu-velo); color: var(--blu); border-color: var(--blu); border-style: dashed; }
.stato-pronto { background: transparent; color: var(--verde); border-color: var(--verde); }
.stato-consegnato { background: var(--verde); color: var(--su-accento); border-color: var(--verde); }
.stato-annullato { background: transparent; color: var(--grafite); border-color: var(--riga); text-decoration: line-through; }
.stato-bozza { background: transparent; border-style: dotted; color: var(--grafite); }
.scaduto { color: var(--allarme); font-weight: 700; }

/* --- Moduli ------------------------------------------------------------ */

label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    letter-spacing: -0.005em;
}
.aiuto { color: var(--grafite); font-size: 0.86rem; margin: 0.35rem 0 0; font-family: var(--testo); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
    width: 100%;
    font: inherit;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bordo-forte);
    background: var(--fondo);
    color: var(--inchiostro);
    border-radius: 4px;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--blu);
    box-shadow: var(--bagliore);
    outline: none;
}
input[type="file"] { font: inherit; font-size: 0.95rem; color: var(--inchiostro); }
textarea { min-height: 7rem; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: var(--fondo-cupo); color: var(--grafite); }
::placeholder { color: var(--grafite); opacity: 1; }

.campo { margin-bottom: 1.15rem; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1.3rem; }
.stretto { max-width: 26rem; }
/* Con il selettore di tipo e attributo qui sopra, una classe sola
   perderebbe il confronto di specificita' e il campo si allargherebbe
   a tutta la riga: va nominato anche l'elemento. */
input.quantita, select.quantita { width: 6.5rem; flex: 0 0 auto; }

.scelta { display: flex; align-items: center; gap: 0.55rem; }
.scelta input { width: auto; }
.scelta label { margin: 0; }

button, .bottone {
    display: inline-block;
    font-family: var(--titolo);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0.62rem 1.3rem;
    border: 1px solid var(--blu);
    background: var(--blu);
    color: var(--su-accento);
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: var(--bagliore);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}
button:hover, .bottone:hover {
    background: var(--blu-cupo);
    border-color: var(--blu-cupo);
    color: var(--su-accento);
    transform: translateY(-1px);
    box-shadow: var(--bagliore-forte);
}
button:active, .bottone:active { transform: translateY(1px); box-shadow: var(--rilievo-piccolo); }

button.leggero, .bottone.leggero {
    background: transparent;
    color: var(--inchiostro);
    border-color: var(--bordo-forte);
    box-shadow: none;
}
button.leggero:hover, .bottone.leggero:hover {
    background: transparent;
    color: var(--blu);
    border-color: var(--blu);
    box-shadow: var(--rilievo-piccolo);
}
button.minuto, .bottone.minuto {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
}
/* Il cestino: un quadrato, non un bottone da testo schiacciato. Resta
   neutro finche' non ci passi sopra, poi si accende di rosso, perche'
   e' l'unico gesto distruttivo della pagina. */
button.cestino {
    padding: 0.35rem;
    line-height: 0;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grafite);
}
button.cestino:hover, button.cestino:focus-visible {
    background: transparent;
    color: var(--allarme);
    border-color: var(--allarme);
    box-shadow: 0 0 12px rgba(255, 92, 122, 0.4);
}
button.cestino svg { display: block; }

button.pericolo {
    background: transparent;
    color: var(--allarme);
    border-color: var(--allarme);
    box-shadow: none;
}
button.pericolo:hover {
    background: var(--allarme);
    color: var(--su-accento);
    box-shadow: 0 0 14px rgba(255, 92, 122, 0.5);
}

.azioni { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; margin-top: 1.35rem; }

/* --- Avvisi ------------------------------------------------------------ */

.avviso {
    border: 1px solid var(--riga);
    border-left-width: 4px;
    background: var(--carta);
    padding: 0.95rem 1.15rem;
    margin: 1.35rem 0;
    border-radius: 4px;
}
.avviso p { margin: 0; }
.avviso-ok { border-left-color: var(--verde); }
.avviso-avviso { border-left-color: var(--marcatore); }
.avviso-errore { border-left-color: var(--allarme); background: var(--allarme-velo); }
.avviso-errore p { color: var(--allarme); font-weight: 600; }

.mancanze {
    background: var(--allarme-velo);
    border: 1px dashed var(--allarme);
    border-radius: 4px;
    padding: 1.1rem 1.3rem;
    margin: 1.5rem 0;
}
.mancanze ul { margin: 0.55rem 0 0; padding-left: 1.2rem; }
.mancanze li { margin-bottom: 0.35rem; }

/* --- Totali ------------------------------------------------------------ */

.totali { margin-left: auto; max-width: 25rem; }
.totali table { margin: 0; background: transparent; border: 0; }
.totali td { border-bottom: 0; padding: 0.28rem 0; background: transparent; }
.totali tr:nth-child(even) { background: transparent; }
.totali tr:hover { background: transparent; }
.totali tr:last-child td {
    border-top: 1px solid var(--bordo-forte);
    padding-top: 0.65rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--blu);
}

.totale-grande {
    font-family: var(--titolo);
    font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1;
    color: var(--blu);
    margin: 0;
}

/* --- Pagine sobrie (accesso, errori) ---------------------------------- */

.pagina-sobria {
    display: flex;
    min-height: 100vh;
    /* Sul telefono il 100vh comprende la barra del browser e il
       riquadro finisce basso: la svh e' l'altezza che si vede davvero.
       I vecchi browser che non la conoscono tengono la riga sopra. */
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: var(--passo);
}
.riquadro {
    /* Il margine automatico centra come align-items, ma se il riquadro
       e' piu' alto dello schermo non ne taglia la cima. */
    margin: auto;
    position: relative;
    background: var(--carta);
    padding: 2.6rem;
    max-width: 31rem;
    width: 100%;
    border: 1px solid var(--riga);
    border-radius: 6px;
    box-shadow: var(--bagliore);
}
.riquadro::before, .riquadro::after {
    content: "";
    position: absolute;
    width: 24px; height: 24px;
    border: 2px solid var(--blu);
}
.riquadro::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.riquadro::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.riquadro h1 { margin-bottom: 1.3rem; }
/* Nel riquadro di accesso il marchio sta in mezzo, da solo sopra il
   titolo. */
.riquadro .marchio-rg {
    display: block;
    width: 170px;
    max-width: 70%;
    height: auto;
    margin: 0 auto 2rem;
}
/* Il logo caricato dal cliente, invece, vuole il suo cartoncino. */
.riquadro .logo-rg {
    display: block;
    max-width: 158px;
    height: auto;
    margin-bottom: 1.8rem;
    background: #ffffff;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
}

/* --- Sezioni richiudibili -----------------------------------------------
   Le pagine della gestione sono lunghe: la scheda cliente ha sette
   sezioni. details e summary le richiudono senza una riga di
   JavaScript, e il browser se ne occupa anche da tastiera. */
.sezione {
    background: var(--carta);
    border: 1px solid var(--riga);
    border-radius: 4px;
    margin: 1rem 0;
}
.sezione > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.2rem;
    cursor: pointer;
    /* Il triangolino predefinito e' diverso in ogni browser: via
       quello, se ne disegna uno che segue il tema. */
    list-style: none;
}
.sezione > summary::-webkit-details-marker { display: none; }
.sezione > summary::before {
    content: "";
    flex: none;
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid var(--blu);
    border-bottom: 2px solid var(--blu);
    transform: rotate(-45deg);
    transition: transform 0.12s ease;
}
.sezione[open] > summary::before { transform: rotate(45deg); }
.sezione > summary h2 {
    /* Nel titolo di una sezione la riga sotto non serve: a dividere
       c'e' gia' il bordo del riquadro. */
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.sezione > summary:hover h2 { color: var(--blu); }
.sezione[open] > summary { border-bottom: 1px solid var(--riga); }
.sezione > .dentro { padding: 1.1rem 1.2rem 1.3rem; }
.sezione > .dentro > h3:first-child { margin-top: 0; }

/* --- Minuzie ----------------------------------------------------------- */

.vuoto {
    color: var(--grafite);
    padding: 2.5rem 1.2rem;
    background: var(--carta);
    border: 1px dashed var(--riga);
    border-radius: 4px;
    text-align: center;
    max-width: none;
}
.minuto { font-size: 0.85rem; color: var(--grafite); }
.piede {
    margin-top: 3.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--riga);
    font-size: 0.8rem;
    color: var(--grafite);
    font-family: var(--titolo);
    font-weight: 600;
}
.segno { background: var(--marcatore); color: #ffffff; padding: 0 0.22em; }
.cerca { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 1.35rem 0; }
.cerca input[type="search"] { flex: 1 1 14rem; }
.riga-azioni {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--fondo-cupo);
    border: 1px solid var(--riga);
    border-radius: 4px;
    padding: 0.7rem 0.85rem;
    margin: 0.75rem 0;
}
.riga-azioni label { margin: 0; white-space: nowrap; }
td .riga-azioni, .elenco .riga-azioni { background: transparent; border: 0; padding: 0; margin: 0; }
.segreto {
    font-family: var(--testo);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    background: var(--blu-velo);
    color: var(--blu);
    padding: 0.55rem 0.75rem;
    word-break: break-all;
    border: 1px solid var(--blu);
    border-radius: 4px;
    display: inline-block;
}
.codici { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0.85rem 0; }
.codici li {
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    padding: 0.2rem 0;
    font-weight: 600;
}

@media (max-width: 40rem) {
    .elenco > li { flex-direction: column; align-items: stretch; gap: 0.8rem; }
    /* In colonna la base del flex diventa un'ALTEZZA: senza questo il
       corpo resterebbe alto 24rem e fra descrizione e prezzo si
       aprirebbe mezzo schermo di vuoto. */
    .elenco .corpo { flex: 0 1 auto; }
    .elenco .prezzo { min-width: 0; text-align: left; }
    .totali { margin-left: 0; max-width: none; }
    .numeri .cifra { font-size: 2.3rem; }
    .testata-dentro { padding: 1rem var(--passo); }
    nav.barra a { padding: 0.7rem 0.75rem; font-size: 0.85rem; }
    nav.barra li:first-child a { padding-left: 0; }
    .riquadro { padding: 1.8rem; }
    .scheda .foto { float: none; width: 100%; margin: 0 0 0.9rem; }
    .catalogo .azione { justify-content: flex-start; }
    .galleria:target { padding: 3.4rem 0.6rem; }
    .galleria .prec { left: 0.4rem; }
    .galleria .succ { right: 0.4rem; }
    table { font-size: 0.95rem; }
    th, td { padding: 0.55rem 0.45rem; }

    /* Gli ultimi ordini del cruscotto: su cinque colonne il telefono
       non ce la fa, e le ultime finiscono fuori. Ogni ordine diventa
       due righe — sopra chi e' e a che punto sta, sotto il numero, la
       data e quanto fa. Le intestazioni spariscono: a due righe non
       corrisponderebbero piu' a niente. Su schermo largo non cambia
       nulla, la tabella resta una tabella. */
    .ordini-brevi, .ordini-brevi tbody { display: block; }
    .ordini-brevi thead { display: none; }
    .ordini-brevi tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        gap: 0.2rem 0.7rem;
        padding: 0.75rem 0.45rem;
        border-bottom: 1px solid var(--riga);
    }
    .ordini-brevi tbody td { padding: 0; border: 0; }
    /* Riga uno: il cliente prende le prime due colonne, lo stato la terza. */
    .ordini-brevi tbody td:nth-child(2) {
        grid-area: 1 / 1 / 2 / 3;
        font-weight: 700;
    }
    .ordini-brevi tbody td:nth-child(4) { grid-area: 1 / 3; text-align: right; }
    /* Riga due: numero, data, importo. */
    /* Il numero non va mai a capo: spezzato in due righe non si
       riconosce piu' a colpo d'occhio. */
    .ordini-brevi tbody td:nth-child(1) { grid-area: 2 / 1; white-space: nowrap; }
    .ordini-brevi tbody td:nth-child(3) { grid-area: 2 / 2; color: var(--grafite); }
    .ordini-brevi tbody td:nth-child(5) {
        grid-area: 2 / 3;
        text-align: right;
        font-weight: 700;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .numeri li:hover, button:hover, .bottone:hover { transform: none; }
}

/* Su carta il neon non esiste: la stampa torna nera su bianco, senza
   aloni e senza fondi scuri che svuoterebbero una cartuccia. */
@media print {
    :root {
        --inchiostro: #000000;
        --carta: #ffffff;
        --fondo: #ffffff;
        --fondo-cupo: #ffffff;
        --grafite: #444444;
        --riga: #999999;
        --bordo-forte: #000000;
        --blu: #000000;
        --blu-cupo: #000000;
        --blu-velo: #ffffff;
        --marcatore: #000000;
        --verde: #000000;
        --allarme: #000000;
        --allarme-velo: #ffffff;
        --bagliore: none;
        --bagliore-forte: none;
        --bagliore-magenta: none;
        --rilievo: none;
        --rilievo-piccolo: none;
    }
    body { background: #fff; background-image: none; color: #000; }
    nav.barra, .schede, .azioni, .testata form, .riga-azioni { display: none; }
    .galleria, .galleria:target, .scheda .foto .quante { display: none; }
    .sezione > summary::before { display: none; }
    .sezione > .dentro { display: block; }
    .sezione { break-inside: avoid; }
    .mirino, .numeri li, .riquadro, button, table { box-shadow: none; }
    .marchio img, .riquadro .logo-rg { background: none; padding: 0; }
    .marchio-rg { filter: invert(1); }
    th { background: #fff; color: #000; border-bottom: 2px solid #000; }
}

/* Il dialogo col server di posta: qui il testo a spaziatura fissa serve
   davvero, perche' sono righe di protocollo da leggere una per una. */
.dialogo {
    background: var(--nav-fondo);
    color: var(--verde);
    padding: 1rem 1.15rem;
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--riga);
    border-radius: 4px;
    margin: 0.75rem 0 1.5rem;
}