/* UAI CERT — Area soci (/area-soci/), design system D4. Si appoggia ai token e alle classi di main.css (.panel, .tick, .btn, .label, .display, .form-zone): qui solo ciò che è proprio del gestionale. Scope .gest per non toccare il resto del sito. */ .gest { min-height: 60vh; padding-bottom: clamp(48px, 7vw, 96px); } /* la barra azioni pubblica (Chiama/WhatsApp) non ha senso in area di lavoro */ .gest-body .actionbar { display: none; } /* ── barra del gestionale sotto l'header ── */ .gest-bar { border-bottom: 1px solid var(--line); background: var(--bg-2); } .gest-bar .wrap { display: flex; align-items: center; gap: 18px; min-height: 58px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; } .gest-bar nav { display: flex; gap: 2px; flex-wrap: wrap; } .gest-bar nav a { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 17px; letter-spacing: .07em; color: var(--fg-2); text-decoration: none; padding: 6px 14px; transition: color .2s; } .gest-bar nav a:hover { color: var(--giallo); } .gest-bar nav a.qui { color: var(--giallo); box-shadow: inset 0 -2px 0 var(--giallo); } .gest-utente { margin-left: auto; font-size: 13px; color: var(--fg-2); } .gest-utente a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .gest-utente a:hover { color: var(--giallo); } /* ── testata di schermata ── */ .gest-corpo { padding-top: clamp(28px, 4vw, 52px); } .gest-testa { margin-bottom: clamp(22px, 3vw, 36px); } .gest-testa h1 { font-weight: 800; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.02; } .gest-testa h1 span { color: var(--fg-2); } .gest-testa p { max-width: 720px; color: var(--fg-2); margin-top: 10px; font-size: 15px; } .gest-testa p a, .gest-vuoto a { color: var(--giallo); text-underline-offset: 3px; } .gest .sec-head { margin-bottom: 16px; } /* ── pannelli e tabelle ── */ .gest-pan { padding: clamp(6px, 1.2vw, 14px); } .gest-vuoto { padding: clamp(20px, 3vw, 32px); color: var(--fg-2); } /* le tabelle larghe scrollano dentro il pannello, la pagina mai */ .gest-scroll { overflow-x: auto; min-width: 0; } .gest-tab { width: 100%; border-collapse: collapse; font-size: 14.5px; } .gest-tab th { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--fg-2); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } .gest-tab td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .gest-tab tbody tr:last-child td { border-bottom: 0; } .gest-tab tbody tr:hover { background: rgba(242, 237, 234, .025); } .gest-forte { font-weight: 600; } .gest-tab small { display: block; color: var(--fg-2); font-size: 12px; margin-top: 4px; max-width: 300px; } /* data dell'edizione aperta: pillola gialla come i "hot" delle card corso */ .gest-data { display: inline-block; padding: 3px 10px; font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: .05em; background: var(--giallo); color: #141110; white-space: nowrap; } /* ── programmazione ── */ .gest-area { margin-bottom: clamp(24px, 3.4vw, 40px); } .gest-area h2 { font-weight: 800; font-size: clamp(19px, 2.4vw, 26px); margin-bottom: 12px; color: var(--fg-2); } /* input dentro le celle: compatti, mai oltre la colonna (il resto lo dà .form-zone) */ .gest-prog td { min-width: 0; } .gest-form .gest-prog input { padding: 9px 11px; font-size: 14.5px; } .gest-form .gest-prog input[type="date"] { min-width: 150px; min-height: 0; } .gest-in-posti { width: 68px; } .gest-in-testo { min-width: 110px; } .gest-invia { margin-top: 8px; } /* tasto Salva ripetuto in fondo a OGNI area (frigoristi, elettricisti…): * sempre a portata di mano, ma salva comunque tutta la pagina */ .gest-invia-area { display: flex; justify-content: flex-end; margin-top: 12px; } /* ── avvisi esito ── */ .gest-avviso { border: 1px solid var(--line); border-left-width: 4px; background: var(--bg-2); padding: 14px 18px; margin-bottom: 18px; font-size: 14.5px; } .gest-avviso ul { margin: 8px 0 0 18px; } .gest-avviso.ok { border-left-color: #4caf6d; } .gest-avviso.no { border-left-color: var(--red-hi); } .gest-avviso.meh { border-left-color: var(--giallo); } /* ── registro ── */ .gest-filtro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .gest-filtro select { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 15px; padding: 9px 36px 9px 12px; border-radius: 0; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23f2c230' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .gest-filtro .btn { padding: 9px 18px; font-size: 16px; } .gest-filtro-tot { color: var(--fg-2); font-size: 13px; } .gest-quando, .gest-registro td { white-space: nowrap; } .gest-registro .gest-dettaglio { white-space: normal; min-width: 280px; } .gest-azione { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .06em; border: 1px solid var(--line); padding: 2px 8px; white-space: nowrap; } .az-apre, .az-crea, .az-importa { border-color: #4caf6d; color: #7ed69a; } .az-chiude, .az-elimina { border-color: var(--red-hi); color: var(--red-hi); } .gest-paginazione { margin-top: 16px; font-size: 15px; display: flex; gap: 10px; } .gest-paginazione strong { color: var(--giallo); } .gest-paginazione a { color: var(--fg-2); text-decoration: none; } .gest-paginazione a:hover { color: var(--giallo); } /* ── login ── */ .gest-login .wrap { display: block; } .gest-login-panel { max-width: 520px; margin: clamp(24px, 5vw, 64px) auto 0; } .gest-login-panel h1 { font-weight: 800; font-size: clamp(34px, 5vw, 52px); margin: 8px 0 10px; } .gest-login-sotto { color: var(--fg-2); font-size: 14.5px; margin-bottom: 22px; } .gest-login form { gap: 18px; } /* tipi input che main.css non copre (password del login, number dei posti) */ .form-zone input[type="password"], .form-zone input[type="number"] { width: 100%; max-width: 100%; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 16px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s; border-radius: 0; -webkit-appearance: none; appearance: none; } .form-zone input[type="password"]:focus, .form-zone input[type="number"]:focus { outline: none; border-color: var(--giallo); box-shadow: 0 0 0 1px var(--giallo); } .gest-form .gest-prog input[type="number"] { width: 68px; } .gest-login .errore { display: none; color: var(--red-hi); font-size: 14px; } .gest-login .errore.on { display: block; margin-bottom: 14px; } .gest-login .errore a { color: inherit; } /* ── cruscotto: contatori "cosa c'è da fare oggi" ── */ .gest-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: clamp(24px, 3.4vw, 40px); } .gest-numero { display: block; text-decoration: none; border: 1px solid var(--line); background: var(--bg-2); padding: 16px 18px; transition: border-color .2s; } .gest-numero:hover { border-color: var(--giallo); } .gest-numero strong { display: block; font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 38px; line-height: 1; color: var(--fg); } .gest-numero span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; } .gest-numero.caldo { border-color: var(--red-hi); } .gest-numero.caldo strong { color: var(--red-hi); } /* ── numeri cliccabili (quarta passata UX, 2026-08-06): il box attivo resta * acceso e "aggancia" visivamente il pannello del task che si apre sotto ── */ .gest-numero { position: relative; } .gest-numero.on { border-color: var(--giallo); background: rgba(242, 194, 48, .07); } .gest-numero.on strong { color: var(--giallo); } .gest-numero.on::after { content: "▾"; position: absolute; top: 10px; right: 12px; color: var(--giallo); font-size: 14px; line-height: 1; } /* pannello del task aperto dal numero */ .gest-vista { border: 1px solid var(--giallo); background: var(--bg-2); padding: clamp(16px, 2.4vw, 26px); margin-top: -8px; /* si attacca alla fila dei numeri */ } .gest-vista .sec-head { margin-bottom: 10px; } .gest-vista-chiudi { color: var(--fg-2); text-decoration: none; white-space: nowrap; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--line); padding: 7px 12px; transition: color .2s, border-color .2s; } .gest-vista-chiudi:hover { color: var(--giallo); border-color: var(--giallo); } .gest-vista-vuota { color: var(--fg-2); font-size: 14.5px; border: 1px dashed var(--line); padding: 14px 16px; } /* ── avviso compatto delle dimenticanze: barretta rossa, click per aprire ── */ .gest-allarme { border: 1px solid var(--line); border-left: 4px solid var(--red-hi); background: var(--bg-2); margin-bottom: clamp(24px, 3.4vw, 40px); } .gest-allarme > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px; color: var(--fg); } .gest-allarme > summary::-webkit-details-marker { display: none; } .gest-allarme > summary b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: var(--red-hi); } .gest-allarme-testo strong { color: var(--red-hi); } .gest-allarme-apri { margin-left: auto; white-space: nowrap; color: var(--red-hi); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .gest-allarme[open] > summary { border-bottom: 1px solid var(--line); } .gest-allarme[open] .gest-allarme-apri { color: var(--fg-2); } .gest-allarme-corpo { padding: 14px 16px 16px; } .gest-allarme-corpo .gest-oppure { margin-bottom: 12px; } /* ══════════════════════════════════════════════════════════════ STATISTICHE — anni a chip, variazioni, grafici (quarta passata UX 2026-08-06: "grafici che rendono di più a occhio la situazione annuale"). Tutto generato dal PHP: SVG inline per l'andamento, barre CSS per i confronti. ══════════════════════════════════════════════════════════════ */ /* ── barra degli anni ── */ .gest-anni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .gest-anni .label { margin-right: 4px; } .gest-anni a { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 17px; letter-spacing: .06em; color: var(--fg-2); text-decoration: none; border: 1px solid var(--line); padding: 6px 16px; transition: color .2s, border-color .2s, background .2s; } .gest-anni a:hover { color: var(--giallo); border-color: var(--giallo); } .gest-anni a.on { background: var(--giallo); border-color: var(--giallo); color: #141110; } /* ── variazione sull'anno prima, dentro l'etichetta del numero ── */ .gest-delta { display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; margin-left: 4px; white-space: nowrap; } .gest-delta.su { color: #7ed69a; background: rgba(76, 175, 109, .14); } .gest-delta.giu { color: var(--red-hi); background: rgba(164, 30, 34, .18); } .gest-delta.pari { color: var(--fg-2); background: rgba(242, 237, 234, .06); } /* gli importi sono più lunghi dei conteggi: non devono mai andare a capo */ .gest-numero strong.euro { font-size: 29px; white-space: nowrap; } .gest-vai { display: block; font-style: normal; font-size: 11px; color: var(--giallo); margin-top: 3px; letter-spacing: .04em; } /* ── grafico SVG: andamento del periodo ── */ .gest-graf-pan { padding: clamp(14px, 2vw, 22px); } .gest-graf { width: 100%; height: auto; display: block; overflow: visible; } .g-griglia { stroke: var(--line); stroke-width: 1; } .g-asse { stroke: var(--fg-2); stroke-width: 1; opacity: .5; } .g-scala { fill: var(--fg-2); font-family: "Archivo", sans-serif; font-size: 11px; } .g-euro { fill: #5aa7c7; } .g-eti { fill: var(--fg-2); font-family: "Big Shoulders Display", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .g-val { fill: var(--fg); font-family: "Big Shoulders Display", sans-serif; font-size: 14px; font-weight: 800; } .g-conf { fill: var(--fg-2); opacity: .16; } .g-barra { fill: var(--giallo); } .g-linea { fill: none; stroke: #5aa7c7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .g-punto { fill: #5aa7c7; } /* legenda del grafico */ .gest-legenda { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--fg-2); } .gest-legenda span { display: flex; align-items: center; gap: 7px; } .gest-legenda span::before { content: ""; width: 14px; height: 10px; flex: none; } .gest-legenda .gl-barra::before { background: var(--giallo); } .gest-legenda .gl-conf::before { background: var(--fg-2); opacity: .3; } .gest-legenda .gl-linea::before { height: 2px; background: #5aa7c7; } /* ── barre orizzontali (per corso, metodi, origini, riempimento) ── */ .gest-barre { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .gest-barre li { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(80px, 2.4fr) auto; gap: 12px; align-items: center; font-size: 14px; } @media (max-width: 620px) { .gest-barre li { grid-template-columns: 1fr auto; } .gest-barre .gb-pista { grid-column: 1 / -1; order: 3; } } .gb-eti { color: var(--fg); overflow-wrap: anywhere; } .gb-eti a { color: inherit; text-decoration: none; } .gb-eti a:hover { color: var(--giallo); } .gb-pista { background: var(--bg-3); height: 16px; display: block; min-width: 0; } .gb-piena { display: block; height: 100%; background: var(--giallo); transition: width .3s var(--ease, ease); } .gb-val { color: var(--fg-2); font-size: 12.5px; white-space: nowrap; text-align: right; } .gest-barre li.oltre .gb-piena { background: var(--red-hi); } .gest-barre li.scarso .gb-piena { background: #d98e32; } .gest-barre li.spento .gb-piena { background: var(--fg-2); opacity: .35; } .gest-barre li.spento .gb-eti { color: var(--fg-2); } /* ── barra di composizione (concluse / vive / annullate) ── */ .gest-comp-barra { display: flex; height: 26px; background: var(--bg-3); overflow: hidden; } .gest-comp-barra span { display: block; height: 100%; } .gest-comp-barra .c-ok { background: #4caf6d; } .gest-comp-barra .c-vive { background: var(--giallo); } .gest-comp-barra .c-no { background: var(--red-hi); } .gest-comp-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; } .gest-comp-legenda li { display: flex; align-items: center; gap: 8px; color: var(--fg-2); } .gest-comp-legenda i { width: 11px; height: 11px; flex: none; display: block; } .gest-comp-legenda .c-ok { background: #4caf6d; } .gest-comp-legenda .c-vive { background: var(--giallo); } .gest-comp-legenda .c-no { background: var(--red-hi); } .gest-comp-legenda b { color: var(--fg); font-size: 15px; } .gest-comp-legenda em { font-style: normal; margin-left: auto; } /* ── impaginazione dei riquadri grafico ── */ .gest-graf-coppia { display: grid; gap: 14px; align-items: start; } @media (min-width: 900px) { .gest-graf-coppia { grid-template-columns: 1fr 1fr; } } .gest-graf-coppia > * { min-width: 0; } .gest-graf-sotto { margin-top: 14px; } .gest-graf-titolo { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 800; font-size: 18px; letter-spacing: .04em; color: var(--fg-2); margin-bottom: 12px; } .gest-graf-titolo .gest-sotto { text-transform: none; letter-spacing: 0; } .gest-tab-sotto { margin-top: 18px; border-top: 1px solid var(--line); } /* secondo blocco dentro lo stesso pannello: stacco netto ma non una sezione nuova */ .gest-graf-stacco { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); } .gest-sotto { font-family: "Archivo", sans-serif; font-weight: 400; font-size: 13px; color: var(--fg-2); text-transform: none; letter-spacing: 0; } .gest-inline { display: inline; } .gest-inline .btn { padding: 8px 14px; font-size: 14px; white-space: nowrap; } .gest-rosso { color: var(--red-hi); } /* ── cruscotto a tabella cliccabile: colonne allineate, righe
── * intestazione + una riga per corso; cliccata si apre lì sotto la lista * dei partecipanti. Niente JS. */ .gest-tavola { border: 1px solid var(--line); background: var(--bg-2); } /* stessa gabbia di colonne per intestazione e righe: tutto allineato */ .gest-tavola-testa, .gest-riga-ed summary { display: grid; grid-template-columns: minmax(220px, 2.2fr) 190px 110px minmax(180px, 1.6fr) 26px; gap: 14px; align-items: center; padding: 0 18px; } .gest-tavola-testa { min-height: 44px; font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--fg-2); border-bottom: 1px solid var(--line); } .gest-riga-ed { border-bottom: 1px solid var(--line); } .gest-riga-ed:last-child { border-bottom: 0; } .gest-riga-ed summary { list-style: none; cursor: pointer; min-height: 58px; transition: background .15s; } .gest-riga-ed summary::-webkit-details-marker { display: none; } .gest-riga-ed summary:hover { background: rgba(242, 237, 234, .035); } .gest-riga-ed[open] { border-left: 3px solid var(--giallo); } .gest-riga-ed[open] summary { border-bottom: 1px solid var(--line); background: rgba(242, 237, 234, .03); } .gest-riga-ed summary::after { content: ""; justify-self: end; width: 9px; height: 9px; border-right: 2px solid var(--giallo); border-bottom: 2px solid var(--giallo); transform: rotate(45deg); transition: transform .15s; } .gest-riga-ed[open] summary::after { transform: rotate(-135deg); } .c-corso { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 800; font-size: 18px; line-height: 1.1; letter-spacing: .03em; padding: 10px 0; } .c-data small, .c-n small { color: var(--fg-2); } .c-n { color: var(--fg-2); font-size: 13.5px; white-space: nowrap; } .c-n b { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 22px; color: var(--fg); margin-right: 3px; } .c-n i { font-style: normal; margin-left: 6px; font-size: 12px; } .c-badge { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .c-badge em { font-style: normal; font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; padding: 3px 9px; white-space: nowrap; } .b-giallo { background: var(--giallo); color: #141110; } .b-arancio { background: #d98e32; color: #141110; } .b-rosso { background: var(--red-hi, #d8555a); color: #141110; } .b-verde { background: #4caf6d; color: #141110; } .b-quieto { border: 1px solid var(--line); color: var(--fg-2); } /* ── scheda edizione conclusa: mini-tabella dei dati fermi ── * compatta in larghezza ma ben leggibile (Nicolò: "font troppo piccoli") */ .gest-pan-mini { padding: 18px 22px 14px; } .gest-tab-mini { width: auto; } .gest-tab-mini th { padding: 4px 44px 6px 0; font-size: 13.5px; } .gest-tab-mini td { padding: 4px 44px 10px 0; border-bottom: 0; font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: .02em; } .gest-nota-mini { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 14px; } @media (max-width: 700px) { .gest-tab-mini th { padding-right: 22px; font-size: 12px; } .gest-tab-mini td { padding-right: 22px; font-size: 17px; } } /* ── consegna attestato in riga: menu-badge che salva da solo ── */ .gest-cella-att { white-space: nowrap; } .gest-att-n { display: inline-block; margin-right: 8px; } .gest-consegna-rapida { display: inline-flex; gap: 6px; align-items: center; } .gest-consegna-rapida select { background: transparent; border: 1px solid var(--line); color: var(--fg); font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 3px 22px 3px 8px; border-radius: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23a89f99' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; cursor: pointer; } .gest-consegna-rapida select option { background: var(--bg-3); color: var(--fg); font-family: "Archivo", sans-serif; text-transform: none; } .gest-consegna-rapida select.c-da_consegnare { border-color: #d98e32; color: #e8a95a; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23e8a95a' stroke-width='2'/%3E%3C/svg%3E"); } .gest-consegna-rapida select.c-ritirato, .gest-consegna-rapida select.c-spedito { border-color: #4caf6d; color: #7ed69a; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237ed69a' stroke-width='2'/%3E%3C/svg%3E"); } .gest-consegna-rapida .gcr-ok { padding: 3px 10px; font-size: 13px; } /* ── persone: la vista commerciale (corsi fatti + valore cliente) ── */ .gest-ucorso { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--fg-2); } .gest-persona-riga { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 10px 6px 4px; font-size: 13.5px; color: var(--fg-2); } /* il codice fiscale vestito da codice: etichetta + monospazio, inconfondibile */ .gest-cf-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); padding: 3px 9px; font-family: "Consolas", "Courier New", monospace; font-size: 12.5px; letter-spacing: .08em; color: var(--fg); } .gest-cf-chip i { font-style: normal; font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--fg-2); } .gest-vb { display: inline-block; font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 11.5px; letter-spacing: .06em; padding: 2px 8px; white-space: nowrap; } .gest-vb.attivo { background: #4caf6d; color: #141110; } .gest-vb.fidelizza { background: var(--giallo); color: #141110; } .gest-vb.nuovo { border: 1px solid var(--line); color: var(--fg-2); } .gest-vb.impresa { background: #d98e32; color: #141110; } /* l'impresa in grigio a fianco del nome (elenco persone): carattere di * testo normale, minuscolo e spento — non si confonde mai col nome */ .c-corso .gest-di-impresa { display: inline-block; margin-left: 10px; font-style: normal; font-family: "Archivo", sans-serif; text-transform: none; font-weight: 400; font-size: 13px; letter-spacing: 0; color: var(--fg-2); } .gest a.gest-vb.impresa { text-decoration: none; } .gest a.gest-vb.impresa:hover { background: #e8a95a; } .gest a.gest-file { margin-left: 6px; font-size: 12.5px; color: var(--giallo); text-underline-offset: 3px; white-space: nowrap; } /* ── "Rimasti da confermare" su edizioni concluse: l'errore salta all'occhio ── */ .gest-rosso-titolo { color: var(--red-hi, #d8555a); } #dimenticati .gest-riga-ed { border-left: 3px solid var(--red-hi, #d8555a); } .gest-riga-dimenticata td { background: rgba(216, 85, 90, .06); } .gest-riga-dimenticata:hover td { background: rgba(216, 85, 90, .11); } .gest-riga-corpo { padding: 6px 14px 12px; } .gest-ed-vuota { padding: 12px 6px; color: var(--fg-2); font-size: 14.5px; } .gest-ed-vuota a, .gest-ed-piede a { color: var(--giallo); text-underline-offset: 3px; } .gest-ed-piede { padding: 12px 6px 2px; font-size: 13.5px; display: flex; gap: 22px; flex-wrap: wrap; } /* ── bottoni Chiama / WhatsApp (uso da cellulare) ── * stessa forma dei badge di stato: Big Shoulders maiuscolo, bordo 1px, * niente raggio. Colori SOLO dalla palette D4: giallo per la chiamata, * il verde già usato per "confermata" per WhatsApp (niente verde brand). */ .gest-contatti { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .gest-contatti small { flex-basis: 100%; color: var(--fg-2); font-size: 11.5px; } .gest a.gest-tel, .gest a.gest-wa { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .06em; padding: 4px 10px; border: 1px solid; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .gest a.gest-tel { border-color: var(--giallo); color: var(--giallo); } .gest a.gest-tel:hover { background: var(--giallo); color: #141110; } .gest a.gest-wa { border-color: #4caf6d; color: #7ed69a; } .gest a.gest-wa:hover { background: #4caf6d; color: #141110; } /* ── cambio stato direttamente in riga ── * il menu è un badge di stato che si apre: stessa faccia dei .gest-stato * (Big Shoulders maiuscolo, bordo e testo del colore dello stato attuale), * freccina in tinta. Il motivo appare solo su Rinviata/Annullata. */ .gest-stato-rapido { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .gest-stato-rapido select { background: transparent; border: 1px solid var(--line); color: var(--fg); font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .06em; padding: 4px 24px 4px 9px; border-radius: 0; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23a89f99' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; cursor: pointer; } .gest-stato-rapido select option { background: var(--bg-3); color: var(--fg); font-family: "Archivo", sans-serif; text-transform: none; } /* bordo E testo del colore dello stato attuale: identico ai badge .st-* */ .gest-stato-rapido select.st-da_confermare { border-color: var(--giallo); color: var(--giallo); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23f2c230' stroke-width='2'/%3E%3C/svg%3E"); } .gest-stato-rapido select.st-confermata { border-color: #4caf6d; color: #7ed69a; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237ed69a' stroke-width='2'/%3E%3C/svg%3E"); } .gest-stato-rapido select.st-in_attesa { border-color: #b3893a; color: #d9ae5f; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23d9ae5f' stroke-width='2'/%3E%3C/svg%3E"); } .gest-stato-rapido select.st-rinviata { border-color: #d98e32; color: #e8a95a; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23e8a95a' stroke-width='2'/%3E%3C/svg%3E"); } .gest-stato-rapido select.st-annullata { border-color: var(--red-hi); color: var(--red-hi); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23d8555a' stroke-width='2'/%3E%3C/svg%3E"); } .gest-stato-rapido select.st-conclusa { color: var(--fg-2); } /* pagato sì/no: il badge è il bottone — stessa faccia dei .gest-stato */ .gest-pag { background: transparent; border: 1px solid; border-radius: 0; cursor: pointer; font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .06em; padding: 4px 10px; white-space: nowrap; transition: background .15s, color .15s; } .gest-pag.si { border-color: #4caf6d; color: #7ed69a; } .gest-pag.si:hover { background: #4caf6d; color: #141110; } .gest-pag.no { border-color: var(--giallo); color: var(--giallo); } .gest-pag.no:hover { background: var(--giallo); color: #141110; } .gsr-motivo { display: none; } .gest-stato-rapido:has(select.gsr-stato option[value="rinviata"]:checked) .gsr-motivo, .gest-stato-rapido:has(select.gsr-stato option[value="annullata"]:checked) .gsr-motivo { display: block; } .gest-stato-rapido .gsr-ok { padding: 4px 12px; font-size: 14px; } /* ── toast dei salvataggi live (stessa faccia dei gest-avviso) ── */ .gest-toast { position: fixed; left: 50%; bottom: 22px; z-index: 90; transform: translate(-50%, 12px); opacity: 0; transition: transform .25s ease, opacity .25s ease; max-width: min(560px, calc(100vw - 32px)); border: 1px solid var(--line); border-left-width: 4px; background: var(--bg-2); color: var(--fg); padding: 13px 18px; font-size: 14.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .gest-toast.su { transform: translate(-50%, 0); opacity: 1; } .gest-toast.ok { border-left-color: #4caf6d; } .gest-toast.no { border-left-color: var(--red-hi); } .gest-toast.meh { border-left-color: var(--giallo); } /* coda "da ricollocare" dentro la card: evidenziata di un altro colore */ .gest-riga-titolo-ric td { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 13.5px; letter-spacing: .08em; color: #e8a95a; background: rgba(217, 142, 50, .12); border-top: 2px solid #d98e32; padding: 8px 14px; } .gest-riga-ricolloca td { background: rgba(217, 142, 50, .07); } .gest-riga-ricolloca:hover td { background: rgba(217, 142, 50, .12); } /* ── testata con azione a destra (elenchi e schede) ── */ .gest-testa-riga { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .gest-testa-riga .btn { margin-left: auto; } .gest-briciole { margin-bottom: 6px; font-size: 13px; } .gest-briciole a { color: var(--fg-2); text-decoration: none; } .gest-briciole a:hover { color: var(--giallo); } /* ── badge di stato iscrizione (piano 1 del §5-bis) ── */ .gest-stato { display: inline-block; font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .06em; border: 1px solid var(--line); padding: 2px 8px; white-space: nowrap; } .st-da_confermare { border-color: var(--giallo); color: var(--giallo); } .st-confermata { border-color: #4caf6d; color: #7ed69a; } .st-in_attesa { border-color: #b3893a; color: #d9ae5f; } .st-rinviata { border-color: #d98e32; color: #e8a95a; } .st-annullata { border-color: var(--red-hi); color: var(--red-hi); } .st-conclusa { border-color: var(--line); color: var(--fg-2); } .gest-si { color: #7ed69a; font-weight: 700; } .gest-no-pag { color: var(--fg-2); } .gest-apri { white-space: nowrap; color: var(--giallo); text-decoration: none; } .gest-apri:hover { text-decoration: underline; text-underline-offset: 3px; } .gest-tab a { color: inherit; text-underline-offset: 3px; } .gest-tab a:hover { color: var(--giallo); } /* ── filtri con campo di ricerca ── */ .gest-cerca { min-width: 240px; } .gest-filtro input[type="search"] { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 15px; padding: 9px 12px; border-radius: 0; -webkit-appearance: none; appearance: none; } .gest-filtro input[type="search"]:focus { outline: none; border-color: var(--giallo); box-shadow: 0 0 0 1px var(--giallo); } /* ── form delle schede: pannelli con campi dentro ── */ .gest-sez { margin: clamp(24px, 3.4vw, 40px) 0; } .gest-sez > h2, .gest-pan-form > h2 { font-weight: 800; font-size: clamp(19px, 2.4vw, 26px); margin-bottom: 14px; color: var(--fg-2); } .gest-sez > .panel { margin-top: 12px; } .gest-pan-form { padding: clamp(18px, 2.6vw, 28px); } .gest-pan-form .campo { margin-bottom: 14px; } .gest-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .gest-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .gest-griglia .gest-largo { grid-column: 1 / -1; } .gest-oppure { color: var(--fg-2); font-size: 13.5px; margin: 10px 0; } .gest-annulla { margin-left: 16px; color: var(--fg-2); text-underline-offset: 3px; } .gest-annulla:hover { color: var(--giallo); } .gest-piede { margin-top: 26px; color: var(--fg-2); font-size: 12.5px; } .gest-azioni-extra { margin-top: 18px; font-size: 14.5px; } .gest-azioni-extra a { color: var(--giallo); text-underline-offset: 3px; } .gest-azioni-extra small { color: var(--fg-2); margin-left: 6px; } .gest-cf { text-transform: uppercase; } /* ── certificati di una partecipazione (schema v7) ── Il patentino brasatori ne rilascia fino a 4: ognuno è un blocco a sé, staccato dal precedente da una riga, così non si legge come un campo unico. */ .gest-cert-titolo { margin: 22px 0 12px; } .gest-cert { border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 8px; } .gest-cert:first-of-type { border-top: 0; padding-top: 0; } .gest-cert-nuovo { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 18px; } .gest-cert-nuovo h4 { font-weight: 800; font-size: 15px; color: var(--fg-2); margin-bottom: 12px; } .gest-cert-piede { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin: 2px 0 14px; } .gest-cert-nota { color: var(--fg-2); font-size: 12.5px; } .gest-cert-piede .gest-link-rosso { margin-left: auto; font-size: 13px; } .gest-nascosto { display: none; } /* radio "persona trovata" e stato iniziale */ .gest-radio-lista { display: grid; gap: 8px; margin-bottom: 6px; } .gest-radio { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; cursor: pointer; } .gest-radio input { accent-color: var(--giallo); } .gest-radio span { color: var(--fg-2); } .gest-radio strong { color: var(--fg); } .gest-campo-stato { display: grid; gap: 8px; } .gest-check { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; cursor: pointer; margin: 10px 0; } .gest-check input { accent-color: var(--giallo); } .gest-check span { color: var(--fg-2); } .gest-check strong { color: var(--fg); } /* spostamento edizione: campo + bottone in riga */ .gest-sposta { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .gest-sposta .campo { flex: 1 1 320px; margin: 0; } /* ── edizioni: giornate e griglia presenze ── */ .gest-data.spenta { background: var(--bg-3); color: var(--fg-2); } .gest-h3 { font-weight: 800; font-size: clamp(17px, 2vw, 21px); margin-bottom: 14px; color: var(--fg-2); } .gest-campi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gest-campi label small { color: var(--fg-2); font-weight: 400; text-transform: none; letter-spacing: 0; } .gest-cella-azioni { white-space: nowrap; } .gest-cella-azioni .gest-inline { margin-left: 10px; } .gest-link-rosso { background: none; border: 0; padding: 0; cursor: pointer; color: var(--red-hi); font-family: "Archivo", sans-serif; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .gest-cella-pres { white-space: nowrap; } .gest-presenze select { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 13.5px; padding: 7px 26px 7px 9px; border-radius: 0; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f2c230' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } /* specificità sopra .form-zone input[type=number] (width:100%), che altrimenti vince */ .gest .form-zone input[type="number"].gest-ore-parz { width: 58px; margin-left: 6px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 13.5px; padding: 7px 8px; border-radius: 0; -webkit-appearance: none; appearance: none; } .gest-presenze th small { display: block; font-size: 11px; color: var(--fg-2); letter-spacing: 0; } /* ── mobile ── */ @media (max-width: 700px) { .gest-bar .wrap { gap: 10px; } .gest-utente { margin-left: 0; width: 100%; padding-bottom: 4px; } .gest-tab { font-size: 13.5px; } .gest-tab th, .gest-tab td { padding: 10px 10px; } .gest-campi, .gest-griglia { grid-template-columns: 1fr; } .gest-testa-riga .btn { margin-left: 0; } .gest-cerca { min-width: 0; flex: 1 1 100%; } /* tabella cliccabile del cruscotto: su schermo stretto la riga si impila */ .gest-tavola-testa { display: none; } .gest-riga-ed summary { grid-template-columns: 1fr 26px; row-gap: 8px; padding: 14px 14px; min-height: 0; } .gest-riga-ed summary::after { grid-row: 1; grid-column: 2; } .c-corso { padding: 0; grid-column: 1; } .c-data, .c-n { grid-column: 1 / -1; } .c-badge { grid-column: 1 / -1; justify-content: flex-start; } } /* ── Commerciale: rinnovi, countdown e tasto Contattato (2026-07-29) ── * L'azzurro è IL colore delle opportunità commerciali: nuovo nella palette * apposta (richiesta Nicolò: "di un altro colore, con l'etichetta rinnovo") — * rosso = errore da sistemare, arancio = da ricollocare, azzurro = da vendere. */ .b-blu { background: #5aa7c7; color: #141110; } .gest-blu-titolo { color: #5aa7c7; } #rinnovi .gest-riga-ed, #da-invitare .gest-pan { border-left: 3px solid #5aa7c7; } .gest-riga-rinnovo td { background: rgba(90, 167, 199, .06); } .gest-riga-rinnovo:hover td { background: rgba(90, 167, 199, .11); } .gest-numero.freddo { border-color: #5aa7c7; } .gest-numero.freddo strong { color: #5aa7c7; } /* countdown giorni: chip come i badge, colore = urgenza * (azzurro oltre 30 gg, arancio entro 30, rosso scaduto/oggi) */ .gest-gg { font-family: "Big Shoulders Display", sans-serif; font-style: normal; text-transform: uppercase; font-weight: 800; font-size: 13px; letter-spacing: .05em; padding: 3px 8px; border: 1px solid; white-space: nowrap; } .gest-gg.blu { border-color: #5aa7c7; color: #5aa7c7; } .gest-gg.arancio { border-color: #e8a95a; color: #e8a95a; } .gest-gg.rosso { border-color: var(--red-hi, #d8555a); color: var(--red-hi, #d8555a); } .gest-gg i { font-style: normal; opacity: .75; } /* la tilde delle scadenze stimate */ /* tasto Contattato: stesso gesto del Pagato — il badge È il bottone */ .gest-cont { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 800; font-size: 14px; letter-spacing: .05em; background: transparent; border: 1px solid; padding: 5px 10px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .gest-cont.no { border-color: #5aa7c7; color: #5aa7c7; } .gest-cont.no:hover { background: #5aa7c7; color: #141110; } .gest-cont.si { border-color: #4caf6d; color: #7ed69a; } .gest-cont.si:hover { background: #4caf6d; color: #141110; } /* righe delle liste commerciali: gestita = spenta ma leggibile */ .gest-riga-comm.gestita td { opacity: .55; } .gest-riga-comm.gestita:hover td { opacity: .85; } .gest-motivo { color: var(--fg-2); font-size: 13.5px; max-width: 34ch; } /* testata di sezione con sottotitolo a destra */ .sec-head small { color: var(--fg-2); font-size: 13px; } .gest-pan-lista { padding: 10px 14px 14px; } /* ══ Cestino e manutenzione (v8) ═══════════════════════════════════════ Le azioni distruttive devono SEMBRARE distruttive: bordo rosso sul pannello, e la casella da riempire accanto al bottone invece che dentro una finestra che si chiude con Invio senza leggerla. */ /* 🚨 `.tick` NON si colora di sfondo: in main.css è `position:absolute; inset:0`, cioè un velo grande quanto tutto il pannello che serve solo a disegnare i due angoli in basso. Dargli un background riempie il riquadro di rosso e ci nasconde dentro testo e bottone — successo davvero, visto sul sito il 28/08. Le quattro tacche si colorano sui loro ::before/::after. */ .gest-pan-pericolo { border-color: var(--red-hi); } .gest-pan-pericolo::before, .gest-pan-pericolo::after, .gest-pan-pericolo .tick::before, .gest-pan-pericolo .tick::after { border-color: var(--red-hi); } .gest-pan-pericolo .gest-h3 { color: var(--red-hi); } /* Il pannello di recupero (iscrizioni dal sito rimaste fuori) è giallo, non rosso: niente è rotto e niente è perso, c'è solo qualcosa da raccogliere. Il rosso qui direbbe una bugia e col tempo smetterebbe di allarmare quando serve davvero. Stessa regola del `.tick` scritta sopra: si colorano le tacche, non il velo. */ .gest-pan-recupero { border-color: var(--giallo); } .gest-pan-recupero::before, .gest-pan-recupero::after, .gest-pan-recupero .tick::before, .gest-pan-recupero .tick::after { border-color: var(--giallo); } .gest-pan-recupero .gest-h3 { color: var(--giallo); } .gest-tab-recupero { margin: 14px 0 4px; } .gest-tab-recupero td { vertical-align: top; } .gest-tab-recupero td:last-child { text-align: right; white-space: nowrap; } .gest-tab-recupero small { color: var(--fg-2); } @media (max-width: 700px) { /* sul telefono la tabella diventa un elenco: quattro colonne non ci stanno */ .gest-tab-recupero, .gest-tab-recupero tbody, .gest-tab-recupero tr, .gest-tab-recupero td { display: block; width: 100%; } .gest-tab-recupero thead { display: none; } .gest-tab-recupero tr { border-bottom: 1px solid var(--line); padding: 10px 0; } .gest-tab-recupero td { border: 0; padding: 2px 0; } .gest-tab-recupero td:last-child { text-align: left; padding-top: 8px; } } /* la riga "scrivi ELIMINA + bottone": resta insieme, va a capo sul telefono */ .gest-definitivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .gest-definitivo label { color: var(--fg-2); font-size: 14px; } .gest-definitivo strong { color: var(--red-hi); letter-spacing: .06em; } .gest-definitivo input[type="text"] { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; width: 11ch; } .gest-definitivo input[type="text"]:focus { outline: 2px solid var(--red-hi); outline-offset: 1px; } /* etichetta per chi legge con lo screen reader, invisibile a schermo */ .gest-nascosto-vista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* tabella del cestino */ .gest-cestino td { vertical-align: top; } .gest-cest-tipo { display: block; color: var(--fg-2); font-size: 12.5px; margin-top: 2px; } .gest-cestino .gest-inline { margin: 0; } /* elenchi di servizio della manutenzione */ .gest-prova-lista, .gest-lista-nota { margin: 10px 0 0 18px; color: var(--fg-2); font-size: 14px; } .gest-prova-lista li, .gest-lista-nota li { margin-bottom: 5px; } .gest-prova-lista li { color: var(--fg); } /* "TUTTO il gestionale" non deve poter essere spuntato per distrazione */ .gest-radio-tutto { padding: 10px 12px; border: 1px solid var(--red-hi); background: rgba(216, 85, 90, .06); } .gest-radio-tutto .gest-forte { color: var(--red-hi); } /* il riquadro elimina in fondo alle schede: staccato da tutto il resto */ .gest-elimina { margin-top: clamp(28px, 4vw, 48px); } @media (max-width: 700px) { .gest-definitivo { align-items: stretch; } .gest-definitivo input[type="text"] { width: 100%; } .gest-definitivo .btn { width: 100%; justify-content: center; } } /* ── import dello storico (v8) ── */ .gest-h4 { font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--giallo); margin: 22px 0 0; } .gest-carica { flex-wrap: wrap; margin-top: 10px; } .gest-carica label { color: var(--fg-2); font-size: 14px; } .gest-carica input[type="file"] { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 14px; padding: 8px 10px; max-width: 100%; } .gest-carica input[type="file"]::file-selector-button { background: transparent; border: 1px solid var(--line); color: var(--fg); font-family: "Archivo", sans-serif; font-size: 13px; padding: 5px 10px; margin-right: 10px; cursor: pointer; } .gest-carica input[type="file"]::file-selector-button:hover { border-color: var(--fg-2); } /* il racconto dell'import: righe allineate, si scorre dentro il pannello */ .gest-resoconto { background: var(--bg-3); border: 1px solid var(--line); margin-top: 12px; padding: 14px 16px; max-height: 460px; overflow: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.65; color: var(--fg); white-space: pre; tab-size: 2; } /* ── Sito ↔ gestionale: il pannello di allineamento (Edizioni, 28/08/2026) ── * Quattro colonne, non cinque come la tavola delle edizioni: qui non c'è la * freccia di apertura. Griglia sua per non piegare quella esistente. */ .gest-pan-allin { margin-bottom: 22px; } .gest-allin { border: 1px solid var(--line); background: var(--bg-2); margin: 14px 0; } .gest-allin-riga { display: grid; grid-template-columns: minmax(200px, 1.6fr) 150px 150px minmax(240px, 2.4fr); gap: 14px; align-items: start; padding: 12px 18px; border-bottom: 1px solid var(--line); } .gest-allin-riga:last-child { border-bottom: 0; } .gest-allin-testa { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--fg-2); align-items: center; padding: 0 18px; min-height: 44px; } /* Sul telefono la griglia a quattro colonne non ci sta: diventa un elenco. */ @media (max-width: 900px) { .gest-allin-riga { grid-template-columns: 1fr; gap: 4px; } .gest-allin-testa { display: none; } .gest-allin-riga > span:nth-child(2)::before { content: "Sito: "; color: var(--fg-2); } .gest-allin-riga > span:nth-child(3)::before { content: "Gestionale: "; color: var(--fg-2); } } /* Il pannello «richieste di informazioni da richiamare» sul cruscotto. Il messaggio si mostra per intero — chi ha il ruolo del gestionale non entra in bacheca, quindi e' l'unico posto dove puo' leggerlo — ma non deve mangiarsi la riga: si tiene largo il giusto e va a capo. */ .gest-msg-richiesta { display: block; max-width: 46ch; margin-top: 4px; color: var(--fg-2); font-style: italic; line-height: 1.45; white-space: normal; } /* «Già richiamate»: chiuso di default, si apre solo se si e' premuto per sbaglio. Sta in fondo al pannello perche' e' il ripensamento, non il lavoro. */ .gest-richiamate { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; } .gest-richiamate summary { cursor: pointer; color: var(--fg-2); font-size: 14px; list-style: none; display: inline-block; } .gest-richiamate summary::before { content: "▸ "; color: var(--giallo); } .gest-richiamate[open] summary::before { content: "▾ "; } .gest-richiamate ul { list-style: none; margin: 12px 0 0; padding: 0; } .gest-richiamate li { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); } .gest-richiamate li:last-child { border-bottom: 0; } .gest-richiamate small { display: block; color: var(--fg-2); font-size: 12px; margin-top: 2px; } /* ══ Link da condividere — cruscotto (29/08/2026) ══════════════════════ Scegli il corso, scegli da dove lo mandi, copi. Tutte classi nuove: non tocca niente di esistente. 🚨 La tendina NON è un