/* Osservatorio aste SIGMA — foglio di stile unico, nessuna dipendenza. * * Due temi: scuro (predefinito) e chiaro. Ogni colore sta in una variabile — * nel foglio non deve comparire nessun valore letterale fuori da questi due * blocchi, altrimenti resta scuro anche a tema chiaro. * * Il tema si sceglie con l'attributo `data-tema` su : lo imposta lo * script in testa a index.html prima del primo disegno, così non si vede il * lampo del tema sbagliato. Senza attributo si segue il sistema operativo. */ :root { color-scheme: dark; --canvas: #071110; --paper: #10201c; --paper-2: #0b1917; --paper-3: #16292400; --line: #24403a; --line-2: #2f544b; --ink: #f0f6f3; --ink-2: #c3d3cd; --muted: #8aa09a; --green: #58d3ac; --green-strong: #0f6d54; --green-soft: #12332b; --blue: #74b8ff; --gold: #efc85b; --gold-soft: #33290f; --rosso: #ff9184; --rosso-soft: #35191a; --raggio: 12px; /* Testo sopra i fondi pieni verde/rosso: restano scuri in entrambi i temi, quindi il testo sopra resta bianco. */ --su-verde: #fff; --green-hover: #128566; --ombra-card: rgba(0, 0, 0, .45); --ombra-drawer: rgba(0, 0, 0, .5); --velo: rgba(0, 0, 0, .55); --alone-1: #12403300; --alone-2: #2e2a1030; --chip-bordo: #2b5f50; --chip-ink: #a8ecd4; --gold-ink: #ffe6a4; --gold-bordo: #6b5a24; --gold-ink-2: #ffe9a8; --blue-soft: #10304d; --green-soft-2: #123f2f; --tag-neutro: #23302c; --cal-ink: #fff; /* Quanto può arrivare a tingersi di verde il giorno più affollato del calendario (la legge app.js). Al buio il testo è bianco e regge anche un fondo pieno; al chiaro il testo è scuro, quindi il fondo va tenuto più tenue o il numero non si legge più. */ --cal-intensita-max: 80; --riga-hover: #13251f; --riga-stella: #1b1c12; --riga-stella-hover: #232314; --stella-off: #4c5f59; --stato-bordo-blu: #3c6ea0; --stato-bordo-verde: #2b6a55; --stato-bordo-rosso: #6b3a35; /* Il toast usa var(--green) come fondo: al buio è chiaro, quindi il testo sopra è scuro. A tema chiaro si ribalta. */ --toast-ink: #06120f; --toast-ink-errore: #2b0e0c; --r-lombardia-bg: #1e2c4e; --r-lombardia-ink: #a9c0ff; --r-piemonte-bg: #452c1d; --r-piemonte-ink: #ffc294; --r-veneto-bg: #163a30; --r-veneto-ink: #86e0bd; --r-liguria-bg: #123a3f; --r-liguria-ink: #8adbe4; --r-toscana-bg: #3d2536; --r-toscana-ink: #f0a8d0; --r-marche-bg: #2b3418; --r-marche-ink: #cbe07a; --r-lazio-bg: #3a2a17; --r-lazio-ink: #efc373; --r-emilia-bg: #3b1f22; --r-emilia-ink: #f5a3a0; --r-umbria-bg: #1f3348; --r-umbria-ink: #9dc7f0; --r-friuli-bg: #2c2447; --r-friuli-ink: #c0b0f5; --r-aosta-bg: #123c33; --r-aosta-ink: #8fe6c6; } /* --------------------------------------------------------- tema chiaro -- * * Un solo selettore, non una @media: chi apre la pagina riceve `data-tema` * già scritto in testa a index.html — dal valore salvato se ha scelto, dal * sistema operativo altrimenti. La dashboard non funziona senza JavaScript * (i dati arrivano tutti da fetch), quindi non serve un ripiego in CSS puro. */ :root[data-tema="light"] { color-scheme: light; --canvas: #eef3f0; --paper: #ffffff; --paper-2: #f3f7f5; --paper-3: #ffffff00; --line: #d8e3de; --line-2: #bacfc6; --ink: #0c1a16; --ink-2: #354a44; --muted: #5c736d; --green: #0a6b53; --green-strong: #0f6d54; --green-soft: #dff2ea; --blue: #1d5fa8; --gold: #8a6a12; --gold-soft: #fbf1d6; --rosso: #b3352c; --rosso-soft: #fbe4e1; --su-verde: #fff; --green-hover: #0c5a45; /* Al chiaro le ombre nere sporcano: si tengono appena accennate. */ --ombra-card: rgba(16, 44, 36, .10); --ombra-drawer: rgba(16, 44, 36, .16); --velo: rgba(12, 26, 22, .35); --alone-1: #0f6d5410; --alone-2: #8a6a1210; --chip-bordo: #a9d4c4; --chip-ink: #0d6a52; --gold-ink: #6d5310; --gold-bordo: #d9c47e; --gold-ink-2: #6d5310; --blue-soft: #e2edfa; --green-soft-2: #d5f0e4; --tag-neutro: #e6ece9; --cal-ink: #0c1a16; --cal-intensita-max: 52; --riga-hover: #eef4f1; --riga-stella: #fdf6e3; --riga-stella-hover: #f8eecf; --stella-off: #b0c1bb; --stato-bordo-blu: #5b8ec2; --stato-bordo-verde: #4f9e85; --stato-bordo-rosso: #c98c85; --toast-ink: #ffffff; --toast-ink-errore: #ffffff; --r-lombardia-bg: #e6ebf8; --r-lombardia-ink: #2f4a8c; --r-piemonte-bg: #f7e9dd; --r-piemonte-ink: #8a4f20; --r-veneto-bg: #dcf1e8; --r-veneto-ink: #10614a; --r-liguria-bg: #daf0f3; --r-liguria-ink: #12626e; --r-toscana-bg: #f8e4f0; --r-toscana-ink: #8d3568; --r-marche-bg: #eef3d9; --r-marche-ink: #55651a; --r-lazio-bg: #f9edd8; --r-lazio-ink: #8a5f16; --r-emilia-bg: #fbe3e2; --r-emilia-ink: #98352f; --r-umbria-bg: #e2eefa; --r-umbria-ink: #2a5a86; --r-friuli-bg: #e9e5f9; --r-friuli-ink: #4b3f96; --r-aosta-bg: #dcf2e9; --r-aosta-ink: #0f6350; } * { box-sizing: border-box; } html, body { margin: 0; max-width: 100%; overflow-x: hidden; background: var(--canvas); color: var(--ink); } body { font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; opacity: .4; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } [hidden] { display: none !important; } h1, h2, h3 { margin: 0; letter-spacing: -.02em; } .eyebrow { margin: 0 0 6px; color: var(--green); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .ghost { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 12px; font-weight: 700; } .ghost:hover { border-color: var(--line-2); color: var(--ink); } /* ---------------------------------------------------------- tema chiaro/scuro */ /* Quadrato: dentro c'è un solo carattere, non un'etichetta. */ .tema-btn { display: inline-grid; place-items: center; width: 34px; padding: 0; font-size: 15px; line-height: 1; } /* Nella pagina di accesso non c'è una barra dove appoggiarlo. */ .login-tema { position: fixed; top: 16px; right: 16px; z-index: 5; } /* Il cambio di tema non deve essere uno scatto secco. Si animano solo fondi, bordi e testo dei contenitori: mettere una transizione su `tbody tr` renderebbe pigro l'evidenziamento della riga sotto il mouse. */ @media (prefers-reduced-motion: no-preference) { html, body, .panel, .kpi, .ghost, .drawer, .login-card, .sync, .chi, th, .filtri-grid input, .filtri-grid select, .stato-select, .cal-grid button { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } } .button-primary { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--green-strong); color: var(--su-verde); font-size: 12px; font-weight: 700; text-decoration: none; } .button-primary:hover { background: var(--green-hover); } /* ------------------------------------------------------------- accesso -- */ .login-page { display: grid; place-items: center; min-height: 100svh; padding: 24px; background: radial-gradient(circle at 18% 12%, var(--alone-1) 0, transparent 38%), radial-gradient(circle at 82% 84%, var(--alone-2) 0, transparent 34%), var(--canvas); } .login-card { width: min(100%, 460px); padding: 40px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: 0 30px 90px var(--ombra-card); } .login-brand { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 22px; border-radius: 14px; background: var(--green-strong); color: var(--su-verde); font: 700 26px Georgia, serif; } .login-card h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.02; } .login-copy { margin: 16px 0 24px; color: var(--muted); } .login-card form { display: grid; gap: 7px; } .login-card label { margin-top: 8px; font-size: 12px; font-weight: 700; } .login-card input { min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); outline: none; } .login-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .login-card button[type=submit] { min-height: 46px; margin-top: 14px; border: 0; border-radius: 10px; background: var(--green-strong); color: var(--su-verde); font-weight: 800; } .login-error { margin: 4px 0 0; padding: 9px 11px; border-radius: 8px; background: var(--rosso-soft); color: var(--rosso); font-size: 12.5px; } .login-card > small { display: block; margin-top: 18px; color: var(--muted); font-size: 11px; text-align: center; } /* ------------------------------------------------------------- struttura */ .shell { width: min(100% - 36px, 1560px); margin: 0 auto; padding: 26px 0 40px; } .topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; } .topbar h1 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1; } .topbar-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .perimetro { display: inline-flex; align-items: center; gap: 6px; margin: 9px 0 0; padding: 4px 10px; border: 1px solid var(--chip-bordo); border-radius: 999px; background: var(--green-soft); color: var(--chip-ink); font-size: 11px; font-weight: 700; } .perimetro::before { content: '◧'; opacity: .8; } .sync { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 11.5px; white-space: nowrap; } .sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .sync.attivo i { animation: battito 1.1s ease-out 2; } .sync.errore i { background: var(--rosso); box-shadow: 0 0 0 3px var(--rosso-soft); } @keyframes battito { 0% { transform: scale(1); } 50% { transform: scale(1.7); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .sync.attivo i { animation: none; } } .aggiorna { display: inline-flex; align-items: center; gap: 6px; } .aggiorna .rotella { display: inline-block; font-size: 14px; line-height: 1; } .aggiorna[aria-busy="true"] .rotella { animation: gira 1s linear infinite; } .aggiorna[aria-busy="true"] { color: var(--green); border-color: var(--green-strong); } @keyframes gira { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .aggiorna[aria-busy="true"] .rotella { animation: none; } } .chi { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 11.5px; font-weight: 700; } /* ------------------------------------------------------------------ KPI */ .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; } .kpi { position: relative; min-height: 118px; padding: 18px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--raggio); background: var(--paper); } .kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--green-strong); } .kpi.accent-ribasso::before { background: var(--blue); } .kpi.accent-stella::before { background: var(--gold); } .kpi span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .kpi strong { display: block; margin: 14px 0 6px; font-size: clamp(23px, 2.3vw, 31px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .kpi small { color: var(--muted); font-size: 11.5px; } /* -------------------------------------------------------------- pannelli */ .panel { border: 1px solid var(--line); border-radius: var(--raggio); background: var(--paper); } .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; } .panel-head h2 { font-size: 17px; } .panel-head-actions { display: flex; gap: 8px; align-items: center; } .filtri { margin-bottom: 14px; } .filtri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; padding: 0 18px 16px; } .filtri-grid label { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .filtri-grid label.wide { grid-column: span 2; } .filtri-grid label > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .filtri-grid input, .filtri-grid select, .pill-toggle { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); color: var(--ink); outline: none; } .filtri-grid input:focus, .filtri-grid select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .pill-toggle { color: var(--gold); font-size: 12.5px; font-weight: 700; text-align: left; } .pill-toggle.attivo { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); } .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 16px; } .chips button { padding: 5px 9px; border: 1px solid var(--chip-bordo); border-radius: 999px; background: var(--green-soft); color: var(--chip-ink); font-size: 11px; font-weight: 700; } .chips button b { margin-left: 4px; color: var(--gold); } /* ------------------------------------------------------------- contenuto */ .content { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 14px; align-items: start; } .content > * { min-width: 0; } .calendario { position: sticky; top: 14px; padding-bottom: 16px; } .mese { display: grid; gap: 5px; padding: 0 18px; } .mese span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .mese select { min-height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); color: var(--ink); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 16px 18px 0; } .cal-grid .giorno-nome { padding-bottom: 3px; color: var(--muted); text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; } .cal-grid .vuota { aspect-ratio: 1; } .cal-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; aspect-ratio: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--muted); font-size: 11px; } .cal-grid button:not(:disabled) { color: var(--cal-ink); } .cal-grid button.oggi { border-color: var(--gold); } .cal-grid button.scelto { outline: 2px solid var(--gold); outline-offset: 1px; } .cal-grid button b { font-size: 8.5px; font-weight: 800; opacity: .85; } .cal-nota { margin: 12px 18px 0; color: var(--muted); font-size: 11.5px; } .feed { margin: 18px 18px 0; padding-top: 14px; border-top: 1px solid var(--line); } .feed-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; } .feed-list li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-2); } .feed-vuoto { color: var(--muted); } .tag { padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .tag.nuova { background: var(--green-soft); color: var(--green); } .tag.ribasso { background: var(--blue-soft); color: var(--blue); } .tag.rincaro, .tag.rimossa { background: var(--rosso-soft); color: var(--rosso); } .tag.rinvio, .tag.ripristinata { background: var(--gold-soft); color: var(--gold); } /* -------------------------------------------------------------- tabella */ .riepilogo { margin: 0; color: var(--muted); font-size: 12.5px; text-align: right; } .riepilogo b { color: var(--ink); } .tabella-wrap { overflow-x: auto; border-top: 1px solid var(--line); } table { width: 100%; border-collapse: collapse; } th, td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } th { background: var(--paper-2); white-space: nowrap; } th.n, td.n { text-align: right; } .sort { padding: 0; border: 0; background: none; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .sort:hover, .sort.attivo { color: var(--green); } th.c-stella, td.c-stella { width: 38px; text-align: center; padding-left: 8px; padding-right: 4px; } th.c-stato, td.c-stato { width: 120px; } th.c-link, td.c-link { width: 88px; text-align: center; } tbody tr:hover { background: var(--riga-hover); } tbody tr.con-stella { background: var(--riga-stella); } tbody tr.con-stella:hover { background: var(--riga-stella-hover); } tbody tr.anomala td:nth-child(4) { border-left: 2px solid var(--rosso); } td strong { display: block; font-weight: 700; } td small { display: block; color: var(--muted); font-size: 11px; } td.n { font-variant-numeric: tabular-nums; white-space: nowrap; } td.minima { color: var(--green); font-weight: 700; } td.iniziale { color: var(--gold); } .stella-btn { border: 0; background: none; color: var(--stella-off); font-size: 18px; line-height: 1; padding: 2px; } .stella-btn.attiva { color: var(--gold); } .badge-regione { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; background: var(--tag-neutro); color: var(--ink-2); } .r-lombardia { background: var(--r-lombardia-bg); color: var(--r-lombardia-ink); } .r-piemonte { background: var(--r-piemonte-bg); color: var(--r-piemonte-ink); } .r-veneto { background: var(--r-veneto-bg); color: var(--r-veneto-ink); } .r-liguria { background: var(--r-liguria-bg); color: var(--r-liguria-ink); } .r-toscana { background: var(--r-toscana-bg); color: var(--r-toscana-ink); } .r-marche { background: var(--r-marche-bg); color: var(--r-marche-ink); } .r-lazio { background: var(--r-lazio-bg); color: var(--r-lazio-ink); } .r-emilia-romagna { background: var(--r-emilia-bg); color: var(--r-emilia-ink); } .r-umbria { background: var(--r-umbria-bg); color: var(--r-umbria-ink); } .r-friuli-venezia-giulia { background: var(--r-friuli-bg); color: var(--r-friuli-ink); } .r-valle-d-aosta { background: var(--r-aosta-bg); color: var(--r-aosta-ink); } .badge-ribasso { display: inline-block; padding: 3px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; } .badge-ribasso.forte { background: var(--green-soft-2); color: var(--green); } .badge-ribasso.zero { background: transparent; color: var(--muted); font-weight: 500; } .badge-deserte { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border: 1px solid var(--gold-bordo); border-radius: 8px; background: var(--gold-soft); color: var(--gold-ink-2); font-size: 12px; font-weight: 800; } .badge-deserte.zero { border-color: var(--line); background: transparent; color: var(--muted); font-weight: 500; } .open-link { display: inline-block; padding: 6px 10px; border-radius: 999px; background: var(--green-strong); color: var(--su-verde); text-decoration: none; white-space: nowrap; font-size: 11px; font-weight: 700; } .open-link:hover { background: var(--green-hover); } .stato-select { width: 100%; min-height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-2); color: var(--ink-2); font-size: 11.5px; } .stato-select[data-stato="da_visitare"] { border-color: var(--stato-bordo-blu); color: var(--blue); } .stato-select[data-stato="visitata"] { border-color: var(--stato-bordo-verde); color: var(--green); } .stato-select[data-stato="scartata"] { border-color: var(--stato-bordo-rosso); color: var(--rosso); } .avviso-anomalia { display: inline-block; margin-top: 3px; padding: 2px 6px; border-radius: 4px; background: var(--rosso-soft); color: var(--rosso); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .vuoto { padding: 56px 20px; color: var(--muted); text-align: center; } .vuoto span { display: block; margin-bottom: 8px; font-size: 26px; } .vuoto strong { display: block; color: var(--ink); } .paginazione { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; } .paginazione button { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink); font-size: 12px; } .piede { padding: 26px 0 0; color: var(--muted); text-align: center; font-size: 11.5px; } /* ------------------------------------------------------------ dettaglio */ .drawer-fondo { position: fixed; inset: 0; z-index: 40; background: var(--velo); } .drawer { position: fixed; z-index: 41; inset: 0 0 0 auto; width: min(100%, 520px); display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--paper); box-shadow: -20px 0 60px var(--ombra-drawer); } .drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 20px; border-bottom: 1px solid var(--line); } .drawer-head h2 { font-size: 19px; } .drawer-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; } .d-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .d-dati div { padding: 11px 13px; background: var(--paper); } .d-dati dt { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .d-dati dd { margin: 4px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; } .d-sezione h3 { margin-bottom: 9px; font-size: 13px; color: var(--ink-2); } .d-nota { display: grid; gap: 8px; } .d-nota textarea { min-height: 86px; padding: 10px 12px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink); outline: none; } .d-nota textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .d-nota-azioni { display: flex; align-items: center; gap: 9px; } .d-firma { color: var(--muted); font-size: 11px; } .d-storico { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .d-storico li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .d-storico li span { color: var(--muted); } .d-link { display: block; padding: 11px; border-radius: 10px; background: var(--green-strong); color: var(--su-verde); text-align: center; text-decoration: none; font-weight: 700; font-size: 13px; } .toast { position: fixed; z-index: 60; top: 18px; left: 50%; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: var(--green); color: var(--toast-ink); font-size: 12.5px; font-weight: 700; box-shadow: 0 14px 40px var(--ombra-card); } .toast.errore { background: var(--rosso); color: var(--toast-ink-errore); } /* ------------------------------------------------------------ responsive */ @media (max-width: 1180px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .content { grid-template-columns: 1fr; } .calendario { position: static; } .cal-grid { max-width: 460px; } } @media (max-width: 720px) { .shell { width: min(100% - 20px, 1560px); } .kpi-grid { grid-template-columns: 1fr; } .filtri-grid label.wide { grid-column: span 1; } .topbar { flex-direction: column; align-items: flex-start; } .panel-head { flex-wrap: wrap; } .riepilogo { text-align: left; } /* La barra di stato resta visibile: è l'informazione che dice se i dati mostrati sono quelli correnti. */ .sync { font-size: 11px; padding: 6px 10px; } .drawer { width: 100%; } table { min-width: 860px; } }