/* ============================================================
   auth.css — pagine ESTERNE / pre-login
   ============================================================
   Caricato SOLO da portal/_base_auth.html, che finora montava unicamente
   erp.css: le pagine pre-login (login, reset password, MFA, conferma
   recapito) non avevano un foglio d'area e si portavano gli stili inline,
   duplicandoli l'una dall'altra. Questo file è il loro equivalente di
   app.css (moduli) e superadmin.css (back-office).

   Regole d'area, come per gli altri due:
   - niente hex per accent/destructive: solo var(--accent*) / var(--destructive*);
   - i grigi passano dalle utility Tailwind, non da hex;
   - resta inline SOLO ciò che è dinamico da Jinja (es. il colore della
     piattaforma sul logo, che viene dal DB).
   ============================================================ */

/* ── Selettore lingua (in coda a tutte le pagine pre-login) ─── */
/* NEL FLUSSO, sotto il contenuto. Era `position: fixed; bottom: 18px` — perché il `body`
   di queste pagine è un flex CENTRATO e un secondo figlio si sarebbe messo accanto alla
   card — e su una finestra bassa quel fisso galleggiava SOPRA il contenuto: segnalato il
   31/08/2026 sulla pagina di firma, con «Italiano · English» stampato in mezzo al
   pulsante «Inizia». Un elemento fuori dal flusso non riserva spazio, quindi lo scroll
   non lo evita: nessun `padding-bottom` sarebbe bastato, il fisso resta dov'è mentre il
   contenuto gli passa sotto.
   La cura è nel layout, non qui: i `body` di queste pagine sono `flex flex-col`, così il
   selettore è l'ULTIMO item della colonna. I colori stanno sulle utility (regola d'area),
   qui solo geometria e hover. */
.auth-lingue {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 22px 0 4px;
    flex: 0 0 auto;
}

.auth-lingua {
    text-decoration: none;
    transition: color .15s ease;
}

.auth-lingua:hover {
    color: var(--accent);
}

/* ── Logo di testata (login, reset, conferme) ───────────────── */
/* Il quadrato colorato riceve background inline da {{ platform.color }}:
   è un valore dinamico e non può stare qui. Qui solo la geometria. */
.auth-logo-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.auth-logo-ico {
    width: 18px;
    height: 18px;
    color: #fff;
    display: block;
}

/* ── Cerchio "hero": glifo grande in cima alla card ──────────── */
/* Non coperto da glyph_circle (che è un badge da 16-20px con glifo
   testuale) né da empty_state (icone whitelistate, CTA Alpine). */
.auth-hero {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    background: var(--accent-tint);
}

.auth-hero-neutral {
    background: var(--gray-100);   /* stato neutro, nessun accent */
}

/* Le varianti «danger» e «warning» del cerchio hero sono state RIMOSSE: gli
   esiti della pagina di firma sono tutti accent. Un link scaduto o già usato non
   è un errore della persona che l'ha aperto — è uno stato normale nella vita di
   un documento — e accoglierla con un cerchio rosso la mette in allarme per
   niente. A distinguere gli esiti bastano il glifo e il testo. */

.auth-hero-ico {
    width: 26px;
    height: 26px;
    display: block;
    color: var(--accent);
}

.auth-hero-neutral .auth-hero-ico {
    color: var(--gray-400);
}

/* ── Geometrie ricorrenti nelle pagine esterne ───────────────── */
/* Le icone che ricevono un COLORE dinamico da Jinja tengono inline solo il
   colore: la geometria (che è statica) sta qui. */
.auth-ico16 { width: 16px; height: 16px; display: block; }
.auth-ico22 { width: 22px; height: 22px; display: block; }

/* Altezza minima del corpo card: login e maintenance la condividono per non
   far "saltare" il layout quando il contenuto cambia (stati del form). */
.auth-stage-min { min-height: 272px; }
/* Il tondo del messaggio a tutta pagina (view_as, reimposta password) e la
   larghezza della colonna di testo: erano `style=` inline. */
.auth-tondo64 { width: 64px; height: 64px; }
.auth-bg-accent-tint { background: var(--accent-tint); }
.auth-bg-destructive-tint { background: var(--destructive-tint); }
.auth-mw28r { max-width: 28rem; }
.auth-mw30r { max-width: 30rem; }

/* IL DISPOSITIVO CHE SI STA AUTORIZZANDO (`portal/dispositivo.html`, 02/10/2026): una
   scheda con la sua icona, il nome e il dettaglio, perché si capisca che l'oggetto del
   codice è QUESTO browser e non l'accesso. */
.auth-disp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--gray-50);
}
.auth-disp-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-tint);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Barra di robustezza password (reset_password): larghezza fissa, i colori
   arrivano da Alpine e restano inline perché dinamici. */

/* ── Input OTP (mfa) ─────────────────────────────────────────── */
/* Le sei caselle del codice (`.otp-input`, macro `components/otp_caselle.html`) stanno in
   `tailwind.input.css` dal 10/10/2026, fra la geometria dei componenti condivisi: le monta
   anche il pannello del profilo, dove questo foglio non c'è, e lì erano invisibili. */

/* ============================================================
   Firma pubblica DocSign — /docsign/firma/<token>
   ============================================================
   Era una pagina standalone: <head> artigianale, cdn.tailwindcss.com,
   :root{--accent:#B91C1C} inline e ~50 hex. Ora estende _base_auth.html
   come le sorelle pre-login e tutto ciò che era inline vive qui.

   Le classi sono prefissate `sign-` e agiscono SOLO sotto `.sign-page`
   (classe sul <body> della pagina) dove ritoccano componenti condivisi:
   niente di questo può sfuggire alle altre pagine.
   ============================================================ */

/* ── Campi: qui si firma dal telefono ────────────────────────── */
/* .input-std è tarato sulle schermate dense dell'ERP (12px, 34px d'altezza).
   Qui i campi li compila un dipendente col pollice, su un documento che sta
   firmando: stessa macro `field`, stesso componente, solo la taglia cambia —
   e da 16px in su iOS non zooma la pagina al focus. */
/* NB selettore a DISCENDENTE, non a figlio diretto: i due dropdown dell'orario
   stanno dentro una griglia a due colonne, e con `.sign-field > .relative` ne
   restavano fuori — si vedevano alti la metà degli altri campi. */
.sign-page .input-std,
.sign-field .cal-field-input,
.sign-field .sign-control,
.sign-field .relative > button {
    font-size: 16px;
    line-height: 22px;
}

/* I trigger dei picker sono due macro diverse con la stessa geometria da barra
   filtri: il datepicker riceve `sign-control` via extra_class, dropdown_select
   non ha extra_class e si aggancia al <button> del suo wrapper `.relative`.
   In una colonna di campi la riga deve avere UN solo ritmo. */
.sign-page .input-std,
.sign-field .sign-control,
.sign-field .relative > button {
    padding: 11px 14px;
    border-radius: 10px;
}

.sign-field > label {
    font-size: 13px;
}

/* Nota sotto il campo orario quando l'uscita precede l'entrata. ACCENT e non
   rosso: non è un errore che blocca — un turno notturno ha davvero l'uscita
   prima dell'entrata — è un fatto fatto notare a chi sta per firmare. 13px come
   le label di questa pagina, che si legge col pollice e non a 12px come l'ERP. */
.sign-nota-ora {
    margin-top: 6px;
    font-size: 13px;
    line-height: 18px;
    color: var(--accent);
}

/* ── Indicatore di passo ─────────────────────────────────────── */
/* Il filo che unisce i passi è il ::before del passo SUCCESSIVO: così l'ultimo
   non si trascina una coda, e la riga si distribuisce da sola senza spaziatori. */
/* Niente reset di margin/padding/list-style qui: ci pensa già il preflight
   Tailwind, e ridichiararli in auth.css (caricato DOPO erp.css, stessa
   specificità) spegnerebbe le utility di spaziatura messe sull'<ol>. */
.sign-steps {
    display: flex;
    align-items: center;
}

.sign-step {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sign-step + .sign-step {
    flex: 1 1 auto;
    min-width: 0;
}

.sign-step + .sign-step::before {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin: 0 8px;
    background: var(--gray-200);
}

.sign-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-400);
    transition: background-color .15s, color .15s;
}

.sign-step-label {
    display: none;         /* su telefono restano i soli pallini numerati */
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-400);
}

.sign-step.is-on .sign-step-dot {
    background: var(--accent);
    color: #fff;
}

.sign-step.is-on .sign-step-label {
    color: var(--accent);
}

@media (min-width: 640px) {
    .sign-step-label { display: block; }
}

/* ── Visore del documento ────────────────────────────────────── */
/* I canvas li crea PDF.js: la loro geometria non può stare in una classe sul
   nodo, ma può stare qui — così il JS resta logica e non tocca lo stile. */
.sign-pdf { min-height: 400px; }

.sign-pdf-pages {
    max-height: 500px;
    overflow-y: auto;
}

.sign-pdf-pages canvas {
    display: block;
    width: 100%;
}

.sign-pdf-pages canvas + canvas {
    border-top: 4px solid var(--gray-200);   /* stacco tra pagina e pagina */
}

/* ── Informativa FEA ─────────────────────────────────────────── */
/* Scorre dentro il suo box: `contain` evita che lo scroll a fondo testo
   trascini la pagina (su mobile è la differenza tra leggere e rincorrere). */
.sign-informativa {
    max-height: 10rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── Codice OTP ──────────────────────────────────────────────── */
/* LA CASELLA UNICA NON C'È PIÙ (13/09/2026). Era la variante «campo largo» della
   firma pubblica, nata dall'idea che il codice si incolli e basta; il campo unico
   però non dice quante cifre mancano, e la stessa domanda aveva DUE rese in tre
   pagine. Ora ovunque ci sono le sei caselle di `.otp-input`, dalla macro
   `components/otp_caselle.html` — che incolla lo gestisce lo stesso, distribuendo
   le cifre. Se serve di nuovo un campo unico, la ragione va scritta qui. */

/* ── Verifica pubblica del documento ─────────────────────────── */
/* Pagina raggiunta dall'indirizzo stampato sul PDF (`verifica_pubblica.html`).
   Geometria qui e non inline: il protocollo lo impone, e queste misure tornano
   in più punti della stessa pagina. */
.ver-esito {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--accent-tint);
    border: 1px solid var(--accent-weak);
}
/* Accent anche sull'anomalia: il glifo e il testo distinguono l'esito, e un
   riquadro rosso in cima a una pagina che un terzo apre per informarsi
   sposterebbe il messaggio da «guarda i controlli» a «allarme». Il rosso resta
   alla singola riga di controllo non superata, che è il fatto puntuale. */
.ver-esito-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); }

.ver-firma { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gray-100); }

/* Etichetta + valore su due colonne; su schermo stretto vanno in colonna sola. */
.ver-dati { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; margin: 0; }
.ver-dati dt { font-size: 12px; color: var(--gray-400); }
.ver-dati dd { font-size: 12px; color: var(--text-strong); margin: 0; }
/* L'impronta va a capo dove capita: è una stringa di 64 caratteri senza spazi e
   senza questo allarga la pagina in orizzontale sul telefono. NIENTE monospace
   (CLAUDE.md: il mono non è di questa interfaccia). */
.ver-hash { word-break: break-all; line-height: 1.5; }

@media (max-width: 520px) {
    .ver-dati { grid-template-columns: 1fr; gap: 2px; }
    .ver-dati dd { margin-bottom: 8px; }
}

.ver-controlli { list-style: none; margin: 14px 0 0; padding: 0; }
.ver-controlli li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
    padding: 3px 0;
}
.ver-ck { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.ver-ck--ok { color: var(--accent); }
.ver-ck--ko { color: var(--destructive); }
.ver-ck--neutro { color: var(--gray-400); }

.ver-limite {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
    font-size: 11px;
    line-height: 17px;
    color: var(--gray-400);
}

/* ── Stato «requisito soddisfatto» ────────────────────────────────────────────
   SUCCESS usa l'accent: un token verde non esiste (§SISTEMA COLORI). Il testo sta
   su fondo bianco, quindi --accent-dark (regola 007). `.text-accent` vive in
   superadmin.css, che le pagine pre-login NON caricano: serve qui. */
.text-accent { color: var(--accent); }

/* Meter di forza password: la quantita' e' l'accent, il RIFIUTO e' il destructive.
   Le gemelle stanno in superadmin.css; le pre-login non caricano quel foglio. */
.bg-accent        { background: var(--accent); }
.bg-destructive   { background: var(--destructive); }
.text-destructive { color: var(--destructive); }

/* ── «Lavora con noi» — il sito pubblico degli annunci (Recruiting) ─────────────────────
   Famiglia `lcn-`. Dal 05/10/2026 veste movitrento.it e non l'ERP (proposta A del mockup,
   utente: «colori e caratteri come il sito movitrento.it»): Poppins, il magenta e il verde
   del sito dell'azienda (`--sito-*`, in tailwind.input.css, MISURATI sul tema Impreza),
   la stessa testata, lo stesso piede verde, la stessa cookie bar (iubenda, la carica
   `_base.html`). Pensato prima per il telefono: un annuncio si apre da un link mandato
   su WhatsApp. Sotto i 1024px il menu si chiude nel bottone e il modulo scende sotto il
   testo, con una barra «Candidati» in fondo allo schermo finché non lo si raggiunge.
   `body, *` della base mette Inter dappertutto: qui si ridice il carattere su `*`. */
.lcn-corpo { background: white; color: var(--sito-testo); font-weight: 300; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.lcn-corpo, .lcn-corpo * { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }
.lcn-corpo h1, .lcn-corpo h2, .lcn-corpo h3 { margin: 0; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.lcn-corpo p { margin: 0; }
.lcn-corpo input[type="checkbox"] { accent-color: var(--sito-magenta); }
.lcn-corpo input:focus, .lcn-corpo select:focus, .lcn-corpo textarea:focus { border-color: var(--sito-magenta) !important; box-shadow: 0 0 0 3px rgba(170, 0, 82, .18) !important; outline: none; }
/* Il segno della tastiera: sui link e sui bottoni, e sull'etichetta-bottone del CV che
   nasconde il suo campo file. NON su ogni `label:focus-within`: nei filtri l'etichetta
   contiene la tendina, e premendola si accendeva un rettangolo intorno a nome e campo. */
.lcn-corpo a:focus-visible, .lcn-corpo button:focus-visible, .lcn-cv-bottoni label:focus-within { outline: 2px solid var(--sito-magenta); outline-offset: 2px; }
.lcn-glifo { flex-shrink: 0; display: block; }
.lcn-pagina { min-height: 100vh; display: flex; flex-direction: column; }
.lcn-contenitore { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.lcn-main { flex: 1; }

/* I bottoni: quelli di movitrento.it (maiuscolo 600, raggio .2em) */
.lcn-bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 1em 1.1em; border: 1px solid transparent; border-radius: .2em; background: var(--sito-magenta); color: white; font-size: .8rem; font-weight: 600; line-height: 1.1; text-transform: uppercase; text-align: center; cursor: pointer; transition: background .3s, color .3s; }
.lcn-bottone:hover { background: var(--sito-magenta-scuro); color: white; }
.lcn-bottone:disabled { opacity: .5; cursor: default; }
.lcn-bottone.is-bianco { background: white; color: var(--sito-magenta); }
.lcn-bottone.is-bianco:hover { color: var(--sito-magenta-scuro); }
.lcn-bottone.is-filo { background: white; color: var(--sito-magenta); border-color: var(--sito-magenta); }
.lcn-bottone.is-filo:hover { background: rgba(170, 0, 82, .06); }
.lcn-bottone.is-largo { width: 100%; }
.lcn-bottone.is-alto { min-height: 52px; font-size: .85rem; }
.lcn-link { color: var(--sito-magenta); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lcn-link:hover { color: var(--sito-verde); }


/* La fascia d'apertura: la foto del magazzino, come la home di movitrento.it */
.lcn-eroe { position: relative; background: var(--sito-testo) url('/static/img/sito/magazzino-900.jpg') center 40% / cover no-repeat; color: white; text-align: center; }
/* il velo della home di movitrento.it, misurato: nero dal 39% al trasparente, a 350° */
.lcn-eroe::before { content: ''; position: absolute; inset: 0; background: linear-gradient(350deg, rgba(0, 0, 0, .39) 0%, rgba(0, 0, 0, 0) 100%); }
.lcn-eroe-dentro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 64px; padding-bottom: 56px; }
/* i tre testi della fascia come la home di movitrento.it: 1em, 3em maiuscolo, ombra 0 6px 6px */
.lcn-eroe { font-size: var(--u); }
.lcn-occhiello { font-size: 1em; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-shadow: 0 6px 6px var(--sito-scuro); }
.lcn-eroe h1 { font-size: 3em; line-height: 1.2; text-transform: uppercase; text-shadow: 0 6px 6px var(--sito-scuro); }
.lcn-eroe-sotto { font-size: 2em; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: white; text-shadow: 0 6px 6px var(--sito-scuro); }
.lcn-eroe-bottoni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

/* Le posizioni */
.lcn-posizioni { background: var(--sito-fondo); padding: 40px 0 48px; scroll-margin-top: 70px; }
.lcn-posizioni > .lcn-contenitore { display: flex; flex-direction: column; gap: 20px; }
.lcn-posizioni-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.lcn-titolo { color: var(--sito-verde); font-size: clamp(24px, 20px + 1.6vw, 40px); letter-spacing: -.01em; }
.lcn-conteggio { font-size: 14px; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-filtri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lcn-filtri .lcn-filtro:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.lcn-filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lcn-filtro-eti { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sito-sbiadito); }
.lcn-select { appearance: none; width: 100%; height: 48px; padding: 0 36px 0 12px; border: 1px solid var(--sito-campo); border-radius: .2em; background: white; color: var(--sito-testo); font-size: 15px; font-weight: 400; cursor: pointer; }
.lcn-select-box { position: relative; }
.lcn-select-box .lcn-glifo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.lcn-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lcn-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; background: white; border: 1px solid var(--sito-filetto); border-radius: 4px; color: var(--sito-testo); transition: box-shadow .25s, transform .25s; }
.lcn-card:hover { box-shadow: 0 12px 30px -10px rgba(40, 45, 40, .14); transform: translateY(-2px); }
.lcn-card-sopra { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lcn-settore { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sito-magenta); }
.lcn-nuovo { font-size: 11px; font-weight: 600; color: var(--sito-verde); background: rgba(77, 160, 76, .12); padding: 2px 8px; border-radius: 50em; }
.lcn-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.lcn-card-breve { font-size: 14px; }
.lcn-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lcn-card-piede { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sito-filetto); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.lcn-entro { font-weight: 400; color: var(--sito-sbiadito); }
.lcn-vai { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--sito-magenta); white-space: nowrap; }
.lcn-spontanea { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px; background: white; border: 2px dashed var(--sito-verde-chiaro); border-radius: 4px; }
.lcn-spontanea h3 { font-size: 18px; font-weight: 600; }
.lcn-spontanea p { max-width: 60ch; font-size: 14.5px; }
.lcn-vuoto { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; background: white; border: 1px solid var(--sito-filetto); border-radius: 4px; text-align: center; }
.lcn-vuoto h3 { font-size: 18px; font-weight: 600; }

/* Come funziona la selezione: tre passi, in quest'ordine */
.lcn-come { padding: 44px 0 52px; }
.lcn-come > .lcn-contenitore { display: flex; flex-direction: column; gap: 24px; }
.lcn-passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.lcn-passi li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; align-content: start; }
.lcn-passo-n { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--sito-verde); color: var(--sito-verde); display: grid; place-items: center; font-size: 17px; font-weight: 700; }
.lcn-passi h3 { padding-top: 9px; font-size: 17px; font-weight: 600; }
.lcn-passi p { font-size: 14.5px; }


/* La pagina dell'annuncio */
.lcn-ann-testa { background: var(--sito-fondo); padding: 22px 0 28px; }
.lcn-ann-testa > .lcn-contenitore { display: flex; flex-direction: column; gap: 12px; }
.lcn-ann-testa h1 { color: var(--sito-verde); font-size: clamp(26px, 22px + 1.9vw, 44px); letter-spacing: -.01em; }
.lcn-breve { max-width: 60ch; font-size: 16px; }
.lcn-briciole { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-briciole a { color: var(--sito-magenta); }
.lcn-etichette { display: flex; flex-wrap: wrap; gap: 6px; }
.lcn-etichetta { padding: 4px 10px; border-radius: 50em; border: 1px solid var(--sito-filetto); background: white; font-size: 12px; font-weight: 500; line-height: 1.6; }
.lcn-etichetta.is-magenta { border-color: transparent; background: rgba(170, 0, 82, .08); color: var(--sito-magenta); font-weight: 600; }
.lcn-avviso { padding: 12px 14px; border-left: 4px solid var(--sito-magenta); background: white; font-size: 14.5px; font-weight: 400; }
.lcn-dettaglio { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "testo" "modulo" "altri"; gap: 32px; padding-top: 28px; padding-bottom: 48px; }
.lcn-testo { grid-area: testo; min-width: 0; max-width: 68ch; display: flex; flex-direction: column; gap: 14px; font-size: 15.5px; }
.lcn-descrizione { display: flex; flex-direction: column; gap: 12px; }
.lcn-descrizione ul, .lcn-descrizione ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.lcn-descrizione ul { list-style: disc; }
.lcn-descrizione ol { list-style: decimal; }
.lcn-descrizione li { display: list-item; }
.lcn-descrizione strong, .lcn-descrizione b { font-weight: 600; }
.lcn-descrizione a { color: var(--sito-magenta); text-decoration: underline; }
.lcn-testo h2 { margin-top: 12px; color: var(--sito-verde); font-size: 20px; font-weight: 600; }
.lcn-fatti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.lcn-fatti div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; background: white; border: 1px solid var(--sito-filetto); border-radius: 4px; }
.lcn-fatti div.is-largo { grid-column: 1 / -1; }
.lcn-fatti dt { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sito-sbiadito); }
.lcn-fatti dd { margin: 0; font-size: 15px; font-weight: 500; }
.lcn-spunte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lcn-spunte li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.lcn-spunte .lcn-glifo { margin-top: 3px; color: var(--sito-verde); }
.lcn-altri { grid-area: altri; min-width: 0; }
.lcn-altri h2 { margin-bottom: 14px; color: var(--sito-verde); font-size: 20px; font-weight: 600; }
.lcn-altri-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lcn-altro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: white; border: 1px solid var(--sito-filetto); border-radius: 4px; color: var(--sito-testo); }
.lcn-altro:hover { border-color: var(--sito-magenta); }
.lcn-altro b { display: block; font-size: 15px; font-weight: 500; }
.lcn-altro small { font-size: 13px; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-altro .lcn-glifo { color: var(--sito-magenta); }

/* Il modulo */
.lcn-modulo-posto { grid-area: modulo; min-width: 0; }
.lcn-modulo { padding: 22px 18px 24px; background: white; border: 1px solid var(--sito-filetto); border-top: 4px solid var(--sito-magenta); border-radius: 4px; scroll-margin-top: 80px; }
.lcn-modulo h2 { font-size: 22px; }
.lcn-modulo-sotto { margin-top: 4px !important; font-size: 14px; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-campi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.lcn-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lcn-campo label, .lcn-campo-eti { font-size: 13.5px; font-weight: 500; }
.lcn-campo label i, .lcn-campo-eti i, .lcn-spunta i { font-style: normal; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-campo small { font-size: 12.5px; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--sito-campo); border-radius: .2em; background: white; color: var(--sito-testo); font-size: 16px; font-weight: 400; }
textarea.lcn-input { height: auto; min-height: 104px; padding: 11px 12px; resize: vertical; }
.lcn-campo-err { display: none; font-size: 13px; font-weight: 400; color: var(--sito-errore); }
.is-provato .lcn-input:invalid { border-color: var(--sito-errore); }
.is-provato .lcn-input:invalid ~ .lcn-campo-err { display: block; }
.lcn-cv { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--sito-fondo); border: 1.5px dashed var(--sito-campo); border-radius: 4px; }
.is-provato .lcn-cv.is-vuoto { border-color: var(--sito-errore); }
.is-provato .lcn-cv.is-vuoto ~ .lcn-campo-err { display: block; }
.lcn-cv-sopra { display: flex; align-items: center; gap: 12px; }
.lcn-cv-sopra .lcn-glifo { color: var(--sito-magenta); }
.lcn-cv-sopra b { display: block; font-size: 14.5px; font-weight: 500; }
.lcn-cv-sopra small { font-size: 12.5px; font-weight: 400; color: var(--sito-sbiadito); }
.lcn-cv-bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.lcn-cv-bottoni label { cursor: pointer; }
.lcn-cv-bottoni input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lcn-cv-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: white; border: 1px solid var(--sito-filetto); border-radius: 4px; font-size: 14px; font-weight: 400; }
.lcn-cv-file span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lcn-cv-file em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcn-cv-file .lcn-glifo { color: var(--sito-verde); }
.lcn-consensi { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.lcn-spunta { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; font-weight: 400; cursor: pointer; }
.lcn-spunta input { width: 20px; height: 20px; margin: 1px 0 0; cursor: pointer; }
.is-provato .lcn-spunta input:invalid + span { color: var(--sito-errore); }
.lcn-informativa { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--sito-sbiadito); }
.lcn-informativa p { white-space: pre-line; }
.lcn-informativa a { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--sito-magenta); font-weight: 500; }
.lcn-informativa a:hover { color: var(--sito-verde); }
.lcn-errore { margin-top: 14px !important; font-size: 13.5px; font-weight: 400; color: var(--sito-errore); }
.lcn-invio { margin-top: 20px; }
/* il campo esca: fuori dallo schermo a sinistra (non fa scorrere la pagina), non ritagliato */
.lcn-esca { position: absolute; left: -10000px; top: 0; }
.lcn-grazie { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 15px; }
.lcn-grazie-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--sito-verde); color: white; display: grid; place-items: center; }
.lcn-grazie h2 { font-size: 22px; }
.lcn-grazie-poi { font-size: 14px; font-weight: 400; color: var(--sito-sbiadito); }

/* La barra «Candidati» del telefono: in fondo, finché il modulo non si vede */
.lcn-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: white; border-top: 1px solid var(--sito-filetto); box-shadow: 0 -10px 24px -16px rgba(40, 45, 40, .18); transform: translateY(110%); transition: transform .25s ease; }
.lcn-barra.is-su { transform: none; }
.lcn-barra div { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--sito-sbiadito); }
.lcn-barra b { display: block; font-size: 13.5px; font-weight: 600; color: var(--sito-testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Il quadratino delle preferenze di iubenda sale sopra la barra, invece di coprirla.
   iubenda lo mette a `bottom: 0` più un margine di 16px, con selettori lunghi e
   `!important`: per vincere serve un selettore più specifico del suo (misurato). */
.lcn-corpo.lcn-barra-su .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float][data-tp-float="bottom-right"] { bottom: 72px !important; transition: bottom .25s; }

/* Testata e piede: COPIA di movitrento.it (05/10/2026, «Lo voglio UGUALE»), misurata sul
   sito vero a 390, 1024, 1440 e 1920px. `--u` è il corpo del loro tema: calc(16px + .1vw),
   15px fino a 600px; le misure in `em` della testata e del piede ci si appoggiano, come là.
   Le soglie sono le loro (600, 1024) tranne una: il menu orizzontale da 1280px, perché a
   1440 il loro va sotto il bottone (misurato) — da 1500 ha le loro misure, fra 1280 e
   1500 le voci si stringono quanto basta a non toccarsi. */
.lcn-corpo { --u: calc(16px + .1vw); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.lcn-fa { display: block; flex-shrink: 0; height: 1em; width: auto; }
/* La freccia del menu di movitrento.it: il glifo U+F107 di Font Awesome 5 Pro Regular, il font del
   tema Impreza del sito ufficiale, ridotto al solo carattere (`sito-freccia.woff2`, 492 byte). */
@font-face { font-family: 'lcn-freccia'; src: url('../fonts/sito-freccia.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
.lcn-h { position: sticky; top: 0; z-index: 40; font-size: var(--u); line-height: 1.6; }
/* LA TESTATA DI MOVITRENTO.IT (tema Impreza), misurata l'08/10/2026 con Playwright alle stesse
   larghezze: `--u` è la loro base (15px fino a 600, 15px + .2vw fino a 1024, 16px + .1vw oltre),
   il margine è 1 base fino a 900 e 1,5 oltre, il pulsante sta a 1,4 basi dal vicino. Gli STATI del
   menu hanno le loro misure, ma cominciano dove il menu ci sta davvero: fra 901 e 1499 la loro
   testata si sovrappone (pulsante sopra «Contatti», menu fuori dal bordo) e l'utente l'ha voluta
   «uguale ma senza difetti». Identica fino a 900, fra 1252 e 1400 (stesse misure; loro da 1151) e da 1550. */
/* L'INGRESSO DELLA TESTATA, come il tema di movitrento.it: il logo cresce, il menu arriva da destra,
   il pulsante si apre (stesse curve, durate e ritardi). Non è solo movimento: l'animazione lasciata
   ferma all'ultimo fotogramma tiene il logo su un livello suo, che il browser ridisegna in un altro
   modo — senza, i pixel del logo non tornavano (08/10/2026). */
@keyframes lcn-afc { 0% { opacity: 0; transform: scale(.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lcn-afr { 0% { opacity: 0; transform: translateX(calc(var(--u) * 5)); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes lcn-wfc { 0% { opacity: 0; transform: scaleX(.01); } 100% { opacity: 1; transform: scaleX(1); } }
.lcn-h-logo { animation: lcn-afc .6s cubic-bezier(.215, .61, .355, 1) .25s both; }
.lcn-h-nav { animation: lcn-afr .6s cubic-bezier(.215, .61, .355, 1) .25s both; }
.lcn-h-bottone { animation: lcn-wfc .6s cubic-bezier(.215, .61, .355, 1) .5s both; }
.lcn-h-riga { display: flex; align-items: center; height: 70px; padding: 0 var(--u); background: white; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.lcn-h-logo { display: block; margin-right: auto; }
/* `object-fit: cover`, la misura intrinseca e l'immagine in linea allineata in alto, come le immagini di
   WordPress: il riquadro (200,33 × 55) e il file hanno proporzioni appena diverse, e con `fill` l'immagine
   si stirava di una frazione di pixel; da blocco, a 390px, si campionava mezzo pixel più in là */
.lcn-h-logo img { display: inline; vertical-align: top; height: 35px; width: auto; max-width: 100%; object-fit: cover; contain-intrinsic-size: 3000px 1500px; }
.lcn-h-nav { display: none; }
.lcn-h-bottone { display: block; margin: 0 10px 0 0; padding: .9em; border-radius: .2em; background: var(--sito-magenta); color: white; font-size: .75em; font-weight: 600; line-height: 1; text-transform: uppercase; text-align: center; transition: background .3s; }
.lcn-h-bottone:hover { background: var(--sito-magenta-scuro); color: white; }
/* il panino: tre righe da 2px arrotondate, distanti un terzo del riquadro (24px, 28px da 601) */
.lcn-h-burger { position: relative; box-sizing: content-box; width: 1em; height: 1em; margin: 0 calc(var(--u) * -.8) 0 0; padding: 0 calc(var(--u) * .8); border: 0; background: none; color: var(--sito-testo); font-size: 24px; cursor: pointer; }
.lcn-h-burger span { position: absolute; left: calc(var(--u) * .8); right: calc(var(--u) * .8); top: calc(.5em - 1px); height: 2px; border-radius: 2px; background: currentColor; }
.lcn-h-burger span:nth-child(1) { top: calc(.5em - 1px - .3333em); }
.lcn-h-burger span:nth-child(3) { top: calc(.5em - 1px + .3333em); }
.lcn-h-freccia { display: inline-flex; justify-content: center; width: 20px; }
.lcn-h-freccia .lcn-fa { height: 1.2em; transition: transform .2s; }
/* Il menu del telefono: a tutto schermo, bianco, le voci al centro */
.lcn-h-mobile { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: center; padding: 30px; background: white; overflow-y: auto; }
.lcn-h-mobile ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.lcn-h-chiudi { position: absolute; top: 20px; right: 15px; width: 48px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--sito-testo); font-size: 26px; cursor: pointer; }
.lcn-h-mvoce { display: flex; align-items: center; justify-content: center; width: 100%; padding: .7em; border: 0; background: none; color: var(--sito-testo); font-size: 1.3em; font-weight: 500; line-height: 1.6; cursor: pointer; }
.lcn-h-mvoce:hover, .lcn-h-mvoce.is-attivo, .lcn-h-mvoce.is-aperta { color: var(--sito-magenta); }
.lcn-h-mvoce .lcn-h-freccia { margin-left: .4em; }
.lcn-h-mvoce.is-aperta .lcn-fa { transform: rotate(180deg); }
.lcn-h-msotto { padding-bottom: .4em !important; }
.lcn-h-msotto a { display: inline-block; padding: .45em; color: var(--sito-testo); font-size: 1em; font-weight: 500; }
.lcn-h-msotto a:hover { color: var(--sito-magenta); }

.lcn-f { font-size: var(--u); line-height: 1.6; }
.lcn-f-sopra { padding: 4em 2.5em; background: var(--sito-verde); color: rgba(255, 255, 255, .85); }
.lcn-f-dentro { max-width: 1410px; margin: 0 auto; }
.lcn-f-griglia { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.5fr) minmax(0, 2fr); gap: 3em; }
.lcn-f-col { min-width: 0; }
.lcn-f-nome { margin-bottom: calc(var(--u) * 1.5) !important; font-size: calc(17px + .9vw); font-weight: 700; line-height: 1.2; }
.lcn-f-tag { margin-bottom: calc(var(--u) * 1.5) !important; font-size: 14px; font-weight: 700; line-height: 1.2; }
.lcn-f-ind { margin-bottom: 1em !important; font-size: 16px; font-weight: 300; line-height: 28px; }
.lcn-f-ind b { font-weight: 700; }
.lcn-f-ind a { color: white; }
.lcn-f-ind.is-stretto { display: none; }
.lcn-f-social { display: flex; gap: 6px; }
.lcn-f-social a { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: .25em; background: white; color: var(--sito-verde); transition: opacity .3s; }
.lcn-f-social a:hover { opacity: .85; }
.lcn-f-col-menu { margin: 0 -1em; padding: 0 1em; border-left: 1px solid var(--sito-verde-chiaro); }
.lcn-f-menu-t { font-size: 20px; font-weight: 700; line-height: 28px; }
.lcn-f-menu { margin-top: 15px; }
.lcn-f-menu ul { list-style: none; margin: 0; padding: 0; }
.lcn-f-menu > ul > li { margin-bottom: 1.2em; }
.lcn-f-voce { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .85); font-size: 1em; font-weight: 300; line-height: 1.4; text-align: left; cursor: pointer; }
.lcn-f-voce:hover { color: white; }
.lcn-f-voce .lcn-fa { height: .85em; transition: transform .2s; }
.lcn-f-voce.is-aperta .lcn-fa { transform: rotate(180deg); }
.lcn-f-sotto { padding: .8em 0 0 .8em !important; }
.lcn-f-sotto li + li { margin-top: .8em; }
.lcn-f-sotto a { color: rgba(255, 255, 255, .85); font-weight: 300; }
.lcn-f-sotto a:hover { color: white; }
.lcn-f-mappa { display: block; width: 100%; height: 350px; border: 0; border-radius: 10px; }
.lcn-f-legale { padding: 2em 2.5em; background: var(--sito-testo); color: rgba(255, 255, 255, .85); text-align: center; }
.lcn-f-legale p { font-size: 13px; font-weight: 400; line-height: 1.5; }
.lcn-f-legale a { color: white; }
.lcn-f-legale .is-stretto { display: none; }

@media (min-width: 601px) {
  /* il logo sta in alto in un riquadro di 55: più piccolo (110, 150) non si centra, come da loro */
  .lcn-h-logo { height: 55px; }
  .lcn-h-logo img { height: 55px; }
  .lcn-h-bottone { margin: 0 0 0 calc(var(--u) * 1.4); }
  .lcn-h-burger { margin-left: calc(var(--u) * 1.4); font-size: 28px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .lcn-corpo { --u: calc(15px + .2vw); }
}
@media (min-width: 901px) {
  .lcn-h-riga { padding: 0 calc(var(--u) * 1.5); }
}
/* IL MENU, dalla larghezza in cui ci sta (misurata sulla nostra pagina, con almeno 1,4 basi fra
   logo e menu): prima lo stato a 12px, da 1050 */
@media (min-width: 1050px) {
  .lcn-h-logo img { max-width: 110px; height: auto; }
  .lcn-h-nav { display: block; }
  .lcn-h-nav > ul { display: flex; list-style: none; margin: 0; padding: 0; }
  .lcn-h-nav > ul > li { position: relative; }
  /* Come le voci di movitrento.it (Impreza, `.w-nav-anchor.level_1`): blocco alto 70, testo in linea
     con l'interlinea di 70, freccia a 1.2em staccata di .4em e allineata in alto. */
  .lcn-h-nav > ul > li > a { display: block; height: 70px; padding: 0 5px; color: var(--sito-testo); font-size: 12px; font-weight: 500; line-height: 70px; white-space: nowrap; }
  .lcn-h-titolo { position: relative; }
  .lcn-h-titolo::after { display: block; content: ""; position: absolute; left: 0; bottom: -.4em; margin: 0 auto -2px; height: 2px; width: 100%; background: currentColor; opacity: 0; transition: .2s; }
  .lcn-h-freccia-d { display: none; vertical-align: top; font-weight: normal; line-height: inherit; text-align: center; }
  .lcn-h-freccia-d::before { content: "\f107"; vertical-align: top; font-family: 'lcn-freccia'; font-weight: 400; font-size: 1.2em; margin-inline-start: .4em; }
  .lcn-h-nav > ul > li > a:hover, .lcn-h-nav > ul > li:hover > a, .lcn-h-nav > ul > li > a.is-attivo { color: var(--sito-magenta); }
  .lcn-h-tendina { display: none; position: absolute; top: 100%; left: 0; min-width: 16em; margin: 0; padding: .6em 0; list-style: none; background: white; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
  .lcn-h-nav li:hover > .lcn-h-tendina, .lcn-h-nav li:focus-within > .lcn-h-tendina { display: block; }
  .lcn-h-tendina a { display: block; padding: .55em 1.3em; color: var(--sito-testo); font-size: 15px; font-weight: 400; line-height: 1.4; }
  .lcn-h-tendina a:hover { color: var(--sito-magenta); }
  .lcn-h-bottone { font-size: 12px; padding: .7em .6em; }
  .lcn-h-burger, .lcn-h-mobile { display: none; }
}
/* 13px, logo 150, le frecce (il loro stato da 1151 a 1400: qui ci sta da 1252) */
@media (min-width: 1252px) {
  .lcn-h-logo img { max-width: 150px; }
  .lcn-h-nav > ul > li > a { padding: 0 8px; font-size: 13px; }
  .lcn-h-freccia-d { display: inline-block; }
  .lcn-h-bottone { font-size: 13px; padding: .8em; }
}
/* 16px e logo 55 (il loro stato da 1401: col suo spazio e il pulsante su una riga, da 1550) */
@media (min-width: 1550px) {
  .lcn-h-logo img { max-width: none; height: 55px; }
  .lcn-h-nav > ul > li > a { padding: 0 13px; font-size: 16px; }
  .lcn-h-bottone { font-size: .75em; padding: .9em; }
}
@media (max-width: 1024px) {
  .lcn-f-sopra { padding: 2.5em; }
  .lcn-f-griglia { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lcn-f-col-menu { margin: 0; padding: 0; border-left: 0; }
  .lcn-f-menu-t { margin-top: 40px !important; }
}
@media (max-width: 600px) {
  .lcn-corpo { --u: 15px; }
  .lcn-occhiello { font-size: 1.5em; }
  .lcn-eroe-sotto { font-size: 1.5em; }
  .lcn-eroe h1 { font-size: 2.5em; }
  .lcn-f-sopra { padding: 60px 1.5em 1.5em; }
  .lcn-f-griglia { gap: 7.5px; }
  .lcn-f-col { text-align: center; }
  .lcn-f-ind.is-largo { display: none; }
  .lcn-f-ind.is-stretto { display: block; font-size: 14px; font-weight: 400; line-height: 21px; }
  .lcn-f-social { justify-content: center; }
  .lcn-f-menu-t { line-height: 24px; }
  .lcn-f-voce { display: inline-flex; justify-content: center; gap: 1.4em; width: auto; }
  .lcn-f-sotto { padding-left: 0 !important; }
  .lcn-f-legale { padding: 1.5em; }
  .lcn-f-legale .is-largo { display: none; }
  .lcn-f-legale .is-stretto { display: block; }
}

/* La pagina dell'annuncio, proposta 2 del mockup (05/10/2026): i tre box liberi con la
   testata magenta e le righe a filetto, «Perché scegliere» col riquadro «Chi siamo», la
   frase delle pari opportunità, e sotto, a piena larghezza, la fascia dei benefits coi
   quattro tondi magenta — come la pagina di esempio di movitrento.it. */
.lcn-testo .lcn-box { overflow: hidden; background: white; border: 1px solid var(--sito-magenta); border-radius: 6px; }
.lcn-testo .lcn-box h2 { margin: 0; padding: 12px 20px; background: var(--sito-magenta); color: white; font-size: 20px; font-weight: 700; }
.lcn-box ul { list-style: none; margin: 0; padding: 0; }
.lcn-box li { padding: 12px 20px; border-top: 1px solid var(--sito-filetto); font-size: 15px; font-weight: 400; line-height: 1.5; }
.lcn-box li:first-child { border-top: 0; }
.lcn-perche { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.lcn-testo .lcn-perche h2 { margin: 0; color: var(--sito-testo); font-size: clamp(24px, 20px + 1vw, 34px); font-weight: 700; }
.lcn-perche ul { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; list-style: disc; font-size: 16px; font-weight: 400; }
.lcn-perche li { display: list-item; }
.lcn-chi { padding: 18px 20px; border-left: 4px solid var(--sito-verde); border-radius: 4px; background: var(--sito-fondo); }
.lcn-chi h3 { font-size: 20px; font-weight: 700; }
.lcn-chi p { margin-top: 4px !important; font-size: 15.5px; font-weight: 400; }
.lcn-chi .lcn-bottone { margin-top: 14px; }
.lcn-pari { color: var(--sito-sbiadito); font-size: 13px; font-style: italic; font-weight: 400; line-height: 1.6; }
.lcn-benefits { padding: 40px 0 48px; background: var(--sito-fondo); }
.lcn-benefits .lcn-contenitore { display: flex; flex-direction: column; gap: 18px; }
.lcn-benefits-t { font-size: clamp(26px, 20px + 1.6vw, 44px); }
.lcn-benefits-intro { max-width: 90ch; font-size: 16px; font-weight: 400; }
.lcn-quattro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 18px; }
.lcn-ben { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.lcn-tondo { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--sito-magenta); color: white; font-size: 26px; }
/* GLI EFFETTI DEI BENEFITS (05/10/2026), nello spirito del tema di movitrento.it, che fa
   salire i blocchi con una dissolvenza («fade bottom»). OGNI blocco parte da solo quando è
   ben dentro lo schermo (sul telefono la griglia è 2×2: la seconda riga si animava fuori
   vista, misurato), sale e il suo tondo sboccia con un piccolo rimbalzo; quelli che entrano
   insieme si sfasano (il ritardo lo mette lo script). Al passaggio — o al TOCCO, sul
   telefono, per 0,7 s (`is-toccato`: `:active` dura quanto la pressione) — il tondo si alza con un'ombra e l'icona dondola. Le classi le mette lo script
   della pagina: senza JS, e con «riduci movimento», i blocchi sono fermi e visibili. */
.lcn-tondo { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; }
.lcn-ben:hover .lcn-tondo, .lcn-ben.is-toccato .lcn-tondo { transform: translateY(-6px) scale(1.06); box-shadow: 0 16px 30px -12px rgba(170, 0, 82, .55); }
.lcn-ben:hover .lcn-tondo .lcn-fa, .lcn-ben.is-toccato .lcn-tondo .lcn-fa { animation: lcn-dondola .6s ease-in-out; }
@keyframes lcn-dondola { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }
.lcn-quattro.is-animabile .lcn-ben { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--ritardo, 0s); }
.lcn-quattro.is-animabile .lcn-ben:not(.is-visto) .lcn-tondo { transform: scale(.55); }
.lcn-quattro.is-animabile .lcn-ben.is-visto { opacity: 1; transform: none; }
.lcn-quattro.is-animabile .lcn-ben.is-visto .lcn-tondo { transition-delay: calc(var(--ritardo, 0s) + .15s); }
.lcn-quattro.is-animabile .lcn-ben.is-visto:hover .lcn-tondo, .lcn-quattro.is-animabile .lcn-ben.is-visto.is-toccato .lcn-tondo { transition-delay: 0s; }
.lcn-ben h3 { margin-top: 6px !important; font-size: 19px; }
.lcn-ben p { font-size: 13.5px; font-weight: 400; line-height: 1.5; }
@media (min-width: 900px) {
  .lcn-quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .lcn-tondo { width: 106px; height: 106px; font-size: 36px; }
  .lcn-ben h3 { font-size: clamp(22px, 1.6vw + 8px, 36px); }
  .lcn-ben p { font-size: 16px; }
  .lcn-benefits { padding: 64px 0 80px; }
}

@media (min-width: 640px) {
  .lcn-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcn-altri-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .lcn-filtri { grid-template-columns: repeat(3, 220px); }
  .lcn-filtri .lcn-filtro:last-of-type:nth-of-type(odd) { grid-column: auto; }
  .lcn-spontanea { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; }
  .lcn-fatti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lcn-fatti div.is-largo { grid-column: auto / span 2; }
  .lcn-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcn-campo.is-largo { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .lcn-eroe { background-image: url('/static/img/sito/magazzino-1920.jpg'); }
  .lcn-eroe-dentro { padding-top: 120px; padding-bottom: 110px; gap: 18px; }
  .lcn-passi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .lcn-come { padding: 72px 0 80px; }
}
@media (min-width: 1024px) {
  .lcn-contenitore { padding-inline: 32px; }
  .lcn-barra { display: none; }
  .lcn-corpo.lcn-barra-su .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float][data-tp-float="bottom-right"] { bottom: 0 !important; }
  .lcn-posizioni { padding: 72px 0 80px; }
  .lcn-posizioni > .lcn-contenitore { gap: 26px; }
  .lcn-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .lcn-ann-testa { padding: 36px 0 44px; }
  .lcn-dettaglio { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "testo modulo" "altri modulo"; column-gap: 56px; padding-top: 44px; padding-bottom: 80px; }
  .lcn-modulo-posto { align-self: start; position: sticky; top: 104px; }
  .lcn-modulo { padding: 26px 26px 28px; box-shadow: 0 18px 40px -24px rgba(40, 45, 40, .18); }
  .lcn-modulo .lcn-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .lcn-tondo, .lcn-quattro.is-animabile .lcn-ben { transition: none; }
  .lcn-ben:hover .lcn-tondo, .lcn-ben.is-toccato .lcn-tondo { transform: none; }
  .lcn-ben:hover .lcn-tondo .lcn-fa, .lcn-ben.is-toccato .lcn-tondo .lcn-fa { animation: none; }
  .lcn-h-logo, .lcn-h-nav, .lcn-h-bottone { animation: none; }
  .lcn-card, .lcn-barra, .lcn-bottone, .lcn-h-bottone, .lcn-fa { transition: none; }
  .lcn-card:hover { transform: none; }
}

/* ── Recruiting — la pagina del CELLULARE (04/10/2026) ───────────────────────────────
   Famiglia `rkm-`. Si apre dal QR del pannello della candidatura e vive su un telefono:
   a tutto schermo (`100dvh`), le aree sicure (tacca, barra in basso) con
   `env(safe-area-inset-*)`, bottoni alti 52px per il pollice, testo a 16px (sotto, iOS
   ingrandisce la pagina). Quattro schermate: elenco, scatto (nero, a tutto schermo, il
   mirino con gli angoli e il resto scurito), controllo, fatto. Solo token di piattaforma. */
.rkm-corpo { margin: 0; background: var(--gray-50); color: var(--gray-800); min-height: 100dvh; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
.rkm { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.rkm-schermo { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }
.rkm-testa { background: white; border-bottom: 1px solid var(--gray-200); padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; }
.rkm-marchio { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-500); }
.rkm-marchio-ico { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; }
.rkm-chi { margin-top: 10px; font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--gray-900); overflow-wrap: anywhere; }
.rkm-sotto { margin-top: 2px; font-size: 14px; color: var(--gray-500); }
.rkm-scade { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); background: var(--accent-tint); padding: 5px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.rkm-scade.is-poco { color: var(--destructive); background: var(--destructive-tint); }
.rkm-lista { flex: 1; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 10px; }
.rkm-voce { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; text-align: left; background: white; border: 1px solid var(--gray-200); border-radius: 16px; padding: 12px 14px; color: var(--gray-800); -webkit-tap-highlight-color: transparent; transition: transform .08s, background .08s; }
.rkm-voce:active { background: var(--gray-50); transform: scale(.99); }
.rkm-voce-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--gray-100); color: var(--gray-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rkm-voce-testo { flex: 1; min-width: 0; }
.rkm-voce-testo b { display: block; font-size: 16px; line-height: 1.3; font-weight: 600; }
.rkm-voce-testo span { display: block; font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.rkm-voce-fine { color: var(--gray-400); flex-shrink: 0; }
.rkm-voce.is-fatta .rkm-voce-ico { background: var(--accent-tint); color: var(--accent); }
.rkm-voce.is-fatta .rkm-voce-testo span, .rkm-voce.is-fatta .rkm-voce-fine { color: var(--accent); }
.rkm-vuoto { text-align: center; color: var(--gray-500); font-size: 14px; padding: 24px; }
.rkm-etichetta { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500); margin-top: 4px; }

/* lo scatto: nero, sopra tutto */
.rkm-camera { position: fixed; inset: 0; z-index: 30; background: black; color: white; min-height: 0; }
.rkm-mirino { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rkm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rkm-angoli { position: absolute; left: 7%; right: 7%; top: 50%; transform: translateY(-50%); aspect-ratio: 1.58; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38); pointer-events: none; }
/* Un FOGLIO (IBAN, attestati, passaporto): il riquadro parte dall'ALTEZZA libera del mirino
   (sotto la barra, sopra la scritta) e la larghezza viene dalle proporzioni dell'A4; su un
   telefono molto alto si ferma ai bordi (utente, 04/10/2026: «troppo piccolo»; era il 49%
   del mirino, a 70% della larghezza). */
.rkm-angoli.is-foglio { top: calc(72px + env(safe-area-inset-top, 0px)); bottom: 44px; left: 50%; right: auto; width: auto;
                        max-width: calc(100% - 24px); aspect-ratio: .71; transform: translateX(-50%); }
.rkm-angoli span { position: absolute; width: 34px; height: 34px; border: 0 solid white; }
.rkm-angoli span:nth-child(1) { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 14px; }
.rkm-angoli span:nth-child(2) { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 14px; }
.rkm-angoli span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 14px; }
.rkm-angoli span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 14px; }
.rkm-cam-sopra { position: absolute; top: 0; left: 0; right: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rkm-tondo { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rkm-tondo.is-vuoto { background: transparent; }
.rkm-cam-etichetta { font-size: 14px; font-weight: 600; background: rgba(0, 0, 0, .55); padding: 8px 14px; border-radius: 999px; text-align: center; }
.rkm-cam-aiuto { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 14px; color: white; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.rkm-senza-camera { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 32px; color: var(--gray-300); }
.rkm-senza-camera p { font-size: 15px; line-height: 1.5; margin: 0; }
.rkm-comandi { flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px)); background: black; }
.rkm-scatto { width: 76px; height: 76px; border-radius: 50%; border: 5px solid white; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; }
.rkm-scatto::after { content: ''; width: 58px; height: 58px; border-radius: 50%; background: white; transition: transform .08s; }
.rkm-scatto:active::after { transform: scale(.86); }
.rkm-scatto:disabled { opacity: .4; }
.rkm-mini { position: relative; width: 52px; height: 52px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .14); color: white; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rkm-mini.is-foto { border: 2px solid white; }
.rkm-mini img { width: 100%; height: 100%; object-fit: cover; }
.rkm-mini-n { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: white; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rkm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 14px; font-size: 16px; font-weight: 600; }
.rkm-btn.is-primario { background: var(--accent); color: white; }

/* il controllo */
.rkm-pagine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rkm-pag { position: relative; background: white; border: 1px solid var(--gray-200); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gray-600); }
.rkm-pag img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--gray-100); }
.rkm-pag-togli { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: white; display: flex; align-items: center; justify-content: center; }
.rkm-pag.is-nuova { align-items: center; justify-content: center; min-height: 128px; border-style: dashed; color: var(--accent); font-weight: 600; font-size: 14px; }
.rkm-file { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--gray-200); border-radius: 14px; padding: 12px 14px; }
.rkm-file code { font-size: 13px; color: var(--gray-800); overflow-wrap: anywhere; }
.rkm-file-pdf { flex-shrink: 0; font-size: 10px; font-weight: 700; color: white; background: var(--destructive); border-radius: 4px; padding: 3px 5px; }
.rkm-errore { color: var(--destructive); font-size: 14px; margin: 0; }
.rkm-piede { position: sticky; bottom: 0; background: white; border-top: 1px solid var(--gray-200); padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.rkm-btn-grande { width: 100%; min-height: 52px; font-size: 16px; border-radius: 14px; justify-content: center; }

/* scaduto e fatto */
.rkm-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 32px 28px; }
.rkm-cresce { flex: 1; }
.rkm-cerchio { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.rkm-cerchio.is-spento { background: var(--gray-100); color: var(--gray-500); }
.rkm-titolo { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.rkm-testo { font-size: 15px; line-height: 1.5; color: var(--gray-500); margin: 0; }
.rkm-testo code { font-size: 13px; color: var(--gray-800); overflow-wrap: anywhere; }

/* ── Recruiting — il TEST DI ITALIANO del candidato (`recruiting/test_lingua.html`) ──────────
   Famiglia `rkt-`, sopra lo scheletro della pagina del cellulare (`rkm-`): a tutto schermo,
   aree sicure, una domanda per schermata, risposte grandi da pollice (utente, 09/10/2026:
   «ultra mobile e responsive»). I cartelli usano i colori della norma (`--cartello-*`), e
   solo qui. */
.rkt-punti { list-style: none; margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.rkt-punti li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--gray-700); }
.rkt-punti li span:first-child { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.rkt-avviso { margin: 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--gray-100); font-size: 14px; line-height: 1.45; color: var(--gray-600); display: flex; gap: 10px; }
.rkt-avviso span:first-child { flex-shrink: 0; color: var(--accent); }
.rkt-avviso.is-errore { background: var(--destructive-tint); color: var(--destructive); }
.rkt-avviso.is-errore span:first-child { color: var(--destructive); }
.rkt-avanzamento { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rkt-conto { font-size: 14px; font-weight: 600; color: var(--gray-700); }
.rkt-barra { margin-top: 10px; height: 6px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.rkt-barra > div { height: 100%; border-radius: 999px; background: var(--accent); transition: width .2s; }
.rkt-corpo { flex: 1; padding: 20px 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.rkt-tipo { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-400); }
.rkt-domanda { font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--gray-900); overflow-wrap: anywhere; text-wrap: balance; }
.rkt-risposte { display: flex; flex-direction: column; gap: 10px; }
.rkt-risposta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--gray-200); background: white; font-size: 17px; line-height: 1.3; text-align: left; color: var(--gray-800); -webkit-tap-highlight-color: transparent; }
.rkt-risposta:active { background: var(--gray-50); }
.rkt-risposta.is-scelta { border-color: var(--accent); background: var(--accent-tint); color: var(--gray-900); font-weight: 600; }
.rkt-lettera { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gray-300); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--gray-500); }
.rkt-risposta.is-scelta .rkt-lettera { border-color: var(--accent); background: var(--accent); color: white; }
.rkt-messaggio { align-self: flex-start; max-width: 92%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: white; border: 1px solid var(--gray-200); font-size: 16px; line-height: 1.45; color: var(--gray-800); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.rkt-messaggio small { display: block; font-size: 12px; color: var(--gray-400); margin-bottom: 4px; }
.rkt-cartello { align-self: center; display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 14px 18px; border-radius: 10px; font-size: 18px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; color: white; }
.rkt-cartello span:first-child { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; }
.rkt-cartello.is-rosso { background: var(--cartello-divieto); }
.rkt-cartello.is-rosso span:first-child { color: var(--cartello-divieto); }
.rkt-cartello.is-blu { background: var(--cartello-obbligo); }
.rkt-cartello.is-blu span:first-child { color: var(--cartello-obbligo); }
.rkt-cartello.is-verde { background: var(--cartello-salvataggio); }
.rkt-cartello.is-verde span:first-child { color: var(--cartello-salvataggio); }
.rkt-cartello.is-giallo { background: var(--cartello-pericolo); color: var(--cartello-nero); border: 3px solid var(--cartello-nero); }
.rkt-cartello.is-giallo span:first-child { background: var(--cartello-nero); color: var(--cartello-pericolo); }
.rkt-informativa { margin: 0 18px 16px; padding: 14px; border-radius: 12px; background: white; border: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--gray-600); }
.rkt-informativa p { margin: 0; }
.rkt-informativa a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.rkt-spunta { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--gray-800); font-weight: 600; }
.rkt-spunta input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.rkt-comandi { display: flex; gap: 10px; }
.rkt-comandi > * { flex: 1; }
.rkt-griglia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0 18px; }
.rkt-pallino { height: 44px; border-radius: 10px; border: 2px solid var(--gray-200); background: white; font-size: 15px; font-weight: 600; color: var(--gray-500); }
.rkt-pallino.is-data { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
@media (min-width: 640px) {
  .rkt-corpo { padding: 28px 28px 32px; }
  .rkt-domanda { font-size: 24px; }
}