:root{--fondo:#0B0A09;--fondo2:#131110;--carta:rgba(255,255,255,.045);
  --bordo:rgba(201,164,105,.22);--bordo2:rgba(255,255,255,.10);
  --oro:#C9A469;--oro-chiaro:#E7CE9F;--oro-scuro:#8C6E3D;
  --testo:#F6F1E9;--muto:#A79E92;--allarme:#D98B6A;--verde:#8FBF9F;
  --velo:rgba(255,255,255,.05);--velo2:rgba(255,255,255,.09);
  --anello:rgba(255,255,255,.16);--su-accento:#15100A;
  --segnaposto:#171310;--lente:rgba(6,5,4,.94);
  /* il pulsante dorato NON cambia col tema: e' il marchio */
  --b1:#E7CE9F;--b2:#C9A469;--su-oro:#15100A;
  /* la stessa famiglia della pagina delle clienti: prima il pannello
     parlava Jost per conto suo, e le due pagine non sembravano sorelle */
  --titolo:'Bodoni Moda','Didot',Georgia,serif;
  --numeri:'Bodoni Moda','Didot',Georgia,serif;
  --insegna:'Bodoni Moda','Didot',Georgia,serif}
/* LA SORELLA CHIARA — per chi con lo scuro legge male. La sceglie il
   telefono, il bottone la forza, la scelta resta salvata. Stessi gettoni
   della pagina delle clienti: se un giorno divergono, e' un errore. */
@media (prefers-color-scheme: light){:root:not([data-tema="scuro"]){
  --fondo:#F6F1E9;--fondo2:#EFE6D8;--carta:rgba(24,20,16,.04);
  --bordo:rgba(140,110,61,.34);--bordo2:rgba(24,20,16,.13);
  --oro:#8C6E3D;--oro-chiaro:#A98850;--oro-scuro:#6E5426;
  --testo:#181410;--muto:#6E6459;--allarme:#A8532B;--verde:#4A7A58;
  --velo:rgba(24,20,16,.045);--velo2:rgba(24,20,16,.08);
  --anello:rgba(24,20,16,.18);--su-accento:#F6F1E9;
  --segnaposto:#E7DECE;--lente:rgba(246,241,233,.95);
}}
:root[data-tema="chiaro"]{
  --fondo:#F6F1E9;--fondo2:#EFE6D8;--carta:rgba(24,20,16,.04);
  --bordo:rgba(140,110,61,.34);--bordo2:rgba(24,20,16,.13);
  --oro:#8C6E3D;--oro-chiaro:#A98850;--oro-scuro:#6E5426;
  --testo:#181410;--muto:#6E6459;--allarme:#A8532B;--verde:#4A7A58;
  --velo:rgba(24,20,16,.045);--velo2:rgba(24,20,16,.08);
  --anello:rgba(24,20,16,.18);--su-accento:#F6F1E9;
  --segnaposto:#E7DECE;--lente:rgba(246,241,233,.95);
}
:root[data-tema="scuro"]{
  --fondo:#0B0A09;--fondo2:#131110;--carta:rgba(255,255,255,.045);
  --bordo:rgba(201,164,105,.22);--bordo2:rgba(255,255,255,.10);
  --oro:#C9A469;--oro-chiaro:#E7CE9F;--oro-scuro:#8C6E3D;
  --testo:#F6F1E9;--muto:#A79E92;--allarme:#D98B6A;--verde:#8FBF9F;
  --velo:rgba(255,255,255,.05);--velo2:rgba(255,255,255,.09);
  --anello:rgba(255,255,255,.16);--su-accento:#15100A;
  --segnaposto:#171310;--lente:rgba(6,5,4,.94);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.temaB{position:fixed;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:40;
  width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:16px;
  background:var(--velo2);border:1px solid var(--bordo2);color:var(--muto);
  display:flex;align-items:center;justify-content:center}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{background:var(--fondo);
  color:var(--testo);line-height:1.6;text-align:center;min-height:100svh;
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;
  padding:env(safe-area-inset-top) calc(18px + env(safe-area-inset-right))
          calc(44px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
/* dipinto una volta dietro tutto: su iOS 'background-attachment:fixed' scatta a ogni scroll */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 55% at 50% -10%,rgba(201,164,105,.12),transparent 60%),
             linear-gradient(180deg,var(--fondo2),var(--fondo) 42%)}
main{max-width:660px;margin:0 auto}
.pagina{display:none}.pagina.qui{display:block;animation:sali .4s cubic-bezier(.22,1,.36,1)}
@keyframes sali{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sopra{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin:30px 0 12px}
h1{font-family:var(--insegna);font-weight:400;font-size:clamp(32px,9vw,44px);line-height:1.1;letter-spacing:.05em}
h2{font-family:var(--titolo);font-weight:500;font-size:20px;letter-spacing:0}
p{color:var(--muto);font-size:15px}
.min{font-size:13px;color:var(--muto)}
.disco{width:104px;height:104px;margin:18px auto 6px;border-radius:50%;
  background:linear-gradient(150deg,var(--oro-chiaro),var(--oro) 42%,var(--oro-scuro));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 18px 50px rgba(201,164,105,.2)}
.disco span{font-family:var(--insegna);font-size:26px;letter-spacing:.04em;color:var(--su-oro);line-height:1}
/* all'ingresso le iniziali riempiono il bollino: a 26px YM era striminzito */
#pgFuori .disco span{font-size:44px;letter-spacing:-.01em}
/* la scritta originale sotto il bollino dell'ingresso */
.marchioGrande{font-family:var(--insegna);font-size:30px;letter-spacing:.05em;color:var(--testo);line-height:1.2;margin:10px 0 14px}
.disco em{font-style:normal;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--su-oro);opacity:.7;margin-top:2px}
.carta{background:var(--carta);border:1px solid var(--bordo2);border-radius:16px;
  padding:20px 18px;margin-top:16px;text-align:left}
/* super smussato: azioni a pillola, tessere a 14px — come la pagina */
.oro,.vuoto{display:block;width:100%;min-height:54px;margin-top:14px;border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.oro{border:0;background:linear-gradient(120deg,var(--b1),var(--b2));color:var(--su-oro)}
.oro:disabled{opacity:.35;cursor:default}
.vuoto{border:1px solid var(--bordo);background:transparent;color:var(--muto);min-height:48px;letter-spacing:.14em}
input,textarea{width:100%;background:var(--velo);border:0;border-bottom:1px solid var(--bordo);
  padding:13px 2px;color:var(--testo);font:inherit;font-size:16px;font-weight:300}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--oro)}
input::placeholder{color:rgba(167,158,146,.5)}
textarea{min-height:70px;resize:vertical}
.eti{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin:20px 0 4px;text-align:left}
.schede{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:24px 0 4px}
.schede button{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--bordo2);
  background:transparent;color:var(--muto);font:inherit;font-size:13px;letter-spacing:.08em;cursor:pointer}
.schede button.qui{border-color:var(--oro);background:linear-gradient(120deg,var(--oro-chiaro),var(--oro));color:var(--su-accento);font-weight:500}
.riga{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* ⚠️ il link NON va in monospace: era l'ultimo residuo da terminale in
   una pagina che deve sembrare una boutique. Una sans neutra con le
   lettere un filo distanziate si legge uguale e non stona. */
.link{font-size:14px;letter-spacing:.01em;color:var(--oro);word-break:break-all}
.bollo{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;border:1px solid var(--bordo2);color:var(--muto)}
.bollo.viva{color:var(--verde);border-color:rgba(143,191,159,.45)}
/* da confermare: la cliente aspetta una risposta del salone */
.bollo.attesa{color:var(--oro);border-color:var(--oro)}
.rich b .bollo{font-size:9.5px;padding:2px 8px;margin-left:6px;vertical-align:2px}
.rich{border-top:1px solid var(--bordo2);padding:15px 0;text-align:left}
.rich:first-of-type{border-top:0}
.rich.letta{opacity:.45}
.rich b{font-weight:400;font-size:16px;color:var(--testo)}
.rich .oroT{color:var(--oro);font-size:14px}
.voceL{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--bordo2);min-height:56px}
.voceL .n{flex:1;text-align:left;font-size:15px;line-height:1.35}
.voceL input[type=text]{width:104px;min-width:104px;text-align:right;font-size:16px;padding:10px 2px}
.voceL label.sp{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-12px 0 -12px -10px;flex:0 0 auto;cursor:pointer}
.voceL input[type=checkbox]{width:22px;height:22px;accent-color:var(--oro)}
.voceL.spenta .n{color:var(--muto);text-decoration:line-through}
/* le frecce dell'ordine: piccole, una sopra l'altra, mai in mezzo al prezzo */
.voceL .frecce{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.voceL .frecce button{width:30px;height:24px;padding:0;border-radius:7px;border:1px solid var(--bordo2);
  background:transparent;color:var(--muto);font-size:10px;line-height:1;cursor:pointer}
.voceL .frecce button:hover:not(:disabled){color:var(--oro);border-color:var(--oro)}
.voceL .frecce button:disabled{opacity:.25;cursor:default}
.voceL .n small{font-size:12px}
/* la foto del look accanto alla richiesta */
.rich.conFoto{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
.rich .richTesto{min-width:0}
.lookFoto{width:76px;height:96px;border-radius:12px;overflow:hidden;background:var(--velo);
  border:1px solid var(--bordo2);display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.lookFoto img{width:100%;height:100%;object-fit:cover;display:block}
.lookFoto.vuota{cursor:default}
.lookFoto .min{font-size:10.5px;text-align:center;padding:4px}
.fotoGrande{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.88);display:flex;align-items:center;
  justify-content:center;padding:20px;cursor:zoom-out}
.fotoGrande[hidden]{display:none}
.fotoGrande img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.chip[hidden],.gruppoSp[hidden]{display:none}
/* LA RICHIESTA SI APRE (5/9): tutta la carta e' un bottone */
.rich[role=button]{cursor:pointer;border-radius:12px;margin:0 -8px;padding-left:8px;padding-right:8px;transition:background .15s}
.rich[role=button]:hover,.rich[role=button]:focus-visible{background:var(--velo);outline:0}
.rich[role=button]+.rich[role=button]{border-top-color:var(--bordo2)}
.rich .riga2 button{width:auto;margin:6px 0 0;min-height:36px;padding:0 14px;font-size:10.5px}
.rich .contoR{color:var(--testo);white-space:nowrap}
/* i totali in cima: incasso, ore, in agenda */
.richTot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 4px}
.richTot>div{padding:12px 12px 10px;border-radius:12px;background:var(--velo);border:1px solid var(--bordo2);min-width:0}
.richTot .eti{margin:0 0 4px;font-size:10px}
.richTot b{display:block;font-weight:500;font-size:17px;line-height:1.2;color:var(--testo);overflow-wrap:anywhere}
.richTot small{display:block;font-size:11.5px;color:var(--muto);margin-top:3px;line-height:1.3}
@media (max-width:520px){.richTot{grid-template-columns:1fr 1fr}.richTot>div:last-child{grid-column:1/-1}}
.filtroR{margin:8px 0 6px}
.filtroR .chip{min-height:36px;padding:0 13px;font-size:12.5px}
/* la scheda intera, sopra a tutto: come la foto, ma con dentro le parole */
.richDett{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.6);overflow-y:auto;padding:24px 14px;
  display:flex;align-items:flex-start;justify-content:center}
.richDett[hidden]{display:none}
.richDett .rdCarta{width:100%;max-width:560px;margin:0;background:var(--fondo2);box-shadow:0 24px 70px rgba(0,0,0,.45);animation:sali .3s cubic-bezier(.22,1,.36,1)}
body.sipario{overflow:hidden}
.rdTesta{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rdTesta .rdNome{font-family:var(--titolo);font-weight:500;font-size:22px;color:var(--testo);line-height:1.2;display:block}
.rdTesta .bollo{flex:0 0 auto;margin-top:4px}
.rdVoce{margin-top:6px}
.rdVoce .eti{margin:14px 0 2px}
.rdVoce p{color:var(--testo);margin:0}
.rdVoce p+p{margin-top:2px}
.rdVoce p.min{color:var(--muto)}
.rdVoce a{color:var(--oro);text-decoration:none;border-bottom:1px solid rgba(201,164,105,.4)}
.rdVoce .fasiA{display:grid;gap:2px;margin-top:6px;font-size:13px;color:var(--muto)}
.lookFoto.grande{width:100%;max-width:220px;height:auto;aspect-ratio:3/4;margin:14px auto 0}
.richDett .risposte{margin-top:16px}

.risposte{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--velo);border:1px solid var(--bordo2)}
.risposte .eti{margin:0 0 6px}
.risposte ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.risposte li{font-size:13.5px;line-height:1.4}
.risposte li b{font-weight:500;color:var(--testo)}
.risposte li .min{font-size:12.5px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.chips>*{scroll-snap-align:start}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--bordo2);
  background:transparent;color:var(--muto);font:inherit;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px}
.pastiglia{width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--anello);box-shadow:inset 0 -3px 6px rgba(0,0,0,.28)}
.chip.scelto{border-color:var(--oro);background:linear-gradient(120deg,var(--oro-chiaro),var(--oro));color:var(--su-accento);font-weight:500}
.miafoto{width:100%;max-width:210px;margin:16px auto 0;border-radius:14px;display:block;border:1px solid var(--bordo)}
.esiti{display:grid;gap:10px;margin-top:14px;grid-template-columns:1fr 1fr}
.esiti img{width:100%;border-radius:14px;display:block;border:1px solid var(--bordo2)}
.errore{margin-top:12px;color:var(--allarme);font-size:14px}
.bene{margin-top:12px;color:var(--verde);font-size:14px}
.metro{height:2px;border-radius:999px;background:var(--velo2);margin-top:8px;overflow:hidden}
.metro i{display:block;height:100%;background:linear-gradient(90deg,var(--oro-scuro),var(--oro))}
.lavoriS{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media(min-width:560px){.lavoriS{grid-template-columns:repeat(3,1fr)}}
.lavoroS{margin:0;position:relative;border:1px solid var(--bordo2);border-radius:14px;overflow:hidden}
.lavoroS img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--segnaposto)}
.lavoroS figcaption{font-size:11.5px;color:var(--muto);padding:7px 6px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viaS{position:absolute;top:6px;right:6px;min-height:32px;padding:0 10px;border-radius:999px;
  border:1px solid var(--bordo);background:rgba(11,10,9,.76);color:var(--muto);
  font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  backdrop-filter:blur(4px)}

/* le miniature delle mazzette: si passa dall'una all'altra senza perdere
   i colori gia' scelti */
.mazzetteFila{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:2px}
.mazzetteFila .minia{flex:0 0 auto;width:58px;height:58px;padding:0;margin:0;min-height:0;
  border:2px solid var(--bordo2);border-radius:10px;overflow:hidden;background:none;cursor:pointer}
.mazzetteFila .minia.scelta{border-color:var(--oro)}
.mazzetteFila .minia img{width:100%;height:100%;object-fit:cover;display:block}

.quadretti{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:14px}
.quadretto{border:1px solid var(--bordo2);border-radius:14px;padding:12px 10px;text-align:center}
.quadretto b{display:block;font-weight:400;font-size:21px;color:var(--oro);font-variant-numeric:tabular-nums}
.quadretto span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muto);line-height:1.3;display:block;margin-top:3px}
.tabella{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px}

/* la mazzetta: ogni tinta e' una riga con la pastiglia vera davanti */
.tintaRiga{display:grid;grid-template-columns:40px minmax(0,1fr) 34px;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--bordo2)}
.tintaRiga i{width:34px;height:34px;border-radius:50%;border:1px solid var(--bordo2);
  box-shadow:inset 0 -5px 9px rgba(0,0,0,.25)}
.tintaRiga input{margin:0;min-height:38px;font-size:14px}
.tintaRiga button{width:34px;min-height:34px;margin:0;padding:0;background:none;border:0;
  color:var(--allarme);font-size:17px;cursor:pointer}

/* le carte dei lavori: nome e famiglia si correggono sotto la foto */
.lavoroS .nomeS{width:100%;margin:6px 0 0;min-height:34px;font-size:12.5px;padding:4px 8px}
.lavoroS .famS{width:100%;margin:5px 0 0;min-height:34px;font-size:12px;padding:4px 6px;
  background:var(--fondo);color:var(--testo);border:1px solid var(--bordo2);border-radius:10px;font:inherit}

/* ---------- le chat ---------- */
.pallino{display:inline-block;min-width:18px;height:18px;line-height:18px;border-radius:999px;
  background:var(--allarme);color:var(--su-accento);font-size:10px;font-weight:600;margin-left:6px;padding:0 5px}
.pallino[hidden]{display:none}
.fili{display:grid;gap:8px}
.filoRiga{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--bordo2);border-radius:14px;cursor:pointer;
  background:var(--velo);text-align:left;font:inherit;color:inherit;width:100%;
  /* ⚠️ `minmax(0,1fr)` e non `1fr`: in un grid la colonna flessibile ha per
     difetto larghezza minima "il contenuto", e un messaggio lungo la spinge
     fuori dalla scheda invece di accorciarsi coi puntini. Si vede solo sul
     telefono, che è dove il parrucchiere guarda. */
  overflow:hidden}
.filoRiga:hover{border-color:var(--bordo)}
.filoRiga.attesa{border-color:rgba(217,139,106,.45)}
.filoRiga .bolla{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(201,164,105,.14);color:var(--oro)}
.filoRiga > span:nth-child(2){min-width:0;display:block}
.filoRiga .chi{color:var(--testo);font-size:14px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filoRiga .che{color:var(--muto);font-size:12.5px;margin-top:2px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filoRiga .quando{color:var(--muto);font-size:11px;text-align:right;white-space:nowrap}
.filoRiga .spento{color:var(--allarme);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

.discorso{margin-top:12px;max-height:52vh;overflow-y:auto;display:grid;gap:8px;padding-right:4px}
.bollaM{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;max-width:82%;
  white-space:pre-wrap;word-break:break-word}
.bollaM.cliente{background:var(--velo2);justify-self:start;border-bottom-left-radius:3px}
.bollaM.bot{background:rgba(201,164,105,.16);justify-self:end;border-bottom-right-radius:3px;color:var(--testo)}
.bollaM.salone{background:rgba(143,191,159,.16);justify-self:end;border-bottom-right-radius:3px;color:var(--testo)}
.bollaM .chiParla{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muto);margin-bottom:3px}
#filoTesto{width:100%;margin-top:12px;resize:vertical;min-height:56px}
.riga2{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap}
.interruttore{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muto);cursor:pointer}
.interruttore input{width:20px;height:20px;accent-color:var(--oro);margin:0}

/* ---------- il "?" che spiega ogni riquadro ---------- */
.chiedi{width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:1px solid var(--bordo);
  background:none;color:var(--oro);font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;margin-left:8px;
  vertical-align:middle;line-height:1;font-family:inherit}
.chiedi:hover{background:var(--velo2)}
.spiegaB{margin-top:10px;padding:12px 14px;border:1px solid var(--bordo);border-radius:14px;
  background:var(--velo);color:var(--testo);font-size:13px;line-height:1.55;text-align:left}
.spiegaB[hidden]{display:none}

/* ---------- l'agenda: la vista mese ---------- */
.frec{width:38px;min-height:38px;margin:0;padding:0;font-size:16px}
/* LE DUE VISTE DELL'AGENDA: Mese e Planning (19/09/2026) */
.vistaSel{display:inline-flex;gap:4px;margin-top:10px;padding:4px;border:1px solid var(--bordo2);border-radius:999px}
.vistaSel button{width:auto;margin:0;min-height:34px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--muto);font-size:13px;letter-spacing:.06em}
.vistaSel button.qui{background:linear-gradient(120deg,var(--b1),var(--b2));color:var(--su-oro)}
/* IL PLANNING: una colonna per giorno, le schede in fila */
.legendaP{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;font-size:12.5px;color:var(--muto)}
.legendaP i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.planning{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(124px,1fr);gap:8px;overflow-x:auto;
  padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.colP{scroll-snap-align:start;min-height:220px;border:1px solid var(--bordo2);border-radius:14px;background:var(--velo);
  padding:8px;display:flex;flex-direction:column;gap:8px;min-width:0}
.colP.oggiP{border-color:var(--oro)}
.colP.chiusaP{opacity:.5;background:none}
.testaP{width:100%;margin:0;min-height:0;padding:4px 6px 8px;border:0;border-bottom:1px solid var(--bordo2);border-radius:0;background:none;
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px;text-align:left;color:var(--testo)}
.testaP small{grid-column:1/-1;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muto)}
.testaP b{font-family:var(--titolo);font-weight:500;font-size:26px;line-height:1}
.testaP span{font-size:13px;color:var(--muto)}
.testaP em{grid-column:1/-1;font-style:normal;font-size:11.5px;color:var(--oro);margin-top:4px}
.colP.oggiP .testaP b{color:var(--oro)}
.cartP{width:100%;margin:0;min-height:0;padding:9px 10px 9px 12px;border:1px solid var(--bordo2);border-left:4px solid var(--c);
  border-radius:10px;background:var(--carta);display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;color:var(--testo);font-size:13.5px;line-height:1.3}
.cartP .oraP{font-family:var(--numeri,inherit);font-size:12px;color:var(--oro);letter-spacing:.02em}
.cartP b{font-weight:500;font-size:14.5px;overflow-wrap:anywhere}
.cartP .trP{font-size:12.5px;color:var(--muto)}
.cartP .chiP{font-size:12px;color:var(--muto);display:flex;align-items:center;gap:6px}
.cartP .chiP i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.cartP.attesaP{border-style:dashed;border-left-style:solid}
.cartP .statoP{margin-top:4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--allarme)}
.vuotoP{margin:4px 6px;font-size:12.5px}
@media (max-width:700px){ .planning{grid-auto-columns:78%} }
/* I 6 MESI: sei calendarietti, i giorni colorati per quanti appuntamenti */
.seiMesi{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
@media (max-width:420px){ .meseS{padding:8px} .giornoS{font-size:9.5px;border-radius:5px} .meseS header{flex-direction:column;gap:2px} }
.meseS{border:1px solid var(--bordo2);border-radius:14px;background:var(--velo);padding:10px}
.meseS header{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:8px}
.meseS header b{font-family:var(--titolo);font-weight:500;font-size:16px;color:var(--testo)}
.meseS header span{font-size:11px;color:var(--oro)}
.grigliaS{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.grigliaS em{font-style:normal;font-size:9.5px;text-align:center;color:var(--muto);letter-spacing:.06em}
.grigliaS .vuotaS{display:block}
.giornoS{width:100%;margin:0;min-height:0;aspect-ratio:1;padding:0;border:0;border-radius:6px;background:var(--velo2);
  color:var(--muto);font-size:10.5px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.giornoS.l1{background:rgba(201,164,105,.25);color:var(--testo)}
.giornoS.l2{background:rgba(201,164,105,.45);color:var(--testo)}
.giornoS.l3{background:rgba(201,164,105,.70);color:var(--su-oro)}
.giornoS.l4{background:var(--oro);color:var(--su-oro);font-weight:600}
.giornoS.chiusoS{opacity:.35}
.giornoS.oggiS{outline:2px solid var(--oro);outline-offset:1px}
.legendaS{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:11.5px;color:var(--muto)}
.legendaS i{width:14px;height:14px;border-radius:4px;background:var(--velo2)}
.legendaS i.l1{background:rgba(201,164,105,.25)} .legendaS i.l2{background:rgba(201,164,105,.45)}
.legendaS i.l3{background:rgba(201,164,105,.70)} .legendaS i.l4{background:var(--oro)}
.mese{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.mese .gT{font-family:var(--numeri,inherit);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muto);text-align:center;padding:4px 0 6px}
.cella{min-height:74px;border:1px solid var(--bordo2);border-radius:12px;background:var(--velo);
  padding:4px 4px 5px;text-align:left;cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:2px;font:inherit;color:inherit}
.cella:hover{border-color:var(--bordo)}
.cella.fuori{opacity:.38;background:none}
.cella.chiuso{background:none;cursor:default}
.cella.chiuso .nG{opacity:.4}
.cella.oggiC .nG{background:var(--oro);color:var(--su-accento);border-radius:50%;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.cella.sceltoC{border-color:var(--oro);box-shadow:0 0 0 1px var(--oro)}
/* i giorni chiusi a mano (17/9): righe in diagonale, si distinguono dalla
   domenica di sempre, che resta solo spenta */
.cella.chiusoF{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--velo2) 6px 8px);cursor:pointer}
.cella .chiusoT{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--allarme)}
.scegliendo .cella{cursor:pointer}
.scegliendo .cella.sceltoC{box-shadow:none;border-color:var(--bordo2)}
.cella.selC,.scegliendo .cella.selC{border-color:var(--allarme);box-shadow:0 0 0 2px var(--allarme)}
.barraChiusure{margin-top:10px;padding:12px 14px;border:1px solid var(--bordo);border-radius:14px;background:var(--velo)}
.barraChiusure[hidden],#btnChiudiGiorni[hidden]{display:none}
.barraChiusure button:disabled{opacity:.35;cursor:default}
.giornoChiuso{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;
  padding:10px 12px;border:1px solid var(--bordo);border-radius:12px;background:var(--velo);font-size:13px;color:var(--testo)}
.giornoChiuso b{font-weight:500;color:var(--allarme)}
.giornoChiuso button{width:auto;margin:0;padding:0 14px;min-height:36px}
.chiudiUno{width:auto;margin:0 0 12px;padding:0 14px;min-height:36px;font-size:13px}
.cella .nG{font-family:var(--numeri,inherit);font-size:11.5px;color:var(--testo);line-height:20px}
.cella .app1{font-size:9.5px;line-height:1.35;padding:1px 6px;border-radius:999px;
  background:rgba(201,164,105,.18);color:var(--testo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cella .app1 b{font-weight:500;color:var(--oro)}
.cella .piu{font-size:9px;color:var(--muto)}
@media(max-width:560px){
  /* sul telefono la cella respira meno: pallini e conta, come Google */
  .cella{min-height:52px}
  .cella .app1{display:none}
  .cella .palline{display:flex;gap:2px;flex-wrap:wrap}
  .cella .palline i{width:5px;height:5px;border-radius:50%;background:var(--oro)}
}
@media(min-width:561px){.cella .palline{display:none}}

/* ---------- l'agenda ---------- */
.giornoA{margin-top:14px}
.giornoA h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);
  font-weight:500;margin:0 0 6px;text-align:left}
/* ⚠️ LE RIGHE DELL'AGENDA SI LEGGONO, NON SI INDOVINANO. Erano a 13,5 e
   11,5 px con i puntini di sospensione: il nome della cliente e il
   trattamento venivano tagliati a meta' e bisognava allargare il telefono
   per capire chi veniva. Adesso il testo VA A CAPO invece di sparire, e
   le misure sono quelle di una cosa che si legge in piedi, in negozio. */
.appunt{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:11px;align-items:start;
  padding:12px 13px;border:1px solid var(--bordo2);border-radius:14px;margin-bottom:8px;
  background:var(--velo)}
.appunt .ora{font-family:var(--numeri,inherit);color:var(--oro);font-size:17px;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1.3}
.appunt > span:nth-child(2){min-width:0;display:block}
.appunt .chi2{color:var(--testo);font-size:16px;display:block;line-height:1.3}
.appunt .che2{color:var(--muto);font-size:13px;margin-top:3px;display:block;line-height:1.45}
/* le fasi: colore, posa, piega — e chi le fa */
.fasiA{margin-top:7px;display:grid;gap:3px}
.fasiA span{font-size:12px;color:var(--muto);display:block}
.fasiA b{font-weight:500;color:var(--oro)}
.fasiA .posaA{color:var(--muto);opacity:.75;font-style:normal}
.appunt button{width:auto;margin:0;min-height:30px;padding:0 10px;font-size:10px;
  background:none;border:1px solid var(--bordo2);color:var(--allarme);letter-spacing:.08em}
.orarioG{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center;margin-bottom:7px}
.orarioG span{color:var(--muto);font-size:12.5px}
.orarioG input{margin:0}

/* LE BARRE. Una classifica si legge con la lunghezza, non leggendo i numeri
   uno per uno: quale colore vince si deve vedere in mezzo secondo. */
.barre{margin-top:8px;display:grid;gap:7px}
.barra2{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  font-size:13px;position:relative;padding:6px 12px;border-radius:999px;overflow:hidden;
  background:var(--velo)}
.barra2 i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,
  rgba(201,164,105,.30),rgba(201,164,105,.10));z-index:0}
.barra2 span,.barra2 b{position:relative;z-index:1}
.barra2 span{color:var(--testo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra2 b{color:var(--oro);font-weight:400;font-variant-numeric:tabular-nums}

/* L'IMBUTO. Dove se ne vanno: e' il numero che dice cosa aggiustare. */
.imbuto{margin-top:8px;display:grid;gap:5px}
.gradino{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.gradino .n{color:var(--muto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gradino .v{height:16px;border-radius:12px;background:var(--velo);overflow:hidden}
.gradino .v i{display:block;height:100%;background:linear-gradient(90deg,var(--oro-scuro),var(--oro))}
.gradino .p{color:var(--testo);font-variant-numeric:tabular-nums;white-space:nowrap}
.gradino.perde .p{color:var(--allarme)}

/* LO STUDIO: le foto che ci hanno dato. */
.studio{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.pezzo{border:1px solid var(--bordo2);border-radius:12px;overflow:hidden;background:var(--velo)}
.pezzo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#171310;cursor:zoom-in}
.pezzo .sotto{padding:8px;font-size:11px;color:var(--muto);line-height:1.45;text-align:left}
.pezzo .sotto b{color:var(--testo);font-weight:400;display:block;font-size:12px}
.pezzo button{width:100%;margin:0;min-height:34px;font-size:10px;letter-spacing:.1em;
  background:none;border:0;border-top:1px solid var(--bordo2);color:var(--allarme);cursor:pointer}
.lente{position:fixed;inset:0;background:var(--lente);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lente img{max-width:100%;max-height:100%;border-radius:12px}
.lente[hidden]{display:none}
table{width:100%;min-width:340px;border-collapse:collapse;font-size:13.5px}
td,th{text-align:left;padding:8px 6px;border-bottom:1px solid var(--bordo2);color:var(--muto)}
th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--bordo2);
  color:var(--muto);font-size:11px;letter-spacing:.1em;opacity:.55}
@media(max-width:360px){
  body{padding-left:14px;padding-right:14px}
  .schede button{padding:0 12px;font-size:12.5px}
  .oro,.vuoto{letter-spacing:.12em;font-size:12px}
  .link{font-size:12.5px}
  .voceL input[type=text]{width:88px;min-width:88px}
}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

/* ===================== IL MENU A SINISTRA (dal 3/9/2026) =====================
   Sul telefono resta la riga di pillole di sempre, in alto. Sul computer
   diventa una colonna a sinistra, e tutto si allarga: il pannello si usa
   anche dal Mac della cassa, e a 660px con l'agenda del mese era un'app da
   telefono guardata da lontano. Lo stesso menu serve al pannello del salone
   (index.html) e alla casa dei soci (casa.html). */
.menu{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:24px 0 4px}
.menu button{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--bordo2);
  background:transparent;color:var(--muto);font:inherit;font-size:13px;letter-spacing:.08em;cursor:pointer}
.menu button.qui{border-color:var(--oro);background:linear-gradient(120deg,var(--oro-chiaro),var(--oro));color:var(--su-accento);font-weight:500}
.menu .esciM{color:var(--allarme);border-color:transparent}
.menu .marca,.menu .chiSono{display:none}
.socioBarra{border-color:rgba(217,139,106,.5);background:rgba(217,139,106,.08);font-size:14px;color:var(--testo)}
.socioBarra a{color:var(--oro)}
/* le schede dei clienti, nella casa */
.cliente{border:1px solid var(--bordo2);border-radius:16px;padding:16px 18px;margin-top:12px;background:var(--velo);text-align:left}
.cliente .nomeC{font-family:var(--titolo);font-weight:500;font-size:19px;color:var(--testo);line-height:1.2}
.cliente .codC{font-size:12.5px;color:var(--muto);margin-top:2px}
.cliente .numeriC{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;margin-top:12px}
.cliente .numeriC div{border:1px solid var(--bordo2);border-radius:12px;padding:8px 6px;text-align:center}
.cliente .numeriC b{display:block;font-weight:400;font-size:19px;color:var(--oro);font-variant-numeric:tabular-nums;line-height:1.2}
.cliente .numeriC b.attenzione{color:var(--allarme)}
.cliente .numeriC span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muto);display:block;margin-top:2px}
.cliente .azioniC{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cliente .azioniC button{width:auto;margin:0;min-height:40px;padding:0 14px;font-size:11.5px;letter-spacing:.1em}
.cliente .dettC{font-size:13px;color:var(--muto);margin-top:10px;line-height:1.55}
.cliente .dettC b{font-weight:500;color:var(--testo)}
.cerca{max-width:320px}

@media(min-width:900px){
  body.dentro{padding:0}
  body.dentro main{max-width:none}
  body.dentro footer{display:none}
  #pgDentro.qui{display:grid;grid-template-columns:256px minmax(0,1fr);text-align:left;min-height:100svh;animation:none}
  .menu{position:sticky;top:0;height:100svh;overflow-y:auto;flex-direction:column;flex-wrap:nowrap;
    justify-content:flex-start;align-items:stretch;gap:3px;margin:0;
    padding:calc(26px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    border-right:1px solid var(--bordo2);background:var(--velo)}
  .menu .marca,.menu .chiSono{display:block}
  .menu .marca{display:flex;align-items:center;gap:10px;padding:2px 10px 18px;font-family:var(--insegna);
    font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
  .menu .marca .discoMini{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(150deg,var(--oro-chiaro),var(--oro) 42%,var(--oro-scuro));box-shadow:0 6px 18px rgba(201,164,105,.2);
    color:var(--su-oro);font-size:15px;letter-spacing:-.01em;text-transform:none;line-height:1}
  .menu .chiSono{padding:0 10px 14px;border-bottom:1px solid var(--bordo2);margin-bottom:12px}
  .menu .chiSono b{display:block;font-family:var(--titolo);font-weight:500;font-size:19px;color:var(--testo);line-height:1.25;overflow-wrap:anywhere}
  .menu .chiSono span{display:block;font-size:11.5px;color:var(--muto);margin-top:4px;letter-spacing:.04em}
  .menu button{width:100%;text-align:left;border-radius:12px;border-color:transparent;font-size:15.5px;
    letter-spacing:.01em;min-height:46px;padding:0 14px}
  .menu button:hover{background:var(--velo2)}
  .menu button.qui{border-color:transparent}
  .menu .esciM{margin-top:auto}
  .contenuto{padding:32px 42px 80px;min-width:0}
  .contenuto>*{max-width:980px}
  #pgDentro .testata{display:none}
  .contenuto .carta{padding:26px 28px;margin-top:20px}
  .contenuto h2{font-size:23px}
  .contenuto p{font-size:16px}
  .contenuto .min{font-size:14px}
  .contenuto .eti{font-size:12px}
  .contenuto input,.contenuto textarea{font-size:16.5px}
  .contenuto .oro,.contenuto .vuoto{font-size:13.5px}
  .contenuto .appunt .chi2{font-size:17px}
  .contenuto .cella{min-height:96px}
  .contenuto .cella .app1{font-size:11px}
  .contenuto table{font-size:14.5px}
  .contenuto .quadretto b{font-size:25px}
  .contenuto .filoRiga .chi{font-size:15.5px}
  .contenuto .bollaM{font-size:15px}
  .contenuto .discorso{max-height:60vh}
  .contenuto .esiti{grid-template-columns:1fr 1fr 1fr}
  .temaB{right:22px;top:22px}
}

/* ---------- l'appuntamento segnato a mano (agenda) ---------- */
.nuovoApp{margin-top:12px;padding:12px 13px 14px;border:1px solid var(--bordo);border-radius:14px;background:var(--velo);text-align:left}
.nuovoApp .eti{margin-top:0}
.naGriglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin-top:6px}
.naGriglia label{display:block;min-width:0}
.naGriglia label.larga{grid-column:1 / -1}
.naGriglia label span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muto);margin-bottom:2px}
.naGriglia input,.naGriglia select{margin:0;min-height:40px;font-size:14px;width:100%}
.naGriglia select.famS{position:static;max-width:none}
.nuovoApp .riga2{margin-top:12px}
input[type=time],input[type=date]{color-scheme:dark}
:root[data-tema="chiaro"] input[type=time],:root[data-tema="chiaro"] input[type=date]{color-scheme:light}
@media (prefers-color-scheme: light){:root:not([data-tema="scuro"]) input[type=time],:root:not([data-tema="scuro"]) input[type=date]{color-scheme:light}}

/* ---------- il catalogo dei colori ---------- */
.catFam{margin-top:10px;text-align:left}
.catEti{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muto);margin-bottom:5px}
.catChips{display:flex;flex-wrap:wrap;gap:6px}
.catChip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:4px 12px 4px 5px;border-radius:999px;
  border:1px solid var(--bordo2);background:transparent;color:var(--muto);font:inherit;font-size:13px;cursor:pointer;transition:.15s ease}
.catChip i{width:22px;height:22px;border-radius:50%;border:1px solid var(--anello);box-shadow:inset 0 -3px 6px rgba(0,0,0,.28);flex:0 0 auto}
.catChip.scelto{border-color:var(--oro);color:var(--testo);background:var(--velo2)}
.catChip.scelto::after{content:'✓';color:var(--oro);font-size:12px;margin-left:2px}
input[type=color]{width:48px;min-width:48px;height:40px;padding:2px 3px;margin:0;border-radius:10px;border:1px solid var(--bordo2);background:var(--velo);cursor:pointer}
.naGriglia select{appearance:none;-webkit-appearance:none;background:var(--velo);border:0;border-bottom:1px solid var(--bordo);
  border-radius:10px 10px 0 0;color:var(--testo);font:inherit;font-size:14px;padding:0 10px}
.naGriglia select:focus{outline:0;border-bottom-color:var(--oro)}
.naGriglia select option{color:#181410;background:#F6F1E9}
.naChips{flex-wrap:wrap;overflow:visible;padding:4px 0 2px}
.naChips .chip{min-height:36px;font-size:13px;padding:0 13px}

/* CHI LEGGE OGNI PAGINA (20/09/2026). Marco: «ogni pagina deve avere una bio
   corrispondente perfetta»: il pannello è del parrucchiere, non della cliente. */
.chiPer{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);margin:6px 0 0}

/* ---------- l'indisponibilità (23/09): la carta in evidenza dell'agenda ---------- */
.carta.indisp{border:1.5px solid var(--oro);box-shadow:0 0 0 4px color-mix(in srgb,var(--oro) 14%,transparent)}
.carta.indisp h2{color:var(--oro)}
.inRiga{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--bordo)}
.inRiga button{width:auto;padding:0 14px;margin:0;min-height:36px;flex:none}
.inOra{font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--allarme);margin-left:6px}
#indFascia[hidden]{display:none}

/* ---------- «Chi fa cosa» (23/09): la settimana come l'agenda di carta ---------- */
#persone[hidden]{display:none}
.cfFila{display:flex;overflow-x:auto;border:1px solid var(--bordo);border-radius:14px;background:var(--velo);-webkit-overflow-scrolling:touch}
.cfOre{position:sticky;left:0;z-index:5;flex:none;width:34px;background:var(--fondo2);border-right:1px solid var(--bordo)}
.cfTesta{height:40px}
.cfNomi{height:28px}
.cfOre .cfCorpo{position:relative}
.cfOre .cfCorpo span{position:absolute;right:6px;transform:translateY(-50%);font-size:11px;color:var(--muto);font-variant-numeric:tabular-nums}
.cfOre .cfCorpo span:first-child{transform:none}
.cfGiorno{flex:none;width:calc(var(--n) * 104px);border-right:1px solid var(--bordo2)}
.cfGiorno .cfTesta{display:block;width:100%;margin:0;border:0;border-radius:0;background:var(--fondo2);color:var(--testo);font-size:13px;text-align:left;padding:0 10px;min-height:40px;cursor:pointer;letter-spacing:0;text-transform:none}
.cfGiorno .cfTesta b{font-family:'Bodoni Moda',serif;font-weight:600;font-size:16px}
.cfGiorno .cfTesta em{font-style:normal;color:var(--muto);font-size:12px}
.cfGiorno.oggi .cfTesta{background:color-mix(in srgb,var(--oro) 22%,var(--fondo2))}
.cfGiorno .cfNomi{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.cfGiorno .cfNomi span{font-size:11.5px;font-weight:600;padding:6px 6px 0;border-top:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfGiorno .cfCorpo{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.cfGiorno .cfCorpo hr{position:absolute;left:0;right:0;margin:0;border:0;border-top:1px dashed var(--bordo);z-index:1;pointer-events:none}
.cfCol{position:relative;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--velo2) 6px 8px);border-right:1px solid var(--bordo)}
.cfCol:last-child{border-right:0}
.cfTurno{position:absolute;left:0;right:0;background:var(--fondo)}
.cfVia{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--allarme) 16%,transparent) 0 6px,transparent 6px 10px);z-index:2}
.cfVia b{display:block;font-size:10.5px;font-weight:600;color:var(--allarme);padding:4px 5px;text-transform:uppercase;letter-spacing:.06em}
.cfApp{position:absolute;left:3px;right:3px;z-index:3;margin:0;min-height:0;width:auto;padding:4px 6px;border:0;border-left:4px solid var(--c);border-radius:8px;
  background:color-mix(in srgb,var(--c) 30%,var(--fondo));color:var(--testo);text-align:left;overflow:hidden;cursor:pointer;letter-spacing:0;text-transform:none;font-size:12px;line-height:1.25}
.cfApp b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfApp span{display:block;color:var(--muto);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfApp.corto span{display:none}
.cfGiorno.chiuso .cfCorpo{opacity:.6}

/* un giorno dorato, uno argentato (23/09, Marco): tutta la colonna, dalla testa in fondo */
.cfGiorno.cfOro{--tinta:#C9A469;--tinta2:#E7CE9F}
.cfGiorno.cfArgento{--tinta:#AEB5BF;--tinta2:#E3E7EC}
:root[data-tema="chiaro"] .cfGiorno.cfOro{--tinta:#A9864A;--tinta2:#D9BC84}
:root[data-tema="chiaro"] .cfGiorno.cfArgento{--tinta:#8A929D;--tinta2:#C9CFD6}
@media (prefers-color-scheme: light){
  :root:not([data-tema="scuro"]) .cfGiorno.cfOro{--tinta:#A9864A;--tinta2:#D9BC84}
  :root:not([data-tema="scuro"]) .cfGiorno.cfArgento{--tinta:#8A929D;--tinta2:#C9CFD6}
}
.cfGiorno{border-right:2px solid var(--tinta)}
.cfGiorno .cfTesta{background:linear-gradient(120deg,var(--tinta2),var(--tinta));color:#15100A}
.cfGiorno .cfTesta em{color:#15100A;opacity:.7}
.cfGiorno.oggi .cfTesta{box-shadow:inset 0 -4px 0 #15100A}
.cfGiorno .cfNomi{background:linear-gradient(180deg,color-mix(in srgb,var(--tinta) 34%,var(--fondo)),color-mix(in srgb,var(--tinta) 18%,var(--fondo)))}
.cfGiorno .cfTurno{background:linear-gradient(180deg,color-mix(in srgb,var(--tinta) 26%,var(--fondo)),color-mix(in srgb,var(--tinta) 12%,var(--fondo)))}
.cfGiorno .cfCol{background-color:color-mix(in srgb,var(--tinta) 9%,var(--fondo))}
.cfGiorno .cfApp{background:color-mix(in srgb,var(--c) 38%,var(--fondo));box-shadow:0 1px 0 rgba(0,0,0,.25)}
/* altezze fisse: la colonna delle ore e i giorni devono combaciare al pixel */
.cfFila .cfTesta{height:40px;min-height:40px;box-sizing:border-box}
.cfFila .cfNomi{height:28px;box-sizing:border-box;overflow:hidden}
.cfGiorno .cfNomi span{text-transform:none;letter-spacing:0;color:var(--testo);font-size:12px;line-height:1;padding:6px 6px 0;margin:0;box-sizing:border-box}

/* ---------- il tasto Annulla (23/09): dopo ogni modifica, e la storia ---------- */
.annullaBarra{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;
  max-width:calc(100vw - 32px);padding:10px 10px 10px 18px;border-radius:999px;background:var(--fondo2);border:1px solid var(--oro);
  box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:14px}
.annullaBarra[hidden],.storiaTasto[hidden],.storiaVelo[hidden]{display:none}
.annullaBarra span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.annullaBarra button{flex:none;width:auto;margin:0;min-height:36px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(120deg,var(--b1,#E7CE9F),var(--b2,#C9A469));color:var(--su-oro,#15100A);font-weight:600;letter-spacing:0;text-transform:none}
.storiaTasto{position:fixed;right:16px;bottom:18px;z-index:50;width:auto;margin:0;min-height:38px;padding:0 14px;border-radius:999px;
  background:var(--fondo2);color:var(--testo);border:1px solid var(--bordo2);cursor:pointer;font-size:13px;letter-spacing:0;text-transform:none}
.storiaVelo{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.storiaFoglio{text-align:left;width:min(560px,100%);max-height:80vh;overflow:auto;background:var(--fondo);border:1px solid var(--bordo2);border-radius:18px 18px 0 0;padding:18px 16px 24px}
@media (min-width:700px){.storiaVelo{align-items:center}.storiaFoglio{border-radius:18px}}

/* ---------- l'avviso arrabbiato del planning (23/09) ---------- */
.arrabbiato{margin-top:12px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--allarme);background:color-mix(in srgb,var(--allarme) 10%,transparent);text-align:left}
.arrabbiato .faccia{font-size:40px;line-height:1;margin-bottom:6px}
.arrabbiato ul{margin:8px 0 10px;padding-left:18px}

/* IL CONTATTO NELL'AGENDA (26/09/2026): il numero si tocca e parte la
   chiamata, l'email apre la posta. Prima l'appuntamento lo conteneva ma
   non lo faceva vedere, e il salone restava senza numero in mano. */
.rigaContatto{display:block;margin-top:4px}
.contattoApp{display:inline-block;font-size:13.5px;color:var(--oro);text-decoration:none;border:1px solid var(--bordo);border-radius:10px;padding:3px 10px}
.contattoApp:hover{border-color:var(--oro)}