/* ===========================================================================
stile.css — l'aspetto dell'agenda di IWELL.
I COLORI sono una scala di VIOLA — dal violetto profondo al magenta — su
fondi bianco-lilla. 📌 Scelti il 18/08/2026 da Andrea, guardando quattro
proposte a confronto (arancio, ambra, corallo, viola).
🔴 I NOMI DELLE VARIABILI DICONO IL RUOLO, NON IL COLORE: --accento,
--accento-2, --su-accento. Prima si chiamavano --arancio e --giallo, e al
primo cambio di palette sono diventati bugie. Cambiare colore domani vuol
dire toccare solo i valori qui sotto, non rinominare niente.
⚠️ --rosso e --verde sono l'eccezione: sono SEMANTICI (pericolo, misura che
sale, errore) e NON seguono l'accento. Restano rosso e verde anche se un
giorno la palette diventasse blu.
🔴 --su-accento è il testo che va SOPRA il pieno colorato, e cambia con la
palette: sui viola profondi il bianco regge (7,1:1), sugli arancioni no
(2,9:1) e ci vorrebbe il testo scuro. È l'unica cosa da ricalcolare quando
si cambia colore.
I CARATTERI: Montserrat per i titoli, Poppins per il testo.
⚠️ Serviti da casa nostra e non da Google: su un gestionale interno una
chiamata a un server esterno è una dipendenza inutile e un dato in più che
esce. Se i file non ci sono, si scende sui caratteri di sistema e la pagina
resta leggibile — non si rompe niente.
=========================================================================== */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
src:url('font/montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
src:url('font/montserrat-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
src:url('font/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
src:url('font/montserrat-700.woff2') format('woff2')}
/* 📌 I tre corsivi sono SOLO per il marchio «Dalila» in cima al menu.
Si cambia il corsivo cambiando --font-marchio, qui sotto. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;
src:url('font/cormorant-italic.woff2') format('woff2')}
@font-face{font-family:'Parisienne';font-style:normal;font-weight:400;font-display:swap;
src:url('font/parisienne.woff2') format('woff2')}
@font-face{font-family:'Playfair Italic';font-style:italic;font-weight:500;font-display:swap;
src:url('font/playfairitalic.woff2') format('woff2')}
:root{
/* --- la palette ---------------------------------------------------------
Contrasti CALCOLATI (non a occhio), su crema #FBFAFE e con bianco sopra:
--accento #7C3AED bianco sopra → 5,70:1 come testo → 5,48:1
--accento-2 #A21CAF bianco sopra → 6,32:1
--accento-3 #6D28D9 bianco sopra → 7,10:1
Tutti e tre reggono il bianco: per questo --su-accento è #FFF.
Prima di cambiare un valore, ricalcola. */
--accento:#7C3AED; --accento-2:#A21CAF; --accento-3:#6D28D9;
--accento-testo:#7C3AED; --accento-scuro:#5B21B6;
--su-accento:#FFFFFF;
/* ⚠️ SEMANTICI: non seguono l'accento, mai. */
--rosso:#DC2626; --verde:#2E7D32;
--salvia:#A99EC4; --su-barra:#DDD6F0;
--ink:#1B1430; --testo:#5A5470; --smorto:#6B6580;
--crema:#FBFAFE; --pietra:#F4F1FB; --lino:#EDE8F8;
--linea:#E8E4F2; --linea-2:#F7F5FC; --card:#FFFFFF;
/* la banda scura del menu */
--scuro-1:#171029; --scuro-2:#0D0918;
/* le sfumature, scritte in un posto solo */
--sfuma-accento:linear-gradient(120deg,var(--accento-3),var(--accento) 58%,var(--accento-2));
/* --- I CARATTERI, scritti in UN POSTO SOLO -------------------------------
🔴 Non scrivere mai un nome di font altrove — nemmeno dentro uno
`style="…"` in una pagina. È già successo: cambiando font, quattro ``
con `font-family:Inter` scritto a mano nell'HTML sono rimasti indietro e
ripiegavano sul carattere di sistema. Si usano queste due. */
--font-ui:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--font-titoli:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
/* il corsivo del marchio: Cormorant Garamond · Parisienne · Playfair Italic */
--font-marchio:'Cormorant Garamond',Georgia,serif;
--r-card:16px; --r-pill:999px; --r-blocco:8px;
/* --- l'agenda ---------------------------------------------------------- */
/* 🔴 L'altezza di uno slot da 15 minuti. Cambiare QUESTO cambia tutta la
densità dell'agenda, e non c'è nessun altro numero da toccare: le righe,
i blocchi e le bande grigie si posizionano tutti in slot. */
--h-slot:14px;
--w-ore:56px;
--w-col-min:132px;
}
*{box-sizing:border-box}
html,body{height:100%}
/* 🔴 SERVE, e non è una riga di troppo.
L'attributo `hidden` vale `display:none` solo perché lo dice il foglio di
stile del browser — e **qualunque regola scritta da noi lo batte**. Un
`.bottone{display:inline-block}` rende `hidden` completamente muto: l'elemento
resta lì, e chi legge il codice giura che l'ha nascosto.
📌 Già pagato il 17/08/2026 col bottone «Mostra» dell'agenda, che agenda.js
nascondeva senza che sparisse. */
[hidden]{display:none !important}
body{
margin:0; background:var(--crema); color:var(--testo);
font-family:var(--font-ui);
font-weight:500; font-size:14.5px; line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:var(--accento-testo)}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--accento); outline-offset:2px; border-radius:6px}
h1,h2,h3{font-family:var(--font-titoli);
font-weight:600; letter-spacing:-.015em}
/* --- il marchio ------------------------------------------------------------ */
.wordmark{
font-family:var(--font-marchio);
font-size:34px; font-weight:600; font-style:italic;
letter-spacing:0; text-indent:0; line-height:1;
color:#fff; margin:0;
}
.marchio-sotto{
display:block; font-size:9px; font-weight:600; letter-spacing:.26em;
text-transform:uppercase; color:var(--su-barra); margin-top:3px; text-indent:.1em;
}
.barra .marchio{text-decoration:none; display:block; padding:0 14px}
/* --- la pagina centrata (accesso, installazione, diagnostica) --------------- */
.centrata{
min-height:100%; display:flex; flex-direction:column;
align-items:center; justify-content:center; padding:32px 20px;
background:
radial-gradient(120% 58% at 50% -8%, rgba(168,60,230,.42), transparent 62%),
radial-gradient(80% 34% at 50% 0%, rgba(124,58,237,.24), transparent 68%),
linear-gradient(168deg,#171029 0%,#100B1D 56%,#0D0918 100%);
}
.centrata .marchio{text-align:center; margin-bottom:28px}
.centrata .marchio p:last-child{
margin:6px 0 0; font-size:10px; font-weight:600; letter-spacing:.24em;
text-transform:uppercase; color:var(--su-barra);
}
.riquadro{
width:100%; max-width:440px; background:var(--card);
border-radius:var(--r-card); padding:30px;
box-shadow:0 30px 70px -30px rgba(28,25,23,.75);
}
.riquadro.largo{max-width:860px}
.riquadro h1{font-size:24px; letter-spacing:-.01em; color:var(--ink); margin:0 0 6px}
.riquadro h1 b{font-weight:600}
.riquadro .sottotitolo{margin:0 0 24px; font-size:13.5px; color:var(--smorto); font-weight:500}
/* --- form -------------------------------------------------------------------- */
.campo{margin-bottom:15px}
.campo label{
display:block; font-size:9.5px; font-weight:700; letter-spacing:.15em;
text-transform:uppercase; color:var(--ink); margin-bottom:6px;
}
.campo input, .campo select, .campo textarea{
width:100%; padding:11px 14px; border-radius:10px;
border:1px solid var(--linea); background:var(--pietra); color:var(--ink);
font-size:14.5px; font-weight:600;
}
.campo textarea{min-height:96px; line-height:1.6; font-weight:500; resize:vertical}
.campo input:focus, .campo select:focus, .campo textarea:focus{
outline:none; border-color:var(--accento); background:#fff;
box-shadow:0 0 0 3px rgba(124,58,237,.20);
}
.campo .aiuto{margin:6px 0 0; font-size:11.5px; color:var(--smorto); font-weight:500; line-height:1.5}
.campo.spunta{display:flex; gap:10px; align-items:flex-start}
.campo.spunta input{width:auto; margin-top:3px; accent-color:var(--accento)}
.campo.spunta label{text-transform:none; letter-spacing:0; font-size:14px;
font-weight:600; color:var(--ink); margin:0}
.coppia{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.terzina{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:620px){ .coppia,.terzina{grid-template-columns:1fr} }
.bottone{
display:inline-block; text-align:center; text-decoration:none;
width:100%; padding:13px 18px; border:0; border-radius:var(--r-pill); cursor:pointer;
background:var(--sfuma-accento);
color:var(--su-accento); font-size:14px; font-weight:700;
box-shadow:0 10px 24px -12px rgba(142,58,34,.9);
}
.bottone:hover{filter:brightness(1.07)}
.bottone.scarno{
background:none; color:var(--accento-testo); border:1px solid var(--linea); box-shadow:none;
}
.bottone.scarno:hover{border-color:var(--su-barra); filter:none; background:var(--pietra)}
.bottone.stretto{width:auto; padding:9px 16px; font-size:13px}
.bottone.pericolo{background:none; color:var(--rosso); border:1px solid #F1C9C9; box-shadow:none}
.bottone.pericolo:hover{background:#FDF3F1}
.bottoni{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.bottoni .bottone{width:auto}
/* --- messaggi ------------------------------------------------------------------- */
.messaggio{
display:flex; gap:10px; align-items:flex-start; padding:12px 15px;
border-radius:10px; font-size:13.5px; font-weight:600; line-height:1.55;
margin-bottom:16px;
}
.messaggio .segno{flex:none; font-weight:700}
.messaggio.male{background:#FDF3F1; border:1px solid #EFCFC7; color:#8E2A18}
.messaggio.bene{background:#F1F5EE; border:1px solid #CFDCC5; color:#33611A}
.messaggio.attenzione{background:#FDF6EA; border:1px solid #EBD9B7; color:#7A5314}
.elenco-problemi{margin:0; padding-left:18px}
.elenco-problemi li{margin:2px 0}
/* --- l'impianto a due colonne ------------------------------------------------------ */
.impianto{display:flex; min-height:100vh}
/* 📌 LA BANDA SCURA STA FERMA e scorre solo il chiaro di destra: in una
schermata lunga (l'elenco delle clienti) il menu e il riquadro in fondo —
nome, «Esci», versione — finirebbero fuori schermo proprio quando servono.
`sticky` e non `fixed`: `fixed` la toglierebbe dal flusso e il contenuto di
destra si ritroverebbe sotto, da riposizionare a mano con un margine da
tenere allineato in due punti per sempre. */
.barra{
flex:none; width:226px; padding:24px 14px; display:flex; flex-direction:column; gap:24px;
position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
background:
radial-gradient(130% 46% at 50% 0%, rgba(168,60,230,.40), transparent 64%),
radial-gradient(92% 28% at 50% 3%, rgba(124,58,237,.22), transparent 70%),
linear-gradient(178deg,#171029,#100B1D 58%,#0D0918);
}
.gruppo-voci{display:flex; flex-direction:column; gap:4px}
.occhiello{
font-size:8.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:rgba(221,214,240,.52); padding:0 14px; margin:0 0 4px;
}
.voce-menu{
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:9px 14px; border-radius:var(--r-pill); text-decoration:none;
color:rgba(244,240,238,.76); font-size:13px; font-weight:600;
}
.voce-menu:hover{background:rgba(255,255,255,.07); color:#fff}
.voce-menu.qui{
background:var(--sfuma-accento);
color:var(--su-accento); box-shadow:0 8px 22px -10px rgba(124,58,237,.85);
}
.in-fondo{
margin-top:auto; padding:13px; border-radius:12px; background:rgba(255,255,255,.05);
border:1px solid rgba(221,214,240,.18); font-size:11px; line-height:1.7;
color:rgba(237,232,248,.62);
}
.in-fondo strong{color:#fff; font-weight:600}
.in-fondo a{color:var(--su-barra)}
.in-fondo .versione{font-size:10px; color:rgba(221,214,240,.45)}
.contenuto{flex:1; min-width:0; padding:30px 32px 44px; max-width:1180px}
.contenuto.largo{max-width:none}
/* --- pezzi comuni ------------------------------------------------------------------- */
.card{
background:var(--card); border:1px solid var(--linea); border-radius:var(--r-card);
padding:20px; box-shadow:0 1px 2px rgba(40,40,40,.03); margin-bottom:16px;
}
.card h2{
font-family:var(--font-ui);
font-size:9.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
color:var(--smorto); margin:0 0 14px;
}
.titolo-sezione{
font-size:28px; letter-spacing:-.015em; color:var(--ink); margin:0 0 4px;
}
.titolo-sezione b{font-weight:600}
.sotto-titolo{margin:0 0 22px; font-size:13px; color:var(--smorto); font-weight:500}
.pillola{
display:inline-block; padding:2px 9px; border-radius:var(--r-pill);
background:var(--lino); color:var(--testo);
font-size:10.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
.pillola.male{background:#FADFD9; color:#8E2A18}
.pillola.bene{background:#DFEAD6; color:#33611A}
.pillola.attenzione{background:#F7E7CA; color:#7A5314}
.pillola.forte{background:var(--accento); color:var(--su-accento); font-weight:700}
.pallino{
display:inline-block; width:9px; height:9px; border-radius:50%;
background:var(--c,var(--salvia)); vertical-align:middle; margin-right:6px; flex:none;
}
table.elenco{width:100%; border-collapse:collapse; font-size:13.5px}
table.elenco th{
text-align:left; padding:0 10px 10px; font-size:9px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--smorto);
border-bottom:1px solid var(--linea); white-space:nowrap;
}
table.elenco td{
padding:11px 10px; border-bottom:1px solid var(--linea-2);
font-weight:600; color:var(--ink); vertical-align:top;
}
table.elenco tr:last-child td{border-bottom:0}
table.elenco td.num, table.elenco th.num{text-align:right; font-variant-numeric:tabular-nums}
table.elenco td.smorto{color:var(--smorto); font-weight:500}
table.elenco tr.spenta td{opacity:.55}
table.elenco td .sotto{
display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:var(--smorto);
}
table.elenco td .sotto a{color:var(--smorto); text-decoration:none}
table.elenco td .sotto a:hover{text-decoration:underline}
.scorre{overflow-x:auto}
.vuoto{
text-align:center; padding:38px 20px; color:var(--smorto);
font-size:13.5px; line-height:1.7;
}
.vuoto strong{display:block; color:var(--ink); font-size:16px; font-weight:600; margin-bottom:6px;
font-family:var(--font-titoli)}
.nota-piede{
margin:24px auto 0; max-width:440px; text-align:center;
font-size:11.5px; color:rgba(221,214,240,.52); line-height:1.7;
}
.nota-piede a{color:var(--su-barra)}
.nota-sotto{margin:12px 2px 0; font-size:11.5px; color:var(--smorto); font-weight:500; line-height:1.6}
/* ===========================================================================
L'AGENDA
=========================================================================== */
/* --- la barra dei comandi in cima ------------------------------------------- */
.comandi{
display:flex; flex-wrap:wrap; gap:10px; align-items:center;
margin-bottom:16px;
}
.comandi .spinge{margin-left:auto}
.gruppo-bottoni{
display:inline-flex; background:var(--pietra); border:1px solid var(--linea);
border-radius:var(--r-pill); padding:3px; gap:2px;
}
.gruppo-bottoni a{
padding:7px 14px; border-radius:var(--r-pill); text-decoration:none;
font-size:12.5px; font-weight:600; color:var(--testo); white-space:nowrap;
}
.gruppo-bottoni a:hover{background:#fff; color:var(--ink)}
.gruppo-bottoni a.qui{background:var(--accento); color:var(--su-accento); font-weight:700}
.nav-data{display:inline-flex; align-items:center; gap:8px}
.nav-data a{
display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
background:var(--pietra); border:1px solid var(--linea);
text-decoration:none; color:var(--ink); font-weight:700; font-size:14px;
}
.nav-data a:hover{background:#fff; border-color:var(--su-barra)}
.nav-data .oggi{
font-family:var(--font-titoli); font-size:19px; color:var(--ink);
min-width:210px; text-align:center;
}
.nav-data .oggi small{
display:block; font-family:var(--font-ui); font-size:11px; font-weight:600;
color:var(--smorto); letter-spacing:.04em;
}
.riassunto{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; font-weight:600; color:var(--smorto)}
.riassunto b{color:var(--ink); font-weight:700}
/* --- la griglia --------------------------------------------------------------- */
/* 🔴 LE DUE GRIGLIE (testa e corpo) CONDIVIDONO LE COLONNE, e devono restare
allineate: la stessa `grid-template-columns`, scritta una volta in `.griglia`.
Se un giorno la testa e il corpo prendessero due template diversi, i nomi
delle colonne si sposterebbero rispetto agli appuntamenti — e non ci sarebbe
nessun errore, solo un'agenda che mente. */
.agenda{
background:var(--card); border:1px solid var(--linea); border-radius:var(--r-card);
overflow:hidden;
}
/* 🔴 È QUESTO il riquadro che scorre, nei due versi, e non la pagina.
⚠️ Ci vuole un'altezza massima: `position:sticky` si aggancia al primo
antenato che scorre, e un contenitore alto quanto il suo contenuto non
scorre mai — la riga dei nomi resterebbe incollata a niente e sparirebbe in
cima appena si scende. Con l'altezza, i nomi delle colonne restano su e la
colonna degli orari resta a sinistra, che è quello che serve quando si
guarda il pomeriggio della cabina 3. */
.agenda-scorre{
overflow:auto;
max-height:calc(100vh - 210px);
min-height:320px;
overscroll-behavior:contain;
}
.griglia{
display:grid;
grid-template-columns:var(--w-ore) repeat(var(--colonne,3), minmax(var(--w-col-min),1fr));
min-width:min-content;
}
.agenda-testa{
position:sticky; top:0; z-index:5;
background:var(--card); border-bottom:1px solid var(--linea);
}
/* L'angolo in alto a sinistra sta fermo nei due versi, se no scorrendo di lato
ci passano sotto i nomi delle colonne. */
.agenda-testa .angolo{
position:sticky; left:0; z-index:7;
background:var(--card); border-right:1px solid var(--linea-2);
}
.testa-colonna{
padding:11px 10px; text-align:center; border-right:1px solid var(--linea-2);
border-top:3px solid var(--c,var(--su-barra));
}
.testa-colonna:last-child{border-right:0}
.testa-colonna .nome{
font-size:13px; font-weight:700; color:var(--ink); display:block;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.testa-colonna .sotto{
display:block; font-size:10.5px; font-weight:600; color:var(--smorto); margin-top:1px;
}
.testa-colonna.chiusa{background:var(--pietra)}
.testa-colonna.chiusa .nome{color:var(--smorto)}
.testa-colonna.oggi{background:#F3EDFC}
.agenda-corpo{
grid-auto-rows:var(--h-slot);
grid-template-rows:repeat(var(--slot,40), var(--h-slot));
position:relative;
}
/* La colonna degli orari, ferma a sinistra mentre si scorre di lato: con sei o
sette colonne è l'unico modo di sapere che ora si sta guardando.
📌 Il fondo è un elemento a parte che copre tutta l'altezza: se lo sfondo
stesse sulle etichette, che ci sono solo alle ore piene, di fianco si
vedrebbero passare i blocchi negli intervalli fra un'ora e l'altra. */
.fondo-ore{
grid-column:1; grid-row:1 / -1; position:sticky; left:0; z-index:5;
background:var(--card); border-right:1px solid var(--linea-2);
}
.ora{
grid-column:1; position:sticky; left:0; z-index:6;
display:flex; justify-content:flex-end; padding-right:8px;
font-size:10.5px; font-weight:700; color:var(--smorto);
font-variant-numeric:tabular-nums; pointer-events:none;
}
.ora span{transform:translateY(-8px)}
/* il fondo di ogni colonna, con le righe delle ore.
📌 Le righe sono un gradiente e non centinaia di div: quattro slot per ora,
dieci ore, tre colonne farebbero 120 elementi vuoti a ogni caricamento. */
.colonna-fondo{
grid-row:1 / -1; border-right:1px solid var(--linea-2);
background:repeating-linear-gradient(
to bottom,
var(--linea-2) 0, var(--linea-2) 1px,
transparent 1px, transparent calc(var(--h-slot) * 4)
);
}
.colonna-fondo.oggi{background-color:#FDFCFF}
/* le fasce in cui la colonna non è disponibile */
.banda-chiusa{
background:repeating-linear-gradient(45deg,
rgba(146,135,129,.08) 0, rgba(146,135,129,.08) 5px,
rgba(146,135,129,.03) 5px, rgba(146,135,129,.03) 10px);
border-right:1px solid var(--linea-2);
z-index:1;
}
/* --- i blocchi ------------------------------------------------------------------- */
/* 🔴 LE CORSIE: quando due appuntamenti si accavallano si affiancano, e la
larghezza si divide in parti uguali. `--corsia` è da quale parte sta, `--corsie`
in quante si divide: le scrive PHP addosso al blocco, perché è lui che sa
quanti si toccano. Senza, due blocchi si coprirebbero e uno sparirebbe — che è
il modo peggiore di permettere una sovrapposizione. */
.blocco{
--corsia:0; --corsie:1;
z-index:2; position:relative;
margin-left:calc(var(--corsia) * (100% / var(--corsie)));
width:calc(100% / var(--corsie));
padding:3px 7px; margin-top:1px; margin-bottom:1px;
border-radius:var(--r-blocco);
border:1px solid rgba(255,255,255,.5);
border-left:3px solid var(--c,var(--salvia));
background:color-mix(in srgb, var(--c,var(--salvia)) 15%, #fff);
color:var(--ink); text-decoration:none; overflow:hidden;
font-size:11.5px; line-height:1.35; display:block;
box-shadow:0 1px 2px rgba(40,40,40,.07);
}
.blocco:hover{
filter:brightness(.97);
box-shadow:0 4px 12px -4px rgba(40,40,40,.28); z-index:4;
}
.blocco .chi{
display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.blocco .quando{display:block; font-size:10px; font-weight:600; color:var(--testo); opacity:.85}
.blocco .dove{
display:block; font-size:10px; font-weight:600; color:var(--testo); opacity:.7;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* meno di mezz'ora: ci sta una riga sola, e il resto si nasconde invece di
sbordare fuori dal blocco */
.blocco.stretto{padding:1px 6px; font-size:10.5px}
.blocco.stretto .quando, .blocco.stretto .dove{display:none}
/* gli stati */
.blocco.disdetto, .blocco.assente{
background:repeating-linear-gradient(45deg,#F6F4F2 0,#F6F4F2 4px,#EFEBE8 4px,#EFEBE8 8px);
border-left-color:#C8C8C8; color:var(--smorto);
}
.blocco.disdetto .chi{text-decoration:line-through}
.blocco.fatto{border-left-width:5px}
.blocco.fatto .chi::after{content:' ✓'; opacity:.6}
.blocco.confermato .chi::after{content:' ·'; opacity:.5}
/* La riga dell'ora di adesso. ⚠️ Le colonne le decide la pagina: tutte in una
vista giornaliera, solo quella di oggi in una settimanale. */
.adesso{
height:0; z-index:3; pointer-events:none;
border-top:2px solid var(--accento); position:relative;
}
.adesso::before{
content:''; position:absolute; left:-4px; top:-4px;
width:8px; height:8px; border-radius:50%; background:var(--accento);
}
/* --- l'agenda sul telefono ---------------------------------------------------------- */
/* 📌 Sotto una certa larghezza la griglia non si stringe: si scorre in
orizzontale. Comprimere tre colonne in 375px vorrebbe dire nomi illeggibili,
e un'agenda che non si legge non serve a niente. */
@media (max-width:760px){
:root{--w-col-min:118px; --w-ore:44px}
.contenuto{padding:20px 14px 40px}
/* 📌 Su schermo stretto la barra diventa una STRISCIA che resta incollata in
cima e scorre DI LATO — come la griglia dell'agenda, per la stessa ragione.
🔴 `nowrap` non è un dettaglio: mandandola a capo diventava alta 550px su
un telefono da 812px, cioè si mangiava due terzi dello schermo. Una barra
ferma che copre la pagina è peggio di una che scorre via. */
.barra{
position:sticky; top:0; z-index:20;
width:100%; height:auto; flex-direction:row; flex-wrap:nowrap;
align-items:center; gap:10px; padding:8px 12px;
overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
box-shadow:0 6px 18px -8px rgba(13,9,24,.5);
}
.barra::-webkit-scrollbar{height:0}
.impianto{flex-direction:column}
.barra .marchio{padding:0; flex:none}
.barra .marchio .wordmark{font-size:22px}
.barra .marchio-sotto{display:none}
.gruppo-voci{flex-direction:row; flex-wrap:nowrap; gap:6px; flex:none}
.voce-menu{white-space:nowrap; padding:7px 12px; font-size:13px}
.occhiello{display:none}
.in-fondo{
flex:none; margin:0 0 0 auto; padding:6px 10px; font-size:10px;
white-space:nowrap; border-radius:var(--r-pill);
}
.in-fondo .versione{display:none}
.nav-data .oggi{min-width:0; font-size:16px}
.comandi{gap:8px}
}
/* ===========================================================================
LA SCHEDA CLIENTE
=========================================================================== */
.testa-cliente{
display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
background:var(--card); border:1px solid var(--linea); border-radius:var(--r-card);
padding:22px; margin-bottom:16px;
}
.testa-cliente .nome-grande{
font-family:var(--font-titoli); font-size:30px; color:var(--ink);
margin:0 0 4px; line-height:1.15;
}
.testa-cliente .contatti{font-size:13px; color:var(--smorto); font-weight:600}
.testa-cliente .contatti a{color:var(--accento-testo); text-decoration:none}
.testa-cliente .numeri{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
.numerone{text-align:left}
.numerone b{
display:block; font-family:var(--font-titoli);
font-size:26px; color:var(--ink); line-height:1.1;
}
.numerone span{
display:block; font-size:9.5px; font-weight:700; letter-spacing:.13em;
text-transform:uppercase; color:var(--smorto); margin-top:3px;
}
/* 🔴 QUI C'ERA `.ancore`, la striscia di bottoncini in cima alla scheda cliente.
Tolta il 20/08/2026 insieme al menu che disegnava: faceva sembrare linguette
quelle che erano scorciatoie, e ripeteva parole («Chi è») che erano già
scritte due righe sotto. Al suo posto, nella testa della scheda, c'è un
bottone «Annulla» — che è la cosa che serve davvero. */
/* --- le misure ------------------------------------------------------------------- */
.misure-gruppo{margin-bottom:18px}
.misure-gruppo h3{
font-family:var(--font-ui);
font-size:9.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
color:var(--smorto); margin:0 0 10px;
}
.griglia-misure{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.griglia-misure .campo{margin:0}
.griglia-misure .campo input{padding:9px 12px; text-align:left; font-variant-numeric:tabular-nums}
.campo .unita{
float:right; font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--su-barra);
}
/* la tabella nel tempo: le voci sono righe, le date colonne.
📌 L'ULTIMA RILEVAZIONE STA A SINISTRA, subito dopo il nome della voce: è
quella che si guarda, e metterla in fondo vorrebbe dire scorrere ogni volta. */
.tabella-misure{width:100%; border-collapse:collapse; font-size:13px}
.tabella-misure th{
text-align:left; padding:0 10px 9px; font-size:9.5px; font-weight:700;
letter-spacing:.08em; color:var(--smorto); border-bottom:1px solid var(--linea);
white-space:nowrap;
}
.tabella-misure th:first-child{text-align:left}
.tabella-misure td{
padding:8px 10px; border-bottom:1px solid var(--linea-2);
text-align:left; font-weight:600; color:var(--ink);
font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tabella-misure td:first-child{text-align:left; font-weight:600; color:var(--testo)}
.tabella-misure tr.riga-gruppo td{
background:var(--pietra); font-size:9.5px; font-weight:700; letter-spacing:.15em;
text-transform:uppercase; color:var(--smorto); text-align:left; padding:7px 10px;
}
/* ⚠️ Una casella vuota resta VUOTA: un trattino grigio, non uno zero. Uno zero
vorrebbe dire «misura zero centimetri», e non è quello che sappiamo. */
.tabella-misure td.vuota{color:var(--su-barra); font-weight:500}
.tabella-misure td.diff-giu{color:var(--verde); font-weight:700}
.tabella-misure td.diff-su{color:var(--rosso); font-weight:700}
.tabella-misure .col-ultima{background:#F7F3FD}
/* il grafico */
.grafico{width:100%; height:auto; display:block; overflow:visible}
.grafico .asse{stroke:var(--linea); stroke-width:1}
.grafico .griglia-y{stroke:var(--linea-2); stroke-width:1}
.grafico .linea{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.grafico .punto{stroke:#fff; stroke-width:1.5}
.grafico text{font-family:var(--font-ui); font-size:11px; fill:var(--smorto); font-weight:600}
/* 📌 Le fasce alterne dei mesi: si legge «giugno» senza contare le tacche. */
.grafico .fascia-mese{fill:var(--linea-2)}
.grafico .mese{font-size:10.5px; letter-spacing:.08em; fill:var(--smorto)}
.grafico .riga-oggi{stroke:var(--accento); stroke-width:1.5; stroke-dasharray:3 4; opacity:.55}
/* il velo sotto la linea, solo quando la voce è una sola */
.grafico .velo{opacity:.10}
.grafico .ultimo{font-size:12px; font-weight:700}
/* --- il titolo dell'andamento, con le frecce degli anni -------------------- */
.testa-andamento{
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin:26px 0 12px;
}
.testa-andamento h3{
margin:0; font-family:var(--font-ui); font-size:9.5px; font-weight:700;
letter-spacing:.17em; text-transform:uppercase; color:var(--ink);
}
.nav-anno{display:inline-flex; align-items:center; gap:4px}
.nav-anno b{
font-size:14px; font-weight:700; color:var(--ink); min-width:52px;
text-align:center; font-variant-numeric:tabular-nums;
}
.nav-anno a, .nav-anno .spenta{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:50%; font-size:19px; line-height:1;
border:1px solid var(--linea); background:var(--card); text-decoration:none;
}
.nav-anno a{color:var(--accento-testo)}
.nav-anno a:hover{border-color:var(--accento); background:var(--pietra)}
/* 📌 La freccia spenta resta al suo posto invece di sparire: se no il numero
dell'anno si sposta a ogni clic e l'occhio lo perde. */
.nav-anno .spenta{color:var(--linea); border-color:var(--linea-2); background:none}
.legenda{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:12px; font-weight:600}
.legenda span{display:inline-flex; align-items:center; gap:6px; color:var(--testo)}
/* --- le foto ----------------------------------------------------------------------- */
.foto-per-data{display:flex; gap:18px; overflow-x:auto; padding-bottom:8px}
.foto-colonna{flex:none; width:210px}
.foto-colonna h4{
margin:0 0 8px; font-family:var(--font-ui); font-size:11px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--smorto);
}
.foto-colonna img{
width:100%; border-radius:10px; border:1px solid var(--linea); display:block;
margin-bottom:8px; background:var(--pietra);
}
.foto-colonna .didascalia{font-size:11.5px; color:var(--smorto); font-weight:500}
/* --- gli appuntamenti nella scheda -------------------------------------------------- */
.riga-appuntamento{
display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--linea-2);
align-items:flex-start;
}
.riga-appuntamento:last-child{border-bottom:0}
.riga-appuntamento .quando{
flex:none; width:96px; font-size:12.5px; font-weight:700; color:var(--ink);
font-variant-numeric:tabular-nums;
}
.riga-appuntamento .quando small{
display:block; font-size:11px; font-weight:600; color:var(--smorto);
}
.riga-appuntamento .cosa{flex:1; min-width:0}
.riga-appuntamento .cosa strong{color:var(--ink); font-size:14px; font-weight:600}
.riga-appuntamento .cosa .con{font-size:11.5px; color:var(--smorto); font-weight:600}
.riga-appuntamento .nota{
margin:6px 0 0; padding:9px 12px; background:var(--pietra); border-radius:8px;
border-left:2px solid var(--su-barra);
font-size:12.5px; color:var(--testo); font-weight:500; line-height:1.6;
white-space:pre-wrap;
}
.riga-appuntamento .nota.manca{background:none; border-left-style:dashed; color:var(--su-barra)}
/* ===========================================================================
LE RIGHE MODIFICABILI (cabine, operatrici, listino, orari, turni)
⚠️ Sono righe e non tabelle apposta: ogni riga ha più form dentro, e un
`