/* ==========================================================
   PHOTOGRAPHY CRM — Design system «Fresh Cloud»
   Token-based, tema chiaro/scuro, mobile-first drawer.
   I nomi delle classi sono compatibili con i template esistenti.

   Regola: da qui in giu' NON si scrivono colori a mano, si usa
   var(--x). Le due sole eccezioni ammesse sono il bianco/nero
   sopra a un fondo pieno -- e per quello ci sono i token --on-*,
   che cambiano da soli fra tema chiaro e scuro -- e le palette
   d'autore delle gallerie (.gal-tema-*), che sono una scelta
   artistica venduta al cliente, non il colore del CRM.
   ========================================================== */

/* ---------- il carattere, dentro al progetto ----------
   Prima c'era un @import da fonts.googleapis.com: senza rete i
   caratteri non arrivavano e l'impaginazione cambiava sotto le mani.
   Ora Albert Sans sta in /static/fonts/. E' un carattere "variabile":
   un solo file copre tutti i pesi da 400 a 800, per questo i file
   sono quattro (dritto/corsivo x latino/latino esteso) e non dodici.
   font-display:swap -> il testo si legge subito col carattere di
   sistema e poi cambia, invece di restare invisibile. ---------- */
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/static/fonts/albert-sans-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/static/fonts/albert-sans-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Albert Sans';font-style:italic;font-weight:400 800;font-display:swap;
  src:url('/static/fonts/albert-sans-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Albert Sans';font-style:italic;font-weight:400 800;font-display:swap;
  src:url('/static/fonts/albert-sans-var-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- TEMA CHIARO ----------
   I valori sono scritti come numeri fissi e non con color-mix(): un
   color-mix() che il browser non capisce non ricade sul valore
   precedente, sparisce e basta, e il colore verrebbe a mancare.
   Accanto a ogni tinta, fra parentesi, il contrasto misurato. ---- */
:root{
  /* verde del marchio */
  --accent:#0e7038;              /* bianco sopra: 6.19:1 */
  --accent-2:#008843;            /* fine del gradiente, bianco sopra: 4.56:1 */
  --accent-ink:#0a5629;          /* accento piu' scuro: passaggio del mouse, testo */
  --accent-soft:#e2eee7;         /* accento sopra: 5.19:1 */
  --accent-bright:#00aa54;       /* SOLO decorazione (pallini, alone): mai testo sopra */
  --accent-bright-soft:#d9f2e5;
  --logo-gradient:linear-gradient(135deg,#0e7038,#008843);

  /* il marchio non cambia col tema: serve alle gallerie a fondo bianco */
  --brand:#0e7038; --brand-2:#008843; --brand-ink:#0a5629;
  --on-accent-scuro:#12120f;   /* per i temi galleria a tinta chiara */
  /* Palette FISSE, che non seguono il tema del dispositivo di chi
     guarda: le gallerie possono forzare il fondo chiaro o scuro, e in
     quel caso i colori non devono cambiare sotto ai piedi. I valori
     sono gli stessi del chiaro e dello scuro qui sopra. */
  --fisso-c-ground:#ededed; --fisso-c-surface:#fbfbfb; --fisso-c-sunken:#f4f4f4;
  --fisso-c-ink:#494949; --fisso-c-ink-strong:#353535; --fisso-c-ink-2:#5c5c5c;
  --fisso-c-ink-3:#676767; --fisso-c-line:#dbdbdb; --fisso-c-line-soft:#e8e8e8;
  --fisso-c-line-strong:#858585;
  --fisso-s-ground:#12120f; --fisso-s-surface:#1c1c18; --fisso-s-sunken:#23231e;
  --fisso-s-ink:#ecece8; --fisso-s-ink-strong:#f7f7f4; --fisso-s-ink-2:#a8a8a0;
  --fisso-s-ink-3:#8a8a83; --fisso-s-line:#33332c; --fisso-s-line-soft:#2a2a24;
  --fisso-s-line-strong:#767670;

  /* superfici */
  --ground:#ededed;              /* fondo della pagina */
  --surface:#fbfbfb;             /* riquadri, finestre */
  --surface-2:#f4f4f4;           /* aree incassate, passaggio del mouse */
  --sunken:#f4f4f4;
  --card:var(--surface);         /* ponte: nome vecchio, stessa superficie */
  --bg-soft:var(--surface-2);    /* ponte */
  --track:var(--surface-2);      /* fondo delle barre di avanzamento */

  /* inchiostri */
  --ink:#494949;                 /* su riquadro 8.70:1 · su pagina 7.69:1 */
  --ink-strong:#353535;          /* titoli, 11.85:1 */
  --ink-1:var(--ink);            /* ponte */
  --ink-2:#5c5c5c;               /* 6.46:1 */
  --ink-3:#676767;               /* didascalie: 5.47:1 su riquadro, 4.83:1 su pagina,
                                    4.60:1 anche sopra ai fondi tenui colorati */

  /* bordi */
  --line:#dbdbdb;                /* bordo morbido, decorativo */
  --line-soft:#e8e8e8;
  --line-strong:#858585;         /* bordo che DEVE vedersi: campi, comandi.
                                    3.57:1 su riquadro, 3.15:1 anche sul fondo pagina */
  --border-color:var(--line);    /* ponte */

  /* semantici: --x e' la tinta, --x-bg il fondo tenue,
     --x-ink il testo da mettere sopra a quel fondo tenue,
     --on-x il testo da mettere sopra alla tinta piena */
  --link:#1257c9; --link-soft:#e3ebf9;
  --ok:#0e7038;   --ok-bg:#ddebe3;   --ok-ink:#0e7038;    /* 5.03:1 */
  --warn:#d95b00; --warn-bg:#fae8db; --warn-ink:#b24b00;  /* 4.52:1 */
  --bad:#c0342d;  --bad-bg:#f7e7e6;  --bad-ink:#c0342d;   /* 4.65:1 */
  --idle:#5c5c5c; --idle-bg:#efefef; --idle-ink:#5c5c5c;  /* 5.82:1 */
  --info:#1257c9; --info-bg:#e3ebf9; --info-ink:#1257c9;  /* 5.42:1 */
  --danger:var(--bad);           /* ponte */

  /* testo sopra ai fondi pieni. Nel tema chiaro e' bianco ovunque
     tranne che sull'arancione, troppo chiaro per reggere il bianco. */
  --on-accent:#ffffff;           /* 6.19:1 */
  --on-ok:#ffffff;               /* 6.19:1 */
  --on-warn:#ffffff;             /* usare --warn-solid come fondo */
  --warn-solid:#c55300;          /* arancione scurito quanto basta: bianco 4.55:1 */
  --on-bad:#ffffff;              /* 5.57:1 */
  --on-info:#ffffff;             /* 6.50:1 */
  --on-idle:#ffffff;             /* 6.69:1 */

  /* la barra laterale: da oggi e' chiara, non piu' scura */
  --rail:#fbfbfb;
  --rail-ink:#5c5c5c;            /* voci di menu, 6.46:1 */
  --rail-dim:#676767;            /* titoli di sezione, 5.47:1 */
  --rail-line:#e8e8e8;           /* le righe divisorie dentro la barra */
  --rail-hover:#f4f4f4;

  /* carattere */
  --font-sans:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-display:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* geometria */
  --r-s:10px; --r-m:14px; --r-l:18px; --r-x:26px; --r-gg:999px;
  --shadow-sm:0 1px 3px 0 rgba(32,32,32,.08),0 1px 2px -1px rgba(32,32,32,.08);
  --shadow:0 1px 3px 0 rgba(32,32,32,.08),0 10px 24px -8px rgba(32,32,32,.14);
  --shadow-lg:0 24px 48px -16px rgba(32,32,32,.22);
  --rail-w:244px; --tr:.18s cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}

/* ---------- TEMA SCURO ----------
   Stessi nomi, stessi ruoli. Cambia una cosa importante: nel tema
   scuro l'accento e' un verde CHIARO, quindi il testo sopra al pieno
   non e' piu' bianco ma quasi nero -- e' a questo che servono i
   token --on-*. Il bianco sul verde chiaro darebbe 2.25:1, illeggibile. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --accent:#4cc27f; --accent-2:#6fdc96; --accent-ink:#8fe0ac; --accent-soft:#27412f;
  --accent-bright:#6fdc96; --accent-bright-soft:#2b3f2f;
  --logo-gradient:linear-gradient(135deg,#4cc27f,#6fdc96);
  --ground:#12120f; --surface:#1c1c18; --surface-2:#23231e; --sunken:#23231e;
  --ink:#ecece8;                 /* 14.43:1 */
  --ink-strong:#f7f7f4;          /* 15.92:1 */
  --ink-2:#a8a8a0;               /* 7.14:1 */
  --ink-3:#8a8a83;               /* 4.92:1 su riquadro, 4.54:1 anche sulle
                                    aree incassate (intestazioni di tabella) */
  --line:#33332c; --line-soft:#2a2a24; --line-strong:#767670;  /* 3.45:1 sul fondo piu' chiaro */
  --link:#7aa7ff; --link-soft:#313b4b;
  --ok:#4cc27f;   --ok-bg:#27412f;   --ok-ink:#4cc27f;    /* 4.95:1 */
  --warn:#ff9b45; --warn-bg:#4e3822; --warn-ink:#ff9b45;  /* 5.24:1 */
  --bad:#ff7a72;  --bad-bg:#492f2a;  --bad-ink:#ff7a72;   /* 4.80:1 */
  --idle:#a8a8a0; --idle-bg:#353530; --idle-ink:#a8a8a0;  /* 5.15:1 */
  --info:#7aa7ff; --info-bg:#313b4b; --info-ink:#7aa7ff;  /* 4.74:1 */
  --warn-solid:#ff9b45;
  --on-accent:#12120f; --on-ok:#12120f; --on-warn:#12120f;
  --on-bad:#12120f; --on-info:#12120f; --on-idle:#12120f;  /* 7.40-8.96:1 */
  --rail:#1c1c18; --rail-ink:#a8a8a0; --rail-dim:#8a8a83;
  --rail-line:#2a2a24; --rail-hover:#23231e;
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.4);
  --shadow:0 1px 3px 0 rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --accent:#4cc27f; --accent-2:#6fdc96; --accent-ink:#8fe0ac; --accent-soft:#27412f;
  --accent-bright:#6fdc96; --accent-bright-soft:#2b3f2f;
  --logo-gradient:linear-gradient(135deg,#4cc27f,#6fdc96);
  --ground:#12120f; --surface:#1c1c18; --surface-2:#23231e; --sunken:#23231e;
  --ink:#ecece8; --ink-strong:#f7f7f4; --ink-2:#a8a8a0; --ink-3:#8a8a83;
  --line:#33332c; --line-soft:#2a2a24; --line-strong:#767670;
  --link:#7aa7ff; --link-soft:#313b4b;
  --ok:#4cc27f;   --ok-bg:#27412f;   --ok-ink:#4cc27f;
  --warn:#ff9b45; --warn-bg:#4e3822; --warn-ink:#ff9b45;
  --bad:#ff7a72;  --bad-bg:#492f2a;  --bad-ink:#ff7a72;
  --idle:#a8a8a0; --idle-bg:#353530; --idle-ink:#a8a8a0;
  --info:#7aa7ff; --info-bg:#313b4b; --info-ink:#7aa7ff;
  --warn-solid:#ff9b45;
  --on-accent:#12120f; --on-ok:#12120f; --on-warn:#12120f;
  --on-bad:#12120f; --on-info:#12120f; --on-idle:#12120f;
  --rail:#1c1c18; --rail-ink:#a8a8a0; --rail-dim:#8a8a83;
  --rail-line:#2a2a24; --rail-hover:#23231e;
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.4);
  --shadow:0 1px 3px 0 rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;color:var(--ink-strong);
  text-wrap:balance;letter-spacing:-.01em;line-height:1.2}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.num,table td,.stat-card-value{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.app-container{display:flex;min-height:100vh}
.sidebar{width:var(--rail-w);background:var(--rail);color:var(--rail-ink);flex-shrink:0;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;
  transition:transform var(--tr);border-right:1px solid var(--rail-line)}
.sidebar-header{padding:20px 18px 18px;display:flex;align-items:center;
  border-bottom:1px solid var(--rail-line)}
/* Il marchio prende il colore del testo della barra tramite currentColor:
   una sola immagine per tema chiaro e scuro, invece di due file. */
.sidebar-marchio{display:block;width:100%;height:auto;max-width:190px;color:var(--ink-strong);
  --logo-negativo:var(--rail)}
.sidebar-logo{width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:var(--logo-gradient);color:var(--on-accent);box-shadow:var(--shadow-sm);
  display:grid;place-items:center;font-size:17px}
.sidebar-title h1{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--ink-strong);line-height:1.15}
.sidebar-subtitle{font-size:11px;color:var(--rail-dim);letter-spacing:.04em;
  text-transform:uppercase;margin-top:2px;font-weight:700}
.sidebar-nav{padding:14px 10px;flex:1;overflow-y:auto}
.nav-section{margin-bottom:4px}
.nav-section-title{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rail-dim);padding:13px 10px 6px;font-weight:800}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:12px;
  color:var(--rail-ink);text-decoration:none;font-size:14px;font-weight:700;
  transition:background .15s,color .15s}
.nav-item:hover{background:var(--rail-hover);color:var(--ink-strong);text-decoration:none}
.nav-item.active{background:var(--accent-soft);color:var(--accent)}
.nav-icon{width:18px;text-align:center;font-size:15px;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--bad-bg);color:var(--bad-ink);font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:var(--r-gg);font-variant-numeric:tabular-nums}
.nav-item.active .nav-badge{background:var(--accent);color:var(--on-accent)}
/* Il pallino "c'e' una chat in corso sul sito adesso" (sezione Chatbot):
   diverso dal nav-badge numerico, e' un segnale acceso/spento, non un
   conteggio. Se compare insieme al nav-badge, il margin-left:auto di
   entrambi li mette in fila sulla destra, il pallino prima del numero. */
.nav-badge-live{margin-left:auto;width:9px;height:9px;border-radius:50%;
  background:var(--accent-bright);animation:nav-badge-live-pulsa 1.6s infinite}
.nav-item.active .nav-badge-live{background:var(--accent)}
@keyframes nav-badge-live-pulsa{0%,100%{opacity:1}50%{opacity:.35}}
.sidebar-footer{padding:12px 14px;border-top:1px solid var(--rail-line)}

.main-content{flex:1;margin-left:var(--rail-w);min-width:0;display:flex;flex-direction:column}
.top-bar{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line-soft);padding:14px 26px;display:flex;align-items:center;gap:14px}
@supports (backdrop-filter:blur(10px)){
  .top-bar{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px)}}
.page-title{font-size:18px;font-family:var(--font-display);font-weight:800;
  color:var(--ink-strong);letter-spacing:-.01em}
.page-subtitle{font-size:12.5px;color:var(--ink-3);margin-top:1px;font-weight:600}
.page-header{margin-bottom:20px}
.page-header .page-title{font-size:24px;letter-spacing:-.02em}
.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
/* Quanto spazio usa la pagina. Il limite c'e' apposta: su uno schermo
   enorme una riga di testo lunga tutto il monitor non si legge, l'occhio
   perde il capo riga. Ma 1180 era troppo stretto e su un portatile si
   vedeva una fascia vuota a destra. 1600 riempie tutto il portatile
   (fino a 1844 pixel di finestra non taglia niente) e tiene il limite
   solo sui monitor davvero grandi, dove la pagina si centra invece di
   restare appiccicata a sinistra. */
.content-area{padding:26px;max-width:1600px;width:100%;margin-inline:auto}

.mobile-menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:12px;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;padding:0}
.mobile-menu-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.mobile-menu-toggle span::before,.mobile-menu-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);transition:transform var(--tr)}
.mobile-menu-toggle span::before{top:-5.5px}
.mobile-menu-toggle span::after{top:5.5px}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,16,.42);z-index:55}
.mobile-overlay.active{display:block}

/* ---------- card ---------- */
.card,.content-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);box-shadow:var(--shadow-sm);margin-bottom:14px;overflow:hidden}
.card-header{padding:15px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-title{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--ink-strong)}
.card-body{padding:18px}
.card-footer{padding:14px 18px;border-top:1px solid var(--line-soft);display:flex;gap:9px}

/* ---------- stat cards ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:18px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.stat-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.stat-card.is-ok::after{background:var(--ok)}
.stat-card.is-warn::after{background:var(--warn)}
.stat-card.is-bad::after{background:var(--bad)}
.stat-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat-card-title{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800}
.stat-card-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  flex-shrink:0;background:var(--accent-soft);color:var(--accent);font-size:18px}
.stat-card.is-ok .stat-card-icon{background:var(--ok-bg);color:var(--ok-ink)}
.stat-card.is-warn .stat-card-icon{background:var(--warn-bg);color:var(--warn-ink)}
.stat-card.is-bad .stat-card-icon{background:var(--bad-bg);color:var(--bad-ink)}
.stat-card-value{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--ink-strong);
  line-height:1;margin:8px 0 3px;letter-spacing:-.02em}
.stat-card-label,.stat-card-sub{font-size:12px;color:var(--ink-2);margin-top:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:9px 16px;border-radius:12px;font-size:13.5px;font-weight:800;
  cursor:pointer;transition:background .15s,border-color .15s,transform .05s;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--logo-gradient);border-color:transparent;color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-ink);border-color:transparent;color:var(--on-accent)}
.btn-outline{background:transparent}
.btn-danger{background:var(--bad);border-color:var(--bad);color:var(--on-bad)}
.btn-danger:hover{filter:brightness(.92)}
.btn-success{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.btn-sm{padding:5px 11px;font-size:12.5px;border-radius:10px}
.btn-lg{padding:13px 20px;font-size:15px;border-radius:14px}
.btn-block{width:100%}

/* ---------- forms ---------- */
.form-group{margin-bottom:15px;display:flex;flex-direction:column;gap:5px}
.form-label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.form-input,.form-select,.form-textarea{width:100%;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);border-radius:12px;
  padding:10px 12px;font-size:14px;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
.form-textarea{min-height:88px;resize:vertical;font-family:inherit}
.form-select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%23888888' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  /* Senza una dimensione dichiarata il browser allarga il disegnino
     fino a riempire l'altezza del campo: era per questo che la
     freccia sembrava enorme. */
  background-size:11px 11px;padding-right:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-hint{font-size:11.5px;color:var(--ink-3)}
.form-check{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:12px;cursor:pointer;font-size:13.5px;font-weight:600;transition:var(--tr)}
.form-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.form-check:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}

/* ---------- table ---------- */
.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
table,.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,table th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;padding:12px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--sunken)}
.table td,table td{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.table tbody tr:last-child td,table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover,table tbody tr:hover{background:var(--surface-2)}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;
  padding:4px 10px;border-radius:var(--r-gg);background:var(--idle-bg);color:var(--idle-ink);white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-success,.status-accepted{background:var(--ok-bg);color:var(--ok-ink)}
.badge-warning,.status-pending{background:var(--warn-bg);color:var(--warn-ink)}
.badge-danger,.status-rejected{background:var(--bad-bg);color:var(--bad-ink)}
.badge-info{background:var(--info-bg);color:var(--info-ink)}
.badge-idle{background:var(--idle-bg);color:var(--idle-ink)}

/* ---------- il badge dei crediti AI, accanto a ogni pulsante "Genera
   con AI" (vedi components/crediti-ai-badge.js). Per questa installazione
   e' sempre "Illimitato": lo stile resta neutro apposta, non un colore
   d'allarme che farebbe pensare a un limite vicino. ---------- */
.crediti-ai-badge{display:inline-flex;align-items:center;font-size:11px;
  font-weight:600;padding:2px 9px;border-radius:20px;
  background:var(--idle-bg);color:var(--idle-ink);white-space:nowrap}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(10,10,17,.5)}
.modal.active,.modal[style*="flex"]{display:flex}
.modal-content{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);width:100%;max-width:560px;box-shadow:var(--shadow-lg);
  max-height:88vh;overflow-y:auto}
.modal-header{padding:18px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-header h2,.modal-header h3{font-size:18px}
.modal-body{padding:18px}
.modal-footer{padding:14px 18px;border-top:1px solid var(--line-soft);display:flex;gap:9px;justify-content:flex-end}
.modal-close{background:none;border:0;font-size:21px;cursor:pointer;color:var(--ink-3);line-height:1;padding:4px}
.modal-close:hover{color:var(--ink)}

/* ---------- empty / loading ---------- */
.empty-state{padding:44px 18px;text-align:center}
.empty-state-icon{font-size:32px;opacity:.4;margin-bottom:10px}
.empty-state-title{font-family:var(--font-display);font-size:16px;font-weight:800;margin-bottom:5px}
.empty-state-text{font-size:13.5px;color:var(--ink-3);max-width:38ch;margin:0 auto}
.loading-container{display:flex;align-items:center;justify-content:center;padding:44px;gap:11px;color:var(--ink-3)}
.spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- alert ---------- */
.alert{padding:11px 14px;border-radius:var(--r-s);font-size:13.5px;margin-bottom:14px;
  border-left:3px solid var(--accent);background:var(--sunken)}
.alert-success{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink)}
.alert-warning{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn-ink)}
.alert-danger,.alert-error{border-left-color:var(--bad);background:var(--bad-bg);color:var(--bad-ink)}
.alert-info{border-left-color:var(--info);background:var(--info-bg);color:var(--info-ink)}

/* ---------- calendar (vista mese) ---------- */
.calendar-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.calendar-nav{display:flex;gap:6px;align-items:center}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.calendar-day-header{background:var(--sunken);padding:9px 6px;text-align:center;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.calendar-day{background:var(--surface);min-height:92px;padding:7px;position:relative}
.calendar-day.other-month{background:var(--sunken);opacity:.55}
.calendar-day.today{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.calendar-day-number{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:4px}
.calendar-day.today .calendar-day-number{background:var(--accent);color:var(--on-accent);border-radius:50%;
  width:24px;height:24px;display:grid;place-items:center}
.calendar-event{background:var(--accent-soft);color:var(--accent-ink);border-left:3px solid var(--accent);
  border-radius:4px;padding:3px 6px;font-size:11px;font-weight:600;margin-bottom:3px;
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-event:hover{filter:brightness(.96)}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.legend-color{width:11px;height:11px;border-radius:3px;flex-shrink:0}


/* ---------- pulsanti a segmenti (viste calendario, filtri) ----------
   ATTENZIONE alla cascata: ".seg-group .btn" ha specificita' 0-2-0 e batte
   ".btn-primary" (0-1-0). Senza la regola combinata qui sotto il pulsante
   attivo perde lo sfondo e resta testo bianco su fondo chiaro: invisibile. */
.seg-group{display:inline-flex;background:var(--sunken);border-radius:var(--r-s);padding:2.5px;gap:2px}
.seg-group .btn{border:0;background:none;box-shadow:none;color:var(--ink-2);font-weight:600}
.seg-group .btn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.seg-group .btn.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg-group .btn.btn-primary:hover{background:var(--accent-ink)}


/* ---------- finestra larga a tre colonne ----------
   Il form del lead ha una ventina di campi: in colonna singola costringe a
   scorrere per arrivare al pulsante Salva. Qui i campi vanno su tre colonne
   e l'intestazione, con Salva dentro, resta fissa in alto.
   La disposizione e' tutta in CSS: l'HTML del form non viene riorganizzato. */
.modal-content.modal-wide{max-width:980px}
.modal-wide .modal-header{position:sticky;top:0;z-index:5;background:var(--surface);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.modal-header-actions{display:flex;gap:9px;align-items:center;margin-left:auto}
.modal-wide .modal-body>form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 16px;align-items:start}
.modal-wide .modal-body>form>.form-group{margin-bottom:14px;min-width:0}
/* riga intera: gruppi annidati, riquadri, e i campi con testo lungo */
.modal-wide .modal-body>form>.form-row,
.modal-wide .modal-body>form>.card,
.modal-wide .modal-body>form>div:not(.form-group){grid-column:1/-1}
.modal-wide .modal-body>form>.form-group:has(textarea){grid-column:1/-1}
/* Le tappe, come le note: sono piu' alte delle altre caselle della riga, e
   senza questa regola la griglia allungava anche quelle lasciando spazio
   vuoto sotto. */
.modal-wide .modal-body>form>.form-group:has(.tappe-elenco){grid-column:1/-1}
.modal-wide .modal-body>form>.form-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .modal-wide .modal-body>form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-wide .modal-body>form>.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .modal-content.modal-wide{max-width:none}
  .modal-wide .modal-body>form,
  .modal-wide .modal-body>form>.form-row{grid-template-columns:1fr}
  .modal-header-actions .btn{padding:6px 11px;font-size:12.5px}
}

/* ---------- la scheda del lead: due colonne larghe, sempre piene ----------
   Vale SOLO per la scheda del lead (.modal-lead), non per le altre finestre
   larghe: i modelli e i messaggi WhatsApp restano come sono.

   Perche' due colonne e non tre. I campi corti della scheda sono quattordici
   (nome, telefono, email, da dove arriva, tipo, data contatto, cosa consegni,
   data ricontatto, stato, data evento, ora inizio, ora fine, lavorazioni,
   citta'). Quattordici diviso due fa sette righe esatte: nessun buco, mai.
   Diviso tre farebbe quattro righe piu' due campi spaiati, cioe' un buco
   fisso in fondo. E' il conto, non un gusto.

   Perche' i campi non spariscono piu'. "Cosa consegni" e "Data ricontatto"
   prima comparivano e sparivano: ogni volta la griglia si riordinava e si
   aprivano buchi diversi. Ora restano sempre al loro posto e si spengono
   (grigi, non scrivibili) quando non servono. */
.modal-content.modal-wide.modal-lead{max-width:1180px}
.modal-lead .modal-body>form{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
/* Le righe da due campi non sono piu' una griglia dentro la griglia: i loro
   due campi entrano direttamente nelle colonne del form, come tutti gli
   altri. Senza questo, ogni riga da due occupava tutta la larghezza e
   lasciava vuota la colonna di destra. */
.modal-lead .modal-body>form>.form-row{display:contents}
.modal-lead .modal-body>form>.form-row>.form-group{margin-bottom:14px;min-width:0}
/* Le note prendono tutta la larghezza. Prima la regola cercava una casella
   di testo semplice (textarea): da quando le note hanno grassetto e corsivo
   non sono piu' una textarea, la regola non le trovava piu' e finivano
   strette in mezzo. Ora si cercano tutte e due le forme. */
.modal-lead .modal-body>form>.form-group:has(.rt){grid-column:1/-1}
/* Riga intera anche per: il percorso da ricontattare, il percorso della
   cartella foto (e' un indirizzo lungo, stretto non si leggeva) e gli
   allegati (le miniature vanno a capo). */
.modal-lead .modal-body>form>.spunta-ricontatto,
.modal-lead .modal-body>form>.campo-largo{grid-column:1/-1}
@media (max-width:768px){
  .modal-lead .modal-body>form{grid-template-columns:1fr}
}

/* ---------- due caselle affiancate partono alla stessa altezza ----------
   IL PROBLEMA. La riga "Nome" ha accanto all'etichetta i tastini "Stesso
   cliente" e "Collega azienda": quella testata e' alta 26 pixel, mentre
   un'etichetta normale ne e' alta 19. Risultato: la casella del Nome
   partiva 13 pixel piu' in basso di quella del Telefono, e le due
   colonne non erano in riga.

   LA SOLUZIONE. Non si ritocca il caso singolo: si da' a TUTTE le
   testate della scheda la stessa altezza minima, quella che serve a
   contenere un tastino. Cosi' vale da sola per qualsiasi campo a cui
   domani venga aggiunto un pulsante accanto all'etichetta, senza doverci
   tornare. Lo spazio in piu' finisce SOPRA l'etichetta, non fra
   etichetta e casella: si legge come aria fra le righe, non come un buco.

   IL LIMITE, detto chiaro: questo tiene in riga le testate alte fino a
   una riga di testo piu' un tastino. Un'etichetta cosi' lunga da andare
   a capo su due righe si rialzerebbe da sola. Nella scheda non succede
   -- le colonne sono larghe 561 pixel e l'etichetta piu' lunga ne occupa
   150 -- e sotto i 768 pixel le colonne diventano una sola, quindi non
   ci sono piu' coppie da allineare. Se un domani servisse un'etichetta
   lunghissima, la cosa giusta e' accorciarla. */
.modal-lead .modal-body>form>.form-group>.form-label,
.modal-lead .modal-body>form>.form-row>.form-group>.form-label,
.modal-lead .modal-body>form>.form-group>.chipaga-testata{
  min-height:26px;display:flex;align-items:flex-end;margin-bottom:0}

/* ---------- telefono: prefisso internazionale accanto al numero ----------
   La tendina resta stretta (le bandierine e il codice bastano) e il numero
   si prende tutto il resto. Sotto i 480 pixel vanno una sopra l'altra: in
   riga la tendina schiaccerebbe il numero a poche cifre visibili. */
.tel-riga{display:flex;gap:8px;align-items:stretch}
/* 184 pixel non sono a caso: e' quanto serve alla voce piu' lunga
   ("Regno Unito", 138 pixel di testo piu' la freccia e i margini). Piu'
   stretta, il nome del paese veniva tagliato a tendina chiusa e restava
   "+44 Regno Un...". Misurato nel browser, non a occhio. */
.tel-prefisso{flex:0 0 auto;width:184px;min-width:0;
  font-variant-emoji:emoji;padding-right:24px}
.tel-numero{flex:1 1 auto;min-width:0}
@media (max-width:480px){
  .tel-riga{flex-wrap:wrap}
  .tel-prefisso{width:100%}
}

/* ---------- la nota importante, in rosso ----------
   Da spenta e' un campo come gli altri, solo con un filo rosso a sinistra:
   se fosse sempre acceso, il rosso diventerebbe sfondo e smetterebbe di
   voler dire "guarda qui". Da accesa -- cioe' quando c'e' scritto qualcosa
   -- prende sfondo e bordo rossi e si vede da lontano.
   Il colore non e' il rosso degli errori: questo non e' un errore, e' una
   cosa da ricordare. Si appoggia alle stesse due variabili gia' usate per
   gli avvisi, cosi' resta leggibile anche col tema scuro. */
.nota-rossa{border-left:3px solid var(--bad-bg);padding-left:11px;
  border-radius:0 var(--r-s,8px) var(--r-s,8px) 0;transition:background .15s}
.nota-rossa .form-label{color:var(--ink-2)}
.nota-rossa textarea{resize:vertical;min-height:52px}
.nota-rossa-accesa{background:var(--bad-bg);border-left-color:var(--bad-ink);
  padding:10px 12px 4px}
.nota-rossa-accesa .form-label{color:var(--bad-ink);font-weight:800}
.nota-rossa-accesa textarea{border-color:var(--bad-ink)}

/* ---------- avvisi che spariscono da soli ---------- */
#avvisi{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.avviso{pointer-events:auto;cursor:pointer;background:var(--ink);color:var(--ground);
  padding:11px 18px;border-radius:22px;font-size:13.5px;font-weight:600;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.4);max-width:88vw;
  animation:avviso-entra .22s cubic-bezier(.2,.8,.3,1)}
.avviso-ok{background:var(--ok);color:var(--on-ok)}
.avviso-errore{background:var(--bad);color:var(--on-bad)}
.avviso.via{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@keyframes avviso-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.avviso{animation:none}}
@media (max-width:768px){#avvisi{bottom:14px}}

/* ---------- stato del pagamento ----------
   Rosso finche' non e' incassato, verde quando lo dichiari pagato: il
   colore deve saltare all'occhio scorrendo l'elenco, non richiedere lettura. */
select.pagamento-atteso{border-color:var(--bad);background-color:var(--bad-bg);
  color:var(--bad);font-weight:700}
select.pagamento-fatto{border-color:var(--ok);background-color:var(--ok-bg);
  color:var(--ok);font-weight:700}
.badge-pagato{background:var(--ok-bg);color:var(--ok)}
.badge-attesa-pagamento{background:var(--bad-bg);color:var(--bad)}

.bordo-ok{border-color:var(--ok)}

/* ---------- riepilogo degli incassi nel modulo ---------- */
.riepilogo-incassi{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;margin-bottom:15px}
.ri-testata{display:flex;align-items:center;justify-content:space-between;
  padding:11px 15px;background:var(--sunken);border-bottom:1px solid var(--line);
  font-weight:700;font-size:13.5px}
.ri-riga{display:grid;grid-template-columns:1fr auto minmax(0,300px);gap:14px;
  align-items:center;padding:11px 15px;border-bottom:1px solid var(--line-soft)}
.ri-riga:last-child{border-bottom:0}
.ri-nome{font-size:13.5px;font-weight:600}
.ri-nota{font-size:11.5px;color:var(--ink-3);font-weight:400;margin-left:6px}
.ri-cifra{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;text-align:right;
  white-space:nowrap}
.ri-azioni{display:flex;gap:9px;align-items:center;justify-content:flex-end}
.ri-azioni .form-select{max-width:150px;font-size:12.5px;padding:6px 26px 6px 9px}
.ri-azioni .form-check{padding:6px 11px;font-size:12.5px;white-space:nowrap}
.ri-totale{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ri-totale .ri-cifra{font-size:17px}
.ri-fatta{background:var(--ok-bg)}
.ri-fatta .ri-nome,.ri-fatta .ri-cifra{color:var(--ok)}
.ri-conclusione{background:var(--sunken);font-weight:700}
.ri-rosso{color:var(--bad)}
.ri-verde{color:var(--ok)}
@media (max-width:768px){
  .ri-riga{grid-template-columns:1fr auto;gap:8px}
  .ri-azioni{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
}

/* ---------- passaggio del mouse, uniforme su tutti i pulsanti ----------
   Prima ogni variante reagiva a modo suo: filter su alcuni, niente su altri,
   e i pulsanti chiari sembravano spenti. */
.btn{transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{background:var(--sunken);border-color:var(--ink-3)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--on-accent)}
.btn-danger:hover{background:var(--bad);border-color:var(--bad);color:var(--on-bad);filter:brightness(.94)}
.btn-success:hover{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.btn-outline:hover{background:var(--sunken)}
.btn:active{transform:translateY(1px)}
.btn:disabled:hover{background:inherit;border-color:var(--line);transform:none}

.pacchetti{display:flex;gap:9px;flex-wrap:wrap}
.pacchetto-scelta{cursor:pointer}
.pacchetto-scelta input{accent-color:var(--accent)}
.pacchetto-scelta.scelto{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-ink);font-weight:700}

/* ---------- utility ---------- */
.flex{display:flex}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.flex-gap,.gap-2{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--ink-3)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.hide{display:none!important}

/* ---------- theme toggle ---------- */
.theme-toggle{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-s);
  cursor:pointer;color:var(--rail-ink);font-size:13.5px;background:none;border:0;width:100%;text-align:left}
.theme-toggle:hover{background:var(--rail-hover)}
.toggle-switch{margin-left:auto;width:34px;height:19px;border-radius:20px;
  background:var(--line-strong);position:relative;transition:background var(--tr);pointer-events:none}
.toggle-switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--surface);transition:transform var(--tr)}
[data-theme="dark"] .toggle-switch{background:var(--accent)}
[data-theme="dark"] .toggle-switch::after{background:var(--on-accent)}
[data-theme="dark"] .toggle-switch::after{transform:translateX(15px)}

/* ---------- responsive ---------- */
@media (max-width:1024px){.content-area{padding:20px}}

/* Il menu laterale diventa un cassetto gia' a 1020px, non piu' a 768:
   su un tablet in verticale, e su un portatile piccolo, la barra fissa
   si mangiava 244px di larghezza utile senza motivo. Sotto ai 1020px
   si apre col pulsante a tre righe e si chiude toccando il velo. */
@media (max-width:1020px){
  .sidebar{transform:translateX(-100%);width:280px;box-shadow:var(--shadow-lg)}
  .sidebar.mobile-open,.sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0}
  .mobile-menu-toggle{display:inline-flex}
}
@media (max-width:768px){
  .content-area{padding:16px}
  .top-bar{padding:11px 16px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .stat-card-value{font-size:24px}
  .form-row{grid-template-columns:1fr}
  .page-header .page-title{font-size:20px}
  .modal{padding:0;align-items:flex-end}
  .modal-content{max-width:none;border-radius:var(--r-l) var(--r-l) 0 0;max-height:92vh}
  .modal-footer{flex-direction:column-reverse}
  .modal-footer .btn{width:100%}
  .calendar-day{min-height:64px;padding:4px}
  .calendar-event{font-size:9.5px;padding:2px 4px}
  .table th,.table td,table th,table td{padding:10px 11px}
}
@media (max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .top-actions{width:100%;margin-left:0}
  .top-actions .btn{flex:1}
}


/* ==========================================================
   TELEFONO: LE TABELLE DIVENTANO SCHEDE
   Una tabella da nove colonne dentro uno schermo da 375 pixel
   costringe a trascinare di lato per leggere l'importo. Sotto i
   760 pixel ogni riga diventa una scheda, e ogni valore si porta
   accanto il nome della sua colonna.
   ========================================================== */
@media (max-width: 760px){
  .table-container{overflow-x:visible; border:0; background:none; box-shadow:none}
  /* Due bordi annidati mangiavano 68 dei 375 pixel dello schermo: dove le
     righe sono gia' schede, la scheda che le contiene non serve piu'. */
  .card-body:has(> .table-container){padding-left:0; padding-right:0}
  .content-card:has(.table-container){border:0; background:none; box-shadow:none}
  .table thead{position:absolute; width:1px; height:1px; overflow:hidden;
               clip:rect(0 0 0 0); white-space:nowrap}
  .table, .table tbody, .table tr, .table td{display:block; width:auto}
  .table tr{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-l); box-shadow:var(--shadow-sm);
    padding:6px 2px; margin-bottom:12px;
  }
  .table td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    border:0; border-bottom:1px solid var(--line-soft);
    padding:10px 14px; min-height:44px; text-align:right;
  }
  .table tr td:last-child{border-bottom:0}
  .table td::before{
    content:attr(data-etichetta);
    flex:0 0 auto; text-align:left;
    font-size:11.5px; font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-3);
  }
  /* Una cella senza etichetta (o vuota) non deve lasciare una riga vuota. */
  .table td:empty{display:none}
  .table td:not([data-etichetta])::before{content:none}

  /* La prima cella e' il nome: fa da titolo della scheda. */
  .table tr td:first-child{
    background:var(--sunken); border-radius:var(--r-m) var(--r-m) 0 0;
    font-size:16px; font-weight:600; text-align:left;
    justify-content:flex-start; padding:12px 14px; margin:-6px -2px 6px;
  }
  .table tr td:first-child::before{content:none}

  /* I pulsanti in fondo stanno larghi: sul telefono si tocca col pollice. */
  .table td .btn-group, .table td .azioni{
    display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
  }
  .table td .btn{min-height:44px; padding-left:14px; padding-right:14px}
}

/* ---------- il telefono, in generale ---------- */
@media (max-width: 760px){
  /* iPhone ingrandisce da solo qualsiasi campo sotto i 16px, e poi la
     pagina resta ingrandita. Meglio partire gia' a 16. */
  input, select, textarea{font-size:16px}

  /* Niente si deve poter trascinare di lato.
     "clip" e non "hidden": vedi la nota lunga sotto, nel blocco 415.
     Le due righe insieme sono volute -- la prima e' la rete di
     sicurezza per i telefoni vecchi. */
  html, body{overflow-x:hidden}
  html, body{overflow-x:clip}

  /* Bersagli grandi abbastanza da centrarli col pollice. */
  .btn, .nav-item, .seg-group .btn, .icon-btn{min-height:44px}
  .icon-btn{min-width:44px}
  .theme-toggle{min-height:44px}
  .notifiche-campana{width:44px;height:44px}
  /* ATTENZIONE alla cascata: piu' avanti nel file c'e' un
     ".btn-sm{min-height:32px}" che pesa quanto ".btn" ma viene dopo,
     quindi vincerebbe lui. Due classi insieme pesano di piu'. */
  .btn.btn-sm{min-height:44px}
  /* Anche i campi e i due pulsantini sotto al nome del lead: sul
     telefono si allargano in altezza. .riga-telefono resta una riga
     di testo a vedersi -- cambia solo quanto e' facile centrarla. */
  .form-input,.form-select,.form-textarea{min-height:44px}
  .btn-riga{min-height:44px;display:inline-flex;align-items:center}
  .riga-telefono{min-height:44px;display:flex;align-items:center}

  /* Le finestre a comparsa partono dal basso e occupano quasi tutto:
     una finestrella centrata su un telefono e' scomoda da compilare. */
  .modal{align-items:flex-end; padding:0}
  .modal-content{
    max-height:92dvh; width:100%; max-width:100%;
    border-radius:var(--r-l) var(--r-l) 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .modal-footer{position:sticky; bottom:0; background:var(--surface);
                padding-top:12px; border-top:1px solid var(--line)}
  .modal-footer .btn{flex:1}

  /* Due colonne di campi su un telefono diventano una. */
  .form-row, .form-grid{grid-template-columns:1fr !important}

  /* I numeri grossi della bacheca non devono andare a capo storti. */
  .stat-value, .numero-grosso{font-size:26px}

  .page-header{flex-wrap:wrap; gap:10px}
  .page-header .btn{flex:1 1 auto}
}

/* Sotto i 380 pixel (iPhone SE e mini) si stringe ancora un po'. */
@media (max-width: 380px){
  .table td{padding-left:11px; padding-right:11px}
  .table td::before{font-size:11px}
}


/* ==========================================================
   RIEPILOGO DELL'EVENTO nel popup del calendario
   Affiancato invece che in colonna: le informazioni che servono
   per decidere -- quando, dove, quanto, incassato o no -- si
   leggono tutte insieme senza scorrere.
   ========================================================== */
.riep-griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
}
/* I bordi stanno sulle celle, non sullo sfondo che traspare fra una e
   l'altra: se l'ultima riga non e' piena, lo spazio in coda resta pulito
   invece di sembrare due caselle vuote. */
.riep-voce{
  padding:12px 14px; min-width:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px;
}
.riep-eti{
  font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.riep-val{
  font-size:15px; font-weight:600; color:var(--ink);
  overflow-wrap:anywhere; text-decoration:none;
}
.riep-num{font-variant-numeric:tabular-nums}
.riep-sotto{font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.riep-note{
  margin-top:14px; background:var(--sunken); border-radius:var(--r-m);
  padding:12px 14px; display:flex; flex-direction:column; gap:5px;
}
.riep-note p{font-size:14px; color:var(--ink-2); white-space:pre-wrap; margin:0}
@media (max-width:760px){
  .riep-griglia{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .riep-voce{padding:11px 12px}
}


/* ==========================================================
   DOVE VANNO I SOLDI — i costi divisi nelle tre voci
   Sommarli in un numero solo non aiuta a decidere: 900 euro
   possono essere un secondo fotografo o venti contatti pagati
   che non si sono chiusi, e si rimedia in modi opposti.
   ========================================================== */
.costi-griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
}
.costo-voce{
  padding:14px 16px; display:flex; flex-direction:column; gap:3px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.costo-eti{
  font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.costo-cifra{
  font-family:var(--font-display); font-size:22px; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.15;
}
.costo-nota{font-size:12px; color:var(--ink-2)}
.costo-totale{background:var(--sunken)}
.costo-totale .costo-cifra{color:var(--warn-ink)}
.card-nota{font-size:12.5px; color:var(--ink-3)}
/* Le colonne dei costi, piu' tenui: la riga si legge lo stesso quando
   sono tre invece di una. */
.c-costo{color:var(--ink-2); font-size:13.5px; font-variant-numeric:tabular-nums}
th.c-costo{font-size:11px}


/* ---------- da ricontattare oggi ---------- */
.sollecito{
  border:1px solid var(--line); border-radius:var(--r-l);
  padding:16px 18px; margin-bottom:14px; background:var(--surface);
}
.sollecito-capo{display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap}
.sollecito-nome{font-size:17px; font-weight:600; color:var(--ink);
  text-decoration:none; margin-right:9px}
.sollecito-nome:hover{color:var(--accent)}
.sollecito-quando{font-size:12.5px; color:var(--warn-ink); font-weight:600; white-space:nowrap}
.sollecito-meta{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.sollecito-azioni{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.sollecito-nota{font-size:12px; color:var(--ink-3); margin-top:9px; line-height:1.5}
.btn-ghost{background:none; border:1px solid var(--line); color:var(--ink-2)}
@media (max-width:760px){
  .sollecito-azioni .btn{flex:1 1 auto}
  .sollecito-quando{white-space:normal}
}


/* ---------- nei prossimi giorni ---------- */
.prossimo{display:flex; gap:11px; align-items:center; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--line-soft)}
.prossimo:last-child{border-bottom:0}
.prossimo-quando{font-size:12px; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.05em; min-width:88px}
.prossimo-nome{font-weight:600; color:var(--ink); text-decoration:none}
.prossimo-nome:hover{color:var(--accent)}
.prossimo-nota{font-size:12px; color:var(--accent-ink); background:var(--accent-soft);
  border-radius:99px; padding:2px 9px}
@media (max-width:560px){.prossimo-quando{min-width:0}}


/* ==========================================================
   RITOCCHI: orari da telefono, spunta del ricontatto,
   mesi apribili nel report
   ========================================================== */

/* L'orologio di sistema, da telefono, ignora il passo di mezz'ora: e' il
   sistema operativo a decidere. Sotto i 760 pixel si mostra un menu, che
   il passo lo rispetta per forza. */
.orario-mobile{display:none}
@media (max-width:760px){
  .orario-grande{display:none}
  .orario-mobile{display:block}
}

/* La spunta del ricontatto: una casella normale, allineata in alto perche'
   accanto ha due righe di spiegazione. */
.spunta-ricontatto{align-items:flex-start; padding:12px 14px; margin-top:6px}
.spunta-ricontatto input{margin-top:2px; flex-shrink:0}
.spunta-ricontatto b{font-weight:600}

/* I riquadri informativi che erano rimasti col tema vecchio: usavano due
   colori cancellati da tempo, quindi si vedevano senza sfondo. */
.riquadro-info{background:var(--sunken); border:1px solid var(--line);
  border-radius:var(--r-m); padding:14px 16px; margin-bottom:14px}
.riquadro-info-titolo{font-size:13px; font-weight:600; color:var(--ink-2);
  margin:0 0 8px}

/* I mesi del report, apribili. Il riquadro deve dire da solo che si tocca:
   bordo, sfondo, e la freccia che gira. */
.mese-box{border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--surface); margin-bottom:9px; overflow:hidden}
.mese-testa{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 16px; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; color:var(--ink); text-align:left;
  transition:background var(--tr);
}
.mese-testa:hover{background:var(--sunken)}
.mese-testa:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.mese-nome{font-weight:600; min-width:104px}
.mese-riassunto{color:var(--ink-2); font-size:13.5px; font-variant-numeric:tabular-nums;
  margin-left:auto; text-align:right}
.mese-freccia{flex-shrink:0; color:var(--ink-3); transition:transform var(--tr); font-size:13px}
.mese-box.aperto .mese-freccia{transform:rotate(90deg)}
.mese-box.vuoto .mese-testa{color:var(--ink-3)}
.mese-corpo{padding:2px 16px 16px; border-top:1px solid var(--line-soft)}
.mese-voce{display:flex; justify-content:space-between; gap:14px;
  padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:14px}
.mese-voce:last-child{border-bottom:0}
.mese-voce span:first-child{color:var(--ink-2)}
.mese-voce span:last-child{font-variant-numeric:tabular-nums; font-weight:600}

/* Da telefono anche i lead partono chiusi: si scorre l'elenco dei nomi e
   si apre solo quello che serve. */
@media (max-width:760px){
  .table tr.chiusa td:not(:first-child){display:none}
  .table tr.chiusa td:first-child::after{content:"›"; margin-left:auto; color:var(--ink-3);
    font-size:19px; line-height:1}
  .table tr:not(.chiusa) td:first-child::after{content:"⌄"; margin-left:auto; color:var(--ink-3);
    font-size:19px; line-height:1}
  .table tr td:first-child{cursor:pointer}
}


/* ==========================================================
   ICONE
   Disegni a tratto scritti dentro la pagina: niente libreria da
   scaricare, funzionano senza rete, e prendono il colore del
   testo accanto -- quindi vanno bene sul chiaro e sullo scuro
   senza doverne tenere due versioni.
   ========================================================== */
.ico{width:18px; height:18px; flex-shrink:0; display:block}
.nav-item .ico{opacity:.72; transition:opacity var(--tr)}
.nav-item:hover .ico,.nav-item.active .ico{opacity:1}

/* Il pulsante che apre gli altri messaggi. */
.altri-messaggi{margin-bottom:12px}

/* Da telefono le righe chiuse mostrano il solo nome. */
@media (max-width:760px){
  .table tr.chiusa td:first-child{border-radius:var(--r-m)}
}


/* ---------- le opzioni dei messaggi ---------- */
.azione{position:relative}
/* Quella scelta si vede: e' anche quella che il CRM ha aperto da solo. */
.azione-scelta{border-color:var(--accent); background:var(--accent-soft)}
.azione-scelta .azione-nome{color:var(--accent-ink)}
.azione-suggerita{
  display:inline-block; margin-top:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ok); background:var(--ok-bg); border-radius:99px; padding:2px 8px;
}


/* ---------- il link corto di un documento ---------- */
.doc-corto{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 4px}
.doc-corto-url{
  font-family:var(--font-mono); font-size:12.5px;
  background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-s);
  padding:5px 9px; color:var(--accent-ink); overflow-wrap:anywhere; flex:1 1 220px;
}
.doc-corto-nota{font-size:12px; color:var(--ink-3); margin-bottom:8px; max-width:62ch}
.btn-sm{font-size:12.5px; padding:5px 11px; min-height:32px}
@media (max-width:760px){
  .doc-corto{gap:6px}
  .doc-corto .btn-sm{flex:1 1 auto}
}


/* ---- lista lead: due pulsanti sotto al nome, e intestazioni cliccabili ---- */
.azioni-riga{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.btn-riga{
  display:inline-block;font-size:11.5px;line-height:1;padding:5px 9px;
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink-2);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.btn-riga:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-2)}
.btn-riga:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
th.ordinabile{cursor:pointer;user-select:none;white-space:nowrap}
th.ordinabile:hover{color:var(--accent-ink)}
th.ordinabile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}


/* ---- calendario: si clicca il vuoto per aggiungere un lavoro ---- */
.giorno-cliccabile{cursor:copy}
.calendar-day.giorno-cliccabile:hover{background:var(--accent-soft)}
.tg-col.giorno-cliccabile:hover{background-color:color-mix(in srgb,var(--accent) 6%,transparent)}
.calendar-day.giorno-cliccabile .calendar-day-number{cursor:copy;border-radius:var(--r-s)}
.calendar-day.giorno-cliccabile:hover .calendar-day-number{color:var(--accent-ink);font-weight:700}
/* Gli eventi dentro la cella restano una freccia normale: li' si apre,
   non si aggiunge. */
.giorno-cliccabile .calendar-event,.giorno-cliccabile .tg-ev{cursor:pointer}


/* ---- note nella lista, al posto del ricontatto ---- */
.cella-note{max-width:260px}
.nota-breve{
  border:0;background:none;padding:0;margin:0;text-align:left;
  font:inherit;font-size:13px;line-height:1.4;color:var(--ink-2);
  cursor:pointer;white-space:normal;
}
.nota-breve:hover{color:var(--ink);text-decoration:underline;text-decoration-style:dotted}
.nota-breve:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* Chi non ha note lascia il posto vuoto: un trattino non aggiunge niente
   e riempie la colonna di rumore. */
.nota-vuota{display:inline-block;min-height:1px}

/* ---- il riquadro delle note nel modulo ---- */
.note-grandi{min-height:96px;line-height:1.5;resize:vertical}


/* ---- lista lead: sette colonne che si adattano ---- */
/* Larghezze in percentuale invece che fisse: stringendo la finestra la
   tabella si riorganizza invece di uscire dai bordi. Le note prendono
   quello che avanza. */
.table th.col-note,.table td.cella-note{width:auto;min-width:150px}
.table th,.table td{white-space:normal}
.riga-telefono{
  display:block;font-size:12px;color:var(--ink-3);text-decoration:none;
  margin-top:2px;font-variant-numeric:tabular-nums;
  /* e' un pulsante, ma non deve sembrarlo: resta una riga di testo */
  border:0;background:none;padding:0;text-align:left;font-family:inherit;
  cursor:copy;
}
.riga-telefono:hover{color:var(--accent-ink);text-decoration:underline}
.riga-citta{font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* Lo stato come pallino */
.cella-stato{width:38px;text-align:center}
.pallino{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  border:1.5px solid transparent;vertical-align:middle;
}
.pallino-accepted{background:var(--ok)}
.pallino-pending{background:var(--warn)}
.pallino-contacted{background:var(--info)}
.pallino-quoted{background:var(--accent)}
.pallino-rejected{background:var(--bad)}
.pallino-no_reply{background:transparent;border-color:var(--idle)}
/* Il nome dello stato resta leggibile da chi usa un lettore di schermo,
   e ricompare da telefono dove la riga si apre per intero. */
.solo-lettori{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Il cestino al posto della parola Elimina */
.btn-cestino{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);
  border-radius:var(--r-s);padding:5px 7px;cursor:pointer;line-height:0;
  transition:color var(--tr),border-color var(--tr),background var(--tr);
}
.btn-cestino:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.btn-cestino:focus-visible{outline:2px solid var(--bad);outline-offset:2px}

/* Il menu degli anni */
.scelta-anno{width:auto;min-width:96px;padding-top:5px;padding-bottom:5px;font-size:13.5px}

/* Il mese in corso: si vede anche quando non e' quello selezionato */
.mese.corrente{box-shadow:inset 0 0 0 1.5px var(--accent-2)}
.mese.corrente .mese-nome{color:var(--accent-ink);font-weight:700}
.mese.corrente.attivo{box-shadow:none}

@media (max-width:768px){
  /* Da telefono la riga si apre per intero: li' lo stato torna a parole,
     perche' un pallino da solo, senza le altre righe accanto, non si capisce. */
  .table tr:not(.chiusa) .solo-lettori{
    position:static;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;font-size:13px;color:var(--ink-2);
  }
  .cella-stato{width:auto;text-align:left}
}


/* ---- richiesta di conferma, al posto della finestra del sistema ---- */
.chiedi-fondo{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(10,10,17,.55);
  animation:chiedi-sfuma .16s ease}
.chiedi{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow-lg);
  width:100%;max-width:420px;padding:22px 24px 18px;
  animation:chiedi-entra .2s cubic-bezier(.2,.8,.3,1)}
.chiedi-testo{font-size:14.5px;line-height:1.55;display:flex;flex-direction:column;gap:9px}
.chiedi-testo p{margin:0}
.chiedi-testo p:first-child{font-weight:600;font-size:15.5px;color:var(--ink)}
.chiedi-testo p+p{color:var(--ink-2);font-size:13.5px}
.chiedi-barra{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.chiedi-barra .btn{min-width:104px}
@keyframes chiedi-sfuma{from{opacity:0}to{opacity:1}}
@keyframes chiedi-entra{from{opacity:0;transform:translateY(10px) scale(.98)}
                        to{opacity:1;transform:none}}
@media (max-width:480px){
  .chiedi-barra{flex-direction:column-reverse}
  .chiedi-barra .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .chiedi-fondo,.chiedi{animation:none}
}

/* ---- bozza di preventivo/contratto, prima di generare il PDF ---- */
.bozza-doc{max-width:640px;max-height:88vh;display:flex;flex-direction:column;
  padding:22px 24px 20px}
.bozza-doc-head h3{margin:0 0 4px;font-size:16.5px;font-weight:600;color:var(--ink)}
.bozza-doc-head .form-hint{margin:0}
.bozza-doc-corpo{overflow-y:auto;margin:16px 0;padding-right:2px;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding-top:14px;padding-bottom:14px}
.bozza-doc-titolo-doc{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px}
.bozza-doc-corpo p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.bozza-doc-titoletto{font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin:12px 0 6px}
.bozza-doc-elenco{margin:0 0 8px;padding-left:20px;font-size:13.5px;color:var(--ink-2)}
.bozza-doc-elenco li{margin-bottom:3px}
.bozza-doc-corpo .table-container{margin-top:10px}
.bozza-doc-totale{text-align:right;font-weight:700;font-size:14.5px;color:var(--ink);
  margin-top:8px}
.bozza-doc-avviso{color:var(--danger,#c0392b);font-size:13px;margin-top:10px}
.bozza-doc-nota{margin-top:14px;margin-bottom:0}
.bozza-doc-nota label{font-weight:600;font-size:13.5px;color:var(--ink)}
@media (max-width:600px){
  .bozza-doc{max-width:100%;max-height:92vh}
}


/* ---- calendario: la barra in cima ----
   Tre zone con tre mestieri diversi, invece di quattro file di pulsanti
   identici: dove sei, come ti muovi, cosa vedi. */
.cal-barra{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.cal-dove{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cal-periodo{
  font-family:var(--font-display);font-size:21px;font-weight:800;
  line-height:1.1;letter-spacing:-.01em;color:var(--ink);
  text-transform:capitalize;min-width:230px;white-space:nowrap;
}
.cal-muoviti{display:flex;align-items:center;gap:4px}
.cal-freccia{
  width:30px;height:30px;padding:0;line-height:1;font-size:18px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r-s);cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.cal-freccia:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-2)}
.cal-oggi{
  padding:6px 13px;font-size:12.5px;font-weight:600;margin-left:4px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r-s);cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.cal-oggi:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-2)}
.cal-freccia:focus-visible,.cal-oggi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.cal-scelte{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-etichetta{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:600;
}
.cal-anno{width:auto;min-width:88px;padding-top:5px;padding-bottom:5px;font-size:13px}

/* Un solo blocco unito invece di tre pulsanti sciolti: si vede che sono
   tre modi di guardare la stessa cosa, non tre azioni diverse. */
.cal-viste{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.cal-viste button{
  border:0;background:var(--surface);color:var(--ink-2);cursor:pointer;
  padding:6px 13px;font-size:12.5px;font-weight:600;
  border-right:1px solid var(--line);transition:background var(--tr),color var(--tr);
}
.cal-viste button:last-child{border-right:0}
.cal-viste button:hover{background:var(--sunken)}
.cal-viste button.attiva{background:var(--accent);color:var(--on-accent)}
.cal-viste button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@media (max-width:768px){
  .cal-barra{align-items:stretch;gap:10px}
  .cal-dove{justify-content:space-between;width:100%}
  .cal-periodo{font-size:17px;min-width:0;white-space:normal}
  .cal-scelte{justify-content:space-between;width:100%}
  .cal-viste{flex:1}
  .cal-viste button{flex:1;padding:7px 6px}
}


/* ==========================================================
   ANAGRAFICA — chi paga la fattura
   Le classi cominciano tutte per "ana-": nessuna si sovrappone
   a quelle gia' usate nel resto del CRM.
   ========================================================== */

/* ---- i due riquadri affiancati, nella scheda del lead ----
   A sinistra chi ti ha chiamato, a destra chi paga, in mezzo una
   freccia. E' l'unico modo che abbiamo trovato perche' la cosa si
   capisca senza doverla spiegare: sono due persone diverse. */
.ana-coppia{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ana-riquadro{border:1px solid var(--line);border-radius:var(--r-m);
  padding:13px 15px;background:var(--surface);min-width:0}
.ana-riquadro-pieno{border-color:var(--accent);background:var(--accent-soft)}
/* Senza intestatario il riquadro resta tratteggiato: si vede a colpo
   d'occhio che manca qualcosa, senza urlare che c'e' un errore. */
.ana-riquadro-vuoto{border-style:dashed}
.ana-etichetta{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.ana-grande{font-family:var(--font-display);font-size:18px;font-weight:800;
  line-height:1.25;margin-top:5px;word-break:break-word}
.ana-nessuno{color:var(--ink-3);font-style:italic}
.ana-avvertenza{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.4}
.ana-freccia{display:grid;place-items:center;font-size:22px;color:var(--ink-3);
  padding:0 2px}

/* ---- le righe di dettaglio, usate in tutte e due le pagine ---- */
.ana-nome{font-weight:600;font-size:15px;line-height:1.3;word-break:break-word}
.ana-sotto{font-size:12.5px;color:var(--ink-3);margin-top:3px;word-break:break-word}
.ana-stato{font-size:12.5px;margin-top:6px;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap}
.ana-ok{color:var(--ok)}
.ana-manca{color:var(--warn-ink)}
.ana-quanti{font-size:11.5px;color:var(--ink-3)}
.ana-corpo{flex:1;min-width:0}

/* ---- i pulsanti sotto ai riquadri ---- */
.ana-azioni{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
/* "Vai all'anagrafica" sta staccato dagli altri, a destra. Da telefono
   no: li' finirebbe da solo su una riga, spinto contro il bordo. */
.ana-in-fondo{margin-left:auto}

/* ---- i pannelli che si aprono: cerca, oppure creane una nuova ---- */
.ana-pannello{margin-top:14px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--sunken)}
.ana-esito{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.ana-esito:last-child{border-bottom:0}

/* ---- i tre pulsanti dei documenti ---- */
.ana-documenti{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}

/* ---- la pagina Anagrafica ---- */
.ana-barra{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.ana-barra .form-group{margin-bottom:0}
.ana-cerca{flex:1;min-width:220px}
.ana-riga{display:flex;align-items:flex-start;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--line-soft)}
.ana-riga:last-child{border-bottom:0}
.ana-riga-spenta{opacity:.55}
.ana-tasti{display:flex;gap:7px;flex-shrink:0;flex-wrap:wrap}

/* ---- da telefono ----
   I due riquadri si impilano e la freccia gira in giu': affiancati
   su uno schermo da 375 pixel diventerebbero due colonne da niente. */
@media (max-width:768px){
  .ana-coppia{grid-template-columns:1fr;gap:8px}
  .ana-freccia{transform:rotate(90deg);padding:2px 0}
  .ana-riga{flex-direction:column;gap:9px}
  .ana-tasti{width:100%}
  .ana-tasti .btn{flex:1}
  .ana-esito{flex-wrap:wrap}
  .ana-in-fondo{margin-left:0}
}
/* ==========================================================================
   GALLERIE
   Tutte le classi cominciano per "gal-" di proposito: il CRM ha gia' una
   quindicina di classi sue (nota-breve, pallino, btn-riga, azioni-riga,
   giorno-cliccabile e le altre) e due nomi uguali che vogliono cose
   diverse si rompono a vicenda senza dire niente.
   ========================================================================== */

/* ---- avviso in cima (Pillow che manca) ---- */
.gal-avviso{background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--r-m);
  padding:12px 15px;margin-bottom:15px;font-size:13.5px;line-height:1.5}

/* ---- elenco delle gallerie ---- */
.gal-elenco{display:flex;flex-direction:column}
/* .gal-riga non e' piu' un solo <button>: dentro ci sono due pulsanti,
   apri e cestino (completamento gallerie, punto 1), e due <button> uno
   dentro l'altro non sono HTML valido. .gal-riga fa solo da contenitore;
   .gal-riga-apri prende lo stile che prima stava qui, spogliato
   dell'aspetto da pulsante ma con tastiera e focus che il tag porta con se'. */
.gal-riga{display:flex;align-items:center;gap:6px;width:100%;
  border-bottom:1px solid var(--line-soft)}
.gal-riga:last-child{border-bottom:0}
.gal-riga-apri{display:flex;align-items:center;gap:13px;padding:11px 0;
  flex:1;min-width:0;border:0;background:none;font:inherit;color:inherit;
  text-align:left;cursor:pointer;transition:var(--tr)}
.gal-riga-apri:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;
  border-radius:var(--r-s)}
.gal-riga:hover .gal-riga-apri{background:var(--sunken)}
.gal-copertina{width:56px;height:56px;border-radius:9px;overflow:hidden;
  background:var(--sunken);flex-shrink:0;display:grid;place-items:center}
.gal-copertina img{width:100%;height:100%;object-fit:cover}
.gal-senza-copertina{color:var(--ink-3);font-size:18px}
.gal-corpo{flex:1;min-width:0}
.gal-nome{font-weight:600;font-size:14.5px}
.gal-meta{font-size:12px;color:var(--ink-3);margin-top:2px}
.gal-scelte-conta{color:var(--ok)}
.gal-in-lavorazione{color:var(--info)}
.gal-vuoto{color:var(--ink-3);font-size:13.5px;padding:14px 0}

.gal-stato{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:var(--idle-bg);color:var(--idle);white-space:nowrap}
/* "bozza" tiene apposta i colori spenti di .gal-stato: e' un promemoria
   per Giovanni, non un allarme -- e soprattutto non chiude niente. */
.gal-stato-bozza{background:var(--idle-bg);color:var(--idle)}
.gal-stato-attiva{background:var(--ok-bg);color:var(--ok)}
.gal-stato-archiviata{background:var(--bad-bg);color:var(--bad)}

/* ---- dentro una galleria ---- */
.gal-titolo{margin:13px 0 3px;font-size:19px}
.gal-sezione{margin:0 0 13px;font-size:15px}
.gal-barra-stati{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.gal-nota-stato{font-size:12px;color:var(--ink-3);margin-top:9px;line-height:1.5}

/* ---- zona di caricamento ---- */
.gal-zona{border:2px dashed var(--line);border-radius:var(--r-l);padding:26px 20px;
  text-align:center;transition:var(--tr);cursor:pointer;background:var(--surface)}
.gal-zona:hover{border-color:var(--accent);background:var(--accent-soft)}
.gal-zona-icona{font-size:26px;opacity:.5}
.gal-zona-nota{font-size:11.5px;color:var(--ink-3);margin-top:5px}

.gal-invio{margin-top:14px}
.gal-invio-testo{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2);
  margin-bottom:5px}
.gal-invio-nome{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.gal-barra{height:6px;border-radius:999px;background:var(--sunken);overflow:hidden}
.gal-barra-piena{height:100%;background:var(--accent);transition:width .2s}
.gal-errori{margin-top:11px;font-size:12px;color:var(--bad);line-height:1.6}

.gal-cartelle{display:flex;gap:9px;margin-top:15px;align-items:center;flex-wrap:wrap}
.gal-cartella-nome{max-width:320px}

/* ---- griglia delle foto, lato Giovanni ---- */
.gal-griglia{display:grid;gap:11px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.gal-cella{margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--sunken);
  border:2px solid transparent;transition:var(--tr)}
.gal-cella-scelta{border-color:var(--ok)}
.gal-cella img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gal-attesa,.gal-guasta{aspect-ratio:1;display:grid;place-items:center;
  font-size:11.5px;color:var(--ink-3);text-align:center;padding:9px}
.gal-guasta{color:var(--bad)}
.gal-cella figcaption{display:flex;gap:5px;align-items:center;padding:6px 8px 0;
  font-size:11px;color:var(--ink-3)}
.gal-nome-file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.gal-segnata{color:var(--ok);font-weight:700}
.gal-cella-azioni{display:flex;gap:5px;padding:6px 8px 8px}

/* ---- link ---- */
.gal-link-elenco{margin-top:17px;display:flex;flex-direction:column;gap:9px}
.gal-link{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--line-soft);border-radius:var(--r-m);background:var(--surface)}
/* Un link vivo si vede pieno; uno spento sbiadisce. */
.gal-link-attivo{opacity:1}
.gal-link-revocato,.gal-link-scaduto{opacity:.55}
.gal-link-corpo{flex:1;min-width:0}
.gal-link-testa{display:flex;gap:9px;align-items:center;font-weight:600;
  font-size:13.5px;margin-bottom:4px}
.gal-link-stato{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;
  background:var(--ok-bg);color:var(--ok);text-transform:uppercase}
.gal-link-revocato .gal-link-stato,.gal-link-scaduto .gal-link-stato{
  background:var(--bad-bg);color:var(--bad)}
.gal-link-url{display:block;font-size:11.5px;color:var(--ink-2);word-break:break-all;
  background:var(--sunken);padding:5px 7px;border-radius:6px}
.gal-link-meta{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.gal-link-azioni{display:flex;gap:5px;flex-shrink:0}

.gal-scelte-nomi{font-size:12.5px;color:var(--ink-2);line-height:1.7;
  max-height:260px;overflow:auto;background:var(--sunken);border-radius:var(--r-m);
  padding:11px 13px;margin:9px 0}

.gal-interruttore{display:flex;gap:9px;align-items:center;font-size:13.5px;
  cursor:pointer}

/* ==========================================================================
   La galleria come la vede il CLIENTE
   Pagina a se': niente menu del CRM, niente di quello che riguarda
   Giovanni. Chi apre il link e' un cliente col telefono in mano.

   LA REGOLA DI QUESTA PAGINA: SOPRA LE FOTO NON C'E' NIENTE.
   Niente barre, niente contorni, niente bottoncini sempre accesi. Chi
   guarda le foto del proprio matrimonio non sta cercando: sta
   guardando. Ogni cosa che si aggiunge allo schermo toglie spazio alle
   foto, ed e' l'unica cosa che il cliente e' venuto a vedere.
   I comandi (cuore, scarica) escono al passaggio del mouse; dal
   telefono, dove il mouse non esiste, restano visibili.
   ========================================================================== */
.gal-cliente{
  /* Le misure della pagina in un posto solo: se un giorno le foto
     devono essere piu' grandi si cambia qui, non in venti punti. */
  --gal-larghezza:1240px;   /* oltre, su uno schermo grande, le foto diventano poster */
  --gal-margine:30px;       /* il bianco ai lati */
  --gal-respiro:24px;       /* lo spazio fra una foto e l'altra */
  --gal-raggio:14px;
  background:var(--ground);color:var(--ink);margin:0;padding:0;min-height:100vh}

/* Finche' Alpine non e' partito, le parti che devono restare nascoste
   restano nascoste. Senza questa riga x-cloak non fa niente e per un
   istante il cliente vede la pagina smontata. */
[x-cloak]{display:none!important}

/* Col visore aperto la pagina sotto non deve scorrere: si scorreva lo
   sfondo mentre si guardava la foto. */
.gal-fermo{overflow:hidden}

/* ==========================================================================
   1. LA COPERTINA
   E' il momento in cui il cliente apre il link e decide se sei un
   professionista. Una foto a tutto schermo, il marchio, il nome
   dell'evento e la data: nient'altro.
   ========================================================================== */
.gal-apertura{position:relative;width:100%;height:100vh;height:100svh;
  min-height:520px;overflow:hidden;background:var(--fisso-s-ground);
  display:grid;place-items:center;text-align:center}
.gal-apertura-foto{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* Il velo serve a leggere il nome, non a scurire la foto.
   Sono due veli sovrapposti: uno che scende dall'alto in basso, e una
   macchia tonda al centro dove stanno il marchio e il nome. La macchia
   c'e' perche' su una copertina CHIARA -- un abito bianco in
   controluce, che nei matrimoni capita sempre -- il solo velo a
   sfumatura non basta e il nome bianco sparisce. */
.gal-apertura-velo{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 52% at 50% 48%,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 34%,
      rgba(0,0,0,.26) 64%, rgba(0,0,0,.60) 100%)}
.gal-apertura-testo{position:relative;z-index:2;padding:30px 24px;
  display:flex;flex-direction:column;align-items:center;gap:20px}

/* Il marchio dello studio. Il logo del CRM e' bianco con i colori
   fissi dentro il file (un SVG caricato con <img> non vede le
   variabili CSS): sopra la copertina scura si legge da solo, e la
   piastra dietro lo tiene staccato dalle foto chiare. */
.gal-marchio{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;border-radius:999px;background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.20)}
@supports (backdrop-filter:blur(6px)){
  .gal-marchio{backdrop-filter:blur(6px);background:rgba(0,0,0,.24)}}
/* 156 px non e' un numero a caso: sotto, la scritta "Photographer" del
   marchio scende sotto gli 8 px e diventa una riga grigia. */
.gal-marchio-img{width:156px;height:auto;display:block}

.gal-apertura-nome{font-size:clamp(34px,6vw,64px);line-height:1.05;color:#fff;
  margin:0;max-width:16ch;text-shadow:0 2px 26px rgba(0,0,0,.42)}
/* La data in maiuscoletto largo: e' il modo in cui le date si scrivono
   sulle partecipazioni, ed e' li' che il cliente l'ha vista l'ultima volta. */
.gal-apertura-data{margin:0;color:rgba(255,255,255,.88);font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  text-indent:.32em;text-shadow:0 1px 14px rgba(0,0,0,.5)}

/* La freccia in fondo: dice che sotto c'e' dell'altro, senza scriverlo. */
.gal-apertura-giu{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:2;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:var(--tr)}
.gal-apertura-giu:hover{background:rgba(255,255,255,.26)}
@supports (backdrop-filter:blur(4px)){
  .gal-apertura-giu{backdrop-filter:blur(4px)}}

/* ==========================================================================
   2. LE FOTO
   ========================================================================== */
.gal-corpo-foto{max-width:var(--gal-larghezza);margin:0 auto;
  padding:56px var(--gal-margine) 90px}

/* L'unica riga di istruzioni della pagina, e sta prima delle foto: la
   si legge scendendo e poi non si rivede piu'.
   text-wrap:balance spezza le due righe in parti uguali: guardandola,
   si rompeva male e lasciava tre parole orfane sulla seconda riga. */
.gal-guida{text-align:center;font-size:13.5px;color:var(--ink-3);
  line-height:1.7;margin:0 auto 34px;max-width:46ch;text-wrap:balance}
.gal-guida strong{color:var(--ink-2);font-weight:600}

/* Le cartelle: testo, non pulsanti. Sono un indice, non dei comandi. */
.gal-tab{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 40px}
.gal-tab button{border:0;background:none;padding:5px 0;color:var(--ink-3);
  font:inherit;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:var(--tr);border-bottom:1px solid transparent}
.gal-tab button:hover{color:var(--ink)}
.gal-tab-attiva{color:var(--ink)!important;border-bottom-color:var(--ink)!important}

/* Due colonne, non una griglia a quadretti.
   LE FOTO TENGONO LA LORO FORMA: un ritratto resta verticale, un
   panorama resta largo. Prima erano tutte ritagliate a quadrato, ed e'
   la ragione principale per cui sembrava un archivio invece che un
   album -- il quadrato non e' un formato fotografico, e' un formato da
   elenco.
   Le foto si distribuiscono a turno fra le colonne (1 a sinistra, 2 a
   destra, 3 a sinistra...) cosi' l'ordine di scorrimento resta quello
   giusto: con le colonne CSS la prima meta' del matrimonio finirebbe
   tutta a sinistra e la seconda tutta a destra. */
.gal-colonne{display:flex;align-items:flex-start;gap:var(--gal-respiro)}
.gal-colonna{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  gap:var(--gal-respiro)}

.gal-tessera{margin:0;position:relative;border-radius:var(--gal-raggio);
  overflow:hidden;background:var(--sunken);line-height:0}
.gal-tessera img{width:100%;height:auto;display:block;object-fit:cover;
  cursor:zoom-in;background:var(--sunken)}

/* I comandi: fuori finche' non servono.
   La misura non si tocca: 44 px e' il minimo perche' un pollice
   colpisca il bersaglio giusto. Sbagliare qui vuol dire togliere una
   foto dalle scelte senza accorgersene. */
.gal-foto-azioni{position:absolute;right:10px;bottom:10px;display:flex;gap:8px;
  opacity:0;transition:opacity .18s ease}
.gal-tessera:hover .gal-foto-azioni,
.gal-tessera:focus-within .gal-foto-azioni{opacity:1}
/* Una foto gia' scelta lo dice sempre, anche senza il mouse sopra:
   altrimenti il cliente non sa piu' cosa ha segnato. */
.gal-tessera-scelta .gal-foto-azioni{opacity:1}

.gal-cuore,.gal-scarica-foto{width:44px;height:44px;border:0;border-radius:50%;
  /* Il velo sotto ai comandi sta sopra a una foto qualunque, anche
     bianchissima: sotto al 55% di nero il simbolo bianco scende sotto
     4.5:1. A .58 regge anche sulla foto piu' chiara possibile. */
  background:rgba(0,0,0,.58);color:#fff;font-size:20px;line-height:1;
  cursor:pointer;display:grid;place-items:center;text-decoration:none;
  transition:background .18s ease,transform .18s ease}
@supports (backdrop-filter:blur(6px)){
  .gal-cuore,.gal-scarica-foto{backdrop-filter:blur(6px);background:rgba(0,0,0,.58)}}
.gal-cuore:hover,.gal-scarica-foto:hover{background:rgba(0,0,0,.74);transform:scale(1.06)}
.gal-cuore:focus-visible,.gal-scarica-foto:focus-visible{
  outline:3px solid #fff;outline-offset:2px}
.gal-scarica-foto{font-size:17px}
.gal-scarica-foto:hover{text-decoration:none}
/* Il cuore pieno e' l'unico segno che una foto e' scelta: prima c'era
   anche un bordo verde di tre pixel intorno alla foto, che su una foto
   di matrimonio si vede piu' della foto. */
.gal-cuore-pieno{background:var(--ok);color:var(--on-ok)}
.gal-cuore-pieno:hover{background:var(--ok)}

/* Dal telefono il passaggio del mouse non esiste: i comandi restano.
   Va dopo le regole di sopra apposta -- stessa forza, ma viene dopo. */
@media (hover:none){
  .gal-tessera .gal-foto-azioni{opacity:1}
}

.gal-cliente .gal-vuoto{text-align:center;color:var(--ink-3);font-size:14px;
  padding:70px 20px}

/* La pillola che galleggia: l'unica cosa che sta sopra le foto mentre
   si scorre, e compare solo quando c'e' qualcosa da dire (una foto
   scelta) e solo dopo la copertina. Toccandola si torna in cima, dove
   ci sono le cartelle. */
.gal-volante{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:80;border:0;border-radius:999px;padding:11px 21px;
  background:rgba(20,20,26,.82);color:#fff;font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  transition:opacity .25s ease,transform .25s ease}
@supports (backdrop-filter:blur(8px)){
  .gal-volante{backdrop-filter:blur(8px);background:rgba(20,20,26,.68)}}
.gal-volante:hover{transform:translateX(-50%) translateY(-2px)}
.gal-volante:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ==========================================================================
   3. IL VISORE A PIENO SCHERMO
   Silenzioso: fondo quasi nero, la foto in mezzo, i comandi appena
   accennati. Si chiude con Esc, col dito da telefono, o cliccando fuori.
   ========================================================================== */
.gal-schermo{position:fixed;inset:0;z-index:900;background:rgba(8,8,10,.97);
  display:grid;place-items:center;padding:0}
.gal-schermo img{max-width:calc(100% - 32px);max-height:calc(100svh - 128px);
  max-height:calc(100vh - 128px);object-fit:contain;display:block;
  border-radius:4px}
@supports (max-height:100svh){
  .gal-schermo img{max-height:calc(100svh - 128px)}}

.gal-chiudi{position:absolute;top:16px;right:18px;z-index:2;width:44px;height:44px;
  border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.6);
  font-size:26px;line-height:1;cursor:pointer;transition:var(--tr)}
.gal-chiudi:hover{color:#fff;background:rgba(255,255,255,.1)}

/* Le frecce sono li' ma non chiedono attenzione: mezze spente finche'
   non ci passi sopra. */
.gal-freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:56px;height:56px;border:0;border-radius:50%;background:transparent;
  color:rgba(255,255,255,.5);font-size:34px;line-height:1;cursor:pointer;
  transition:var(--tr)}
.gal-freccia:hover{color:#fff;background:rgba(255,255,255,.1)}
.gal-freccia:disabled{opacity:.16;cursor:default}
.gal-freccia:disabled:hover{background:transparent;color:rgba(255,255,255,.5)}
.gal-freccia-sx{left:10px}
.gal-freccia-dx{right:10px}

.gal-schermo-barra{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:2;display:flex;gap:10px;align-items:center}
.gal-cuore-grande{position:static;width:auto;height:auto;padding:11px 22px;
  border-radius:999px;font-size:13.5px;font-weight:600;gap:8px;
  background:rgba(255,255,255,.12);color:#fff}
.gal-cuore-grande:hover{background:rgba(255,255,255,.22)}
.gal-cuore-grande.gal-cuore-pieno{background:var(--ok);color:var(--on-ok)}
.gal-scarica{color:#fff;font-size:13.5px;text-decoration:none;font-weight:600;
  background:rgba(255,255,255,.12);padding:11px 22px;border-radius:999px;
  transition:var(--tr)}
.gal-scarica:hover{background:rgba(255,255,255,.22);text-decoration:none}

/* ==========================================================================
   4. PASSWORD E PORTA CHIUSA
   Sono la prima pagina che il cliente vede quando c'e' la password:
   devono avere la stessa faccia della galleria, non quella di un
   modulo di accesso qualsiasi.
   ========================================================================== */
.gal-cancello{max-width:430px;margin:0 auto;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:40px 26px;gap:8px}
.gal-cancello .gal-marchio{background:var(--ink);border-color:var(--ink);
  margin-bottom:26px}
.gal-cancello h1{font-size:27px;margin:0 0 12px;line-height:1.15}
.gal-cancello p{font-size:14px;color:var(--ink-2);line-height:1.65;margin:0 0 20px}
.gal-cancello form{display:flex;flex-direction:column;gap:11px;width:100%;
  max-width:310px;margin-top:6px}
.gal-motivo{font-size:15px!important;color:var(--ink)!important;font-weight:600}
.gal-cancello-nota{font-size:13px!important;color:var(--ink-3)!important;
  margin-bottom:0!important}
.gal-errore{color:var(--bad);font-size:13.5px;font-weight:600;margin:0 0 12px!important}
.gal-errore-grande{max-width:520px;margin:0 auto;min-height:70vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--bad);font-size:15px;line-height:1.6;padding:30px 24px}

/* ==========================================================================
   5. DAL TELEFONO
   E' li' che il cliente apre il link la prima volta, ed e' li' che lo
   gira agli amici.
   ========================================================================== */
@media (max-width:640px){
  /* UNA foto per riga. Su uno schermo da 375 px due colonne fanno due
     francobolli: si torna a cercare invece di guardare. */
  .gal-cliente{--gal-margine:14px;--gal-respiro:12px;--gal-raggio:12px}
  .gal-corpo-foto{padding:38px var(--gal-margine) 80px}
  .gal-guida{margin-bottom:26px;font-size:13px}
  .gal-tab{gap:18px;margin-bottom:28px}
  .gal-apertura-nome{max-width:13ch}
  .gal-marchio{padding:11px 18px}
  .gal-marchio-img{width:112px}
  .gal-apertura-data{font-size:11.5px;letter-spacing:.26em;text-indent:.26em}
  .gal-freccia{width:48px;height:48px;font-size:29px}
  .gal-freccia-sx{left:2px}
  .gal-freccia-dx{right:2px}
  .gal-schermo img{max-width:calc(100% - 12px);max-height:calc(100svh - 112px)}
  .gal-volante{bottom:16px}
}

/* Queste tre restano di Giovanni: sono la sua pagina, non quella del
   cliente. Stavano gia' qui e non le tocco. */
@media (max-width:768px){
  .gal-link{flex-direction:column}
  .gal-link-azioni{width:100%}
  .gal-griglia{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}
/* ==========================================================================
   LA PAGINA PERSONALE DEL CLIENTE  (prefisso pcl-)
   Un link solo per cliente, con dentro tutte le sue consegne.
   Le classi "gal-" restano quelle delle gallerie e non si toccano: qui
   si riusano solo dove il pezzo e' proprio lo stesso (il mosaico delle
   foto, la foto a schermo intero), cosi' non ci sono due stili che
   descrivono la stessa cosa e col tempo si scostano.
   ========================================================================== */

/* ---- l'elenco delle consegne, quello che il cliente apre ---- */
.pcl-elenco{
  display:grid;gap:16px;padding:0 16px 32px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  max-width:1100px;margin:0 auto;
}
.pcl-consegna{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.pcl-copertina{
  display:block;width:100%;aspect-ratio:3/2;padding:0;border:0;
  background:var(--sunken);cursor:pointer;overflow:hidden;
}
.pcl-copertina[disabled]{cursor:default}
.pcl-copertina img{width:100%;height:100%;object-fit:cover;display:block}
.pcl-senza-copertina{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:34px;color:var(--ink-3);
}
.pcl-consegna-testo{padding:14px 16px 18px}
.pcl-consegna-testo h2{margin:0;font-size:17px;line-height:1.3;color:var(--ink)}
.pcl-quando{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.pcl-quante{margin:2px 0 0;font-size:13px;color:var(--ink-3)}

/* Una consegna chiusa SI VEDE, spenta, con scritto perche'. Non sparisce:
   chi non trova piu' una consegna che c'era pensa di aver perso le foto. */
.pcl-consegna-spenta{opacity:.72}
.pcl-consegna-spenta .pcl-copertina{
  background:repeating-linear-gradient(45deg,var(--sunken),var(--sunken) 10px,
             var(--line-soft) 10px,var(--line-soft) 20px);
}
.pcl-motivo{
  margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2);
  background:var(--sunken);border-radius:var(--r-s);padding:8px 10px;
}

.pcl-apri{
  margin-top:12px;border:0;border-radius:var(--r-m);cursor:pointer;
  background:var(--accent);color:var(--on-accent);font:inherit;font-size:14px;
  padding:10px 16px;min-height:44px;width:100%;
}
.pcl-apri:hover{background:var(--accent-ink)}

.pcl-indietro{
  border:0;background:none;padding:6px 0;margin:0 0 6px;cursor:pointer;
  font:inherit;font-size:15px;color:var(--accent);min-height:44px;
}
.pcl-piede{
  max-width:1100px;margin:0 auto;padding:8px 16px 40px;
  color:var(--ink-3);font-size:13px;text-align:center;
}

/* ---- la pagina di Giovanni ---- */
.pcl-riga{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.pcl-riga:last-child{border-bottom:0}
.pcl-riga-nome{
  border:0;background:none;padding:0;margin:0;text-align:left;font:inherit;
  font-weight:600;color:var(--ink);cursor:pointer;
}
button.pcl-riga-nome:hover{color:var(--accent);text-decoration:underline}
.pcl-riga-meta{font-size:13px;color:var(--ink-2);flex:1}
.pcl-riga-spenta{opacity:.6}
.pcl-spento{
  font-size:12px;color:var(--bad);background:var(--bad-bg);
  border-radius:var(--r-s);padding:2px 8px;
}

.pcl-suggerimenti{border-left:3px solid var(--warn)}
.pcl-sugg{
  padding:12px 0;border-bottom:1px solid var(--line-soft);
}
.pcl-sugg:last-child{border-bottom:0}
.pcl-sugg-chi{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px}
.pcl-sugg-lead{display:inline-flex;gap:6px;align-items:baseline}
.pcl-sugg-data{font-size:12px;color:var(--ink-3)}
.pcl-sugg-attenzione{
  margin:0 0 8px;font-size:13px;line-height:1.45;
  color:var(--warn-ink);background:var(--warn-bg);
  border-radius:var(--r-s);padding:8px 10px;
}

.pcl-controllo{border-left:3px solid var(--accent)}
.pcl-vede{
  display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;
  padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px;
}
.pcl-vede:last-child{border-bottom:0}
.pcl-vede span{color:var(--ink-2);font-size:13px}
.pcl-vede-spenta{opacity:.65}

.pcl-link{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line-soft);
}
.pcl-link:last-child{border-bottom:0}
.pcl-link-revocato{opacity:.55;text-decoration:line-through}
.pcl-link-url{
  font-size:13px;word-break:break-all;background:var(--sunken);
  border-radius:var(--r-s);padding:4px 8px;color:var(--ink);
}
.pcl-link-meta{font-size:12px;color:var(--ink-3);flex:1}

/* ---- i documenti, raggruppati per lavoro ---- */
.pcl-docgruppo{margin-bottom:14px}
.pcl-docgruppo:last-child{margin-bottom:0}
.pcl-docgruppo-titolo{
  font-size:12.5px;font-weight:700;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.02em;
  padding:10px 0 4px;
}

/* ---- dal telefono ----
   La pagina del cliente si guarda quasi sempre da li'. Una colonna
   sola, e ogni cosa da premere alta almeno 44 px: sotto quella misura
   un dito grosso prende il cuore della foto sbagliata. */
@media (max-width:600px){
  .pcl-elenco{grid-template-columns:1fr;gap:14px;padding:0 12px 28px}
  .pcl-consegna-testo{padding:12px 14px 16px}
  .pcl-riga{align-items:flex-start;flex-direction:column;gap:6px}
  .pcl-riga-meta{flex:none}
  .pcl-link{flex-direction:column;align-items:flex-start}
  .pcl-link-url{width:100%}
  .pcl-vede{flex-direction:column;gap:2px}
}


/* ---- tappe del percorso, nella scheda del lead confermato ---- */
.tappe-elenco{display:flex;flex-direction:column;gap:8px}
.tappa-riga{display:flex;align-items:center;gap:8px}
.tappa-numero{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--sunken);color:var(--ink-2);font-size:11.5px;font-weight:700;
  display:grid;place-items:center}
.tappa-riga .form-input{flex:1}
.tappa-togli{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);border-radius:var(--r-s);
  cursor:pointer;font-size:16px;line-height:1}
.tappa-togli:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}

/* ---- allegati del lead: miniature cliccabili ---- */
.allegato-riquadro{position:relative;width:64px;height:64px}
.allegato-apri{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border:1px solid var(--line-soft);border-radius:6px;
  overflow:hidden;background:var(--sunken)}
.allegato-apri img{width:100%;height:100%;object-fit:cover;display:block}
.allegato-nomefile{font-size:9.5px;color:var(--ink-3);text-align:center;
  padding:4px;overflow-wrap:anywhere;line-height:1.25}
.allegato-elimina{position:absolute;top:-6px;right:-6px;width:18px;height:18px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);
  border-radius:50%;cursor:pointer;font-size:12px;line-height:1;padding:0}
.allegato-elimina:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.tappa-verifica{font-size:11.5px;color:var(--ink-3);margin:2px 0 0 30px}
.tappa-verifica-ok{color:var(--ok,#15803D)}
.tappa-verifica-no{color:var(--bad,#B91C1C);font-weight:600}
.tappe-link{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.tappe-link input[readonly]{background:var(--sunken);cursor:pointer;font-size:12.5px}
@media (max-width:600px){
  .tappa-riga{flex-wrap:wrap}
  .tappa-riga input[placeholder='Es: Casa sposi']{max-width:none!important;width:100%}
}


/* ------------------------------------------------------------------
   CHI PAGA, dentro la finestra di modifica veloce del lead

   Prefisso "chipaga-": nessuna di queste classi si sovrappone a quelle
   della pagina intera del cliente (che usa "ana-") ne' a nessun'altra.
   Le due cose devono poter cambiare senza darsi fastidio.
   ------------------------------------------------------------------ */
.chipaga-testata{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:6px}
.chipaga-etichetta{margin:0}
/* I due tasti stanno in un contenitore SOLO: e' quello a spingersi a
   destra e ad andare a capo come blocco unico se manca spazio. Prima
   "margin-left:auto" stava sul primo tasto da solo: si spingeva a
   destra senza lasciare piu' posto al secondo, che andava a capo da
   solo, storto. */
.chipaga-tasti-coppia{display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;margin-left:auto}
/* Il tasto e' piccolo: e' facoltativo, non deve gridare quanto i campi
   obbligatori. Font e altezza fissi (non "inherit"): i due tasti
   risultavano sfalsati perche' ereditavano metriche leggermente
   diverse dal contesto in cui capitavano di stare. */
.chipaga-tasto{display:inline-flex;align-items:center;justify-content:center;
  gap:6px;height:26px;box-sizing:border-box;
  border:1px solid var(--line);background:var(--sunken);color:var(--ink-2);
  border-radius:999px;padding:0 11px;font-family:inherit;font-size:12px;
  font-weight:600;line-height:1;cursor:pointer;transition:var(--tr)}
@media (max-width:600px){
  /* Da telefono i due tasti vanno a tutta larghezza, uno sopra l'altro:
     affiancati stretti diventavano illeggibili. */
  .chipaga-testata{flex-direction:column;align-items:stretch}
  .chipaga-tasti-coppia{margin-left:0;flex-direction:column;align-items:stretch}
  .chipaga-tasto{width:100%}
}
.chipaga-tasto:hover{border-color:var(--accent);color:var(--accent-ink);
  background:var(--accent-soft)}
.chipaga-tasto:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.chipaga-scelta{display:flex;align-items:flex-start;gap:10px;margin-top:8px;
  padding:9px 11px;border:1px solid var(--accent);border-radius:var(--r-m);
  background:var(--accent-soft)}
.chipaga-corpo{flex:1;min-width:0}
.chipaga-nome{display:flex;align-items:baseline;gap:6px;font-weight:600;
  font-size:14px;line-height:1.3;word-break:break-word}
.chipaga-sotto{font-size:12px;color:var(--ink-3);margin-top:2px;
  word-break:break-word}
.chipaga-togli{flex-shrink:0;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);border-radius:var(--r-s);padding:4px 10px;font:inherit;
  font-size:12px;cursor:pointer;transition:var(--tr)}
.chipaga-togli:hover{border-color:var(--danger);color:var(--danger)}
.chipaga-attesa{font-size:12.5px;color:var(--ink-3);padding:7px 0}

.chipaga-pannello{margin-top:10px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--sunken)}
.chipaga-esito{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.chipaga-esito:last-of-type{border-bottom:0}
.chipaga-vuoto{font-size:13px;color:var(--ink-3);padding:9px 0;line-height:1.5}
.chipaga-tasti{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

/* Da telefono: i tasti a tutta larghezza e la riga del risultato in
   colonna, se no il nome dell'agenzia schiaccia il pulsante Collega. */
@media (max-width:640px){
  .chipaga-tasto{margin-left:0}
  .chipaga-esito{flex-direction:column;align-items:stretch;gap:8px}
  .chipaga-esito .btn{width:100%}
  .chipaga-tasti .btn{flex:1;min-width:120px}
  .chipaga-pannello .form-row{grid-template-columns:1fr}
}

/* == completamento-gallerie-149 == */
/* ================================================================
   COMPLETAMENTO GALLERIE (149) — cestino sulle bozze, cartella
   obbligatoria prima di caricare, copertine ad hoc orizz./vert.
   Tutto qui sotto e' IN CODA al file apposta: non si tocca il blocco
   di nessun altro lavoro, qualunque cosa ci sia scritta sopra.
   ================================================================ */

.gal-riga-cestino{flex-shrink:0;margin-right:2px}

/* ---- cartella obbligatoria prima di caricare (punto 2) ---- */
.gal-cartelle-primo{margin-top:2px}
.gal-cartelle-avviso{font-size:12px;color:var(--warn-ink);margin-top:9px;
  line-height:1.5}
.gal-zona-bloccata{cursor:not-allowed;opacity:.55}
.gal-zona-bloccata:hover{border-color:var(--line);background:var(--surface)}

/* ---- copertina ad hoc, due tagli (punto 3) ---- */
.gal-copertina-pannello{display:grid;gap:14px;margin-top:13px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gal-copertina-slot{display:flex;gap:11px;align-items:center;padding:10px;
  border:1px solid var(--line-soft);border-radius:var(--r-m);background:var(--surface)}
.gal-copertina-slot-anteprima{width:88px;height:56px;border-radius:8px;
  overflow:hidden;background:var(--sunken);flex-shrink:0;display:grid;
  place-items:center}
.gal-copertina-slot-verticale{width:56px;height:88px}
.gal-copertina-slot-anteprima img{width:100%;height:100%;object-fit:cover}
.gal-copertina-slot-corpo{flex:1;min-width:0}
.gal-copertina-slot-etichetta{font-size:12.5px;font-weight:600;margin-bottom:6px}

@media (max-width:640px){
  .gal-copertina-pannello{grid-template-columns:1fr}
}

/* == gallerie-stile-163 == */
/* ================================================================
   GALLERIE: STILE E FLUSSO A 4 PASSI (163) — intestazione fissa
   (punto 12), layout quadrato alternativo (punto 11), quattro temi
   (punto 4), lo stepper del flusso a passi (punto 13). In coda al
   file, come sempre: non si tocca il blocco di nessun altro lavoro.
   ================================================================ */

/* ---- lo stepper a 4 passi, orizzontale, nella pagina di Giovanni ---- */
.gal-passi{display:flex;gap:0;margin-top:16px;overflow-x:auto}
.gal-passo{display:flex;flex-direction:column;align-items:center;gap:6px;
  flex:1;min-width:84px;border:0;background:none;font:inherit;cursor:pointer;
  padding:6px 4px 0;position:relative;color:var(--ink-3)}
.gal-passo:not(:last-child)::after{content:"";position:absolute;top:17px;
  left:56%;right:-44%;height:2px;background:var(--line)}
.gal-passo-pallino{width:26px;height:26px;border-radius:999px;flex-shrink:0;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--sunken);color:var(--ink-3);border:2px solid var(--line);
  position:relative;z-index:1}
.gal-passo-etichetta{font-size:11px;text-align:center;line-height:1.25;
  max-width:100px}
.gal-passo-attivo{color:var(--accent-ink)}
.gal-passo-attivo .gal-passo-pallino{background:var(--accent);color:var(--on-accent);
  border-color:var(--accent)}
.gal-passi-nav{display:flex;justify-content:space-between;gap:10px;
  margin:18px 0 6px}

/* ---- scelte a carte (layout / tema / intestazione, passo 3) ---- */
.gal-scelta-carte{display:grid;gap:11px;margin-top:11px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gal-scelta-carte-quattro{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.gal-carta-scelta{display:flex;flex-direction:column;gap:5px;text-align:left;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);cursor:pointer;transition:var(--tr);font:inherit;
  color:var(--ink)}
.gal-carta-scelta:hover{border-color:var(--accent)}
.gal-carta-scelta strong{font-size:13.5px}
.gal-carta-scelta span{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.gal-carta-scelta-attiva{border-color:var(--accent);background:var(--accent-soft)}

/* ---- pubblica / privata con password (passo 4) ---- */
.gal-scelta-privacy{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.gal-scelta-privacy label{display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer}

/* ---- intestazione fissa: logo + contatti (punto 12) ---- */
.gal-fissa{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:10px 18px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.gal-fissa-logo{display:flex;align-items:center;gap:9px;min-width:0}
.gal-fissa-logo img{height:26px;width:auto;display:block;flex-shrink:0}
.gal-fissa-nome{font-family:var(--font-display);font-size:14px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-fissa-contatti{display:flex;align-items:center;gap:14px;flex-shrink:0}
.gal-fissa-contatti a{font-size:17px;line-height:1;text-decoration:none;
  opacity:.75;transition:opacity .2s}
.gal-fissa-contatti a:hover{opacity:1}

/* la variante laterale: da schermo grande diventa una colonna fissa a
   sinistra; dal telefono torna in alto -- una barra piena non ha senso
   su uno schermo stretto. */
@media (min-width:761px){
  body.gal-header-lato{padding-left:74px}
  body.gal-header-lato .gal-fissa{position:fixed;top:0;left:0;bottom:0;
    width:74px;height:100vh;flex-direction:column;justify-content:flex-start;
    padding:18px 0;border-bottom:0;border-right:1px solid var(--line)}
  body.gal-header-lato .gal-fissa-logo{flex-direction:column;gap:6px}
  body.gal-header-lato .gal-fissa-nome{writing-mode:vertical-rl;font-size:11px;
    max-height:120px}
  body.gal-header-lato .gal-fissa-contatti{flex-direction:column;margin-top:auto}
}

/* ---- layout: quadrato classico invece del mosaico (punto 11) ----
   Il mosaico resta il motore vero (colonne calcolate in JS, forma
   originale delle foto): il quadrato e' un vestito diverso sullo
   STESSO markup. .gal-colonna sparisce dal calcolo del layout
   (display:contents), cosi' ogni tessera diventa una cella diretta di
   una griglia semplice; l'aspect-ratio calcolato in linea si
   sovrascrive per forza a 1:1 (e' un attributo di stile, ci vuole
   !important per batterlo). */
.gal-layout-quadrato .gal-colonne{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.gal-layout-quadrato .gal-colonna{display:contents}
.gal-layout-quadrato .gal-tessera img{aspect-ratio:1 !important;object-fit:cover}

/* ---- i tre layout STRUTTURALI (completamento gallerie, parte A):
   "rivista", "storia" e "collage" cambiano davvero come le foto stanno
   in pagina, non solo colore/carattere -- stessa idea del quadrato qui
   sopra (.gal-colonna sparisce con display:contents, ogni tessera
   diventa una cella diretta di una griglia), portata avanti con celle
   di larghezza e altezza diverse invece che tutte uguali. ---- */

/* RIVISTA: una foto protagonista in alto (tutta la larghezza), poi
   righe che alternano una foto larga e una stretta, come le pagine di
   un giornale patinato. object-fit:cover con aspect-ratio forzato ad
   "auto": qui e' la CELLA della griglia a dettare la forma (span di
   colonne/righe), non piu' la forma vera della foto come nel mosaico --
   e' il compromesso che rende possibile allineare righe fatte di foto
   di proporzioni diverse. */
.gal-layout-rivista .gal-colonne{display:grid;
  grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:14px}
.gal-layout-rivista .gal-colonna{display:contents}
.gal-layout-rivista .gal-tessera{height:100%}
.gal-layout-rivista .gal-tessera img{width:100%;height:100%;
  aspect-ratio:auto !important;object-fit:cover}
.gal-layout-rivista .gal-tessera:first-of-type{grid-column:span 6;grid-row:span 4}
.gal-layout-rivista .gal-tessera:nth-of-type(4n+2):not(:first-of-type){
  grid-column:span 4;grid-row:span 2}
.gal-layout-rivista .gal-tessera:nth-of-type(4n+3){grid-column:span 2;grid-row:span 2}
.gal-layout-rivista .gal-tessera:nth-of-type(4n){grid-column:span 2;grid-row:span 2}
.gal-layout-rivista .gal-tessera:nth-of-type(4n+1):not(:first-of-type){
  grid-column:span 4;grid-row:span 2}
@media (max-width:640px){
  .gal-layout-rivista .gal-colonne{grid-template-columns:repeat(2,1fr);
    grid-auto-rows:150px}
  .gal-layout-rivista .gal-tessera{grid-column:span 1 !important;grid-row:span 2 !important}
  .gal-layout-rivista .gal-tessera:first-of-type{
    grid-column:span 2 !important;grid-row:span 3 !important}
}

/* STORIA: scorrimento verticale a tutta larghezza, una foto alla volta,
   grande e minimale -- niente carte, niente bordi arrotondati, niente
   cuore/scarica finche' non ci si passa sopra (stesso comportamento del
   mosaico, solo che qui c'e' una foto sola per "riga"). galleria-
   cliente.js forza colonneQuante a 1 per questo layout (vedi
   misuraColonne()): serve una sola .gal-colonna perche' l'ordine di
   scorrimento resti quello vero, non quello a turno fra due colonne. */
.gal-layout-storia .gal-corpo-foto{max-width:none;padding-left:0;padding-right:0}
.gal-layout-storia .gal-guida,
.gal-layout-storia .gal-tab{max-width:46ch;margin-left:auto;margin-right:auto}
.gal-layout-storia .gal-colonne{display:block}
.gal-layout-storia .gal-colonna{display:block}
.gal-layout-storia .gal-tessera{width:100%;margin:0 0 3px;border-radius:0}
.gal-layout-storia .gal-tessera img{width:100%;height:auto;max-height:92vh;
  object-fit:cover;border-radius:0;aspect-ratio:auto !important}

/* COLLAGE: composizione asimmetrica, foto di misure diverse mescolate,
   non allineate a una griglia regolare -- il contrario apposta del
   quadrato qui sopra. grid-auto-flow:dense riempie i buchi che uno span
   diverso lascia, cosi' non restano celle vuote. Il ciclo si ripete
   ogni 7 foto: abbastanza lungo da non sembrare un motivo che si vede
   ripetere a colpo d'occhio, corto abbastanza da restare leggibile qui
   nel foglio di stile. */
.gal-layout-collage .gal-colonne{display:grid;
  grid-template-columns:repeat(8,1fr);grid-auto-rows:90px;
  grid-auto-flow:dense;gap:10px}
.gal-layout-collage .gal-colonna{display:contents}
.gal-layout-collage .gal-tessera{height:100%}
.gal-layout-collage .gal-tessera img{width:100%;height:100%;
  aspect-ratio:auto !important;object-fit:cover}
.gal-layout-collage .gal-tessera:nth-of-type(7n+1){grid-column:span 4;grid-row:span 4}
.gal-layout-collage .gal-tessera:nth-of-type(7n+2){grid-column:span 2;grid-row:span 2}
.gal-layout-collage .gal-tessera:nth-of-type(7n+3){grid-column:span 2;grid-row:span 3}
.gal-layout-collage .gal-tessera:nth-of-type(7n+4){grid-column:span 3;grid-row:span 2}
.gal-layout-collage .gal-tessera:nth-of-type(7n+5){grid-column:span 3;grid-row:span 3}
.gal-layout-collage .gal-tessera:nth-of-type(7n+6){grid-column:span 2;grid-row:span 2}
.gal-layout-collage .gal-tessera:nth-of-type(7n){grid-column:span 4;grid-row:span 3}
@media (max-width:640px){
  .gal-layout-collage .gal-colonne{grid-template-columns:repeat(4,1fr);
    grid-auto-rows:110px}
  .gal-layout-collage .gal-tessera{grid-column:span 2 !important;grid-row:span 2 !important}
  .gal-layout-collage .gal-tessera:nth-of-type(3n+1){
    grid-column:span 4 !important;grid-row:span 3 !important}
}

/* ---- quattro temi (punto 4): solo colore d'accento e carattere del
   nome, sopra la stessa .gal-cliente -- zero font nuovi, zero
   richieste di rete in piu'. "moderno" e' quello di oggi: non ha una
   regola qui perche' non deve cambiare niente. ---- */
.gal-tema-semplice{--accent:#2B2B33;--accent-2:#55555F;--accent-ink:#1B1B21;--on-accent:#fff}
.gal-tema-semplice .gal-apertura-nome{font-family:var(--font-sans);
  font-weight:600;letter-spacing:-.01em}

.gal-tema-elegante{--accent:#8A6D3B;--accent-2:#B08D55;--accent-ink:#6B5228;--on-accent:#fff}
.gal-tema-elegante .gal-apertura-nome{font-style:italic;letter-spacing:.01em}

.gal-tema-oldstyle{--accent:#7A6A52;--accent-2:#9C8B6E;--accent-ink:#5C4E3A;--on-accent:#fff}
.gal-tema-oldstyle .gal-apertura-nome{font-variant:small-caps;letter-spacing:.04em}
.gal-tema-oldstyle .gal-apertura-velo{filter:sepia(.25)}

/* == gallerie-rifiniture-175 == */
/* ================================================================
   GALLERIE: RIFINITURE (175) — demo grafiche nelle scelte di stile,
   contatti completi con icone SVG vere, logo mai deformato, anteprima
   dall'elenco con ritorno rapido allo stile. In coda al file, come
   sempre: non si tocca il blocco di nessun altro lavoro.
   ================================================================ */

/* ---- il logo nell'intestazione fissa NON si deforma mai (punto 4) ----
   Una scatola di misura fissa, e la foto ci sta dentro in proporzione
   (object-fit:contain): qualunque sia il rapporto larghezza/altezza del
   logo vero, non viene mai ne' schiacciato ne' tagliato. Prima c'era
   solo height:26px;width:auto, che va bene finche' il contenitore ha
   spazio -- nella barra laterale, stretta 74px, un logo largo ci
   sarebbe uscito fuori. */
.gal-fissa-logo img{height:26px;width:56px;object-fit:contain;
  object-position:left center;display:block;flex-shrink:0}
body.gal-header-lato .gal-fissa-logo img{width:48px;height:34px;
  object-position:center}

/* ---- le icone SVG dei contatti (punto 3): stesso trattamento
   dell'emoji che sostituiscono, currentColor cosi' seguono il tema. ---- */
.gal-fissa-contatti a{display:inline-flex}
.gal-fissa-contatti svg{width:19px;height:19px;flex-shrink:0}

/* ---- tre pulsanti per riga nell'elenco, non piu' due (punto 5):
   apri, anteprima, cestino. ---- */
.gal-riga-anteprima{flex-shrink:0}

/* ---- intestazioni piccole, per raggruppare dentro un riquadro senza
   aprire una card nuova ogni volta (usata dal pannello di default). ---- */
.gal-sezione-piccola{font-size:12px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}

/* ================================================================
   LE DEMO GRAFICHE (punto 2): un piccolo esempio visivo dentro ogni
   scelta di stile, sempre visibile (funziona anche dal telefono, dove
   il passaggio del mouse non esiste), PIU' un tooltip piu' grande che
   compare al passaggio del mouse o col focus da tastiera -- richiesto
   cosi' esplicitamente dal cliente. Tutto CSS, nessuna immagine da
   scaricare.
   ================================================================ */
.gal-carta-scelta{position:relative}
.gal-demo{display:flex;width:100%;height:34px;border-radius:6px;
  overflow:hidden;background:var(--sunken);margin-bottom:2px}
.gal-demo-grande{width:120px;height:78px;margin:0}

/* layout: mosaico (due colonne sfalsate) e quadrato (griglia fitta) */
.gal-demo-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:3px;
  align-items:start;padding:3px;background:var(--surface)}
.gal-demo-mosaico span{background:var(--accent-2);border-radius:2px}
.gal-demo-mosaico span:nth-child(1){height:70%}
.gal-demo-mosaico span:nth-child(2){height:100%}
.gal-demo-mosaico span:nth-child(3){height:45%}
.gal-demo-grande.gal-demo-mosaico span:nth-child(1){height:60px}
.gal-demo-grande.gal-demo-mosaico span:nth-child(2){height:70px}
.gal-demo-grande.gal-demo-mosaico span:nth-child(3){height:38px}

.gal-demo-quadrato{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  padding:3px;background:var(--surface)}
.gal-demo-quadrato span{background:var(--accent-2);border-radius:2px;
  aspect-ratio:1}

/* layout strutturali (parte A): stesse miniature CSS-only dei due sopra,
   una forma diversa per riquadro invece di un'immagine da scaricare. */
.gal-demo-rivista{display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:3px;padding:3px;background:var(--surface)}
.gal-demo-rivista span{background:var(--accent-2);border-radius:2px}
.gal-demo-rivista span:nth-child(1){grid-column:1/3}

.gal-demo-storia{display:flex;flex-direction:column;gap:3px;padding:3px;
  background:var(--surface)}
.gal-demo-storia span{background:var(--accent-2);border-radius:1px;flex:1}

.gal-demo-collage{display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);gap:3px;padding:3px;background:var(--surface)}
.gal-demo-collage span{background:var(--accent-2);border-radius:2px}
.gal-demo-collage span:nth-child(1){grid-column:1/3;grid-row:1/3}
.gal-demo-collage span:nth-child(2){grid-column:3/5;grid-row:1/2}
.gal-demo-collage span:nth-child(3){grid-column:3/4;grid-row:2/4}
.gal-demo-collage span:nth-child(4){grid-column:4/5;grid-row:2/3}
.gal-demo-collage span:nth-child(5){grid-column:1/3;grid-row:3/4}

/* temi: una pastiglia colorata col carattere del tema */
.gal-demo-tema-moderno{background:var(--brand);align-items:center;justify-content:center}
.gal-demo-tema-semplice{background:#2B2B33;align-items:center;justify-content:center}
.gal-demo-tema-elegante{background:#8A6D3B;align-items:center;justify-content:center}
.gal-demo-tema-oldstyle{background:#7A6A52;align-items:center;justify-content:center}
.gal-demo b{color:#fff;font-family:var(--font-display);font-size:15px;
  font-weight:800}
.gal-demo-grande b{font-size:26px}
.gal-demo-tema-semplice b{font-family:var(--font-sans);
  font-weight:700;letter-spacing:-.02em}
.gal-demo-tema-elegante b{font-style:italic}
.gal-demo-tema-oldstyle b{font-variant:small-caps;letter-spacing:.06em}

/* intestazione: barra in alto o laterale, in miniatura */
.gal-demo-header-top,.gal-demo-header-lato{position:relative;
  background:var(--surface);border:1px solid var(--line)}
.gal-demo-header-top .gal-demo-barra{position:absolute;top:0;left:0;right:0;
  height:22%;background:var(--accent)}
.gal-demo-header-lato .gal-demo-barra{position:absolute;top:0;left:0;bottom:0;
  width:22%;background:var(--accent)}

/* il tooltip: nascosto finche' non passa il mouse o non arriva il fuoco
   da tastiera. Su un telefono (niente hover) resta chiuso: la demo
   piccola, sempre visibile, basta gia' a far capire la differenza. */
.gal-demo-tooltip{position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(5px);width:160px;
  background:var(--ink);border-radius:var(--r-m);padding:11px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;z-index:30;
  transition:opacity .15s,transform .15s;pointer-events:none}
.gal-demo-tooltip em{color:#fff;font-size:11px;font-style:normal;
  line-height:1.4;text-align:center}
.gal-carta-scelta:hover .gal-demo-tooltip,
.gal-carta-scelta:focus-visible .gal-demo-tooltip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (hover:none){.gal-demo-tooltip{display:none}}

/* ================================================================
   L'ANTEPRIMA DENTRO LA PAGINA (punti 5 e 6): un riquadro a schermo
   intero con una barra sottile sopra -- non un'altra scheda del
   browser, cosi' "torna allo stile" puo' riportare dritto al passo 3.
   ================================================================ */
.gal-anteprima-overlay{position:fixed;inset:0;z-index:200;
  background:var(--ground);display:flex;flex-direction:column}
.gal-anteprima-barra{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--line);flex-shrink:0}
.gal-anteprima-titolo{font-size:12.5px;color:var(--ink-3);text-align:center;
  flex:1}
.gal-anteprima-iframe{flex:1;width:100%;border:0;background:var(--ground)}
@media (max-width:600px){
  .gal-anteprima-titolo{display:none}
}

/* == gallerie-download-165 == */
/* ================================================================
   GALLERIE: DOWNLOAD, FOTO ORFANE, CORREZIONI (165). In coda al
   file, come sempre: non si tocca il blocco di nessun altro lavoro.
   ================================================================ */

/* ---- la barra laterale, molto piu' larga (il logo ci deve stare
   per intero, non solo "senza deformarsi in uno spazio stretto" come
   nel 175 -- qui lo spazio stesso cresce). Le regole successive nello
   stesso file vincono su quelle di prima a parita' di selettore: non
   serve toccare il blocco del 163. ---- */
@media (min-width:761px){
  body.gal-header-lato{padding-left:172px}
  body.gal-header-lato .gal-fissa{width:172px;padding:26px 16px;
    align-items:flex-start}
  body.gal-header-lato .gal-fissa-logo{flex-direction:column;
    align-items:flex-start;gap:10px}
  body.gal-header-lato .gal-fissa-nome{writing-mode:horizontal-tb;
    font-size:13px;max-height:none;text-align:left;white-space:normal}
  body.gal-header-lato .gal-fissa-contatti{flex-direction:column;
    align-items:flex-start;gap:16px}
}
body.gal-header-lato .gal-fissa-logo img{width:128px;height:80px;
  object-position:left center}

/* ---- l'accordion del pannello di default (rinominato, chiuso di
   default): stesse classi della pagina Impostazioni (171), cosi' il
   comportamento e' identico -- li' vivono in uno stile proprio della
   pagina, qui li' replico per la pagina Gallerie. ---- */
.accordion-sezione{margin-bottom:16px;border:1px solid var(--line-soft);
  border-radius:12px;overflow:hidden;background:var(--surface,transparent)}
.accordion-testata{display:flex;align-items:center;gap:10px;width:100%;
  padding:16px 20px;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit}
.accordion-testata:hover{background:var(--bg-soft,rgba(0,0,0,.02))}
.accordion-titolo{font-weight:700;font-size:15px;flex:1}
.accordion-conta{font-size:12px;color:var(--ink-2);font-weight:500}
.accordion-freccia{display:inline-block;transition:transform .15s ease;
  color:var(--ink-2);font-size:12px}
.accordion-freccia.aperta{transform:rotate(180deg)}
.accordion-corpo{padding:0 20px 20px}
/* ---- LA TESTATA CLICCABILE DI UN PANNELLO CHE SI APRE E SI CHIUDE ----
   Sfondo piu' scuro del riquadro, cosi' si capisce a colpo d'occhio che
   ci si clicca sopra (prima era dello stesso identico colore del corpo e
   sembrava solo un titolo). E' una classe CONDIVISA: si scrive accanto a
   .accordion-testata su qualunque pannello del CRM.

   Perche' il selettore doppio .accordion-testata.testata-cliccabile:
   alcune pagine si riscrivono .accordion-testata nel proprio foglio di
   stile, che viene caricato DOPO questo. Due classi insieme "pesano" piu'
   di una sola, quindi questa regola vince anche li'. */
.testata-cliccabile,
.accordion-testata.testata-cliccabile{background:var(--sunken)}
@supports (background:color-mix(in srgb,red,blue)){
  .testata-cliccabile,
  .accordion-testata.testata-cliccabile{
    background:color-mix(in srgb,var(--sunken) 55%,var(--line))}
  .testata-cliccabile:hover,
  .accordion-testata.testata-cliccabile:hover{background:var(--line)}
}
.accordion-sezione .testata-cliccabile{border-bottom:1px solid var(--line-soft)}

/* ---- l'icona accanto al titolo in cima alla pagina ----
   Stessa icona della voce di menu corrispondente (vedi _icone.html), un
   filo piu' grande del testo e leggermente smorzata, per accompagnare il
   titolo senza rubargli la scena. Solo nella barra in alto: il titolo
   dentro .page-header lo lascio esattamente com'era. */
.top-bar .page-title{display:flex;align-items:center;gap:9px;min-width:0}
.ico-titolo{width:20px;height:20px;opacity:.7}


/* ---- il filtro "senza cartella" e il selettore per spostare una foto
   (foto orfane, punto 2) ---- */
.gal-filtro-cartella{max-width:280px;margin-bottom:13px}
.gal-cella-cartella{width:100%;font-size:11px;padding:4px 6px;margin-top:5px}
.gal-cella-orfana{outline:2px solid var(--warn);outline-offset:-2px}

/* ---- "scarica tutto" nella pagina pubblica ---- */
.gal-scarica-tutto{display:inline-block;margin-top:9px;font-size:12.5px;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.gal-scarica-tutto:hover{color:var(--accent-ink)}

/* == gallerie-marchio-189 == */
/* ================================================================
   GALLERIE: SELEZIONE MULTIPLA E MARCHIO (189). In coda al file,
   come sempre: non si tocca il blocco di nessun altro lavoro.
   ================================================================ */

/* ---- cerca per nome + filtro cartella, affiancati ---- */
.gal-cerca-e-filtro{display:grid;gap:13px;margin-bottom:13px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---- selezione multipla delle foto (punto 1) ---- */
.gal-cella{position:relative}
.gal-cella-selettore{position:absolute;top:7px;left:7px;z-index:2;
  width:20px;height:20px;accent-color:var(--accent);cursor:pointer}
.gal-selezione-barra{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 13px;margin-bottom:13px;background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:var(--r-m);font-size:12.5px}
.gal-selezione-conta{font-weight:700;color:var(--accent-ink)}
.gal-selezione-barra select{max-width:220px}

/* ---- il pannello del marchio (punto 2): riusa .gal-copertina-slot e
   .gal-scelta-privacy gia' costruiti nel 149/163, niente di nuovo li'.
   Qui solo lo slider e la sua etichetta. ---- */
.gal-marchio-slider{display:flex;flex-direction:column;gap:4px}
.gal-marchio-slider input[type=range]{width:100%;accent-color:var(--accent)}

/* == gallerie-cliente-collegato-191 == */
/* ================================================================
   GALLERIE: CLIENTE COLLEGATO (191). In coda al file, come sempre:
   non si tocca il blocco di nessun altro lavoro.
   ================================================================ */
.gal-cliente-collegato{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.gal-cliente-collegato select{max-width:280px}

/* == gallerie-rifiniture3-197 == */
/* ================================================================
   GALLERIE: RIFINITURE SUL PERCORSO A 4 PASSI (197). In coda al
   file, come sempre: non si tocca il blocco di nessun altro lavoro.
   ================================================================ */

/* ---- lo stepper + il pulsante Avanti in alto (punto 5) ---- */
.gal-passi-riga{display:flex;align-items:center;gap:14px}
.gal-passi-riga .gal-passi{flex:1}
.gal-passi-avanti-alto{flex-shrink:0}
@media (max-width:640px){
  .gal-passi-riga{flex-wrap:wrap}
  .gal-passi-avanti-alto{order:-1;margin-left:auto}
}

/* Un lampeggio piano sul pallino di un passo non ancora visitato: solo
   un accenno che si puo' cliccare, niente che distragga. Rispetta chi
   ha detto al sistema di ridurre le animazioni. */
@keyframes gal-passo-pulsa{
  0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}
  50%{box-shadow:0 0 0 5px var(--accent-soft)}
}
.gal-passo-da-visitare .gal-passo-pallino{
  animation:gal-passo-pulsa 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .gal-passo-da-visitare .gal-passo-pallino{animation:none}
}

/* ---- l'avviso gentile durante il caricamento (punto 1) ---- */
.gal-invio-avviso{margin-top:9px;font-size:12px;color:var(--ink-2);
  line-height:1.5;background:var(--accent-soft);border-radius:var(--r-s);
  padding:8px 10px}

/* ---- il promemoria di pubblicare, passo 4 (punto 3) ---- */
.gal-promemoria-pubblica{display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;margin-top:15px;padding:12px 15px;
  background:var(--warn-bg);border:1px solid var(--warn);
  border-radius:var(--r-m)}
.gal-promemoria-testo{flex:1;min-width:220px;font-size:13px;
  color:var(--ink);line-height:1.5}

/* ==========================================================
   ASSISTENTE_CHAT_203 — pulsante flottante + pannello di chat
   ========================================================== */
.assistente-fab{position:fixed;right:20px;bottom:22px;z-index:140;
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:var(--on-accent);display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-lg);
  transition:transform .15s,background .15s}
.assistente-fab:hover{background:var(--accent-ink);transform:scale(1.05)}
.assistente-fab svg{width:24px;height:24px}
.assistente-fab-attivo{background:var(--accent-ink)}

.assistente-pannello{position:fixed;right:20px;bottom:84px;z-index:145;
  width:376px;max-width:calc(100vw - 32px);height:min(600px,calc(100vh - 120px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}

.assistente-testata{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.assistente-titolo{display:flex;flex-direction:column;gap:1px;min-width:0}
.assistente-titolo-nome{font-family:var(--font-display);font-weight:800;
  font-size:16px;color:var(--ink)}
.assistente-titolo-nota{font-size:11.5px;color:var(--ink-3)}
.assistente-chiudi{border:none;background:transparent;color:var(--ink-3);
  cursor:pointer;font-size:16px;line-height:1;padding:6px;border-radius:var(--r-s)}
.assistente-chiudi:hover{background:var(--sunken);color:var(--ink)}

.assistente-messaggi{flex:1;overflow-y:auto;padding:14px 14px 6px;
  display:flex;flex-direction:column;gap:12px}

.assistente-riga{display:flex;flex-direction:column;gap:8px;max-width:92%}
.assistente-riga-ai{align-self:flex-start;align-items:flex-start}
.assistente-riga-utente{align-self:flex-end;align-items:flex-end}

.assistente-bolla{padding:9px 12px;border-radius:var(--r-m);font-size:13.5px;
  line-height:1.5;white-space:pre-wrap;word-break:break-word}
.assistente-riga-ai .assistente-bolla{background:var(--sunken);color:var(--ink);
  border-bottom-left-radius:4px}
.assistente-riga-utente .assistente-bolla{background:var(--accent);color:var(--on-accent);
  border-bottom-right-radius:4px}

.assistente-bolla-carica{display:flex;gap:4px;padding:12px 14px}
.assistente-bolla-carica span{width:6px;height:6px;border-radius:50%;
  background:var(--ink-3);animation:assistente-puntino 1.2s infinite ease-in-out}
.assistente-bolla-carica span:nth-child(2){animation-delay:.15s}
.assistente-bolla-carica span:nth-child(3){animation-delay:.3s}
@keyframes assistente-puntino{0%,80%,100%{opacity:.3;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.assistente-bolla-carica span{animation:none}}

.assistente-candidati{display:flex;flex-direction:column;gap:6px;width:100%}
.assistente-candidato{display:flex;flex-direction:column;gap:1px;text-align:left;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);cursor:pointer;transition:background .12s,border-color .12s}
.assistente-candidato:hover:not(:disabled){background:var(--accent-soft);
  border-color:var(--accent)}
.assistente-candidato:disabled{cursor:default;opacity:.55}
.assistente-candidato-scelto{background:var(--accent-soft);border-color:var(--accent);
  opacity:1!important}
.assistente-candidato-nome{font-size:13.5px;font-weight:600;color:var(--ink)}
.assistente-candidato-dettagli{font-size:11.5px;color:var(--ink-3)}

.assistente-bozza{width:100%;border:1px solid var(--line);border-radius:var(--r-m);
  padding:11px 12px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.assistente-bozza-titolo{font-weight:600;font-size:13px;color:var(--ink)}
.assistente-bozza-riga{display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--ink-2)}
.assistente-bozza-totale{display:flex;justify-content:space-between;
  font-weight:600;font-size:13px;color:var(--ink);border-top:1px solid var(--line-soft);
  padding-top:6px;margin-top:2px}
.assistente-conferma{margin-top:4px;width:100%;font-size:13px;padding:8px 12px}
.assistente-fatto{display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-size:12.5px;color:var(--ok);margin-top:2px}
.assistente-fatto a{color:var(--accent);font-weight:600}

.assistente-testo-generato{width:100%;display:flex;flex-direction:column;gap:6px}
.assistente-testo-area{width:100%;resize:vertical;min-height:80px;
  border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;
  font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface)}
.assistente-copia{font-size:12.5px;padding:6px 12px;align-self:flex-start}

.assistente-composer{flex-shrink:0;display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px;border-top:1px solid var(--line)}
.assistente-input{flex:1;resize:none;max-height:96px;border:1px solid var(--line-strong);
  border-radius:var(--r-m);padding:9px 12px;font:inherit;font-size:13.5px;
  color:var(--ink);background:var(--sunken)}
.assistente-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.assistente-invia{flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:none;cursor:pointer;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center}
.assistente-invia svg{width:19px;height:19px}
.assistente-invia:disabled{opacity:.4;cursor:default}
.assistente-invia:hover:not(:disabled){background:var(--accent-ink)}

@media (max-width:480px){
  .assistente-pannello{right:12px;left:12px;bottom:80px;width:auto;
    max-width:none;height:min(520px,calc(100vh - 112px))}
  .assistente-fab{right:14px;bottom:16px}
}

/* == gallerie-download-stili-207 == */
/* ================================================================
   GALLERIE: DOWNLOAD NELL'INTESTAZIONE + PIU' STILI (207). In coda
   al file, come sempre: non si tocca il blocco di nessun altro
   lavoro.

   Il pulsante di download nell'intestazione (punto 1) non ha bisogno
   di regole nuove: e' un <a> in piu' dentro .gal-fissa-contatti, che
   ha gia' le sue regole (icona 19x19, opacita' all'hover) sia nella
   versione barra in alto sia in quella laterale -- e' lo stesso
   markup, cambia solo la posizione via CSS. Qui sotto ci sono solo i
   quattro temi nuovi (punto 2): stessa ricetta di sempre, solo colore
   d'accento e carattere del nome sopra la stessa .gal-cliente, zero
   font nuovi da scaricare. */
.gal-tema-vivace{--accent:#E8663F;--accent-2:#F4A377;--accent-ink:#B84A28;--on-accent:var(--on-accent-scuro)}
.gal-tema-vivace .gal-apertura-nome{font-weight:800;letter-spacing:-.01em}

.gal-tema-minimale{--accent:#111114;--accent-2:#3A3A40;--accent-ink:#000;--on-accent:#fff}
.gal-tema-minimale .gal-apertura-nome{font-family:var(--font-sans);
  font-weight:300;letter-spacing:.1em;text-transform:uppercase}
.gal-tema-minimale .gal-apertura-velo{filter:grayscale(1)}

.gal-tema-pastello{--accent:#D98CA0;--accent-2:#F0BFCB;--accent-ink:#B5637B;--on-accent:var(--on-accent-scuro)}
.gal-tema-pastello .gal-apertura-nome{font-style:italic;font-weight:300}

.gal-tema-natura{--accent:#5C7A52;--accent-2:#8CA97E;--accent-ink:#3E5636;--on-accent:#fff}
.gal-tema-natura .gal-apertura-nome{font-weight:500}

/* Le stesse quattro, in miniatura, nelle scelte di stile (passo 3 e
   nel pannello dei default): stessa pastiglia colorata con "Aa" delle
   quattro di prima. */
.gal-demo-tema-vivace{background:#E8663F;align-items:center;justify-content:center}
.gal-demo-tema-minimale{background:#111114;align-items:center;justify-content:center}
.gal-demo-tema-pastello{background:#D98CA0;align-items:center;justify-content:center}
.gal-demo-tema-natura{background:#5C7A52;align-items:center;justify-content:center}
.gal-demo-tema-vivace b{font-weight:800}
.gal-demo-tema-minimale b{font-family:var(--font-sans);font-weight:300;
  letter-spacing:.08em;text-transform:uppercase}
.gal-demo-tema-pastello b{font-style:italic;font-weight:300}
.gal-demo-tema-natura b{font-weight:500}

/* == gallerie-stile2-209 == */
/* ================================================================
   GALLERIE: QUARTO GIRO DI FEEDBACK SUL PASSO 3 (209). In coda al
   file, come sempre: non si tocca il blocco di nessun altro lavoro.
   ================================================================ */

/* ---- punto 2: barra in alto piu' alta, logo piu' grande ----
   Solo la barra in ALTO: la laterale ha gia' il suo logo grande dal
   165, non e' quella di cui si lamentava il feedback. Vince per
   ordine (e' in coda al file), non serve toccare le regole di prima. */
body.gal-header-top .gal-fissa{padding:20px 26px}
body.gal-header-top .gal-fissa-logo img{height:42px;width:92px}

/* ---- punto 7: nella barra laterale, via il nome scritto (resta solo
   il logo, che gia' rappresenta lo studio), e contatti + download
   spostati SUBITO SOTTO al logo invece che in fondo alla colonna. Il
   markup di 209 ha raggruppato nav dei contatti + pulsante download
   dentro un unico <div class="gal-fissa-destra">: qui lo si sposta in
   blocco con una regola sola, invece di inseguire due elementi
   separati. ---- */
body.gal-header-lato .gal-fissa-nome{display:none}
@media (min-width:761px){
  body.gal-header-lato .gal-fissa-destra{display:flex;flex-direction:column;
    align-items:flex-start;gap:16px;margin-top:18px}
  /* Annulla il margin-top:auto di prima (175/165): quella regola
     spingeva .gal-fissa-contatti in fondo alla colonna quando era lei
     stessa a toccare il bordo esterno di .gal-fissa. Ora e' annidata
     dentro .gal-fissa-destra, che non e' piu' alta quanto tutta la
     barra: la regola vecchia resterebbe comunque innocua, ma la si
     azzera esplicitamente per chiarezza. */
  body.gal-header-lato .gal-fissa-contatti{margin-top:0}
}

/* ---- punti 3 e 6: il download, un pulsante vero -- non un'iconcina
   fra i social. Stesso pulsante in barra alta e laterale (e'
   .gal-fissa-destra a cambiare orientamento, non lui). ---- */
.gal-fissa-destra{display:flex;align-items:center;gap:16px}
.gal-scarica-menu{display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:var(--tr)}
.gal-scarica-menu:hover{background:var(--accent-ink);text-decoration:none}
.gal-scarica-menu svg{width:16px;height:16px;flex-shrink:0}

/* ---- punto 4: sfondo bianco come tema a se'. Diverso dagli altri
   temi: non tocca solo l'accento e il carattere, forza anche il fondo
   -- serve a chi vuole essere sicuro che la galleria resti bianca
   anche se chi guarda ha il telefono in tema scuro (--ground normale
   segue il dispositivo di chi guarda, qui lo si blocca). ---- */
.gal-tema-chiaro{--ground:var(--fisso-c-surface);--surface:var(--fisso-c-surface);
  --surface-2:var(--fisso-c-sunken);--sunken:var(--fisso-c-sunken);
  --ink:var(--fisso-c-ink);--ink-strong:var(--fisso-c-ink-strong);
  --ink-2:var(--fisso-c-ink-2);--ink-3:var(--fisso-c-ink-3);
  --line:var(--fisso-c-line);--line-soft:var(--fisso-c-line-soft);
  --line-strong:var(--fisso-c-line-strong);
  --accent:var(--brand);--accent-2:var(--brand-2);--accent-ink:var(--brand-ink);--on-accent:#fff}
.gal-demo-tema-chiaro{background:var(--fisso-c-surface);border:1px solid var(--line);
  align-items:center;justify-content:center}
.gal-demo-tema-chiaro b{color:var(--fisso-c-ink)}

/* == gallerie-sfondo-231 == */
/* ================================================================
   GALLERIE: SFONDO CHIARO/SCURO INDIPENDENTE (231, correzione del
   209). In coda al file, come sempre.

   Il vecchio ".gal-tema-chiaro" (209) resta nel file sopra, INTATTO
   ma ormai morto: non lo sceglie piu' nessuno (tolto dalla lista
   "temi" e dalla lista bianca lato server), tenerlo e' piu' sicuro
   che toccarlo -- se mai una galleria vecchia avesse quel valore
   salvato, continua a funzionare esattamente come funzionava ieri
   invece di rompersi. Nessuna galleria ce l'ha, verificato prima di
   questa consegna.

   Le due regole qui sotto sono la correzione vera: uno sfondo che si
   applica con una classe A PARTE sul <body> (gal-sfondo-chiaro /
   gal-sfondo-scuro), non dentro un tema -- cosi' si combina con
   QUALUNQUE gal-tema-* gia' scelto, perche' nessun tema tocca
   --ground/--surface/--ink (lo si vede sopra: toccano solo
   --accent/--accent-2/--accent-ink). I valori sono gli stessi identici
   del chiaro/scuro di :root in cima al file: "chiaro" e' esattamente
   cosa vede gia' oggi chi ha il telefono in chiaro, "scuro" esattamente
   cosa vede chi ce l'ha in scuro -- si forza una delle due invece di
   lasciarla decidere al dispositivo. */
.gal-sfondo-chiaro{--ground:var(--fisso-c-ground);--surface:var(--fisso-c-surface);
  --surface-2:var(--fisso-c-sunken);--sunken:var(--fisso-c-sunken);
  --ink:var(--fisso-c-ink);--ink-strong:var(--fisso-c-ink-strong);
  --ink-2:var(--fisso-c-ink-2);--ink-3:var(--fisso-c-ink-3);
  --line:var(--fisso-c-line);--line-soft:var(--fisso-c-line-soft);
  --line-strong:var(--fisso-c-line-strong)}
.gal-sfondo-scuro{--ground:var(--fisso-s-ground);--surface:var(--fisso-s-surface);
  --surface-2:var(--fisso-s-sunken);--sunken:var(--fisso-s-sunken);
  --ink:var(--fisso-s-ink);--ink-strong:var(--fisso-s-ink-strong);
  --ink-2:var(--fisso-s-ink-2);--ink-3:var(--fisso-s-ink-3);
  --line:var(--fisso-s-line);--line-soft:var(--fisso-s-line-soft);
  --line-strong:var(--fisso-s-line-strong)}


/* =====================================================================
   IL PORTFOLIO PUBBLICO (/portfolio) — templates/portfolio_pubblico.html

   La vetrina che Giovanni manda a un cliente potenziale. E' l'unica
   pagina del CRM pensata per essere vista da chi non lo conosce, quindi
   qui contano due cose sole: che le foto siano grandi e che si capisca
   in tre secondi chi e' e come si contatta.

   Tutto in variabili gia' esistenti (--ground, --surface, --ink...):
   cosi' la pagina segue il chiaro/scuro del dispositivo di chi guarda
   senza una seconda tavolozza da tenere allineata a mano.
   ===================================================================== */
.pf-pagina{background:var(--ground);color:var(--ink);margin:0;
  font-family:inherit;-webkit-font-smoothing:antialiased}

/* ---- il banner ---- */
/* Il fondo del banner e' scuro FISSO, non il colore della barra
   laterale: da quando la barra e' chiara, un portfolio senza foto di
   copertina mostrava il nome bianco su fondo bianco. Qui sopra ci va
   sempre testo chiaro, quindi il fondo deve restare scuro in tutti e
   due i temi. */
.pf-banner{position:relative;height:min(46vh,380px);min-height:220px;
  background:var(--fisso-s-ground);overflow:hidden;display:flex;align-items:flex-end}
.pf-banner-foto{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* Il velo: senza, una copertina chiara renderebbe il nome dello studio
   illeggibile. Va dal nulla in alto al quasi-nero in basso, dove sta la
   scritta -- non una tinta piatta, che spegnerebbe tutta la foto. */
.pf-banner-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,17,0) 30%,rgba(10,10,17,.72) 100%)}
.pf-banner-testo{position:relative;padding:0 var(--gal-margine,30px) 26px;
  width:100%;max-width:var(--gal-larghezza,1240px);margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px}
/* VIA "brightness(0) invert(1)".
   Quel filtro schiaccia TUTTO a bianco -- anche la parte del logo che e'
   gia' scritta scura di proposito. Sul marchio "FOTO | PAPINI" il
   risultato era una targhetta bianca con dentro la parola "FOTO" bianca
   su bianco, cioe' invisibile: verificato a schermo. Il file
   /static/logo.svg e' gia' pensato per i fondi scuri e sul velo del
   banner si legge da solo; quello che gli serve e' un'ombra, non una
   ricolorata -- vedi .pf-banner-logo in fondo al file. */
.pf-banner-logo{height:34px;width:auto;display:block;margin-bottom:2px;
  opacity:.92}
.pf-banner-nome{margin:0;color:#fff;font-size:clamp(26px,4.2vw,44px);
  font-weight:600;letter-spacing:-.02em;line-height:1.1;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.pf-banner-telefono{color:rgba(255,255,255,.9);text-decoration:none;
  font-size:15px;font-weight:500;transition:color var(--tr,.2s)}
.pf-banner-telefono:hover{color:#fff;text-decoration:underline}

/* ---- profilo, contatti, bio ---- */
.pf-intestazione{max-width:var(--gal-larghezza,1240px);margin:0 auto;
  padding:0 var(--gal-margine,30px);display:flex;flex-direction:column;
  align-items:center;text-align:center}
/* La foto tonda scavalca il bordo del banner: il -56px di margine e'
   esattamente meta' dei 112px del cerchio, cosi' resta a cavallo della
   linea qualunque sia l'altezza del banner. */
.pf-profilo-foto{width:112px;height:112px;border-radius:50%;object-fit:cover;
  margin-top:-56px;position:relative;z-index:1;display:block;
  border:4px solid var(--ground);background:var(--surface);
  box-shadow:var(--shadow,0 8px 24px -12px rgba(22,22,29,.18))}
.pf-profilo-vuoto{display:flex;align-items:center;justify-content:center}
.pf-profilo-vuoto img{width:52%;height:auto;opacity:.5}

.pf-contatti{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:16px}
.pf-contatti a{display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);text-decoration:none;
  font-size:13.5px;font-weight:500;transition:all var(--tr,.2s)}
.pf-contatti a:hover{color:var(--accent-ink);border-color:var(--accent);
  background:var(--accent-soft)}
.pf-contatti svg{width:17px;height:17px;flex-shrink:0}
/* Le icone social non hanno testo accanto (l'indirizzo di un profilo
   Instagram non aggiunge niente): restano cerchi con la sola icona. */
.pf-contatti a:not(:has(span)){padding:9px;border-radius:50%}

.pf-bio{max-width:640px;margin:20px auto 0;color:var(--ink-2);
  font-size:15.5px;line-height:1.65;white-space:pre-line}

/* ---- categorie e griglia ---- */
.pf-corpo{max-width:var(--gal-larghezza,1240px);margin:0 auto;
  padding:36px var(--gal-margine,30px) 64px}
.pf-tab{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-bottom:28px}
.pf-tab button{padding:8px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:14px;font-weight:500;font-family:inherit;
  transition:all var(--tr,.2s)}
.pf-tab button:hover{border-color:var(--accent);color:var(--accent-ink)}
.pf-tab .pf-tab-attiva{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent)}

.pf-griglia{display:grid;gap:var(--gal-respiro,24px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pf-carta{display:block;text-decoration:none;color:inherit;
  transition:transform var(--tr,.2s)}
.pf-carta:hover{transform:translateY(-3px)}
.pf-carta-foto-scatola{position:relative;display:block;
  aspect-ratio:4/3;border-radius:var(--gal-raggio,14px);overflow:hidden;
  background:var(--sunken);box-shadow:var(--shadow-sm,0 1px 2px rgba(22,22,29,.05))}
.pf-carta:hover .pf-carta-foto-scatola{
  box-shadow:var(--shadow,0 8px 24px -12px rgba(22,22,29,.18))}
.pf-carta-foto{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.4,0,.2,1)}
.pf-carta:hover .pf-carta-foto{transform:scale(1.035)}
.pf-carta-foto-vuota{position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:var(--ink-3)}
.pf-carta-foto-vuota svg{width:40px;height:40px}
/* Il lucchetto: e' l'unica cosa che si vede di una galleria protetta,
   quindi deve leggersi sia su una copertina chiara sia sul riquadro
   vuoto -- pastiglia scura con la sfocatura dietro. */
.pf-lucchetto{position:absolute;top:10px;right:10px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(10,10,17,.62);color:#fff;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.pf-lucchetto svg{width:15px;height:15px}
.pf-carta-nome{display:block;margin-top:11px;color:var(--ink);
  font-size:15.5px;font-weight:600;line-height:1.35}

.pf-vuoto{text-align:center;color:var(--ink-3);font-size:15px;
  padding:48px 0}

@media (max-width:640px){
  .pf-banner{height:min(38vh,260px)}
  .pf-corpo{padding:26px 18px 48px}
  .pf-intestazione{padding:0 18px}
  /* Il nome dello studio sta in basso a sinistra, la foto tonda sta in
     mezzo e scavalca il bordo: su uno schermo largo non si sfiorano
     nemmeno, su un telefono la foto finiva sopra la scritta e si leggeva
     "Foto Papi". Qui sotto il cerchio si stringe e la scritta si alza
     quel tanto che basta perche' non si tocchino mai. */
  .pf-profilo-foto{width:92px;height:92px;margin-top:-46px;border-width:3px}
  .pf-banner-testo{padding:0 18px 58px}
  .pf-banner-logo{height:28px}
  .pf-griglia{grid-template-columns:1fr;gap:18px}
}

/* =====================================================================
   IL PANNELLO "IL MIO PORTFOLIO" nella pagina Gallerie (dietro login)
   ===================================================================== */
.gal-portfolio-testa{display:flex;align-items:center;gap:10px;width:100%;
  padding:0;border:0;background:none;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit}
.gal-portfolio-freccia{color:var(--ink-3);font-size:15px;line-height:1;
  transition:transform var(--tr,.2s)}
.gal-portfolio-freccia.aperta{transform:rotate(90deg)}
.gal-portfolio-conta{margin-left:auto;color:var(--ink-3);font-size:13px}
.gal-portfolio-nota{color:var(--ink-2);font-size:13.5px;line-height:1.6;
  margin:0 0 16px}
.gal-portfolio-vuoto{color:var(--ink-3);font-size:13.5px;margin:0 0 16px}

.gal-portfolio-ordine{display:flex;flex-direction:column;gap:8px;
  margin-bottom:18px}
.gal-portfolio-riga{display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m,10px);
  background:var(--surface)}
.gal-portfolio-posto{flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:12px;font-weight:600}
.gal-portfolio-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.gal-portfolio-nome{font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-portfolio-pubblico{font-size:13px;padding:5px 9px}
/* L'avviso "si legge il nome del cliente": giallo, non rosso -- non e'
   un errore, e' una scelta che va vista prima di mandare il link in giro. */
.gal-portfolio-avviso{font-size:12px;line-height:1.45;color:var(--warn-ink);
  background:var(--warn-bg);border-radius:var(--r-s,6px);padding:5px 8px}
.gal-portfolio-frecce{display:flex;gap:5px;flex-shrink:0}
.gal-portfolio-frecce button:disabled{opacity:.35;cursor:not-allowed}

.gal-portfolio-scelta{border-top:1px solid var(--line-soft);padding-top:14px}
.gal-portfolio-scelta-titolo{font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  margin-bottom:10px}
.gal-portfolio-spunta{display:flex;align-items:center;gap:9px;
  padding:7px 4px;cursor:pointer;font-size:14px;color:var(--ink);
  border-radius:var(--r-s,6px);transition:background var(--tr,.2s)}
.gal-portfolio-spunta:hover{background:var(--sunken)}
.gal-portfolio-spunta-meta{color:var(--ink-3);font-size:13px}

@media (max-width:640px){
  .gal-portfolio-riga{flex-wrap:wrap}
  .gal-portfolio-corpo{flex-basis:100%;order:2}
  .gal-portfolio-frecce{margin-left:auto}
}

/* ======================================================================
   NOTIFICHE_CRM - la campanella in alto a destra e il pannello che
   scorre da destra col riepilogo di tutto quello che e' stato fatto.
   Markup in frontend/templates/base.html, codice in
   frontend/static/js/notifiche.js.

   NESSUN COLORE NUOVO: i settori si distinguono con le variabili di
   tema gia' presenti in cima a questo file (--accent, --ok, --info,
   --warn, --idle), quindi il pannello segue da solo il tema chiaro e
   quello scuro senza una riga in piu'.

   Le altezze e i tocchi sono pensati per il telefono: la campanella e'
   un bersaglio da 38px, il pannello a schermo stretto diventa largo
   quanto lo schermo, e l'elenco scorre da solo mentre il resto della
   pagina sotto resta fermo (body.notifiche-bloccato).
   ====================================================================== */
.notifiche{position:relative;display:flex;align-items:center;flex-shrink:0}
.notifiche-campana{position:relative;width:38px;height:38px;flex-shrink:0;padding:0;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);
  color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;transition:background var(--tr),color var(--tr)}
.notifiche-campana:hover{background:var(--sunken);color:var(--ink)}
.notifiche-campana svg{width:19px;height:19px}
.notifiche-campana-attiva{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.notifiche-pallino{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;
  padding:0 4px;border-radius:20px;background:var(--bad);color:var(--on-bad);font-size:10.5px;
  font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums;
  border:2px solid var(--surface);box-sizing:content-box}

.notifiche-fondo{position:fixed;inset:0;background:rgba(10,10,17,.55);z-index:150}
.notifiche-pannello{position:fixed;top:0;right:0;bottom:0;width:390px;max-width:92vw;
  z-index:151;background:var(--surface);border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(102%);visibility:hidden;
  transition:transform var(--tr),visibility 0s linear .2s}
.notifiche-pannello-aperto{transform:translateX(0);visibility:visible;
  transition:transform var(--tr),visibility 0s}

.notifiche-testata{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;padding:calc(16px + env(safe-area-inset-top)) 18px 14px;
  border-bottom:1px solid var(--line)}
.notifiche-titolo{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--ink)}
.notifiche-sottotitolo{font-size:12px;color:var(--ink-3);margin-top:2px}
.notifiche-chiudi{border:0;background:none;color:var(--ink-3);font-size:16px;
  cursor:pointer;width:32px;height:32px;border-radius:var(--r-s);flex-shrink:0}
.notifiche-chiudi:hover{background:var(--sunken);color:var(--ink)}

.notifiche-schede{display:flex;gap:6px;padding:10px 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft)}
.notifiche-scheda{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:20px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr)}
.notifiche-scheda:hover{background:var(--sunken)}
.notifiche-scheda-attiva,.notifiche-scheda-attiva:hover{background:var(--accent);
  border-color:var(--accent);color:var(--on-accent)}
.notifiche-scheda-conta{font-variant-numeric:tabular-nums;opacity:.65;font-weight:700}

.notifiche-corpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 12px calc(24px + env(safe-area-inset-bottom))}
.notifiche-giorno{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--ink-3);padding:13px 6px 5px}
.notifiche-voce{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;
  border-radius:var(--r-m);color:var(--ink);text-decoration:none}
a.notifiche-voce[href]:hover{background:var(--sunken);text-decoration:none;color:var(--ink)}
.notifiche-voce-nuova{background:var(--accent-soft)}
.notifiche-icona{width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sunken);color:var(--ink-3)}
.notifiche-icona svg{width:16px;height:16px}
.notifiche-testo{display:flex;flex-direction:column;gap:2px;min-width:0}
.notifiche-descrizione{font-size:13.5px;line-height:1.35;color:var(--ink);
  overflow-wrap:anywhere}
.notifiche-meta{font-size:11.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center}
.notifiche-settore{font-weight:700}
.notifiche-settore::after{content:"·";margin-left:6px}
.notifiche-vuoto{padding:30px 16px;text-align:center;color:var(--ink-3);
  font-size:13px;line-height:1.55}

/* Un colore per settore, presi tutti dal tema. */
.notif-set-lavori .notifiche-icona{background:var(--accent-soft);color:var(--accent-ink)}
.notif-set-incassi .notifiche-icona{background:var(--ok-bg);color:var(--ok)}
.notif-set-gallerie .notifiche-icona{background:var(--info-bg);color:var(--info)}
.notif-set-documenti .notifiche-icona{background:var(--warn-bg);color:var(--warn-ink)}
.notif-set-social .notifiche-icona{background:var(--sunken);color:var(--accent-2)}
.notif-set-chatbot .notifiche-icona{background:var(--idle-bg);color:var(--idle)}
.notif-set-altro .notifiche-icona{background:var(--sunken);color:var(--ink-3)}

/* La pagina sotto non deve scorrere mentre si legge il pannello: da
   telefono, senza questo, il dito scorre la pagina invece dell'elenco. */
body.notifiche-bloccato{overflow:hidden}

@media (max-width:560px){
  .notifiche-pannello{width:100%;max-width:none;border-left:0}
  .notifiche-campana{width:44px;height:44px}
}

/* ================================================
   GALLERIE 1/3 - Marchio, logo e i difetti segnalati
   Aggiunto in fondo di proposito: e' un file che modificano in
   tanti, e in fondo non si da' fastidio a nessuno. I colori sono
   sempre variabili del tema, cosi' questo blocco segue da solo
   la grafica nuova quando arriva.
   ================================================ */
/* ---------------------------------------------------------------
   7. LA VETRINA PUBBLICA /portfolio
   Via il nome scritto (resta il logo), sito e mail sotto il telefono,
   e il controllo vero a 375 px.
   --------------------------------------------------------------- */
/* IL LOGO DEL BANNER: piu' grande, e con l'ombra al posto del filtro.
   "brightness(0) invert(1)" (la regola di prima, piu' su nel file)
   schiacciava TUTTO a bianco -- anche la parte del logo scritta scura di
   proposito. Sul marchio "FOTO | PAPINI" veniva una targhetta bianca con
   dentro la parola "FOTO" bianca su bianco, cioe' invisibile: verificato
   a schermo. Il file /static/logo.svg e' gia' pensato per i fondi scuri;
   quello che gli serve non e' una ricolorata ma un'ombra che lo stacchi
   dalla fotografia sotto, che puo' essere di qualunque colore. */
.pf-banner-logo{height:clamp(44px,7vw,74px);margin-bottom:10px;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.75))
         drop-shadow(0 2px 12px rgba(0,0,0,.55))}

/* ---------------------------------------------------------------
   8. IL MARCHIO (watermark): i tre passi, le nove posizioni, il provino
   --------------------------------------------------------------- */
.gal-marchio-guasto{background:var(--bad-bg);color:var(--bad);
  border-radius:var(--r-m);padding:12px 14px;margin:0 0 16px;
  font-size:13.5px;line-height:1.6}
.gal-marchio-guasto strong{display:block}

.gal-marchio-passo{display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--line-soft)}
.gal-marchio-passo:first-of-type{border-top:0;padding-top:4px}
.gal-marchio-numero{flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.gal-marchio-passo-corpo{flex:1;min-width:0}

/* Il logo di un marchio e' quasi sempre bianco su trasparente: su fondo
   bianco non si vedrebbe. La scacchiera dice "qui c'e' trasparenza" ed
   e' la convenzione che tutti i programmi di grafica usano gia'. */
.gal-marchio-scacchi{background-color:#fff;
  background-image:linear-gradient(45deg,#DDD 25%,transparent 25%),
    linear-gradient(-45deg,#DDD 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#DDD 75%),
    linear-gradient(-45deg,transparent 75%,#DDD 75%);
  background-size:14px 14px;
  background-position:0 0,0 7px,7px -7px,-7px 0}

.gal-marchio-lavoro{display:grid;gap:20px;grid-template-columns:minmax(220px,300px) 1fr;
  align-items:start;margin-top:10px}
.gal-marchio-comandi input[type=range]{width:100%}

/* le nove posizioni disposte come stanno sulla foto */
.gal-marchio-griglia{display:grid;grid-template-columns:repeat(3,1fr);
  gap:5px;width:132px;margin:8px 0 4px}
.gal-marchio-posto{aspect-ratio:4/3;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--sunken);cursor:pointer;
  position:relative;padding:0;transition:all var(--tr)}
.gal-marchio-posto:hover{border-color:var(--accent)}
.gal-marchio-posto span{position:absolute;inset:16%;border-radius:2px;
  background:var(--ink-3);opacity:.35}
.gal-marchio-posto-attivo{border-color:var(--accent);background:var(--accent-soft)}
.gal-marchio-posto-attivo span{background:var(--accent);opacity:1}

.gal-marchio-provino-scatola{margin-top:8px;border-radius:var(--r-m);
  overflow:hidden;background:var(--sunken);min-height:120px;
  display:flex;align-items:center;justify-content:center}
.gal-marchio-provino-scatola img{width:100%;height:auto;display:block}

@media (max-width:760px){
  .gal-marchio-lavoro{grid-template-columns:1fr}
}

/* IL LOGO CHE NON SI VEDE SUL FONDO CHIARO
   (l'apertura di questo commento si era persa: senza, il browser
   buttava via la regola della pastiglia qui sotto)

   La soluzione VERA e' un'altra variante del file, e c'e' gia' il punto
   di aggancio pronto (_logo_studio in gallerie_pubbliche.py). Ma un
   punto di aggancio che aspetta un altro lavoro non fa vedere il logo
   oggi: qui sotto c'e' la pastiglia scura dietro al logo, che funziona
   subito e continua a funzionare anche dopo -- e vale per QUALUNQUE
   logo, anche uno a colori, perche' non tinge niente: gli mette dietro
   un fondo su cui staccare.

   La pastiglia compare SOLO su fondo chiaro: su fondo scuro il logo
   bianco si vede benissimo da solo e una pastiglia sarebbe un rettangolo
   nero inutile in mezzo alla barra.
   --------------------------------------------------------------- */
.gal-cliente.gal-sfondo-chiaro .gal-fissa-logo img{
  background:#16161D;border-radius:6px;padding:5px 7px;
  box-sizing:content-box}
@media (prefers-color-scheme:light){
  .gal-cliente:not(.gal-sfondo-scuro) .gal-fissa-logo img{
    background:#16161D;border-radius:6px;padding:5px 7px;
    box-sizing:content-box}
}
/* Nella barra laterale il logo e' piu' grande: la pastiglia si allarga
   con lui invece di tagliarlo. */
body.gal-header-lato.gal-sfondo-chiaro .gal-fissa-logo img{padding:8px 10px}


/* ---- IL PULSANTE "AVANTI" COPERTO DALLA BOLLICINA DELL'ASSISTENTE ----
   ("il pulsante avanti viene nascosto dall'icona dell'assistenza AI")

   La bollicina dell'assistente sta fissa in basso a destra
   (.assistente-fab: right 20px, bottom 22px, circa 56 px di lato) e
   galleggia sopra tutto. La riga dei passi -- con "Avanti" a destra --
   arriva in fondo alla pagina, e arrivati in fondo le due cose finiscono
   nello stesso angolo.

   Qui si tiene libero quell'angolo invece di spostare la bollicina: la
   bollicina sta in base.html, che e' di un altro incaricato, e uno
   spazio in fondo alla pagina non puo' rompere niente a nessuno. Lo
   spazio e' piu' alto della bollicina, quindi arrivati in fondo il
   pulsante resta sopra di lei. */
.gal-passi-nav{margin-bottom:96px}
@media (max-width:560px){
  /* Da telefono la bollicina e' piu' vicina all'angolo e i pulsanti
     sono piu' larghi: oltre allo spazio sotto, si lascia respirare
     anche il fianco destro. */
  .gal-passi-nav{margin-bottom:104px;padding-right:8px}
}


/* ================================================
   GALLERIE 2/3 - I video nelle gallerie (file, YouTube e Vimeo)
   Aggiunto in fondo di proposito: e' un file che modificano in
   tanti, e in fondo non si da' fastidio a nessuno. I colori sono
   sempre variabili del tema, cosi' questo blocco segue da solo
   la grafica nuova quando arriva.
   ================================================ */
/* ================================================================
   GALLERIE VIDEO, ANTEPRIME GRANDI E PORTFOLIO  (marcatore: gal-video)
   Tutto quello che sta sotto questa riga e' stato aggiunto in una volta
   sola: video nelle gallerie, la finestrella grande con l'anteprima
   veritiera al posto del vecchio tooltip minuscolo, e le rifiniture
   della vetrina pubblica. Un blocco solo, in fondo, per non entrare in
   mezzo alle regole che stanno modificando altri.
   ================================================================ */

/* ---------------------------------------------------------------
   4. I VIDEO NELLA PAGINA DI GIOVANNI
   --------------------------------------------------------------- */
.gal-media-tab{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.gal-media-tab button{display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13.5px;
  font-weight:600;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line);transition:all var(--tr)}
.gal-media-tab button:hover{border-color:var(--accent);color:var(--accent-ink)}
.gal-media-tab .gal-media-tab-attiva{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent)}
.gal-media-icona{display:inline-flex;width:16px;height:16px}
.gal-media-icona svg{width:100%;height:100%}
.gal-media-conta{font-variant-numeric:tabular-nums;font-size:12px;
  padding:1px 7px;border-radius:999px;background:var(--sunken);color:var(--ink-3)}
.gal-media-tab-attiva .gal-media-conta{background:rgba(255,255,255,.22);color:#fff}

.gal-cella-video{position:relative}
.gal-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;z-index:3;
  background:rgba(10,10,17,.62);color:#fff;font-size:16px;line-height:44px;
  padding:0;backdrop-filter:blur(3px);transition:transform var(--tr)}
.gal-play:hover{transform:translate(-50%,-50%) scale(1.09);background:rgba(10,10,17,.78)}
.gal-durata{position:absolute;right:7px;top:7px;z-index:3;
  background:rgba(10,10,17,.72);color:#fff;font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
/* Stessa forma QUADRATA delle foto (.gal-cella img e' aspect-ratio:1):
   con una forma diversa il riquadro del video era piu' basso degli
   altri e il tasto di riproduzione, centrato sull'intera cella, finiva
   sopra il nome del file. Verificato a schermo. */
.gal-pellicola{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;width:100%;aspect-ratio:1;
  background:var(--sunken);color:var(--ink-3);font-size:11.5px}
.gal-pellicola svg{width:34px;height:34px;opacity:.75}

.gal-meta-video{color:var(--info)}

/* il riquadro con il filmato, per controllare che si veda davvero */
.gal-video-schermo{position:fixed;inset:0;z-index:220;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px;background:rgba(8,8,14,.94)}
.gal-video-riproduttore{max-width:min(1100px,94vw);max-height:76vh;
  width:auto;border-radius:var(--r-m);background:#000;outline:0}
.gal-video-nome{color:rgba(255,255,255,.75);font-size:13px;text-align:center;
  overflow-wrap:anywhere}

/* i limiti dichiarati sotto la zona di caricamento */
.gal-limiti{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;
  padding:11px 13px;border-radius:var(--r-m);background:var(--sunken);
  font-size:12.5px;color:var(--ink-2);line-height:1.55}
.gal-limiti-voce{display:inline-flex;gap:6px;align-items:baseline}
.gal-limiti-voce strong{color:var(--ink)}
.gal-limiti-nota{flex-basis:100%;color:var(--ink-3);font-size:12px}

/* ---------------------------------------------------------------
   5. I VIDEO NELLA PAGINA DEL CLIENTE
   --------------------------------------------------------------- */
.gal-tessera-video{position:relative}
.gal-tessera .gal-play{width:52px;height:52px;line-height:52px;font-size:19px}
/* Il riquadro di un filmato SENZA copertina. Fondo scuro come una
   pellicola, non grigio chiaro: cosi' si capisce che e' un video e non
   una foto che non si e' caricata. L'icona sta in un angolo e non al
   centro, dove c'e' gia' il tasto di riproduzione. */
.gal-tessera-vuota{position:relative;display:block;width:100%;
  aspect-ratio:16/9;border-radius:var(--r-m);cursor:pointer;
  background:linear-gradient(135deg,#2A2A36,#15151D)}
.gal-tessera-vuota svg{position:absolute;left:12px;top:12px;
  width:26px;height:26px;color:rgba(255,255,255,.55)}
.gal-tessera-vuota::after{content:"video";position:absolute;left:12px;
  bottom:12px;color:rgba(255,255,255,.55);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase}
.gal-schermo-video{width:min(1100px,92vw);max-height:78vh;background:#000;
  border-radius:var(--r-m)}
.gal-video-avviso{color:rgba(255,255,255,.82);font-size:13.5px;text-align:center;
  max-width:420px;line-height:1.55;margin:10px auto 0}

/* il filmato dentro il visore del cliente */
.gal-schermo-filmato{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;max-width:92vw}
.gal-schermo-video{width:min(1100px,92vw);max-height:74vh;background:#000;
  border-radius:var(--r-m);outline:0}

.pf-carta-durata{position:absolute;left:10px;top:10px;
  background:rgba(10,10,17,.72);color:#fff;font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:5px}
.pf-carta-video{position:absolute;bottom:10px;right:10px;width:30px;height:30px;
  border-radius:50%;background:rgba(10,10,17,.66);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px}

/* ================================================================
   11. SECONDO GIRO SULLE GALLERIE  (marcatore: gal-video-2)
   Video da YouTube/Vimeo, "seleziona tutte", interruttori a
   scorrimento, riordino trascinando, e i due difetti segnalati
   (il pulsante Avanti coperto dalla bollicina, il titolo Sfondo).

/* ---- il blocco gemello dei video, accanto a quello delle foto ---- */
.gal-video-strade{display:grid;gap:18px;grid-template-columns:1fr 1fr;
  align-items:start}
.gal-video-strada{border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px;background:var(--surface)}
.gal-video-strada-testa{display:flex;gap:10px;align-items:flex-start;
  margin-bottom:10px}
.gal-video-strada-numero{flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.gal-video-strada-testa strong{font-size:14px;display:block}
.gal-zona-video{min-height:104px;padding:14px}
.gal-video-link-riga{display:flex;gap:8px;flex-wrap:wrap}
.gal-video-link-riga input{flex:1;min-width:180px}

/* Da dove viene il filmato. Il fondo scuro fisso e' voluto: sta sopra
   una fotografia, dove il contrasto non puo' dipendere dal tema. */
.gal-servizio{position:absolute;left:7px;top:7px;z-index:3;
  background:rgba(10,10,17,.72);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;
  border-radius:5px}
.gal-servizio-youtube{background:rgba(200,32,32,.86)}
.gal-servizio-vimeo{background:rgba(26,124,182,.86)}

.gal-video-incorporato{width:min(1100px,94vw);aspect-ratio:16/9;height:auto;
  border:0;background:#000}
/* Bianco fisso e non var(--rail-ink): questo link sta sopra il velo
   quasi nero del riproduttore, non sopra lo sfondo del CRM. Con la
   grafica nuova --rail-ink diventa scuro (il menu laterale passa al
   chiaro) e qui sparirebbe. Regola generale di questo blocco: si usano
   le variabili del tema ovunque la cosa stia SULL'INTERFACCIA, e colori
   fissi solo dove sta sopra una fotografia o un velo nero -- li' il
   contrasto non puo' dipendere dal tema scelto. */
.gal-video-fuori{color:rgba(255,255,255,.75);font-size:13px;
  text-decoration:underline}
.gal-video-fuori:hover{color:#fff}

@media (max-width:820px){
  .gal-video-strade{grid-template-columns:1fr}
}

/* il riquadro di YouTube/Vimeo dentro il visore del cliente */
.gal-schermo-incorporato{aspect-ratio:16/9;height:auto;border:0;background:#000}

/* IL TASTO DI RIPRODUZIONE, CENTRATO SULLA FOTO
   (anche qui l'apertura del commento si era persa, e la regola
   qui sotto non arrivava mai al browser)

   Il trucco: una percentuale in "margin-top" si calcola sulla LARGHEZZA
   di chi contiene, non sull'altezza. La foto e' quadrata, quindi meta'
   della larghezza e' esattamente il suo centro -- meno meta' del tasto,
   che e' 44 px. Cosi' resta al posto giusto qualunque cosa ci sia
   sotto, senza dover misurare niente con JavaScript. */
.gal-cella-video .gal-play{top:0;left:50%;transform:translateX(-50%);
  margin-top:calc(50% - 22px)}
.gal-cella-video .gal-play:hover{transform:translateX(-50%) scale(1.09)}
.gal-cella-azioni{flex-wrap:wrap}
.gal-video-altrove{display:block;margin-top:10px;text-align:center;
  color:rgba(255,255,255,.72);font-size:13px;text-decoration:underline}
.gal-video-altrove:hover{color:#fff}


/* ================================================
   GALLERIE 3/3 - Anteprime grandi, portfolio e invio al cliente
   Aggiunto in fondo di proposito: e' un file che modificano in
   tanti, e in fondo non si da' fastidio a nessuno. I colori sono
   sempre variabili del tema, cosi' questo blocco segue da solo
   la grafica nuova quando arriva.
   ================================================ */
/* ---------------------------------------------------------------
   1. LA FINESTRELLA GRANDE  ("i tooltip li puoi fare molto piu'
   grandi, come un pop-up, almeno il triplo di adesso, e che mostri
   un'anteprima veritiera della galleria")

/* la freccina che lega la finestrella al riquadro da cui esce */
.gal-demo-tooltip::after{content:"";position:absolute;top:100%;left:50%;
  transform:translateX(-50%);border:7px solid transparent;
  border-top-color:var(--line)}

.gal-mock-barra{position:absolute;top:0;left:0;right:0;height:15px;z-index:2;
  background:var(--mock-accento);display:flex;align-items:center;gap:4px;
  padding:0 6px}
.gal-mock-barra i{width:16px;height:5px;border-radius:2px;
  background:rgba(255,255,255,.9)}
.gal-mock-barra u{margin-left:auto;width:24px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.55)}

.gal-mock-copertina{display:flex;align-items:flex-end;justify-content:center;
  height:74px;padding:0 10px 9px;position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mock-accento) 22%,transparent),
             color-mix(in srgb,var(--mock-accento) 55%,transparent))}
.gal-mock-nome{font-family:var(--mock-carattere);font-style:var(--mock-corsivo);
  font-variant:var(--mock-maiuscoletto);letter-spacing:var(--mock-spaziatura);
  font-weight:var(--mock-peso);font-size:15px;line-height:1.15;
  color:var(--mock-inchiostro);text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.gal-mock-griglia{display:grid;gap:4px;padding:7px;
  grid-template-columns:1fr 1fr;align-items:start}
.gal-mock-t{display:block;border-radius:3px;background-size:cover;
  background-position:center;background-color:color-mix(in srgb,var(--mock-accento) 32%,transparent);
  min-height:22px}
.gal-mock-t-vuota{background-image:linear-gradient(135deg,
  color-mix(in srgb,var(--mock-accento) 40%,transparent),
  color-mix(in srgb,var(--mock-accento) 18%,transparent))}

/* i cinque layout, gli stessi nomi della galleria vera */
.gal-mock-layout-mosaico .gal-mock-t:nth-child(1){height:40px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(2){height:56px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(3){height:52px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(4){height:34px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(5){height:30px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(6){height:44px}

.gal-mock-layout-quadrato .gal-mock-griglia{grid-template-columns:repeat(3,1fr)}
.gal-mock-layout-quadrato .gal-mock-t{aspect-ratio:1;height:auto}

.gal-mock-layout-rivista .gal-mock-t{height:34px}
.gal-mock-layout-rivista .gal-mock-t:nth-child(1){grid-column:1/3;height:56px}
.gal-mock-layout-rivista .gal-mock-t:nth-child(4){grid-column:1/3;height:28px}

.gal-mock-layout-storia .gal-mock-griglia{grid-template-columns:1fr}
.gal-mock-layout-storia .gal-mock-t{height:44px}

.gal-mock-layout-collage .gal-mock-griglia{grid-template-columns:repeat(4,1fr);
  grid-auto-rows:26px}
.gal-mock-layout-collage .gal-mock-t{height:auto;min-height:0;align-self:stretch}
.gal-mock-layout-collage .gal-mock-t:nth-child(1){grid-column:1/3;grid-row:1/3}
.gal-mock-layout-collage .gal-mock-t:nth-child(2){grid-column:3/5;grid-row:1/2}
.gal-mock-layout-collage .gal-mock-t:nth-child(3){grid-column:3/4;grid-row:2/4}
.gal-mock-layout-collage .gal-mock-t:nth-child(4){grid-column:4/5;grid-row:2/3}
.gal-mock-layout-collage .gal-mock-t:nth-child(5){grid-column:1/3;grid-row:3/4}

/* la barra di lato invece che in cima */
.gal-mock-header-lato .gal-mock-barra{right:auto;bottom:0;width:16px;height:auto;
  flex-direction:column;padding:6px 0;gap:5px}
.gal-mock-header-lato .gal-mock-barra i{width:5px;height:16px}
.gal-mock-header-lato .gal-mock-barra u{margin-left:0;margin-top:auto;
  width:4px;height:24px}
.gal-mock-header-lato .gal-mock-copertina,
.gal-mock-header-lato .gal-mock-griglia{margin-left:16px}

/* gli otto temi: gli stessi colori e caratteri della galleria vera */
.gal-mock-tema-moderno{--mock-accento:#5A57D6;--mock-fondo:#fff;--mock-inchiostro:#16161D}
.gal-mock-tema-semplice{--mock-accento:#2B2B33;--mock-fondo:#fff;--mock-inchiostro:#16161D;
  --mock-carattere:"Instrument Sans",sans-serif;--mock-peso:700;--mock-spaziatura:-.02em}
.gal-mock-tema-elegante{--mock-accento:#8A6D3B;--mock-fondo:#FDFBF7;--mock-inchiostro:#3A2E1C;
  --mock-corsivo:italic}
.gal-mock-tema-oldstyle{--mock-accento:#7A6A52;--mock-fondo:#F6F1E7;--mock-inchiostro:#3B3225;
  --mock-maiuscoletto:small-caps;--mock-spaziatura:.06em}
.gal-mock-tema-vivace{--mock-accento:#E8663F;--mock-fondo:#fff;--mock-inchiostro:#2A1710;
  --mock-peso:800}
.gal-mock-tema-minimale{--mock-accento:#111114;--mock-fondo:#fff;--mock-inchiostro:#111114;
  --mock-carattere:"Instrument Sans",sans-serif;--mock-peso:300;--mock-spaziatura:.14em}
.gal-mock-tema-minimale .gal-mock-t{filter:grayscale(1)}
.gal-mock-tema-pastello{--mock-accento:#D98CA0;--mock-fondo:#FFF7F9;--mock-inchiostro:#5A3540;
  --mock-corsivo:italic;--mock-peso:300}
.gal-mock-tema-natura{--mock-accento:#5C7A52;--mock-fondo:#F6F8F3;--mock-inchiostro:#2C3A26;
  --mock-peso:500}

/* lo sfondo forzato: si combina con QUALUNQUE tema, esattamente come
   nella galleria vera -- non e' un nono tema. */
.gal-mock-sfondo-chiaro{--mock-fondo:#FFFFFF;--mock-inchiostro:#16161D}
.gal-mock-sfondo-scuro{--mock-fondo:#0E0E12;--mock-inchiostro:#F2F2F7}

/* ---------------------------------------------------------------
   3. L'ANTEPRIMA AL TOCCO (telefono)
   Su un telefono il passaggio del mouse non esiste: la finestrella
   qui sopra non comparirebbe mai. Toccando una scelta si apre questo
   pannello in fondo allo schermo con lo stesso modellino dentro.
   --------------------------------------------------------------- */
.gal-tocco-velo{position:fixed;inset:0;background:rgba(10,10,17,.55);z-index:210}
.gal-tocco-pannello{position:fixed;left:0;right:0;bottom:0;z-index:211;
  background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);max-height:82vh;overflow:auto}
.gal-tocco-testa{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.gal-tocco-testa strong{font-size:15px}
.gal-tocco-corpo{max-width:420px;margin:0 auto}
.gal-tocco-nota{margin-top:10px;text-align:center;color:var(--ink-3);font-size:12.5px}

/* l'avanzamento vero, byte per byte */
.gal-invio-percento{margin-left:auto;font-size:12px;font-weight:600;
  color:var(--accent-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gal-barra-file{margin-bottom:6px;opacity:.95}

/* il pulsante verso le impostazioni, accanto a "Nuova galleria" */
.gal-testa-azioni{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gal-btn-impostazioni{display:inline-flex;align-items:center;gap:8px;
  text-decoration:none}
.gal-btn-impostazioni:hover{text-decoration:none}
.gal-btn-impostazioni svg{width:16px;height:16px;flex-shrink:0}

/* ---------------------------------------------------------------
   6. "IL MIO PORTFOLIO" nella pagina Gallerie
   ("falla graficamente coerente come tutto il resto, e piu' visibile
   e chiara"). Prima era una lista di righe grigie dentro un riquadro:
   adesso ha la stessa testata delle altre sezioni, le gallerie in
   vetrina si vedono con la loro copertina, e la scelta e' una griglia
   di carte invece di un elenco di spunte.
   --------------------------------------------------------------- */
.gal-portfolio-testa{padding:2px 0 12px;border-bottom:1px solid var(--line-soft)}
.gal-portfolio-conta{background:var(--accent-soft);color:var(--accent-ink);
  padding:2px 11px;border-radius:999px;font-size:12px;font-weight:600}
.gal-portfolio-nota{background:var(--info-bg);color:var(--ink-2);
  border-radius:var(--r-m);padding:12px 14px;margin:0 0 16px}

.gal-portfolio-riga{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);padding:12px;gap:14px;align-items:flex-start;
  box-shadow:var(--shadow-sm)}
.gal-portfolio-posto{background:var(--accent);color:var(--on-accent);font-weight:700;
  font-size:12px;display:flex;align-items:center;justify-content:center;
  margin-top:2px}
.gal-portfolio-copertina{flex-shrink:0;width:76px;height:56px;border-radius:var(--r-s);
  overflow:hidden;background:var(--sunken);display:flex;align-items:center;
  justify-content:center;color:var(--ink-3);font-size:18px}
.gal-portfolio-copertina img{width:100%;height:100%;object-fit:cover;display:block}
.gal-portfolio-frecce{flex-direction:column}

.gal-portfolio-scelta-titolo{font-size:13px;color:var(--ink-2);
  text-transform:none;letter-spacing:0;margin-bottom:10px}
.gal-portfolio-carte{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.gal-portfolio-carta{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px;border-radius:var(--r-m);border:1px solid var(--line);
  background:var(--surface);transition:all var(--tr);text-align:left}
.gal-portfolio-carta:hover{border-color:var(--accent)}
.gal-portfolio-carta-scelta{border-color:var(--accent);background:var(--accent-soft)}
.gal-portfolio-carta input{flex-shrink:0;width:17px;height:17px;accent-color:var(--accent)}
.gal-portfolio-carta-mini{flex-shrink:0;width:44px;height:34px;border-radius:5px;
  object-fit:cover;background:var(--sunken)}
.gal-portfolio-carta-corpo{min-width:0;display:flex;flex-direction:column;gap:2px}
.gal-portfolio-carta-nome{font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-portfolio-carta-meta{font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:560px){
  .gal-portfolio-riga{flex-wrap:wrap}
  .gal-portfolio-frecce{flex-direction:row;width:100%;justify-content:flex-end}
}

.pf-banner-recapiti{display:flex;flex-wrap:wrap;gap:6px 16px;
  align-items:center;justify-content:flex-start}
.pf-banner-recapiti a{color:rgba(255,255,255,.92);text-decoration:none;
  font-size:14.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pf-banner-recapiti a:hover{color:#fff;text-decoration:underline}
.pf-banner-recapiti svg{width:15px;height:15px;flex-shrink:0;opacity:.9}

/* Senza copertina caricata il banner non deve diventare una striscia
   nera vuota: si tinge col colore del tema, e il logo si vede lo
   stesso. E' anche il ripiego mentre la foto sta arrivando. */
/* Sopra a questo banner ci vanno i recapiti scritti in bianco, quindi
   deve restare scuro SEMPRE. I due colori di prima non lo garantivano:
   --rail e' il colore della barra laterale, che da oggi e' chiara, e
   --accent nel tema scuro e' un verde CHIARO (bianco sopra: 2.25:1).
   --brand e --fisso-s-ground invece non cambiano mai: verde del
   marchio che sfuma nel quasi nero, bianco sopra almeno 6.19:1. */
.pf-banner{background:linear-gradient(150deg,var(--brand) 0%,var(--fisso-s-ground) 100%)}

/* Il nome dello studio resta nella pagina come titolo, ma non si vede:
   serve ai motori di ricerca e ai lettori di schermo. Non e' display:none
   -- quello lo toglierebbe anche a loro. */
.pf-nome-nascosto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* La foto profilo tonda sta A CAVALLO del bordo inferiore del banner
   (margin-top:-56px, meta' del suo diametro). Su uno schermo stretto
   finisce esattamente sopra la riga di telefono/sito/mail e la taglia a
   meta': verificato a 375 px. Lo spazio sotto la riga dei recapiti deve
   percio' essere piu' alto del mezzo cerchio, non dei 26 px di prima. */
@media (max-width:640px){
  .pf-banner-testo{padding-bottom:74px;align-items:center;text-align:center}
  .pf-banner-recapiti{justify-content:center;gap:4px 14px}
}

@media (max-width:420px){
  .pf-banner{height:min(42vh,320px);min-height:230px}
  .pf-banner-testo{padding-left:18px;padding-right:18px}
  .pf-banner-recapiti a{font-size:13.5px}
  .pf-intestazione{padding-left:18px;padding-right:18px}
  .pf-profilo-foto{width:88px;height:88px;margin-top:-44px}
  .pf-griglia{grid-template-columns:1fr}
}

.gal-interruttore-spento{opacity:.55;cursor:not-allowed}

/* ---------------------------------------------------------------
   9. MANDA IL LINK AL CLIENTE
   --------------------------------------------------------------- */
.gal-invio-pannello{position:fixed;z-index:211;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(620px,94vw);max-height:88vh;
  overflow:auto;background:var(--surface);border-radius:var(--r-l);
  padding:20px;box-shadow:var(--shadow-lg)}
.gal-invio-testo-area{width:100%;font-size:14px;line-height:1.6;
  font-family:inherit;margin-top:6px;resize:vertical}
.gal-invio-azioni{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin:14px 0 4px}
@media (max-width:560px){
  .gal-invio-pannello{width:100%;max-width:none;left:0;top:auto;bottom:0;
    transform:none;border-radius:var(--r-l) var(--r-l) 0 0;max-height:92vh;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .gal-invio-azioni .btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------
   10. IL LOGO CHE SI VEDE ANCHE SU FONDO CHIARO
   ("il logo non si vede se lo sfondo e' bianco")

   Il file /static/logo.svg e' bianco con i colori scritti dentro: nato
   per la barra laterale del CRM, che e' sempre scura. Nella barra fissa
   della galleria pubblica, quando lo sfondo e' chiaro, diventa bianco su
   bianco -- cioe' sparisce, ed e' esattamente quello che Giovanni ha
   visto.

   Tutti i colori qui sotto sono variabili del tema (var(--...)):
   quando la grafica del CRM cambia, questo blocco la segue da solo.
   Le uniche eccezioni sono dichiarate una per una, e sono i posti
   che devono restare scuri comunque -- sopra una fotografia il
   contrasto non puo' dipendere dal tema dell'interfaccia.
   ================================================================ */

/* ---- "seleziona tutte" ---- */
.gal-seleziona-tutte{display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--sunken);margin-bottom:10px;flex-wrap:wrap}
.gal-seleziona-tutte:hover{border-color:var(--accent);color:var(--accent-ink)}
.gal-seleziona-tutte input{width:17px;height:17px;accent-color:var(--accent);
  flex-shrink:0}
.gal-seleziona-tutte-nota{color:var(--ink-3);font-weight:400;font-size:12px}

/* ---- l'interruttore a scorrimento ----
   Sotto resta una spunta vera (input type=checkbox), nascosta ma non
   tolta: tastiera e lettori di schermo continuano a trovarla e a
   capirla. Cambia solo il vestito.

   NOTA: un altro incaricato sta preparando un interruttore riusabile
   per le Impostazioni. Quando arriva, qui basta cambiare il nome della
   classe nei template -- il comportamento e' gia' quello. */
.gal-toggle{display:flex;align-items:center;gap:11px;cursor:pointer;
  font-size:13.5px;line-height:1.5}
.gal-toggle input{position:absolute;opacity:0;width:0;height:0}
.gal-toggle-pista{flex-shrink:0;position:relative;width:42px;height:24px;
  border-radius:999px;background:var(--line);transition:background var(--tr)}
.gal-toggle-pista::after{content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:var(--surface);
  box-shadow:var(--shadow-sm);transition:transform var(--tr)}
.gal-toggle input:checked + .gal-toggle-pista{background:var(--accent)}
.gal-toggle input:checked + .gal-toggle-pista::after{transform:translateX(18px)}
.gal-toggle input:focus-visible + .gal-toggle-pista{
  outline:2px solid var(--accent);outline-offset:2px}
.gal-toggle-testo{min-width:0}
.gal-toggle-spento{opacity:.55;cursor:not-allowed}
.gal-toggle input:disabled + .gal-toggle-pista{cursor:not-allowed}

/* ---- riordino trascinando, nel pannello della vetrina ---- */
.gal-portfolio-presa{flex-shrink:0;cursor:grab;color:var(--ink-3);
  font-size:16px;line-height:1;padding:2px 2px 0;user-select:none;
  align-self:center}
.gal-portfolio-presa:active{cursor:grabbing}
.gal-portfolio-riga{transition:transform var(--tr),opacity var(--tr),
  border-color var(--tr)}
.gal-portfolio-riga-presa{opacity:.45}
.gal-portfolio-riga-bersaglio{border-color:var(--accent);
  box-shadow:0 -3px 0 -1px var(--accent) inset}

/* ---- la sezione Foto/Video della vetrina pubblica ---- */
.pf-tab-media{margin-bottom:10px}
.pf-tab-media button{font-weight:600}

/* Il tasto di riproduzione va centrato sulla FOTO, non sull'intero
   riquadro: sotto la foto ci sono il nome, i pulsanti e il selettore
   della cartella, e centrandolo sul riquadro intero finiva sopra il
   nome del file.

/* ---------------------------------------------------------------
   LA FINESTRELLA GRANDE CON L'ANTEPRIMA VERA
   ("i tooltip li puoi fare molto piu' grandi, come un pop-up, almeno
   il triplo di adesso, e che mostri un'anteprima veritiera")

   Prima era un suggerimento da 160 px con dentro tre rettangoli
   colorati, appeso dentro il riquadro della scelta. Adesso e' un
   pannello da 340 px con dentro un modellino della pagina vera, in
   posizione FISSA rispetto alla finestra: la posizione la calcola
   mostraAnteprima() in gallerie-manager.js, che guarda quanto posto
   c'e' sopra e sotto il riquadro. Fisso e non "appeso" perche',
   ingrandito, non ci stava piu' sopra al riquadro e finiva tagliato
   dall'intestazione della pagina -- visto succedere. */
.gal-anteprima-pop{position:fixed;z-index:150;width:340px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:14px;box-shadow:var(--shadow-lg);
  pointer-events:none}
.gal-anteprima-pop-titolo{font-size:13px;font-weight:700;color:var(--ink);
  margin-bottom:9px}
.gal-anteprima-pop-nota{margin-top:9px;font-size:12.5px;line-height:1.45;
  color:var(--ink-2)}

/* Su uno schermo stretto il pannello non compare proprio: li' non c'e'
   il mouse, e al suo posto si apre il pannello del tocco
   (.gal-tocco-pannello). */
@media (max-width:520px){.gal-anteprima-pop{display:none}}


/* ================================================================
   GALLERIE - CORREZIONI, PARTE 1 di 2
   L'anteprima completa (copertina e logo), lo sfondo che si vede
   davvero, il provino del marchio piu' piccolo, il rimando alle
   impostazioni. Colori sempre da variabili del tema; i pochi fissi
   sono quelli che stanno sopra una fotografia, dove il contrasto non
   puo' dipendere dal tema dell'interfaccia.
   ================================================================ */

/* ---- il modellino, adesso completo ----
   Prima era barra + nome + griglia. Adesso ha anche la COPERTINA vera
   della galleria e il LOGO, che sono le prime due cose che vede il
   cliente: senza, l'anteprima non era "definitiva" come chiesto. */
.gal-mock-copertina{height:96px;background-size:cover;background-position:center;
  overflow:hidden}
.gal-mock-copertina-vuota{background-image:linear-gradient(140deg,
  color-mix(in srgb,var(--mock-accento) 55%,transparent),
  color-mix(in srgb,var(--mock-accento) 22%,transparent))}
/* Il velo scuro sotto il nome: e' lo stesso trucco della galleria vera
   (.gal-apertura-velo), senza il quale un nome chiaro su una copertina
   chiara non si legge. */
.gal-mock-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,17,0) 35%,rgba(10,10,17,.62) 100%)}
.gal-mock-copertina{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:5px;padding:0 10px 9px}
.gal-mock-marchio{position:relative;z-index:2;display:flex;
  background:rgba(10,10,17,.55);border-radius:4px;padding:3px 5px}
.gal-mock-marchio img{height:11px;width:auto;display:block}
.gal-mock-nome{position:relative;z-index:2;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* il logo nella barra fissa: su fondo chiaro ha la pastiglia scura
   dietro, esattamente come nella galleria vera */
.gal-mock-logo{height:9px;width:auto;display:block;border-radius:2px}
.gal-mock-sfondo-chiaro .gal-mock-logo{background:#16161D;padding:2px 3px}

/* ---- lo sfondo scelto, che adesso si vede ---- */
.gal-mock-sfondo-chiaro{--mock-fondo:#FFFFFF;--mock-inchiostro:#16161D}
.gal-mock-sfondo-scuro{--mock-fondo:#0E0E12;--mock-inchiostro:#F2F2F7}
.gal-mock-sfondo-scuro .gal-mock-t-vuota{opacity:.85}

/* i tre riquadrini della scelta sfondo */
.gal-demo-sfondo-auto,.gal-demo-sfondo-chiaro,.gal-demo-sfondo-scuro{
  display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.gal-demo-sfondo-chiaro span{background:#FFFFFF}
.gal-demo-sfondo-scuro span{background:#14141B}
.gal-demo-sfondo-auto span:first-child{background:#FFFFFF}
.gal-demo-sfondo-auto span:last-child{background:#14141B}

/* ---- il provino del marchio: piu' piccolo ----
   ("falla piu' piccola, troppo grande ora") Prendeva tutta la colonna
   di destra e su una foto verticale diventava una colonna altissima che
   spingeva giu' tutto il resto. */
.gal-marchio-provino{max-width:300px}
.gal-marchio-provino-scatola{max-height:230px;min-height:90px}
.gal-marchio-provino-scatola img{max-height:230px;width:auto;max-width:100%;
  object-fit:contain}
@media (max-width:760px){
  .gal-marchio-provino{max-width:none}
  .gal-marchio-provino-scatola img{max-height:200px}
}

/* ---- il rimando alle impostazioni ----
   Regola del committente: quando una cosa si imposta altrove, dirlo e
   mettere il collegamento diretto. Questo e' il vestito di quel
   rimando, uguale ovunque compaia. */
.gal-rimando{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;
  padding:11px 13px;border-radius:var(--r-m);background:var(--info-bg);
  color:var(--ink-2);font-size:12.5px;line-height:1.55}
.gal-rimando-icona{flex-shrink:0;font-size:14px;line-height:1.3;opacity:.75}
.gal-rimando a{display:inline-block;margin-left:10px;white-space:nowrap;
  font-weight:600}

/* ================================================================
   GALLERIE - CORREZIONI, PARTE 2 di 2
   Il cestino sulla selezione multipla, le due schede di invio, il
   cursore di trascinamento, la ricerca e i gruppi anno/mese
   dell'elenco, i due filtri distinti nel portfolio pubblico.
   Colori sempre da variabili del tema.
   ================================================================ */

/* ---- il cestino sulla selezione multipla ---- */
.gal-selezione-barra .btn-danger{margin-left:auto}
@media (max-width:560px){
  .gal-selezione-barra{flex-wrap:wrap}
  .gal-selezione-barra .btn-danger{margin-left:0}
}

/* ---- le due schede di invio, WhatsApp ed email ---- */
.gal-invio-tab{display:flex;gap:6px;border-bottom:1px solid var(--line-soft);
  margin-bottom:2px}
.gal-invio-tab button{display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px 10px;border:0;background:none;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.gal-invio-tab button:hover{color:var(--ink)}
.gal-invio-tab button svg{width:16px;height:16px;flex-shrink:0}
.gal-invio-tab-attiva{color:var(--accent-ink) !important;
  border-bottom-color:var(--accent) !important}

/* ---- il cursore di trascinamento nel pannello della vetrina ----
   ("cambia il cursore con la classica icona dello spostamento,
   altrimenti non si capisce"). Prima solo la manigliola "⠿" aveva il
   cursore grab: la riga intera e' trascinabile (draggable="true" sta
   su .gal-portfolio-riga), quindi e' la riga intera a dover avere il
   cursore giusto. */
.gal-portfolio-riga{cursor:grab}
.gal-portfolio-riga:active{cursor:grabbing}
.gal-portfolio-riga-presa{cursor:grabbing}
/* la manigliola resta piu' visibile al passaggio, cosi' si capisce
   ANCHE guardando dove afferrare, non solo dal cursore */
.gal-portfolio-presa{transition:color var(--tr)}
.gal-portfolio-riga:hover .gal-portfolio-presa{color:var(--accent)}

/* ---- l'elenco gallerie: ricerca e gruppi anno/mese ---- */
.gal-cerca-elenco{margin-bottom:14px}
.gal-cerca-elenco input{max-width:360px}
.gal-gruppo-mese{margin-bottom:10px}
.gal-gruppo-mese:last-child{margin-bottom:0}
.gal-gruppo-mese .gal-elenco{padding-top:2px}

/* ---- il portfolio pubblico: due filtri distinti, non un doppione ---- */
.pf-filtri{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.pf-filtro-gruppo{display:flex;flex-direction:column;align-items:center;gap:7px}
.pf-filtro-titolo{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
/* la categoria ha un vestito piu' leggero della pillola piena: si legge
   subito che e' un secondo filtro, non lo stesso ripetuto */
.pf-tab-categoria button{background:none;border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:6px 12px;color:var(--ink-3)}
.pf-tab-categoria button:hover{border-color:var(--line);color:var(--ink)}
.pf-tab-categoria .pf-tab-attiva{background:none;border-color:var(--accent);
  color:var(--accent-ink)}

/* ==========================================================
   BERSAGLI TATTILI (fase 2 della nuova grafica)
   ----------------------------------------------------------
   Sul telefono ogni cosa che si tocca deve essere alta almeno
   44px: e' la misura del polpastrello. Questi comandi erano
   nati per il mouse, dove bastano 28-30px.
   Sta in fondo al file apposta, dopo le regole che definiscono
   le loro altezze: cosi' vince senza dover alzare il peso dei
   selettori. Non cambia niente sul computer.
   ========================================================== */
@media (max-width:760px){
  .cal-freccia{width:44px;height:44px}
  .cal-oggi,.dispo-scelta-periodo,.gal-portfolio-testa{min-height:44px}
  .tappa-togli{width:44px;height:44px}
  .btn-cestino{min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .gal-tab button,.pf-tab button{min-height:44px}
  .cal-viste button,.psc-interruttore{min-height:44px}
  /* Le caselle da spuntare: quelle di sistema sono alte 13-16px.
     Si ingrandiscono solo qui, il segno di spunta scala con loro.
     La riga che le contiene si tocca tutta, quindi e' lei il bersaglio
     vero: le si da' un'altezza da pollice. */
  input[type="checkbox"],input[type="radio"]{width:24px;height:24px}
  label:has(> input[type="checkbox"]),label:has(> input[type="radio"]){
    min-height:44px;display:flex;align-items:center}

  /* Le pastiglie dei post social dentro alle caselle del mese: qui 44px
     non ci stanno (una casella e' larga 48 punti, il mese diventerebbe
     illeggibile). Si arriva a 28, sopra al minimo di 24, e resta
     comunque cliccabile tutta la casella del giorno. */
  .psc-ev{min-height:28px}
}


/* =====================================================================
   GALLERIE - LE OTTO CORREZIONI DAL COLLAUDO   (marcatore: gal-otto)

   In coda di proposito: questo foglio lo modificano in tanti, e qui in
   fondo non si toglie niente a nessuno -- si aggiunge soltanto.
   Nessun colore scritto a mano: tutto passa dalle variabili di Fresh
   Cloud, cosi' il verde e il carattere Albert Sans arrivano da soli.
   ===================================================================== */


/* ---------------------------------------------------------------------
   PUNTO 1 - "l'anteprima con sfondo scuro resta bianca"

   QUESTA E' LA REGOLA CHE MANCAVA, ed e' il motivo per cui la
   correzione precedente sembrava fatta e invece non si vedeva: il
   colore scelto finiva in una variabile (--mock-fondo) che nessuna
   regola leggeva. Chi ha consegnato ha controllato che la classe
   "gal-mock-sfondo-scuro" esistesse e che dentro ci fosse il nero:
   c'erano tutti e due. Ma il modellino non aveva NEMMENO UNA regola
   sua -- ne' fondo, ne' misure, ne' "position" -- quindi restava
   trasparente e si vedeva attraverso il bianco della finestrella.

   Da qui in avanti il modellino e' una scatola vera: si dipinge col
   fondo scelto e scrive col suo inchiostro.
   --------------------------------------------------------------------- */
.gal-mock{position:relative;display:flex;flex-direction:column;
  overflow:hidden;border-radius:var(--r-s);
  background:var(--mock-fondo,#fff);
  color:var(--mock-inchiostro,#16161D);
  border:1px solid color-mix(in srgb,var(--mock-inchiostro,#16161D) 15%,transparent)}

/* Tutto quello che non e' la barra sta qui dentro: cosi' con la barra
   di lato basta metterli affiancati e copertina, griglia e piede
   restano allineati fra loro senza margini da indovinare. */
.gal-mock-pagina{flex:1;min-width:0;display:flex;flex-direction:column}

/* Il piede con del testo VERO. Serve a far vedere quello che il
   committente ha chiesto -- "sfondo scuro e testi bianchi ovviamente":
   senza una riga di testo appoggiata sul fondo, cambiando sfondo si
   vedrebbe solo il colore dietro le foto, e non si capirebbe che
   cambia anche il colore delle scritte. */
.gal-mock-piede{display:flex;flex-direction:column;align-items:center;
  gap:5px;padding:3px 10px 11px;margin-top:auto}
.gal-mock-piede-nome{font-family:var(--mock-carattere);
  font-style:var(--mock-corsivo);font-variant:var(--mock-maiuscoletto);
  letter-spacing:var(--mock-spaziatura);font-weight:var(--mock-peso);
  font-size:8.5px;line-height:1.1;color:var(--mock-inchiostro);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-mock-piede-riga{display:block;width:34px;height:2px;border-radius:2px;
  background:var(--mock-inchiostro);opacity:.38}

/* le tessere vuote seguono l'inchiostro, non l'accento: su fondo nero
   un rettangolo viola chiaro non e' quello che vedra' il cliente */
.gal-mock-t-vuota{background-image:none;
  background-color:color-mix(in srgb,var(--mock-inchiostro) 17%,transparent)}
.gal-mock-sfondo-scuro .gal-mock-t-vuota{
  background-color:color-mix(in srgb,var(--mock-inchiostro) 22%,transparent)}


/* ---------------------------------------------------------------------
   PUNTO 2 - "la barra laterale non e' veritiera, deve essere molto
   piu' larga"  (segnalato due volte)

   DUE COSE ERANO SBAGLIATE:

   a) la barra era "in posizione assoluta" dentro un modellino che non
      era "relativo": si agganciava quindi alla FINESTRELLA e usciva
      sopra e sotto il modellino. Misurato: barra alta 326 px dentro un
      modellino alto 270. Adesso barra e pagina sono semplicemente
      affiancate, e non c'e' piu' niente da agganciare.

   b) era larga 16 px su 310, cioe' il 5% della pagina. Nella galleria
      vera e' 172 px su 1280, cioe' il 13,5%, e dentro ci stanno il
      logo dello studio, le icone dei contatti e il pulsante "Scarica
      tutto". Tutte le misure qui sotto sono quelle vere ridotte in
      scala (310/1280 = 0,242).
   --------------------------------------------------------------------- */

/* la barra segue il FONDO della galleria, non il colore d'accento:
   nella galleria vera e' cosi' (chiara su galleria chiara, quasi nera
   su galleria scura), e un modellino con la striscia viola su fondo
   nero non sarebbe "come verra' davvero". */
.gal-mock-barra{position:static;height:auto;left:auto;right:auto;top:auto;
  background:color-mix(in srgb,var(--mock-inchiostro) 7%,var(--mock-fondo));
  color:var(--mock-inchiostro);
  border-bottom:1px solid color-mix(in srgb,var(--mock-inchiostro) 13%,transparent)}

/* ---- barra in cima (vera: padding 20/26, logo 92x42 su 1280) ---- */
.gal-mock-header-top .gal-mock-barra,
.gal-mock:not(.gal-mock-header-lato) .gal-mock-barra{
  flex-direction:row;align-items:center;gap:7px;padding:5px 7px;min-height:22px}
.gal-mock:not(.gal-mock-header-lato) .gal-mock-contatti{margin-left:auto}

/* ---- barra di lato: il 13,5% della larghezza, come nella vera ---- */
.gal-mock-header-lato{flex-direction:row;align-items:stretch}
.gal-mock-header-lato .gal-mock-barra{
  width:13.5%;min-width:38px;flex-shrink:0;height:auto;bottom:auto;
  flex-direction:column;align-items:center;gap:7px;padding:7px 4px;
  border-bottom:0;
  border-right:1px solid color-mix(in srgb,var(--mock-inchiostro) 13%,transparent)}
/* la vecchia regola spostava copertina e griglia di 16 px a mano: ora
   la barra occupa il suo posto da sola e quei margini vanno tolti */
.gal-mock-header-lato .gal-mock-copertina,
.gal-mock-header-lato .gal-mock-griglia{margin-left:0}

/* ---- il logo (vero: 128x80 di lato, 92x42 in cima) ---- */
.gal-mock-logo-scatola{display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border-radius:2px;overflow:hidden}
.gal-mock-logo{height:auto;max-width:100%;background:none;padding:0;
  border-radius:0;object-fit:contain}
.gal-mock:not(.gal-mock-header-lato) .gal-mock-logo-scatola{width:22px;height:11px}
.gal-mock-header-lato .gal-mock-logo-scatola{width:100%;height:19px}
.gal-mock-logo-scatola img{width:100%;height:100%;object-fit:contain;display:block}
/* su fondo chiaro il logo bianco sparirebbe: la galleria vera gli mette
   dietro una pastiglia scura, e il modellino fa lo stesso */
.gal-mock-sfondo-chiaro .gal-mock-logo{background:none;padding:0}
.gal-mock-sfondo-chiaro .gal-mock-logo-scatola{
  background:color-mix(in srgb,var(--mock-inchiostro) 88%,transparent);
  padding:2px 3px}

/* ---- le tre icone dei contatti (vere: 19 px, distanti 16) ----
   La specificita' e' alzata di proposito: una vecchia regola
   (.gal-mock-header-lato .gal-mock-barra i) stirava i pallini in
   bastoncini alti 16 px, ed e' quella che vinceva. */
.gal-mock-contatti{display:flex;align-items:center;gap:4px;flex-shrink:0}
.gal-mock-header-lato .gal-mock-contatti{flex-direction:column;gap:4px}
.gal-mock .gal-mock-contatti i,
.gal-mock-header-lato .gal-mock-contatti i{display:block;
  width:5px;height:5px;flex:0 0 auto;border-radius:50%;
  background:var(--mock-inchiostro);opacity:.72}

/* ---- il pulsante "Scarica tutto" (vero: 129x37 dentro 172) ---- */
.gal-mock-scarica{display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border-radius:99px;background:var(--mock-accento)}
.gal-mock:not(.gal-mock-header-lato) .gal-mock-scarica{width:26px;height:9px}
.gal-mock-header-lato .gal-mock-scarica{width:100%;height:9px;margin-top:2px}
.gal-mock-scarica b{display:block;width:52%;height:2px;border-radius:2px;
  background:#fff;opacity:.9}

/* Nel pannello del tocco (telefono) il modellino e' piu' largo: la
   barra resta in proporzione perche' e' espressa in percentuale. */
.gal-tocco-corpo .gal-mock{border-radius:var(--r-m)}

/* Lo stile "Moderno" non e' un tema con colori suoi: nella galleria
   vera vuol dire "il verde del CRM". Il modellino usava un viola
   (#5A57D6) che nella galleria non compare da nessuna parte, quindi il
   pulsante "Scarica tutto" dell'anteprima era di un colore che il
   cliente non vedra' mai. Adesso segue il verde di Fresh Cloud, come
   fa la galleria. */
.gal-mock-tema-moderno{--mock-accento:var(--accent)}


/* ---------------------------------------------------------------------
   PUNTO 3 - "le icone anteprima, bozza e cestino ancora non le hai
   cambiate"
   Adesso sono le SVG dell'insieme unico (_icone.html), le stesse del
   menu e delle notifiche: prendono il colore del testo accanto, quindi
   vanno bene in tema chiaro e in tema scuro senza raddoppiare le
   regole.
   --------------------------------------------------------------------- */
.gal-riga-anteprima,.gal-riga-cestino{display:inline-flex;align-items:center;
  justify-content:center;padding:7px}
.gal-ico-riga{width:17px;height:17px}
.gal-stato{display:inline-flex;align-items:center;gap:5px}
.gal-ico-stato{width:12px;height:12px}
.gal-stato-icona{display:inline-flex;align-items:center}


/* ---------------------------------------------------------------------
   PUNTO 4 - i numerini accanto ai titoli dentro ogni passo
   ("dove ci sono piu' step, metti accanto dei numerini che fanno
   capire gli step da percorrere")
   --------------------------------------------------------------------- */
.gal-sezione-numerata{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gal-passo-numero{flex-shrink:0;width:23px;height:23px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:12px;font-weight:800;
  line-height:1;background:var(--accent);color:var(--on-accent)}
.gal-passo-titolo{min-width:0}
.gal-passo-quanti{margin-left:auto;flex-shrink:0;font-size:11px;font-weight:600;
  color:var(--ink-3);background:var(--sunken);border-radius:999px;
  padding:3px 9px;letter-spacing:.01em}
@media (max-width:520px){
  .gal-passo-quanti{margin-left:0}
}


/* ---------------------------------------------------------------------
   PUNTO 5 - "nel crea il link per il cliente manca sempre l'invio per
   mail, ma solo whatsapp"

   PERCHE' SEMBRAVA MANCARE pur essendoci: le due schede erano due
   scritte grigie da 13 px con una sottolineatura sottile, sopra un
   pulsante verde grande "Apri WhatsApp con questo testo". Aprendo il
   pannello si vedeva un pulsante solo, e "Email" sembrava una
   didascalia, non una cosa da toccare. Chi ha consegnato ha cercato
   "Email" nel codice, l'ha trovata, e ha considerato la cosa fatta.

   Adesso sono due tasti veri dentro una scanalatura: si vede che sono
   DUE STRADE, e quale delle due e' accesa.
   --------------------------------------------------------------------- */
.gal-invio-scegli{margin:14px 0 7px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.gal-invio-tab{display:grid;grid-template-columns:1fr 1fr;gap:5px;
  margin-bottom:0;padding:5px;border-bottom:0;
  background:var(--sunken);border-radius:var(--r-m)}
.gal-invio-tab button{justify-content:center;gap:8px;padding:11px 10px;
  margin-bottom:0;border:0;border-bottom:0;border-radius:var(--r-s);
  font-family:var(--font-display);font-size:14px;font-weight:700;
  color:var(--ink-2);background:transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.gal-invio-tab button:hover{background:var(--surface);color:var(--ink)}
.gal-invio-tab button svg{width:18px;height:18px}
.gal-invio-tab .gal-invio-tab-attiva,
.gal-invio-tab button.gal-invio-tab-attiva{
  background:var(--accent) !important;color:var(--on-accent) !important;
  border-bottom:0 !important;box-shadow:var(--shadow-sm)}
.gal-invio-tab button:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}


/* ---------------------------------------------------------------------
   PUNTO 6 - "metti in evidenza il link del portfolio da condividere,
   piu' bellino e chiaro"
   E' il link che finisce nei messaggi a un cliente potenziale: sta
   fuori dalla parte che si apre e si chiude, con l'indirizzo per
   intero e un pulsante solo per copiarlo.
   --------------------------------------------------------------------- */
.gal-vetrina-link{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding:14px 16px;border-radius:var(--r-m);
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.gal-vetrina-icona{display:flex;align-items:center;justify-content:center;
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:var(--on-accent)}
.gal-vetrina-icona .ico{width:20px;height:20px}
.gal-vetrina-corpo{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.gal-vetrina-eti{font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-ink)}
.gal-vetrina-url{font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--ink);word-break:break-all;line-height:1.3;background:none;padding:0}
.gal-vetrina-azioni{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
@media (max-width:600px){
  .gal-vetrina-link{gap:10px;padding:13px 14px}
  .gal-vetrina-azioni{width:100%}
  .gal-vetrina-azioni .btn{flex:1;justify-content:center}
}


/* ---------------------------------------------------------------------
   PUNTO 7 - "verifica sulle gallerie nere che la leggibilita' dei
   testi e icone ci sia"

   TROVATO col misuratore di contrasto, non a occhio: le icone dei
   contatti nella barra (sito, telefono, Instagram) non avevano NESSUN
   colore assegnato, quindi prendevano l'azzurro dei collegamenti del
   browser. Misurato: 1,85 a 1 sulla galleria chiara (ne servono 3) e
   4,59 a 1 su quella scura. Bastava non dirlo per farlo sbagliare al
   browser. Adesso seguono l'inchiostro della galleria, che il
   chiaro/scuro lo sa gia'.
   --------------------------------------------------------------------- */
.gal-cliente .gal-fissa-contatti a,
.gal-cliente .gal-fissa-contatti a:visited{color:var(--ink);opacity:.88}
.gal-cliente .gal-fissa-contatti a:hover{color:var(--ink);opacity:1}
.gal-cliente .gal-fissa-contatti a:focus-visible{opacity:1;
  outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
/* Nella vetrina pubblica (/portfolio) i contatti sono gia' a posto: la
   loro regola il colore lo dichiara (--ink-2 dentro una pastiglia con
   il bordo). Verificato col misuratore, non toccata. */


/* ---------------------------------------------------------------------
   PUNTO 8 - "uniforma colori, font, caratteri, grafica, tutta molto
   piu' precisa e carina, e usa gli stili che ti ho fornito"

   Prima i quattro riquadri in cima alla pagina erano quattro cose
   diverse: una scheda bianca, una striscia grigia senza scheda, una
   scheda con il titolo in un altro carattere, e l'ultimo senza titolo
   per niente. Adesso hanno tutti la stessa scatola e la stessa
   testata: titolo, nota, e a destra l'indicatore o il pulsante.
   --------------------------------------------------------------------- */
.gal-riquadro{margin-top:14px}
.gal-riquadro:first-of-type{margin-top:0}
.gal-riquadro > .card-body{padding:18px 20px}

.gal-riquadro-testa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  width:100%;margin:0;padding:0;background:none;border:0;
  text-align:left;color:inherit;font:inherit}
button.gal-riquadro-apri{cursor:pointer;padding:2px 0;border-radius:var(--r-s)}
button.gal-riquadro-apri:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px}
.gal-riquadro-titolo{font-family:var(--font-display);font-size:16px;
  font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0;line-height:1.25}
.gal-riquadro-nota{font-size:12.5px;font-weight:500;color:var(--ink-3);
  line-height:1.35;flex:1;min-width:120px}
.gal-riquadro-conta{flex-shrink:0;font-size:12px;font-weight:700;
  padding:4px 11px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink)}
.gal-riquadro-freccia{flex-shrink:0;display:inline-block;font-size:13px;
  color:var(--ink-3);transition:transform .15s ease}
.gal-riquadro-freccia.aperta{transform:rotate(180deg)}
.gal-riquadro-corpo{margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line-soft)}
.gal-riquadro .gal-testa-azioni{flex-shrink:0;margin-left:auto}

/* le note dentro il portfolio prendono lo stesso raggio e lo stesso
   respiro delle altre, invece di tre stili diversi */
.gal-riquadro .gal-portfolio-nota{border-radius:var(--r-m);padding:12px 14px;
  border:1px solid var(--line-soft)}
.gal-riquadro .gal-sezione-piccola{margin-top:20px}
.gal-riquadro .gal-portfolio-scelta-titolo{font-family:var(--font-display);
  font-size:13.5px;font-weight:700;color:var(--ink)}

@media (max-width:600px){
  .gal-riquadro > .card-body{padding:16px}
  .gal-riquadro-testa{gap:8px}
  .gal-riquadro-nota{flex-basis:100%;order:3}
  .gal-riquadro .gal-testa-azioni{margin-left:auto}
}


/* ============ TAPPE DEL PERCORSO, ORA DI PARTENZA, NOTE CON FORMATO ============
   Aggiunte in fondo apposta: cosi' non spostano nemmeno di una riga il
   resto del foglio, che altre lavorazioni stanno toccando in parallelo.
   Tutti i colori passano dalle variabili del tema: in chiaro e in scuro
   si adeguano da soli, senza una seconda regola da tenere allineata. */

/* ---- la riga di una tappa ---- */
.tappa-blocco{border:1px solid transparent;border-radius:8px;padding:6px 6px 4px;
  transition:border-color .12s,background .12s}
.tappa-blocco+.tappa-blocco{margin-top:2px}
.tappa-in-mano{opacity:.45}
.tappa-bersaglio{border-color:var(--accent);background:var(--accent-soft)}
.tappa-maniglia{flex:0 0 auto;width:20px;text-align:center;cursor:grab;
  color:var(--ink-3);font-size:15px;line-height:1;letter-spacing:-3px;
  user-select:none;padding:4px 0}
.tappa-maniglia:active{cursor:grabbing}
.tappa-riga .tappa-nome{flex:0 1 170px;min-width:110px}
.tappa-riga .tappa-indirizzo{flex:1 1 220px;min-width:140px}
.tappa-riga .tappa-cerca{flex:0 0 auto;white-space:nowrap}

/* Le frecce: sul computer non servono (si trascina), ma su un telefono
   trascinare dentro una pagina che scorre non funziona in nessun
   browser, e senza queste l'ordine non si potrebbe cambiare. */
.tappa-frecce{display:none;gap:6px;margin:4px 0 0 30px}
.tappa-frecce button{width:40px;height:32px;border:1px solid var(--line-strong);
  border-radius:6px;background:var(--surface);color:var(--ink);
  font-size:12px;line-height:1;cursor:pointer}
.tappa-frecce button:disabled{opacity:.35;cursor:default}

/* ---- quale posto ha trovato Google: la scelta ---- */
.tappa-scelta{margin:6px 0 2px 30px;border:1px solid var(--line-strong);
  border-radius:8px;background:var(--surface-2);padding:8px;
  display:flex;flex-direction:column;gap:4px}
.tappa-scelta-testa{font-size:12px;color:var(--ink-2);margin-bottom:2px}
.tappa-candidato{display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);
  padding:7px 9px;color:var(--ink);font:inherit}
.tappa-candidato:hover,.tappa-candidato:focus-visible{
  border-color:var(--accent);background:var(--accent-soft)}
.tappa-candidato-nome{display:inline;font-weight:650;font-size:13px;color:var(--ink-strong)}
.tappa-candidato-comune{display:inline;font-weight:700;font-size:13px;color:var(--accent-ink)}
.tappa-candidato-comune::before{content:" — "}
.tappa-candidato-via{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.tappa-scelta-chiudi{align-self:flex-start;border:0;background:none;cursor:pointer;
  font-size:11.5px;color:var(--ink-3);text-decoration:underline;padding:2px 0}

.tappa-verifica-attesa{color:var(--warn-ink)}
.tappa-via-piena{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}

/* ---- a che ora partire ---- */
.partenza-esito{display:flex;flex-direction:column;gap:8px}
.partenza-ora{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.partenza-ora-etichetta{font-size:13px;color:var(--ink-2)}
.partenza-ora-numero{font-size:34px;font-weight:700;line-height:1;color:var(--accent-ink)}
.partenza-conti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:3px;font-size:13px;color:var(--ink)}
.partenza-link-imp{font-size:11.5px;margin-left:6px}
.partenza-nota{font-size:11.5px;color:var(--ink-3);line-height:1.45;
  border-left:3px solid var(--line-strong);padding-left:8px}
.partenza-nota-attenzione{color:var(--warn-ink);border-left-color:var(--warn)}
.partenza-dove{font-size:11.5px;color:var(--ink-3);line-height:1.5}

/* ---- il riquadro delle note con grassetto, corsivo ed elenchi ---- */
.rt{border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;
  background:var(--surface)}
.rt:focus-within{border-color:var(--accent)}
.rt-barra{display:flex;align-items:center;gap:3px;flex-wrap:wrap;
  padding:5px 6px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.rt-bottone{min-width:32px;height:30px;padding:0 7px;cursor:pointer;
  border:1px solid transparent;border-radius:6px;background:none;
  color:var(--ink);font-size:13px;line-height:1}
.rt-bottone:hover,.rt-bottone:focus-visible{border-color:var(--line-strong);
  background:var(--surface)}
.rt-separa{width:1px;height:18px;background:var(--line);margin:0 3px}
.rt-stato{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.rt-stato-ok{color:var(--ok-ink);font-weight:600}
.rt-stato-no{color:var(--bad-ink);font-weight:600}
.rt-campo{min-height:110px;max-height:320px;overflow-y:auto;padding:10px 12px;
  font-size:14px;line-height:1.55;color:var(--ink);outline:none;
  background:var(--surface);word-break:break-word}
.rt-campo:empty::before{content:attr(data-vuoto);color:var(--ink-3)}
.rt-campo p{margin:0 0 8px}
.rt-campo p:last-child{margin-bottom:0}
.rt-campo ul,.rt-campo ol{margin:0 0 8px;padding-left:22px}
.rt-campo li{margin:2px 0}

/* ---- telefono ---- */
@media (max-width:640px){
  /* Trascinare col dito non funziona: compaiono le frecce, e la
     maniglia sparisce per non promettere una cosa che non fa. */
  .tappa-frecce{display:flex}
  .tappa-maniglia{display:none}
  .tappa-riga{flex-wrap:wrap}
  .tappa-riga .tappa-nome{flex:1 1 calc(100% - 34px);min-width:0}
  .tappa-riga .tappa-indirizzo{flex:1 1 100%;min-width:0}
  .tappa-riga .tappa-cerca{flex:1 1 auto}
  .tappa-scelta,.tappa-frecce{margin-left:0}
  .tappa-verifica{margin-left:0}
  .partenza-ora-numero{font-size:30px}
  .rt-campo{min-height:130px}
}


/* ================================================================
   GALLERIE: IL CARICAMENTO CHE NON TI BUTTA FUORI (415)
   In coda al file, come sempre: non si tocca il blocco di nessun
   altro lavoro. Solo var(--...), mai un colore scritto a mano, cosi'
   il tema chiaro e quello scuro restano allineati da soli.
   ================================================================ */

/* ---- le 4 fasi che restano in vista mentre si scorre ----
   "sticky ma piu' basse": la barra in alto del CRM e' alta 67 px
   (misurata), quindi le fasi si fermano a 76, con un dito d'aria in
   mezzo. Fuori dalla scheda del titolo, se no si staccherebbero dopo
   duecento pixel (vedi la nota in gallerie.html). */
.gal-passi-fissa{
  position:sticky; top:76px; z-index:25;
  margin-top:15px; padding:10px 14px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--shadow-sm);
}
.gal-passi-fissa .gal-passi{margin-top:0}

/* ---- l'avanzamento del caricamento, dentro la barra delle fasi ---- */
.gal-invio-strip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
}
.gal-invio-strip-testo{
  display:flex; align-items:baseline; gap:7px;
  font-size:13px; color:var(--ink-3); flex-shrink:0;
}
.gal-invio-strip-testo strong{color:var(--ink); font-size:14px}
/* NIENTE "opacity" qui. Il colore e' gia' quello dei testi secondari
   (--ink-3), che sul tema scuro sta a 4,92:1 sul fondo del riquadro --
   appena sopra la soglia. Schiarirlo ancora con una trasparenza lo
   portava intorno a 3,3:1, cioe' sotto: misurato, non stimato.
   Il nome del file puo' essere lunghissimo e si accorcia coi puntini,
   invece di far crescere la barra e spingere giu' la pagina a ogni
   foto -- che e' il contrario di quello che deve fare una barra che
   sta ferma. */
.gal-invio-strip-nome{
  max-width:220px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.gal-barra-strip{flex:1; min-width:120px; margin:0}
.gal-invio-strip-tasti{display:flex; gap:8px; flex-shrink:0}
.gal-invio-strip-nota{
  margin:8px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.45;
}

/* ---- l'intestazione che apre e chiude l'elenco delle foto ---- */
.gal-sezione-apribile{cursor:pointer; user-select:none}
.gal-sezione-apribile:hover .gal-passo-titolo{text-decoration:underline}
.gal-sezione-apribile:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;
}
.gal-sezione-freccia{
  margin-left:8px; font-size:12px; color:var(--ink-3);
  transition:transform var(--tr);
}
.gal-sezione-freccia.aperta{transform:rotate(180deg); display:inline-block}

@media (max-width:640px){
  /* DA TELEFONO LA BARRA DEVE RESTARE BASSA, se no il rimedio e' peggio
     del male: misurata a 375 px veniva alta 254 pixel, cioe' un terzo
     dello schermo occupato per sempre da una barra che deve solo tenere
     il segno. Ridotta a 174:
       - la frase lunga qui dentro sparisce (resta per intero nel
         pannello del caricamento, al passo 1, dove c'e' spazio);
       - il nome del file sparisce: su uno schermo stretto "137 di 573"
         e' l'unica cosa che serve davvero;
       - i tasti restano, perche' sono il motivo per cui la barra c'e'. */
  .gal-passi-fissa{top:64px; padding:8px 10px}
  .gal-invio-strip{gap:8px; margin-top:8px; padding-top:8px}
  .gal-invio-strip-nome{display:none}
  .gal-invio-strip-nota{display:none}
  .gal-invio-strip-tasti{margin-left:auto}
  .gal-barra-strip{min-width:70px}
}

/* ====================================================================
   INTERRUTTORE ACCESO/SPENTO  (riusabile in tutto il CRM)
   --------------------------------------------------------------------
   Sostituisce la casella di spunta dove la scelta e' "acceso o spento".
   Dentro c'e' un <input type="checkbox"> VERO, solo reso invisibile: si
   raggiunge col tasto Tab, si accende con la barra spaziatrice e i
   lettori di schermo lo annunciano come una spunta normale. Un <div>
   cliccabile avrebbe la stessa faccia ma niente di tutto questo.

   Come si scrive:
     <label class="interruttore">
       <input type="checkbox" ...>
       <span class="interruttore-pista"><span class="interruttore-pallino"></span></span>
       <span class="interruttore-testo">Acceso</span>
     </label>
   L'ordine conta: la pista deve venire subito dopo l'input.

   Tutti i colori vengono dai token del tema: se domani cambia la
   tavolozza del CRM, l'interruttore la segue senza toccare nulla qui.
   La pista spenta usa --ink-3 (il grigio medio, definito sia in chiaro
   sia in scuro) e il pallino usa --surface: cosi' il contrasto fra i
   due resta buono in tutti e due i temi.
   ==================================================================== */
.interruttore{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  user-select:none;position:relative}
.interruttore input{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:46px;height:28px;margin:0;opacity:0;cursor:pointer;z-index:1}
.interruttore-pista{flex:0 0 auto;position:relative;width:46px;height:28px;
  border-radius:999px;background:var(--ink-3);transition:background var(--tr)}
.interruttore-pallino{position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform var(--tr)}
.interruttore input:checked + .interruttore-pista{background:var(--accent)}
.interruttore input:checked + .interruttore-pista .interruttore-pallino{transform:translateX(18px)}
.interruttore input:focus-visible + .interruttore-pista{outline:2px solid var(--accent);
  outline-offset:3px}
.interruttore input:disabled{cursor:not-allowed}
.interruttore input:disabled + .interruttore-pista{opacity:.45}
.interruttore-testo{font-size:13px;font-weight:600;color:var(--ink-2);min-width:54px}
/* Da telefono il bersaglio da toccare resta lo stesso: 46x28 e' gia'
   sopra la misura minima consigliata, e l'etichetta intera e'
   cliccabile perche' e' un <label>. */

/* ====================================================================
   CAMPO COLORE CON CODICE ESADECIMALE  (riusabile in tutto il CRM)
   --------------------------------------------------------------------
   Il selettore del browser per scegliere a occhio, e accanto la casella
   dove il codice si scrive: serve per i colori "propri" (il pantone
   dello studio, quello dato dal grafico) che con la tavolozza non si
   azzeccano mai. Il comportamento sta in static/js/campo-colore.js.
   ==================================================================== */
.campo-colore{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
/* Le due misure sono scritte con il genitore davanti (.campo-colore ...)
   apposta: cosi' vincono su regole tipo ".voce-campo input[type=text]",
   che in certe pagine allargano i campi di testo al 100% e qui
   manderebbero la casella del codice a capo, sotto la tavolozza. */
.campo-colore .campo-colore-tavolozza{width:46px;min-width:46px;height:36px;
  flex:0 0 auto;padding:2px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--surface);cursor:pointer}
.campo-colore .campo-colore-codice{width:132px;min-width:0;flex:0 0 auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:.03em;text-transform:uppercase;text-align:left}
.campo-colore .campo-colore-errore{flex:1 1 100%;font-size:11.5px;color:var(--bad);
  line-height:1.45}

/* ====================================================================
   RICERCA NELLE IMPOSTAZIONI
   Quello che il filtro mette da parte sparisce davvero. Serve
   !important perche' Alpine scrive display direttamente nell'attributo
   style degli elementi con x-show.
   ==================================================================== */
.ricerca-nascosto{display:none !important}

/* ================================================================
   GALLERIE: SELEZIONE MULTIPLA, STATISTICHE, CHIEDI-TESTO (417)
   In coda al file, come sempre. Solo var(--...), mai un colore
   scritto a mano.
   ================================================================ */

/* ---- la spunta sulle righe dell'elenco ---- */
.gal-riga-spunta{
  display:flex; align-items:center; justify-content:center;
  padding:0 4px 0 10px; cursor:pointer; flex-shrink:0;
}
.gal-riga-spunta input{width:18px; height:18px; cursor:pointer; accent-color:var(--accent)}
.gal-riga-selezionata{background:var(--accent-soft)}

/* ---- la barra che compare quando hai spuntato qualcosa ---- */
.gal-elenco-sel{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 14px;
  background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:var(--r-m);
}
.gal-elenco-sel-conta{font-size:13.5px; color:var(--ink); flex:1; min-width:150px}
.gal-elenco-sel-conta strong{font-size:15px}
/* Il numero delle foto in evidenza: e' quello che deve fermare la mano. */
.gal-elenco-sel-foto{font-weight:800}
.gal-elenco-sel-tasti{display:flex; gap:8px; flex-wrap:wrap}

/* ---- le statistiche ---- */
.gal-stat-riquadri{
  display:grid; gap:10px; margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.gal-stat-riquadro{
  padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r-m); background:var(--surface-2);
}
.gal-stat-etichetta{
  font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3);
}
.gal-stat-valore{
  font-family:var(--font-display); font-size:24px; font-weight:800;
  color:var(--ink-strong); line-height:1.15; margin-top:4px;
}
/* IL DATO CHE NON C'E' non deve somigliare a un numero: carattere
   normale, piu' piccolo, in corsivo. Se somigliasse a una misura
   sarebbe peggio che non mostrarlo. */
.gal-stat-valore-ignoto{
  font-family:inherit; font-size:15px; font-style:italic;
  font-weight:600; color:var(--ink-3);
}
.gal-stat-ignoto{border-style:dashed}
.gal-stat-nota{font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.35}
.gal-stat-ultima{font-size:13px; color:var(--ink-2); margin:12px 0 0}
.gal-stat-titolo-grafico{
  font-size:12.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); margin:18px 0 8px;
}

/* Il grafico: colonnine e basta, nessuna libreria. */
.gal-stat-grafico{
  display:flex; align-items:flex-end; gap:2px;
  height:90px; padding:6px 8px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-m); overflow-x:auto;
}
.gal-stat-colonna{
  flex:1; min-width:5px; height:100%;
  display:flex; align-items:flex-end;
}
.gal-stat-barretta{
  width:100%; min-height:2px; border-radius:2px 2px 0 0;
  background:var(--accent); transition:height var(--tr);
}
.gal-stat-avvertenza{
  font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:9px 0 0;
}
.gal-stat-mancanti{margin-top:14px; font-size:12.5px; color:var(--ink-3)}
.gal-stat-mancanti summary{cursor:pointer; font-weight:700; color:var(--ink-2)}
.gal-stat-mancanti ul{margin:8px 0 0; padding-left:18px; line-height:1.55}
.gal-stat-mancanti li{margin-bottom:5px}

/* ---- il campo dentro la finestrella chiediTesto() ---- */
.chiedi-campo{margin-top:12px; width:100%}
.chiedi-aiuto{font-size:12.5px; color:var(--ink-3); margin:8px 0 0; line-height:1.45}
/* L'avviso NON e' un aiuto: dice cosa si rompe, e si deve vedere.
   Nel prompt di sistema stava in maiuscolo dentro il testo, dove non
   lo leggeva nessuno. */
.chiedi-avviso{
  font-size:12.5px; line-height:1.45; margin:8px 0 0;
  padding:8px 10px; border-radius:8px;
  background:var(--warn-bg);
  border:1px solid var(--warn);
  color:var(--warn-ink);
}

@media (max-width:640px){
  .gal-elenco-sel-tasti{width:100%}
  .gal-elenco-sel-tasti .btn{flex:1}
  .gal-stat-grafico{height:70px}

  /* ---- LA RIGA DELL'ELENCO SU SCHERMO STRETTO ----
     Misurato a 375 px: la riga e' larga 267, e dentro ci stanno la
     copertina (56, che non si restringe), l'etichetta dello stato (65) e
     due tasti da 44. Al testo restavano ZERO pixel: il nome del cliente
     e i dati andavano a capo una parola per riga, e l'etichetta "Bozza"
     ci finiva sopra.
     ERA GIA' COSI' PRIMA di questa consegna -- misurato togliendo la
     spunta: 162 px di altezza invece di 198 -- ma la spunta nuova toglie
     altri 32 px e peggiora una cosa gia' rotta. Siccome l'ho peggiorata
     io, la sistemo io:
       - copertina e tasti piu' piccoli (restano sopra i 36 px, cioe'
         ancora centrabili col pollice);
       - al testo si garantisce uno spazio minimo vero;
       - l'etichetta dello stato va a capo SOTTO il nome invece di
         rubargli la riga. */
  .gal-riga{gap:0}
  .gal-riga-spunta{padding:0 4px}
  .gal-riga-apri{gap:8px; flex-wrap:wrap; padding:9px 0}
  .gal-copertina{width:40px; height:40px}
  .gal-corpo{flex:1 1 100px; min-width:100px}
  .gal-stato{order:3; margin-left:48px; flex:0 0 auto}
  .gal-riga .btn-cestino{
    min-width:36px; width:36px; min-height:36px; height:36px;
    padding:0; flex-shrink:0;
  }
}