/* Copia di DESIGN-SYSTEM-STRUMENTI-ONLINE/klnk-pannelli.css, commit b31589b, 28/10/2026. Non si modifica qui: le correzioni si fanno nel DS. */ /* KLNK — componenti dei PANNELLI degli strumenti online (admin.selpro.app e chi verrà): i 13 componenti APPROVATI da Federico il 24/10/2026 sulla vetrina https://claude.ai/artifact/4s2WrCFaSwsAfLdXmeLH3H (copia ferma: vetrina-pannelli.html). ORIGINE: ADMIN CLIENTI/web/admin.css, commit 1a95d5f (24/10/2026). Tolte solo le parti proprie di quel pannello (codice della licenza appena creata, pagina di accesso, firmware e scelta del file, avvisi di «Le tue app»). Regole e mappa dei componenti: KLNK-DS.md, sezione «Componenti dei pannelli». Si carica DOPO klnk-ui.css e klnk-stati.css. Prefisso ad-. Solo le variabili di klnk-ui.css (nessun colore scritto qui), piatto, niente ombre. Dimensioni del testo: 32 (titolo e numeri), 17, 15, 13. Misure decise da @container app, come nella super app. Chi lo usa lo COPIA con un commento d'origine (regola dei componenti uguali, Federico 18/10): le correzioni si fanno QUI e poi si ricopiano. */ html,body{height:100%} .app{height:100vh; height:100dvh} /* klnk-ui.css, da 700 px, fa del .schermo una colonna che non scorre (serve ai Parametri): qui la pagina scorre dentro #schermo */ #schermo{display:block; height:100%; overflow-y:auto; overflow-x:hidden} .ad-sprite{position:absolute; width:0; height:0} a{color:inherit} a:focus-visible,select:focus-visible,textarea:focus-visible,.ad-riga:focus-visible{outline:2.5px solid var(--navy); outline-offset:2px} .ad-riga:focus-visible{outline-offset:-4px} /* anello DENTRO la riga a 4 px dal bordo; sulla prima e sull'ultima riga il raggio segue quello della card (concentrico, vedi sotto) */ .card > .ad-riga:first-child{border-radius:var(--r-card) var(--r-card) 0 0} .card > .ad-riga:last-child{border-radius:0 0 var(--r-card) var(--r-card)} .card > .ad-riga:only-child{border-radius:var(--r-card)} :root{--freccia-giu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} /* ---- colonna comune: testata, pagina e barra fissa hanno gli stessi bordi (16 / 24 / 32 px, larghezza massima --pagina-max) ---- */ .ad-in{max-width:var(--pagina-max); margin:0 auto; padding:0 16px} @container app (min-width:700px){ .ad-in{padding:0 24px} } @container app (min-width:1100px){ .ad-in{padding:0 32px} } .ad-pagina{display:grid; gap:24px; max-width:var(--pagina-max); margin:0 auto; padding:24px 16px calc(24px + env(safe-area-inset-bottom))} .app.con-barra .ad-pagina{padding-bottom:calc(112px + env(safe-area-inset-bottom))} /* lo spazio per la barra fissa solo quando la barra c'è */ @container app (min-width:700px){ .ad-pagina{padding-left:24px; padding-right:24px; padding-top:32px} } @container app (min-width:1100px){ .ad-pagina{padding-left:32px; padding-right:32px} } #contenuto{display:flex; flex-direction:column; gap:24px; min-width:0} #contenuto > section{min-width:0} /* ---- testata fissa: una riga con marchio, area e voci a sinistra, utente SEMPRE a destra; componente 1 aggiornato il 25/10/2026: menu a due livelli, proposta B, riga di menu forma 1 (KLNK-DS.md) ---- */ .ad-testata{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line)} .ad-testata-riga{display:flex; align-items:center; gap:14px; min-height:64px} /* una riga sola: marchio · tasto dell'area · voci · utente */ .ad-marchio{display:flex; align-items:center; gap:14px; min-width:0; text-decoration:none; color:var(--navy); border-radius:var(--r-ctrl)} .ad-testata-riga .ad-marchio{flex:none} /* nella riga il marchio è il solo logo */ .ad-logo{display:block; flex:none; color:var(--navy)} .ad-logo--bianco{color:var(--surface)} .ad-marchio-titolo{font-size:var(--fs17); font-weight:800; color:var(--navy); white-space:nowrap} .ad-utente{display:flex; align-items:center; gap:12px; min-width:0} .ad-sigla{flex:none; width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--surface); transition:background-color .15s; display:flex; align-items:center; justify-content:center; font-size:var(--fs13); font-weight:800} .ad-utente-link{display:flex; align-items:center; gap:12px; min-width:0; color:inherit; text-decoration:none; border-radius:12px} /* cerchio e nome = «Il mio account» */ .ad-r-ruoli{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px} .ad-utente-testo{display:flex; flex-direction:column; min-width:0; line-height:1.25} .ad-utente-testo b{font-size:var(--fs13); font-weight:700; color:var(--ink); overflow-wrap:anywhere} .ad-utente-testo span{font-size:var(--fs13); color:var(--muted)} @container app (max-width:699px){ .ad-utente-testo{display:none} .ad-marchio-titolo{font-size:var(--fs15)} } /* telefono: la testata è una riga sola (marchio · area · Menu · cerchio); le voci, le altre aree e «Esci» stanno nel pannello dal basso; da PC «Esci» sta in «Il mio account» */ .ad-destra{display:flex; align-items:center; gap:12px; min-width:0} .ad-menu-tel{display:none} /* barra unica approvata da Federico il 27/10/2026 (CERVELLO/Linee-guida/Componenti-comuni-app-online.md): logo alto 19 come nelle altre app, testata 72 da 1000 px; al telefono «Menu» è il tasto compatto da 44 (testo 15), più forte di .ad-piccolo */ .ad-testata .ad-logo{width:43px; height:19px} @container app (min-width:1000px){ .ad-testata-riga{min-height:72px} } @container app (max-width:699px){ .ad-testata .btn-secondario.ad-menu-tel{height:var(--btn-m); min-height:var(--btn-m); font-size:var(--fs15)} } @container app (max-width:699px){ .btn-secondario.ad-menu-tel{display:inline-flex; align-items:center; justify-content:center; min-width:76px; height:var(--btn-m); min-height:var(--btn-m); flex:none; padding:0 16px; font-size:var(--fs13)} .ad-marchio{min-height:44px} } /* tastiera del telefono (--kb da app.js): il pannello dal basso le sta sopra e si accorcia (il corpo scorre); da 700 px la finestra centrata resta sopra */ .foglio{max-height:min(calc(100% - 32px - var(--kb,0px)), calc(var(--vvh,100dvh) - 32px))} /* --vvh: con la tastiera aperta, il pannello non sale oltre la parte visibile */ @container app (min-width:700px){ .velo{padding-bottom:calc(24px + var(--kb,0px))} } /* ---- MENU A DUE LIVELLI (componente 1 aggiornato il 25/10/2026: proposta B, riga di menu forma 1, KLNK-DS.md; prototipo docs/menu-due-livelli/) ---- una riga: marchio · tasto col nome dell'area (apre l'elenco delle aree) · lineetta · voci dell'area · utente a destra ---- */ .ad-area-btn{display:inline-flex; align-items:center; gap:8px; height:var(--btn-m); padding:0 12px 0 14px; border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--surface); font-size:var(--fs17); font-weight:800; color:var(--navy); text-align:left; line-height:1.15; flex:none; white-space:nowrap} /* da PC su una riga: non si stringe (misura del 25/10 a 1280 px) */ .ad-area-btn svg{flex:none; color:var(--muted); transition:transform .15s} .ad-area-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .ad-area-btn:disabled{border-color:transparent; padding:0; cursor:default; opacity:1} @media (hover:hover){ .ad-area-btn:not(:disabled):hover{background:var(--chip)} } .ad-area-btn:not(:disabled):active{background:var(--chip)} .ad-sep-v{flex:none; width:1px; height:24px; background:var(--line)} .ad-voci{display:flex; align-items:center; gap:4px; min-width:0} .ad-testata-riga .ad-destra{margin-left:auto; flex:none} .ad-aree-lista{position:absolute; z-index:70; width:340px} /* l'elenco delle aree, in sovraimpressione sotto il tasto (da 700 px) */ .ad-aree-lista .ad-rmenu{box-shadow:0 1px 2px rgba(16,33,52,.06)} .ad-voce{display:inline-flex; align-items:center; gap:8px; flex:none; height:var(--btn-s); padding:0 14px; border-radius:var(--r-pill); font-size:var(--fs15); font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; transition:background .12s} /* dieci voci (super amministratore, con Firmware) a 1024 px: un po' meno aria dentro le voci, così stanno su una riga */ @media (max-width:1120px){ .ad-voci{gap:2px} .ad-voce{padding:0 10px} } @media (hover:hover){ .ad-voce:not(.attiva):hover{background:var(--chip)} } .ad-voce.attiva{background:var(--navy); color:var(--surface)} /* numero da guardare (da approvare, segnalazioni): accanto al nome dell'area o della voce; lo zero è calmo */ .ad-conta{display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:20px; padding:0 6px; border-radius:var(--r-pill); font-size:var(--fs12); font-weight:700; font-variant-numeric:tabular-nums; background:var(--warnbg); color:var(--warn)} .ad-conta--calmo{background:var(--chip); color:var(--muted)} .ad-voce.attiva .ad-conta{background:var(--surface); color:var(--navy)} .ad-foglio-tit{font-size:var(--fs13); font-weight:700; color:var(--muted); margin:16px 4px 6px} /* «Altre aree» nel pannello dal basso */ .presa-foglio{padding-top:0} /* RIGA DI MENU, forma 1 (Federico 25/10/2026): elenco con le linee fra le righe; la riga aperta è un riquadro navy rientrato di 4 px, angoli concentrici all'elenco. Porta a una pagina e ha la freccia; la aperta non ha freccia; un'azione (Esci) non ha freccia. Mai testo nudo, mai la spunta */ .ad-rmenu{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-ctrl); background:var(--surface); overflow:hidden} .ad-rm{display:block; width:100%; padding:4px; text-align:left; color:var(--ink); text-decoration:none} .ad-rm + .ad-rm{border-top:1px solid var(--line)} .ad-rm-in{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:6px 8px 6px 12px; border-radius:calc(var(--r-ctrl) - 4px); transition:background-color .15s,color .15s} .ad-rm-testo{display:flex; flex-direction:column; gap:2px; min-width:0} .ad-rm-testo b{font-size:var(--fs15); font-weight:700; display:flex; align-items:center; gap:8px} .ad-rm-testo > span{font-size:var(--fs13); color:var(--muted)} .ad-rm svg{flex:none; color:var(--muted)} @media (hover:hover){ .ad-rm:not([aria-current]):hover .ad-rm-in{background:var(--chip)} } .ad-rm:not([aria-current]):active .ad-rm-in{background:var(--chip)} .ad-rm[aria-current] .ad-rm-in{background:var(--navy); color:var(--surface)} .ad-rm[aria-current] .ad-rm-testo > span{color:color-mix(in srgb, var(--surface) 78%, var(--navy))} .ad-rm[aria-current] .ad-conta{background:var(--surface); color:var(--navy)} .ad-rm:focus-visible{outline:none} .ad-rm:focus-visible .ad-rm-in{outline:2.5px solid var(--navy); outline-offset:0} /* nome e ruolo accanto al cerchio solo se c'è posto: una riga ciascuno, al massimo 200 px (la mail lunga si accorcia coi puntini; il nome intero è nella pagina dell'account). Soglia misurata il 25/10: a 1280 px, 7 voci delle licenze + tasto dell'area + utente = 1264 px su 1280 */ .ad-testata-riga .ad-utente-testo{max-width:200px} .ad-testata-riga .ad-utente-testo :is(b,span){white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal} @container app (max-width:1279px){ .ad-testata-riga .ad-utente-testo{display:none} } /* con il .btn-indietro nella testata la riga è più piena: la soglia del nome sale a 1400 (misurato dall'admin: a 1280 restano 196 px liberi, a 1400 col nome 104) */ @container app (max-width:1399px){ .ad-testata-riga:has(.btn-indietro) .ad-utente-testo{display:none} } @container app (max-width:699px){ .ad-voci,.ad-testata-riga > .ad-sep-v{display:none} .ad-testata-riga{gap:10px} .ad-area-btn{font-size:var(--fs15); height:auto; min-height:var(--btn-m); padding:3px 10px 3px 12px; flex:0 1 auto; white-space:normal} .ad-testata-riga .ad-destra{gap:8px} } /* ---- testo della pagina: indietro, titolo (il solo H1), riga di sotto, stato e celle dei dati principali ---- */ .ad-pag-testa{display:flex; flex-direction:column; gap:12px; min-width:0} .ad-link{align-self:flex-start; display:inline-flex; align-items:center; min-height:36px; font-size:var(--fs15); font-weight:700; color:var(--navy); text-decoration:underline} /* un collegamento nel testo: si riconosce anche fermo */ @media (hover:hover){ .ad-link:hover{text-decoration-thickness:2px} } .ad-pag-riga{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 16px} .ad-pag-testo{min-width:0; flex:1 1 320px} .ad-pag-testo h1{font-size:var(--fs22); font-weight:800; line-height:1.15; color:var(--navy); overflow-wrap:anywhere} .ad-pag-sotto{font-size:var(--fs15); color:var(--muted); margin-top:6px} .ad-pag-coda{flex:none} @container app (min-width:700px){ .ad-pag-testo h1{font-size:var(--fs32)} } .ad-celle{display:flex; gap:1px; max-width:100%; width:fit-content; border:1px solid var(--line); border-radius:var(--r-ctrl); overflow:hidden; background:var(--line)} .ad-cella{display:flex; flex-direction:column; gap:2px; min-width:0; padding:10px 18px; background:var(--surface)} .ad-cella-val{font-size:var(--fs17); font-weight:800; line-height:1.15; color:var(--navy); overflow-wrap:anywhere} .ad-cella-eti{font-size:var(--fs13); color:var(--muted)} /* ---- etichette di stato, avvisi, stati vuoti ---- */ .ad-tag{display:inline-flex; align-items:center; font-size:var(--fs13); font-weight:700; border-radius:var(--r-pill); padding:3px 10px; background:var(--chip); color:var(--muted); white-space:nowrap} .ad-tag--ok{background:var(--okbg); color:var(--ok)} .ad-tag--warn{background:var(--warnbg); color:var(--warn)} .ad-tag--bad{background:var(--badbg); color:var(--bad)} .ad-tag--info{background:var(--infobg); color:var(--info)} .riep-avviso--info{background:var(--infobg); color:var(--info); margin:0} /* avviso del DS (klnk-ui.css .riep-avviso) con la tinta info */ .ad-vuoto{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:40px 20px; text-align:center} .ad-vuoto h2{font-size:var(--fs17); font-weight:800; color:var(--navy)} .ad-vuoto p{font-size:var(--fs15); color:var(--muted); margin:6px auto 0; max-width:52ch} .ad-carico{display:flex; flex-direction:column; align-items:center; padding:56px 0; font-size:var(--fs15); color:var(--muted)} .ad-sez-riga{display:flex; align-items:baseline; justify-content:space-between; gap:12px} .ad-sez-riga span:last-child{font-weight:600} /* ---- messaggio breve in basso: sopra la barra fissa, circa 3 secondi ---- */ .ad-msg{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:56; width:max-content; max-width:min(560px, calc(100% - 32px)); background:var(--navy); color:var(--surface); font-size:var(--fs15); font-weight:700; line-height:1.3; text-align:center; padding:12px 20px; border-radius:var(--r-ctrl); border:1.5px solid color-mix(in srgb, var(--surface) 35%, transparent)} /* si vede anche sul fondo navy della pagina di accesso */ .app.con-barra .ad-msg{bottom:calc(92px + env(safe-area-inset-bottom))} .ad-msg--errore{background:var(--badbg); color:var(--bad); border:1.5px solid color-mix(in srgb, var(--bad) 30%, transparent)} /* ---- barra fissa (bordi del DS: klnk-ui.css) e pulsanti ---- */ @container app (min-width:700px) and (max-width:1099px){ .barra-fissa{padding-left:24px; padding-right:24px} } /* stessi bordi della pagina anche fra 700 e 1099 px (da 1100 li dà klnk-ui.css) */ .barra-fissa button{display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap} .btn-enorme:disabled,.btn-secondario:disabled{opacity:.45; cursor:default} .btn-secondario.ad-peric{background:var(--badbg); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent)} .btn-secondario.ad-piccolo{flex:none; height:var(--btn-m); min-height:var(--btn-m); padding:0 14px; font-size:var(--fs15)} /* 44, testo 15: il tasto da 36 non c'è più (27/10/2026) */ .ad-testo-conferma{font-size:var(--fs15); line-height:1.45} .foglio-corpo .ad-errore{margin-top:12px} .ad-campi-fin{display:flex; flex-direction:column; gap:16px; padding-top:4px} /* ---- ricerca e filtri a pillole (la pillola scelta è navy pieno con testo bianco, come i segmenti: Federico 27/10/2026, stato scelto per contesto) ---- */ .ad-filtri{display:flex; flex-direction:column; gap:12px} .ad-filtri .ricerca{margin-bottom:0; max-width:520px} .ad-filtri .ricerca input{font-size:var(--fs15)} .ad-pills{display:flex; flex-wrap:wrap; gap:8px} .ad-pill{display:inline-flex; align-items:center; gap:8px; min-height:var(--btn-m); padding:0 16px; border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font-size:var(--fs15); font-weight:700; white-space:nowrap} .ad-pill-n{min-width:2ch; text-align:center; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums} /* il «2» largo come il «20» */ .ad-pill[aria-pressed="true"],.ad-pill[aria-checked="true"]{background:var(--navy); border-color:var(--navy); color:var(--surface)} .ad-pill[aria-pressed="true"] .ad-pill-n,.ad-pill[aria-checked="true"] .ad-pill-n{color:var(--surface)} /* telefono e finestre strette (sotto 700 px): le pillole stanno su una riga che scorre di lato (col tocco è comodo). La riga arriva ai bordi della pagina: margine negativo e padding di 16 px, uguali al padding laterale di .ad-pagina sotto 700 px, così la prima pillola resta allineata al testo e l'ultima non tocca il bordo. 5 px sopra e sotto lasciano visibile l'anello del fuoco (il margine negativo li toglie dallo spazio occupato). Barra di scorrimento nascosta. Niente scroll-snap: l'aggancio riportava indietro lo scorrimento di A.pillaInVista e la pillola scelta restava tagliata (24/10). */ @container app (max-width:699px){ .ad-pills{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-padding-inline:16px; scrollbar-width:none; margin:-5px -16px; padding:5px 16px} .ad-pills::-webkit-scrollbar{display:none} .ad-pill{flex:none} } /* riga di riepilogo sotto i filtri (A.riepFiltri): cosa si sta guardando, a ogni larghezza; il link «Togli i filtri» compare solo se c'è qualcosa da togliere. Il link tiene l'altezza da toccare (36 / 44 px) ma il margine negativo non allunga la riga. */ .ad-pills-riep{display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; font-size:var(--fs13); font-weight:600; color:var(--muted); line-height:1.4; overflow-wrap:anywhere} .ad-pills-riep .ad-link{align-self:center; padding:0; font-size:var(--fs13); margin:-9px 0} @media (pointer:coarse){ .ad-pills-riep .ad-link{margin:-13px 0} } /* ---- riepilogo: riquadri numerici cliccabili, fondo tinta piatta ---- */ .ad-tessere{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} @container app (min-width:1000px){ .ad-tessere{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px} } .ad-tessera{display:flex; flex-direction:column; gap:4px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); text-decoration:none; color:var(--ink)} .ad-tessera--ok{background:var(--okbg)} .ad-tessera--warn{background:var(--warnbg)} .ad-tessera--bad{background:var(--badbg)} .ad-tessera--info{background:var(--infobg)} .ad-t-num{font-size:var(--fs22); font-weight:800; line-height:1.1; color:var(--navy); font-variant-numeric:tabular-nums} .ad-tessera--ok .ad-t-num{color:var(--ok)} .ad-tessera--warn .ad-t-num{color:var(--warn)} .ad-tessera--bad .ad-t-num{color:var(--bad)} .ad-tessera--info .ad-t-num{color:var(--info)} @container app (min-width:700px){ .ad-t-num{font-size:var(--fs32)} } .ad-t-tit{font-size:var(--fs15); font-weight:700} .ad-t-sub{font-size:var(--fs13); color:var(--muted)} @media (hover:hover){ .ad-tessera:hover{border-color:var(--navy)} } /* ---- elenchi a righe: nome e codice a sinistra, dati con l'etichetta sotto, stato, freccia solo dove la riga porta in un'altra pagina ---- */ .ad-riga{display:grid; align-items:center; gap:10px 16px; min-height:68px; padding:14px 16px; text-decoration:none; color:inherit; border-top:1px solid var(--line)} .card > .ad-riga:first-child{border-top:0} .ad-r-nome{grid-area:n; display:flex; flex-direction:column; gap:2px; min-width:0} .ad-r-nome b{font-size:var(--fs15); font-weight:700; display:flex; align-items:center; flex-wrap:wrap; gap:6px; overflow-wrap:anywhere} .ad-sub{font-size:var(--fs13); color:var(--muted); overflow-wrap:anywhere} .ad-r-celle{grid-area:x; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} .ad-c{display:flex; flex-direction:column; gap:2px; min-width:0} .ad-c b{font-size:var(--fs15); font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere} .ad-c span{font-size:var(--fs13); color:var(--muted)} .ad-r-stato{grid-area:s; justify-self:end} .ad-chev{grid-area:c; display:flex; color:var(--muted)} .ad-riga--lic{grid-template-columns:minmax(0,1fr) auto 20px; grid-template-areas:"n s c" "x x x"} .ad-riga--az{grid-template-columns:minmax(0,1fr) minmax(0,140px) 20px; grid-template-areas:"n x c"} .ad-riga--az .ad-r-celle{grid-template-columns:minmax(0,1fr)} @container app (min-width:1000px){ .ad-riga--lic{grid-template-columns:minmax(0,2.4fr) minmax(0,3.6fr) 120px 20px; grid-template-areas:"n x s c"} } /* ---- profilo: gruppi a card (come «Cosa comprende» della super app), righe dei diritti, postazioni, storico ---- */ .ad-gruppi{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start} @container app (min-width:1100px){ .ad-gruppi{grid-template-columns:repeat(2,minmax(0,1fr))} } .ad-gruppo{display:flex; flex-direction:column; min-width:0} .ad-gruppo-tit{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px 6px; font-size:var(--fs13); font-weight:700; color:var(--muted)} .ad-gruppo-tit span:last-child{font-weight:600} .ad-gruppo-tit + .ad-d{border-top:0} /* licenze per azienda: un gruppo = una card; il titolo è un tasto a tutta larghezza (nome · totale · «da guardare» · segno che ruota); le righe stanno nel corpo */ .ad-lic-gruppi{display:flex; flex-direction:column; gap:16px} .ad-gruppo-btn{align-items:center; gap:12px; width:100%; min-height:52px; padding:8px 16px; text-align:left; font-size:var(--fs15); color:var(--ink); border-radius:var(--r-card) var(--r-card) 0 0} .ad-gruppo-btn[aria-expanded="false"]{border-radius:var(--r-card)} /* 52 per tutti i titoli, col tag «da guardare» (24) o senza: prima 48 e 44 */ .ad-gruppo-btn:focus-visible{outline-offset:-4px} /* anello DENTRO il titolo, concentrico agli angoli della card */ .ad-gruppo-nome{flex:1 1 120px; min-width:0; font-weight:700; overflow-wrap:anywhere} .ad-gruppo-dx{display:flex; flex:0 1 auto; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 10px} .ad-gruppo-tit.ad-gruppo-btn .ad-gruppo-n{font-size:var(--fs13); font-weight:600; color:var(--muted)} .ad-gruppo-tit.ad-gruppo-btn .ad-tag{font-weight:700} .ad-gruppo-corpo > .ad-riga:last-child{border-radius:0 0 var(--r-card) var(--r-card)} /* l'ultima riga segue l'angolo della card (anello al fuoco) */ .ad-d{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; min-height:68px; padding:12px 16px; border-top:1px solid var(--line)} .card > .ad-d:first-child{border-top:0} .ad-d-testo{flex:1 1 220px; min-width:0} .ad-d-nome{font-size:var(--fs15); font-weight:700; overflow-wrap:anywhere} .ad-d-destra{display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-left:auto} .ad-d-num{font-size:var(--fs17); font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums} .ad-d-num small{font-size:var(--fs13); font-weight:700; color:var(--muted); margin-left:3px} .ad-d-testo .ad-sub{display:block; margin-top:2px} .ad-val{font-size:var(--fs15); font-weight:700; overflow-wrap:anywhere} .ad-in-riga{display:flex; align-items:center; gap:10px} .ad-in-riga .ad-input{flex:1 1 auto; min-width:0} .ad-modulo > div:empty{display:none} .ad-quando{font-size:var(--fs13); color:var(--muted); font-weight:600} /* ---- moduli: campi su due o tre colonne dentro una card; le scelte a due voci sono segmenti ---- */ .ad-form{display:grid; grid-template-columns:minmax(0,1fr); gap:16px 20px; padding:20px} @container app (min-width:700px){ .ad-form{grid-template-columns:repeat(2,minmax(0,1fr))} } @container app (min-width:1000px){ .ad-form--3{grid-template-columns:repeat(3,minmax(0,1fr))} } .ad-campo{display:flex; flex-direction:column; gap:6px; min-width:0} .ad-campo--largo,.ad-form > .ad-errore{grid-column:1 / -1} .ad-eti{font-size:var(--fs13); font-weight:700; color:var(--muted)} .ad-aiuto{font-size:var(--fs13); color:var(--muted)} /* .ad-input = il CAMPO UNICO di klnk-ui.css (52, testo 17, filo --filo-chiaro, fuoco, errore, sola lettura, testo lungo min 120; approvato 27/10/2026). Qui restano le righe da 44 / testo 15 (.ad-d-extra e .ad-in-riga, altezza a fine foglio) e la ricerca. */ :is(.ad-d-extra,.ad-in-riga) .ad-input{padding-left:14px; padding-right:14px; font-size:var(--fs15)} @media (pointer:coarse){ .ricerca input{font-size:16px} } /* il telefono non ingrandisce il campo */ .ad-sel{display:block} /* scelta fra molte voci: una riga con la freccia che apre l'elenco di scelta del DS (.elenco-scelte / .riga-scelta, klnk-ui.css), mai il