/* ========================================================================================================= REAP — design system «Segnaletica» (restyling ottobre 2026; un aspetto solo dal novembre 2026, vedi docs/design.md) Sopra Bootstrap 5.3, CSS senza preprocessori. Una palette (Segnaletica), tema chiaro, una densità; il movimento ridotto segue l'impostazione del sistema operativo (prefers-reduced-motion). Layout: menu laterale con le sole pagine vere + colonna di lavoro centrata, larga uguale in ogni pagina (--col-max); sotto 760px il menu si apre dal pulsante nella barra alta. Caratteri in locale: Barlow Semi Condensed (titoli) + IBM Plex Sans (interfaccia, cifre tabellari). I colori dei livelli di danno (V/G/R, cartello di portata) hanno significato normativo: solo per i danni. ========================================================================================================= */ /* ---- Token della palette Segnaletica, tema chiaro. --ord-1…7: la scala «Petrolio» dei 7 stati, dal chiaro allo scuro lungo il flusso (validata con il controllo delle scale ordinali: una tinta, passi distinguibili, contrasto sul bianco) ---- */ :root{--bg:#EFEFEB;--surface:#FFFFFF;--surface2:#F7F7F4;--surface3:#E9E9E4;--line:#DCDCD5;--line2:#C3C3BA;--ink:#0E0E0C;--ink-2:#45453F;--ink-3:#6F6F67;--brand:#0E0E0C;--brand2:#1F1F1C;--brandink:#F6F6F1;--brandink2:#A3A39A;--accent:#FFD100;--accentink:#141100;--interactive:#1E56B8;--focus:#1E56B8;--shadow-rgb:12,12,10;--ord-1:#7ABCD3;--ord-2:#55A8C3;--ord-3:#2E93B1;--ord-4:#00809F;--ord-5:#006C89;--ord-6:#005871;--ord-7:#004559;--v:#1F8F4E;--g:#D97E00;--r:#D23A32;--cp:#6A55D0;color-scheme:light} /* ---- Caratteri in locale (OFL): Barlow Semi Condensed per titoli e saluto, IBM Plex Sans per interfaccia e numeri ---- */ @font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-semi-condensed-500.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-semi-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/barlow-semi-condensed-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("/static/fonts/ibm-plex-sans-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-sans-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/ibm-plex-mono-600.woff2") format("woff2"); } /* ---- Grandezze comuni (non dipendono dalla palette) ---- */ :root { --f-titolo: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; --f-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; /* letture tecniche (pagina di accesso) */ --r-card: 14px; --r-ctl: 10px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --riga: 44px; --ctl-h: 40px; --tocco: 48px; --t-xs: 11.5px; --t-sm: 13px; --t-md: 14.5px; --t-lg: 16px; --d-1: 150ms; --d-2: 240ms; --d-3: 400ms; --d-4: 600ms; --d-menu: 340ms; --d-passo: 14ms; --e-out: cubic-bezier(.2, .8, .2, 1); --e-io: cubic-bezier(.6, 0, .2, 1); --e-menu: cubic-bezier(.32, .72, 0, 1); --sh-1: 0 1px 2px rgba(var(--shadow-rgb), .07), 0 1px 1px rgba(var(--shadow-rgb), .04); --sh-2: 0 10px 24px -10px rgba(var(--shadow-rgb), .28), 0 2px 6px rgba(var(--shadow-rgb), .06); --sh-3: 0 28px 56px -16px rgba(var(--shadow-rgb), .36), 0 4px 12px rgba(var(--shadow-rgb), .10); --hz-a: #FFCC00; --hz-b: #16140F; /* nastro di pericolo: uguale in ogni tema */ --nav-w: 252px; --nav-w-compatto: 72px; --barra-h: 56px; --col-max: 1520px; } @media (prefers-reduced-motion: reduce) { :root { --d-1: 1ms; --d-2: 1ms; --d-3: 1ms; --d-4: 1ms; --d-menu: 1ms; --d-passo: 0ms; } } /* ---- Variabili del vecchio stile, ricollegate ai token: le parti non ridisegnate seguono palette e tema ---- */ :root, [data-bs-theme] { --c-white: var(--surface); --c-50: var(--bg); --c-100: var(--surface2); --c-200: var(--line); --c-300: var(--line2); --c-400: var(--ink-3); --c-500: var(--ink-3); --c-600: var(--ink-2); --c-700: var(--ink-2); --c-800: var(--ink); --c-900: var(--ink); --jh-yellow: var(--accent); --jh-yellow-ink: var(--accentink); --jh-yellow-soft: color-mix(in oklab, var(--accent) 16%, var(--surface)); --jh-yellow-glow: color-mix(in oklab, var(--accent) 28%, transparent); --jh-red: var(--r); --jh-red-deep: color-mix(in oklab, var(--r) 72%, var(--ink)); --jh-red-soft: color-mix(in oklab, var(--r) 14%, var(--surface)); --jh-black: var(--ink); --d-0: var(--brand); --d-1b: var(--brand2); --d-2b: var(--brand2); --d-ink: var(--brandink); --d-ink-dim: var(--brandink2); --d-ink-muted: var(--brandink2); --c-success: var(--v); --c-success-soft: color-mix(in oklab, var(--v) 14%, var(--surface)); --c-warning: var(--g); --c-warning-soft: color-mix(in oklab, var(--g) 16%, var(--surface)); --c-info: var(--interactive); --c-info-soft: color-mix(in oklab, var(--interactive) 13%, var(--surface)); --sh-xs: var(--sh-1); --sh-sm: var(--sh-1); --sh-md: var(--sh-2); --sh-lg: var(--sh-3); --sh-focus: 0 0 0 3px color-mix(in oklab, var(--focus) 28%, transparent); --ff-sans: var(--f-ui); --ff-display: var(--f-titolo); --t-fast: var(--d-1) var(--e-out); --t-med: var(--d-2) var(--e-out); --t-slow: var(--d-3) var(--e-out); --sidebar-w: var(--nav-w); --topbar-h: var(--barra-h); /* Bootstrap 5.3: colori del corpo, bordi, collegamenti, superfici (anche con data-bs-theme="dark") */ --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-body-font-family: var(--f-ui); --bs-body-font-size: var(--t-md); --bs-emphasis-color: var(--ink); --bs-heading-color: var(--ink); --bs-secondary-color: var(--ink-2); --bs-tertiary-color: var(--ink-3); --bs-secondary-bg: var(--surface3); --bs-tertiary-bg: var(--surface2); --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-border-radius: var(--r-ctl); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-card); --bs-link-color: var(--interactive); --bs-link-hover-color: var(--interactive); --bs-link-color-rgb: 47, 111, 179; --bs-focus-ring-color: color-mix(in oklab, var(--focus) 28%, transparent); --bs-card-bg: var(--surface); --bs-modal-bg: var(--surface); } /* ---- Base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--ink); text-wrap: balance; } h1, h2, .h1, .h2 { font-family: var(--f-titolo); font-weight: 600; letter-spacing: .005em; } h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-family: var(--f-ui); font-weight: 600; } a { color: var(--interactive); text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } ::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); } .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } .ico--sm { width: 15px; height: 15px; } .ico--lg { width: 24px; height: 24px; } .num, .tabular { font-variant-numeric: tabular-nums; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .occhiello { font: 600 var(--t-xs)/1.25 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .muto, .text-dim { color: var(--ink-3) !important; } .sec { color: var(--ink-2); } .text-muted { color: var(--ink-3) !important; } .text-strong { color: var(--ink); font-weight: 600; } .text-display { font-family: var(--f-titolo); } .small, small { font-size: 12.5px; } .marchio { width: 30px; height: 30px; flex: none; } .salta { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: var(--r-ctl); box-shadow: var(--sh-2); } .salta:focus { top: 12px; } /* ========================================================================================================= CORNICE: menu laterale per intento, barra alta, colonna di lavoro centrata, barra in basso su telefono ========================================================================================================= */ .app-shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; background: var(--bg); transition: grid-template-columns var(--d-menu) var(--e-menu); } /* la colonna di lavoro scorre insieme al bordo del menu */ :root[data-menu="icone"] .app-shell { grid-template-columns: var(--nav-w-compatto) minmax(0, 1fr); } .app-main { min-width: 0; display: flex; flex-direction: column; background-color: var(--bg); /* trama «Spalle» (docs/design.md, «Stile»): la spalla di una scaffalatura, delicata, solo in testata */ background-image: linear-gradient(to bottom, rgba(239, 239, 235, 0) 0, rgba(239, 239, 235, .5) 170px, var(--bg) 340px), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22112%22%20height%3D%22120%22%20viewBox%3D%220%200%20112%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230E0E0C%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M10%200V120M46%200V120%22%2F%3E%3Cpath%20d%3D%22M10%2010L46%2030L10%2050L46%2070L10%2090L46%20110M46%20110L10%20130M10%20-10L46%2010%22%2F%3E%3Cpath%20d%3D%22M10%202h36M10%20118h36%22%20stroke-opacity%3D%22.05%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat, repeat; } .lat { position: sticky; top: 0; height: 100vh; background: var(--brand); color: var(--brandink); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid color-mix(in oklab, var(--brandink) 8%, transparent); z-index: 40; overflow: hidden; } /* ---- Menu laterale: largo (252 px) o a sole icone (72 px), con un passaggio animato ---- Lo stato sta su (lo mette aspetto.js prima del primo disegno, lo cambia ui.js). Il DOM è lo stesso nei due stati: cambia solo il CSS, così ogni cosa si muove invece di sparire e ricomparire. - le icone restano ferme (stessa riga, stessa altezza: i titoli dei gruppi diventano una linea nello stesso spazio); - le scritte spariscono subito quando si stringe e rientrano a cascata quando si allarga (--n = posizione della voce); - i contatori scivolano dal fianco della voce all'angolo dell'icona; la colonna di lavoro scorre insieme al bordo. Durata e curva: --d-menu / --e-menu (con il movimento ridotto il passaggio è immediato). */ .nav__testa { position: relative; flex: none; height: 64px; } .nav__logo { position: absolute; left: 14px; top: 13px; display: block; color: inherit; text-decoration: none; white-space: nowrap; } .nav__logo:hover { color: inherit; } .nav__logo strong { font: 700 20px/1 var(--f-titolo); letter-spacing: .04em; } .nav__logo span { display: block; font-size: 11px; color: var(--brandink2); letter-spacing: .02em; margin-top: 2px; } .nav__logo .testo { margin: 0; transition: opacity calc(var(--d-menu) * .65) var(--e-out) calc(var(--d-menu) * .22), transform var(--d-menu) var(--e-menu); } .nav__marchio { position: absolute; left: 7px; top: 4px; opacity: 0; transform: scale(.7); transition: opacity calc(var(--d-menu) * .4) linear, transform var(--d-menu) var(--e-menu); } .nav__compatta { position: absolute; right: 14px; top: 17px; z-index: 1; border: 0; background: transparent; color: var(--brandink2); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; transition: right var(--d-menu) var(--e-menu), opacity calc(var(--d-menu) * .4) linear, background var(--d-1), color var(--d-1); } .nav__compatta:hover { background: var(--brand2); color: var(--brandink); } .nav__cerca-box { padding: 0 14px 6px; transition: padding var(--d-menu) var(--e-menu); } .nav__cerca { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: var(--r-ctl); border: 1px solid color-mix(in oklab, var(--brandink) 14%, transparent); background: color-mix(in oklab, var(--brandink) 6%, transparent); color: var(--brandink2); font-size: var(--t-sm); text-align: left; overflow: hidden; white-space: nowrap; transition: padding var(--d-menu) var(--e-menu), color var(--d-1), border-color var(--d-1); } .nav__cerca > * { flex: none; } .nav__cerca:hover { color: var(--brandink); border-color: color-mix(in oklab, var(--brandink) 26%, transparent); } .nav__cerca kbd { margin-left: auto; font: 500 11px/1 var(--f-ui); padding: 3px 5px; border-radius: 5px; background: transparent; border: 1px solid color-mix(in oklab, var(--brandink) 18%, transparent); color: var(--brandink2); } .nav__scorri { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 12px; scrollbar-width: thin; } /* Disegno della barra laterale (scaffalatura a tratto): riempie lo spazio sotto le poche voci, senza competere con loro */ .nav__disegno { flex: none; display: grid; justify-items: center; padding: 8px 26px 14px; } .nav__disegno svg { width: 100%; max-width: 188px; height: auto; display: block; } .nav__disegno .d-montante { stroke: #4A4A45; stroke-width: 3; stroke-dasharray: 5 3; } .nav__disegno .d-corrente { stroke: #5C5C56; stroke-width: 2.5; } .nav__disegno .d-pallet { stroke: #6F6F67; stroke-width: 1.5; } .nav__disegno .d-pallet--giallo { stroke: var(--accent); } :root[data-menu="icone"] .app-shell .nav__disegno { display: none; } @media (max-height: 760px) { .nav__disegno { display: none; } } .nav__gruppo { margin-top: 14px; } .nav__gruppo-nome { position: relative; padding: 0 10px 6px; font: 600 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--brandink2); white-space: nowrap; overflow: hidden; transition: color calc(var(--d-menu) * .65) var(--e-out) calc(var(--d-menu) * .22); } .nav__gruppo-nome::after { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 1px; background: color-mix(in oklab, var(--brandink) 16%, transparent); opacity: 0; transition: opacity calc(var(--d-menu) * .4) linear; } .nav__voce { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 0 10px; border-radius: 9px; border: 0; background: transparent; color: color-mix(in oklab, var(--brandink) 82%, transparent); font-size: var(--t-sm); font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap; transition: background var(--d-1), color var(--d-1), padding var(--d-menu) var(--e-menu); } .nav__voce:hover { background: var(--brand2); color: var(--brandink); } .nav__voce[aria-current="page"] { background: color-mix(in oklab, var(--accent) 16%, var(--brand)); color: var(--brandink); font-weight: 600; } .nav__voce[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--accent); } :root .nav__voce[aria-current="page"] { background: var(--accent); color: var(--accentink); } :root .nav__voce[aria-current="page"] .conta { background: var(--accentink); color: var(--accent); } .nav__voce .etich { flex: none; } .nav__voce .conta { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--brandink) 12%, transparent); color: var(--brandink); font-size: 11.5px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; transition: right var(--d-menu) var(--e-menu), top var(--d-menu) var(--e-menu), min-width var(--d-menu) var(--e-menu), height var(--d-menu) var(--e-menu), padding var(--d-menu) var(--e-menu), font-size var(--d-menu) var(--e-menu); } .nav__voce .conta--allerta { background: var(--accent); color: var(--accentink); } /* Piede del menu: chi ha fatto l'accesso, l'ingranaggio delle impostazioni ed «Esci» */ .nav__piede { border-top: 1px solid color-mix(in oklab, var(--brandink) 10%, transparent); padding: 10px; display: flex; align-items: center; gap: 4px; } .nav__utente { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; padding: 6px; color: var(--brandink); border: 0; background: transparent; border-radius: 10px; font: inherit; text-align: left; cursor: pointer; } .nav__utente:hover { background: color-mix(in oklab, var(--brandink) 9%, transparent); } .nav__chi { flex: 1; min-width: 0; text-align: left; } .nav__comandi { display: flex; gap: 2px; flex: none; } .nav__icona { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--brandink2); cursor: pointer; text-decoration: none; transition: background var(--d-1), color var(--d-1); } .nav__icona:hover { background: var(--brand2); color: var(--brandink); } .nav__icona[aria-current="page"] { background: var(--accent); color: var(--accentink); } .nav__icona:focus-visible { outline-color: var(--accent); } .nav__chi strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav__chi span { display: block; font-size: 11.5px; color: var(--brandink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lat .avatar { box-shadow: none; background: color-mix(in oklab, var(--accent) 85%, var(--brand)); color: var(--accentink); } /* Le scritte: rientrano dopo che il menu ha preso spazio, una dopo l'altra */ .lat .etich, .nav__chi, .nav__cerca span, .nav__cerca kbd { transition: opacity calc(var(--d-menu) * .65) var(--e-out) calc(var(--d-menu) * .22 + var(--n, 0) * var(--d-passo)), transform var(--d-menu) var(--e-menu) calc(var(--n, 0) * var(--d-passo)); } /* ---- a sole icone ---- */ :root[data-menu="icone"] .app-shell .lat .etich, :root[data-menu="icone"] .app-shell .nav__chi, :root[data-menu="icone"] .app-shell .nav__cerca span, :root[data-menu="icone"] .app-shell .nav__cerca kbd { opacity: 0; transform: translateX(-8px); transition: opacity calc(var(--d-menu) * .3) linear, transform var(--d-menu) var(--e-menu); } :root[data-menu="icone"] .app-shell .nav__logo .testo { opacity: 0; transform: translateX(-10px); pointer-events: none; transition: opacity calc(var(--d-menu) * .3) linear, transform var(--d-menu) var(--e-menu); } :root[data-menu="icone"] .app-shell .nav__marchio { opacity: 1; transform: none; transition: opacity calc(var(--d-menu) * .5) linear calc(var(--d-menu) * .3), transform var(--d-menu) var(--e-menu); } :root[data-menu="icone"] .app-shell .nav__compatta { right: 21px; opacity: 0; } :root[data-menu="icone"] .app-shell .nav__testa:hover .nav__compatta, :root[data-menu="icone"] .app-shell .nav__compatta:focus-visible { opacity: 1; } :root[data-menu="icone"] .app-shell .nav__testa:hover .nav__marchio, :root[data-menu="icone"] .app-shell .nav__testa:has(.nav__compatta:focus-visible) .nav__marchio { opacity: 0; transform: scale(.7); transition: opacity var(--d-1) linear, transform var(--d-1) var(--e-out); } @media (hover: none) { /* senza mouse il pulsante non può comparire al passaggio: resta visibile al posto del marchio */ :root[data-menu="icone"] .app-shell .nav__compatta { opacity: 1; } :root[data-menu="icone"] .app-shell .nav__marchio { opacity: 0; } } :root[data-menu="icone"] .app-shell .nav__cerca-box { padding-inline: 12px; } :root[data-menu="icone"] .app-shell .nav__cerca { padding-left: 15px; } :root[data-menu="icone"] .app-shell .nav__gruppo-nome { color: transparent; transition: color calc(var(--d-menu) * .3) linear; } :root[data-menu="icone"] .app-shell .nav__gruppo-nome::after { opacity: 1; transition-delay: calc(var(--d-menu) * .3); } :root[data-menu="icone"] .app-shell .nav__voce { padding-left: 17px; } :root[data-menu="icone"] .app-shell .nav__voce .conta { right: 4px; top: 10px; min-width: 18px; height: 16px; padding: 0 4px; font-size: 10px; } :root[data-menu="icone"] .app-shell .nav__piede, :root[data-menu="icone"] .app-shell .nav__comandi { flex-direction: column; align-items: center; } :root[data-menu="icone"] .app-shell .nav__utente { flex: none; padding: 6px 0; } :root[data-menu="icone"] .app-shell .nav__chi { display: none; } /* Menu a sole icone: il nome della voce accanto all'icona (ui.js lo mostra al passaggio e col fuoco). Nel menu del telefono il pulsante non serve. */ .reap-tooltip.nav-nome { transform: translateY(-50%); padding: 6px 10px; font-weight: 600; white-space: nowrap; } .menu-tel .nav__compatta { display: none; } .barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: var(--barra-h); padding: 0 var(--sp-6); border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: blur(8px); } .barra__briciole { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-sm); color: var(--ink-3); } .barra__briciole a { color: var(--ink-2); text-decoration: none; white-space: nowrap; } .barra__briciole a:hover { color: var(--ink); text-decoration: underline; } .barra__briciole .qui { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra__azioni { margin-left: auto; display: flex; align-items: center; gap: 6px; } .barra .barra__menu { display: none; } /* Sul computer la barra alta non serve (il nome della pagina è nel titolo, «Cerca» nel menu): resta solo al telefono, dove porta il pulsante del menu e il percorso. Sul computer il percorso delle schede sta sopra il titolo. */ @media (min-width: 761px) { .barra { display: none; } } .briciole-pagina { margin-bottom: var(--sp-3); } .briciole-pagina .breadcrumb { margin: 0; } @media (max-width: 760px) { .briciole-pagina { display: none; } } .rete { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; background: color-mix(in oklab, var(--v) 14%, var(--surface)); color: var(--ink); } .rete::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v); } .rete--off { background: color-mix(in oklab, var(--g) 18%, var(--surface)); } .rete--off::before { background: var(--g); } /* Una sola larghezza per tutte le pagine: passando da una all'altra (o da una vista all'altra) la colonna non si sposta. */ .content { width: 100%; max-width: var(--col-max); margin: 0 auto; padding: var(--sp-6) var(--sp-6) 56px; flex: 1; min-width: 0; } .menu-tel { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-columns: min(300px, 86%) 1fr; } .menu-tel .lat { display: flex; height: 100vh; } .menu-tel__velo { border: 0; background: rgba(var(--shadow-rgb), .42); } /* ---- Testata della pagina ---- */ .testata { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); } .testata__testo { min-width: 0; flex: 1 1 320px; } .testata__testo .occhiello { margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .testata h1 { font: 700 46px/1 var(--f-titolo); margin: 0; letter-spacing: .003em; } .testata__sotto { margin: 6px 0 0; color: var(--ink-2); } .testata__azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .saluto { font: 600 42px/1 var(--f-titolo); margin: 0; } .saluto em { font-style: normal; background: linear-gradient(transparent 62%, var(--accent) 62% 92%, transparent 92%); color: inherit; } /* ========================================================================================================= COMPONENTI ========================================================================================================= */ .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface3); border-radius: var(--r-ctl); max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg button { border: 0; background: transparent; padding: 6px 11px; border-radius: 8px; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background var(--d-1), color var(--d-1), box-shadow var(--d-1); } .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); font-weight: 600; } .btn { --b-bg: var(--surface); --b-fg: var(--ink); --b-bd: var(--line2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg); font-weight: 600; font-size: var(--t-sm); line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: none; transition: transform var(--d-1) var(--e-out), background var(--d-1), border-color var(--d-1), box-shadow var(--d-1), color var(--d-1); } .btn:hover { background: var(--b-bg); color: var(--b-fg); border-color: var(--ink-3); box-shadow: var(--sh-1); } .btn:active, .btn.active, .btn:first-child:active { transform: scale(.97); background: var(--b-bg); color: var(--b-fg); border-color: var(--b-bd); } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; } .btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: .55; cursor: not-allowed; background: var(--b-bg); color: var(--b-fg); border-color: var(--b-bd); } .btn--primario, .btn-primary, .btn-warning { --b-bg: var(--accent); --b-fg: var(--accentink); --b-bd: transparent; box-shadow: var(--luce-pieno); } .btn--primario:hover, .btn-primary:hover, .btn-warning:hover { border-color: transparent; box-shadow: var(--luce-pieno), 0 6px 16px -8px rgba(var(--shadow-rgb), .45); filter: brightness(1.03); } .btn--scuro, .btn-dark { --b-bg: var(--ink); --b-fg: var(--surface); --b-bd: transparent; } .btn--scuro:hover, .btn-dark:hover { border-color: transparent; } .btn--ghost, .btn-ghost, .btn-link { --b-bg: transparent; --b-bd: transparent; } .btn--ghost:hover, .btn-ghost:hover { --b-bg: var(--surface3); border-color: transparent; box-shadow: none; } .btn-link { color: var(--interactive); --b-fg: var(--interactive); } .btn-link:hover { text-decoration: underline; box-shadow: none; border-color: transparent; } .btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-outline-primary { --b-bg: var(--surface); --b-fg: var(--ink); --b-bd: var(--line2); } .btn-success { --b-bg: var(--v); --b-fg: #fff; --b-bd: transparent; } .btn-outline-success { --b-bg: var(--surface); --b-fg: var(--ink); --b-bd: color-mix(in oklab, var(--v) 60%, var(--line2)); } .btn-danger { --b-bg: var(--r); --b-fg: #fff; --b-bd: transparent; } .btn-outline-danger, .btn--pericolo { --b-bg: var(--surface); --b-fg: var(--r); --b-bd: color-mix(in oklab, var(--r) 45%, var(--line2)); } .btn-outline-warning { --b-bg: var(--surface); --b-fg: var(--ink); --b-bd: color-mix(in oklab, var(--g) 60%, var(--line2)); } .btn-info, .btn-outline-info { --b-bg: var(--surface); --b-fg: var(--interactive); --b-bd: color-mix(in oklab, var(--interactive) 45%, var(--line2)); } .btn-sm, .btn--sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; } .btn-lg, .btn--tocco { min-height: var(--tocco); padding: 0 20px; font-size: var(--t-lg); } .btn--icona, .btn-icon { width: var(--ctl-h); padding: 0; } .btn-sm.btn--icona, .btn--sm.btn--icona { width: 32px; } .btn.in-corso { pointer-events: none; } .btn.in-corso::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } .btn-close { filter: none; opacity: .6; } /* Moduli (Bootstrap e campi nuovi) */ .campo, .form-control, .form-select { width: 100%; min-height: var(--ctl-h); padding: 8px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line2); background-color: var(--surface); color: var(--ink); font-size: var(--t-md); transition: border-color var(--d-1), box-shadow var(--d-1); } .form-select { padding-right: 36px; } .campo:hover, .form-control:hover, .form-select:hover { border-color: var(--ink-3); } .campo:focus, .form-control:focus, .form-select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 25%, transparent); background-color: var(--surface); color: var(--ink); } .form-control::placeholder, .campo::placeholder { color: var(--ink-3); } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface2); color: var(--ink-2); } .form-control-sm, .form-select-sm, .campo--sm { min-height: 32px; padding: 4px 10px; font-size: var(--t-sm); border-radius: 8px; } .form-select-sm { padding-right: 30px; } textarea.form-control, textarea.campo { min-height: 96px; line-height: 1.55; resize: vertical; } .form-label, .etichetta { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: 6px; color: var(--ink); } .etichetta .req { color: var(--ink-2); margin-left: 2px; } /* niente rosso: è dei danni */ .form-text, .aiuto { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; } .form-check-input { border-color: var(--line2); background-color: var(--surface); } .form-check-input:checked { background-color: var(--interactive); border-color: var(--interactive); } .form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 25%, transparent); border-color: var(--focus); } /* campi non validi: niente rosso (è dei danni, docs/design.md): bordo nero e segnale a strisce davanti al messaggio */ .invalid-feedback { align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: 12.5px; } .is-invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-feedback { display: flex; } .invalid-feedback::before { content: ""; flex: none; width: 16px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--hz-a) 0 3px, var(--hz-b) 3px 6px); box-shadow: 0 0 0 1px var(--hz-b); } .is-invalid, .campo[aria-invalid="true"], .form-control[aria-invalid="true"], .form-select[aria-invalid="true"], .was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); background-image: none !important; } .is-invalid:focus, .campo[aria-invalid="true"]:focus, .form-control[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--ink), var(--sh-focus); } .input-group-text { background: var(--surface2); border-color: var(--line2); color: var(--ink-2); } .griglia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); } .griglia-campi .largo { grid-column: 1 / -1; } .interruttore { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .interruttore input { appearance: none; width: 34px; height: 20px; border-radius: 10px; background: var(--line2); position: relative; transition: background var(--d-2); margin: 0; cursor: pointer; flex: none; } .interruttore input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: transform var(--d-2) var(--e-out); box-shadow: var(--sh-1); } .interruttore input:checked { background: var(--interactive); } .interruttore input:checked::after { transform: translateX(14px); } .cerca-campo { position: relative; flex: 1 1 240px; max-width: 360px; } .cerca-campo .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .cerca-campo .campo, .cerca-campo .form-control { padding-left: 36px; } /* Card e griglie */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; position: relative; color: var(--ink); box-shadow: none; } .card:not(.p-0):not(.card--bs) { padding: var(--sp-5); } .card > .card-header, .card > .card-body, .card > .card-footer, .card > .list-group { margin: 0; } .card:has(> .card-body), .card:has(> .card-header), .card:has(> .list-group) { padding: 0; } .card-header { background: transparent; border-bottom: 1px solid var(--line); padding: 14px 18px; font-weight: 600; } .card-header:first-child { border-radius: var(--r-card) var(--r-card) 0 0; } .card-body { padding: 18px; } .card-footer { background: var(--surface2); border-top: 1px solid var(--line); padding: 12px 18px; } .card--piatta { background: var(--surface2); } /* Scheda apribile (tutta la scheda porta altrove): ombra a riposo; col mouse sale di 3 px. Le schede ferme non hanno ombra. */ .card--apribile, .card--cliccabile { cursor: pointer; color: inherit; text-decoration: none; box-shadow: var(--sh-1); transition: transform var(--d-solleva) var(--e-out), box-shadow var(--d-solleva) var(--e-out), border-color var(--d-1); } .card--cliccabile:hover, .card--apribile:hover { color: inherit; } @media (hover: hover) and (pointer: fine) { .card--apribile:hover, .card--cliccabile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line2); } } .card--apribile:active, .card--cliccabile:active { transform: translateY(-1px) scale(.995); transition-duration: 100ms; } .card__testa { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); min-width: 0; flex-wrap: wrap; } .card__testa h2, .card__testa h3 { font: 600 15px/1.3 var(--f-ui); margin: 0; } .card__testa h2.grande { font: 600 21px/1.15 var(--f-titolo); letter-spacing: .01em; } .card__testa .dx { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .card__sotto { font-size: var(--t-sm); color: var(--ink-3); margin: 2px 0 0; } .surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .griglia { display: grid; gap: var(--sp-5); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g-cruscotto { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .g-dettaglio { grid-template-columns: minmax(0, 1fr) 340px; } .blocco + .blocco, .blocco { margin-top: var(--sp-6); } .titolo-sez { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--sp-3); flex-wrap: wrap; } .titolo-sez h2 { font: 600 22px/1.15 var(--f-titolo); margin: 0; } .titolo-sez .dx { margin-left: auto; } .sep { height: 1px; background: var(--line); margin: var(--sp-4) 0; border: 0; opacity: 1; } hr { border-color: var(--line); opacity: 1; } /* Riquadri numerici */ .tile { display: flex; flex-direction: column; gap: 6px; } .tile__val { font: 600 34px/1 var(--f-ui); letter-spacing: -.01em; } .tile__riga { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .delta { font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; } .delta--su { color: var(--v); } .delta--giu { color: var(--r); } .delta--neutro { color: var(--ink-3); } .spark { width: 112px; height: 34px; overflow: visible; } /* Badge, chip, avatar, livelli di danno, rischio alto */ .stato { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--surface3); color: var(--ink); border: 1px solid var(--line); } .stato i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 22%, transparent); } .danno { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .pallino-d { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 11px/1 var(--f-ui); font-style: normal; color: #fff; background: var(--c); box-shadow: 0 0 0 2px var(--surface); } .pallino-d--v { --c: var(--v); } .pallino-d--g { --c: var(--g); color: #241600; } .pallino-d--r { --c: var(--r); } .pallino-d--cp { --c: var(--cp); } .rischio { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--ink); background: var(--surface3); border: 1px solid var(--line); white-space: nowrap; } .rischio::before { content: ""; width: 22px; height: 16px; border-radius: var(--r-pill); background: repeating-linear-gradient(-45deg, var(--hz-a) 0 4px, var(--hz-b) 4px 8px); } .chip, .filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--surface); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; text-decoration: none; transition: background var(--d-1), border-color var(--d-1), color var(--d-1); } .chip:hover, .filter-chip:hover { border-color: var(--ink-3); color: var(--ink); } .chip[aria-pressed="true"], .filter-chip.active { background: var(--ink); border-color: var(--ink); color: var(--surface); } .chip .n { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--ink-3); } .chip[aria-pressed="true"] .n { color: color-mix(in oklab, var(--surface) 70%, transparent); } .chip i.c { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .etichetta-dato { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); padding: 2px 8px; border-radius: var(--r-sm); background: var(--surface3); white-space: nowrap; } .etichetta-dato--att { background: color-mix(in oklab, var(--g) 18%, var(--surface)); color: var(--ink); font-weight: 600; } .etichetta-dato--ko { background: color-mix(in oklab, var(--r) 15%, var(--surface)); color: var(--ink); font-weight: 600; } .etichetta-dato--ok { background: color-mix(in oklab, var(--v) 15%, var(--surface)); color: var(--ink); font-weight: 600; } .avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 600 11.5px/1 var(--f-ui); color: var(--ink); background: var(--surface3); box-shadow: 0 0 0 2px var(--surface); } .avatar--sm { width: 24px; height: 24px; font-size: 10px; } .avatar--lg { width: 44px; height: 44px; font-size: 15px; } .avatar--xl { width: 96px; height: 96px; font-size: 30px; } /* senza foto: le iniziali sul colore fisso della persona; con la foto: la foto, e sotto le iniziali se non arriva */ .avatar--persona { background: var(--av); color: #fff; } .avatar--foto { position: relative; overflow: hidden; background: var(--av, var(--surface3)); color: #fff; } .avatar--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .profilo { display: grid; justify-items: center; text-align: center; gap: 12px; padding-block: 18px 8px; } .profilo__chi { display: grid; gap: 2px; } .profilo__chi strong { font-size: 1.0625rem; } .profilo__chi span { font-size: var(--t-sm); color: var(--ink-3); } .profilo__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .profilo__nota { margin: 4px 0 0; max-width: 42ch; font-size: 12.5px; color: var(--ink-3); } .avatar--yellow { background: var(--accent); color: var(--accentink); } .avatar--black, .avatar--dark { background: var(--ink); color: var(--surface); } .pila { display: inline-flex; } .pila .avatar + .avatar { margin-left: -8px; } .icona-tonda { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in oklab, var(--c, var(--ink-3)) 14%, var(--surface)); color: var(--ink); } /* Linea a fermate (il flusso in 7 stati) */ .linea { position: relative; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 0; } .linea__binario { position: absolute; left: calc(100% / var(--n, 7) / 2); right: calc(100% / var(--n, 7) / 2); top: 17px; height: 4px; border-radius: 2px; background: var(--line); } .linea__fatto { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--ink); width: var(--avanz, 0%); transition: width var(--d-4) var(--e-io); } .fermata { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 4px; border: 0; background: none; color: inherit; min-width: 0; text-decoration: none; } .fermata__punto { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; z-index: 1; background: var(--surface); border: 2px solid var(--line2); color: var(--ink-3); transition: transform var(--d-2) var(--e-out), background var(--d-2), border-color var(--d-2); } .fermata--fatta .fermata__punto { background: var(--ink); border-color: var(--ink); color: var(--surface); } .fermata--qui .fermata__punto { background: var(--accent); border-color: var(--ink); color: var(--accentink); transform: scale(1.12); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 30%, transparent); } .fermata__nome { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.25; } .fermata--qui .fermata__nome { color: var(--ink); } .fermata__dett { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .fermata__conta { font: 600 26px/1 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; } a.fermata, button.fermata { cursor: pointer; border-radius: 12px; padding-block: 6px; transition: background var(--d-1); } a.fermata:hover, button.fermata:hover { background: var(--surface3); color: inherit; } a.fermata:hover .fermata__punto, button.fermata:hover .fermata__punto { transform: translateY(-2px); } /* Tabelle (vista Elenco e tabelle Bootstrap) */ .tabella-box, .table-responsive { overflow-x: auto; } .tabella-box { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); } table.tabella, .table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--surface2); --bs-table-striped-bg: var(--surface2); color: var(--ink); margin-bottom: 0; } .tabella th, .table > thead th { text-align: left; font: 600 12px/1.2 var(--f-ui); letter-spacing: .02em; color: #CFCFC7; padding: 12px 14px; border-bottom: 0; white-space: nowrap; background: var(--brand); } .tabella th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; gap: 4px; align-items: center; } .tabella th button:hover { color: var(--brandink); } .tabella th button:focus-visible { outline-color: var(--accent); } .tabella td, .table > tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; height: var(--riga); } .tabella tbody tr { transition: background var(--d-1); } .tabella tbody tr:hover { background: var(--surface2); } .tabella tbody tr.cliccabile { cursor: pointer; } .tabella td.num, .tabella th.num { text-align: right; font-variant-numeric: tabular-nums; } .tabella .principale-cella strong { display: block; font-weight: 600; } .tabella .principale-cella span { display: block; font-size: 12px; color: var(--ink-3); } .table-light, .table-light > th, .table > thead.table-light th { --bs-table-bg: var(--brand); --bs-table-color: #CFCFC7; background: var(--brand); color: #CFCFC7; } /* Schede (tab) e tab Bootstrap */ .schede, .nav-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .schede button, .nav-tabs .nav-link { border: 0; background: none; padding: 12px 14px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; border-radius: 0; transition: color var(--d-1), border-color var(--d-1); } .schede button:hover, .nav-tabs .nav-link:hover { color: var(--ink); border-color: transparent; isolation: auto; } .schede button[aria-selected="true"], .nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--ink); background: none; } .schede .n, .nav-tabs .badge { font-size: 11.5px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface3) !important; color: var(--ink-2) !important; font-variant-numeric: tabular-nums; font-weight: 600; } .nav-pills .nav-link { color: var(--ink-2); border-radius: var(--r-ctl); } .nav-pills .nav-link.active { background: var(--ink); color: var(--surface); } .tab-content > .tab-pane { padding: 0; } /* Grafici SVG, tooltip */ .scorri-x { overflow-x: auto; } .grafico { width: 100%; height: auto; display: block; overflow: visible; } .grafico text { font: 500 11px var(--f-ui); fill: var(--ink-3); font-variant-numeric: tabular-nums; } .grafico .forte { fill: var(--ink); font-weight: 600; } .grafico .griglia-l { stroke: var(--line); stroke-width: 1; } .grafico .asse { stroke: var(--line2); stroke-width: 1; } .grafico .bersaglio { fill: transparent; cursor: pointer; } .grafico .barra-g { transition: opacity var(--d-1); } .grafico .barra-g:hover, .grafico .barra-g:focus { opacity: .82; outline: none; } .disegna { stroke-dasharray: var(--lungh); stroke-dashoffset: var(--lungh); animation: disegna var(--d-4) var(--e-io) forwards; } @keyframes disegna { to { stroke-dashoffset: 0; } } .cresce { transform-box: fill-box; transform-origin: bottom; animation: cresce var(--d-4) var(--e-out) both; } @keyframes cresce { from { transform: scaleY(0); } } .cresce-x { transform-box: fill-box; transform-origin: left; animation: crescex var(--d-4) var(--e-out) both; } @keyframes crescex { from { transform: scaleX(0); } } .reap-tooltip { position: fixed; z-index: 2100; pointer-events: none; background: var(--ink); color: var(--surface); padding: 8px 10px; border-radius: 9px; font-size: 12.5px; line-height: 1.4; box-shadow: var(--sh-2); max-width: 260px; } .reap-tooltip strong { font-size: 14px; font-variant-numeric: tabular-nums; } .reap-tooltip .riga-t { display: flex; align-items: center; gap: 6px; } .reap-tooltip .riga-t i { width: 10px; height: 2px; background: var(--c); } .impilata { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--surface); } .impilata span { background: var(--c); min-width: 3px; transition: flex-grow var(--d-4) var(--e-io); } .impilata--alta { height: 14px; border-radius: 7px; } .legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); } .legenda span { display: inline-flex; align-items: center; gap: 6px; } .legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .anello { width: 64px; height: 64px; flex: none; } .anello circle { fill: none; stroke-width: 7; } .anello .traccia { stroke: var(--surface3); } .anello .valore { stroke: var(--c, var(--ink)); stroke-linecap: round; transition: stroke-dashoffset var(--d-4) var(--e-io); } .anello text { font: 700 15px var(--f-ui); fill: var(--ink); } /* Storia (linea del tempo verticale) ed elenchi */ .storia { list-style: none; margin: 0; padding: 0; position: relative; } .storia::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .storia li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; } .storia .punto { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line2); color: var(--ink-2); z-index: 1; } .storia .punto--forte { background: var(--ink); border-color: var(--ink); color: var(--surface); } .storia strong { font-weight: 600; font-size: var(--t-sm); } .storia .quando { font-size: 12px; color: var(--ink-3); } .lista { list-style: none; margin: 0; padding: 0; display: grid; } .lista > li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); min-width: 0; } .lista > li:last-child { border-bottom: 0; } .lista .testo { min-width: 0; flex: 1; } .lista .testo strong { display: block; font-weight: 600; font-size: var(--t-sm); } .lista .testo span { display: block; font-size: 12.5px; color: var(--ink-3); } .lista .dx { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; } .list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--line); --bs-list-group-action-hover-bg: var(--surface2); --bs-list-group-active-bg: var(--ink); --bs-list-group-active-border-color: var(--ink); border-radius: var(--r-card); } /* Pianta del magazzino, strumenti, livelli di danno */ /* Con Shift premuto la mappa si trascina: il puntatore lo dice (isp-ispezione) */ .viewer-pane.sposta-shift, .viewer-pane.sposta-shift * { cursor: grab !important; } /* Disegni navigabili come le mappe (viewer.naviga): mano aperta sul disegno, mano chiusa mentre si sposta; i comandi sopra il disegno tengono il loro puntatore, gli strumenti il mirino. */ .mappa-naviga { cursor: grab; -webkit-user-select: none; user-select: none; } .mappa-naviga :is(.viewer-toolbar, .viewer-hint) { cursor: default; } .mappa-sposta, .mappa-sposta * { cursor: grabbing !important; } .pianta { position: relative; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface2); overflow: hidden; } .attrezzi { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: var(--sh-2); z-index: 5; } .attrezzi button { width: 46px; height: 46px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; } .attrezzi button[aria-pressed="true"], .attrezzi button.active { background: var(--ink); color: var(--surface); } .attrezzi button:hover:not([aria-pressed="true"]) { background: var(--surface3); color: var(--ink); } .livelli-d { display: flex; gap: 8px; } .livelli-d button { flex: 1; min-height: 56px; border-radius: 12px; border: 2px solid var(--line2); background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--ink); } .livelli-d button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in oklab, var(--c) 14%, var(--surface)); } /* Foto, passi, prodotti */ .foto-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .foto { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); transition: box-shadow var(--d-1), opacity var(--d-2); } .foto.esclusa { opacity: .5; } .passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .passi button, .passi a { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; border: 0; background: transparent; text-align: left; color: var(--ink-2); font-weight: 600; font-size: var(--t-sm); text-decoration: none; } .passi button:hover, .passi a:hover { background: var(--surface3); color: var(--ink); } .passi [aria-current="step"], .passi .active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); } .passi .stato-passo { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--line2); font-size: 11.5px; color: var(--ink-3); background: var(--surface); } .passi .fatto .stato-passo { background: var(--v); border-color: var(--v); color: #fff; } .prodotto__disegno { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; background: var(--surface2); display: grid; place-items: center; margin-bottom: 12px; border: 1px solid var(--line); } .prodotto__disegno svg { width: 70%; height: 80%; } .prodotto__disegno .tratto { fill: none; stroke: var(--ink-2); stroke-width: 1.5; } .prodotto__disegno .pieno { fill: color-mix(in oklab, var(--accent) 55%, var(--surface)); stroke: var(--ink-2); stroke-width: 1.2; } .prodotto__disegno .foro { fill: var(--surface2); stroke: var(--ink-2); stroke-width: 1; } .cod { font: 600 13px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; } /* Stati vuoti e caricamento */ .vuoto, .empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 36px 20px; color: var(--ink-2); } .vuoto svg.illu { width: 150px; height: 96px; } .vuoto h3, .empty__title { font: 600 20px/1.2 var(--f-titolo); color: var(--ink); margin: 0; } .vuoto p, .empty__desc { max-width: 44ch; margin: 0; color: var(--ink-2); } .empty__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--surface3); color: var(--ink-2); font-size: 22px; } .illu .tr { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; } .illu .ac { fill: var(--accent); } .scheletro { border-radius: 8px; background: var(--surface3); animation: respira 1.2s ease-in-out infinite alternate; min-height: 14px; } @keyframes respira { from { opacity: .55; } to { opacity: 1; } } /* Comparse: entrate scaglionate, viste */ .entra { animation: entra var(--d-3) var(--e-out) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes entra { from { opacity: 0; transform: translateY(8px); } } .vista-entra { animation: vistaentra var(--d-2) var(--e-out) both; } @keyframes vistaentra { from { opacity: 0; transform: translateX(10px); } } .animate-in { animation: entra var(--d-3) var(--e-out) both; } .animate-in-1 { animation-delay: 60ms; } .animate-in-2 { animation-delay: 120ms; } .animate-in-3 { animation-delay: 180ms; } @media (prefers-reduced-motion: reduce) { .entra, .vista-entra, .animate-in, .cresce, .cresce-x, .scheletro { animation: none !important; } .disegna { animation: none !important; stroke-dashoffset: 0 !important; } } /* Finestre (modali Bootstrap), menu, ricerca rapida, avvisi */ .modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--line); --bs-modal-border-radius: 18px; --bs-modal-header-border-color: transparent; --bs-modal-footer-border-color: var(--line); --bs-modal-box-shadow: var(--sh-3); } .modal-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3); } .modal-header { padding: 18px 20px 6px; border-bottom: 0; } .modal-title { font: 600 22px/1.15 var(--f-titolo); } .modal-body { padding: 12px 20px 20px; } .modal-footer { background: var(--surface2); border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; padding: 12px 20px; gap: 8px; } .modal-footer > * { margin: 0; } .modal-backdrop { --bs-backdrop-bg: rgb(var(--shadow-rgb)); --bs-backdrop-opacity: .42; } .modal.fade .modal-dialog { transition: transform var(--d-2) var(--e-out); transform: translateY(12px) scale(.98); } .modal.show .modal-dialog { transform: none; } .dropdown-menu, .menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--ink); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--surface3); --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-link-active-bg: var(--ink); border-radius: 12px; box-shadow: var(--sh-3); padding: 6px; } .menu { position: fixed; z-index: 1600; min-width: 220px; background: var(--surface); border: 1px solid var(--line); max-height: 60vh; overflow-y: auto; animation: finestra var(--d-1) var(--e-out); } .menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; text-align: left; font-size: var(--t-sm); color: var(--ink); text-decoration: none; } .menu button:hover, .menu button:focus-visible, .menu a:hover { background: var(--surface3); } .menu hr { border: 0; height: 1px; background: var(--line); margin: 6px 4px; } .dropdown-item { border-radius: 8px; font-size: var(--t-sm); } @keyframes finestra { from { opacity: 0; transform: translateY(12px) scale(.98); } } .velo { position: fixed; inset: 0; z-index: 1700; background: rgba(var(--shadow-rgb), .42); display: grid; place-items: start center; padding: 10vh 16px 16px; animation: velo var(--d-2) var(--e-out); } @keyframes velo { from { opacity: 0; } } .comandi { width: min(620px, 100%); background: var(--surface); border-radius: 16px; box-shadow: var(--sh-3); border: 1px solid var(--line); overflow: hidden; animation: finestra var(--d-2) var(--e-out); } .comandi__cerca { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .comandi__cerca input { flex: 1; border: 0; outline: none; background: transparent; font-size: 16px; min-width: 0; color: var(--ink); } .comandi__lista { max-height: 380px; overflow-y: auto; padding: 6px; } .comandi__gruppo { padding: 10px 10px 4px; font: 600 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .comandi__voce { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 9px; text-align: left; color: var(--ink); font-size: var(--t-sm); } .comandi__voce span.s { color: var(--ink-3); font-size: 12px; margin-left: auto; white-space: nowrap; } .comandi__voce[aria-selected="true"] { background: var(--surface3); } .comandi__piede { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); } kbd { font: 500 11px/1 var(--f-ui); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line2); background: var(--surface2); color: var(--ink-2); box-shadow: none; } /* Gli avvisi stanno sopra a tutto ma non rubano i clic: passano a ciò che c'è sotto (per esempio la × di una finestra, che sul telefono sta proprio dove compaiono). Restano cliccabili solo i loro pulsanti («Annulla»). */ .reap-avvisi { position: fixed; left: 16px; bottom: 16px; z-index: 2000; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; } .reap-avviso { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--surface); padding: 10px 12px 10px 14px; border-radius: 12px; box-shadow: var(--sh-3); font-size: var(--t-sm); animation: toast var(--d-2) var(--e-out); } .reap-avviso button { pointer-events: auto; border: 0; background: color-mix(in oklab, var(--surface) 16%, transparent); color: var(--surface); padding: 5px 10px; border-radius: 8px; font-weight: 600; font-size: 12.5px; margin-left: auto; } .reap-avviso .ico { color: var(--accent); } .reap-avviso--errore .ico { color: var(--r); } @keyframes toast { from { opacity: 0; transform: translateY(10px); } } /* Anteprima PDF con «Stacca» */ /* Bootstrap: badge, avvisi, paginazione, breadcrumb, progress, list group */ .badge { font-weight: 600; border-radius: var(--r-pill); padding: .35em .65em; } .bg-success { background-color: color-mix(in oklab, var(--v) 18%, var(--surface)) !important; color: var(--ink) !important; } .bg-danger { background-color: color-mix(in oklab, var(--r) 16%, var(--surface)) !important; color: var(--ink) !important; } .bg-warning { background-color: color-mix(in oklab, var(--g) 20%, var(--surface)) !important; color: var(--ink) !important; } .bg-info { background-color: color-mix(in oklab, var(--interactive) 15%, var(--surface)) !important; color: var(--ink) !important; } .bg-primary { background-color: var(--accent) !important; color: var(--accentink) !important; } .bg-secondary { background-color: var(--surface3) !important; color: var(--ink-2) !important; } .bg-dark { background-color: var(--ink) !important; color: var(--surface) !important; } .bg-light { background-color: var(--surface2) !important; color: var(--ink) !important; } .bg-white { background-color: var(--surface) !important; } .text-success { color: var(--v) !important; } .text-danger { color: var(--r) !important; } .text-warning { color: var(--g) !important; } .text-primary, .text-info { color: var(--interactive) !important; } .text-dark { color: var(--ink) !important; } .text-secondary { color: var(--ink-2) !important; } .text-white { color: #fff !important; } .border { border-color: var(--line) !important; } .alert { border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface2); color: var(--ink); } .alert-info { background: color-mix(in oklab, var(--interactive) 9%, var(--surface)); border-color: color-mix(in oklab, var(--interactive) 28%, var(--line)); color: var(--ink); } .alert-warning { background: color-mix(in oklab, var(--g) 12%, var(--surface)); border-color: color-mix(in oklab, var(--g) 35%, var(--line)); color: var(--ink); } .alert-danger, .alert-error { background: color-mix(in oklab, var(--r) 10%, var(--surface)); border-color: color-mix(in oklab, var(--r) 30%, var(--line)); color: var(--ink); } .alert-success { background: color-mix(in oklab, var(--v) 10%, var(--surface)); border-color: color-mix(in oklab, var(--v) 30%, var(--line)); color: var(--ink); } .pagination { --bs-pagination-bg: var(--surface); --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--surface3); --bs-pagination-hover-color: var(--ink); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-border-color: var(--ink); --bs-pagination-active-color: var(--surface); --bs-pagination-disabled-bg: var(--surface2); --bs-pagination-disabled-color: var(--ink-3); gap: 4px; } .page-link { border-radius: 8px !important; } .breadcrumb { --bs-breadcrumb-divider-color: var(--ink-3); --bs-breadcrumb-item-active-color: var(--ink); font-size: var(--t-sm); } .progress { background: var(--surface3); border-radius: var(--r-pill); } .progress-bar { background: var(--interactive); } .toast { background: var(--ink); color: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--sh-3); } /* ---- Componenti del vecchio stile, ridisegnati (pagine non ancora riscritte) ---- */ .hero { margin-bottom: var(--sp-6); } .hero__eyebrow { font: 600 var(--t-xs)/1.25 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); display: flex; gap: 8px; align-items: center; } .hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v); } .hero__title { font: 600 42px/1 var(--f-titolo); margin: 6px 0 0; } .hero__title em { font-style: normal; color: var(--interactive); } .hero__subtitle { color: var(--ink-2); margin: 6px 0 0; } .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-6); } .kpi { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); color: inherit; text-decoration: none; transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2); } a.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: inherit; } .kpi__head { display: flex; align-items: center; gap: 8px; } .kpi__icon { color: var(--ink-2); } .kpi__label { font: 600 var(--t-xs)/1.25 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .kpi__value { font: 600 34px/1 var(--f-ui); } .kpi__foot { font-size: 12.5px; color: var(--ink-3); display: flex; justify-content: space-between; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: var(--sp-6) 0 var(--sp-3); } .section-head__title { font: 600 22px/1.15 var(--f-titolo); margin: 0; } .section-head__subtitle { font-size: var(--t-sm); color: var(--ink-3); } .section-head__action { font-size: var(--t-sm); font-weight: 600; text-decoration: none; } .stato-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--surface3); color: var(--ink); border: 1px solid var(--line); } .quick-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: inherit; text-decoration: none; } .quick-card:hover { box-shadow: var(--sh-1); color: inherit; } .quick-card__title { font-weight: 600; } .quick-card__desc { font-size: 12.5px; color: var(--ink-3); } .quick-card__chev { margin-left: auto; color: var(--ink-3); } .insp-list { display: grid; gap: 8px; } .insp-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; } .insp-row:hover { box-shadow: var(--sh-1); color: inherit; } .insp-row__main { min-width: 0; flex: 1; } .insp-row__title { font-weight: 600; display: block; } .insp-row__meta { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; } .role-badge { display: inline-flex; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; background: var(--surface3); color: var(--ink); } .step-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .jh-logo { display: inline-grid; place-items: center; font: 700 14px/1 var(--f-titolo); } /* ========================================================================================================= Larghezze ========================================================================================================= */ @media (max-width: 1180px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-dettaglio { grid-template-columns: minmax(0, 1fr); } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 980px) { .g-cruscotto, .g-3 { grid-template-columns: minmax(0, 1fr); } .g-2.g-2-stretta { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .app-shell, :root[data-menu="icone"] .app-shell { grid-template-columns: minmax(0, 1fr); } .app-shell > .lat { display: none; } .barra .barra__menu { display: inline-flex; } .barra { padding: 0 12px; } .barra__briciole > *:not(:nth-last-child(-n+3)) { display: none; } .barra__briciole > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; } .barra__briciole > .qui:only-child { max-width: none; } .content { padding: 18px 16px 48px; } .testata h1 { font-size: 38px; } .saluto, .hero__title { font-size: 32px; } .g-2, .g-4, .griglia-campi { grid-template-columns: minmax(0, 1fr); } .g-4.g-4-tile, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .linea:not(.linea--pipeline) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .linea:not(.linea--pipeline) .linea__binario { left: 46px; right: auto; width: calc(92px * (var(--n, 7) - 1)); } .linea .fermata { scroll-snap-align: center; } .tile__val, .kpi__value { font-size: 28px; } .spark { width: 84px; } .scorri-x > svg { min-width: 520px; } .cerca-campo { max-width: none; flex-basis: 100%; } .lista > li { flex-wrap: wrap; } .lista .testo { flex: 1 1 170px; } .solo-largo { display: none !important; } .modal-dialog { margin: 12px; } .modal-dialog.modal-fullscreen { margin: 0; } .modal-fullscreen .modal-content { border-radius: 0; border: 0; } } @media (min-width: 761px) { .solo-stretto { display: none !important; } } @media print { .lat, .barra { display: none !important; } .app-shell { display: block; } } /* Logo del committente nel menu largo; marchio RI-App nel menu a sole icone (la scritta non ci sta): si danno il cambio nello stesso punto */ .nav__jh { display: block; width: 150px; max-width: 100%; height: auto; aspect-ratio: 1198 / 176; margin-bottom: 4px; } /* Pagina incorporata in un'altra (iframe): solo il contenuto */ .incorporata .app-shell > .lat, .incorporata .barra { display: none !important; } .incorporata .app-shell { grid-template-columns: minmax(0, 1fr); } /* ---- Impostazioni: cursore + numero, esempio vivo ---- */ input[type="range"] { accent-color: var(--interactive); width: 100%; min-height: var(--tocco); } .campo-cursore { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; } .campo-unita { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--t-sm); white-space: nowrap; } .campo-unita .form-control { width: 104px; font-variant-numeric: tabular-nums; } .anteprima-imp { margin-top: var(--sp-3); } .anteprima-imp--centro { display: grid; place-items: center; } .riga-salva { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-7); } @media (max-width: 760px) { .campo-cursore { grid-template-columns: minmax(0, 1fr); } } /* ---- Impostazioni dell'admin: riquadri cliccabili, diagnostica ---- */ button.card { font: inherit; width: 100%; } .tile.card--cliccabile .delta { margin-top: auto; } .diagnostica { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); } .diagnostica__esito { flex-basis: 100%; margin: 0; padding: var(--sp-3); background: var(--surface3); border-radius: var(--r-sm); font-size: 12px; color: var(--ink-2); white-space: pre-wrap; } /* ---- Filtri, elenchi, requisiti (anagrafiche, ispezioni) ---- */ .filtri { display: grid; gap: 12px; margin-bottom: var(--sp-5); } .filtri-riga { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .filtri-chip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } .filtri-chip .chip { flex: none; } /* Filtri a più scelte (ui.js filtroMulti): un pulsante come un campo, con il nome del filtro e cosa è scelto; sotto, il menu con le caselle, i conteggi e, se le voci sono tante, la ricerca. Con un filtro attivo il pulsante si colora. */ .fm { position: relative; display: inline-flex; flex: none; max-width: 100%; } .fm__bottone { display: inline-flex; align-items: center; gap: 7px; min-height: var(--ctl-h); max-width: 100%; padding: 0 10px 0 12px; border: 1px solid var(--line2); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: 500 var(--t-sm) var(--f-ui); cursor: pointer; white-space: nowrap; } .fm__bottone:hover { border-color: var(--ink-3); } .fm__bottone:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 25%, transparent); } .fm__nome { color: var(--ink-3); font-weight: 600; } .fm__valore { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .fm__freccia { color: var(--ink-3); transition: transform var(--t-fast); } .fm[data-aperto] .fm__freccia { transform: rotate(180deg); } .fm[data-attivo] .fm__bottone { border-color: var(--interactive); background: color-mix(in oklab, var(--interactive) 9%, var(--surface)); } .fm[data-attivo] .fm__nome { color: var(--interactive); } .fm__pannello { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max-content; min-width: 100%; max-width: min(340px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); display: grid; } .fm__pannello--dx { left: auto; right: 0; } .fm__cerca { position: relative; padding: 8px 8px 4px; } .fm__cerca .ico { position: absolute; left: 18px; top: calc(50% + 2px); transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .fm__cerca .campo { padding-left: 32px; min-width: 220px; } .fm__voci { max-height: min(340px, 50vh); overflow-y: auto; padding: 4px; overscroll-behavior: contain; } .fm__voce { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-size: var(--t-sm); color: var(--ink); } .fm__voce:hover { background: var(--surface2); } .fm__voce input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--interactive); cursor: pointer; } .fm__voce .fm__testo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm__voce .n { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--ink-3); } .fm__voce--zero .fm__testo, .fm__voce--zero .n { color: var(--ink-3); } .fm__voce--gruppo { font-weight: 700; } .fm__gruppo + .fm__gruppo, .fm__voce + .fm__gruppo { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } .fm__gruppo > .fm__voce:not(.fm__voce--gruppo) { padding-left: 28px; } .fm__c { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; } .fm__vuoto { margin: 0; padding: 10px 8px; color: var(--ink-3); font-size: var(--t-sm); } .fm__piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); } .fm__togli { border: 0; background: transparent; padding: 4px 6px; border-radius: 6px; font: 600 12.5px var(--f-ui); color: var(--interactive); cursor: pointer; } .fm__togli:hover { background: var(--surface2); } .fm--si-no .fm__bottone { gap: 9px; } .fm--si-no input { width: 16px; height: 16px; margin: 0; accent-color: var(--interactive); cursor: pointer; } .fm--si-no .n { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--ink-3); } .fm--uno .fm__voce { align-items: flex-start; padding-block: 7px; } .fm--uno .fm__voce input { margin-top: 2px; } .fm--uno .fm__testo { white-space: normal; } .fm__desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-3); } .filtri-azzera { border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; font: 600 var(--t-sm) var(--f-ui); color: var(--interactive); cursor: pointer; } .filtri-azzera:hover { background: var(--surface2); } @media (max-width: 760px) { .fm__valore { max-width: 140px; } } button.altre { border: 0; background: none; color: var(--interactive); font: inherit; font-size: 12px; text-align: center; padding: 6px; border-radius: 8px; } button.altre:hover { background: var(--surface3); } .altre { font-size: 12px; color: var(--ink-3); text-align: center; padding: 6px; } .persone-cella { display: grid; gap: 2px; font-size: 12.5px; min-width: 170px; } .persone-cella > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ruolo-tag { font: 700 10px/1 var(--f-ui); letter-spacing: .06em; padding: 3px 5px; border-radius: 4px; background: var(--surface3); color: var(--ink-2); } .elenco-piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: var(--t-sm); } .capovolta { transform: rotate(180deg); } .requisiti { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: 6px; font-size: var(--t-sm); } .requisiti li { display: flex; gap: 8px; align-items: center; } .requisiti li.ok { color: var(--ink-2); } .requisiti li.ok .ico { color: var(--interactive); } /* blu come i passi completati del wizard */ .requisiti li.no { color: var(--ink); font-weight: 600; } .requisiti li.no .ico { color: var(--ink); } @media (max-width: 760px) { .filtri-riga select.campo { flex: 1 1 140px; } } .data-cella { white-space: nowrap; } .data-cella small { display: block; font-size: 11px; } .danni-cella { display: flex; gap: 8px; align-items: center; } .danni-cella .impilata { width: 96px; flex: none; } .pila .avatar { box-shadow: 0 0 0 2px var(--surface); } /* ---- Ispezioni (docs/design.md, «Pagine»): i filtri come titoli di sezione, la tabella ---- */ .schede-isp { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); } .schede-isp__voci { display: flex; flex-wrap: wrap; gap: 4px 26px; } .schede-isp__voci button { border: 0; background: none; padding: 6px 0 10px; margin-bottom: -1px; border-bottom: 3px solid transparent; cursor: pointer; font: 600 18px/1.2 var(--f-ui); color: var(--ink-3); display: inline-flex; gap: 8px; align-items: baseline; } .schede-isp__voci button .n { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; } .schede-isp__voci button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); } .schede-isp__voci button:hover { color: var(--ink); } .schede-isp__dx { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 8px; } /* Segnale a strisce: ciò che è oltre i tempi, un invio non riuscito, un'ispezione imminente. Uno per riga. */ .segnale { display: inline-flex; align-items: stretch; gap: 7px; font-size: 12px; font-weight: 600; line-height: 1; border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; white-space: nowrap; color: var(--ink); background: var(--surface); } .segnale::before { content: ""; width: 9px; flex: none; background: repeating-linear-gradient(-45deg, var(--hz-a) 0 3px, var(--hz-b) 3px 6px); } .segnale span { padding: 4px 7px 4px 0; } #isp-testata .testata__azioni { flex-wrap: nowrap; } #isp-testata .cerca-campo { flex: none; width: 340px; max-width: 100%; } .tabella-isp .attesa-isp { display: grid; grid-template-columns: 5.4em 128px; align-items: center; column-gap: 10px; white-space: nowrap; } /* Avanzamento in miniatura: le 7 fermate del wizard della scheda ispezione, unite dal binario. Passate in blu, l'attuale gialla con il bordo scuro, le prossime vuote; sotto, il nome dello stato (wizardMini in ui.js). */ .wzm-cella { display: grid; gap: 6px; justify-items: start; } .wzm-cella .nome { font-size: 12.5px; color: var(--ink-2); } .wzm { display: inline-flex; align-items: center; height: 18px; } .wzm i { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line2); background: var(--surface); } .wzm i + i { margin-left: 10px; } .wzm i + i::before { content: ""; position: absolute; top: 50%; right: calc(100% + 2px); width: 10px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--line); } .wzm i.fatto { background: var(--interactive); border-color: var(--interactive); } .wzm i.fatto + i::before { background: var(--interactive); } .wzm i.ora { width: 14px; height: 14px; background: var(--accent); border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent); } /* prima apertura: le fermate passate e l'attuale compaiono una dopo l'altra, riga dopo riga (fino alla dodicesima) */ .carica-wzm .wzm i.fatto, .carica-wzm .wzm i.ora { animation: wzm-entra var(--d-2) var(--e-out) backwards; animation-delay: calc(var(--r, 0) * 40ms + var(--i, 0) * 45ms); } @keyframes wzm-entra { from { transform: scale(.6); opacity: 0; } } /* attenzione: la fermata dell'ispezione in corso respira piano (2,4 s) */ .wzm i.ora.in-corso { animation: wzm-respira 2.4s ease-in-out infinite; } @keyframes wzm-respira { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 16%, transparent); } } @media (prefers-reduced-motion: reduce) { .carica-wzm .wzm i, .wzm i.ora.in-corso { animation: none !important; } } .tabella-isp .attesa-isp .gg { text-align: right; font-variant-numeric: tabular-nums; } .tabella-isp .attesa-isp .segnale { justify-self: start; } .tabella-isp td.num a { color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .schede-isp__voci { gap: 4px 18px; } .schede-isp__voci button { font-size: 16px; } .tabella-isp .attesa-isp { grid-template-columns: auto auto; justify-content: start; } .tabella-isp .attesa-isp .gg { text-align: left; } #isp-testata .testata__azioni { flex-wrap: wrap; width: 100%; } #isp-testata .cerca-campo { flex: 1 1 100%; max-width: none; } } /* Tabelle che su telefono diventano schede: N. e nome in alto, poi le altre colonne con la loro etichetta */ @media (max-width: 760px) { .tabella--risponde thead { display: none; } .tabella--risponde, .tabella--risponde tbody { display: block; } .tabella--risponde tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .tabella--risponde td { display: block; padding: 0; border: 0; height: auto; text-align: left !important; min-width: 0 !important; } .tabella--risponde td:first-child { grid-row: 1 / span 2; } .tabella--risponde td.principale-cella { grid-column: 2; } .tabella--risponde td:not(:first-child):not(.principale-cella) { grid-column: 2; } .tabella--risponde td[data-l] { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; } .tabella--risponde td[data-l]::before { content: attr(data-l); min-width: 76px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .tabella--risponde .data-cella small { display: inline; margin-left: 4px; } .tabella--risponde .persone-cella { min-width: 0; } .tabella--risponde .persone-cella > span { white-space: normal; } .tabella--risponde td.vuota { display: none; } } /* ---- PDF: anteprima nella pagina, «Stacca» in un'altra finestra (static/js/pdf.js, templates/pdf.html) ---- */ .pdf-velo { grid-template-columns: minmax(0, 1fr); place-items: stretch center; padding: 3vh 16px; } /* colonna che non si allarga col titolo */ .pdf-anteprima { width: min(1100px, 100%); height: 94vh; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-3); display: flex; flex-direction: column; overflow: hidden; animation: entra var(--d-2) var(--e-out) both; } .pdf-anteprima__testa { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface2); } .pdf-anteprima__testa h2 { font: 600 15px/1.3 var(--f-ui); margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdf-anteprima__azioni { display: flex; align-items: center; gap: 6px; } .pdf-anteprima__foglio { flex: 1; width: 100%; border: 0; background: var(--surface3); } .pdf-staccato { position: fixed; right: 16px; bottom: 16px; z-index: 1990; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--ink); color: var(--surface); border-radius: var(--r-pill); box-shadow: var(--sh-3); font-size: var(--t-sm); font-weight: 600; } .pdf-staccato .btn { background: var(--accent); color: var(--accentink); border-color: transparent; } @media (max-width: 760px) { .pdf-staccato { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .pdf-velo { padding: 0; } .pdf-anteprima { height: 100vh; border-radius: 0; } .pdf-anteprima__testa { padding-left: 14px; } } body.pdf-finestra { display: flex; flex-direction: column; height: 100vh; margin: 0; background: var(--bg); } .pdf-finestra__testa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; background: var(--brand); color: var(--brandink); } .pdf-finestra__logo { width: 120px; height: auto; flex: none; } .pdf-finestra [hidden] { display: none !important; } .pdf-finestra__testa h1 { color: inherit; font: 600 15px/1.3 var(--f-ui); margin: 0; flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdf-finestra__azioni { display: flex; gap: 6px; } .pdf-finestra__azioni .btn--ghost { color: var(--brandink); } .pdf-finestra__avviso { padding: 8px 14px; background: color-mix(in oklab, var(--g) 22%, var(--surface)); color: var(--ink); font-size: var(--t-sm); } .pdf-finestra__corpo { flex: 1; display: grid; min-height: 0; } .pdf-finestra__corpo iframe { width: 100%; height: 100%; border: 0; background: var(--surface3); } .pdf-finestra__corpo .vuoto { align-self: center; } /* ---- Anagrafiche: schede dei clienti ---- */ /* Scheda del cliente: dati del magazzino accanto allo storico; anagrafica come elenco termine/valore */ .mag-corpo { gap: var(--sp-5); margin-top: 4px; } .mag-dati { display: grid; gap: 10px; align-content: start; font-size: 13px; } .mag-dati .occhiello { display: block; margin-bottom: 2px; } .mag-dati__riga { display: flex; gap: 18px; flex-wrap: wrap; } .dati-elenco { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; } .dati-elenco dt { color: var(--ink-3); font-weight: 500; } .dati-elenco dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* Aree del magazzino: anteprima ferma del disegno con le zone */ .anteprima-area { position: relative; aspect-ratio: 16 / 8; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: #fafafa; pointer-events: none; } .anteprima-area__disegno { width: 100%; height: 100%; } .anteprima-area__zone { position: absolute; inset: 0; width: 100%; height: 100%; } .anteprima-area__zone rect { fill: color-mix(in oklab, var(--interactive) 16%, transparent); stroke: var(--interactive); stroke-width: 1.5; stroke-dasharray: 5 3; } .anteprima-area--vuota { display: grid; place-items: center; background: var(--surface2); pointer-events: auto; } .area-card { display: grid; gap: 12px; align-content: start; } .area-card__azioni { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* Testata più bassa per le pagine-strumento (disegno dell'area): il disegno prende l'altezza */ .testata--stretta { margin-bottom: var(--sp-4); } .testata--stretta h1 { font-size: 28px; } .testata .occhiello .badge { text-transform: none; letter-spacing: 0; } /* Libreria: schede del catalogo */ .prodotto-card { display: grid; gap: 6px; align-content: start; } .prodotto-card.archiviato, tr.archiviato { opacity: .6; } .prodotto__disegno img { width: 100%; height: 100%; object-fit: contain; } .prodotto-card__su { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; } .prodotto-card__desc { font-size: 13px; margin: 2px 0 0; color: var(--ink-2); } .prodotto-card__giu { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; margin-top: 2px; } /* Utenti: schede per ruolo */ .utente-card { display: grid; gap: 10px; align-content: start; } .utente-card.non-attivo { opacity: .6; } .utente-card__su { display: flex; gap: 12px; align-items: center; } .utente-card__su strong { display: block; } .utente-card__su .muto { font-size: 12.5px; overflow-wrap: anywhere; } .utente-card__etich { display: flex; gap: 6px; flex-wrap: wrap; } .utente-card__riga { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-bottom: 5px; } .utente-card__riga strong { color: var(--ink); } /* Campo: la pagina «Oggi» dell'ispettore */ .oggi-card { border: 2px solid var(--ink); } .oggi-card__corpo { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .oggi-card h2 { font: 600 30px/1.05 var(--f-titolo); margin: 0; } .oggi-card .sec { margin: 6px 0 0; } .oggi-card__etich { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .data-tile { width: 52px; height: 52px; flex: none; border-radius: 12px; display: grid; place-items: center; align-content: center; text-decoration: none; color: var(--ink); background: color-mix(in oklab, var(--c, var(--ink-3)) 14%, var(--surface)); border: 1px solid color-mix(in oklab, var(--c, var(--ink-3)) 35%, transparent); line-height: 1; text-align: center; } .data-tile strong { font: 600 19px/1 var(--f-titolo); } .data-tile span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); } /* Montaggio: i lavori da eseguire */ .lavoro-card { display: grid; gap: 10px; align-content: start; color: var(--ink); text-decoration: none; } .lavoro-card__su { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; } .lavoro-card__su strong { font-size: 15px; } .lavoro-card__su .muto { font-size: 12.5px; } .lavoro-card__etich { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Pianta in sola lettura: difformità, marcatori, pallino evidenziato */ .pianta-sola__rett { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .pianta-sola__rett .r--difformita { fill: color-mix(in oklab, var(--g) 18%, transparent); stroke: var(--g); stroke-width: 1.5; stroke-dasharray: 4 3; } .pianta-sola__rett .r--marcatore { fill: color-mix(in oklab, var(--interactive) 14%, transparent); stroke: var(--interactive); stroke-width: 1.5; } .pallino-d--evidenzia { animation: evidenzia 1.6s var(--e-out) 2; z-index: 3; } @keyframes evidenzia { 0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } 50% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent); } } @media (prefers-reduced-motion: reduce) { .pallino-d--evidenzia { animation: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); } } /* Pianta dei danni in sola lettura (dettaglio ispezione, lavoro di montaggio) */ .pianta-aree { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .pianta-sola { position: relative; height: 340px; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: #fafafa; } .pianta-sola__disegno { width: 100%; height: 100%; } /* DxfViewer lo rende position:relative: serve l'altezza esplicita */ .pianta-sola__pallini { position: absolute; inset: 0; pointer-events: none; } .pianta-sola__pallini .pallino-d { position: absolute; width: 18px; height: 18px; font-size: 9px; transform: translate(-50%, -50%); pointer-events: auto; } .pianta-sola__adatta { position: absolute; right: 8px; bottom: 8px; z-index: 2; } .pianta-sola__errore { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; } /* Su telefono gli avvisi stanno in alto: in basso coprirebbero la barra di navigazione e i pulsanti delle finestre */ @media (max-width: 760px) { .reap-avvisi { left: 12px; right: 12px; bottom: auto; top: calc(var(--barra-h) + 8px); max-width: none; } } /* ========================================================================================================= CARD E MOVIMENTO (6 novembre 2026, docs/design.md; tavola https://claude.ai/code/artifact/7d626d3b-1593-4686-9994-04edab7f8ab5) Superfici per ruolo, spigolo di luce, vetro sopra il disegno, tasti da campo (tablet), passaggio tra le pagine, fermate dalla riga alla scheda, indicatore delle sezioni, scheletri con la forma, uscite degli avvisi, invio con esito. ========================================================================================================= */ :root { --d-solleva: 220ms; --d-esce: 150ms; --d-pagina: 220ms; --d-volo: 320ms; --luce-pieno: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(110, 84, 0, .2); --luce-scuro: inset 0 1px 0 rgba(255, 255, 255, .1); --vetro-bg: rgba(255, 255, 255, .6); --vetro-filtro: blur(14px) saturate(1.6); --tasto-bordo: #CACAC1; } @media (prefers-reduced-motion: reduce) { :root { --d-solleva: 1ms; --d-esce: 1ms; --d-pagina: 1ms; --d-volo: 1ms; } } /* ---- Superfici per ruolo: i collegamenti rapidi sono schede apribili ---- */ .quick-card { box-shadow: var(--sh-1); transition: transform var(--d-solleva) var(--e-out), box-shadow var(--d-solleva) var(--e-out), border-color var(--d-1); } @media (hover: hover) and (pointer: fine) { .quick-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line2); } } /* ---- Spigolo di luce sui pieni neri (sui gialli è nel pulsante principale) ---- */ .tabella th, .table > thead th { box-shadow: var(--luce-scuro); } :root .nav__voce[aria-current="page"] { box-shadow: var(--luce-pieno); } .reap-avviso, .toast { box-shadow: var(--luce-scuro), var(--sh-3); } /* ---- Vetro: solo ciò che galleggia sul disegno; velo delle finestre sfocato (col mouse: sul tablet costa) ---- */ .vetro, .attrezzi, .pianta-sola__adatta, .viewer-toolbar > .btn { background: var(--vetro-bg) !important; -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); border: 1px solid rgba(255, 255, 255, .75) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(var(--shadow-rgb), .07), var(--sh-2) !important; } .pall-floating-actions button:not(.danger) { background: rgba(20, 20, 18, .66); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 8px rgba(0, 0, 0, .25); } @media (hover: hover) and (pointer: fine) { .modal-backdrop { --bs-backdrop-bg: rgba(var(--shadow-rgb), .26); --bs-backdrop-opacity: 1; -webkit-backdrop-filter: blur(5px) saturate(.85); backdrop-filter: blur(5px) saturate(.85); } .velo, .menu-tel__velo { background: rgba(var(--shadow-rgb), .26); -webkit-backdrop-filter: blur(5px) saturate(.85); backdrop-filter: blur(5px) saturate(.85); } } /* ---- Tasti da campo (solo tablet: classe .tasto sui pulsanti dell'ispettore e del montaggio) ---- Bordo inferiore spesso che si schiaccia alla pressione; la scelta resta premuta. */ .btn.tasto { --tasto-c: var(--tasto-bordo); --tasto-luce: 0 0 #0000; --tasto-ombra: 0 4px 0 var(--tasto-c), 0 6px 10px -4px rgba(var(--shadow-rgb), .25); margin-bottom: 4px; box-shadow: var(--tasto-luce), var(--tasto-ombra); transition: transform 110ms var(--e-out), box-shadow 110ms var(--e-out), background var(--d-1), border-color var(--d-1), color var(--d-1); } .btn.tasto:hover, .btn.tasto:focus-visible { box-shadow: var(--tasto-luce), var(--tasto-ombra); filter: none; } .btn.tasto:not(:disabled):not(.disabled):active { transform: translateY(3px); box-shadow: var(--tasto-luce), 0 1px 0 var(--tasto-c), 0 1px 2px rgba(var(--shadow-rgb), .2); } .btn.tasto:where(:not(.btn--primario, .btn-primary, .btn--scuro)) { --b-bg: #F4F4F0; --b-bd: transparent; } /* specificità bassa: lo stato premuto vince */ .btn.tasto.btn--primario, .btn.tasto.btn-primary { --tasto-c: #B89600; --tasto-luce: var(--luce-pieno); } .btn.tasto.btn--scuro { --tasto-c: #000; --tasto-luce: var(--luce-scuro); } .btn.tasto:disabled, .btn.tasto.disabled { box-shadow: 0 2px 0 var(--tasto-c); } /* Livello di danno a tasti: i tasti scrivono nella tendina, che resta il valore del modulo (tasti.js) */ .tasti-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; } .tasti-livello { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding-bottom: 4px; } .tasti-livello .btn.tasto { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; justify-content: stretch; gap: 1px 10px; min-height: 62px; padding: 8px 12px; text-align: left; white-space: normal; font-size: 14.5px; } .tasti-livello .tasto i { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; background: var(--c); } .tasti-livello .tasto b { font-weight: 700; line-height: 1.2; } .tasti-livello .tasto small { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--ink-3); } .tasti-livello .btn.tasto[aria-pressed="true"] { --b-bg: var(--c); --b-fg: var(--on, #fff); --tasto-c: var(--edge); transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), inset 0 2px 5px rgba(0, 0, 0, .22); } .tasti-livello .tasto[aria-pressed="true"] small { color: inherit; opacity: .88; } .tasti-livello .tasto[aria-pressed="true"] i { background: transparent; box-shadow: inset 0 0 0 3px currentColor; } .tasti-livello .btn.tasto:disabled { opacity: 1; cursor: default; } /* Rischio alto: le due scelte come tasti (le caselle restano nel modulo) */ .rischio-tasti { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; } .rischio-tasti .form-check { margin: 0; padding: 0; position: relative; min-height: 0; } .rischio-tasti .form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .rischio-tasti .form-check-label { display: flex; align-items: center; min-height: 56px; margin-bottom: 4px; padding: 8px 12px; border-radius: var(--r-ctl); background: #F4F4F0; color: var(--ink); font-size: 13.5px !important; font-weight: 600; line-height: 1.3; cursor: pointer; box-shadow: 0 4px 0 var(--tasto-bordo), 0 6px 10px -4px rgba(var(--shadow-rgb), .25); transition: transform 110ms var(--e-out), box-shadow 110ms var(--e-out), background var(--d-1), color var(--d-1); } .rischio-tasti .form-check-label:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tasto-bordo); } .rischio-tasti .form-check-input:checked + .form-check-label { background: var(--ink); color: var(--surface); transform: translateY(3px); box-shadow: 0 1px 0 #000, inset 0 2px 5px rgba(0, 0, 0, .3); } .rischio-tasti .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---- Invio con esito: il pulsante diventa l'avanzamento e poi l'esito (tasti.js, statoPulsante) ---- */ .btn.invio-stato { position: relative; overflow: hidden; } .btn .invio__avanz { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: currentColor; opacity: .8; transform-origin: 0 0; transform: scaleX(var(--p, 0)); transition: transform var(--d-2) var(--e-out), opacity var(--d-2); pointer-events: none; } .btn.is-invio { pointer-events: none; } .btn.is-fatto, .btn.is-coda { --b-bg: var(--surface); --b-fg: var(--ink); } .btn.is-fatto { --b-bd: var(--interactive); } .btn.is-coda { --b-bd: var(--ink); } .btn.is-fatto .invio__avanz, .btn.is-coda .invio__avanz { opacity: 0; } .btn .invio__testo { display: inline-flex; align-items: center; gap: 10px; animation: invio-testo var(--d-2) var(--e-out); } @keyframes invio-testo { from { opacity: 0; transform: translateY(6px); } } .btn .spunta-disegno { width: 22px; height: 22px; flex: none; color: var(--interactive); } .btn .spunta-disegno circle, .btn .spunta-disegno path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .btn .spunta-disegno circle { stroke-dasharray: 64; stroke-dashoffset: 64; animation: disegna 360ms var(--e-out) forwards; } .btn .spunta-disegno path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: disegna 260ms var(--e-out) 260ms forwards; } .btn .segno-strisce { width: 14px; height: 22px; flex: none; border-radius: 3px; border: 1px solid var(--ink); background: repeating-linear-gradient(-45deg, var(--hz-a) 0 3px, var(--hz-b) 3px 6px); } @media (prefers-reduced-motion: reduce) { .btn .invio__testo { animation: none; } .btn .spunta-disegno circle, .btn .spunta-disegno path { animation: none; stroke-dashoffset: 0; } } /* ---- Indicatore delle sezioni: la linea sotto la scheda attiva scorre fino alla nuova (ui.js, indicatori) ---- */ .ha-indicatore { position: relative; } .ha-indicatore > [aria-selected="true"], .ha-indicatore > .active, .ha-indicatore > li > .active { border-bottom-color: transparent !important; } .ind-schede { position: absolute; left: 0; top: 0; width: 1px; height: var(--ind-h, 2px); background: var(--ind-c, var(--ink)); border-radius: 1px; transform-origin: 0 0; transform: translate(var(--ind-x, 0), var(--ind-y, 0)) scaleX(var(--ind-w, 0)); pointer-events: none; z-index: 2; } .ind-schede.scorre { transition: transform var(--d-pagina) var(--e-io); } /* ---- Scheletri con la forma del contenuto: le sagome dei dati, una luce lenta che le attraversa ---- */ .scheletro { position: relative; overflow: hidden; animation: none; } .sk { position: relative; overflow: hidden; } .sk::after, .scheletro::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: sk-luce 1.6s linear infinite; } @keyframes sk-luce { to { transform: translateX(100%); } } .sk-tabella { --righe: 8; --alta: 56px; height: calc(42px + var(--righe) * var(--alta)); border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(var(--brand), var(--brand)) 0 0 / 100% 42px no-repeat, repeating-linear-gradient(to bottom, var(--surface3) 0 11px, transparent 11px var(--alta)) 16px calc(42px + 22px) / 9% calc(100% - 64px) no-repeat, repeating-linear-gradient(to bottom, var(--surface3) 0 11px, transparent 11px 19px, var(--surface3) 19px 27px, transparent 27px var(--alta)) 14% calc(42px + 15px) / 22% calc(100% - 57px) no-repeat, repeating-linear-gradient(to bottom, var(--surface3) 0 11px, transparent 11px var(--alta)) 42% calc(42px + 22px) / 15% calc(100% - 64px) no-repeat, repeating-linear-gradient(to bottom, var(--surface3) 0 11px, transparent 11px var(--alta)) 64% calc(42px + 22px) / 11% calc(100% - 64px) no-repeat, repeating-linear-gradient(to bottom, var(--surface3) 0 11px, transparent 11px var(--alta)) 96% calc(42px + 22px) / 10% calc(100% - 64px) no-repeat, repeating-linear-gradient(to bottom, transparent 0 calc(var(--alta) - 1px), var(--line) calc(var(--alta) - 1px) var(--alta)) 0 42px / 100% calc(100% - 42px) no-repeat, var(--surface); } .sk-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sk-min, 280px)), 1fr)); gap: var(--sp-4); } .sk-scheda { height: var(--sk-alta, 150px); border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(var(--surface3), var(--surface3)) 18px 18px / 46% 14px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 18px 46px / 78% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 18px 66px / 64% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 18px 86px / 52% 10px no-repeat, var(--surface); } .sk-mag { height: 148px; border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(var(--surface3), var(--surface3)) 12px 12px / 172px 83px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 198px 14px / 22% 18px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 198px 44px / 48% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 198px 64px / 40% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 198px 84px / 44% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 198px 110px / 30% 26px no-repeat, var(--surface); } .sk-righe { min-height: 60px; grid-column: 1 / -1; background: linear-gradient(var(--surface3), var(--surface3)) 0 4px / 26% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 34% 4px / 20% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 68% 4px / 16% 10px no-repeat, linear-gradient(var(--surface3), var(--surface3)) 0 40px / 60% 10px no-repeat; } .sk-pieno { border-radius: var(--r-card); background: var(--surface3); } @media (prefers-reduced-motion: reduce) { .sk::after, .scheletro::after { animation: none; display: none; } } /* ---- Avvisi: escono più in fretta di come entrano; la linea gialla dice quanto resta per «Annulla» (ui.js) ---- */ .reap-avviso { position: relative; overflow: hidden; } .reap-avviso.con-tempo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform-origin: 0 0; animation: avviso-tempo var(--durata, 6500ms) linear forwards; } @keyframes avviso-tempo { to { transform: scaleX(0); } } .reap-avviso.esce { animation: avviso-esce var(--d-esce) ease-in forwards; } @keyframes avviso-esce { to { opacity: 0; transform: translateY(8px) scale(.98); } } .velo.esce { animation: velo-esce var(--d-esce) ease-in forwards; pointer-events: none; } .velo.esce .comandi { animation: finestra-esce var(--d-esce) ease-in forwards; } @keyframes velo-esce { to { opacity: 0; } } @keyframes finestra-esce { to { opacity: 0; transform: translateY(6px) scale(.985); } } @media (prefers-reduced-motion: reduce) { .reap-avviso.con-tempo::after { animation: none; display: none; } } /* ---- Passaggio tra le pagine (View Transitions tra documenti): barra laterale ferma, colonna che cambia ---- @view-transition { navigation: auto } lo aggiunge aspetto.js solo su Chrome ed Edge dalla 156: su Chromium 149 il passaggio blocca il disegno della pagina (verifica del 2026-11-06). Le regole qui sotto valgono dove è attivo. */ #app-nav { view-transition-name: menu; } main.content { view-transition-name: colonna; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-pagina); } ::view-transition-old(menu) { animation: none; } ::view-transition-new(menu) { animation: none; opacity: 0; } ::view-transition-old(colonna) { animation: vt-fuori 110ms ease-in both; } ::view-transition-new(colonna) { animation: vt-sale var(--d-pagina) var(--e-out) 60ms both; } @keyframes vt-fuori { to { opacity: 0; } } @keyframes vt-sale { from { opacity: 0; transform: translateY(8px); } } /* dalla riga alla scheda: le sette fermate volano al wizard (ui.js dà i nomi, passaggi.js prepara la linea della scheda) */ ::view-transition-group(wz-0), ::view-transition-group(wz-1), ::view-transition-group(wz-2), ::view-transition-group(wz-3), ::view-transition-group(wz-4), ::view-transition-group(wz-5), ::view-transition-group(wz-6) { animation-duration: var(--d-volo); animation-timing-function: var(--e-io); } ::view-transition-group(wz-1) { animation-delay: 14ms; } ::view-transition-group(wz-2) { animation-delay: 28ms; } ::view-transition-group(wz-3) { animation-delay: 42ms; } ::view-transition-group(wz-4) { animation-delay: 56ms; } ::view-transition-group(wz-5) { animation-delay: 70ms; } ::view-transition-group(wz-6) { animation-delay: 84ms; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 0s !important; animation-delay: 0s !important; } ::view-transition-new(colonna) { animation: vt-dentro 120ms ease-out both; } } @keyframes vt-dentro { from { opacity: 0; } }