/* ==========================================================================
   ZeroDue Rent — foglio di stile unico.
   Prefissi: dr-  design system · nav- testata · cal- calendario · md- modali
   ========================================================================== */

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

:root {
    /*  I tre colori sono presi dal logo: il blu della targhetta "NOLEGGIO", il blu
        scuro di "DUE" e il rosso di "ZERO" e "RENT". Non sono derivati a occhio.
        Regola che tiene insieme tutto: il rosso va solo su fondo chiaro, sul blu ci va
        il bianco — è quello che fa il logo, e rosso su blu vibra.  */
    --dr-marchio: #056dc7;
    --dr-marchio-scuro: #000477;
    --dr-marchio-chiaro: #e6f1fa;
    --dr-accento: #bc0306;
    --dr-testo: #1a1a1a;
    --dr-testo-2: #6b7280;
    --dr-bordo: #e5e7eb;
    --dr-bordo-forte: #d1d5db;
    --dr-sfondo: #ffffff;
    --dr-sfondo-2: #fafafa;

    --dr-ok: #22c55e;
    --dr-attesa: #f59e0b;
    --dr-ko: #ef4444;
    --dr-fermo: #6b7280;

    --dr-rosso-riga: #fee2e2;
    --dr-rosso-riga-bordo: #fca5a5;

    --dr-raggio: 12px;
    --dr-raggio-sm: 8px;
    --dr-ombra: 0 2px 16px rgba(0, 0, 0, .07);

    /* Calendario: la mezza riga è l'unità di tutto. */
    --dr-mezza: 27px;
    --dr-riga: 54px;
    --dr-col-giorno: 74px;
    /*  Metà di prima: con ventisette mezzi la larghezza della colonna decide quanti se ne
        vedono insieme, ed è quello il motivo per cui si apre il calendario. Nome e targa
        vengono troncati con i puntini quando non ci stanno.  */
    --dr-col-veicolo: 64px;
    /*  Altezza della testata: la usano sia le sue celle sia le etichette dei blocchi, che
        si fermano esattamente sotto di essa.  */
    --dr-testata: 46px;
}

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

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--dr-testo);
    background: var(--dr-sfondo-2);
    line-height: 1.45;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* ── Schermata di avvio ────────────────────────────────────────────────── */

.dr-boot {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.25rem; background: var(--dr-marchio); color: #fff;
}
.dr-boot-logo {
    width: min(220px, 60vw); height: auto;
    background: #fff; padding: .7rem 1rem; border-radius: var(--dr-raggio);
}
.dr-boot-barra { width: 180px; height: 3px; background: rgba(255,255,255,.18); border-radius: 3px; overflow: hidden; }
.dr-boot-barra span {
    display: block; width: 40%; height: 100%; background: #fff;
    animation: dr-scorri 1.1s ease-in-out infinite;
}
@keyframes dr-scorri {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ── Impianto di pagina ────────────────────────────────────────────────── */

.dr-pagina { min-height: 100vh; display: flex; flex-direction: column; }
.dr-contenuto { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.dr-contenuto-stretto { max-width: 900px; }

.dr-h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; }
.dr-h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
/* Sottotitolo dentro una scheda, per raggruppare campi che vanno letti insieme. */
.dr-h3 {
    font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: var(--dr-testo-2); margin: 1rem 0 .5rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--dr-bordo);
}
.dr-muto { color: var(--dr-testo-2); font-size: .875rem; }

.dr-card {
    background: #fff; border: 1px solid var(--dr-bordo); border-radius: var(--dr-raggio);
    padding: 1.1rem; box-shadow: var(--dr-ombra);
}
.dr-card + .dr-card { margin-top: 1rem; }

.dr-riga-flex { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dr-spazio { flex: 1; }
.dr-sezione { margin-top: 1.5rem; }

.dr-vuoto {
    padding: 2.5rem 1rem; text-align: center; color: var(--dr-testo-2);
    border: 1px dashed var(--dr-bordo-forte); border-radius: var(--dr-raggio); background: #fff;
}

/* ── Bottoni ───────────────────────────────────────────────────────────── */

.dr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .6rem 1rem; border-radius: var(--dr-raggio-sm); border: 1px solid transparent;
    font-size: .875rem; font-weight: 700; cursor: pointer; transition: filter .15s, background .15s;
    background: var(--dr-marchio); color: #fff; white-space: nowrap;
}
.dr-btn:hover:not(:disabled) { filter: brightness(1.35); }
.dr-btn:disabled { opacity: .5; cursor: not-allowed; }
.dr-btn-chiaro { background: #fff; color: var(--dr-testo); border-color: var(--dr-bordo-forte); }
.dr-btn-chiaro:hover:not(:disabled) { background: var(--dr-sfondo-2); filter: none; }
.dr-btn-verde { background: var(--dr-ok); }
.dr-btn-rosso { background: var(--dr-ko); }
.dr-btn-sm { padding: .35rem .65rem; font-size: .8rem; }
.dr-btn-blocco { width: 100%; }

/* ── Campi ─────────────────────────────────────────────────────────────── */

.dr-campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; }
.dr-label { font-size: .78rem; font-weight: 700; color: var(--dr-testo-2); text-transform: uppercase; letter-spacing: .03em; }
.dr-input, .dr-select, .dr-textarea {
    width: 100%; padding: .58rem .7rem; border: 1px solid var(--dr-bordo-forte);
    border-radius: var(--dr-raggio-sm); font-size: .9rem; background: #fff; color: var(--dr-testo);
}
.dr-input:focus, .dr-select:focus, .dr-textarea:focus {
    outline: 2px solid var(--dr-marchio); outline-offset: -1px; border-color: var(--dr-marchio);
}
.dr-textarea { min-height: 78px; resize: vertical; }
.dr-griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.dr-griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 .8rem; }
.dr-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.dr-check input { width: 17px; height: 17px; accent-color: var(--dr-marchio); }

/* Servizi extra nella modale del noleggio: uno per riga, con il prezzo sotto. */
.nol-servizi {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem .9rem;
    border: 1px solid var(--dr-bordo); border-radius: var(--dr-raggio-sm); padding: .7rem .8rem;
}
.nol-servizio .dr-muto { display: block; margin-top: .15rem; }
.nol-servizio .dr-input { max-width: 90px; }
/* Il nome del servizio è un nome proprio, non l'etichetta di un campo: accanto a una
   spunta resterebbe minuscolo, e in maiuscoletto solo sopra le quantità. */
.nol-servizio .dr-label { text-transform: none; font-size: .9rem; font-weight: 500; color: var(--dr-testo); }

.dr-cerca { position: relative; flex: 1; min-width: 180px; max-width: 340px; }
.dr-cerca .dr-input { padding-left: 2.1rem; background: var(--dr-sfondo-2); }
.dr-cerca svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--dr-testo-2); }

/* Cliente e firma affiancati nella modale del noleggio */
.nol-conducente { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start; }
/*  Senza questo il riquadro della firma, largo 600px, allargherebbe la colonna
    e con lei tutta la modale: qui invece scorre dentro il proprio riquadro.  */
.nol-conducente > * { min-width: 0; }
@media (max-width: 720px) {
    .nol-conducente { grid-template-columns: 1fr; }
}

.nol-azioni-cliente { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }

/*  Veicolo e sua foto, in cima alla scheda del noleggio.  */
.nol-veicolo { display: flex; align-items: flex-start; gap: .8rem; }
.nol-veicolo-foto {
    width: 110px; height: 74px; object-fit: cover; flex: none;
    border-radius: var(--dr-raggio-sm); border: 1px solid var(--dr-bordo); background: var(--dr-sfondo-2);
}

/*  La scheda del conducente si apre dentro la modale del noleggio: rientrata e su
    fondo diverso, così si vede a colpo d'occhio che si sta scrivendo in rubrica
    e non sul noleggio.  */
.nol-scheda-cliente {
    background: var(--dr-sfondo-2); border: 1px solid var(--dr-bordo);
    border-radius: 10px; padding: .9rem .9rem .3rem; margin-bottom: .9rem;
}
.nol-scheda-cliente .nol-azioni-cliente { margin: 0 0 .8rem; }

/* ── Campo firma ───────────────────────────────────────────────────────── */

.firma-riquadro {
    position: relative; overflow-x: auto; overscroll-behavior-x: contain;
    border: 1px dashed var(--dr-bordo-forte); border-radius: var(--dr-raggio-sm);
    background: #fff; width: 100%;
    /*  Nella modale larga il riquadro si fermerebbe al bordo della finestra, lasciando
        mezzo metro di bianco accanto alla firma: non serve più largo del tratto.  */
    max-width: max-content;
}
.firma-riquadro.vuota { background: var(--dr-sfondo-2); }
.firma-riquadro.sola-lettura { border-style: solid; }
.firma-tela {
    /* Larghezza pari al sistema di coordinate: il tocco non va convertito. */
    width: 600px; min-width: 600px; height: 200px;
    display: block; touch-action: none; cursor: crosshair;
}
.firma-riquadro.sola-lettura .firma-tela { cursor: default; }
/*  Le firme importate dall'app precedente sono immagini: si mostrano dentro lo stesso
    riquadro del disegno, senza deformarsi.  */
.firma-immagine { display: block; max-width: 600px; max-height: 200px; height: auto; padding: .3rem; }
.firma-invito {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .3rem;
    color: var(--dr-testo-2); font-size: .82rem; pointer-events: none;
}

/* Sul contratto la firma va rimpicciolita per stare sopra la riga. */
.con-firma-svg { width: 100%; max-width: 260px; height: auto; display: block; margin-bottom: -6px; }
.con-firma-svg img { width: 100%; height: auto; display: block; }

/* ── Campo foto ────────────────────────────────────────────────────────── */

.foto-riquadro {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    border: 1px solid var(--dr-bordo-forte); border-radius: var(--dr-raggio-sm);
    padding: .7rem; background: var(--dr-sfondo-2);
}
.foto-anteprima {
    width: 132px; height: 92px; object-fit: cover; border-radius: 6px;
    background: #fff; border: 1px solid var(--dr-bordo);
}
.foto-vuota {
    width: 132px; height: 92px; border-radius: 6px; background: #fff;
    border: 1px dashed var(--dr-bordo-forte);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; color: var(--dr-testo-2); font-size: .72rem;
}
.foto-azioni { display: flex; flex-direction: column; gap: .4rem; }
/* Il campo file nativo è inutilizzabile: si nasconde e si comanda dalla label. */
.foto-pulsante { position: relative; overflow: hidden; cursor: pointer; }
.foto-pulsante input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0;
}

/* ── Avvisi ────────────────────────────────────────────────────────────── */

.dr-errore, .dr-successo, .dr-avviso {
    padding: .65rem .85rem; border-radius: var(--dr-raggio-sm); font-size: .875rem;
    margin-bottom: .8rem; border: 1px solid;
}
.dr-errore { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.dr-successo { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.dr-avviso { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ── Testata ───────────────────────────────────────────────────────────── */

.nav-barra { background: var(--dr-marchio); color: #fff; position: sticky; top: 0; z-index: 40; }
.nav-interno {
    max-width: 1600px; margin: 0 auto; padding: .55rem 1rem;
    display: flex; align-items: center; gap: .35rem;
    /*  Riferimento per il pannello del menu sui telefoni.  */
    position: relative;
}
.nav-logo { display: flex; align-items: center; margin-right: .8rem; flex: none; }
/*  Il marchio è rosso e blu scuro: sulla barra blu sparirebbe, quindi sta su una
    targhetta bianca — lo stesso trattamento che ha nel logo la scritta "NOLEGGIO".  */
.nav-logo img {
    height: 30px; width: auto;
    background: #fff; padding: 3px 6px; border-radius: var(--dr-raggio-sm);
}
.nav-voci { display: flex; align-items: center; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.nav-voci::-webkit-scrollbar { display: none; }

/*  Il pulsante del menu esiste solo sui telefoni: sopra i 768 px le voci stanno in riga
    e un hamburger sarebbe un clic in più per niente.  */
.nav-hamburger { display: none; }
.nav-voce {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem;
    border-radius: var(--dr-raggio-sm); font-size: .85rem; font-weight: 600;
    color: rgba(255,255,255,.82); white-space: nowrap; border: 1px solid transparent;
}
.nav-voce:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-voce.attiva { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.nav-utente {
    margin-left: auto; display: flex; align-items: center; gap: .5rem; padding-left: .6rem;
}
.nav-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--dr-marchio);
    display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none;
}

/*  L'uscita è un <button> mentre le altre voci sono collegamenti: senza uno sfondo
    dichiarato si prendeva quello grigio predefinito del browser, e in una barra nera
    sembrava una mattonella. Tondo come l'avatar che gli sta accanto, e spento finché non
    lo si tocca — è l'ultima cosa che si vuole premere per sbaglio.  */
.nav-esci {
    width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
    background: transparent; border: none; color: rgba(255,255,255,.65);
    display: grid; place-items: center;
    transition: background .12s, color .12s;
}
.nav-esci:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-esci:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Intestazione con logo ─────────────────────────────────────────────── */

.dr-intestazione {
    background: var(--dr-marchio); color: #fff; padding: 1.5rem 1rem;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.dr-intestazione-logo {
    border-radius: var(--dr-raggio); background: #fff; padding: .6rem .8rem;
    display: grid; place-items: center;
}
/*  Il logo non esce mai dal proprio riquadro: la larghezza fissa è una preferenza,
    il limite al contenitore è una regola. Senza max-width, rimpicciolendo il riquadro
    sui telefoni il logo restava a 132 px e finiva sopra il calendario.  */
.dr-intestazione-logo img { width: 132px; max-width: 100%; height: auto; display: block; }
.dr-intestazione h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: .05em; }

/* ==========================================================================
   CALENDARIO
   Griglia CSS: colonna 1 = giorni, colonne successive = veicoli.
   Ogni giornata occupa due righe (mattino e pomeriggio); un noleggio è un
   singolo elemento che si estende sulle righe che copre, quindi appare come
   un blocco unico anche a cavallo di più giorni.
   ========================================================================== */

.cal-testa { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.cal-mese { font-size: 1.5rem; font-weight: 800; text-transform: capitalize; }
.cal-navigazione { display: flex; gap: .4rem; flex-wrap: wrap; }

.cal-legenda { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--dr-testo-2); margin-bottom: .6rem; }
.cal-legenda-voce { display: inline-flex; align-items: center; gap: .35rem; }
.cal-pallino { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cal-pallino-Pagato { background: var(--dr-ok); }
.cal-pallino-Acconto { background: var(--dr-attesa); }
.cal-pallino-NonPagato { background: var(--dr-ko); }
.cal-pallino-fermo { background: var(--dr-fermo); }
.cal-pallino-rosso { background: var(--dr-rosso-riga); border: 1px solid var(--dr-rosso-riga-bordo); }

/*  Il riquadro è alto quanto il mese che contiene: nessun limite in altezza, quindi in
    verticale non scorre e la barra di scorrimento resta una sola, quella della pagina.
    Due barre verticali una dentro l'altra costringono a indovinare quale si sta muovendo.

    In orizzontale invece scorre, perché le colonne dei veicoli sono più larghe di qualunque
    schermo quando i mezzi sono ventisette.  */
.cal-scorri {
    overflow-x: auto;
    border: 1px solid var(--dr-bordo);
    border-radius: var(--dr-raggio);
    background: #fff;
}

.cal-griglia {
    display: grid;
    /* grid-template-columns e -rows sono impostati inline: dipendono dal numero
       di veicoli e di giorni, e repeat() non accetta variabili CSS come conteggio. */
    position: relative;
    width: max-content;
    min-width: 100%;
}

/* Testata */
.cal-th {
    /*  I livelli del calendario, dal basso: mezze celle, blocchi (2), blocco sotto il mouse
        (3), blocco evidenziato dalla ricerca (4), colonna dei giorni (5), testata (6),
        angolo (7). Il telaio sta sopra al contenuto: un blocco che passa davanti alla
        testata nasconde il nome del veicolo, cioè l'unica cosa che dice a chi appartiene.  */
    position: sticky; top: 0; z-index: 6;
    background: #fff; border-bottom: 2px solid var(--dr-bordo-forte); border-left: 1px solid var(--dr-bordo);
    padding: .5rem .45rem; font-size: .75rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .03em; display: flex; flex-direction: column; justify-content: center;
    min-height: var(--dr-testata); height: var(--dr-testata); overflow: hidden;
}
/*  Con la colonna a 64 px il nome per esteso non ci sta quasi mai: si tronca invece di
    mandare a capo, così l'altezza della testata resta quella di tutte le altre.  */
.cal-th > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-th-targa { font-size: .65rem; font-weight: 600; color: var(--dr-testo-2); letter-spacing: 0; text-transform: none; }
.cal-angolo {
    position: sticky; top: 0; left: 0; z-index: 7;
    background: #fff; border-bottom: 2px solid var(--dr-bordo-forte); border-right: 2px solid var(--dr-bordo-forte);
    padding: .5rem .45rem; font-size: .75rem; font-weight: 800; text-transform: uppercase;
    display: flex; align-items: center; min-height: var(--dr-testata); height: var(--dr-testata);
}

/* Colonna dei giorni */
.cal-giorno {
    position: sticky; left: 0; z-index: 5;
    background: #fff; border-right: 2px solid var(--dr-bordo-forte); border-bottom: 1px solid var(--dr-bordo);
    padding: 0 .5rem; display: flex; flex-direction: column; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.cal-giorno-nome { font-size: .68rem; font-weight: 600; color: var(--dr-testo-2); text-transform: capitalize; }
.cal-giorno.rosso { background: var(--dr-rosso-riga); color: #991b1b; }
.cal-giorno.rosso .cal-giorno-nome { color: #b91c1c; }
.cal-giorno.oggi { box-shadow: inset 3px 0 0 var(--dr-accento); }

/* Mezze celle */
.cal-mezza {
    border-left: 1px solid var(--dr-bordo);
    border-bottom: 1px dashed #f1f2f4;
    background: #fff;
    cursor: pointer;
    position: relative;
}
.cal-mezza.fine-giorno { border-bottom: 1px solid var(--dr-bordo); }
.cal-mezza.rosso { background: var(--dr-rosso-riga); }
.cal-mezza:hover::after {
    content: "+";
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--dr-testo-2); font-weight: 700; font-size: .95rem;
    background: rgba(17, 17, 17, .06);
}
/* Visibile solo ai lettori di schermo */
.dr-solo-lettori {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cal-griglia:focus-visible { outline: 3px solid var(--dr-marchio); outline-offset: -3px; }
kbd {
    font-family: inherit; font-size: .78em; padding: 1px 5px; border-radius: 4px;
    border: 1px solid var(--dr-bordo-forte); background: #fff; box-shadow: 0 1px 0 var(--dr-bordo-forte);
}

/* Periodo in corso di selezione */
.cal-mezza.selezionata { background: #dbeafe; box-shadow: inset 0 0 0 1px #60a5fa; }
.cal-mezza.selezionata::after { content: none; }
/* Cella sotto al noleggio che si sta trascinando */
.cal-mezza.bersaglio-drop { background: #dcfce7; box-shadow: inset 0 0 0 2px var(--dr-ok); }
/* Durante il trascinamento di un blocco le celle non devono mostrare il "+" */
.cal-griglia.in-spostamento .cal-mezza:hover::after { content: none; }
.cal-blocco.in-trascinamento { opacity: .35; }
.cal-blocco[draggable="true"] { cursor: grab; }

/* Blocchi: si estendono su più righe e appaiono come un unico rettangolo. */
.cal-blocco {
    z-index: 2;
    margin: 2px 3px;
    border-radius: 7px;
    border-left: 4px solid;
    padding: 3px 6px;
    font-size: .74rem;
    line-height: 1.15;
    /*  clip e non hidden: hidden farebbe del blocco un contenitore di scorrimento, e
        l'etichetta al suo interno si ancorerebbe al blocco invece che alla finestra.
        Le due righe sono volute: un browser che non conosce clip tiene hidden e si
        comporta come prima — l'etichetta resta in cima al blocco — invece di non
        ritagliare più niente.  */
    overflow: hidden;
    overflow: clip;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 1px;
    text-align: left;
    border-top: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
    transition: box-shadow .12s;
}
/*  Niente sollevamento al passaggio del mouse: una trasformazione su un antenato diventa
    il riquadro di contenimento di ciò che sta dentro, e l'etichetta ancorata rimbalzerebbe
    in cima al blocco ogni volta che ci si passa sopra.  */
/*  Sotto il mouse il blocco sale sopra gli altri blocchi, non sopra il telaio.  */
.cal-blocco:hover { box-shadow: 0 3px 10px rgba(0,0,0,.16); z-index: 3; }

/*  L'etichetta scende insieme allo scorrimento e si ferma sotto la testata, restando
    dentro il proprio blocco: su un noleggio di due settimane si vede sempre di chi è.  */
.cal-blocco-contenuto {
    position: sticky; top: var(--dr-testata);
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.cal-blocco-nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-blocco-meta { font-size: .65rem; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*  Consegna in alto, rientro in fondo, con la freccia in mezzo: le due date cadono sui
    giorni che indicano, invece di stare entrambe in cima e costringere a rileggerle.  */
.cal-blocco-quando { font-size: .62rem; opacity: .8; white-space: nowrap; }
.cal-blocco-chiusura {
    margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.cal-blocco-verso { font-size: .6rem; opacity: .55; line-height: 1; }
.cal-blocco-freccia { font-size: .6rem; opacity: .6; text-align: center; line-height: 1; }

.cal-blocco-Pagato { background: #dcfce7; border-color: var(--dr-ok); color: #14532d; }
.cal-blocco-Acconto { background: #fef3c7; border-color: var(--dr-attesa); color: #78350f; }
.cal-blocco-NonPagato { background: #fee2e2; border-color: var(--dr-ko); color: #7f1d1d; }
.cal-blocco-Concluso { opacity: .62; }
.cal-blocco-fermo {
    background: repeating-linear-gradient(45deg, #e5e7eb 0 6px, #d1d5db 6px 12px);
    border-color: var(--dr-fermo); color: #374151;
}
.cal-blocco-evidenziato { outline: 3px solid var(--dr-marchio); outline-offset: -1px; z-index: 4; }
.cal-blocco-sbiadito { opacity: .25; }

.cal-nessun-veicolo { padding: 2rem 1rem; text-align: center; color: var(--dr-testo-2); }

/* Filtro veicoli */
.cal-chip-riga { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }
.cal-chip {
    padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--dr-bordo-forte);
    background: #fff; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.cal-chip.attivo { background: var(--dr-marchio); color: #fff; border-color: var(--dr-marchio); }

/* ── Modali ────────────────────────────────────────────────────────────── */

.md-sfondo {
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    overflow-y: auto;
}
.md-finestra {
    background: #fff; border-radius: var(--dr-raggio); width: 100%; max-width: 560px;
    padding: 1.25rem; box-shadow: 0 20px 60px rgba(0,0,0,.3); position: relative;
    max-height: calc(100vh - 2rem); overflow-y: auto;
}
.md-finestra-larga { max-width: 1000px; }

/*  La scheda del noleggio ospita il riquadro della firma, largo 600 px perché il tratto
    non si deformi. In una modale da 560 px quel riquadro scorre in orizzontale e la firma
    si legge a pezzi: dove lo schermo lo permette la finestra si allarga quanto basta a
    mostrarla intera accanto ai dati del conducente. Sotto questa soglia resta com'era,
    perché una modale più larga della finestra sarebbe peggio del riquadro che scorre.  */
@media (min-width: 1200px) {
    .md-finestra-noleggio { max-width: 1140px; }
    /*  Allargare la finestra non basta: con due colonne uguali la firma ne riceve la
        metà e continua a scorrere. La sua colonna prende esattamente la larghezza del
        riquadro, e quel che resta va ai dati del conducente.  */
    .md-finestra-noleggio .nol-conducente { grid-template-columns: minmax(0, 1fr) auto; }
}
.md-titolo { font-size: 1.1rem; font-weight: 800; margin-bottom: .9rem; padding-right: 2rem; }
.md-chiudi {
    position: absolute; top: .7rem; right: .7rem; width: 32px; height: 32px;
    border: none; background: var(--dr-sfondo-2); border-radius: 50%; cursor: pointer;
    font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.md-azioni { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }

/* I documenti firmati ai tempi di Glide: stanno sopra i pulsanti che generano quelli
   nuovi, staccati da un filo, perché sono un archivio e non un'azione da fare. */
.nol-originali {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--dr-bordo);
}

/* ── Elenchi ───────────────────────────────────────────────────────────── */

.dr-elenco { display: flex; flex-direction: column; }
.dr-elemento {
    display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem;
    border-bottom: 1px solid var(--dr-bordo); background: #fff;
}
.dr-elemento:first-child { border-top-left-radius: var(--dr-raggio); border-top-right-radius: var(--dr-raggio); }
.dr-elemento:last-child { border-bottom: none; border-bottom-left-radius: var(--dr-raggio); border-bottom-right-radius: var(--dr-raggio); }
.dr-elemento:hover { background: var(--dr-sfondo-2); }
.dr-elemento-corpo { flex: 1; min-width: 0; }
.dr-elemento-titolo { font-weight: 700; font-size: .92rem; }
.dr-elemento-meta { font-size: .78rem; color: var(--dr-testo-2); }
.dr-miniatura {
    width: 54px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--dr-sfondo-2); flex: none;
}

/* Riordino dell'elenco veicoli */
.dr-maniglia { cursor: grab; color: var(--dr-bordo-forte); font-size: 1rem; letter-spacing: -3px; user-select: none; flex: none; }
.dr-elemento[draggable="true"]:active .dr-maniglia { cursor: grabbing; }
.dr-elemento.in-trascinamento { opacity: .4; }
.dr-elemento.bersaglio { box-shadow: inset 0 3px 0 var(--dr-accento); }
.dr-frecce { display: flex; flex-direction: column; gap: 2px; flex: none; }
.dr-frecce .dr-btn { padding: 0 .4rem; line-height: 1.3; font-size: .7rem; }

.dr-etichetta {
    display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.dr-etichetta-Pagato { background: #dcfce7; color: #166534; }
.dr-etichetta-Acconto { background: #fef3c7; color: #92400e; }
.dr-etichetta-NonPagato { background: #fee2e2; color: #991b1b; }
.dr-etichetta-Attivo { background: #dbeafe; color: #1e40af; }
.dr-etichetta-Concluso { background: #f3f4f6; color: #374151; }
.dr-etichetta-Annullato { background: #fee2e2; color: #991b1b; }

/*  Le schede vanno a capo invece di scorrere in orizzontale: dentro le impostazioni sono
    dieci, e in una riga che scorre le ultime restavano fuori senza che nulla lo dicesse —
    si scopriva che esistevano solo trascinando a caso.  */
.dr-tab-riga {
    display: flex; flex-wrap: wrap; gap: .15rem .3rem;
    border-bottom: 2px solid var(--dr-bordo); margin-bottom: 1rem;
}
.dr-tab {
    padding: .55rem .85rem; font-size: .875rem; font-weight: 700; cursor: pointer;
    border: none; background: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
    color: var(--dr-testo-2); white-space: nowrap;
}
.dr-tab.attivo { color: var(--dr-testo); border-bottom-color: var(--dr-marchio); }

.dr-paginazione { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; }

/* ── Tabella di mapping dell'importazione ──────────────────────────────── */

.imp-passi { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.imp-passo {
    display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700;
    color: var(--dr-testo-2);
}
.imp-passo-numero {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--dr-bordo); color: var(--dr-testo-2); font-size: .75rem;
}
.imp-passo.attivo { color: var(--dr-testo); }
.imp-passo.attivo .imp-passo-numero { background: var(--dr-marchio); color: #fff; }
.imp-passo.fatto .imp-passo-numero { background: var(--dr-ok); color: #fff; }

.imp-tabella { width: 100%; border-collapse: collapse; font-size: .85rem; }
.imp-tabella th, .imp-tabella td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--dr-bordo); vertical-align: top; }
.imp-tabella th { font-size: .72rem; text-transform: uppercase; color: var(--dr-testo-2); letter-spacing: .03em; }
.imp-esempio { color: var(--dr-testo-2); font-size: .78rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.imp-anteprima { overflow-x: auto; border: 1px solid var(--dr-bordo); border-radius: var(--dr-raggio-sm); }
.imp-anteprima table { border-collapse: collapse; font-size: .78rem; white-space: nowrap; }
.imp-anteprima th, .imp-anteprima td { padding: .35rem .55rem; border-bottom: 1px solid var(--dr-bordo); border-right: 1px solid var(--dr-bordo); }
.imp-problemi { max-height: 320px; overflow-y: auto; }

.dr-riepilogo { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.dr-riepilogo-voce {
    flex: 1; min-width: 110px; padding: .7rem .9rem; border-radius: var(--dr-raggio-sm);
    background: var(--dr-sfondo-2); border: 1px solid var(--dr-bordo);
}
.dr-riepilogo-numero { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.dr-riepilogo-etichetta { font-size: .72rem; color: var(--dr-testo-2); text-transform: uppercase; letter-spacing: .03em; }

/* ── Statistiche ───────────────────────────────────────────────────────── */

.sta-barre {
    display: flex; align-items: flex-end; gap: .5rem; overflow-x: auto;
    padding-bottom: .3rem; min-height: 190px;
}
.sta-barra-colonna { flex: 1; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.sta-barra-valore { font-size: .68rem; color: var(--dr-testo-2); font-weight: 700; height: 1rem; white-space: nowrap; }
.sta-barra {
    width: 100%; height: 130px; background: var(--dr-sfondo-2);
    border-radius: 5px; display: flex; align-items: flex-end; overflow: hidden;
}
.sta-barra-riempimento { width: 100%; background: var(--dr-marchio); border-radius: 5px 5px 0 0; min-height: 2px; }
.sta-barra-etichetta { font-size: .7rem; color: var(--dr-testo-2); white-space: nowrap; }

.sta-utilizzo { display: flex; align-items: center; gap: .5rem; }
.sta-utilizzo-barra { flex: 1; height: 8px; background: var(--dr-sfondo-2); border-radius: 4px; overflow: hidden; min-width: 70px; }
.sta-utilizzo-riempimento { height: 100%; background: var(--dr-marchio-scuro); border-radius: 4px; }

/* ── Pagina Oggi ───────────────────────────────────────────────────────── */

.oggi-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.oggi-colonne .dr-card { margin-top: 0; }

.oggi-riga {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem 0; border-bottom: 1px solid var(--dr-bordo);
}
.oggi-riga:last-child { border-bottom: none; }
.oggi-fascia {
    flex: none; width: 40px; text-align: center; padding: .18rem 0;
    border-radius: 5px; font-size: .66rem; font-weight: 800; letter-spacing: .04em;
}
.oggi-fascia.mattino { background: #e0f2fe; color: #075985; }
.oggi-fascia.pomeriggio { background: #fef3c7; color: #92400e; }

@media (max-width: 900px) {
    .oggi-colonne { grid-template-columns: 1fr; }
}

/* ── Registro modifiche ────────────────────────────────────────────────── */

.reg-azione {
    display: inline-block; padding: .12rem .45rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.reg-Creazione { background: #dcfce7; color: #166534; }
.reg-Modifica { background: #dbeafe; color: #1e40af; }
.reg-Eliminazione { background: #fee2e2; color: #991b1b; }
.reg-Spostamento { background: #fef3c7; color: #92400e; }
.reg-Importazione { background: #ede9fe; color: #5b21b6; }
.reg-Ripristino { background: #fce7f3; color: #9d174d; }
.reg-Accesso { background: #f3f4f6; color: #374151; }

/* ── Contratto stampabile ──────────────────────────────────────────────── */

.con-barra {
    display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
    background: var(--dr-sfondo-2); border-bottom: 1px solid var(--dr-bordo);
    position: sticky; top: 0; z-index: 10;
}
/*  Il foglio ricalca i modelli dell'app precedente, che sono i documenti che i clienti
    hanno già firmato per anni: stessa intestazione con la ragione sociale in rosso
    sottolineata e il logo a destra, stessa fascia nera sul titolo, e soprattutto le stesse
    tabelle — celle con l'angolo smussato, staccate di un pixel, intestazioni su fondo
    grigio. Cambiare aspetto a un contratto non è un restyling: è un documento diverso,
    e chi lo riceve se ne accorge.  */
.con-foglio {
    background: #fff; max-width: 800px; margin: 1.5rem auto; padding: 20px;
    box-shadow: var(--dr-ombra); border: 1px solid var(--dr-bordo); color: #000;
}
.con-testata::after { content: ""; display: table; clear: both; }
.con-logo { display: block; float: right; width: 150px; height: auto; margin: 0 0 .5rem 1rem; }
.con-attivita { float: left; font-size: 75%; font-style: normal; line-height: 1.35; margin: 0 1em 1em 0; }
.con-attivita strong {
    display: block; font-size: 18px; color: #a71a08; text-decoration: underline;
    margin-bottom: .35rem;
}
.con-attivita span { display: block; }

/*  La fascia nera del titolo, come nel modello.  */
.con-titolo {
    background: #000; color: #fff; border-radius: .25em;
    font: bold 80% sans-serif; text-align: center; text-transform: uppercase;
    padding: .4em 0; margin: 0 0 5px;
}
.con-data { font-size: 11px; color: #555; margin-bottom: 1rem; text-align: right; }
.con-sezione { margin-bottom: 1rem; }
.con-sezione h2 { font: bold 90% sans-serif; margin-bottom: .35rem; }

/*  Le due colonne di dati del modello: metà e metà, e una sotto l'altra in stampa
    stretta.  */
.con-colonne { display: flex; gap: 1rem; align-items: flex-start; }
.con-colonne > * { flex: 1; min-width: 0; }

/*  Le tabelle del modello: font piccolo, celle staccate con l'angolo smussato,
    intestazione su fondo grigio e bordo chiaro sul valore.  */
.con-meta, .con-tabella, .con-firme-tabella {
    width: 100%; table-layout: fixed; font-size: 65%;
    border-collapse: separate; border-spacing: 1px; margin: 0;
}
.con-meta th, .con-meta td,
.con-tabella th, .con-tabella td,
.con-firme-tabella th, .con-firme-tabella td {
    border: 1px solid transparent; border-radius: .25em; padding: .3em; text-align: left;
    vertical-align: top; overflow-wrap: anywhere;
}
.con-meta th, .con-tabella th, .con-firme-tabella th { background: #eee; border-color: #bbb; font-weight: 700; }
.con-meta th { width: 35%; }
.con-meta td { width: 65%; border-color: #bbb; }
/*  La tabella degli importi del modello: valori centrati e in grassetto, didascalia a
    sinistra sopra le righe.  */
.con-importi { width: 100%; table-layout: fixed; font-size: 65%; border-collapse: separate; border-spacing: 1px; }
.con-importi th, .con-importi td {
    border: 1px solid transparent; border-radius: .25em; padding: .3em; font-weight: 700;
}
.con-importi th { background: #eee; border-color: #bbb; text-align: left; width: 45%; }
.con-importi td { border-color: #bbb; text-align: left; }
.con-importi caption { text-align: left; font: bold 90% sans-serif; padding: .4rem 0 .5rem; }
.con-saldo th, .con-saldo td { background: #111; color: #fff; border-color: #111; }
.con-stato { font-size: 12px; margin-top: .5rem; }
.con-note { font-size: 12px; white-space: pre-wrap; line-height: 1.5; }
.con-firme span, .con-firma-inline > span { font-size: .72rem; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.con-riga-firma { border-bottom: 1px solid #000; margin-top: 2.5rem; }
/*  Con la firma già disegnata sopra, la riga le va appoggiata sotto senza stacco.  */
.con-firma-svg + .con-riga-firma { margin-top: 0; }

/*  Firme dentro una sezione (franchigia, riconsegna): non affiancate, larghe quanto il disegno.  */
.con-firma-inline { max-width: 260px; margin-top: 1.2rem; }

/* ── Condizioni di noleggio stampate ──────────────────────────────────────── */

.con-condizioni { margin-top: 1.2rem; }
.con-condizioni p { font-size: 12px; margin: 0 0 .5rem; line-height: 1.45; }
.con-condizioni ul { margin: 0 0 .6rem 1.1rem; list-style: disc; font-size: 12px; }
.con-condizioni ul ul { margin: .25rem 0 .35rem 1.1rem; list-style: circle; }
.con-condizioni li { margin-bottom: .25rem; line-height: 1.45; }
.con-condizioni .con-inglese { color: #444; }
.con-condizioni .con-avvisi { list-style: square; }
.con-condizioni .con-aggiuntive { white-space: pre-wrap; }

/*  I titoli del modello: h1 in negativo con le lettere spaziate, h2 in maiuscolo.  */
.con-h1 {
    font: bold 90% sans-serif; letter-spacing: .5em; text-align: center;
    text-transform: uppercase; background: #000; color: #fff; border-radius: .25em;
    padding: .35em 0; margin: 1.2rem 0 .7rem;
}
.con-h2 { font: bold 90% sans-serif; text-transform: uppercase; margin: .9rem 0 .35rem; break-after: avoid; }

.con-tabella th { width: 55%; }
.con-tabella td { border-color: #bbb; }

/*  I numeri dell'assistenza stradale, sotto la colonna di destra come nel modello dello
    scooter.  */
.con-assistenza { font: bold 90% sans-serif; text-transform: uppercase; margin-top: .8rem; line-height: 1.4; }

.con-firme-tabella { margin-top: 1.2rem; break-inside: avoid; }
.con-firme-tabella th, .con-firme-tabella td { width: 25%; text-align: center; }
.con-firme-tabella .con-locatore { line-height: 1.35; text-align: left; }
.con-firme-tabella .con-momento { display: block; font-size: .62rem; color: var(--dr-testo-2); }

/*  I due moduli di restituzione sono discorsivi: un paragrafo che si legge, non una
    tabella di campi come il contratto.  */
.con-discorsivo p { margin-bottom: .7rem; line-height: 1.6; }
.con-discorsivo .con-griglia { margin: .9rem 0; }

@media print {
    /* In stampa resta solo il foglio: niente barre, ombre o margini dello schermo. */
    .con-barra, .nav-barra, .dr-intestazione { display: none !important; }
    body { background: #fff; }
    .con-foglio { margin: 0; padding: 0; box-shadow: none; border: none; max-width: none; }
    .con-sezione, .con-firme, .con-firma-inline { break-inside: avoid; }
    /*  Le tabelle non si spezzano fra due fogli, come nel modello.  */
    .con-importi, .con-tabella, .con-firme-tabella { break-inside: avoid; }
    .con-condizioni p { break-inside: avoid; }
    /*  Verticale con margini stretti: il contratto è già fitto, e i modelli erano tarati
        così.  */
    @page { size: portrait; margin: 12mm; }
}

/*  Il modello manda la seconda parte delle condizioni su una pagina nuova.  */
.con-pagina-nuova { break-before: page; }

@media (max-width: 640px) {
    .con-foglio { padding: 1.2rem; margin: .8rem; }
    .con-griglia, .con-firme { grid-template-columns: 1fr; }
    .con-testata { flex-direction: column; gap: .8rem; }
    .con-attivita { margin-left: 0; text-align: left; }
}

/* ── Accesso ───────────────────────────────────────────────────────────── */

.login-pagina { min-height: 100vh; display: grid; place-items: center; background: var(--dr-marchio); padding: 1rem; }
.login-riquadro { background: #fff; border-radius: var(--dr-raggio); padding: 2rem 1.6rem; width: 100%; max-width: 380px; }
.login-logo { display: block; width: 190px; max-width: 80%; height: auto; margin: 0 auto 1.5rem; }

/* ── Caricamento ───────────────────────────────────────────────────────── */

.dr-caricamento { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2.5rem 1rem; color: var(--dr-testo-2); }
.dr-cerchio {
    width: 18px; height: 18px; border: 2px solid var(--dr-bordo-forte); border-top-color: var(--dr-marchio);
    border-radius: 50%; animation: dr-gira .7s linear infinite;
}
@keyframes dr-gira { to { transform: rotate(360deg); } }

/* ── Errore Blazor ─────────────────────────────────────────────────────── */

#blazor-error-ui {
    background: #fef3c7; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none;
    left: 0; padding: .6rem 1.25rem .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; font-size: .875rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ── Adattamento a tablet e telefono ───────────────────────────────────── */

/*  Su tablet e telefono la colonna si dimezza ancora: lì lo schermo è la risorsa scarsa, e
    quello che serve a colpo d'occhio è *quanti* mezzi sono liberi e quando — il nome per
    esteso si legge toccando il blocco. Sotto i 768 px la targa in testata sparisce: a
    quella larghezza non ci sta comunque, e occupava una riga intera.  */
@media (max-width: 1024px) {
    :root { --dr-col-veicolo: 34px; }
}

@media (max-width: 768px) {
    :root {
        --dr-mezza: 25px;
        --dr-riga: 50px;
        --dr-col-giorno: 62px;
        --dr-col-veicolo: 30px;
    }
    /*  Nome più stretto e targa via: a 30 px la targa non si leggerebbe comunque, e
        toglierla lascia tutta la cella al nome.  */
    .cal-th { font-size: .6rem; padding: .35rem .2rem; letter-spacing: 0; }
    .cal-th-targa { display: none; }
    .cal-blocco { font-size: .6rem; padding: 2px 3px; }

    /*  In una colonna da trenta pixel lo spazio non è in larghezza ma in altezza: il nome
        va a capo invece di essere troncato, e le due date stanno agli estremi del blocco.
        Solo sui blocchi abbastanza alti — su mezza giornata il testo a capo verrebbe
        tagliato a metà parola, e lì è meglio il nome troncato.  */
    .cal-blocco.alto .cal-blocco-nome {
        white-space: normal; overflow-wrap: anywhere; line-height: 1.05;
    }
    .cal-blocco-quando { font-size: .55rem; }
    /*  La riga unica del periodo non ci sta in trenta pixel: sui blocchi bassi resta solo
        il nome, e il periodo si legge aprendo il noleggio.  */
    .cal-blocco-meta { display: none; }
    .dr-contenuto { padding: .9rem .7rem 3rem; }
    .dr-griglia-2 { grid-template-columns: 1fr; }
    .dr-griglia-3 { grid-template-columns: 1fr; }
    .cal-mese { font-size: 1.25rem; }
    .cal-navigazione .dr-btn { flex: 1; }
    .dr-intestazione { padding: 1rem .8rem; }
    /*  L'altezza segue il logo invece di essere imposta: un quadrato fisso lasciava
        una fascia bianca sopra e sotto un marchio che è largo il doppio di quanto è alto.  */
    .dr-intestazione-logo { width: 88px; padding: .4rem .5rem; }
    .nav-logo span, .nav-logo-testo { display: none; }

    /*  Menu a tendina al posto della striscia che scorre.  */
    .nav-hamburger {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 38px; height: 34px; padding: 0 8px; flex: none; cursor: pointer;
        background: rgba(255,255,255,.1); border-radius: var(--dr-raggio-sm);
    }
    .nav-hamburger span { display: block; height: 2px; background: #fff; border-radius: 2px; }

    .nav-voci {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: .1rem;
        background: var(--dr-marchio); padding: .5rem .6rem .8rem;
        border-top: 1px solid rgba(255,255,255,.15);
        box-shadow: 0 14px 30px rgba(0,0,0,.35);
        max-height: calc(100vh - 60px); overflow-y: auto;
    }
    .nav-voci.aperto { display: flex; }
    .nav-voci .nav-voce { padding: .7rem .8rem; font-size: .95rem; }
}

@media (max-width: 560px) {
    :root {
        --dr-mezza: 24px;
        --dr-riga: 48px;
        --dr-col-giorno: 56px;
        --dr-col-veicolo: 26px;
    }
    .cal-blocco { font-size: .58rem; padding: 2px 3px; margin: 1px 1px; }
    .cal-giorno { padding: 0 .3rem; font-size: .74rem; }
    .md-finestra { padding: 1rem .85rem; }
}

/* Su schermo tattile il "+" al passaggio del mouse resta impresso dopo il tocco. */
@media (hover: none) {
    .cal-mezza:hover::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}