/* ─────────────────────────────────────────────────────────────────────────
   Intranet TAN — stile comune.
   Bianco, essenziale, accenti nel giallo del logo.
   I colori e le misure stanno tutti in :root — cambiandoli cambia tutto.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Marchio */
    --giallo:            #F3D724;   /* il giallo del logo */
    --giallo-hover:      #E6C913;
    --giallo-tenue:      #FDF8D6;
    --giallo-testo:      #7A6400;   /* giallo scuro leggibile su bianco */

    /* Neutri */
    --bianco:            #FFFFFF;
    --grigio-sfondo:     #F5F5F7;
    --grigio-hover:      #ECECF0;
    --linea:             #E5E5EA;
    --linea-forte:       #D2D2D7;
    --testo:             #1D1D1F;
    --testo-2:           #6E6E73;
    --testo-3:           #86868B;

    /* Stati */
    --verde:             #1A7F37;
    --verde-tenue:       #E9F6EC;
    --rosso:             #C9302C;
    --rosso-tenue:       #FDEDEC;
    --blu-tenue:         #EEF4FD;

    /* Forme */
    --r-piccolo:         10px;
    --r-medio:           14px;
    --r-grande:          22px;
    --pillola:           980px;
    --ombra-leggera:     0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
    --ombra-sollevata:   0 12px 32px rgba(0, 0, 0, .10);
    --anello:            0 0 0 4px rgba(243, 215, 36, .45);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-titoli: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --transizione: 220ms cubic-bezier(.25, .1, .25, 1);
    --larghezza: 1120px;
}

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

/* Un elemento con l'attributo hidden resta nascosto anche se il suo stile dice altro */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--testo);
    background: var(--bianco);
    overflow-x: clip;   /* rete di sicurezza contro lo scorrimento laterale (non disturba gli elementi fissi) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--testo); text-decoration-color: var(--giallo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--testo); }

h1, h2, h3 { font-family: var(--font-titoli); color: var(--testo); margin: 0; }
h1 { font-size: clamp(32px, 4.5vw, 48px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 16px; }
h3 { font-size: 17px; font-weight: 600; }

.sottotitolo { font-size: 19px; color: var(--testo-2); margin: 10px 0 0; letter-spacing: -0.01em; }
.occhiello {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--giallo-testo);
    margin-bottom: 10px;
}

.icona { width: 20px; height: 20px; flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }

/* ── Barra superiore (vetro smerigliato) ──────────────────────────────── */
.barra {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.barra-interno {
    max-width: var(--larghezza);
    margin: 0 auto;
    height: 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.barra-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.barra-logo img { height: 30px; width: auto; display: block; }
.barra-logo span {
    font-size: 15px;
    font-weight: 600;
    color: var(--testo);
    padding-left: 12px;
    border-left: 1px solid var(--linea-forte);
    letter-spacing: -0.01em;
}

.barra-menu { display: flex; gap: 4px; flex: 1; min-width: 0; }
.barra-menu a {
    position: relative;
    color: var(--testo-2);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--pillola);
    white-space: nowrap;
    transition: color var(--transizione), background var(--transizione);
}
.barra-menu a:hover { color: var(--testo); background: var(--grigio-sfondo); }
.barra-menu a.attivo { color: var(--testo); font-weight: 600; }
.barra-menu .icona-esterna { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; opacity: .6; }
.barra-menu a.attivo::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -11px;
    height: 2px;
    border-radius: 2px;
    background: var(--giallo);
}

.barra-utente { position: relative; margin-left: auto; }
.barra-utente summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    padding: 4px 4px 4px 4px;
    border-radius: var(--pillola);
    transition: background var(--transizione);
}
.barra-utente summary:hover { background: var(--grigio-sfondo); }
.barra-utente summary::-webkit-details-marker { display: none; }
.barra-utente .nome-utente { padding-right: 8px; }
.avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--giallo);
    color: var(--testo);
    font-weight: 700;
    font-size: 14px;
}
.tendina {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 240px;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--r-medio);
    box-shadow: var(--ombra-sollevata);
    padding: 8px;
    animation: compari 160ms ease-out;
}
.tendina-intestazione { padding: 10px 12px 12px; border-bottom: 1px solid var(--linea); margin-bottom: 6px; }
.tendina-intestazione strong { display: block; font-size: 15px; }
.tendina-intestazione span { font-size: 13px; color: var(--testo-2); }
.tendina a, .tendina button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: var(--testo);
    font: inherit;
    font-size: 14px;
    text-decoration: none;
    border-radius: var(--r-piccolo);
    cursor: pointer;
}
.tendina a:hover, .tendina button:hover { background: var(--grigio-sfondo); }
.tendina .icona { width: 18px; height: 18px; color: var(--testo-2); }
.tendina form { margin: 0; }

.barra-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    background: none;
    border: 0;
    color: var(--testo);
    cursor: pointer;
    border-radius: var(--pillola);
}

@keyframes compari { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Contenuto ────────────────────────────────────────────────────────── */
.contenuto { max-width: var(--larghezza); margin: 0 auto; padding: 56px 24px 96px; }

.intestazione-pagina {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.torna {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--testo-2);
    text-decoration: none;
    margin-bottom: 14px;
}
.torna:hover { color: var(--testo); }
.torna .icona { width: 16px; height: 16px; }

.scheda {
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--r-grande);
    padding: 28px;
    margin-bottom: 24px;
}
.scheda-grigia { background: var(--grigio-sfondo); border-color: transparent; }

/* Avvisi */
.avviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-medio);
    margin-bottom: 28px;
    font-size: 15px;
}
.avviso .icona { margin-top: 1px; }
.avviso-successo { background: var(--verde-tenue); color: var(--verde); }
.avviso-errore   { background: var(--rosso-tenue); color: var(--rosso); }
.avviso-info     { background: var(--giallo-tenue); color: var(--testo); }
.avviso-info .icona { color: var(--giallo-testo); }
.avviso code, .codice-evidente {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 15px;
    font-weight: 600;
    background: var(--bianco);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: .02em;
}

/* ── Home: saluto e tessere ───────────────────────────────────────────── */
.eroe { margin-bottom: 48px; }
.eroe h1 { font-size: clamp(36px, 5.5vw, 56px); }
.eroe h1 .punto { color: var(--giallo); }

.griglia-app {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.tessera {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 28px;
    background: var(--grigio-sfondo);
    border-radius: var(--r-grande);
    color: var(--testo);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--transizione), background var(--transizione), box-shadow var(--transizione);
}
.tessera:hover { background: var(--grigio-hover); transform: translateY(-3px); }
.tessera:active { transform: scale(.985); }
.tessera-icona {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-medio);
    background: var(--giallo);
    color: var(--testo);
    margin-bottom: 22px;
}
.tessera-icona .icona { width: 26px; height: 26px; }
.tessera-nome { font-family: var(--font-titoli); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.tessera-descrizione { color: var(--testo-2); font-size: 15px; margin-top: 4px; flex: 1; }
.tessera-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.tessera-livello { font-size: 13px; color: var(--testo-2); }
.tessera-freccia {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bianco);
    transition: transform var(--transizione), background var(--transizione);
}
.tessera-freccia .icona { width: 16px; height: 16px; }
.tessera:hover .tessera-freccia { transform: translateX(3px); background: var(--giallo); }

/* ── Moduli ───────────────────────────────────────────────────────────── */
label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--testo); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], select, textarea {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--linea-forte);
    border-radius: var(--r-medio);
    font: inherit;
    font-size: 16px;   /* 16px evita lo zoom automatico su iPhone */
    background: var(--bianco);
    color: var(--testo);
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
textarea { height: auto; padding: 12px 16px; }
/* I campi data su iPhone hanno una larghezza minima propria: così si adattano alla colonna */
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; display: block; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input::placeholder { color: var(--testo-3); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--testo);
    box-shadow: var(--anello);
}
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--testo); width: 18px; height: 18px; margin: 0; cursor: pointer; }

.campo { margin-bottom: 20px; }
.campo-aiuto { font-size: 13px; color: var(--testo-2); margin-top: 6px; }
.spunta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 400;
    font-size: 15px;
    padding: 12px 0;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid var(--linea);
}
.spunta:last-child { border-bottom: 0; }
.spunta input { margin-top: 2px; }
.spunta small { display: block; color: var(--testo-2); font-size: 13px; }

/* Pulsanti a pillola */
.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--pillola);
    background: var(--testo);
    color: var(--bianco);
    font: inherit;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transizione), transform var(--transizione);
}
.pulsante:hover { background: #3A3A3C; }
.pulsante:active { transform: scale(.97); }
.pulsante .icona { width: 18px; height: 18px; }
.pulsante-giallo { background: var(--giallo); color: var(--testo); }
.pulsante-giallo:hover { background: var(--giallo-hover); }
.pulsante-secondario { background: var(--grigio-sfondo); color: var(--testo); }
.pulsante-secondario:hover { background: var(--grigio-hover); }
.pulsante-pericolo { background: var(--rosso-tenue); color: var(--rosso); }
.pulsante-pericolo:hover { background: #FADBD8; }
.pulsante-piccolo { min-height: 36px; padding: 0 16px; font-size: 14px; }
.pulsante-grande { min-height: 52px; font-size: 17px; }
.pulsante-largo { width: 100%; }
.pulsante:disabled { opacity: .45; cursor: default; transform: none; }
.azioni { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Tabelle ──────────────────────────────────────────────────────────── */
.tabella-contenitore { overflow-x: auto; padding: 8px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--testo-2);
    padding: 12px 20px;
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}
td { padding: 16px 20px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr { transition: background var(--transizione); }
tbody tr:hover { background: #FAFAFB; }
tr:last-child td { border-bottom: 0; }
.cella-persona { display: flex; align-items: center; gap: 12px; }
.cella-persona .avatar { width: 36px; height: 36px; background: var(--grigio-sfondo); font-size: 14px; }
.cella-persona .avatar.super { background: var(--giallo); }
.cella-persona small { display: block; color: var(--testo-2); font-size: 13px; }

.etichetta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: var(--pillola);
    background: var(--grigio-sfondo);
    color: var(--testo);
    margin: 2px 4px 2px 0;
    white-space: nowrap;
}
.etichetta-gialla { background: var(--giallo); }
.etichetta-verde  { background: var(--verde-tenue); color: var(--verde); }
.etichetta-rossa  { background: var(--rosso-tenue); color: var(--rosso); }
.etichetta-neutra { background: var(--blu-tenue); color: #2C4A7C; }
.pallino { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Schede di navigazione (controllo segmentato) ─────────────────────── */
.schede {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    margin-bottom: 32px;
    background: var(--grigio-sfondo);
    border-radius: var(--pillola);
    max-width: 100%;
    overflow-x: auto;
}
.schede a {
    padding: 8px 18px;
    color: var(--testo-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--pillola);
    white-space: nowrap;
    transition: background var(--transizione), color var(--transizione);
}
.schede a:hover { color: var(--testo); }
.schede a.attiva { background: var(--bianco); color: var(--testo); box-shadow: var(--ombra-leggera); }

/* ── Matrice permessi ─────────────────────────────────────────────────── */
.tabella-permessi td:first-child { min-width: 180px; }
.tabella-permessi th .icona { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.tabella-permessi select { min-width: 150px; height: 40px; font-size: 14px; border-radius: var(--pillola); }
.tabella-permessi select.ha-permesso { background-color: var(--giallo-tenue); border-color: var(--giallo); font-weight: 500; }

/* Tabella applicazioni */
.anteprima-icona {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-piccolo);
    background: var(--giallo);
}

/* ── Pagine senza menu (login, primo accesso) ─────────────────────────── */
.pagina-semplice { min-height: 100vh; display: flex; flex-direction: column; background: var(--bianco); }
.pagina-semplice .contenuto {
    flex: 1;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 20px;
}
.accesso { text-align: center; }
.accesso .logo-login { display: block; width: 132px; height: auto; margin: 0 auto 36px; }
.accesso h1 { font-size: 40px; }
.accesso .sottotitolo { font-size: 17px; margin-bottom: 36px; }
.accesso form { text-align: left; }
.accesso .avviso { text-align: left; }
.piede-accesso { text-align: center; font-size: 12px; color: var(--testo-3); padding: 24px; }
.link-secondario {
    display: block;
    margin: 20px auto 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 14px;
    color: var(--testo-2);
    cursor: pointer;
}
.link-secondario:hover { color: var(--testo); text-decoration: underline; }

.messaggio-centrale { text-align: center; max-width: 520px; margin: 40px auto; }
.messaggio-centrale .sottotitolo { margin-bottom: 32px; }
.icona-grande {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: 20px;
    background: var(--giallo);
}
.icona-grande .icona { width: 34px; height: 34px; }

.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }


/* ── Componenti condivisi dalle app ───────────────────────────────────── */
.riga-titolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.riga-titolo h2 { margin: 0; }

.link-azzera {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 14px;
    color: var(--testo-2);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--pillola);
}
.link-azzera:hover { color: var(--testo); background: var(--bianco); }
.link-azzera .icona { width: 16px; height: 16px; }

.quantita {
    display: flex;
    align-items: center;
    background: var(--bianco);
    border: 1px solid var(--linea-forte);
    border-radius: var(--pillola);
    padding: 4px;
}
.quantita input {
    width: 64px;
    height: 44px;
    border: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 0;
    -moz-appearance: textfield;
}
.quantita input:focus { box-shadow: none; }
.quantita input::-webkit-outer-spin-button,
.quantita input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantita-pulsante {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--grigio-sfondo);
    color: var(--testo);
    cursor: pointer;
    transition: background var(--transizione);
}
.quantita-pulsante:hover { background: var(--grigio-hover); }
.quantita-pulsante .icona { width: 18px; height: 18px; }

.conteggio {
    display: inline-block;
    min-width: 28px;
    padding: 2px 10px;
    margin-left: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    vertical-align: 3px;
    background: var(--giallo);
    border-radius: var(--pillola);
}
.conteggio:empty { display: none; }

.pulsante-icona {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--testo-3);
    cursor: pointer;
    transition: background var(--transizione), color var(--transizione);
}
.pulsante-icona:hover { background: var(--grigio-sfondo); color: var(--testo); }
.pulsante-icona.pericolo:hover { background: var(--rosso-tenue); color: var(--rosso); }
.pulsante-icona:disabled { opacity: .35; cursor: not-allowed; background: none; color: var(--testo-3); }
.azioni-riga { display: flex; justify-content: flex-end; gap: 2px; }

/* Finestre (dialog). Il contenuto scorre; pulsanti (e totale) restano fissi in basso. */
.finestra {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--r-grande);
    background: var(--bianco);
    color: var(--testo);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
}
.finestra > form {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 28px 0;
}
.finestra-azioni, .finestra-piede {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bianco);
    padding: 16px 0 24px;
}
.finestra-piede .finestra-azioni { position: static; padding: 12px 0 0; margin-top: 0; }
.finestra[open] { animation: compari 180ms ease-out; }
.finestra::backdrop { background: rgba(29, 29, 31, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.finestra .chiudi { margin: 0; }
.finestra .scelta { border-top-color: var(--linea); }
.finestra-azioni { justify-content: flex-end; margin-top: 8px; }
.pulsante-icona .icona { width: 18px; height: 18px; }

/* Interruttore stile iOS */
.interruttore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--testo-2);
    cursor: pointer;
    user-select: none;
}
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore-binario {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: var(--pillola);
    background: var(--linea-forte);
    transition: background var(--transizione);
}
.interruttore-binario::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bianco);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform var(--transizione);
}
.interruttore input:checked + .interruttore-binario { background: var(--testo); }
.interruttore input:checked + .interruttore-binario::after { transform: translateX(18px); }
.interruttore input:focus-visible + .interruttore-binario { box-shadow: var(--anello); }

/* Notifiche in basso */
.notifiche {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
    pointer-events: none;
}
.notifica {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--testo);
    color: var(--bianco);
    font-size: 15px;
    border-radius: var(--pillola);
    box-shadow: var(--ombra-sollevata);
    animation: notificaEntra 200ms ease-out, notificaEsce 300ms ease-in 2.7s forwards;
}
.notifica .icona { width: 18px; height: 18px; color: var(--giallo); }
.notifica.errore { background: var(--rosso); }
.notifica.errore .icona { color: var(--bianco); }
@keyframes notificaEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes notificaEsce { to { opacity: 0; transform: translateY(6px); } }

.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }


/* ── Fogli stampabili (distinte, riepiloghi) ──────────────────────────────────────────────── */
.foglio { max-width: 880px; margin: 0 auto; }
.foglio-intestazione {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 20px;
    margin-bottom: 8px;
    border-bottom: 3px solid var(--giallo);
}
.foglio-intestazione img { height: 44px; display: block; margin-bottom: 18px; }
.foglio-intestazione h1 { font-size: 28px; }
.foglio-intestazione .sottotitolo { font-size: 15px; margin-top: 4px; }
.foglio-data { text-align: right; font-size: 15px; font-weight: 600; white-space: nowrap; }
.foglio-data span { display: block; font-weight: 400; color: var(--testo-2); font-size: 13px; }
.foglio table td, .foglio table th { padding: 10px 12px; }
.foglio tfoot td { font-weight: 700; font-size: 16px; border-top: 2px solid var(--testo); border-bottom: 0; }
.barra-stampa { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

@media print {
    @page { margin: 14mm; }
    .barra, .barra-stampa, .notifiche { display: none !important; }
    .contenuto { padding: 0; max-width: none; }
    body { font-size: 12px; }
    .foglio table { font-size: 12px; }
    .foglio-intestazione { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    tbody tr:hover { background: none; }
}

/* ── Telefono e tablet ────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .barra-interno { padding: 0 16px; gap: 12px; height: 56px; }
    .barra-logo span, .nome-utente { display: none; }
    .barra-hamburger { display: grid; order: 3; margin-right: -8px; }
    .barra-utente { order: 2; }
    .barra-menu {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        padding: 8px 16px 20px;
        border-bottom: 1px solid var(--linea);
        box-shadow: 0 16px 32px rgba(0, 0, 0, .06);
    }
    .barra-menu.aperto { display: flex; animation: compari 160ms ease-out; }
    .barra-menu a { font-size: 17px; padding: 14px 8px; border-radius: 0; border-bottom: 1px solid var(--linea); color: var(--testo); }
    .barra-menu a:last-child { border-bottom: 0; }
    .barra-menu a:hover { background: none; }
    .barra-menu a.attivo::after { left: -16px; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; }

    .contenuto { padding: 36px 16px 72px; }
    .eroe { margin-bottom: 32px; }
    .griglia-2 { grid-template-columns: 1fr; }
    .scheda { padding: 20px; border-radius: 18px; }
    .griglia-app { gap: 14px; }
    .tessera { min-height: 0; padding: 22px; }
    th, td { padding: 12px 14px; }
    /* Sul telefono la finestra occupa tutto lo schermo */
    .finestra {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }
    .finestra > form {
        height: 100%;
        max-height: none;
        padding: calc(16px + env(safe-area-inset-top)) 16px 0;
    }
    .finestra-azioni, .finestra-piede { padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
    .finestra-piede .finestra-azioni { padding: 10px 0 0; }
    .finestra-azioni .pulsante { flex: 1; }
}

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