/* =============================================================================
   Gestionale caldaie - foglio di stile

   Scritto a mano e senza framework: poche schermate non giustificano Bootstrap,
   e un file di questa lunghezza si legge tutto in due minuti.

   Impostazione MOBILE-FIRST: le regole di base valgono per il telefono, che e'
   il dispositivo su cui il gestionale viene usato sul campo. Le varianti per
   schermi larghi stanno nella media query in fondo.
   ============================================================================= */

:root {
    --testo:        #1c1c1a;
    --tenue:        #6b6b66;
    --bordo:        #e2e0da;
    --bordo-scuro:  #c9c6bd;
    --sfondo:       #f6f5f2;
    --riquadro:     #ffffff;

    --primario:      #175c7a;
    --primario-cupo: #114457;
    --primario-tenue:#e8f1f5;

    /* Stati delle scadenze. Rosso e arancione non si distinguono bene per chi
       ha difficolta' con i colori: vanno sempre accompagnati dal testo dello
       stato, mai usati da soli. */
    --scaduta:     #a52a21;
    --in-scadenza: #9a5410;
    --futura:      #1c6540;

    --raggio: 8px;
    --raggio-piccolo: 5px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* 16px e' il minimo sotto il quale Safari su iPhone ingrandisce la pagina
       da solo quando si tocca un campo di testo. */
    font-size: 16px;
    line-height: 1.55;
    color: var(--testo);
    background: var(--sfondo);
    -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.4rem; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1rem; margin: 0 0 0.9rem; color: var(--tenue);
     text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

main { max-width: 900px; margin: 0 auto; padding: 1rem 1rem 4rem; }

a { color: var(--primario); }
.tenue { color: var(--tenue); font-size: 0.9rem; }

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

.barra {
    background: var(--riquadro);
    border-bottom: 1px solid var(--bordo);
    /* Resta visibile scorrendo: su un elenco lungo di clienti evita di dover
       risalire in cima per cambiare sezione. */
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra-interno {
    max-width: 900px;
    margin: 0 auto;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.marchio {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--testo);
    text-decoration: none;
    white-space: nowrap;
}

.barra-voci { display: flex; gap: 1rem; margin-left: auto; }

.barra-voci a {
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
}

.barra-voci a.attiva { border-bottom-color: var(--primario); font-weight: 600; }

.in-linea { display: inline; margin: 0; }

/* Pulsante che deve sembrare un collegamento. Serve per il logout, che
   dev'essere una POST: con una GET basterebbe un'immagine su un altro sito
   per far uscire l'utente dall'applicazione. */
.collegamento {
    background: none; border: none; padding: 0;
    font: inherit; font-size: 0.95rem;
    color: var(--tenue); cursor: pointer;
}
.collegamento:hover { color: var(--testo); }

/* -----------------------------------------------------------------------------
   Intestazione di pagina
   ----------------------------------------------------------------------------- */

.intestazione-pagina {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.25rem 0 1rem;
}

.conteggio { margin: 0.15rem 0 0; color: var(--tenue); font-size: 0.9rem; }

.briciole { margin: 0 0 0.5rem; font-size: 0.9rem; }
.briciole a { text-decoration: none; }

.piede-pagina { margin-top: 2rem; font-size: 0.9rem; }

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

.messaggio {
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: var(--raggio-piccolo);
    border-left: 3px solid;
    font-size: 0.95rem;
}

.messaggio.ok     { background: #eaf4ee; border-color: var(--futura); }
.messaggio.errore { background: #fbebe9; border-color: var(--scaduta); }
.messaggio.avviso { background: #fdf3e5; border-color: var(--in-scadenza); }

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

/* Altezza minima 44px su tutti i pulsanti: sotto questa dimensione un
   bersaglio diventa difficile da centrare con il dito, in piedi accanto a
   una caldaia. */
.pulsante, .pulsante-secondario, .pulsante-attenzione,
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--raggio-piccolo);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.pulsante, button[type="submit"] {
    background: var(--primario);
    color: #fff;
}
.pulsante:hover, button[type="submit"]:hover { background: var(--primario-cupo); }

.pulsante-secondario {
    background: var(--riquadro);
    color: var(--testo);
    border-color: var(--bordo-scuro);
}
.pulsante-secondario:hover { border-color: var(--tenue); }

.pulsante-attenzione {
    background: var(--riquadro);
    color: var(--in-scadenza);
    border-color: #e3c9a4;
}
.pulsante-attenzione:hover { background: #fdf3e5; }

.annulla { color: var(--tenue); text-decoration: none; font-size: 0.95rem; }
.azzera  { color: var(--tenue); text-decoration: none; font-size: 0.9rem;
           align-self: center; }

/* -----------------------------------------------------------------------------
   Filtro
   ----------------------------------------------------------------------------- */

.barra-filtro { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.barra-filtro input { flex: 1; min-width: 0; }

/* -----------------------------------------------------------------------------
   Elenco a schede
   ----------------------------------------------------------------------------- */
/* Schede e non tabella: su un telefono una tabella a sei colonne costringe a
   scorrere in orizzontale, che e' il modo piu' rapido per rendere inutile un
   elenco consultato al volo. */

.elenco-schede { list-style: none; padding: 0; margin: 0;
                 display: flex; flex-direction: column; gap: 0.6rem; }

.scheda-riga {
    display: block;
    padding: 0.85rem 1rem;
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    text-decoration: none;
    color: inherit;
}

.scheda-riga:hover { border-color: var(--primario); background: #fdfdfc; }

.scheda-riga-testa {
    display: flex; justify-content: space-between;
    align-items: baseline; gap: 0.75rem;
}

.nominativo { font-weight: 600; }
.codice { font-size: 0.8rem; color: var(--tenue);
          font-variant-numeric: tabular-nums; }

.scheda-riga-dati {
    display: flex; flex-direction: column; gap: 0.1rem;
    margin-top: 0.25rem; font-size: 0.9rem; color: var(--tenue);
}

.scheda-riga-piede { margin-top: 0.5rem; display: flex; gap: 0.4rem; }

.etichetta {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 999px;
    background: var(--primario-tenue);
    color: var(--primario-cupo);
}

.etichetta.archiviato { background: #eeece7; color: var(--tenue); }

.vuoto {
    padding: 2.5rem 1rem;
    text-align: center;
    background: var(--riquadro);
    border: 1px dashed var(--bordo-scuro);
    border-radius: var(--raggio);
}
.vuoto p { margin: 0 0 0.75rem; }

/* -----------------------------------------------------------------------------
   Riquadri e valori calcolati
   ----------------------------------------------------------------------------- */

.riquadro {
    padding: 1.1rem;
    margin-bottom: 1rem;
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.riquadri-valori {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.valore {
    padding: 0.8rem;
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.valore-numero {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.valore-etichetta {
    display: block;
    font-size: 0.82rem;
    color: var(--tenue);
    margin-top: 0.1rem;
}

.elenco-dati { margin: 0; display: grid; gap: 0.75rem; }
.elenco-dati dt { font-size: 0.8rem; color: var(--tenue);
                  text-transform: uppercase; letter-spacing: 0.04em; }
.elenco-dati dd { margin: 0.1rem 0 0; }

.note { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--bordo); }
.note dt { font-size: 0.8rem; color: var(--tenue);
           text-transform: uppercase; letter-spacing: 0.04em; }
.note p { margin: 0.25rem 0 0; white-space: pre-wrap; }

.azioni { display: flex; flex-direction: column; gap: 0.5rem;
          align-items: flex-start; }
.azioni p { margin: 0; }

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

.modulo fieldset {
    margin: 0 0 1rem;
    padding: 1.1rem;
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.modulo legend {
    padding: 0 0.4rem;
    font-size: 0.8rem;
    color: var(--tenue);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.campo { margin-bottom: 0.9rem; }
.campo:last-child { margin-bottom: 0; }

label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
    color: var(--tenue);
}

.obbligatorio { color: var(--scaduta); }

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    /* 16px anche qui: e' il valore che impedisce lo zoom automatico su iOS. */
    font-size: 16px;
    font-family: inherit;
    color: var(--testo);
    background: var(--riquadro);
    border: 1px solid var(--bordo-scuro);
    border-radius: var(--raggio-piccolo);
}

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

textarea { resize: vertical; }

.campo-errato input { border-color: var(--scaduta); }
.errore-campo { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--scaduta); }

.griglia-campi { display: grid; gap: 0.9rem; }

.azioni-modulo {
    display: flex; align-items: center; gap: 1.25rem;
    margin-top: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Riquadro di accesso
   ----------------------------------------------------------------------------- */

.riquadro-accesso {
    max-width: 380px;
    margin: 3rem auto;
    padding: 1.75rem;
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.riquadro-accesso h1 { margin-bottom: 1.25rem; font-size: 1.2rem;
                       text-align: center; }
.riquadro-accesso button[type="submit"] { width: 100%; margin-top: 1.25rem; }

/* -----------------------------------------------------------------------------
   Schermi larghi
   ----------------------------------------------------------------------------- */

@media (min-width: 700px) {
    main { padding: 1.5rem 1.5rem 4rem; }
    h1 { font-size: 1.6rem; }

    .riquadri-valori { grid-template-columns: repeat(4, 1fr); }

    /* Due colonne dove i campi sono naturalmente appaiati:
       cognome/nome, telefono/email. */
    .griglia-campi { grid-template-columns: 1fr 1fr; }

    /* L'indirizzo vuole colonne di larghezza diversa: la via e' lunga,
       il civico e il CAP sono corti. */
    .griglia-indirizzo { grid-template-columns: 3fr 1fr; }
    .griglia-comune    { grid-template-columns: 1fr 3fr; }

    .elenco-dati { grid-template-columns: 1fr 1fr; }
}

/* -----------------------------------------------------------------------------
   Impianti nella scheda cliente
   ----------------------------------------------------------------------------- */

.testa-sezione {
    display: flex; justify-content: space-between;
    align-items: center; gap: 1rem; margin-bottom: 0.9rem;
}
.testa-sezione h2 { margin: 0; }

.compatto { min-height: 36px; padding: 0.35rem 0.75rem; font-size: 0.88rem; }

.elenco-impianti { display: flex; flex-direction: column; gap: 0.75rem; }

.impianto {
    padding: 0.9rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    background: #fdfdfc;
    /* Ancoraggio dalla ricerca per matricola: senza questo margine il blocco
       finisce sotto la barra superiore, che è sticky. */
    scroll-margin-top: 4.5rem;
}

/* Impianto raggiunto tramite ?caldaia=<id>: il titolare è fisicamente davanti
   a questo, deve saltare all'occhio senza nascondere gli altri. */
.impianto.evidenziato {
    border-color: var(--primario);
    background: var(--primario-tenue);
    box-shadow: 0 0 0 3px rgba(23, 92, 122, 0.12);
}

.impianto.archiviato { opacity: 0.62; }

.impianto-testa {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 0.75rem;
}

.impianto h3 {
    margin: 0; font-size: 1rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

.impianto-modello { margin: 0.1rem 0 0; font-size: 0.9rem; color: var(--tenue); }

.modifica-in-linea { font-size: 0.9rem; text-decoration: none; white-space: nowrap; }

.elenco-dati.compatto {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
}
.elenco-dati.compatto dt { font-size: 0.72rem; }
.elenco-dati.compatto dd { font-size: 0.92rem; }

/* La periodicità si legge sempre con l'unità, mai come numero nudo. */
.periodicita {
    margin: 0.75rem 0 0;
    font-size: 0.88rem;
    color: var(--primario-cupo);
    background: var(--primario-tenue);
    padding: 0.35rem 0.6rem;
    border-radius: var(--raggio-piccolo);
    display: inline-block;
}

.note-tecniche {
    margin: 0.6rem 0 0; font-size: 0.9rem;
    color: var(--tenue); white-space: pre-wrap;
}

.impianto-piede {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.75rem; margin-top: 0.75rem;
    padding-top: 0.6rem; border-top: 1px solid var(--bordo);
}

/* -----------------------------------------------------------------------------
   Campi con unità di misura
   ----------------------------------------------------------------------------- */

/* L'unità è stampata accanto al campo e non solo nell'etichetta: è il modo
   più diretto per evitare che "12 mesi" venga digitato come "1" pensando
   a un anno. */
.campo-con-unita { display: flex; align-items: center; gap: 0.5rem; }
.campo-con-unita input { flex: 1; min-width: 0; }

.unita {
    font-size: 0.92rem;
    color: var(--tenue);
    white-space: nowrap;
    font-weight: 500;
}

.nota-campo { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--tenue); }
.nota-campo.superata { color: var(--in-scadenza); }

@media (min-width: 700px) {
    .elenco-dati.compatto { grid-template-columns: repeat(4, 1fr); }
}

/* -----------------------------------------------------------------------------
   Scadenze
   ----------------------------------------------------------------------------- */

/* Il colore è un rinforzo, non l'informazione: rosso e arancione non si
   distinguono bene per chi ha difficoltà con i colori, quindi lo stato è
   sempre scritto anche a parole accanto alla data. */

.scadenze-impianto {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-top: 0.75rem;
}

.scadenza {
    flex: 1 1 auto; min-width: 190px;
    padding: 0.5rem 0.7rem;
    border-radius: var(--raggio-piccolo);
    border-left: 3px solid var(--bordo-scuro);
    background: #f3f2ef;
    font-size: 0.88rem;
}

.scadenza-tipo { display: block; font-weight: 600; }
.scadenza-data { display: block; }
.scadenza-origine {
    display: block; font-size: 0.8rem; opacity: 0.75; font-style: italic;
}

.scadenza.scaduta     { background: #fbebe9; border-color: var(--scaduta);
                        color: var(--scaduta); }
.scadenza.in_scadenza { background: #fdf3e5; border-color: var(--in-scadenza);
                        color: var(--in-scadenza); }
.scadenza.futura      { background: #eaf4ee; border-color: var(--futura);
                        color: var(--futura); }
.scadenza.assente     { color: var(--tenue); border-style: dashed; }

/* -----------------------------------------------------------------------------
   Storico interventi
   ----------------------------------------------------------------------------- */

.storico { margin-top: 1rem; padding-top: 0.85rem;
           border-top: 1px solid var(--bordo); }

.storico-testa {
    display: flex; justify-content: space-between;
    align-items: center; gap: 0.75rem; margin-bottom: 0.6rem;
}

.storico-testa h4 {
    margin: 0; font-size: 0.78rem; color: var(--tenue);
    text-transform: uppercase; letter-spacing: 0.06em;
}

.elenco-interventi { display: flex; flex-direction: column; gap: 0.3rem; }

.intervento {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--raggio-piccolo);
    text-decoration: none;
    color: inherit;
    font-size: 0.9rem;
}

.intervento:hover { background: #f0efec; }

.intervento-data {
    font-variant-numeric: tabular-nums;
    color: var(--tenue);
    white-space: nowrap;
}

.intervento-corpo { display: flex; flex-direction: column; gap: 0.1rem;
                    min-width: 0; }

/* Etichetta del tipo: colori tenui che distinguono senza gridare.
   Il testo resta comunque scritto per esteso. */
.intervento-tipo {
    display: inline-block; align-self: flex-start;
    font-size: 0.75rem; padding: 0.05rem 0.4rem;
    border-radius: 999px; background: #eeece7; color: var(--tenue);
}
.intervento-tipo.tipo-revisione-ordinaria { background: var(--primario-tenue);
                                            color: var(--primario-cupo); }
.intervento-tipo.tipo-revisione-fumi      { background: #e6f0e9;
                                            color: var(--futura); }
.intervento-tipo.tipo-guasto              { background: #f9ece9;
                                            color: var(--scaduta); }
.intervento-tipo.tipo-installazione       { background: #f0ecf7; color: #4a3a73; }

/* Una riga sola: su un elenco lungo la descrizione completa renderebbe
   impossibile scorrere le date, che sono il dato che si cerca. */
.intervento-lavoro {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.intervento-importo {
    font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--tenue);
}

/* <details>: apertura nativa del browser, nessun JavaScript. */
.storico-altri { margin-top: 0.4rem; }
.storico-altri summary {
    cursor: pointer; font-size: 0.88rem; color: var(--primario);
    padding: 0.35rem 0.55rem; min-height: 36px;
    display: flex; align-items: center;
}
.storico-altri summary:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Scelte multiple (tipo di intervento)
   ----------------------------------------------------------------------------- */

/* Pulsanti radio e non tendina: le quattro voci restano tutte visibili con la
   spiegazione di cosa succede alle scadenze, che dentro una tendina si
   perderebbe. */

.scelte { display: flex; flex-direction: column; gap: 0.4rem; }

.scelta {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.6rem 0.7rem; margin: 0;
    border: 1px solid var(--bordo-scuro);
    border-radius: var(--raggio-piccolo);
    background: var(--riquadro);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--testo);
}

.scelta:hover { border-color: var(--primario); }
.scelta input { margin-top: 0.25rem; flex-shrink: 0; }
.scelta:has(input:checked) {
    border-color: var(--primario); background: var(--primario-tenue);
}
.scelta strong { display: block; font-weight: 600; }
.scelta em { display: block; font-size: 0.85rem; color: var(--tenue);
             font-style: normal; }

/* -----------------------------------------------------------------------------
   Riquadro di contesto (a quale impianto appartiene ciò che sto facendo)
   ----------------------------------------------------------------------------- */

.contesto {
    padding: 0.7rem 0.9rem; margin-bottom: 1rem;
    background: var(--primario-tenue);
    border-radius: var(--raggio-piccolo);
    border-left: 3px solid var(--primario);
}
.contesto-cliente { display: block; font-weight: 600; }
.contesto-impianto { display: block; font-size: 0.88rem; color: var(--primario-cupo); }

/* -----------------------------------------------------------------------------
   Utenti e registro attività
   ----------------------------------------------------------------------------- */

.barra-utente { display: flex; align-items: center; gap: 0.9rem; }
.nome-utente { font-size: 0.9rem; text-decoration: none; }

/* Scheda non cliccabile: nell'elenco utenti le azioni sono nel piede,
   la riga intera non porta da nessuna parte. */
.scheda-riga.statica { cursor: default; }
.scheda-riga.statica:hover { border-color: var(--bordo); background: var(--riquadro); }
.scheda-riga.disattivato { opacity: 0.6; }

.azioni-riga { display: flex; gap: 0.9rem; align-items: center; font-size: 0.9rem; }

/* I ruoli hanno colori diversi perché la differenza tra chi vede i dati dei
   clienti e chi no dev'essere leggibile a colpo d'occhio. */
.etichetta.ruolo-amministratore { background: var(--primario-tenue);
                                  color: var(--primario-cupo); }
.etichetta.ruolo-operatore      { background: #e6f0e9; color: var(--futura); }
.etichetta.ruolo-tecnico        { background: #f0ecf7; color: #4a3a73; }

.elenco-audit { display: flex; flex-direction: column; gap: 0.15rem;
                margin-top: 1rem; }

.voce-audit {
    display: grid; grid-template-columns: 1fr; gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    font-size: 0.88rem;
}

.audit-quando { color: var(--tenue); font-variant-numeric: tabular-nums; }
.audit-chi { font-weight: 600; }
.audit-cosa em { font-style: normal; color: var(--tenue); }

.etichetta.azione-delete, .etichetta.azione-anonimizza {
    background: #f9ece9; color: var(--scaduta); }
.etichetta.azione-login_fallito { background: #fdf3e5; color: var(--in-scadenza); }
.etichetta.azione-export { background: #f0ecf7; color: #4a3a73; }

.paginazione {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-top: 1.25rem; font-size: 0.9rem;
}

@media (min-width: 700px) {
    .voce-audit {
        grid-template-columns: 11rem 8rem 1fr;
        align-items: baseline; gap: 0.75rem;
    }
}

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

/* Campo grande: è la prima cosa che serve quando squilla il telefono,
   e va colpito senza mirare. */
.ricerca-principale { display: flex; gap: 0.5rem; margin: 1.25rem 0; }
.ricerca-principale input { flex: 1; min-width: 0; padding: 0.8rem 0.9rem;
                            font-size: 17px; }
.ricerca-principale button { padding: 0.8rem 1.4rem; }

.risultato {
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
}

/* Trovato tramite matricola o targa: si distingue perché il titolare in quel
   momento è fisicamente davanti a quell'impianto. */
.risultato.per-impianto { border-color: var(--primario); }

.risultato-corpo {
    display: block; padding: 0.85rem 1rem;
    text-decoration: none; color: inherit;
}
.risultato-corpo:hover { background: #fdfdfc; }

.impianto-trovato {
    margin-top: 0.5rem; padding: 0.4rem 0.6rem;
    background: var(--primario-tenue);
    border-radius: var(--raggio-piccolo);
    font-size: 0.88rem; color: var(--primario-cupo);
}

/* Dice perché il risultato è comparso: con un campo unico che cerca su otto
   colonne, un risultato inatteso sarebbe altrimenti incomprensibile. */
.motivo {
    display: inline-block; margin-top: 0.45rem;
    font-size: 0.78rem; color: var(--tenue); font-style: italic;
}

.risultato-azioni {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--bordo);
    background: #faf9f7;
}

/* -----------------------------------------------------------------------------
   Dashboard scadenze
   ----------------------------------------------------------------------------- */

.riepilogo-stati { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.etichetta.stato-scaduta     { background: #fbebe9; color: var(--scaduta); }
.etichetta.stato-in_scadenza { background: #fdf3e5; color: var(--in-scadenza); }
.etichetta.stato-futura      { background: #eaf4ee; color: var(--futura); }

.elenco-scadenze { display: flex; flex-direction: column; gap: 0.75rem; }

/* Il colore sta sul bordo del CLIENTE, non sulle singole righe: il cliente
   prende lo stato peggiore fra le sue scadenze, così scorrendo dall'alto si
   lavora già in ordine di priorità. */
.cliente-scadenza {
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--bordo-scuro);
    border-radius: var(--raggio);
    overflow: hidden;
}

.bordo-scaduta     { border-left-color: var(--scaduta); }
.bordo-in_scadenza { border-left-color: var(--in-scadenza); }
.bordo-futura      { border-left-color: var(--futura); }

.cliente-scadenza-testa {
    display: block; padding: 0.8rem 1rem 0.3rem;
    text-decoration: none; color: inherit;
}
.cliente-scadenza-testa:hover .nominativo { text-decoration: underline; }

.indirizzo-scadenza { display: block; font-size: 0.88rem; color: var(--tenue); }

/* Link tel: da smartphone si chiama con un tocco, che è il gesto che questa
   pagina esiste per rendere immediato. */
.telefono-scadenza {
    display: inline-block; margin: 0.15rem 1rem 0.6rem;
    font-size: 0.95rem; font-weight: 500;
    text-decoration: none;
}

.scadenze-cliente { border-top: 1px solid var(--bordo); }

.riga-scadenza {
    display: grid; gap: 0.1rem 0.75rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--bordo);
}
.riga-scadenza:last-child { border-bottom: none; }

/* Scadenza fuori dal mese selezionato: resta visibile ma attenuata.
   Serve a capire se conviene accorpare due uscite in una. */
.riga-scadenza.contesto { opacity: 0.55; }

.riga-impianto { font-weight: 500; }
.riga-impianto em { font-style: normal; font-weight: 400; color: var(--tenue); }
.riga-tipo { color: var(--tenue); font-size: 0.85rem; }

.riga-scadenza.scaduta     .riga-quando { color: var(--scaduta); font-weight: 500; }
.riga-scadenza.in_scadenza .riga-quando { color: var(--in-scadenza); font-weight: 500; }
.riga-scadenza.futura      .riga-quando { color: var(--futura); }

.riga-azione a { font-size: 0.85rem; text-decoration: none; }

.avviso-dati-mancanti { border-style: dashed; margin-top: 1.5rem; }
.elenco-mancanti { list-style: none; padding: 0; margin: 0.75rem 0 0;
                   display: flex; flex-direction: column; gap: 0.35rem; }
.elenco-mancanti a { font-size: 0.9rem; text-decoration: none; }
.elenco-mancanti em { font-style: normal; color: var(--tenue); font-size: 0.85rem; }

@media (min-width: 700px) {
    .riga-scadenza {
        grid-template-columns: 1fr 12rem 13rem 9rem;
        align-items: baseline;
    }
}

/* -----------------------------------------------------------------------------
   Operazioni sui dati personali
   ----------------------------------------------------------------------------- */

/* Bordo tratteggiato e non colore acceso: queste sezioni non devono attirare
   l'attenzione durante l'uso quotidiano, solo essere riconoscibili quando le
   si cerca. */
.riquadro-pericoloso { border-color: var(--bordo-scuro); border-style: dashed; }
.riquadro-pericoloso h2 { color: var(--in-scadenza); }

.collegamento-gdpr { margin: 1rem 0 0; padding-top: 0.85rem;
                     border-top: 1px solid var(--bordo); font-size: 0.88rem; }
.collegamento-gdpr a { color: var(--tenue); }

button[disabled] { opacity: 0.45; cursor: not-allowed; }

.intervento-revisione {
    padding: 0.85rem; margin-bottom: 0.75rem;
    background: #faf9f7; border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
}
.intervento-revisione h4 { margin: 0 0 0.6rem; font-size: 0.9rem; }

.intervento-documento {
    padding: 0.5rem 0; border-bottom: 1px solid var(--bordo);
    font-size: 0.9rem; line-height: 1.5;
}
.intervento-documento:last-child { border-bottom: none; }
.intervento-documento em { color: var(--tenue); font-style: normal; }

/* -----------------------------------------------------------------------------
   Agenda
   ----------------------------------------------------------------------------- */

.navigazione-mese {
    display: flex; justify-content: space-between;
    margin-bottom: 1.25rem; font-size: 0.9rem;
}
.navigazione-mese a { text-decoration: none; }

.giornata { margin-bottom: 1.5rem; }

.intestazione-giornata {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem; color: var(--tenue);
    text-transform: none; letter-spacing: 0.02em;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--bordo);
}

.giornata.oggi .intestazione-giornata {
    color: var(--primario-cupo); font-weight: 600;
    border-bottom-color: var(--primario);
}

.elenco-appuntamenti { display: flex; flex-direction: column; gap: 0.6rem; }

.appuntamento {
    display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
    padding: 0.85rem 1rem;
    background: var(--riquadro);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--primario);
    border-radius: var(--raggio);
}

.appuntamento.stato-fatto     { border-left-color: var(--futura); opacity: 0.7; }
.appuntamento.stato-annullato { border-left-color: var(--bordo-scuro); opacity: 0.55; }

/* L'ora in cifre tabulari: incolonnata, si scorre la giornata a colpo d'occhio. */
.appuntamento-ora {
    font-size: 1.05rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--primario-cupo);
    white-space: nowrap;
}

.appuntamento-corpo { min-width: 0; }

.appuntamento-testa {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem; margin-bottom: 0.2rem;
}
.appuntamento-cliente { font-weight: 600; text-decoration: none; color: inherit; }
.appuntamento-cliente:hover { text-decoration: underline; }

.appuntamento-impianto { font-size: 0.88rem; color: var(--tenue); }

/* Indirizzo e telefono sono link attivi: da smartphone aprono navigazione e
   chiamata con un tocco, che è ciò che serve quando si esce la mattina. */
.appuntamento-indirizzo, .appuntamento-telefono {
    display: block; font-size: 0.88rem; text-decoration: none;
    margin-top: 0.1rem;
}

.appuntamento-note {
    margin: 0.4rem 0 0; font-size: 0.88rem;
    color: var(--tenue); white-space: pre-wrap;
}

.appuntamento-azioni {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.75rem; margin-top: 0.6rem;
}

.arretrati { border-color: var(--in-scadenza); border-style: dashed; }
.arretrati h2 { color: var(--in-scadenza); }

.etichetta.tipo-revisione-ordinaria { background: var(--primario-tenue);
                                      color: var(--primario-cupo); }
.etichetta.tipo-revisione-fumi      { background: #e6f0e9; color: var(--futura); }
.etichetta.tipo-guasto              { background: #f9ece9; color: var(--scaduta); }
.etichetta.tipo-installazione       { background: #f0ecf7; color: #4a3a73; }

/* Appuntamento già fissato, mostrato in scadenze e scheda cliente */
.gia-programmato, .riga-programmato {
    font-size: 0.85rem; color: var(--primario-cupo); text-decoration: none;
}
.appuntamenti-impianto {
    margin-top: 0.75rem; padding: 0.45rem 0.6rem;
    background: var(--primario-tenue);
    border-radius: var(--raggio-piccolo);
    display: flex; flex-direction: column; gap: 0.2rem;
}

/* -----------------------------------------------------------------------------
   Appuntamenti nella scheda cliente
   ----------------------------------------------------------------------------- */

/* Riepilogo in cima: chi apre la scheda mentre il cliente è al telefono deve
   vedere subito se un appuntamento è già stato preso, senza scorrere. */
.riepilogo-appuntamento {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem;
    border-left: 3px solid var(--primario);
    background: var(--primario-tenue);
}
.riepilogo-appuntamento.arretrato {
    border-left-color: var(--in-scadenza); background: #fdf3e5;
}
.etichetta-riepilogo {
    display: block; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--tenue); margin-bottom: 0.15rem;
}
.riepilogo-appuntamento strong { display: block; }
.riepilogo-appuntamento .tenue { font-size: 0.85rem; }

.appuntamenti-impianto {
    margin-top: 0.75rem;
    display: flex; flex-direction: column; gap: 0.35rem;
    background: none; padding: 0;
}

.riga-appuntamento {
    display: grid; gap: 0.15rem 0.75rem;
    padding: 0.5rem 0.65rem;
    background: var(--primario-tenue);
    border-left: 3px solid var(--primario);
    border-radius: var(--raggio-piccolo);
    font-size: 0.88rem;
}

/* Appuntamento passato e mai chiuso: è la cosa che deve saltare all'occhio
   aprendo la scheda, perché è un lavoro preso e dimenticato. */
.riga-appuntamento.arretrato {
    background: #fdf3e5; border-left-color: var(--in-scadenza);
}

.appuntamento-quando {
    font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--primario-cupo); white-space: nowrap;
}
.riga-appuntamento.arretrato .appuntamento-quando { color: var(--in-scadenza); }

.appuntamento-cosa em {
    display: block; font-style: normal; font-size: 0.82rem;
    color: var(--tenue);
}
.appuntamento-cosa-fare { display: flex; gap: 0.75rem; font-size: 0.85rem; }
.appuntamento-cosa-fare a { text-decoration: none; }

@media (min-width: 700px) {
    .riga-appuntamento {
        grid-template-columns: 11rem 1fr auto;
        align-items: baseline;
    }
}

/* -----------------------------------------------------------------------------
   Contratto di assistenza
   ----------------------------------------------------------------------------- */

/* Stessi colori delle revisioni: un solo criterio di lettura per tutte le
   scadenze della scheda. Il colore è un rinforzo, lo stato è sempre scritto. */
.contratto { border-left: 3px solid var(--bordo-scuro); }
.contratto.scaduta     { border-left-color: var(--scaduta);     background: #fbebe9; }
.contratto.in_scadenza { border-left-color: var(--in-scadenza); background: #fdf3e5; }
.contratto.futura      { border-left-color: var(--futura);      background: #eaf4ee; }
.contratto.assente     { border-style: dashed; }

.contratto-testa {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 1rem; flex-wrap: wrap;
}
.contratto-tipo { display: block; font-size: 1.1rem; }
.contratto-importo { font-size: 0.9rem; }
.contratto-scadenza { text-align: right; }
.contratto-scadenza strong { display: block; font-variant-numeric: tabular-nums; }
.contratto-stato {
    display: block; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.06em; opacity: 0.8;
}
.contratto.scaduta     .contratto-scadenza { color: var(--scaduta); }
.contratto.in_scadenza .contratto-scadenza { color: var(--in-scadenza); }
.contratto.futura      .contratto-scadenza { color: var(--futura); }

/* -----------------------------------------------------------------------------
   Installatore e dati catastali
   ----------------------------------------------------------------------------- */

.installatore-riga {
    margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--tenue);
}
.installatore-riga a { text-decoration: none; }

/* <details> nativo: i dati catastali servono di rado, ma quando servono
   devono essere qui. Tenerli sempre aperti allungherebbe la scheda. */
.dati-catasto { margin-top: 0.6rem; }
.dati-catasto summary {
    cursor: pointer; font-size: 0.85rem; color: var(--primario);
    padding: 0.3rem 0; min-height: 32px; display: flex; align-items: center;
}
.dati-catasto .elenco-dati { margin-top: 0.4rem; }

select {
    width: 100%; padding: 0.6rem 0.7rem; font-size: 16px;
    font-family: inherit; color: var(--testo);
    background: var(--riquadro);
    border: 1px solid var(--bordo-scuro);
    border-radius: var(--raggio-piccolo);
}

.gruppo-risultati {
    margin-top: 1.75rem; padding-top: 0.75rem;
    border-top: 1px solid var(--bordo);
}

/* -----------------------------------------------------------------------------
   Quadro della giornata
   ----------------------------------------------------------------------------- */

/* Scorrimento orizzontale su schermi stretti: comprimere le colonne
   renderebbe illeggibili i nomi, che sono l'informazione principale. */
.quadro-contenitore {
    overflow-x: auto;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--riquadro);
}

.quadro { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.quadro thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 0.6rem 0.5rem;
    background: var(--riquadro);
    border-bottom: 2px solid var(--bordo-scuro);
    text-align: left; font-weight: 600;
    white-space: nowrap;
}

.quadro td {
    padding: 0.15rem 0.3rem;
    border-bottom: 1px solid var(--bordo);
    border-left: 1px solid var(--bordo);
    vertical-align: top;
    min-width: 9rem;
}

/* Colonna delle ore fissa a sinistra: scorrendo in orizzontale si deve
   continuare a sapere di che ora si sta parlando. */
.colonna-ora {
    position: sticky; left: 0; z-index: 1;
    background: var(--sfondo);
    padding: 0.3rem 0.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 400; font-size: 0.8rem;
    color: var(--tenue); text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--bordo);
}
.quadro thead .colonna-ora { z-index: 3; }

/* L'ora tonda si distingue dalla mezz'ora: dà il ritmo alla lettura. */
.quadro tr.ora-tonda .colonna-ora { color: var(--testo); font-weight: 600; }
.quadro tr.ora-tonda td { border-top: 1px solid var(--bordo-scuro); }

.cella-appuntamento {
    display: block;
    padding: 0.35rem 0.5rem; margin: 0.15rem 0;
    background: var(--primario-tenue);
    border-left: 3px solid var(--primario);
    border-radius: var(--raggio-piccolo);
    text-decoration: none; color: inherit;
    line-height: 1.35;
}
.cella-appuntamento:hover { background: #dceaf1; }
.cella-appuntamento.stato-fatto { background: #eaf4ee; border-left-color: var(--futura); }
.cella-appuntamento.stato-annullato { opacity: 0.5; border-left-color: var(--bordo-scuro); }

.cella-ora { display: none; }
.cella-cliente { display: block; font-weight: 600; }
.cella-tipo { display: block; font-size: 0.78rem; color: var(--tenue); }
.cella-luogo { display: block; font-size: 0.75rem; color: var(--tenue); }

.etichetta.assegnatario { background: #f0ecf7; color: #4a3a73; }

.azioni-intestazione { display: flex; gap: 0.6rem; align-items: center; }

input[disabled] { background: var(--sfondo); color: var(--tenue); }

/* =============================================================================
   ADATTAMENTO AL TELEFONO
   =============================================================================
   Le regole qui sotto valgono su iOS e Android insieme. Dove serve un
   accorgimento specifico di uno dei due, è indicato nel commento.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Aree sicure
   ----------------------------------------------------------------------------- */
/* Sugli iPhone con la tacca, la parte alta e bassa dello schermo è occupata
   da tacca e barra gesti. env(safe-area-inset-*) restituisce quanto spazio
   lasciare; funziona solo con viewport-fit=cover nel meta viewport.
   Su Android i valori sono zero e le regole non fanno nulla. */

.barra-interno {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

main {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    /* Spazio per la barra inferiore, altrimenti l'ultimo elemento della
       pagina ci finisce sotto e non si riesce a toccarlo. */
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

/* -----------------------------------------------------------------------------
   Comportamenti al tocco
   ----------------------------------------------------------------------------- */

/* iOS disegna un rettangolo grigio traslucido su ogni elemento toccato.
   Lo togliamo: gli stati :active qui sotto danno un ritorno migliore. */
a, button, summary, label, select, input {
    -webkit-tap-highlight-color: transparent;
}

/* Ritorno visivo immediato al tocco. Su telefono :hover non esiste, quindi
   senza questo un pulsante premuto non dà nessun segnale e si finisce per
   premerlo due volte. */
.pulsante:active, .pulsante-secondario:active, .pulsante-attenzione:active,
button[type="submit"]:active, .scheda-riga:active, .risultato-corpo:active,
.voce-basso:active, .cella-appuntamento:active {
    transform: scale(0.985);
    opacity: 0.9;
}

/* Il testo dell'interfaccia non deve essere selezionabile per sbaglio
   tenendo premuto. I contenuti (note, indirizzi, matricole) restano
   selezionabili: capita di doverli copiare. */
.barra, .barra-basso, .etichetta, .valore-etichetta {
    -webkit-user-select: none;
    user-select: none;
}

/* -----------------------------------------------------------------------------
   Barra inferiore
   ----------------------------------------------------------------------------- */
/* Sostituisce il menu in alto, che con sei voci traboccava su uno schermo
   stretto. In basso si raggiunge con il pollice. */

.barra-basso {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    display: flex;
    background: var(--riquadro);
    border-top: 1px solid var(--bordo);
    padding-bottom: env(safe-area-inset-bottom);
}

.voce-basso {
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.15rem;
    /* 56px di altezza: sopra la soglia dei 44px sotto la quale un bersaglio
       diventa difficile da centrare con il dito. */
    min-height: 56px;
    padding: 0.4rem 0.2rem;
    text-decoration: none;
    color: var(--tenue);
}

.voce-basso svg { width: 22px; height: 22px; flex-shrink: 0; }

.voce-basso span {
    font-size: 0.68rem;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voce-basso.attiva { color: var(--primario); }
.voce-basso.attiva svg { stroke-width: 2.2; }

/* Su schermi larghi la barra inferiore sparisce e il menu torna in alto. */
@media (min-width: 700px) {
    .barra-basso { display: none; }
    main { padding-bottom: 4rem; }
}

/* Sotto i 700px il menu in alto è nascosto: le sue voci sono in basso. */
@media (max-width: 699px) {
    .barra-voci { display: none; }
    .marchio-lungo { display: none; }
    .barra-interno { justify-content: space-between; }
}

@media (min-width: 700px) {
    .marchio-corto { display: none; }
}

/* -----------------------------------------------------------------------------
   Campi dei form su telefono
   ----------------------------------------------------------------------------- */

/* Safari su iOS applica uno stile proprio ai campi, con angoli e ombre che
   non corrispondono al resto. appearance:none lo disattiva. */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="date"], input[type="time"], textarea, select {
    -webkit-appearance: none;
    appearance: none;
}

/* La freccia del menu a tendina, che appearance:none ha appena tolto.
   Disegnata come immagine SVG dentro il CSS: nessun file da caricare. */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b66' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 12px;
    padding-right: 2.2rem;
}

/* I campi data e ora su iOS si presentano allineati in alto e più bassi
   degli altri: senza queste due righe la riga del form risulta storta. */
input[type="date"], input[type="time"] {
    min-height: 2.9rem;
    text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* Android Chrome mostra delle frecce nei campi numerici che rubano spazio
   e non servono: la tastiera numerica è già quella giusta. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* La croce che iOS aggiunge dentro i campi di ricerca si sovrappone al
   testo quando il campo è stretto. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* -----------------------------------------------------------------------------
   Pulsanti e azioni su telefono
   ----------------------------------------------------------------------------- */

@media (max-width: 699px) {
    /* Il pulsante principale a tutta larghezza: bersaglio grande, si preme
       senza guardare. */
    .azioni-modulo { flex-wrap: wrap; gap: 0.75rem; }
    .azioni-modulo button[type="submit"] { width: 100%; }
    .azioni-modulo .annulla { width: 100%; text-align: center; padding: 0.5rem 0; }

    /* Intestazioni di pagina: titolo sopra, pulsante sotto a tutta larghezza
       invece che schiacciato a destra. */
    .intestazione-pagina { flex-direction: column; align-items: stretch; }
    .intestazione-pagina .pulsante,
    .intestazione-pagina .pulsante-secondario { justify-content: center; }
    .azioni-intestazione { flex-direction: column; align-items: stretch; }

    /* Le azioni di riga vanno a capo invece di comprimersi. */
    .risultato-azioni, .impianto-piede, .appuntamento-azioni,
    .azioni-riga, .storico-testa { flex-wrap: wrap; }

    /* Filtro e ricerca: campo sopra, pulsante sotto. */
    .barra-filtro { flex-wrap: wrap; }
    .barra-filtro input, .barra-filtro select { flex: 1 1 100%; }
    .ricerca-principale { flex-wrap: wrap; }
    .ricerca-principale input { flex: 1 1 100%; }
    .ricerca-principale button { flex: 1 1 100%; }

    .riepilogo-appuntamento, .contratto-testa { flex-direction: column;
                                                align-items: stretch; }
    .contratto-scadenza { text-align: left; margin-top: 0.5rem; }
}

/* -----------------------------------------------------------------------------
   Testi lunghi
   ----------------------------------------------------------------------------- */
/* Email, POD, matricole e indirizzi lunghi non devono allargare la pagina
   costringendo a scorrere in orizzontale. */

.elenco-dati dd, .scheda-riga-dati, .appuntamento-indirizzo,
.note p, .note-tecniche, .impianto-modello {
    overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Quadro della giornata su telefono
   ----------------------------------------------------------------------------- */

@media (max-width: 699px) {
    /* Scorrimento fluido e colonne più strette, ma non tanto da rendere
       illeggibili i nomi dei clienti. */
    .quadro-contenitore { -webkit-overflow-scrolling: touch; }
    .quadro td { min-width: 7.5rem; }
    .quadro { font-size: 0.8rem; }
    .colonna-ora { padding: 0.25rem 0.4rem; font-size: 0.72rem; }
    .cella-luogo { display: none; }
}

/* -----------------------------------------------------------------------------
   Preferenze del sistema
   ----------------------------------------------------------------------------- */

/* Chi ha attivato la riduzione del movimento nelle impostazioni del telefono
   non deve vedere animazioni. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .pulsante:active, button[type="submit"]:active,
    .scheda-riga:active, .voce-basso:active { transform: none; }
}

/* Schermi molto stretti (iPhone SE, Android compatti da 320px).
   Con sei voci in basso — il caso dell'amministratore — servono icone e
   testo leggermente più piccoli, altrimenti le etichette si troncano tutte. */
@media (max-width: 380px) {
    .voce-basso { padding: 0.35rem 0.1rem; gap: 0.1rem; }
    .voce-basso svg { width: 20px; height: 20px; }
    .voce-basso span { font-size: 0.62rem; }
}

/* Agenda personale: una colonna sola. La griglia occupa tutta la larghezza
   invece di lasciare spazio vuoto a destra, e non serve scorrere. */
.quadro-contenitore:has(thead th:nth-child(2):last-child) { overflow-x: visible; }
.quadro thead th:nth-child(2):last-child ~ * , 
.quadro td:first-of-type { min-width: 0; }

/* Avviso sui backup: in cima a ogni schermata finché il problema non è
   risolto. Il collegamento porta dove si può intervenire, invece di
   lasciare l'utente a chiedersi cosa fare. */
.avviso-backup {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
}
.avviso-backup a { white-space: nowrap; font-weight: 500; }