/* ipsProductKey WEB — foglio di stile applicazione
   Impostazione: strumento gestionale interno, densita' alta, nessuna
   decorazione. L'ambra riprende l'accento dell'applicazione desktop. */

:root {
    --inchiostro:      #1c1917;
    --inchiostro-tenue:#57534e;
    --carta:           #ffffff;
    --fondo:           #f5f4f2;
    --linea:           #d6d3d1;
    --ambra:           #b45309;
    --ambra-chiara:    #fef3c7;
    --errore:          #991b1b;
    --ok:              #166534;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fondo);
    color: var(--inchiostro);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

/* ---------- Barra superiore ---------- */

.barra {
    display: flex;
    align-items: center;
    gap: 28px;
    background: var(--carta);
    border-bottom: 2px solid var(--ambra);
    padding: 0 20px;
    height: 48px;
}

.marchio {
    font-weight: 600;
    font-size: 15px;
    color: var(--inchiostro);
    text-decoration: none;
    letter-spacing: .2px;
}

.menu { display: flex; gap: 4px; flex: 1; }

.menu a {
    color: var(--inchiostro-tenue);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 3px;
}

.menu a:hover { background: var(--fondo); color: var(--inchiostro); }

.utente {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--inchiostro-tenue);
    font-size: 13px;
}

.esci { color: var(--ambra); text-decoration: none; }
.esci:hover { text-decoration: underline; }

/* ---------- Nastro sessione di sviluppo ---------- */

.nastro-sviluppo {
    background: #78350f;
    color: #fef3c7;
    padding: 6px 20px;
    font-size: 13px;
    border-bottom: 1px solid #451a03;
}

/* ---------- Contenuto ---------- */

.contenuto { padding: 20px; max-width: 1400px; }

h1 { font-size: 19px; font-weight: 600; margin: 0 0 16px; }

.pannello {
    background: var(--carta);
    border: 1px solid var(--linea);
    border-radius: 3px;
    padding: 16px;
    margin-bottom: 16px;
}

.pannello > h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--linea);
}

/* ---------- Barra strumenti ---------- */

.strumenti {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.strumenti .cerca { width: 260px; }

/* ---------- Campi ---------- */

.campo { margin-bottom: 12px; }
.campo label { display: block; margin-bottom: 3px; color: var(--inchiostro-tenue); font-size: 13px; }

input[type=text], input[type=password], textarea, select {
    font-family: inherit;
    font-size: 14px;
    padding: 5px 8px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: var(--carta);
    color: var(--inchiostro);
    width: 100%;
    max-width: 420px;
}

textarea { min-height: 70px; resize: vertical; }

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--ambra);
    outline-offset: -1px;
    border-color: var(--ambra);
}

input[readonly] { background: var(--fondo); color: var(--inchiostro-tenue); }

.campo-riga { display: flex; gap: 20px; flex-wrap: wrap; }
.campo-corto input { max-width: 120px; }

.spunta { display: flex; align-items: center; gap: 6px; }
.spunta input { width: auto; }

/* ---------- Pulsanti ---------- */

.bottone, .bottone-primario {
    font-family: inherit;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 3px;
    border: 1px solid var(--linea);
    background: var(--carta);
    color: var(--inchiostro);
    cursor: pointer;
}

.bottone:hover { background: var(--fondo); }

.bottone-primario {
    background: var(--ambra);
    border-color: var(--ambra);
    color: #fff;
}

.bottone-primario:hover { background: #92400e; }

.bottone-pericolo { color: var(--errore); border-color: var(--linea); }
.bottone-pericolo:hover { background: #fef2f2; }

.bottone:focus-visible, .bottone-primario:focus-visible {
    outline: 2px solid var(--inchiostro);
    outline-offset: 2px;
}

/* ---------- Griglia dati ---------- */

.griglia { width: 100%; border-collapse: collapse; background: var(--carta); }

.griglia th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 10px;
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}

.griglia td {
    padding: 6px 10px;
    border-bottom: 1px solid #eeecea;
    vertical-align: top;
}

.griglia tr:hover td { background: #fffbeb; }
.griglia .riga-selezionata td { background: var(--ambra-chiara); }
.griglia .num { text-align: right; font-variant-numeric: tabular-nums; }
.griglia a { color: var(--ambra); }

.vuoto { padding: 24px; text-align: center; color: var(--inchiostro-tenue); }

/* ---------- Messaggi ---------- */

.avviso { padding: 10px 12px; border-radius: 3px; margin-bottom: 12px; }
.avviso-errore { background: #fef2f2; border: 1px solid #fecaca; color: var(--errore); }
.avviso-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--ok); }
.avviso-attenzione { background: var(--ambra-chiara); border: 1px solid #fcd34d; color: #78350f; }
.avviso ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- Pie' di pagina ---------- */

.pieproPagina {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--inchiostro-tenue);
    font-size: 12px;
    border-top: 1px solid var(--linea);
}

/* ---------- Accesso ---------- */

.accesso {
    max-width: 340px;
    margin: 80px auto;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-top: 3px solid var(--ambra);
    border-radius: 3px;
    padding: 28px;
}

.accesso h1 { margin-bottom: 20px; }
.accesso input { max-width: none; }
.accesso .bottone-primario { width: 100%; margin-top: 8px; }

@media (max-width: 800px) {
    .barra { flex-wrap: wrap; height: auto; padding: 8px 12px; }
    .menu { order: 3; width: 100%; overflow-x: auto; }
    .contenuto { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Sottosezioni del dettaglio ---------- */

.pannello h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--inchiostro-tenue);
    margin: 20px 0 4px;
}

.nota { color: var(--inchiostro-tenue); font-size: 13px; margin: 0 0 10px; max-width: 620px; }

/* Otto spunte in colonna sarebbero una pagina lunghissima: su schermo largo
   si dispongono in griglia, su schermo stretto tornano incolonnate. */
.gruppo-spunte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px 24px;
    max-width: 800px;
    margin-bottom: 12px;
}

.gruppo-spunte .spunta { margin: 0; }
.gruppo-spunte .spunta label { margin: 0; }

/* Il filtro a tendina della barra strumenti non deve occupare tutta la riga. */
.strumenti select.filtro { width: auto; max-width: 260px; }

/* ---------- Elenco delle sezioni in pagina iniziale ---------- */

.elenco-sezioni { list-style: none; margin: 0; padding: 0; }

.elenco-sezioni li {
    padding: 8px 0;
    border-bottom: 1px solid #eeecea;
}

.elenco-sezioni li:last-child { border-bottom: none; }

.elenco-sezioni a { color: var(--ambra); font-weight: 600; text-decoration: none; }
.elenco-sezioni a:hover { text-decoration: underline; }

.elenco-sezioni .nota { display: block; margin: 2px 0 0; }

.voce-inattiva { color: var(--inchiostro-tenue); font-weight: 600; }

/* ====================================================================
   ELENCO A SINISTRA / DETTAGLIO A DESTRA
   Il dettaglio non scorre via mentre si consulta l'elenco: resta
   agganciato in alto. Sotto i 1200px le due colonne si incolonnano,
   altrimenti il dettaglio diventa illeggibile.
   ==================================================================== */

.lavoro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.lavoro-con-dettaglio { grid-template-columns: minmax(0, 1fr) 440px; }

.colonna-dettaglio {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

/* Nella colonna stretta i campi prendono tutta la larghezza disponibile:
   le larghezze fisse del vecchio impianto a tutta pagina non ci stanno. */
.colonna-dettaglio input[type=text],
.colonna-dettaglio input[type=password],
.colonna-dettaglio textarea,
.colonna-dettaglio select { max-width: 100%; }

.colonna-dettaglio .campo-corto input { max-width: 110px; }
.colonna-dettaglio .gruppo-spunte { grid-template-columns: minmax(0, 1fr); max-width: none; }

/* La griglia ha piu' colonne di quante ne stiano nella meta' sinistra:
   scorre da sola invece di sfondare la pagina. */
.griglia-scorrevole { overflow-x: auto; }

@media (max-width: 1200px) {
    .lavoro-con-dettaglio { grid-template-columns: minmax(0, 1fr); }
    .colonna-dettaglio { position: static; max-height: none; overflow-y: visible; }
    .colonna-dettaglio .gruppo-spunte { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Riga aperta nel dettaglio: senza, con l'elenco sempre a vista non si
   capisce quale record si sta modificando. */
.griglia tr.riga-selezionata td { background: var(--ambra-chiara); }
.griglia tr.riga-selezionata:hover td { background: var(--ambra-chiara); }

/* ---------- Menu raggruppato ---------- */

.menu-gruppo { position: relative; }

.menu-testa {
    font-family: inherit;
    font-size: inherit;
    color: var(--inchiostro-tenue);
    background: none;
    border: none;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.menu-testa:hover, .menu-gruppo:hover .menu-testa, .menu-gruppo:focus-within .menu-testa {
    background: var(--fondo);
    color: var(--inchiostro);
}

.menu-tendina {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-top: 2px solid var(--ambra);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 4px 10px rgba(28, 25, 23, .12);
    padding: 4px 0;
    z-index: 20;
}

/* Niente JavaScript: apre col passaggio del mouse e col focus da tastiera,
   che copre anche il tocco su tablet. */
.menu-gruppo:hover .menu-tendina, .menu-gruppo:focus-within .menu-tendina { display: block; }

.menu-tendina a { display: block; border-radius: 0; padding: 7px 14px; }

/* ---------- Riepilogo statistico ---------- */

.riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.riquadro {
    background: var(--carta);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--ambra);
    border-radius: 3px;
    padding: 12px 14px;
}

.riquadro .numero {
    display: block;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.riquadro .etichetta { display: block; color: var(--inchiostro-tenue); font-size: 12px; margin-top: 2px; }

.riquadro-attenzione { border-left-color: var(--errore); }
.riquadro-attenzione .numero { color: var(--errore); }
.riquadro-quieto { border-left-color: var(--linea); }

.colonne-affiancate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

/* Barra proporzionale dentro la griglia: da' la misura di un conteggio
   senza bisogno di un grafico. */
.barra-quota {
    display: block;
    height: 9px;
    background: var(--ambra);
    border-radius: 2px;
    min-width: 3px;
}

/* La barra vive dentro la sua cella: senza una larghezza dichiarata la
   colonna si stringe sul titolo e le proporzioni diventano illeggibili. */
.griglia .quota { width: 160px; min-width: 160px; }

/* ---------- Intestazioni di gruppo nell'elenco ---------- */

.griglia td.gruppo {
    background: #efece8;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: 6px 10px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--inchiostro-tenue);
}

/* Il gruppo non e' una riga di dati: non deve reagire al passaggio del
   mouse come se fosse cliccabile. */
.griglia tr:hover td.gruppo { background: #efece8; }

/* ---------- Disponibilita' su piu' prodotti ---------- */

.tutta-famiglia { color: var(--ambra); font-weight: 600; }

.elenco-prodotti { color: var(--inchiostro-tenue); }

/* Lista di spunte dei prodotti nel dettaglio: incolonnata e scorrevole,
   perche' una famiglia puo' avere molti prodotti e il pannello e' stretto. */
.spunte-prodotti {
    border: 1px solid var(--linea);
    border-radius: 3px;
    padding: 6px 8px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--carta);
}

.spunte-prodotti input { width: auto; flex: none; }
.spunte-prodotti label { margin: 0; font-size: 13px; }

.spunta-tutta-famiglia {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--linea);
}

.spunta-tutta-famiglia input { width: auto; }

.spunte-prodotti ul { list-style: none; margin: 0; padding: 0; }

/* La casella e la sua etichetta stanno sulla stessa riga: con label a
   blocco il testo andava a capo sotto la spunta. */
.spunte-prodotti li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }

/* ---------- Ricerca chiavi ---------- */

.ricerca-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 16px;
    margin-bottom: 12px;
}

.ricerca-campi .campo { margin: 0; }
.ricerca-campi input, .ricerca-campi select { max-width: none; }

/* Scheda a due colonne del dettaglio chiave: etichetta a sinistra, valore
   a destra, senza tabelle. */
.scheda { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 16px; }
.scheda dt { color: var(--inchiostro-tenue); font-size: 13px; }
.scheda dd { margin: 0; }
.scheda code { font-size: 13px; word-break: break-all; }

.stato-valida   { color: var(--ok); font-weight: 600; }
.stato-scaduta  { color: var(--inchiostro-tenue); }
.stato-bloccata { color: var(--errore); font-weight: 600; }
.spento         { color: var(--linea); }

/* ====================================================================
   PIANO DI LAVORO DELLA CHIAVE DI ATTIVAZIONE
   Tre zone come la finestra desktop: chiavi del cliente a sinistra,
   testata e contenuto al centro, Basic Support e opzioni a destra.
   ==================================================================== */

.testa-chiave {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.testa-chiave h1 { margin-bottom: 12px; }

/* ---------- Piano di lavoro a tre colonne con splitter ----------

   Le larghezze delle colonne laterali stanno in --col-sx / --col-dx: le
   imposta Js/splitter.js trascinando le barre, e le rilegge dal browser
   dell'operatore al rientro. Qui restano solo i valori predefiniti, cosi'
   senza JavaScript la pagina e' comunque a posto. */

.piano {
    --col-sx: 250px;
    --col-dx: 250px;
    --barra: 9px;

    display: grid;
    grid-template-columns:
        var(--col-sx) var(--barra) minmax(0, 1fr) var(--barra) var(--col-dx);
    /* stretch, non start: cosi' le colonne sono alte uguali e la barra
       dello splitter corre per tutta l'altezza del piano. */
    align-items: stretch;

    /* Il piano arriva in fondo alla finestra anche quando al centro non
       c'e' ancora niente: senza, l'elenco dei clienti restava un
       francobollo in cima a una pagina vuota. I 250px scalati sono quel
       che sta sopra e sotto: barra del menu, avviso, riga di ricerca e
       pie' di pagina. */
    min-height: calc(100vh - 250px);
}

/* Finche' non c'e' una chiave scelta la colonna di destra non esiste:
   niente colonna vuota e niente barra che penzola. */
.piano-senza-destra {
    grid-template-columns: var(--col-sx) var(--barra) minmax(0, 1fr);
}

.piano-lato,
.piano-centro {
    display: grid;
    gap: 16px;
    /* I riquadri restano alti quanto il loro contenuto, incollati in alto,
       invece di allungarsi per riempire la colonna piu' alta. */
    align-content: start;
    min-width: 0;
}

/* ---------- La colonna dei clienti, ancorata in altezza ----------

   Qui la regola di sopra non va: i due elenchi devono riempire la colonna
   fino in fondo, non fermarsi all'altezza del loro contenuto. Finche' non
   c'e' un cliente scelto la colonna ha un riquadro solo, che prende tutto;
   scelto il cliente compare quello dei prodotti, e fra i due una barra
   orizzontale che sposta il confine. */
.piano-dock {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    gap: 0;

    /* Altezza fissa, non minima: con un minimo i quattrocento clienti
       allungavano la colonna a tredicimila pixel e a scorrere era la
       pagina intera invece dell'elenco. */
    height: calc(100vh - 230px);

    /* align-self: start toglie lo stiramento del grid, che altrimenti
       impedirebbe a sticky di agganciarsi. Cosi' l'elenco resta sotto gli
       occhi mentre al centro si scorre la scheda della chiave. */
    align-self: start;
    position: sticky;
    top: 12px;
}

.piano-dock.con-prodotti {
    grid-template-rows: var(--riga-clienti, 55%) var(--barra) minmax(0, 1fr);
}

/* I riquadri della colonna si comportano da contenitore: intestazione
   ferma in alto, elenco che si allunga e scorre da solo. */
.piano-dock .pannello-elenco {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.piano-dock .elenco-scorrevole {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

/* Dentro il piano la distanza fra i riquadri la detta il gap della
   colonna. Lasciando anche il margine del riquadro diventava doppia da
   una parte e no dall'altra: era questo a sfalsare le colonne. */
.piano .pannello { margin-bottom: 0; }

/* Riquadri appaiati (Rivenditore / Cliente): stessa altezza, altrimenti
   quello piu' corto lascia un gradino sotto. */
.piano .colonne-affiancate { align-items: stretch; }

/* ---------- La barra dello splitter ---------- */

.splitter {
    position: relative;
    cursor: col-resize;
    /* Senza questo il browser interpreta il trascinamento come uno scorrimento
       e su schermo tattile lo splitter non si muove. */
    touch-action: none;
}

/* La barra e' larga 9px per poterla afferrare, ma se ne vede 1px: una
   riga di separazione fra le colonne. */
.splitter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -1px;
    background: var(--linea);
}

.splitter:hover::before,
.splitter:focus::before,
.piano-in-trascinamento .splitter:focus::before {
    width: 3px;
    margin-left: -2px;
    background: var(--ambra);
}

.splitter:focus { outline: none; }

/* La barra orizzontale, fra i due elenchi della colonna di sinistra:
   stessa idea girata di novanta gradi. */
.splitter-orizzontale { cursor: row-resize; }

.splitter-orizzontale::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    margin-left: 0;
    margin-top: -1px;
}

.splitter-orizzontale:hover::before,
.splitter-orizzontale:focus::before {
    width: auto;
    height: 3px;
    margin-left: 0;
    margin-top: -2px;
}

.piano-in-trascinamento-riga { cursor: row-resize; user-select: none; }
.piano-in-trascinamento-riga .pannello { pointer-events: none; }

/* Durante il trascinamento: niente testo selezionato per sbaglio e il
   cursore resta quello del ridimensionamento su tutta la pagina. */
.piano-in-trascinamento {
    cursor: col-resize;
    user-select: none;
}

.piano-in-trascinamento .pannello { pointer-events: none; }

/* Sotto i 1400px la colonna di destra scende sotto il centro; sotto i
   1100 si incolonna tutto. Comprimere tre colonne su uno schermo stretto
   renderebbe illeggibile proprio la parte densa. Le barre spariscono
   insieme alle colonne che dividevano. */
@media (max-width: 1400px) {
    .piano,
    .piano-senza-destra {
        grid-template-columns: var(--col-sx) var(--barra) minmax(0, 1fr);
    }

    .piano-lato:last-child {
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .splitter[data-lato="dx"] { display: none; }
}

@media (max-width: 1100px) {
    .piano,
    .piano-senza-destra {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .piano-lato:last-child { grid-column: auto; }
    .splitter { display: none; }

    /* A colonna unica l'ancoraggio in altezza non ha senso: i riquadri
       tornano alti quanto il contenuto e si scorre la pagina. */
    .piano { min-height: 0; }

    .piano-dock,
    .piano-dock.con-prodotti {
        grid-template-rows: auto;
        align-content: start;
        gap: 16px;
        height: auto;
        position: static;
    }

    .piano-dock .elenco-scorrevole { max-height: 320px; }
}

/* ---------- Barra dei comandi della chiave ---------- */

.comandi {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-radius: 3px;
}

/* Spinge a destra quel che segue: i comandi di scrittura stanno da una
   parte, quelli che chiudono l'operazione dall'altra. */
.comandi .separatore { margin-left: auto; }

.comandi .nota { color: var(--inchiostro-tenue); font-size: 13px; }

/* ---------- Scheda a campi ----------

   Gli stessi riquadri servono in lettura e in scrittura: i campi ci sono
   sempre, e fuori dalla modifica sono solo disabilitati. Cosi' passando da
   una modalita' all'altra la finestra non si riscompone sotto le mani. */
.scheda-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 20px;
}

/* Nelle colonne laterali lo spazio e' poco: i campi restano incolonnati
   invece di affiancarsi e diventare illeggibili. */
.scheda-campi-strette { grid-template-columns: minmax(0, 1fr); }

.scheda-campi .campo { margin-bottom: 8px; }
.scheda-campi input, .scheda-campi select { width: 100%; }

/* Il campo disabilitato si legge come testo, non come casella spenta:
   niente cornice, niente sfondo grigio. */
.scheda-campi input:disabled,
.scheda-campi select:disabled,
.product-key:disabled,
input.piatto:disabled {
    background: transparent;
    border-color: transparent;
    color: var(--inchiostro);
    padding-left: 0;
    opacity: 1;
    -webkit-text-fill-color: var(--inchiostro);
}

.scheda-campi select:disabled { appearance: none; }

/* Le opzioni: caselle in modifica, elenco di segni di spunta in lettura. */
.opzioni-modifica label {
    display: block;
    font-size: 13px;
    padding: 2px 0;
}

.opzioni-modifica input { margin-right: 6px; }

/* ---------- Elenco chiavi del cliente ---------- */

.elenco-chiavi { list-style: none; margin: 0; padding: 0; }

.elenco-chiavi li {
    padding: 5px 6px;
    border-bottom: 1px solid #eeecea;
    border-left: 3px solid transparent;
}

.elenco-chiavi li:last-child { border-bottom: none; }
.elenco-chiavi li:hover { background: #fffbeb; }

.elenco-chiavi .chiave-corrente {
    background: var(--ambra-chiara);
    border-left-color: var(--ambra);
}

.elenco-chiavi a { text-decoration: none; display: block; }
.elenco-chiavi a:hover .chiave-prodotto { text-decoration: underline; }

/* Intestazione di prodotto dentro l'elenco delle chiavi del cliente. */
.elenco-chiavi .chiave-gruppo {
    padding: 9px 6px 3px;
    border-bottom: none;
    border-left-color: transparent;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--inchiostro-tenue);
}

.elenco-chiavi .chiave-gruppo:hover { background: none; }
.elenco-chiavi .chiave-versione-riga { padding-left: 14px; }

.chiave-versione { color: var(--ambra); font-weight: 600; font-size: 13px; }
.chiave-matricola { color: var(--inchiostro-tenue); font-size: 12px; margin-left: 8px; }
.chiave-stato { font-size: 11px; margin-left: 8px; }

/* ---------- Scheda a due colonne ---------- */

.scheda-doppia { grid-template-columns: auto 1fr auto 1fr; }

@media (max-width: 900px) {
    .scheda-doppia { grid-template-columns: auto 1fr; }
}

.product-key {
    font-family: "Consolas", "Lucida Console", monospace;
    letter-spacing: .5px;
    max-width: none;
}

.note-chiave { max-width: none; min-height: 150px; }

/* ---------- Linguette ---------- */

.linguette {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 12px;
}

.linguetta {
    display: inline-block;
    padding: 7px 14px;
    color: var(--inchiostro-tenue);
    text-decoration: none;
    font-size: 13px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    margin-bottom: -1px;
}

.linguetta:hover { background: var(--fondo); color: var(--inchiostro); }

.linguetta-attiva,
.linguetta-attiva:hover {
    background: var(--carta);
    color: var(--inchiostro);
    font-weight: 600;
    border-color: var(--linea);
    border-top: 2px solid var(--ambra);
}

/* ---------- Opzioni aggiuntive ---------- */

.opzioni { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.opzioni li { padding: 3px 0; }

.opzione-attiva { color: var(--inchiostro); font-weight: 600; }
.opzione-spenta { color: var(--inchiostro-tenue); }

.acceso { color: var(--ok); font-weight: 600; }

/* ---------- Contenuto a tutta larghezza ---------- */

/* Le pagine di testo restano dentro 1400px, che e' la misura in cui una riga
   si legge senza perdere il segno. Il piano di lavoro della chiave no: e'
   fatto di colonne dense, e il tetto lasciava mezzo schermo vuoto mentre le
   griglie scorrevano. */
.contenuto-largo { max-width: none; }


/* ====================================================================
   GESTIONE CHIAVI — una finestra sola, come il desktop
   ==================================================================== */

.barra-ricerca {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-top: 2px solid var(--ambra);
    border-radius: 3px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.campo-inline { display: flex; flex-direction: column; gap: 2px; }
.campo-inline label { color: var(--inchiostro-tenue); font-size: 12px; }
.campo-inline input, .campo-inline select { max-width: none; width: 190px; }
.campo-inline .stretto { width: 100px; }

/* I riquadri di elenco a sinistra: intestazione fissa, contenuto che scorre,
   cosi' la colonna non diventa lunga quanto 400 clienti. */
.pannello-elenco { padding-bottom: 8px; }

.elenco-scorrevole {
    max-height: 320px;
    overflow-y: auto;
    margin: 0 -16px -8px;
    padding: 0 8px 8px;
}

.albero { list-style: none; margin: 0; padding: 0; font-size: 13px; }

.albero .gruppo-albero {
    padding: 8px 8px 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--inchiostro-tenue);
}

.albero .voce {
    padding: 3px 8px 3px 18px;
    border-left: 3px solid transparent;
}

.albero .voce:hover { background: #fffbeb; }

.albero .voce-corrente {
    background: var(--ambra-chiara);
    border-left-color: var(--ambra);
}

.albero .voce a { color: var(--inchiostro); text-decoration: none; }
.albero .voce a:hover { text-decoration: underline; }
.albero .voce-corrente a { font-weight: 600; }

.voce-conteggio { color: var(--inchiostro-tenue); font-size: 11px; }
.voce-versione { color: var(--ambra); font-weight: 600; }
.voce-stato { font-size: 11px; margin-left: 6px; }

/* Linguette sotto la griglia, come nel desktop. */
.linguette-basso {
    border-bottom: none;
    border-top: 1px solid var(--linea);
    margin: 12px 0 0;
    padding-top: 2px;
}

.linguette-basso .linguetta {
    border-radius: 0 0 3px 3px;
    border-top: none;
    border-bottom: none;
    margin: -1px 0 0;
}

.linguette-basso .linguetta-attiva {
    border-color: var(--linea);
    border-top: none;
    border-bottom: 2px solid var(--ambra);
}

.griglia-alta { max-height: 420px; overflow-y: auto; }

.vuoto-grande {
    padding: 60px 20px;
    text-align: center;
    color: var(--inchiostro-tenue);
}

/* Campo data dentro una riga di griglia: compatto, senza allargare la
   colonna piu' del testo che sostituisce. */
.data-riga {
    font-size: 13px;
    padding: 2px 4px;
    width: 130px;
}

/* Riga della tendina "Applica configurazione", sopra la griglia moduli. */
.riga-pacchetti {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.riga-pacchetti label { color: var(--inchiostro-tenue); font-size: 13px; }
.riga-pacchetti select { width: auto; max-width: 280px; }
.riga-pacchetti .nota { margin: 0; }

/* Campo di testo dentro una riga di griglia. */
.testo-riga {
    font-size: 13px;
    padding: 2px 6px;
    width: 150px;
}

/* Le stampe stanno nella barra comandi, ma sono un gruppo a se': un
   separatore le stacca dai comandi di scrittura. */
.gruppo-stampe {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--linea);
}

.gruppo-stampe .nota { margin: 0; }

/* ====================================================================
   COLORE — dare struttura, non decorare

   L'interfaccia era troppo bianca: riquadri bianchi su fondo quasi
   bianco, e i gruppi non si distinguevano. Qui si aggiungono tinte
   molto diluite della stessa famiglia (l'ambra del desktop e i grigi
   caldi), usate per far capire dove finisce un gruppo e dove ne
   comincia un altro. Niente riquadri colorati pieni.
   ==================================================================== */

:root {
    --tinta-intestazione: #f1ede6;  /* fondo delle intestazioni di riquadro */
    --tinta-riga:         #f7f5f1;  /* riga alternata nelle griglie */
    --verde:              #166534;  /* stampe: produce un documento */
    --verde-chiaro:       #f0fdf4;
    --verde-linea:        #bbf7d0;
}

/* ---------- Intestazioni dei riquadri ----------
   Erano testo nero su bianco con una riga sotto: si perdevano. */
.pannello > h2 {
    background: var(--tinta-intestazione);
    margin: -16px -16px 12px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--linea);
    border-radius: 3px 3px 0 0;
    color: var(--inchiostro);
}

/* ---------- Righe alternate ----------
   Con quarantasette moduli o quaranta attivazioni e' la differenza fra
   seguire una riga e perderla a meta'. */
.griglia tbody tr:nth-child(even) td { background: var(--tinta-riga); }
.griglia tbody tr:hover td { background: #fffbeb; }
.griglia .riga-selezionata td { background: var(--ambra-chiara); }

/* ---------- Etichette e valori ----------
   Avevano quasi lo stesso peso e la scheda si leggeva come un blocco. */
.scheda-campi .campo label { color: var(--inchiostro-tenue); font-size: 12px; }
.scheda dt { color: var(--inchiostro-tenue); }
.scheda dd { color: var(--inchiostro); }

/* ---------- Filo di colore per zona ----------
   Le tre colonne si riconoscono anche in periferia, senza leggere le
   intestazioni. */
.piano-dock .pannello { border-left: 3px solid var(--linea); }
.piano-centro .pannello { border-left: 3px solid #e3c9a6; }
.piano-lato:last-child .pannello { border-left: 3px solid #c7b8a4; }



/* ---------- Linguette in alto ---------- */
.linguette-alto {
    border-bottom: 1px solid var(--linea);
    border-top: none;
    margin: 0 0 12px;
    padding-bottom: 0;
}

.linguette-alto .linguetta {
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    margin: 0 0 -1px;
    background: var(--tinta-intestazione);
}

.linguette-alto .linguetta-attiva {
    background: var(--carta);
    border-color: var(--linea);
    border-bottom: 1px solid var(--carta);
    border-top: 2px solid var(--ambra);
}

/* ---------- Pulsante Stampa con sottomenu ----------

   Un pulsante solo: le stampe si definiscono in tabella e possono
   diventare molte, e una fila di pulsanti mangerebbe la barra comandi.

   Il menu si apre in CSS, con :hover e :focus-within, come quello di
   "Tabelle di base": funziona anche arrivandoci con il tabulatore e non
   ha bisogno di JavaScript. */

.menu-stampe { position: relative; display: inline-block; }

.bottone-stampa {
    background: var(--verde-chiaro);
    border-color: var(--verde-linea);
    color: var(--verde);
    font-weight: 600;
}

.bottone-stampa:hover,
.menu-stampe:hover .bottone-stampa,
.menu-stampe:focus-within .bottone-stampa {
    background: #dcfce7;
    border-color: var(--verde);
}

.bottone-stampa .freccia { font-size: 11px; margin-left: 2px; }

.voci-stampe {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 220px;
    margin-top: 2px;
    background: var(--carta);
    border: 1px solid var(--verde-linea);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    padding: 4px 0;
}

.menu-stampe:hover .voci-stampe,
.menu-stampe:focus-within .voci-stampe { display: block; }

.voci-stampe a {
    display: block;
    padding: 6px 14px;
    color: var(--inchiostro);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.voci-stampe a:hover,
.voci-stampe a:focus { background: var(--verde-chiaro); color: var(--verde); }

/* Campo di una formula: monospazio, che gli allineamenti e le parentesi
   quadre si leggano. */
.formula {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    max-width: none;
}

/* Esito della prova di una stampa. */
.esito-prova {
    background: var(--tinta-riga);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--verde);
    border-radius: 3px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}

.esito-prova ul { margin: 0; padding-left: 20px; }
.esito-prova li { margin: 2px 0; }

/* ---------- Accesso, cambio password, avviso ---------- */

/* Le pagine fuori dal master (accesso, cambio password, avviso) non hanno
   la barra in alto: senza uno sfondo proprio resterebbero bianche. */
.pagina-accesso { background: var(--fondo); }

.accesso h1 { margin-bottom: 4px; }

.accesso-sotto {
    margin: 0 0 20px;
    color: var(--inchiostro-tenue);
    font-size: 12px;
}

.accesso-pie {
    margin: 16px 0 0;
    color: var(--inchiostro-tenue);
    font-size: 11px;
    text-align: center;
}

/* Il cambio password e l'avviso stanno stretti in 340px: le regole e le
   spiegazioni vanno a capo troppe volte e diventano illeggibili. */
.accesso-largo { max-width: 460px; }
.accesso-largo .bottone-primario { width: auto; }

.avviso-nota {
    background: var(--tinta-riga);
    border: 1px solid var(--linea);
    color: var(--inchiostro);
}

.regole {
    margin: 14px 0 4px;
    padding: 10px 12px;
    background: var(--tinta-intestazione);
    border-left: 3px solid var(--ambra);
    border-radius: 3px;
    color: var(--inchiostro-tenue);
    font-size: 12px;
    line-height: 1.6;
}

/* Avviso di scadenza password nella barra in alto. */
.scadenza {
    background: var(--ambra-chiara);
    border-bottom: 1px solid #fcd34d;
    color: #78350f;
    padding: 7px 16px;
    font-size: 12px;
}

.scadenza a { color: #78350f; font-weight: 600; }

/* ==================================================================
   SCHEDARIO — elenco stretto a sinistra, scheda a destra

   E' il modello delle tabelle di base. Prima c'era una griglia larga con
   tutte le colonne piu' un pulsante "Apri" che faceva comparire una
   scheda stretta di lato: si leggevano due volte le stesse cose e la
   scheda, che e' la parte che conta, restava compressa.

   Adesso l'elenco serve solo a scegliere (codice e descrizione, niente
   altro) e la scheda si prende tutto lo spazio che resta. La barra fra i
   due e' lo stesso splitter del piano delle chiavi.
   ================================================================== */

.schedario {
    --col-sx: 280px;
    --barra: 9px;

    display: grid;
    grid-template-columns: var(--col-sx) var(--barra) minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - 210px);
}

/* La colonna dell'elenco: alta quanto la finestra, con l'intestazione
   ferma e solo l'elenco che scorre. Altezza fissa e non minima, altrimenti
   trecento righe allungano la pagina invece dell'elenco. */
.schedario-elenco {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: calc(100vh - 210px);
    align-self: start;
    position: sticky;
    top: 12px;
}

.schedario-elenco .pannello {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.schedario-testa {
    padding: 10px 12px;
    background: var(--tinta-intestazione);
    border-bottom: 1px solid var(--linea);
    flex: 0 0 auto;
}

.schedario-testa input[type="text"] { width: 100%; max-width: none; }

.schedario-testa .conteggio {
    display: block;
    margin-top: 6px;
    color: var(--inchiostro-tenue);
    font-size: 11px;
}

.schedario-lista {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.schedario-lista ul { list-style: none; margin: 0; padding: 0; }

.schedario-lista .voce {
    border-bottom: 1px solid #ece9e4;
}

.schedario-lista .voce a {
    display: block;
    padding: 7px 12px;
    text-decoration: none;
    color: var(--inchiostro);
    line-height: 1.35;
}

.schedario-lista .voce a:hover { background: var(--tinta-riga); }

/* La riga scelta si vede senza doverla cercare: e' l'unico riferimento
   che l'operatore ha per sapere che cosa sta guardando a destra. */
.schedario-lista .voce-corrente a,
.schedario-lista .voce-corrente a:hover {
    background: var(--ambra-chiara);
    box-shadow: inset 3px 0 0 var(--ambra);
    font-weight: 600;
}

.schedario-lista .voce-codice {
    display: inline-block;
    min-width: 46px;
    margin-right: 8px;
    color: var(--ambra);
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
}

.schedario-lista .voce-nota {
    display: block;
    margin-top: 1px;
    color: var(--inchiostro-tenue);
    font-size: 11px;
}

/* Una riga barrata e' una voce disattivata: si vede a colpo d'occhio
   senza aggiungere una colonna di stato. */
.schedario-lista .voce-spenta a { color: var(--inchiostro-tenue); }
.schedario-lista .voce-spenta .voce-nome { text-decoration: line-through; }

.schedario-lista .vuoto {
    padding: 16px 12px;
    color: var(--inchiostro-tenue);
    font-size: 12px;
}

/* La scheda. I comandi stanno in testa, non in fondo: sono la prima cosa
   che si cerca dopo aver scelto una voce, e in fondo a una scheda lunga
   finivano sotto la piega. */
.schedario-scheda { min-width: 0; }

.schedario-scheda .pannello { margin-bottom: 16px; }

.scheda-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--linea);
}

.scheda-testa h2 { margin: 0; }

.scheda-testa .comandi { display: flex; gap: 6px; flex-wrap: wrap; }

.scheda-vuota {
    padding: 40px 20px;
    text-align: center;
    color: var(--inchiostro-tenue);
    font-size: 13px;
}

/* Sotto una certa larghezza le due colonne non ci stanno: l'elenco torna
   sopra la scheda, alto quanto basta, e la barra sparisce perche' non c'e'
   piu' niente da ridimensionare. */
@media (max-width: 900px) {
    .schedario { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .schedario > .splitter { display: none; }
    .schedario-elenco { height: auto; max-height: 320px; position: static; margin-bottom: 16px; }
}

/* ---------- Gestione utenti ---------- */

/* Il pulsante di ricerca c'e' per chi naviga da tastiera e per chi non ha
   JavaScript, ma nella colonna stretta occupa spazio: l'invio nel campo fa
   la stessa cosa. Nascosto alla vista, non all'ordine di tabulazione. */
.nascosto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.griglia-abilitazioni td { padding: 4px 8px; }
.griglia-abilitazioni select { max-width: none; width: 100%; }
.griglia-abilitazioni td:first-child { width: 45%; }

.riga-fascia { margin-top: 10px; align-items: center; }
.riga-fascia .stretto { width: 82px; }

.elenco-stato { margin: 0 0 12px; padding-left: 18px; }
.elenco-stato li { margin: 3px 0; }

/* La password provvisoria si vede una volta sola: va letta senza sforzo e
   selezionata senza prendere dentro le etichette. */
.password-provvisoria {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    padding: 10px 12px;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-radius: 3px;
}

.password-provvisoria .etichetta {
    color: var(--inchiostro-tenue);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.password-provvisoria code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    user-select: all;
}

/* ---------- Registro accessi ---------- */

.filtri { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filtri .campo { margin-bottom: 0; }
.filtri .strumenti { margin-bottom: 2px; }

.esito-buono { color: var(--verde); }
.esito-cattivo { color: var(--errore); font-weight: 600; }
.esito-attenzione { color: #78350f; }
.esito-neutro { color: var(--inchiostro-tenue); }

/* La stringa del programma usato e' lunghissima: nella tabella se ne mostra
   un pezzo, per intero resta nel suggerimento del mouse. */
.browser { color: var(--inchiostro-tenue); font-size: 11px; cursor: help; }

/* Intestazione di gruppo dentro l'elenco stretto: separa le famiglie senza
   aggiungere una colonna. Resta ferma in cima mentre si scorre il gruppo. */
.schedario-lista .voce-gruppo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 5px 12px;
    background: var(--tinta-intestazione);
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    color: var(--inchiostro-tenue);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.schedario-lista .voce-gruppo:first-child { border-top: none; }

/* ---------- Download ---------- */

/* Piu' campi sulla stessa riga quando ci stanno: la scheda e' larga e
   impilarli tutti verticalmente la farebbe scorrere per niente. */
.riga-campi { display: flex; gap: 16px; flex-wrap: wrap; }
.riga-campi .campo { flex: 1 1 240px; }
.riga-campi .campo-corto { flex: 0 0 auto; }

/* La tabella dei file: quattordici righe per sei campi. Le caselle si
   allargano con la colonna invece di restare a misura fissa. */
.griglia-file td { padding: 3px 6px; vertical-align: middle; }
.griglia-file input[type="text"] { width: 100%; max-width: none; margin: 0; }
.griglia-file .stretto { max-width: 90px; }
.griglia-file .etichetta-file { white-space: nowrap; font-weight: 600; }

.griglia-file .riga-gruppo td {
    padding: 7px 6px 4px;
    background: var(--tinta-intestazione);
    color: var(--inchiostro-tenue);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------- Dispositivi ---------- */

/* Il riquadro di un'operazione che sta per essere eseguita: si stacca dalla
   scheda perche' quello che c'e' dentro cambia i dati di due dispositivi. */
.riquadro-operazione {
    margin-top: 14px;
    padding: 14px;
    background: var(--ambra-chiara);
    border: 1px solid #fcd34d;
    border-radius: 3px;
}

.riquadro-operazione h3 { margin-top: 0; }

/* Dati in sola lettura, etichetta e valore su due colonne. */
.scheda-dati {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 16px;
    margin: 0;
}

.scheda-dati dt { color: var(--inchiostro-tenue); font-size: 12px; }
.scheda-dati dd { margin: 0; }

/* Nello storico, la riga del dispositivo che si sta guardando. */
.griglia .riga-corrente td {
    background: var(--ambra-chiara);
    font-weight: 600;
}

/* Una nota che avverte, non che spiega e basta. */
.nota-attenzione {
    padding: 8px 10px;
    background: var(--ambra-chiara);
    border-left: 3px solid var(--ambra);
    border-radius: 2px;
    color: #78350f;
    max-width: none;
}

/* Colonna di sinistra divisa in due: clienti sopra, loro dispositivi sotto,
   con la barra orizzontale in mezzo. Stessa meccanica del piano delle
   chiavi, e infatti usa la stessa variabile e lo stesso splitter. */
.schedario-elenco.con-sottoelenco {
    display: grid;
    grid-template-rows: var(--riga-clienti, 55%) var(--barra, 9px) minmax(0, 1fr);
    gap: 0;
}

.schedario-elenco.con-sottoelenco .pannello {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* L'intestazione del sottoelenco porta il nome del cliente e il conteggio
   sulla stessa riga. */
.schedario-elenco .schedario-testa .conteggio { margin-top: 4px; }

/* ---------- Scelta dei giorni per i turni ---------- */

.scelta-giorni {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Le spunte dei giorni in fila, ciascuna con la sua etichetta accanto:
   un turno lun-ven si compone guardando una riga sola. */
.giorni label {
    display: inline-block;
    margin: 0 12px 0 4px;
    font-weight: normal;
}

.giorni input[type="checkbox"] { margin: 0; }

.scorciatoie { display: flex; gap: 10px; flex-wrap: wrap; }

.scorciatoia {
    font-size: 12px;
    color: var(--ambra);
    text-decoration: none;
    border-bottom: 1px dotted var(--ambra);
}

.scorciatoia:hover { border-bottom-style: solid; }

.riga-fascia label {
    margin: 0 2px;
    color: var(--inchiostro-tenue);
    font-weight: normal;
}