/* ═════════════════════════════════════════════════════════════════════════════ Console master di Orthosuite — foglio unico, nessuna dipendenza. --accent arriva dal marchio impostato nella console e viene scritto in linea nella testata di ogni pagina: qui c'è solo il valore di riserva. ═════════════════════════════════════════════════════════════════════════════ */ :root { /* LA DURATA DI UNA TRANSIZIONE, scritta una volta sola. Era usata in cinque punti del foglio e definita in nessuno: le transizioni non partivano, e l'unico posto dove qualcuno se n'era accorto era un 'var(--transition, .15s)' con la riserva scritta a mano. E' lo stesso valore dell'app, perche' console e gestionale sono lo stesso prodotto (25/09/2026). */ --transition: .18s cubic-bezier(.4,0,.2,1); /* IL VERDE E' QUELLO DEL MARCHIO. Il logo e' #33b5a5 / #279683, e la console usava #0f7d86: un altro verde, che si notava passando dal sito al prodotto. Questo e' lo stesso verde del logo, scurito quanto basta per fare il suo mestiere di colore d'interfaccia — 5,19 col bianco sopra (i bottoni) e 5,19 come testo, dove prima era 4,47 sul fondo pagina, cioe' sotto. DUE ACCENTI, non uno. Nessun singolo verde regge tutti e due i temi: piu' e' scuro meglio funziona da testo sul chiaro, piu' e' chiaro meglio ci sta il bianco sopra. E' esattamente per questo che il tema scuro era rotto — l'accento restava quello del chiaro e come testo faceva 3,39. Qui il tema scuro ha il suo, piu' vicino al verde vivo del logo, con il testo scuro sopra invece del bianco. */ --accent: #1b7a6b; --su-accento: #ffffff; --bg: #f5f5f2; --superficie: #ffffff; --superficie-2: #efeee9; --inchiostro: #1a1c1b; --inchiostro-2: #3c3f3d; /* Da #71746e: faceva 4,08 sulle intestazioni delle tabelle e 4,34 sul fondo, tutti e due sotto il 4,5. Adesso il caso peggiore e' 4,73. */ --tenue: #676a64; --bordo: #e2e0d9; --bordo-forte: #d3d0c6; /* Il contorno di un CAMPO non e' decorazione: e' quello che dice dove si puo' scrivere, e per le regole vale 3, non 1,54 come faceva --bordo-forte. Separato apposta, cosi' i bordi delle schede restano leggeri come sono. */ --bordo-campo: #928c7e; --ok: #3a7048; --attesa: #97650f; --allarme: #a3402a; /* Una scheda ferma dentro la pagina NON e' sollevata: ha un bordo, e basta. L'ombra resta solo dove significa qualcosa — tendine, credenziali appena create, cose che stanno sopra il resto e prima non c'erano. E' la correzione che da sola toglie il "troppo pesante". */ --ombra: none; --ombra-alta: 0 2px 4px rgba(20, 20, 18, .05), 0 16px 40px rgba(20, 20, 18, .10); --raggio: 14px; } /* ── I TRE STATI DEL TEMA ───────────────────────────────────────────────────── Non due, tre. "Chiaro" e "Scuro" da soli toglierebbero la cosa piu' utile: seguire il sistema, cioe' diventare scuro la sera insieme a tutto il resto del computer senza che nessuno tocchi niente. Chi non ha mai scelto non ha nessun attributo sulla pagina, e vale la media query qui sotto. Chi ha scelto si porta data-tema="chiaro" o "scuro", messo PRIMA del primo disegno da uno script in testa: se lo mettesse il JavaScript dopo, la pagina lampeggerebbe del tema sbagliato a ogni caricamento. Il :not([data-tema="chiaro"]) serve proprio a questo: chi ha scelto il chiaro deve restare chiaro anche col sistema in scuro, altrimenti la sua scelta varrebbe meno di quella del computer. ATTENZIONE: i due blocchi qui sotto devono elencare gli STESSI token. Sono due perche' uno sta dentro una media query e l'altro no, e il CSS non permette di scriverli una volta sola. verifica-css.js controlla che non divergano — se ne aggiungi uno di qua, va aggiunto anche di la'. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { --bg: #131517; --superficie: #1c1f21; --superficie-2: #23262a; --inchiostro: #edeae3; --inchiostro-2: #c6c4bd; --tenue: #8d908a; --bordo: #2f3337; --bordo-forte: #3d4247; /* L'accento del tema scuro: il verde vivo del logo, non quello del chiaro. Sopra ci va il testo SCURO — col bianco farebbe 2,05, cioe' illeggibile. */ --accent: #45c9b4; --su-accento: #0b1614; --bordo-campo: #666e76; --ok: #6fbf80; --attesa: #d8a84e; --allarme: #e2907a; --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3); --ombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45); } } /* Scuro perche' l'ho scelto io: vale anche col sistema in chiaro. Stessi token del blocco qui sopra, tenuti allineati da verifica-css.js. */ :root[data-tema="scuro"] { --bg: #131517; --superficie: #1c1f21; --superficie-2: #23262a; --inchiostro: #edeae3; --inchiostro-2: #c6c4bd; --tenue: #8d908a; --bordo: #2f3337; --bordo-forte: #3d4247; --accent: #45c9b4; --su-accento: #0b1614; --bordo-campo: #666e76; --ok: #6fbf80; --attesa: #d8a84e; --allarme: #e2907a; --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3); --ombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--inchiostro-2); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; -webkit-font-smoothing: antialiased; } h1 { font-size: 25px; letter-spacing: -.02em; color: var(--inchiostro); margin: 0; font-weight: 700; } h2 { font-size: 14px; color: var(--inchiostro); margin: 0 0 16px; font-weight: 700; letter-spacing: -.005em; } h3 { font-size: 15px; color: var(--inchiostro); margin: 0 0 6px; font-weight: 700; } a { color: var(--accent); text-underline-offset: 2px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } main { max-width: 1080px; margin: 0 auto; padding: 30px 22px 90px; } /* L'occhiello e' una riga di spiegazione, non un'etichetta del comando che gli sta sotto: senza respiro in fondo si appoggia ai filtri e sembra la loro didascalia. Succedeva in mezza console (24/09/2026). */ .occhiello { color: var(--tenue); font-size: 14px; margin: 4px 0 18px; max-width: 68ch; line-height: 1.5; } /* Fra le schede e quello che viene dopo ci vuole aria: sono due livelli diversi di navigazione, e attaccati sembrano una cosa sola. */ .schede + .occhiello { margin-top: 18px; } .schede + .scorciatoie, .occhiello + .scorciatoie { margin-top: 0; } .indietro { margin: 0 0 14px; font-size: 14px; } .vuoto { color: var(--tenue); } .assente { color: var(--tenue); } .titolo-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; } .titolo-pagina .occhiello { flex-basis: 100%; order: 3; margin-top: -4px; } .conteggio { font-size: 13px; font-weight: 600; color: var(--tenue); vertical-align: middle; background: var(--superficie-2); border-radius: 20px; padding: 2px 11px; margin-left: 4px; } .riga-dati { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-bottom: 26px; } .riga-dati > span::before { content: '·'; margin-right: 16px; color: var(--bordo-forte); } .riga-dati > span:first-of-type::before { content: none; } /* ── Testata ─────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 26px; background: var(--superficie); border-bottom: 1px solid var(--bordo); padding: 0 22px; height: 60px; position: sticky; top: 0; z-index: 50; } .topbar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inchiostro); font-weight: 700; letter-spacing: -.015em; } .topbar .brand img { width: 26px; height: 26px; object-fit: contain; display: block; } .topbar .brand small { font-weight: 400; color: var(--tenue); font-size: 13px; margin-left: 7px; } .topbar nav { display: flex; gap: 2px; flex: 1; } .topbar nav a { /* Il segno e la parola sulla stessa riga, allineati al centro: il segno da solo non basterebbe (quattro simboli non si imparano in un giorno) e la parola da sola costringe a leggere. Insieme si riconoscono di lato. */ display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; text-decoration: none; color: var(--inchiostro-2); font-size: 14px; white-space: nowrap; } /* Il segno resta piu' tenue della parola finche' non e' la pagina in cui sei: deve aiutare a trovare, non gridare. */ .topbar nav a svg { opacity: .62; flex: none; } .topbar nav a:hover svg, .topbar nav a.on svg { opacity: 1; } /* Le schede: stessa regola della barra, perche' e' la stessa cosa un livello piu' sotto. Il segno tenue finche' non e' la scheda aperta. */ nav.schede a { display: inline-flex; align-items: center; gap: 7px; } nav.schede a svg { opacity: .58; flex: none; } nav.schede a:hover svg, nav.schede a.on svg { opacity: 1; } .topbar nav a:hover { background: var(--superficie-2); } .topbar nav a.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; } .topbar .logout { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--tenue); } /* A telefono la barra va su due righe: marchio e comandi sopra, navigazione sotto. La parte destra deve restare incollata al bordo destro — è dove il pollice la cerca — e prima non lo era: andando a capo finiva a sinistra, sotto il logo, con avatar e ingranaggio in mezzo alla riga. Il margine automatico è quello che la ributta a destra qualunque cosa faccia il resto. */ @media (max-width: 720px) { .topbar { height: auto; flex-wrap: wrap; padding: 8px 14px; gap: 8px 14px; } .topbar .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; } .topbar .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* "console" lo dice già tutto il resto della schermata, e sono i 60 px che mancano al nome della piattaforma per stare in riga con i comandi. */ .topbar .brand small { display: none; } .topbar .testata-destra { margin-left: auto; flex: none; gap: 8px; } .topbar nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; } .topbar nav::-webkit-scrollbar { display: none; } } /* ── Accesso ─────────────────────────────────────────────────────────────── */ body.schermo-accesso main { max-width: 400px; padding-top: 11vh; } .accesso { text-align: center; } .accesso-logo { width: 54px; height: 54px; object-fit: contain; margin-bottom: 16px; } .accesso h1 { font-size: 27px; } .accesso .occhiello { margin-bottom: 26px; } .accesso .scheda { text-align: left; } .accesso label:last-of-type { margin-bottom: 22px; } .suggerimento { color: var(--tenue); font-size: 13px; margin-top: 20px; } .suggerimento code { display: inline-block; margin-top: 7px; word-break: break-all; } /* ── Numeroni del cruscotto ──────────────────────────────────────────────── */ .numeroni { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; } .numerone { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 18px 20px; box-shadow: var(--ombra); } /* Il segno dentro un quadrato tinto, come sulle schede del sito: e' quello che fa riconoscere il riquadro prima di leggerlo. Su quattro riquadri identici per forma, e' l'unica cosa che li distingue a colpo d'occhio. */ .numerone .segno { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } /* Era 12px MAIUSCOLO e spaziato, come le intestazioni delle tabelle: stessa cura, stesso motivo. Il maiuscolo toglie alla parola la sua forma, che e' il primo appiglio per riconoscerla senza leggerla. */ .numerone .etichetta { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--tenue); margin-bottom: 6px; } .numerone strong { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--inchiostro); line-height: 1.1; } .numerone .sotto { display: block; font-size: 13px; color: var(--tenue); margin-top: 6px; } .numerone.accento { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--superficie)), var(--superficie)); } .numerone.accento strong { color: var(--accent); } /* Sul riquadro d'accento il quadrato e' pieno: e' il numero che conta di piu' della pagina, e si vede da lontano quale sia. */ .numerone.accento .segno { background: var(--accent); color: var(--su-accento); } /* Era un flex, e dentro un flex ogni e ogni della frase diventa un elemento a sé, messo in riga accanto agli altri invece che dentro il discorso: la frase non andava a capo e usciva dallo schermo (a 375 px la pagina delle impostazioni assistenza arrivava a 507). Il pallino "i" torna a essere un segno posato a lato, il testo torna a essere testo. */ .avvertenza { display: block; position: relative; background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 11px; padding: 13px 16px 13px 45px; margin: 0 0 26px; font-size: 13.5px; color: var(--inchiostro-2); line-height: 1.5; } .material-simbolo { position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; border-radius: 50%; background: var(--tenue); color: var(--superficie); font-size: 12px; font-weight: 700; font-style: italic; display: flex; align-items: center; justify-content: center; } /* ── Schede ──────────────────────────────────────────────────────────────── */ .scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px 22px; box-shadow: var(--ombra); margin-bottom: 18px; } /* QUANDO STRETTA E QUANDO LARGA — la regola, scritta perche' finora era solo un'abitudine e infatti si e' gia' rotta una volta: un MODULO da compilare sta stretto. Un campo di testo largo mille pixel e' scomodo da leggere e da riempire, e l'occhio perde la riga tornando a capo fra un'etichetta e il suo campo. un ELENCO o una TABELLA stanno larghi. Li' la larghezza serve: sono colonne da confrontare, e stringerle vuol dire mandare a capo dati che si leggono in fila. Due schede sorelle nella stessa pagina devono avere la STESSA larghezza: se una e' un modulo, lo e' anche l'altra. Il gradino a meta' pagina si vede, e sembra un errore anche quando e' voluto. */ .scheda.stretta { max-width: 640px; } .nota-scheda { color: var(--tenue); font-size: 12.5px; margin: 12px 0 0; line-height: 1.5; } .due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .colonna-schede > .scheda:last-child { margin-bottom: 0; } @media (max-width: 860px) { .due-colonne { grid-template-columns: 1fr; } } /* ── Stati ───────────────────────────────────────────────────────────────── */ .barra-stati { display: flex; height: 9px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 18px; } .fetta { display: block; } .s-active { background: var(--ok); } .s-past_due { background: var(--attesa); } .s-unpaid { background: var(--attesa); opacity: .62; } .s-canceled { background: var(--allarme); } .s-archived { background: var(--bordo-forte); } .legenda { list-style: none; margin: 0; padding: 0; } .legenda li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; } .legenda li.zero { color: var(--tenue); } .legenda .pallino { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .legenda .voce { flex: 1; } .legenda .quanti { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--inchiostro); } .legenda li.zero .quanti { font-weight: 400; color: var(--tenue); } .badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 20px; color: #fff; white-space: nowrap; } .badge.s-archived { color: var(--inchiostro-2); } .badge.s-unpaid { opacity: 1; background: color-mix(in srgb, var(--attesa) 78%, #000); } .pillola { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 9px; border-radius: 20px; margin-left: 6px; white-space: nowrap; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); } /* ── Tabelle ─────────────────────────────────────────────────────────────── */ .tabella-scorrevole { overflow-x: auto; border-radius: var(--raggio); } table.elenco { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); } table.elenco th, table.elenco td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--bordo); font-size: 14px; white-space: nowrap; } /* Erano 11,5px MAIUSCOLE e spaziate, in grigio tenue su fondo chiaro: la combinazione piu' lenta da leggere che esista, messa proprio dove si scorre in fretta cercando una colonna. Il maiuscolo toglie ai occhi la forma della parola, che e' il primo appiglio per riconoscerla. Adesso e' testo normale, piu' grande e piu' scuro: si legge, e resta comunque un'intestazione perche' ha il fondo e il grassetto. */ table.elenco th { font-size: 12.5px; letter-spacing: 0; color: var(--inchiostro-2); background: var(--superficie-2); font-weight: 600; } table.elenco tbody tr:last-child td { border-bottom: 0; } table.elenco tbody tr:hover { background: var(--superficie-2); } table.elenco a { text-decoration: none; } table.elenco a:hover { text-decoration: underline; } table.elenco .nome { color: var(--inchiostro); font-weight: 600; } .num { text-align: right; font-variant-numeric: tabular-nums; } table.tabellina { width: 100%; border-collapse: collapse; } table.tabellina th, table.tabellina td { padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--bordo); } table.tabellina th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 600; } table.tabellina th:not(:first-child), table.tabellina td:not(:first-child) { text-align: right; } table.tabellina tbody tr:last-child td { border-bottom: 0; } /* ── Istogramma ──────────────────────────────────────────────────────────── */ .istogramma { display: flex; align-items: flex-end; gap: 6px; height: 150px; } /* L'asta e' alta una PERCENTUALE, e la percentuale si calcola su quello che la contiene: con la colonna a flex, l'asta al 100% prendeva tutti e 150 i pixel della colonna — e il numero sopra e il mese sotto finivano fuori dal riquadro, addosso alla scheda successiva. Con la griglia a tre righe la riga di mezzo prende lo spazio che avanza, e il 100% dell'asta e' il 100% di QUELLO. Nessuna modifica al PHP: la percentuale che ci arriva resta la stessa. */ .colonna { /* min-width:0 senza condizioni: una colonna flex, di suo, non scende mai sotto la larghezza del proprio contenuto — qui il nome del mese. Con dodici mesi il grafico diventava piu' largo della scheda e le aste finivano fuori dal riquadro, che e' il difetto segnalato. Stava in una media query a 720, quindi su una finestra stretta ma non "telefono" sbordava lo stesso. */ flex: 1; min-width: 0; height: 100%; display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; } .colonna .valore { font-size: 12px; font-weight: 700; color: var(--inchiostro); margin-bottom: 5px; font-variant-numeric: tabular-nums; } /* "zero", non "niente": .niente e' il riquadro degli stati vuoti, con dentro display:flex e 44px di padding. Un mese a zero se li prendeva tutti, e il grafico usciva dal riquadro con le aste diventate blocchi grigi. Un nome generico usato come modificatore prima o poi incontra il blocco che si chiama uguale. */ .colonna .valore.zero { color: var(--bordo-forte); font-weight: 400; } .colonna .asta { width: 100%; max-width: 42px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 62%, transparent)); min-height: 2px; } .colonna .asta.zero { background: var(--bordo); } .colonna .mese { font-size: 11px; color: var(--tenue); margin-top: 7px; text-align: center; line-height: 1.25; } /* ── Cose che richiedono attenzione ──────────────────────────────────────── */ .attenzione { list-style: none; margin: 0; padding: 0; } .attenzione li { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--bordo); border-left: 3px solid transparent; font-size: 14px; } .attenzione li:last-child { border-bottom: 0; } .attenzione li a { font-weight: 600; text-decoration: none; color: var(--inchiostro); } .attenzione li a:hover { text-decoration: underline; } .attenzione li span { color: var(--tenue); } .attenzione .l-urgente { border-left-color: var(--allarme); } .attenzione .l-attesa { border-left-color: var(--attesa); } .attenzione .l-nota { border-left-color: var(--bordo-forte); } /* ── Campi ───────────────────────────────────────────────────────────────── */ label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--inchiostro); } label small { display: block; font-weight: 400; color: var(--tenue); font-size: 12.5px; margin-top: 5px; line-height: 1.45; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-weight: 400; font-size: 15px; color: var(--inchiostro); background: var(--bg); border: 1px solid var(--bordo-campo); border-radius: 9px; } input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .con-suffisso { display: flex; align-items: center; gap: 9px; } .con-suffisso > span { color: var(--tenue); font-weight: 400; margin-top: 6px; white-space: nowrap; font-size: 14px; } .con-colore { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .con-colore input[type=color] { width: 48px; height: 38px; padding: 2px; cursor: pointer; border: 1px solid var(--bordo-campo); border-radius: 9px; background: var(--bg); } .con-colore input[type=text] { margin-top: 0; width: 120px; font-family: ui-monospace, Menlo, monospace; } .due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } @media (max-width: 620px) { .due { grid-template-columns: 1fr; } } fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px 4px; margin: 0 0 18px; } legend { font-size: 12px; font-weight: 700; color: var(--inchiostro); padding: 0 6px; text-transform: uppercase; letter-spacing: .05em; } fieldset small { display: block; color: var(--tenue); font-size: 12.5px; margin: 8px 0 12px; line-height: 1.45; } .moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0 14px; } label.spunta, label.radio { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; color: var(--inchiostro-2); margin-bottom: 9px; cursor: pointer; } label.spunta input, label.radio input { margin-top: 3px; accent-color: var(--accent); } label.spunta.minuta { font-size: 13px; color: var(--tenue); margin: 8px 0 0; } label.radio span { display: block; } label.radio strong { display: block; font-weight: 600; color: var(--inchiostro); font-size: 14px; } label.radio small { display: block; color: var(--tenue); font-size: 12.5px; margin-top: 1px; } /* ── Immagini del marchio ────────────────────────────────────────────────── */ .immagine { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; } .immagine > div:last-child { flex: 1; } .immagine strong { display: block; font-size: 13px; color: var(--inchiostro); margin-bottom: 8px; } .immagine small { display: block; color: var(--tenue); font-size: 12.5px; margin-top: 8px; line-height: 1.45; } .anteprima { flex-shrink: 0; border-radius: 12px; background: var(--bg); border: 1px dashed var(--bordo-forte); display: flex; align-items: center; justify-content: center; overflow: hidden; } .anteprima img { max-width: 100%; max-height: 100%; object-fit: contain; } .anteprima.grande { width: 88px; height: 88px; padding: 14px; } .anteprima.piccola { width: 52px; height: 52px; padding: 9px; } .file input[type=file] { display: none; } .file span { display: inline-block; cursor: pointer; padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); } .file span:hover { background: color-mix(in srgb, var(--accent) 19%, transparent); } /* ── Pulsanti ────────────────────────────────────────────────────────────── */ button, .bottone { font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 9px 19px; border-radius: 9px; border: 1px solid transparent; background: var(--superficie-2); color: var(--inchiostro-2); text-decoration: none; display: inline-block; } button.pieno, .bottone.pieno { background: var(--accent); color: var(--su-accento); } button:hover, .bottone:hover { filter: brightness(1.07); } button.link { background: none; color: var(--accent); padding: 0; border: 0; font-weight: 500; } button.link:hover { text-decoration: underline; filter: none; } a.link { font-size: 14px; text-decoration: none; color: var(--accent); } a.link:hover { text-decoration: underline; } form.scheda button.pieno { margin-top: 4px; } /* ── Messaggi ────────────────────────────────────────────────────────────── */ .flash { border-radius: 11px; padding: 11px 15px; margin-bottom: 18px; font-size: 14px; border: 1px solid; } .flash.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .flash.error { background: color-mix(in srgb, var(--allarme) 10%, transparent); color: var(--allarme); border-color: color-mix(in srgb, var(--allarme) 40%, transparent); } .credenziali { background: var(--superficie); border: 2px solid var(--accent); border-radius: var(--raggio); padding: 20px 22px; margin-bottom: 24px; box-shadow: var(--ombra-alta); } .credenziali p { color: var(--tenue); font-size: 13.5px; margin: 0 0 15px; line-height: 1.5; } .credenziali dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 20px; margin: 0; align-items: baseline; } .credenziali dt { font-size: 13px; color: var(--tenue); } .credenziali dd { margin: 0; } .credenziali .pw { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); padding: 3px 10px; border-radius: 7px; font-size: 15px; font-weight: 700; user-select: all; } /* ── Limiti del piano ─────────────────────────────────────────────────────── */ fieldset.limiti { padding-bottom: 10px; } label.limite { display: grid; grid-template-columns: 1fr 110px auto; align-items: center; gap: 12px; margin-bottom: 10px; font-weight: 400; } label.limite .nome { font-weight: 600; color: var(--inchiostro); font-size: 13.5px; } label.limite input[type=number] { width: 100%; margin: 0; padding: 8px 10px; font: inherit; font-size: 15px; color: var(--inchiostro); background: var(--bg); border: 1px solid var(--bordo-campo); border-radius: 9px; text-align: right; }/* IL CAMPO E LA SUA CROCETTA. Vuoto vuol dire "illimitato", ma appena ci si scrive un numero il testo grigio sparisce e per tornare indietro bisogna indovinare che va svuotato. La crocetta compare solo quando c'e' qualcosa da togliere: :placeholder-shown e' vero esattamente quando il campo e' vuoto, quindi non serve una riga di JavaScript per accenderla (25/09/2026). */ label.limite .campo-limite { position: relative; display: block; } label.limite .campo-limite input[type=number] { padding-right: 30px; } label.limite .svuota { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--tenue); font-size: 17px; line-height: 1; cursor: pointer; transition: color var(--transition), opacity var(--transition); } label.limite .svuota:hover { color: var(--inchiostro); background: var(--bg); } label.limite input:placeholder-shown + .svuota { opacity: 0; pointer-events: none; } label.limite .uso { font-size: 12.5px; color: var(--tenue); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 8ch; } /* Chi ha già saturato il piano si vede a colpo d'occhio: è la ragione più frequente per cui un cliente chiama dicendo "non riesco ad aggiungere". */ label.limite .uso.pieno { color: var(--allarme); font-weight: 600; } /* La colonna del campo era "auto", cioè larga quanto il browser decide per un input che si vuole al 100% della propria cella: una misura che si risolve da sé e viene fuori diversa da un caso all'altro. Meglio dirla. */ @media (max-width: 520px) { label.limite { grid-template-columns: 1fr 104px; } label.limite .uso { grid-column: 2; text-align: right; } } /* ── Piani ────────────────────────────────────────────────────────────────── */ .piani { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .piano { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 18px 20px; box-shadow: var(--ombra); display: flex; flex-direction: column; } .piano.archiviato { opacity: .62; } .piano-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .piano-testa h2 { margin: 0 0 2px; font-size: 17px; } .codice { color: var(--tenue); font-size: 12px; } .piano-canone { text-align: right; white-space: nowrap; } .piano-canone strong { font-size: 20px; color: var(--inchiostro); letter-spacing: -.02em; } .piano-canone span { font-size: 12.5px; color: var(--tenue); } .piano-desc { font-size: 13.5px; color: var(--tenue); margin: 10px 0 0; line-height: 1.45; } .piano-limiti { list-style: none; margin: 14px 0 0; padding: 0; } .piano-limiti li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--bordo); } .piano-limiti li:last-child { border-bottom: 0; } .piano-limiti strong { color: var(--inchiostro); font-weight: 600; } .piano-moduli { font-size: 13px; color: var(--tenue); margin: 12px 0 0; line-height: 1.45; } .piano-moduli strong { color: var(--inchiostro); } .piano-piede { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--tenue); } .pillola.spenta { background: var(--superficie-2); color: var(--tenue); } .scelta-piano .radio.piano-scelta { margin-bottom: 12px; } .piano-scelta strong { font-size: 14.5px; } .piano-scelta small { margin-top: 2px; } select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 15px; font-weight: 400; color: var(--inchiostro); background: var(--bg); border: 1px solid var(--bordo-campo); border-radius: 9px; } /* Lo scostamento dal piano: si legge, non si decora. */ .scostamento { list-style: none; margin: 0 0 16px; padding: 0; } .scostamento li { font-size: 13.5px; color: var(--inchiostro-2); padding: 6px 0 6px 15px; border-left: 3px solid var(--attesa); border-bottom: 1px solid var(--bordo); } .scostamento li:last-child { border-bottom: 0; } button.pericolo { color: var(--allarme); background: color-mix(in srgb, var(--allarme) 10%, transparent); margin-left: 8px; } /* ── Testata: ingranaggio e profilo ───────────────────────────────────────── */ .testata-destra { display: flex; align-items: center; gap: 14px; } .ingranaggio, .campanella { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--tenue); text-decoration: none; } .ingranaggio:hover, .campanella:hover { background: var(--superficie-2); color: var(--inchiostro-2); } .ingranaggio.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } /* ── Schermata di accesso con sfondo ──────────────────────────────────────── */ /* Il velo sta sopra la fotografia e sotto al riquadro: senza, un'immagine chiara mangia il testo grigio e una scura mangia tutto il resto. */ body.schermo-accesso[style], body.schermo-accesso { position: relative; } body.schermo-accesso::before { content: ''; position: fixed; inset: 0; z-index: 0; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(2px); pointer-events: none; } body.schermo-accesso main { position: relative; z-index: 1; } body.schermo-accesso .scheda { box-shadow: var(--ombra-alta); } .anteprima.sfondo { width: 128px; height: 72px; padding: 0; } .anteprima.sfondo img { width: 100%; height: 100%; object-fit: cover; } .anteprima .niente { color: var(--tenue); font-size: 12px; } /* ── Menù del profilo ─────────────────────────────────────────────────────── */ .menu-profilo { position: relative; } .avatar { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--accent); color: var(--su-accento); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; cursor: pointer; } .avatar:hover { filter: brightness(1.08); } .menu-tendina { position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; min-width: 214px; padding: 6px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra-alta); } .menu-chi { padding: 9px 11px 11px; border-bottom: 1px solid var(--bordo); margin-bottom: 5px; } .menu-chi strong { display: block; font-size: 13.5px; color: var(--inchiostro); } .menu-chi span { display: block; font-size: 12.5px; color: var(--tenue); word-break: break-all; } .menu-tendina a, .menu-tendina button { display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 8px; border: 0; background: none; color: var(--inchiostro-2); font: inherit; font-size: 14px; font-weight: 400; text-decoration: none; cursor: pointer; } .menu-tendina a:hover, .menu-tendina button:hover { background: var(--superficie-2); filter: none; } .menu-tendina form { margin: 0; } /* ── Impostazioni con sotto-menù ──────────────────────────────────────────── */ .con-sottomenu { display: grid; grid-template-columns: 176px 1fr; gap: 26px; align-items: start; } .sottomenu { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; } .sottomenu a { padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--inchiostro-2); font-size: 14px; } .sottomenu a:hover { background: var(--superficie-2); } .sottomenu a.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; } .sezione > .occhiello { margin-bottom: 22px; } .titolo-sezione { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 2px; } .titolo-sezione h2 { font-size: 19px; margin: 0; letter-spacing: -.015em; } @media (max-width: 760px) { .con-sottomenu { grid-template-columns: 1fr; gap: 16px; } .sottomenu { flex-direction: row; overflow-x: auto; position: static; } } .tre { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0 14px; } @media (max-width: 560px) { .tre { grid-template-columns: 1fr; } } input[type=password] { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-weight: 400; font-size: 15px; color: var(--inchiostro); background: var(--bg); border: 1px solid var(--bordo-campo); border-radius: 9px; } /* Intestazione di una tendina che non mostra un profilo ma un gruppo di voci. */ .menu-titolo { padding: 7px 11px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--bordo); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); } /* La sezione in cui ci si trova già: si vede, ma non è un pulsante spento — ricliccarla è legittimo e ricarica la pagina. */ .menu-tendina a.qui { color: var(--accent); font-weight: 600; } /* L'ingranaggio ora è un pulsante, non un link: azzera lo sfondo di serie. */ button.ingranaggio { background: none; border: 0; padding: 0; } /* ── Funzioni comprese in un piano ────────────────────────────────────────── */ label.spunta.funzione { align-items: flex-start; margin-bottom: 12px; } label.spunta.funzione strong { display: block; font-weight: 600; color: var(--inchiostro); font-size: 14px; } label.spunta.funzione small { display: block; color: var(--tenue); font-size: 12.5px; line-height: 1.45; margin-top: 1px; } /* Quanto costa quella funzione a chi vende: sta accanto al nome perché è la ragione per cui certe voci non stanno sui piani bassi. */ label.spunta.funzione em.costo, label.spunta.funzione em.in-arrivo { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; margin-left: 7px; vertical-align: 1px; } label.spunta.funzione em.costo { background: color-mix(in srgb, var(--attesa) 15%, transparent); color: var(--attesa); } label.spunta.funzione em.in-arrivo { background: var(--superficie-2); color: var(--tenue); } /* ── Modifiche di un piano da riportare sulle aziende ───────────────────────── Occhiello, domanda, spiegazione breve; poi COSA cambia (pastiglie + e −) e SU CHI (una riga per azienda, col perche' se parte non spuntata). */ .modifiche-piano { border-color: color-mix(in srgb, var(--accent) 45%, var(--bordo)); } .occhiello-scheda { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; } .modifiche-piano h2 { margin: 0; font-size: 19px; line-height: 1.3; text-wrap: balance; } .nota-scheda.modifiche-sotto { margin-top: 8px; } .modifiche-elenco { list-style: none; margin: 16px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .modifiche-elenco li { font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 20px; background: var(--superficie-2); color: var(--inchiostro-2); } .modifiche-elenco li.piu { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .modifiche-elenco li.meno { background: color-mix(in srgb, var(--allarme) 12%, transparent); color: var(--allarme); } .modifiche-titolo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); margin: 0 0 12px; padding-top: 16px; border-top: 1px solid var(--bordo); } .modifiche-titolo span { font-weight: 600; letter-spacing: 0; color: var(--inchiostro-2); } label.spunta.azienda-modifica { margin-bottom: 14px; } .azienda-modifica strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--inchiostro); } .azienda-modifica small { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 2px; line-height: 1.45; } .azienda-modifica small.conflitto, .conflitto-nota { color: var(--attesa); } .azienda-modifica input:disabled + span { opacity: .55; } .modifiche-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } form.scheda .modifiche-azioni button.pieno { margin-top: 0; } .moduli-funzioni { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bordo); } .moduli-funzioni h3 { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); margin: 0 0 12px; } /* Riga di scorciatoie sotto il titolo di un'azienda. */ .scorciatoie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; } .scorciatoie .occhiello { margin: 0; } /* Riquadro di una funzione che il piano non comprende: si puo' configurare lo stesso, ma si vede che non e' in uso. */ .scheda.fuori-piano { border-style: dashed; } .scheda.fuori-piano h2 { color: var(--tenue); } /* ── ASSISTENZA: la chat ───────────────────────────────────────────────────── Non due schede affiancate ma UNA scheda spartita da un filetto: due cornici con due bordi si vedrebbero come un pezzo arrivato dopo. Qui la cornice e' quella di sempre, dentro ci sta un mobile a due ante. E soprattutto: altezza fissa e scorrimento DENTRO i due pannelli. E' quello che fa smettere di scorrere la pagina e cominciare a scorrere la conversazione — la differenza fra un elenco di messaggi e una chat. */ .chat-schermo { display: grid; grid-template-columns: 310px minmax(0, 1fr); /* Alta quanto la finestra meno la testata (60) e l'imbottitura del main (30 sopra, 90 sotto): misurata, non stimata. È quello che fa smettere di scorrere la pagina e cominciare a scorrere la conversazione. */ height: calc(100vh - 60px - 120px); min-height: 420px; overflow: hidden; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); } /* ── La rubrica ──────────────────────────────────────────────────────────── */ .chat-rubrica { border-right: 1px solid var(--bordo); overflow-y: auto; min-height: 0; } .chat-rubrica-testa { display: flex; align-items: baseline; gap: 10px; padding: 16px 16px 12px; position: sticky; top: 0; background: var(--superficie); border-bottom: 1px solid var(--bordo); } .chat-rubrica-testa h1 { font-size: 17px; margin: 0; } .chat-rubrica-testa .occhiello { margin: 0; font-size: 12px; } .chat-elenco { list-style: none; margin: 0; padding: 0; } .chat-elenco li { border-bottom: 1px solid var(--bordo); } .chat-elenco a { display: flex; gap: 11px; align-items: center; padding: 12px 16px; text-decoration: none; color: inherit; } .chat-elenco a:hover { background: var(--superficie-2); } /* "Sei qui" si dice come lo dice il resto della console — velo d'accento e barretta — non con un fondo pieno che qui griderebbe. */ .chat-elenco li.qui a { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 2px 0 0 var(--accent); } .chat-elenco li.qui a strong { color: var(--accent); } .chat-sigla { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--superficie-2); color: var(--inchiostro-2); } .chat-sigla.grande { width: 40px; height: 40px; font-size: 14px; } .chat-riga { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .chat-riga-alto, .chat-riga-basso { display: flex; align-items: baseline; gap: 8px; } .chat-riga-alto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .chat-riga-alto small, .chat-riga-basso .anteprima { color: var(--tenue); font-size: 12px; } .chat-riga-basso .anteprima { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-elenco li.da-leggere .anteprima { color: var(--inchiostro); } .chat-conteggio { flex: none; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--su-accento); font-size: 11px; font-weight: 700; text-align: center; } /* ── La conversazione ────────────────────────────────────────────────────── */ .chat-corpo { display: flex; flex-direction: column; min-height: 0; } .chat-nessuna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--tenue); } .chat-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--bordo); } .chat-chi { display: flex; align-items: center; gap: 11px; min-width: 0; } .chat-chi strong { display: block; font-size: 15px; } .chat-chi small { color: var(--tenue); font-size: 12px; } .chat-testa form { margin: 0; } /* L'interruttore vero: sta qui perche' e' qui che ti accorgi di essere ancora in linea alle otto di sera. In barra resta solo la spia. */ .linea { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 13px; cursor: pointer; border: 1px solid var(--bordo-forte); background: var(--superficie); color: var(--tenue); } .linea .pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--bordo-forte); } .linea.accesa { color: var(--ok); border-color: var(--ok); } .linea.accesa .pallino { background: var(--ok); } .chat-avviso { margin: 0; padding: 10px 20px; font-size: 13px; line-height: 1.5; color: var(--attesa); background: color-mix(in srgb, var(--attesa) 12%, transparent); border-bottom: 1px solid var(--bordo); } .chat-battute { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } /* Il separatore di giornata: sei righe di CSS, ed e' la cosa che piu' delle bolle fa leggere "chat" invece di "registro". */ .chat-giorno { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .chat-giorno::before, .chat-giorno::after { content: ''; flex: 1; height: 1px; background: var(--bordo); } .chat-scrivi { display: flex; align-items: flex-end; gap: 10px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--bordo); } .chat-scrivi textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; margin: 0; } .chat-scrivi button { flex: none; } /* ── Le bolle, usate sia dalla chat sia dai ticket ───────────────────────── */ .conversazione { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 2px 0 12px; } .battuta { max-width: 78%; } .battuta.sua { align-self: flex-start; } .battuta.mia { align-self: flex-end; } .battuta .testo { padding: 10px 13px; border-radius: var(--raggio); font-size: 14px; line-height: 1.5; word-wrap: break-word; } /* Il bordo solo sulla bolla del cliente: in tema scuro --superficie-2 sopra --superficie e' uno scarto di pochi punti, e la bolla sparirebbe. */ .battuta.sua .testo { background: var(--superficie-2); border: 1px solid var(--bordo); border-bottom-left-radius: 4px; } .battuta.mia .testo { background: var(--accent); color: var(--su-accento); border-bottom-right-radius: 4px; } .battuta .firma { margin-top: 3px; font-size: 11px; color: var(--tenue); } .battuta.mia .firma { text-align: right; } /* ── Il ticket ─────────────────────────────────────────────────────────────── Un ticket non e' una chat, e non deve somigliarci: la chat e' una cosa che si fa adesso, il ticket una pratica che si riprende in mano fra tre settimane. Quindi niente fumetti e niente allineamento a destra — un numero, uno stato, e gli interventi impilati a tutta larghezza con sopra chi ha scritto e quando. Le stesse classi le usa il pannello dentro l'app: chi risponde da qui e chi legge da li' devono vedere la stessa cosa. */ .tkt-num { font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--tenue); font-variant-numeric: tabular-nums; } .tkt-stato { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .tkt-stato.aperto { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .tkt-stato.chiuso { background: var(--superficie-2); color: var(--tenue); } .tkt-filo { margin: -4px -4px 0; } .tkt-post { padding: 15px 4px; border-bottom: 1px solid var(--bordo); } .tkt-post:last-child { border-bottom: none; } /* Quello che ho scritto io si distingue senza doverlo cercare. */ .tkt-post.staff { background: color-mix(in srgb, var(--accent) 4%, transparent); } .tkt-post header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .tkt-post header strong { font-size: 13.5px; font-weight: 600; } .tkt-post header time { margin-left: auto; font-size: 11.5px; color: var(--tenue); } .tkt-ruolo { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1px 6px; border-radius: 5px; } .tkt-testo { font-size: 14px; line-height: 1.55; color: var(--inchiostro); word-break: break-word; } .tkt-rispondi { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bordo); } .tkt-rispondi label { font-size: 12.5px; font-weight: 600; color: var(--inchiostro); } .tkt-rispondi textarea { resize: vertical; min-height: 90px; } .tkt-rispondi button { align-self: flex-start; } /* ── Gli elenchi a righe: ticket e potenziali clienti ────────────────────── */ /* Stesso markup, stesse regole. Due copie della stessa lista divergono al primo ritocco, e poi una delle due e' quella vecchia senza che nessuno sappia quale. .righe e' il ripristino, che il PHP scriveva gia' su tutte e tre le liste senza che nel foglio esistesse. */ .righe { list-style: none; margin: 0; padding: 0; } .elenco-ticket, .elenco-potenziali { list-style: none; margin: 0; padding: 0; } /* La RIGA è il blocco: sfondo, raggio e separatore stanno qui, non sul collegamento. Un
dentro una non è HTML valido, quindi le azioni rapide sono sorelle del collegamento — e finché lo sfondo stava su di lui restavano fuori dall'evidenziazione, come due bottoni caduti lì sotto (24/09/2026). */ .elenco-ticket li, .elenco-potenziali li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--bordo); /* Raggio più stretto di quello della scheda: è una cosa contenuta dentro un'altra, stesso rapporto di una scheda dentro la pagina. Un rettangolo a spigolo vivo dentro una scheda stondata si vede, e si vede come un errore. */ border-radius: 10px; transition: background var(--transition); } .elenco-ticket li:last-child, .elenco-potenziali li:last-child { border-bottom: none; } .elenco-ticket li:hover, .elenco-potenziali li:hover { background: var(--superficie-2); } .elenco-ticket a, .elenco-potenziali a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; text-decoration: none; color: inherit; flex: 1; min-width: 0; } .tk-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tk-testo strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-testo small, .tk-stato small { color: var(--tenue); font-size: 12px; } .tk-stato { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .elenco-ticket li.da-leggere .tk-testo strong, .elenco-potenziali li.da-leggere .tk-testo strong { font-weight: 700; } /* ── Il diario di un potenziale cliente ──────────────────────────────────── */ /* Non e' una chat: sono appunti, in ordine di quando sono stati scritti, e non si correggono. Quindi righe piatte, non battute con la coda. */ .rispondi { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .rispondi textarea { resize: vertical; min-height: 72px; } .rispondi button { align-self: flex-start; } .diario li { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--bordo); } .diario li:last-child { border-bottom: none; } .diario-testo { font-size: 14px; color: var(--inchiostro); line-height: 1.45; } .diario-quando { font-size: 11.5px; color: var(--tenue); } /* ── La spia in barra ────────────────────────────────────────────────────── */ .conteggio-nav { display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: var(--allarme); color: #fff; font-size: 11px; font-weight: 700; text-align: center; } /* Il form e' solo un involucro. Il margin:0 non e' pignoleria: i form del foglio hanno margin-bottom 15px, e align-items:center centra la scatola COL margine — il pulsante finiva otto pixel piu' in alto di ingranaggio, campanella e avatar. Misurato, non immaginato. */ .forma-spia { display: flex; align-items: center; margin: 0; } .spia-linea { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; text-decoration: none; font-family: inherit; background: none; cursor: pointer; border: 1px solid var(--bordo); color: var(--tenue); } .spia-linea:hover { border-color: var(--bordo-forte); color: var(--inchiostro-2); } .spia-linea .pallino { width: 7px; height: 7px; border-radius: 50%; background: var(--bordo-forte); } .spia-linea.accesa { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .spia-linea.accesa .pallino { background: var(--ok); } /* Sotto i 760 la griglia va a una colonna e a decidere e' l'indirizzo, come fa gia' il PHP: ?p=chat e' l'elenco, ?p=chat&t=N e' la conversazione. Nessun JavaScript, e nessun settimo punto di rottura: 760 la console lo usa gia'. */ @media (max-width: 760px) { .chat-schermo { grid-template-columns: 1fr; height: auto; min-height: 0; } .chat-rubrica { border-right: none; } .chat-schermo:has(.chat-testa) .chat-rubrica { display: none; } .chat-battute { max-height: 60vh; } } /* ── Sotto-schede di un servizio alternativo (Integrazioni) ──────────────── */ .sotto-scheda { border: 1px solid var(--bordo); border-radius: 10px; margin-top: 14px; background: var(--superficie-2); } .sotto-scheda summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 11px 14px; list-style: none; user-select: none; } .sotto-scheda summary::-webkit-details-marker { display: none; } .sotto-scheda summary::before { content: '▸'; color: var(--tenue); font-size: 12px; transition: transform .12s ease; } .sotto-scheda[open] summary::before { transform: rotate(90deg); } .sotto-scheda summary strong { font-size: 14px; } .sotto-scheda summary .occhiello { margin: 0; font-size: 12px; } .sotto-scheda-corpo { padding: 2px 14px 16px; } .sotto-scheda-corpo label:first-child { margin-top: 0; } .pillola.in-uso, .pillola.accesa { background: var(--accent); color: var(--su-accento); } /* I toni degli stati di un potenziale cliente. Devono distinguersi a colpo d'occhio in un elenco lungo, perche' la domanda che ci si fa guardandolo e' sempre la stessa: chi aspetta una risposta da me? attesa = non l'ho ancora contattato (contorno, spento) neutro = contattato, palla a lui (velo d'accento) accesa = ha risposto, tocca a me (accento pieno, sopra) ok = demo fissata, o cliente (verde) spenta = non interessato (grigio, sopra) */ .pillola.attesa { background: transparent; color: var(--tenue); border: 1px solid var(--bordo-forte); padding: 0 8px; } .pillola.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } /* Il conto dei costi vivi di un piano. */ .conto { list-style: none; margin: 0 0 14px; padding: 0; } .conto li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--bordo); font-size: 14px; } .conto li span { color: var(--tenue); } .conto li strong { font-variant-numeric: tabular-nums; white-space: nowrap; } .conto li.totale { border-bottom: none; border-top: 2px solid var(--bordo); margin-top: 4px; padding-top: 10px; font-weight: 600; } .conto li.totale span { color: var(--inchiostro); } .piano-limiti .piano-margine { border-top: 1px dashed var(--bordo); margin-top: 4px; padding-top: 8px; } .piano-limiti .piano-margine span { font-style: italic; } .costi-vivi { margin-bottom: 22px; } /* "senza tetto" accanto a una funzione non e' un numero mancante, e' un rischio: si vede diverso da un tetto impostato. */ .funzione .costo.aperto { background: color-mix(in srgb, var(--attesa) 14%, transparent); color: var(--attesa); } /* ── PASSATA GRAFICA (28/08/2026) ──────────────────────────────────────────── Quello che l'analisi ha trovato e che non stava in una variabile. */ /* La textarea deve somigliare agli altri campi, non a un blocco di codice. */ textarea { font-family: inherit; line-height: 1.5; resize: vertical; min-height: 84px; } /* Il fuoco esisteva solo sugli input: select, textarea, bottoni, voci dei menu a tendina e avatar non lo mostravano affatto. Chi naviga con la tastiera — o chi usa un lettore di schermo — non sapeva dove si trovava. */ :where(a, button, select, textarea, input, summary, [data-menu-apri]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* Un colore scritto a mano era rimasto: in tema scuro restava un rettangolo crema acceso in mezzo a una pagina scura. */ .funzione .costo.aperto { background: color-mix(in srgb, var(--attesa) 14%, transparent); color: var(--attesa); } /* .assente era la copia esatta di .vuoto con un altro nome. Resta l'alias perche' due viste lo usano, ma punta all'unica definizione. */ .assente { color: var(--tenue); } /* ── Schede: l'unico modo di navigare fra le sotto-sezioni ─────────────────── Prima erano tre schemi: menù laterale nelle Impostazioni, due colonne sulla scheda azienda, un pulsante a parte per le Integrazioni. Tre modi di dire la stessa cosa in tre pagine, ed è quello che fa sembrare un prodotto messo insieme da pezzi presi altrove. */ .schede { display: flex; gap: 4px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bordo); } .schede::-webkit-scrollbar { display: none; } .schede a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 10px 14px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; color: var(--tenue); text-decoration: none; } .schede a:hover { color: var(--inchiostro); } /* "Sei qui" si dice col colore e col filo sotto, non con un fondo pieno: la barra in alto lo dice già col velo d'accento, e due modi diversi nella stessa pagina si notano. */ .schede a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .scheda-conteggio { min-width: 17px; padding: 1px 5px; border-radius: 999px; background: var(--allarme); color: #fff; font-size: 11px; font-weight: 700; text-align: center; } /* ── Stati vuoti ───────────────────────────────────────────────────────────── Una riga di testo grigio buttata in mezzo alla pagina non dice niente a nessuno: chi la legge non sa se ha sbagliato qualcosa, se deve aspettare, o se deve fare lui una cosa. Uno stato vuoto è una spiegazione, e quando c'è qualcosa da fare porta anche il pulsante per farla. */ .niente { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 24px; text-align: center; } .niente-segno { font-size: 30px; line-height: 1; opacity: .55; } .niente strong { font-size: 15px; color: var(--inchiostro); } .niente p { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.55; color: var(--tenue); } .niente .bottone { margin-top: 6px; } .niente-piccolo { padding: 32px 18px; } .niente-piccolo .niente-segno { font-size: 24px; } .niente-piccolo strong { font-size: 14px; } .niente-piccolo p { font-size: 12.5px; } /* Le schede della scheda azienda sono più larghe della colonna stretta dei moduli: la sezione non deve stringersi da sola. */ .sezione > .due-colonne { display: block; } /* ═════════════════════════════════════════════════════════════════════════════ PASSATA TELEFONO (28/08/2026) Questa console si apre dal telefono più spesso che dal computer: chi vende il prodotto la guarda in negozio, in macchina, fra un cliente e l'altro. Era disegnata per una finestra larga, e a 375 px si vedeva: la barra andava a pezzi, l'elenco delle aziende era un nastro da tirare di lato, e ogni campo di testo faceva ingrandire la pagina appena lo si toccava. Due misure guidano tutto quello che segue, e sono misure del corpo, non dello schermo: 44 px di bersaglio (un polpastrello) e 16 px di carattere nei campi (sotto i quali iOS ingrandisce da solo). Per questo la parte sui bersagli sta dietro a `pointer: coarse` e non a una larghezza: un tablet a 800 px si tocca con lo stesso dito di un telefono a 375. ═════════════════════════════════════════════════════════════════════════════ */ /* ── I bersagli ────────────────────────────────────────────────────────────── Sotto i 44 px si sbaglia mira, e in una console dove si archivia un'azienda sbagliare mira costa. Si alzano solo le altezze: le larghezze le decide già il contenuto. */ @media (pointer: coarse) { button, .bottone, select, input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number] { min-height: 44px; } /* button.link non è un pulsante, è una parola dentro una frase. */ button.link { min-height: 0; } /* Tondi e quadrati della barra: crescono in tutte e due le direzioni, altrimenti da cerchi diventano ovali. */ .avatar, .ingranaggio { width: 44px; height: 44px; } .topbar nav a { padding-top: 12px; padding-bottom: 12px; } .schede a { padding-top: 12px; padding-bottom: 13px; } .menu-tendina a, .menu-tendina button { padding-top: 12px; padding-bottom: 12px; } .sotto-scheda summary { padding-top: 12px; padding-bottom: 12px; } .linea, .spia-linea { min-height: 44px; } .file span { padding: 12px 16px; } .con-colore input[type=color] { height: 44px; } .chat-scrivi textarea { min-height: 44px; } /* Una spunta è alta quanto la sua riga di testo: venti pixel. Il bersaglio però è tutta la casella, e quella si può allargare senza spostare niente. */ label.spunta, label.radio { min-height: 44px; align-items: center; } label.spunta.funzione, label.spunta.minuta { align-items: flex-start; } label.spunta.funzione { padding-top: 2px; } /* Link che stanno da soli e valgono come pulsanti: "Gestisci", "Modifica", il "← torna indietro" in cima alle pagine, e l'indirizzo di un'azienda messo lì da solo in un capoverso — un pulsante travestito. Nel mezzo di una frase invece un link resta un link, e non si gonfia. */ a.link, .indietro a, p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; } /* Sopra i 720 px l'elenco delle aziende resta una tabella (un tablet la regge, un telefono no), ma su un tablet si tocca lo stesso: una riga di tabella alta diciannove pixel non è un bersaglio. */ table.elenco td { padding-top: 3px; padding-bottom: 3px; } table.elenco td a { display: inline-flex; align-items: center; min-height: 44px; } /* Il sottodominio sotto il nome dell'azienda, nella testata della chat: è una didascalia e deve restarlo, ma è anche un link. Il bersaglio si allarga verso l'alto, sopra il nome — che link non è — e i margini negativi lo tengono fuori dal calcolo dell'altezza: la testata non si gonfia. */ .chat-chi small a { display: inline-block; padding: 14px 8px; margin: -14px -8px; } } /* ── I campi ───────────────────────────────────────────────────────────────── Un campo con carattere sotto i 16 px, su iOS, fa ingrandire la pagina appena lo si tocca — e da lì in poi si naviga una console larga il doppio dello schermo, con la barra fuori a destra. Non è una preferenza tipografica: è l'unico modo di non farlo succedere. Vale ovunque si tocchi, tablet compresi. */ @media (pointer: coarse) { input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea, label.limite input[type=number], .con-colore input[type=text] { font-size: 16px; } } /* ── Quello che dipende davvero dalla larghezza ─────────────────────────────── */ @media (max-width: 720px) { /* Ventidue pixel di margine per lato, su 375, sono il 12% della riga. */ main { padding: 20px 16px 64px; } h1 { font-size: 22px; } .titolo-pagina { margin-bottom: 20px; gap: 12px; } /* ── L'elenco delle aziende ────────────────────────────────────────────── Nove colonne dentro 375 px non sono una tabella, sono un nastro: misurato, 887 px di contenuto in 331 di finestra. Qui ogni azienda diventa una scheda — il nome grande, e sotto le tre cose che si guardano per decidere se aprirla (stato, piano, canone). Indirizzo, moduli, utenti e spazio si leggono nella scheda dell'azienda, che è a un tocco di distanza. Il :has serve a non spegnere lo scorrimento a una tabella futura che schede non diventa. Dove non è supportato la regola cade e resta overflow:auto, che con le schede non ha niente da far scorrere: nessun danno. */ .tabella-scorrevole:has(> table.aziende) { overflow-x: visible; } table.aziende, table.aziende tbody, table.aziende tr, table.aziende td { display: block; } table.aziende thead { display: none; } table.aziende tr { position: relative; padding: 13px 16px; border-bottom: 1px solid var(--bordo); } table.aziende tbody tr:last-child { border-bottom: 0; } table.aziende td { border-bottom: 0; padding: 0; white-space: normal; } table.aziende .c-nome { margin-bottom: 5px; } table.aziende .c-nome .nome { font-size: 16px; line-height: 1.35; } /* Il tocco prende tutta la scheda, non le lettere del nome: il pollice centra un rettangolo alto settanta pixel, non una riga di testo alta diciannove. Funziona perché nella scheda, a telefono, non resta nessun altro link. */ table.aziende .c-nome .nome::after { content: ''; position: absolute; inset: 0; } table.aziende .c-stato, table.aziende .c-piano, table.aziende .c-canone { display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 13px; color: var(--tenue); text-align: left; } table.aziende .c-slug, table.aziende .c-moduli, table.aziende .c-utenti, table.aziende .c-dati, table.aziende .c-vai { display: none; } /* ── L'istogramma ──────────────────────────────────────────────────────── Il min-width:0 che serviva qui e' salito nella regola base: serviva anche a finestra larga, e dodici mesi facevano 729 px con tutta la dashboard che scorreva di lato. Qui resta lo stringere: gap, altezza, corpi piu' piccoli. */ .istogramma { gap: 2px; height: 128px; } .colonna .asta { max-width: 24px; } .colonna .valore { font-size: 11px; } .colonna .mese { font-size: 10px; } /* Un indirizzo lungo non deve poter allargare la pagina da solo. */ .riga-dati a, .credenziali dd, .menu-chi span { overflow-wrap: anywhere; } .scheda { padding: 16px 16px; } .numerone { padding: 16px 18px; } .numerone strong { font-size: 26px; } } /* Le credenziali del primo accesso: due colonne su uno schermo stretto lasciano all'indirizzo una striscia di duecento pixel, e la password — l'unica cosa che quella scheda esiste per mostrare — ci finisce dentro a fatica. */ @media (max-width: 520px) { .credenziali { padding: 16px 16px; } .credenziali dl { grid-template-columns: 1fr; gap: 1px; } .credenziali dt { margin-top: 10px; } } /* La chat a una colonna esisteva già; mancava che la conversazione fosse alta quanto lo schermo che resta sotto la barra, che a telefono è più bassa di quella del computer perché va su due righe. */ @media (max-width: 760px) { .chat-battute { max-height: none; min-height: 46vh; } .chat-testa { padding: 12px 16px; flex-wrap: wrap; gap: 10px; } .chat-scrivi { padding: 10px 16px; } .conversazione { max-height: none; } } /* ── La campanella ─────────────────────────────────────────────────────────── Sta in barra prima dell'ingranaggio e dell'avatar: e' la cosa che si guarda, non una preferenza. Il numero e' rosso e piccolo — deve farsi trovare con la coda dell'occhio senza diventare il centro della pagina. */ /* Solo quello che l'ingranaggio non ha: il posto per il numero, e il fatto di essere un