/* ==========================================================================
Optimvs v4 · «Studio tecnico» con Inter · stile comune
Colori «marchio pieno»: menu notte con aurora, vermiglio come unico colore d'azione, blu
dell'aurora per grafici, collegamenti, dato attivo ed evidenziazione, grigi
caldi. La palette si cambia solo qui, nei due temi. Inter per tutto; IBM Plex
Mono solo nella frase citata.
Questo file è del guscio: le viste NON lo modificano. Ogni vista ha il suo
viste/NOME.css, con classi che cominciano per .v-NOME-
Indice
1. Variabili (colori, caratteri, misure, raggi, ombre, tempi)
2. Base
3. Struttura: menu · centro · documento
4. Menu
5. Centro: testata della gara, titolo della vista, ingresso
6. Dato con fonte ed etichetta di pagina
7. I quattro stati: segno, parola, pastiglia, legenda
8. Pulsanti
9. Campi: testo, selettore, interruttore
10. Schede (tab) e scelte
11. Riquadro, griglie, coppie, cifre, etichette
12. Tabella
13. Righe con barra, segni, grafici comuni
14. «Da fare ora», apribile, avanzamento, stato vuoto
15. Documento: barra, pagina, evidenziazione, scheda della citazione
16. Avviso a comparsa, finestra di conferma, pannello laterale
17. Cambio tema, movimento ridotto, ?fermo=1, stampa
========================================================================== */
/* 1 · VARIABILI ----------------------------------------------------------- */
:root {
color-scheme: light;
/* caratteri */
--car-testo: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--car-citazione: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--t-13: 0.8125rem; /* 13 px: la misura più piccola ammessa */
--t-14: 0.875rem; /* 14 px: testo */
--t-16: 1rem; /* 16 px: titolo di finestra e pannello */
--t-18: 1.125rem; /* 18 px: numeri dei riquadri */
--t-20: 1.25rem; /* 20 px: titolo della vista */
--t-cifra: 1.5rem; /* 24 px: cifre chiave */
--t-cifra-grande: 2rem; /* 32 px: la cifra più importante di una vista */
/* passi di spazio */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
/* raggi */
--r-1: 4px;
--r-2: 6px;
--r-3: 8px;
--r-4: 10px;
/* misure delle colonne */
--menu-l: clamp(200px, 15vw, 216px);
--doc-l: clamp(480px, 36vw, 600px);
--barra-a: 48px; /* testata della gara e barra del documento: stessa altezza */
/* tempi e curve */
--t-rapido: 150ms;
--t-medio: 220ms;
--t-lento: 300ms;
--curva: cubic-bezier(0.2, 0.7, 0.2, 1);
--curva-pannello: cubic-bezier(0.32, 0.72, 0, 1);
/* superfici: carta, grigi caldi che tendono al viola */
--fondo: #F4F3F8;
--fondo-2: #E9E7F0; /* vassoio del documento, riquadri incassati */
--riquadro: #FFFFFF;
--riquadro-2: #FAF9FC; /* righe al passaggio, fondo della citazione */
--bordo: #E4E1EC;
--bordo-forte: #D2CEDF;
--velo: rgba(20, 18, 30, 0.06); /* passaggio sui pulsanti fantasma */
--fondale: rgba(7, 7, 12, 0.46); /* dietro la finestra di conferma */
/* testo */
--testo: #14121E;
--testo-2: #4E4A66;
--testo-3: #5E5A75;
/* blu dell'aurora: grafici, collegamenti, dato attivo, evidenziazione. NON è il colore d'azione */
--blu: #2B3BE8; /* linee, segni */
--blu-testo: #2B3BE8;
--blu-chiaro: #7C8CFF; /* secondo tono nei grafici */
--blu-tinta: #EEF0FE;
--blu-tinta-2: #DDE1FD;
--blu-bordo: #C6CCFA;
--blu-pieno: #2B3BE8; /* fondo pieno: etichetta del dato aperto, interruttore acceso */
--su-blu-pieno: #FFFFFF;
--fuoco: #2B3BE8;
/* vermiglio: l'unico colore d'azione. Un solo pulsante primario per vista */
--azione: #D12E12;
--azione-sopra: #B32509;
--su-azione: #FFFFFF;
--marchio-o: #FF3B1E; /* la O del marchio */
/* i quattro stati: sempre forma + parola. Mancante è grigio tratteggiato, mai rosso */
--certo: #0A7767; /* un tono sotto il riferimento (#0B7F6E): il testo sulla tinta arriva a 4,8 a 1 */
--certo-pieno: #0E9E88;
--certo-tinta: #E0F5F1;
--verifica: #8F5A00;
--verifica-pieno: #B87400;
--verifica-tinta: #FCF1DA;
--proposta: #6A2FC0;
--proposta-pieno: #8250D8;
--proposta-tinta: #F1EAFB;
--mancante: #5E5A75;
--mancante-pieno: #726E8A;
--mancante-tinta: #EFEDF4;
--su-stato: #FFFFFF; /* il segno dentro il simbolo pieno */
--etichetta: #EDEBF3; /* fondo delle etichette */
/* errore e azioni che cancellano: fuori dai quattro stati, si usa di rado (stessa famiglia del vermiglio) */
--pericolo: #B32509;
--pericolo-sopra: #8F1D06;
--pericolo-tinta: #FDECE8;
--pericolo-pieno: #B32509; /* fondo del pulsante che cancella, nella finestra di conferma */
--pericolo-pieno-sopra: #8F1D06;
--pericolo-bordo: #E3A99C; /* contorno del pulsante che cancella, nelle viste */
/* neutro dei grafici */
--grafico-neutro: #8A86A3;
--grafico-neutro-tinta: #E9E7F0;
--grafico-forte: #726E8A;
/* ombre: tre piani. Ogni ombra ha uno scarto e una sfumatura */
--ombra-1: 0 1px 1px rgba(20, 18, 30, 0.05), 0 3px 8px -3px rgba(20, 18, 30, 0.09);
--ombra-2: 0 1px 2px rgba(20, 18, 30, 0.06), 0 6px 16px -6px rgba(20, 18, 30, 0.14);
--ombra-3: 0 2px 4px rgba(20, 18, 30, 0.06), 0 18px 44px -12px rgba(20, 18, 30, 0.30);
--ombra-foglio: 0 0 0 1px rgba(20, 18, 30, 0.08), 0 2px 4px rgba(20, 18, 30, 0.06), 0 14px 32px -12px rgba(20, 18, 30, 0.28);
--ombra-scheda: 0 -8px 20px -14px rgba(20, 18, 30, 0.30);
--ombra-barra: 0 6px 12px -8px rgba(20, 18, 30, 0.20); /* la pagina scorre sotto la barra */
--ombra-tasto: 0 1px 2px rgba(20, 18, 30, 0.28);
--orlo-luce: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* filo di luce in cima ai riquadri */
--barra: #FAF9FC; /* barre in alto: un tono sotto il bianco */
/* avviso a comparsa: superficie rovesciata */
--inverso: #1A1A28;
--su-inverso: #F3F1F6;
--su-inverso-2: #A3ADFF;
/* menu: notte con aurora */
--menu-fondo: #07070C;
--menu-aurora:
radial-gradient(130% 55% at 0% 100%, rgba(106, 24, 201, 0.38), transparent 62%),
radial-gradient(110% 45% at 110% 0%, rgba(43, 59, 232, 0.30), transparent 60%),
radial-gradient(70% 30% at 20% 62%, rgba(194, 31, 168, 0.14), transparent 70%);
--menu-testo: #C9C5D8;
--menu-testo-2: #9D99B3;
--menu-forte: #F3F1F6;
--menu-sopra: rgba(243, 241, 246, 0.06);
--menu-attiva: rgba(243, 241, 246, 0.10);
--menu-linea: rgba(243, 241, 246, 0.10);
--menu-linea-forte: rgba(243, 241, 246, 0.28); /* contorno del segno «Dati d'esempio» */
--menu-segno: #FF3B1E; /* voce attiva: vermiglio */
--menu-fuoco: #A3ADFF;
--menu-avatar: #1A1A28;
--menu-orlo: transparent;
/* pagina del documento ed evidenziazione. --foglio-carta è il colore della carta: l'immagine della pagina
ci si moltiplica sopra (il bianco prende quel colore, l'inchiostro resta nero) */
--foglio-carta: #FFFFFF;
--foglio-filtro: none;
--trama: rgba(20, 18, 30, 0.13);
--evid: rgba(43, 59, 232, 0.18);
--evid-forte: rgba(43, 59, 232, 0.32); /* il primo istante del tratto, poi si posa */
--evid-riga: rgba(43, 59, 232, 0.75);
/* freccia del selettore (disegno in linea: nessuna richiesta di rete) */
--freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234E4A66' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.25 8 10l4-3.75'/%3E%3C/svg%3E");
}
:root[data-tema="scuro"] {
color-scheme: dark;
/* la notte del marchio */
--fondo: #0B0B13;
--fondo-2: #07070C;
--riquadro: #12121C;
--riquadro-2: #181824;
--bordo: #26263C;
--bordo-forte: #3A3A58;
--velo: rgba(243, 241, 246, 0.07);
--fondale: rgba(0, 0, 0, 0.64);
--testo: #F3F1F6;
--testo-2: #B4B0C8;
--testo-3: #9793AE;
--blu: #8C98FF;
--blu-testo: #A3ADFF;
--blu-chiaro: #5C68D8;
--blu-tinta: rgba(124, 140, 255, 0.14);
--blu-tinta-2: rgba(124, 140, 255, 0.24);
--blu-bordo: rgba(124, 140, 255, 0.38);
--blu-pieno: #4856EC;
--su-blu-pieno: #FFFFFF;
--fuoco: #A3ADFF;
--azione: #DC3019;
--azione-sopra: #F0452C;
--su-azione: #FFFFFF;
--certo: #4FE0D2;
--certo-pieno: #2BD4C4;
--certo-tinta: rgba(43, 212, 196, 0.14);
--verifica: #FFC453;
--verifica-pieno: #FFB020;
--verifica-tinta: rgba(255, 176, 32, 0.14);
--proposta: #C3A6FF;
--proposta-pieno: #9B6EFF;
--proposta-tinta: rgba(155, 110, 255, 0.16);
--mancante: #A6A2BC;
--mancante-pieno: #A6A2BC;
--mancante-tinta: rgba(166, 162, 188, 0.14);
--su-stato: #0B0B13;
--etichetta: #1F1F2E;
--pericolo: #FF8A73;
--pericolo-sopra: #FFA896;
--pericolo-tinta: rgba(255, 59, 30, 0.16);
--pericolo-pieno: #B32509;
--pericolo-pieno-sopra: #C93A1E;
--pericolo-bordo: rgba(255, 138, 115, 0.45);
--grafico-neutro: #8A86A3;
--grafico-neutro-tinta: #1F1F2E;
--grafico-forte: #A6A2BC;
--ombra-1: 0 1px 1px rgba(0, 0, 0, 0.30), 0 4px 10px -4px rgba(0, 0, 0, 0.45);
--ombra-2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 20px -8px rgba(0, 0, 0, 0.55);
--ombra-3: 0 2px 4px rgba(0, 0, 0, 0.35), 0 22px 48px -12px rgba(0, 0, 0, 0.85);
--ombra-foglio: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 36px -12px rgba(0, 0, 0, 0.80);
--ombra-scheda: 0 -10px 24px -14px rgba(0, 0, 0, 0.80);
--ombra-barra: 0 8px 14px -8px rgba(0, 0, 0, 0.75);
--ombra-tasto: 0 1px 2px rgba(0, 0, 0, 0.50);
--orlo-luce: inset 0 1px 0 rgba(255, 255, 255, 0.045);
--barra: #12121C;
--inverso: #F3F1F6;
--su-inverso: #14121E;
--su-inverso-2: #2B3BE8;
--menu-fondo: #07070C;
--menu-testo: #C9C5D8;
--menu-testo-2: #9D99B3;
--menu-forte: #F3F1F6;
--menu-segno: #FF3B1E;
--menu-avatar: #1A1A28;
--menu-orlo: #1C1C2C;
/* la pagina del PDF resta un foglio, ma del colore della notte: una carta grigio-viola che non stacca dal resto
e non abbaglia. Il testo resta nero pieno (oltre 9 a 1 sulla carta); il filtro alza appena il contrasto dell'inchiostro */
--foglio-carta: #B9B6CC;
--foglio-filtro: contrast(1.06);
--trama: rgba(243, 241, 246, 0.10);
--evid: rgba(43, 59, 232, 0.26);
--evid-forte: rgba(43, 59, 232, 0.42);
--evid-riga: rgba(43, 59, 232, 0.85);
--freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4B0C8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.25 8 10l4-3.75'/%3E%3C/svg%3E");
}
/* 2 · BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
/* la pagina non scorre mai: scorrono solo il centro e il documento. html ferma la finestra; body taglia
(clip, non hidden: così nemmeno scrollIntoView() o il fuoco da tastiera possono spostare tutto il guscio) */
html { overflow: hidden; }
body {
position: relative;
margin: 0;
overflow: hidden;
overflow: clip;
background: var(--fondo);
color: var(--testo);
font: 400 var(--t-14)/1.45 var(--car-testo);
font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss03' 1;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* le varianti di Inter (cifre tabellari, «a» a un piano, virgolette tonde) valgono dappertutto, anche dove
una regola usa la scorciatoia «font:», che da sola le azzera. La frase citata (IBM Plex Mono) resta com'è */
*, *::before, *::after { font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss03' 1 !important; }
.cit-frase, .cit-frase * { font-feature-settings: normal !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; }
button { font: inherit; font-feature-settings: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; font-feature-settings: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
h2 { font-size: var(--t-14); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--t-14); font-weight: 600; line-height: 1.3; }
.num { font-variant-numeric: tabular-nums; }
.disegni { position: absolute; }
/* testo solo per chi usa un lettore di schermo */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ico {
width: 16px; height: 16px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }
::selection { background: var(--blu-tinta-2); color: var(--testo); }
input, textarea { caret-color: var(--blu); }
/* barre di scorrimento sottili, nei colori del tema */
.scorre, .centro-scorre, .doc-vista, .cit-frase, .pannello-corpo, .tabella-scorre { scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent; }
.scorre::-webkit-scrollbar, .centro-scorre::-webkit-scrollbar, .doc-vista::-webkit-scrollbar, .cit-frase::-webkit-scrollbar, .pannello-corpo::-webkit-scrollbar, .tabella-scorre::-webkit-scrollbar { width: 10px; height: 10px; }
.scorre::-webkit-scrollbar-thumb, .centro-scorre::-webkit-scrollbar-thumb, .doc-vista::-webkit-scrollbar-thumb, .cit-frase::-webkit-scrollbar-thumb, .pannello-corpo::-webkit-scrollbar-thumb, .tabella-scorre::-webkit-scrollbar-thumb {
background: var(--bordo-forte); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box;
}
.scorre::-webkit-scrollbar-track, .centro-scorre::-webkit-scrollbar-track, .doc-vista::-webkit-scrollbar-track, .cit-frase::-webkit-scrollbar-track, .pannello-corpo::-webkit-scrollbar-track, .tabella-scorre::-webkit-scrollbar-track { background: transparent; }
/* collegamento per chi usa la tastiera: salta il menu */
.salta {
position: fixed; left: 12px; top: -48px; z-index: 80;
padding: 8px 12px; border-radius: var(--r-2);
background: var(--blu-pieno); color: var(--su-blu-pieno); font-weight: 500; text-decoration: none;
transition: top var(--t-rapido);
}
.salta:focus { top: 12px; }
/* 3 · STRUTTURA ----------------------------------------------------------- */
.app {
display: grid;
grid-template-columns: var(--menu-l) minmax(0, 1fr) 0px;
height: 100vh;
height: 100dvh;
transition: grid-template-columns var(--t-lento) var(--curva-pannello);
}
/* dentro la gara, con il documento aperto, la terza colonna si apre: il pannello entra da destra.
.avvio-gara la apre già al primo disegno, prima che parta il programma (niente salto). */
.app.con-doc, .avvio-gara .app { grid-template-columns: var(--menu-l) minmax(0, 1fr) var(--doc-l); }
/* 4 · MENU ---------------------------------------------------------------- */
.menu {
display: flex; flex-direction: column;
min-width: 0;
padding: 16px 10px 12px;
background: var(--menu-aurora), var(--menu-fondo);
color: var(--menu-testo);
border-right: 1px solid var(--menu-orlo);
}
.marchio { display: flex; align-items: center; height: 28px; padding: 0 8px; margin-bottom: 6px; color: var(--menu-forte); border-radius: var(--r-2); width: max-content; }
.marchio svg { height: 15px; width: auto; display: block; }
.marchio svg path:first-child { stroke: var(--marchio-o); } /* la O in vermiglio */
/* demo pubblica: il segno «Dati d'esempio» sta sotto il marchio, sempre in vista, in ogni percorso */
.menu-esempio {
align-self: flex-start; margin: 0 0 16px 8px; padding: 0 7px; height: 22px;
font: 500 var(--t-13)/22px var(--car-testo); white-space: nowrap;
color: var(--menu-testo); box-shadow: inset 0 0 0 1px var(--menu-linea-forte);
border-radius: var(--r-1); cursor: default;
}
.menu-elenco { display: grid; gap: 1px; }
.menu-voce, .menu-sezioni a {
display: flex; align-items: center; gap: 10px;
height: 32px; padding: 0 8px;
border-radius: var(--r-2);
color: var(--menu-testo);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--t-rapido), color var(--t-rapido);
}
.menu-voce .ico { color: var(--menu-testo-2); transition: color var(--t-rapido); }
.menu-voce:hover, .menu-sezioni a:hover { background: var(--menu-sopra); color: var(--menu-forte); }
.menu-voce:hover .ico { color: var(--menu-testo); }
.menu-voce[aria-current="page"] { background: var(--menu-attiva); color: var(--menu-forte); font-weight: 500; }
.menu-voce[aria-current="page"] .ico { color: var(--menu-segno); }
.menu :focus-visible { outline-color: var(--menu-fuoco); }
.menu-titolo { margin: 22px 0 6px; padding: 0 8px; font-size: var(--t-13); color: var(--menu-testo-2); }
/* la gara aperta: il nome su una riga, il codice sotto (un nome lungo si accorcia con i puntini: intero è nel suggerimento) */
.menu-gara-nome { height: auto; padding-top: 6px; padding-bottom: 6px; align-items: flex-start; color: var(--menu-forte); font-weight: 500; }
.menu-gara-nome .ico { margin-top: 2px; color: var(--menu-testo-2); }
.menu-gara-testo { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.menu-gara-testo > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-gara-testo .num { font-size: var(--t-13); font-weight: 400; color: var(--menu-testo-2); }
.menu-gara-testo .num:empty { display: none; }
.menu-sezioni { position: relative; display: grid; gap: 1px; margin: 2px 0 0 15px; padding-left: 10px; border-left: 1px solid var(--menu-linea); }
.menu-sezioni li { position: relative; }
.menu-sezioni a { height: 30px; }
.menu-sezioni a[aria-current="page"] { background: var(--menu-attiva); color: var(--menu-forte); font-weight: 500; }
.menu-sezioni a[aria-current="page"]::before {
content: ''; position: absolute; left: -11px; top: 5px; bottom: 5px; width: 1px;
background: var(--menu-segno); box-shadow: 0 0 0 0.5px var(--menu-segno);
}
.conta {
margin-left: auto; min-width: 24px; height: 20px; padding: 0 6px;
display: inline-grid; place-items: center;
font: 500 var(--t-13)/1 var(--car-testo);
color: var(--menu-forte); background: var(--menu-attiva); border-radius: 10px;
}
/* la guida: una voce discreta in fondo al menu, sopra il nome di chi lavora */
.menu-guida { margin-top: auto; height: 30px; font-size: var(--t-13); color: var(--menu-testo-2); }
.menu-guida + .menu-piede { margin-top: 8px; }
.menu-piede { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 0 0 4px; border-top: 1px solid var(--menu-linea); }
.avatar {
width: 28px; height: 28px; flex: none; display: grid; place-items: center;
border-radius: 50%; background: var(--menu-avatar); color: var(--menu-forte);
font: 500 var(--t-13)/1 var(--car-testo);
}
.utente { display: grid; min-width: 0; line-height: 1.25; }
.utente-nome { color: var(--menu-forte); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utente-studio { font-size: var(--t-13); color: var(--menu-testo-2); white-space: nowrap; }
.tema {
margin-left: auto; width: 30px; height: 30px; flex: none; display: grid; place-items: center;
border-radius: var(--r-2); color: var(--menu-testo);
transition: background-color var(--t-rapido), color var(--t-rapido);
}
.tema:hover { background: var(--menu-sopra); color: var(--menu-forte); }
.tema .tema-sole { display: none; }
:root[data-tema="scuro"] .tema .tema-sole { display: block; }
:root[data-tema="scuro"] .tema .tema-luna { display: none; }
/* 5 · CENTRO -------------------------------------------------------------- */
.centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* testata compatta della gara: resta ferma, il contenuto le scorre sotto */
.gara-barra {
position: relative; z-index: 2; flex: none;
display: flex; align-items: center; gap: 10px;
height: var(--barra-a); padding: 0 16px 0 24px;
background: var(--barra); border-bottom: 1px solid var(--bordo); box-shadow: var(--ombra-barra);
}
.gara-codice { flex: none; padding: 0 6px; height: 22px; font-size: var(--t-13); font-weight: 500; line-height: 20px; color: var(--testo-2); background: var(--riquadro); border: 1px solid var(--bordo); border-radius: var(--r-1); }
.gara-codice:empty { display: none; }
.gara-nome { flex: none; font-weight: 600; white-space: nowrap; }
.gara-ente { display: flex; min-width: 0; color: var(--testo-2); white-space: nowrap; }
.gara-ente .dato { display: inline-flex; flex: 0 1 auto; min-width: 0; }
.gara-barra .gara-doc { margin-left: auto; }
/* «Dati d'esempio» nella testata della gara: sullo schermo lo dice già il menu, qui serve alla carta (il menu non si stampa) */
.gara-esempio { display: none; }
/* position: relative: i pezzi a posizione assoluta delle viste (testi .vh per i lettori di schermo, la casella
dell'interruttore) restano dentro il centro e scorrono con lui, invece di allungare la pagina */
.centro-scorre { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; container: centro / inline-size; }
.centro-dentro { display: flex; flex-direction: column; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 16px 24px 32px; }
/* titolo della vista: 2-5 parole. A destra lo spazio per i comandi della vista (ctx.azioni) */
.vista-testa { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.vista-testa h1 { font-size: var(--t-20); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; white-space: nowrap; border-radius: var(--r-1); }
/* a ogni cambio di sezione il fuoco passa al titolo (chi usa la tastiera riparte da lì). Il titolo non è un comando:
non prende l'anello, che a chi guarda sembrerebbe un errore */
.vista-testa h1:focus, .vista-testa h1:focus-visible { outline: none; }
.vista-azioni { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.vista-azioni:empty { display: none; }
.vista { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* il contenuto del centro entra con un leggero scorrimento */
/* «backwards», non «both»: a ingresso finito la vista non resta con una trasformazione in corso
(altrimenti diventerebbe il riferimento di ogni elemento fisso o ancorato che ha dentro) */
.vista.entra, .vista-testa.entra { animation: vista-entra var(--t-medio) var(--curva) backwards; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@container centro (max-width: 659px) {
.centro-dentro { gap: 10px; }
.vista { gap: 10px; }
}
/* 6 · DATO CON FONTE ------------------------------------------------------ */
/* etichetta di pagina «p. 7». Da sola (colonna «pag.» di una tabella) è un testo discreto.
Dentro un dato resta in silenzio: compare al passaggio, al fuoco e sul dato aperto. */
.pg {
position: relative;
display: inline-block; flex: none;
padding: 0 4px; height: 18px;
font: 400 var(--t-13)/18px var(--car-testo);
white-space: nowrap;
color: var(--testo-3);
background: transparent;
border-radius: var(--r-1);
transition: background-color var(--t-rapido), color var(--t-rapido), opacity var(--t-rapido);
}
/* dato cliccabile: apre la fonte nel documento a fianco */
.dato { border-radius: var(--r-2); text-align: inherit; transition: background-color var(--t-rapido), box-shadow var(--t-rapido), color var(--t-rapido), text-decoration-color var(--t-rapido); }
/* a) dato in riga: l'etichetta ha il suo posto in fondo. A riposo, al posto del testo, un punto.
Il fondo al passaggio dipende da dove sta il dato: bianco sul fondo della pagina, grigio dentro un riquadro */
:root { --dato-sopra: var(--riquadro); }
.riquadro, .pannello, .cit, .finestra { --dato-sopra: var(--riquadro-2); }
.riquadro.incassato { --dato-sopra: var(--riquadro); }
.dato-riga:hover, .dato-riga.sopra { background: var(--dato-sopra); } /* .sopra: si sta passando su un altro punto dello stesso dato */
.dato-riga.attivo { background: var(--blu-tinta); box-shadow: inset 0 0 0 1.5px var(--blu); }
.dato .pg, .pg.zitta { color: transparent; }
.dato .pg::after, .pg.zitta::after {
content: ''; position: absolute; right: 4px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
border-radius: 50%; background: var(--bordo-forte);
transition: opacity var(--t-rapido);
}
.dato:hover .pg, .dato:focus-visible .pg, .dato.sopra .pg { background: var(--blu-tinta-2); color: var(--blu-testo); }
.dato.attivo .pg { background: var(--blu-pieno); color: var(--su-blu-pieno); }
.dato:hover .pg::after, .dato:focus-visible .pg::after, .dato.sopra .pg::after, .dato.attivo .pg::after,
.pg.zitta:hover::after, .pg.zitta:focus-visible::after, .pg.zitta.sopra::after, .pg.zitta.attivo::after { opacity: 0; }
/* accanto al nome di una cifra, o con .punto-vicino sul dato, il punto sta subito dopo il testo
(nelle righe a colonne resta a destra, in fila con gli altri) */
.cifra-nome .pg::after, .dato.punto-vicino .pg::after { right: auto; left: 3px; }
/* una cifra con le frasi su due pagine: a riposo un punto solo, le due etichette compaiono al passaggio e sul dato aperto */
.cifra-nome .pg + .pg::after { display: none; }
/* dato con più fonti: piena solo l'etichetta della pagina che si sta guardando */
.dato.attivo .pg.pg-altra { background: var(--blu-tinta-2); color: var(--blu-testo); }
/* b) dato nel testo: sottolineatura punteggiata; l'etichetta vola accanto senza spostare niente */
.dato-vola {
position: relative;
padding: 1px 3px; margin: -1px -3px;
border-radius: var(--r-1);
text-decoration: underline dotted var(--bordo-forte) 1px; text-underline-offset: 3px;
}
.dato-vola:hover, .dato-vola.sopra { background: var(--blu-tinta); text-decoration-color: var(--blu); }
.dato-vola.attivo { background: var(--blu-tinta); box-shadow: inset 0 0 0 1.5px var(--blu); text-decoration-color: transparent; }
.dato-vola > .pg {
/* a riposo sta dentro il dato, invisibile: così non allarga niente. Quando serve esce a destra
(o a sinistra, con .pg-sx, se a destra non c'è posto); quando sparisce rientra solo a dissolvenza finita */
position: absolute; left: 0; top: 50%; z-index: 5;
margin-left: 0; transform: translateY(-50%);
opacity: 0; pointer-events: none;
color: var(--blu-testo);
background: linear-gradient(var(--blu-tinta-2), var(--blu-tinta-2)) var(--riquadro); /* fondo pieno: sta sopra altro testo */
box-shadow: 0 0 0 2px var(--riquadro);
text-decoration: none;
transition: opacity var(--t-rapido), margin-left 0s linear var(--t-rapido), transform 0s linear var(--t-rapido), background-color var(--t-rapido), color var(--t-rapido);
}
.dato-vola > .pg::after { display: none; }
.dato-vola:hover > .pg, .dato-vola:focus-visible > .pg, .dato-vola.sopra > .pg, .dato-vola.attivo > .pg {
opacity: 1; margin-left: calc(100% + 3px);
transition: opacity var(--t-rapido), margin-left 0s, transform 0s, background-color var(--t-rapido), color var(--t-rapido);
}
.dato-vola.pg-sx:hover > .pg, .dato-vola.pg-sx:focus-visible > .pg, .dato-vola.pg-sx.sopra > .pg, .dato-vola.pg-sx.attivo > .pg {
margin-left: 0; transform: translate(calc(-100% - 3px), -50%);
}
/* dato su più righe senza posto ai lati (lo decide il guscio): accanto all'ultima riga (.pg-giu) oppure sopra l'angolo destro (.pg-su) */
.dato-vola.pg-giu > .pg { top: auto; bottom: 1px; }
.dato-vola.pg-sx.pg-giu:hover > .pg, .dato-vola.pg-sx.pg-giu:focus-visible > .pg, .dato-vola.pg-sx.pg-giu.sopra > .pg, .dato-vola.pg-sx.pg-giu.attivo > .pg {
transform: translateX(calc(-100% - 3px));
}
.dato-vola.pg-su > .pg { top: auto; bottom: calc(100% + 2px); left: auto; right: 0; }
.dato-vola.pg-su:hover > .pg, .dato-vola.pg-su:focus-visible > .pg, .dato-vola.pg-su.sopra > .pg, .dato-vola.pg-su.attivo > .pg { margin-left: 0; transform: none; }
/* il fondo dell'etichetta che vola resta pieno anche nel tema scuro, dove le tinte sono trasparenti */
.dato-vola:hover > .pg, .dato-vola:focus-visible > .pg, .dato-vola.sopra > .pg { background: linear-gradient(var(--blu-tinta-2), var(--blu-tinta-2)) var(--riquadro); }
.dato-vola.attivo > .pg { background: var(--blu-pieno); color: var(--su-blu-pieno); }
/* rimando: etichetta di pagina cliccabile, sempre visibile ma discreta (colonna «pag.») */
button.pg { cursor: pointer; }
button.pg:hover, button.pg.sopra, button.pg.zitta:focus-visible { background: var(--blu-tinta-2); color: var(--blu-testo); }
button.pg.attivo { background: var(--blu-pieno); color: var(--su-blu-pieno); }
/* .zitta: un rimando che resta in silenzio come le etichette dentro un dato (si accende insieme al dato con la stessa chiave) */
/* dato senza fonte: testo normale */
.dato-senza { border-radius: var(--r-2); }
/* 7 · I QUATTRO STATI ----------------------------------------------------- */
/* una forma e una parola per ognuno: mai solo il colore */
.sim { width: 15px; height: 15px; flex: none; display: block; }
.stato { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.st-certo { color: var(--certo); }
.st-verifica { color: var(--verifica); }
.st-proposta { color: var(--proposta); }
.st-mancante { color: var(--mancante); }
/* pastiglia: lo stesso stato con un fondo tenue */
.pastiglia { height: 22px; padding: 0 8px 0 5px; font-size: var(--t-13); border-radius: 11px; }
.pastiglia .sim { width: 13px; height: 13px; }
.pastiglia.st-certo { background: var(--certo-tinta); }
.pastiglia.st-verifica { background: var(--verifica-tinta); }
.pastiglia.st-proposta { background: var(--proposta-tinta); }
.pastiglia.st-mancante { background: var(--mancante-tinta); }
.legenda { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--t-13); color: var(--testo-2); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legenda b { font: 500 var(--t-13)/1 var(--car-testo); color: var(--testo); }
/* 8 · PULSANTI ------------------------------------------------------------ */
/* Un solo .btn-primario per vista. Misura normale 32 px, .piccolo 28 px. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
height: 32px; padding: 0 12px;
font-weight: 500; white-space: nowrap; text-decoration: none;
border-radius: var(--r-2);
transition: background-color var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido), transform var(--t-rapido), box-shadow var(--t-rapido);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; }
.btn.piccolo { height: 28px; padding: 0 10px; gap: 7px; font-size: var(--t-13); }
.btn.piccolo .ico:first-child { margin-left: -2px; }
.btn.largo { width: 100%; }
.btn-primario {
color: var(--su-azione); background: var(--azione);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--ombra-tasto);
}
.btn-primario:hover:not(:disabled) { background: var(--azione-sopra); }
/* spento è grigio neutro: il vermiglio slavato sembrerebbe un pulsante rotto. Il colore torna quando si può fare clic */
.btn-primario:disabled, .btn-primario[aria-disabled="true"] { opacity: 1; color: var(--testo-3); background: var(--etichetta); box-shadow: inset 0 0 0 1px var(--bordo); cursor: default; }
.btn-primario .ico:last-child { margin-right: -3px; transition: transform var(--t-medio) var(--curva); }
.btn-primario:hover:not(:disabled) .ico:last-child { transform: translateX(2px); }
.btn-secondario { color: var(--testo); background: var(--riquadro); border: 1px solid var(--bordo-forte); box-shadow: 0 1px 1px rgba(20, 18, 30, 0.04); }
.btn-secondario:hover:not(:disabled) { background: var(--riquadro-2); border-color: var(--testo-3); }
.btn-secondario.piccolo { color: var(--testo-2); border-color: var(--bordo); box-shadow: none; }
.btn-secondario.piccolo:hover:not(:disabled) { color: var(--testo); border-color: var(--bordo-forte); }
.btn-secondario[aria-pressed="true"] { color: var(--blu-testo); background: var(--blu-tinta); border-color: var(--blu); }
.btn-fantasma { color: var(--testo-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--velo); color: var(--testo); }
.btn-fantasma.blu { color: var(--blu-testo); }
/* pulsante che cancella: nelle viste ha solo il contorno, così il pieno vermiglio resta al pulsante primario.
Nella finestra di conferma, dove è la sola azione forte, è pieno */
.btn-pericolo { color: var(--pericolo); background: var(--riquadro); border: 1px solid var(--pericolo-bordo); box-shadow: 0 1px 1px rgba(20, 18, 30, 0.04); }
.btn-pericolo:hover:not(:disabled) { color: var(--pericolo-sopra); background: var(--pericolo-tinta); border-color: var(--pericolo); }
.finestra .btn-pericolo { color: #FFFFFF; background: var(--pericolo-pieno); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--ombra-tasto); }
.finestra .btn-pericolo:hover:not(:disabled) { color: #FFFFFF; background: var(--pericolo-pieno-sopra); border-color: transparent; }
/* pulsante con la sola icona: sempre con aria-label */
.btn-ico {
width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center;
color: var(--testo-2); border-radius: var(--r-2);
transition: background-color var(--t-rapido), color var(--t-rapido);
}
.btn-ico:hover:not(:disabled) { background: var(--velo); color: var(--testo); }
.btn-ico:disabled { color: var(--bordo-forte); }
/* gruppo di pulsanti con icona uniti (frecce, zoom) */
.gruppo { display: inline-flex; flex: none; border: 1px solid var(--bordo); border-radius: var(--r-2); background: var(--riquadro); }
.gruppo .btn-ico { height: 26px; border-radius: 0; }
.gruppo .btn-ico:first-child { border-radius: 5px 0 0 5px; }
.gruppo .btn-ico:last-child { border-radius: 0 5px 5px 0; }
.gruppo .btn-ico + .btn-ico { border-left: 1px solid var(--bordo); }
.gruppo .btn-ico:hover:not(:disabled) { background: var(--riquadro-2); }
/* collegamento nel testo */
.collega { color: var(--blu-testo); font-weight: 500; border-radius: var(--r-1); text-decoration: underline; text-decoration-color: var(--blu-bordo); text-underline-offset: 3px; transition: text-decoration-color var(--t-rapido); }
.collega:hover { text-decoration-color: currentColor; }
/* rimando a un punto di «Da chiarire» (Optimvs.alPunto): «Punto 5 →»; a decisione presa, la spunta al posto della freccia */
.al-punto { position: relative; display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-13); line-height: 20px; white-space: nowrap; }
.al-punto::after { content: ''; position: absolute; inset: -2px 0; } /* la riga è alta 20 px, il bersaglio 24 */
.al-punto .ico { width: 14px; height: 14px; flex: none; transition: transform var(--t-rapido) var(--curva); }
.al-punto .sim { width: 13px; height: 13px; flex: none; margin-right: 2px; }
/* a decisione presa: il disegno della risposta del team (Optimvs.risposta.icona): ✓ coincide · ≠ diverso · ? da chiedere.
Lo stesso disegno in Sintesi, Da chiarire e Registro; il colore lo dà il posto dove sta */
.al-punto.deciso .ico { color: var(--testo-2); }
.al-punto.deciso .ico.ris-coincide { color: var(--certo); }
@media (hover: hover) and (pointer: fine) { .al-punto:not(.deciso):hover .ico { transform: translateX(2px); } }
/* 9 · CAMPI --------------------------------------------------------------- */
.campo { display: grid; align-content: start; gap: 4px; min-width: 0; }
.campo-nome { font-size: var(--t-13); font-weight: 500; color: var(--testo-2); }
.campo-aiuto { font-size: var(--t-13); color: var(--testo-3); }
.campo-testo, .selettore {
width: 100%; min-width: 0; height: 32px; padding: 0 10px;
color: var(--testo); background: var(--riquadro);
border: 1px solid var(--bordo-forte); border-radius: var(--r-2);
box-shadow: inset 0 1px 1px rgba(20, 18, 30, 0.04);
transition: border-color var(--t-rapido), box-shadow var(--t-rapido), background-color var(--t-rapido);
}
textarea.campo-testo { height: auto; min-height: 64px; padding: 7px 10px; line-height: 1.45; resize: vertical; }
.campo-testo::placeholder { color: var(--testo-3); opacity: 1; }
.campo-testo:hover, .selettore:hover { border-color: var(--testo-3); }
.campo-testo:focus, .selettore:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-tinta-2); }
.campo-testo:disabled, .selettore:disabled { background: var(--riquadro-2); color: var(--testo-3); }
.campo-testo.piccolo, .selettore.piccolo { height: 28px; font-size: var(--t-13); }
.campo.errore .campo-testo, .campo-testo[aria-invalid="true"] { border-color: var(--pericolo); }
.campo.errore .campo-aiuto { color: var(--pericolo); }
/* campo con numero: cifre allineate a destra */
.campo-testo.cifre { text-align: right; font-variant-numeric: tabular-nums; }
/* campo di ricerca: icona a sinistra dentro il campo */
.campo-cerca { position: relative; display: flex; align-items: center; min-width: 0; }
.campo-cerca > .ico { position: absolute; left: 9px; color: var(--testo-3); pointer-events: none; }
.campo-cerca > .campo-testo { padding-left: 32px; }
/* selettore: il comando del sistema, con la nostra freccia. Da solo è largo quanto la voce più lunga
(in una fila di filtri non spinge via gli altri); dentro un .campo, o con .largo, prende tutta la riga */
.selettore {
width: auto; max-width: 100%;
appearance: none; -webkit-appearance: none;
padding-right: 30px; cursor: pointer;
background-image: var(--freccia); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px 16px;
}
.campo > .selettore, .selettore.largo { width: 100%; }
/* interruttore: */
.interruttore { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore-pista {
position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px;
background: var(--bordo-forte);
transition: background-color var(--t-rapido);
}
.interruttore-pista::after {
content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 18, 30, 0.35);
transition: transform var(--t-rapido) var(--curva);
}
.interruttore input:checked + .interruttore-pista { background: var(--blu-pieno); }
.interruttore input:checked + .interruttore-pista::after { transform: translateX(14px); }
.interruttore input:focus-visible + .interruttore-pista { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.interruttore input:disabled + .interruttore-pista { opacity: 0.5; }
/* 10 · SCHEDE (TAB) E SCELTE --------------------------------------------- */
/* schede: una riga di voci con il filo sotto quella scelta */
.schede { display: flex; gap: 2px; min-width: 0; border-bottom: 1px solid var(--bordo); }
.schede-voce {
position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none;
height: 34px; padding: 0 10px; margin-bottom: -1px;
font-weight: 500; color: var(--testo-2); white-space: nowrap;
border-radius: var(--r-2) var(--r-2) 0 0;
transition: color var(--t-rapido), background-color var(--t-rapido);
}
.schede-voce:hover { color: var(--testo); background: var(--velo); }
.schede-voce::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 1px; background: transparent; transition: background-color var(--t-rapido); }
.schede-voce[aria-selected="true"] { color: var(--testo); }
.schede-voce[aria-selected="true"]::after { background: var(--blu); }
.schede-n, .scelte-n { min-width: 20px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; font-size: var(--t-13); font-weight: 500; color: var(--testo-2); background: var(--etichetta); border-radius: 9px; }
/* scelte: poche alternative una accanto all'altra (filtri, risposta a tre vie) */
.scelte { display: inline-flex; flex: none; width: max-content; max-width: 100%; padding: 2px; gap: 2px; background: var(--etichetta); border-radius: var(--r-3); }
.scelte-voce {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 28px; padding: 0 10px;
font-size: var(--t-13); font-weight: 500; color: var(--testo-2); white-space: nowrap;
border-radius: var(--r-2);
transition: color var(--t-rapido), background-color var(--t-rapido), box-shadow var(--t-rapido);
}
.scelte-voce:hover { color: var(--testo); }
.scelte-voce[aria-pressed="true"], .scelte-voce[aria-selected="true"], .scelte-voce[aria-checked="true"] {
color: var(--testo); background: var(--riquadro);
box-shadow: 0 0 0 1px var(--bordo), 0 1px 2px rgba(20, 18, 30, 0.10);
}
/* 11 · RIQUADRO, GRIGLIE, COPPIE, CIFRE, ETICHETTE ------------------------ */
/* riquadro: il contenitore di base. Tre piani, da usare con misura:
.riquadro piano di lavoro (bordo, ombra leggera)
.riquadro.incassato secondo piano: senza ombra, fondo più scuro (note, regole comuni)
.riquadro.rialzato primo piano: ombra più profonda (la cosa più importante della vista) */
.riquadro {
display: flex; flex-direction: column; min-width: 0;
padding: 11px 14px 12px;
background: var(--riquadro); border: 1px solid var(--bordo); border-radius: var(--r-3);
box-shadow: var(--orlo-luce), var(--ombra-1);
}
.riquadro > h2, .riquadro > h3 { margin-bottom: 8px; }
.riquadro.incassato { background: var(--fondo-2); border-color: transparent; box-shadow: none; }
:root[data-tema="scuro"] .riquadro.incassato { background: var(--riquadro-2); }
.riquadro.rialzato { border-color: var(--bordo-forte); box-shadow: var(--orlo-luce), var(--ombra-2); }
.riquadro.senza-margine { padding: 0; overflow: hidden; }
/* testa del riquadro: titolo a sinistra, comandi o stato a destra */
.riquadro-testa { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 8px; }
.riquadro-testa > h2, .riquadro-testa > h3 { margin: 0; min-width: 0; }
.riquadro-testa > :last-child:not(:first-child) { margin-left: auto; }
.riquadro.senza-margine > .riquadro-testa { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--bordo); }
/* sezione della vista: titolo e contenuto */
.sezione { display: grid; gap: 8px; min-width: 0; }
.sezione-testa { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.sezione-testa > :last-child:not(:first-child) { margin-left: auto; }
/* griglie: le colonne seguono la larghezza del centro (600-1240 px), non della finestra */
.griglia { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); }
.griglia-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-3 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-4 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container centro (min-width: 860px) { .griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container centro (min-width: 980px) { .griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pila { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fila.a-capo { flex-wrap: wrap; }
.spinta { margin-left: auto; }
/* coppie nome / valore: - Nome
- Valore
…
*/
.coppie { display: grid; min-width: 0; }
.coppie > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 30px; padding: 5px 0; }
.coppie > div + div { border-top: 1px solid var(--bordo); }
.coppie dt { flex: none; max-width: 55%; color: var(--testo-2); }
.coppie dd { min-width: 0; text-align: right; font-weight: 500; }
/* valori lunghi (frasi): mette il nome sopra e il valore sotto, a sinistra */
.coppie.in-colonna > div { display: grid; justify-content: stretch; gap: 1px; padding: 7px 0; }
.coppie.in-colonna dt { max-width: none; font-size: var(--t-13); }
.coppie.in-colonna dd { text-align: left; text-wrap: pretty; }
/* cifra chiave: nome piccolo, valore grande (peso 600), riga sotto facoltativa */
.cifra { display: grid; align-content: start; align-self: start; justify-self: start; gap: 1px; min-width: 0; border-radius: 2px; }
.cifra-nome { display: flex; align-items: center; gap: 6px; height: 20px; font-size: var(--t-13); color: var(--testo-3); white-space: nowrap; }
.cifra-valore { font: 600 var(--t-cifra)/1.25 var(--car-testo); font-feature-settings: inherit; letter-spacing: -0.025em; white-space: nowrap; color: var(--testo); }
.cifra.grande .cifra-valore { font-size: var(--t-cifra-grande); line-height: 1.2; letter-spacing: -0.03em; }
.cifra-valuta, .cifra-unita { font: 400 var(--t-14)/1 var(--car-testo); letter-spacing: 0; color: var(--testo-2); }
.cifra-valuta { margin-right: 5px; }
.cifra-unita { margin-left: 6px; }
.cifra-sotto { font-size: var(--t-13); line-height: 18px; color: var(--testo-2); white-space: nowrap; }
/* cifra doppia «70 / 30»: due dati in una cifra sola, ognuno con la sua fonte e la sua etichetta di pagina (Cruscotto, Sintesi).
PuntiOp.rimando(a, zitta) + Op.rimando(b, zitta)
Op.dato('70', a, { classe: 'cifra-parte' }) / Op.dato('30', b, { classe: 'cifra-parte' }) */
.cifra-due { display: inline-grid; }
.cifra-due > .pg { grid-area: 1 / 1; justify-self: start; }
.cifra-due > .pg + .pg:not(.sopra):not(.attivo):not(:hover):not(:focus-visible) { opacity: 0; pointer-events: none; }
.cifra-due > .pg.sopra { z-index: 1; }
.cifra-parte { border-radius: var(--r-1); padding: 0 3px; margin: 0 -3px; font: inherit; letter-spacing: inherit; }
.cifra-parte:hover, .cifra-parte.sopra { background: var(--dato-sopra); color: var(--blu-testo); }
.cifra-parte.attivo { background: var(--blu-tinta); box-shadow: 0 0 0 1.5px var(--blu); color: var(--testo); }
.cifra-sbarra { margin: 0 0.18em; font-weight: 400; color: var(--testo-3); }
button.cifra:hover, button.cifra.sopra { background: var(--riquadro); box-shadow: 0 0 0 6px var(--riquadro); }
button.cifra.attivo { background: var(--blu-tinta); box-shadow: 0 0 0 6px var(--blu-tinta); outline: 1.5px solid var(--blu); outline-offset: 6px; }
/* etichetta: una parola o una sigla su fondo tenue */
.etichetta { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 7px; font-size: var(--t-13); font-weight: 500; color: var(--testo-2); white-space: nowrap; background: var(--etichetta); border-radius: var(--r-1); }
.etichetta.blu { color: var(--blu-testo); background: var(--blu-tinta); }
.etichetta.contorno { background: transparent; box-shadow: inset 0 0 0 1px var(--bordo-forte); }
/* testi di servizio */
.t-2 { color: var(--testo-2); }
.t-3 { color: var(--testo-3); }
.t-13 { font-size: var(--t-13); }
.forte { font-weight: 600; }
.taglia { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 12 · TABELLA ------------------------------------------------------------ */
/* */
.tabella-scorre { position: relative; overflow-x: auto; min-width: 0; }
.tabella { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.tabella caption { text-align: left; padding: 0 0 8px; font-size: var(--t-14); font-weight: 600; }
.tabella th {
padding: 8px 10px; text-align: left; font-weight: 500; color: var(--testo-3); white-space: nowrap;
background: var(--riquadro-2); border-bottom: 1px solid var(--bordo);
}
.tabella td { padding: 7px 10px; vertical-align: middle; border-bottom: 1px solid var(--bordo); }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr { transition: background-color var(--t-rapido); }
.tabella tbody tr:hover { background: var(--riquadro-2); }
.tabella th:first-child, .tabella td:first-child { padding-left: 14px; }
.tabella th:last-child, .tabella td:last-child { padding-right: 14px; }
.tabella .dx { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella .cx { text-align: center; }
.tabella .stretta { width: 1%; white-space: nowrap; }
.tabella .col-pag { width: 1%; text-align: right; white-space: nowrap; color: var(--testo-3); }
.tabella td.forte, .tabella .forte { font-weight: 600; color: var(--testo); }
.tabella tfoot td { font-weight: 600; background: var(--riquadro-2); border-top: 1px solid var(--bordo-forte); border-bottom: 0; }
/* riga cliccabile: apre la fonte come un dato */
.tabella tr[data-fonte] { cursor: pointer; }
.tabella tr[data-fonte]:focus-visible { outline-offset: -2px; }
.tabella tbody tr.attivo, .tabella tbody tr.attivo:hover { background: var(--blu-tinta); box-shadow: inset 2px 0 0 var(--blu); }
/* barra dentro una cella: */
.cella-barra { display: block; height: 4px; min-width: 48px; border-radius: 2px; background: var(--grafico-neutro-tinta); }
.cella-barra::before { content: ''; display: block; height: 100%; width: calc(var(--q, 0) * 100%); min-width: 3px; border-radius: inherit; background: var(--filo, var(--blu)); }
/* 13 · RIGHE CON BARRA, SEGNI, GRAFICI COMUNI ----------------------------- */
/* righe con il filo: sotto ogni riga una barra sottile in scala.
Le colonne si decidono con --colonne; l'ultima è il posto dell'etichetta di pagina. */
.righe { display: grid; margin: 0 -4px 0 -6px; --colonne: 28px minmax(0, 1fr) auto auto; }
.riga-b {
display: grid; grid-template-columns: var(--colonne); grid-template-rows: minmax(17px, auto) 3px; row-gap: 1px; column-gap: 5px; align-items: center;
width: 100%; padding: 2px 2px 1px 6px; /* 24 px in tutto: le righe una sotto l'altra sono bersagli da 24 px */
font-size: var(--t-13); line-height: 17px;
}
.riga-b > .pg { grid-column: -2 / -1; grid-row: 1; align-self: start; height: 17px; line-height: 17px; }
/* il filo: un binario chiaro e, sopra, la barra con la testa arrotondata */
.rb-filo {
grid-column: 1 / -2; grid-row: 2; height: 3px; border-radius: 1.5px;
background: var(--grafico-neutro-tinta);
}
.rb-filo::before {
content: ''; display: block; height: 100%; width: calc(var(--q, 0) * 100%); min-width: 3px; border-radius: inherit;
background: var(--filo, var(--blu));
}
.riga-b .rb-id { color: var(--testo-2); align-self: start; }
.riga-b .rb-nome { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.riga-b .rb-testo { min-width: 0; text-wrap: balance; overflow-wrap: break-word; }
.riga-b .rb-num { font-weight: 500; text-align: right; align-self: start; white-space: nowrap; }
.riga-b .sim { width: 12px; height: 12px; }
.riga-b .rb-nome .stato { height: 17px; }
.righe.neutre .riga-b { --filo: var(--grafico-forte); }
.riga-b.in-evidenza { --filo: var(--blu); }
/* segni: pieno o vuoto, tondo o a rombo */
.segno { width: 9px; height: 9px; flex: none; display: inline-block; border-radius: 50%; background: var(--testo-2); }
.segno.vuoto { background: var(--riquadro); box-shadow: inset 0 0 0 1.5px var(--testo-3); }
.segno.blu { background: var(--blu); }
.segno.rombo { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); }
.campione { width: 10px; height: 10px; flex: none; display: inline-block; border-radius: 2px; }
/* barra a segmenti: Optimvs.grafici.segmenti(...) */
.segmenti { display: flex; gap: 2px; height: 10px; min-width: 0; }
.segmenti.sottile { height: 6px; }
.segmenti.alta { height: 20px; }
.seg { min-width: 4px; border-radius: 2px; transition: opacity var(--t-rapido); }
/* si passa sopra una voce (o la si apre): il suo pezzo resta pieno, gli altri si fanno da parte */
[data-barra].scelta [data-seg] { opacity: 0.32; }
[data-barra].scelta [data-seg].acceso { opacity: 1; }
.tono-blu { background: var(--blu); }
.tono-blu-chiaro { background: var(--blu-chiaro); }
.tono-neutro { background: var(--grafico-neutro); }
.tono-tratteggio { background: repeating-linear-gradient(135deg, var(--grafico-neutro) 0 2px, var(--grafico-neutro-tinta) 2px 4.5px); }
.tono-certo { background: var(--certo-pieno); }
.tono-verifica { background: repeating-linear-gradient(135deg, var(--verifica-pieno) 0 2.5px, var(--verifica-tinta) 2.5px 5px); box-shadow: inset 0 0 0 1px var(--verifica-pieno); }
.tono-proposta { background: var(--proposta-pieno); }
.tono-mancante { background: var(--riquadro); box-shadow: inset 0 0 0 1.5px var(--mancante); }
/* linea del tempo in verticale: Optimvs.grafici.tempo(...) */
.tempo { position: relative; display: grid; flex: 1; align-content: space-between; margin: 0 -4px 0 -6px; }
.tempo::before { content: ''; position: absolute; left: 10px; top: 11px; bottom: 11px; width: 1px; background: var(--bordo-forte); }
.tempo-riga {
position: relative;
/* la colonna della data tiene «23 nov 12:00» (giorno a due cifre e ora) senza toccare il nome */
display: grid; grid-template-columns: 9px 87px minmax(0, 1fr) auto; align-items: center; column-gap: 7px;
width: 100%; height: 22px; padding: 0 2px 0 6px; font-size: var(--t-13);
}
.tempo-riga .segno { position: relative; }
.tempo-riga .segno.vuoto { background: var(--riquadro); }
.tempo-riga.dato-riga:hover .segno.vuoto { background: var(--riquadro-2); }
.tempo-riga.attivo .segno.vuoto { background: linear-gradient(var(--blu-tinta), var(--blu-tinta)) var(--riquadro); }
.tempo-data { white-space: nowrap; }
.tempo-data .ora-g { color: var(--testo-3); margin-left: 7px; }
.tempo-nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tempo-riga.passata .tempo-data, .tempo-riga.passata .tempo-nome { color: var(--testo-2); }
.tempo-riga.principale .tempo-data, .tempo-riga.principale .tempo-nome { color: var(--testo); font-weight: 500; }
.tempo-oggi { position: relative; display: flex; align-items: center; gap: 7px; height: 19px; padding: 0 2px 0 6px; font: 500 var(--t-13)/1 var(--car-testo); color: var(--blu-testo); white-space: nowrap; }
.tempo-oggi::before { content: ''; width: 9px; height: 2px; flex: none; background: var(--blu); border-radius: 1px; }
.tempo-oggi::after { content: ''; flex: 1; height: 0; border-top: 1px dashed var(--blu-bordo); }
/* linea del tempo in orizzontale: le tappe a passo uguale, in ordine */
.tempo-o { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0; padding-top: 2px; }
.tempo-o::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--bordo-forte); }
.tempo-o-tappa {
position: relative; display: grid; justify-items: start; align-content: start; gap: 2px;
min-width: 0; padding: 0 8px 4px 0; font-size: var(--t-13);
}
.tempo-o-tappa .segno { grid-column: 1 / -1; margin: 8px 0 8px; position: relative; }
.tempo-o-tappa .segno.vuoto { background: var(--riquadro); }
.tempo-o-tappa .segno.rombo { margin-left: 1px; }
.tempo-o-tappa .tempo-data { grid-column: 1 / -1; font-weight: 500; }
/* qui il segno della fonte è la sottolineatura punteggiata della data; l'etichetta compare in alto a destra */
.tempo-o-tappa.dato-riga .tempo-data { text-decoration: underline dotted var(--bordo-forte) 1px; text-underline-offset: 3px; }
.tempo-o-tappa > .pg { position: absolute; right: 6px; top: 5px; }
.tempo-o-tappa > .pg::after { display: none; }
.tempo-o-tappa .tempo-nome { grid-column: 1 / -1; max-width: 100%; color: var(--testo-2); white-space: normal; text-wrap: balance; }
.tempo-o-tappa.passata .tempo-data { color: var(--testo-2); font-weight: 400; }
.tempo-o-tappa.principale .tempo-data { color: var(--testo); font-weight: 600; }
.tempo-o-tappa.dato-riga { padding: 0 8px 4px 6px; margin-left: -6px; }
.tempo-o-oggi { position: relative; display: grid; justify-items: start; align-content: start; gap: 2px; min-width: 0; padding: 0 8px 4px 0; font-size: var(--t-13); font-weight: 500; color: var(--blu-testo); }
.tempo-o-oggi::before { content: ''; width: 2px; height: 17px; margin: 4px 0 4px 3px; background: var(--blu); border-radius: 1px; }
/* 14 · «DA FARE ORA», APRIBILE, AVANZAMENTO, STATO VUOTO ------------------ */
/* «Da fare ora»: una riga sottile, una frase e al massimo un pulsante */
.ora {
display: flex; align-items: center; gap: 12px;
min-height: 44px; padding: 5px 6px 5px 14px;
background: var(--blu-tinta); border: 1px solid var(--blu-bordo); border-radius: var(--r-3);
}
.ora-nome { flex: none; font-size: var(--t-13); font-weight: 600; color: var(--blu-testo); }
.ora-nome::after { content: ''; display: inline-block; width: 1px; height: 14px; margin-left: 12px; vertical-align: -2px; background: var(--blu-bordo); }
.ora-frase { flex: 1; min-width: 0; line-height: 1.3; text-wrap: pretty; }
/* la data che conta, accanto alla frase: in giorni, senza allarme. Se non ci sta va a capo tutta insieme */
.ora-nota { display: inline-block; color: var(--testo-2); white-space: nowrap; }
@container centro (max-width: 659px) {
.ora { min-height: 40px; padding-top: 3px; padding-bottom: 3px; }
}
/* apribile: Titolo
…
3 di 10
*/
.avanzamento { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--t-13); color: var(--testo-2); }
.avanzamento-testo { flex: none; white-space: nowrap; }
.avanzamento-testo b { font-weight: 600; color: var(--testo); }
.avanzamento-barra { flex: 1; min-width: 60px; height: 6px; border-radius: 3px; background: var(--grafico-neutro-tinta); overflow: hidden; }
.avanzamento-barra::before { content: ''; display: block; height: 100%; width: calc(var(--q, 0) * 100%); border-radius: inherit; background: var(--blu); transition: width var(--t-lento) var(--curva); }
/* stato vuoto, in costruzione, errore: Optimvs.vuoto(...)
(la classe è .stato-vuoto: .vuoto da sola è già la variante «vuoto» del segno) */
.stato-vuoto { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 220px; padding: 32px 24px; text-align: center; color: var(--testo-2); }
.stato-vuoto.in-riquadro { background: var(--riquadro); border: 1px dashed var(--bordo-forte); border-radius: var(--r-3); }
.stato-vuoto.basso { min-height: 0; padding: 20px 16px; }
.stato-vuoto-icona { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; color: var(--testo-2); background: var(--etichetta); }
.stato-vuoto-icona .ico { width: 18px; height: 18px; }
.stato-vuoto-titolo { font-size: var(--t-14); font-weight: 600; color: var(--testo); }
.stato-vuoto-testo { max-width: 46ch; text-wrap: balance; }
.stato-vuoto .btn { margin-top: 10px; }
.stato-vuoto-dettaglio { margin-top: 6px; max-width: 60ch; font-size: var(--t-13); line-height: 1.5; color: var(--testo-3); overflow-wrap: anywhere; }
.stato-vuoto.errore .stato-vuoto-icona { color: var(--pericolo); background: var(--pericolo-tinta); }
/* 15 · DOCUMENTO ---------------------------------------------------------- */
.documento { min-width: 0; overflow: hidden; background: var(--fondo-2); border-left: 0 solid var(--bordo-forte); }
.app.con-doc .documento, .avvio-gara .documento { border-left-width: 1px; }
.doc-dentro { display: flex; flex-direction: column; width: var(--doc-l); height: 100%; visibility: hidden; transition: visibility 0s var(--t-lento); container: documento / inline-size; }
.app.con-doc .doc-dentro, .avvio-gara .doc-dentro { visibility: visible; transition: visibility 0s; }
/* la barra sta un tono sotto il bianco e getta un'ombra corta: la pagina le scorre sotto */
.doc-barra {
position: relative; z-index: 2;
display: flex; align-items: center; gap: 8px; flex: none; height: var(--barra-a); padding: 0 10px 0 14px;
background: var(--barra); border-bottom: 1px solid var(--bordo); box-shadow: var(--ombra-barra);
}
.doc-nome { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
/* colonna stretta (finestra da 1280): di «Nascondi» resta l'icona, con il nome per chi non vede */
@container documento (max-width: 500px) {
.doc-nascondi-testo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#doc-nascondi { width: 28px; padding: 0; }
#doc-nascondi .ico:first-child { margin-left: 0; }
}
.doc-nome .ico { color: var(--testo-3); }
.doc-pag { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; padding-left: 9px; border-left: 1px solid var(--bordo); font-size: var(--t-13); color: var(--testo-2); white-space: nowrap; }
/* il numero di pagina si può scrivere: Invio porta alla pagina */
.doc-campo {
width: 30px; height: 24px; padding: 0 2px; text-align: center;
font-weight: 500; color: var(--testo);
background: transparent; border: 1px solid transparent; border-radius: var(--r-1);
transition: border-color var(--t-rapido), background-color var(--t-rapido), box-shadow var(--t-rapido);
}
.doc-campo:hover { border-color: var(--bordo-forte); background: var(--riquadro); }
.doc-campo:focus { outline: none; border-color: var(--blu); background: var(--riquadro); box-shadow: 0 0 0 3px var(--blu-tinta-2); }
/* il numero scatta quando la pagina cambia (dalla parte da cui arriva) */
.doc-campo.scatto { animation: scatto var(--t-lento) var(--curva); }
@keyframes scatto {
from { opacity: 0.2; transform: translateY(var(--da, 0px)); color: var(--blu-testo); }
55% { color: var(--blu-testo); }
to { opacity: 1; transform: none; }
}
/* il vassoio del documento: un piano da disegno, con una trama di punti appena visibile.
La pagina si apre alla larghezza del testo (125%); «riduci» la mostra intera. */
.doc-vista {
position: relative; /* le misure della pagina (offsetLeft, offsetTop) partono da qui */
flex: 1; min-height: 0; overflow: auto; padding: 16px;
overscroll-behavior: contain;
background-image: radial-gradient(circle, var(--trama) 0.75px, transparent 1px);
background-size: 12px 12px; background-position: 6px 6px;
}
.foglio {
position: relative; isolation: isolate;
width: calc(100% * var(--zoom, 1.25)); aspect-ratio: 992 / 1404; margin: 0 auto;
background: var(--foglio-carta); border-radius: 2px; box-shadow: var(--ombra-foglio);
}
.foglio img { display: block; width: 100%; height: 100%; border-radius: 2px; filter: var(--foglio-filtro); mix-blend-mode: multiply; }
/* cambio pagina: la nuova arriva da sotto se si va avanti, da sopra se si torna indietro */
.foglio.cambio { animation: pagina var(--t-medio) var(--curva) both; }
@keyframes pagina { from { opacity: 0.35; transform: translateY(var(--da, 0px)); } to { opacity: 1; transform: none; } }
.evidenze { position: absolute; inset: 0; pointer-events: none; }
.ev {
position: absolute; border-radius: 2px;
background: var(--evid); mix-blend-mode: multiply;
box-shadow: inset 0 -1.5px 0 var(--evid-riga);
}
/* il tratto: parte da sinistra, riga dopo riga, più carico; poi si posa */
.ev-entra { animation: traccia var(--t-lento) var(--curva) both; }
@keyframes traccia {
from { clip-path: inset(0 100% 0 0); background-color: var(--evid-forte); }
to { clip-path: inset(0 0 0 0); background-color: var(--evid); }
}
/* scheda della citazione */
.cit {
position: relative; z-index: 1; flex: none;
display: grid; gap: 8px;
padding: 12px 14px 13px;
background: var(--riquadro); border-top: 1px solid var(--bordo-forte); box-shadow: var(--ombra-scheda);
}
/* a ogni dato aperto il contenuto della scheda sale di poco, un pezzo dopo l'altro */
.cit.entra > * { animation: sale var(--t-medio) var(--curva) both; }
.cit.entra > :nth-child(2) { animation-delay: 35ms; }
.cit.entra > :nth-child(n+3) { animation-delay: 70ms; }
@keyframes sale { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cit-testa { display: flex; align-items: flex-start; gap: 10px; }
.cit-titolo { flex: 1; min-width: 0; font-size: var(--t-14); font-weight: 600; line-height: 1.35; }
.cit-perche { color: var(--testo-2); line-height: 1.4; }
.cit-passo { display: inline-flex; align-items: center; flex: none; margin: -3px -4px 0 0; }
.cit-passo .btn-ico { width: 24px; height: 24px; border-radius: var(--r-1); }
.cit-passo-n { min-width: 44px; text-align: center; font: 400 var(--t-13)/1 var(--car-testo); color: var(--testo-2); white-space: nowrap; }
/* la frase citata: il solo posto dove si usa il carattere a larghezza fissa */
.cit-frase {
margin: 0; padding: 8px 10px; max-height: 136px; overflow-y: auto; /* sei righe: una frase citata di solito entra intera */
font: 400 var(--t-13)/1.5 var(--car-citazione); font-feature-settings: normal; color: var(--testo);
background: var(--riquadro-2); border: 1px solid var(--bordo); border-radius: var(--r-2);
overflow-wrap: anywhere;
}
/* frase lunga: l'ultima riga sfuma, per dire che si può scorrere */
.cit-frase.lunga:not(.in-fondo) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.cit-piede { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-13); color: var(--testo-2); }
.cit-piede > .cit-dove { flex: 0 1 auto; }
/* i pezzi sono divisi da un punto a mezza altezza; a inizio riga il punto resta nascosto */
.cit-dove { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; margin-left: -15px; clip-path: inset(0 0 0 15px); }
.cit-dove > * { position: relative; padding-left: 15px; }
.cit-dove > *::before { content: '\00B7'; position: absolute; left: 5px; color: var(--testo-3); font-weight: 400; }
.cit-fonti { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
/* qui le etichette sono pulsanti che cambiano frase: hanno sempre il loro fondo */
.cit-fonti button.pg { height: 20px; line-height: 20px; background: var(--etichetta); color: var(--testo-2); }
.cit-fonti button.pg:hover { background: var(--blu-tinta-2); color: var(--blu-testo); }
.cit-fonti button.pg.attivo { background: var(--blu-pieno); color: var(--su-blu-pieno); }
.cit-vuota { color: var(--testo-2); }
.cit-vuota b { display: block; font-weight: 600; color: var(--testo); margin-bottom: 2px; }
/* 16 · AVVISO, FINESTRA DI CONFERMA, PANNELLO LATERALE --------------------- */
/* avviso a comparsa: in alto, sopra la colonna di lavoro. Lì non copre mai le righe della vista né i suoi comandi.
Dentro la gara sta a destra nella testata (48 px: ci sta intero; codice e nome della gara restano leggibili);
fuori dalla gara sta al centro, fra il titolo e i comandi della vista. Entra dall'alto, esce più in fretta.
Uno alla volta: stanno tutti nella stessa cella, così il nuovo entra dove stava quello che esce */
.avvisi { position: fixed; left: var(--menu-l); right: 0; top: 4px; z-index: 60; display: grid; justify-items: center; padding: 0 12px; pointer-events: none; }
.app.con-doc ~ .avvisi { right: var(--doc-l); }
.app.in-gara ~ .avvisi { justify-items: end; }
/* dentro la gara l'avviso lascia leggere codice e nome della gara, che stanno a sinistra nella testata */
.app.in-gara ~ .avvisi .avviso { max-width: min(480px, calc(100% - 232px)); }
/* documento nascosto: a destra nella testata c'è il pulsante «Documento», che resta libero */
:root:has(#gara-doc:not([hidden])) .avvisi { padding-right: 136px; }
/* pannello laterale aperto (lo scrive il guscio sulla radice): l'avviso si ferma al suo bordo */
:root.con-pannello .avvisi { right: var(--pannello-aperto, 0px); justify-items: end; padding-right: 16px; }
:root.con-pannello .app.con-doc ~ .avvisi { right: max(var(--pannello-aperto, 0px), var(--doc-l)); }
.avviso {
grid-area: 1 / 1;
display: flex; align-items: center; gap: 4px; max-width: min(480px, 100%);
min-height: 40px; padding: 4px 4px 4px 14px;
color: var(--su-inverso); background: var(--inverso); border-radius: var(--r-3);
box-shadow: var(--ombra-3);
pointer-events: auto;
opacity: 0; transform: translateY(-8px);
transition: opacity var(--t-rapido) ease-out, transform var(--t-rapido) ease-out;
}
.avviso.aperto { opacity: 1; transform: none; transition-duration: var(--t-medio); transition-timing-function: var(--curva); }
.avviso.esce { pointer-events: none; }
/* sempre una riga sola: su due coprirebbe il titolo della vista. Il testo intero resta nel suggerimento */
.avviso-testo { min-width: 0; padding: 5px 8px 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avviso-azione { flex: none; height: 30px; padding: 0 10px; font-weight: 600; color: var(--su-inverso-2); border-radius: var(--r-2); transition: background-color var(--t-rapido); }
.avviso-chiudi { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--su-inverso); opacity: 0.7; border-radius: var(--r-2); transition: background-color var(--t-rapido), opacity var(--t-rapido); }
.avviso-azione:hover, .avviso-chiudi:hover { background: rgba(127, 140, 160, 0.24); opacity: 1; }
.avviso :focus-visible { outline-color: var(--su-inverso-2); }
/* finestra di conferma: Optimvs.conferma(...) */
.finestra {
width: min(420px, calc(100vw - 32px)); padding: 0;
color: var(--testo); background: var(--riquadro);
border: 1px solid var(--bordo); border-radius: var(--r-4);
box-shadow: var(--ombra-3);
opacity: 0; transform: translateY(6px) scale(0.98);
transition: opacity var(--t-rapido) ease-out, transform var(--t-rapido) ease-out, overlay var(--t-rapido) allow-discrete, display var(--t-rapido) allow-discrete;
}
.finestra[open] { opacity: 1; transform: none; transition-duration: var(--t-medio); transition-timing-function: var(--curva); }
@starting-style { .finestra[open] { opacity: 0; transform: translateY(6px) scale(0.98); } }
.finestra::backdrop { background: var(--fondale); opacity: 0; transition: opacity var(--t-rapido) ease-out, overlay var(--t-rapido) allow-discrete, display var(--t-rapido) allow-discrete; }
.finestra[open]::backdrop { opacity: 1; transition-duration: var(--t-medio); }
@starting-style { .finestra[open]::backdrop { opacity: 0; } }
.finestra-corpo { display: grid; gap: 6px; padding: 18px 20px 4px; }
.finestra-titolo { font-size: var(--t-16); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.finestra-testo { color: var(--testo-2); }
.finestra-piede { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 18px; }
/* pannello laterale: Optimvs.pannello.apri(...). Entra da destra, sopra il documento */
.pannello {
position: fixed; right: 0; top: 0; bottom: 0; z-index: 40;
display: flex; flex-direction: column;
width: min(var(--pannello-l, 440px), calc(100vw - var(--menu-l) - 40px));
background: var(--riquadro); border-left: 1px solid var(--bordo-forte);
box-shadow: var(--ombra-3);
transform: translateX(calc(100% + 40px)); visibility: hidden;
transition: transform var(--t-medio) ease-out, visibility 0s var(--t-medio);
}
.pannello.aperto { transform: none; visibility: visible; transition: transform var(--t-lento) var(--curva-pannello), visibility 0s; }
.pannello-testa { display: flex; align-items: center; gap: 10px; flex: none; min-height: var(--barra-a); padding: 8px 10px 8px 18px; border-bottom: 1px solid var(--bordo); }
.pannello-titoli { display: grid; min-width: 0; margin-right: auto; }
.pannello-titolo { font-size: var(--t-16); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.pannello-sotto { font-size: var(--t-13); color: var(--testo-2); }
.pannello-corpo { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.pannello-piede { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; padding: 12px 18px; border-top: 1px solid var(--bordo); background: var(--barra); }
.pannello-piede:empty { display: none; }
/* 16b · FINESTRE STRETTE --------------------------------------------------- */
/* Sotto 1180 px il centro non regge con il documento a fianco: il documento parte chiuso (lo decide il guscio)
e, quando si apre, entra da destra sopra il centro, come un cassetto. Si richiude con «Nascondi». */
@media (max-width: 1179px) {
.app.con-doc, .avvio-gara .app { grid-template-columns: var(--menu-l) minmax(0, 1fr) 0px; }
.documento {
position: fixed; z-index: 30; top: 0; right: 0; bottom: 0;
width: min(var(--doc-l), calc(100vw - 48px)); border-left-width: 1px;
transform: translateX(calc(100% + 40px)); visibility: hidden;
transition: transform var(--t-medio) ease-out, visibility 0s var(--t-medio);
}
.app.con-doc .documento { transform: none; visibility: visible; box-shadow: var(--ombra-3); transition: transform var(--t-lento) var(--curva-pannello), visibility 0s; }
.doc-dentro { width: 100%; }
.app.con-doc ~ .avvisi { right: 0; }
}
/* Sotto 900 px (telefono, finestra molto stretta): un avviso a tutto schermo. Chi vuole prosegue lo stesso. */
.stretto { display: none; }
@media (max-width: 899px) {
.stretto { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: var(--fondo); }
.stretto-dentro { display: grid; justify-items: start; gap: 12px; max-width: 360px; }
.stretto h2 { font-size: var(--t-20); font-weight: 600; letter-spacing: -0.01em; }
.stretto p { color: var(--testo-2); line-height: 1.5; }
.stretto-ok .stretto { display: none; }
}
/* 17 · CAMBIO TEMA, MOVIMENTO RIDOTTO, ?fermo=1, STAMPA -------------------- */
/* cambio tema: per un attimo tutti i colori hanno una transizione, così il passaggio non scatta */
.cambio-tema *, .cambio-tema *::before, .cambio-tema *::after {
transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, fill 200ms ease, stroke 200ms ease, filter 200ms ease !important;
}
/* primo disegno della pagina: niente parte in movimento */
.avvio *, .avvio *::before, .avvio *::after { transition: none !important; }
.fermo *, .fermo *::before, .fermo *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* stampa (Registro › Esporta, oppure Cmd+P da qualunque vista): solo il centro, su carta chiara. Optimvs.stampa() passa al tema chiaro.
Il foglio è un A4 in piedi con i margini a zero: così Chrome non ha dove stampare la sua intestazione (data, titolo,
percorso del file sul disco). I margini li mette il guscio: i lati sul centro, sopra e sotto sulla vista, ripetuti a ogni
pagina (box-decoration-break: clone). Dove «clone» non c'è tornano i margini del foglio */
@page { size: A4 portrait; margin: 16mm 15mm 18mm; }
@supports (box-decoration-break: clone) {
@page { size: A4 portrait; margin: 0; }
@media print {
.centro { padding: 15mm 15mm 0; }
.vista { margin-top: -14mm; padding: 14mm 0 16mm; box-decoration-break: clone; }
}
}
@media print {
html, body { height: auto; overflow: visible; }
body { background: #FFFFFF; }
.menu, .documento, .gara-barra .gara-doc, .avvisi, .pannello, .salta, .vista-azioni, .no-stampa, .stretto { display: none !important; }
.app { display: block; height: auto; }
.centro, .centro-scorre { display: block; overflow: visible; }
.gara-barra { box-shadow: none; background: none; padding: 0 0 8px; height: auto; }
.gara-esempio { display: inline-block; margin-left: auto; padding: 1px 6px; font-size: var(--t-13); color: var(--testo-2); border: 1px solid var(--bordo-forte); border-radius: var(--r-1); white-space: nowrap; }
.centro-dentro { max-width: none; padding: 0; }
.riquadro { box-shadow: none; break-inside: avoid; }
.dato-vola { text-decoration: none; }
.dato .pg, .pg.zitta { display: none; }
/* sulla carta non c'è un dato «aperto»: niente fondo né contorno di selezione, e la «p. N» aperta torna grigia */
.dato.attivo, button.cifra.attivo, .cifra-parte.attivo, .tabella tbody tr.attivo { background: none !important; box-shadow: none !important; outline: none !important; }
button.pg.attivo { background: none !important; color: var(--testo-3) !important; }
* { animation: none !important; transition: none !important; }
}