/* =========================================================================== Domus — design system v1 (Brand Book famiglia Ayni) Principi: fondo Carta, superfici bianche, UN accento per schermata (Cobalto). Salvia = esiti positivi · Ambra = scadenze · Corallo = SOLO errori. Terracotta: solo nel simbolo. Titoli Signika 600 (700 riservato al logo). =========================================================================== */ :root { /* I grafici (0.117.0): entrate e uscite, provati contro il daltonismo */ --grafico-entrate: #3FA88F; --grafico-uscite: #33589A; --cobalto: #4A6FA5; --cobalto-scuro: #3A5885; --cobalto-velo: #EDF2F8; /* velo per stati attivi/hover, mai per testo */ --salvia: #3D8B7D; --salvia-scura: #33756A; --ambra: #E8A13D; --ambra-velo: #FBEBD0; /* il fondo dei contatori del menu (0.99.0) */ /* Le quattro parti di «Quanto devi tenere pronto» (0.99.1): vedi la pagina dei cedolini in fondo */ --ced-breve: #2a78d6; --ced-tfr: #eb6834; --ced-ore: #1baf7a; --ced-mensilita: #eda100; /* Il tabellone dei turni (0.101.0): lo standard, l'orario cambiato a mano, la rotazione (sabato, venerdì sera), l'apertura sotto la barretta */ --tb-std: #4A6FA5; --tb-mano: #D9733A; --tb-rot: #8B5E8F; --tb-apertura: #DDEBE3; /* Le ore dal telefono (0.103.0): la scheda di un giorno di assenza, il giorno segnato e lo scarto dal previsto */ --oo-assenza: #C9764A; --oo-assenza-scura: #A85A33; --oo-fatto: #E3F1EE; --oo-fatto-linea: #BFDDD6; /* L'app operatori ridisegnata (0.104.0): i veli delle icone e l'ombra delle carte */ --op-ombra: 0 1px 3px rgba(58,46,40,.06), 0 6px 18px rgba(58,46,40,.05); --op-velo-salvia: #E1F1EC; --op-velo-ametista: #F1E8F2; --op-velo-corallo: #F8E1E1; --op-velo-talpa: #EFEAE3; --op-velo-ambra: #FCEBCB; --op-scuro: #2E2723; /* Le luci dell'app (0.104.2): il campo di notte e la luce dei fari */ --op-notte: #172033; --op-notte-fondo: #0D1320; --op-faro: #F5B83D; --op-faro-chiaro: #FFD98A; --oo-fatto-testo: #2B6A5F; --oo-assenza-velo: #FDE7DC; --oo-assenza-linea: #F5CDB8; --oo-scarto: #7A5418; --oo-ambra-linea: #F0D29E; --ametista: #8B5E8F; --corallo: #C94F4F; --caffe: #3A2E28; --talpa: #6B5D51; --carta: #FAF7F2; --bianco: #FFFFFF; --linea: #EAE4DB; /* Il riepilogo dei contributi (0.105.0): lo stato del progetto come nel foglio della segreteria — azzurro in corso, arancio da rendicontare, verde rendicontato. Veli chiari: il testo resta d'inchiostro. */ --riep-corso: #E3EFF9; --riep-corso-linea: #8DB8DF; --riep-darend: #FCEBD3; --riep-darend-linea: #E8A13D; --riep-rend: #E2F1DF; --riep-rend-linea: #7DB874; --font-display: "Signika", "Trebuchet MS", system-ui, sans-serif; --font-testo: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --colonne-luci: 3; /* quante tessere di gruppo in fila: la pagina lo ridichiara */ /* La settimana dei turni (0.80.0): la pagina li ridichiara, per l'agenda e per ogni blocco — l'asse, la posizione, la corsia, il colore del dipendente */ --sett-h-ora: 44px; --sett-asse-min: 600; --sett-asse-ore: 10; --sett-da: 0; --sett-per: 60; --sett-corsia: 0; --sett-corsie: 1; --dip-colore: var(--talpa); /* ---- Design system v2 (0.74.0): UNA scala, non un valore per volta. Spaziatura a passi fissi, cinque corpi di testo e due pesi, tre raggi piu' la pillola, due ombre, due altezze di controllo. Le regole nuove usano SOLO questi; le vecchie migrano pagina per pagina. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --testo-xs: 12px; /* etichette in maiuscoletto, note di tabella */ --testo-sm: 13px; /* testo di contorno, bottoni piccoli */ --testo-md: 15px; /* il corpo di tutto */ --testo-lg: 19px; /* titoli di card e di sezione */ --testo-xl: 26px; /* il titolo della pagina */ --peso-testo: 400; --peso-forte: 600; --raggio-sm: 8px; /* controlli: input, bottoni piccoli, chip quadre */ --raggio: 10px; /* card e superfici (v1, resta) */ --raggio-lg: 14px; /* modali, hero, superfici grandi */ --raggio-pillola: 999px; --ombra: 0 1px 2px rgba(58, 46, 40, 0.05); --ombra-alta: 0 8px 24px rgba(58, 46, 40, 0.12); --alt-controllo: 38px; /* bottoni e input si allineano alla stessa riga */ --alt-controllo-sm: 30px; } @font-face { font-family: "Signika"; src: url("/assets/fonts/Signika-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } * { box-sizing: border-box; } /* `hidden` vince su qualunque classe (0.70.0). Il browser nasconde gli elementi con l'attributo `hidden` con una regola sua, DEBOLISSIMA: basta una classe che dica «display» — e .btn dice inline-flex — perché il pulsante resti a schermo anche con hidden addosso. Era così per quattro pulsanti, che la pagina credeva di nascondere e che invece si vedevano sempre. Una riga, e vale per tutti. */ [hidden] { display: none !important; } body { margin: 0; background: var(--carta); color: var(--caffe); font-family: var(--font-testo); font-size: 15px; line-height: 1.55; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; margin: 0; } h1 { font-size: 28px; } h2 { font-size: 21px; margin-bottom: 12px; } h3 { font-size: 16px; margin-bottom: 8px; } .lead { color: var(--talpa); margin: 4px 0 0; } .muted { color: var(--talpa); font-size: 13px; } .caption { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--talpa); } .num { font-variant-numeric: tabular-nums; font-weight: 600; } a { color: var(--cobalto); } /* ==== Shell con menu laterale (area staff) ================================ */ .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; } .sidebar { background: var(--bianco); border-right: 1px solid var(--linea); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 20px 14px; } /* La colonna e' alta quanto la finestra e dentro c'e' piu' di quanto ci stia: marchio, associazione e pie' di pagina non si schiacciano (flex: none), e scorre SOLO l'elenco delle voci. Prima l'intera colonna era rigida: su uno schermo basso la voce «Piattaforma» finiva fuori senza modo di raggiungerla, e il riquadro dell'associazione veniva compresso a una riga vuota. */ .side-brand, .side-tenant, .side-foot { flex: none; } .side-nav { overflow-y: auto; min-height: 0; padding-right: 2px; } .side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 16px; text-decoration: none; } .brand-mark { width: 28px; height: 24px; flex: none; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--caffe); letter-spacing: -0.01em; } .brand-u { color: var(--cobalto); } .side-tenant { display: block; margin: 0 6px 14px; padding: 8px 12px; background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; color: var(--caffe); font-size: 13px; font-weight: 600; text-decoration: none; white-space: normal; overflow: hidden; line-height: 1.3; } .side-tenant .caption { display: block; font-size: 10px; } .side-tenant:hover { border-color: var(--cobalto); } .side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .side-nav a, .side-foot a, .side-foot button { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--caffe); font-size: 14.5px; font-weight: 600; text-decoration: none; border: 0; background: none; font-family: inherit; width: 100%; text-align: left; cursor: pointer; } .side-nav a:hover, .side-foot a:hover, .side-foot button:hover { background: var(--carta); } .side-nav a.active { background: var(--cobalto-velo); color: var(--cobalto-scuro); } .side-nav a.active svg { color: var(--cobalto); } .side-nav svg, .side-foot svg { width: 20px; height: 20px; flex: none; color: var(--talpa); } .side-foot { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; } .side-foot button:hover { color: var(--corallo); } /* Gruppi con sottomenu: la voce madre apre/chiude, le figlie rientrano lungo una guida che parte dall'icona della madre. */ .nav-group { display: flex; flex-direction: column; } .nav-parent { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--caffe); font-size: 14.5px; font-weight: 600; border: 0; background: none; font-family: inherit; width: 100%; text-align: left; cursor: pointer; } .nav-parent:hover { background: var(--carta); } .nav-parent.active { color: var(--cobalto-scuro); } .nav-parent.active > svg:first-child { color: var(--cobalto); } .nav-parent > svg:first-child { width: 20px; height: 20px; flex: none; color: var(--talpa); } .nav-chevron { margin-left: auto; display: inline-flex; color: var(--talpa); transition: transform 140ms ease; } .nav-chevron svg { width: 14px; height: 14px; } .nav-group.open .nav-chevron { transform: rotate(90deg); } .nav-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 21px; padding-left: 9px; border-left: 2px solid var(--linea); } .nav-group.open .nav-sub { display: flex; } .nav-sub a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--talpa); font-size: 13.5px; font-weight: 600; text-decoration: none; } .nav-sub a:hover { background: var(--carta); color: var(--caffe); } .nav-sub a.active { background: var(--cobalto-velo); color: var(--cobalto-scuro); } .nav-sub a.active svg { color: var(--cobalto); } .nav-sub svg { width: 17px; height: 17px; flex: none; color: var(--talpa); } @media (prefers-reduced-motion: reduce) { .nav-chevron { transition: none; } } /* I gruppi del menu (0.99.0): un titolo piccolo e le voci, un po' piu' fitte di quelle sole, perche' sono tante. Il titolo apre e chiude il gruppo. */ .nav-sezione { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; } .nav-titolo { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 12px 3px; border: 0; background: none; font-family: inherit; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--talpa); cursor: pointer; border-radius: 6px; } .nav-titolo:hover { color: var(--caffe); } .nav-titolo .nav-chevron { margin-left: 2px; transform: rotate(90deg); } .nav-titolo .nav-chevron svg { width: 11px; height: 11px; } .nav-sezione.chiusa .nav-titolo .nav-chevron { transform: none; } .nav-sezione.chiusa > :not(.nav-titolo) { display: none; } .nav-sezione > a, .nav-sezione .nav-parent { padding: 6px 12px; font-size: 14px; } #pn-altro > summary svg { width: 14px; height: 14px; transform: rotate(90deg); } .nav-conta { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--ambra-velo); color: var(--caffe); font-size: 12px; font-weight: 700; text-align: center; line-height: 18px; } @media (max-width: 920px) { .nav-titolo { padding: 8px 12px; font-size: 11px; } } .main { min-width: 0; } .content { max-width: 1040px; margin: 0 auto; padding: 36px 40px 80px; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } /* max-width: con flex: none la fila di pulsanti non andava mai a capo e, se erano tanti (la scheda progetto), usciva dalla pagina a destra */ .page-actions { flex: none; max-width: 100%; padding-top: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Barra mobile (nascosta su desktop) */ .mobilebar { display: none; } @media (max-width: 920px) { .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 40; transform: translateX(-105%); transition: transform 160ms ease; } body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(58,46,40,0.25); } .mobilebar { display: flex; align-items: center; gap: 12px; background: var(--bianco); border-bottom: 1px solid var(--linea); padding: 10px 16px; } .mobilebar .brand-name { font-size: 19px; } .burger { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--caffe); } .burger svg { width: 24px; height: 24px; display: block; } .content { padding: 24px 18px 64px; } .page-head { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* ==== Shell semplice (area famiglie e pagine senza sidebar) =============== */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; background: var(--bianco); border-bottom: 1px solid var(--linea); padding: 12px 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .topbar .brand-mark { width: 30px; height: 26px; } .mainnav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mainnav a { color: var(--caffe); text-decoration: none; font-weight: 600; font-size: 14px; } .mainnav a:hover, .mainnav a.active { color: var(--cobalto); } .page { max-width: 860px; margin: 0 auto; padding: 32px 24px 64px; } .page-center { text-align: center; padding-top: 12vh; } .brand-mark-lg { width: 60px; height: 52px; margin-bottom: 16px; } /* Pagine di accesso: un solo momento, centrato */ .auth-wrap { min-height: 100vh; display: grid; place-items: start center; padding: 10vh 20px 40px; } .auth-box { width: 100%; max-width: 400px; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; } .auth-brand .brand-mark { width: 34px; height: 30px; } .auth-brand .brand-name { font-size: 26px; } .auth-card { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 28px 32px; box-shadow: var(--ombra); } .auth-card h1 { font-size: 22px; margin-bottom: 4px; } .auth-links { margin-top: 16px; font-size: 14px; } /* ==== Componenti =========================================================== */ .card { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 22px 26px; margin-top: 20px; box-shadow: var(--ombra); } /* Due taglie, due altezze, FISSE: sulla stessa riga i bottoni sono alti uguali, qualunque cosa contengano (misurate cinque altezze diverse su una sola pagina prima della 0.74.0). L'altezza la fa min-height, non il padding. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cobalto); color: var(--bianco); border: 0; border-radius: var(--raggio-sm); min-height: var(--alt-controllo); padding: 0 20px; font-family: var(--font-testo); font-size: var(--testo-md); font-weight: var(--peso-forte); text-decoration: none; cursor: pointer; line-height: 1.2; box-shadow: 0 1px 2px rgba(58,46,40,0.12); white-space: nowrap; transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease; } .btn:hover { background: var(--cobalto-scuro); box-shadow: 0 3px 10px rgba(74,111,165,0.28); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 3px solid var(--ambra); outline-offset: 2px; } .btn svg { width: 18px; height: 18px; } .btn-secondary { background: var(--bianco); color: var(--cobalto); border: 1px solid var(--cobalto); box-shadow: var(--ombra); } .btn-secondary:hover { background: var(--cobalto-velo); box-shadow: var(--ombra); } .btn-sm { min-height: var(--alt-controllo-sm); padding: 0 14px; font-size: var(--testo-sm); border-radius: var(--raggio-sm); } .btn-danger { background: var(--bianco); color: var(--corallo); border: 1px solid var(--corallo); box-shadow: var(--ombra); } .btn-danger:hover { background: #FBF0F0; box-shadow: var(--ombra); } /* Variante semantica: un'azione "positiva" (salvia) */ .btn-success { background: var(--salvia); } .btn-success:hover { background: var(--salvia-scura); box-shadow: 0 3px 10px rgba(61,139,125,0.28); } .btn-ghost { background: transparent; color: var(--talpa); border: 1px solid var(--linea); box-shadow: none; } .btn-ghost:hover { background: var(--carta); color: var(--caffe); box-shadow: none; } .btn-block { width: 100%; } form .btn { margin-top: 20px; } .linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: 14px; color: var(--talpa); cursor: pointer; } .linklike:hover { color: var(--corallo); } .inline-form { display: inline; margin: 0; } label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--talpa); margin: 16px 0 4px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=url], select, textarea { width: 100%; max-width: 440px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; background: var(--bianco); color: var(--caffe); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--cobalto); outline-offset: 1px; border-color: var(--cobalto); } .form-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; } .field-row { display: flex; gap: 10px; align-items: flex-end; max-width: 440px; } .field-row > :first-child { flex: 1; } .field-row .btn { margin: 0 0 1px; white-space: nowrap; } /* Tabelle dense (schema Prima Nota): numeri a destra, testate discrete */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--talpa); border-bottom: 1px solid var(--linea); padding: 8px 12px; } .table td { padding: 11px 12px; border-bottom: 1px solid var(--linea); } .table tr:last-child td { border-bottom: 0; } .table a { text-decoration: none; } .row-link { cursor: pointer; } .row-link:hover td { background: var(--cobalto-velo); } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--cobalto-velo); color: var(--cobalto-scuro); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; } .cell-person { display: flex; align-items: center; gap: 12px; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--bianco); } .badge-ok { background: var(--salvia); } .badge-err { background: var(--corallo); } .badge-neutral { background: var(--talpa); } .badge-premium { background: var(--ametista); } .badge-warn { background: var(--ambra); } /* Avvisi (0.76.0): fondo tenue e filo colorato a sinistra, sui token della scala v2. Il segno di stato (un piccolo svg) lo mette il layout nei soli flash; i banner scritti nelle viste restano di solo testo e questa regola veste bene entrambi. Le classi non cambiano nome: le prove li riconoscono da lì. `overflow-wrap` tiene dentro i 320px anche una parola lunghissima. */ .alert { display: flex; align-items: flex-start; gap: var(--sp-3); border-radius: var(--raggio-sm); border-left: 4px solid var(--talpa); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--testo-md); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; } /* Il segno sta DOPO il testo nel markup (le prove estraggono il messaggio subito dopo la classe) e torna davanti all'occhio con `order`. */ .alert > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; order: -1; } .alert-ok { background: #E8F2EF; border-left-color: var(--salvia); color: #28594F; } .alert-err { background: #F7E6E6; border-left-color: var(--corallo); color: #8C3737; } .alert-warn { background: #FBF0DC; border-left-color: var(--ambra); color: #7A5518; } /* `nota-fissa`: un avviso scritto nella pagina, non un messaggio flash. Si veste come gli altri; la classe in più serve alle prove, che riconoscono i flash dalla coppia esatta «alert alert-warn» (0.89.0). */ .alert.nota-fissa { box-shadow: none; } /* Un avviso con più pezzi (titolo, paragrafo, riga da incollare) va in colonna: in riga, sul telefono, il titolo andava a capo a ogni parola (0.92.0). */ .alert.alert-blocco { display: block; } .alert-blocco > * { margin: 0 0 var(--sp-2); } .alert-blocco > :last-child { margin-bottom: 0; } .alert-blocco > strong { display: block; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 20px; } .kpi { display: block; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 16px 20px; text-decoration: none; color: var(--caffe); box-shadow: var(--ombra); } a.kpi:hover { border-color: var(--cobalto); } .kpi-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.18; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; } .kpi-hint { display: block; font-size: 13px; color: var(--salvia-scura); font-weight: 600; } .steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .steps-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; } .steps-list a { font-weight: 600; } .step-mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linea); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--bianco); } .step-done .step-mark { background: var(--salvia); border-color: var(--salvia); } .step-done span { color: var(--talpa); text-decoration: line-through; } .module-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .module-chip { padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; } .module-on { background: #E8F2EF; color: #28594F; } .module-off { background: var(--carta); color: var(--talpa); border: 1px dashed var(--linea); } .filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .filter-row input[type=text] { max-width: 280px; } .filter-row select { width: auto; } .filter-row .btn { margin: 0; } .empty-state { text-align: center; padding: 40px 20px; color: var(--talpa); } .empty-state svg { width: 40px; height: 40px; color: var(--linea); margin-bottom: 8px; } .empty-state .btn { margin-top: 16px; } .code-chip { font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 17px; letter-spacing: 0.12em; background: #F1EBE2; border-radius: 6px; padding: 3px 10px; } .secret-box { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: 0.06em; background: #F1EBE2; border-radius: 8px; padding: 10px 14px; display: inline-block; user-select: all; overflow-wrap: anywhere; max-width: 100%; } .recovery-list { columns: 2; font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: 0.06em; padding-left: 20px; } .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; margin: 10px 0; } .perm-grid label { display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--caffe); } .tenant-list { list-style: none; padding: 0; display: grid; gap: 10px; } .tenant-list button { width: 100%; text-align: left; background: var(--bianco); border: 1px solid var(--linea); border-radius: 10px; padding: 14px 18px; font: inherit; font-weight: 600; color: var(--caffe); cursor: pointer; } .tenant-list button:hover { border-color: var(--cobalto); color: var(--cobalto); } /* Scheda contatto */ .profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .profile-head .avatar { width: 52px; height: 52px; font-size: 19px; } .profile-meta { color: var(--talpa); font-size: 14px; } .dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; margin: 0; } .dl dt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--talpa); padding-top: 3px; } .dl dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 560px) { .dl { grid-template-columns: 1fr; gap: 2px; } .dl dd { margin-bottom: 10px; } } datalist { display: none; } /* =========================================================================== Design system 2.0 — gerarchia, grinta, grafici (Fase 5h) =========================================================================== */ /* --- Hero di pagina: titolo con icona in un chip d'accento --- */ .hero { display: flex; align-items: center; gap: 16px; } .hero-ico { width: 52px; height: 52px; border-radius: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cobalto-velo); color: var(--cobalto); } .hero-ico svg { width: 28px; height: 28px; } /* --- Testata di card con icona, titolo e azioni sulla stessa riga --- */ .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .card-head h2, .card-head h3 { margin: 0; } .card-head svg { width: 20px; height: 20px; color: var(--talpa); flex: none; } .card-head .card-head-act { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* --- KPI potenziati: rail d'accento a sinistra e icona --- */ .kpi { position: relative; overflow: hidden; transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; } a.kpi:hover { box-shadow: 0 6px 18px rgba(58,46,40,0.1); transform: translateY(-1px); } .kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .kpi-top .caption { margin: 0; } .kpi-ico { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--carta); color: var(--talpa); } .kpi-ico svg { width: 19px; height: 19px; } .kpi--accent, .kpi--good, .kpi--warn, .kpi--bad { border-left: 4px solid var(--cobalto); } .kpi--accent { border-left-color: var(--cobalto); } .kpi--good { border-left-color: var(--salvia); } .kpi--warn { border-left-color: var(--ambra); } .kpi--bad { border-left-color: var(--corallo); } .kpi--good .kpi-ico { background: #E8F2EF; color: var(--salvia-scura); } .kpi--warn .kpi-ico { background: #FBF0DC; color: #9A6A16; } .kpi--bad .kpi-ico { background: #F7E6E6; color: var(--corallo); } .kpi--accent .kpi-ico { background: var(--cobalto-velo); color: var(--cobalto); } /* Il conto interno (0.93.1): non è cassa, e non ha l'aria di esserlo */ .kpi-interno { border-left: 4px dashed var(--talpa); } .kpi-interno .kpi-num { color: var(--talpa); } .kpi-num.pos { color: var(--salvia-scura); } .kpi-num.neg { color: var(--corallo); } .kpi-num.money { font-size: 23px; } /* --- Grafico a ciambella + legenda --- */ .chart-row { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } .chart-donut { flex: none; } .donut-top { font-family: var(--font-display); font-weight: 600; font-size: 22px; fill: var(--caffe); } .donut-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--talpa); } .chart-legend { display: grid; gap: 10px; min-width: 200px; flex: 1; } .legend-item { display: flex; align-items: center; gap: 10px; font-size: 14px; } .legend-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; } .legend-item .num { margin-left: auto; } .legend-item .legend-name { color: var(--talpa); } /* --- Barre orizzontali comparate (preventivo vs consuntivo) --- */ .chart-bars { display: grid; gap: 14px; } .cb-row { display: grid; grid-template-columns: 160px 1fr 150px; align-items: center; gap: 12px; } .cb-label { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-track { position: relative; height: 22px; } .cb-fill { position: absolute; left: 0; top: 0; height: 9px; border-radius: 5px; min-width: 2px; } .cb-fill-b { top: 12px; } .cb-vals { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; line-height: 1.35; } .cb-vals .cb-b { color: var(--talpa); } @media (max-width: 620px) { .cb-row { grid-template-columns: 1fr; gap: 4px; } .cb-vals { flex-direction: row; gap: 12px; } } /* --- Meter: avanzamento singolo in linea --- */ .meter { display: block; height: 8px; border-radius: 5px; background: var(--linea); overflow: hidden; min-width: 80px; } .meter-fill { display: block; height: 100%; border-radius: 5px; } /* --- Fascia di statistiche dentro una card --- */ .stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--linea); border-radius: 10px; overflow: hidden; } .stat-cell { background: var(--bianco); padding: 14px 16px; } .stat-cell .caption { display: block; } .stat-cell .stat-val { font-family: var(--font-display); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 2px; } /* --- Azioni in riga di tabella: pulsanti-icona uniformi --- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--linea); background: var(--bianco); color: var(--talpa); cursor: pointer; padding: 0; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .icon-btn:hover { border-color: var(--cobalto); color: var(--cobalto); background: var(--cobalto-velo); } .icon-btn svg { width: 17px; height: 17px; } .row-actions { display: inline-flex; gap: 6px; align-items: center; } /* --- Salute: chip delle condizioni + suggerimenti --- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: #F7E6E6; color: #8C3737; } .chip-intolerance { background: #FBF0DC; color: #7A5518; } .chip-condition { background: var(--cobalto-velo); color: var(--cobalto-scuro); } .chip-x { background: none; border: 0; padding: 0 4px; font: inherit; font-size: 16px; line-height: 1; color: inherit; opacity: 0.55; cursor: pointer; } .chip-x:hover { opacity: 1; } .suggest-anchor { position: relative; } .suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--bianco); border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 8px 24px rgba(58,46,40,0.12); overflow: hidden; } .suggest-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 14px; font: inherit; color: var(--caffe); cursor: pointer; } .suggest-item:hover { background: var(--cobalto-velo); color: var(--cobalto-scuro); } /* L'età accanto al nome (0.93.2) */ .suggest-eta { margin-left: 8px; font-size: 13px; color: var(--talpa); } .suggest-item:hover .suggest-eta { color: inherit; } /* --- Lista a spunte (iscrizione multi-turno) --- */ .check-list { display: grid; gap: 6px; margin-top: 6px; } .check-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 8px; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 400; color: var(--caffe); } .check-row:hover { border-color: var(--cobalto); } .check-row:has(input:checked) { background: var(--cobalto-velo); border-color: var(--cobalto); } .check-row input { width: 18px; height: 18px; accent-color: var(--cobalto); flex: none; } .check-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; } .check-row .num { flex: none; } /* --- Tab di sezione: stesso posto su tutte le pagine di un turno --- */ /* Sul telefono quattro schede non stanno in una riga: scorrono di lato, senza andare a capo e senza tagliare l'ultima. */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin: 14px 0 4px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: var(--talpa); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; } /* La testata della scheda aperta sotto le schede di Impostazioni: un po' d'aria. */ .tabs + .page-head { margin-top: 18px; } /* Le schede di Impostazioni sono tante (0.99.0): vanno a capo invece di scorrere di lato con la barra nascosta, dove le prime sparivano. */ .tabs[data-a-capo] { flex-wrap: wrap; overflow: visible; row-gap: 2px; } .tabs a svg { width: 17px; height: 17px; } .tabs a:hover { color: var(--caffe); } .tabs a.active { color: var(--cobalto-scuro); border-bottom-color: var(--cobalto); } .tabs a.active svg { color: var(--cobalto); } /* --- Modali: nativo, form su richiesta --- */ dialog.modal { border: 0; border-radius: 14px; padding: 0; max-width: 640px; width: calc(100% - 32px); box-shadow: 0 24px 60px rgba(58,46,40,0.28); background: var(--bianco); color: var(--caffe); } dialog.modal::backdrop { background: rgba(58,46,40,0.45); } dialog.modal.modal-lg { max-width: 980px; } /* --- Icone nei titoli di sezione (scheda anagrafica e simili) --- */ .card h2 svg, .card h3 svg, .modal-body h3 svg { width: 19px; height: 19px; vertical-align: -3.5px; margin-right: 8px; color: var(--talpa); } /* --- QR code (collegamento famiglie) --- */ .qr { display: block; width: 100%; height: auto; } .qr-spotlight { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .qr-box { width: 190px; flex: none; padding: 10px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; } .qr-info { flex: 1; min-width: 220px; } .qr-mini { display: inline-block; width: 64px; vertical-align: middle; } .qr-mini .qr { border-radius: 3px; } /* Nuclei familiari: card decisionale, chip di appartenenza, righe azione */ .btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .nucleo-suggest { border-left: 4px solid var(--cobalto); background: var(--cobalto-velo); } .nucleo-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin: 8px 0; background: var(--bianco); border: 1px solid var(--linea); border-radius: 10px; } .nucleo-opt form { margin: 0; } .nucleo-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .nucleo-chips .chip { background: var(--cobalto-velo); color: var(--cobalto-scuro); padding: 5px 12px; text-decoration: none; } .nucleo-chips .chip svg { width: 15px; height: 15px; } .nucleo-chips .chip:hover { background: var(--cobalto); color: #fff; } .nucleo-chips .chip:hover .muted { color: rgba(255,255,255,0.8); } .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; } /* Pannello piattaforma: interruttori dei moduli */ .mod-toggles { display: flex; gap: 6px; flex-wrap: wrap; } .mod-toggles .inline-form { margin: 0; } .mod-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; cursor: pointer; border: 1px solid var(--linea); border-radius: 999px; background: var(--carta); font: 600 12.5px/1 var(--font-testo, inherit); color: var(--talpa); } .mod-toggle svg { width: 13px; height: 13px; } .mod-toggle:hover { border-color: var(--cobalto); color: var(--cobalto); } .mod-toggle.is-on { background: #E8F2EF; border-color: #BFDCD4; color: var(--salvia-scura); } .mod-toggle.is-on:hover { border-color: var(--salvia); } /* Diagnostica: esito per controllo */ .check-card { border-left: 4px solid var(--linea); } .check-ok { border-left-color: var(--salvia); } .check-warn { border-left-color: var(--ambra); } .check-fail { border-left-color: var(--corallo); } .check-summary { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--salvia-scura); } .check-summary svg { width: 17px; height: 17px; flex: none; } .check-list { margin: 8px 0 0; padding-left: 20px; max-height: 320px; overflow-y: auto; } .check-list li { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--caffe); padding: 2px 0; } /* Zona pericolosa: reset del database */ .danger-zone { border-left: 4px solid var(--corallo); } .danger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 6px; } .danger-opt { padding: 16px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; } .danger-opt--max { border-color: #E8C4C4; background: #FDF7F6; } .danger-opt h3 { margin: 0 0 4px; font-size: 15px; } .danger-opt .muted { font-size: 13px; } .danger-opt .btn { margin-top: 10px; } .hero-ico--danger { background: #F7E6E6; color: var(--corallo); } .reset-meta { display: flex; gap: 30px; flex-wrap: wrap; margin: 0 0 18px; } .reset-meta dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--talpa); font-weight: 700; margin-bottom: 4px; } .reset-meta dd { margin: 0; } .reset-total { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--corallo); } .reset-tables { max-height: 420px; overflow-y: auto; } /* Area famiglie: schede dei profili e consensi */ .profilo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; text-decoration: none; color: var(--caffe); transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; } .profilo:hover { border-color: var(--cobalto); box-shadow: 0 6px 18px rgba(58,46,40,0.1); transform: translateY(-1px); } .profilo-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--cobalto-velo); color: var(--cobalto); } .profilo-ico svg { width: 19px; height: 19px; } .profilo-nome { font-weight: 600; font-size: 15px; } .consenso { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--linea); } .consenso:first-of-type { border-top: 0; } .consenso-testo { flex: 1; min-width: 240px; } .consenso-testo .badge { margin-left: 6px; vertical-align: middle; } .consenso .inline-form { margin: 0; flex: none; } .consenso-bloccato { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: 999px; background: var(--carta); border: 1px solid var(--linea); color: var(--talpa); font-size: 13px; font-weight: 600; } .consenso-bloccato svg { width: 15px; height: 15px; } /* Avviso: l'importo può non essere aggiornato (le entrate si registrano a periodi) */ .avviso-registrazione { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding: 11px 13px; border-radius: 12px; background: #FBF0DC; color: #7A5518; font-size: 13.5px; line-height: 1.45; } .avviso-registrazione svg { width: 17px; height: 17px; flex: none; margin-top: 1px; } /* Comando da copiare (riga di cron): si legge e si seleziona bene */ .comando { margin: 8px 0 0; padding: 11px 13px; border-radius: 10px; overflow-x: auto; background: var(--caffe); color: #F6F1EA; font-size: 12.5px; font-family: ui-monospace, Consolas, monospace; } /* Prossimi giorni: una riga per giorno, il gesto è "non viene" */ .giorno { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--linea); } .giorno:first-of-type { border-top: 0; } .giorno.is-segnalato { opacity: 0.75; } .giorno-quando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 200px; flex: 1; } .giorno-data { font-weight: 600; font-variant-numeric: tabular-nums; } .giorno-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; } .giorno-form input[type=text] { max-width: 190px; margin: 0; } .giorno-form .btn { margin: 0; } @media (max-width: 560px) { .giorno-form { width: 100%; } .giorno-form input[type=text] { flex: 1; max-width: none; } } /* =========================================================================== AREA FAMIGLIE — pensata prima per il telefono. Il genitore la usa in piedi, con una mano, mentre accompagna un figlio: bersagli grandi, una colonna, e la navigazione dove arriva il pollice. =========================================================================== */ .app-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--carta); border-bottom: 1px solid var(--linea); } .app-top .brand { font-size: 19px; } .app-account { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--bianco); border: 1px solid var(--linea); color: var(--talpa); } .app-account svg { width: 19px; height: 19px; } .app-account.active, .app-account:hover { border-color: var(--cobalto); color: var(--cobalto); } /* Nome dell'associazione accanto al marchio, quando ce n'e' una sola */ .app-casa { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--talpa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Schermate interne: freccia indietro + titolo al posto del marchio */ .app-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -8px; flex: none; color: var(--caffe); } .app-back svg { width: 22px; height: 22px; transform: scaleX(-1); } .app-titolo { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-sotto { margin: 0 0 14px; color: var(--talpa); font-size: 14px; } .app-main { max-width: 720px; margin: 0 auto; padding: 16px 16px calc(88px + env(safe-area-inset-bottom, 0px)); } .app-main .card { padding: 16px; } .app-h1 { font-size: 24px; margin: 4px 0 14px; } /* Hero scuro: saluto a sinistra, il numero che conta a destra */ .app-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--caffe); color: #F6F1EA; border-radius: 18px; padding: 20px; margin-bottom: 14px; } .app-hero-ciao { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0; color: #FFFDFA; } .app-hero-sotto { margin: 4px 0 0; font-size: 14px; color: rgba(246,241,234,0.72); } .app-hero-cifra { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; } .app-hero-num { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; color: #FFFDFA; white-space: nowrap; } .app-hero-num--ok { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(61,139,125,0.28); color: #9BD3C6; } .app-hero-num--ok svg { width: 21px; height: 21px; } .app-hero-eti { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(246,241,234,0.66); margin-top: 5px; } /* Griglia 2×2: badge d'icona colorato, numero grande, etichetta */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .stat { display: block; background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 16px; text-decoration: none; color: var(--caffe); transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; } a.stat:active { transform: scale(0.985); } a.stat:hover { border-color: var(--cobalto); box-shadow: 0 6px 18px rgba(58,46,40,0.08); } .stat-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; margin-bottom: 14px; color: #fff; } .stat-ico svg { width: 22px; height: 22px; } .stat-ico--cobalto { background: var(--cobalto); } .stat-ico--salvia { background: var(--salvia); } .stat-ico--ambra { background: var(--ambra); } .stat-ico--corallo { background: var(--corallo); } .stat-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.05; } .stat-num--soldi { font-size: 21px; white-space: nowrap; } .stat-su { font-size: 17px; color: var(--talpa); font-weight: 600; } .stat-eti { display: block; font-size: 13.5px; color: var(--talpa); margin-top: 3px; } /* Elenco dei profili: righe alte, tutta la riga è il bersaglio */ .profilo-lista { display: flex; flex-direction: column; } .profilo-riga { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid var(--linea); text-decoration: none; color: var(--caffe); } .profilo-riga:first-child { border-top: 0; } .profilo-riga:active { background: var(--carta); } .profilo-riga .profilo-nome { flex: 1; font-weight: 600; font-size: 15.5px; } .profilo-chev { color: var(--talpa); display: inline-flex; } .profilo-chev svg { width: 17px; height: 17px; } /* Barra in basso: tre schede, sempre raggiungibili */ .app-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: var(--bianco); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom, 0px); } .app-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 10px; text-decoration: none; color: var(--talpa); font-size: 11.5px; font-weight: 600; } .app-tabs svg { width: 22px; height: 22px; } .app-tabs a.active { color: var(--corallo); } /* Via d'uscita verso il gestionale: solo per chi ha anche la sessione da operatore. Discreta di proposito — non e' una voce dell'area famiglie. */ .uscita-gestionale { margin: 18px 0 0; text-align: center; } .uscita-gestionale a { display: inline-flex; align-items: center; gap: 6px; color: var(--talpa); text-decoration: none; font-size: 13.5px; font-weight: 600; } .uscita-gestionale a:hover { color: var(--cobalto); } .uscita-gestionale svg { width: 16px; height: 16px; } /* Nota di servizio dell'area famiglie: piccola e in tondo. Non .caption, che e' maiuscoletto spaziato — una frase intera li' dentro urla. */ .nota-app { display: block; margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--talpa); } /* Invito a installare l'app: compare al primo accesso di ogni sessione */ .invito { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; background: var(--cobalto-velo); border: 1px solid #D6E1EF; border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; } .invito-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; flex: none; background: var(--cobalto); color: #fff; } .invito-ico svg { width: 20px; height: 20px; } .invito-testo { flex: 1; min-width: 190px; } .invito-testo strong { display: block; font-size: 15px; } .invito-testo p { margin: 3px 0 0; font-size: 13.5px; color: var(--talpa); } .invito-ios { font-weight: 600; color: var(--cobalto-scuro) !important; } .invito-azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; } .invito-azioni .btn { margin: 0; } /* Account: coppie etichetta/valore */ .dati-lista { margin: 0; } .dati-lista > div { padding: 10px 0; border-top: 1px solid var(--linea); } .dati-lista > div:first-child { border-top: 0; padding-top: 0; } .dati-lista dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--talpa); font-weight: 700; margin-bottom: 3px; } .dati-lista dd { margin: 0; font-weight: 600; } .lingua-scelta { display: flex; gap: 10px; flex-wrap: wrap; } .lingua-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco); font: 600 14px var(--font-testo); color: var(--talpa); cursor: pointer; } .lingua-btn svg { width: 15px; height: 15px; } .lingua-btn.is-on { border-color: var(--cobalto); background: var(--cobalto-velo); color: var(--cobalto-scuro); } /* Pagina di cortesia senza rete */ .offline-box { max-width: 400px; margin: 12vh auto; text-align: center; padding: 0 8px; } .offline-box h1 { margin: 18px 0 8px; } .offline-box .btn { margin-top: 18px; } /* Da tablet in su l'area famiglie resta comoda ma non si allarga troppo */ @media (min-width: 640px) { .app-main { padding: 22px 22px 90px; } .app-hero { padding: 24px 26px; } .app-hero-ciao { font-size: 27px; } .app-hero-num { font-size: 32px; } .stat-grid { grid-template-columns: repeat(4, 1fr); } } /* --- Wizard attribuzione righe documento --- */ .attr-gruppo { border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; margin: 14px 0; } .attr-gruppo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .attr-gruppo-tot { margin-left: auto; font-weight: 600; } .attr-riga { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed var(--linea); margin: 0; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 400; color: var(--caffe); } .attr-riga:last-child { border-bottom: 0; } .attr-riga .attr-desc { flex: 1; min-width: 0; } .attr-riga .attr-check { width: 18px; height: 18px; accent-color: var(--cobalto); flex: none; } .attr-numeri { display: flex; gap: 12px; white-space: nowrap; } .modal-body { padding: 22px 26px 26px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 26px 0; } .modal-head h2 { margin: 0; } .modal-x { background: none; border: 0; padding: 4px 8px; font-size: 22px; line-height: 1; color: var(--talpa); cursor: pointer; border-radius: 6px; } .modal-x:hover { color: var(--corallo); background: var(--carta); } /* --- Squadre: board a colonne con drag & drop --- */ .board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding: 20px 2px 12px; } .board-col { flex: 0 0 230px; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 10px; min-height: 120px; } .board-col-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 2px 4px 10px; } .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; } .swatch-pill span { padding: 7px 10px; display: inline-flex; } .board-cards { display: grid; gap: 8px; min-height: 40px; } .board-card { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px; background: var(--carta); cursor: grab; display: flex; flex-direction: column; } .board-card .muted { font-size: 12px; } .board-card.dragging { opacity: 0.5; } .board-card.selected { outline: 2px solid var(--cobalto); background: var(--cobalto-velo); } /* --- Appello: righe grandi pensate per il tocco --- */ .att-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .att-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); } .att-row.att-present { background: #E8F2EF; border-color: #CBE2DC; } .att-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .att-who .badge { align-self: flex-start; } .att-toggle { min-width: 150px; justify-content: center; } @media (max-width: 560px) { .att-row { flex-direction: column; align-items: stretch; } .att-toggle { width: 100%; } } .radio-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* Una pastiglia è un'etichetta ma non è «l'etichetta di un campo»: le regole di `label` (maiuscoletto, corpo 11, staccata sopra) qui si tolgono. */ .radio-pill { display: inline-block; margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit; } .radio-pill input { position: absolute; opacity: 0; } .radio-pill span { display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--linea); font-size: 14px; font-weight: 600; color: var(--talpa); cursor: pointer; } .radio-pill input:checked + span { background: var(--cobalto); border-color: var(--cobalto); color: var(--bianco); } .radio-pill input:focus-visible + span { outline: 3px solid var(--ambra); outline-offset: 2px; } /* Righe di dettaglio: condivise dall'import bancario e dall'entrata cumulativa. */ .split-row { padding: 10px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.12); } .split-row:last-child { border-bottom: 0; } .split-rimuovi, .cum-rimuovi { margin-top: 4px; } /* Nell'entrata cumulativa ogni riga è una PERSONA: senza uno stacco visibile si legge come un unico modulo lungo e si sbaglia colonna. */ .cum-riga { padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--linea); border-left: 3px solid var(--cobalto); border-radius: var(--raggio); background: var(--bianco); } .cum-riga:last-child { border-bottom: 1px solid var(--linea); margin-bottom: 0; } /* Quadratura dell'entrata cumulativa: la differenza si vede mentre si scrive. */ .cum-quadratura { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; border-radius: var(--raggio); border: 1px solid var(--linea); background: var(--carta); } .cum-quadratura strong { font-size: 18px; font-family: var(--font-display); } .cum-quadratura.is-ok { border-color: #CBE2DC; background: #E8F2EF; } .cum-quadratura.is-ok strong { color: var(--salvia-scura); } .cum-quadratura.is-ko { border-color: #EDCDCD; background: #FBEFEF; } .cum-quadratura.is-ko strong, .cum-quadratura.is-ko .muted { color: var(--corallo); font-weight: 700; } /* =========================================================================== CEDOLINI — un blocco per dipendente: chi e' e quanto costa in testa, le quote per progetto sotto. Rosso finche' non fa cento. =========================================================================== */ .ced-dip { border: 1px solid var(--linea); border-left: 4px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--bianco); } .ced-dip.is-ko { border-left-color: var(--corallo); } .ced-dip.is-ok { border-left-color: var(--salvia); } .ced-dip.is-escluso { border-left-color: var(--ambra); opacity: 0.85; } .ced-testa { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .ced-chi { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; } .ced-chi strong { font-size: 15.5px; } .ced-chi .muted, .ced-cifre .muted { font-size: 12.5px; } .ced-cifre { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; text-align: right; } .ced-costo { font-family: var(--font-display); font-weight: 600; font-size: 19px; } .ced-stato { flex: none; min-width: 84px; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 17px; padding-top: 2px; } .ced-dip.is-ko .ced-stato { color: var(--corallo); } .ced-dip.is-ok .ced-stato { color: var(--salvia-scura); } .ced-quote { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .ced-modo { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; } .ced-modo select { margin: 0 0 0 6px; padding: 4px 8px; font-size: 13.5px; width: auto; } .ced-modo-aiuto { font-size: 12.5px; } .ced-quota { display: grid; grid-template-columns: minmax(150px, 1.4fr) 72px 30px minmax(120px, 1fr) minmax(150px, 1.4fr) 104px auto; gap: 6px; align-items: center; } .ced-quota select, .ced-quota input { margin: 0; padding: 6px 8px; font-size: 13.5px; } .ced-quota .ced-pct { text-align: right; } .ced-pct-eti { color: var(--talpa); font-size: 13px; } .ced-quota-euro { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; } .ced-resto-eti { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin: 0; font-size: 12.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: inherit; } .ced-resto-eti[hidden] { display: none; } .ced-resto-eti input { width: auto; margin: 0; } .ced-euro { white-space: nowrap; font-variant-numeric: tabular-nums; } .ced-azioni { display: flex; gap: 16px; margin-top: 8px; } .ced-azioni .linklike { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; } .ced-azioni .linklike svg { width: 15px; height: 15px; } @media (max-width: 760px) { .ced-quota { grid-template-columns: 1fr 72px 30px; } .ced-quota-euro { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; } .ced-quota .ced-voce, .ced-quota .ced-cat { grid-column: 1 / -1; } .ced-cifre { text-align: left; } } /* Riga di tabella che si corregge sul posto: i campi e il bottone stanno sulla stessa riga finché c'è spazio, e vanno a capo sul telefono invece di sfondare la tabella. */ .riga-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; } .riga-form input[type="text"] { margin: 0; flex: 1 1 9rem; min-width: 7rem; width: auto; } .riga-form select { margin: 0; flex: 0 1 13rem; min-width: 7rem; width: auto; } /* Il piano dei conti ha una tendina lunga (la riga del Mod. D per esteso): li' si lascia andare a capo invece di strizzare il nome. */ .riga-form select.lunga { flex: 1 1 18rem; max-width: 34rem; } .riga-form + .riga-form { margin-top: .35rem; } /* Gli enti finanziatori (0.53.6): ogni ente e' una riga flessibile — il modulo (nome, ufficio, tipologia), quante volte e' citato, i pulsanti — che va a capo per blocchi interi invece di spezzare il modulo. */ .enti-lista .ente-riga { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--linea); } .enti-lista .ente-riga:last-child { border-bottom: 0; } .ente-riga .ente-modulo { flex: 1 1 30rem; } .ente-riga .ente-modulo input[type="text"] { flex: 1 1 8rem; min-width: 5rem; } .ente-riga .ente-modulo select { flex: 0 1 10rem; min-width: 6rem; } .ente-riga .ente-usi { flex: 0 0 auto; min-width: 6.5rem; white-space: nowrap; } .ente-riga .azioni { display: flex; gap: .4rem; margin-left: auto; } .ente-riga .azioni .riga-form + .riga-form { margin-top: 0; } /* --------------------------------------------------------------------------- Le luci del campo (0.54.0). La pagina dei comandi si usa col telefono in mano, spesso al buio: riquadri larghi, una spia che si vede da lontano, pulsanti grandi abbastanza da premerli con i guanti. La spia lampeggia solo mentre un comando e' in viaggio, e si ferma appena l'impianto conferma. --------------------------------------------------------------------------- */ .luci-griglia { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .luce { border-left: 6px solid var(--linea); transition: border-color .35s ease, background .35s ease; } .luce.e-accesa { border-left-color: var(--ambra); background: linear-gradient(180deg, rgba(232,161,61,.09), rgba(232,161,61,0) 120px), var(--bianco); } .luce.e-attesa { border-left-color: var(--cobalto); } /* Mandato e non eseguito: è un fatto, non un'attesa, e si vede che è un guaio. */ .luce.e-fermo { border-left-color: var(--corallo); } .luce.e-fermo .luce-stato { color: var(--corallo); } .luce-testa { display: flex; align-items: center; gap: 14px; } .luce-testa h2 { margin: 0; font-size: 18px; } .luce-posto { margin: 2px 0 0; font-size: 13px; color: var(--talpa); } /* Lo stato si legge da lontano e a occhi stanchi: è la riga per cui si è aperta la pagina, non un sottotitolo. */ .luce-stato { margin: 12px 0 0; font-size: 22px; font-weight: 800; letter-spacing: .2px; color: var(--talpa); text-transform: uppercase; } .luce.e-accesa .luce-stato { color: #B4761C; } .luce.e-attesa .luce-stato { color: var(--cobalto); } .luce-quando { margin: 6px 0 14px; } .luce-spia { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; border: 2px solid var(--linea); background: var(--linea); } .luce-spia.e-accesa { background: #F2B705; border-color: #D89C00; box-shadow: 0 0 0 6px rgba(242,183,5,.18); } .luce-spia.e-spenta { background: var(--carta); border-color: var(--linea); } .luce-spia.e-ignota { background: repeating-linear-gradient(45deg, var(--linea), var(--linea) 3px, var(--carta) 3px, var(--carta) 6px); } .luce-spia.e-viaggio { animation: luce-pulsa 1.1s ease-in-out infinite; } @keyframes luce-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Le durate come pastiglie, non come tendina: sul telefono una tendina si apre, si scorre e si sbaglia; qui si vede tutto e si tocca una volta sola. Il pallino vero resta nel documento (tastiera e lettori di schermo lo trovano), ma non si vede: quello che si vede è l'etichetta. */ .durate { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: .4rem; } .durate legend { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--talpa); margin-bottom: 6px; padding: 0; } /* `label` in Domus è l'etichetta di un campo: minuscola, maiuscoletto, staccata sopra. Una pastiglia è un'altra cosa e qui quelle regole si tolgono, altrimenti «120 min» diventa «120 MIN» in corpo undici. */ .durata { display: inline-block; margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; color: inherit; } .durata input { position: absolute; opacity: 0; width: 0; height: 0; } .durata span { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--linea); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--talpa); background: var(--bianco); cursor: pointer; user-select: none; transition: all .15s ease; } .durata span:hover { border-color: var(--talpa); } .durata input:checked + span { background: var(--cobalto-velo); border-color: var(--cobalto); color: var(--cobalto-scuro); } .durata input:focus-visible + span { outline: 2px solid var(--cobalto); outline-offset: 2px; } .durata-ora span { display: inline-flex; align-items: center; gap: .4rem; padding-top: 5px; padding-bottom: 5px; } .durata-ora input[type="time"] { position: static; opacity: 1; width: auto; height: auto; min-width: 0; padding: 3px 6px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; font-size: 14px; background: var(--bianco); color: var(--caffe); } /* I turni di oggi e i loro minuti in più (0.92.0) */ .turno-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 10px 0; } .turno-extra + .turno-extra { border-top: 1px solid var(--linea); } .turno-extra-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; min-width: 0; } .turno-extra-scelte { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; } .turno-extra-scelte .btn { min-width: 52px; justify-content: center; } /* I due pulsanti: larghi, alti, con l'icona. Si premono con i guanti, al buio, guardando il campo invece dello schermo. */ .btn-luce { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 54px; padding: 14px 20px; border-radius: 12px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--linea); background: var(--bianco); color: var(--caffe); transition: transform .08s ease, box-shadow .2s ease, background .2s ease; } .btn-luce svg { width: 20px; height: 20px; } .btn-luce:active { transform: translateY(1px); } .btn-luce:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; } .btn-accendi { background: linear-gradient(180deg, #F2B33F, var(--ambra)); border-color: #CE8A28; color: #40290A; box-shadow: 0 2px 0 #C98524, 0 6px 16px rgba(232,161,61,.28); } .btn-accendi:hover { background: linear-gradient(180deg, #F5BD55, #ECA94A); } .btn-accendi:active { box-shadow: 0 1px 0 #C98524; } .btn-spegni { background: var(--carta); } .btn-spegni:hover { border-color: var(--talpa); } .luce-comandi { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 10px; } .luce-comandi .inline-form { flex: 1 1 140px; margin: 0; } .btn-grande { padding: 12px 22px; font-size: 16px; } /* --------------------------------------------------------------------------- Il disegno del campo (0.54.1). Le misure e i colori stanno qui e non in Pianta.php: il disegno è una figura, e una figura si veste come il resto del programma. Lo stato lo portano due classi sul gruppo — e-acceso, e-attesa — che lo script cambia senza ridisegnare niente. --------------------------------------------------------------------------- */ .campo-pianta { padding: 8px 10px 2px; overflow: hidden; } .campo-pianta-nota { margin: 0 0 8px; text-align: center; font-size: 13px; } .campo-svg { width: 100%; height: auto; display: block; max-width: 900px; margin: 0 auto; } .campo-svg .campo-erba { fill: #4E8C5A; } .campo-svg .campo-striscia { fill: #458050; opacity: .55; } /* Le righe sono disegnate su un piano inclinato dalla matrice: senza vector-effect la stessa matrice assottiglierebbe il tratto in una direzione e non nell'altra. */ .campo-svg .campo-linea { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 2.5; vector-effect: non-scaling-stroke; } .campo-svg .campo-linea-piena { fill: rgba(255,255,255,.8); } .campo-svg .campo-bordo { fill: #3C7549; } .campo-svg .campo-bordo.e-scuro { filter: brightness(.82); } .campo-svg .campo-porta line { stroke: rgba(255,255,255,.55); stroke-width: 2.5; stroke-linecap: round; } .campo-svg .campo-rete { fill: #fff; opacity: .18; } .campo-svg .palo, .campo-svg .palo-base, .campo-svg .testa-cima { fill: #7D8790; } .campo-svg .palo-ombra { fill: rgba(0,0,0,.22); } .campo-svg .etichetta-filo { stroke: var(--linea); stroke-width: 1.5; stroke-dasharray: 3 4; } .campo-svg .etichetta-campo { fill: var(--talpa); text-anchor: middle; font: 700 19px var(--font-testo); transition: fill .45s ease; } /* Spento: la testa del lampione è grigia, alone e pozza di luce invisibili. */ .campo-svg .testa { fill: #9AA4AD; transition: fill .45s ease; } .campo-svg .alone { opacity: 0; transition: opacity .45s ease; } .campo-svg .bagliore { opacity: 0; transition: opacity .6s ease; } /* Acceso. */ .campo-svg .e-acceso .testa { fill: var(--ambra); } .campo-svg .e-acceso .alone { opacity: 1; } .campo-svg .e-acceso .bagliore { opacity: .9; } .campo-svg .e-acceso .etichetta-campo { fill: #B4761C; } /* Comando mandato e non ancora confermato: la lampada pulsa. */ .campo-svg .e-attesa .testa { fill: var(--cobalto); } .campo-svg .e-attesa .alone { opacity: .5; } .campo-svg .e-attesa .bagliore { opacity: .3; } .campo-svg .e-attesa .testa, .campo-svg .e-attesa .alone, .campo-svg .e-attesa .bagliore { animation: luce-pulsa 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .campo-svg *, .luce-spia { transition: none !important; animation: none !important; } } /* Sul telefono il campo si riduce a un terzo e le scritte diventano illeggibili: si tolgono, e il legame fra lampioni e riquadri lo fa la riga «a sinistra / al centro / a destra» sotto il nome del gruppo. */ @media (max-width: 559px) { .campo-svg .etichetta-campo, .campo-svg .etichetta-filo { display: none; } } /* Le regole in sei stanze: una riga di schede piccole sotto quelle grandi. Si distinguono dalle prime per dimensione e forma — pastiglie, non linguette — perché sono un livello sotto, e due file di linguette uguali sarebbero due file di linguette. */ Le pastiglie stanno sotto il bordo della riga di sopra: attaccate a quel bordo sembravano parte di quella riga, e le due file si leggevano come una sola. Un dito d'aria sopra, di più sotto, e abbastanza spazio fra l'una e l'altra da non toccarle entrambe con il pollice. */ .subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 22px; } .subtabs a { display: inline-flex; align-items: center; gap: .45rem; padding: 8px 15px; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco); color: var(--talpa); font-size: 14px; font-weight: 600; text-decoration: none; } .subtabs a:hover { border-color: var(--talpa); color: var(--caffe); } .subtabs a.active { background: var(--cobalto-velo); border-color: var(--cobalto); color: var(--cobalto-scuro); } .subtabs a svg { width: 16px; height: 16px; flex: none; } /* La riga di cron da copiare: monospazio, a capo dove serve, selezionabile. */ .cron-riga { background: var(--caffe); color: #F6F1E9; padding: 10px 12px; border-radius: 8px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; margin: 8px 0; } /* Coppie «etichetta: valore» in riga, per le schede di stato. */ .dati-riga { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0; } .dati-riga div { min-width: 0; } .dati-riga dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--talpa); } .dati-riga dd { margin: 2px 0 0; font-weight: 600; } /* I gruppi di luci: una riga per gruppo, e la modifica in una finestra. */ /* Le uscite viste dalla centralina, in fila: è la controprova di quello che Domus crede di aver comandato, e si legge da lontano. */ .uscite-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 16px; } .uscita-pastiglia { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--carta); font-size: 13px; color: var(--talpa); } .uscita-pastiglia strong { font-size: 14px; color: var(--caffe); } .uscita-pastiglia.e-accesa { background: var(--cobalto-velo); border-color: var(--cobalto); } .uscita-pastiglia.e-accesa strong { color: var(--cobalto); } .gruppi-elenco { display: flex; flex-direction: column; gap: .5rem; } .gruppo-riga { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--bianco); } .gruppo-riga.e-ritirato { opacity: .6; } .gruppo-riga .gruppo-nome { flex: 1 1 12rem; display: flex; flex-direction: column; line-height: 1.3; } .gruppo-riga .gruppo-nome .muted { font-size: 13px; } .gruppo-riga .azioni { margin-left: auto; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; } .uscita-chip { flex: 0 0 auto; padding: 4px 9px; border-radius: 6px; background: var(--carta); border: 1px solid var(--linea); font-size: 13px; } /* La griglia degli orari: un riquadro per giorno, come un orario appeso. */ .griglia-giorni { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .giorno-blocco { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; } .giorno-blocco h3 { margin: 0 0 8px; font-size: 14px; } .fascia-riga { display: flex; gap: .5rem; align-items: flex-start; padding: 7px 0; } .fascia-riga + .fascia-riga { border-top: 1px dashed var(--linea); } .fascia-riga > div:first-child { flex: 1; display: flex; flex-direction: column; line-height: 1.35; } .fascia-riga .fascia-gruppi { font-size: 13px; } .fascia-riga .azioni { display: flex; gap: .2rem; } /* Le prenotazioni: sette colonne che sul telefono diventano una pila. */ .settimana-barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: 12px; } .prenota-griglia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .prenota-giorno { border: 1px solid var(--linea); border-radius: 8px; padding: 10px; } .prenota-giorno h3 { margin: 0 0 8px; font-size: 14px; } .prenota-giorno.e-chiuso { opacity: .55; } .prenota-fascia { display: flex; gap: .5rem; align-items: flex-start; padding: 6px; border-radius: 6px; cursor: pointer; } .prenota-fascia:hover { background: var(--linea); } .prenota-fascia.e-presa { background: rgba(242,183,5,.12); } /* Che cosa ne fa la luce del sole: sta sotto il nome della fascia, in piccolo, e non grida — e' un'informazione, non un errore. Il `text-transform: none` non e' un vezzo: la fascia e' un