/*
 * Liberty Shift — foglio di redesign.
 *
 * Va caricato DOPO styles.css, in index.html:
 *   <link rel="stylesheet" href="./styles.css">
 *   <link rel="stylesheet" href="./redesign.css">
 *
 * Non riscrive il layout: cambia token, dimensioni, colori e leggibilità.
 * Le sezioni, i pulsanti e i flussi restano quelli di styles.css.
 *
 * Tre decisioni, dette una volta:
 *
 * 1. Il colore ha un significato, non un umore. Blu = il turno che cedi,
 *    verde = il turno che prendi. Sono i due colori del marchio, e sono
 *    esattamente i due lati di uno scambio. Il rosso fa una cosa sola:
 *    errori e "ti aspetta una risposta". L'oro fa una cosa sola: la priorità.
 *
 * 2. Meno riquadri. Un bordo su ogni card, dentro una lista di card, dentro
 *    una sezione con bordo, dà cinque cornici per una informazione. Qui la
 *    separazione la fa la superficie (bianco su grigio) più un'ombra bassa;
 *    dentro una lista la fa un filetto, non un rettangolo per riga.
 *
 * 3. Più aria e testo più grande. Testo secondario a 14px, niente sotto i
 *    12px, bersagli da 44px. Un'app che si usa in negozio, in piedi, con
 *    una mano.
 *
 * Il file è cresciuto per passate, ognuna in fondo a vincere sulle altre.
 * Ora ogni selettore sta in un posto solo, con il valore che vinceva: chi
 * aggiunge una regola cerca prima se il selettore c'è già.
 */

/* ------------------------------------------------------------ token */

:root {
  --sfondo: #f2f5f9;
  --superficie: #ffffff;
  --superficie-2: #eaeef4;
  --testo: #0f1720;
  /* #667085 su bianco stava a 4.1:1: sotto la soglia per il testo piccolo,
     ed era proprio il testo piccolo a usarlo di più. */
  --testo-tenue: #56626f;
  --bordo: #e4e8ef;
  --filetto: #edf0f5;
  /* Il filo delle celle del tuo mese e dei campioni di legenda. */
  --linea: #dfe4eb;
  /* Il blu e il verde del marchio, sul bianco, stavano a 3,5–4 e 2,5–3:
     sotto la soglia proprio sul bottone principale. Queste tinte stanno
     sopra 4,5 sia come testo sul chiaro sia come fondo sotto il bianco. */
  --accento: #1d66db;
  --accento-tenue: #e9f1fe;
  /* I due lati di uno scambio, dal marchio. Il blu di chi cede È l'accento:
     scritto come alias, così i due non possono divergere per sbaglio. */
  --cedo: var(--accento);
  --cedo-tenue: var(--accento-tenue);
  --prendo: #0b7a52;
  --prendo-tenue: #e4f6ee;
  /* Il cambio orario ha un colore suo: ha un giorno solo, non lascia né offre. */
  --orario: #7a45d6;
  /* Chi cerca un OFF ha un arancio suo: il blu è di chi lascia un turno nelle
     schede, e nel Calendario "cerca" e "lascia" non si capivano. Anche la
     pillola "Cambio OFF" lo usa: chi pubblica un OFF è sempre chi lo cerca. */
  --cerca-off: #e0620d;
  /* L'oro delle priorità: filo e medaglia. La stella è scura, perché bianca su oro non si vede. */
  --priorita-oro: #e5a50a;
  --priorita-stella: #3d2a00;
  /* L'arancio dei testi piccoli (scritte, cerchi): più scuro, perché a 3,5:1 sul bianco non si legge. */
  --cerca-off-testo: #b04a00;
  /* Nome storico di --prendo, ancora usato da styles.css. */
  --verde: var(--prendo);
  --marchio: linear-gradient(118deg, #1d66db 0%, #0b7a52 100%);
  --rosso: #c0303a;
  /* Avvisi e match potenziali: un ambra, non l'oro. L'oro vuol dire priorità.
     Si chiamava --giallo, che resta come alias per styles.css. */
  --ambra: #a0520a;
  --giallo: var(--ambra);
  --oro: #8a6305;
  /* Il cuore dei ringraziamenti: rosa, perché il rosso vuol dire errore o
     "ti aspetta una risposta", e un grazie non è né l'uno né l'altro. */
  --grazie: #b4366e;
  /* "Aiuta un collega" in Home: un rosa Barbie. Pieno solo per i cuori e il
     bordo, che sono decorazione; il titolo prende un tono più scuro, perché
     #e0218a sul fondo rosa stava a 3,9:1. */
  --aiuta-fondo: #fdebf4;
  --aiuta-segno: #e0218a;
  --aiuta-testo: #c71a7a;
  /* "Cambio rapido" in Home, il gemello giallo fulmine: stessa idea, il
     giallo pieno solo per le saette e il bordo, il titolo in un ambra scuro
     (5,4:1 sul fondo) perché il giallo sul giallo non si legge. */
  --rapido-fondo: #fff4cc;
  --rapido-segno: #f5b800;
  --rapido-testo: #8a5a00;
  /* Le tue richieste hanno un colore loro, il viola, che il Calendario non
     usa: un colpo d'occhio basta a capire su quale dei due mesi si è. */
  --mio: #6b46c8;
  --mio-tenue: #efe9fb;
  /* Il giorno che sta cambiando, nel tuo mese: l'unico fondo colorato. */
  --da-cambiare: #fcefb4;
  --da-cambiare-bordo: #e6c65c;
  --da-cambiare-segno: #7a5300;
  /* Il cambio concordato, che aspetta solo UKG: verde chiaro come il verde di chi prende. */
  --concordato: #dff3e6;
  --concordato-bordo: #8fd3a8;
  --concordato-segno: #0b6b46;
  /* Il testo sopra un fondo pieno di accento. */
  --su-pieno: #ffffff;
  /* Cinque raggi: contenitori, controlli, celle, tendina, pillole. I 3–6px
     restano solo ai campioni di legenda, che disegnano una cella in piccolo. */
  --raggio: 18px;
  --raggio-s: 12px;
  --raggio-cella: 8px;
  --raggio-sheet: 24px;
  --raggio-pill: 999px;
  /* Il ritmo: 12 dentro un gruppo, 16 sotto ogni testata, 28 fra sezioni. */
  --spazio-gruppo: 12px;
  --spazio-testata: 16px;
  --spazio-sezione: 28px;
  --spazio-card: 18px;
  --margine-pagina: 18px;
  /* Il minimo per un pollice, in piedi, con una mano. */
  --bersaglio: 44px;
  --ombra: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 22px -8px rgba(15, 23, 42, .14);
  --ombra-alta: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px -14px rgba(15, 23, 42, .22);
  --tab-h: 66px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sfondo: #0d1421;
    --superficie: #16202f;
    --superficie-2: #1e2a3c;
    --testo: #f0f4fa;
    --testo-tenue: #9dabc0;
    --bordo: #26334a;
    --filetto: #223047;
    --linea: #2a3850;
    --accento: #62a0ff;
    --accento-tenue: #16263f;
    --prendo: #45d19a;
    --prendo-tenue: #12302a;
    --orario: #b496ff;
    --cerca-off: #ff9a52;
    --priorita-oro: #f2bf3a;
    --priorita-stella: #2e2000;
    --cerca-off-testo: #ff9a52;
    --rosso: #ff7b80;
    --ambra: #ffb066;
    --oro: #e8c04c;
    --grazie: #ff8fb8;
    --aiuta-fondo: #2e1625;
    --aiuta-segno: #ff7ec0;
    --aiuta-testo: #ff93cc;
    --rapido-fondo: #2b2410;
    --rapido-segno: #ffcf3d;
    --rapido-testo: #ffd34d;
    /* styles.css ridichiara questi due nel suo blocco scuro, che pesa più del
       :root chiaro: gli alias vanno ripetuti qui. */
    --verde: var(--prendo);
    --giallo: var(--ambra);
    --mio: #b39bff;
    --mio-tenue: #261d3d;
    --da-cambiare: #3d3412;
    --da-cambiare-bordo: #8a7128;
    --da-cambiare-segno: #f3cf5e;
    --concordato: #143a2c;
    --concordato-bordo: #2f7a58;
    --concordato-segno: #6fe0aa;
    /* In scuro i fondi pieni sono chiari: il bianco sopra stava a 2,5. */
    --su-pieno: #0d1421;
    --ombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px -10px rgba(0, 0, 0, .6);
    --ombra-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 22px 44px -16px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --sfondo: #0d1421;
  --superficie: #16202f;
  --superficie-2: #1e2a3c;
  --testo: #f0f4fa;
  --testo-tenue: #9dabc0;
  --bordo: #26334a;
  --filetto: #223047;
  --linea: #2a3850;
  --accento: #62a0ff;
  --accento-tenue: #16263f;
  --prendo: #45d19a;
  --prendo-tenue: #12302a;
  --orario: #b496ff;
  --cerca-off: #ff9a52;
  --priorita-oro: #f2bf3a;
  --priorita-stella: #2e2000;
  --cerca-off-testo: #ff9a52;
  --rosso: #ff7b80;
  --ambra: #ffb066;
  --oro: #e8c04c;
  --grazie: #ff8fb8;
  --aiuta-fondo: #2e1625;
  --aiuta-segno: #ff7ec0;
  --aiuta-testo: #ff93cc;
  --rapido-fondo: #2b2410;
  --rapido-segno: #ffcf3d;
  --rapido-testo: #ffd34d;
  --verde: var(--prendo);
  --giallo: var(--ambra);
  --mio: #b39bff;
  --mio-tenue: #261d3d;
  --da-cambiare: #3d3412;
  --da-cambiare-bordo: #8a7128;
  --da-cambiare-segno: #f3cf5e;
  --concordato: #143a2c;
  --concordato-bordo: #2f7a58;
  --concordato-segno: #6fe0aa;
  --su-pieno: #0d1421;
  --ombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px -10px rgba(0, 0, 0, .6);
  --ombra-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 22px 44px -16px rgba(0, 0, 0, .7);
}

/* -------------------------------------------------------- tipografia */

#app { padding-left: var(--margine-pagina); padding-right: var(--margine-pagina); }

h1 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; }

/* Le testate di sezione: erano maiuscoletto tenue a 15px, cioè grandi come
   il contenuto ma più difficili da leggere. In minuscolo, in colore pieno e
   in semibold pesano meno e si leggono meglio. */
h2 {
  font-size: 16px; font-weight: 650; text-transform: none;
  letter-spacing: -.01em; color: var(--testo); margin: 0 0 12px;
}
h3 { font-size: 16px; margin: 20px 0 10px; }

.testo-tenue, .meta, .riga-sintesi, .tile em, .coppia .orario,
.giorno-dettaglio .testo-tenue, .elenco.piccolo,
.gruppo-giorno > .testo-tenue { font-size: 14px; }
.occhiello { font-size: 16px; margin: 6px 0 18px; }
.badge, .tag { font-size: 12px; }
.esempio { border-radius: var(--raggio-s); }
.tag { border-radius: var(--raggio-pill); padding: 2px 9px; }
.badge .pallino-stato {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 2px; vertical-align: 0; background: var(--testo-tenue);
}
.stato-APERTA .pallino-stato { background: var(--rapido-segno); }
.stato-PROPOSTA .pallino-stato { background: var(--accento); }
.stato-IN_ATTESA .pallino-stato { background: var(--testo-tenue); }
.stato-ACCORDO .pallino-stato { background: var(--prendo); }
.stato-RIMOSSA .pallino-stato { background: var(--rosso); }
.perche { font-size: 14px; line-height: 1.55; }
.perche li { margin: 5px 0; }

/* Ritmo. Le distanze fra blocchi erano tredici valori diversi, e la testata
   distava dal contenuto 10, 22 o 30 px secondo la schermata. Ora: 12 dentro
   un gruppo, 28 fra sezioni, 16 sotto ogni testata. */
.testata { padding: 14px 0 0; margin-bottom: var(--spazio-testata); }
.testata h1 { font-size: 22px; }
/* Una testata senza tasto a sinistra allinea il titolo a sinistra: centrato
   fra il vuoto e i tasti di destra finiva fuori asse. */
.testata h1:first-child { text-align: left; }
.sezione { margin: var(--spazio-sezione) 0; }
.testata + .sezione, .testata + .chips, .testata + .occhiello { margin-top: 0; }
/* I quattro filtri della Bacheca su una riga sola, anche a 360px. */
.chips { margin: 0 0 var(--spazio-testata); gap: 6px; }

/* ---------------------------------------------------- meno riquadri */

/* Una card è già distinta dallo sfondo: il bordo in più è una cornice
   dentro una cornice. Resta solo nel tema scuro, dove bianco su grigio
   non esiste e serve un filo per staccare la superficie. */
.card {
  border: 0; padding: var(--spazio-card); border-radius: var(--raggio);
  margin-bottom: var(--spazio-gruppo); box-shadow: var(--ombra);
}
.tile {
  border: 0; padding: var(--spazio-card); box-shadow: var(--ombra);
  margin-bottom: var(--spazio-gruppo); border-radius: var(--raggio);
}
.riquadro { border: 0; box-shadow: var(--ombra); padding: 0 16px; margin-bottom: 12px; border-radius: var(--raggio); }
.tabella-dati { border: 0; box-shadow: var(--ombra); border-radius: var(--raggio); }
.grazie { border: 0; box-shadow: var(--ombra); border-radius: var(--raggio-s); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .tile,
  :root:not([data-theme="light"]) .riquadro,
  :root:not([data-theme="light"]) .grazie { border: 1px solid var(--bordo); }
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .riquadro,
:root[data-theme="dark"] .grazie { border: 1px solid var(--bordo); }

/* Le righe della bacheca: un elenco, non una pila di scatole. Il filetto
   parte dopo l'avatar, così l'occhio scende lungo i nomi. */
.riga-richiesta {
  border: 0; border-radius: 0; margin-bottom: 0;
  padding: 16px; gap: 12px;
  box-shadow: inset 0 -1px 0 var(--filetto);
}
.riga-richiesta:last-child { box-shadow: none; }
.gruppo-giorno .riga-richiesta:first-of-type,
.sezione > .riga-richiesta:first-of-type { border-radius: var(--raggio) var(--raggio) 0 0; }
.gruppo-giorno .riga-richiesta:last-of-type,
.sezione > .riga-richiesta:last-of-type { border-radius: 0 0 var(--raggio) var(--raggio); }
.riga-richiesta.prioritaria {
  border: 0; box-shadow: inset 3px 0 0 var(--oro), inset 0 -1px 0 var(--filetto);
}
.riga-richiesta.ruolo-CERCA { border-left: 0; box-shadow: inset 3px 0 0 var(--cerca-off), inset 0 -1px 0 var(--filetto); }
.riga-richiesta.ruolo-OFFRE { border-left: 0; box-shadow: inset 3px 0 0 var(--prendo), inset 0 -1px 0 var(--filetto); }
.riga-richiesta.ruolo-ORARIO { border-left: 0; box-shadow: inset 3px 0 0 var(--orario), inset 0 -1px 0 var(--filetto); }
/* La priorità vince sul ruolo: filo oro a sinistra e medaglia in alto a destra. */
.riga-richiesta.prioritaria { box-shadow: inset 5px 0 0 var(--priorita-oro), inset 0 -1px 0 var(--filetto); }
.riga-richiesta.prioritaria:last-child { box-shadow: inset 5px 0 0 var(--priorita-oro); }
.riga-richiesta.prioritaria .riga-titolo { padding-right: 36px; }
.cambio-home.prio { box-shadow: inset 5px 0 0 var(--priorita-oro); }
.cambio-home.prio .cambio-home-testo strong { padding-right: 36px; }
.card.prioritaria { border-color: transparent; box-shadow: inset 0 0 0 2px var(--priorita-oro), var(--ombra); }
.card.prioritaria .card-head > div { padding-right: 36px; }
.card.prioritaria .card-head .score { margin-right: 36px; }
.riga-richiesta, .cambio-home, .card { position: relative; }
.medaglia-priorita {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--priorita-oro); color: var(--priorita-stella);
}
.medaglia-priorita svg { width: 16px; height: 16px; }
.riga-titolo { font-size: 16px; gap: 8px; }
/* La stella della priorità prende l'oro, come il filo a sinistra: in
   currentColor era nera in chiaro e bianca in scuro. */
.riga-titolo > svg { color: var(--oro); }
/* La pillola del tipo sta in una riga flex accanto al nome: senza nowrap
   si restringe e manda a capo "cede"/"offre" fuori dal suo box. Dentro c'è
   un'icona SVG: senza flex cadrebbe sulla baseline invece che al centro. */
.tipo-pill {
  font-size: 12px; padding: 2px 8px; border-radius: var(--raggio-pill);
  white-space: nowrap; flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Le righe che non fanno per te: "Al momento non puoi cambiare" in un rosso
   spento, a metà fra il rosso e il testo tenue. Si vede, ma non è un errore:
   è un fatto sui tuoi turni di adesso. La riga resta toccabile, più quieta. */
.riga-richiesta .non-puoi { color: color-mix(in srgb, var(--rosso) 65%, var(--testo-tenue)); font-size: 14px; margin: 3px 0 0; }
.riga-richiesta.non-per-me .riga-titolo { opacity: .62; }
.non-puoi { font-size: 14px; }
.motivo-non-puoi { color: color-mix(in srgb, var(--rosso) 65%, var(--testo-tenue)); font-size: 14px; margin: 8px 0 0; }

/* "I tuoi cambi" in Home: una riga per cambio, con il cerchio del tipo a sinistra
   e lo stato in una pillola tono su tono. */
.cambio-home { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--filetto); cursor: pointer; }
.cambio-home:last-child { border-bottom: 0; }
.cambio-home-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cambio-home-testo strong { font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.cambio-home-frase { font-size: 14px; line-height: 1.35; color: var(--testo-tenue); }
.cambio-home-frase b { color: var(--testo); font-weight: 600; }
.stato-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: var(--raggio-pill); white-space: nowrap; margin-top: 2px; }
.stato-pill .pallino-stato { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 0; }
.stato-pill.rosso { color: var(--rosso); background: color-mix(in srgb, var(--rosso) 14%, transparent); }
.stato-pill.grigio { color: var(--testo-tenue); background: color-mix(in srgb, var(--testo-tenue) 16%, transparent); }
.stato-pill.verde { color: var(--concordato-segno); background: var(--concordato); }
.stato-pill.oro { color: var(--da-cambiare-segno); background: color-mix(in srgb, var(--rapido-segno) 30%, transparent); }
.stato-pill.oro .pallino-stato { background: var(--rapido-segno); }
.stato-pill.blu { color: var(--accento); background: var(--accento-tenue); }
.lista-cambi, .lista-turni { border: 0; box-shadow: var(--ombra); }
.riga-cambio, .riga-turno {
  padding: 16px; gap: 14px; border-bottom: 1px solid var(--filetto);
}
.riga-cambio strong, .riga-turno .giorno-nome { font-size: 16px; }
.riga-turno .turno-valore { font-size: 15px; }

/* --------------------------------------------- i due lati del cambio */

/* Il riquadro grigio dentro la card era un terzo livello di sfondo. Qui i
   due lati sono due colonne, e quello che li distingue è il colore
   dell'etichetta, che è anche il colore che il resto dell'app usa per
   dire la stessa cosa. */
.coppia { background: none; padding: 0; border-radius: 0; }
/* La box porta il colore del tipo (viola l'orario, arancio OFF) e dentro, a
   sinistra, il cerchio con icona e scritta: il tipo si legge prima di tutto. */
.coppia[data-tipo="ORARIO"] { --tipo: var(--orario); }
.coppia[data-tipo="OFF"] { --tipo: var(--cerca-off); }
.coppia .lati {
  grid-template-columns: auto 1fr auto 1fr;
  gap: 12px; align-items: center;
  padding: 14px 12px; border-radius: var(--raggio-s);
  background: color-mix(in srgb, var(--tipo) 14%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--tipo) 35%, transparent);
}
.coppia .lato { align-self: start; }
.coppia .lati .cerchio-tipo {
  background: var(--superficie);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tipo) 40%, transparent);
}
.coppia .etichetta {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.coppia .cedo .etichetta { color: color-mix(in srgb, var(--cedo) 85%, var(--testo)); }
.coppia .cerco .etichetta { color: color-mix(in srgb, var(--prendo) 85%, var(--testo)); }
.coppia strong { font-size: 16px; }
.coppia .nota { font-size: 14px; }
.coppia.compatta { padding: 0; }
.coppia.compatta .lati { padding: 12px; }
.coppia.compatta strong { font-size: 15px; }
.coppia.compatta .orario { font-size: 14px; }
.coppia .freccia { color: var(--testo-tenue); font-size: 20px; }
.titolo-gruppo { display: flex; align-items: center; gap: 8px; }
/* In Bacheca la lista scende: l'intestazione lo dice, con una freccia in giù e da dove parte. */
.titolo-ordine { justify-content: space-between; }
.verso-lista { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--testo-tenue); text-transform: none; letter-spacing: 0; }
/* La pillola del tipo di cambio: tono su tono, come i tag. Il colore passa da
   --tipo, così pillola piccola e grande non possono divergere. */
.tipo-etichetta[data-tipo="ORARIO"], .tipo-pill[data-tipo="ORARIO"], .cerchio-tipo[data-tipo="ORARIO"] { --tipo: var(--orario); }
.tipo-etichetta[data-tipo="OFF"], .tipo-pill[data-tipo="OFF"], .cerchio-tipo[data-tipo="OFF"] { --tipo: var(--cerca-off); }
/* Nelle righe delle richieste il cerchio dice il tipo al posto delle iniziali:
   il nome sta già scritto sopra, e il colore si legge prima di qualsiasi testo. */
.avatar.cerchio-tipo {
  width: 48px; height: 48px; flex: none; gap: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.turno-offerto strong, .turno-ceduto strong { white-space: nowrap; }
.coppia .stima-contratto { display: block; margin-left: 0; }
.stima-contratto { font-size: 12px; font-weight: 500; color: var(--testo-tenue); margin-left: 4px; white-space: nowrap; }
.cerchio-testo { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.tipo-etichetta[data-tipo="OFF"], .tipo-pill[data-tipo="OFF"], .cerchio-tipo[data-tipo="OFF"] { --tipo-testo: var(--cerca-off-testo); }
.cerchio-tipo[data-tipo] { color: var(--tipo-testo, var(--tipo)); background: color-mix(in srgb, var(--tipo) 14%, transparent); }
.tipo-etichetta, .tipo-pill[data-tipo] {
  color: var(--tipo-testo, var(--tipo)); background: color-mix(in srgb, var(--tipo) 14%, transparent);
}
.tipo-etichetta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  padding: 4px 11px; border-radius: var(--raggio-pill);
}
.tipo-pill[data-tipo] { font-weight: 600; }
/* I filtri della Bacheca portano il colore del tipo che filtrano, da spenti:
   da accesi il fondo pieno dice già che sono scelti. */
.chip[data-filtro="ORARIO"]:not(.attivo) { color: var(--orario); }
.chip[data-filtro="OFF"]:not(.attivo) { color: var(--cerca-off-testo); }

.scambio-secco > div { font-size: 15px; padding: 8px 0; border-bottom: 1px solid var(--filetto); }
.scambio-secco > div:last-child { border-bottom: 0; }

/* Il bordo di sinistra come indice di lato, non come decorazione. */
.card.match.verde { border-left: 4px solid var(--prendo); }
.card.match.giallo { border-left: 4px solid var(--ambra); }
.card.da-fare { border-left: 4px solid var(--accento); }
.tile.scelta.verde { border-left: 4px solid var(--prendo); }
.tile.scelta.blu { border-left: 4px solid var(--accento); }
.gruppo-giorno.CERCA h3::before { background: var(--cerca-off); }
.gruppo-giorno.OFFRE h3::before { background: var(--prendo); }
.gruppo-giorno.ORARIO h3::before { background: var(--orario); }
.gruppo-giorno h3 { font-size: 14px; }
.barre .cerca { background: var(--cerca-off); }
.barre .offre { background: var(--prendo); }
.barre .orario { background: var(--orario); }
.tabella-dati th:first-child { color: var(--prendo); }
.tabella-dati th:last-child { color: var(--cedo); }

/* ------------------------------------------------- marchio e bottoni */

/* Il gradiente del logo vive in due posti soli: il nome del marchio e
   l'azione principale. Steso su tutto si sarebbe letto come sfondo. */
.marchio-nome {
  font-size: 12px;
  background: var(--marchio);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marchio { width: 26px; height: 26px; border-radius: var(--raggio-cella); }
.marchio-riga { gap: 8px; margin-bottom: 14px; }

.btn { padding: 16px 20px; border-radius: var(--raggio-s); font-size: 16px; font-weight: 650; }
/* Bianco in entrambi i temi: il gradiente resta scuro anche in scuro. */
.btn.primario {
  background: var(--marchio); color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accento) 70%, transparent);
}
.btn.secondario { border: 1px solid var(--bordo); }
/* Il rosa di Aiuta un collega, chiaro con la scritta magenta: i gesti di gratitudine (Ringrazia, Cambio inserito) e i fogli dei grazie. */
.btn.rosa { background: color-mix(in srgb, var(--aiuta-fondo) 80%, var(--superficie)); color: var(--aiuta-testo); border: 1.5px solid color-mix(in srgb, var(--aiuta-segno) 55%, transparent); }
.sheet.sheet-rosa { background: color-mix(in srgb, var(--aiuta-fondo) 65%, var(--superficie)); }
.sheet.sheet-rosa .sheet-foot { background: transparent; border-top-color: transparent; }
.grazie-riquadro { background: color-mix(in srgb, var(--aiuta-fondo) 65%, var(--superficie)); box-shadow: inset 4px 0 0 var(--aiuta-segno), var(--ombra); }
/* Bersagli: 44px è il minimo per un pollice, in piedi, con una mano. */
.btn.piccolo { padding: 8px 14px; font-size: 14px; min-height: var(--bersaglio); }
.btn.largo { margin-top: 14px; }

/* Prima l'.icon-btn portava solo un glifo di testo ("?", "‹"), centrato dal
   line-height. Con un'icona SVG dentro serve un centraggio vero. */
.icon-btn { width: var(--bersaglio); height: var(--bersaglio); font-size: 19px; display: grid; place-items: center; }
/* L'ingranaggio delle impostazioni, in alto a destra: un po' più grande degli altri tondi. */
.icon-btn.tasto-impostazioni { width: calc(var(--bersaglio) + 4px); height: calc(var(--bersaglio) + 4px); flex: none; }
.tasto-impostazioni svg { display: block; }
.pill { font-size: 15px; padding: 8px 16px; }
/* Icona e testo dei filtri sulla stessa riga: l'svg è un blocco, e andava a
   capo sopra l'etichetta raddoppiando l'altezza del chip. */
.chip {
  font-size: 15px; padding: 0 16px; min-height: var(--bersaglio);
  display: inline-flex; align-items: center; gap: 6px;
}
.chips .chip { padding: 0 12px; font-size: 14px; }
/* In fondo alla riga dei filtri, a destra: margin-left:auto lo spinge lì anche
   se i chip vanno a capo. Quando l'ordine è invertito si accende. */
.tasto-ordine {
  margin-left: auto; width: var(--bersaglio); min-height: var(--bersaglio);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raggio-pill); border: 1px solid var(--bordo);
  background: var(--superficie); color: var(--testo-tenue); cursor: pointer;
}
.tasto-ordine[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: var(--su-pieno); }
.chip.attivo, .pill.attivo { background: var(--accento); border-color: var(--accento); color: var(--su-pieno); }
.link-btn { font-size: 15px; min-height: var(--bersaglio); display: inline-flex; align-items: center; }
/* Sotto i due tile della Home: l'ingresso per chi vuole pubblicare una richiesta sua.
   Un link e non un terzo tile, perché è un'azione di ripiego. Porta al calendario del Profilo. */
.link-richiesta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px;
  margin: 2px 0 0; font-size: 14px; color: var(--testo-tenue); text-align: center;
}
.link-richiesta .link-btn { color: var(--prendo); font-weight: 700; font-size: 14px; }

.avatar { width: 40px; height: 40px; font-size: 15px; }
.avatar.piccolo { width: 34px; height: 34px; font-size: 14px; }
.pallino { width: 10px; height: 10px; }

.hero { padding: 20px 0 8px; }
.hero h1 { font-size: 34px; }
.hero .saluto { font-size: 15px; }

/* --------------------------------------------------------- calendario */

.barre { height: 4px; width: 66%; }

/* Due mesi, due forme. Il Calendario è un tabellone: il numero del giorno
   grande al centro, sotto solo i segni delle richieste dei colleghi. Il
   Profilo è un'agenda: celle piccole, il turno protagonista, il numero in
   alto a sinistra. Le classi di entrambi cominciano per `mese-`. */

/* Sette colonne che non si allargano mai oltre lo schermo: senza minmax(0, …)
   un orario un po' largo spingeva la colonna e il mese sbordava a destra. */
.mese-griglia { gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mese-settimana { margin-bottom: 12px; }
.riga-settimana { margin-bottom: 4px; }
.riga-settimana:empty { display: none; }
.riga-settimana h3 { font-size: 12px; }
.dow-fisso { font-size: 12px; }
.mese-griglia.intestazione .dow-fisso { font-size: 12px; }
.spia-ore { font-size: 12px; }
.spia-ore.quadra { color: var(--prendo); }
.mese-giorno {
  position: relative; min-height: 64px; padding: 6px 2px 5px; gap: 2px;
  border-radius: var(--raggio-cella); border-color: var(--filetto);
}
.mese-giorno .numero { font-size: 15px; }
.mese-giorno .turno { font-size: 12px; }
.mese-giorno .quota { font-size: 12px; padding: 0 5px; color: var(--su-pieno); }
.mese-giorno .barre { width: 70%; height: 4px; margin-top: auto; }
.mese-giorno.oggi { border-color: var(--accento); }
.mese-giorno.prioritaria { border: 2px solid var(--priorita-oro); position: relative; }
/* Lo stesso oro delle altre priorità, con la stellina nell'angolo: la cella è piccola, la medaglia non ci sta. */
.mese-giorno.prioritaria::after, .campione.prioritaria::after {
  content: ''; position: absolute; width: 10px; height: 10px; background: var(--priorita-oro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.3l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6L3.3 9.7l6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.3l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6L3.3 9.7l6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mese-giorno.prioritaria::after { top: 3px; right: 3px; }

.giorno-rot { min-height: 46px; font-size: 12px; border-radius: var(--raggio-cella); border-color: var(--filetto); }
.giorno-rot .dow { font-size: 12px; }

/* --- il tabellone */
.mese-pubblico .mese-giorno { justify-content: flex-start; padding-top: 8px; min-height: 72px; gap: 3px; }
.mese-pubblico .mese-giorno .numero { font-size: 17px; font-weight: 700; }
.mese-pubblico .mese-giorno.oggi { border: 2px solid var(--accento); background: var(--superficie); }
.mese-pubblico .mese-giorno .quota.vuota { display: none; }

/* Quante richieste toccano il giorno, fra chi cerca e chi offre: un numero
   grigio in un cerchio leggero, sotto il numero del giorno. Dice "quanto
   movimento" senza competere con il numero. */
.conta-giorno {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--raggio-pill);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; line-height: 1; color: var(--testo-tenue);
  border: 1px solid var(--linea); background: var(--superficie);
}
.conta-giorno.in-legenda { position: static; display: inline-grid; }
/* In alto a destra copriva le cifre del giorno su ogni cella. */
.mese-pubblico .conta-giorno { position: static; margin-top: 3px; }
@media (max-width: 359px) { .conta-giorno { top: 2px; right: 2px; min-width: 16px; height: 16px; } }

/* Calendario pubblico: il titolo dice di chi è il mese, il mese si sfoglia
   sotto. */
.mese-navigazione { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.mese-navigazione h2 { margin: 0; font-size: 19px; font-weight: 700; }

/* --- l'agenda
   Ogni giorno è un riquadro suo, angoli appena arrotondati e un filo chiaro,
   separato dagli altri da 3px; le intestazioni sono solo testo. Ogni canale
   dice una cosa sola:
   - fondo giallo: questo giorno sta cambiando. È l'unico fondo colorato;
   - icona in ambra, nell'angolo: a che punto è il cambio, detto dalla forma
     (cerchio a metà: si cerca o si aspetta; spunta: concordato, manca UKG);
   - la disponibilità non si vede: la decidono le preferenze, e si
     controlla nel foglio del giorno;
   - il riposo si legge dal testo "OFF";
   - oggi: il bordo blu. */
.mese-personale { border: 0; border-radius: 0; overflow: visible; background: none; }
.mese-personale .mese-griglia { gap: 3px; }
.mese-personale .mese-griglia.intestazione { background: none; border: 0; margin: 0 0 2px; }
.mese-personale .dow-fisso { padding: 0; font-weight: 500; }
.mese-personale .mese-settimana { margin: 0 0 10px; }
.mese-personale .riga-settimana {
  margin: 0; padding: 0 2px 3px; background: none; border: 0; align-items: center;
}
.mese-personale .riga-settimana h3 { margin: 0; font-size: 12px; font-weight: 500; }
.mese-personale .riga-settimana .spia-ore { font-size: 12px; }

/* Il bollino del cambio sta dentro la cella, che quindi non taglia niente. */
.mese-personale .mese-giorno {
  align-items: flex-start; justify-content: flex-start; gap: 0;
  min-width: 0; min-height: 48px; padding: 4px 5px 5px; overflow: visible;
  border: 1px solid var(--linea); border-radius: var(--raggio-cella);
  background: var(--superficie); box-shadow: none;
}
.mese-personale .mese-griglia .mese-giorno:last-child { border-right: 1px solid var(--linea); }
.mese-personale .mese-giorno .numero {
  font-size: 12px; font-weight: 600; color: var(--testo-tenue); line-height: 1.2;
}
/* 13px è l'unico corpo fuori scala, apposta: è il più grande con cui
   "11:00" in grassetto sta in una cella da un settimo di schermo. A 14px
   sforava già a 375px. */
.mese-personale .mese-giorno .turno {
  font-size: 13px; font-weight: 600; color: var(--testo); margin-top: 1px;
  font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.01em;
}
.mese-personale .mese-giorno .fine {
  font-size: 12px; color: var(--testo-tenue); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mese-personale .mese-giorno.riposo .turno { font-size: 12px; font-weight: 600; color: var(--testo-tenue); }
.mese-personale .mese-giorno.senza-turno .turno { color: var(--testo-tenue); font-weight: 400; }

/* L'ordine conta: oggi vince sul bordo del giallo, il giallo vince sul fondo
   del riposo. */
.mese-personale .mese-giorno.riposo,
.mese-personale .mese-giorno.senza-turno { background: transparent; }
.mese-personale .mese-giorno.da-cambiare,
.mese-personale .mese-giorno.da-cambiare.riposo {
  background: var(--da-cambiare); border-color: var(--da-cambiare-bordo);
}
.mese-personale .mese-giorno.concordato,
.mese-personale .mese-giorno.concordato.riposo {
  background: var(--concordato); border-color: var(--concordato-bordo);
}
.mese-personale .mese-giorno.oggi { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }

/* Il segno del cambio: un'icona sola per giorno, sempre dello stesso colore. */
.in-corso {
  display: inline-grid; place-items: center;
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  color: var(--da-cambiare-segno);
}
.in-corso.concordato { color: var(--concordato-segno); }
.in-corso svg { width: 13px; height: 13px; }
.in-corso.in-legenda { position: static; }
.mese-personale .mese-giorno .in-corso {
  position: absolute; top: 4px; right: 4px; width: auto; height: auto; z-index: 1;
}
.mese-personale .mese-giorno .in-corso svg { width: 12px; height: 12px; }
/* Nel foglio del giorno lo stesso segno, su un tassello giallo come la cella. */
.giorno-profilo .riga-cambio .in-corso {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--raggio-cella); box-shadow: none;
  background: var(--da-cambiare); border: 1px solid var(--da-cambiare-bordo);
}
.giorno-profilo .riga-cambio .in-corso.concordato { background: var(--concordato); border-color: var(--concordato-bordo); }
.giorno-profilo .riga-cambio .in-corso svg { width: 15px; height: 15px; }

/* Fino a 374px (iPhone SE e mini) il turno scende a 12px: a 13 "11:00"
   sforava la cella di mezzo pixel. Sotto i 360px gli orari stanno anche
   centrati, altrimenti "11:00" diventava "11:0". */
@media (max-width: 374px) {
  .mese-personale .mese-giorno .turno { font-size: 12px; letter-spacing: -.02em; }
}
@media (max-width: 359px) {
  .mese-personale .mese-giorno { align-items: center; }
  .mese-personale .mese-giorno .in-corso { top: 3px; right: 2px; }
  .mese-personale .mese-giorno .in-corso svg { width: 10px; height: 10px; }
}

/* Il titolo della pagina del Profilo: un gradino sopra le altre testate. */
.titolo-mese { font-size: 28px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 12px; color: var(--testo); }

/* --- le legende: mostrano le celle come sono, in piccolo */
.legenda-mese {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 14px; color: var(--testo-tenue);
}
.legenda-mese li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legenda-mese .barre.in-legenda { width: 18px; margin: 0; }
/* La legenda del calendario pubblico: chiusa è un pulsante con l'anteprima dei
   colori, aperta mostra tutte le voci. */
.legenda-apribile { margin: 0 0 12px; }
.legenda-apribile > summary {
  list-style: none; cursor: pointer; min-height: 40px;
  display: inline-flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: var(--raggio-pill); border: 1px solid var(--bordo); background: var(--superficie);
  font-size: 14px; font-weight: 600;
}
.legenda-apribile > summary::-webkit-details-marker { display: none; }
.legenda-apribile > summary::after { content: '›'; color: var(--testo-tenue); font-size: 18px; transition: transform .15s ease; }
.legenda-apribile[open] > summary::after { transform: rotate(90deg); }
.legenda-apribile .anteprima { display: inline-flex; gap: 4px; }
.legenda-apribile .anteprima .barre.in-legenda { width: 14px; }
.legenda-apribile[open] > summary .anteprima { display: none; }
.legenda-apribile > .legenda-mese { margin: 12px 2px 0; }
.legenda-personale { gap: 8px 16px; }
.nota-mese { margin: 14px 0 0; }
/* L'invito sotto il calendario del Profilo è l'azione principale della schermata:
   non una nota in grigio ma una frase in evidenza. */
/* Una riga sola: il corpo segue la larghezza dello schermo (la frase misura circa
   28 em in semibold, più un margine per i font arrotondati), con 15px di tetto. */
.nota-mese.invito-giorno {
  font-size: min(15px, calc((100vw - 36px) / 30.5)); font-weight: 600; line-height: 1.4;
  color: var(--prendo); white-space: nowrap;
}
.campione { width: 16px; height: 12px; border-radius: 4px; border: 1px solid var(--bordo); background: var(--superficie); }
.campione.prioritaria { border: 2px solid var(--priorita-oro); position: relative; }
.campione.prioritaria::after { top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); }
.campione.riposo { background: transparent; border: 1px solid var(--linea); border-radius: 4px; }
.campione.da-cambiare { background: var(--da-cambiare); border: 1px solid var(--da-cambiare-bordo); border-radius: 4px; }
.campione-quota { font-size: 12px; font-weight: 700; padding: 0 5px; border-radius: var(--raggio-pill); background: var(--accento); color: var(--su-pieno); }
.campione-giorno {
  display: inline-grid; place-items: center;
  width: 22px; height: 18px; border-radius: 5px;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--da-cambiare-segno);
}
.campione-giorno.da-cambiare { background: var(--da-cambiare); border-color: var(--da-cambiare-bordo); }
.campione-giorno.concordato { background: var(--concordato); border-color: var(--concordato-bordo); color: var(--concordato-segno); }

.giorno-profilo .tile { margin-top: 16px; }
.giorno-profilo .lista-cambi { margin-top: 4px; }
.giorno-profilo .riga-cambio strong { display: inline-flex; align-items: center; gap: 6px; }

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

.campo > span { font-size: 14px; margin-bottom: 8px; }
input[type="time"], input.testo, input[type="password"], textarea, .select {
  padding: 14px; border-radius: var(--raggio-s); font-size: 16px;
}
/* Il fuoco dei campi nel colore dell'app, al posto del contorno nero del browser. */
input.testo:focus-visible, input[type="password"]:focus-visible, input[type="time"]:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accento); outline-offset: 0; border-color: var(--accento);
}
.switch { padding: 14px 0; font-size: 16px; border-bottom-color: var(--filetto); }
.switch .aiuto { font-size: 14px; }
/* Le due scelte sulle notifiche: due righe con la spiegazione sotto, e il
   cerchietto allineato al titolo e non alla riga intera. */
.switch input[type="radio"] { align-self: flex-start; margin-top: 3px; flex: none; }
.errori { font-size: 15px; padding: 12px 16px; }
.avviso { font-size: 14px; }

/* Il codice del negozio: un campo solo, con la R già scritta dentro. Prima
   erano due scatole di altezza e bordo diversi accostate, e la R sembrava un
   tasto. Nessun suggerimento nel campo: chi non ha il codice non deve
   trovarlo scritto lì. */
.campo-codice {
  display: flex; align-items: center; gap: 2px;
  margin: 14px 0 6px; padding: 0 16px; height: 60px;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); cursor: text;
}
.campo-codice:focus-within { border-color: var(--accento); outline: 2px solid var(--accento); outline-offset: -1px; }
.campo-codice .prefisso-codice {
  display: inline; width: auto; height: auto; padding: 0;
  place-items: center; justify-content: center;
  border: 0; border-radius: 12px 0 0 12px; background: none;
  font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--testo);
}
.campo-codice input.testo {
  flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; outline: none;
  font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--testo);
  font-variant-numeric: tabular-nums;
}
.campo-codice input.testo:focus-visible { outline: none; }
.aiuto-codice { margin: 0 0 18px; font-size: 14px; }

/* Gli avvisi in una colonna sola: l'avviso sull'omonimo ha due tasti, e
   affiancati su un telefono stretto andavano a capo male. */
.avviso-box.omonimo { display: grid; gap: 8px; margin: 14px 0; }
.avviso-box.omonimo p { margin: 0; font-size: 15px; color: var(--testo-tenue); }
.ho-gia-account { margin-top: 26px; text-align: center; }
.ho-gia-account p { margin: 0 0 8px; }
.ho-gia-account .link-btn { font-weight: 600; }

/* ------------------------------------------------------------ tabbar */

#tabbar { padding: 8px 0 max(env(safe-area-inset-bottom), 8px); border-top-color: var(--filetto); }
/* Cinque voci al posto di quattro: lo spazio orizzontale non basta più a
   14px di margine per voce, e "Calendario" è l'etichetta più lunga. */
.tab { position: relative; font-size: 12px; padding: 5px 8px; gap: 4px; }
.tab-icona { width: 24px; height: 24px; }
/* Quante proposte aspettano una risposta, sulla voce che le contiene: è la
   sola cosa dell'app che va saputa senza aprire niente. */
.tab .conta {
  position: absolute; top: 2px; right: 4px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--raggio-pill);
  background: var(--rosso); color: var(--su-pieno);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

/* -------------------------------------------------------------- vari */

.vuoto { padding: 40px 22px; }
.vuoto strong { font-size: 17px; }
.vuoto p { font-size: 15px; }
.sheet { border-radius: var(--raggio-sheet) var(--raggio-sheet) 0 0; padding: 6px 18px max(env(safe-area-inset-bottom), 18px); }
.sheet-head h2 { font-size: 19px; }
#toast { font-size: 15px; padding: 12px 20px; box-shadow: var(--ombra-alta); }
.elenco { font-size: 16px; }
.elenco.piccolo { font-size: 14px; }
/* icona() mette display:block sull'svg: in mezzo a una frase serve un contenitore in riga. */
.icona-in-riga { display: inline-flex; vertical-align: -3px; }

/* L'invito alle notifiche: in Home, colorato, con il tasto che le accende
   nello stesso tocco. Deve vedersi: in Impostazioni non lo trovava nessuno. */
.invito-notifiche {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 14px 0 6px; padding: 16px;
  background: var(--accento-tenue); border: 1px solid var(--accento);
  border-radius: var(--raggio);
}
.invito-icona {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accento); color: #fff;
}
.invito-notifiche strong { font-size: 17px; }
.invito-notifiche p { margin: 4px 0 0; font-size: 15px; color: var(--testo-tenue); }
.invito-passi { margin: 8px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.invito-azioni { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.invito-azioni .btn { width: auto; padding: 10px 18px; }

/* La priorità in Home: una stella nel cerchio e la parola sotto, senza
   numero (è una al mese, il numero diceva sempre 1). Usata, diventa grigia:
   si capisce a colpo d'occhio se c'è ancora, senza leggere una frase. */
.hero-azioni { align-items: flex-start; }
.priorita-tasto {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--oro);
}
/* Oro pieno quando c'è una priorità da usare, grigio quando non ce n'è. */
.priorita-cerchio {
  width: var(--bersaglio); height: var(--bersaglio); border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--priorita-oro); background: var(--priorita-oro); color: var(--priorita-stella);
}
.priorita-etichetta { font-size: 12px; font-weight: 600; line-height: 1; }
.priorita-tasto.usata { color: var(--testo-tenue); }
.priorita-tasto.usata .priorita-cerchio { border-color: var(--linea); background: var(--superficie-2); color: var(--testo-tenue); }

/* ---------------------------------------------------------------- Profilo */

/* La testata del Profilo è una riga sola: il bollino a sinistra, le azioni a
   destra. Nome e ruolo stanno nel pannello che apre il bollino. Il bollino è
   la firma della pagina: grande e con aria sopra. Sotto, invece, poca: il
   calendario è il motivo per aprire il Profilo, e con 40px di vuoto fra il
   bollino e il titolo il mese finiva a metà schermo. */
.testata-profilo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 44px 0 8px; position: relative;
}
.testata-profilo + .sezione { margin-top: 8px; }
.azioni-profilo { position: absolute; top: 12px; right: 0; display: flex; align-items: center; gap: 8px; }
.testata-profilo .azioni-profilo { position: static; }
.tasto-aggiorna { position: relative; }
.tasto-aggiorna svg { color: var(--accento); }
.tasto-aggiorna .pallino { position: absolute; top: 4px; right: 6px; }

/* Il Profilo: nome e contratto accanto al cerchio con le iniziali, tre numeri,
   poi il calendario, il prossimo turno e le voci. */
.testata-profilo h1 { font-size: 26px; }
.identita { display: flex; align-items: center; gap: 14px; margin: 4px 0 0; }
.identita .io-bollino { width: 64px; height: 64px; font-size: 22px; flex: none; }
.identita strong { display: block; font-size: 20px; }
.identita span:not(.avatar) { color: var(--testo-tenue); }
.contatori {
  display: flex; margin: 14px 0 0; padding: 12px 0;
  background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.contatori > div { flex: 1; min-width: 0; text-align: center; border-left: 1px solid var(--filetto); padding: 0 4px; }
.contatori > div:first-child { border-left: 0; }
.contatore-n { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.contatore-n svg { color: var(--testo-tenue); }
.contatori > div:nth-child(2) .contatore-n svg { color: var(--aiuta-segno); }
.contatore-nome { display: block; color: var(--testo-tenue); font-size: 12px; }

.voci-profilo { display: grid; gap: 8px; }
.voce-profilo {
  appearance: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.voce-profilo-icona { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.voce-profilo-icona.voce-orario { background: color-mix(in srgb, var(--orario) 14%, transparent); color: var(--orario); }
.voce-profilo-icona.voce-richieste { background: color-mix(in srgb, var(--rosso) 12%, transparent); color: var(--rosso); }
.voce-profilo-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.voce-profilo-testo em { font-style: normal; color: var(--testo-tenue); font-size: 13px; }
.voce-profilo .chevron { color: var(--testo-tenue); font-size: 20px; }
.prossimo-turno + .voci-profilo { margin-top: 14px; }

/* Tutti i riquadri hanno la stessa testa: titolo a 17px in semibold, e a
   destra una riga di riepilogo. Si capisce cosa contengono senza aprirli. */
.riquadro > summary,
.riquadro-testa {
  font-size: 17px; font-weight: 600; padding: 16px 0;
  display: flex; align-items: center; gap: 8px;
}
.riquadro-testa { padding-bottom: 6px; }
.riquadro-fisso { padding-bottom: 14px; }
.riquadro-fisso .testo-tenue { margin: 0; }
.titolo-riquadro { display: inline-flex; align-items: center; gap: 6px; }
/* Il giallo vale una cosa sola, la priorità: sta solo sulla stella. */
.titolo-riquadro svg { fill: var(--oro); stroke: var(--oro); }
.riquadro-testa .conteggio { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--testo-tenue); }
.priorita-usata { margin: 6px 0 0; font-weight: 600; }
.riquadro .avviso-box { margin: 10px 0 14px; font-size: 14px; }

/* Le preferenze: un riquadro, e dentro l'ordine in cui si ragiona. I titoli
   sono grassetto normale, non maiuscolo largo: su un telefono le maiuscole
   spaziate affaticano e sanno di modulo. */
.pref-corpo { padding-top: 14px; }
.pref-intro { margin: 0; font-size: 15px; line-height: 1.5; }
.pref-titolo {
  margin: 22px 0 6px; font-size: 15px; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--testo);
}

/* I tre pulsanti sotto il calendario: Sincronizza turni, Preferenze,
   Notifiche. Quadrati, una riga sola, ciascuno con il suo stato in due
   parole. Quello aperto prende il fondo dell'accento, e il suo pannello si
   apre subito sotto. */
.scorciatoie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scorciatoia {
  appearance: none; font: inherit; color: var(--testo); cursor: pointer;
  /* Alto almeno quanto è largo (un terzo della colonna, meno i due spazi), ma
     libero di allungarsi: a 340px "Sincronizza turni" va su due righe, e un
     quadrato rigido tagliava l'icona. Se uno si allunga, la griglia allunga
     anche gli altri due. Il contenuto parte dall'alto, così le tre icone
     stanno sulla stessa linea. */
  min-height: calc((min(100vw, 560px) - 2 * var(--margine-pagina) - 20px) / 3);
  padding: 16px 6px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  text-align: center; background: var(--superficie); border: 1px solid transparent;
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
.scorciatoia-icona { color: var(--accento); margin-bottom: 4px; }
a.scorciatoia { text-decoration: none; }
/* Le Impostazioni sono una griglia sola, 3 + 3 + 3: la seconda parte segue la prima a distanza di una riga. */
.scorciatoie-resto { margin-top: 10px; }
.scorciatoia strong { font-size: 14px; font-weight: 650; line-height: 1.2; }
.scorciatoia em { font-style: normal; font-size: 12px; line-height: 1.25; color: var(--testo-tenue); }
.scorciatoia.attiva { background: var(--accento-tenue); border-color: var(--accento); }
/* In scuro le card hanno il filo: i quadrati anche, come le tile. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scorciatoia:not(.attiva) { border-color: var(--bordo); }
}
:root[data-theme="dark"] .scorciatoia:not(.attiva) { border-color: var(--bordo); }

.riquadro.pannello-profilo { margin: 12px 0 0; padding-top: 14px; }
/* Dentro il pannello le righe non sono altre scatole con ombra: un tono di
   sfondo basta a staccarle. */
.turni-corpo { padding: 0 0 14px; display: grid; gap: 10px; }
.riquadro.pannello-profilo .tile {
  border: 0; box-shadow: none; margin: 0 0 10px; background: var(--superficie-2);
}
.turni-corpo .tile { margin: 0; }
.pannello-preferenze .pref-corpo { padding-top: 0; }
.pannello-notifiche .pref-titolo:first-of-type { margin-top: 18px; }

/* Grazie ricevuti. Il cuore raggiunto prende il colore dell'icona del
   titolo; quelli da raggiungere sono contorni grigi con l'avanzamento
   accanto, così si legge a che punto sei senza contare. */
.grazie-riquadro .titolo-riquadro svg { fill: var(--grazie); stroke: var(--grazie); }
.cuore { color: var(--grazie); }
.grazie-riquadro .btn { margin-top: 12px; }
.traguardi { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.traguardo { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--testo-tenue); min-height: 36px; }
.traguardo-segno {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 1.5px solid var(--linea);
}
.traguardo-segno svg { fill: none; stroke: var(--testo-tenue); opacity: .6; }
.traguardo.raggiunto .traguardo-segno svg { opacity: 1; }
.traguardo.raggiunto { color: var(--testo); font-weight: 600; }
.traguardo.raggiunto .traguardo-segno { border-color: var(--grazie); background: color-mix(in srgb, var(--grazie) 10%, transparent); }
.traguardo.raggiunto .traguardo-segno svg { fill: var(--grazie); stroke: var(--grazie); }
.traguardo-avanzamento { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.traguardo-testo { display: flex; flex-direction: column; gap: 1px; }
.traguardo-soglia { font-size: 12px; font-weight: 400; color: var(--testo-tenue); }

/* Il promemoria di un accordo non ancora inserito: una riga che si nota senza
   gridare, con l'orologio nel colore dell'accento. */
.promemoria {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--accento);
}
.promemoria .icona-in-riga { margin-top: 2px; flex: none; }
.accordo .promemoria { margin: 8px 0 12px; }

/* "Annulla lo scambio" sotto un accordo: un collegamento, non un pulsante.
   È l'uscita per quando UKG blocca il cambio, non il passo successivo, e un
   pulsante pieno accanto a "Cambio inserito" invitava a toccarlo. */
.pila { background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra); margin-bottom: 10px; overflow: hidden; }
.pila.da-fare { box-shadow: inset 4px 0 0 var(--rosso), var(--ombra); }
.pila > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pila > summary::-webkit-details-marker { display: none; }
.pila > summary::after { content: '›'; color: var(--testo-tenue); font-size: 20px; margin-left: auto; transition: transform .15s ease; }
.pila[open] > summary::after { transform: rotate(90deg); }
.pila .avatar.cerchio-tipo { width: 42px; height: 42px; }
.pila-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pila-testo strong { font-size: 16px; }
.pila-frase { font-size: 14px; line-height: 1.35; color: var(--testo-tenue); }
.pila-frase b { color: var(--testo); font-weight: 600; }
.pila-corpo { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.link-annulla {
  appearance: none; font: inherit; cursor: pointer;
  display: block; margin: 12px auto 0; min-height: var(--bersaglio); padding: 0 16px;
  font-size: 14px; font-weight: 600; color: var(--rosso);
  background: transparent; border: 1.5px solid color-mix(in srgb, var(--rosso) 60%, transparent); border-radius: var(--raggio-s);
}
/* Annulla, rifiuta, cancella, rimuovi: sempre rosso, scritta e bordo. */
.btn.pericolo { color: var(--rosso); border: 1.5px solid color-mix(in srgb, var(--rosso) 60%, transparent); }

/* ------------------------------------------- Cambio rapido, le più convenienti
   Le caselle vanno a due per riga, una per richiesta: giorno e percentuale, niente
   altro. Chi è e cosa vi scambiate si legge nella scheda che si apre sotto,
   così la griglia resta leggibile anche a 340px. */
.rapide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.rapida {
  appearance: none; font: inherit; color: inherit; cursor: pointer;
  min-height: 56px; padding: 8px 12px; border-radius: var(--raggio-cella);
  border: 1px solid var(--bordo); background: var(--superficie);
  display: flex; align-items: center; gap: 8px;
}
.rapida-dow { font-size: 12px; color: var(--testo-tenue); text-transform: capitalize; }
.rapida-numero { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rapida-quota {
  margin-left: auto; padding: 1px 6px; border-radius: var(--raggio-pill);
  background: var(--prendo); color: var(--su-pieno);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rapida.attiva { background: var(--accento); border-color: var(--accento); color: var(--su-pieno); }
.rapida.attiva .rapida-dow { color: inherit; opacity: .85; }
.rapida.attiva .rapida-quota { background: var(--su-pieno); color: var(--accento); }
.rapida-aiuto { text-align: center; margin: 0 0 12px; }
.rapida-scheda { margin: 0 0 12px; }

/* Le ragioni di un match dietro "Perché": in Rapido le schede erano alte
   cinque righe di spiegazione, e la decisione si perdeva sotto. */
.perche-aperto { margin: 4px 0 12px; }
.perche-aperto > summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accento);
  min-height: var(--bersaglio); display: flex; align-items: center; list-style: none;
}
.perche-aperto > summary::-webkit-details-marker { display: none; }
.perche-aperto > summary::after { content: '›'; margin-left: 6px; transition: transform .15s ease; }
.perche-aperto[open] > summary::after { transform: rotate(90deg); }
.perche-aperto .perche { margin-top: 0; }

/* ------------------------------------------------------------- statistiche
   L'oro è della priorità: le richieste pubblicate sono un conteggio. */
.barra-mese.pubblicate { background: var(--accento); }
.legenda-statistiche span { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.campione-barra { width: 10px; height: 12px; border-radius: 3px 3px 0 0; display: inline-block; }
.campione-barra.pubblicate { background: var(--accento); }
.campione-barra.chiuse { background: var(--testo-tenue); }

/* Password dimenticata: chi l'ha chiesta si vede subito nella lista, e la
   password temporanea è grande, da leggere ad alta voce al banco. */
.tag-password {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ambra);
}
/* Già fatta da un altro admin: un'informazione, non più un compito. */
.tag-password.gestita { color: var(--testo-tenue); font-weight: 500; }
.password-temporanea {
  margin: 12px 0; padding: 16px; border-radius: var(--raggio-s); text-align: center;
  font: 700 26px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em;
  background: var(--superficie); border: 1px dashed var(--bordo); user-select: all;
}

/* Il fuoco di tutto ciò che si tocca, da tastiera o da VoiceOver: prima ce
   l'avevano solo i campi. :where() non aggiunge specificità, così un
   componente che vuole un fuoco suo lo dichiara senza lottare. L'accento sta
   sopra 4,8:1 su ogni fondo dell'app, in entrambi i temi. */
:where(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accento); outline-offset: 2px;
}

/* I segni che hanno preso il posto delle ultime emoji. Un match pieno è un
   pallino verde, un potenziale un anello ambra: si distinguono anche per la
   forma, non solo per il colore. */
.segno-match {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: 0; flex: none;
}
.segno-match.pieno { background: var(--prendo); }
.segno-match.potenziale { box-shadow: inset 0 0 0 2px var(--ambra); }
.titolo-gruppo .segno-match { margin-right: 0; }
.icona-in-riga.stella { color: var(--oro); }
.errori .icona-in-riga { color: var(--rosso); }
/* "Scambio concordato" con la spunta verde davanti, al posto di 🟢. */
.accordo > strong { display: flex; align-items: center; gap: 6px; }
.accordo > strong svg { color: var(--prendo); flex: none; }
.titolo-admin { display: inline-flex; align-items: center; gap: 6px; }
/* Un bottone con un'icona davanti: icona() mette display:block sull'svg, e
   senza flex il cuore di "Ringrazia" finiva sopra la parola. */
.btn:has(> svg) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.largo:has(> svg) { display: flex; }

/* Il foglio del giorno apre con i tasti del cambio: niente margine sopra. */
.azioni-giorno { margin: 4px 0 14px; }

/* Il lettore di QR del calendario: sopra a tutto, anche ai fogli aperti. */
.scanner {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: #0b0d10; color: #fff;
}
.scanner-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scanner-testa .icon-btn { color: #fff; background: rgba(255, 255, 255, .12); }
.scanner-vista { position: relative; flex: 1; border-radius: 18px; overflow: hidden; background: #000; }
.scanner-vista video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-mirino {
  position: absolute; top: 50%; left: 50%; width: min(70vw, 60vh, 320px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); outline: 3px solid rgba(255, 255, 255, .9);
}
.scanner-nota { margin: 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .75); }

/* "Le tue richieste" in Bacheca: un riquadro che si apre. Le righe dentro
   vanno a filo del riquadro, che ha già il suo margine: con il loro padding
   in più sarebbero rientrate due volte. */
.riquadro.mie-richieste { margin-bottom: var(--spazio-sezione); }
.mie-corpo { margin: 0 calc(-1 * 16px); }
.mie-corpo .riga-richiesta { background: none; border-radius: 0; }
.mie-corpo .riga-richiesta:last-child:not(.prioritaria) { box-shadow: none; }

/* Il numero di versione in fondo alle Impostazioni: c'è per chi lo cerca,
   non deve farsi notare da chi non lo cerca. */
.versione-app {
  margin: 28px 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--testo-tenue);
}

/* L'orario adattato a un contratto diverso è un calcolo dell'app: lo dice
   una riga piccola sotto, senza allarmare. */
.nota-stima {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--testo-tenue);
}

/* Le preferenze nuove: una riga per fascia, il nome a sinistra e le tre
   scelte sotto, perché a 340px tre pillole accanto al nome non ci stanno. */
.pref-modo { margin: 14px 0 6px; }
.pref-riga { padding: 10px 0; border-bottom: 1px solid var(--filetto); }
.pref-riga:last-child { border-bottom: 0; }
.pref-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pref-nome em { font-style: normal; font-size: 13px; color: var(--testo-tenue); }
.pref-voti { margin: 8px 0 0; }
.pref-voti .pill { flex: 1 1 0; padding: 8px 6px; font-size: 14px; }
.pref-giorno { border-bottom: 1px solid var(--filetto); }
.pref-giorno > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: baseline; padding: 12px 0; font-weight: 600;
}
.pref-giorno > summary::-webkit-details-marker { display: none; }
.pref-giorno .conteggio { font-weight: 400; font-size: 14px; color: var(--testo-tenue); }

/* "Cambia orario": i turni veri divisi per fascia, ciascuno col suo nome. */
.orari-gruppo { margin: 6px 0 0; }
.orari-fascia { display: block; font-size: 13px; font-weight: 600; color: var(--testo-tenue); margin: 10px 0 0; }
.orari-gruppo .chips { margin: 6px 0 4px; }

/* Aiuta un collega: quanto costa un cambio, e chi puoi ricambiare. */
.etichette-aiuto { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.tag.favore { background: color-mix(in srgb, var(--aiuta-segno) 16%, transparent); color: var(--aiuta-testo); font-weight: 600; }
.ricompensa-aiuto { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 14px; border-radius: var(--raggio-s); background: var(--superficie-2); }
.ricompensa-aiuto p { margin: 0; }
.switch.sotto-opzione { margin-left: 28px; }

/* "Aiuta un collega" in Home: rosa Barbie, con due cuori disegnati nel
   tratto delle icone, uno pieno e uno solo contornato. Dare una mano è il
   gesto che l'app vuole far venire voglia di fare, e il cuore è già il suo
   segno: è quello dei ringraziamenti. I cuori sono maschere colorate dal
   token, così in scuro cambiano tinta da soli. */
.tile.aiuta {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--aiuta-fondo) 65%, var(--superficie)); border: 0;
  box-shadow: inset 4px 0 0 var(--aiuta-segno), var(--ombra);
}
.tile.aiuta strong, .tile.aiuta .tile-icona { color: var(--aiuta-testo); }
/* Il testo non deve passare sotto i cuori. */
.tile.aiuta > span:nth-child(2) { padding-right: 36px; }
.tile.aiuta::before, .tile.aiuta::after {
  content: ''; position: absolute; pointer-events: none;
  background: var(--aiuta-segno);
  -webkit-mask: var(--cuore) no-repeat center / contain; mask: var(--cuore) no-repeat center / contain;
}
.tile.aiuta::before {
  --cuore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4c-.4 0-7.6-4.6-7.6-9.6a4.1 4.1 0 0 1 7.6-2.2 4.1 4.1 0 0 1 7.6 2.2c0 5-7.2 9.6-7.6 9.6z'/%3E%3C/svg%3E");
  width: 24px; height: 24px; right: 40px; top: 10px; transform: rotate(-14deg); opacity: .4;
}
.tile.aiuta::after {
  --cuore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.4c-.4 0-7.6-4.6-7.6-9.6a4.1 4.1 0 0 1 7.6-2.2 4.1 4.1 0 0 1 7.6 2.2c0 5-7.2 9.6-7.6 9.6z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 16px; height: 16px; right: 30px; bottom: 10px; transform: rotate(12deg); opacity: .65;
}
/* In scuro il cuore pieno a .4 si perdeva sul fondo prugna. */
:root[data-theme="dark"] .tile.aiuta::before { opacity: .6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile.aiuta::before { opacity: .6; }
}

/* "Cambio rapido", lo stesso riquadro in giallo fulmine: due saette al posto
   dei cuori, una piena e una solo contornata. È la saetta della sua icona. */
.tile.cambio-rapido {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--rapido-fondo) 65%, var(--superficie)); border: 0;
  box-shadow: inset 4px 0 0 var(--rapido-segno), var(--ombra);
}
.tile.cambio-rapido strong, .tile.cambio-rapido .tile-icona { color: var(--rapido-testo); opacity: 1; }
.tile.cambio-rapido > span:nth-child(2) { padding-right: 36px; }
.tile.cambio-rapido::before, .tile.cambio-rapido::after {
  content: ''; position: absolute; pointer-events: none;
  background: var(--rapido-segno);
  -webkit-mask: var(--saetta) no-repeat center / contain; mask: var(--saetta) no-repeat center / contain;
}
.tile.cambio-rapido::before {
  --saetta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.6 3 6.6 13.6h4.6l-1 7.4 7.2-10.6h-4.4z'/%3E%3C/svg%3E");
  width: 24px; height: 24px; right: 40px; top: 10px; transform: rotate(-12deg); opacity: .7;
}
.tile.cambio-rapido::after {
  --saetta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.6 3 6.6 13.6h4.6l-1 7.4 7.2-10.6h-4.4z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  width: 16px; height: 16px; right: 30px; bottom: 10px; transform: rotate(14deg); opacity: .9;
}
.tag.disponibile { background: color-mix(in srgb, var(--prendo) 14%, transparent); color: var(--prendo); font-weight: 600; font-size: 12px; }
.tag.contro-voglia { background: color-mix(in srgb, var(--ambra) 14%, transparent); color: var(--ambra); font-weight: 600; font-size: 12px; }
.tag.ultima { background: color-mix(in srgb, var(--rosso) 16%, transparent); color: var(--rosso); font-weight: 700; }

/* Problemi comuni: il messaggio è il titolo, il rimedio si apre sotto. */
.riquadro.problema p { margin: 8px 0 2px; }

/* Le righe delle liste portano la stessa box di tutta l'app, in piccolo: il
   tipo lo dice il cerchio dentro la box, il nome sta sopra. */
.riga-richiesta .riga-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.riga-richiesta .coppia .lati { padding: 12px; gap: 10px; }
.riga-richiesta .coppia strong { font-size: 14px; }
.riga-richiesta .coppia .orario { font-size: 13px; }
.riga-richiesta { cursor: pointer; }
.riga-richiesta { align-items: flex-start; }
.riga-richiesta.non-per-me .coppia { opacity: .78; }
/* Fino a 374px la box si stringe: cerchio più piccolo, spazi minori. */
@media (max-width: 374px) {
  .coppia .lati, .riga-richiesta .coppia .lati { gap: 8px; padding: 12px 10px; }
  .coppia .lati .cerchio-tipo { width: 40px; height: 40px; }
  .coppia .cerchio-testo { font-size: 9px; }
}

/* I tre cerchi della Home (priorità, aggiorna, aiuto) un po' più piccoli dei 44px
   dei bersagli di tutta l'app: la testata ne ha tre di fila. */
.hero-azioni { --cerchio-hero: 38px; gap: 7px; }
.hero-azioni .icon-btn, .priorita-cerchio { width: var(--cerchio-hero); height: var(--cerchio-hero); }
.hero-azioni .tasto-impostazioni { width: calc(var(--cerchio-hero) + 4px); height: calc(var(--cerchio-hero) + 4px); }
.hero-azioni .icon-btn { font-size: 17px; }
.priorita-etichetta { font-size: 11.5px; }

/* "Aggiorna": l'icona nelle testate, e la riga toccabile con l'ora. Gira
   mentre scarica; con "riduci movimento" resta ferma. */
.icon-btn.aggiorna svg, .riga-aggiornamento svg { display: block; }
.icon-btn.aggiorna.gira svg, .riga-aggiornamento.gira svg { animation: gira-aggiorna .9s linear infinite; }
@keyframes gira-aggiorna { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .icon-btn.aggiorna.gira svg, .riga-aggiornamento.gira svg { animation: none; }
}
.stato-aggiornamento { margin: 2px 0 0; font-size: 12.5px; color: var(--testo-tenue); }
.riga-aggiornamento {
  appearance: none; border: 0; font: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 12px; padding: 9px 12px;
  border-radius: 12px; font-size: 13px; color: var(--testo-tenue);
  background: color-mix(in srgb, var(--accento) 7%, transparent);
}
.riga-aggiornamento svg { flex: none; color: var(--accento); }

/* La box dello scambio: il messaggio di chi chiede (CERCO / OFFRO), nel colore
   del tipo con il suo cerchio, e sotto "Cosa faresti tu", giorno per giorno. */
.coppia.messaggio { display: flex; flex-direction: column; gap: 10px; }
.coppia.messaggio .msg {
  display: flex; gap: 8px; align-items: center; padding: 10px 8px 10px 10px;
  border-radius: var(--raggio-s);
  background: color-mix(in srgb, var(--tipo) 14%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--tipo) 35%, transparent);
}
.coppia.messaggio .cerchio-tipo {
  width: 38px; height: 38px; flex: none;
  background: var(--superficie);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tipo) 40%, transparent);
}
/* «orario» deve stare dentro il cerchio piccolo. */
.coppia.messaggio .cerchio-testo { font-size: 8.5px; letter-spacing: 0; }
.coppia.messaggio .bolla { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.coppia.messaggio .bolla p { margin: 0; font-size: 14px; line-height: 1.4; }
.coppia.messaggio .bolla .nota { font-size: 13px; color: var(--testo-tenue); font-style: italic; }
.coppia.messaggio .tenue { color: var(--testo-tenue); font-weight: 400; }
.coppia.messaggio .verbo { font-size: 11px; font-weight: 800; letter-spacing: .05em; margin-right: 4px; }
.coppia.messaggio .verbo.cerco { color: color-mix(in srgb, var(--tipo) 70%, var(--testo)); }
.coppia.messaggio .verbo.offro { color: var(--prendo); }
.coppia.messaggio .tu { border-left: 3px solid var(--accento); padding: 2px 0 2px 11px; }
.coppia.messaggio .tu-titolo {
  display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--testo-tenue);
}
.coppia.messaggio .riga-tu { display: flex; gap: 6px; align-items: baseline; margin: 0; padding: 2px 0; font-size: 14px; line-height: 1.4; }
.coppia.messaggio .riga-tu .gg { flex: none; min-width: 56px; font-weight: 800; }
.coppia.messaggio .riga-tu b.prendo { color: var(--prendo); white-space: nowrap; }
.coppia.messaggio .riga-tu b.cedo { color: var(--cedo); }
.coppia.messaggio .riga-tu .con-stima .stima-contratto { display: inline; margin-left: 3px; font-size: 10px; font-weight: 500; color: var(--testo-tenue); letter-spacing: .02em; }
/* Sotto l'orario solo quando accanto la riga andrebbe a capo (vedi stima.js). */
.coppia.messaggio .riga-tu .con-stima.sotto { display: inline-flex; flex-direction: column; align-items: center; }
.coppia.messaggio .riga-tu .con-stima.sotto .stima-contratto { margin: 0; font-size: 9px; line-height: 1; }
/* Il cambio orario ha una riga sola, «Fai»: niente colonna da allineare. */
.coppia.messaggio[data-tipo="ORARIO"] .riga-tu .gg { min-width: 0; }
.coppia.messaggio .riga-tu .tenue { color: var(--testo-tenue); }
/* Senza messaggio (le proposte per la tua richiesta): il cerchio accanto alle righe. */
.coppia.messaggio.solo-tu .tu { display: flex; gap: 10px; align-items: center; border-left: 0; padding: 0; }
.coppia.messaggio.solo-tu .tu-righe { flex: 1; min-width: 0; }
.riga-richiesta .coppia.messaggio .msg { padding: 10px; }

/* ------------------------------------------------- Home orientata all'azione */

/* I tre cerchi in alto: stessa misura e stessa riga, senza scritte. */
.hero-azioni { align-items: center; }
.hero-azioni .icon-btn, .hero-azioni .priorita-tasto { flex: none; }
.hero-azioni .tasto-impostazioni { width: var(--cerchio-hero); height: var(--cerchio-hero); }

/* Il prossimo turno: una fascia sola, bassa, sopra tutto il resto. */
.prossimo-turno {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 12px 16px; border-radius: var(--raggio);
  background: var(--superficie); box-shadow: var(--ombra);
}
.prossimo-etichetta { color: var(--testo-tenue); font-size: 13px; width: 100%; }
.prossimo-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; }
.prossimo-riga strong { font-size: 18px; }
.prossimo-ore { font-size: 18px; font-weight: 700; color: var(--orario); font-variant-numeric: tabular-nums; }

/* "Da fare": il titolo porta il numero di cose che aspettano una risposta. */
.conteggio-azioni {
  font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: var(--raggio-pill);
  background: color-mix(in srgb, var(--rosso) 14%, transparent); color: var(--rosso);
}

/* Cambio rapido e Aiuta un collega: due box quadrate affiancate, con il fondo
   colorato di prima. */
.tile-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile-griglia .tile {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
  aspect-ratio: 1 / 1; padding: 16px; margin: 0; text-align: left; position: relative;
  border-radius: var(--raggio); box-shadow: var(--ombra);
}
/* Le due figure (cuori o saette) restano, sparse nella metà alta dove il
   quadrato è vuoto: una grande in alto a destra, una piccola più in basso. */
.tile-griglia .tile::before { right: 18px; top: 14px; width: 28px; height: 28px; }
.tile-griglia .tile::after { right: 56px; top: 54px; width: 18px; height: 18px; }
.tile-griglia .tile .tile-icona { display: block; margin-bottom: auto; }
.tile-griglia .tile strong { font-size: 17px; line-height: 1.2; }
.tile-griglia .tile em { font-size: 13.5px; line-height: 1.35; padding-right: 22px; }
.tile-griglia .tile-freccia { position: absolute; right: 14px; bottom: 12px; font-size: 18px; font-weight: 700; }
.tile-griglia .tile.cambio-rapido .tile-freccia { color: var(--rapido-testo); }
.tile-griglia .tile.aiuta .tile-freccia { color: var(--aiuta-testo); }
.tile-griglia + .link-richiesta { margin-top: 12px; }

/* Cambio rapido: ogni casella dice anche di che tipo di cambio si tratta. */
.rapida { min-height: 64px; }
.rapida .cerchio-tipo { flex: none; width: 40px; height: 40px; }
.rapida { padding: 8px 10px; gap: 6px; }
.rapida .rapida-numero { font-size: 20px; }
.rapida .rapida-quota { margin-left: auto; flex: none; }

/* Il mese del Profilo in un riquadro bianco: nome del mese con le frecce, poi
   i giorni con il numero sopra e l'inizio del turno sotto. Il giallo e il verde
   dei cambi restano quelli di sempre. */
.card-mese { padding: 14px 12px 8px; background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra); }
.mese-testa { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; }
.mese-testa h2 { margin: 0; font-size: 17px; font-weight: 700; }
.mese-frecce { display: flex; }
.mese-frecce button {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  width: 36px; height: 32px; font-size: 24px; line-height: 1; color: var(--accento);
}
.card-mese .mese-personale .mese-griglia { gap: 4px; }
.card-mese .mese-personale .mese-settimana { margin: 0 0 4px; }
.card-mese .mese-personale .mese-giorno {
  align-items: center; justify-content: center; gap: 2px; text-align: center;
  min-height: 50px; padding: 4px 2px; border: 0; border-radius: 10px; background: transparent;
}
.card-mese .mese-personale .mese-giorno .numero { font-size: 14px; font-weight: 700; color: var(--testo); }
.card-mese .mese-personale .mese-giorno .turno { font-size: 10.5px; font-weight: 600; color: var(--testo-tenue); margin: 0; letter-spacing: 0; }
.card-mese .mese-personale .mese-giorno.riposo { background: var(--superficie-2); }
.card-mese .mese-personale .mese-giorno.riposo .numero { color: var(--testo-tenue); }
.card-mese .mese-personale .mese-giorno.fuori { opacity: .45; }
.card-mese .mese-personale .mese-giorno.da-cambiare,
.card-mese .mese-personale .mese-giorno.da-cambiare.riposo { background: var(--da-cambiare); box-shadow: inset 0 0 0 1px var(--da-cambiare-bordo); }
.card-mese .mese-personale .mese-giorno.concordato,
.card-mese .mese-personale .mese-giorno.concordato.riposo { background: var(--concordato); box-shadow: inset 0 0 0 1px var(--concordato-bordo); }
.card-mese .mese-personale .mese-giorno.oggi { box-shadow: inset 0 0 0 2px var(--accento); }
.card-mese .mese-personale .mese-giorno .in-corso { top: 3px; right: 3px; }
.card-mese .mese-personale .mese-giorno .in-corso svg { width: 10px; height: 10px; }
.card-mese + .legenda-mese { margin: 12px 2px 0; }
.card-mese .mese-personale .mese-griglia .mese-giorno:last-child { border-right: 0; }

/* ------------------------------------------- Bacheca: Lista e Calendario */

.testata-bacheca { align-items: flex-start; }
.testata-bacheca .testata-titolo { flex: 1; min-width: 0; }
.testata-bacheca h1 { text-align: left; font-size: 26px; }
.sottotitolo { margin: 2px 0 0; color: var(--testo-tenue); font-size: 14px; }
/* Il selettore: pieno e a tutta larghezza, la vista attiva in blu. */
.selettore-vista {
  display: flex; padding: 3px; margin: 0 0 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--accento) 9%, var(--superficie-2));
}
.selettore-vista button {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  flex: 1; padding: 9px 0; border-radius: 11px; font-weight: 600; color: var(--testo-tenue);
}
.selettore-vista button.attivo {
  background: var(--accento); color: var(--su-pieno);
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--accento) 45%, transparent);
}

/* ------------------------------------------------ Il + al centro e il suo foglio */

/* Il cerchio sfumato come i tasti Accetta, rialzato sopra la barra. */
.tab-piu { padding: 0 6px; align-self: center; }
.tab-piu .piu {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--marchio); color: #fff; transform: translateY(-12px);
  box-shadow: 0 8px 18px -5px color-mix(in srgb, var(--accento) 65%, transparent);
}
.tab-piu:active .piu { transform: translateY(-12px) scale(.95); }

.piu-testa { display: flex; align-items: center; justify-content: space-between; }
.piu-testa p { margin: 0; }
.piu-frecce button {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  width: 34px; height: 30px; font-size: 22px; line-height: 1; color: var(--accento);
}
.strisce-giorni {
  display: flex; gap: 8px; overflow-x: auto; margin: 8px -18px 0; padding: 4px 18px 8px;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.strisce-giorni::-webkit-scrollbar { display: none; }
.tessera-giorno {
  appearance: none; font: inherit; color: inherit; cursor: pointer; flex: none; scroll-snap-align: start;
  width: 62px; padding: 8px 0; text-align: center; border-radius: 14px;
  background: var(--superficie); border: 2px solid transparent; box-shadow: var(--ombra);
}
.tessera-giorno small { display: block; color: var(--testo-tenue); font-size: 11.5px; }
.tessera-giorno b { display: block; font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tessera-giorno em { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--testo-tenue); }
.tessera-giorno.libero { background: var(--superficie-2); box-shadow: none; }
.tessera-giorno.scelta { border-color: var(--accento); background: color-mix(in srgb, var(--accento) 10%, var(--superficie)); }
.tessera-mese {
  flex: none; align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--testo-tenue); writing-mode: vertical-rl; transform: rotate(180deg);
}
.piu-scelto { margin: 6px 0 12px; font-weight: 700; }
.piu-tipi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.piu-tipo {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: var(--raggio-s);
  border: 1.5px solid transparent;
}
.piu-tipo small { font-size: 12px; font-weight: 500; opacity: .85; }
.piu-tipo.orario {
  background: color-mix(in srgb, var(--orario) 12%, var(--superficie)); color: var(--orario);
  border-color: color-mix(in srgb, var(--orario) 40%, transparent);
}
.piu-tipo.off {
  background: color-mix(in srgb, var(--cerca-off) 14%, var(--superficie)); color: var(--cerca-off-testo);
  border-color: color-mix(in srgb, var(--cerca-off) 45%, transparent);
}
.piu-tipo:disabled { opacity: .45; cursor: default; }

/* Proposta chiusa: chi l'ha chiusa, il motivo e il tasto piccolo per toglierla. */
.nota-utente.chiusura { margin: 8px 0 0; }
.elimina-proposta { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ---------------------------------------- Il cambio: stessa forma in ogni schermata */

/* Il giorno in una riga: data a sinistra, il tuo turno a destra. */
.scheda-giorno {
  display: flex; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 10px 14px;
  background: var(--superficie); border-radius: var(--raggio-s); box-shadow: var(--ombra); font-weight: 700;
}
.scheda-giorno span + span { color: var(--orario); font-variant-numeric: tabular-nums; }
/* Due scelte affiancate in un solo controllo. */
.selettore {
  display: flex; padding: 3px; margin: 0 0 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--accento) 9%, var(--superficie-2));
}
.selettore button {
  appearance: none; border: 0; background: none; font: inherit; cursor: pointer;
  flex: 1; padding: 8px 0; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--testo-tenue);
}
.selettore button.attivo { background: var(--superficie); color: var(--accento); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
/* L'ora della fascia: grande, regolabile di mezz'ora. */
.stepper-ora {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px; margin: 0 0 8px; background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.stepper-ora button {
  appearance: none; border: 0; cursor: pointer; font: inherit; width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--accento) 12%, var(--superficie)); color: var(--accento); font-size: 26px; font-weight: 600;
}
.stepper-ora output { min-width: 120px; text-align: center; font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.riepilogo-fascia {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--accento) 7%, var(--superficie)); color: var(--testo);
}

/* ------------------------------------------------ Il benvenuto del primo avvio */

.benvenuto {
  position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 6vh 8px max(env(safe-area-inset-bottom), 20px);
}
/* Due macchie chiare ai lati, come il fondo di un'insegna. */
.benvenuto::before, .benvenuto::after {
  content: ''; position: fixed; z-index: -1; width: 62%; height: 38%; border-radius: 42%;
  filter: blur(2px); pointer-events: none;
}
.benvenuto::before { left: -28%; top: 4%; background: color-mix(in srgb, var(--accento) 9%, transparent); }
.benvenuto::after { right: -28%; bottom: 22%; background: color-mix(in srgb, var(--prendo) 10%, transparent); }
.benvenuto-logo {
  width: 190px; height: 186px; margin: 3vh auto 0;
  /* Il marchio nuovo, incorporato: il file unico non ha una cartella public/. */
  background: url('data:image/webp;base64,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') center/contain no-repeat;
}
.sfumato { background: var(--marchio); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.benvenuto-nome { margin: 4px 0 0; display: flex; flex-direction: column; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.benvenuto-titolo { margin: 5vh 0 0; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.benvenuto-punti { list-style: none; margin: 4vh 0 0; padding: 0 6px; display: grid; gap: 14px; width: 100%; max-width: 330px; text-align: left; }
.benvenuto-punti li { display: flex; align-items: center; gap: 14px; }
.benvenuto-punti strong { font-size: 17px; }
.benvenuto-icona { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.benvenuto-icona.blu { background: color-mix(in srgb, var(--accento) 13%, var(--superficie)); color: var(--accento); }
.benvenuto-icona.verde { background: color-mix(in srgb, var(--prendo) 14%, var(--superficie)); color: var(--prendo); }
.benvenuto-icona.viola { background: color-mix(in srgb, var(--orario) 13%, var(--superficie)); color: var(--orario); }
.benvenuto-inizia { margin-top: auto; border-radius: var(--raggio-pill); font-size: 18px; max-width: 360px; }
.benvenuto-punti + .benvenuto-inizia { margin-top: 5vh; }

/* ------------------------------------------------- Prima di iniziare (Home) */

.prima { padding: 9vh 4px 24px; }
.prima h1 { font-size: 30px; margin: 0 0 10px; letter-spacing: -.02em; }
.prima-intro { margin: 0 0 22px; color: var(--testo-tenue); font-size: 16px; line-height: 1.45; }
.prima-passi { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.prima-passi li {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 16px;
  background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.prima-numero {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marchio); color: #fff; font-weight: 800;
}