/* ============================================================
   POSAPP RILIEVO - foglio di stile
   Impianto grafico: tavola tecnica + cartiglio.
   Pensato per l'uso in cantiere: bersagli ampi, niente comandi
   a forma di link, impaginazione che regge sullo schermo stretto.
   ============================================================ */

:root {
    --carta: #f4f3ef;
    --carta-chiara: #fbfaf7;
    --inchiostro: #22201d;
    --inchiostro-tenue: #6b675f;
    --quota: #1e406e;
    --quota-chiara: #e7edf6;
    --opzionale: #9a6614;
    --opzionale-chiara: #f7efe1;
    --linea: #cfcac0;
    --linea-forte: #9e9a92;
    --errore: #9b2c2c;
    --errore-chiara: #fdf3f3;
    --verde: #2f6b46;
    --zoom: 1;

    /* altezza minima dei bersagli tattili */
    --tocco: 44px;

    --f-titoli: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
    --f-testo: "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-numeri: "Consolas", "SFMono-Regular", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font-family: var(--f-testo);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

.pagina {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px 20px 96px;
}

/* ---------- barra applicazione ---------- */

.barra-app {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    min-height: 52px;
    background: var(--inchiostro);
    color: var(--carta);
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra-app .marchio {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

/* Sulla barra scura si usa la versione con il contorno bianco: i colori del
   marchio restano quelli aziendali - il nero nero e il blu blu - e il
   contorno serve solo a staccarli dal fondo. Cambiare i colori non sarebbe
   ammesso, e un riquadro bianco dietro farebbe sembrare il marchio
   un'etichetta incollata sopra. */
.barra-app .marchio img {
    display: block;
    height: 26px;
    width: auto;
}

@media (max-width: 520px) {
    .barra-app .marchio img { height: 21px; }
}

.barra-app .marchio b { font-weight: 600; opacity: 0.62; }

.barra-app nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tocco);
    padding: 0 10px;
    font-family: var(--f-titoli);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--carta);
    text-decoration: none;
    opacity: 0.8;
}

.barra-app nav a:hover { opacity: 1; }

.barra-app nav a { gap: 7px; }

.barra-app nav a svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

/* su schermo stretto resta la sola icona: il posto in barra e poco */
@media (max-width: 520px) {
    .barra-app nav a.voce-impostazioni span { display: none; }
}

@media (max-width: 420px) {
    .barra-app { gap: 10px; padding: 0 12px; }
    .barra-app .marchio { font-size: 16px; letter-spacing: 0.1em; }
    .barra-app nav a { font-size: 13px; padding: 0 6px; }
    .pagina { padding: 14px 12px 80px; }
}

/* ---------- cartiglio di testata ---------- */

.cartiglio {
    display: flex;
    flex-wrap: wrap;
    border: 1.5px solid var(--inchiostro);
    background: var(--carta-chiara);
    margin-bottom: 18px;
}

.cartiglio-titolo {
    padding: 12px 16px;
    border-right: 1.5px solid var(--inchiostro);
    flex: 1 1 300px;
}

.cartiglio-titolo h1 {
    font-family: var(--f-titoli);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
}

.cartiglio-titolo p {
    margin: 4px 0 0;
    color: var(--inchiostro-tenue);
    font-size: 14px;
}

.cartiglio-dato {
    padding: 10px 16px;
    border-right: 1px solid var(--linea);
    min-width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cartiglio-dato:last-child { border-right: 0; }

.cartiglio-dato .voce {
    font-family: var(--f-titoli);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.cartiglio-dato .valore {
    font-family: var(--f-numeri);
    font-size: 15px;
    margin-top: 2px;
}

@media (max-width: 700px) {
    .cartiglio-titolo {
        flex: 1 1 100%;
        border-right: 0;
        border-bottom: 1.5px solid var(--inchiostro);
    }
    .cartiglio-titolo h1 { font-size: 23px; }
    .cartiglio-dato { flex: 1 1 0; min-width: 96px; padding: 8px 12px; }
}

/* ---------- schede ---------- */

.scheda {
    border: 1.5px solid var(--inchiostro);
    background: var(--carta-chiara);
    margin-bottom: 18px;
}

/* la barra applicazione e fissa: lo scorrimento automatico si ferma piu in basso,
   altrimenti coprirebbe il titolo della scheda */
.scheda { scroll-margin-top: 64px; }

/* evidenzia per un istante il pannello appena aperto da un comando */
.scheda.appena-aperto {
    border-color: var(--quota);
    box-shadow: 0 0 0 4px var(--quota-chiara);
}

.scheda > h2 {
    font-family: var(--f-titoli);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1.5px solid var(--inchiostro);
}

.scheda-corpo { padding: 16px; }

/* ---------- moduli ---------- */

.modulo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.campo-modulo { display: flex; flex-direction: column; grid-column: span 3; }
.campo-modulo--largo { grid-column: span 6; }
.campo-modulo--pieno { grid-column: span 12; }
.campo-modulo--stretto { grid-column: span 2; }
/* cella con solo un pulsante accanto ai campi: si allinea in basso, alla stessa
   altezza degli input (che stanno sotto la loro etichetta) */
.campo-modulo--pulsante { justify-content: flex-end; }
.campo-modulo--pulsante .bottone { white-space: nowrap; }

.campo-modulo label {
    font-family: var(--f-titoli);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    margin-bottom: 5px;
}

/* 16px evita lo zoom automatico dei campi su iOS.
   I tipi vanno elencati tutti: Telefono ed Email nascono type="tel"/"email"
   (TextMode Phone/Email), e senza gli stessi min-height/padding restavano piu
   bassi degli altri campi - brutti da vedersi accanto a quelli di testo. */
.campo-modulo input[type="text"],
.campo-modulo input[type="password"],
.campo-modulo input[type="file"],
.campo-modulo input[type="date"],
.campo-modulo input[type="time"],
.campo-modulo input[type="tel"],
.campo-modulo input[type="email"],
.campo-modulo input[type="number"],
.campo-modulo input[type="url"],
.campo-modulo input[type="search"],
.campo-modulo textarea,
.campo-modulo select {
    font-family: var(--f-testo);
    font-size: 16px;
    min-height: var(--tocco);
    padding: 9px 11px;
    border: 1px solid var(--linea-forte);
    border-radius: 3px;
    background: #fff;
    color: var(--inchiostro);
    width: 100%;
}

.campo-modulo select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b675f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 34px;
}

/* selettore colore dello stato (mazzetta): un quadrato del colore scelto */
.campo-modulo input[type="color"] {
    min-height: var(--tocco);
    width: 64px;
    padding: 4px;
    border: 1px solid var(--linea-forte);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.campo-modulo input[readonly] {
    background: rgba(207, 202, 192, 0.32);
    color: var(--inchiostro-tenue);
}

/* Pulsante "Scegli dalla lista": apre la videata di scelta del materiale. Sta
   sotto il campo, a tutta larghezza per toccarlo bene da telefono. */
.campo-modulo .scelta-materiale-btn {
    margin-top: 8px;
    width: 100%;
}

/* Il codice materiale e sempre maiuscolo: lo si vede mentre si digita (il valore
   viene comunque messo in maiuscolo al salvataggio, lato server). */
.campo-modulo input.materiale-input { text-transform: uppercase; }

/* Controllo presente ma non mostrato: es. il pulsante che salva la foto, ora
   fatto partire dalla sola scelta del file. */
.nascosto { display: none !important; }

/* Pallino colorato dello stato del rilievo (anagrafica, testata, elenco cantieri) */
.pallino-stato {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    margin-right: 8px; vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* nome dello stato accanto al pallino nelle liste */
.stato-nome { vertical-align: middle; }
/* pallino e nome sempre sulla stessa riga, senza andare a capo */
.tabella td.cella-stato { white-space: nowrap; }

/* Lucchetto ROSSO: documento bloccato dalla sede (BloccaModificheWEB). L'emoji non si colora,
   si usa un'icona SVG che eredita il colore via fill:currentColor. Nelle liste (accanto allo stato). */
.lucchetto-bloccato {
    display: inline-flex; align-items: center; vertical-align: middle;
    color: #d32f2f; margin-left: 6px;
}
.lucchetto-bloccato svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* Badge ben visibile in cima alla scheda (Testata di Cantiere/OdlCantiere) quando bloccato */
.badge-bloccato {
    display: inline-flex; align-items: center; gap: 6px;
    background: #d32f2f; color: #fff;
    font-size: .62em; font-weight: 700; line-height: 1;
    padding: 4px 10px; border-radius: 999px; vertical-align: middle;
    margin-left: 12px; text-transform: uppercase; letter-spacing: .4px;
}
.badge-bloccato svg { width: 1.25em; height: 1.25em; fill: currentColor; }

/* Una tabella larga (molte colonne) scorre in orizzontale dentro il suo riquadro
   invece di sfondare il bordo. Sotto i 720px la tabella diventa a schede e non
   serve piu. */
.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Posa dei fori sulla planimetria (PlanimetriaFori.aspx). L'immagine fa da
   sfondo, i marker sono posizionati in percentuale cosi reggono lo zoom. */
.plan-area { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.plan-img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.plan-area--inserimento, .plan-area--inserimento .plan-img { cursor: crosshair; }
.plan-marker {
    position: absolute; transform: translate(-50%, -50%); visibility: hidden;
    min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box;
    border-radius: 6px; border: 2px solid #fff; background: #c0392b; color: #fff;
    font-weight: 700; font-size: 13px; line-height: 20px; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: grab; touch-action: none;
}
.plan-marker:active { cursor: grabbing; }
/* fori "da posizionare" (non ancora posati): impilati in alto a sinistra, dall'angolo
   (non centrati) e con un aspetto diverso (grigio tratteggiato) per dire "trascinami" */
.plan-marker--parcheggio {
    transform: none;
    background: #6b665c;
    border-style: dashed;
}
/* comando "Inserisci foro" quando la modalita posa e accesa */
.bottone--attivo { outline: 3px solid rgba(0, 0, 0, .3); outline-offset: 1px; }

/* Esito della lettura posizione (pulsante "Usa la mia posizione"): un rigo
   discreto sotto i comandi dell'indirizzo. */
.stato-posizione {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 13px;
    color: var(--inchiostro-tenue);
}

.campo-modulo textarea { min-height: 92px; resize: vertical; }

/* campo memo: le note di cantiere sono spesso lunghe */
.campo-modulo textarea.nota-lunga {
    min-height: 130px;
    line-height: 1.45;
}

.campo-modulo input:focus,
.campo-modulo textarea:focus,
.campo-modulo select:focus {
    outline: none;
    border-color: var(--quota);
    box-shadow: 0 0 0 3px var(--quota-chiara);
}

.campo-modulo .numerico { font-family: var(--f-numeri); text-align: right; }

/* campo con un comando accanto, per esempio la generazione della chiave */
.campo-con-comando {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.campo-con-comando input[type="text"] { flex: 1 1 auto; min-width: 0; }
.campo-con-comando .bottone { flex: none; white-space: nowrap; }

@media (max-width: 480px) {
    .campo-con-comando { flex-wrap: wrap; }
    .campo-con-comando .bottone { flex: 1 1 100%; }
}

.spunta {
    display: flex;
    align-items: center;
    gap: 12px;
    grid-column: span 12;
    min-height: var(--tocco);
    padding: 8px 12px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: #fff;
    font-size: 15px;
}

.spunta input { width: 24px; height: 24px; accent-color: var(--quota); flex: none; }
.spunta label { cursor: pointer; }

/* Liste con spunta (operatori/attrezzature della squadra): una voce per riga,
   casella grande e comoda da toccare col dito, come le altre spunte. */
.lista-spunte {
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: #fff;
    padding: 6px 12px;
    max-height: 260px;
    overflow-y: auto;
}

.lista-spunte label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
    font-size: 15px;
}

.lista-spunte input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--quota);
}

/* Spunte delle Caratteristiche di base: piu grandi e marcate della casella di
   default, cosi si toccano bene col dito e si leggono a colpo d'occhio. */
.sistema-blocco { margin-bottom: 10px; }
.sistema-spunta input {
    width: 24px; height: 24px;
    accent-color: var(--quota);
    vertical-align: middle;
}
.sistema-spunta label {
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    vertical-align: middle;
}

.sezione {
    font-family: var(--f-titoli);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    grid-column: span 12;
    border-bottom: 1px solid var(--linea);
    padding-bottom: 5px;
    margin-top: 6px;
}

@media (max-width: 820px) {
    .campo-modulo,
    .campo-modulo--largo,
    .campo-modulo--stretto { grid-column: span 6; }
    .campo-modulo--pieno { grid-column: span 12; }
}

@media (max-width: 560px) {
    .campo-modulo,
    .campo-modulo--largo,
    .campo-modulo--stretto { grid-column: span 12; }
}

/* ---------- misure del prodotto: descrizione a sinistra, valore a destra ---------- */

.misure-prodotto {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linea);
    border-radius: 3px;
    overflow: hidden;
}

.misura-riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}

.misura-riga:last-child { border-bottom: 0; }
.misura-riga:nth-child(even) { background: var(--carta-chiara); }

.misura-nome {
    font-size: 15px;
    line-height: 1.25;
    color: var(--inchiostro);
}

.misura-valore {
    width: 100%;
    min-height: var(--tocco);
    font-family: var(--f-numeri);
    font-size: 16px;
    text-align: right;
    padding: 8px 10px;
    border: 1px solid var(--linea-forte);
    border-radius: 3px;
    background: #fff;
    color: var(--inchiostro);
}

.misura-valore:focus {
    outline: none;
    border-color: var(--quota);
    box-shadow: 0 0 0 3px var(--quota-chiara);
}

@media (max-width: 480px) {
    .misura-riga { grid-template-columns: minmax(0, 1fr) 108px; gap: 10px; }
    .misura-nome { font-size: 14px; }
}

/* ============================================================
   BOTTONI
   ============================================================ */

.bottone,
.azione {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tocco);
    padding: 10px 20px;
    font-family: var(--f-titoli);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid var(--inchiostro);
    border-radius: 3px;
    background: transparent;
    color: var(--inchiostro);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* i comandi sono tutti a fondo bianco e scritta nera: nessun tasto scuro. La
   .azione (pulsanti-attrezzo degli editor immagine) ha il suo stile a parte. */
.bottone:hover { background: var(--quota-chiara); border-color: var(--quota); }
.bottone:active { transform: translateY(1px); }
.bottone:focus-visible,
.azione:focus-visible { outline: 3px solid var(--quota); outline-offset: 2px; }

.bottone--secondario {
    background: transparent;
    color: var(--inchiostro);
}

.bottone--secondario:hover {
    background: var(--quota-chiara);
    color: var(--inchiostro);
    border-color: var(--quota);
}

/* Comando distruttivo (es. Reset RILIEVI/ODL): rosso pieno, per non premerlo per
   sbaglio scambiandolo con un comando qualsiasi. */
.bottone--pericolo {
    background: var(--errore);
    border-color: var(--errore);
    color: #fff;
}
.bottone--pericolo:hover {
    background: #7f2323;
    border-color: #7f2323;
    color: #fff;
}

/* Scheda che raccoglie comandi distruttivi: cornice e titolo rossi come avviso. */
.scheda--pericolo {
    border: 1px solid var(--errore);
    background: var(--errore-chiara);
}
.scheda--pericolo > h2 { color: var(--errore); }

/* comando non disponibile (es. il tipo che l'utente non puo creare nel wizard):
   resta visibile ma spento, cosi si capisce che c'e ma non e concesso.
   ASP.NET marca i controlli disabilitati con la classe aspNetDisabled */
.bottone:disabled,
.bottone.aspNetDisabled {
    opacity: .42;
    cursor: not-allowed;
    background: transparent;
    border-color: var(--linea-forte);
}

/* Riga-riassunto dei filtri attivi del calendario: il pannello dei filtri si
   chiude dopo l'applicazione (vista stretta) e resta questa a dire cosa e filtrato.
   Compare solo quando c'e almeno un filtro manuale. */
.filtri-attivi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--quota-chiara);
    border: 1.5px solid var(--linea-forte);
    border-radius: 3px;
    font-size: 13px;
}
.filtri-attivi-testo { flex: 1 1 auto; min-width: 0; }
.filtri-attivi-link {
    flex: none;
    font-weight: 600;
    color: var(--quota);
    text-decoration: underline;
    white-space: nowrap;
}
.filtri-attivi-link:hover { color: var(--inchiostro); }

/* modalita "pianifica un rilievo": banner in cima e giorni cliccabili */
.avviso-pianifica {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 10px 0;
    padding: 10px 14px;
    background: var(--quota-chiara);
    border: 1.5px solid var(--quota);
    border-radius: 3px;
    font-size: 14px;
}
.avviso-pianifica-testo { flex: 1 1 auto; min-width: 0; }
.calendario--pianifica .giorno { cursor: pointer; }
.calendario--pianifica .giorno:hover { box-shadow: inset 0 0 0 2px var(--quota); }
/* in scelta data gli appuntamenti si vedono ma non sono attivi: il clic passa
   alla cella del giorno (seleziona la data) invece di aprire l'attivita */
.calendario--pianifica .appuntamento { pointer-events: none; }

/* selezione a intervallo (inizio -> fine): i giorni scelti si evidenziano, gli
   estremi (inizio e fine) piu marcati */
/* selezione del giorno in BLU (non nero): azzurro chiaro di fondo, bordo blu acceso.
   Doppia classe (.giorno.giorno--sel) per vincere sul background di .giorno base,
   definito piu in basso nel file */
.giorno.giorno--sel { background: #dbeafe; }
.giorno.giorno--sel-estremo { box-shadow: inset 0 0 0 2px #2563eb; }

/* modalita normale con selezione del giorno (chi puo creare attivita): il giorno
   e cliccabile, ma gli appuntamenti restano cliccabili (a differenza della
   modalita pianificazione, dove sono inerti) */
.calendario--selezione .giorno { cursor: pointer; }
.calendario--selezione .giorno:hover { box-shadow: inset 0 0 0 2px #93c5fd; }
.avviso-pianifica-azioni { flex: 0 0 auto; }
.avviso-pianifica-azioni .bottone { padding: 6px 12px; }
.avviso-pianifica-azioni .bottone:disabled { opacity: .5; cursor: default; }

/* documento la cui anteprima non si e potuta generare (es. PDF illeggibile o
   sincronizzato dal gestionale): niente icona "immagine rotta", un fondo neutro
   con il nome che resta leggibile nella didascalia sotto */
.foto-scheda.senza-anteprima .foto-apri {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    background: var(--quota-chiara);
    border: 1px dashed var(--linea-forte);
}
.foto-scheda.senza-anteprima img { display: none; }
.foto-scheda.senza-anteprima .foto-apri::after {
    content: "PDF";
    font-family: var(--f-titoli);
    letter-spacing: .12em;
    color: var(--quota);
}

/* "Torna su": pulsante fisso in basso a destra per risalire ai comandi in cima
   sulle schede lunghe (piu leggero di una barra comandi fissa, che ruberebbe
   altezza sul telefono). Bianco con ombra, per staccarsi dal contenuto senza
   fondo scuro. Compare solo dopo aver scorso (.mostra, dal JS). A destra per non
   coprire l'avviso fluttuante, che sta in basso al centro. */
.torna-su {
    position: fixed;
    right: 16px;
    /* il +safe-area tiene il tondo sopra la barra/di sistema in basso su smartphone,
       dove altrimenti finiva coperto e "spariva" */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 250;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--inchiostro);
    border-radius: 50%;
    background: var(--carta-chiara);
    color: var(--inchiostro);
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.torna-su.mostra {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.torna-su:hover { background: var(--quota-chiara); }
.torna-su:active { transform: translateY(1px); }
.torna-su svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Su smartphone il pulsante ancorato a destra puo finire in parte fuori schermo
   (barre di sistema, overflow): lo si sposta a SINISTRA. Su PC resta a destra. */
@media (max-width: 820px) {
    .torna-su {
        left: 16px;
        right: auto;
    }
}

/* "+" flottante del calendario: gemello del "Torna su" ma appena SOPRA (48px del
   tondo + 12 di stacco). Eredita forma, comparsa e lato (anche lo spostamento a
   sinistra su mobile) da .torna-su; l'icona "+" lo distingue. Sfondo accentato per
   leggerlo subito come l'azione "aggiungi". */
.nuovo-flottante { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); background: var(--quota); border-color: var(--quota); color: #fff; }
.nuovo-flottante:hover { background: var(--quota); filter: brightness(1.08); }

/* Menu "3 righe" (Vai al pannello): tondo gemello del "Torna su" ma appena SOPRA di
   esso (il Torna su e' 48px + 16 dal fondo, quindi 76). Apre/chiude la colonnina qui
   sotto. Eredita forma, comparsa (.mostra) e spostamento a sinistra su mobile da
   .torna-su; qui cambia solo la quota dal fondo. */
.salta-menu { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* "Vai al pannello": colonnina di scorciatoie flottanti (Testata/Cliente/Foto/
   Documenti), impilate SOPRA il menu "3 righe" (76 del menu + 48 + 12 di stacco = 134).
   Ogni voce ha il tondo (icona, come il Torna su) e un'etichetta accanto, perche' col
   dito un solo title non si legge. NASCOSTE di default: si mostrano solo quando il menu
   le apre (.aperto, dal JS) e si richiudono allo scroll o dopo 3s, cosi su smartphone le
   scritte non restano sopra i comandi. A destra come i tondi (a sinistra su mobile). */
.salta-schede {
    position: fixed;
    right: 16px;
    bottom: calc(134px + env(safe-area-inset-bottom, 0px));
    z-index: 250;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* con molti pannelli su uno schermo basso la colonnina non deve sfondare in alto:
       si limita all'altezza disponibile sopra i due tondi e semmai scorre da sola */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
/* niente barra di scorrimento vistosa sulla colonnina (resta comunque scorrevole) */
.salta-schede { scrollbar-width: none; }
.salta-schede::-webkit-scrollbar { width: 0; height: 0; }

/* velo che opacizza lo sfondo col menu aperto (lo crea salta-pannelli.js): le scritte
   delle scorciatoie si leggono senza confondersi coi campi sotto, specie su smartphone.
   Sta SOTTO le scorciatoie (250) e sopra la pagina; un tocco sul velo chiude il menu. */
.salta-sfondo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 240;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.salta-sfondo.visibile {
    opacity: 1;
    pointer-events: auto;
}
.salta-schede.aperto {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.salta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.salta-testo {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--inchiostro);
    background: var(--carta-chiara);
    padding: 5px 10px;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    white-space: nowrap;
}
.salta-tondo {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--inchiostro);
    border-radius: 50%;
    background: var(--carta-chiara);
    color: var(--inchiostro);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
    transition: background .15s ease, transform .12s ease;
}
.salta:hover .salta-tondo { background: var(--quota-chiara); }
.salta:active .salta-tondo { transform: translateY(1px); }
.salta-tondo svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* il pannello di arrivo non deve finire sotto la barra fissa in alto (min-height 52px);
   la classe la mette salta-pannelli.js sui pannelli che diventano una scorciatoia */
.scheda--salta { scroll-margin-top: 64px; }

/* Come il "Torna su", su smartphone la colonnina passa a SINISTRA (a destra rischia
   di finire in parte fuori schermo). Li' il tondo va tenuto verso il bordo e
   l'etichetta alla sua destra: si inverte l'ordine della riga. */
@media (max-width: 820px) {
    .salta-schede { left: 16px; right: auto; align-items: flex-start; }
    .salta { flex-direction: row-reverse; }
}

.comandi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

/* Quando la barra dei comandi sta sopra un riquadro serve anche il margine
   sotto: con il solo margine superiore i comandi restano attaccati alla
   scheda che segue. Il margine si applica solo in quel caso, cosi la barra
   in fondo alla pagina non si porta dietro spazio inutile. */
.comandi + .scheda,
.comandi + .calendario,
.comandi + .scelte,
.comandi + .catalogo { margin-top: 16px; }

/* intestazione di una lista (es. "Rilievi da pianificare"): stesso font dei
   titoli scheda ("Scegli la rilevazione"), ma tono piu tenue da sotto-titolo */
.titolo-elenco {
    margin: 18px 0 8px;
    font-family: var(--f-titoli);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}
.titolo-elenco + .catalogo { margin-top: 0; }

/* etichette dell'operazione nel Registro operazioni (audit), un colore per tipo */
.badge-op {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}
.badge-op--n { background: #16794a; }   /* Nuovo */
.badge-op--m { background: #1e5fae; }   /* Modifica */
.badge-op--c { background: #b23b3b; }   /* Cancella */
.badge-op--p { background: #1e406e; }   /* Pianifica */
.badge-op--s { background: #b5772a; }   /* Spianifica */
.badge-op--x { background: #6b3fa0; }   /* Spostato */

/* ============================================================
   OPERATORE IN CANTIERE (OrdineLavoro): bottoni grandi e touch
   ============================================================ */

/* scelta dello stato dei lavori: il radio si nasconde, l'etichetta diventa un
   pulsante grande (dita grosse); quello scelto si evidenzia bene */
.scelta-stato { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.scelta-stato input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.scelta-stato label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 160px;
    min-height: 64px;
    padding: 14px 20px;
    border: 2px solid var(--linea);
    border-radius: 6px;
    background: #fff;
    font-family: var(--f-titoli);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    cursor: pointer;
}
.scelta-stato label:hover { border-color: var(--quota); }
.scelta-stato input[type="radio"]:checked + label {
    border-color: var(--inchiostro);
    background: var(--quota-chiara);
    box-shadow: inset 0 0 0 2px var(--inchiostro);
}
.scelta-stato input[type="radio"]:focus-visible + label { outline: 3px solid rgba(0, 0, 0, .3); }

/* comandi operativi grandi e della STESSA dimensione: niente un bottone grande e
   uno piccolo. Crescono in parti uguali e sono comodi da premere */
.comandi-operatore { display: flex; flex-wrap: wrap; gap: 10px; }
.comandi-operatore .bottone {
    flex: 1 1 220px;
    min-height: 52px;
    justify-content: center;
    font-size: 16px;
}

/* numeri utili: "Ruolo: Nome numero" a sinistra, comando Chiama (con l'icona del
   telefono) a destra, su una riga sola */
.numero-utile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--linea);
}
.numero-utile:last-child { border-bottom: none; }
.numero-utile-testo { flex: 1 1 auto; min-width: 0; font-size: 15px; }

/* dentro un riquadro la barra ha gia il respiro del contenitore */
.scheda-corpo > .comandi:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
    .comandi { gap: 8px; }
    .comandi .bottone { flex: 1 1 100%; }
}

/* ---------- comando FOTO: pilota il campo di caricamento nativo ---------- */

.scatto {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* il campo nativo resta raggiungibile da tastiera e lettori di schermo,
   ma non si vede: al suo posto agisce l'etichetta-comando.
   Il primo selettore serve a superare .campo-modulo input[type="file"],
   che altrimenti gli rimetterebbe larghezza piena. */
.campo-modulo input[type="file"].scatto-sorgente,
.scatto-sorgente {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Il tasto della fotocamera e un comando come gli altri: fondo chiaro e
   scritta scura. Prima aveva il colore pieno delle azioni negli elenchi, e
   sul chiaro della scheda la scritta bianca si leggeva male. */
.scatto-comando {
    cursor: pointer;
    flex: 0 0 auto;
}

.scatto-comando svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scatto-sorgente:focus + .scatto-comando {
    outline: 3px solid var(--quota);
    outline-offset: 2px;
}

.scatto-nome {
    font-size: 14px;
    color: var(--inchiostro-tenue);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- bottoni d'azione nelle liste ---------- */

.azione {
    padding: 8px 14px;
    font-size: 14px;
    letter-spacing: 0.06em;
    background: var(--carta-chiara);
    color: var(--quota);
    border: 1.5px solid var(--quota);
}

.azione:hover { background: var(--quota-chiara); }

.azione svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.azione--primaria {
    background: var(--quota);
    border-color: var(--quota);
    color: #fff;
}

.azione--primaria:hover { background: var(--inchiostro); border-color: var(--inchiostro); }

.azione--neutra {
    color: var(--inchiostro);
    border-color: var(--linea-forte);
}

.azione--neutra:hover { background: rgba(207, 202, 192, 0.35); }

.azione--rossa { color: var(--errore); border-color: var(--errore); }
.azione--rossa:hover { background: var(--errore-chiara); }

/* ============================================================
   IMMAGINI DEI PROGETTI
   ============================================================ */

.anteprima-progetto {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: #fff;
}

/* catalogo dei progetti: schede in griglia, l'immagine guida la scelta */
.catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    padding: 16px;
}

.catalogo-voce {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1.5px solid var(--linea-forte);
    border-radius: 3px;
    background: #fff;
    padding: 12px;
}

.catalogo-figura {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    background: var(--carta);
    border-radius: 3px;
}

.catalogo-figura:empty { display: none; }
.catalogo-figura .anteprima-progetto { border: 0; background: transparent; }

.catalogo-dati { display: flex; flex-direction: column; gap: 3px; }

.catalogo-codice {
    font-family: var(--f-numeri);
    font-size: 15px;
    font-weight: 600;
    color: var(--quota);
}

/* numero documento a sinistra, data documento a destra sulla stessa riga */
.catalogo-riga-cod {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.catalogo-data {
    font-family: var(--f-numeri);
    font-size: 12px;
    color: var(--inchiostro-tenue);
    white-space: nowrap;
}
/* tipo documento nella scheda (Pianifica): una piccola targhetta neutra, cosi si
   distingue a colpo d'occhio un rilievo da una visita commerciale (o i tipi d'ordine) */
.catalogo-tipodoc {
    display: inline-block;
    align-self: flex-start;
    margin: 2px 0;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11px;
    font-weight: 600;
    color: var(--inchiostro-tenue);
}
.catalogo-tipodoc:empty { display: none; }

.catalogo-descrizione { font-size: 15px; line-height: 1.3; }

.catalogo-note {
    font-family: var(--f-titoli);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.catalogo-voce .azione { width: 100%; }

/* i comandi (Scegli...) vanno sempre in fondo alla scheda: le schede della
   riga hanno pari altezza (grid), cosi i pulsanti restano allineati anche
   quando manca la localita o la descrizione e su piu righe. Niente "onda". */
.catalogo-comandi { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
/* rete di sicurezza: un'azione messa direttamente nella scheda (senza il
   wrapper .catalogo-comandi) resta comunque allineata in fondo */
.catalogo-voce > .azione { margin-top: auto; }

/* i contatti non hanno immagine: schede piu strette e piu numerose per riga */
.catalogo--contatti { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* immagine grande nella scheda prodotto */
.figura-progetto { display: flex; justify-content: center; }
.figura-progetto .anteprima-progetto { max-width: 480px; }

/* miniatura in elenco */
.cella-figura .anteprima-progetto { width: 60px; height: auto; }

/* ============================================================
   TABELLE - a schede quando lo schermo si stringe
   ============================================================ */

.tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.tabella th {
    font-family: var(--f-titoli);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--inchiostro-tenue);
    background: rgba(207, 202, 192, 0.25);
    padding: 9px 12px;
    border-bottom: 1.5px solid var(--inchiostro);
}

/* Le intestazioni ordinabili sono link (postback di ordinamento): non devono
   sembrare collegamenti blu sottolineati, ma le solite intestazioni. Restano
   cliccabili, con un accenno al passaggio del mouse. */
.tabella th a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tabella th a:hover,
.tabella th a:focus {
    color: var(--inchiostro);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tabella td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--linea);
    vertical-align: middle;
}

.tabella tr:hover td { background: var(--quota-chiara); }
.tabella .num { font-family: var(--f-numeri); text-align: right; white-space: nowrap; }

/* nelle colonne data/ora l'ORA va a capo sotto la data (span block): tiene stretta
   la colonna, cosi sul tablet la griglia sfora meno e i comandi restano in vista */
.tabella .ora-sotto {
    display: block;
    font-size: 11px;
    font-weight: normal;
    color: var(--inchiostro-tenue);
}

.tabella .comandi-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.tabella em { color: var(--inchiostro-tenue); }

/* Tablet/desktop (griglia tabellare, sopra i 900px): la colonna dei COMANDI resta
   ANCORATA a destra (sticky), sempre visibile anche quando la griglia e piu larga
   dello schermo e scorre in orizzontale. Cosi "Apri"/"Fori" non finiscono mai fuori
   vista - era il problema sul tablet. Sotto i 900px la tabella e gia a schede. */
@media (min-width: 901px) {
    .tabella th:last-child,
    .tabella td.comandi-riga {
        position: sticky;
        right: 0;
        z-index: 1;
        box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.28);   /* ombra: sotto ci scorre altro */
    }
    .tabella td.comandi-riga { background: #fff; }             /* opaca: copre le colonne che scorrono sotto */
    .tabella th:last-child { background: #f0efec; }
    .tabella tr:hover td.comandi-riga { background: var(--quota-chiara); }
}

/* selettore della risposta dentro la riga: bersaglio pieno e rotella nativa
   del sistema operativo sui dispositivi tattili */
.scelta-variante {
    width: 100%;
    max-width: 340px;
    min-height: var(--tocco);
    font-family: var(--f-testo);
    font-size: 16px;
    padding: 8px 34px 8px 10px;
    border: 1px solid var(--linea-forte);
    border-radius: 3px;
    background: #fff;
    color: var(--inchiostro);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b675f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

.scelta-variante:focus {
    outline: none;
    border-color: var(--quota);
    box-shadow: 0 0 0 3px var(--quota-chiara);
}

@media (max-width: 900px) {
    /* ogni riga diventa una scheda: le intestazioni tornano come etichette */
    .tabella thead { display: none; }

    .tabella,
    .tabella tbody,
    .tabella tr,
    .tabella td { display: block; }

    .tabella { width: 100%; }
    .tabella td { width: auto; }

    .tabella tr {
        /* niente width:100% qui: sommata ai margini sfonderebbe il contenitore */
        border: 1.5px solid var(--linea-forte);
        border-radius: 3px;
        background: #fff;
        margin: 0 12px 12px;
        overflow: hidden;
    }

    .tabella tr:hover td { background: transparent; }

    .tabella td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        text-align: right;
        padding: 9px 12px;
        border-bottom: 1px dashed var(--linea);
    }

    .tabella td::before {
        content: attr(data-etichetta);
        font-family: var(--f-titoli);
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--inchiostro-tenue);
        text-align: left;
        flex: none;
    }

    /* celle vuote: nascoste per non allungare la scheda */
    .tabella td:empty { display: none; }

    .tabella td.comandi-riga {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: stretch;
        text-align: left;
        border-bottom: 0;
        background: rgba(207, 202, 192, 0.2);
        padding: 12px;
    }

    .tabella td.comandi-riga::before { display: none; }

    /* il selettore va a capo sotto la sua etichetta: cosi resta largo e leggibile */
    .tabella td.cella-figura .anteprima-progetto { width: 84px; }
    .tabella td.cella-figura:empty { display: none; }

    .tabella td.cella-scelta { display: block; text-align: left; }
    .tabella td.cella-scelta::before { display: block; margin-bottom: 6px; }
    .tabella td.cella-scelta .scelta-variante { max-width: none; }

    .tabella td.comandi-riga .azione { flex: 1 1 calc(50% - 4px); }
}

@media (max-width: 400px) {
    .tabella td.comandi-riga .azione { flex: 1 1 100%; }
}

/* ============================================================
   TAVOLA QUOTATA
   ============================================================ */

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

@media (max-width: 1050px) {
    .contenuto { grid-template-columns: minmax(0, 1fr); }
}

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

.tavola-testata label {
    font-family: var(--f-titoli);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.tavola-testata input[type="range"] {
    flex: 1 1 160px;
    max-width: 260px;
    height: var(--tocco);
    accent-color: var(--quota);
}

.tavola-testata .percentuale {
    font-family: var(--f-numeri);
    font-size: 14px;
    min-width: 48px;
}

/* nota d'uso: compare solo quando la distinta scende sotto il disegno */
.suggerimento { display: none; }

@media (max-width: 1050px) {
    .suggerimento {
        display: block;
        margin: 0 0 8px;
        padding: 9px 12px;
        border-left: 4px solid var(--linea-forte);
        background: rgba(207, 202, 192, 0.28);
        color: var(--inchiostro-tenue);
        font-size: 14px;
        line-height: 1.35;
    }
}

.tavola-quadro {
    border: 1.5px solid var(--inchiostro);
    background: var(--carta-chiara);
    padding: 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.tavola-scala { position: relative; }

.tavola {
    position: relative;
    transform: scale(var(--zoom));
    transform-origin: 0 0;
}

.tavola img.sfondo {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---------- campi sovrapposti ---------- */

.campo {
    position: absolute;
    display: flex;
    align-items: center;
    /* il box eredita la larghezza dal disegno del sistema muro, a volte troppo
       stretta: un valore a 5-6 cifre (es. 10000) veniva tagliato e si leggeva
       "1000". Una larghezza minima garantisce che il numero si veda per intero
       (puo' sforare leggermente il box sul disegno: meglio un numero leggibile). */
    min-width: 88px;
}

.campo-sigla {
    position: absolute;
    top: -12px;
    left: -8px;
    z-index: 2;
    font-family: var(--f-titoli);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--quota);
    padding: 1px 6px;
    border-radius: 2px;
}

.campo input {
    width: 100%;
    height: 100%;
    font-family: var(--f-numeri);
    font-size: 16px;
    text-align: right;
    /* padding ridotto per lasciare spazio alle cifre (16px resta: meno farebbe
       zoomare iOS al focus). A destra resta il posto per l'unita' (.unita). */
    padding: 0 20px 0 6px;
    color: var(--inchiostro);
    background: var(--carta-chiara);
    border: 1.5px solid var(--quota);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(34, 32, 29, 0.18);
}

.campo .unita {
    position: absolute;
    right: 4px;
    font-size: 10px;
    color: var(--inchiostro-tenue);
    pointer-events: none;
}

.campo input:focus {
    outline: none;
    border-color: var(--inchiostro);
    box-shadow: 0 0 0 3px var(--quota-chiara);
}

.campo--opzionale .campo-sigla { background: var(--opzionale); }

.campo--opzionale input {
    border: 1.5px dashed var(--opzionale);
    background: rgba(251, 250, 247, 0.92);
}

.campo--opzionale input:focus { box-shadow: 0 0 0 3px var(--opzionale-chiara); }

.campo.puntato input {
    border-color: var(--inchiostro);
    box-shadow: 0 0 0 4px rgba(30, 64, 110, 0.22);
}

/* ---------- quote da posizionare (editor del sistema muro) ---------- */

/* Una quota spenta resta nel documento ma non si vede: riaccendendo la spunta
   ricompare dov'era, senza ricaricare la pagina. Serve la regola esplicita
   perche .campo dichiara display:flex, che vincerebbe sull'attributo hidden. */
.campo[hidden] { display: none; }

.tavola--posiziona .campo {
    cursor: grab;
    /* senza questo il dito scorre la pagina invece di trascinare la quota */
    touch-action: none;
}

.tavola--posiziona .campo:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--quota-chiara);
}

.tavola--posiziona .campo.in-movimento {
    cursor: grabbing;
    z-index: 5;
    opacity: 0.85;
}

/* Il riquadro inerte al posto della casella: stesso ingombro e stesso segno di
   quello che comparira nel rilievo, ma qui non si scrive - e un campo
   scrivibile invoglierebbe a provarci. */
.campo-finto {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    font-family: var(--f-titoli);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--inchiostro-tenue);
    background: var(--carta-chiara);
    border: 1.5px solid var(--quota);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(34, 32, 29, 0.18);
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
}

.campo--opzionale .campo-finto {
    border: 1.5px dashed var(--opzionale);
    background: rgba(251, 250, 247, 0.92);
}

/* ---------- distinta quote ---------- */

.distinta {
    border: 1.5px solid var(--inchiostro);
    background: var(--carta-chiara);
}

.distinta h2 {
    font-family: var(--f-titoli);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    padding: 11px 14px;
    border-bottom: 1.5px solid var(--inchiostro);
}

.distinta-gruppo {
    font-family: var(--f-titoli);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    padding: 9px 14px 5px;
    background: rgba(207, 202, 192, 0.22);
    border-bottom: 1px solid var(--linea);
}

.voce-quota {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    min-height: var(--tocco);
    border-bottom: 1px solid var(--linea);
    cursor: pointer;
}

.voce-quota:last-child { border-bottom: 0; }
.voce-quota:hover { background: var(--quota-chiara); }

.voce-quota .sigla {
    font-family: var(--f-titoli);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--quota);
    border-radius: 2px;
    text-align: center;
    padding: 3px 0;
}

.voce-quota--opzionale .sigla { background: var(--opzionale); }
.voce-quota .nome { line-height: 1.25; font-size: 15px; }

/* ============================================================
   MESSAGGI, ESITI, FOTO
   ============================================================ */

.messaggio {
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--linea);
    border-left: 5px solid var(--quota);
    border-radius: 3px;
    background: var(--carta-chiara);
    font-size: 15px;
}

.messaggio--errore {
    border-color: var(--errore);
    border-left-color: var(--errore);
    background: var(--errore-chiara);
    color: var(--errore);
}

.avviso {
    border: 1px solid var(--errore);
    border-left: 5px solid var(--errore);
    border-radius: 3px;
    background: var(--errore-chiara);
    color: var(--errore);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.avviso ul { margin: 6px 0 0; padding-left: 20px; }

.esito {
    margin-top: 14px;
    border: 1px solid var(--linea);
    border-left: 5px solid var(--quota);
    background: var(--carta-chiara);
    padding: 12px 14px;
    font-family: var(--f-numeri);
    font-size: 13px;
    white-space: pre-wrap;
    overflow-x: auto;
}

.foto-elenco {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.foto-scheda {
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
}

.foto-scheda img { display: block; width: 100%; height: 128px; object-fit: cover; }

/* L'anteprima e un link al visualizzatore a schermo pieno: il cursore lo dice,
   e un leggero scurirsi al passaggio conferma che si puo toccare. */
.foto-apri { display: block; cursor: zoom-in; }
.foto-apri:hover img { filter: brightness(0.92); }

.foto-scheda .didascalia {
    padding: 8px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.foto-scheda .didascalia .azione { padding: 6px 10px; }

/* la didascalia ha due azioni (Disegna, Elimina): la descrizione prende lo spazio
   libero e le due icone restano affiancate a destra */
.foto-scheda .didascalia span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* comando "Schizzo" sotto la galleria delle foto */
.comandi--foto { margin-top: 12px; }

/* ============================================================
   EDITOR DI SCHIZZI (Schizzo / OdlSchizzo)
   ============================================================
   Pensato per il tablet: barra comandi SEMPRE in alto (sticky) e foglio in un'area
   a dimensione fissa con pan & zoom. Col dito il foglio non scorre mai la pagina
   (touch-action:none): si disegna, si cancella o si SPOSTA secondo la modalita. */
.schizzo-editor { display: block; }

.schizzo-barra {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fff;                 /* opaco: il foglio ci scorre sotto */
    border: 1px solid var(--linea);
    border-radius: 3px;
}

/* i comandi della barra sono SOLO icona (niente scritte): compatti e chiari.
   Selettore piu forte della regola base delle icone, cosi vince l'override. */
.schizzo-barra .bottone[class*="bottone--ic-"] {
    width: var(--tocco);
    min-width: var(--tocco);
    height: var(--tocco);
    padding: 0;
    font-size: 0;                     /* nasconde l'etichetta, resta l'icona */
    background-position: center;
    background-size: 22px 22px;
    justify-content: center;
}
/* la modalita attiva (Penna/Gomma/Sposta) resta "premuta" */
.schizzo-barra .bottone.attivo {
    background-color: var(--quota-chiara);
    border-color: var(--quota);
    box-shadow: inset 0 0 0 2px var(--quota);
}

.schizzo-sep {
    align-self: stretch;
    width: 1px;
    margin: 2px 2px;
    background: var(--linea);
}

.schizzo-colore {
    width: 40px;
    height: var(--tocco);
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: none;
    cursor: pointer;
    flex: none;
}
.schizzo-spessore { width: 110px; flex: none; }

/* opzioni del testo (carattere + dimensione): compaiono solo in modalita Testo */
.schizzo-opz-testo { display: none; align-items: center; gap: 8px; }
.schizzo-opz-testo.mostra { display: inline-flex; }
.schizzo-select {
    height: var(--tocco);
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: #fff;
    font-size: 13px;
    padding: 0 6px;
}
/* etichetta di testo SCRIVIBILE, creata sul foglio: barretta blu per spostarla +
   campo dove si scrive. Il testo si vede gia com'e (font/dimensione/colore). */
.schizzo-etichetta {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    display: inline-flex;
    flex-direction: column;
    touch-action: none;
}
/* senza questo, il display:inline-flex qui sopra vince sull'attributo [hidden] del
   browser e l'etichetta resterebbe SEMPRE visibile (anche appena entrati e dopo aver
   scritto): la si nasconde davvero solo quando ha l'attributo hidden */
.schizzo-etichetta[hidden] { display: none; }
.schizzo-etichetta.in-movimento { opacity: 0.85; z-index: 7; }
.schizzo-etichetta-grip {
    height: 34px;
    min-width: 64px;
    background-color: #2563eb;
    /* icona "sposta" (4 frecce) grande e centrata: maniglia chiara e larga per il dito */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M9%207l3-3%203%203M9%2017l3%203%203-3M7%209l-3%203%203%203M17%209l3%203-3%203%22%2F%3E%3C%2Fsvg%3E");
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px 3px 0 0;
    cursor: move;
    touch-action: none;
}
.schizzo-etichetta-input {
    min-width: 3ch;
    margin: 0;
    padding: 0 1px;
    border: none;
    outline: 1px dashed #2563eb;
    line-height: 1;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.schizzo-area {
    position: relative;
    overflow: hidden;
    height: min(74vh, 780px);
    margin-top: 10px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: #e9e9e9;              /* grigio dietro il foglio: se ne vedono i bordi */
    touch-action: none;
}
#schizzoCanvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;           /* pan & zoom via transform translate+scale */
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.15);
    touch-action: none;
    cursor: crosshair;
}

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

/* ============================================================
   ICONE DEI COMANDI
   ============================================================
   Disegni vettoriali incorporati nel foglio di stile: nessun file da
   scaricare, nessuna richiesta in piu, nitidi su qualunque schermo. */

.bottone[class*="bottone--ic-"] {
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 17px 17px;
    padding-left: 40px;
    text-align: left;
    /* icona a sinistra ed etichetta subito accanto: senza questo il centraggio
       del testo (justify-content:center di base) lo porta lontano dall'icona e,
       sullo stretto, gli finisce sotto */
    justify-content: flex-start;
}

.bottone--ic-cerca { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M20%2020l-4.2-4.2%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-mappa { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204L3%206v14l6-2%206%202%206-2V4l-6%202z%22%2F%3E%3Cpath%20d%3D%22M9%204v14M15%206v14%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-posizione { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-persone { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020a6%206%200%200112%200%22%2F%3E%3Cpath%20d%3D%22M16%206a3%203%200%20010%206M17%2020a6%206%200%2000-2-4.5%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-cantiere { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16%22%2F%3E%3Cpath%20d%3D%22M7%2020V6l12%202%22%2F%3E%3Cpath%20d%3D%22M7%206h13%22%2F%3E%3Cpath%20d%3D%22M13%207v4%22%2F%3E%3Cpath%20d%3D%22M11%2011h4%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-indietro { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23222018%22%3E%3Cpath%20d%3D%22M21%2010H11V6l-8%206%208%206v-4h10z%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-avanti { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23222018%22%3E%3Cpath%20d%3D%22M3%2010h10V6l8%206-8%206v-4H3z%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-documenti { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a1%201%200%2000-1%201v16a1%201%200%20001%201h10a1%201%200%20001-1V7z%22%2F%3E%3Cpath%20d%3D%22M14%203v4h4%22%2F%3E%3Cpath%20d%3D%22M9%2012h6M9%2016h6%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-stampa { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%209V4h10v5%22%2F%3E%3Cpath%20d%3D%22M6%2018H5a2%202%200%2001-2-2v-4a2%202%200%20012-2h14a2%202%200%20012%202v4a2%202%200%2001-2%202h-1%22%2F%3E%3Cpath%20d%3D%22M7%2014h10v7H7z%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-salva { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h11l3%203v13H5z%22%2F%3E%3Cpath%20d%3D%22M8%204v6h7V4%22%2F%3E%3Cpath%20d%3D%22M8%2020v-6h8v6%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-elimina { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22M9%207V5h6v2%22%2F%3E%3Cpath%20d%3D%22M6%207l1%2013h10l1-13%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-nuovo { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14%22%2F%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-calendario { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-telefono { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%203h3l1.5%205-2%201.5a12%2012%200%20005%205l1.5-2%205%201.5v3a2%202%200%2001-2%202A16%2016%200%20014.5%205a2%202%200%20012-2z%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-duplica { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%209h11v11H9z%22%2F%3E%3Cpath%20d%3D%22M15%209V4H4v11h5%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-avanti { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23222018%22%3E%3Cpath%20d%3D%22M3%2010h10V6l8%206-8%206v-4H3z%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-misure { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%208h18v8H3z%22%2F%3E%3Cpath%20d%3D%22M7%208v4M11%208v6M15%208v4M19%208v6%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-impostazioni { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%200%201%200%202.83%202%202%200%200%201-2.83%200l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%200%201-2%202%202%202%200%200%201-2-2v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%200%201-2.83%200%202%202%200%200%201%200-2.83l.06-.06a1.65%201.65%200%200%200%20.33-1.82%201.65%201.65%200%200%200-1.51-1H3a2%202%200%200%201-2-2%202%202%200%200%201%202-2h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%200%201%200-2.83%202%202%200%200%201%202.83%200l.06.06a1.65%201.65%200%200%200%201.82.33H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%200%201%202-2%202%202%200%200%201%202%202v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%200%201%202.83%200%202%202%200%200%201%200%202.83l-.06.06a1.65%201.65%200%200%200-.33%201.82V9a1.65%201.65%200%200%200%201.51%201H21a2%202%200%200%201%202%202%202%202%200%200%201-2%202h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-modifica { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209l-4-4L4%2016z%22%2F%3E%3C%2Fsvg%3E"); }
/* "Disegna/Schizzo": lo stesso disegno (pennello) usato sul comando del preview foto */
.bottone--ic-disegna { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019l7-7%203%203-7%207-3-3z%22%2F%3E%3Cpath%20d%3D%22M18%2013l-1.5-7.5L2%202l3.5%2014.5L13%2018l5-5z%22%2F%3E%3Cpath%20d%3D%22M2%202l7.586%207.586%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
/* "Gomma": la classica gomma da cancellare */
.bottone--ic-gomma { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020H8%22%2F%3E%3Cpath%20d%3D%22M5%2013l6-6%206%206-4%204H9z%22%2F%3E%3Cpath%20d%3D%22M11%207l6%206%22%2F%3E%3C%2Fsvg%3E"); }
/* "Testo": la T tipografica (scrivi un appunto) */
.bottone--ic-testo { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%206h14%22%2F%3E%3Cpath%20d%3D%22M12%206v13%22%2F%3E%3Cpath%20d%3D%22M8%2019h8%22%2F%3E%3C%2Fsvg%3E"); }
/* "Sposta": croce con quattro frecce (trascina il foglio senza disegnare) */
.bottone--ic-sposta { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v16M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M9%207l3-3%203%203M9%2017l3%203%203-3M7%209l-3%203%203%203M17%209l3%203-3%203%22%2F%3E%3C%2Fsvg%3E"); }
/* "Zoom +" e "Zoom -": lente con piu/meno */
.bottone--ic-zoom-piu { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M20%2020l-5.5-5.5%22%2F%3E%3Cpath%20d%3D%22M10%207v6M7%2010h6%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-zoom-meno { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M20%2020l-5.5-5.5%22%2F%3E%3Cpath%20d%3D%22M7%2010h6%22%2F%3E%3C%2Fsvg%3E"); }
/* "Adatta": angoli di un riquadro (adatta il foglio allo schermo) */
.bottone--ic-adatta { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209V4h5M20%209V4h-5M4%2015v5h5M20%2015v5h-5%22%2F%3E%3C%2Fsvg%3E"); }
/* "Annulla": freccia di ritorno */
.bottone--ic-annulla { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%208L4%2012l4%204%22%2F%3E%3Cpath%20d%3D%22M4%2012h9a6%206%200%20016%206v1%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-conferma { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012.5l5.5%205.5L20%207%22%2F%3E%3C%2Fsvg%3E"); }
/* "Oggi": calendario col giorno segnato (pallino). "Elenco": tre righe puntate.
   Servono a rendere questi comandi solo-icona su smartphone come gli altri. */
.bottone--ic-oggi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216%22%20r%3D%222.3%22%20fill%3D%22%23222018%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.bottone--ic-elenco { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222018%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h12M8%2012h12M8%2018h12%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%226%22%20r%3D%221%22%20fill%3D%22%23222018%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2212%22%20r%3D%221%22%20fill%3D%22%23222018%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2218%22%20r%3D%221%22%20fill%3D%22%23222018%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }

/* NB: prima qui c'erano le varianti d'icona chiare (:not(.bottone--secondario))
   per il fondo scuro dei comandi principali. I comandi ora sono tutti a fondo
   bianco, quindi l'icona resta sempre quella scura definita sopra. */

/* ============================================================
   ACCESSO
   ============================================================ */

.corpo-accesso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--carta);
}

/* Il riquadro e piu largo di un modulo di accesso comune: l'immagine porta
   due testi affiancati, e stretta non si leggerebbero. I campi restano della
   larghezza giusta perche sotto c'e una colonna sola. */
.riquadro-accesso {
    width: 100%;
    max-width: 560px;
    background: var(--carta);
    border: 1px solid var(--linea);
    padding: 28px 24px 24px;
}

.marchio-accesso {
    display: block;
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--linea);
}

/* l'immagine si allinea ai campi, non ai bordi del riquadro, e ripete il
   raggio degli angoli dei campi di inserimento */
.marchio-accesso img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.modulo--accesso { grid-template-columns: 1fr; }

.comandi--accesso { margin-top: 18px; }
/* il comando a tutta larghezza, senza icona: il disegno spingerebbe il testo
   di lato invece di lasciarlo al centro */
.comandi--accesso .bottone {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-left: 14px;
    background-image: none;
}

/* ============================================================
   UTENTE NELLA BARRA
   ============================================================ */

.utente-barra {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 13px;
    color: var(--inchiostro-tenue);
}

.voce-esci {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--inchiostro-tenue);
    text-decoration: none;
}

.voce-esci svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.voce-esci:hover { color: var(--inchiostro); }

.barra-app nav { display: flex; align-items: center; gap: 16px; width: 100%; }

@media (max-width: 640px) {
    .utente-barra { font-size: 12px; gap: 7px; }
    .utente-barra > :first-child {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================
   PASSWORD APPENA IMPOSTATA
   ============================================================ */

.scheda--evidenza { border-color: var(--inchiostro); }

.password-nuova {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.password-nuova > span:first-child {
    flex: 1 1 auto;
    min-width: 160px;
    padding: 11px 14px;
    background: var(--carta);
    border: 1px solid var(--linea);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 17px;
    letter-spacing: 0.02em;
    user-select: all;
}

.nota-campo {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--inchiostro-tenue);
}

/* ============================================================
   CAMPO PASSWORD
   ============================================================
   Il campo e di tipo testo, non password: un campo password non rimanda il
   proprio valore al server, e la password appena generata andrebbe persa al
   salvataggio. I puntini si ottengono con il carattere, e il comando Mostra
   li toglie. */

.campo-password {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.campo-password input[type="text"] { flex: 1 1 auto; min-width: 0; }

.campo-password .bottone {
    flex: 0 0 auto;
    padding-left: 14px;
    padding-right: 14px;
}

input.password-nascosta {
    -webkit-text-security: disc;
    text-security: disc;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.14em;
}

/* Firefox non conosce text-security: li si usa un carattere apposito, e in
   mancanza resta leggibile - il comando Mostra rende la cosa poco rilevante */
@supports not (-webkit-text-security: disc) {
    input.password-nascosta { color: transparent; text-shadow: 0 0 7px rgba(0,0,0,0.55); }
}

/* ============================================================
   CALENDARIO DI POSA
   ============================================================ */

.barra-calendario {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* barra comandi delle liste (rilievi/ordini): azioni a sinistra, "Cerca" isolato
   a destra come nel calendario. Su smartphone scende in sequenza (vedi media). */
.barra-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.barra-lista .comandi { margin: 0; }
.ricerca-comando { display: flex; gap: 8px; align-items: center; }

.navigazione-mese {
    display: flex;
    align-items: center;
    gap: 8px;
}

.passo-mese {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: var(--carta);
    color: var(--inchiostro);
}

.passo-mese svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.passo-mese:hover { background: var(--carta); }

.mese-corrente {
    min-width: 168px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.ricerca-calendario { display: flex; gap: 8px; align-items: center; }
.ricerca-calendario input[type="text"] { width: 220px; }

/* legenda degli stati presenti nel mese */
.legenda-stati {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-radius: 3px;
    font-size: 13px;
}

.voce-legenda { display: inline-flex; align-items: center; gap: 6px; }

.pallino {
    width: 11px; height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.voce-legenda .quanti { color: var(--inchiostro-tenue); }

/* la griglia: sette colonne di pari larghezza */
.calendario {
    background: var(--carta);
    border: 1px solid var(--linea);
    border-radius: 3px;
    overflow: hidden;
}

/* le righe della griglia si distinguono anche a colpo d'occhio */
.intestazione-calendario span { border-right: 1px solid var(--linea); }

.nome-corto { display: none; }
.intestazione-calendario b { font-weight: inherit; }
.intestazione-calendario span:last-child { border-right: none; }

.intestazione-calendario {
    background: var(--carta);
    border-bottom: 1px solid var(--linea);
}

.intestazione-calendario span {
    padding: 9px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.intestazione-calendario .festivo { color: #9a6a6a; }

/* le caselle stanno in una griglia unica: il Repeater le emette una dopo
   l'altra e la griglia le dispone in righe da sette */
.calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* domenica nascosta (parametro calendario_visualizzaDomenica = 0): 6 colonne */
.calendario--senza-domenica {
    grid-template-columns: repeat(6, 1fr);
}

.intestazione-calendario {
    display: contents;
}

.giorno {
    /* colonna, non blocco: i figli sono elementi della griglia esterna e senza
       questo si affiancherebbero invece di impilarsi */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 84px;
    padding: 5px;
    /* il reticolo va visibile su tutti i lati: senza, le caselle vuote si
       confondono fra loro e non si capisce dove finisca un giorno */
    border-right: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    background: var(--carta);
    /* la casella non si allarga oltre la colonna: senza, un nome lungo
       spingerebbe la griglia fuori squadra */
    min-width: 0;
    overflow: hidden;
}

/* Tutte le caselle portano il tratto a destra, domenica compresa: il bordo del
   riquadro la copre, e senza si perdeva la linea dell'ultima colonna.
   Il conteggio 7n non si puo usare: l'intestazione occupa i primi sette posti
   della griglia e sfasa la numerazione. */


/* nella griglia basta il numero; nell'elenco del telefono serve la data
   per esteso, altrimenti non si capisce di che giorno si tratti */
.solo-elenco { display: none; }

.numero-giorno {
    display: block;
    flex: 0 0 auto;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--inchiostro-tenue);
}

.giorno--altro-mese { background: #f0eeea; }
.giorno--altro-mese .numero-giorno { opacity: 0.45; }

.giorno--festivo .numero-giorno { color: #9a6a6a; }

.giorno--oggi { box-shadow: inset 0 0 0 2px var(--inchiostro); }
.giorno--oggi .numero-giorno { color: var(--inchiostro); }

/* un appuntamento nella casella */
/* il comando diventa un collegamento, che di suo sta in linea e si adatta al
   testo: va reso blocco perche tutti gli appuntamenti abbiano la stessa
   larghezza, indipendente dalla lunghezza del nome */
a.appuntamento,
.appuntamento {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 3px;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 11.5px;
    line-height: 1.32;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.appuntamento:hover { filter: brightness(1.08); }

/* --- Spostamento appuntamenti (drag & drop) --- */
/* le pillole web si trascinano; col dito serve la pressione prolungata (long-press)
   per "agganciare" lo spostamento. touch-action:none tiene il tocco a noi;
   -webkit-touch-callout/user-select:none tolgono il menu nativo (condividi/copia/
   seleziona) che il browser aprirebbe sulla pressione prolungata. */
.appuntamento[data-sposta="1"] {
    cursor: grab;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
/* pillola "agganciata" dal long-press: pronta a essere trascinata (si solleva) */
.appuntamento--pronto {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .38);
    outline: 2px solid var(--quota);
    transform: scale(1.05);
    position: relative;
    z-index: 6;
}
.appuntamento--in-volo { opacity: .28; pointer-events: none; }   /* segnaposto dove stava l'appuntamento */
.appuntamento--ghost {                                 /* la copia che segue il dito/cursore: aderente, niente scala */
    opacity: .97;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    cursor: grabbing;
}
body.sta-trascinando { user-select: none; -webkit-user-select: none; cursor: grabbing; }
/* casella sotto il puntatore: bersaglio d'arrivo */
.giorno--drop { box-shadow: inset 0 0 0 2px var(--quota); background: var(--quota-chiara); }

/* NB drag&drop su touch: serve la pressione prolungata (long-press) per agganciare
   lo spostamento + conferma al rilascio; il permesso "Attiva Drag & Drop"
   (ModCalendarioDragDrop) decide chi puo trascinare. Vedi Calendario.aspx (JS). */
/* conferma dello spostamento, con "Annulla" */
.toast-sposta {
    position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 24px);
    display: flex; align-items: center; gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 11px 16px; border-radius: 6px;
    background: var(--inchiostro); color: var(--carta-chiara);
    font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    opacity: 0; pointer-events: none; z-index: 10000;
    transition: opacity .18s ease, transform .18s ease;
}
.toast-sposta.mostra { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast-annulla {
    flex: none; border: 1px solid var(--carta-chiara); background: transparent;
    color: var(--carta-chiara); border-radius: 4px; padding: 4px 12px;
    font-family: var(--f-titoli); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; cursor: pointer;
}
.toast-annulla:hover { background: var(--carta-chiara); color: var(--inchiostro); }

.appuntamento .ora {
    display: inline;
    font-weight: 700;
    font-size: 10.5px;
    opacity: 0.9;
}

.appuntamento .ora:empty { display: none; }

/* numero del documento (N. …) SULLA STESSA RIGA dell'ora: piu piccolo e NON in
   grassetto, cosi si vede quale rilievo/ODL e pianificato senza allungare la pillola */
.appuntamento .numero-doc {
    display: inline;
    font-weight: 400;
    font-size: 9px;
    opacity: 0.8;
    margin-left: 5px;
    white-space: nowrap;
}
.appuntamento .numero-doc:empty { display: none; }

/* Documento commerciale (visita commerciale o altri tipi che mostrano l'agente):
   si distingue a colpo d'occhio da un rilievo tecnico con un accento caldo. La barra
   a sinistra e un box-shadow INTERNO, cosi si vede sopra qualunque colore di stato
   della pillola; l'etichetta "Commerciale" lo dice a parole. */
.appuntamento[data-commerciale="1"] {
    box-shadow: inset 3px 0 0 0 #e67e22;
}
.appuntamento .tag-commerciale {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 8px;
    background: #e67e22;
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    vertical-align: middle;
}

.appuntamento .cliente {
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appuntamento .luogo {
    display: block;
    font-size: 10.5px;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* persone in coda al riquadro: tecnico (rilievo) o sigle operatori (posa) */
.appuntamento .persone {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appuntamento .persone:empty { display: none; }

/* dettaglio dell'appuntamento */
.riquadro-dettaglio {
    margin-top: 16px;
    background: var(--carta);
    border: 1px solid var(--inchiostro);
    border-radius: 3px;
}

.dettaglio-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea);
}

.dettaglio-testata h2 { margin: 0; font-size: 15px; }

.chiudi-dettaglio {
    display: inline-flex;
    width: 30px; height: 30px;
    align-items: center; justify-content: center;
    color: var(--inchiostro-tenue);
}

.chiudi-dettaglio svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round;
}

.dettaglio-corpo { padding: 14px 16px 16px; }

.voce-dettaglio {
    display: flex;
    gap: 14px;
    padding: 5px 0;
    border-bottom: 1px solid var(--carta);
    font-size: 14px;
}

.voce-dettaglio .nome {
    flex: 0 0 150px;
    font-weight: 600;
    color: var(--inchiostro-tenue);
}

.voce-dettaglio .valore { flex: 1 1 auto; }

@media (max-width: 820px) {
    /* Il calendario resta a griglia mensile anche sul telefono: e cosi che si
       guarda un mese. Le caselle si stringono e gli appuntamenti diventano
       barrette colorate con la sola iniziale del cliente; il dettaglio si
       raggiunge toccando. */
    .giorno {
        min-height: 52px;
        padding: 3px 2px;
    }

    .numero-giorno {
        margin-bottom: 2px;
        font-size: 10.5px;
        text-align: center;
    }

    .solo-elenco { display: none; }

    .intestazione-calendario span {
        padding: 6px 2px;
        font-size: 9.5px;
        letter-spacing: 0;
        text-align: center;
    }

    /* dei nomi dei giorni restano le prime tre lettere */
    .nome-lungo { display: none; }
    .nome-corto { display: inline; }

    .appuntamento {
        padding: 2px 3px;
        margin-bottom: 2px;
        font-size: 9px;
        line-height: 1.15;
    }

    /* su schermo stretto l'attivita TIENE la larghezza ma cresce in ALTEZZA:
       tutte le informazioni restano e vanno a capo, invece di sparire. L'ora e il
       numero del documento restano pero sulla STESSA riga (inline). */
    .appuntamento .cliente,
    .appuntamento .luogo,
    .appuntamento .persone {
        display: block;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .appuntamento .cliente {
        font-weight: 600;
        font-size: 9px;
    }

    .barra-calendario { gap: 8px; }

    /* su smartphone la ricerca delle liste non resta isolata a destra ma scende
       in sequenza dopo gli altri comandi (schermo stretto) */
    .barra-lista { justify-content: flex-start; gap: 8px; }
    .barra-lista .comandi { gap: 8px; }

    .navigazione-mese {
        width: 100%;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .mese-corrente { min-width: 0; flex: 1 1 auto; font-size: 15px; }

    .ricerca-calendario { width: 100%; flex-wrap: nowrap; }

    /* il campo si stringe fino a lasciare posto ai comandi: senza min-width a
       zero un campo di testo non scende mai sotto la propria larghezza naturale
       e spinge fuori quel che gli sta accanto */
    .ricerca-calendario input[type="text"] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .ricerca-calendario .bottone,
    .navigazione-mese .bottone {
        flex: 0 0 auto;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
    }

    /* i comandi con icona della barra restano il solo disegno: la scritta
       sparisce (font-size:0) e l'icona si centra in un quadrato. Con l'etichetta
       il testo finiva sotto l'icona (padding di 12px, icona a 13px) e la barra
       sfondava; il significato resta nel tooltip. */
    .ricerca-calendario .bottone[class*="bottone--ic-"],
    .navigazione-mese .bottone[class*="bottone--ic-"] {
        font-size: 0;
        width: var(--tocco);
        min-width: var(--tocco);
        padding: 0;
        background-position: center;
    }

    .legenda-stati { gap: 10px; font-size: 12px; padding: 8px 10px; }

    .voce-dettaglio { flex-direction: column; gap: 2px; }
    .voce-dettaglio .nome { flex: none; font-size: 12px; }
}

@media (max-width: 480px) {
    /* schermi stretti: le caselle si riducono ancora e del cliente resta
       l'iniziale, quanto basta a distinguere due appuntamenti nello stesso
       giorno. Il nome intero si legge nella maschera dell'ordine. */
    .giorno { min-height: 44px; padding: 2px 1px; }
    .numero-giorno { font-size: 9.5px; }

    .appuntamento {
        padding: 2px;
        font-size: 8px;
    }

    /* anche qui tutto resta e va a capo: niente troncamento */
    .appuntamento .cliente {
        display: block;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    /* schermo molto stretto: il nome del mese si rimpicciolisce un po', cosi ci
       sta accanto ai comandi (ormai sola icona) senza sovrapporsi */
    .mese-corrente { font-size: 13px; }
}

/* ============================================================
   SCHERMATA INIZIALE
   ============================================================ */

.benvenuto {
    margin: 8px 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--linea);
}

.benvenuto h1 {
    margin: 0 0 4px;
    font-size: 22px;
    letter-spacing: -0.01em;
}

.benvenuto p {
    margin: 0;
    font-size: 14px;
    color: var(--inchiostro-tenue);
}

.scelte {
    display: grid;
    /* riquadri piu larghi: con 280 pixel ne stanno tre per riga e la
       descrizione va a capo storta */
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.scelta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    /* tutti i riquadri della riga alti uguale, quale che sia la lunghezza
       della descrizione */
    min-height: 92px;
    background: var(--carta-chiara);
    border: 1px solid var(--linea);
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, transform 0.12s;
}

.scelta:hover {
    border-color: var(--inchiostro);
    transform: translateY(-1px);
}

/* un pannello-scelta disattivato (tipo non consentito dai permessi): un
   LinkButton disabilitato rende <a disabled>. Si spegne e non e cliccabile */
.scelta[disabled] {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.scelta-segno {
    flex: 0 0 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-radius: 3px;
}

.scelta-segno svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--inchiostro);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scelta-testo { display: block; }

.scelta-nome {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
}

.scelta-nota {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--inchiostro-tenue);
}

@media (max-width: 640px) {
    .scelte { grid-template-columns: 1fr; gap: 11px; }
    .scelta { padding: 15px; gap: 13px; }
    .scelta-segno { flex-basis: 44px; height: 44px; }
    .scelta-segno svg { width: 22px; height: 22px; }
    .scelta-nome { font-size: 15px; }
    .benvenuto h1 { font-size: 19px; }
}

/* ============================================================
   CALENDARIO: VISTA A ELENCO
   ============================================================
   Un giorno per riga con gli appuntamenti per esteso. Si passa dall'una
   all'altra con il comando Elenco/Mese. */

.calendario--elenco {
    display: block;
}

.calendario--elenco .intestazione-calendario { display: none; }

.calendario--elenco .giorno {
    display: block;
    min-height: 0;
    padding: 11px 13px;
    border-right: none;
}

/* nell'elenco i giorni vuoti non servono: sono la maggior parte del mese */
.calendario--elenco .giorno:not(.giorno--pieno),
.calendario--elenco .giorno--altro-mese { display: none; }

.calendario--elenco .numero-giorno {
    margin-bottom: 7px;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--inchiostro);
}

.calendario--elenco .solo-griglia { display: none; }
.calendario--elenco .solo-elenco { display: inline; }

.calendario--elenco .appuntamento {
    padding: 7px 10px;
    margin-bottom: 5px;
    font-size: 13px;
}

.calendario--elenco .appuntamento .ora,
.calendario--elenco .appuntamento .luogo,
.calendario--elenco .appuntamento .persone { display: block; }

.calendario--elenco .appuntamento .cliente { font-size: 13.5px; }
.calendario--elenco .appuntamento .luogo { font-size: 12px; }

/* ============================================================
   ICONA E STATO NELL'APPUNTAMENTO
   ============================================================ */

.segno-attivita {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    margin-right: 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* la sigla dello stato: caratteri brevi, spesso simboli */
.sigla-stato {
    display: inline;
    margin-right: 4px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* nell'elenco c'e piu spazio: il segno cresce con il testo */
.calendario--elenco .segno-attivita {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

@media (max-width: 820px) {
    /* nella griglia stretta l'icona resta, l'ora sparisce: il segno dice
       gia di che lavorazione si tratta */
    .segno-attivita { width: 10px; height: 10px; margin-right: 2px; }
    .sigla-stato { margin-right: 2px; }
}

/* ============================================================
   RILEVAZIONE DEI TEMPI
   ============================================================ */

.riga-orari {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.campo-orario {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 1 1 240px;
    min-width: 0;
}

.campo-orario label {
    position: absolute;
    margin-top: -20px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.campo-orario input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 20px;
}

.campo-orario .bottone {
    flex: 0 0 auto;
    margin-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .riga-orari { gap: 26px; }
    .campo-orario { flex-basis: 100%; }
}

/* ============================================================
   COMANDI RIPETUTI IN CIMA E IN FONDO
   ============================================================
   Ogni maschera ha la barra dei comandi due volte: in cantiere si lavora con
   una mano sola e cercare il comando in fondo a una pagina lunga fa perdere
   tempo. Le due barre sono identiche, cambia solo dove stanno. */

/* la barra in cima si stacca dal cartiglio senza sembrare parte del contenuto */
.cartiglio + .comandi,
.messaggio + .comandi {
    margin-top: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linea);
}

/* la barra in fondo prende respiro da sopra */
.scheda + .comandi,
.catalogo + .comandi {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
}

@media (max-width: 560px) {
    .cartiglio + .comandi,
    .messaggio + .comandi { padding-bottom: 11px; }

    .scheda + .comandi,
    .catalogo + .comandi { padding-top: 11px; }
}

/* ============================================================
   QUESTIONARIO DEL VERBALE
   ============================================================ */

.domanda-verbale {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 8px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
}

.domanda-verbale:last-child { border-bottom: none; }

.testo-domanda {
    grid-column: 1;
    font-size: 14.5px;
    line-height: 1.4;
    align-self: center;
}

.risposta-verbale { grid-column: 2; align-self: center; }

/* la nota sta sotto, a tutta larghezza: spesso e piu lunga della domanda */
.nota-verbale {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .domanda-verbale { grid-template-columns: 1fr; gap: 7px; }
    .risposta-verbale { grid-column: 1; }
}


/* ============================================================
   FIRMA SU TELA
   ============================================================ */

.nota-firma {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--inchiostro-tenue);
}

.riquadro-firma {
    border: 1px solid var(--inchiostro);
    border-radius: 3px;
    background: #ffffff;
    overflow: hidden;
}

/* la tela ha una dimensione propria in punti e una a video: qui si adatta
   alla larghezza disponibile mantenendo le proporzioni del riquadro sul
   verbale, cosi la firma esce come e stata tracciata */
.riquadro-firma canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    cursor: crosshair;
}

/* ============================================================
   ANTEPRIMA DELL'EMAIL
   ============================================================ */

.anteprima-email {
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--linea);
    border-radius: 3px;
    font-size: 13.5px;
    line-height: 1.5;
    max-height: 340px;
    overflow-y: auto;
}

/* il modello porta il proprio stile: qui si contiene solo quel che
   sborderebbe dal riquadro */
.anteprima-email img { max-width: 100%; height: auto; }
.anteprima-email h1 { font-size: 15px; margin: 0 0 8px; }
.anteprima-email p { margin: 0 0 8px; }

/* ============================================================
   LOGO NELLE SCHERMATE CHIARE
   ============================================================
   Qui il fondo e chiaro e si usa il logo con il nero originale. Su fondo
   scuro serve LogoChiaro.png, dove il nero diventa color carta: dandogli
   invece un riquadro bianco il marchio risalterebbe come un'etichetta
   incollata sopra, fuori dai colori del resto. */

.logo-accesso {
    display: block;
    margin: 0 0 20px;
}

.logo-accesso img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}


@media (max-width: 560px) {
    .logo-accesso img { max-width: 260px; }
}

/* ============================================================
   ANTEPRIMA DELL'IMMAGINE DI ACCESSO
   ============================================================ */

.anteprima-marchio {
    max-width: 420px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    overflow: hidden;
    background: var(--carta-chiara);
}

.anteprima-marchio img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   MODULI E PERMESSI
   ============================================================ */

.modulo-permessi {
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
}

.modulo-permessi:last-child { border-bottom: none; }

.permesso-titolo { margin-bottom: 8px; }

.permesso-titolo label { font-weight: 600; }

.permesso-titolo small {
    display: block;
    margin-top: 2px;
    margin-left: 26px;
    font-size: 12.5px;
    color: var(--inchiostro-tenue);
}

/* i quattro permessi rientrati sotto il modulo: si vede che dipendono da lui */
.permesso-voci {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-left: 26px;
}

@media (max-width: 560px) {
    .permesso-voci { gap: 6px 16px; }
}

/* i due permessi particolari dell'ordine: si distinguono dai quattro comuni
   perche riguardano funzioni intere, non azioni sul documento */
.permesso-voci--extra {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--linea);
    flex-direction: column;
    gap: 6px;
}

/* ============================================================
   COMANDI SOSPESI
   ============================================================
   Un comando che porta altrove mentre ci sono modifiche non salvate: resta
   visibile ma spento, cosi si capisce che esiste e perche adesso non si puo
   usare. Nasconderlo farebbe pensare a un difetto. */

.bottone--sospeso {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   AVVISO FLUTTUANTE
   ============================================================
   Compare in fondo allo schermo quando qualcosa non va: chi sta lavorando a
   meta modulo lo vede senza doversi spostare. Il riquadro in cima resta
   comunque, perche da li il testo si puo copiare. */

.avviso-fluttuante {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 300;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    max-width: min(560px, calc(100vw - 32px));
    padding: 14px 16px;

    background: var(--inchiostro);
    color: var(--carta);
    border-left: 4px solid var(--errore, #c0392b);
    border-radius: 3px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);

    font-size: 14.5px;
    line-height: 1.45;

    animation: avvisoEntra 0.22s ease-out;
}

@keyframes avvisoEntra {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.avviso-fluttuante--via {
    opacity: 0;
    transition: opacity 0.24s ease-out;
}

.avviso-testo { flex: 1 1 auto; }

.avviso-chiudi {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: var(--carta);
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.7;
}

.avviso-chiudi:hover { opacity: 1; }

/* sul telefono occupa la larghezza utile: il testo di un errore e lungo */
@media (max-width: 560px) {
    .avviso-fluttuante {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        transform: none;
        font-size: 14px;
    }

    @keyframes avvisoEntra {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .avviso-fluttuante--via { transform: none; }
}

/* ============================================================
   CONFIGURAZIONE DELLE QUOTE
   ============================================================
   Dodici riquadri, uno per quota. Ognuno con l'interruttore e le proprieta:
   raggruppandoli si vede a colpo d'occhio quali sono accese. */

.quota-configurabile {
    border: 1px solid var(--linea);
    border-radius: 3px;
    margin-bottom: 10px;
    background: var(--carta-chiara);
}

.quota-testata {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--linea);
    background: var(--carta);
}

.quota-sigla {
    font-family: var(--f-titoli);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    min-width: 32px;
}

.quota-proprieta {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 10px 14px;
    padding: 12px;
    align-items: end;
}

/* I campi dentro una quota occupano una colonna ciascuno. Quelli comuni dei
   moduli ne occupano tre, pensati per una griglia da dodici: qui le colonne
   sono cinque e andrebbero a capo uno per riga. */
.quota-proprieta .campo-modulo { grid-column: auto; }

.anteprima-sfondo {
    max-width: 420px;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: var(--carta-chiara);
}

.anteprima-sfondo img {
    display: block;
    width: 100%;
    height: auto;
}

.nota-campo {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--inchiostro-tenue);
}

@media (max-width: 700px) {
    .quota-proprieta {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   GALLERIA DEI DISEGNI
   ============================================================
   Si mostrano le anteprime grandi e non un elenco di nomi: un disegno si
   riconosce guardandolo. La tela ha un fondo chiaro perche i disegni sono
   a tratto scuro su trasparente. */

.galleria-disegni {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.disegno {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: var(--carta-chiara);
    text-decoration: none;
    color: var(--inchiostro);
}

.disegno:hover {
    border-color: var(--inchiostro);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.disegno-tela {
    display: block;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 2px;
}

.disegno-tela img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
}

.disegno-nome {
    font-weight: 600;
    font-size: 14px;
}

.disegno-scegli {
    margin-top: auto; /* sempre in fondo: allineato anche se il nome va a capo */
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
}

.disegno:hover .disegno-scegli { color: var(--inchiostro); }

@media (max-width: 560px) {
    .galleria-disegni { grid-template-columns: 1fr 1fr; gap: 12px; }
    .disegno-tela img { height: 110px; }
}

/* ============================================================
   ELENCO DEI SISTEMI MURO
   ============================================================
   Come le altre anagrafiche, con l'anteprima del disegno: un sistema si
   riconosce guardandolo prima che leggendone il nome. */

/* una colonna sola: con il disegno accanto ai dati, due schede affiancate
   lasciano le righe strette e il nome va a capo */
.catalogo--sistemi { grid-template-columns: 1fr; }

.catalogo--sistemi .catalogo-voce {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.catalogo--sistemi .catalogo-dati { flex: 1 1 auto; }

.catalogo--sistemi .catalogo-comandi {
    flex: 0 0 auto;
    flex-direction: row;
}

.catalogo-disegno {
    flex: 0 0 auto;
    width: 76px;
    height: 60px;
    padding: 4px;
    border: 1px solid var(--linea);
    border-radius: 3px;
    background: #fff;
}

.catalogo-disegno img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 560px) {
    .catalogo-disegno { width: 58px; height: 46px; }
}