/* ============================================================
   Gestionale — Centro Diagnostico Cardiovascolare
   Foglio di stile unico dell'applicazione.

   I colori stanno tutti nelle variabili qui sotto: per cambiare
   l'aspetto dell'intero gestionale basta modificare questo blocco.
   I valori sono stati verificati secondo lo standard WCAG, che
   misura quanto un testo risalta sul suo sfondo: sotto 4.5:1 la
   lettura affatica, e qui si lavora otto ore al giorno.
   ============================================================ */

/* Font Inter auto-ospitato (5 pesi, latin + latin-ext): nessuna
   richiesta ai server di Google a ogni visita — importante su un
   sito che gestisce dati di pazienti. I 5 pesi condividono solo 2
   file fisici (Google li serve come font variabile): il browser li
   scarica una volta sola indipendentemente da quanti pesi si usano. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
    /* --- Colori del marchio (dal logo del centro) --- */
    --marchio-rosso: #C1272D;
    --marchio-rosso-scuro: #A31F25;
    --marchio-grigio: #3F3F42;

    /* --- Superfici e testo --- */
    --sfondo: #FAF7F4;
    --superficie: #FFFFFF;
    --superficie-tenue: #F5F1EC;
    --bordo: #EAE3DC;
    --bordo-marcato: #DCD2C8;
    --testo: #33302E;
    --testo-attenuato: #756C66;

    /* --- Colori degli stati appuntamento --- */
    --stato-prenotato: #3F3F42;
    --stato-prenotato-fondo: #F2F1F0;
    --stato-confermato: #2F6B45;
    --stato-confermato-fondo: #EDF4EE;
    --stato-completato: #6B625B;
    --stato-completato-fondo: #F3F0EC;
    --stato-annullato: #9B2C31;
    --stato-annullato-fondo: #FAEEEE;
    --stato-no_show: #8F5410;
    --stato-no_show-fondo: #FBF2E6;

    /* --- Forme e profondità --- */
    --raggio: 14px;
    --raggio-piccolo: 10px;
    --raggio-pillola: 999px;
    --ombra: 0 1px 2px rgba(63, 63, 66, .04), 0 4px 16px rgba(63, 63, 66, .06);
    --ombra-lieve: 0 1px 3px rgba(63, 63, 66, .07);
    --ombra-flottante: 0 8px 24px rgba(0, 0, 0, .2);
    --ombra-flottante-mobile: 0 12px 32px rgba(0, 0, 0, .32);

    /* --- Barra di navigazione in basso (smartphone) ---
       Quattro elementi devono stare allineati fra loro: la barra, il pulsante
       "+", il pannello "Altro" e lo spazio libero in fondo alla pagina. Con
       valori scritti a mano quattro volte basta cambiarne uno per sfasare tutto.

       --fondo-sicuro è la striscia che iOS riserva alla barretta Home in fondo
       allo schermo: sui telefoni che non ce l'hanno, e sul computer, vale 0.
       Va usata per ALZARE la barra, non come imbottitura interna: altrimenti
       la barra cresce in altezza e resta una striscia vuota sotto le icone. */
    --fondo-sicuro: env(safe-area-inset-bottom, 0px);
    --barra-margine: 14px;
    --barra-altezza: 54px;

    /* Quanto la barra sta staccata dal bordo inferiore dello schermo: è il
       suo margine di sotto, e la stessa misura da cui partono il pulsante "+"
       e il pannello "Altro", che le stanno sopra.

       Il massimo fra i due, non la somma: sui telefoni con la barretta Home
       quella striscia è già uno stacco, e sommarci anche il margine faceva
       galleggiare la barra troppo in alto, con una fascia vuota sotto. */
    --barra-fondo: max(var(--barra-margine), var(--fondo-sicuro));
}

* { box-sizing: border-box; }

/* Sul computer questo contenitore non deve contare: display:contents lo toglie
   dal layout e intestazione e contenuto restano figli del corpo, esattamente
   come se non ci fosse. Sul telefono torna un blocco vero e diventa l'unica
   parte che scorre. */
.impalcatura { display: contents; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--sfondo);
    color: var(--testo);
    margin: 0;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Spegne il tira-per-aggiornare nativo del browser: c'è quello del
       gestionale (gesti.js), con la grafica coerente col resto. */
    overscroll-behavior-y: none;
}

/* ============================================================
   Intestazione e menu
   ============================================================ */

header {
    background: var(--marchio-grigio);
    color: #fff;
    /* Installata sulla schermata Home, l'app occupa tutto lo schermo: il grigio
       dell'intestazione sale fin sotto la barra di stato e la tacca, mentre il
       contenuto resta nella zona sicura. Fuori dall'app le env() valgono zero. */
    padding: calc(.9rem + env(safe-area-inset-top, 0px))
             calc(1.5rem + env(safe-area-inset-right, 0px))
             1rem
             calc(1.5rem + env(safe-area-inset-left, 0px));
    /* Filo rosso del marchio sotto l'intestazione. */
    border-bottom: 2px solid var(--marchio-rosso);
}
header a { color: rgba(255, 255, 255, .92); text-decoration: none; }
header a:hover { color: #fff; }

.barra-utente {
    display: flex; flex-wrap: wrap; gap: .5rem;
    justify-content: space-between; align-items: center;
}

.marchio { display: flex; align-items: center; gap: .65rem; }
/* Il logo è rosso e grigio: sul fondo scuro dell'intestazione si porta
   a bianco pieno, altrimenti il grigio sparirebbe contro lo sfondo. */
.marchio-logo { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); }
.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }
.brand { font-weight: 700; font-size: .95rem; letter-spacing: .01em; }
.brand-sottotitolo { font-size: .7rem; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }

.utente { font-size: .85rem; display: flex; align-items: center; gap: .5rem; }

/* ---- Menu dell'ingranaggio (solo computer) ----
   Raccoglie le impostazioni e l'uscita in un punto solo, così in alto restano
   il logo e la capsula del menu. Sul telefono resta nascosto: lì le
   impostazioni stanno dietro al pulsante "Altro" e l'uscita è già in chiaro. */
.menu-utente { display: none; position: relative; }

.btn-ingranaggio {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; cursor: pointer;
    border: 1px solid var(--bordo-marcato); border-radius: 50%;
    background: var(--superficie); color: var(--testo-attenuato);
    font-family: inherit;
    transition: color .12s ease, border-color .12s ease;
}
.btn-ingranaggio:hover,
.btn-ingranaggio.attiva { color: var(--marchio-rosso); border-color: var(--marchio-rosso); }

.menu-utente-pannello {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 40;
    min-width: 190px; padding: .4rem;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo); box-shadow: var(--ombra-flottante);
    /* Chiuso con visibility invece che display: la transizione può partire
       subito, senza aspettare un fotogramma (come il pannello "Altro"). */
    visibility: hidden; opacity: 0; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.menu-utente-pannello.aperto { visibility: visible; opacity: 1; transform: translateY(0); }

.menu-utente-nome {
    display: block; padding: .35rem .6rem .5rem; margin-bottom: .35rem;
    font-size: .78rem; color: var(--testo-attenuato);
    border-bottom: 1px solid var(--bordo);
}
/* Il prefisso header serve a battere "header a", che tiene i link chiari
   per le voci sulla capsula scura. */
header .menu-utente-voce {
    display: block; width: 100%; text-align: left;
    padding: .5rem .6rem; border-radius: var(--raggio-piccolo);
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: .86rem; color: var(--testo); text-decoration: none;
}
header .menu-utente-voce:hover { background: var(--superficie-tenue); color: var(--marchio-rosso); }

.btn-esci {
    background: rgba(255, 255, 255, .14); color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    padding: .25rem .8rem; border-radius: var(--raggio-pillola);
    font-size: .78rem; cursor: pointer; font-family: inherit;
}
.btn-esci:hover { background: rgba(255, 255, 255, .26); }

/* ---- Intestazione sul computer ----
   Il rettangolo grigio serviva a reggere il nome del centro; tolto quello
   restava quasi tutto vuoto. Sul computer sopravvivono il logo nei suoi
   colori, la capsula del menu e l'ingranaggio: il nome del centro è già
   nel logo. Sul telefono, dove la capsula non c'è, l'intestazione grigia
   col nome per esteso resta com'era. */
@media (min-width: 721px) {
    header {
        background: transparent; color: var(--testo); border-bottom: none;
        padding: .8rem 1.5rem;
    }
    .marchio-logo { filter: none; }
    .marchio-testo { display: none; }
    /* Nome e uscita si spostano dentro il menu dell'ingranaggio. */
    .utente-nome, .form-esci { display: none; }
    .menu-utente { display: block; }

    /* Logo, menu e ingranaggio sulla stessa riga. Le due colonne laterali
       crescono in parti uguali, così la capsula in mezzo resta centrata sulla
       pagina anche se il logo e l'ingranaggio non sono larghi uguali. La
       capsula non si stringe: a restringersi sono i lati, che hanno spazio
       da cedere. */
    .marchio, .utente { flex: 1 1 0; min-width: 0; }
    .utente { justify-content: flex-end; }
    .nav-capsula { flex: 0 0 auto; }
}

/* ---- Menu desktop: capsula fluttuante ----
   Una sola pillola di sfondo scorre da una voce all'altra invece di
   accendersi e spegnersi su ciascuna: il passaggio risulta continuo.
   Il calcolo della larghezza (100% - imbottitura)/numero-voci funziona
   solo perché tutte le voci hanno la stessa larghezza. */
.nav-capsula {
    /* Nel flusso, non in assoluto: sta in mezzo a logo e ingranaggio dentro
       .barra-utente, che la mette in riga con loro. Resta però "relative"
       perché la pillola dentro si posiziona rispetto a lei. */
    display: flex; position: relative; width: fit-content; max-width: 100%;
    margin: 0; padding: 5px;
    background: rgba(46, 45, 48, .55);
    border-radius: var(--raggio-pillola);
    box-shadow: var(--ombra-flottante);
}
/* La pillola viene posizionata da navigazione.js misurando la voce attiva:
   le etichette hanno lunghezze diverse ("Home" contro "Lista d'attesa"),
   quindi dividere la larghezza per il numero di voci non funzionerebbe.
   Resta nascosta finché il JavaScript non la colloca. */
.nav-indicatore {
    position: absolute; top: 5px; bottom: 5px; left: 5px;
    border-radius: var(--raggio-pillola);
    background: var(--marchio-rosso);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                width .32s cubic-bezier(.4, 0, .2, 1);
}
.collocata > .nav-indicatore { opacity: 1; }

.nav-voce {
    position: relative; z-index: 1; flex: 0 0 auto;
    text-align: center; padding: .5rem 1rem;
    font-size: .82rem; font-weight: 500; opacity: .7;
    border-radius: var(--raggio-pillola);
    transition: opacity .15s ease;
    white-space: nowrap;
}
.nav-voce:hover { opacity: 1; }
.nav-voce.attiva { opacity: 1; font-weight: 700; }
/* Senza JavaScript la voce attiva si colora da sola: la sezione in cui
   ci si trova resta comunque riconoscibile. */
.nav-voce.attiva { background: var(--marchio-rosso); }
.collocata .nav-voce.attiva { background: transparent; }

/* Fra la larghezza di uno smartphone e quella di un portatile piccolo le otto
   voci a imbottitura piena non ci starebbero: la capsula uscirebbe dallo
   schermo e tutta la pagina scorrerebbe di lato. Si stringono gli spazi. */
@media (min-width: 721px) and (max-width: 900px) {
    .nav-voce { padding: .5rem .55rem; font-size: .78rem; }
}

/* ---- Barra inferiore (solo smartphone) ---- */
.nav-basso { display: none; }
.altro-fondale, .altro-pannello { display: none; }

/* ============================================================
   Struttura della pagina
   ============================================================ */

main { max-width: 1060px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }

h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 1.1rem; }
h2 { font-weight: 620; }

.card {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.4rem;
}

.card-titolo { font-size: 1.05rem; margin: 0 0 .35rem; }

/* Testo introduttivo di una scheda: spiega a cosa serve la sezione. */
.testo-guida { color: var(--testo-attenuato); font-size: .88rem; margin: .15rem 0 1rem; }

/* Rimando alla pagina da cui si è arrivati, per le sezioni che non hanno
   una voce nel menu e altrimenti sarebbero senza via d'uscita. */
.ritorno {
    display: inline-block; margin-bottom: .5rem;
    color: var(--testo-attenuato); text-decoration: none;
    font-size: .85rem; font-weight: 550;
}
.ritorno:hover { color: var(--marchio-rosso); }

.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.1rem; }

/* Il saluto della home sta al centro, come nel prototipo. */
.home-benvenuto { text-align: center; }

/* ---- Cruscotto della home ----
   Riquadri invece dei vecchi pulsanti: ogni sezione è già raggiungibile dal
   menu, qui la home deve dire a colpo d'occhio cosa c'è da fare oggi.
   Le colonne si adattano da sole perché il numero di riquadri cambia con chi
   guarda: la segretaria ne vede quattro, il personale sanitario due. Con
   colonne fisse, al personale ne resterebbe uno spaiato a metà riga. */
.cruscotto {
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.riquadro {
    display: block; background: var(--superficie);
    border: 1px solid var(--bordo); border-left: 3px solid var(--bordo-marcato);
    border-radius: var(--raggio); box-shadow: var(--ombra);
    padding: 1.1rem 1.3rem; text-decoration: none; color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
a.riquadro:hover { transform: translateY(-1px); box-shadow: var(--ombra-flottante); }

.riquadro-numero {
    font-size: 2rem; font-weight: 800; line-height: 1; color: var(--testo);
    font-variant-numeric: tabular-nums;
}
.riquadro-etichetta { font-size: .85rem; color: var(--testo-attenuato); margin-top: .4rem; }

/* Il riquadro principale: chi arriva adesso è la cosa che si guarda per
   prima, quindi prende tutta la riga e il rosso del marchio. */
.riquadro-principale {
    margin-bottom: .9rem;
    padding: 1.3rem 1.5rem;
    border-left-color: var(--marchio-rosso);
}
.riquadro-soprattitolo {
    display: block; font-size: .72rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-attenuato); margin-bottom: .45rem;
}
.riquadro-ora {
    font-size: 2.8rem; font-weight: 800; line-height: 1;
    color: var(--testo); font-variant-numeric: tabular-nums;
}
.riquadro-nome { font-size: 1.15rem; font-weight: 650; margin-top: .5rem; }
.riquadro-dettaglio { font-size: .85rem; color: var(--testo-attenuato); margin-top: .2rem; }

/* Gli orari dei buchi da riempire: il numero da solo dice quanti sono, questi
   dicono quali, che è quello che serve per richiamare qualcuno. */
.riquadro-orari {
    margin-top: .45rem; font-size: .82rem; font-weight: 600;
    color: var(--stato-annullato); font-variant-numeric: tabular-nums;
}

/* Da confermare: stesso ambra dei promemoria in attesa di risposta. */
.riquadro-attenzione { border-left-color: var(--stato-no_show); }
.riquadro-attenzione .riquadro-numero { color: var(--stato-no_show); }

/* Slot liberi: stesso rosso spento delle disdette, sono nati da lì. */
.riquadro-libero { border-left-color: var(--stato-annullato); }
.riquadro-libero .riquadro-numero { color: var(--stato-annullato); }

/* ============================================================
   Tabelle
   ============================================================ */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .55rem; border-bottom: 1px solid var(--bordo); }
th {
    font-size: .73rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--testo-attenuato); font-weight: 650;
}
tbody tr:hover { background: var(--superficie-tenue); }
tbody tr:last-child td { border-bottom: none; }
td a { color: var(--marchio-rosso); text-decoration: none; font-weight: 550; }
td a:hover { text-decoration: underline; }

/* ============================================================
   Pulsanti
   ============================================================ */

.btn {
    display: inline-block; padding: .55rem 1rem; border-radius: var(--raggio-piccolo);
    border: 1px solid transparent; cursor: pointer; font-size: .88rem;
    font-weight: 550; text-decoration: none; font-family: inherit;
    transition: background-color .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--marchio-rosso); color: #fff; }
.btn-primary:hover { background: var(--marchio-rosso-scuro); }
.btn-secondary { background: var(--superficie); color: var(--testo); border-color: var(--bordo-marcato); }
.btn-secondary:hover { background: var(--superficie-tenue); }
.btn-warn { background: #F6E7C8; color: #6B4A0F; border-color: #E8D2A6; }
.btn-warn:hover { background: #F0DCB4; }

/* Azione irreversibile: si distingue dal rosso del marchio restando in tono
   minore, così non compete con i pulsanti primari. */
.btn-elimina {
    background: var(--stato-annullato-fondo); color: var(--stato-annullato);
    border-color: #F0CDCE;
}
.btn-elimina:hover { background: #F6E0E0; }

/* Zona in fondo ai moduli che raccoglie le azioni distruttive, separata dal
   resto da un filo: non si preme per sbaglio al posto di "Salva". */
.modulo-pericolo {
    margin-top: 1.5rem; padding-top: 1.1rem;
    border-top: 1px solid var(--bordo);
}

/* Pulsante quadrato con la sola icona: le frecce ‹ › dell'agenda. */
.btn-icona {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}

/* Il pulsante flottante "+" esiste solo sullo smartphone:
   su desktop ci sono già i "+" della griglia. */
.fab { display: none; }

/* ============================================================
   Campi dei moduli
   ============================================================ */

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=number],
select, textarea {
    padding: .55rem .65rem; border: 1px solid var(--bordo-marcato);
    border-radius: var(--raggio-piccolo); font-size: .93rem; width: 100%;
    font-family: inherit; color: var(--testo); background: var(--superficie);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--marchio-rosso);
    box-shadow: 0 0 0 3px rgba(193, 39, 45, .13);
}
.field { margin-bottom: 1rem; }
.field label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--testo-attenuato); margin-bottom: .3rem;
}

/* I moduli (appuntamento, paziente, lista d'attesa) stanno in una scheda
   stretta e centrata: i campi larghi quanto lo schermo sono scomodi da leggere. */
.modulo-card { max-width: 560px; margin: 0 auto; }
.modulo-titolo { text-align: center; }

/* Coppie di campi affiancati (Data/Ora, Durata/Stato); sullo smartphone
   tornano in colonna — vedi la sezione degli schermi piccoli. */
.modulo-due-col { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

/* Casella "consenti sovrapposizione" e simili: casella e testo sulla stessa riga. */
.campo-casella { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.campo-casella input[type=checkbox] { width: 1.05rem; height: 1.05rem; }

/* Tutte le caselle di spunta del gestionale usano il rosso del marchio. */
input[type=checkbox] { accent-color: var(--marchio-rosso); }

/* Elenco dei giorni di apertura nelle impostazioni. */
.giorno-scelta { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; font-size: .92rem; }
.giorno-scelta input[type=checkbox] { width: 1.05rem; height: 1.05rem; }
.campo-casella label { margin: 0; font-size: .88rem; font-weight: 500; color: var(--testo); }
.campo-casella .aiuto { flex-basis: 100%; }

.aiuto { font-size: .78rem; color: var(--testo-attenuato); margin-top: .25rem; }

/* Blocco di campi che vanno letti insieme (es. le preferenze di orario). */
.gruppo-campi {
    border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    padding: .9rem 1rem .3rem; margin: 0 0 1rem;
}
.gruppo-campi legend {
    font-size: .8rem; font-weight: 650; color: var(--testo-attenuato);
    padding: 0 .35rem;
}
.etichetta-gruppo {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--testo-attenuato); margin-bottom: .35rem;
}

/* Caselle dei giorni: in riga, ognuna con la sua etichetta accanto. */
.scelte-giorni ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.scelte-giorni li { margin: 0; }
.scelte-giorni label {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .87rem; font-weight: 500; color: var(--testo); margin: 0;
}
.scelte-giorni input[type=checkbox] { width: auto; }
.errorlist {
    color: var(--stato-annullato); font-size: .84rem;
    margin: .35rem 0 0; padding-left: 1.1rem;
}

/* ============================================================
   Selettori personalizzati di data e ora (selettori.js)
   ============================================================ */

.selettore { position: relative; }

/* Elementi che servono solo senza JavaScript (es. il pulsante "Vai" accanto
   al selettore di data): quando selettori.js è attivo spariscono. */
.con-selettori .no-js-solo { display: none; }

/* Il pulsante che mostra il valore scelto: stessa veste dei campi di testo. */
.selettore-innesco {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .55rem .65rem;
    border: 1px solid var(--bordo-marcato); border-radius: var(--raggio-piccolo);
    background: var(--superficie); color: var(--testo);
    font-family: inherit; font-size: .93rem; text-align: left; cursor: pointer;
}
.selettore-innesco svg { color: var(--testo-attenuato); flex: 0 0 auto; }
.selettore-innesco:focus-visible {
    outline: none; border-color: var(--marchio-rosso);
    box-shadow: 0 0 0 3px rgba(193, 39, 45, .13);
}

/* Fondale trasparente a tutto schermo: un clic fuori chiude il pannello. */
.selettore-fondale { position: fixed; inset: 0; z-index: 40; }

.selettore-pannello {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); box-shadow: var(--ombra-flottante);
    padding: .85rem;
}
.selettore-pannello-data { width: 264px; }
.selettore-pannello-ora { width: 150px; display: flex; gap: .5rem; }
.selettore-pannello-opzioni {
    min-width: 175px; display: flex; flex-direction: column; gap: 2px;
    padding: .35rem;
}
.selettore-pannello-opzioni .selettore-opzione { text-align: left; padding: .5rem .65rem; }

/* Nelle barre dei filtri il selettore non deve allargarsi a tutta riga. */
.toolbar .selettore { flex: 0 0 auto; }
.toolbar .selettore-innesco { width: auto; }

.selettore-mese-testata {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .6rem;
}
.selettore-mese-titolo { font-weight: 700; font-size: .82rem; }
.selettore-freccia {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--bordo-marcato); border-radius: 8px;
    background: var(--superficie); color: var(--testo);
    font-family: inherit; font-size: .95rem; cursor: pointer;
}
.selettore-freccia:hover { background: var(--superficie-tenue); }

.selettore-giorni-settimana {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    font-size: .63rem; text-align: center; color: var(--testo-attenuato);
    margin-bottom: 4px;
}

.selettore-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.selettore-cella {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px; background: transparent; color: var(--testo);
    font-family: inherit; font-size: .75rem; cursor: pointer;
}
.selettore-cella:hover { background: var(--superficie-tenue); }
.selettore-cella.oggi {
    font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--marchio-rosso);
}
.selettore-cella.selezionata {
    background: var(--marchio-rosso); color: #fff; font-weight: 700;
}
.selettore-cella.chiuso { color: #C3B8AE; }

.selettore-colonna {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    max-height: 200px; overflow-y: auto;
}
.selettore-opzione {
    padding: .35rem .4rem; border: none; border-radius: 8px;
    background: transparent; color: var(--testo);
    font-family: inherit; font-size: .8rem; cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.selettore-opzione:hover { background: var(--superficie-tenue); }
.selettore-opzione.selezionata {
    background: var(--marchio-rosso); color: #fff; font-weight: 700;
}

/* ============================================================
   Gesti touch (gesti.js): frecce di scorrimento e tira-per-aggiornare
   ============================================================ */

/* Il contenuto viene traslato da gesti.js durante il trascinamento;
   position:relative serve ad ancorare l'invito "Trascina per aggiornare". */
main { position: relative; }

/* Avviso "sei senza connessione". Sta sopra ogni altra cosa perche' dice che
   quello che si sta facendo non verra' salvato: se lo si copre, tanto vale non
   mostrarlo. In cima e non in fondo, dove sul telefono c'e' gia' la barra. */
.avviso-offline {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: calc(.55rem + env(safe-area-inset-top, 0px)) 1rem .55rem;
    background: var(--marchio-rosso); color: #fff;
    font-size: .85rem; font-weight: 600; text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}
/* Il resto della pagina si scosta di quanto misura l'avviso, altrimenti gli
   finirebbe sotto l'intestazione: menu e pulsante Esci sparirebbero proprio
   nel momento in cui si sta cercando di capire cos'e' andato storto. La
   misura la scrive connessione.js. Con box-sizing: border-box l'imbottitura
   sta dentro l'altezza gia' fissata del corpo, quindi sul telefono la barra
   in basso resta dov'e'. */
body.con-avviso-offline { padding-top: var(--altezza-avviso, 3.5rem); }

/* Chi ha creato e chi ha modificato l'appuntamento: informazione di servizio,
   sotto ai pulsanti e in tono minore, si legge quando la si cerca. */
.traccia {
    margin-top: 1.1rem; padding-top: .8rem;
    border-top: 1px solid var(--bordo);
    font-size: .76rem; color: var(--testo-attenuato);
    line-height: 1.5;
}

.gesto-freccia {
    position: fixed; top: 50%; transform: translateY(-50%);
    font-size: 26px; color: var(--marchio-rosso);
    opacity: 0; pointer-events: none; z-index: 30;
}
.gesto-freccia-indietro { left: 10px; }
.gesto-freccia-avanti { right: 10px; }

.gesto-aggiorna {
    position: absolute; top: -40px; left: 0; right: 0; height: 40px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: .75rem; color: var(--testo);
    opacity: 0; pointer-events: none;
}
.gesto-aggiorna-freccia { transition: transform .15s ease; }
.gesto-aggiorna.oltre-soglia .gesto-aggiorna-freccia { transform: rotate(180deg); }
.gesto-aggiorna-rotella { display: none; }
.gesto-aggiorna.in-ricarica .gesto-aggiorna-freccia { display: none; }
.gesto-aggiorna.in-ricarica .gesto-aggiorna-rotella {
    display: block; animation: gesto-rotazione .7s linear infinite;
}
@keyframes gesto-rotazione { to { transform: rotate(360deg); } }

/* ============================================================
   Ricerca paziente con suggerimenti
   ============================================================ */

.ricerca-paziente { position: relative; }

.ricerca-elenco {
    list-style: none; margin: .25rem 0 0; padding: .25rem;
    position: absolute; z-index: 20; left: 0; right: 0;
    background: var(--superficie); border: 1px solid var(--bordo-marcato);
    border-radius: var(--raggio-piccolo); box-shadow: var(--ombra);
    max-height: 260px; overflow-y: auto;
}
.ricerca-voce {
    padding: .45rem .6rem; border-radius: 6px; cursor: pointer;
    display: flex; flex-direction: column; gap: .05rem;
}
.ricerca-voce:hover, .ricerca-voce.evidenziata { background: var(--superficie-tenue); }
.ricerca-nome { font-weight: 600; font-size: .9rem; }
.ricerca-dettaglio { font-size: .75rem; color: var(--testo-attenuato); }
.ricerca-aiuto { margin: .3rem 0 0; font-size: .76rem; color: var(--testo-attenuato); min-height: 1.1em; }

/* ============================================================
   Messaggi e etichette
   ============================================================ */

.messages { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.messages li {
    background: var(--stato-confermato-fondo); color: var(--stato-confermato);
    border-left: 3px solid var(--stato-confermato);
    padding: .7rem 1rem; border-radius: var(--raggio-piccolo); margin-bottom: .6rem;
    font-size: .9rem;
}
.messages li.warning {
    background: var(--stato-no_show-fondo); color: var(--stato-no_show);
    border-left-color: var(--stato-no_show);
}
.messages li.error {
    background: var(--stato-annullato-fondo); color: var(--stato-annullato);
    border-left-color: var(--stato-annullato);
}

.badge {
    display: inline-block; font-size: .71rem; font-weight: 600;
    padding: .18rem .6rem; border-radius: 999px; letter-spacing: .01em;
}
.badge-off { background: var(--stato-annullato-fondo); color: var(--stato-annullato); }
.badge-on { background: var(--stato-confermato-fondo); color: var(--stato-confermato); }
/* Stato intermedio, né buono né cattivo: ambra invece del rosso. */
.badge-attesa { background: var(--stato-no_show-fondo); color: var(--stato-no_show); }

/* ---- Stati della pagina Prenotazioni ----
   Gli stessi colori degli appuntamenti in agenda: chi guarda la griglia e chi
   guarda l'elenco deve riconoscere lo stesso stato dal colore. */
.badge-da_inviare { background: var(--stato-prenotato-fondo); color: var(--stato-prenotato); }
.badge-in_attesa { background: var(--stato-no_show-fondo); color: var(--stato-no_show); }
.badge-confermato { background: var(--stato-confermato-fondo); color: var(--stato-confermato); }
.badge-disdetto { background: var(--stato-annullato-fondo); color: var(--stato-annullato); }

.badge-priorita-1 { background: var(--stato-no_show-fondo); color: var(--stato-no_show); }
.badge-priorita-2 { background: var(--stato-annullato-fondo); color: var(--stato-annullato); }

/* Quante prenotazioni servono a una richiesta in lista d'attesa: è un dato,
   non un allarme, quindi resta neutro. Diventa ambra (.badge-attesa) solo
   quando quelle prenotazioni non entrano nel buco che si è liberato. */
.badge-conteggio {
    background: var(--sfondo); color: var(--testo-attenuato);
    border: 1px solid var(--bordo);
}

/* ---- Filtri per stato ---- */
.filtri-stato { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.filtro-stato {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem; border-radius: var(--raggio-pillola);
    border: 1px solid var(--bordo-marcato); background: var(--superficie);
    color: var(--testo); text-decoration: none; font-size: .82rem; font-weight: 550;
}
.filtro-stato:hover { background: var(--superficie-tenue); }
.filtro-stato.attivo { background: var(--marchio-rosso); color: #fff; border-color: var(--marchio-rosso); }
.filtro-conteggio {
    background: rgba(0, 0, 0, .07); border-radius: var(--raggio-pillola);
    padding: 0 .4rem; font-size: .75rem; font-variant-numeric: tabular-nums;
}
.filtro-stato.attivo .filtro-conteggio { background: rgba(255, 255, 255, .25); }

/* Pallino colorato davanti all'etichetta: ripete il codice colore dello stato. */
.filtro-stato[class*="pallino-"]::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.pallino-da_inviare::before { background: #C3B8AE; }
.pallino-in_attesa::before { background: var(--stato-no_show); }
.pallino-confermato::before { background: var(--stato-confermato); }
.pallino-disdetto::before { background: var(--stato-annullato); }

/* ---- Riquadro dello slot liberato dalla disdetta ---- */
.riga-slot td { padding: 0 0 .8rem; }
.riga-slot:hover { background: transparent; }

.slot-libero-box {
    background: var(--stato-no_show-fondo);
    border: 1px solid #EBD9BC; border-left: 3px solid var(--stato-no_show);
    border-radius: var(--raggio-piccolo); padding: .8rem .9rem;
}
.slot-libero-testata {
    font-weight: 650; font-size: .86rem; color: var(--stato-no_show);
    margin-bottom: .6rem;
}

.candidato {
    display: flex; flex-wrap: wrap; gap: .6rem;
    align-items: center; justify-content: space-between;
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo); padding: .6rem .75rem; margin-bottom: .45rem;
}
.candidato:last-child { margin-bottom: 0; }
.candidato-dati { flex: 1 1 220px; min-width: 0; }
.candidato-nome { font-weight: 650; color: var(--testo); text-decoration: none; font-size: .92rem; }
.candidato-nome:hover { color: var(--marchio-rosso); }
.candidato-azioni { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.candidato-azioni .btn { font-size: .8rem; padding: .4rem .7rem; }

.avviso {
    background: var(--stato-no_show-fondo); border-left: 3px solid var(--stato-no_show);
    color: var(--stato-no_show); padding: .8rem 1rem;
    border-radius: var(--raggio-piccolo); margin-bottom: 1.2rem; font-size: .9rem;
}
.avviso a { color: inherit; font-weight: 600; }

.dettaglio-riga { color: var(--testo-attenuato); font-size: .76rem; }

/* ============================================================
   Calendario giornaliero
   ============================================================ */

.griglia {
    /* Il numero di colonne dipende da quanti calendari vede l'utente:
       --n-cal viene impostato dal template (2 per le segretarie, 1 per il personale). */
    display: grid;
    --col-ora: 60px;
    grid-template-columns: var(--col-ora) repeat(var(--n-cal, 2), 1fr);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio); overflow: hidden;
    background: var(--superficie); box-shadow: var(--ombra);
}
.griglia > div { border-bottom: 1px solid #F3EEE9; }

.intestazione {
    background: var(--superficie-tenue); font-weight: 650; font-size: .74rem;
    padding: .6rem .6rem; text-transform: uppercase;
    color: var(--testo-attenuato); letter-spacing: .05em;
}
.cella-ora {
    font-size: .74rem; color: var(--testo-attenuato); padding: .35rem .5rem;
    background: #FDFBF9; font-variant-numeric: tabular-nums;
}
/* Le mezz'ore intermedie sono più discrete: la griglia resta leggibile. */
.riga-intermedia .cella-ora, .cella-ora.riga-intermedia { color: #A99E95; font-size: .67rem; }

.cella { padding: .2rem; min-height: 32px; }
.cella.riga-principale { min-height: 42px; }

.slot-libero {
    display: block; text-align: center; color: #C3B8AE; text-decoration: none;
    font-size: 1.05rem; line-height: 1.45; border-radius: var(--raggio-piccolo);
    border: 1px dashed transparent;
}
.slot-libero:hover {
    background: #FCF0F0; color: var(--marchio-rosso); border-color: #F0CDCE;
}

/* L'appuntamento standard da mezz'ora ha il pallino rosso pieno, lo stesso
   rosso dei pulsanti d'azione: è la prenotazione normale, quella che si fa
   quasi sempre. La riga intermedia da 15 minuti resta un "+" leggero, così
   la griglia non si riempie di pallini e le due durate si distinguono
   guardando, senza dover leggere l'orario. */
.slot-mezzora .slot-segno {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--marchio-rosso); color: #fff;
    font-size: .95rem; font-weight: 600; line-height: 1;
    transition: background-color .12s ease;
}
.slot-mezzora:hover .slot-segno { background: var(--marchio-rosso-scuro); }

/* Fascia già occupata da un appuntamento che la attraversa: l'unico modo di
   infilarsi è sovrapporsi a quello che c'è. Ambra e sbiadito, perché è
   l'eccezione per le urgenze e non va confusa con una prenotazione normale:
   si fa notare solo quando ci si passa sopra. */
.slot-sovrapposto {
    display: block; text-align: center; text-decoration: none;
    color: var(--stato-no_show); opacity: .28;
    font-size: 1.05rem; line-height: 1.45;
    border-radius: var(--raggio-piccolo); border: 1px dashed transparent;
    transition: opacity .12s ease, background-color .12s ease;
}
.slot-sovrapposto:hover, .slot-sovrapposto:focus-visible {
    opacity: 1; background: var(--stato-no_show-fondo); border-color: #EBD9BC;
}

.slot-occupato { height: 100%; }

/* Nome e orario a sinistra, stato a destra. Su una riga tutta sua lo stato
   sprecava un'intera altezza di riga per una parola sola, e in una griglia
   con 48 righe quello spazio si moltiplica. */
.appuntamento {
    display: flex; align-items: center; gap: .55rem;
    border-left: 3px solid var(--stato-prenotato);
    background: var(--stato-prenotato-fondo);
    border-radius: var(--raggio-piccolo);
    padding: .35rem .55rem; font-size: .8rem; margin-bottom: .18rem;
}
/* min-width: 0 lascia che la colonna del testo si stringa quando serve:
   senza, un nome lungo allargherebbe la scheda oltre la sua cella. */
.appuntamento-testo { flex: 1 1 auto; min-width: 0; }
.appuntamento > form, .appuntamento-stato { flex: 0 0 auto; }
.appuntamento a, .appuntamento .nome-paziente {
    color: var(--testo); text-decoration: none; font-weight: 620;
}
.appuntamento a:hover { text-decoration: underline; }
.appuntamento .dettaglio { color: var(--testo-attenuato); font-size: .73rem; }
.appuntamento select {
    font-size: .7rem; padding: .15rem .3rem; width: auto;
    border-radius: 6px;
}

/* ---- Appuntamento più corto dello standard ----
   Scheda compatta: la durata si riconosce dall'ingombro, senza dover leggere
   l'orario. Non si tocca il colore, che qui dice già lo stato (prenotato,
   confermato, disdetto): due informazioni diverse sullo stesso segnale si
   confonderebbero. Il bordo resta colorato, solo più sottile. */
.appuntamento-breve {
    padding: .22rem .45rem;
    font-size: .73rem;
    border-left-width: 2px;
}
.appuntamento-breve .dettaglio { font-size: .67rem; }
.appuntamento-breve select { font-size: .65rem; padding: .1rem .25rem; }
/* Stretta anche di lato, rientrata da entrambi i bordi: la tendina dello
   stato ha un'altezza minima sua e non lascia comprimere la scheda quanto
   basterebbe, così la differenza si legge in larghezza invece che in
   altezza. Solo nella griglia: sul telefono le schede stanno in colonna,
   una più stretta sembrerebbe storta anziché più corta. */
.griglia .appuntamento-breve {
    width: 84%;
    margin-left: auto;
    margin-right: auto;
}

.appuntamento.stato-confermato {
    border-left-color: var(--stato-confermato); background: var(--stato-confermato-fondo);
}
.appuntamento.stato-completato {
    border-left-color: var(--stato-completato); background: var(--stato-completato-fondo);
}
.appuntamento.stato-annullato {
    border-left-color: var(--stato-annullato); background: var(--stato-annullato-fondo);
}
.appuntamento.stato-annullato a,
.appuntamento.stato-annullato .nome-paziente { text-decoration: line-through; opacity: .75; }
.appuntamento.stato-no_show {
    border-left-color: var(--stato-no_show); background: var(--stato-no_show-fondo);
}

/* ============================================================
   Agenda giornaliera su smartphone: lista con interruttore Visite/Holter
   ============================================================ */

/* Su desktop vale la griglia a colonne: la lista resta nascosta. */
.agenda-mobile { display: none; }

/* Interruttore segmentato: due opzioni in una capsula, la scelta si accende. */
.seg {
    display: inline-flex; gap: 3px; padding: 3px;
    background: var(--superficie-tenue);
    border: 1px solid var(--bordo); border-radius: 10px;
    margin-bottom: .9rem;
}
.seg-opt {
    position: relative; flex: 1 1 0; text-align: center;
    padding: .45rem 1.1rem; border-radius: 8px;
    font-size: .85rem; font-weight: 600; color: var(--testo-attenuato);
    cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt:has(input:checked) {
    background: var(--marchio-rosso); color: #fff;
    box-shadow: 0 1px 3px rgba(163, 31, 37, .3);
}
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--marchio-rosso); outline-offset: 2px; }

.agenda-scheda { padding: .75rem .9rem; margin-bottom: .5rem; font-size: .88rem; }
.agenda-scheda .dettaglio { font-size: .78rem; }

/* Scorciatoia di prenotazione tra una scheda e l'altra. */
.agenda-piu {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .5rem; padding: .3rem;
    color: #C3B8AE; text-decoration: none; font-size: .82rem;
    border: 1px dashed transparent; border-radius: var(--raggio-piccolo);
}
.agenda-piu:hover, .agenda-piu:focus-visible {
    color: var(--marchio-rosso); border-color: #F0CDCE; background: #FCF0F0;
}

.agenda-vuota { text-align: center; padding: 1.8rem 0; color: var(--testo-attenuato); font-size: .85rem; }

/* ============================================================
   Vista settimanale
   ============================================================ */

.settimana { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: .8rem; }

.giorno-card {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: .9rem; box-shadow: var(--ombra-lieve);
    /* Ancoraggio del link "esteso" della testata, che rende cliccabile
       l'intera scheda del giorno. */
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.giorno-card:hover { border-color: var(--bordo-marcato); box-shadow: var(--ombra); }
.giorno-card.oggi { border-color: var(--marchio-rosso); box-shadow: 0 0 0 2px rgba(193, 39, 45, .12); }
.giorno-card.chiuso { background: var(--superficie-tenue); box-shadow: none; }

.giorno-testata {
    font-weight: 650; font-size: .92rem; margin-bottom: .6rem;
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.giorno-testata a { color: var(--testo); text-decoration: none; }
.giorno-testata a:hover { color: var(--marchio-rosso); }
/* Un velo invisibile sopra tutta la scheda: cliccare ovunque sul giorno
   porta alla sua agenda, non serve mirare al titolo. */
.giorno-testata a::after { content: ''; position: absolute; inset: 0; }

.giorno-colonna { margin-bottom: .7rem; }
.giorno-etichetta {
    font-size: .66rem; text-transform: uppercase; color: var(--testo-attenuato);
    letter-spacing: .06em; margin-bottom: .3rem; font-weight: 650;
}

.riga-appuntamento {
    border-left: 3px solid var(--stato-prenotato);
    background: var(--stato-prenotato-fondo);
    border-radius: var(--raggio-piccolo);
    padding: .35rem .55rem; margin-bottom: .3rem; font-size: .82rem;
}
.riga-appuntamento.stato-confermato {
    border-left-color: var(--stato-confermato); background: var(--stato-confermato-fondo);
}
.riga-appuntamento.stato-completato {
    border-left-color: var(--stato-completato); background: var(--stato-completato-fondo);
}
.riga-appuntamento.stato-annullato {
    border-left-color: var(--stato-annullato); background: var(--stato-annullato-fondo);
}
.riga-appuntamento.stato-no_show {
    border-left-color: var(--stato-no_show); background: var(--stato-no_show-fondo);
}
.vuoto { color: #B3A79E; font-size: .78rem; font-style: italic; }

/* ============================================================
   Scheda paziente
   ============================================================ */

.scheda {
    margin: 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem;
}
.scheda dt {
    font-size: .71rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--testo-attenuato); font-weight: 650;
}
.scheda dd { margin: .15rem 0 0; font-size: .95rem; }

/* ============================================================
   Stampa: resta solo ciò che serve su carta
   ============================================================ */

@media print {
    header, .toolbar, .no-print, .messages, .btn { display: none !important; }
    body { background: #fff; }
    main { max-width: none; padding: 0; }
    .card, .giorno-card, .griglia { box-shadow: none; border: 1px solid #ccc; }
    .settimana { grid-template-columns: repeat(2, 1fr); }
    .griglia { page-break-inside: auto; }
}

/* ============================================================
   Schermi piccoli (smartphone)
   ============================================================ */

@media (max-width: 720px) {
    /* Le tabelle diventano un elenco di schede: una scheda per riga,
       con l'aspetto delle card del resto del gestionale. */
    table, thead, tbody, tr, td, th { display: block; }
    thead { display: none; }
    tr {
        background: var(--superficie); border: 1px solid var(--bordo);
        border-radius: var(--raggio-piccolo); box-shadow: var(--ombra-lieve);
        padding: .8rem .9rem; margin-bottom: .7rem;
    }
    tbody tr:hover { background: var(--superficie); }
    tbody tr:last-child { margin-bottom: 0; }
    td { border: none; padding: .22rem 0; }
    td::before {
        content: attr(data-label) ": "; font-weight: 650;
        color: var(--testo-attenuato); font-size: .8rem;
    }
    /* La prima cella è il titolo della scheda (nome del paziente):
       niente etichetta, solo il nome in evidenza. */
    td:first-child { padding-top: 0; font-size: 1rem; font-weight: 650; }
    td:first-child::before { content: none; }
    /* Le celle delle azioni: pulsanti comodi, larghi quanto la scheda. */
    td[data-label="Azioni"] { display: flex; gap: .5rem; padding-top: .55rem; }
    td[data-label="Azioni"]::before { content: none; }
    td[data-label="Azioni"] .btn { flex: 1 1 0; text-align: center; }
    td[data-label="Azioni"] form { flex: 1 1 0; display: flex; }
    td[data-label="Azioni"] form .btn { width: 100%; }

    /* Il riquadro dello slot libero non è una riga di dati: niente aspetto da
       scheda, si attacca all'appuntamento disdetto che lo precede. */
    .riga-slot {
        background: transparent; border: none; box-shadow: none;
        padding: 0; margin: -.4rem 0 .7rem;
    }
    .candidato { flex-direction: column; align-items: stretch; }
    .candidato-azioni { display: grid; grid-template-columns: 1fr 1fr; }
    .candidato-azioni .btn { width: 100%; text-align: center; }
    /* "Sostituisci" occupa tutta la riga: è l'azione che cambia il calendario
       e va distinta dalle due che servono solo a mettersi in contatto. */
    .candidato-azioni form:last-child { grid-column: 1 / -1; }

    /* Sullo smartphone la griglia a colonne lascia il posto alla lista
       con l'interruttore Visite/Holter: si legge un calendario alla volta. */
    .griglia { display: none; }
    .agenda-mobile { display: block; }
    .agenda-mobile .seg { display: flex; }

    /* Impalcatura da applicazione. Il corpo della pagina è alto esattamente
       quanto lo schermo e non scorre mai: scorre solo l'impalcatura, cioè
       intestazione e contenuto. Così la barra degli indirizzi del telefono non
       ha più motivo di aprirsi e chiudersi durante la lettura, e la barra di
       navigazione, che è l'ultima riga del corpo, non ha proprio modo di
       spostarsi: non è appesa a un fondo che si muove, è il fondo. */
    html { height: 100%; }
    body {
        display: flex; flex-direction: column;
        /* Prima approssimazione, valida finché non parte navigazione.js, che
           misura l'area visibile davvero e scrive l'altezza esatta qui sopra
           come stile in linea. Le unità dello schermo mentono su parecchi
           telefoni — con l'app aggiunta alla schermata Home lasciavano una
           striscia vuota sotto la barra. */
        height: 100vh;   /* riserva per i browser che non conoscono dvh */
        height: 100dvh;
        overflow: hidden;
    }
    .impalcatura {
        display: block; flex: 1 1 auto; min-height: 0;
        overflow-y: auto; overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* In fondo resta solo lo spazio per il pulsante "+" dell'agenda, che
       galleggia sopra il contenuto. La barra invece non copre più niente. */
    main {
        padding: 1rem calc(.85rem + env(safe-area-inset-right, 0px))
                 5rem
                 calc(.85rem + env(safe-area-inset-left, 0px));
    }
    h1 { font-size: 1.375rem; }
    .card { padding: 1.1rem; border-radius: var(--raggio-piccolo); }
    header {
        padding: calc(.8rem + env(safe-area-inset-top, 0px))
                 calc(.9rem + env(safe-area-inset-right, 0px))
                 .85rem
                 calc(.9rem + env(safe-area-inset-left, 0px));
    }
    .brand { font-size: .85rem; }
    .marchio-logo { height: 32px; }
    .utente-nome { display: none; }

    /* Il menu in alto lascia il posto alla barra in basso, più comoda col pollice. */
    .nav-capsula { display: none; }

    /* Roba da scrivania: un foglio di calcolo scaricato sul telefono finisce
       in una cartella che nessuno va a cercare, e intanto occupa spazio in una
       barra di pulsanti che sullo schermo stretto è già affollata. */
    .solo-computer { display: none !important; }

    /* Le scorciatoie della home una sopra l'altra, larghe quanto lo schermo:
       col pollice si prende la mira molto meglio che su bottoni affiancati. */
    .cruscotto { grid-template-columns: 1fr; }
    .riquadro-numero { font-size: 1.7rem; }
    .riquadro-ora { font-size: 2.3rem; }

    /* I campi affiancati dei moduli tornano in colonna. */
    .modulo-due-col { grid-template-columns: 1fr; gap: 0; }

    /* Pulsante flottante "+" dell'agenda: prenotazione rapida col pollice,
       sopra la barra di navigazione inferiore. */
    .fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 18px; z-index: 35;
        bottom: calc(var(--barra-fondo) + var(--barra-altezza) + 12px);
        width: 56px; height: 56px; border-radius: 50%;
        background: var(--marchio-rosso); color: #fff;
        font-size: 1.7rem; line-height: 1; text-decoration: none;
        box-shadow: var(--ombra-flottante);
    }
    .fab:hover { background: var(--marchio-rosso-scuro); }

    .nav-basso {
        display: flex; position: relative; flex: 0 0 auto;
        /* Non più "fixed": è una riga del corpo, che è alto quanto lo schermo.
           Il margine di sotto comprende la zona sicura dell'iPhone, così la
           barra sta sopra la barretta Home senza gonfiarsi dall'interno. */
        margin: 0 var(--barra-margine) var(--barra-fondo);
        z-index: 40; padding: 5px 7px;
        background: rgba(46, 45, 48, .94);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border-radius: 26px; box-shadow: var(--ombra-flottante-mobile);
    }
    .nav-basso .nav-indicatore {
        top: 5px; bottom: 5px; left: 7px;
    }
    /* Solo icone: le etichette sotto ai disegni, già minuscole per starci,
       si leggevano peggio dell'icona che accompagnavano. Tolte quelle, ogni
       scheda diventa un bersaglio più largo per il pollice. */
    .nav-scheda {
        position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
        display: flex; align-items: center; justify-content: center;
        padding: 5px .15rem; min-height: 44px;
        background: transparent; border: none; border-radius: var(--raggio-pillola);
        color: #fff; opacity: .6; font-family: inherit;
        text-decoration: none; cursor: pointer; transition: opacity .15s ease;
    }
    .nav-scheda.attiva { opacity: 1; background: var(--marchio-rosso); }
    .collocata .nav-scheda.attiva { background: transparent; }
    .nav-scheda svg { width: 24px; height: 24px; }

    /* Pannello con le sezioni che non entrano nelle cinque schede.
       Da chiuso resta nel documento ma con visibility:hidden, che lo toglie
       anche dalla navigazione da tastiera e dai lettori di schermo. */
    .altro-fondale {
        display: block; position: fixed; inset: 0; z-index: 45;
        background: rgba(0, 0, 0, .35);
        visibility: hidden; opacity: 0;
        transition: opacity .2s ease, visibility .2s;
    }
    .altro-fondale.aperto { visibility: visible; opacity: 1; }
    .altro-pannello {
        display: flex; flex-direction: column; gap: .2rem;
        position: fixed; z-index: 46;
        left: var(--barra-margine); right: var(--barra-margine);
        bottom: calc(var(--barra-fondo) + var(--barra-altezza) + 8px);
        padding: .75rem; background: var(--superficie);
        border: 1px solid var(--bordo); border-radius: var(--raggio);
        box-shadow: var(--ombra-flottante-mobile);
        transform: translateY(12px); visibility: hidden; opacity: 0;
        transition: transform .2s ease, opacity .2s ease, visibility .2s;
    }
    .altro-pannello.aperto { transform: translateY(0); visibility: visible; opacity: 1; }
    .altro-maniglia {
        width: 36px; height: 4px; border-radius: 2px; background: var(--bordo-marcato);
        margin: 0 auto .5rem;
    }
    .altro-voce {
        display: flex; align-items: center; gap: .7rem;
        padding: .7rem .8rem; border-radius: var(--raggio-piccolo);
        color: var(--testo); text-decoration: none; font-size: .92rem; font-weight: 550;
    }
    .altro-voce:hover { background: var(--superficie-tenue); }
    .altro-voce.attiva { background: var(--stato-annullato-fondo); color: var(--marchio-rosso); }
}

/* La barra fluttuante non va stampata. */
@media print {
    .nav-basso, .altro-pannello, .altro-fondale, .nav-capsula,
    .avviso-offline { display: none !important; }
    /* Un corpo alto quanto lo schermo e senza scorrimento manderebbe in stampa
       solo la prima schermata: sulla carta si torna al flusso normale. */
    html, body { height: auto !important; overflow: visible !important; display: block !important; }
    .impalcatura { display: block !important; overflow: visible !important; height: auto !important; }
}