/* Copia di DESIGN-SYSTEM-STRUMENTI-ONLINE/ingresso/ingresso.css, commit 6c763ea, 27/10/2026. Non si modifica qui: le correzioni si fanno nel DS. */
/* ORIGINE: copia di CONTATTI FIERA/semplice/ingresso/ingresso.css, presa il 27/10/2026 (la scena dell'8/10, approvata da Federico).
   Differenze dall'originale, tutte per il DS: 1) .kin-pagina scorre (overflow-y:auto) perché il modulo deve restare raggiungibile con la
   tastiera aperta, il telefono in orizzontale e il QR (audit 3.5); 2) da 1000 px il lato dei campi è centrato «safe» (se è più alto della
   finestra parte dall'alto e scorre; 16 px sopra e sotto, uguali, così il centro non cambia e il titolo non tocca il logo); 3) in fondo, i pezzi dei 14 passaggi approvati il 27/10
   (campo con filo, tasto 56, uscita, lingua, errore, QR, postazioni), prima nel <style> di vetrina-accesso-scena.html. Le correzioni si fanno QUI e poi si ricopiano nelle app. */
/* ingresso.css — SCHERMATA DI ACCESSO delle app SELPRO (ingresso/ingresso.js). Base per tutte le app (Federico, 8/10/2026):
   lo stesso fondo della pagina di collegamento della super app KLNK: blu SELPRO, una sola griglia di punti su tutto lo schermo
   (canvas, ingresso/matrice.js) e il simbolo SELPRO animato. Telefono e tablet: logo animato sopra, campi sotto.
   Schermo grande (da 1000 px): campi da un lato, logo animato dall'altro.
   Come nella super app, SOLO su questa pagina sono ammessi #00294C, #ffffff, #b23b2e, #03FFB3 e bianco in trasparenza.
   Si appoggia al contenitore «app» del design system (container query), prefisso delle classi: kin-. */
.kin{--m:20px; --lh:34px; position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden;
  background:#00294C; color:#ffffff; font-size:16px; line-height:1.3}
.kin :focus-visible{outline:3px solid #ffffff; outline-offset:3px}
.kin-matrice{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none}
.kin-pagina{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  padding:calc(max(16px, env(safe-area-inset-top)) + 8px) max(var(--m), env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(var(--m), env(safe-area-inset-left))}
.kin-testa{flex:none; display:flex; justify-content:center; height:var(--lh)}
.kin-logo{display:block; height:var(--lh); width:auto; color:#ffffff}
/* la scena: qui il motore disegna il simbolo animato; sotto il simbolo l'esito (una riga forte e una leggera), messo dal motore */
.kin-scena{flex:1 1 0; min-height:0; position:relative}
.kin-posto{position:absolute; top:12px; left:50%; width:1px; height:24px; pointer-events:none}
.kin-esito{position:absolute; left:0; right:0; top:60%; max-width:320px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center}
.kin-esito:empty{display:none}
.kin-esito b{font-size:16px; font-weight:700; line-height:21px}
.kin-esito span{font-size:13px; line-height:18px; margin-top:4px; color:rgba(255,255,255,.8)}
/* il lato dei campi: nome dell'app, una riga che dice cosa fare, il modulo */
.kin-lato{flex:none; width:100%; max-width:460px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.kin-titolo{margin:0; font-size:22px; font-weight:800; line-height:1.2}
.kin-testo{margin:0; font-size:15px; line-height:1.4; color:rgba(255,255,255,.85); overflow-wrap:anywhere}
.kin-testo:empty{display:none}
.kin-modulo, .kin-form{display:flex; flex-direction:column; gap:12px}
.kin-modulo{margin-top:6px}
.kin-campo{display:flex; flex-direction:column; gap:6px}
.kin-campo label{font-size:13px; font-weight:700; line-height:18px; color:rgba(255,255,255,.85)}
.kin-campo input{width:100%; min-width:0; height:52px; padding:0 16px; border-radius:14px; border:1.5px solid rgba(255,255,255,.45);
  background:#ffffff; color:#00294C; font-family:inherit; font-size:17px; font-weight:600; -webkit-appearance:none; appearance:none}
.kin-aiuto{margin:0; font-size:13px; line-height:18px; color:rgba(255,255,255,.7)}
.kin-errore{margin:0; padding:10px 14px; border-radius:14px; border:1.5px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12);
  font-size:14px; font-weight:700; line-height:19px}
.kin-errore:empty{display:none}
.kin-azioni{display:flex; flex-direction:column; gap:12px}
.kin-tasto{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; padding:0 20px; border-radius:999px;
  font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.kin-primo{background:#ffffff; color:#00294C; border:0}
.kin-secondo{background:transparent; color:#ffffff; border:1.5px solid rgba(255,255,255,.45)}
.kin-tasto:disabled{opacity:.45; cursor:default}
/* telefono e tablet, mentre si scrive: la tastiera copre metà schermo, quindi il logo animato lascia il posto e i campi salgono in cima */
@container app (max-width:999px){
  .kin-scrive .kin-scena{flex:0 0 20px}
  .kin-scrive .kin-esito{display:none}
}
/* modulo ALTO (27/10/2026, g.alto(true) in ingresso.js): quando il modulo da solo riempie lo schermo del telefono (QR con chiave e codice) il simbolo non ha
   posto e non si vede, ma la sua area resta come spazio vuoto fra logo e titolo. Qui l'area si riduce a 24 px sotto il logo; il titolo sale subito dopo.
   L'esito (una riga forte e una leggera) non galleggia più sul simbolo: sta nel flusso, sotto quei 24 px, e c'è solo mentre c'è l'esito. Da 1000 px niente cambia. */
@container app (max-width:999px){
  .kin--alto .kin-scena{flex:none; min-height:24px}
  .kin--alto .kin-esito{position:static; margin:8px auto 16px}
}
@container app (min-width:700px){
  .kin{--lh:42px}
  .kin-titolo{font-size:22px}
}
/* schermo grande: campi a sinistra, logo animato a destra; il logo SELPRO in alto sopra i campi */
@container app (min-width:1000px){
  .kin{--m:max(32px, 5vw)}
  .kin-pagina{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); column-gap:var(--m)}
  .kin-testa{grid-column:1 / -1; justify-content:flex-start}
  .kin-lato{grid-column:1; grid-row:2; align-self:center; align-self:safe center; justify-self:center; margin:16px 0; max-width:420px; padding-bottom:var(--lh)}
  .kin-scena{grid-column:2; grid-row:2}
}

/* ===== PEZZI APPROVATI DA FEDERICO il 27/10/2026 DENTRO LA SCENA (14 passaggi, vetrina-accesso-scena.html). Prima stavano nel <style> della vetrina.
   Si appoggiano ai componenti di klnk-ui.css (.campo, .campo-riga, .btn-su-scuro, .ad-errore, .accesso-uscita, .lingua-tasto--scuro, .elenco-scelte) e ai token del DS. ===== */
/* lingua: il tasto del 27/10 in alto a destra, alla stessa altezza del logo (KLNK.Lingua.collega); l'elenco si apre sotto il tasto */
.kin-testa{position:relative; z-index:2}   /* l'elenco aperto sta sopra la scena e i campi, che vengono dopo */
.kin-testa .kin-lingua{position:absolute; right:0; top:50%; transform:translateY(-50%)}
.kin-lingua > .lingua-elenco{position:absolute; right:0; top:calc(100% + 8px); z-index:30; background:var(--surface); color:var(--ink)}
/* campo con filo: l'etichetta è quella della scena (bianca sul navy), il campo è il .campo del DS (52, filo --filo-chiaro, testo 17, su fondo bianco) */
.kin-campo .campo{border-color:var(--filo-chiaro); color:var(--ink); font-weight:400}
.kin-campo .campo.campo--codice{font-weight:700; font-variant-numeric:tabular-nums}
.kin-campo .campo.campo--errato{border-color:var(--bad)}
.kin-campo .ad-errore{margin:2px 0 0}
/* nella scena il fuoco resta l'anello bianco di .kin :focus-visible (sul navy il filo navy non si vedrebbe): il campo non prende il filo navy da 2 px del DS */
.kin .campo:focus{border-color:var(--filo-chiaro); box-shadow:none}
.kin .campo:is(.campo--errato,[aria-invalid="true"]):focus{border-color:var(--bad)}
.kin-campo .campo[readonly]{background:var(--surface); user-select:all; -webkit-user-select:all; text-overflow:ellipsis}   /* chiave da copiare: resta bianca come gli altri campi */
.kin-form > .ad-errore{margin:0}   /* avviso di rete / servizio: senza campo sopra */
/* un solo tasto: 56, bianco con testo navy (tinta «su fondo navy» del 27/10) */
.kin-form .btn-su-scuro{width:100%; margin-top:4px}
/* uscita: collegamento da 44; sul navy il testo è bianco (nel DS è navy perché sta sulla scheda bianca) */
.kin .accesso-uscita{margin-top:0; color:rgba(255,255,255,.85)}
.kin .accesso-uscita a,.kin .accesso-uscita a:hover,.kin .accesso-uscita a:active{color:#fff}
@media (hover:hover){.kin .accesso-uscita a:hover{text-decoration-thickness:2px}}
.kin .accesso-uscita a:focus-visible{outline-color:#fff}
/* QR del secondo passaggio: 190 su fondo bianco con il margine del codice (4 moduli) più 8 di bordo bianco */
.kin-qr{align-self:center; flex:none; width:206px; height:206px; padding:8px; border-radius:var(--r-ctrl); background:var(--surface); line-height:0}
.kin-qr svg{display:block; width:190px; height:190px}
/* postazioni esaurite: righe da 56 (nome, ultimo uso: due righe di testo, l'anello del fuoco a 4 px non deve toccarle; 27/10/2026) con il cerchio di scelta a destra (.elenco-scelte / .riga-scelta, variante C) */
.kin-posti{color:var(--ink)}
.kin-posti .riga-scelta{height:56px; min-height:56px; padding:0 12px 0 16px}
.kin-posti .et{min-width:0; flex:1}
.kin-posti .et b{font-size:var(--fs15); font-weight:700; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kin-posti .et span{font-size:var(--fs12); font-weight:400; line-height:15px; color:var(--muted)}