/* ==========================================================
   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{
  /* rame del marchio -- gli stessi valori del sito (css/temi.css) */
  --accent:#8f6126;              /* sulla pagina 5.17:1 - bianco sopra 5.81:1 */
  --accent-2:#996f29;            /* fine del gradiente, bianco sopra: 4.75:1 */
  --accent-ink:#6c4519;          /* accento piu' scuro: passaggio del mouse, testo. 8.14:1 */
  --accent-soft:#f4ede3;         /* accento sopra: 4.77:1 */
  --accent-bright:#b97f21;       /* SOLO decorazione (pallini, alone): mai testo sopra */
  --accent-bright-soft:#f8f4ec;  /* accento sopra: 4.98:1 */
  --logo-gradient:linear-gradient(135deg,#784f1e,#996f29);

  /* il marchio non cambia col tema: serve alle gallerie a fondo bianco */
  --brand:#8f6126; --brand-2:#996f29; --brand-ink:#6c4519;
  --on-accent-scuro:#17120e;   /* 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 sotto. */
  --fisso-c-ground:#f6f1ea; --fisso-c-surface:#fffcf8; --fisso-c-sunken:#f1e9df;
  --fisso-c-ink:#4b423b; --fisso-c-ink-strong:#2b2320; --fisso-c-ink-2:#5e544c;
  --fisso-c-ink-3:#70675d; --fisso-c-line:#e0d5c8; --fisso-c-line-soft:#ece3d7;
  --fisso-c-line-strong:#8a7f72;
  --fisso-s-ground:#17120e; --fisso-s-surface:#221a14; --fisso-s-sunken:#2c231a;
  --fisso-s-ink:#efe9e2; --fisso-s-ink-strong:#faf6f1; --fisso-s-ink-2:#ada396;
  --fisso-s-ink-3:#948a7e; --fisso-s-line:#3b3022; --fisso-s-line-soft:#2f261b;
  --fisso-s-line-strong:#7d7266;

  /* superfici */
  --ground:#f6f1ea;              /* fondo della pagina */
  --surface:#fffcf8;             /* riquadri, finestre */
  --surface-2:#f1e9df;           /* aree incassate, passaggio del mouse */
  --sunken:#f1e9df;
  --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:#4b423b;                 /* su riquadro 9.59:1 - su pagina 8.73:1 */
  --ink-strong:#2b2320;          /* titoli, 15.05:1 */
  --ink-1:var(--ink);            /* ponte */
  --ink-2:#5e544c;               /* 7.21:1 su riquadro, 6.56:1 su pagina */
  --ink-3:#70675d;               /* didascalie: 5.42:1 su riquadro, 4.93:1 su
                                    pagina, 4.61:1 sulle aree incassate */

  /* bordi */
  --line:#e0d5c8;                /* bordo morbido, decorativo */
  --line-soft:#ece3d7;
  --line-strong:#8a7f72;         /* bordo che DEVE vedersi: campi, comandi.
                                    3.83:1 su riquadro, 3.49:1 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.
     NON CAMBIANO DI SIGNIFICATO: verde fatto, arancione da guardare,
     rosso attenzione. Il rame e' il colore del MARCHIO, non dei
     semafori. Arancione e rosso sono stati solo scuriti quanto basta
     a passare la soglia: prima l'arancione sul suo fondo era a 3.94. */
  --link:#1257c9; --link-soft:#e5eaf7;
  --ok:#0e7038;   --ok-bg:#dfeae2;   --ok-ink:#0e7038;    /* 5.01:1 */
  --warn:#a84d08; --warn-bg:#f6e7d9; --warn-ink:#a84d08;  /* 4.65:1 */
  --bad:#b3261e;  --bad-bg:#f7e3e0;  --bad-ink:#b3261e;   /* 5.30:1 */
  --idle:#5e544c; --idle-bg:#eee8e0; --idle-ink:#5e544c;  /* 6.06:1 */
  --info:#1257c9; --info-bg:#e5eaf7; --info-ink:#1257c9;  /* 5.40:1 */
  --danger:var(--bad);           /* ponte */

  /* testo sopra ai fondi pieni. Nel tema chiaro e' bianco ovunque:
     con l'arancione scurito regge anche li'. */
  --on-accent:#ffffff;           /* 5.81:1 */
  --on-ok:#ffffff;               /* 6.19:1 */
  --on-warn:#ffffff;             /* usare --warn-solid come fondo */
  --warn-solid:#a84d08;          /* arancione pieno: bianco sopra 5.63:1 */
  --on-bad:#ffffff;              /* 6.54:1 */
  --on-info:#ffffff;             /* 6.50:1 */
  --on-idle:#ffffff;             /* 7.37:1 */

  /* la barra laterale */
  --rail:#fffcf8;
  --rail-ink:#5e544c;            /* voci di menu, 7.21:1 */
  --rail-dim:#70675d;            /* titoli di sezione, 5.42:1 */
  --rail-line:#ece3d7;           /* le righe divisorie dentro la barra */
  --rail-hover:#f1e9df;

  /* 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:#edc487; --accent-2:#f7deab; --accent-ink:#eecfa0; --accent-soft:#2d2415;
  --accent-bright:#f7deab; --accent-bright-soft:#2d2415;
  --logo-gradient:linear-gradient(135deg,#edc487,#f7deab);
  --ground:#17120e; --surface:#221a14; --surface-2:#2c231a; --sunken:#2c231a;
  --ink:#efe9e2;                 /* 14.21:1 su riquadro, 15.43:1 su pagina */
  --ink-strong:#faf6f1;          /* titoli, 15.92:1 */
  --ink-2:#ada396;               /* 6.90:1 */
  --ink-3:#948a7e;               /* didascalie: 5.05:1 su riquadro, 4.55:1
                                    anche sulle aree incassate */
  --line:#3b3022; --line-soft:#2f261b; --line-strong:#7d7266;  /* 3.65:1 sul riquadro */
  --link:#8fb6ff; --link-soft:#2b3446;
  --ok:#5cc98a;   --ok-bg:#25392c;   --ok-ink:#5cc98a;    /* 5.99:1 */
  --warn:#ffab5e; --warn-bg:#4a3520; --warn-ink:#ffab5e;  /* 6.17:1 */
  --bad:#ff8e86;  --bad-bg:#472c28;  --bad-ink:#ff8e86;   /* 5.71:1 */
  --idle:#ada396; --idle-bg:#332b23; --idle-ink:#ada396;  /* 5.60:1 */
  --info:#8fb6ff; --info-bg:#2b3446; --info-ink:#8fb6ff;  /* 6.12:1 */
  --warn-solid:#ffab5e;
  --on-accent:#17120e; --on-ok:#17120e; --on-warn:#17120e;
  --on-bad:#17120e; --on-info:#17120e; --on-idle:#17120e;  /* 7.49-9.95:1 */
  --rail:#221a14; --rail-ink:#ada396; --rail-dim:#948a7e;
  --rail-line:#2f261b; --rail-hover:#2c231a;
  --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:#edc487; --accent-2:#f7deab; --accent-ink:#eecfa0; --accent-soft:#2d2415;
  --accent-bright:#f7deab; --accent-bright-soft:#2d2415;
  --logo-gradient:linear-gradient(135deg,#edc487,#f7deab);
  --ground:#17120e; --surface:#221a14; --surface-2:#2c231a; --sunken:#2c231a;
  --ink:#efe9e2;                 /* 14.21:1 su riquadro, 15.43:1 su pagina */
  --ink-strong:#faf6f1;          /* titoli, 15.92:1 */
  --ink-2:#ada396;               /* 6.90:1 */
  --ink-3:#948a7e;               /* didascalie: 5.05:1 su riquadro, 4.55:1
                                    anche sulle aree incassate */
  --line:#3b3022; --line-soft:#2f261b; --line-strong:#7d7266;  /* 3.65:1 sul riquadro */
  --link:#8fb6ff; --link-soft:#2b3446;
  --ok:#5cc98a;   --ok-bg:#25392c;   --ok-ink:#5cc98a;    /* 5.99:1 */
  --warn:#ffab5e; --warn-bg:#4a3520; --warn-ink:#ffab5e;  /* 6.17:1 */
  --bad:#ff8e86;  --bad-bg:#472c28;  --bad-ink:#ff8e86;   /* 5.71:1 */
  --idle:#ada396; --idle-bg:#332b23; --idle-ink:#ada396;  /* 5.60:1 */
  --info:#8fb6ff; --info-bg:#2b3446; --info-ink:#8fb6ff;  /* 6.12:1 */
  --warn-solid:#ffab5e;
  --on-accent:#17120e; --on-ok:#17120e; --on-warn:#17120e;
  --on-bad:#17120e; --on-info:#17120e; --on-idle:#17120e;  /* 7.49-9.95:1 */
  --rail:#221a14; --rail-ink:#ada396; --rail-dim:#948a7e;
  --rail-line:#2f261b; --rail-hover:#2c231a;
  --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)}

/* SEGNO_4431 — il marchio in cima alla barra e' diventato un
   collegamento alla Dashboard. Questo pezzo serve solo a fare in modo
   che, diventando un collegamento, non cambi niente di quello che si
   vedeva prima.
   - misura: il collegamento occupa esattamente lo spazio che occupava
     il disegno da solo (largo quanto la barra, al massimo 190), cosi'
     non si sposta niente nemmeno di un pixel;
   - colore: NON lo decide il collegamento. Il disegno tiene il suo (la
     sedia con var(--accent), il nome con --ink-strong) e continua a
     cambiare da solo fra tema chiaro e tema scuro. Qui si rimette
     --ink-strong anche sul collegamento solo perche' il foglio di
     stile da' a TUTTI i collegamenti il colore --link, che e' azzurro
     e sul marchio sarebbe sbagliato;
   - sottolineatura: spenta, anche col mouse sopra. Il foglio di stile
     la mette a tutti i collegamenti, e sotto a un marchio non ci va;
   - col mouse sopra il marchio schiarisce appena: nessun riquadro che
     compare, niente che si sposta, solo il segno che si puo' cliccare;
   - il contorno quando lo si raggiunge col tasto Tab e' gia' quello di
     tutto il programma (la regola :focus-visible piu' in alto), quindi
     non ne serve uno a parte e resta uguale alle voci del menu. */
.sidebar-marchio-link{display:block;width:100%;max-width:190px;min-width:0;
  color:var(--ink-strong);text-decoration:none;transition:opacity .15s}
.sidebar-marchio-link:hover{text-decoration:none;opacity:.82}
.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:13px;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:12px;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:15px;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:13px;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:14px;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:13px;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:14px;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:15px;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:14px;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:14px;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:15px;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:13px;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:15px;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:15px}
.table th,table th{text-align:left;font-size:13px;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:13px;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:13px;
  font-weight:600;padding:2px 9px;border-radius:20px;
  background:var(--idle-bg);color:var(--idle-ink);white-space:nowrap}
/* ...ma quando l'AI NON puo' partire il grigio neutro e' proprio la cosa
   sbagliata: e' il momento in cui il contatore smette di parlare di
   crediti e comincia a dire "questo pulsante non funziona". I colori sono
   quelli che il CRM usa gia' per le cose andate male (--bad-bg /
   --bad-ink), definiti sia nel tema chiaro sia in quello scuro. */
.crediti-ai-badge.bloccata{background:var(--bad-bg);color:var(--bad-ink);
  white-space:normal}

/* ---------- 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:17px;font-weight:800;margin-bottom:5px}
.empty-state-text{font-size:15px;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:15px;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:12px;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:14px;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:13px;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:14px;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:14px}
}

/* ---------- 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}
/* 210 pixel: da quando i paesi in elenco sono oltre cento, la voce piu'
   lunga non e' piu' "Regno Unito" ma "Bosnia ed Erzegovina". Il nome puo'
   restare tagliato a tendina chiusa senza danno, perche' la parte che
   serve (bandierina e numero) sta all'inizio; ma con 184 pixel si
   tagliava troppo presto. Le voci si scrivono con UNO spazio solo fra
   bandierina, numero e paese: con due, i numeri si vedevano distanziati
   e la tendina sembrava sbagliata. */
/* ECCO PERCHE' I NUMERI SI VEDEVANO DISTANZIATI.
   Qui c'era font-variant-emoji:emoji, messo per far uscire le
   bandierine a colori. Ma quella regola vale per TUTTO il contenuto del
   menu, e le cifre da 0 a 9 hanno anche loro una versione emoji: il
   browser andava a prendere "4" e "1" dal carattere delle emoji, larghi
   e spaziati, e "+41" si vedeva come "+4  1". Le bandierine si vedono a
   colori lo stesso senza quella regola, perche' le emoji bandiera non
   hanno una versione in bianco e nero.
   Verificato con una schermata vera del menu, non a occhio. */
.tel-prefisso{flex:0 0 auto;width:210px;min-width:0;
  padding-right:24px;
  font-variant-numeric:tabular-nums;
  text-overflow:ellipsis}
.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:15px;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)}
/* Il pulsante dentro l'avviso: porta dove si rimedia (per esempio al
   punto esatto delle Impostazioni dove si mette la chiave che manca).
   Colori ereditati dall'avviso, cosi' si legge sia su quello rosso
   d'errore sia su quello scuro normale. */
.avviso-vai{display:inline-block;margin-left:10px;padding:3px 11px;
  border-radius:999px;background:rgba(255,255,255,.22);
  color:inherit;text-decoration:none;font-weight:700;font-size:14px;
  white-space:nowrap}
.avviso-vai:hover{background:rgba(255,255,255,.34);text-decoration:none}

/* IL PULSANTE DENTRO UN RIQUADRO DELLA PAGINA (non dentro l'avvisino).
   Serve ai messaggi che restano li' invece di sparire da soli: per
   esempio "manca la chiave delle mappe" nel riquadro "A che ora
   partire".
   NON si riusa .avviso-vai qui sopra, e non e' una svista: quello ha
   lo sfondo bianco al 22%, che sull'avvisino scuro si vede benissimo e
   dentro un riquadro chiaro sparisce del tutto.
   NESSUN COLORE SCRITTO A MANO. Il testo e il bordo prendono il colore
   del messaggio che li contiene (currentColor): sul messaggio rosso
   d'errore il pulsante viene rosso, e col tema scuro segue il tema
   senza che nessuno debba ricordarsene. Una variabile di colore
   sbagliata qui farebbe sparire il bordo e il pulsante sembrerebbe una
   parola qualsiasi -- e' gia' successo altrove, e si vedeva solo
   guardando la pagina. */
.messaggio-vai{display:inline-block;margin-left:8px;padding:1px 10px;
  border-radius:999px;border:1px solid currentColor;color:inherit;
  text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap}
.messaggio-vai:hover{background:var(--sunken);text-decoration:none}
.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}}

/* --- inizio blocco 49103: l'avviso attaccato a quello che hai premuto ---
   z-index 936: UNO SOPRA la finestra modale (935). Sotto quel numero
   l'avviso di un pulsante dentro una finestra finirebbe DIETRO la
   finestra stessa -- cioe' il difetto che si sta chiudendo, rifatto in
   un altro modo. Resta sotto la pastiglia del tutorial (940), gli
   avvisi in basso (941) e la visita guidata (950/960).
   I colori sono le stesse variabili dell'avvisino in fondo alla pagina:
   cosi' seguono il tema chiaro e quello scuro senza doppioni. */
.avviso-qui{position:fixed;top:0;left:0;z-index:936;
  max-width:min(420px,90vw);padding:10px 14px;border-radius:12px;
  font-size:14.5px;font-weight:600;line-height:1.45;cursor:pointer;
  background:var(--ink);color:var(--ground);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  animation:avviso-qui-entra .16s cubic-bezier(.2,.8,.3,1)}
.avviso-qui-ok{background:var(--ok);color:var(--on-ok)}
.avviso-qui-errore{background:var(--bad);color:var(--on-bad)}
@keyframes avviso-qui-entra{from{opacity:0;transform:translateY(-6px)}
                            to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.avviso-qui{animation:none}}

/* La fascia degli avvisi della bozza, fra il documento e i pulsanti.
   STA FUORI dalla parte che scorre, ed e' tutto il punto: prima quegli
   avvisi erano in fondo al documento, a 1498 px in una finestra da 900,
   e non li leggeva nessuno.
   "flex:0 0 auto" non e' un dettaglio: la finestra e' una colonna
   flessibile, e senza quella riga la fascia si stringe insieme a tutto
   il resto -- la si e' vista tagliata a meta' frase, cioe' il difetto
   di prima rifatto in piccolo. A stringersi dev'essere il documento,
   che tanto ha gia' la sua barra per scorrere. */
.bozza-doc-avvisi{flex:0 0 auto;margin:0 0 12px;padding:10px 12px;
  border-radius:10px;background:var(--sunken);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--danger,#c0392b);
  max-height:32vh;overflow-y:auto}
.bozza-doc-avvisi .bozza-doc-avviso{margin-top:0}
.bozza-doc-avvisi ul{margin:4px 0 0}
/* --- fine blocco 49103 --- */

/* ---------- 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:15px}
.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:15px;font-weight:600}
.ri-nota{font-size:13px;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:14px;padding:6px 26px 6px 9px}
.ri-azioni .form-check{padding:6px 11px;font-size:14px;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)}
/* --- inizio blocco 6901: il saldo diviso in rate ---
   Il "+" e il "−" sono i due pulsanti piu' piccoli del riquadro, e sono
   quelli che si premono col dito. 44 punti e' la misura sotto la quale un
   bersaglio non si prende: la stessa gia' usata nel resto del CRM. */
.ri-piu{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:0 14px;font-size:13px;font-weight:700;white-space:nowrap}
.ri-piu-segno{font-size:20px;line-height:1;font-weight:700}
.ri-togli{min-height:44px;min-width:44px;padding:0 12px;font-size:19px;
  line-height:1;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center}
.ri-rata{background:color-mix(in srgb,var(--accent) 3%,transparent)}
.ri-rata .ri-nome{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ri-rata-data{min-height:44px;max-width:165px;font-size:12.5px;padding:6px 9px}
.ri-rata-importo{min-height:44px;max-width:130px;font-size:14px;padding:6px 9px;
  text-align:right;font-variant-numeric:tabular-nums}
.ri-rate-piede{background:var(--sunken)}
/* I due colori dell'avviso sono quelli del tema (--warn-bg / --warn-ink):
   esistono sia in chiaro sia in scuro, quindi il pannello si legge in tutti
   e due. Scriverne di propri qui vorrebbe dire un giallo che nel tema scuro
   non si vede -- e' gia' successo in questo CRM con un bordo. */
.ri-rate-avviso{background:var(--warn-bg);color:var(--warn-ink);
  font-size:12.5px;font-weight:600;grid-template-columns:1fr;line-height:1.45}
/* --- fine blocco 6901 --- */

@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}
  /* blocco 6901: da telefono le due caselle della rata vanno a tutta riga,
     se no il numero non ci sta e si legge tagliato. */
  .ri-rata .ri-nome{width:100%}
  .ri-rata-data{max-width:none;flex:1 1 140px}
  .ri-rata-importo{max-width:none;width:100%}
  .ri-piu,.ri-togli{min-height:44px}
}

/* ---------- 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:15px;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:12px;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:13px; 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:17px; 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:17px}

  /* 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:13px}
}


/* ==========================================================
   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:12px; 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:14px; 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:15px; 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:12px; 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:14px; color:var(--ink-2)}
/* LE SPESE DELLO STUDIO, riconoscibili senza leggere.
   Le altre voci sono spese di un lavoro preciso; questa no. Il filo
   colorato in cima e' l'unica differenza: basta a far capire che e'
   un'altra famiglia, senza gridare come farebbe uno sfondo pieno. */
.costo-studio{box-shadow:inset 0 3px 0 var(--accent-2,var(--accent))}
.costo-studio .costo-nota a{color:var(--accent-ink,var(--accent))}
.costo-totale{background:var(--sunken)}
.costo-totale .costo-cifra{color:var(--warn-ink)}
.card-nota{font-size:14px; 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:15px; font-variant-numeric:tabular-nums}
th.c-costo{font-size:13px}


/* ---------- 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:14px; color:var(--warn-ink); font-weight:600; white-space:nowrap}
.sollecito-meta{font-size:14px; color:var(--ink-3); margin-top:2px}
.sollecito-azioni{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.sollecito-nota{font-size:14px; 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:14px; 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:14px; 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:14px; 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-testa .mese-nome{font-weight:600; min-width:104px}
.mese-riassunto{color:var(--ink-2); font-size:15px; 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:14px}
.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:15px}
.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:12px; 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:14px;
  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:14px; color:var(--ink-3); margin-bottom:8px; max-width:62ch}
.btn-sm{font-size:14px; 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:13px;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:14px;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:14px;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:13px;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:15px}

/* 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:14px;color:var(--ink-2);
  }
  .cella-stato{width:auto;text-align:left}
}


/* ---- richiesta di conferma, al posto della finestra del sistema ---- */
/* --- blocco 7201: LA CONFERMA NASCEVA SOTTO --------------------------
   Stava a 200, cioe' SOTTO al pannello che manda il link al cliente
   (211), sotto al suo velo (210), sotto al filmato a tutto schermo
   (220) e sotto alla foto a tutto schermo (900). Chi premeva "Manda
   per email" non vedeva succedere niente -- la domanda era li', ma
   dietro -- e ripremeva.
   935 la mette sopra tutti quei pannelli e sotto le tre cose che
   devono restare davanti anche a lei: la pastiglia del tutorial (940),
   gli avvisi in basso (941, vedi notifiche.js) e la visita guidata
   (velo 950, spiegazione 960). */
.chiedi-fondo{position:fixed;inset:0;z-index:935;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;
  /* Se il contenuto e' piu' alto dello schermo si scorre DENTRO la
     finestrella. Senza queste due righe i pulsanti in fondo finivano
     fuori dal bordo e non si potevano premere: succedeva con le foto
     dentro la domanda, e sul telefono quasi sempre. */
  max-height:calc(100vh - 40px);overflow-y:auto;
  animation:chiedi-entra .2s cubic-bezier(.2,.8,.3,1)}
.chiedi-testo{font-size:15px;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:17px;color:var(--ink)}
.chiedi-testo p+p{color:var(--ink-2);font-size:15px}
.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:17px;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:15px;line-height:1.55;color:var(--ink-2)}
.bozza-doc-titoletto{font-size:14px;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:15px;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:15px;color:var(--ink);
  margin-top:8px}
/* blocco 49503: le due righe Imponibile e IVA che il PDF ha gia'. Stanno
   sopra il totale, allineate a destra come lui ma in tono minore: e' il
   totale la riga che si legge, queste due servono a far tornare il conto.
   IL COLORE E' --ink-2, che in questo foglio esiste davvero (riga 78, e
   c'e' anche nel tema scuro). La prima stesura diceva --ink-soft, che NON
   esiste: non avrebbe dato nessun errore, avrebbe solo lasciato le due
   righe del colore di quello che sta sopra. E' il difetto che si vede
   solo guardando la pagina. */
.bozza-doc-riepilogo{text-align:right;font-size:14px;
  color:var(--ink-2);margin-top:6px}
.bozza-doc-avviso{color:var(--danger,#c0392b);font-size:14px;margin-top:10px}
.bozza-doc-nota{margin-top:14px;margin-bottom:0}
.bozza-doc-nota label{font-weight:600;font-size:15px;color:var(--ink)}

/* ---- blocco 42901: i valori che cambiano da un lavoro all'altro ----
   Stanno FRA il documento e la nota, e non e' un caso: si legge il
   contratto, si vede il numero sbagliato per questo lavoro, e il campo
   per cambiarlo e' subito li' sotto, non in un'altra pagina.
   Il fondo incassato li stacca dal foglio: quello sopra e' il documento,
   questo e' il pannello dei comandi. */
.bozza-doc-valori{margin-top:16px;padding:14px 14px 4px;border-radius:10px;
  background:var(--sunken);border:1px solid var(--line-soft)}
.bozza-doc-valori-titolo{font-weight:600;font-size:15px;color:var(--ink);
  margin-bottom:4px}
.bozza-doc-valori-spiega{margin:0 0 12px}
.bozza-doc-valore{margin-bottom:12px}
.bozza-doc-valore-etichetta{display:block;font-size:14px;font-weight:600;
  color:var(--ink);margin-bottom:5px}
.bozza-doc-valore-campi{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bozza-doc-valore-campo{width:96px;flex:0 0 auto}
.bozza-doc-valore-unita{font-size:14px;color:var(--ink-3)}
.bozza-doc-valore .form-hint{margin:5px 0 0}
/* Il segno che il numero e' stato cambiato. La riga di colore a sinistra
   si vede con la coda dell'occhio scorrendo l'elenco, cosa che un bordo
   tutto intorno al campo non fa. */
.bozza-doc-valore.cambiato{border-left:3px solid var(--accent);
  padding-left:9px;margin-left:-12px}
.bozza-doc-valore.cambiato .bozza-doc-valore-campo{border-color:var(--accent);
  background:var(--accent-soft)}
.bozza-doc-rimetti{border:1px solid var(--line);background:var(--surface);
  color:var(--accent-ink);font-size:12.5px;font-family:inherit;
  padding:5px 10px;border-radius:999px;cursor:pointer;line-height:1.2}
.bozza-doc-rimetti:hover{border-color:var(--accent);background:var(--accent-soft)}
.bozza-doc-rimetti:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bozza-doc-attesa{font-size:13px;color:var(--ink-3);margin-right:auto}

@media (max-width:600px){
  .bozza-doc{max-width:100%;max-height:92vh}
  /* Da telefono il campo e il pulsante "rimetti" su una riga sola
     stanno stretti: il pulsante va a capo per conto suo e resta
     abbastanza largo da poterlo centrare col dito. */
  .bozza-doc-valore-campo{width:84px}
  .bozza-doc-valori{padding:12px 12px 2px}
}


/* ---- 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:14px;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:12px;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:14px}

/* 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:14px;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:12px;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:13px;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:14px;color:var(--ink-3);margin-top:3px;word-break:break-word}
.ana-stato{font-size:14px;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:13px;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}
/* --- SEGNO-COLORE-SRGB ---------------------------------------------
   Stessa forma di .gal-avviso, colori diversi apposta: --info e non
   --warn. Il riquadro dice "questa cosa l'ho gia' sistemata io", e i
   colori dell'allarme direbbero il contrario. I due token hanno il
   contrasto gia' verificato in chiaro e in scuro (5,40:1 e 6,12:1),
   quindi si legge in tutti e due i temi senza aggiungere altro. */
.gal-avviso-colore{background:var(--info-bg);color:var(--info-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. */
/* La copertina in movimento (1922): stessa scatola della foto, sopra
   di lei, e trasparente finche' il filmato non e' partito davvero.
   Sotto al velo (z-index) come la foto: il nome dell'evento deve
   restare leggibile anche sopra un filmato chiaro. */
.gal-apertura-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity .6s ease;
  pointer-events:none}
.gal-apertura-video-acceso{opacity:1}
@media (prefers-reduced-motion:reduce){
  .gal-apertura-video{display:none}}

.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}
/* Il nome dello studio sulla copertina, per chi non ha caricato un logo
   suo. Prima al suo posto compariva il marchio disegnato di un altro
   studio. Il bianco qui e' FISSO e non una variabile del tema: la
   pastiglia sotto e' scura fissa sopra la foto, e una variabile chiara
   farebbe sparire il nome. */
.gal-marchio-nome{font-family:var(--font-display);font-size:19px;
  letter-spacing:.5px;color:#fff;white-space:nowrap;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)}

/* === blocco 40701: LA FOTO COMPARE, NON SBATTE ======================
   «appaiono in lazy loading o simile ma le carica mentre scorri, va
   fatto cosi', veloce e animato» -- Giovanni, guardando il concorrente.

   LA DISSOLVENZA. Mezzo secondo, e basta. Su una fotografia di
   matrimonio un'animazione che si nota e' un'animazione sbagliata:
   quello che deve arrivare all'occhio e' la foto, non l'effetto.
   Niente scorrimenti dal basso, niente ingrandimenti: quelli fanno
   ballare una griglia da 186 riquadri.

   IL SEGNO STA SUL RIQUADRO, non sull'immagine, perche' serve a due
   cose insieme: accendere la foto e spegnere la sfumatura di attesa.

   SE IL SEGNO NON ARRIVASSE MAI la foto resterebbe invisibile. E' il
   rischio vero di questa regola, ed e' coperto due volte: da @load, e
   dal giro di sicurezza nella pagina che ogni mezzo secondo accende i
   riquadri gia' pronti (quello prende anche le foto gia' in memoria,
   che possono finire di caricarsi prima che Alpine attacchi @load).

   CON LE ANIMAZIONI SPENTE (prefers-reduced-motion) la riga 209 di
   questo foglio azzera transizioni e animazioni dappertutto: la foto
   passa da 0 a 1 di colpo e si vede lo stesso. Provato. */
/* SEMPRE DENTRO .gal-colonne, MAI da sole. Questa e' la riga piu'
   importante del blocco, e la prima versione non ce l'aveva.
   .gal-tessera non e' solo della galleria pubblica: la usa anche
   pagina_cliente.html, che carica lo stesso foglio di stile e NON ha
   il programma che accende i riquadri. Senza questo prefisso li'
   dentro le fotografie restavano a zero di opacita' PER SEMPRE --
   cioe' una pagina di rettangoli vuoti al cliente. Provato davvero,
   con una tessera messa fuori dalla griglia: opacita' 0, foto
   invisibile. .gal-colonne c'e' solo nella galleria pubblica. */
.gal-colonne .gal-tessera img{opacity:0;transition:opacity .5s ease}
.gal-colonne .gal-tessera.gal-arrivata img{opacity:1}

/* LA SFUMATURA DI ATTESA. Il fondo del riquadro (--sunken) c'era
   gia': questo e' un riflesso che ci passa sopra piano, cosi' il
   posto vuoto dice «sta arrivando» invece di sembrare un buco.
   Sparisce nell'istante in cui la foto c'e'.

   IL GRIGIO E NON IL BIANCO. Il primo tentativo era bianco al 7 per
   cento: sul tema scuro si vedeva, sul tema CHIARO era bianco su
   bianco, cioe' niente. Guardato con gli occhi a 390 e a 1280, non
   dedotto. Un grigio di mezzo funziona nei due sensi: sul chiaro
   passa un'ombra appena, sullo scuro un chiarore appena.

   pointer-events:none: non deve rubare nemmeno un tocco al cuore o
   alla freccia dello scarico che stanno sotto di lui. */
.gal-colonne .gal-tessera::after{content:'';position:absolute;inset:0;
  pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,transparent 22%,
    rgba(140,140,140,.20) 46%,transparent 68%);
  background-size:240% 100%;
  animation:gal-riflesso-attesa 1.6s ease-in-out infinite}
.gal-colonne .gal-tessera.gal-arrivata::after,
.gal-colonne .gal-tessera.gal-persa::after{content:none}
/* IL NOME. Non «gal-attesa»: quella e' gia' una CLASSE di questo
   foglio (riga 1536, il riquadro dei filmati in lavorazione). I nomi
   delle animazioni e quelli delle classi stanno in due elenchi
   diversi e non si darebbero fastidio, ma chi cerca «gal-attesa» fra
   sei mesi troverebbe due cose diverse e perderebbe mezz'ora. */
@keyframes gal-riflesso-attesa{
  from{background-position:120% 0}
  to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .gal-colonne .gal-tessera::after{animation:none}}
/* === fine blocco 40701 === */

/* 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. */
/* --- l'avviso del tetto delle scelte (consegna 2100) ---------------
   I COLORI SONO QUELLI DEL TEMA, non scritti a mano. Un colore
   inventato qui e' un colore che nel tema scuro non si legge -- ed e'
   gia' successo in questo progetto: una variabile che nel tema non
   esisteva faceva sparire un bordo intero, e nel codice sembrava tutto
   a posto. Var() col ripiego dopo la virgola: se un giorno la
   variabile non c'e', il colore c'e' lo stesso.

   GALLEGGIA, NON STA IN CIMA ALLA GRIGLIA. E' la correzione piu'
   importante di questo foglio di stile, e si vede solo provandola sul
   telefono: il riquadro stava sopra le foto, cioe' in cima alla
   pagina. Ma chi tocca il quarto cuore sta guardando la foto numero
   ottanta, duemila punti piu' in giu'. Il messaggio c'era, ed era
   fuori dallo schermo: per lui era esattamente un cuore che non
   risponde e nessuno che glielo spiega -- cioe' la cosa che questa
   consegna doveva evitare.
   Adesso sta fisso in basso, appena sopra il contatore che galleggia
   gia' (.gal-volante, z-index 80): stesso posto dove l'occhio va gia'
   a leggere "3 di 3 foto scelte". */
.gal-avviso-tetto{position:fixed;left:50%;bottom:74px;
  transform:translateX(-50%);z-index:81;
  margin:0;padding:12px 18px;border-radius:12px;
  background:var(--avviso-sfondo,rgba(60,42,10,.94));
  color:var(--avviso-testo,#fff);
  border:1px solid var(--avviso-bordo,rgba(240,190,90,.45));
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  font-size:13.5px;line-height:1.6;text-align:center;text-wrap:balance;
  /* WIDTH:MAX-CONTENT E NON "auto". Un riquadro fisso senza larghezza
     si stringe da solo il piu' possibile (shrink-to-fit): sul telefono
     usava 195 punti dei 362 disponibili e la frase veniva su SETTE
     righe strette. Misurato, non dedotto. Con max-content parte dalla
     larghezza della frase intera e poi la taglia il max-width qui
     sotto, cioe' usa tutto lo spazio che c'e'. */
  width:max-content;
  max-width:min(46ch,calc(100vw - 28px))}
@supports (backdrop-filter:blur(8px)){
  .gal-avviso-tetto{backdrop-filter:blur(8px)}}
@media (max-width:640px){.gal-avviso-tetto{bottom:66px}}
.gal-tetto-sforato{display:block;margin-top:7px}
.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}

/* --- inizio blocco 41700: LA FINE DELLA SELEZIONE ----------------------
   Il pannello sotto le preferite. NON e' fisso e non galleggia: il
   contatore che galleggia c'e' gia' (.gal-volante, qui sopra), e due
   cose appiccicate in fondo allo schermo si coprono a vicenda sul
   telefono -- misurato a 390 punti, dove il pannello coprirebbe la
   penultima fila di foto.
   I colori sono presi dalle variabili del tema, con un ripiego grigio
   trasparente che funziona uguale sul chiaro e sullo scuro: un colore
   scritto a mano qui dentro sarebbe sbagliato in uno dei due. */
.gal-fine{margin:26px auto 12px;max-width:min(52ch,100%);
  padding:18px 20px;border-radius:16px;text-align:center;
  background:var(--superficie-2,rgba(127,127,127,.10));
  border:1px solid var(--bordo,rgba(127,127,127,.22))}
.gal-fine-titolo{margin:0 0 5px;font-size:15px;font-weight:700}
.gal-fine-riga{margin:0 0 14px;font-size:13.5px;line-height:1.6;
  opacity:.85;text-wrap:balance}
.gal-fine-tasto{border:0;border-radius:999px;padding:12px 24px;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:var(--ok);color:var(--on-ok)}
.gal-fine-tasto:disabled{opacity:.55;cursor:default}
.gal-fine-tasto:focus-visible{outline:2px solid currentColor;
  outline-offset:3px}
/* Riaprire non e' il gesto principale: stesso posto, peso minore. */
.gal-fine-riapri{background:transparent;color:inherit;
  border:1px solid var(--bordo,rgba(127,127,127,.45))}
/* A selezione chiusa i cuori RESTANO VISIBILI e si vede che non
   rispondono. Nasconderli farebbe sparire dalla vista proprio la
   selezione che il cliente e' venuto a guardare. */
.gal-chiusa .gal-cuore,
.gal-chiusa .gal-visore-cuore{opacity:.5;cursor:not-allowed}
/* --- fine blocco 41700 --- */

/* ==========================================================================
   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.
   ========================================================================== */
/* --- blocco 68400: il fondo del visore non lascia piu' passare
   niente da sotto ---------------------------------------------
   PRIMA era rgba(8,8,10,.97): 'quasi opaco' voleva dire che il 3%
   restante lasciava intravedere la griglia delle foto e i testi
   della pagina sotto, sempre -- poco visibile da fermi, molto
   visibile durante lo swipe: il bordo della foto (opaca al 100%)
   si sposta col dito e rivela/nasconde quell'ombra, che percio'
   sembra muoversi insieme alla foto. Misurato sul banco 68400:
   portato il fondo al 100% (stesso colore, RGB 8,8,10) l'ombra
   sparisce, ferma e durante lo swipe. Lo swipe stesso -- blocco
   66401, di ieri -- non e' stato toccato: qui si cambia solo un
   colore, nessun calcolo in piu'. */
.gal-schermo{position:fixed;inset:0;z-index:900;background:#08080a;
  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}
/* LA PASTIGLIA DIETRO IL MARCHIO, sulle pagine "serve la password",
   "galleria chiusa" e "pacchetto incompleto".
   Prima usava --ink, che e' il colore del TESTO e quindi si ribalta col
   tema: in tema chiaro veniva scura (e il marchio bianco si leggeva), in
   tema SCURO veniva chiara -- e il marchio, che e' bianco fisso, ci
   spariva dentro. Trovato guardando la pagina in tema scuro: si leggeva
   solo la parola dentro al riquadro pieno, il resto era bianco su
   bianco.
   --fisso-s-ground e' scuro in tutti e due i temi, ed e' lo stesso che
   usa la schermata di accesso per lo stesso identico motivo. */
.gal-cancello .gal-marchio{background:var(--fisso-s-ground);
  border-color:var(--fisso-s-ground);
  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:13px;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:17px;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:12px;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:14px;line-height:1;padding:0}
.allegato-elimina:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.tappa-verifica{font-size:13px;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:14px}
@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:14px;
  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:15px;line-height:1.3;word-break:break-word}
.chipaga-sotto{font-size:14px;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:14px;cursor:pointer;transition:var(--tr)}
.chipaga-togli:hover{border-color:var(--danger);color:var(--danger)}
.chipaga-attesa{font-size:14px;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:14px;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}

/* ---- vengo da un'altra piattaforma ----
   IL RIQUADRO DOVE SI LEGGE IL PIANO PRIMA DI IMPORTARE. Deve staccarsi
   dalla pagina: e' il punto in cui uno legge "sto per creare 612 foto" e
   decide di si' o di no, e un elenco senza cornice in mezzo agli altri
   riquadri non si legge come una domanda.
   I colori passano tutti dalle variabili del tema, cosi' funziona
   uguale col tema chiaro e col tema scuro senza scriverlo due volte. */
.gal-importa{border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:14px 16px;background:var(--surface)}
.gal-importa-elenco{list-style:none;margin:8px 0 0;padding:0;
  font-size:12.5px;color:var(--ink-3);line-height:1.7}
.gal-importa-elenco li{padding-left:12px;position:relative}
.gal-importa-elenco li:before{content:'\2022';position:absolute;left:0;
  color:var(--accent)}
/* Il riquadro delle scelte che arrivano da fuori, nel passo 5. Piu'
   leggero del piano: e' un'offerta, non una domanda. */
.gal-importa-scelte{border:1px dashed var(--line);border-radius:var(--r-m);
  padding:12px 14px;background:var(--surface)}
.gal-zona-bloccata:hover{border-color:var(--line);background:var(--surface)}

/* ---- copertina ad hoc, due tagli (punto 3) ---- */
/* --- inizio blocco 49509: I PULSANTI DELLA COPERTINA USCIVANO DAL RIQUADRO
   MISURATO su uno schermo da 1280, con la finestra del CRM larga 946:
   i quattro riquadri stavano su una riga da 226 punti l'uno, e il
   pulsante «Scegli fra quelli caricati» ne vuole 178 in una colonna che
   ne aveva 110. Non potendo stringersi (i pulsanti di questo CRM non
   vanno a capo) usciva dal suo riquadro: tutti e quattro, e il quarto
   arrivava a 1265 mentre la scheda bianca finisce a 1254 -- cioe' fuori
   dalla scheda, con la scritta tagliata a meta' («Scegli fra quelli
   ca...»).
   Era stata lasciata aperta due volte come «non riproducibile». Si
   riproduce sempre, anche a galleria vuota: non dipende dalle foto.

   DUE CORREZIONI, E SERVONO TUTTE E DUE.
   1. IL RIQUADRO CHIEDE PIU' SPAZIO: 300 punti invece di 220. Sotto i
      1200 di finestra i riquadri diventano tre piu' uno, e ognuno ha lo
      spazio per scrivere il pulsante su una riga sola. E' la stessa
      manopola di prima con un numero misurato al posto di uno a occhio.
   2. E SE ANCHE COSI' NON CI STA, non esce lo stesso: il pulsante puo'
      andare a capo e non puo' essere piu' largo della sua colonna. E'
      la rete di sicurezza per le larghezze che non ho provato -- una
      finestra stretta, un carattere piu' grande, una traduzione piu'
      lunga.
   Provato a 1280 e a 390, tema chiaro e tema scuro. --- */
.gal-copertina-pannello{display:grid;gap:14px;margin-top:13px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gal-copertina-slot{display:flex;gap:11px;align-items:center;padding:10px;
  min-width:0;
  border:1px solid var(--line-soft);border-radius:var(--r-m);background:var(--surface)}
.gal-copertina-slot-corpo .btn{max-width:100%;white-space:normal;text-align:left}
/* --- fine blocco 49509 --- */
.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}
/* --- SEGNO-4061: scegliere la copertina fra quello che c'e' gia' ---
   I nomi dei colori sono quelli veri di questo foglio (--ink, --line,
   --surface, --sunken, --accent): una variabile inventata qui dentro
   non da' errore, semplicemente non colora niente -- ed e' un difetto
   che si vede solo guardando la pagina. */
.gal-copertina-scelta{margin-top:6px;padding:7px 8px;
  border:1px solid var(--line-soft);border-radius:var(--r-m,10px);
  background:var(--sunken)}
.gal-copertina-scelta-titolo{margin:0 0 6px;font-size:11.5px;font-weight:600;
  color:var(--ink-strong)}
.gal-copertina-scelta-tasti{display:flex;gap:6px;flex-wrap:wrap}
.gal-copertina-scelta-tasti .btn{flex:1 1 auto;padding-left:8px;padding-right:8px}
.gal-copertina-scelta-nota{margin:6px 0 0;font-size:11px;line-height:1.35;
  color:var(--ink-3)}
/* Le celle non si stirano per colpa di quella aperta: senza questa riga
   tutta la fila diventa alta come la cella col pannello aperto, e le
   altre restano mezze vuote. Si vede solo guardando. */
.gal-griglia{align-items:start}
.gal-scelte-copertina{margin-top:14px;padding:12px;
  border:1px solid var(--line-soft);border-radius:var(--r-m,12px);
  background:var(--sunken)}
.gal-scelte-copertina-testa{display:flex;gap:10px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;margin-bottom:8px;
  color:var(--ink-strong)}
.gal-scelte-copertina-griglia{display:grid;gap:10px;margin-top:10px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.gal-scelte-copertina-cella{display:block;padding:0;border:2px solid var(--line);
  border-radius:10px;background:var(--surface);cursor:pointer;overflow:hidden;
  text-align:left;transition:border-color .15s ease,transform .15s ease}
.gal-scelte-copertina-cella:hover:not(:disabled),
.gal-scelte-copertina-cella:focus-visible{border-color:var(--accent);
  transform:translateY(-2px)}
.gal-scelte-copertina-cella:disabled{opacity:.55;cursor:default}
.gal-scelte-copertina-cella img{display:block;width:100%;height:78px;
  object-fit:cover}
.gal-scelte-copertina-nome{display:block;padding:5px 7px;font-size:11.5px;
  line-height:1.3;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
@media (max-width:640px){
  .gal-scelte-copertina-griglia{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
  .gal-scelte-copertina-cella img{height:64px}
}
.gal-copertina-slot-etichetta{font-size:12.5px;font-weight:600;margin-bottom:6px}

/* --- SEGNO-4063: la cartella "preferite" --------------------------------
   I nomi dei colori sono quelli veri di questo foglio (--ink, --line,
   --surface, --sunken, --accent): una variabile inventata non da'
   errore, semplicemente non colora niente. */
.gal-preferite-griglia{display:grid;gap:10px;margin-top:10px;
  grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
.gal-preferita{margin:0;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--surface);position:relative}
.gal-preferita img{display:block;width:100%;height:88px;object-fit:cover}
.gal-preferita-vuota{display:grid;place-items:center;height:88px;
  background:var(--sunken);color:var(--ink-3)}
.gal-preferita-video{position:absolute;top:6px;left:6px;padding:1px 7px;
  border-radius:99px;font-size:10.5px;font-weight:600;
  background:rgba(0,0,0,.62);color:#fff}
.gal-preferita figcaption{display:block;padding:5px 7px;font-size:11.5px;
  line-height:1.3;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.gal-preferite-barra{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  justify-content:space-between;margin:10px 0 4px;padding:9px 12px;
  border:1px solid var(--line-soft);border-radius:var(--r-m,10px);
  background:var(--sunken);color:var(--ink);font-size:13px}
@media (max-width:640px){
  .gal-preferite-griglia{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .gal-preferita img,.gal-preferita-vuota{height:70px}
}

/* ---- l'avanzamento del caricamento della copertina (1922) ----
   Chiesto gia' una volta e mai fatto: la rotellina che gira dice solo
   "sto facendo qualcosa", e su un file da 40 MB uno resta dieci minuti
   senza sapere se manca poco o se si e' piantato. */
/* --- SEGNO-4065: il pannello "condividi" del cliente -----------------
   Colori presi dalle variabili vere del foglio. Il velo scuro e' un
   valore fisso apposta: sta sopra le foto, e li' il fondo e' scuro in
   tutti e due i temi. */
.gal-condividi-menu{border:0;font:inherit;cursor:pointer}
.gal-condividi-velo{position:fixed;inset:0;z-index:60;display:grid;
  place-items:center;padding:18px;background:rgba(0,0,0,.62)}
.gal-condividi{width:min(420px,100%);padding:16px 18px 18px;
  border-radius:14px;background:var(--surface);color:var(--ink);
  box-shadow:0 18px 48px rgba(0,0,0,.35)}
.gal-condividi-testa{display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin-bottom:10px;
  color:var(--ink-strong);font-size:15px}
.gal-condividi-chiudi{border:0;background:none;color:var(--ink-2);
  font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.gal-condividi-riga{margin:0 0 8px;font-size:13px;line-height:1.5;
  color:var(--ink-2)}
.gal-condividi-avviso{margin:0 0 12px;padding:8px 10px;border-radius:9px;
  font-size:12.5px;line-height:1.45}
.gal-condividi-ok{background:var(--ok-bg);color:var(--ok-ink)}
.gal-condividi-attenzione{background:var(--warn-bg);color:var(--warn-ink)}
.gal-condividi-tasti{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.gal-condividi-uno{display:block;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);font:inherit;font-size:13.5px;text-align:center;
  text-decoration:none;cursor:pointer}
.gal-condividi-uno:hover,.gal-condividi-uno:focus-visible{
  border-color:var(--accent);color:var(--accent-ink)}
.gal-condividi-manuale{margin-top:12px}
.gal-condividi-campo{width:100%;padding:9px 10px;border-radius:9px;
  border:1px solid var(--line-strong);background:var(--sunken);
  color:var(--ink);font-size:13px}
.gal-condividi-esito{margin:10px 0 0;font-size:13px;color:var(--ok-ink)}
.gal-scarica-condividi{border:0;font:inherit;cursor:pointer}
.gal-slot-avanzamento{position:absolute;left:8px;right:8px;bottom:8px;
  height:6px;border-radius:99px;background:rgba(0,0,0,.42);overflow:hidden}
.gal-slot-avanzamento span{display:block;height:100%;width:0;
  background:var(--accent);border-radius:99px;transition:width .25s ease}
.gal-slot-percento{position:absolute;inset:0;display:grid;place-items:center;
  font-size:19px;font-weight:600;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.7);pointer-events:none}
.gal-copertina-slot-anteprima video{width:100%;height:100%;object-fit:cover;
  display:block}
/* Il riquadro del filmato si distingue da quello della foto senza
   scriverlo: sfondo piu' scuro e il triangolo del play al centro. */
.gal-copertina-slot-video .gal-copertina-slot-anteprima{background:#15161a}

@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)}

/* == blocco 51705: MARCA_51705_GALLERIA_INCORPORATA -- il riquadro del
   codice da copiare, nella pagina di Giovanni.

   SCORRE PER CONTO SUO invece di allargare la pagina: un iframe scritto
   su una riga sola e' piu' lungo di qualunque schermo, e senza questa
   riga la pagina delle gallerie prenderebbe una barra di scorrimento
   orizzontale tutta sua.

   Il fondo scuro anche in tema chiaro, come da loro: un riquadro di
   codice si riconosce a colpo d'occhio, e non e' testo da leggere ma
   testo da copiare. I due colori sono fissi e misurati (15,3 a 1). == */
.gal-incorpora-codice{margin:6px 0 0;padding:14px 16px;border-radius:var(--r-m);
  background:#1D1B18;color:#E9E3D8;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.7;white-space:pre;
  -webkit-user-select:all;user-select:all}
.gal-avviso-forte{margin:0 0 12px;padding:11px 13px;border-radius:var(--r-s);
  border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--ink-2);font-size:13px;line-height:1.55}
/* == fine blocco 51705 == */

/* == blocco 51703: MARCA_51703_COLORI_DELLA_LETTERA -- i due campi del
   colore nella pagina di Giovanni, e la riga che dice se si leggono.
   Solo variabili di casa: il tema scuro viene da se'. == */
.gal-lettera-colori-riga{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.gal-lettera-colore{display:flex;flex-direction:column;gap:5px;min-width:190px}
.gal-lettera-colore-nome{font-size:12px;font-weight:700;color:var(--ink-2)}
.gal-lettera-contrasto{margin:10px 0 12px;font-size:12.5px;line-height:1.5;
  color:var(--ink-3)}
.gal-lettera-contrasto-no{color:var(--accent-ink);font-weight:600}
@media (max-width:560px){
  .gal-lettera-colori-riga{gap:12px}
  .gal-lettera-colore{min-width:0;width:100%}
}
/* == fine blocco 51703 == */

/* ---- 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}
}

/* RIGHE PIENE (consegna 1702): righe tutte della stessa altezza, ogni
   foto con la sua forma vera, nessun ritaglio, e il margine destro
   sempre dritto. E' l'impianto delle gallerie professionali.

   COME FUNZIONA, in due righe: ogni foto chiede una larghezza pari
   alla sua forma per l'altezza di riga (una foto larga il doppio
   dell'altezza chiede il doppio dello spazio), e poi lo spazio che
   avanza sulla riga viene diviso NELLA STESSA PROPORZIONE. Cosi'
   tutte le foto della riga finiscono esattamente alla stessa altezza,
   e nessuna va ritagliata. "--gal-prop" e' la forma della foto e la
   mette la pagina, foto per foto (consegna 1700).

   L'ULTIMA RIGA non si stira: se avanza una foto sola, senza questo
   accorgimento diventerebbe grande quanto tutta la pagina. Lo spazio
   che resta lo prende un riempitivo invisibile. */
.gal-layout-righe .gal-colonne{display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:8px;--gal-riga:250px}
.gal-layout-righe .gal-colonna{display:contents}
.gal-layout-righe .gal-tessera{margin:0;min-width:0;
  flex-grow:var(--gal-prop,1.5);
  flex-basis:calc(var(--gal-prop,1.5) * var(--gal-riga))}
.gal-layout-righe .gal-tessera img{width:100%;height:auto;display:block}
.gal-layout-righe .gal-colonne::after{content:"";flex-grow:99999;
  flex-basis:0;height:0;margin:0}
@media (max-width:900px){.gal-layout-righe .gal-colonne{--gal-riga:190px;gap:6px}}
@media (max-width:640px){.gal-layout-righe .gal-colonne{--gal-riga:140px;gap:4px}}

/* 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}
}

/* ---- LA GALLERIA IN ANTEPRIMA (consegna 1920) ----
   Serve a due cose sole: dire al cliente com'e' messa, e togliere di
   mezzo i gesti distratti con cui una foto si porta via (il
   trascinamento sul desktop, la selezione, il menu lungo del telefono).
   NON e' la protezione: quella la fa il server, che in anteprima non
   manda mai il file grande. Vedi la nota in galleria-cliente.js. */
.gal-anteprima-avviso{text-align:center;font-size:13.5px;line-height:1.75;
  color:var(--ink-2);margin:0 auto 34px;max-width:54ch;padding:18px 22px;
  border:1px solid var(--line);border-radius:14px;background:var(--sunken);
  text-wrap:balance}
.gal-anteprima-avviso strong{display:block;color:var(--ink);font-weight:600;
  font-size:15px;margin-bottom:5px}
.gal-anteprima-avviso span{display:block}

.gal-anteprima .gal-tessera img,
.gal-anteprima .gal-schermo img{
  -webkit-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none}

/* ---- 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}

/* --- blocco 75549 --- SUL TELEFONO LE ICONE SONO PIU' GRANDI E PIU'
   DISTANTI. «Nella versione mobile in alto dove ci sono i link sito,
   telefono, social... siano piu' grandi e piu' spaziati fra loro» --
   Giovanni. A 19 punti, con 14 di spazio, su un telefono si sbaglia
   icona: il dito copre due bersagli insieme. 24 punti di segno e 22 di
   spazio danno a ognuna una zona da toccare da 44 punti, che e' la
   misura sotto la quale non si dovrebbe mai scendere. Vale solo sul
   telefono: sul computer si clicca con la punta del mouse e le misure
   di prima vanno bene. */
@media (max-width: 640px) {
  .gal-fissa-contatti { gap: 22px }
  .gal-fissa-contatti svg { width: 24px; height: 24px }
  .gal-fissa-contatti a { padding: 6px }
}

/* ---- 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}

/* il riquadrino disegnato del layout "righe piene" (consegna 1702):
   tre righe di mattoncini di larghezza diversa che finiscono tutti
   allineati a destra -- e' esattamente cio' che fa il layout. */
.gal-demo-righe{display:flex;flex-wrap:wrap;align-content:flex-start;
  gap:2px;padding:3px;background:var(--surface)}
.gal-demo-righe span{background:var(--accent-2);border-radius:1px;height:30%}
.gal-demo-righe span:nth-child(1){width:40%}
.gal-demo-righe span:nth-child(2){width:24%}
.gal-demo-righe span:nth-child(3){width:30%}
.gal-demo-righe span:nth-child(4){width:28%}
.gal-demo-righe span:nth-child(5){width:44%}
.gal-demo-righe span:nth-child(6){width:22%}

/* 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:14px;color:var(--ink-2);font-weight:500}
.accordion-freccia{display:inline-block;transition:transform .15s ease;
  color:var(--ink-2);font-size:14px}
.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:17px;color:var(--ink)}
.assistente-titolo-nota{font-size:13px;color:var(--ink-3)}
.assistente-chiudi{border:none;background:transparent;color:var(--ink-3);
  cursor:pointer;font-size:17px;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:15px;
  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:15px;font-weight:600;color:var(--ink)}
.assistente-candidato-dettagli{font-size:13px;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:14px;color:var(--ink)}
.assistente-bozza-riga{display:flex;justify-content:space-between;gap:10px;
  font-size:14px;color:var(--ink-2)}
.assistente-bozza-totale{display:flex;justify-content:space-between;
  font-weight:600;font-size:14px;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:14px;padding:8px 12px}
.assistente-fatto{display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-size:14px;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:14px;color:var(--ink);background:var(--surface)}
.assistente-copia{font-size:14px;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:15px;
  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-1 E' UN PONTE (--ink-1:var(--ink) in cima al file) e i ponti
     NON seguono chi ridefinisce --ink piu' sotto: il valore si fissa
     dov'e' dichiarato, cioe' su :root, col tema del telefono. Chi
     apriva una galleria a sfondo chiaro col telefono in scuro vedeva
     testo chiaro su fondo chiaro: il campo dell'email, la scritta dello
     scarico e il tasto "mandami il pacchetto" -- gli unici tre punti
     che usano --ink-1, che e' il motivo per cui si vedeva solo li'. */
  --ink-1:var(--fisso-c-ink);
  --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-1:var(--fisso-s-ink);
  --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:12px;
  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:14px;color:var(--ink-3);margin-top:2px}
.notifiche-chiudi{border:0;background:none;color:var(--ink-3);font-size:17px;
  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:14px;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:12px;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:15px;line-height:1.35;color:var(--ink);
  overflow-wrap:anywhere}
.notifiche-meta{font-size:13px;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:14px;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.
   --------------------------------------------------------------- */
/* SEGNO_4441 — LA PLACCA ADESSO VUOLE LA SUA CLASSE.
   Prima queste due regole guardavano ".gal-fissa-logo", cioe' TUTTI i
   loghi: la placca scura c'era sempre, anche dietro a un logo gia'
   scuro, e allora era nero su nero -- illeggibile, verificato a schermo
   sulla galleria vera. Adesso la classe "gal-fissa-logo-placca" la mette
   la pagina, e solo quando il logo servito e' chiaro e senza placca
   sparirebbe (vedi logo_e_chiaro in services/impostazioni_documenti.py).
   Chi ha caricato un logo bianco e basta continua a vedere la placca
   esattamente come prima. */
.gal-cliente.gal-sfondo-chiaro .gal-fissa-logo-placca 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-placca 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-placca 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)}

/* SEGNO-1742: il nome del filmato nella pagina di Giovanni */
.gal-nome-vero{display:block;color:var(--ink-3);font-size:11px;
  overflow-wrap:anywhere;line-height:1.35}
.gal-nome-modifica{padding:8px 10px 10px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px}
.gal-nome-modifica .form-input{font-size:13px;padding:7px 9px}
.gal-nome-tasti{display:flex;gap:7px}
.gal-nome-aiuto{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* 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}

/* --- consegna 1950: il filmato senza copertina negli impianti a griglia --- */
/* Il riquadro qui sopra e' fisso a 16:9. Va bene dove ogni riquadro
   tiene la sua forma (mosaico, righe piene, storia), ma NON dove e'
   la cella della griglia a decidere l'altezza: li' il filmato
   restava 16:9 dentro una cella piu' alta, lasciava un buco chiaro
   sotto di se', e il tasto di riproduzione -- che e' centrato su
   TUTTO il riquadro, non sul filmato -- finiva fuori dal rettangolo
   scuro, appoggiato sul buco.

   Le regole che riempiono la cella (".gal-layout-collage
   .gal-tessera img" e la gemella della rivista) parlano solo alle
   foto, e il filmato senza copertina non e' una foto: e' un
   riquadro disegnato a mano. Quindi la stessa cosa va detta anche a
   lui. Nel quadrato diventa quadrato come le foto, per lo stesso
   motivo.

   Verificato a schermo in tutti e sei gli impianti, schermo grande
   e telefono, tema chiaro e tema scuro: negli altri tre (mosaico,
   righe piene, storia) il 16:9 resta com'era. */
.gal-layout-rivista .gal-tessera-vuota,
.gal-layout-collage .gal-tessera-vuota{height:100%;aspect-ratio:auto}
.gal-layout-quadrato .gal-tessera-vuota{aspect-ratio:1}
/* --- fine consegna 1950 --- */
/* SEGNO-1740: LA TARGHETTA SOTTO IL FILMATO.
   Nome sopra, peso e formato sotto. Sta DENTRO la tessera e in fondo,
   sopra un velo scuro, per due motivi: sotto la tessera farebbe saltare
   l'altezza delle colonne del mosaico (che sono calcolate sulla forma
   dell'immagine), e sopra la copertina si legge sempre -- anche quando
   la copertina e' un fotogramma chiarissimo, perche' il velo c'e'
   comunque.
   pointer-events:none perche' la targhetta non deve rubare il clic al
   filmato: si tocca il riquadro e il filmato parte, com'e' sempre stato. */
.gal-targhetta{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:2px;padding:26px 12px 10px;
  pointer-events:none;border-radius:0 0 var(--r-m) var(--r-m);
  background:linear-gradient(to top,rgba(8,8,14,.86),rgba(8,8,14,0))}
.gal-targhetta-nome{color:#fff;font-size:13.5px;font-weight:600;
  line-height:1.3;overflow-wrap:anywhere;
  /* Due righe al massimo: un nome lunghissimo non deve mangiarsi mezza
     copertina. Chi vuole il nome intero lo vede aprendo il filmato. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.gal-targhetta-peso{color:rgba(255,255,255,.74);font-size:11.5px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* La freccia del download sta in basso a destra: senza questo, sulle
   tessere strette finisce sopra le ultime lettere del nome. */
.gal-tessera-video .gal-targhetta-nome{padding-right:52px}
/* Il velo della targhetta arriva fin sotto al bordo tondo: senza questo
   si vedeva uno spicchio di sfondo negli angoli in basso. */
.gal-tessera-video img,.gal-tessera-video .gal-tessera-vuota{
  border-bottom-left-radius:var(--r-m);border-bottom-right-radius:var(--r-m)}

.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-righe .gal-mock-griglia{display:flex;flex-wrap:wrap;gap:3px}
.gal-mock-layout-righe .gal-mock-t{height:32px;min-height:0}
.gal-mock-layout-righe .gal-mock-t:nth-child(1){width:38%}
.gal-mock-layout-righe .gal-mock-t:nth-child(2){width:26%}
.gal-mock-layout-righe .gal-mock-t:nth-child(3){width:32%}
.gal-mock-layout-righe .gal-mock-t:nth-child(4){width:30%}
.gal-mock-layout-righe .gal-mock-t:nth-child(5){width:40%}
.gal-mock-layout-righe .gal-mock-t:nth-child(6){width:26%}
.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)}

/* ---- blocco portfolio-9100: la ricerca, i gruppi per tipologia,
   le carte dei video veri ---- */
.pf-cerca{max-width:420px;margin:0 auto 22px;position:relative;
  display:flex;align-items:center}
.pf-cerca-lente{position:absolute;left:14px;width:17px;height:17px;
  color:var(--ink-3,#8b8b96);pointer-events:none}
.pf-cerca-campo{width:100%;padding:10px 14px 10px 40px;
  border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;
  transition:border-color var(--tr,.2s)}
.pf-cerca-campo:focus{outline:none;border-color:var(--accent)}
.pf-cerca-campo::-webkit-search-cancel-button{cursor:pointer}

.pf-gruppo{margin-bottom:40px}
.pf-gruppo:last-child{margin-bottom:0}
.pf-gruppo-titolo{font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}

.pf-video-muro{display:grid;gap:var(--gal-respiro,24px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-bottom:20px}
.pf-video-card{position:relative;display:block;border-radius:var(--gal-raggio,14px);
  overflow:hidden;background:var(--sunken,#f2f2f5);aspect-ratio:4/5;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(22,22,29,.05));
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s}
.pf-video-card:hover{transform:translateY(-3px);
  box-shadow:var(--shadow,0 8px 24px -12px rgba(22,22,29,.28))}
.pf-video-card-foto{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.pf-video-card-play{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  background:rgba(8,8,14,.55);color:#fff;display:flex;align-items:center;
  justify-content:center;backdrop-filter:blur(2px)}
.pf-video-card-play svg{width:26px;height:26px;margin-left:3px}
.pf-video-card-badge{position:absolute;top:12px;right:12px;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(8,8,14,.6);color:#fff}
.pf-video-card-nome{position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 12px;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(8,8,14,.75),transparent)}

/* ==========================================================
   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}


/* ---------------------------------------------------------------------
   blocco 75505 - "Galleria per galleria" (tab Statistiche): il badge del
   cliente collegato e il link al grafico "Andamento nel tempo". Prima
   comparivano solo entrando nella singola galleria; qui bastava il dato,
   gia' letto altrove nella pagina (vedi gallerie.py, blocco 75505).
   --------------------------------------------------------------------- */
/* blocco 75507: il badge del cliente adesso riusa .gal-cli-chi-eti
   e .gal-cli-chi-testo (nessuno stile a parte, e' voluto: e' quello
   che si vede gia' dentro la galleria) -- qui resta solo la fila
   orizzontale, senza colore ne' peso inventati apposta per questo tab. */
.gs-cliente{display:inline-flex;align-items:center;gap:4px;margin:2px 0 4px}
.gs-cliente:hover{text-decoration:underline}
.gs-andamento{display:inline-flex;align-items:center;gap:3px;margin-left:6px;
  color:var(--link);font-weight:600}
.gs-andamento:hover{text-decoration:underline}
.gs-andamento-ico{width:13px;height:13px;flex-shrink:0}


/* ---------------------------------------------------------------------
   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:14px;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:14px;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:14px;color:var(--ink-strong)}
.tappa-candidato-comune{display:inline;font-weight:700;font-size:14px;color:var(--accent-ink)}
.tappa-candidato-comune::before{content:" — "}
.tappa-candidato-via{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.tappa-scelta-chiudi{align-self:flex-start;border:0;background:none;cursor:pointer;
  font-size:13px;color:var(--ink-3);text-decoration:underline;padding:2px 0}

.tappa-verifica-attesa{color:var(--warn-ink)}
.tappa-via-piena{display:block;font-size:13px;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:14px;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:14px;color:var(--ink)}
.partenza-link-imp{font-size:13px;margin-left:6px}
.partenza-nota{font-size:13px;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:13px;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:14px;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:13px;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:15px;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;
}

/* ---- il pulsante "torna all'elenco" dentro la barra che resta in vista ----
   Chiesto: "nella barra sticky della galleria, il pulsante indietro in
   cima, come quello in fondo". Sta PRIMA delle fasi e non dopo, perche'
   e' li' che l'occhio lo cerca -- e con margine a destra, se no si
   appiccica al primo pallino. Sul telefono la riga va a capo da sola
   (flex-wrap sulla riga), quindi qui non serve nessuna eccezione. */
.gal-passi-indietro{flex-shrink:0; margin-right:12px; white-space:nowrap}

/* ---- il secondo tempo: gli originali che salgono in sottofondo ----
   Deve leggersi come una cosa MINORE del caricamento vero: e' lavoro
   che va avanti da solo e che non richiede a Giovanni di stare li'.
   Sfondo appena accennato e riga tratteggiata sopra, per staccarlo dal
   primo tempo senza gridare. */
.gal-invio-strip-sfondo{
  background:var(--sunken); border-radius:var(--r-s);
  border-top:1px dashed var(--line); padding:10px;
}

/* ---- il riquadro "originali da caricare" ----
   Colore d'attesa, non d'errore: non e' successo niente di male, c'e'
   solo del lavoro rimasto a meta'. Il rosso qui direbbe una bugia. */
.gal-originali-manca{
  margin-top:14px; padding:13px 15px;
  border:1px solid var(--warn); border-radius:var(--r-m);
  background:var(--warn-bg);
}
.gal-originali-titolo{
  margin:0 0 6px; font-weight:600; font-size:14.5px; color:var(--ink);
}
.gal-originali-testo{
  margin:0 0 11px; font-size:13px; line-height:1.55; color:var(--ink-2);
}

/* ---- "rifai le anteprime": una riga di servizio, non un comando
   principale. Sta sopra l'elenco delle foto, in piccolo, con la
   spiegazione accanto e non dentro un tooltip: chi la legge deve poter
   capire se lo riguarda senza premere niente. ---- */
.gal-rifai-riga{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:10px 12px;
  background:var(--sunken); border-radius:var(--r-s);
}
.gal-rifai-nota{
  font-size:12.5px; line-height:1.5; color:var(--ink-3); flex:1; min-width:220px;
}

/* ---- 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}

/* ---- blocco 75511: l'avviso di caricamento SOTTO l'elenco delle foto ----
   Sta esattamente sotto il titolo "Foto e video della galleria" (visibile
   anche a elenco chiuso), cosi' chi guarda li' mentre carica vede subito
   che le foto stanno ancora arrivando, invece di pensare che il
   caricamento si sia fermato. Stesso stile di riquadro delle altre
   caselle di stato della pagina (bordo, fondo leggero). */
.gal-sottelenco-invio{
  margin:10px 0 16px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--sunken);
}
.gal-sottelenco-invio-testo{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-2); margin-bottom:8px;
}
.gal-sottelenco-invio-testo strong{color:var(--ink); font-size:14px}
.gal-sottelenco-invio-barra{margin:0}

@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:14px;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:14px;letter-spacing:.03em;text-transform:uppercase;text-align:left}
.campo-colore .campo-colore-errore{flex:1 1 100%;font-size:13px;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:14px; 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:14px; 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;
  }
}


/* ================================================================
   I DUE PULSANTI DEL DOWNLOAD, nella galleria del cliente (645/647)

   PERCHE' DUE E NON UNO CON UNA TENDINA. Sono due cose diverse e con
   due tempi diversi: una si scarica adesso, l'altra arriva per email
   fra un po'. Una tendina le farebbe sembrare due qualita' dello
   stesso file e nasconderebbe proprio l'informazione che serve.

   E PERCHE' NON DICONO "BASSA" E "ALTA". Quelle due parole descrivono
   il file; chi le legge invece sta decidendo cosa farsene. Qui c'e'
   scritto a cosa serve e quando arriva.
   ================================================================ */
.gal-due-scarichi{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin:18px 0 4px;
}
.gal-scarico{
  flex:1 1 260px; max-width:340px; text-align:left;
  display:flex; flex-direction:column; gap:3px;
  padding:13px 17px; border-radius:13px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface);
  color:var(--ink-1); text-decoration:none; font:inherit;
  transition:border-color .18s ease, transform .18s ease;
}
.gal-scarico:hover{border-color:var(--accent); transform:translateY(-1px)}
.gal-scarico:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.gal-scarico-titolo{font-weight:650; font-size:15px; line-height:1.3}
/* Il sottotitolo NON e' una decorazione: e' la meta' che permette di
   scegliere. Colore dei testi secondari, mai una trasparenza -- sul
   tema scuro una trasparenza lo porterebbe sotto la soglia di
   leggibilita' (misurato altrove in questo stesso foglio). */
.gal-scarico-sotto{font-size:12.5px; line-height:1.45; color:var(--ink-3)}

/* La finestrella dell'email. Dentro la pagina e non in un pop-up del
   browser: un pop-up non si puo' scrivere in italiano decente, su
   telefono e' una lotteria, e questo CRM i pop-up del browser non li
   usa da nessuna parte. */
.gal-alta-riquadro{
  max-width:420px; margin:14px auto 0; padding:16px 18px;
  border:1px solid var(--line); border-radius:13px; background:var(--surface);
  text-align:left;
}
.gal-alta-titolo{margin:0 0 5px; font-weight:650; font-size:15px}
.gal-alta-testo{margin:0 0 12px; font-size:13px; line-height:1.55; color:var(--ink-3)}
.gal-alta-campo{
  width:100%; padding:11px 13px; font-size:15px; font-family:inherit;
  border:1px solid var(--line); border-radius:10px;
  background:var(--ground); color:var(--ink-1);
}
.gal-alta-campo:focus{outline:2px solid var(--accent); outline-offset:1px}
.gal-alta-tasti{display:flex; gap:9px; margin-top:11px; flex-wrap:wrap}
.gal-alta-invia{
  padding:10px 18px; border:0; border-radius:10px; cursor:pointer;
  background:var(--ink-1); color:var(--ground); font:inherit; font-weight:600;
}
.gal-alta-invia:disabled{opacity:.6; cursor:default}
.gal-alta-annulla{
  padding:10px 14px; border:1px solid var(--line); border-radius:10px;
  cursor:pointer; background:transparent; color:var(--ink-3); font:inherit;
}
/* La risposta con i numeri veri ("248 su 300 sono arrivate"): larga
   quanto una riga di testo comoda, non quanto la pagina. */
.gal-alta-esito{
  max-width:52ch; margin:13px auto 0; font-size:13.5px; line-height:1.6;
  color:var(--ink-2); text-align:center;
}

/* ================================================================
   --- blocco 41501 --- LA SALA D'ATTESA DELLO SCARICO

   "Scarica le foto" e' un collegamento normale: il browser parte e la
   pagina non cambia di una virgola finche' il server non ha finito di
   costruire lo ZIP. Con 186 foto sono secondi di niente, e sembra
   bloccata. Questa striscia e' quello che c'e' in mezzo.

   IL NOME. Non "gal-attesa": quella e' GIA' una classe di questo
   progetto (il riquadro "in conversione..." delle foto che stanno
   salendo, con aspect-ratio:1 e display:grid). Riusarla faceva
   diventare la striscia un quadrato alto quanto una foto -- 442 pixel
   di riquadro quasi vuoto. Si e' visto GUARDANDO la pagina; nel codice
   sembrava tutto a posto.

   TRE REGOLE, e sono tutte e tre delle scelte:

   1. STA DENTRO LA PAGINA e non sopra. Niente position:fixed, niente
      velo, nessuna ombra sopra il contenuto: e' un elemento normale che
      SPINGE IN GIU' quello che segue. Mentre aspetta, il cliente
      continua a vedere e a toccare tutte le sue foto.
   2. NON E' UN POP-UP DEL BROWSER. In questo CRM non ce ne sono da
      nessuna parte, su telefono sono una lotteria, e uno che chiede
      "ok" a una macchina che sta lavorando non serve a niente.
   3. NON C'E' UNA PERCENTUALE. Il server non sa a che punto e' -- lo
      ZIP lo costruisce tutto in una volta -- e una barra che avanza da
      sola sarebbe una bugia col contatore.
   ================================================================ */
/* IL VERDE E L'ARANCIONE SONO SUOI, e NON --ok / --warn del foglio.
   Sembra una pignoleria e non lo e'. --ok e --warn cambiano col tema
   del TELEFONO di chi guarda (prefers-color-scheme), mentre lo sfondo
   della galleria lo sceglie il fotografo: .gal-sfondo-chiaro e
   .gal-sfondo-scuro qui sopra ridefiniscono --ground, --surface, --ink
   e --line, ma i colori dei semafori NON li toccano. Risultato visto
   sul banco, guardando: su una galleria chiara aperta da un telefono in
   tema scuro la striscia "e' partito" veniva verde SCURO in mezzo a una
   pagina chiara. E' lo stesso difetto che il commento di
   .gal-sfondo-chiaro racconta per --ink-1.
   I sei valori sono copiati dalle due tavolozze del foglio, dove sono
   gia' misurati: 5.01:1 il verde chiaro, 5.99:1 quello scuro. */
.gal-aspetta{
  --asp-fatta:#0e7038;  --asp-fatta-fondo:#dfeae2;
  --asp-lunga:#a84d08;  --asp-lunga-fondo:#f6e7d9;
  display:flex; align-items:center; gap:10px;
  max-width:52ch; margin:13px auto 0; padding:11px 12px 11px 14px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink-2);
  font-size:13.5px; line-height:1.5; text-align:left;
}
/* Galleria senza sfondo scelto: segue il telefono, come tutto il resto
   della pagina in quel caso. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gal-aspetta{
    --asp-fatta:#5cc98a;  --asp-fatta-fondo:#25392c;
    --asp-lunga:#ffab5e;  --asp-lunga-fondo:#4a3520;
  }
}
/* Se invece il fotografo ha SCELTO chiaro o scuro per questa galleria,
   comanda la sua scelta. Due classi nel selettore e non una: serve a
   battere la regola qui sopra, che altrimenti vincerebbe. */
.gal-cliente.gal-sfondo-chiaro .gal-aspetta{
  --asp-fatta:#0e7038;  --asp-fatta-fondo:#dfeae2;
  --asp-lunga:#a84d08;  --asp-lunga-fondo:#f6e7d9;
}
.gal-cliente.gal-sfondo-scuro .gal-aspetta{
  --asp-fatta:#5cc98a;  --asp-fatta-fondo:#25392c;
  --asp-lunga:#ffab5e;  --asp-lunga-fondo:#4a3520;
}
.gal-aspetta-testo{flex:1 1 auto; min-width:0}

/* Il pallino che gira. Quattordici pixel e non un velo su tutto lo
   schermo: deve dire "sto lavorando", non prendersi la pagina. */
.gal-aspetta-segno{
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line);
  border-top-color:var(--accent);
  animation:gal-aspetta-gira .9s linear infinite;
}
@keyframes gal-aspetta-gira{to{transform:rotate(360deg)}}
/* Chi ha chiesto al proprio telefono di non far muovere le cose non se
   le vede muovere nemmeno qui. Il pallino resta, fermo: si vede lo
   stesso che c'e' qualcosa in corso. */
@media (prefers-reduced-motion:reduce){
  .gal-aspetta-segno{animation:none}
}

/* IL FILE STA SCENDENDO. Verde, e la spunta al posto del pallino che
   gira: e' l'unico momento in cui si puo' dire con certezza che e'
   partito, perche' l'ha appena detto il server. Sparisce da sola dopo
   sei secondi. */
.gal-aspetta-fatta{
  border-color:var(--asp-fatta); background:var(--asp-fatta-fondo);
  color:var(--asp-fatta);
}
.gal-aspetta-fatta .gal-aspetta-segno{
  animation:none; border:0; border-radius:0;
  width:9px; height:15px; margin:0 3px 3px 2px;
  border-right:2.5px solid var(--asp-fatta);
  border-bottom:2.5px solid var(--asp-fatta);
  transform:rotate(42deg);
}

/* CI STA METTENDO TROPPO. Arancione e non rosso, e il pallino si ferma:
   non e' detto che sia rotto -- potrebbe essere partito e il cliente non
   essersene accorto -- e il rosso direbbe una cosa che non sappiamo. */
.gal-aspetta-lunga{
  border-color:var(--asp-lunga); background:var(--asp-lunga-fondo);
  color:var(--asp-lunga);
}
.gal-aspetta-lunga .gal-aspetta-segno{
  animation:none; border-color:var(--asp-lunga);
  border-top-color:var(--asp-lunga);
}
.gal-aspetta-riprova{
  flex:0 0 auto; color:inherit; font-weight:650; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
/* La croce. Se i biscotti del browser sono spenti la striscia non si
   spegne da sola, e una striscia che non si chiude e' un pezzo di
   pagina rotto. */
.gal-aspetta-chiudi{
  flex:0 0 auto; width:26px; height:26px; padding:0; margin:-4px -2px -4px 0;
  border:0; border-radius:8px; background:transparent; cursor:pointer;
  color:inherit; opacity:.55; font-size:19px; line-height:1;
  font-family:inherit;
}
.gal-aspetta-chiudi:hover{opacity:1}
.gal-aspetta-chiudi:focus-visible{outline:2px solid currentColor; outline-offset:1px}
@media (max-width:640px){
  .gal-aspetta{align-items:flex-start; padding:10px 10px 10px 12px}
  .gal-aspetta-segno{margin-top:2px}
}
@media (max-width:640px){
  .gal-due-scarichi{flex-direction:column}
  /* "flex:0 0 auto" E NON SOLO max-width, ed e' una correzione trovata
     GUARDANDO la pagina sul telefono, non leggendo il codice.
     Sopra c'e' "flex:1 1 260px": in una fila orizzontale quel 260 e' la
     LARGHEZZA di partenza, e va bene. Ma qui la fila diventa una
     colonna, e da quel momento lo stesso numero e' l'ALTEZZA: i due
     pulsanti venivano alti 260 pixel l'uno, tre quarti di schermo di
     vuoto sotto due righe di testo. */
  .gal-scarico{flex:0 0 auto; max-width:none}
}


/* ---- la fascia dell'anteprima (649) ----
   La pagina dell'anteprima e' IDENTICA a quella del cliente: senza una
   fascia, dopo trenta secondi non si sa piu' quale delle due si sta
   guardando -- e non si comportano uguale (li' i cuori non si segnano e
   il download e' spento). Colore d'attesa e non d'errore: non e'
   successo niente di male. */
.gal-fascia-anteprima{
  position:relative; z-index:70;
  padding:11px 18px; text-align:center; line-height:1.5;
  background:var(--warn-bg); color:var(--warn-ink);
  font-size:13.5px;
}
.gal-fascia-anteprima strong{color:var(--warn-ink)}
.gal-fascia-anteprima-nota{display:block; opacity:.85; font-size:12.5px; margin-top:2px}

/* ---- il link nato da solo (649) ----
   Non e' un errore e non deve sembrarlo: e' una cosa che il CRM faceva
   e non fa piu'. Colore d'attesa, e testo leggibile -- va letto per
   decidere, non guardato di sfuggita. */
.gal-link-nato-solo{
  margin:7px 0 0; padding:8px 11px; border-radius:9px;
  background:var(--warn-bg); color:var(--warn-ink);
  font-size:12.5px; line-height:1.55;
}
.gal-link-nato-solo strong{color:var(--warn-ink)}

/* ---- SCADENZA-3820: quando si chiude questa consegna ----
   Tre stati e tre colori, e non e' decorazione: chi guarda l'elenco dei
   link deve capire in un colpo d'occhio quale galleria sta per spegnersi
   addosso a un cliente.

     non scade   verde   (e' una cosa venduta, non un problema)
     si chiude   ambra   (una data che si avvicina)
     chiusa      rosso   (qualcuno la' fuori non vede piu' le sue foto)

   I colori arrivano dalle variabili del tema, che esistono sia chiaro
   sia scuro: un colore scritto a mano qui sparirebbe in uno dei due. */
.gal-link-scadenza{
  margin:7px 0 0; padding:8px 11px; border-radius:var(--r-s);
  font-size:12.5px; line-height:1.55;
}
.gal-link-scadenza .gal-scad-mai{color:var(--ok-ink)}
.gal-link-scadenza .gal-scad-viva{color:var(--warn-ink)}
.gal-link-scadenza .gal-scad-morta{color:var(--bad-ink)}
.gal-link-scadenza:has(.gal-scad-mai){background:var(--ok-bg)}
.gal-link-scadenza:has(.gal-scad-viva){background:var(--warn-bg)}
.gal-link-scadenza:has(.gal-scad-morta){background:var(--bad-bg)}
/* Senza :has() (browser vecchi) resta il solo colore del testo su fondo
   normale: si legge lo stesso, e' solo meno appariscente. Nessuno resta
   senza l'informazione. */
.gal-link-scadenza strong{font-weight:700}

/* L'interruttore "non scade" si stacca dal resto del passo 4: e' la
   domanda che viene prima di tutte le altre. */
.gal-senza-scadenza{
  padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r-m); background:var(--sunken);
}
.gal-senza-scadenza .gal-nota-stato{margin-bottom:0}

/* I PULSANTI VANNO A CAPO. Trovato guardando dal telefono: la fila dei
   pulsanti di un link non andava a capo, e gia' con quelli di prima
   l'ultimo finiva fuori dallo schermo. Con «Riapri» in piu' sarebbe
   finito fuori proprio quello che serve premere quando la sposa scrive
   che non ha fatto in tempo. Una riga sola in piu', e ci stanno tutti. */
.gal-link-azioni{flex-wrap:wrap}

/* UN LINK SCADUTO NON E' UN LINK MORTO: si riapre, e le foto ci sono
   ancora tutte. Sbiadirlo come uno revocato diceva il contrario, e
   sbiadiva anche il pulsante «Riapri». Adesso si smorza solo
   l'indirizzo, che intanto e' quello che davvero non funziona.
   Il link REVOCATO resta sbiadito com'era: li' non c'e' niente da
   riaprire, ed e' giusto che si veda. */
.gal-link-scaduto{opacity:1}
.gal-link-scaduto .gal-link-url{opacity:.55}


/* ================================================================
   IL PANNELLO DI INVIO: il cliente si collega da qui (651)
   Prima c'era solo una frase che rimandava al passo 1: chiudere il
   pannello, risalire la pagina, cercare nella tendina, tornare
   indietro. Qui si fa dove serve.
   ================================================================ */
.gal-invio-cliente{
  margin-top:12px; padding:13px 15px; border-radius:11px;
  background:var(--sunken); border:1px solid var(--line);
}
.gal-invio-cliente-titolo{margin:0 0 4px; font-weight:650; font-size:14px}
.gal-invio-cliente-nota{margin:0 0 11px; font-size:12.5px; line-height:1.5;
  color:var(--ink-3)}
.gal-invio-cliente-riga{display:flex; flex-direction:column; gap:8px}
/* L'elenco e' un <select size=6>: si vede subito quanti clienti ci sono
   e si scorre con le frecce. Una tendina chiusa, con trecento nomi
   dentro, non si scorre. */
.gal-invio-cliente-riga select{padding:6px; min-height:130px}
.gal-invio-cliente-oppure{
  margin:13px 0 8px; font-size:12.5px; color:var(--ink-3);
  text-align:center; position:relative;
}

/* ---- il cliente senza email ----
   Il colore e' d'attesa e non d'errore: manca un dato, non si e' rotto
   niente. E c'e' il collegamento diretto alla sua scheda: il CRM sa
   gia' di quale cliente si tratta, quindi non ha senso far cercare. */
.gal-manca-email{
  margin-top:12px; padding:13px 15px; border-radius:11px;
  background:var(--warn-bg); border:1px solid var(--warn);
}
.gal-manca-email p{margin:0 0 9px; font-size:13px; line-height:1.55;
  color:var(--warn-ink)}
.gal-manca-email strong{color:var(--warn-ink)}
.gal-manca-email-tasti{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:11px}
.gal-manca-email-oppure{font-size:12.5px !important; opacity:.9}

/* blocco 49107: la riga sotto il link della vetrina, quando quel link
   vale solo su questo computer. Colore d'attesa e non d'errore: non si
   e' rotto niente, manca un dato. Le stesse variabili del riquadro qui
   sopra, cosi' segue il tema chiaro e quello scuro da solo. */
.gal-vetrina-solo-qui{display:block;margin-top:6px;font-size:12.5px;
  line-height:1.5;color:var(--warn-ink)}
.gal-vetrina-solo-qui a{color:inherit;text-decoration:underline}


/* == 1120-caricamento-fermo == */
/* ================================================================
   QUANDO IL CARICAMENTO SI FERMA (consegna 1120). In coda al file,
   come sempre: non si tocca il blocco di nessun altro lavoro.

   I colori escono tutti da variabili che nel tema ci sono davvero
   (--warn, --bad, --surface, --ink-2, --ink-3, --line-soft, --r-m):
   una variabile inventata qui dentro non da' errore, semplicemente
   sparisce -- e del bordo mancante ci si accorge solo guardando la
   pagina.
   ================================================================ */

/* "in attesa della rete", dentro la striscia del caricamento. */
.gal-invio-muto{color:var(--warn);font-weight:600}
.gal-invio-giro{font-size:11px;color:var(--ink-3);
  border:1px solid var(--line-soft);border-radius:999px;padding:1px 7px}

/* Il riquadro di quando ci ha rinunciato. Non urla come un errore
   rosso pieno -- la galleria e' a posto, manca solo il file di stampa
   -- ma non si puo' nemmeno confondere con una nota qualsiasi. */
.gal-originali-fermi{margin-top:13px;padding:13px 15px;
  border:1px solid var(--bad);border-left:4px solid var(--bad);
  border-radius:var(--r-m);background:var(--surface)}
.gal-originali-fermi-titolo{margin:0 0 6px;font-weight:700;
  font-size:13.5px;color:var(--bad)}
.gal-originali-fermi-testo{margin:0 0 11px;font-size:12.5px;
  line-height:1.55;color:var(--ink-2)}

/* Lo stesso avviso nel passo dei volti: stato NON LETTO, che e' un'altra
   cosa da "non disponibile". Sono due cose diverse e devono leggersi
   diverse. */
.volti-modulo-muto{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  border-left:3px solid var(--warn);padding-left:11px}

@media (max-width:640px){
  /* Sul telefono il pulsante sta largo: si preme col pollice. */
  .gal-originali-fermi > .btn{display:block;width:100%}
  .volti-modulo-muto .volti-btn{width:100%}
}
/* == fine 1120-caricamento-fermo == */


/* == 1122-segno-di-caricamento == */
/* ================================================================
   IL SEGNO CHE UN'IMMAGINE STA ARRIVANDO (consegna 1122). In coda al
   file, come sempre: non si tocca il blocco di nessun altro lavoro.

   L'ONDA STA DENTRO L'IMMAGINE, non in un riquadro messo sopra: e' il
   FONDO dell'<img>. Un'immagine che non ha ancora i suoi pixel mostra
   il proprio fondo; quando arriva, si disegna sopra e lo copre da
   sola. Cosi' non c'e' niente da togliere al momento giusto, e il caso
   peggiore e' un po' di grigio in piu' -- mai una foto nascosta da un
   riquadro rimasto li'.

   I colori escono da variabili che nel tema ci sono davvero
   (--sunken, --surface-2, --surface, --line, --accent): una variabile
   inventata qui dentro non da' errore, semplicemente sparisce.
   ================================================================ */

/* IL COLORE DELLA STRISCIA CHIARA CHE ATTRAVERSA IL GRIGIO.

   ERRORE FATTO E CORRETTO GUARDANDO LA PAGINA, non leggendo il codice.
   La prima versione faceva l'onda con --sunken e --surface-2: due nomi
   diversi che in questo tema valgono LO STESSO IDENTICO GRIGIO
   (#f4f4f4 tutti e due). Il risultato era un rettangolo grigio piatto,
   fermo, indistinguibile da una cella vuota -- cioe' esattamente il
   difetto che questa consegna doveva togliere. Nel codice sembrava
   giusto: si vede solo aprendo la pagina.

   Adesso la striscia e' un velo BIANCO trasparente sopra il grigio:
   forte col tema chiaro, appena accennato col tema scuro, dove un velo
   forte sembrerebbe un lampo. */
:root{--gal-onda-luce:rgba(255,255,255,.85)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--gal-onda-luce:rgba(255,255,255,.11)}
}
:root[data-theme="dark"]{--gal-onda-luce:rgba(255,255,255,.11)}

.gal-sfuma{
  /* Due strati: sotto il grigio fermo, sopra la striscia che scorre.
     --line e' un grigio che si VEDE sul fondo dei riquadri (--sunken
     no: e' quasi identico al riquadro stesso). */
  background-image:
    linear-gradient(100deg, transparent 26%, var(--gal-onda-luce) 47%, transparent 68%),
    linear-gradient(var(--line), var(--line));
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat;
  animation:gal-onda 1.35s linear infinite}
/* Arrivata: niente piu' fondo e niente piu' onda. */
.gal-sfuma-pronta{background-image:none;animation:none}
@keyframes gal-onda{
  from{background-position:130% 0, 0 0}
  to{background-position:-130% 0, 0 0}}

/* Chi ha chiesto meno animazioni non deve vedere un'onda che gira:
   resta il grigio fermo, che dice la stessa cosa. */
@media (prefers-reduced-motion:reduce){
  .gal-sfuma{animation:none}
}

/* La rotellina sopra il riquadrino della copertina e sopra la cella
   del video. Stessa forma nei due posti: e' la stessa cosa che sta
   succedendo. */
.gal-slot-carica,.gal-cella-carica{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,17,.42);backdrop-filter:blur(1.5px)}
.gal-slot-carica::after,.gal-cella-carica::after{
  content:'';width:22px;height:22px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.42);border-top-color:#fff;
  animation:spin .8s linear infinite}
.gal-cella-carica::after{width:30px;height:30px;border-width:3px}

/* --- blocco 14001: quanto manca alla copertina del filmato ---------
   Giovanni ha chiesto il numero, non la rotellina: su una copertina
   grande e una rete lenta un cerchio che gira dice soltanto "sto
   facendo qualcosa", e non si capisce se manca poco o se si è
   piantato. Stessa veste della barra del passo 2. */
.gal-copvideo-avanzamento{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:0 10px;
  background:rgba(10,10,17,.52);backdrop-filter:blur(1.5px);
  pointer-events:none}
.gal-copvideo-numero{
  font-size:15px;font-weight:600;color:#fff;line-height:1;
  text-shadow:0 1px 8px rgba(0,0,0,.7);font-variant-numeric:tabular-nums}
.gal-copvideo-grande .gal-copvideo-numero{font-size:19px}
.gal-copvideo-pista{
  width:100%;max-width:150px;height:6px;border-radius:99px;
  background:rgba(255,255,255,.28);overflow:hidden}
.gal-copvideo-barra{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--accent);transition:width .25s ease}
@media (prefers-reduced-motion:reduce){
  .gal-slot-carica::after,.gal-cella-carica::after{animation:none}
}

/* I due riquadri della copertina devono poter contenere la rotellina:
   senza "relative" finirebbe ancorata al riquadro piu' in fuori e si
   vedrebbe nel posto sbagliato. La cella della griglia ce l'ha gia'. */
.gal-copertina-slot-anteprima{position:relative}
/* == fine 1122-segno-di-caricamento == */


/* == 1124-clic-su-tutta-la-foto == */
/* ================================================================
   SI SELEZIONA CLICCANDO SU TUTTA LA FOTO (consegna 1124). In coda al
   file, come sempre: non si tocca il blocco di nessun altro lavoro.

   I colori escono da variabili che nel tema ci sono davvero
   (--accent, --accent-ink, --r-m): una variabile inventata qui dentro
   non da' errore, semplicemente sparisce -- ed e' un bordo che non si
   vede piu', di cui ci si accorge solo guardando la pagina.
   ================================================================ */

/* La manina: e' il modo in cui una pagina dice "questo si clicca".
   Prima il puntatore restava una freccia, e infatti nessuno provava. */
.gal-cella{cursor:pointer}
/* Dentro la cella, i comandi tornano ad avere il loro puntatore. */
.gal-cella button,.gal-cella select,.gal-cella input{cursor:pointer}

/* SELEZIONATA. Serve piu' di prima: quando basta un clic qualsiasi a
   selezionare, bisogna capire a colpo d'occhio quali sono segnate,
   altrimenti su trecento foto non si sa piu' dove si e' arrivati.
   Sta DOPO .gal-cella-scelta nel file, quindi su una foto scelta dal
   cliente E selezionata vince il verde della selezione: e' quello che
   si sta facendo adesso. */
.gal-cella-selezionata{border-color:var(--accent)}
.gal-cella-selezionata figcaption{color:var(--accent-ink)}

/* IL QUADRATINO SI DEVE VEDERE ANCHE SU UNA FOTO CHIARA. Su un abito
   da sposa spariva del tutto: un alone bianco con un filo scuro
   intorno lo stacca da qualunque fondo. */
.gal-cella-selettore{border-radius:4px;
  box-shadow:0 0 0 3px rgba(255,255,255,.92),0 0 0 4px rgba(10,10,17,.20)}

/* LA LENTE, in alto a destra sulle fotografie. Stessa famiglia del
   tasto di riproduzione dei filmati: tondo, scuro, semitrasparente. */
.gal-lente{position:absolute;top:7px;right:7px;z-index:3;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  padding:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,17,.58);color:#fff;
  backdrop-filter:blur(3px);transition:transform var(--tr),background var(--tr)}
.gal-lente:hover{background:rgba(10,10,17,.82);transform:scale(1.08)}
.gal-lente:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gal-lente svg{width:15px;height:15px}

/* Sul telefono il pulsantino cresce: trenta pixel si mancano col
   pollice. */
@media (max-width:640px){
  .gal-lente{width:36px;height:36px}
  .gal-lente svg{width:17px;height:17px}
  .gal-cella-selettore{width:24px;height:24px}
}

/* La foto aperta grande, dentro la finestra scura gia' usata dai
   filmati. */
.gal-foto-grande{max-width:min(1200px,94vw);max-height:80vh;
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-m);background:rgba(255,255,255,.04)}
/* == fine 1124-clic-su-tutta-la-foto == */


/* == 2220-quattro-affiancate == */
/* ================================================================
   QUATTRO FOTO AFFIANCATE, SU TUTTI GLI IMPIANTI (consegna 2220)

   La regola, con le parole di Giovanni: "con 1000 foto un utente
   deve scorrere troppo". Su uno schermo grande devono starcene
   almeno quattro una accanto all'altra. L'unica eccezione voluta e'
   "Storia", che e' lenta apposta: una foto alla volta a tutta
   larghezza E' il suo senso.

   ATTENZIONE, e' costato un giro di prove: le regole di "rivista" e
   "collage" qui sotto stanno dentro @media (min-width:641px). Senza
   quel guscio schiacciano le regole del telefono che stanno piu' su
   nel foglio -- arrivano dopo, e a parita' di peso vince l'ultima --
   e sul telefono si vedono undici foto larghe diciannove pixel.
   Misurato, non temuto.
   ================================================================ */

/* MOSAICO — quante colonne siano lo decide galleria-cliente.js
   (misuraColonne): 4 sullo schermo grande, 3 sul tablet, 2 sul
   telefono. Qui si stringe solo l'aria fra una foto e l'altra:
   con quattro colonne 24 pixel di spazio bianco diventano una
   grata che si vede piu' delle foto. */
.gal-layout-mosaico .gal-colonne{--gal-respiro:14px}
@media (max-width:640px){.gal-layout-mosaico .gal-colonne{--gal-respiro:6px}}

/* RIGHE PIENE — l'altezza della riga decide quante foto ci stanno:
   piu' bassa la riga, piu' foto entrano. 250 ne facevano tre, 175
   ne fanno quattro. Le foto restano INTERE, senza nessun ritaglio,
   e il bordo destro resta dritto: non cambia come funziona, cambia
   solo quanto e' alta la riga. */
.gal-layout-righe .gal-colonne{--gal-riga:175px}
@media (max-width:900px){.gal-layout-righe .gal-colonne{--gal-riga:150px}}
@media (max-width:640px){.gal-layout-righe .gal-colonne{--gal-riga:105px}}

@media (min-width:641px){
  /* RIVISTA — dodici colonne invece di sei. La foto di apertura resta
     larga quanto la pagina ma piu' bassa (prima si mangiava tutto il
     primo schermo), e sotto si alternano righe da quattro foto e
     righe da due: il passo di una rivista, alla densita' giusta. */
  .gal-layout-rivista .gal-colonne{grid-template-columns:repeat(12,1fr);
    grid-auto-rows:92px;gap:12px}
  .gal-layout-rivista .gal-tessera:first-of-type{grid-column:span 12;grid-row:span 4}
  .gal-layout-rivista .gal-tessera:nth-of-type(6n+2):not(:first-of-type){
    grid-column:span 3;grid-row:span 3}
  .gal-layout-rivista .gal-tessera:nth-of-type(6n+3){grid-column:span 3;grid-row:span 3}
  .gal-layout-rivista .gal-tessera:nth-of-type(6n+4){grid-column:span 3;grid-row:span 3}
  .gal-layout-rivista .gal-tessera:nth-of-type(6n+5){grid-column:span 3;grid-row:span 3}
  .gal-layout-rivista .gal-tessera:nth-of-type(6n){grid-column:span 6;grid-row:span 4}
  .gal-layout-rivista .gal-tessera:nth-of-type(6n+1):not(:first-of-type){
    grid-column:span 6;grid-row:span 4}

  /* COLLAGE — sempre asimmetrico, sempre con foto di misure diverse
     mescolate, ma su dodici colonne: la foto grande prende meta'
     larghezza invece di tutta, e accanto ce ne stanno altre due.
     Le righe fanno tre o quattro foto. */
  .gal-layout-collage .gal-colonne{grid-template-columns:repeat(12,1fr);
    grid-auto-rows:66px;gap:11px}
  .gal-layout-collage .gal-tessera:nth-of-type(7n+1){grid-column:span 6;grid-row:span 6}
  .gal-layout-collage .gal-tessera:nth-of-type(7n+2){grid-column:span 3;grid-row:span 3}
  .gal-layout-collage .gal-tessera:nth-of-type(7n+3){grid-column:span 3;grid-row:span 3}
  .gal-layout-collage .gal-tessera:nth-of-type(7n+4){grid-column:span 3;grid-row:span 4}
  .gal-layout-collage .gal-tessera:nth-of-type(7n+5){grid-column:span 3;grid-row:span 4}
  .gal-layout-collage .gal-tessera:nth-of-type(7n+6){grid-column:span 3;grid-row:span 3}
  .gal-layout-collage .gal-tessera:nth-of-type(7n){grid-column:span 3;grid-row:span 3}
}
/* == fine 2220-quattro-affiancate == */

/* == 2222-colonna-e-cinema == */
/* ================================================================
   DUE IMPIANTI NUOVI (consegna 2222)

   COLONNA FISSA -- la pagina si divide in due. A sinistra una
   striscia stretta che RESTA FERMA mentre le foto scorrono (la riga
   di istruzioni e l'elenco delle cartelle); a destra le foto, larghe
   quanto lo schermo. E' l'unico impianto in cui la pagina non e' una
   colonna sola: con mille foto e sei cartelle, avere l'indice sempre
   sotto gli occhi vale piu' di qualunque effetto.

   CINEMA -- pensato per i FILMATI. Il primo grande quanto la pagina,
   gli altri due per riga, tutti nella forma di uno schermo (16:9)
   con la copertina dentro, il tasto di riproduzione al centro e il
   nome sempre in vista. Qui la regola delle quattro affiancate NON
   vale, ed e' voluto: una galleria di filmati ne ha dieci, non
   mille, e un filmato in un quarto di schermo non si guarda.
   ================================================================ */

/* La scatola della striscia di lato: display:contents vuol dire "fai
   finta che non ci sia". Cosi' in tutti gli impianti tranne
   "colonna" la pagina resta esattamente com'era prima. */
.gal-lato{display:contents}

/* ------------------------- COLONNA FISSA ------------------------- */
/* Le foto: righe della stessa altezza, ogni foto intera, nessun
   ritaglio, bordo destro dritto. E' il motore di "Righe piene"
   (consegna 1702) -- qui pero' dentro una pagina divisa in due e
   larga quanto lo schermo, non dentro la colonna centrale da 1240.
   galleria-cliente.js mette "colonna" fra gli impianti a griglia:
   serve UNA sola .gal-colonna, altrimenti l'ordine delle foto
   diventa 1,3,5... e poi 2,4,6... */
.gal-layout-colonna .gal-colonne{display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:8px;--gal-riga:170px}
.gal-layout-colonna .gal-colonna{display:contents}
.gal-layout-colonna .gal-tessera{margin:0;min-width:0;
  flex-grow:var(--gal-prop,1.5);
  flex-basis:calc(var(--gal-prop,1.5) * var(--gal-riga))}
.gal-layout-colonna .gal-tessera img{width:100%;height:auto;display:block}
/* l'ultima riga non si stira: senza questo, una foto rimasta sola
   diventerebbe grande quanto tutta la pagina. */
.gal-layout-colonna .gal-colonne::after{content:"";flex-grow:99999;
  flex-basis:0;height:0;margin:0}
@media (max-width:900px){.gal-layout-colonna .gal-colonne{--gal-riga:150px;gap:6px}}
@media (max-width:640px){.gal-layout-colonna .gal-colonne{--gal-riga:105px;gap:4px}}

/* La divisione in due comincia da 1000 px. Sotto, la striscia torna
   semplicemente in cima e le foto sotto: su uno schermo stretto una
   colonna laterale si mangerebbe meta' della larghezza delle foto. */
@media (min-width:1000px){
  .gal-layout-colonna .gal-corpo-foto{max-width:1580px;padding-top:44px}
  .gal-layout-colonna .gal-dentro{display:grid;
    grid-template-columns:248px minmax(0,1fr);column-gap:44px;
    align-items:start}
  /* tutto quello che non sono le foto sta nella striscia di sinistra */
  .gal-layout-colonna .gal-dentro > *{grid-column:1}
  /* le foto prendono la colonna di destra per tutta l'altezza: e'
     quella riga alta che da' alla striscia lo spazio per restare
     ferma mentre si scorre. */
  .gal-layout-colonna .gal-dentro > .gal-colonne{grid-column:2;
    grid-row:1 / span 999}
  .gal-layout-colonna .gal-lato{display:block;position:sticky;top:26px;
    align-self:start;text-align:left}
  .gal-layout-colonna .gal-lato .gal-guida{text-align:left;max-width:none;
    margin:0 0 22px;font-size:13px}
  .gal-layout-colonna .gal-lato .gal-tab{flex-direction:column;
    align-items:flex-start;gap:10px;margin:0 0 22px;justify-content:flex-start}
  .gal-layout-colonna .gal-lato .gal-tab button{padding:0;font-size:11.5px}
  .gal-layout-colonna .gal-lato .gal-tab-attiva{
    border-bottom-color:transparent!important}
  .gal-layout-colonna .gal-lato .gal-tab-attiva::before{content:"\2014 "}
}

/* ----------------------------- CINEMA ---------------------------- */
/* aspect-ratio va forzato con !important: la pagina scrive la forma
   vera della foto direttamente sull'elemento, e uno stile scritto li'
   batte il foglio di stile se non lo si forza. */
.gal-layout-cinema .gal-colonne{display:grid;
  grid-template-columns:repeat(2,1fr);gap:22px}
.gal-layout-cinema .gal-colonna{display:contents}
.gal-layout-cinema .gal-tessera{border-radius:10px;background:#0b0b0f}
.gal-layout-cinema .gal-tessera img{width:100%;height:100%;
  aspect-ratio:16/9 !important;object-fit:cover}
/* il primo grande quanto la pagina: e' il montaggio del matrimonio,
   gli altri sono gli estratti. */
.gal-layout-cinema .gal-tessera:first-of-type{grid-column:1 / -1}
/* qui il tasto di riproduzione e' il centro della tessera, non un
   segno in un angolo: si guarda un filmato, non si sceglie una foto. */
.gal-layout-cinema .gal-play{width:74px;height:74px;font-size:27px;
  line-height:74px}
.gal-layout-cinema .gal-tessera:first-of-type .gal-play{width:96px;
  height:96px;font-size:35px;line-height:96px}
/* il nome del filmato sempre in vista, non solo passandoci sopra:
   con dieci filmati "quale dei dieci" e' la prima domanda. */
.gal-layout-cinema .gal-targhetta{opacity:1}
@media (max-width:760px){
  .gal-layout-cinema .gal-colonne{grid-template-columns:1fr;gap:14px}
  .gal-layout-cinema .gal-play{width:60px;height:60px;font-size:22px;line-height:60px}
}

/* ---------- I DUE DISEGNINI NEL RIQUADRO DI SCELTA --------------- */
/* Senza questi, Giovanni sceglierebbe fra otto nomi senza vedere
   niente. Sono disegnati col foglio di stile, nessuna immagine da
   scaricare -- come gli altri sei. */

/* colonna fissa: la striscia stretta a sinistra, e a destra tre
   righe di foto. */
.gal-demo-colonna{display:grid;grid-template-columns:20% 1fr;
  grid-template-rows:repeat(3,1fr);gap:3px;padding:3px;
  background:var(--surface)}
.gal-demo-colonna span:nth-child(1){grid-row:1 / 4;border-radius:2px;
  background:var(--ink-3);opacity:.42}
.gal-demo-colonna span:nth-child(n+2){background:var(--accent-2);border-radius:1px}

/* cinema: uno schermo grande in cima col triangolino di
   riproduzione, e due sotto. */
.gal-demo-cinema{display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1.6fr 1fr;gap:3px;padding:3px;background:var(--surface)}
.gal-demo-cinema span{background:var(--accent-2);border-radius:2px}
.gal-demo-cinema span:nth-child(1){grid-column:1 / 3;position:relative}
.gal-demo-cinema span:nth-child(1)::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent var(--surface)}

/* -------- L'ANTEPRIMA GRANDE CHE ESCE COL MOUSE SOPRA ------------ */
/* Il modellino (gal-mock-*) e' un'altra cosa dal disegnino: e' la
   finestrella con le TUE foto dentro. Senza queste due regole i due
   impianti nuovi si vedrebbero li' come un mosaico qualunque, cioe'
   l'anteprima direbbe una bugia. */
/* LE ALTEZZE QUI SONO IN PIXEL, NON IN FRAZIONI, e non e' un
   dettaglio: la prima versione usava grid-template-rows:repeat(3,1fr)
   e la finestrella usciva COMPLETAMENTE VUOTA -- un riquadro bianco
   senza nessuna foto. Le frazioni dividono un'altezza che qui non
   c'e' (la griglia e' alta quanto il suo contenuto), quindi ogni
   riga veniva alta zero. Nessun controllo automatico se n'era
   accorto: l'ho visto guardando la pagina. */
.gal-mock-layout-colonna .gal-mock-griglia{grid-template-columns:20% 1fr;
  grid-template-rows:repeat(3,26px);gap:3px}
/* align-self:stretch e' obbligatorio: la griglia del modellino ha
   align-items:start, e una tessera senza altezza propria (e' solo
   un'immagine di sfondo) li' dentro viene alta ZERO. E' il motivo
   per cui la finestrella e' uscita vuota due volte di fila. */
.gal-mock-layout-colonna .gal-mock-t{height:auto;min-height:0;
  align-self:stretch}
/* la prima non e' una foto: e' la striscia di lato */
/* !important perche' l'immagine di sfondo la scrive il programma
   direttamente sull'elemento, e uno stile scritto li' batte il
   foglio di stile. Senza, nella striscia di lato compariva una foto
   -- e la striscia di lato non e' una foto (correzione 2224). */
.gal-mock-layout-colonna .gal-mock-t:nth-child(1){grid-row:1 / 4;
  background-image:none !important;
  background-color:color-mix(in srgb,var(--mock-inchiostro) 17%,transparent)}
.gal-mock-layout-colonna .gal-mock-t:nth-child(n+5){display:none}

.gal-mock-layout-cinema .gal-mock-griglia{grid-template-columns:1fr 1fr}
.gal-mock-layout-cinema .gal-mock-t{height:38px;min-height:0}
.gal-mock-layout-cinema .gal-mock-t:nth-child(1){grid-column:1 / 3;height:62px}
.gal-mock-layout-cinema .gal-mock-t:nth-child(n+4){display:none}
/* == fine 2222-colonna-e-cinema == */

/* ================================================================
   == inizio 2240-la-vetrina-mostra-le-foto-che-scegli-tu ==

   Due pezzi nuovi:
     .pf-*  la vetrina pubblica: il muro di fotografie al posto delle
            carte-galleria, la lente, e la pagina in attesa
     .gal-vetrina-*  la scelta delle foto dentro la pagina Gallerie

   NIENTE VARIABILI SENZA RIPIEGO. Su questo impianto e' gia' successo
   che un colore dichiarato in un tema e non nell'altro facesse sparire
   un bordo intero, e nel codice sembrava tutto a posto. Qui ogni
   var() ha il suo valore di scorta.
   ================================================================ */

/* ---- il muro di fotografie ------------------------------------- */
.pf-muro{display:grid;gap:var(--gal-respiro,24px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pf-scatto{position:relative;display:block;padding:0;border:0;cursor:zoom-in;
  background:var(--sunken,#f2f2f5);overflow:hidden;
  border-radius:var(--gal-raggio,14px);aspect-ratio:4/5;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(22,22,29,.05));
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s}
.pf-scatto:hover{transform:translateY(-3px);
  box-shadow:var(--shadow,0 8px 24px -12px rgba(22,22,29,.28))}
.pf-scatto:focus-visible{outline:2px solid var(--accent,#0f8a4f);outline-offset:3px}
.pf-scatto-foto{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pf-scatto:hover .pf-scatto-foto{transform:scale(1.04)}
.pf-scatto-vuoto{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--ink-3,#8b8b96)}
.pf-scatto-vuoto svg{width:38px;height:38px}

/* ---- la lente: la foto grande, senza uscire dalla vetrina ------- */
.pf-lente{position:fixed;inset:0;z-index:900;display:flex;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(8,8,14,.93);cursor:zoom-out}
.pf-lente-foto{max-width:min(1400px,92vw);max-height:84vh;
  width:auto;height:auto;object-fit:contain;cursor:default;
  border-radius:var(--gal-raggio,14px)}
.pf-lente-chiudi{position:absolute;top:14px;right:18px;z-index:2;
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.pf-lente-chiudi:hover{background:rgba(255,255,255,.24)}
.pf-lente-freccia{position:absolute;top:50%;transform:translateY(-50%);
  z-index:2;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.pf-lente-freccia:hover{background:rgba(255,255,255,.24)}
.pf-lente-prima{left:14px}
.pf-lente-dopo{right:14px}
.pf-lente-piede{position:absolute;left:0;right:0;bottom:0;padding:16px 22px;
  display:flex;gap:16px;align-items:center;justify-content:center;
  flex-wrap:wrap;color:#fff;font-size:14px}
.pf-lente-nome{font-weight:600}
.pf-lente-galleria{color:#fff;text-decoration:underline;opacity:.86;font-size:13.5px}
.pf-lente-galleria:hover{opacity:1}

/* ---- la vetrina ancora vuota ----------------------------------- */
.pf-in-arrivo{text-align:center;padding:64px 20px 72px;color:var(--ink-2,#5a5a66)}
.pf-in-arrivo-segno{width:52px;height:52px;color:var(--ink-3,#8b8b96);
  margin:0 auto 18px;display:block;opacity:.6}
.pf-in-arrivo-titolo{margin:0 0 8px;font-size:19px;font-weight:600;
  color:var(--ink,#16161d)}
.pf-in-arrivo-testo{margin:0;font-size:14.5px;line-height:1.55;
  max-width:430px;margin-left:auto;margin-right:auto}
.pf-in-arrivo-tutte{border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:var(--accent-ink,#0f8a4f);text-decoration:underline}

@media (max-width:640px){
  .pf-muro{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .pf-lente{padding:12px}
  .pf-lente-freccia{width:40px;height:40px;font-size:25px}
  .pf-lente-prima{left:6px}
  .pf-lente-dopo{right:6px}
}

/* ================================================================
   LA SCELTA DELLE FOTO, dentro la pagina Gallerie
   ================================================================ */

/* Il promemoria del consenso. Non e' un avviso d'errore e non e' un
   popup (su questo impianto i popup non si usano, mai): e' una nota
   ferma, sempre in vista mentre si sceglie. */
.gal-vetrina-consenso{display:flex;gap:11px;align-items:flex-start;
  margin:12px 0 4px;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(200,140,20,.34);background:rgba(220,160,30,.09);
  color:var(--ink-2,#5a5a66);font-size:13.4px;line-height:1.5}
.gal-vetrina-consenso strong{color:var(--ink,#16161d)}
.gal-vetrina-consenso-segno{flex:0 0 auto;font-size:16px;line-height:1.3}

/* La barra sopra la scelta: quante ne hai messe, e il tasto che le
   toglie tutte. */
.gal-vetrina-testa{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:16px 0 10px}
.gal-vetrina-conta{font-size:13.5px;color:var(--ink-2,#5a5a66)}
.gal-vetrina-conta strong{color:var(--ink,#16161d);font-size:15px}
.gal-vetrina-nessuna{margin:0 0 12px;padding:11px 13px;border-radius:10px;
  border:1px solid rgba(210,120,20,.42);background:rgba(230,150,30,.12);
  color:var(--ink,#16161d);font-size:13.4px;line-height:1.5}

/* La griglia di scelta: quadratini piccoli, perche' si guarda tutta
   la galleria insieme e si punta il dito su quelle buone. */
.gal-vetrina-foto{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  max-height:430px;overflow-y:auto;padding:3px;
  border:1px solid var(--line,#e3e3e8);border-radius:10px;
  background:var(--sunken,#f2f2f5)}
.gal-vetrina-cella{position:relative;display:block;cursor:pointer;
  aspect-ratio:1/1;border-radius:8px;overflow:hidden;
  background:var(--surface,#fff);border:2px solid transparent;
  transition:border-color .15s,transform .15s}
.gal-vetrina-cella:hover{transform:translateY(-2px)}
.gal-vetrina-cella img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .15s}
/* Non scelta = spenta. Si vede a colpo d'occhio quali sono dentro:
   e' la domanda che uno si fa guardando questa griglia. */
.gal-vetrina-cella img{opacity:.42;filter:grayscale(.55)}
.gal-vetrina-cella-dentro img{opacity:1;filter:none}
.gal-vetrina-cella-dentro{border-color:var(--accent,#0f8a4f)}
.gal-vetrina-cella input{position:absolute;opacity:0;width:0;height:0}
.gal-vetrina-cella input:focus-visible + .gal-vetrina-segno{
  outline:2px solid var(--accent,#0f8a4f);outline-offset:2px}
/* Il segno in alto a destra: vuoto quando e' fuori, pieno quando e'
   dentro. Non e' un quadratino di modulo travestito -- e' grande
   abbastanza da centrarlo col pollice. */
.gal-vetrina-segno{position:absolute;top:6px;right:6px;width:24px;height:24px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,17,.5);color:#fff;font-size:13px;font-weight:700;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gal-vetrina-cella-dentro .gal-vetrina-segno{
  background:var(--accent,#0f8a4f);color:var(--on-accent,#fff)}
.gal-vetrina-vuoto{padding:26px 14px;text-align:center;
  color:var(--ink-3,#8b8b96);font-size:13.5px}
/* Una foto non ancora convertita non si puo' mettere in vetrina: si
   vede che non si puo' cliccare, invece di rispondere di no dopo. */
.gal-vetrina-cella-spenta{cursor:not-allowed;opacity:.4}
.gal-vetrina-cella-spenta:hover{transform:none}

@media (max-width:640px){
  .gal-vetrina-foto{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
    max-height:340px}
  .gal-vetrina-segno{width:28px;height:28px}
}
/* == fine 2240-la-vetrina-mostra-le-foto-che-scegli-tu == */

/* == 2542-anteprima-filmati == */
/* ================================================================
   GLI IMPIANTI GUARDATI COI FILMATI (consegna 2542)

   Il modellino disegnava sempre fotografie. Qui i suoi riquadri
   diventano schermi 16:9 col triangolino di riproduzione, che e'
   come si vedono davvero nella galleria del cliente.

   PERCHE' QUESTO BLOCCO STA IN FONDO AL FILE. Le altezze dei
   riquadri sono scritte impianto per impianto piu' su
   (".gal-mock-layout-mosaico .gal-mock-t:nth-child(1){height:40px}"
   e compagnia). Quelle regole pesano quanto queste: a parita' di
   peso vince l'ultima scritta. Se qualcuno sposta questo blocco
   piu' in alto, i riquadri dei filmati tornano di altezze diverse
   e l'anteprima ricomincia a mentire.
   ================================================================ */

/* Le due linguette sopra le scelte. */
.gal-anteprima-media{display:inline-flex;gap:2px;margin:0 0 12px;
  padding:3px;border:1px solid var(--line-soft);border-radius:99px;
  background:var(--sunken)}
.gal-anteprima-media button{appearance:none;border:0;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;line-height:1;
  padding:7px 14px;border-radius:99px;background:transparent;
  color:var(--ink-2)}
.gal-anteprima-media button:hover{color:var(--ink)}
.gal-anteprima-media button:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
.gal-anteprima-media .gal-anteprima-media-attiva{background:var(--surface);
  color:var(--ink-strong);box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* I riquadri, quando la linguetta e' sui filmati: tutti della stessa
   forma, perche' i filmati sono tutti della stessa forma. */
.gal-mock.gal-mock-filmati .gal-mock-t{aspect-ratio:16/9;height:auto;
  min-height:0;position:relative}
/* "quadrato" fa eccezione APPOSTA: li' i filmati vengono ritagliati a
   quadrato davvero, e il modellino deve farlo vedere, non nasconderlo. */
.gal-mock.gal-mock-filmati.gal-mock-layout-quadrato .gal-mock-t{aspect-ratio:1}
/* "collage" pure: le sue celle hanno forme diverse ed e' quello il
   difetto da mostrare. Qui si toglie solo l'altezza automatica. */
.gal-mock.gal-mock-filmati.gal-mock-layout-collage .gal-mock-t{aspect-ratio:auto;
  align-self:stretch}

/* "RIGHE": nella galleria vera i filmati sono tutti 16:9 e vengono
   tre per riga, tutti della stessa misura. Nel modellino invece le
   larghezze sono scritte una per una (38%, 26%, 32%...) per far
   sembrare le foto di forme diverse: coi filmati quelle larghezze
   danno riquadri disuguali, che e' una bugia. Visto guardando, non
   con un controllo automatico. */
.gal-mock.gal-mock-filmati.gal-mock-layout-righe .gal-mock-t{
  width:calc(33.333% - 2px)}

/* "COLONNA": qui i riquadri NON prendono la forma 16:9, ed e' voluto.
   La griglia del modellino ha righe alte 26 punti e la colonna delle
   foto larga l'80%: i riquadri sono gia' larghi da soli. Forzando
   16:9 si rimpiccioliscono fino a diventare francobolli in un angolo
   -- anche questo visto guardando.
   E la PRIMA non e' un filmato: e' la striscia dell'indice. Niente
   triangolo di riproduzione sopra una striscia. */
.gal-mock.gal-mock-filmati.gal-mock-layout-colonna .gal-mock-t{
  aspect-ratio:auto;align-self:stretch}
.gal-mock.gal-mock-filmati.gal-mock-layout-colonna .gal-mock-t:nth-child(1)::after{
  content:none}

/* Il triangolino di riproduzione dentro ogni riquadro. Disegnato con
   il bordo invece che con un carattere: un carattere lo si eredita dal
   tema e in un modellino da 340 punti verrebbe di misure diverse. */
.gal-mock.gal-mock-filmati .gal-mock-t::after{content:"";position:absolute;
  left:50%;top:50%;width:0;height:0;
  border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent rgba(255,255,255,.94);
  transform:translate(-40%,-50%);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
/* Sui riquadri grandi (la protagonista di rivista, cinema, storia) il
   triangolino cresce con loro, se no sparisce. */
.gal-mock.gal-mock-filmati .gal-mock-t:first-child::after{
  border-width:7px 0 7px 11px}

/* L'avvertimento e la nota, sotto il modellino. */
.gal-mock-avviso,.gal-mock-nota{display:block;margin-top:7px;
  font-size:11px;line-height:1.35;text-align:left}
/* I colori dell'avvertimento sono quelli del tema (--warn-*), non
   dei numeri scritti qui: nel tema scuro il fondo chiaro col testo
   scuro sarebbe illeggibile. Nomi inventati come "--attenzione-ink"
   NON esistono in questo foglio: una variabile che non c'e' non
   ricade sul valore di prima, sparisce e basta. */
.gal-mock-avviso{color:var(--warn-ink);background:var(--warn-bg);
  border-left:3px solid var(--warn-ink);
  padding:5px 8px;border-radius:0 6px 6px 0}
.gal-mock-nota{color:var(--ink-3)}
/* == fine 2542-anteprima-filmati == */


/* ================================================================
   == inizio 3102-i-modellini-dicono-la-verita ==

   Tre modellini su otto disegnavano un numero di colonne che
   l'impianto vero non fa. Misurato su uno schermo da 1440 punti,
   pagina larga 1180:

     mosaico   il modellino faceva 2, l'impianto ne fa 4
               (le colonne le conta gallerie/galleria-cliente.js:
                4 sopra i 1100 punti, 3 sopra i 761, 2 sul telefono)
     quadrato  il modellino faceva 3, l'impianto ne fa 6 o 7
               (auto-fill con celle da almeno 150 punti)
     rivista   il modellino faceva 2, l'impianto alterna righe da
               quattro e righe da due su una griglia di dodici

   Chi sceglie l'impianto guarda quel disegnino: se mente, la scelta
   e' sbagliata prima ancora di essere fatta.

   Gli altri cinque erano gia' giusti e restano come sono: storia,
   collage, righe, colonna fissa, cinema.

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro, e queste regole vincono su quelle di prima perche'
   pesano uguale e vengono dopo.
   ================================================================ */

/* ---- MOSAICO: quattro colonne, otto riquadri di altezze diverse.
   Le altezze non sono a caso: il mosaico tiene la forma vera di ogni
   foto, quindi un modellino con otto rettangoli tutti uguali
   racconterebbe il quadrato, non il mosaico. ---- */
.gal-mock-layout-mosaico .gal-mock-griglia{grid-template-columns:repeat(4,1fr)}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(1){height:34px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(2){height:46px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(3){height:28px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(4){height:40px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(5){height:44px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(6){height:30px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(7){height:38px}
.gal-mock-layout-mosaico .gal-mock-t:nth-child(8){height:26px}

/* ---- QUADRATO: sei colonne di quadrati veri. Sei e non sette: a
   sette, dentro una finestrella larga 310 punti, ogni quadratino
   verrebbe 40 punti e si leggerebbe come una trama, non come foto. ---- */
.gal-mock-layout-quadrato .gal-mock-griglia{grid-template-columns:repeat(6,1fr)}

/* ---- RIVISTA: la griglia da dodici dell'impianto vero, in piccolo.
   L'apertura larga quanto la pagina, poi una riga da quattro (tre
   colonne l'una) e una riga da due (sei colonne l'una). E' il passo
   di una rivista, ed e' quello che fa l'impianto dal 2220 in poi. ---- */
.gal-mock-layout-rivista .gal-mock-griglia{grid-template-columns:repeat(12,1fr);
  grid-auto-rows:15px}
.gal-mock-layout-rivista .gal-mock-t{height:auto;min-height:0;align-self:stretch}
.gal-mock-layout-rivista .gal-mock-t:nth-child(1){grid-column:span 12;grid-row:span 3}
.gal-mock-layout-rivista .gal-mock-t:nth-child(2),
.gal-mock-layout-rivista .gal-mock-t:nth-child(3),
.gal-mock-layout-rivista .gal-mock-t:nth-child(4),
.gal-mock-layout-rivista .gal-mock-t:nth-child(5){grid-column:span 3;grid-row:span 2}
.gal-mock-layout-rivista .gal-mock-t:nth-child(6),
.gal-mock-layout-rivista .gal-mock-t:nth-child(7){grid-column:span 6;grid-row:span 3}

/* ---- CINEMA: resta a due, deciso dal committente il 31 agosto.
   La riga che lo spiega la mette il programma (NOTE_IMPIANTO in
   gallerie-manager.js), non serve niente qui.
   Queste due righe servono a far vedere CINQUE riquadri invece di
   tre: la grande in cima e DUE coppie sotto. Con una coppia sola non
   si capiva che sotto la grande le foto vanno a due a due -- poteva
   sembrare "una grande e due", cioe' tre foto in croce. La regola di
   prima (consegna 2222) ne nascondeva dalla quarta in poi: qui si
   riaprono fino alla quinta. ---- */
.gal-mock-layout-cinema .gal-mock-t:nth-child(-n+5){display:block}
.gal-mock-layout-cinema .gal-mock-t:nth-child(n+6){display:none}

/* La nota sotto il disegnino: e' una spiegazione, non un avviso, e
   non deve sembrarlo. */
.gal-mock-nota{font-size:11px;line-height:1.45;margin-top:2px}
/* == fine 3102-i-modellini-dicono-la-verita == */


/* ================================================================
   == inizio 3104-la-copertina-o-foto-o-video ==
   Il riquadro che spiega chi vince fra foto e filmato, in cima al
   passo 2. Non e' un avviso di errore e non deve sembrarlo: e' una
   regola pratica, quindi fondino neutro e nessun colore d'allarme.
   In coda al foglio, come sempre.
   ================================================================ */
.gal-copertina-regola{margin:12px 0 16px;padding:11px 13px;
  background:var(--sunken);border-radius:var(--r-m);
  border-left:3px solid var(--accent);
  font-size:13px;line-height:1.55;color:var(--ink-2)}
.gal-copertina-regola strong{color:var(--ink)}
.gal-copertina-regola-riga{display:block;margin-top:6px}
/* == fine 3104-la-copertina-o-foto-o-video == */


/* ================================================================
   == inizio 3106-vedi-l-anteprima-da-tutti-i-passi ==
   Il pulsante dell'anteprima nella barra delle quattro fasi. Non si
   deve stringere quando i nomi dei passi sono lunghi, e da telefono
   va a capo insieme ad «Avanti» invece di schiacciare le fasi.
   In coda al foglio, come sempre.
   ================================================================ */
.gal-passi-anteprima{flex-shrink:0;white-space:nowrap}
@media (max-width:640px){
  .gal-passi-anteprima{order:-1}
}
/* == fine 3106-vedi-l-anteprima-da-tutti-i-passi == */


/* ================================================================
   == inizio 3108-la-vetrina-propone ==
   Il riquadro che propone un gruppo di foto per la vetrina, e la
   griglia mentre la proposta e' aperta.
   Non e' un avviso di pericolo e non deve sembrarlo: e' un passaggio
   normale, quindi fondino della casa e accento, non rosso. Il rosso
   qui sopra ce l'ha "Togli tutto dalla vetrina", che e' un'altra
   cosa.
   In coda al foglio, come sempre.
   ================================================================ */
.gal-vetrina-testa-tasti{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.gal-vetrina-proposta{margin:12px 0;padding:13px 15px;
  background:var(--sunken);border-radius:var(--r-m);
  border-left:3px solid var(--accent)}
.gal-vetrina-proposta-titolo{margin:0;font-size:14.5px;color:var(--ink)}
.gal-vetrina-proposta-titolo strong{font-size:16px}
.gal-vetrina-proposta-testo{margin:7px 0 0;font-size:13px;line-height:1.55;
  color:var(--ink-2)}
.gal-vetrina-proposta-tasti{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

/* Mentre si guarda un gruppo proposto, la griglia si stacca da quella
   normale: un filo di cornice e il fondino dell'accento, cosi' si vede
   a colpo d'occhio che quelle non sono "le foto in vetrina" ma "le
   foto che stai per metterci". */
.gal-vetrina-foto-proposta{padding:10px;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.gal-vetrina-cella-proposta{outline:2px solid var(--accent);outline-offset:-2px}
/* Il segno diventa una croce: durante la proposta il clic TOGLIE, e un
   segno di spunta direbbe il contrario di quello che fa il clic. */
.gal-vetrina-cella-proposta .gal-vetrina-segno{background:var(--accent);
  color:var(--on-accent)}
/* == fine 3108-la-vetrina-propone == */

/* == 3600-tre-impianti-per-i-filmati == */
/* ================================================================
   LA SPINA DORSALE DEI TRE IMPIANTI NUOVI (consegna 3600)

   Qui dentro non c'e' nessuno dei tre impianti: ci sono i tre
   DISEGNINI del riquadro di scelta, i tre MODELLINI dell'anteprima
   grande, e tre BLOCCHI VUOTI col loro segno.

   I tre lotti che seguono scrivono ognuno dentro il suo blocco:

       == 3602-scaletta ==     Scaletta
       == 3604-bobina ==       Bobina
       == 3606-elenco ==       Elenco

   Cosi' si possono applicare, annullare e giudicare uno per uno
   senza che gli altri due si muovano. E' il motivo per cui questo
   lotto viene per primo e da solo.

   DOVE STA, E PERCHE' NON "IN FONDO AL FILE". Questo blocco si
   attacca al segno «fine 3108-la-vetrina-propone», che e' un
   aggancio fisso. Mentre scrivevo questo lotto un altro lavoro (il
   2140) ha aggiunto il SUO blocco in fondo al foglio: un aggancio
   del tipo "attacca in coda" gli avrebbe scritto dentro casa.
   Non si tocca il blocco di nessun altro lavoro.

   Che questo blocco non sia l'ultimo non cambia niente: tutte le
   regole qui sotto cominciano con .gal-layout-scaletta,
   .gal-layout-bobina o .gal-layout-elenco, e a parita' di peso
   nessun'altra regola del foglio parla degli stessi elementi.
   ================================================================ */

/* ---------- I TRE DISEGNINI NEL RIQUADRO DI SCELTA --------------- */
/* Senza questi, i tre impianti nuovi sarebbero tre nomi senza niente
   da guardare. Sono disegnati col foglio di stile, nessuna immagine
   da scaricare -- come gli altri otto. */

/* scaletta: il riquadro grande a sinistra col triangolino, e tre
   righe strette a destra. */
.gal-demo-scaletta{display:grid;grid-template-columns:1fr 34%;
  grid-template-rows:repeat(3,1fr);gap:3px;padding:3px;
  background:var(--surface)}
.gal-demo-scaletta span{background:var(--accent-2);border-radius:1px}
.gal-demo-scaletta span:nth-child(1){grid-row:1 / 4;border-radius:2px;
  position:relative}
.gal-demo-scaletta span:nth-child(1)::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:3px 0 3px 5px;
  border-color:transparent transparent transparent var(--surface)}
.gal-demo-scaletta span:nth-child(n+2){opacity:.72}

/* bobina: quello grande in cima a tutta larghezza, e sotto la
   striscia -- il terzo riquadro e' tagliato apposta, perche' la
   striscia continua fuori dallo schermo. */
.gal-demo-bobina{display:grid;grid-template-columns:1fr 1fr .5fr;
  grid-template-rows:1.9fr 1fr;gap:3px;padding:3px;
  background:var(--surface)}
.gal-demo-bobina span{background:var(--accent-2);border-radius:2px}
.gal-demo-bobina span:nth-child(1){grid-column:1 / 4;position:relative}
.gal-demo-bobina span:nth-child(1)::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent var(--surface)}
.gal-demo-bobina span:nth-child(n+2){opacity:.72;border-radius:1px}

/* elenco: quattro righe scritte, col numerino davanti. Nessun
   riquadro: e' il punto dell'impianto. */
.gal-demo-elenco{display:flex;flex-direction:column;justify-content:center;
  gap:4px;padding:4px 5px;background:var(--surface)}
.gal-demo-elenco span{height:3px;border-radius:2px;
  background:var(--accent-2);position:relative;margin-left:9px}
.gal-demo-elenco span::before{content:"";position:absolute;left:-9px;
  top:0;width:5px;height:3px;border-radius:1px;
  background:var(--ink-3);opacity:.5}
.gal-demo-elenco span:nth-child(2){width:76%}
.gal-demo-elenco span:nth-child(3){width:88%}
.gal-demo-elenco span:nth-child(4){width:68%}

/* ---------- I TRE MODELLINI (l'anteprima grande) ---------------- */
/* Il modellino e' un'altra cosa dal disegnino: e' la finestrella con
   le TUE foto dentro, quella che esce col mouse sopra. Senza queste
   regole i tre impianti nuovi si vedrebbero li' come un mosaico
   qualunque -- cioe' l'anteprima direbbe una bugia.

   LE ALTEZZE SONO IN PIXEL, NON IN FRAZIONI. Le frazioni dividono
   un'altezza che qui non c'e' (la griglia e' alta quanto il suo
   contenuto), e ogni riga verrebbe alta zero: la finestrella esce
   COMPLETAMENTE VUOTA. E' gia' successo due volte, alla consegna
   2222, e nessun controllo automatico se n'era accorto. */
/* QUATTRO RIGHE A DESTRA, non tre: il programma disegna CINQUE
   riquadri (TESSERE_MODELLINO in gallerie-manager.js), e con tre righe
   il quinto finiva in una riga in piu' che stirava il filmato grande.
   Chi cambia il numero di la' deve cambiare le righe di qua. */
.gal-mock-layout-scaletta .gal-mock-griglia{grid-template-columns:1fr 34%;
  grid-template-rows:repeat(4,13px);gap:3px}
.gal-mock-layout-scaletta .gal-mock-t{height:auto;min-height:0;
  align-self:stretch}
.gal-mock-layout-scaletta .gal-mock-t:nth-child(1){grid-row:1 / 5}
.gal-mock-layout-scaletta .gal-mock-t:nth-child(n+6){display:none}

/* Quattro colonne, e l'ultima stretta apposta: e' il riquadro tagliato
   dal bordo, cioe' il modo in cui un disegno fermo dice "la striscia
   continua di la'". */
.gal-mock-layout-bobina .gal-mock-griglia{
  grid-template-columns:1fr 1fr 1fr .5fr}
.gal-mock-layout-bobina .gal-mock-t{height:22px;min-height:0}
.gal-mock-layout-bobina .gal-mock-t:nth-child(1){grid-column:1 / 5;height:58px}
.gal-mock-layout-bobina .gal-mock-t:nth-child(n+6){display:none}

/* elenco: niente fotogrammi, righe scritte. background-image:none va
   forzato perche' la foto la scrive il programma direttamente
   sull'elemento, e uno stile scritto li' batte il foglio di stile --
   la stessa trappola della striscia di Colonna fissa (2224). */
.gal-mock-layout-elenco .gal-mock-griglia{grid-template-columns:1fr;gap:7px;
  padding:9px 8px}
.gal-mock-layout-elenco .gal-mock-t{height:8px;min-height:0;border-radius:2px;
  background-image:none !important;
  background-color:color-mix(in srgb,var(--mock-inchiostro) 24%,transparent)}
.gal-mock-layout-elenco .gal-mock-t:nth-child(2){width:74%}
.gal-mock-layout-elenco .gal-mock-t:nth-child(4){width:84%}
.gal-mock-layout-elenco .gal-mock-t:nth-child(5){width:66%}

/* ---------- I TRE POSTI LASCIATI LIBERI ------------------------- */
/* Qui sotto non c'e' niente, ed e' voluto: ognuno di questi tre segni
   e' l'aggancio di un lotto a parte. Finche' il suo lotto non e'
   applicato, l'impianto si sceglie lo stesso e la galleria si vede
   come una griglia semplice. Non si rompe niente. */

/* == 3602-scaletta == */
/* ================================================================
   SCALETTA -- il filmato grande a sinistra, la scaletta ferma a destra.

   Da 1000 punti in su la pagina si divide in due: a sinistra il primo
   filmato, grande, che RESTA FERMO mentre si scorre; a destra una
   colonna stretta da 300 con tutti gli altri, uno per riga, col
   fotogrammino, il nome, il formato e la durata. Sotto i 1000 la
   colonna torna sotto il filmato, uno sopra l'altro: su un telefono
   una colonna di lato si mangerebbe meta' della larghezza.

   E' un impianto per i FILMATI, come Cinema. Una fotografia in mezzo
   non rompe niente -- diventa una riga della scaletta col suo
   fotogrammino -- ma una galleria da seicento foto qui non ci sta:
   per quella ci sono gli altri otto impianti.
   ================================================================ */
.gal-layout-scaletta .gal-colonne{display:grid;grid-template-columns:1fr;
  gap:16px}
.gal-layout-scaletta .gal-colonna{display:contents}
.gal-layout-scaletta .gal-tessera{background:#0b0b0f;border-radius:10px}
/* aspect-ratio va forzato: la pagina scrive la forma vera della foto
   sull'elemento, e uno stile scritto li' batte il foglio di stile. */
.gal-layout-scaletta .gal-tessera img{width:100%;height:100%;
  aspect-ratio:16/9 !important;object-fit:cover}
/* il nome del filmato sempre in vista, non solo col mouse sopra. */
.gal-layout-scaletta .gal-targhetta{opacity:1}

@media (min-width:1000px){
  .gal-layout-scaletta .gal-corpo-foto{max-width:1580px}
  .gal-layout-scaletta .gal-colonne{grid-template-columns:minmax(0,1fr) 300px;
    column-gap:34px;row-gap:0;align-items:start}
  /* IL FILMATO GRANDE. grid-row 1/span 999 gli da' tutta l'altezza
     della colonna di sinistra: e' quell'altezza che permette a
     position:sticky di tenerlo fermo mentre la scaletta scorre.
     align-self:start perche' resti alto quanto e', non stirato. */
  .gal-layout-scaletta .gal-tessera:first-of-type{grid-column:1;
    grid-row:1 / span 999;position:sticky;top:26px;align-self:start}
  .gal-layout-scaletta .gal-tessera:first-of-type .gal-play{width:88px;
    height:88px;line-height:88px;font-size:32px}
  .gal-layout-scaletta .gal-tessera:first-of-type .gal-targhetta-nome{
    font-size:20px}

  /* LE RIGHE DELLA SCALETTA. Quattro colonne -- il fotogrammino, il
     nome, la durata, il cuore -- e DUE RIGHE scritte a mano, perche'
     sotto il nome ci va il formato. Senza le righe scritte, il nome e
     la durata si mettevano uno sotto l'altra invece che affiancati:
     visto a schermo, non nel codice. */
  .gal-layout-scaletta .gal-tessera:not(:first-of-type){grid-column:2;
    display:grid;grid-template-columns:64px minmax(0,1fr) auto 38px;
    grid-template-rows:auto auto;
    align-items:center;column-gap:12px;row-gap:1px;min-height:62px;
    padding:9px 4px;background:transparent;border-radius:6px;
    overflow:visible;line-height:1.35;
    border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type):hover{
    background:color-mix(in srgb,var(--ink) 7%,transparent)}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) img,
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-tessera-vuota{
    grid-column:1;grid-row:1 / span 2;width:64px;height:36px;
    aspect-ratio:16/9 !important;object-fit:cover;border-radius:4px}
  /* il tasto di riproduzione sta sopra il fotogrammino, non al centro
     della riga: al centro della riga finirebbe sopra il nome. */
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-play{
    width:24px;height:24px;line-height:24px;font-size:9px;left:36px;top:50%;
    opacity:0;transition:opacity .16s ease}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type):hover .gal-play{opacity:1}
  /* display:contents scioglie la targhetta: il nome va nella seconda
     colonna, il formato sotto di lui, nella stessa. */
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-targhetta{
    display:contents}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-targhetta-nome{
    grid-column:2;grid-row:1;color:var(--ink);font-size:14px;font-weight:600;
    padding-right:0;-webkit-line-clamp:2}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-targhetta-peso{
    grid-column:2;grid-row:2;color:var(--ink-3);font-size:11px}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-durata{
    position:static;grid-column:3;grid-row:1 / span 2;justify-self:end;
    align-self:center;background:transparent;color:var(--ink-2);
    font-size:12.5px;padding:0}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-foto-azioni{
    position:static;grid-column:4;grid-row:1 / span 2;justify-self:end;
    align-self:center}
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-cuore,
  .gal-layout-scaletta .gal-tessera:not(:first-of-type) .gal-scarica-foto{
    width:34px;height:34px;font-size:15px}
  /* UNA FOTOGRAFIA IN MEZZO AI FILMATI tiene la riga, col suo
     fotogrammino: nome e durata non ce li ha, e va bene cosi'. Il
     cuore resta sempre visibile, altrimenti quella riga non
     servirebbe a niente. */
  .gal-layout-scaletta .gal-tessera:not(.gal-tessera-video):not(:first-of-type)
    .gal-foto-azioni{opacity:1}
}
/* == fine 3602-scaletta == */

/* == 3604-bobina == */
/* ================================================================
   BOBINA -- il primo filmato a tutta pagina, gli altri in una
   striscia che si trascina di lato.

   Il primo filmato prende tutta la larghezza e quasi tutta
   l'altezza dello schermo, con la copertina dentro, il nome grande
   in mezzo e il tasto di riproduzione sotto. Gli altri stanno in una
   striscia in fondo che si trascina di lato: riquadri 16:9 da 300,
   che si fermano in posizione uno per uno. Niente frecce: si
   trascina, col dito o con due dita sul tappetino.

   COME STA IN PIEDI. Il filmato grande e' l'unica tessera messa in
   POSIZIONE ASSOLUTA: cosi' esce dalla fila della striscia e si
   appoggia in cima, nello spazio che .gal-colonne tiene libero con
   il suo padding. La striscia non lo taglia perche' il suo punto di
   riferimento e' .gal-colonne, che sta FUORI dalla striscia.

   E' un impianto per i FILMATI, come Cinema.
   ================================================================ */
.gal-layout-bobina{--bobina-alto:min(68vh,640px)}
.gal-layout-bobina .gal-corpo-foto{max-width:none;
  padding-left:0;padding-right:0}
.gal-layout-bobina .gal-lato{display:block;
  padding:0 var(--gal-margine)}
.gal-layout-bobina .gal-colonne{position:relative;display:block;
  padding-top:calc(var(--bobina-alto) + 26px)}
/* LA STRISCIA. flex-wrap:nowrap piu' overflow-x:auto: una fila sola
   che esce dallo schermo e si trascina. scroll-snap la fa fermare
   riquadro per riquadro invece che a meta' di uno. */
.gal-layout-bobina .gal-colonna{display:flex;flex-wrap:nowrap;
  flex-direction:row;gap:16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--gal-margine);
  padding:0 var(--gal-margine) 14px;
  -webkit-overflow-scrolling:touch}
.gal-layout-bobina .gal-tessera{flex:0 0 300px;scroll-snap-align:start;
  background:transparent;border-radius:0;overflow:visible;
  line-height:1.35}
.gal-layout-bobina .gal-tessera img,
.gal-layout-bobina .gal-tessera .gal-tessera-vuota{width:100%;height:auto;
  aspect-ratio:16/9 !important;object-fit:cover;border-radius:9px}
/* il nome e il formato SOTTO il riquadro, non sopra la copertina:
   in una striscia il nome sopra la copertina si legge male, e qui
   sotto c'e' tutto lo spazio che serve. */
.gal-layout-bobina .gal-targhetta{position:static;opacity:1;
  background:none;padding:8px 2px 0;border-radius:0}
.gal-layout-bobina .gal-targhetta-nome{color:var(--ink);font-size:13.5px;
  padding-right:0}
.gal-layout-bobina .gal-targhetta-peso{color:var(--ink-3)}
.gal-layout-bobina .gal-durata{top:9px;right:9px}
.gal-layout-bobina .gal-foto-azioni{bottom:auto;top:9px;left:9px;right:auto}

/* ------------------------ IL FILMATO GRANDE ---------------------- */
.gal-layout-bobina .gal-tessera:first-of-type{position:absolute;
  top:0;left:0;right:0;flex:none;height:var(--bobina-alto);
  border-radius:0;overflow:hidden;background:#0b0b0f}
.gal-layout-bobina .gal-tessera:first-of-type img,
.gal-layout-bobina .gal-tessera:first-of-type .gal-tessera-vuota{
  width:100%;height:100%;aspect-ratio:auto !important;object-fit:cover;
  border-radius:0}
.gal-layout-bobina .gal-tessera:first-of-type .gal-play{width:88px;
  height:88px;line-height:88px;font-size:31px;
  background:rgba(10,10,17,.55);border:1px solid rgba(255,255,255,.34)}
/* IL NOME SOPRA AL TASTO, in mezzo allo schermo: la targhetta prende
   tutta l'altezza e spinge il nome sopra il tasto col padding. */
.gal-layout-bobina .gal-tessera:first-of-type .gal-targhetta{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:0 24px 168px;
  background:linear-gradient(to top,rgba(8,8,14,.62),rgba(8,8,14,.12) 46%,
    rgba(8,8,14,.5))}
.gal-layout-bobina .gal-tessera:first-of-type .gal-targhetta-nome{
  color:#fff;font-size:clamp(26px,4vw,48px);font-weight:600;
  line-height:1.12;letter-spacing:-.01em;-webkit-line-clamp:2}
/* il formato non ci va: sopra una copertina a tutto schermo
   "1,2 GB - MP4 4K" e' un'etichetta da magazzino. */
.gal-layout-bobina .gal-tessera:first-of-type .gal-targhetta-peso{display:none}
.gal-layout-bobina .gal-tessera:first-of-type .gal-durata{top:auto;
  bottom:22px;right:50%;transform:translateX(50%);font-size:12.5px}
.gal-layout-bobina .gal-tessera:first-of-type .gal-foto-azioni{
  top:auto;bottom:18px;left:auto;right:22px;opacity:1}

@media (max-width:760px){
  .gal-layout-bobina{--bobina-alto:min(56vh,440px)}
  .gal-layout-bobina .gal-tessera{flex:0 0 220px}
  .gal-layout-bobina .gal-tessera:first-of-type .gal-targhetta{
    padding-bottom:132px}
  .gal-layout-bobina .gal-tessera:first-of-type .gal-play{width:68px;
    height:68px;line-height:68px;font-size:24px}
}
/* == fine 3604-bobina == */

/* == 3606-elenco == */
/* ================================================================
   ELENCO -- i filmati come righe scritte, senza fotogrammi.

   Una riga per filmato: il numero a sinistra ("N. 01"), il titolo
   grande in un carattere con le grazie, e a destra la durata con
   sotto il formato. Un filo sottile fra una riga e l'altra. Col
   mouse sopra, la riga si schiarisce e al posto del numero compare
   il tasto di riproduzione.

   PERCHE' SENZA FOTOGRAMMI. Un fotogramma preso a caso da un filmato
   di matrimonio quasi sempre non dice niente -- una schiena, una
   sfocatura. Il titolo che ha scritto Giovanni ("La cerimonia") dice
   molto di piu'. E' l'unico dei nostri impianti in cui si legge
   invece di guardare.

   NON SERVE NIENTE DI NUOVO NELLA PAGINA: il titolo, la durata e il
   formato stanno gia' sulla tessera dal 1740. Qui si nasconde la
   copertina e si rimettono in fila gli elementi che ci sono.
   ================================================================ */
.gal-layout-elenco .gal-corpo-foto{max-width:1000px}
.gal-layout-elenco .gal-colonne{display:block}
/* il contatore parte da qui: e' il posto in cui stanno tutte le
   tessere, e riparte a ogni galleria. */
.gal-layout-elenco .gal-colonna{display:block;counter-reset:gal-elenco}

.gal-layout-elenco .gal-tessera{display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 40px;
  grid-template-rows:auto auto;
  align-items:center;column-gap:20px;row-gap:2px;
  min-height:72px;padding:15px 4px;
  background:transparent;border-radius:0;overflow:visible;
  line-height:1.3;cursor:pointer;counter-increment:gal-elenco;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  transition:background .16s ease}
.gal-layout-elenco .gal-tessera:hover{
  background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* IL NUMERO, E SOLO IL NUMERO. decimal-leading-zero fa "01" e non
   "1": in una scaletta di dieci filmati il numero a due cifre sta in
   colonna.

   NIENTE "N." DAVANTI, e non e' estetica: questo numero lo scrive il
   FOGLIO DI STILE, e le frasi che il cliente legge nella sua lingua
   stanno in backend/app/services/lingue.py -- dove un testo scritto
   qui non arriva. Un "N." resterebbe italiano anche nella galleria
   inglese, e nessuno se ne accorgerebbe perche' quella pagina la
   guarda solo il cliente americano. Il numero da solo si legge
   uguale in tutte le lingue. */
.gal-layout-elenco .gal-tessera::before{
  content:counter(gal-elenco,decimal-leading-zero);
  grid-column:1;grid-row:1 / span 2;align-self:center;
  font-size:12px;letter-spacing:.08em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:opacity .16s ease}
.gal-layout-elenco .gal-tessera:hover::before{opacity:0}
/* la copertina non si vede: qui si legge. */
.gal-layout-elenco .gal-tessera-video img,
.gal-layout-elenco .gal-tessera-video .gal-tessera-vuota{display:none}
/* IL TASTO al posto del numero, col mouse sopra. */
.gal-layout-elenco .gal-play{width:30px;height:30px;line-height:30px;
  font-size:11px;left:21px;top:50%;opacity:0;
  transition:opacity .16s ease}
.gal-layout-elenco .gal-tessera:hover .gal-play{opacity:1}
/* display:contents scioglie la targhetta, cosi' il titolo va in
   mezzo e il formato a destra sotto la durata. */
.gal-layout-elenco .gal-targhetta{display:contents}
.gal-layout-elenco .gal-targhetta-nome{grid-column:2;grid-row:1 / span 2;
  align-self:center;color:var(--ink);padding-right:0;
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-size:clamp(19px,2.2vw,26px);font-weight:400;letter-spacing:.005em;
  -webkit-line-clamp:2}
.gal-layout-elenco .gal-targhetta-peso{grid-column:3;grid-row:2;
  justify-self:end;color:var(--ink-3);font-size:11.5px}
.gal-layout-elenco .gal-durata{position:static;grid-column:3;grid-row:1;
  justify-self:end;background:transparent;color:var(--ink-2);
  font-size:14px;font-weight:600;padding:0}
.gal-layout-elenco .gal-foto-azioni{position:static;grid-column:4;
  grid-row:1 / span 2;justify-self:end;align-self:center}
.gal-layout-elenco .gal-cuore,
.gal-layout-elenco .gal-scarica-foto{width:36px;height:36px;font-size:16px}

/* UNA FOTOGRAFIA IN MEZZO AI FILMATI non ha titolo ne' durata:
   ridotta a una riga scritta sarebbe una riga vuota. Le si lascia il
   suo fotogrammino, con la sua forma vera, e il cuore sempre acceso. */
.gal-layout-elenco .gal-tessera:not(.gal-tessera-video) img{
  grid-column:2;grid-row:1 / span 2;justify-self:start;
  width:120px;height:68px;object-fit:cover;
  aspect-ratio:auto !important;border-radius:5px}
.gal-layout-elenco .gal-tessera:not(.gal-tessera-video) .gal-foto-azioni{
  opacity:1}

@media (max-width:640px){
  /* sul telefono la durata va sotto il titolo: a destra, accanto a un
     titolo da due righe, non ci sta. */
  .gal-layout-elenco .gal-tessera{grid-template-columns:30px minmax(0,1fr) 40px;
    column-gap:12px;padding:13px 2px}
  .gal-layout-elenco .gal-tessera::before{font-size:11px;letter-spacing:.04em}
  .gal-layout-elenco .gal-play{left:19px;width:26px;height:26px;
    line-height:26px;font-size:10px}
  .gal-layout-elenco .gal-targhetta-nome{grid-row:1;font-size:18px}
  .gal-layout-elenco .gal-durata{grid-column:2;grid-row:2;justify-self:start;
    font-size:12.5px}
  .gal-layout-elenco .gal-targhetta-peso{grid-column:2;grid-row:2;
    justify-self:start;padding-left:56px}
  .gal-layout-elenco .gal-foto-azioni{grid-column:3}
  .gal-layout-elenco .gal-tessera:not(.gal-tessera-video) img{width:96px;height:54px}
}
/* == fine 3606-elenco == */
/* == fine 3600-tre-impianti-per-i-filmati == */

/* == 2140-scelta-cliente == */
/* ================================================================
   SCEGLIERE IL CLIENTE QUANDO I LAVORI SONO CENTINAIA (2140).
   In coda al file, come sempre: non si tocca il blocco di nessun
   altro lavoro.

   Solo variabili di tema, nessun colore scritto a mano: cosi' il
   riquadro va uguale in tema chiaro e in tema scuro senza
   raddoppiare le regole.
   ================================================================ */

.gal-sc{display:flex;flex-direction:column;gap:9px;max-width:520px}
.gal-sc-cerca{width:100%}

/* La riga che dice cosa e' collegato adesso, con la data. */
.gal-sc-scelto{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  margin:0;padding:8px 11px;border-radius:var(--r-s);
  background:var(--accent-soft);border:1px solid var(--accent);
  font-size:13px;color:var(--ink)}
.gal-sc-scelto-eti{font-weight:700;color:var(--accent-ink)}
.gal-sc-scelto-testo{flex:1;min-width:0}
.gal-sc-togli{border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--accent-ink);
  text-decoration:underline;flex-shrink:0}
.gal-sc-togli:hover{color:var(--ink-strong)}

/* L'elenco: alto quanto basta a vedere due mesi, poi scorre. */
.gal-sc-elenco{max-height:330px;overflow-y:auto;
  border:1px solid var(--line-strong);border-radius:var(--r-m);
  background:var(--surface)}

.gal-sc-blocco+.gal-sc-blocco{border-top:1px solid var(--line)}

/* L'intestazione del blocco resta appiccicata in alto mentre si
   scorre: senza, scorrendo si perde di vista se si sta guardando i
   lavori fatti o quelli in programma. */
.gal-sc-blocco-titolo{position:sticky;top:0;z-index:2;margin:0;
  padding:7px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2)}

.gal-sc-mese-titolo{margin:0;padding:8px 12px 3px;
  font-size:12.5px;font-weight:700;color:var(--ink-3)}

/* Ogni riga e' un pulsante largo quanto l'elenco: si clicca tutta,
   non solo il nome. */
.gal-sc-riga{display:block;width:100%;text-align:left;
  border:0;border-radius:0;background:none;cursor:pointer;
  padding:7px 12px;font:inherit;color:var(--ink)}
.gal-sc-riga:hover{background:var(--surface-2)}
.gal-sc-riga:focus-visible{outline:2px solid var(--accent);
  outline-offset:-2px}
.gal-sc-riga-scelta{background:var(--accent-soft)}
.gal-sc-riga-scelta:hover{background:var(--accent-soft)}

.gal-sc-nome{display:block;font-size:14px;font-weight:600;
  color:var(--ink-strong)}
/* La riga che dice QUALE lavoro e': servizio e data dell'evento.
   E' questa che toglie il problema dei nomi ripetuti. */
.gal-sc-dettaglio{display:block;font-size:12.5px;color:var(--ink-3);
  margin-top:1px}
.gal-sc-riga-scelta .gal-sc-nome{color:var(--accent-ink)}

.gal-sc-piede{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gal-sc-conta{font-size:12px;color:var(--ink-3)}
.gal-sc-guaio{color:var(--bad-ink)}

@media (max-width:640px){
  .gal-sc{max-width:100%}
  .gal-sc-elenco{max-height:280px}
}
/* == fine 2140-scelta-cliente == */

/* ================================================================
   == inizio 4045-racconto ==
   RACCONTO -- l'unico impianto che tiene foto e filmati nella stessa
   pagina.

   I filmati in cima, uno per fascia, larghi quanto la pagina. Sotto,
   le fotografie in righe piene: lo stesso meccanismo di "Righe piene"
   (flex-grow e flex-basis presi dalla forma vera della foto), che e'
   gia' provato e non ritaglia niente.

   L'ORDINE lo fa il programma, non il foglio di stile: visibili() in
   galleria-cliente.js mette i filmati davanti. Qui si dice solo come
   sono fatti.

   PERCHE' I FILMATI PRENDONO TUTTA LA RIGA. "flex: 0 0 100%" dentro un
   contenitore che va a capo occupa la riga da solo: cosi' ogni filmato
   ha la sua fascia, e le fotografie ricominciano a riempire le righe
   sotto senza doversi accordare con lui.

   Con sole fotografie questo impianto e' identico a "Righe piene" --
   ed e' voluto: e' il modo giusto di mostrare un matrimonio intero, e
   non c'era motivo di inventarne un altro.

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro.
   ================================================================ */
.gal-layout-racconto .gal-colonne{display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:8px;--gal-riga:250px}
.gal-layout-racconto .gal-colonna{display:contents}

/* LE FOTOGRAFIE: righe piene, foto intere, bordo destro dritto. */
.gal-layout-racconto .gal-tessera{margin:0;min-width:0;
  flex-grow:var(--gal-prop,1.5);
  flex-basis:calc(var(--gal-prop,1.5) * var(--gal-riga))}
.gal-layout-racconto .gal-tessera img{width:100%;height:auto;display:block}

/* L'ULTIMA RIGA non si stira: se avanza una foto sola, senza questo
   accorgimento diventerebbe grande quanto tutta la pagina. Lo spazio
   che resta lo prende un riempitivo invisibile. E' lo stesso rimedio
   di "Righe piene" e di "Colonna fissa". */
.gal-layout-racconto .gal-colonne::after{content:"";flex-grow:99999;
  flex-basis:0;height:0;margin:0}

/* I FILMATI: il primo grande quanto la pagina, gli altri due per riga.
   E' lo stesso passo di "Cinema", ed e' voluto: quello e' il modo di
   disporre i filmati gia' approvato, e non c'era motivo di
   inventarne un secondo.

   PERCHE' NON TUTTI A TUTTA PAGINA. Provato e guardato: con tre
   filmati a tutta pagina si scorre per quasi duemila punti prima di
   vedere la prima fotografia -- e in una galleria di matrimonio le
   fotografie sono la parte piu' grande. Il primo grande dice qual e'
   il filmato principale; gli altri due per riga restano comodi da
   guardare senza mangiarsi tutta la pagina.

   ":first-of-type" pesca il PRIMO riquadro in assoluto. Qui funziona
   perche' in questo impianto i filmati stanno sempre davanti (li
   mette in ordine visibili() in galleria-cliente.js): il primo
   riquadro, se un filmato c'e', e' un filmato. Se la galleria e' di
   sole fotografie la regola non pesca niente, ed e' giusto cosi'. */
.gal-layout-racconto .gal-tessera-video{flex:0 0 calc(50% - 4px);
  background:#0b0b0f;border-radius:10px;overflow:hidden}
.gal-layout-racconto .gal-tessera-video:first-of-type{flex:0 0 100%}
.gal-layout-racconto .gal-tessera-video img{width:100%;height:auto;
  max-height:min(42vh,380px);object-fit:cover;
  aspect-ratio:16 / 9 !important}
.gal-layout-racconto .gal-tessera-video:first-of-type img{
  max-height:min(58vh,520px)}
/* il tasto di riproduzione, grande come si conviene a una fascia */
.gal-layout-racconto .gal-tessera-video .gal-play{width:62px;height:62px;
  font-size:22px;line-height:62px}
.gal-layout-racconto .gal-tessera-video:first-of-type .gal-play{
  width:84px;height:84px;font-size:30px;line-height:84px}
/* il nome e la durata del filmato sempre in vista: in una fascia sola
   non c'e' il rischio di una griglia di scritte, e senza il nome non
   si sa quale filmato si sta per aprire. */
.gal-layout-racconto .gal-targhetta{opacity:1}

@media (max-width:900px){
  .gal-layout-racconto .gal-colonne{--gal-riga:190px;gap:6px}
  .gal-layout-racconto .gal-tessera-video .gal-play{width:64px;height:64px;
    font-size:23px;line-height:64px}
}
@media (max-width:640px){
  .gal-layout-racconto .gal-colonne{--gal-riga:140px;gap:4px}
  /* SUL TELEFONO OGNI FILMATO PRENDE TUTTA LA RIGA. Due affiancati
     starebbero a centottanta punti l'uno: il fotogramma diventa un
     francobollo e il nome del filmato non ci sta piu'. E' la stessa
     scelta che fanno gia' Scaletta e Bobina, che sul telefono tornano
     a una colonna sola. */
  .gal-layout-racconto .gal-tessera-video{flex:0 0 100%}
  .gal-layout-racconto .gal-tessera-video img{max-height:none}
}

/* ---------- IL DISEGNINO NEL RIQUADRO DI SCELTA ----------------- */
/* la fascia del filmato in cima col triangolino, e sotto la riga
   delle fotografie. Disegnato col foglio di stile, nessuna immagine
   da scaricare -- come gli altri undici. */
.gal-demo-racconto{display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:1.7fr 1fr;gap:3px;padding:3px;
  background:var(--surface)}
.gal-demo-racconto span{background:var(--accent-2);border-radius:2px}
.gal-demo-racconto span:nth-child(1){grid-column:1 / 4;position:relative}
.gal-demo-racconto span:nth-child(1)::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent var(--surface)}
.gal-demo-racconto span:nth-child(n+2){opacity:.72;border-radius:1px}

/* ---------- IL MODELLINO (l'anteprima grande) ------------------- */
/* LE ALTEZZE SONO IN PUNTI, NON IN FRAZIONI. E' la trappola gia'
   documentata due volte in questo foglio (consegne 2222 e 3102): le
   frazioni dividono un'altezza che qui non c'e', ogni riga verrebbe
   alta zero, e la finestrella uscirebbe COMPLETAMENTE VUOTA. */
.gal-mock-layout-racconto .gal-mock-griglia{
  grid-template-columns:repeat(4,1fr);gap:3px}
.gal-mock-layout-racconto .gal-mock-t{height:26px;min-height:0}
.gal-mock-layout-racconto .gal-mock-t:nth-child(1){grid-column:1 / 5;
  height:58px}
.gal-mock-layout-racconto .gal-mock-t:nth-child(n+6){display:none}
/* == fine 4045-racconto == */

/* ================================================================
   == inizio 4047-la-nota-esce-dal-modellino ==

   La spiegazione dell'impianto e l'avvertimento sui filmati tagliati
   stavano DENTRO il finto schermo (.gal-mock), che ha il fondo della
   GALLERIA -- bianco, avorio, o nero con lo sfondo scuro.

   Due guai in uno. Si leggevano come se fossero scritti sulla pagina
   del cliente, ed e' esattamente quello che si vedeva: testo steso
   sul disegno. E il colore del testo veniva dal tema del GESTIONALE
   (--ink-3) mentre il fondo veniva dalla galleria: col gestionale in
   tema scuro, grigio chiaro su bianco. Illeggibile.

   Adesso il finto schermo si chiude prima, e queste due scritte
   stanno qui fuori, dentro .gal-modellino, sul fondo della
   finestrella: dove il colore del gestionale e' quello giusto.

   Riguardava quattro impianti su undici -- Cinema, Scaletta, Bobina
   ed Elenco -- perche' sono gli unici quattro che una spiegazione ce
   l'hanno. Gli altri sette non ne hanno nessuna, ed e' per questo che
   sembravano a posto.

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro.
   ================================================================ */
.gal-modellino{display:block}

/* Sul fondo della finestrella, non piu' sul finto schermo. I colori
   sono quelli del gestionale, ed e' giusto perche' adesso e' li' che
   stanno: --ink-2 si legge sia in tema chiaro sia in tema scuro. */
.gal-modellino > .gal-mock-nota{color:var(--ink-2);margin-top:9px;
  padding:0 1px}
.gal-modellino > .gal-mock-avviso{margin-top:9px}

/* Il pannello del tocco (telefono) usa lo stesso modellino: qui non
   serve niente di diverso, ma il fondo va lasciato trasparente perche'
   quel pannello ha gia' il suo. */
.gal-tocco-corpo .gal-modellino{background:transparent}
/* == fine 4047-la-nota-esce-dal-modellino == */

/* ================================================================
   == inizio 4041-i-due-gruppi-di-impianti ==
   Il titoletto sopra ogni gruppo di impianti ("Per le foto" / "Per i
   filmati") e il riquadro che spiega la galleria mista.

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro. Queste regole non parlano di elementi di cui parli
   gia' qualcun altro.
   ================================================================ */
.gal-gruppo-impianti{margin:16px 0 0;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.gal-gruppo-impianti.gal-gruppo-filmati{margin-top:20px}
/* Un filo sopra il secondo gruppo: e' quello che fa vedere il taglio
   anche a chi non legge il titoletto. */
.gal-gruppo-impianti.gal-gruppo-filmati::before{content:"";display:block;
  height:1px;background:var(--line);margin:0 0 14px}

/* Il riquadro della regola foto/filmati usa lo stesso vestito del
   riquadro "chi vince fra foto e filmato" della copertina (3104): e'
   la stessa specie di cosa, e due vestiti diversi per due regole
   pratiche sarebbero due cose da imparare invece di una. Le righe
   dentro sono quelle di la' (.gal-copertina-regola-riga), che vanno
   gia' a capo da sole: qui si aggiunge solo il titolo in cima. */
.gal-regola-media-titolo{display:block;margin-bottom:2px}
.gal-regola-media em{font-style:normal;text-decoration:underline;
  text-underline-offset:2px}
/* == fine 4041-i-due-gruppi-di-impianti == */

/* ================================================================
   == inizio 4043-anteprime-piu-grandi-e-piu-vere ==

   Due cose, e una sola ragione: chi sceglie l'impianto guarda quel
   disegnino, e il disegnino deve dire la verita' ed essere leggibile.

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro. Queste regole vincono su quelle di prima perche'
   pesano uguale e vengono dopo.
   ================================================================ */

/* ---- COLONNA FISSA: le foto sono PIU' DI UNA PER RIGA ----
   Il modellino ne disegnava una per riga, larga tutta la pagina.
   Misurato nella galleria vera a 1440 punti: sono CINQUE per riga, in
   righe piene fitte alte circa 190 punti. Qui se ne disegnano tre per
   riga -- di piu', in una finestrella, diventerebbero trattini -- e
   tre bastano a dire "sono parecchie per riga" invece di "una sola".

   LE ALTEZZE RESTANO IN PUNTI, NON IN FRAZIONI. E' la trappola gia'
   documentata sopra (consegna 2222): le frazioni dividono un'altezza
   che qui non c'e', ogni riga verrebbe alta zero e la finestrella
   uscirebbe COMPLETAMENTE VUOTA. E' gia' successo due volte. */
.gal-mock-layout-colonna .gal-mock-griglia{
  grid-template-columns:20% repeat(3,1fr);
  grid-template-rows:repeat(2,34px);gap:3px}
/* la prima non e' una foto: e' la striscia dell'indice, e adesso e'
   alta quanto tutte e due le righe. Il "!important" resta per lo
   stesso motivo di prima: l'immagine di sfondo la scrive il programma
   direttamente sull'elemento, e uno stile scritto li' batte il foglio
   di stile (correzione 2224). */
.gal-mock-layout-colonna .gal-mock-t:nth-child(1){grid-row:1 / 3;
  grid-column:1;
  background-image:none !important;
  background-color:color-mix(in srgb,var(--mock-inchiostro) 17%,transparent)}
/* prima si nascondevano dalla quinta in poi: adesso ne servono sette. */
.gal-mock-layout-colonna .gal-mock-t:nth-child(n+5){display:block}
.gal-mock-layout-colonna .gal-mock-t:nth-child(n+8){display:none}

/* ---- LA FINESTRELLA PIU' GRANDE ----
   Da 340 a 470 punti. Lo stesso numero sta nel programma
   (gallerie-manager.js, mostraAnteprima): serve li' a non far uscire
   la finestrella dal bordo dello schermo, e i due devono restare
   d'accordo.

   PERCHE' UN INGRANDIMENTO UNICO E NON RIQUADRI PIU' LARGHI. Nel
   modellino le altezze dei riquadri sono scritte in punti fissi,
   impianto per impianto, e sono state accordate a mano (consegne 2222
   e 3102). Allargando solo la finestrella le foto sarebbero venute
   piu' larghe ma non piu' alte: schiacciate. Ingrandendo tutto
   insieme, ogni proporzione gia' verificata resta identica -- e' la
   stessa immagine, piu' grande.

   315 x 1.4 = 441, che e' esattamente lo spazio dentro la finestrella
   (470 meno i 14 punti di bordo per lato). */
.gal-anteprima-pop{width:470px}
.gal-anteprima-pop .gal-mock{width:315px;zoom:1.4}
/* Il pannello del tocco (telefono) non c'entra e non si tocca: li' il
   modellino ha gia' la larghezza dello schermo. */
/* == fine 4043-anteprime-piu-grandi-e-piu-vere == */


/* ================================================================
   SEGNO-4419: UN LINK SOLO, E LA SCADENZA CHE SI VEDE

   I colori escono tutti dalle variabili del tema, che esistono sia
   chiaro sia scuro. Un colore scritto a mano qui sparirebbe in uno
   dei due -- e' gia' successo, e nel codice sembrava tutto a posto.
   ================================================================ */

/* Il riquadro della scadenza. Finche' non si e' deciso e' ambra: non
   e' un errore, e' una domanda ancora aperta. */
.gal-scadenza-blocco{
  padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r-m); background:var(--sunken);
}
.gal-scadenza-blocco.e-da-decidere{
  border-color:var(--warn); background:var(--warn-bg);
}
.gal-scadenza-testa{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.gal-scadenza-titolo{margin:0; font-size:15px; font-weight:700}
.gal-scadenza-bollo{
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px;
  background:var(--warn-ink); color:var(--warn-bg);
}
/* La frase "scadere non cancella niente" e' verde apposta: e' una
   rassicurazione, non un allarme, e sta prima delle due scelte perche'
   e' quello che sblocca la decisione. */
.gal-scadenza-rassicura{
  margin:10px 0 13px; padding:9px 12px; border-radius:var(--r-s);
  background:var(--ok-bg); color:var(--ok-ink);
  font-size:12.5px; line-height:1.6;
}
.gal-scadenza-scelte{display:flex; flex-direction:column; gap:8px}
.gal-scadenza-scelta{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--surface);
}
.gal-scadenza-scelta:hover{border-color:var(--ink-3)}
.gal-scadenza-scelta.e-scelta{
  border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
}
/* Il pallino sta in cima, accanto al titolo della scelta, e non a
   meta' del paragrafo: dal telefono il testo va su quattro righe e il
   pallino finiva a mezz'aria, lontano dalla frase che sceglie. */
.gal-scadenza-scelta input{margin-top:3px; flex-shrink:0; align-self:flex-start}
.gal-scadenza-testo{display:flex; flex-direction:column; gap:3px; min-width:0}
.gal-scadenza-testo strong{font-size:13.5px}
.gal-scadenza-sotto{font-size:12px; color:var(--ink-3); line-height:1.55}
.gal-scadenza-durata{
  margin-top:13px; padding-top:12px; border-top:1px solid var(--line);
}
.gal-scadenza-riga{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:5px;
}
.gal-scadenza-durata .gal-nota-stato{margin-bottom:0}
.gal-scadenza-manca{
  margin:12px 0 0; padding:9px 12px; border-radius:var(--r-s);
  background:var(--warn-bg); color:var(--warn-ink);
  font-size:12.5px; line-height:1.55;
}

/* L'avviso sui link doppi: ambra, sopra l'elenco, con dentro i numeri
   veri. Non e' decorazione -- e' l'unica cosa che permette di capire
   quale indirizzo ha in mano il cliente. */
.gal-link-doppi{
  margin:0 0 12px; padding:11px 13px; border-radius:var(--r-s);
  background:var(--warn-bg); color:var(--warn-ink);
  font-size:12.5px; line-height:1.6;
}
.gal-link-doppi p{margin:0 0 5px}
.gal-link-doppi p:last-child{margin-bottom:0}
.gal-link-doppi-titolo{font-weight:700}

/* Il link in evidenza si vede che e' quello: bordo dell'accento. */
.gal-link-principale{
  border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
}
.gal-link-bollo-mandare{
  font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px;
  background:var(--accent); color:var(--ground); white-space:nowrap;
}
.gal-altri-link{margin-top:11px}
.gal-altri-link-nota{
  margin:6px 0 0; font-size:12px; color:var(--ink-3); line-height:1.5;
}
.gal-link-pulizia{
  margin:7px 0 0; padding:8px 11px; border-radius:var(--r-s);
  background:var(--sunken); color:var(--ink-2);
  font-size:12px; line-height:1.55;
}

/* L'INDIRIZZO NON DEVE FINIRE IN UNA COLONNA STRETTA.
   Trovato guardandolo, non leggendo il codice: aprendo "gli altri
   link", quello secondario ha due pulsanti in piu' ("Metti una
   scadenza" e "E' questo che ho mandato"), la fila si allargava e
   schiacciava il corpo del riquadro. L'indirizzo andava a capo a meta'
   parola e la nota diventava un nastro alto e stretto -- proprio
   sull'unico link che si deve leggere bene per decidere se spegnerlo.
   Adesso la fila dei pulsanti si stringe e va a capo, e il corpo tiene
   una larghezza minima. */
.gal-link-corpo{min-width:min(420px, 100%)}
.gal-link-azioni{
  flex-shrink:1; flex-wrap:wrap; justify-content:flex-end;
  align-content:flex-start; max-width:min(520px, 50%);
}

/* Dal telefono l'intestazione del link va a capo: con il bollo "questo
   e' il link da mandare" in piu', su una riga sola non ci sta. E i
   pulsanti tornano a occupare tutta la larghezza, come gia' facevano. */
@media (max-width: 640px){
  .gal-link-testa{flex-wrap:wrap}
  .gal-link-corpo{min-width:0}
  .gal-link-azioni{max-width:none; justify-content:flex-start}
  .gal-scadenza-riga .btn{width:100%}
}


/* ================================================================
   == SEGNO_4439 ==
   LE TRE FAMIGLIE, E IL MODELLO "TEASER E FILM"

   "farei magari solo foto - solo video e mettere foto e video con
   dei layout che prevedono entrambi".

   Qui dentro ci sono tre cose:
     1. il titoletto del TERZO gruppo, uguale agli altri due;
     2. il vestito del modello nuovo nella pagina del cliente;
     3. il suo disegnino e il suo modellino, per la pagina Gallerie.

   In coda al foglio, come sempre: non si riscrive nessuna riga di
   nessun altro lavoro.
   ================================================================ */

/* ---------- 1. il titoletto del terzo gruppo ---------- */
.gal-gruppo-impianti.gal-gruppo-misti{margin-top:20px}
.gal-gruppo-impianti.gal-gruppo-misti::before{content:"";display:block;
  height:1px;background:var(--line);margin:0 0 14px}

/* ---------- 2. TEASER E FILM, nella pagina del cliente ----------
   E' parente stretto di Racconto (blocco 4045 qui sopra) e ne
   ripete l'impianto: i filmati davanti -- l'ordine lo fa
   visibili() in galleria-cliente.js, non il foglio di stile -- e
   le fotografie sotto in righe piene.

   COSA CAMBIA RISPETTO A RACCONTO, e perche':
   in Racconto il primo filmato e' grande e gli altri stanno DUE
   per riga. Li' i filmati sono tutti sullo stesso piano. Qui no:
   qui c'e' IL film, e poi ci sono gli extra. Percio' il primo
   prende quasi tutta l'altezza dello schermo, come una copertina,
   e gli altri diventano piccoli, TRE per riga: si vede a colpo
   d'occhio qual e' quello da guardare.

   Il teaser non sta qui dentro: sta in COPERTINA, e si mette al
   passo 2 della galleria. */
.gal-layout-teaser .gal-colonne{display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:8px;--gal-riga:250px}
.gal-layout-teaser .gal-colonna{display:contents}

/* le fotografie: righe piene, foto intere, bordo destro dritto */
.gal-layout-teaser .gal-tessera{margin:0;min-width:0;
  flex-grow:var(--gal-prop,1.5);
  flex-basis:calc(var(--gal-prop,1.5) * var(--gal-riga))}
.gal-layout-teaser .gal-tessera img{width:100%;height:auto;display:block}

/* L'ULTIMA RIGA non si stira: se avanza una foto sola, senza
   questo accorgimento diventerebbe grande quanto tutta la pagina.
   Stesso rimedio di "Righe piene", "Colonna fissa" e "Racconto". */
.gal-layout-teaser .gal-colonne::after{content:"";flex-grow:99999;
  flex-basis:0;height:0;margin:0}

/* i filmati: il primo enorme, gli altri tre per riga */
.gal-layout-teaser .gal-tessera-video{flex:0 0 calc(33.333% - 6px);
  background:#0b0b0f;border-radius:10px;overflow:hidden}
.gal-layout-teaser .gal-tessera-video:first-of-type{flex:0 0 100%}
.gal-layout-teaser .gal-tessera-video img{width:100%;height:auto;
  max-height:min(24vh,220px);object-fit:cover;
  aspect-ratio:16 / 9 !important}
.gal-layout-teaser .gal-tessera-video:first-of-type img{
  max-height:min(72vh,640px)}
.gal-layout-teaser .gal-tessera-video .gal-play{width:44px;height:44px;
  font-size:16px;line-height:44px}
.gal-layout-teaser .gal-tessera-video:first-of-type .gal-play{
  width:92px;height:92px;font-size:33px;line-height:92px}
/* nome e durata sempre in vista: senza, non si sa quale filmato
   si sta per aprire. */
.gal-layout-teaser .gal-targhetta{opacity:1}

@media (max-width:900px){
  .gal-layout-teaser .gal-colonne{--gal-riga:190px;gap:6px}
  .gal-layout-teaser .gal-tessera-video{flex:0 0 calc(50% - 4px)}
  .gal-layout-teaser .gal-tessera-video img{max-height:min(28vh,240px)}
}
@media (max-width:640px){
  .gal-layout-teaser .gal-colonne{--gal-riga:140px;gap:4px}
  /* SUL TELEFONO OGNI FILMATO PRENDE TUTTA LA RIGA. Tre affiancati
     starebbero a centoventi punti l'uno: il fotogramma diventa un
     francobollo e il nome del filmato non ci sta piu'. E' la stessa
     scelta che fanno gia' Scaletta, Bobina e Racconto. */
  .gal-layout-teaser .gal-tessera-video{flex:0 0 100%}
  .gal-layout-teaser .gal-tessera-video img{max-height:none}
  .gal-layout-teaser .gal-tessera-video:first-of-type img{
    max-height:min(52vh,420px)}
}

/* ---------- 3a. IL DISEGNINO NEL RIQUADRO DI SCELTA ----------
   La fascia grande del film col triangolino, sotto tre filmati
   piccoli, sotto tre fotografie. Disegnato col foglio di stile:
   nessuna immagine da scaricare, come gli altri dodici. */
.gal-demo-teaser{display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:1.7fr .5fr .7fr;gap:2px;padding:3px;
  background:var(--surface)}
.gal-demo-teaser span{background:var(--accent-2);border-radius:2px}
.gal-demo-teaser span:nth-child(1){grid-column:1 / 4;position:relative}
.gal-demo-teaser span:nth-child(1)::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent var(--surface)}
.gal-demo-teaser span:nth-child(n+2){opacity:.72;border-radius:1px}
.gal-demo-teaser span:nth-child(n+5){opacity:.45}

/* ---------- 3b. IL MODELLINO (l'anteprima grande) ----------
   LE ALTEZZE SONO IN PUNTI, NON IN FRAZIONI. E' la trappola gia'
   documentata tre volte in questo foglio (consegne 2222, 3102 e
   4045): le frazioni dividono un'altezza che qui non c'e', ogni
   riga verrebbe alta zero, e la finestrella uscirebbe
   COMPLETAMENTE VUOTA. */
.gal-mock-layout-teaser .gal-mock-griglia{
  grid-template-columns:repeat(6,1fr);gap:3px}
.gal-mock-layout-teaser .gal-mock-t{height:22px;min-height:0}
.gal-mock-layout-teaser .gal-mock-t:nth-child(1){grid-column:1 / 7;
  height:62px}
.gal-mock-layout-teaser .gal-mock-t:nth-child(2),
.gal-mock-layout-teaser .gal-mock-t:nth-child(3),
.gal-mock-layout-teaser .gal-mock-t:nth-child(4){grid-column:span 2;
  height:26px}
.gal-mock-layout-teaser .gal-mock-t:nth-child(n+11){display:none}
/* CON LA LINGUETTA SUI FILMATI i riquadri prendono la forma 16:9 e
   la larghezza gliela detta l'altezza (e' la regola del blocco 2542,
   che pesa piu' di queste): il riquadro allora non riempie piu' il
   posto che ha e resta appiccicato a sinistra, e la fila sembra
   sbilenca. Qui lo si centra. Visto guardando il modellino, non con
   un controllo automatico. */
.gal-mock.gal-mock-filmati.gal-mock-layout-teaser .gal-mock-t{
  justify-self:center}
/* == fine SEGNO_4439 == */


/* ================================================================
   == inizio SEGNO_4455-il-tasto-anteprima-chiama ==
   Appena una scelta di stile e' stata SALVATA, il pulsante
   «Anteprima» in cima si accende per quattro secondi e poi torna
   normale. Serve a dire "adesso c'e' qualcosa di nuovo da guardare".
   Chi lo accende e chi lo spegne sta nel programma, in
   gallerie-manager.js, blocco SEGNO_4455.

   NON LAMPEGGIA. E' un respiro lento: tre giri da un secondo e due,
   e poi si ferma da solo (il "3" alla fine della riga animation).
   Uno sfarfallio veloce e' fastidioso, e per chi soffre di
   fotosensibilita' e' anche pericoloso: la soglia da non avvicinare
   e' tre lampi al secondo, qui siamo sotto uno.

   CHI HA CHIESTO MENO MOVIMENTO NON VEDE MUOVERE NIENTE, ma il
   segnale c'e' lo stesso. Il colore, il contorno e l'anello di due
   punti NON sono un'animazione: sono scritti nella regola normale
   qui sotto. La riga generale in cima al foglio spegne le
   animazioni, quindi toglie il respiro e lascia il resto fermo, per
   quattro secondi. In fondo al blocco la stessa cosa e' scritta
   un'altra volta a mano, cosi' si vede che e' voluta e non un caso.

   I COLORI SONO QUELLI DELLA CASA (--accent, --accent-soft,
   --accent-ink), che esistono in tutti e due i temi: rame nel
   chiaro, ambra chiara nello scuro. Niente colori scritti a mano,
   niente color-mix.

   NON SPOSTA NIENTE INTORNO. Il bordo resta di un punto e cambia
   solo colore; l'anello e' un'ombra e le ombre non occupano posto;
   il respiro e' un ingrandimento, che non rimpagina.
   L'ORDINE DEGLI ANELLI CONTA: il primo scritto e' quello davanti,
   quindi l'anello pieno di due punti sta sopra all'alone chiaro che
   cresce dietro. Scritti al contrario, l'alone coprirebbe l'anello.

   In coda al foglio, come sempre: cosi' questa regola vince su
   quella del passaggio del mouse, e il segnale non sparisce proprio
   mentre ci si passa sopra col mouse per cliccarlo.
   ================================================================ */
.gal-passi-anteprima.gal-anteprima-invito{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 0 0 2px var(--accent);
  animation:gal-anteprima-respiro 1.2s ease-in-out 3}
@keyframes gal-anteprima-respiro{
  0%,100%{transform:scale(1);
        box-shadow:0 0 0 2px var(--accent),0 0 0 2px var(--accent-soft)}
  50%{transform:scale(1.05);
        box-shadow:0 0 0 2px var(--accent),0 0 0 8px var(--accent-soft)}
}
@media (prefers-reduced-motion:reduce){
  .gal-passi-anteprima.gal-anteprima-invito{
    animation:none;transform:none;
    box-shadow:0 0 0 2px var(--accent)}
}
/* == fine SEGNO_4455-il-tasto-anteprima-chiama == */



/* == 4477-la-condivisione-sui-social =================================
   La riga che spiega Instagram, sotto i pulsanti del pannello
   "Condividi". Piu' piccola e piu' tenue dell'introduzione: e' una
   spiegazione, non un avviso, e non deve gridare.
   In fondo al foglio e non in mezzo: su questo file mettono le mani
   piu' consegne nello stesso periodo, e una aggiunta in coda non puo'
   rompere nessuna riga di quelle che ci sono gia'. */
.gal-condividi-nota{margin:12px 0 0;font-size:12.5px;line-height:1.5;
  color:var(--ink-3)}
/* == fine 4477-la-condivisione-sui-social == */


/* == SEGNO_4651 inizio — la barra del telefono ========================
   "da mobile la barra sticky delle gallerie va migliorata: metti i due
   pulsanti anteprima e tutte le gallerie solo con le icone in alto, in
   modo che sotto appaiano i 4 step visibili".

   MISURATO A 390 PUNTI, PRIMA: la riga dentro la barra e' larga 336.
   «Anteprima» ne prendeva 112 e «Avanti» 77 (prima riga); «Tutte le
   gallerie» ne prendeva 130 in seconda riga, e ai quattro passi ne
   restavano 180 dei 336 che chiedono. Da li' i passi 3 e 4 fuori dal
   bordo, e la «i» di «Stile e impostazioni» tagliata a meta'
   nell'angolo.

   ADESSO: i due pulsanti si stringono all'icona e salgono tutti e due
   in prima riga insieme ad «Avanti»; la seconda riga e' tutta dei
   quattro passi, 84 punti a testa -- che e' la misura minima che
   questo stesso foglio chiedeva gia' (min-width:84px piu' su).

   In coda al foglio, come sempre: cosi' queste righe vincono su quelle
   di prima senza cancellarle, e nessun altro lavoro viene toccato.
   ==================================================================== */

/* L'icona che compare SOLO sul telefono, dentro «Tutte le gallerie»:
   la stessa del menu, cosi' si riconosce senza leggere. */
.gal-solo-telefono{display:none}

@media (max-width:640px){
  .gal-passi-riga{flex-wrap:wrap; gap:8px}

  /* PRIMA RIGA: indietro, anteprima, e Avanti spinto a destra. */
  .gal-passi-indietro{order:-2; margin-right:0}
  .gal-passi-anteprima{order:-1}
  .gal-passi-avanti-alto{order:0; margin-left:auto}

  /* SECONDA RIGA: tutta dei quattro passi, e senza scorrimento
     laterale -- una barra che si trascina di lato non la trascina
     nessuno, perche' non si vede che c'e' altro. */
  .gal-passi-riga .gal-passi{order:1; flex:0 0 100%; width:100%;
    overflow-x:visible}
  .gal-passo{min-width:0; flex:1 1 0; padding:5px 2px 0}
  .gal-passo-etichetta{font-size:10px; max-width:none; line-height:1.2;
    overflow-wrap:break-word}
  /* Il trattino fra un pallino e l'altro va riaccorciato: le colonne
     adesso sono strette il giusto, e con le misure di prima il trattino
     finiva sotto l'etichetta accanto. */
  .gal-passo:not(:last-child)::after{left:62%; right:-38%}

  /* I due pulsanti diventano quadrati attorno alla loro icona: 44 punti
     di lato, che e' la misura sotto la quale un dito comincia a
     sbagliare bersaglio. */
  .gal-tasto-parola{display:none}
  .gal-solo-telefono{display:inline-flex; align-items:center}
  .gal-passi-indietro,
  .gal-passi-anteprima{min-height:44px; padding-left:12px; padding-right:12px}
  .gal-passi-indietro{gap:4px; display:inline-flex; align-items:center}
}
/* == SEGNO_4651 fine ================================================= */


/* == SEGNO_4655 inizio — il pulsante «Info» accanto a ogni voce =======
   "tutte le info tecniche testuali vanno nascoste da un pulsante info
   chiaro e visibile in ogni step".

   CHIARO E VISIBILE, quindi: non un punto interrogativo grigio che si
   scopre passandoci sopra col mouse (sul telefono il mouse non c'e'),
   ma un pulsante con la parola scritta. Spento e' tenue, acceso prende
   il colore dell'accento: si vede a colpo d'occhio quali spiegazioni
   sono aperte e quali no.

   Sta in fondo alla riga del titolo, dopo il "3 di 8": e' un comando di
   servizio, non il comando principale della voce.

   In coda al foglio, come sempre: nessuna riga di nessun altro lavoro
   viene toccata.
   ==================================================================== */
.gal-info-tasto{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  margin-left:8px; vertical-align:middle;
  padding:3px 10px 3px 4px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink-3);
  font:inherit; font-size:11.5px; font-weight:600; line-height:1;
  cursor:pointer;
  transition:background var(--tr), color var(--tr), border-color var(--tr);
}
.gal-info-segno{
  width:18px; height:18px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--sunken); color:var(--ink-2);
  font-family:var(--font-display); font-weight:800; font-size:11.5px;
  line-height:1;
}
.gal-info-tasto:hover{border-color:var(--accent); color:var(--accent-ink)}
.gal-info-tasto:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* ACCESO: si vede che quella spiegazione e' aperta anche senza
   guardare sotto il titolo. */
.gal-info-tasto-acceso{
  background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent-ink);
}
.gal-info-tasto-acceso .gal-info-segno{
  background:var(--accent); color:var(--on-accent);
}

/* Sul telefono la riga del titolo va gia' a capo da sola (il titolo ha
   flex-wrap): qui basta togliere il margine a sinistra, se no il
   pulsante finito su una riga sua sembra rientrato per sbaglio. */
@media (max-width:520px){
  .gal-info-tasto{margin-left:0}
}
/* == SEGNO_4655 fine ================================================= */


/* == SEGNO_4657 inizio — stile, sfondo e barra a due colonne ==========
   "la sezione stile da mobile, dove selezioni i colori, incolonnano: in
   due colonne affiancate e non una". E lo stesso per lo sfondo e per
   allineare la barra.

   PERCHE' SUCCEDEVA. La griglia di queste scelte chiede colonne larghe
   almeno 200 punti (160 per i temi). Dentro la scheda, su un telefono
   da 390, di spazio ce ne sono 336: una colonna ci sta, due no. Quindi
   ne faceva una sola -- e faceva il suo mestiere.

   QUI si dice "due, e basta": 336 meno lo spazio in mezzo, diviso due,
   fa 163 punti a riquadro. In 163 punti la descrizione ci sta, ma
   stretta: per questo il carattere scende di mezzo punto e il bordo
   interno si stringe. Misurato, non stimato.

   SOLO SOTTO I 640 PUNTI. Su schermo grande la regola di prima e'
   giusta e resta: li' di colonne ce ne stanno quattro.

   NON tocca i template della galleria: quelli hanno un disegnino e tre
   righe di descrizione a testa, e in 163 punti diventerebbero una
   colonna di parole spezzate.

   In coda al foglio, come sempre.
   ==================================================================== */
@media (max-width:640px){
  .gal-scelta-carte-due-telefono{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  .gal-scelta-carte-due-telefono .gal-carta-scelta{
    padding:10px 11px;
    gap:4px;
  }
  .gal-scelta-carte-due-telefono .gal-carta-scelta strong{font-size:12.5px}
  .gal-scelta-carte-due-telefono .gal-carta-scelta span{
    font-size:11px; line-height:1.35;
  }
}
/* == SEGNO_4657 fine ================================================= */

/* ==========================================================
   SEGNO_4741 — GLI SCHERMI GRANDI: 4K E 5K

   IL DIFETTO. Su un monitor 4K o 5K il gestionale si vedeva
   minuscolo, per due motivi insieme:
     - il contenuto non superava mai i 1600 punti (.content-area
       piu' su in questo file), quindi su uno schermo largo 3840
       restavano quasi duemila punti vuoti ai lati;
     - il carattere non cresceva mai: e' scritto a misura fissa
       (15 punti il corpo) e nessuna regola lo legava alla
       larghezza dello schermo. Su un pannello ad alta densita'
       un punto e' fisicamente meta' di un punto normale, quindi
       15 punti li' si vedono come 7 o 8.

   LA REGOLA. Sopra una certa larghezza il gestionale cresce
   tutto insieme, e il tetto del contenuto cresce insieme al
   carattere: cosi' una riga di testo tiene lo STESSO NUMERO DI
   LETTERE di oggi, e diventa solo piu' grande da vedere. Una
   riga larga tremila punti sarebbe illeggibile: il tetto non si
   toglie, si alza quel tanto che serve.

   DOVE SI ACCENDE, E DOVE NO. Solo dove c'e' .app-container,
   cioe' la struttura del gestionale (frontend/templates/base.html).
   Le gallerie consegnate, la pagina del cliente e il portfolio
   pubblico NON hanno quella struttura: quello che vedono i
   clienti non cambia di un pixel, ed e' voluto -- e' un lavoro
   grafico venduto.

   SOTTO I 2200 PUNTI NON CAMBIA NIENTE. 2200 sta sopra a tutti i
   portatili (1280-1728) e sopra ai monitor 1920, dove il testo si
   vede gia' della grandezza giusta.

   SE IL BROWSER NON CAPISCE zoom o :has, salta tutto il blocco e
   si vede il gestionale di prima. Non si rompe niente.

   I NUMERI SI CAMBIANO QUI:
     2200 / 3000   da quale larghezza parte ciascun gradino
     1.25 / 1.5    quanto ingrandisce ciascun gradino
   ⚠️ Cambiando un ingrandimento va cambiata anche l'altezza
   minima sotto di esso: e' 100 diviso l'ingrandimento
   (100/1.25 = 80vh, 100/1.5 = 66.6667vh). Senza, la pagina
   diventa piu' alta dello schermo e compare una barra di
   scorrimento sul vuoto.
   ========================================================== */
@media (min-width:2200px){
  /* primo gradino: monitor 2K/QHD grandi e 5K alla misura di serie */
  body:has(.app-container){zoom:1.25;min-height:80vh}
  body:has(.app-container) .app-container{min-height:80vh}
  /* il tetto sale da 1600 a 1800: +12% di lettere per riga, non di piu' */
  body:has(.app-container) .content-area{max-width:1800px}
}
@media (min-width:3000px){
  /* secondo gradino: 4K a risoluzione piena, 5K «piu' spazio», 6K */
  body:has(.app-container){zoom:1.5;min-height:66.6667vh}
  body:has(.app-container) .app-container{min-height:66.6667vh}
}
/* == fine SEGNO_4741 == */


/* == inizio consegna-4761: il pannello della copertina si fa vedere ==
   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro.

   Il lampeggio dura un secondo scarso e non lascia niente addosso al
   pannello: e' un dito puntato, non una decorazione. Chi ha chiesto di
   non far muovere le animazioni riceve una cornice ferma, che dice la
   stessa cosa senza muoversi.
   ================================================================ */
.gal-scelte-copertina-arrivata{animation:galSceltePuntata 1s ease-out 1}
@keyframes galSceltePuntata{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}
  60%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 18%,transparent)}
  100%{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){
  .gal-scelte-copertina-arrivata{animation:none;
    outline:2px solid var(--accent);outline-offset:2px}}
/* == fine consegna-4761 == */


/* ================================================================
   == inizio consegna-4763: le anteprime dicono la verita' ==

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro, e queste righe vincono su quelle di prima perche'
   pesano uguale e vengono dopo.

   TRE BUGIE, TROVATE GUARDANDO E MISURANDO, NON LEGGENDO.
   ================================================================ */

/* ---- 1. LA COPERTINA IN BIANCO E NERO, DAVVERO ----

   La scheda dello stile "Minimale" promette "copertina in bianco e
   nero". La riga che doveva farlo c'era gia', ma stava sul VELO --
   che e' solo una sfumatura nera stesa SOPRA la foto, in una scatola
   sua. Scolorire una sfumatura gia' nera non si vede: la copertina
   restava a colori. Provato aprendo la galleria vera con lo stile
   Minimale: copertina a colori.
   Lo stesso valeva per il seppia di "Old style".

   Qui il colore si toglie DOVE LA FOTO C'E' DAVVERO -- l'immagine e
   il filmato di apertura. Il nome dell'evento, il marchio e la data
   stanno in un'altra scatola, sopra: restano come sono, e devono.
   Le foto della galleria non si toccano: quelle restano a colori. */
.gal-cliente.gal-tema-minimale .gal-apertura-foto,
.gal-cliente.gal-tema-minimale .gal-apertura-video{filter:grayscale(1)}
.gal-cliente.gal-tema-oldstyle .gal-apertura-foto,
.gal-cliente.gal-tema-oldstyle .gal-apertura-video{filter:sepia(.25)}

/* ---- 2. IL MODELLINO FACEVA ESATTAMENTE IL CONTRARIO ----

   Con lo stile "Minimale" il modellino scoloriva LE MINIATURE e
   lasciava a colori la copertina: il rovescio di quello che vede il
   cliente. Chi sceglieva lo stile guardando quel disegnino credeva
   che a diventare grigie fossero le foto della galleria.

   Adesso: miniature a colori (come nella galleria vera) e copertina
   scolorita (come nella galleria vera). Si usa il velo per scolorire
   quello che ha DIETRO: cosi' il logo e il nome, che stanno sopra al
   velo, restano leggibili -- esattamente come in galleria.
   Dove questo non si puo' fare, il modellino resta a colori: meglio
   una cosa in meno che una cosa sbagliata. */
.gal-mock-tema-minimale .gal-mock-t{filter:none}
@supports ((backdrop-filter:grayscale(1)) or (-webkit-backdrop-filter:grayscale(1))){
  .gal-mock-tema-minimale .gal-mock-velo{
    -webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1)}
  .gal-mock-tema-oldstyle .gal-mock-velo{
    -webkit-backdrop-filter:sepia(.25);backdrop-filter:sepia(.25)}
}

/* Il nome, sempre nello stile "Minimale", nella galleria vera e'
   TUTTO MAIUSCOLO e nel modellino no. E' la prima cosa che si legge
   in una copertina: se cambia, il modellino non e' piu' un'anteprima. */
.gal-mock-tema-minimale .gal-mock-nome,
.gal-mock-tema-minimale .gal-mock-piede-nome{text-transform:uppercase}
/* "Semplice": nella galleria vera il nome pesa 600, non 700. */
.gal-mock-tema-semplice{--mock-peso:600}

/* ---- 3. "RIGHE PIENE": TRE PER RIGA CONTRO CINQUE ----

   Il modellino disegnava sei riquadri, tre per riga. La galleria vera,
   misurata con dodici fotografie su uno schermo da 1400 punti, ne mette
   CINQUE per riga -- ed e' anche la regola scritta della casa: "quattro
   affiancate su tutti gli impianti". Un modellino a tre righe larghe fa
   sembrare "Righe piene" un impianto lento, e non lo e'.
   Dieci riquadri, due righe da cinque, larghezze diverse fra loro
   perche' le foto restano intere e non si ritaglia niente.
   Il numero dei riquadri lo decide TESSERE_MODELLINO in
   gallerie-manager.js: i due vanno cambiati insieme.
   Coi FILMATI non cambia niente: li' comanda una regola piu' pesante,
   scritta nel blocco dei filmati, che li mette tre per riga tutti
   uguali -- ed e' giusto cosi', i filmati sono tutti della stessa
   forma. */
.gal-mock-layout-righe .gal-mock-t{height:26px}
.gal-mock-layout-righe .gal-mock-t:nth-child(1){width:23%}
.gal-mock-layout-righe .gal-mock-t:nth-child(2){width:14%}
.gal-mock-layout-righe .gal-mock-t:nth-child(3){width:21%}
.gal-mock-layout-righe .gal-mock-t:nth-child(4){width:16%}
.gal-mock-layout-righe .gal-mock-t:nth-child(5){width:19%}
.gal-mock-layout-righe .gal-mock-t:nth-child(6){width:15%}
.gal-mock-layout-righe .gal-mock-t:nth-child(7){width:24%}
.gal-mock-layout-righe .gal-mock-t:nth-child(8){width:20%}
.gal-mock-layout-righe .gal-mock-t:nth-child(9){width:16%}
.gal-mock-layout-righe .gal-mock-t:nth-child(10){width:18%}
/* == fine consegna-4763 == */


/* == SEGNO_4839 inizio — il pulsante «Info» a sinistra del titolo =====
   "lo metterei a sinistra accanto al titolo cosi' e' piu' chiaro".

   IL PROBLEMA VERO NON ERA LA DISTANZA, ERA IL TITOLO CHE VA A CAPO.
   Su schermo grande bastava spostare il pulsante in testa alla riga.
   Sul telefono no: la riga del titolo e' una fila che va a capo da
   sola, e un titolo lungo -- "Intestazione con logo e contatti" --
   saltava INTERO sulla riga dopo, lasciando il pulsante da solo sopra
   o sotto. Misurato su un telefono da 390 punti: succedeva gia' su tre
   voci del passo 3 su otto, anche PRIMA di questa consegna.

   Il rimedio e' la riga qui sotto sul titolo: "flex:1 1 0" vuol dire
   "non pretendere la tua larghezza naturale, prenditi quello che
   avanza e vai a capo li' dentro". Cosi' il titolo si spezza nella sua
   colonna e il pulsante gli resta accanto, sempre.

   ALLINEATO IN ALTO, non al centro: con un titolo su due righe, un
   pulsante centrato galleggia a meta' fra le due e sembra staccato da
   entrambe. In alto sta all'altezza della prima riga, che e' dove
   l'occhio lo cerca.

   In coda al foglio, come sempre: nessuna riga di nessun altro lavoro
   viene toccata. Questo blocco arriva dopo quello della 4655 e dopo
   .gal-sezione-numerata, quindi vince sulle due righe che cambia
   (il margine a sinistra del pulsante e l'allineamento della fila).
   ==================================================================== */
.gal-titolo-con-info{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:flex-start;
}
.gal-titolo-con-info > .gal-info-tasto{
  order:-1;          /* primo, anche se un giorno tornasse in fondo */
  margin-left:0;     /* prima stava in coda e aveva 8 punti a sinistra */
  flex-shrink:0;     /* non si schiaccia mai */
}
.gal-titolo-con-info > .gal-passo-titolo{
  flex:1 1 0; min-width:0;
}

/* LA ZONA CHE IL DITO PRENDE.
   Il pulsante si vede 59 per 26 punti e resta di quella misura: qui
   sotto non si ingrossa niente di visibile. Quello che si allarga e'
   solo la zona che risponde al tocco, che diventa 44 punti di lato --
   la misura sotto la quale su un telefono un comando si manca. E'
   invisibile e non occupa spazio (sta "sopra" la pagina, non dentro la
   riga), quindi le intestazioni non si alzano di un punto. */
.gal-info-tasto{position:relative}
.gal-info-tasto::after{
  content:""; position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:100%; min-width:44px; height:44px;
}
/* == SEGNO_4839 fine ================================================= */

/* === inizio blocco 5031 === */
/* ==========================================================
   IL CRM DAL TELEFONO, CON UNA MANO SOLA

   Misurato su Safari 18.4 pilotato davvero (non letto nel codice),
   a 1440, 390 e 320 punti, tema chiaro e tema scuro. In coda al
   file, come sempre: non si tocca il blocco di nessun altro.
   ========================================================== */

/* --- 1. IL TITOLO DELLA PAGINA NON SI ACCORCIA PIU' A TRE LETTERE ---
   A 390 punti, in cima restavano 63 punti per il titolo: "Dashboard"
   diventava "Dash...", "Costi dello studio" e "RegiaPro Chatbot" pure.
   Quattro pulsanti tondi a destra e il menu a sinistra si prendevano
   tutto. Sotto i 480 punti il titolo va su una riga sua, larga tutto
   lo schermo, e si legge intero. */
@media (max-width:480px){
  .top-bar{flex-wrap:wrap;row-gap:2px}
  .top-bar .page-title{order:2;flex:1 0 100%;width:100%;overflow:visible}
  .top-bar .page-title>span{overflow:visible;text-overflow:clip;white-space:normal}
}

/* --- 2. L'AVVISO D'ERRORE PUO' FINALMENTE ESSERE LARGO ---
   La fascia era ancorata a meta' schermo (left:50%) e non le restava
   che l'altra meta': a 390 punti diventava larga 195 e un messaggio di
   66 caratteri andava su QUATTRO righe; a 320 punti su cinque. Il
   "max-width:88vw" scritto poco sopra non entrava mai in gioco.
   Adesso la fascia sta in una colonna larga tutto lo schermo e resta
   centrata come prima -- sul computer non cambia niente di visibile. */
#avvisi{left:0;right:0;transform:none;padding:0 12px}
/* Larga com'e' adesso, la fascia arrivava a coprire il tondo della
   chat in basso a destra per i sei secondi in cui resta. Sul telefono
   sale sopra al tondo: nessuno dei due nasconde piu' l'altro. */
@media (max-width:768px){#avvisi{bottom:80px}}

/* --- 3. LA CHAT DELL'ASSISTENTE SI USA COL DITO ---
   Misurate su Safari a 390 punti: la X per chiudere 21,6 x 28 punti,
   il campo del messaggio alto 40, il tondo "Invia" 38 x 38. Sotto i
   44 punti il dito sbaglia bersaglio. */
@media (max-width:768px){
  .assistente-chiudi{flex:0 0 auto;width:44px;height:44px;padding:0;
    display:inline-flex;align-items:center;justify-content:center}
  .assistente-invia{width:44px;height:44px}
  .assistente-input{min-height:44px;padding:12px}
  /* Il testo d'esempio dentro il campo e' lungo due righe e nel campo
     ce ne sta una: la seconda restava tagliata a meta'. Adesso finisce
     con i puntini invece che a meta' parola. */
  .assistente-input::placeholder{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
}
/* Su un telefono vero "100vh" e' lo schermo CON la barra degli
   indirizzi di Safari gia' sparita: il pannello nasce piu' alto di
   quello che si vede, e la riga dove si scrive finisce sotto la barra
   in basso. "100dvh" e' l'altezza che si vede DAVVERO, adesso.
   Il @supports e' voluto: un browser che non conosce dvh salta tutto
   e si comporta esattamente come prima. */
@supports (height:100dvh){
  .assistente-pannello{height:min(600px,calc(100dvh - 120px))}
  @media (max-width:480px){
    .assistente-pannello{height:min(520px,calc(100dvh - 112px))}
  }
}

/* --- 4. LE FILE DI SCHEDE NON NASCONDONO PIU' NIENTE ---
   Impostazioni a 1440: la fila scorre di lato e TRE schede (Costi e
   agenda, Manutenzione, AI e chatbot) restano fuori dallo schermo
   senza un segno che dica che ci sono. A 390 punti ne restano fuori
   sei, a 320 punti sette. Stessa cosa nella pagina Chatbot.
   Adesso vanno a capo: si vedono tutte, e non serve piu' trascinare
   di lato con il pollice.
   Il "body" davanti serve solo a vincere sulle righe scritte dentro
   impostazioni.html e chatbot.html, che sono in mano ad altri: quei
   due file non si toccano. */
/* --- 7 settembre 2026: aggiunte le schede social (.soc-*).
   Erano state fatte copiando le misure di .imp-scheda ma NON queste due
   righe, che sono quelle che le fanno comportare bene: senza, le tre
   schede restavano strette quanto la loro scritta, allineate a sinistra,
   e su schermo stretto si scorrevano di lato invece di andare a capo.
   E' esattamente quello che Giovanni ha visto: "testo disallineato a
   sinistra e le tre sezioni troppo piccole". Stanno qui e non in una
   regola loro cosi' il giorno che si cambia la forma delle schede si
   cambia in un punto solo per tutte e tre le pagine. */
body .imp-schede,body .cb-schede,body .soc-schede{flex-wrap:wrap;overflow-x:visible}
@media (max-width:768px){
  body .imp-scheda,body .cb-scheda,body .soc-scheda{min-height:44px;justify-content:center}
  /* --- blocco 51307: la riga che al Chatbot mancava ---
     Da telefono le schede tengono solo il nome: la spiegazione sotto le
     fa larghe il doppio. Impostazioni e Social avevano questa riga, ognuna
     scritta a mano nel proprio file (impostazioni.html:140,
     _bussola_social.html:71); il Chatbot NO, e da li' nascevano i 1.142 px
     da scorrere prima di arrivare al campo dove si scrive al bot -- su uno
     schermo alto 844. Lo stesso pezzo scritto tre volte, e una delle tre
     copie era rimasta indietro senza che nessuno se ne accorgesse.
     La riga sta QUI, dove le tre classi si toccano gia' insieme, e non in
     una quarta copia dentro chatbot.html: cosi' la prossima correzione le
     prende tutte e tre invece di due su tre. Le due copie nei due file
     restano dove sono e dicono la stessa identica cosa: non fanno danno,
     e toccare quei due file vorrebbe dire pestare i piedi a chi ci sta
     lavorando. */
  body .imp-scheda-nota,body .cb-scheda-nota,body .soc-scheda-nota{display:none}
}

/* --- 5. I PULSANTINI DEL TUTORIAL ---
   Il pulsante che apre i tutorial, in cima, misura 36 x 32 punti su
   ogni pagina. La X per uscire dal tutorial ne misura 18 x 21: e' la
   via d'uscita, ed e' il bersaglio piu' piccolo di tutto il CRM. */
@media (max-width:768px){
  .vg-aiuto-apri{min-height:44px;min-width:44px;justify-content:center}
  .vg-chiudi{width:44px;height:44px;padding:0;margin:-11px -11px 0 0;
    display:inline-flex;align-items:center;justify-content:center}
  .vg-barra .btn{min-height:44px}
}

/* --- 6. LA GALLERIA CHE APRE IL CLIENTE ---
   "Scarica le foto" e "Condividi" sono alti 36 punti: sono i due
   pulsanti che tocca la sposa dal telefono, e sono i primi che si
   vedono. I cuori invece erano gia' a posto (44 x 44 esatti, distanti
   106 punti a 320: misurati su Safari, non toccati). */
@media (max-width:768px){
  .gal-scarica-menu{min-height:44px;padding-top:0;padding-bottom:0}
}

/* --- 7. I CAMPI NON FANNO PIU' INGRANDIRE LA PAGINA SULL'IPHONE ---
   Su iPhone, toccare un campo scritto sotto i 16 punti fa ingrandire
   TUTTA la pagina da sola, e non torna piu' indietro: si perde il
   segno mentre si compila. Su Chrome non succede: e' la differenza
   piu' concreta fra i due browser.
   Nel file c'era gia' la riga giusta -- "input,select,textarea a 16
   punti sotto i 760" -- ma non ha mai funzionato per nessun campo del
   CRM: qualunque campo ha una classe (.form-input, .form-select), e
   una classe pesa piu' del nome dell'elemento. Misurato su Safari a
   390 punti: la ricerca dei lead a 14, la tendina dell'anno a 13,5,
   la ricerca delle impostazioni a 15, il campo della chat a 13,5.
   Qui la stessa regola viene riscritta con le classi vere. */
@media (max-width:760px){
  .form-input,.form-select,.form-textarea,.assistente-input,.scelta-anno,
  .ri-azioni .form-select{font-size:16px}
  /* La ricerca delle Impostazioni ha la sua riga scritta dentro
     impostazioni.html, che e' in mano a un altro incaricato: quel file
     non si tocca. Il "body" davanti basta a passarle davanti da qui. */
  body .imp-cerca input{font-size:16px}
}

/* --- 7b. DUE BERSAGLI PICCOLI CHE RESTAVANO ---
   La casella per scegliere una galleria (lato fotografo) misura
   18 x 18 punti: nel file c'e' gia' la regola che porta le caselle a
   24 sul telefono, ma quella della riga galleria pesa uguale ed e'
   scritta dopo, quindi vinceva lei. Qui si rimette il 24.
   Il marchio dentro al menu a scomparsa era alto 42,6: gli mancava
   un punto e mezzo per essere un bersaglio pieno. */
@media (max-width:760px){
  .gal-riga-spunta input{width:24px;height:24px}
  .sidebar-marchio-link{min-height:44px;display:flex;align-items:center}
}

/* --- 8. QUANDO PREMI, SI VEDE CHE HAI PREMUTO ---
   Sul telefono il passaggio del mouse non esiste: tutti gli effetti
   scritti per il mouse non si vedono mai, e premendo non succede
   niente finche' la pagina non risponde. Su una connessione lenta, a
   un matrimonio, sembra che il tocco non sia stato preso e si preme
   due volte. Questi sono gli unici effetti che si vedono col dito. */
@media (max-width:768px){
  .imp-scheda:active,.cb-scheda:active,.nav-item:active,.icon-btn:active,
  .gal-scarica-menu:active,.assistente-invia:active,.assistente-chiudi:active,
  .vg-aiuto-apri:active,.gal-cuore:active,.notifiche-campana:active{
    transform:scale(.96);opacity:.86}
}

/* === fine blocco 5031 === */

/* === inizio blocco 4452 === */
/* ==========================================================
   UNA SOLA SCALA PER LE MISURE DEL CARATTERE

   Misurato su Chrome pilotato davvero (non letto nel codice), a
   1280x800 e 1440x900 (i portatili), 1920, 390 e 320, tema chiaro e
   tema scuro, aspettando ogni volta che i caratteri fossero gia'
   caricati. In coda al foglio, come sempre: non si tocca il blocco
   di nessun altro.

   ---------------------------------------------------------------
   COS'ERA
   ---------------------------------------------------------------
   Il CRM usava 35 misure di carattere diverse, scritte una per una
   nel corso del tempo: 8,5 / 9 / 9,5 / 10 / 10,5 / 11 / 11,5 / 12 /
   12,5 / 13 / 13,4 / 13,5 / 14 / 14,5 / 15 / 15,5 / 16 / 16,5 ...
   Dodici di quelle stavano sotto i 14 punti. Non erano una scala:
   erano numeri limati mezzo punto alla volta. Cosi' capitava che
   l'etichetta di un campo, il testo di un pulsantino e la
   spiegazione sotto a un titolo -- tre cose che non c'entrano
   niente l'una con l'altra -- fossero tutte e tre a 12,5, e che due
   note vicine fossero una a 12 e una a 12,5 senza motivo.

   Contato a schermo, su sette pagine a 1280 punti: 1005 scritte
   visibili, di cui 503 sotto i 13 punti. La meta'. La piu' piccola
   a 9,5.

   ---------------------------------------------------------------
   LA SCALA, ADESSO
   ---------------------------------------------------------------
     12 punti  ETICHETTA  solo le etichettine in MAIUSCOLO
                          distanziato. Mai una frase.
     13 punti  MINORE     i dati di contorno: i bollini, la seconda
                          riga di una riga d'elenco (citta',
                          telefono), le intestazioni delle tabelle.
     14 punti  NOTA       le note e le spiegazioni brevi, le
                          etichette dei campi, i pulsantini.
     15 punti  CORPO      il testo che si legge: paragrafi, campi
                          da compilare, tabelle. E' il corpo del
                          CRM, quello di sempre.
     17 punti  MEDIO      i titoli delle schede.
   Sopra i 17 punti non si e' toccato niente: quei titoli si
   vedevano gia' bene e spostarli sarebbe stato solo rumore.

   Cinque misure al posto di dodici, e niente piu' mezzi punti.

   ---------------------------------------------------------------
   DOVE NON SI TOCCA NIENTE
   ---------------------------------------------------------------
   1. LE GALLERIE, LA PAGINA DEL CLIENTE, IL PORTFOLIO. Quello che
      vede il cliente e' un lavoro grafico venduto: resta identico.
      E' la stessa scelta gia' fatta dal blocco 4741.
   2. LE ANTEPRIME. Le scritte con cui il CRM ti fa vedere in
      anticipo una cosa che poi esce da lui e la guarda qualcun
      altro: un documento da stampare, un'email, un'infografica, la
      bolla del chatbot sul sito. Quelle non sono scritte del
      gestionale, sono il ritratto di un'altra cosa: ingrandirle
      vorrebbe dire far promettere all'anteprima una cosa falsa.
      (Sta scritto anche dentro chatbot.html, blocco 1362:
      "l'anteprima prometteva 'quello che vedi qui e' quello che
      vedono loro' e diceva una cosa falsa".)

   ---------------------------------------------------------------
   PERCHE' C'E' body:has(.app-container) DAVANTI
   ---------------------------------------------------------------
   Due motivi, tutti e due voluti:
   - .app-container e' la struttura del gestionale (base.html). Le
     gallerie e le pagine dei clienti non ce l'hanno, quindi da qui
     in giu' non le tocca niente;
   - le classi qui sotto sono scritte dentro le pagine
     (i <style> dentro i template), che sono in mano ad altri e non
     si toccano. Il "body" davanti basta a passargli davanti, ed e'
     la stessa strada gia' usata dal blocco 5031.
   Se un browser non capisce :has salta tutto e si comporta come
   prima: non si rompe niente.
   ========================================================== */

/* ETICHETTA (12px) -- etichette in MAIUSCOLO distanziato, mai frasi (erano 9 - 10,5)
   20 classi scritte dentro le pagine. */
body:has(.app-container) :is(
  .bus-qui-segno,.cfa-freccia,.cfa-pillola,.cifra-nome,.cst-cifra-nome,
  .dispo-giorno-extra,.imp-dove,.mese-attesa,.mese-nome,.mese-sigla,
  .offerta-eti,.ora-g,.partenza-et,.psc-ev,.soc-pezzo,.soc-provino-n,
  .tg-dow,.tg-ev-h,.tg-hd .cfa-pillola,.tg-ore
){font-size:12px}

/* MINORE (13px) -- badge, seconde righe, dati di contorno (erano 11 - 11,5)
   53 classi scritte dentro le pagine. */
body:has(.app-container) :is(
  .anno-barra-eti,.ass-quando,.ass-stato,.azione-nota,.badge,.barra-eti,
  .barra-piena,.cal-ante-pie,.cal-ante-stato,.cal-ante-tipo,.cal-dove-segno,
  .cb-daGoogle,.cb-fantasma,.cb-scheda-nota,.cb-verso,.cerca-meta,
  .cfa-stato,.cga-pallino,.chatstorico-in-corso,.cst-barra-eti,
  .dispo-giorno,.dispo-settimana-etichetta,.doc-link-nota,.fase-tag,
  .giorno-sep,.gui-stato,.imp-logo-azioni input[type=file],.imp-logo-nota,
  .imp-logo-vuota,.imp-manca-serve-etichetta,.imp-scheda-nota,.mese-conta,
  .mod-tipo,.psc-bollo,.psc-legenda,.riga-fine small,.salvato,.soc-bollo,
  .soc-cella,.soc-cella-n,.soc-info-p span,.soc-numero span,.soc-regola-tag,
  .soc-tag-titolo,.soc-testa,.spazio-lbl,.spazio-nota,.strumento-lbl,
  .strumento-val small,.tg-ev-t,.tg-tuttogiorno .tg-ev,.var-chip,
  .voce-quando
){font-size:13px}

/* Tre classi della famiglia .gal- che pero' si vedono SOLO dentro il
   gestionale, nella pagina "RegiaPro Gallery" del fotografo. Il
   body:has(.app-container) qui sopra garantisce che nella galleria del
   CLIENTE non cambi niente: quella pagina non ha .app-container. */
body:has(.app-container) .gal-vetrina-eti{font-size:13px}
body:has(.app-container) .gal-riquadro-nota{font-size:14px}

/* LA PAGINA PERSONALE DEL CLIENTE, VISTA DAL FOTOGRAFO.
   Le classi .pcl- si usano in due posti: dentro il CRM (pagina
   Anagrafica/Clienti, dove il fotografo prepara la pagina) e sulla
   pagina vera che poi apre il cliente. Nel foglio di stile sono le
   stesse righe, quindi cambiandole li' cambierebbe anche quello che
   vede il cliente. Qui invece si alzano SOLO dentro il gestionale:
   il body:has(.app-container) tiene fuori la pagina del cliente. */
body:has(.app-container) :is(
  .pcl-quando,.pcl-quante,.pcl-motivo,.pcl-piede,.pcl-riga-meta,
  .pcl-spento,.pcl-sugg-data,.pcl-sugg-attenzione,.pcl-vede span,
  .pcl-link-url,.pcl-link-meta,.pcl-docgruppo-titolo
){font-size:14px}
body:has(.app-container) :is(.pcl-apri,.pcl-vede){font-size:15px}

/* NOTA (14px) -- note, spiegazioni brevi, pulsantini (erano 12 - 13)
   117 classi scritte dentro le pagine. */
body:has(.app-container) :is(
  .accordion-conta,.accordion-freccia,.anno-barra-nota,.ass-campo label,
  .ass-chi,.ass-guasto,.ass-nota,.ass-numero,.bus-cosa,.bus-finale,
  .cal-ante,.card-coda,.cb-avviso-spesa,.cb-bollo,.cb-consumo-nota,
  .cb-scheda-s,.cb-sotto,.cb-stato,.cfa-menu-nota,.cfa-menu-piede,
  .cfa-menu-vai .cfa-vai-nota,.cfa-menu-vuoto,.cfa-nota,.cfa-perche,
  .cfa-piede,.cga-avviso,.cga-freccia,.cga-luogo,.cga-nota,.cga-ora,
  .chatstorico-testata p,.cifra-nota,.cst-categoria,.cst-cifra-nota,
  .cst-data,.cst-fornitore,.cst-mese-quante,.cst-nota,.dispo-mese-titolo,
  .dispo-nota,.doc-meta,.doc-spiega,.fase-quando,.fic-attenzione,
  .fic-passo::before,.form-input-sm,.giorno-sep .tot,.gui-conta,.gui-costo,
  .gui-senza,.gy-riga-nota,.imp-cerca-conta,.imp-giorno,.imp-guida,
  .imp-logo-nome,.imp-manca-altre,.imp-manca-frase,.imp-manca-non-puoi,
  .imp-manca-nota,.mesi-legenda div,.mod-aiuto,.mod-aiuto h4,.mod-legenda,
  .mod-sconosciuti,.pa-aiuto,.pa-facoltativo,.pa-nota,.pac-elenco li,
  .pac-elenco p,.pac-numero span,.passo-numero,.piano-schema-giorni,
  .priv-consenso,.priv-nota,.priv-spiega,.prz-listino,.prz-nota,.prz-spiega,
  .psc-avviso,.psc-interruttore,.psc-meta,.psc-perche,.psc-scatola,
  .pwp-indirizzo input,.pwp-nota,.pwp-passi code,.riga-dett,.soc-blocco,
  .soc-cliente-data,.soc-gal-segno,.soc-gal-vuoto,.soc-ig-esito,
  .soc-ig-scadenza,.soc-ig-spiega,.soc-ig-stato,.soc-info-avviso,.soc-meta,
  .soc-nota,.soc-provino-via,.soc-sposta-avviso,.soc-tag,.soc-testo,
  .soc-zona-bottone,.spazio-val small,.striscia-nota,.striscia-totale,
  .testo-corpo,.tras-nota,.tras-vai,.vdate-nota,.vdate-spiega,
  .voce-campo input[type=file],.voce-nota,.voce-testo,.voce-unita,
  .volti-nota-fuori,.zona-pulsante
){font-size:14px}

/* CORPO (15px) -- il testo che si legge, i campi (erano 13,5 - 15)
   71 classi scritte dentro le pagine. */
body:has(.app-container) :is(
  .ass-oggetto,.ass-testo,.azione-nome,.barra-cifra,.bus-nome,
  .cal-ante-nome,.cal-dove,.cb-avviso,.cb-consumo-riga,.cb-intro,
  .cb-scheda-nome,.cb-subito .cb-chi,.cb-vuoto,.cerca-nome,.cfa-menu-riga,
  .cfa-messaggio,.cfa-nome,.cga-cosa,.cga-quando,.cga-titolo,
  .cst-barra-cifra,.cst-barra-nome,.cst-descrizione,.cst-importo,
  .cst-mese-nome,.cst-mese-somma,.doc-nome,.fic-testo,.gui-serve,
  .gy-riga-testo strong,.gy-titolo,.imp-cerca-vuoto,.imp-manca-testo,
  .imp-scheda-nome,.mod-clausola .accordion-titolo,.mod-scelta,
  .offerta-cresce > textarea,.offerta-cresce::after,.oggi-verdetto,
  .pa-campo label,.pa-dopo,.pa-dopo-titolo,.pa-errore,.pa-testata p,
  .passo-nome,.piano-giorno-data,.piano-riepilogo-piattaforme,.priv-nome,
  .priv-spunta,.prz-nome,.psc-barra,.psc-nome,.psc-vuoto,.pwp-nome,
  .pwp-passi,.riga-fine,.riga-nome,.scheda-meta,.soc-cliente-nome,
  .soc-gal-cli,.soc-ig-nome,.soc-passo-nome,.soc-regola,.soc-titolo,
  .testo-titolo,.vdate-nome,.vdate-spunta,.voce-campo textarea,.voce-icona,
  .voce-nome,.voce-titolo
){font-size:15px}

/* ==========================================================
   LA MISURA: NESSUNA RIGA PIU' LUNGA DI UNA RIGA LEGGIBILE

   IL DIFETTO, MISURATO. Le righe di spiegazione non avevano
   nessun limite di larghezza: si allargavano fin dove arrivava
   la finestra. Misurate a schermo su quindici pagine:
     a 1280 punti (portatile)  fino a 154 lettere per riga
     a 1440 punti (portatile)  fino a 179
     a 1920 punti              fino a 242
   Centosedici punti del CRM oltre le 88 lettere. La misura in cui
   si legge senza fatica sta fra 45 e 75 lettere: oltre le 90
   l'occhio, tornando a capo, sbaglia riga e rilegge la stessa.
   E' questo il "formattato a sinistra e impaginato male": non e'
   che il testo sia allineato male -- e' che la riga e' cosi' lunga
   che il ritorno a capo si perde, e resta un muro di parole
   attaccato al bordo sinistro.

   68ch vuol dire "larga quanto 68 zeri del carattere in uso",
   cioe' circa 75 lettere vere. Cresce e cala insieme al corpo del
   testo, e sul telefono non entra mai in gioco perche' li' la
   riga e' gia' piu' corta.

   Il riquadro NON si stringe: si stringe solo il testo dentro.
   ========================================================== */
body:has(.app-container) :is(
  .page-subtitle,.form-hint,.empty-state-text,.card-nota,.imp-guida,
  .imp-manca-nota,.imp-manca-frase,.sollecito-nota,.doc-spiega,
  .psc-perche,.psc-avviso,.cal-dove-testo,.cfa-perche,.cfa-nota,
  .cb-sotto,.cb-intro,.cb-avviso-spesa,.cb-consumo-nota,.prz-spiega,
  .priv-spiega,.vdate-spiega,.pa-aiuto,.pa-nota,.mod-legenda,.mod-aiuto,
  .anno-barra-nota,.bus-finale,.bus-cosa,.soc-nota,.cst-nota,.gui-senza,
  .voce-nota,.riga-dett,.ass-nota,.tras-nota,.pwp-nota,.dispo-nota,
  .gy-riga-nota,.gal-vuoto,.striscia-nota,.volti-nota-fuori,.priv-nota
){max-width:68ch}
/* Le stesse righe scritte dentro una scheda: li' il tetto lo da'
   gia' la scheda, e questo non cambia niente. Serve dove il testo
   corre libero per tutta la larghezza della pagina. */
body:has(.app-container) .content-area > p{max-width:68ch}
/* L'ANTEPRIMA DEL MESSAGGIO WHATSAPP (scheda del lead, Lavori).
   Qui si tocca solo la LARGHEZZA, non il corpo del carattere: il
   corpo resta quello di prima, cosi' l'anteprima non promette una
   misura diversa da quella vera. La larghezza invece era 1470 punti
   a 1920, cioe' 216 lettere per riga: un messaggio WhatsApp vero e'
   largo tre dita. Stretta, l'anteprima assomiglia di piu' a quello
   che il cliente vedra' davvero, non di meno. */
body:has(.app-container) .anteprima{max-width:68ch}

/* ==========================================================
   QUELLO CHE SI E' ROTTO ALZANDO LE MISURE, E COME E' SISTEMATO

   1. L'ELENCO DEI LEAD, I DUE PULSANTINI SOTTO AL NOME.
      "Vedi cliente" e "Modifica" stavano affiancati. Portati da 11,5
      a 13 punti la coppia passa da 147 a 167 punti di larghezza, e
      nella colonna del nome (larga 175 a 1280, meno i 28 di margine
      della cella: ne restano 147) non ci stavano piu': andavano a
      capo uno sotto l'altro. La riga passava da 101 a 154 punti di
      altezza e la pagina da 2714 a 3565: un terzo piu' lunga, per
      ventuno lead. A 1440 e a 1920 non succedeva -- era un difetto
      del solo portatile.
      Adesso la cella che contiene i due pulsanti ha una larghezza
      minima: la colonna del nome si prende i venticinque punti che
      le mancano, e li toglie alla colonna delle note, che va a capo
      e non ne soffre. Il :has() prende esattamente quella cella li',
      in qualunque tabella, senza nominare la pagina.
      PERCHE' PARTE DA 1240 E NON PRIMA. Misurato riga per riga: il
      riquadro che contiene la tabella e' largo quanto la finestra
      meno 334 punti, e la tabella coi due pulsanti affiancati ne
      chiede 906. Sotto i 1240 punti quei 906 non ci stanno, la
      tabella sborda e per leggere l'importo bisogna trascinarla di
      lato -- ed e' peggio di due pulsanti uno sotto l'altro. Provato:
      a 1239 sborda, a 1240 no.
      Da 1024 a 1239 i due pulsanti restano uno sotto l'altro. Ci
      stavano gia' cosi' prima di questo lavoro (misurato: a 1024 e a
      1152 andavano a capo anche a 11,5 punti), quindi li' non
      peggiora niente di nuovo: la riga e' solo piu' alta perche' le
      scritte sono piu' grandi.
      I due portatili di Giovanni -- 1280 e 1440 -- stanno tutti e due
      sopra la soglia.
      Sotto i 760 punti non entra in gioco: li' le righe sono gia'
      schede, una sotto l'altra (blocco delle tabelle-schede). */
@media (min-width:1240px){
  body:has(.app-container) .table td:has(.azioni-riga){min-width:202px}
}

/* ==========================================================
   LE MISURE CHE NON SI TOCCANO IN GIU' (blocco 5031)

   Questo blocco sta DOPO il 5031, quindi a parita' di peso vince
   lui. Due regole del 5031 pero' non si devono perdere, e qui si
   riscrivono apposta perche' restino valide:
   - 16 punti per i campi dove si scrive, sotto i 760: sotto quella
     misura l'iPhone ingrandisce tutta la pagina da solo e non
     torna piu' indietro;
   - 44 punti per le zone da toccare col dito.
   Qui si aggiungono anche i campi che il 5031 non conosceva
   (.form-input-sm e i campi scritti dentro le pagine), che con la
   scala nuova salgono a 14-15 ma sul telefono devono stare a 16.
   E se ne aggiunge uno che era rimasto fuori anche al 5031: la
   tendina "Prossimi 6 mesi" del Calendario. E' scritta dentro
   calendar.html a 13 punti, e a 12 sotto i 640: misurata a 390 e a
   320, faceva ingrandire la pagina appena la si toccava.
   ========================================================== */
@media (max-width:760px){
  body .form-input,body .form-select,body .form-textarea,
  body .form-input-sm,body .assistente-input,body .scelta-anno,
  body .ri-azioni .form-select,body .imp-cerca input,
  body .voce-campo input,body .voce-campo textarea,
  body .pwp-indirizzo input,body .offerta-cresce > textarea,
  body .dispo-scelta-periodo{font-size:16px}
}
/* === fine blocco 4452 === */

/* === inizio blocco 12501 =================================================
   LA COPERTINA SFUMA NEL FONDO, E DAL TELEFONO QUATTRO FOTO AFFIANCATE
   NEL LORO FORMATO VERO.

   1) LA SFUMATURA (richiesta di Alex). La copertina finiva con un taglio
      netto: la foto arrivava in fondo allo schermo e sotto cominciava di
      colpo il fondo della pagina. Adesso l ultimo terzo della copertina
      si dissolve nel colore del fondo.
      Il colore e --ground, non il nero scritto a mano: cosi la sfumatura
      finisce ESATTAMENTE nel colore su cui appoggia, sia sulla galleria
      scura (dove si vede il nero che ha chiesto Giovanni) sia su quella
      chiara, dove un nero fisso rifarebbe lo stesso bordo netto un po
      piu su.

   2) QUATTRO FOTO PER RIGA DAL TELEFONO, e ognuna nella sua forma: una
      verticale resta verticale, una orizzontale resta orizzontale.
      Vale per gli impianti a griglia di foto. Gli impianti che mettono
      una cosa alla volta (storia, scaletta, bobina, elenco, racconto,
      cinema, teaser) restano come sono: la quattro-per-riga li
      cancellerebbe.
   ========================================================================= */

/* ---- 1. LA SFUMATURA DELLA COPERTINA ---- */
/* Sta SOPRA il velo (z-index 1 contro il suo automatico) e SOTTO il nome
   e la freccia, che hanno z-index 2: il nome resta leggibile.
   L altezza: un terzo della copertina, ma mai meno di 150 punti (su uno
   schermo basso girato di lato un terzo sarebbe una riga) e mai piu di
   360 (su un monitor alto diventerebbe meta pagina sfumata). */
.gal-apertura-sfuma{position:absolute;left:0;right:0;bottom:0;
  height:clamp(150px,32%,360px);z-index:1;pointer-events:none}
/* Il ripiego, per un browser che non conosce color-mix: due sole tappe.
   Si vede uguale, sale solo un po piu dritta. */
.gal-apertura-sfuma{background:linear-gradient(to bottom,
  rgba(0,0,0,0) 0%, var(--ground) 100%)}
/* La versione buona: sei tappe, quasi niente in cima e tutto in fondo.
   Una rampa dritta si vede come una fascia grigia che comincia; questa
   comincia senza che ci si accorga di dove. */
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .gal-apertura-sfuma{background:linear-gradient(to bottom,
    color-mix(in srgb,var(--ground) 0%,transparent) 0%,
    color-mix(in srgb,var(--ground) 9%,transparent) 28%,
    color-mix(in srgb,var(--ground) 30%,transparent) 52%,
    color-mix(in srgb,var(--ground) 62%,transparent) 74%,
    color-mix(in srgb,var(--ground) 88%,transparent) 90%,
    var(--ground) 100%)}}

/* IL VELO SI ALLEGGERISCE IN FONDO. Il velo scendeva fino al 60% di nero
   sull ultima riga: serviva a staccare la copertina dal resto quando
   sotto non c era niente. Adesso quel lavoro lo fa la sfumatura qui
   sopra, e i due sommati facevano una fascia scura e piatta -- sulla
   galleria chiara, una macchia grigia. Le prime tre tappe non si
   toccano: sono quelle che tengono leggibile il nome. */
.gal-apertura-velo{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,.30) 100%)}

/* LA FRECCIA IN FONDO diventa scura con il bordo chiaro. Prima era una
   pastiglia bianca trasparente: appoggiava sempre su un fondo scuro,
   perche il velo li sotto era al 60% di nero. Adesso li sotto c e il
   colore della pagina, e su una galleria chiara una pastiglia bianca
   con la freccia bianca dentro sparirebbe. Scura col bordo chiaro si
   vede su tutti e due. */
.gal-apertura-giu{background:rgba(0,0,0,.44);
  border:1px solid rgba(255,255,255,.36);color:#fff}
.gal-apertura-giu:hover{background:rgba(0,0,0,.62)}

/* ---- 2. DAL TELEFONO: QUATTRO PER RIGA, NELLA LORO FORMA ---- */
@media (max-width:640px){
  /* Lo spazio fra le foto si stringe: con quattro colonne, i 12 punti di
     prima si mangiavano 36 punti su 390, cioe una foto intera ogni
     quattro righe. A 6 punti ogni foto e larga 89 invece di 81. */
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna){
    --gal-margine:8px;--gal-respiro:6px;--gal-raggio:7px}

  /* Tutti e sei tornano allo stesso impianto: quattro colonne vere,
     affiancate, ognuna che impila le sue foto. Gli impianti a griglia
     (quadrato, rivista, collage) facevano sparire .gal-colonna dal
     calcolo con display:contents: qui torna a contare, altrimenti le
     quattro colonne che chiede galleria-cliente.js non esisterebbero e
     l ordine delle foto diventerebbe 1,5,9 ... */
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-colonne{display:flex!important;flex-wrap:nowrap!important;
    align-items:flex-start!important;gap:var(--gal-respiro)!important;
    grid-template-columns:none!important;grid-auto-rows:auto!important}
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-colonna{display:flex!important;flex-direction:column!important;
    flex:1 1 0!important;min-width:0!important;gap:var(--gal-respiro)!important}
  /* Il riempitivo invisibile degli impianti a righe qui darebbe una
     quinta colonna vuota. */
  .gal-cliente:is(.gal-layout-righe,.gal-layout-colonna) .gal-colonne::after{
    display:none!important}
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-tessera{height:auto!important;width:auto!important;margin:0!important;
    flex:0 0 auto!important;border-radius:var(--gal-raggio)!important}

  /* QUESTA E LA RIGA DEL FORMATO GIUSTO.
     --gal-prop e la forma vera della foto, larghezza diviso altezza,
     scritta sul riquadro dalla pagina foto per foto. Con height:auto la
     foto prende la larghezza della colonna e si alza da sola quanto
     serve: una verticale resta alta, una orizzontale resta bassa.
     Serve !important perche l impianto "quadrato classico" ritagliava
     tutto a quadrato con aspect-ratio:1 !important, e il quadrato non e
     il formato di nessuna fotografia. */
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-tessera img{width:100%!important;height:auto!important;
    aspect-ratio:var(--gal-prop,1.5)!important;object-fit:cover!important;
    max-height:none!important;display:block}

  /* I COMANDI SULLA FOTINA. In un riquadro largo 89 punti, due pastiglie
     da 44 non ci stanno affatto: coprirebbero la foto intera.
     - La freccia dello scarico sparisce dalla fotina: e a un tocco di
       distanza, aperta la foto, dove per giunta ha scritto quanto pesa.
     - Il cuore resta, ma si rimpicciolisce a 34 punti PER COME SI VEDE.
       Quello che si tocca resta 44: il ::before allarga il bersaglio
       senza allargare la pastiglia. Un cuore da 34 punti veri sarebbe
       il modo migliore per togliere una foto dalle scelte per sbaglio. */
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-tessera .gal-scarica-foto{display:none!important}
  /* --- blocco 60107 --- DODICI E NON PIU' CINQUE.
     Il bersaglio invisibile sotto al cuore e' 44x44 e sta centrato sul
     cuore. Con il cuore a 5 punti dall'angolo, il suo centro stava a 19
     punti dal bordo: ne servono 22 per meta' bersaglio, e la tessera
     (che nasconde quello che esce fuori) tagliava il resto. Misurato:
     40x40 invece di 44x44, e storto -- 22 punti da un lato, 17
     dall'altro.
     A 12 punti il centro sta a 26 dal bordo, e il bersaglio ci sta
     tutto. Il cuore DISEGNATO non cambia di un punto: si sposta di
     sette. */
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-foto-azioni{right:12px;bottom:12px;gap:4px}
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-tessera .gal-cuore{width:28px;height:28px;font-size:19px;position:relative;
    background:none;backdrop-filter:none;
    /* La pastiglia nera sotto al cuore sparisce: su una fotina da 89
       punti era una macchia che copriva un angolo su cinque. Al suo
       posto due ombre, che tengono il cuore bianco leggibile anche
       sopra un abito bianco in controluce -- senza coprire niente. */
    text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 9px rgba(0,0,0,.65)}
  /* SCELTA: qui la pastiglia torna, ed e verde piena. Deve gridare.
     Con seicento fotine da 89 punti, "quali ho segnato" si deve
     rispondere da lontano, senza mettere a fuoco. */
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-tessera .gal-cuore-pieno{background:var(--ok);color:var(--on-ok);
    text-shadow:none;width:26px;height:26px;font-size:15px;
    box-shadow:0 0 0 2px rgba(0,0,0,.35)}
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-tessera .gal-cuore::before{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:44px;height:44px}

  /* Il triangolo del filmato e la targhetta col nome, alla misura del
     riquadro nuovo: quello da 52 punti copriva mezza fotina, e la
     targhetta ci scriveva dentro tre righe di testo. */
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-tessera .gal-play{width:30px;height:30px;line-height:30px;font-size:11px}
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-targhetta{font-size:9px;padding:3px 4px;line-height:1.25}
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-targhetta-peso{display:none}
  .gal-cliente:is(.gal-layout-mosaico,.gal-layout-quadrato,.gal-layout-rivista,
                  .gal-layout-collage,.gal-layout-righe,.gal-layout-colonna)
  .gal-durata{font-size:9px;padding:1px 4px}
}
/* === fine blocco 12501 === */

/* ==========================================================================
   BLOCCO 12601 — I COMANDI DELLO SLIDESHOW
   ==========================================================================
   Una pastiglia in alto al centro del visore: indietro veloce, play,
   avanti veloce, la velocità e il numero della foto.

   In alto e non in fondo perché in fondo stanno già il cuore, lo scarico
   e la condivisione: su un telefono da 375 punti quella riga è piena.
   Qui sopra la fascia è libera (a destra sta solo la croce che chiude) e
   la foto, che lascia 64 punti di margine in alto, non ci arriva mai: la
   pastiglia finisce a 58 punti, e restano 6 punti di aria. Misurato in
   pagina a 1440, 480 e 320 punti di larghezza. A 320 punti fra la
   pastiglia e la croce restano 20 punti: per questo sotto i 480 il
   numero della foto sparisce.
   ========================================================================== */
.gal-slide{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:4px;padding:3px 6px;
  border-radius:999px;background:rgba(255,255,255,.10);
  font-size:13px;color:rgba(255,255,255,.85)}
@supports (backdrop-filter:blur(8px)){
  .gal-slide{backdrop-filter:blur(8px);background:rgba(255,255,255,.08)}}

.gal-slide-tasto{border:0;background:transparent;color:rgba(255,255,255,.72);
  min-width:40px;height:40px;padding:0;border-radius:999px;font:inherit;
  font-size:17px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:var(--tr)}
.gal-slide-tasto:hover{color:#fff;background:rgba(255,255,255,.16)}
.gal-slide-tasto:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gal-slide-tasto:disabled{opacity:.28;cursor:default}
.gal-slide-tasto:disabled:hover{background:transparent;color:rgba(255,255,255,.72)}

/* Il play acceso si deve vedere da lontano: pieno bianco, non un
   dettaglio. Chi guarda deve sapere in un attimo se sta scorrendo. */
.gal-slide-play{font-size:15px}
.gal-slide-play[aria-pressed="true"]{background:#fff;color:#111}
.gal-slide-play[aria-pressed="true"]:hover{background:#fff;color:#111}

/* La velocità: 1x spenta, 2x accesa. */
.gal-slide-vel{font-size:13px;font-weight:700;min-width:40px;letter-spacing:.02em}
.gal-slide-vel[data-veloce="2"]{background:rgba(255,255,255,.9);color:#111}
.gal-slide-vel[data-veloce="2"]:hover{background:#fff;color:#111}

.gal-slide-conta{padding:0 10px 0 6px;font-size:12.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.6)}

/* Sotto i 480 punti il numero se ne va e i tasti si stringono: se
   restasse tutto, la pastiglia arriverebbe a toccare la croce che
   chiude, in alto a destra. Contato su uno schermo da 375 punti. */
@media (max-width:480px){
  .gal-slide{top:9px;gap:2px;padding:3px 4px}
  .gal-slide-conta{display:none}
  .gal-slide-tasto{min-width:36px;height:36px}
  .gal-slide-vel{min-width:38px}
}
/* === fine blocco 12601 === */

/* ==========================================================================
   === inizio blocco 12701: LA SALA DEI FILMATI ===
   Un filmato grande in cima, la fila dei piccoli sotto. Si tocca uno
   piccolo e prende il posto di quello grande.

   Il palco e' scuro in tutti e due i temi, chiaro e scuro: un filmato
   su fondo chiaro si guarda male, e le bande di un video verticale su
   fondo bianco sembrano un difetto invece che una forma.
   ========================================================================== */
.gal-sala{max-width:1100px;margin:0 auto 48px;width:100%}

/* Il nome sopra al filmato. E' sempre pieno: se Giovanni non ha scritto
   un titolo ci arriva il nome del file reso leggibile dal server. */
.gal-sala-nome{margin:0 0 12px;text-align:center;color:var(--ink-strong);
  font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.4;overflow-wrap:anywhere}

/* ------------------------------ IL PALCO ------------------------------ */
/* Forma fissa 16:9 anche per un filmato verticale, che resta in mezzo
   con le bande ai lati. Serve a una cosa sola e importante: il palco
   NON cambia altezza quando si cambia filmato, e la pagina non salta
   sotto le dita di chi ha appena toccato una scheda piccola. */
.gal-sala-palco{position:relative;width:100%;aspect-ratio:16/9;
  border-radius:var(--gal-raggio);overflow:hidden;background:#0a0a11}
/* Nessuna copertina: fondo con la pellicola invece di un rettangolo
   nero, che sembrerebbe un guasto. */
.gal-sala-palco-spoglio{background:linear-gradient(135deg,#2A2A36,#15151D)}
.gal-sala-pellicola{position:absolute;inset:0;z-index:0;display:grid;
  place-items:center;color:rgba(255,255,255,.30);pointer-events:none}
.gal-sala-pellicola svg{width:78px;height:78px}
.gal-sala-posto{position:absolute;inset:0;z-index:1}
/* background:transparent -- cosi' finche' il browser non ha un
   fotogramma da disegnare si vede la pellicola qui sotto. */
.gal-sala-video{display:block;width:100%;height:100%;border:0;outline:0;
  background:transparent}
.gal-sala-incorporato{background:#0a0a11}

/* --------------------------- SOTTO IL PALCO --------------------------- */
.gal-sala-altrove{margin:10px 0 0;text-align:center}
.gal-sala-riga{margin:12px 0 0;text-align:center;color:var(--ink-3);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

.gal-sala-azioni{margin:16px 0 0;display:flex;justify-content:center;
  align-items:center;gap:12px;flex-wrap:wrap}
/* .gal-scarica nasce dentro il visore, che e' nero: li' e' bianco su un
   velo chiaro. Qui sta sulla pagina, che nel tema chiaro e' chiara, e
   cosi' com e' sarebbe invisibile. Stessa pastiglia scura del cuore. */
.gal-sala-azioni .gal-scarica{background:rgba(0,0,0,.58);color:#fff}
.gal-sala-azioni .gal-scarica:hover{background:rgba(0,0,0,.74)}
/* Stesso motivo: l avviso "non parte" e' scritto per il visore nero. */
.gal-sala .gal-video-avviso{color:var(--ink-2)}
.gal-sala .gal-video-altrove{color:var(--ink-3)}
.gal-sala .gal-video-altrove:hover{color:var(--ink)}

/* --------------------------- LA FILA SOTTO --------------------------- */
.gal-sala-etichetta{margin:34px 0 14px;color:var(--ink-3);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;text-align:center}

/* Scorre di lato quando i filmati non ci stanno, sul computer come sul
   telefono. Nessuna freccia da premere: due bersagli in piu' su uno
   schermo stretto, e uno scorrimento col dito che tutti conoscono gia'. */
.gal-sala-fila{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.gal-sala-scheda{flex:0 0 232px;scroll-snap-align:start;
  border:0;padding:0;margin:0;background:none;font:inherit;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.gal-sala-scheda:focus-visible{outline:3px solid var(--ink);outline-offset:3px;
  border-radius:12px}

.gal-sala-mini{position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#2A2A36,#15151D)}
/* Il filmato scelto e' luminoso, gli altri spenti: si vede a colpo
   d occhio quale si sta guardando, senza leggere niente. */
.gal-sala-mini img{display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.55);transition:filter .2s ease,transform .3s ease}
.gal-sala-scheda:hover .gal-sala-mini img{filter:brightness(.85)}
.gal-sala-scheda-viva .gal-sala-mini img,
.gal-sala-scheda-viva:hover .gal-sala-mini img{filter:brightness(1)}
.gal-sala-scheda-viva .gal-sala-mini{outline:2px solid var(--ink-strong);
  outline-offset:2px}
.gal-sala-mini-spoglia{position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.42);transition:opacity .2s ease}
.gal-sala-mini-spoglia svg{width:30px;height:30px}
/* Anche i filmati senza copertina si spengono quando non sono quello
   scelto: se no, in una fila dove nessuno ha la copertina, il segno del
   filmato in corso sarebbe il solo filo intorno al riquadro. */
.gal-sala-scheda:not(.gal-sala-scheda-viva) .gal-sala-mini-spoglia{opacity:.5}

.gal-sala-mini-nome{margin-top:9px;color:var(--ink-3);font-size:13px;
  font-weight:600;line-height:1.35;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;transition:color .2s ease}
.gal-sala-scheda-viva .gal-sala-mini-nome{color:var(--ink-strong)}
.gal-sala-mini-conta{display:block;margin-top:3px;color:var(--ink-3);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}

/* -------------- LE TESSERE DEI FILMATI NELLA GRIGLIA SOTTO -------------- */
/* Quando la sala c e', i filmati stanno li' e nella griglia sarebbero
   gli stessi filmati una seconda volta. Si nascondono da qui invece che
   togliendoli dall elenco: cosi' questa consegna non mette le mani
   dentro la griglia, e il conto delle foto non cambia di una virgola. */
.gal-sala ~ .gal-colonne .gal-tessera-video{display:none}

/* --------------------------- DAL TELEFONO --------------------------- */
@media (max-width:760px){
  .gal-sala{margin-bottom:34px}
  .gal-sala-nome{font-size:13.5px;margin-bottom:10px}
  .gal-sala-palco{border-radius:10px}
  .gal-sala-pellicola svg{width:54px;height:54px}
  .gal-sala-etichetta{margin:26px 0 12px}
  /* Poco meno di due terzi: il filmato dopo si affaccia dal bordo, ed e'
     l unico modo per far capire che la fila si scorre senza scriverlo. */
  .gal-sala-scheda{flex:0 0 63%}
  .gal-sala-mini-nome{font-size:12.5px}
}

/* -------- L IMPIANTO A DUE COLONNE ("Colonna fissa") -------- */
/* Li' la pagina e' una griglia di due colonne e TUTTO quello che non
   sono le foto finisce nella striscia stretta di sinistra, larga 248
   punti. Un filmato in 248 punti non si guarda: la sala va nella
   colonna larga, sopra le fotografie, che scendono di una riga.
   La seconda regola vale SOLO se la sala c e' davvero (il segno "~"):
   senza filmati la pagina resta identica a prima. */
@media (min-width:1000px){
  .gal-layout-colonna .gal-dentro > .gal-sala{grid-column:2;grid-row:1}
  .gal-layout-colonna .gal-dentro > .gal-sala ~ .gal-colonne{
    grid-row:2 / span 999}
}
/* === fine blocco 12701 === */

/* ==========================================================================
   === inizio blocco 12703: titolo e copertina dei filmati, facoltativi ===
   La fascia che compare appena un filmato ha finito di salire.
   ========================================================================== */
.gal-rifiniture{border:1px solid var(--line)}
.gal-rifiniture-guida{margin:6px 0 16px;color:var(--ink-2);font-size:13px;
  line-height:1.6;max-width:70ch}

.gal-rifinitura{display:flex;gap:14px;align-items:flex-start;
  padding:12px 0;border-top:1px solid var(--line-soft)}
.gal-rifinitura:first-of-type{border-top:0}

.gal-rifinitura-mini{position:relative;flex:0 0 128px;width:128px;
  aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,#2A2A36,#15151D)}
.gal-rifinitura-mini img{width:100%;height:100%;object-fit:cover;display:block}
.gal-rifinitura-spoglia{position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.45)}
.gal-rifinitura-spoglia svg{width:26px;height:26px}
/* La rotellina sopra QUELLA copertina, non sopra tutta la fascia: si
   deve vedere su quale filmato si sta lavorando. */
.gal-rifinitura-carica{position:absolute;left:50%;top:50%;width:22px;height:22px;
  margin:-11px 0 0 -11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:gal-rifinitura-gira .8s linear infinite}
@keyframes gal-rifinitura-gira{to{transform:rotate(360deg)}}

.gal-rifinitura-campo{flex:1 1 260px;min-width:0;display:flex;
  flex-direction:column;gap:5px}
.gal-rifinitura-etichetta{font-size:12px;font-weight:600;color:var(--ink-2)}
.gal-rifinitura-tasti{flex:0 0 auto;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start;max-width:220px}
/* Il tasto va a capo invece di uscire dal riquadro: con la lingua
   inglese o un carattere piu' grande la scritta e' piu' lunga. */
.gal-rifinitura-tasti .btn{white-space:normal;text-align:left;max-width:100%}
.gal-rifinitura-nota{color:var(--ink-3);font-size:11.5px;line-height:1.45;
  overflow-wrap:anywhere}

.gal-rifiniture-fondo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}

/* Da telefono la riga si impila: la copertina sopra, il campo sotto, i
   tasti in fondo. In fila su 375 punti il campo del titolo resterebbe
   largo quattro lettere. */
@media (max-width:760px){
  .gal-rifinitura{flex-direction:column;gap:10px}
  .gal-rifinitura-mini{flex:0 0 auto;width:160px}
  /* flex:0 0 auto e non il "1 1 260px" di sopra: in colonna quel valore
     fa allungare il campo fino a riempire la riga, e fra il titolo e il
     tasto della copertina restava un buco di trecento punti. */
  .gal-rifinitura-campo{flex:0 0 auto;width:100%}
  .gal-rifinitura-tasti{max-width:none;width:100%}
}
/* === fine blocco 12703 === */

/* ==========================================================================
   === inizio blocco 13103: BOBINA, IL POSTO PRENOTATO SI LIBERA ===

   IL DIFETTO. Impianto "Bobina", scheda "Video": sotto la fila dei
   filmati restavano 652 punti di nero sul computer (466 su un telefono
   da 390) e poi la pagina finiva. Una fascia vuota alta mezzo schermo,
   nell impianto fatto apposta per i filmati.

   PERCHE'. In Bobina il primo filmato sta in posizione assoluta -- esce
   dalla striscia e si appoggia in cima -- e .gal-colonne gli tiene
   libero il posto con un bordo interno alto quanto lui. Il blocco 12701
   ha portato i filmati nella sala e ha tolto le loro tessere dalla
   griglia, ma il posto e' rimasto prenotato per nessuno.

   LA REGOLA: se in pagina c e' la sala, in Bobina la griglia non tiene
   libero piu' niente. Il segno "~" fa il lavoro: senza sala la pagina
   resta identica a prima, e nella scheda "Foto" la prima fotografia si
   prende il posto grande come ha sempre fatto.
   ========================================================================== */
.gal-layout-bobina .gal-sala ~ .gal-colonne{padding-top:0}
.gal-layout-bobina .gal-sala ~ .gal-colonne .gal-colonna{padding-bottom:0}

/* LO STESSO, DETTO IN GENERALE, per un caso piu' vecchio della sala: la
   griglia di Bobina vuota per qualunque altro motivo -- una cartella
   scelta che di filmati non ne ha, per esempio. Se non c e' nemmeno una
   tessera, non c e' niente da tenere libero.
   I browser che non conoscono :has() saltano queste due righe e si
   comportano come prima: e' un di piu', non il rimedio principale --
   quello sono le due righe qui sopra, che funzionano dappertutto. */
.gal-layout-bobina .gal-colonne:not(:has(.gal-tessera)){padding-top:0}
.gal-layout-bobina .gal-colonne:not(:has(.gal-tessera)) .gal-colonna{
  padding-bottom:0}
/* === fine blocco 13103 === */

/* ==========================================================================
   === inizio blocco 13105: I DUE TASTI DELLA SALA, NEI COLORI DEL TEMA ===

   IL DIFETTO. Sotto il filmato grande, il cuore e "Scarica il filmato"
   erano due pastiglie grigio scuro fisse (nero al 58 per cento). Quella
   pastiglia nasce per stare SOPRA UNA FOTOGRAFIA, dove il fondo puo'
   essere bianchissimo. Qui i due tasti stanno sulla PAGINA: sulla
   galleria a sfondo chiaro erano due macchie scure su fondo crema,
   fuori tono rispetto ai tasti dello studio in cima.

   LA REGOLA: i colori li da' il tema, non questo foglio. Cosi' seguono
   da soli lo sfondo chiaro, quello scuro e tutti e otto gli stili.

   SI USANO SOLO I COLORI CHE LO SFONDO CHIARO RISCRIVE DAVVERO
   (--ink, --ink-strong, --line-strong) e la coppia --accent/--on-accent,
   che va sempre insieme. NON --card: quello lo sfondo chiaro non lo
   riscrive, e con quello si tornava a un tondo scuro sulla pagina
   crema -- cioe' al difetto di partenza.
   ========================================================================== */

/* Lo scarico e' lo stesso gesto del tasto "Scarica le foto" in cima:
   stessi colori, cosi' si assomigliano. */
.gal-sala-azioni .gal-scarica{background:var(--accent);color:var(--on-accent)}
.gal-sala-azioni .gal-scarica:hover{background:var(--accent-ink);
  color:var(--on-accent)}

/* Il cuore e' il tasto secondario dei due: un tondo col filo intorno,
   non una macchia piena. */
.gal-sala-azioni .gal-cuore{background:transparent;color:var(--ink);
  border:1px solid var(--line-strong);backdrop-filter:none}
.gal-sala-azioni .gal-cuore:hover{background:transparent;
  color:var(--ink-strong);border-color:var(--ink-strong)}

/* SCELTO resta verde: e' il segno che il cliente cerca, e non si tocca.
   Il filo sparisce, se no si vedrebbe un anello intorno al verde. */
.gal-sala-azioni .gal-cuore.gal-cuore-pieno{background:var(--ok);
  color:var(--on-ok);border-color:transparent}
.gal-sala-azioni .gal-cuore.gal-cuore-pieno:hover{background:var(--ok);
  color:var(--on-ok);border-color:transparent}

/* IL CONTORNO DEL TABULATORE era bianco: nato per il visore, che e'
   nero. Su una galleria chiara, bianco su crema non si vede -- e chi
   gira la pagina con la tastiera non sapeva piu' dove si trovava. */
.gal-sala-azioni .gal-cuore:focus-visible,
.gal-sala-azioni .gal-scarica:focus-visible{outline:3px solid var(--ink);
  outline-offset:3px}
/* === fine blocco 13105 === */

/* ==========================================================================
   === inizio blocco 13109: LA BARRA IN FONDO AL VISORE, SUL TELEFONO ===

   IL DIFETTO (piu' vecchio delle consegne di oggi). Su uno schermo da
   390 punti, il tasto "Scarica il filmato - 24 kB" diventava un grumo da
   90 per 103 punti, con la scritta spezzata su cinque righe che usciva
   dalla pastiglia tonda.

   PERCHE'. La barra stava a meta' schermo e poi tirata indietro di meta'
   se stessa (left:50% con translateX(-50%)). Fatta cosi', la larghezza
   che il browser le concede e' solo LA META' DELLO SCHERMO: 195 punti su
   un telefono da 390. I tre tasti dentro venivano schiacciati fino alla
   parola piu' lunga che contengono, e da li' le cinque righe. Sul
   computer non si vedeva, perche' meta' di 1280 basta e avanza.

   ADESSO la barra prende tutta la larghezza e i tasti si mettono in
   mezzo da soli. Se non ci stanno in fila vanno a capo, interi.
   Sul computer non cambia niente: erano gia' in mezzo e ci stavano.
   ========================================================================== */
.gal-schermo-barra{left:0;right:0;transform:none;
  justify-content:center;flex-wrap:wrap;row-gap:8px;padding:0 14px;
  /* IL VUOTO AI DUE LATI DEI TASTI NON DEVE RUBARE IL CLIC.
     Adesso che la barra e' larga quanto lo schermo, senza questa riga
     la striscia vuota accanto ai tasti coprirebbe il velo nero -- e
     toccare li' fuori non chiuderebbe piu' il visore, come invece fa
     dappertutto. Con pointer-events il vuoto lascia passare il dito e
     i tasti restano tasti. */
  pointer-events:none}
.gal-schermo-barra > *{pointer-events:auto}
/* Nessun tasto piu' largo della riga: se una scritta e' lunghissima va
   a capo DENTRO la pastiglia, in mezzo, invece di uscirne. */
.gal-schermo-barra .gal-cuore-grande,
.gal-schermo-barra .gal-scarica{max-width:100%;text-align:center}
/* === fine blocco 13109 === */


/* ================================================================
   == inizio blocco 14301 - il tasto «salva modifiche e vedi» ==
   In coda al foglio, come sempre: cosi queste righe vincono su
   quelle di prima senza cancellarle, e nessun altro lavoro viene
   toccato.

   Prende il posto di «Avanti» nella barra in cima, quindi eredita le
   stesse misure: la riga non cambia forma e sul telefono non va a
   capo niente di nuovo.
   ================================================================ */
.gal-passi-salva-vedi{flex-shrink:0; white-space:nowrap}

/* Le parole intere su schermo grande, la forma corta sul telefono.
   MISURATO in un browser vero: nella barra restano 215 punti liberi a
   390 di larghezza, 200 a 375, 185 a 360. «Salva modifiche e vedi»
   ne vuole 170 e ci starebbe anche a 360, ma con 15 punti di margine:
   troppo pochi perche un carattere leggermente diverso o una lingua
   piu lunga non lo mandino a capo. «Salva e vedi» ne vuole 102 e sta
   comodo dappertutto. Le parole intere non si perdono: restano nel
   suggerimento e per chi legge con la voce. */
.gal-salva-corto{display:none}

@media (max-width:900px){
  /* Alla stessa larghezza in cui «Avanti» si sposta a destra, ci si
     sposta anche questo: e lo stesso posto nella riga. */
  .gal-passi-salva-vedi{margin-left:auto}
}

@media (max-width:640px){
  .gal-passi-salva-vedi{order:0; margin-left:auto; min-height:44px}
  .gal-salva-lungo{display:none}
  .gal-salva-corto{display:inline}
}
/* == fine blocco 14301 == */

/* ==========================================================================
   === inizio blocco 14701: IL VISORE COME NELL'APP REGIAPRO PHOTO ===

   Richiesta di Giovanni, 5 settembre 2026, con la schermata del visore di
   confronto della sua applicazione: "per la galleria deve funzionare come
   questa schermata con i pulsanti cosi, quelli ai lati per incolonnare e
   mandare avanti, identico".

   COM'ERA. Una pastiglia in alto al centro (blocco 12601) con dentro tutto:
   indietro veloce, play, avanti veloce, la velocita' e il numero della foto.
   Le frecce grandi ai due lati. La barra dei tasti in fondo.

   COM'E' ADESSO, come nella schermata:
     - il numero della foto in alto a SINISTRA, piccolo e grigio;
     - "X Chiudi" in alto a destra, con la parola scritta;
     - sul bordo SINISTRO tre tasti tondi impilati: salto di dieci, un
       passo, e l'orologio (la velocita' dell'Auto);
     - sul bordo DESTRO due tasti: una foto sola / due affiancate;
     - in fondo al centro: Precedente, Auto, Prossimo.

   IL VISORE DIVENTA UNA COLONNA (display:flex, dall'alto in basso):
   la riga in alto, il palco che si prende tutto lo spazio che avanza, la
   barra dei tasti di sempre e la fila Precedente/Auto/Prossimo. Prima era
   una griglia con la foto centrata e tutto il resto appiccicato sopra con
   dei numeri fissi; con due righe in fondo quei numeri sarebbero diventati
   tre da tenere d'accordo a mano. Cosi' invece nessuno si sovrappone a
   nessuno, a qualunque altezza di schermo.

   LE DUE COLONNINE DI TASTI GALLEGGIANO sopra il palco (position:absolute):
   sul computer il palco si tiene 68 punti di margine ai due lati e le foto
   non ci finiscono mai sotto; sul telefono il margine sparisce -- 108 punti
   tolti a uno schermo da 390 sarebbero un francobollo -- e i tasti, che sono
   tondi e semitrasparenti, restano sopra il nero ai lati della foto.

   MISURATO SUL BANCO (foto inventate, verticali e orizzontali mescolate) a
   1440x900, 1024x768, 820x1180, 390x844 e 360x640.
   ========================================================================== */
.gal-schermo.gal-visore{display:flex;flex-direction:column;place-items:stretch;
  padding:0}

/* ---- la riga in alto: il numero a sinistra, Chiudi a destra ---- */
.gal-visore .gal-visore-testa{flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:12px 14px 4px;z-index:3}
.gal-visore .gal-visore-conta{font-size:12.5px;letter-spacing:.02em;
  color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;
  padding-left:6px;white-space:nowrap}
/* Chiudi non e' piu' una crocetta sola: e' una pastiglia con la parola,
   come nella schermata. Quella di prima era un tondo di 44 punti; questa
   e' alta uguale, e resta il bersaglio grosso che ci vuole su un dito. */
.gal-visore .gal-chiudi{position:static;width:auto;height:auto;
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border-radius:999px;background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);font:inherit;font-size:13px;line-height:1}
.gal-visore .gal-chiudi:hover{background:rgba(255,255,255,.2);color:#fff}
.gal-visore .gal-chiudi:focus-visible{outline:2px solid #fff;outline-offset:2px}
@supports (backdrop-filter:blur(8px)){
  .gal-visore .gal-chiudi{backdrop-filter:blur(8px)}}

/* ---- le due colonnine di tasti tondi, ai bordi ---- */
.gal-visore .gal-visore-lato{position:absolute;top:50%;
  transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;
  gap:10px}
.gal-visore .gal-visore-lato-sx{left:12px}
.gal-visore .gal-visore-lato-dx{right:12px}
.gal-visore .gal-visore-tondo{width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.75);
  font:inherit;font-size:20px;line-height:1;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:var(--tr)}
@supports (backdrop-filter:blur(8px)){
  .gal-visore .gal-visore-tondo{backdrop-filter:blur(8px)}}
.gal-visore .gal-visore-tondo:hover{background:rgba(255,255,255,.24);color:#fff}
.gal-visore .gal-visore-tondo:focus-visible{outline:2px solid #fff;
  outline-offset:2px}
.gal-visore .gal-visore-tondo:disabled{opacity:.28;cursor:default}
.gal-visore .gal-visore-tondo:disabled:hover{background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.75)}
/* Il tasto acceso (una foto / due foto) si vede da lontano: pieno bianco.
   Senza, l'unico modo di sapere in che vista si e' sarebbe contare le
   foto sullo schermo. */
.gal-visore .gal-visore-tondo.gal-visore-acceso{background:#fff;color:#111}
.gal-visore .gal-visore-tondo.gal-visore-acceso:hover{background:#fff;color:#111}
/* L'orologio: sotto il quadrante, piccolissimo, quanto va veloce l'Auto.
   Un orologio da solo non direbbe MAI a che velocita' sta andando, e
   quel numero c'era nella pastiglia di prima: toglierlo sarebbe stato
   perdere qualcosa per strada. */
.gal-visore .gal-visore-tempo-x{font-size:9px;font-weight:700;line-height:1;
  letter-spacing:.02em}
.gal-visore .gal-visore-tempo[data-veloce="2"]{background:rgba(255,255,255,.9);
  color:#111}
.gal-visore .gal-visore-tempo[data-veloce="2"]:hover{background:#fff;color:#111}

/* ---- il palco: una foto, oppure due affiancate ---- */
/* blocco 66401: touch-action:pan-y dice SUBITO al telefono che qui il
   dito in orizzontale lo gestisce la pagina, non lui -- senza, molti
   browser aspettano una frazione di secondo prima di consegnare il
   tocco, per capire se e' uno scorrimento della pagina. E' un ritardo
   che non si vede nel codice, si sente solo col dito vero.
   will-change:transform prepara il telefono a spostare questo blocco
   spesso: senza, il primo spostamento puo' saltare un fotogramma. */
.gal-visore .gal-visore-palco{position:relative;flex:1 1 auto;min-height:0;
  min-width:0;display:flex;align-items:center;justify-content:center;gap:0;
  padding:6px 68px 8px;touch-action:pan-y;will-change:transform}
.gal-visore .gal-visore-cella{flex:0 1 auto;min-width:0;min-height:0;
  max-width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;position:relative}

/* ---- blocco 70900: le due frecce avanti/indietro, ai lati della foto ----
   Prima Precedente e Prossimo stavano in basso, dentro la pastiglia con
   Auto: Giovanni le voleva ai lati, come nei visori foto normali.
   Sono dentro il palco (che qui sopra ha avuto position:relative) e non
   nello schermo intero come le due colonnine: cosi' "meta' altezza" si
   conta sulla foto, non su tutto lo schermo -- con la riga in cima, la
   barra e la riga dei tasti in piu' le due misure non coincidono, e
   provato sul banco la freccia finiva piu' in alto della foto.
   left/right le mettono un poco piu' dentro delle due colonnine gia' ai
   bordi (salto veloce a sinistra, incolonna a destra): alla stessa
   distanza dal bordo si sarebbero sovrapposte, provato sul banco 70900. */
.gal-visore .gal-visore-freccia{position:absolute;top:50%;
  transform:translateY(-50%);z-index:2}
.gal-visore .gal-visore-freccia-sx{left:64px}
.gal-visore .gal-visore-freccia-dx{right:64px}
/* LE DUE META' SONO LARGHE UGUALI e la foto dentro e' "contenuta": una
   verticale e una orizzontale appaiate non si deformano e non si tagliano.
   Il filo di nero fra le due (14 punti) e' quello della schermata. */
.gal-visore .gal-palco-due{gap:14px;align-items:stretch}
.gal-visore .gal-palco-due .gal-visore-cella{flex:1 1 50%;width:50%}
/* LE DUE FOTO SI GUARDANO IN FACCIA: quella di sinistra sta appoggiata al
   filo di nero, quella di destra pure. Lasciandole in mezzo alla propria
   meta', una verticale e una orizzontale finiscono lontane l'una
   dall'altra -- misurato: 77 punti di nero fra le due invece di 14 -- e
   non sembrano piu' una coppia. */
.gal-visore .gal-palco-due .gal-visore-cella-sx{justify-content:flex-end}
.gal-visore .gal-palco-due .gal-visore-cella-dx{justify-content:flex-start}

.gal-visore .gal-visore-cella img{max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;display:block;border-radius:4px}

/* Il cuore di ognuna delle due foto. Solo in vista doppia: con una foto
   sola c'e' il cuore grande in fondo, che qui non saprebbe piu' a quale
   delle due si riferisce.
   STA IN FONDO AL CENTRO DELLA SUA META', non in un angolo. Provato in
   un angolo: con una verticale e una orizzontale appaiate i due cuori
   finivano vicini in mezzo allo schermo e non si capiva piu' quale
   fosse di quale. Al centro della propria meta' non c'e' dubbio. Su una
   foto verticale il cuore le finisce sopra (come tutti i comandi di un
   visore); su una orizzontale resta nel nero sotto di lei. */
.gal-visore .gal-visore-cuore{position:absolute;left:50%;bottom:10px;
  transform:translateX(-50%);
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(20,20,26,.62);color:#fff;font-size:19px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--tr)}
@supports (backdrop-filter:blur(8px)){
  .gal-visore .gal-visore-cuore{backdrop-filter:blur(8px)}}
.gal-visore .gal-visore-cuore:hover{background:rgba(20,20,26,.85)}
.gal-visore .gal-visore-cuore:focus-visible{outline:2px solid #fff;
  outline-offset:2px}
.gal-visore .gal-visore-cuore-pieno{background:var(--ok);color:var(--on-ok)}
.gal-visore .gal-visore-cuore-pieno:hover{background:var(--ok);color:var(--on-ok)}

/* ---- la barra di sempre (cuore, scarico, condivisione) ----
   Adesso sta NELLA COLONNA e non piu' appiccicata in fondo con un numero
   fisso: sotto di lei c'e' la fila Precedente/Auto/Prossimo, e due cose
   appiccicate allo stesso bordo si sarebbero coperte a vicenda.
   Le regole del blocco 13109 (larga quanto lo schermo, i tasti che vanno
   a capo interi, il vuoto che non ruba il clic) restano tutte. */
.gal-visore .gal-schermo-barra{position:static;flex:0 0 auto;
  bottom:auto;margin:0 0 10px}

/* ---- i tre tasti in fondo: Precedente, Auto, Prossimo ---- */
.gal-visore .gal-visore-nav{flex:0 0 auto;display:flex;justify-content:center;
  align-items:center;flex-wrap:wrap;row-gap:8px;padding:0 12px 16px;
  /* il vuoto ai lati della pastiglia non deve rubare il clic: toccare li'
     chiude il visore, come dappertutto (stessa ragione del blocco 13109) */
  pointer-events:none}
/* I tre tasti stanno DENTRO UNA PASTIGLIA SOLA, come nella schermata:
   non tre pastiglie separate. Se non ci stanno in fila -- schermo
   strettissimo, parole lunghe in un'altra lingua -- vanno a capo dentro
   la pastiglia invece di uscirne. */
.gal-visore .gal-visore-pastiglia{pointer-events:auto;display:flex;
  align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;
  max-width:100%;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.10)}
@supports (backdrop-filter:blur(8px)){
  .gal-visore .gal-visore-pastiglia{backdrop-filter:blur(8px);
    background:rgba(255,255,255,.08)}}
.gal-visore .gal-visore-tasto{pointer-events:auto;border:0;border-radius:999px;
  background:transparent;color:rgba(255,255,255,.8);
  font:inherit;font-size:13.5px;font-weight:600;line-height:1;
  padding:10px 17px;margin:0;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;white-space:nowrap;transition:var(--tr)}
.gal-visore .gal-visore-tasto:hover{background:rgba(255,255,255,.24);color:#fff}
.gal-visore .gal-visore-tasto:focus-visible{outline:2px solid #fff;
  outline-offset:2px}
.gal-visore .gal-visore-tasto:disabled{opacity:.3;cursor:default}
.gal-visore .gal-visore-tasto:disabled:hover{background:transparent;
  color:rgba(255,255,255,.8)}
/* L'Auto acceso si vede da lontano, come il play di prima. */
.gal-visore .gal-visore-auto[aria-pressed="true"]{background:#fff;color:#111}
.gal-visore .gal-visore-auto[aria-pressed="true"]:hover{background:#fff;color:#111}

/* ---- schermi stretti (telefoni) ----
   I due tasti dell'incolonnare qui non ci sono proprio: li spegne il
   programma, non il foglio di stile, cosi' non restano nemmeno
   raggiungibili col tasto di tabulazione.
   Il margine ai lati del palco sparisce e la colonnina di sinistra
   galleggia sopra il nero accanto alla foto: 108 punti di margine tolti a
   uno schermo da 390 lascerebbero un francobollo. */
@media (max-width:699.98px){
  .gal-visore .gal-visore-palco{padding:4px 6px 6px}
  .gal-visore .gal-visore-lato-sx{left:6px}
  /* blocco 70900: qui sotto i 700 punti la colonnina di destra
     (incolonnare) non c'e' proprio -- la spegne il programma, vedi il
     commento sopra -- quindi la freccia destra puo' stare vicina al
     bordo. A sinistra invece la colonnina del salto veloce resta
     sempre (occupa 6-44 punti): la freccia sinistra sta piu' dentro,
     provato sul banco 70900 che altrimenti si toccavano. */
  .gal-visore .gal-visore-freccia-sx{left:52px}
  .gal-visore .gal-visore-freccia-dx{right:10px}
  /* I tasti tondi qui galleggiano SOPRA la foto, non sul nero a lato:
     un cerchio bianco al 10% sopra una foto chiara non si vede. Sotto i
     700 punti diventano scuri. */
  .gal-visore .gal-visore-tondo{width:38px;height:38px;font-size:17px;
    background:rgba(10,10,12,.58);color:#fff}
  .gal-visore .gal-visore-tondo:disabled:hover{background:rgba(10,10,12,.58);
    color:#fff}
  .gal-visore .gal-visore-lato{gap:8px}
  .gal-visore .gal-visore-testa{padding:9px 10px 2px}
  .gal-visore .gal-chiudi{padding:9px 13px;font-size:12.5px}
  .gal-visore .gal-visore-tasto{font-size:12.5px;padding:10px 13px;margin:0 3px}
  .gal-visore .gal-visore-nav{padding:0 8px 12px}
  .gal-visore .gal-schermo-barra{margin-bottom:8px}
}
/* Schermi bassi (un telefono girato): la fila in fondo si stringe ancora,
   se no fra le due righe di tasti alla foto non resta niente. */
@media (max-height:460px){
  .gal-visore .gal-visore-tasto{padding:8px 12px;font-size:12px}
  .gal-visore .gal-visore-nav{padding-bottom:8px}
  .gal-visore .gal-visore-testa{padding:6px 10px 0}
  .gal-visore .gal-schermo-barra{margin-bottom:6px}
}
/* === fine blocco 14701 === */


/* ================================================
   blocco 15701 - LA TESSERA DEL FILMATO SI LEGGE TUTTA
   Aggiunto in fondo, come vuole questo file.

   1. LA RETE SOTTO AI TASTI
   I tasti della tessera sono elementi di un flex e .btn ha
   white-space:nowrap: una etichetta piu larga della riga non si
   stringe e non va a capo, esce dalla tessera e overflow:hidden
   della cella la taglia a meta. Era il difetto che si vedeva.
   Le etichette adesso sono corte (misurate: il piu largo e
   "Carico... 100%" a 106 px su una riga da 120), ma qui si mette
   la rete: se un domani una etichetta cresce va a capo dentro il
   tasto invece di uscire dalla tessera.
   ================================================ */
.gal-cella-azioni .btn{min-width:0;max-width:100%;
  white-space:normal;word-break:break-word;line-height:1.2;text-align:center}

/* 2. "SENZA COPERTINA" NON PIU DIETRO IL TONDO DEL PLAY
   .gal-pellicola centrava icona e scritta nel quadrato, e il tondo del
   play sta esattamente al centro dello stesso quadrato: misurato, il
   tondo copriva la scritta per 44 x 10,6 px su una riga alta 16, e
   copriva la icona della pellicola per 34 x 27,4 px su 34 -- cioe la
   icona non si vedeva proprio.
   Adesso la scritta va in fondo al quadrato, dove non ce niente, e la
   icona si toglie: era invisibile, e il tondo del play dice gia da solo
   che quello e un filmato. */
.gal-pellicola{justify-content:flex-end;gap:0;padding:0 6px 9px;
  text-align:center;line-height:1.3}
.gal-pellicola svg{display:none}

/* ================================================================
   BLOCCO 18101 - LA BOLLA DELLA CHAT NON COPRE PIU I COMANDI

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro, si aggiunge soltanto.

   IL DIFETTO, MISURATO. Su un telefono da 390 punti la bollicina
   della chat (.assistente-fab) misurava 52 per 52 e stava a 14 punti
   dal bordo destro. Il suo fianco sinistro cadeva 14 punti dentro il
   pulsante verde «Saldato» della scheda lead, per 43 punti di
   altezza: chi toccava li apriva la chat invece di segnare
   l incasso. E nessuna pagina lasciava spazio libero in fondo, quindi
   arrivati alla fine il comando piu in basso finiva sotto la bolla.

   1. LO SPAZIO IN FONDO. Sotto i 768 punti la colonna del contenuto
      si tiene liberi 80 punti in coda. La bolla, dopo il punto 2 qui
      sotto, occupa i 54 punti piu bassi dello schermo: 80 le passa
      sopra con 26 punti di margine. E la stessa strada gia scelta
      dalle gallerie (.gal-passi-nav, blocco piu sopra in questo
      file), quindi non e un modo nuovo di risolvere la stessa cosa.

   2. LA BOLLA PIU PICCOLA E PIU IN ANGOLO. Sotto i 480 punti diventa
      44 per 44 invece di 52 per 52, a 6 punti dal bordo destro e 10
      dal basso. 44 e il minimo perche un comando si prenda col dito:
      sotto quella misura si sbaglia. Rimpicciolendola di 8 punti e
      spostandola di 8, il suo fianco sinistro esce dalla colonna in
      cui stanno i pulsanti larghi della scheda, e «Saldato» torna
      tutto suo. Misurato: 14 punti rubati prima, zero dopo.

   PERCHE NON BASTAVA LO SPAZIO IN FONDO. Provato, e non bastava: lo
   spazio in fondo libera solo la FINE della pagina, mentre «Saldato»
   sta in mezzo e ci passa sotto mentre si scorre. Con il solo spazio
   in fondo i comandi rubati restavano cinque, «Saldato» compreso.
   Servono tutti e due i pezzi.

   QUELLO CHE RESTA. Una bolla tonda ferma in un angolo, con la
   pagina che le scorre sotto, passera sempre sopra a qualcosa.
   Restano coperti per pochi punti alcuni titoli delle pieghe (da 31
   punti a 15) e le linguette del calendario. Toglierlo del tutto
   vorrebbe dire spostare la chat fuori dalla pagina, ed e una scelta
   di grafica, non una correzione.
   ================================================================ */
@media (max-width:768px){
  .content-area{padding-bottom:80px}
}
@media (max-width:480px){
  .assistente-fab{width:44px;height:44px;right:6px;bottom:10px}
  .assistente-fab svg{width:21px;height:21px}
}
/* ==== fine blocco 18101 ==== */

/* ================================================================
   BLOCCO 18109 - LA ZONA CHE IL DITO PRENDE, SUL TASTO «TOGLI»

   In coda al foglio, come sempre: non si tocca il blocco di nessun
   altro lavoro, si aggiunge soltanto.

   IL DIFETTO, MISURATO. La scrittina «togli» del passo 2 della
   galleria (scollega il cliente) era il bersaglio piu piccolo della
   pagina: 25,4 per 18,8 punti disegnati, e 26 per 19 di zona che
   risponde davvero al dito. Sotto i 44 punti un comando su un
   telefono si sbaglia -- e questo comando DISFA qualcosa.

   COME. La stessa identica strada del blocco 4839 (il pulsantino
   «i Info»): il comando resta disegnato di quella misura, e quello
   che si allarga e solo la zona che risponde al tocco. E invisibile e
   non occupa spazio -- sta SOPRA la pagina, non dentro la riga --
   quindi la riga del cliente collegato non si alza di un punto.
   Misurato: riga alta 37,5 e ferma a 360,9 prima e dopo.

   Provato a 390 e a 360 punti: zona 44 per 44 tutte e due le volte.
   Sopra i 760 punti non cambia niente: col mouse 26 punti bastano, e
   la soglia dei 760 e la stessa gia usata dal blocco dei bersagli
   tattili piu sopra in questo file.

   PERCHE NON DA FASTIDIO A NIENTE. Nella riga del cliente collegato
   (.gal-sc-scelto) gli altri due pezzi sono scritte, non comandi:
   la zona invisibile puo passarci sopra senza rubare niente a nessuno.
   ================================================================ */
@media (max-width:760px){
  .gal-sc-togli{position:relative}
  .gal-sc-togli::after{
    content:""; position:absolute;
    left:50%; top:50%; transform:translate(-50%,-50%);
    width:100%; min-width:44px; height:44px;
  }
}
/* ==== fine blocco 18109 ==== */

/* ====================================================================
   BLOCCO 18900 — FOTO OSPITI LIVE (il passo 5 della galleria)
   --------------------------------------------------------------------
   In coda al file, come tutti gli altri lavori: non si tocca il blocco
   di nessun altro. Usa le variabili gia' esistenti (--accent, --ink,
   --surface...), quindi segue da solo il tema chiaro e quello scuro e i
   quattro temi delle gallerie, senza una riga in piu'.
   ==================================================================== */

/* ---- il numero sul pallino del quinto passo ----
   Sta appiccicato in alto a destra del pallino, non accanto: accanto
   avrebbe allargato la voce e la fila dei passi, che su un telefono da
   390 punti e' gia' al limite (vedi SEGNO_4651 in gallerie.html). */
.gal-passo{position:relative}
.gal-passo-avviso{
  position:absolute; top:0; left:calc(50% + 7px);
  min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; display:grid; place-items:center;
  background:var(--bad); color:var(--on-bad);
  font-size:10.5px; font-weight:700; line-height:1;
  border:2px solid var(--surface);
}

/* ---- il riquadro "manca la tabella" ---- */
.gal-live-manca{border-left:4px solid var(--warn)}

/* ---- l'invito, quando la raccolta non c'e' ancora ---- */
.gal-live-invito .gal-nota-stato{max-width:62ch}

/* ---- com'e' messa adesso ---- */
.gal-live-riepilogo{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:4px 0 16px;
}
.gal-live-stato{display:flex; align-items:center; gap:8px; font-size:15px}
.gal-live-pallino{
  width:11px; height:11px; border-radius:999px; flex-shrink:0;
  background:var(--ink-3); box-shadow:0 0 0 3px var(--sunken);
}
/* Il verde non e' l'UNICO segnale: accanto c'e' sempre la parola
   ("Aperta agli ospiti" / "Chiusa"). Un pallino colorato da solo non lo
   legge chi non distingue i colori. */
.gal-live-pallino-acceso{background:#2f9e5a; box-shadow:0 0 0 3px rgba(47,158,90,.18)}
.gal-live-perche{color:var(--ink-3); font-size:13.5px}
.gal-live-interruttore{margin-left:auto}

.gal-live-numeri{
  display:grid; gap:10px; margin:14px 0 10px;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
}
.gal-live-numero{
  background:var(--sunken); border-radius:var(--r-m); padding:11px 13px;
  display:flex; flex-direction:column; gap:2px;
}
.gal-live-numero-grande{font-size:21px; font-weight:700; color:var(--ink-strong);
  line-height:1.15}
.gal-live-numero-nome{font-size:12px; color:var(--ink-3)}

.gal-live-barra{height:7px; border-radius:999px; background:var(--track);
  overflow:hidden; margin-top:6px}
.gal-live-barra-dentro{height:100%; background:var(--accent); transition:width .25s ease}

/* ===== blocco 20105: LO SPAZIO SI DEVE VEDERE =========================
   TUTTI I COLORI QUI SOTTO SONO VARIABILI CHE ESISTONO GIA' nei tre
   temi (chiaro, scuro, scuro forzato) -- controllate una per una. Una
   variabile inventata non da' errore: fa sparire in silenzio un fondo o
   un bordo, e nel codice sembra tutto a posto. E' gia' successo.
   E il colore non e' mai l'unico segnale: accanto c'e' sempre la
   percentuale scritta e, quando e' pieno, una frase intera. */
.gal-live-spazio-riga{
  display:flex; align-items:baseline; gap:7px; margin-top:12px;
}
.gal-live-spazio-percento{
  font-size:17px; font-weight:700; color:var(--ink-strong); line-height:1;
}
.gal-live-spazio-percento.gal-spazio-quasi{color:var(--warn)}
.gal-live-spazio-percento.gal-spazio-pieno{color:var(--bad)}
.gal-live-spazio-nota{font-size:12.5px; color:var(--ink-3)}
.gal-live-barra-dentro.gal-spazio-quasi{background:var(--warn-solid)}
.gal-live-barra-dentro.gal-spazio-pieno{background:var(--bad)}
.gal-live-spazio-pieno{
  margin:10px 0 0; padding:11px 13px; border-radius:var(--r-m);
  background:var(--bad-bg); border-left:4px solid var(--bad);
  font-size:13.5px; line-height:1.5; color:var(--ink-strong); max-width:70ch;
}

/* La percentuale sul pallino del passo 5, per vederla da ogni passo.
   Sta SOTTO il numero delle foto da guardare (che resta in alto), cosi'
   quando ci sono tutte e due non si coprono. */
.gal-passo-spazio{
  position:absolute; bottom:-2px; left:calc(50% + 5px);
  padding:0 4px; height:15px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-3);
  font-size:9.5px; font-weight:700; line-height:1;
  border:2px solid var(--surface); white-space:nowrap;
}
.gal-passo-spazio.gal-spazio-quasi{background:var(--warn-solid); color:var(--on-warn)}
.gal-passo-spazio.gal-spazio-pieno{background:var(--bad); color:var(--on-bad)}

/* ===== blocco 20101: LE CONDIZIONI DA ACCETTARE ======================
   Riquadro dentro la pagina, non finestra a comparsa: e' una regola di
   Giovanni, e qui vale doppio -- un testo che si chiude con un clic e
   non lascia traccia non e' un consenso. */
.gal-live-condizioni{
  margin:6px 0 16px; padding:16px 18px;
  background:var(--sunken); border-radius:var(--r-m);
  border-left:4px solid var(--warn);
}
.gal-live-condizioni-titolo{
  margin:0 0 12px; font-size:16px; color:var(--ink-strong);
}
.gal-live-condizione{margin-bottom:13px; max-width:72ch}
.gal-live-condizione strong{display:block; font-size:14px; color:var(--ink-strong);
  margin-bottom:3px}
.gal-live-condizione p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-3)}
.gal-live-condizioni-chiusa{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.55; color:var(--ink-strong); max-width:72ch;
}
.gal-live-condizioni-legale{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
}
.gal-live-condizione-legale{
  padding-left:11px; border-left:3px solid var(--warn); margin-top:11px;
}
.gal-live-condizioni-tasti{
  display:flex; gap:9px; flex-wrap:wrap; margin-top:16px;
}
.gal-live-accettazione{margin-top:-6px; margin-bottom:14px}

/* Sul telefono i due tasti vanno larghi: sono la scelta piu' importante
   di questa pagina e non devono finire mezzi fuori. */
@media (max-width:560px){
  .gal-live-condizioni{padding:13px 14px}
  .gal-live-condizioni-tasti{flex-direction:column}
  .gal-live-condizioni-tasti .btn{width:100%}
}

/* ---- il collegamento e il quadratino ---- */
.gal-live-indirizzo{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:12px 0;
}
.gal-live-url{
  flex:1; min-width:200px;
  background:var(--sunken); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px;
  font-size:13.5px; word-break:break-all; color:var(--ink-strong);
}
.gal-live-qr{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px; background:var(--sunken); border-radius:var(--r-m);
}
/* Il fondo bianco fisso NON e' una svista: un quadratino disegnato in
   chiaro su fondo scuro non lo legge nessuna fotocamera. Deve restare
   nero su bianco anche quando tutto il resto e' scuro. */
.gal-live-qr-immagine{
  width:148px; height:148px; flex-shrink:0;
  background:#fff; border-radius:10px; padding:6px;
}
.gal-live-qr-tasti{display:flex; flex-direction:column; gap:8px}

.gal-live-campo{margin-top:16px}
.gal-live-campo-riga{display:flex; gap:9px; align-items:center}
.gal-live-due-campi{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.gal-live-cursore{width:100%; accent-color:var(--accent)}

/* ---- la moderazione ---- */
.gal-live-filtri{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin:12px 0;
}
.gal-live-pastiglia{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer;
  min-height:36px;
}
.gal-live-pastiglia-attiva{
  border-color:var(--accent); background:var(--accent-soft);
  color:var(--accent-ink); font-weight:600;
}
.gal-live-conta{
  min-width:20px; padding:0 5px; border-radius:999px;
  background:var(--sunken); color:var(--ink-3);
  font-size:11.5px; font-weight:700; text-align:center;
}
.gal-live-pastiglia-attiva .gal-live-conta{background:var(--surface); color:var(--accent-ink)}
.gal-live-rileggi{margin-left:auto}

.gal-live-azioni{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding:10px 13px; margin:10px 0;
  background:var(--accent-soft); border-radius:var(--r-m);
}
.gal-live-azioni-quante{font-weight:600; color:var(--accent-ink); font-size:13.5px}
.gal-live-scelta-tutte{margin:8px 0}
.gal-live-tutte{
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--accent-ink); font:inherit; font-size:13.5px;
  text-decoration:underline;
}

.gal-live-griglia{
  display:grid; gap:9px; margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
}
.gal-live-quadro{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-radius:10px; border:2px solid var(--line);
  background:var(--sunken); padding:0; cursor:pointer;
  display:grid; place-items:center;
}
.gal-live-quadro img{width:100%; height:100%; object-fit:cover; display:block}
.gal-live-quadro-scelto{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
/* La riga colorata in basso dice lo stato SENZA affidarsi al solo
   colore: sopra c'e' comunque la pastiglia del filtro che si sta
   guardando, e il nome di chi ha mandato. */
.gal-live-quadro-in_attesa::after,
.gal-live-quadro-approvato::after,
.gal-live-quadro-rifiutato::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
}
.gal-live-quadro-in_attesa::after{background:#c98a1e}
.gal-live-quadro-approvato::after{background:#2f9e5a}
.gal-live-quadro-rifiutato::after{background:var(--ink-3)}
.gal-live-quadro-vuoto{font-size:11.5px; color:var(--ink-3); padding:6px; text-align:center}
/* blocco 75509: la targhetta del filmato, quando diventa anche il tasto
   per guardarlo. Sottolineata come un link, cosi' si capisce che sotto
   c'e' un gesto e non solo un'etichetta. */
.gal-live-quadro-guarda{
  color:var(--accent, #a6763c); text-decoration:underline;
  font-weight:600; cursor:pointer;
}
/* --- blocco 75531 --- e quando il filmato la copertina ce l'ha, la
   targhetta ci va SOPRA invece che al posto suo. Il fondo scuro e
   l'ombra reggono anche su un fotogramma tutto bianco, che e' il
   caso in cui una scritta color accento sparirebbe. */
.gal-live-quadro-sopra{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:6px; background:rgba(0,0,0,.34); color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
/* IL NOME SOPRA LA FOTO: il fondo non e' un colore, e' una fotografia
   qualunque -- puo' essere l'abito bianco della sposa. Il contrasto qui
   non si puo' misurare una volta e stare tranquilli, quindi si mette
   una sfumatura piu' decisa E un'ombra sotto le lettere: l'ombra e'
   quella che regge anche sul bianco pieno. */
.gal-live-quadro-chi{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 6px 5px; font-size:11px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 55%,transparent 100%);
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gal-live-quadro-segno{
  position:absolute; top:6px; right:6px;
  width:21px; height:21px; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:13px; font-weight:700;
}

/* ---- il tasto che butta via ---- */
.gal-live-butta{
  margin-top:18px; padding-top:14px;
  border-top:1px dashed var(--line);
}
.gal-live-butta-tasto{
  background:transparent; border:1.5px solid var(--bad);
  color:var(--bad-ink);
}
.gal-live-butta-conferma{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.gal-live-butta-domanda{font-weight:600; color:var(--bad-ink); font-size:13.5px}
.gal-live-butta-si{background:var(--bad); color:var(--on-bad); border:0}

.gal-live-togli-pin{
  border:0; background:none; padding:0 0 0 6px; cursor:pointer;
  color:var(--accent-ink); font:inherit; font-size:inherit;
  text-decoration:underline;
}
.gal-live-avanzate{margin-top:18px}
/* --- blocco 39503: il tasto dei limiti e' un tasto ---
   La forma la danno .btn .btn-outline .btn-sm, che sono quelle di
   casa: qui si aggiusta solo la misura del testo, perche' la frase
   e' lunga e su un telefono da 390 punti ce ne sono 328 di posto.
   Misurato: a 12,5 punti la scritta ne occupa 293, piu' 24 di
   imbottitura e 2 di bordo fanno 319 -- ci sta in una riga sola.
   A 13,5 ne farebbe 342 e uscirebbe. Sotto i 390 (iPhone piccoli)
   va a capo dentro il pulsante e non sborda: provato a 375, 360
   e 320. I 44 punti di altezza sono il minimo per un dito. */
.gal-live-tasto-limiti{font-size:13.5px}
@media (max-width:700px){
  .gal-live-tasto-limiti{display:flex;width:100%;min-height:44px;
    font-size:12.5px;padding:10px 12px;white-space:normal;
    text-align:center;line-height:1.3}
}
.gal-live-apri-avanzate{
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--accent-ink); font:inherit; font-size:13.5px;
  text-decoration:underline;
}

@media (max-width:700px){
  /* CINQUE PASSI IN UNA RIGA DA 336 PUNTI. Il minimo era 84, che per
     cinque fa 420: la fila usciva dallo schermo e il quinto passo --
     cioe' quello nuovo — restava fuori dalla vista, che e' il modo
     migliore per non farlo trovare a nessuno. A 66 punti ci stanno
     tutti e cinque (330), e l'etichetta va a capo su due righe come
     faceva gia' prima con "Stile e impostazioni". */
  .gal-passo{min-width:66px}
  .gal-passo-etichetta{font-size:10.5px}
  .gal-live-qr{gap:12px}
  .gal-live-qr-immagine{width:120px; height:120px}
  .gal-live-interruttore{margin-left:0}
  .gal-live-rileggi{margin-left:0}
}


/* == SEGNO_19501 == */
/* ================================================================
   19501 — LA CARTELLA DEGLI OSPITI E L'INTERRUTTORE IN EVIDENZA
   In coda al file, come sempre.
   ================================================================ */

/* ---- LA CARTELLA DEGLI OSPITI, dentro la galleria del cliente ----
   Una griglia sua, e non le tessere delle foto di Giovanni: queste
   fotografie non hanno il cuore, non hanno la freccia e non entrano nel
   visore che conta "12 di 300". Il perche' sta scritto nel modello di
   pagina, accanto al blocco. */
.gal-ospiti { margin-top: 6px }

.gal-ospiti-nota {
  max-width: 62ch;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2)
}

.gal-ospiti-muro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--gal-respiro, 24px)
}

@media (max-width:640px) {
  .gal-ospiti-muro { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px }
}

.gal-ospiti-tessera {
  margin: 0;
  position: relative;
  border-radius: var(--gal-raggio, 14px);
  overflow: hidden;
  background: var(--sunken);
  aspect-ratio: 3/4
}

.gal-ospiti-tessera img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block
}

/* --- blocco 75525: IL CARTELLINO "FILMATO" ---------------------------
   Un video di un invitato non ha copertina (online non c'e' ffmpeg che
   gliela ricavi): al posto della foto, la scritta sola, centrata, sullo
   stesso sfondo --sunken della tessera vuota. Il tasto e' disabilitato
   apposta (vedi il template): questo stile serve solo a non farlo
   sembrare un errore -- e' cosi' che deve essere. */
.gal-ospiti-filmato {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #8a8a8a);
}
.gal-ospiti-play {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.42); color: #fff;
}
.gal-ospiti-apri-video { cursor: pointer }
.gal-ospiti-apri-video:hover .gal-ospiti-play { background: rgba(0,0,0,.62) }

/* --- blocco 75527: IL LETTORE DEL FILMATO ---------------------------
   Sta sopra tutto (come il visore delle foto) e si chiude cliccando il
   fondo scuro. Il lettore non supera mai lo schermo: su un telefono in
   verticale un filmato orizzontale ci sta comunque, con le bande. */
.gal-filmato-visore {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); padding: 16px;
}
.gal-filmato-lettore {
  max-width: min(100%, 1100px); max-height: 86vh;
  width: auto; height: auto; border-radius: 10px; background: #000;
}
.gal-filmato-chiudi {
  position: absolute; top: 12px; right: 14px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.gal-filmato-chiudi:hover { background: rgba(255,255,255,.26) }

/* Chi l'ha mandata, scritto sopra la foto in basso. NON e' un dato che
   prova niente -- e' quello che l'invitato ha scritto sul retro della
   fotografia -- e per questo sta in piccolo e non in grande. */
/* --- blocco 62501 --- MARCA_62501_LO_STILE_DEL_SEGNO ---------------
   LA TESSERA DELLA PROPRIA FOTO.
   Il bordo e la scritta si vedono su tutte e due le grafiche della
   galleria -- sfondo chiaro e sfondo scuro -- perche' il colore lo
   prende da --accent, che e' quello che il fotografo ha scelto per
   quella galleria, e la scritta e' bianca su fondo scuro come il nome
   dell'invitato qui sotto. Non e' il data-theme del CRM e non e' il
   chiaro/scuro del telefono: quelli qui non contano niente. */
.gal-ospiti-tessera.gal-ospiti-mia {
  outline: 2px solid var(--accent, #c9a227);
  outline-offset: -2px
}

/* --- blocco 75547: LA FRECCIA PER PORTARSI VIA UNA FOTO DEGLI INVITATI.
   Sta in alto a destra, dalla parte opposta al cartellino "la tua foto"
   che sta in alto a sinistra: non si sovrappongono mai, nemmeno su una
   tessera da 112 punti. Il tondo scuro serve a farla vedere anche sopra
   una foto chiara. */
.gal-ospiti-scarica {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  text-decoration: none;
}
.gal-ospiti-scarica:hover { background: rgba(0, 0, 0, .78) }
@media (max-width: 640px) {
  /* Sul telefono il dito ha bisogno di piu' bersaglio della vista. */
  .gal-ospiti-scarica { width: 34px; height: 34px }
}

/* Il pacchetto delle foto degli invitati, sotto la griglia. */
.gal-ospiti-pacchetto {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 14px; text-align: center;
}
.gal-ospiti-pacchetto-nota { font-size: 12px; opacity: .7 }

.gal-ospiti-tua {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(0, 0, 0, .66);
  pointer-events: none
}

.gal-ospiti-chi {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 10px 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}

/* ---- IL LIBRO DEGLI AUGURI ---- */
.gal-libro { margin-top: 48px; max-width: 62ch }
/* SEGNO_33703_guestbook: dentro la scheda sua il libro parte in cima,
   senza lo stacco che gli serviva quando stava sotto le fotografie. */
.gal-guestbook .gal-libro { margin-top: 0 }

.gal-libro-titolo {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-strong)
}

.gal-libro-voce {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--gal-raggio, 14px) var(--gal-raggio, 14px) 0
}

.gal-libro-voce p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink) }

/* ---- SEGNO_33701_auguri: IL LIBRO PIEGATO ---- */
.gal-libro-conto {
  display: inline-block; margin-left: 8px;
  padding: 1px 9px; border-radius: 999px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 13px; font-weight: 600; vertical-align: middle
}

.gal-libro-nota {
  margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3)
}

/* I NOMI IN FILA, che vanno a capo come le parole di una frase:
   ottanta nomi entrano in una decina di righe invece che in ottanta. */
.gal-libro-elenco {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px
}
.gal-libro-elenco > li { margin: 0 }

.gal-libro-chi {
  display: block; max-width: 100%;
  padding: 7px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 14px; line-height: 1.3;
  color: var(--ink-strong); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease
}
.gal-libro-chi:hover { border-color: var(--accent); color: var(--accent) }
.gal-libro-chi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.gal-libro-chi-aperto {
  border-color: var(--accent); background: var(--accent);
  color: var(--on-accent); font-weight: 600
}

/* SEGNO_36700_guestbook: LA VOCE APERTA PRENDE UNA RIGA TUTTA SUA.
   E' quello che permette al messaggio di aprirsi sotto il nome toccato
   invece che in fondo alla fila: il riquadro sta largo quanto la fila, e
   nessun nome gli finisce di fianco. I nomi che stanno sopra non si
   muovono, quindi la pagina resta dov'e'.
   La pastiglia del nome resta della sua misura (width:max-content): senza
   questa riga si allargherebbe a tutta la fila, perche' .gal-libro-chi e'
   un blocco. */
.gal-libro-voce-aperta { flex-basis: 100% }
.gal-libro-voce-aperta .gal-libro-chi { width: max-content; max-width: 100% }
.gal-libro-elenco .gal-libro-aperto { margin-top: 10px }

/* SEGNO_36700_guestbook: IL NOME APERTO RESTA LEGGIBILE ANCHE SOTTO IL DITO.
   La pastiglia aperta e' marrone col nome in bianco; ma la regola del
   passaggio del mouse (.gal-libro-chi:hover) scrive il nome nello stesso
   marrone dello sfondo -- e vince, perche' pesa di piu'. Su un telefono
   il tocco lascia il "mouse" appiccicato li' sopra: si toccava il nome e
   il nome spariva, pastiglia marrone vuota. Provato a 390. */
.gal-libro-chi-aperto:hover { color: var(--on-accent) }

/* IL RIQUADRO DELL'AUGURIO APERTO: sempre nello stesso posto, sotto
   la fila dei nomi. */
.gal-libro-aperto {
  margin-top: 18px; padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--gal-raggio, 14px) var(--gal-raggio, 14px) 0
}

.gal-libro-testo {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink);
  white-space: pre-line; overflow-wrap: anywhere
}

.gal-libro-firma {
  display: block; margin-top: 9px;
  font-style: normal; font-size: 12px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3)
}

.gal-libro-chiudi {
  margin-top: 12px; padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px; background: none;
  font: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer
}
.gal-libro-chiudi:hover { border-color: var(--accent); color: var(--accent) }
.gal-libro-chiudi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.gal-libro-voce cite {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-3)
}

/* --- inizio blocco 67401: MARCA_67401_AUGURI_BALLOON ---
   IL LIBRO TORNA APERTO (richiesta di Giovanni, 9 settembre 2026): ogni
   augurio si legge subito, nome in grassetto sopra e il testo sotto,
   senza toccare niente. Il problema delle pagine lunghissime (81
   auguri, 12.001 punti, vedi SEGNO_33701_auguri qui sopra) si risolve
   dando alla LISTA un'altezza massima che scorre dentro se stessa: i
   testi restano tutti leggibili, e' la pagina intorno che non cresce.
   Sono classi NUOVE (.gal-libro-lista, .gal-libro-item,
   .gal-libro-nome): non si tocca .gal-libro-elenco/.gal-libro-chi/
   .gal-libro-voce qui sopra, che restano quello che erano (nomi in
   fila) per non litigare con la loro regola display:flex. */
.gal-libro-lista {
  list-style: none; margin: 0; padding: 0
}
/* --- blocco 75539: LA LISTA NON SCORRE PIU' DENTRO SE STESSA -------
   «i commenti da completare» -- Giovanni, 9 settembre 2026: la
   rotellina dentro il riquadro muoveva gli auguri e non muoveva la
   pagina. Due posti che scorrono uno dentro l'altro, e il dito non sa
   quale dei due sta muovendo. Adesso ce n'e' uno solo: la pagina.
   Misurato prima, telefono a 390 punti con 20 auguri: riquadro alto
   506 punti, contenuto alto 3.036.
   E LA PAGINA NON TORNA LUNGHISSIMA, che era il motivo per cui questa
   regola era nata (81 auguri, 12.001 punti, vedi il blocco 67401 qui
   sopra): la lista adesso si mostra otto auguri alla volta, col tasto
   «Carica altri auguri» che c'era gia' scritto (blocco 67800) e che da
   oggi si vede sempre, non piu' solo dentro un iframe. Con 20 auguri
   la pagina passa da 2.896 a 4.699 punti e scorre tutta intera.
   La riga .gal-incorporata .gal-libro-scroll piu' avanti in questo
   foglio adesso non ha piu' niente da spegnere: resta li' e non da'
   fastidio a nessuno.
   --- fine blocco 75539 --- */
.gal-libro-scroll {
  display: block
}
.gal-libro-item {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--gal-raggio, 14px) var(--gal-raggio, 14px) 0
}
.gal-libro-item:last-child { margin-bottom: 0 }
.gal-libro-nome {
  display: block;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-strong)
}
/* --- fine blocco 67401 --- */

/* --- inizio blocco 67403: MARCA_67403_STILE_CUORE ---
   Il cuoricino: piccolo, non ruba spazio al testo, e diventa pieno
   (e non piu' cliccabile) dopo che si e' gia' messo il like. */
.gal-libro-like {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px; background: none;
  font: inherit; font-size: 13px; color: var(--ink-3);
  cursor: pointer; transition: border-color .15s ease, color .15s ease
}
.gal-libro-like span:first-child { font-size: 14px }
.gal-libro-like:hover:not(:disabled) { border-color: var(--accent); color: var(--accent) }
.gal-libro-like:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.gal-libro-like-dato {
  border-color: var(--accent); color: var(--accent); font-weight: 600;
  cursor: default
}
.gal-libro-like:disabled { opacity: 1 }
/* --- fine blocco 67403 --- */

/* ================================================================
   SEGNO_19501_interruttore — L'INTERRUTTORE CHE ACCENDE LA RACCOLTA

   «Live moments raccolta accesa: come pulsante mettilo piu' in
    evidenza» -- Giovanni, 6 settembre 2026.

   PERCHE' ERA TIMIDO. Era un interruttore come tutti gli altri del CRM,
   in fondo alla riga del riepilogo, della stessa misura del testo che
   gli sta accanto. Ma non e' un'impostazione come le altre: e' il gesto
   che fa esistere tutto il resto. Finche' e' spento, il quadratino
   stampato porta a una pagina che dice "non ancora aperta", e il
   fotografo non ha modo di accorgersene se non provando.

   ADESSO E' UN RIQUADRO, con il suo fondo e il suo bordo, e cambia
   colore quando e' acceso. Su schermo stretto va a capo e prende tutta
   la riga: e' la cosa piu' importante di quella scheda, non l'ultima.
   ================================================================ */
.gal-live-interruttore.gal-live-grosso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--sunken);
  transition: var(--tr)
}

.gal-live-interruttore.gal-live-grosso .gal-toggle-testo {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-strong)
}

/* La riga che dice cosa cambia. Sotto il nome, piu' piccola: e'
   la risposta alla domanda "e se lo spengo?". */
.gal-live-grosso-sotto {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 2px
}

/* ACCESO: bordo e fondo del colore dell'accento, cosi' si vede da un
   metro di distanza qual e' lo stato. */
/* --- blocco 39501: acceso e spento si vedono ---
   IL FONDO NON CAMBIAVA. Qui c'era il 10% del colore del marchio
   sopra il fondo dei riquadri, e sopra un fondo gia' color crema
   il 10% non si distingue: misurato col contagocce faceva
   rgb(241,233,223) spento contro rgb(244,237,227) acceso, cioe'
   TRE PUNTI su 255. Nello scuro dieci. Due righe piu' su c'e'
   scritto che «si vede da un metro di distanza»: non era vero.
   Al 30% la differenza diventa di venti-quaranta punti, e la
   scritta sopra resta leggibile in tutti e due i temi (contrasto
   9,8:1 nel chiaro e 7,5:1 nello scuro).
   Il bordo, la levetta e le parole restano quelli di prima. */
.gal-live-interruttore.gal-live-grosso.gal-live-grosso-acceso {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 30%, var(--surface))
}

.gal-live-grosso-acceso .gal-live-grosso-sotto { color: var(--ink-2) }

@media (max-width:720px) {
  .gal-live-interruttore.gal-live-grosso { width: 100%; margin-top: 12px }
}

/* ---- SEGNO_19501_guestbook: le due schede della moderazione ----
   "Caricamenti" e "Messaggi", come in OurStoria (Uploads | Messages). */
.gal-live-schede {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line)
}

.gal-live-schede button {
  border: 0;
  background: none;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px
}

.gal-live-schede button.gal-live-scheda-attiva {
  color: var(--accent-ink);
  border-bottom-color: var(--accent)
}

.gal-live-messaggio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  background: var(--surface)
}

.gal-live-messaggio-scelto { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)) }

.gal-live-messaggio-corpo { flex: 1; min-width: 0 }

.gal-live-messaggio-testo { margin: 0; font-size: 14.5px; line-height: 1.55;
  color: var(--ink) }

.gal-live-messaggio-sotto { margin: 6px 0 0; font-size: 11.5px;
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-3) }

/* ================================================================
   === inizio blocco 20903: LA TACCA E LA STRISCIA DI CASA ===

   La pagina dichiara "viewport-fit=cover", cioe' si prende tutto lo
   schermo del telefono. Le fotografie devono arrivare ai bordi; i
   comandi no.

   MISURATO su Chrome pilotato davvero, 390 x 844, visore aperto: la
   pastiglia Precedente/Auto/Prossimo finiva a 12 punti dal fondo,
   mentre la striscia di casa dell'iPhone ne occupa 34. Ventidue punti
   di pastiglia stavano dentro la striscia.

   PERCHE' UNA REGOLA SOLA E NESSUN NUMERO RIPETUTO. Il visore e' una
   colonna (riga in alto, palco, barra, pastiglia) dentro un riquadro
   fisso. Il margine interno si mette AL RIQUADRO: la colonna si
   stringe e tutto quello che c'e' dentro si sposta da solo, con i
   suoi numeri di sempre. Anche i tasti tondi ai lati, che sono
   posizionati rispetto a questo stesso riquadro, entrano nel conto
   senza una riga in piu' -- ed e' quello che li salva dalla tacca
   quando il telefono e' girato di lato.

   Dove quelle fasce non esistono -- ogni computer, quasi ogni Android
   -- env() vale 0 e non cambia niente di niente.
   ================================================================ */
.gal-cliente .gal-schermo.gal-visore{
  padding-top:env(safe-area-inset-top,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
}

/* Le due cose che galleggiano in fondo alla pagina delle foto: la
   pillola delle scelte e l'avviso del tetto. Non stanno dentro il
   visore, quindi il margine di sopra non le riguarda: qui i numeri di
   partenza sono i loro, presi dalle regole di prima (22, 74 e 66). */
.gal-cliente .gal-volante{
  bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.gal-cliente .gal-avviso-tetto{
  bottom:calc(74px + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){
  .gal-cliente .gal-avviso-tetto{
    bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}
/* === fine blocco 20903 === */

/* ================================================================
   === inizio blocco 20909: IL RIQUADRO IN ATTESA SI VEDE ===

   MISURATO su Chrome pilotato davvero, tema chiaro, 390 punti: il
   fondo della pagina era #f6f1ea e quello del riquadro ancora vuoto
   #f1e9df -- 1,07 a 1, cioe' lo stesso colore. Mentre le foto
   arrivavano non si vedeva nessun riquadro: si vedevano dei cuori
   che galleggiavano nel vuoto, perche' il cuore sta in un angolo del
   riquadro ed era l'unica cosa disegnata.

   IL COLORE NON E' SCRITTO A MANO. Si mescola il colore del testo con
   quello del riquadro: cosi' vale nel tema chiaro, nel tema scuro e
   nei fondi che la galleria puo' imporre da se'. Dove color-mix non
   c'e' (Safari prima della 16.2) resta il colore del bordo, che nei
   due temi e' gia' distinguibile dal fondo.

   IL SEGNO DELLA FOTOGRAFIA e' disegnato dentro il foglio (nessun file
   da scaricare, nessuna richiesta di rete in piu'), sbiadito e piccolo:
   deve dire "sta arrivando", non fare rumore. Appena la fotografia
   arriva ci si mette sopra e lo copre.
   ================================================================ */
.gal-cliente{--gal-attesa:var(--line)}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .gal-cliente{--gal-attesa:color-mix(in srgb,var(--ink) 11%,var(--sunken))}
}
.gal-cliente .gal-tessera,
.gal-cliente .gal-tessera img{
  background-color:var(--gal-attesa);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-4.5 4.5-2-2L3 19'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:26px 26px;
}
/* Sul telefono i riquadri sono larghi 89 punti: un segno da 26 ci
   starebbe dentro come un francobollo su una busta. */
@media (max-width:640px){
  .gal-cliente .gal-tessera,
  .gal-cliente .gal-tessera img{background-size:18px 18px}
}
/* === fine blocco 20909 === */

/* ================================================================
   === inizio blocco 20911: IL DITO DEVE VEDERE LA RISPOSTA ===

   Il blocco 5031 aveva gia' fatto questo lavoro per il menu, le schede
   e il cuore sulla fotina. Dentro il visore non arrivava: contati sulla
   pagina vera, dieci comandi -- Precedente, Auto, Prossimo, Chiudi, i
   due tondi di sinistra, l'orologio, il cuore grande, Scarica,
   Condividi -- avevano solo l'effetto del mouse, che col dito non si
   vede mai.

   "hover:none" e non una larghezza: cosi' vale anche su un tablet
   grande, che di mouse non ne ha, e non vale su un portatile piccolo,
   che invece ce l'ha.

   IL RETTANGOLO GRIGIO DI SISTEMA si spegne. Non e' un vezzo: su fondo
   nero e su pulsanti tondi il browser disegna un quadrato grigio storto
   -- ed era l'unica risposta al dito che c'era. Si spegne solo dopo
   aver messo la risposta vera, mai prima.

   SEI CENTESIMI e non i diciotto di sempre: la risposta al dito e'
   l'unica animazione che non deve "arrivare", deve esserci gia'.
   ================================================================ */
@media (hover:none){
  .gal-cliente{-webkit-tap-highlight-color:transparent}

  .gal-cliente .gal-visore-tasto:not(:disabled):active,
  .gal-cliente .gal-visore-tondo:not(:disabled):active,
  .gal-cliente .gal-chiudi:active,
  .gal-cliente .gal-slide-tasto:not(:disabled):active,
  .gal-cliente .gal-visore-cuore:active,
  .gal-cliente .gal-schermo-barra .gal-cuore:active,
  .gal-cliente .gal-schermo-barra .gal-scarica:active,
  .gal-cliente .gal-sala-scheda:active,
  .gal-cliente .gal-volante:active{
    transform:scale(.94);
    opacity:.82;
    transition-duration:.06s;
  }
  /* CONTROLLATO: il "translateY(-50%)" che tiene le due colonnine a
     meta' altezza sta sulla COLONNINA (.gal-visore-lato), non sui
     tondi. Lo scale qui sopra e' sul tondo, quindi non lo cancella e
     i tasti non saltano a meta' schermo. Se un domani quel translate
     si spostasse sul tondo, questa riga andra' riscritta come
     "transform:translateY(-50%) scale(.94)". */
}
/* === fine blocco 20911 === */

/* ================================================================
   === inizio blocco 20913: IL CONTATTO IN CIMA SI TOCCA ===

   MISURATO su Chrome pilotato davvero, 390 x 844, passando in rassegna
   TUTTI i comandi della pagina del cliente e contando anche gli
   allargamenti invisibili gia' esistenti: un solo bersaglio sotto i 44
   punti, ed e' il contatto in cima -- 118,6 x 19.

   IL BERSAGLIO CRESCE, IL DISEGNO NO. Stessa tecnica del cuore sulla
   fotina (blocco 12501): un rettangolo invisibile centrato sul
   contatto. Alzare davvero la riga vorrebbe dire far crescere la
   barra, che su un telefono da 844 punti ne occupa gia' 144.

   ALTO SI', LARGO NO. Il rettangolo prende tutta la larghezza del
   contatto e non un punto di piu': allargandolo, due contatti vicini
   (fra loro ci sono 14 punti) si ruberebbero il tocco a vicenda.

   Solo dove il mouse non c'e': su un computer il puntatore prende
   anche un bersaglio di due punti, e un rettangolo invisibile in piu'
   sarebbe soltanto una cosa che puo' rompersi.
   ================================================================ */
@media (hover:none){
  .gal-cliente .gal-fissa-contatti a{position:relative}
  .gal-cliente .gal-fissa-contatti a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:44px;
    transform:translateY(-50%);
    /* non disegna niente: e' solo il posto dove il dito puo' cadere */
  }
}
/* === fine blocco 20913 === */


/* ================================================================
   blocco 23501 - IL TASTO «CONDIVIDI» DEL VISORE
   In coda al file, come sempre: cosi' queste righe vincono su quelle
   di prima senza cancellarle, e nessun altro lavoro viene toccato.

   1. DOV'E' ADESSO
   Nella riga in cima al visore, fra il numero della foto e «Chiudi».
   Prima stava sotto la fotografia (misurato a 1280x860: foto fino a
   740 punti, pastiglia da 748 in giu').

   2. PERCHE' BIANCO PIENO E NON I COLORI DEL TEMA
   Il blocco 13105 ha portato ai colori del tema i due tasti della
   SALA DEI FILMATI, e li' era giusto: quei tasti stanno sulla
   PAGINA, e la pagina cambia colore col tema.
   Qui no. Il visore e' un velo quasi nero -- rgba(8,8,10,.97) --
   uguale in tutti e otto gli stili e sia a sfondo chiaro che scuro.
   Con var(--accent) due stili sparirebbero:
       «minimale»  #111114  ->  1,1 a 1 contro il velo
       «semplice»  #2B2B33  ->  1,9 a 1
   Il bianco pieno da' 19,6 a 1 dappertutto, ed e' la stessa vernice
   che il visore usa gia' per i suoi tasti accesi (Auto premuto, e
   una foto / due foto). Non e' una vernice nuova: e' la sua.

   3. IL PANNELLO SALE SOPRA AL VISORE
   Era il difetto piu' grosso e non si vedeva guardando il codice:
   il pannello «Condividi» stava a livello 60, il visore a 900. Il
   pannello si apriva DIETRO, coperto per intero, e premendo il tasto
   sembrava non succedere niente. 930 lo mette sopra al visore e
   sotto alla finestra di conferma del CRM (935), che resta l'ultima
   parola.
   ================================================================ */
.gal-visore .gal-visore-condividi{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;border-radius:999px;padding:10px 18px;
  background:#fff;color:#15151a;
  font:inherit;font-size:13px;font-weight:700;line-height:1;
  white-space:nowrap;cursor:pointer;transition:var(--tr)}
.gal-visore .gal-visore-condividi:hover{background:#ececf1;color:#000}
.gal-visore .gal-visore-condividi:focus-visible{outline:2px solid #fff;
  outline-offset:3px}
/* Il numero della foto puo' restringersi, il tasto no: su uno schermo
   stretto e in una lingua con la parola lunga, «1 / 6» si accorcia e
   i due tasti restano interi invece di uscire dallo schermo. */
.gal-visore .gal-visore-testa{gap:10px}
.gal-visore .gal-visore-testa .gal-visore-conta{min-width:0;overflow:hidden;
  text-overflow:ellipsis}
@media (max-width:700px){
  .gal-visore .gal-visore-condividi{padding:9px 14px;font-size:12.5px}
}

/* IL PANNELLO «CONDIVIDI» SOPRA AL VISORE. Vedi il punto 3 qui sopra. */
.gal-condividi-velo{z-index:930}
/* === fine blocco 23501 === */


/* ================================================================
   blocco 23505 - IL RIQUADRO DI UNA FOTO DEGLI OSPITI E' UN TASTO
   In coda al file, come sempre.

   Il riquadro adesso e' un <button> vero, cosi' ci si arriva anche
   col tasto di tabulazione. Qui gli si toglie tutto il vestito che il
   browser mette da solo ai pulsanti -- cornice, sfondo, margini --
   perche' deve continuare a sembrare esattamente quello che era: una
   fotografia in un riquadro. Cambia solo il puntatore, che diventa la
   manina e dice che si puo' toccare.
   ================================================================ */
.gal-ospiti-apri{
  display:block;width:100%;height:100%;
  margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}
/* Il contorno del tabulatore sta DENTRO il riquadro: la tessera ha
   overflow:hidden e un contorno appoggiato al bordo verrebbe tagliato
   via, lasciando chi gira la pagina con la tastiera senza sapere dove
   si trova. */
.gal-ospiti-apri:focus-visible{outline:3px solid var(--accent);
  outline-offset:-3px}
/* === fine blocco 23505 === */

/* ===== blocco 23101: LE CONDIZIONI SI CHIUDONO ========================
   «se clicco si apre il disclaimer, ma poi non si chiude. Devo cliccare
    in fondo ma non si capisce» -- Giovanni, 6 settembre 2026.

   MISURATO PRIMA, a 1440x900: riquadro alto 904 px, schermo 900, i due
   pulsanti a 1268 px dall alto -- 368 px sotto il bordo. Si chiudeva,
   ma l uscita non si vedeva.

   LA SOLUZIONE NON E' ACCORCIARE IL TESTO: quel testo e' un consenso e
   un giorno lo riscrivera' un legale, quindi sara' piu' lungo, non
   meno. Scorre dentro la sua finestrella, e i pulsanti stanno FUORI
   dalla finestrella: cosi' l uscita e' in vista qualunque cosa ci
   scrivano dentro.

   Il 40% dell altezza dello schermo e non un numero fisso di pixel:
   su un portatile da 900 sono 360 px (sei-sette righe piu' il titolo
   del punto), su un monitor grande diventano di piu' -- che e' quello
   che si vuole, li' lo spazio c e'. */
.gal-live-condizioni-testata{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; margin-bottom:4px;
}
.gal-live-condizioni-testata .gal-live-condizioni-titolo{margin-bottom:0}
.gal-live-condizioni-chiudi{
  flex:0 0 auto; width:30px; height:30px; margin:-4px -4px 0 0;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink-3);
  font-size:19px; line-height:1; cursor:pointer;
}
.gal-live-condizioni-chiudi:hover{
  background:var(--warn); color:var(--ink-strong); border-color:var(--warn);
}
.gal-live-condizioni-guida{
  margin:0 0 12px; font-size:13px; line-height:1.5; color:var(--ink-3);
  max-width:72ch;
}
.gal-live-condizioni-guida strong{color:var(--ink-strong)}
/* LA FINESTRELLA. Il bordo sopra e sotto non e' decorazione: e' quello
   che fa capire che li' dentro c e' altro e che si scorre. */
.gal-live-condizioni-testo{
  max-height:40vh; overflow-y:auto; padding:12px 14px 4px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overscroll-behavior:contain;
}
/* I due pulsanti stanno fuori dalla finestrella, quindi sono sempre a
   schermo se lo e' il riquadro. Il bordo sopra li stacca dal testo. */
.gal-live-condizioni .gal-live-condizioni-tasti{
  margin-top:13px; padding-top:0; border-top:0;
}
/* Su uno schermo basso (un portatile vecchio, o il browser a meta'
   schermo) la finestrella si stringe ancora: prima si salvano i
   pulsanti, il testo scorre. */
@media (max-height:700px){
  .gal-live-condizioni-testo{max-height:34vh}
}
/* ===== fine blocco 23101 ===== */

/* ===== blocco 23103: I QUATTRO PASSI DELLE FOTO OSPITI ================
   «fai tutta la sezione divisa in step come quelli precedenti,
    numerati» -- Giovanni, 6 settembre 2026.

   PERCHE' NON RIUSA .gal-passi (la fila grande dei cinque passi della
   galleria). Questa fila sta DENTRO uno di quei cinque passi. Due file
   identiche, una sotto l altra, non direbbero quale comanda: questa e'
   piu' bassa, piu' stretta, e attaccata al riquadro che governa.
   Stesso alfabeto -- pallino col numero, nome accanto, quello attivo
   pieno -- perche' e' la stessa cosa un piano sotto, non una cosa
   nuova.

   SCORRE DI LATO SUL TELEFONO invece di andare a capo: a 390 punti
   quattro nomi in fila non ci stanno, e una fila che si spezza su due
   righe non si legge piu' come una fila di passi. */
.gal-live-passi{
  display:flex; gap:6px; align-items:stretch;
  margin:15px 0 0; padding:5px;
  background:var(--surface-2); border-radius:var(--r-m);
  overflow-x:auto; scrollbar-width:thin;
}
.gal-live-passo{
  position:relative; flex:1 1 0; min-width:132px;
  display:flex; align-items:center; gap:8px;
  padding:8px 11px; border:0; border-radius:calc(var(--r-m) - 3px);
  background:transparent; color:var(--ink-3);
  font-size:13px; font-weight:600; text-align:left; cursor:pointer;
  line-height:1.25;
}
.gal-live-passo:hover{background:var(--surface)}
.gal-live-passo-attivo{
  background:var(--surface); color:var(--ink-strong);
  box-shadow:var(--shadow-sm);
}
.gal-live-passo-pallino{
  flex:0 0 auto; width:21px; height:21px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--surface); color:var(--ink-3);
  border:1px solid var(--line);
  font-size:11.5px; font-weight:700; line-height:1;
}
.gal-live-passo-attivo .gal-live-passo-pallino{
  background:var(--brand); color:var(--on-brand); border-color:var(--brand);
}
.gal-live-passo-nome{flex:1 1 auto}
/* Il numero delle cose che aspettano, sul quarto pallino. Rosso e
   piccolo: e' l unica cosa di questa fila che deve saltare all occhio
   la sera del matrimonio. */
.gal-live-passo-avviso{
  flex:0 0 auto; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; display:grid; place-items:center;
  background:var(--bad); color:var(--on-bad);
  font-size:11px; font-weight:700; line-height:1;
}
@media (max-width:760px){
  .gal-live-passo{min-width:118px; font-size:12.5px; padding:7px 9px}
}
/* LA RIGA IN FONDO, SUL TELEFONO. Qui i pulsanti sono TRE (Indietro,
   Avanti, Salva e torna) e non due come negli altri passi: a 390 punti
   in fila non ci stanno, e il terzo usciva dal bordo destro -- provato
   sul banco. Va a capo e si prende tutta la riga. La regola tocca solo
   questa riga (.gal-live-nav): quella degli altri quattro passi resta
   com era. */
@media (max-width:560px){
  .gal-live-nav{flex-wrap:wrap}
  .gal-live-nav .btn-lg{flex:1 1 100%; margin-top:4px}
}
/* ===== fine blocco 23103 ===== */

/* ===== blocco 23109: IL NUMERO ROSSO SULLE SCHEDE =====================
   «non vedo i commenti» -- Giovanni, 6 settembre 2026.
   Il numero sulla scheda «Messaggi» era il totale, e il totale non dice
   se c e' qualcosa da fare. Adesso quando qualcosa aspetta il numero e'
   rosso, come il pallino del passo 5 e come quello del quarto passo:
   nel CRM il rosso vuol dire sempre e solo «qui c e' del lavoro».
   Il grigio (.gal-live-conta, che c era gia') resta il conto. */
.gal-live-conta.gal-live-conta-aspetta{
  background:var(--bad); color:var(--on-bad); font-weight:700;
}
/* ===== fine blocco 23109 ===== */

/* ================================================================
   === inizio blocco 26301: UNA SOLA GRAFICA DI ATTESA ===

   Giovanni: «come grafica di caricamento metti sempre quella chiara in
   stile sito, mi piace di piu'».

   LA FORMA E' QUELLA CHE C'ERA GIA': .spinner e .loading-container,
   piu' su in questo foglio — traccia --line, settore --accent, 2 punti
   di spessore, un giro in sette decimi di secondo, accanto la riga che
   dice che cosa si sta aspettando. E' «in stile sito» alla lettera: il
   sito e il CRM hanno le stesse identiche variabili (--accent #8f6126,
   --line #e0d5c8, --ink-3 #70675d), quindi copiare il sito qui vuol
   dire usare quelle.

   QUI SI PORTANO ALLA STESSA FORMA I POSTI CHE ANDAVANO PER CONTO
   LORO. Si scrive in coda al foglio, e mai dentro i blocchi altrui,
   perche' su questi file stanno lavorando altri adesso.

   IL COLORE NON E' SEMPRE --accent, ED E' MISURATO.
   Nelle pagine che vedono i clienti (.gal-cliente: la galleria
   pubblica e la pagina del cliente) l'accento lo sceglie il fotografo
   fra sette temi, e due di quei sette sono quasi neri. Contrasto del
   settore sul riquadro, misurato sui colori veri del foglio:

       tema         fondo chiaro   fondo scuro
       semplice        13,72          1,22   <- sparisce
       minimale        18,43          1,10   <- sparisce
       pastello         2,50          6,70   <- sparisce di la'
       vivace           3,21          5,22
       elegante         4,74          3,53
       oldstyle         5,12          3,27
       natura           4,71          3,56

   Con --ink-2 al posto di --accent: 5,97 sul chiaro e 6,90 sullo
   scuro, in tutti e sette. Il motivo e' che .gal-sfondo-scuro
   ridefinisce --ink-2 e NON ridefinisce --accent: l'inchiostro segue
   il fondo, l'accento no. Stessa rotella, stessa taglia, stesso giro:
   cambia solo di che colore e' il settore, e lo decide una riga sola.
   ================================================================ */

/* Il colore del settore, in un posto solo. */
:root{--attesa-tinta:var(--accent)}
.gal-cliente{--attesa-tinta:var(--ink-2)}
.spinner{border-top-color:var(--attesa-tinta)}

/* ---- LE ROTELLE SOPRA UNA FOTOGRAFIA -----------------------------
   Erano bianche su un velo nero: l'unica attesa scura del CRM, e la
   sola che non somigliava a nessun'altra. Adesso il velo e' chiaro e
   la rotella e' quella di sempre.

   IL VELO E' ALL'88 PER CENTO, e non e' un numero a caso: sotto c'e'
   una fotografia qualunque, e la rotella deve vedersi anche sopra la
   piu' nera. Misurato sul caso peggiore (fotografia nera sotto):
     velo nero di prima, rotella color oro  ->  1,54  (per questo la
                                                 mettevano bianca)
     velo chiaro all'88%, rotella color oro ->  4,00
   Nel tema scuro il velo diventa scuro (--surface lo segue) e il caso
   peggiore e' la fotografia bianca: 7,34.

   All'88 la fotografia sotto si intravede ancora — serve, perche' dice
   che si sta sostituendo QUELLA copertina — ma non abbastanza da
   mangiarsi la rotella.

   La prima riga e' senza color-mix: dove non c'e' (Safari prima della
   16.2) resta il fondo pieno, che si vede uguale. */
.gal-slot-carica,.gal-cella-carica{
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
}
.gal-slot-carica::after,.gal-cella-carica::after{
  border:2px solid var(--line);
  border-top-color:var(--attesa-tinta);
  animation-duration:.7s;
}

/* ---- LA ROTELLA SULLA MINIATURA DEL FILMATO ----------------------
   Qui il velo su tutto il riquadro NON si puo' mettere: la miniatura
   e' larga 128 punti e serve a far vedere su quale filmato si sta
   lavorando (lo dice il commento del blocco che l'ha scritta). E il
   fondo di quella miniatura e' scuro FISSO — #2A2A36..#15151D — anche
   quando il CRM e' in tema chiaro: li' la rotella color oro sta a
   3,38, cioe' si perde dentro il buio.

   Quindi la rotella si porta dietro una pastiglia chiara, grande
   quanto lei piu' un contorno. Misurato:
     pastiglia --surface sul fondo della miniatura  -> 17,75
     settore --attesa-tinta dentro la pastiglia     ->  5,26
   Nel tema scuro la pastiglia si confonde col fondo (1,06) ma non
   serve: li' il settore e' oro chiaro e si legge da solo. */
.gal-rifinitura-carica{
  border:2px solid var(--line);
  border-top-color:var(--attesa-tinta);
  background:var(--surface);
  box-shadow:0 0 0 6px var(--surface),0 2px 8px rgba(0,0,0,.28);
  animation-duration:.7s;
}

/* ---- LE PAGINE CHE VEDONO I CLIENTI ------------------------------
   Li' non c'era nessuna grafica: solo una riga di testo in mezzo alla
   pagina. Adesso ha la rotella davanti, con le stesse parole di prima
   (che sono tradotte). Il riquadro si stringe ai lati perche' su un
   telefono da 390 punti la riga tradotta in inglese andava a capo
   contro il bordo. */
.gal-cliente .loading-container{
  padding:44px 18px;
  color:var(--ink-2);
  font-size:15px;
}
/* === fine blocco 26301 === */

/* ===== inizio blocco 25503: IL PASSO 5 SU UNA PAGINA SOLA ============
   I quattro riquadri delle foto degli ospiti sono tornati su una
   pagina sola (Giovanni: "ci sono troppi click, andava bene come gli
   step precedenti tutto in una pagina"). Rimettendoli insieme torna la
   lunghezza che aveva fatto spezzarli, quindi qui si stringe.
   Nessuna di queste regole nasconde niente e nessuna aggiunge un clic:
   tolgono aria, non contenuto.
   Misurato sul banco (24 foto, raccolta accesa, 9 foto degli ospiti in
   attesa): a 1280 punti 2383 -> 1954, a 390 punti 3896 -> 3630. ========= */

/* Una cornice sola invece di quattro: le quattro parti si dividono con
   una righina, che costa un pixel invece di una cornice intera. */
.gal-live-tuttinsieme .card-body{padding:16px 18px}
.gal-live-parte{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.gal-live-parte:first-of-type{margin-top:0; padding-top:0; border-top:0}

/* Le spaziature dentro le quattro parti: 16 -> 11. Su dodici campi in
   fila sono una cinquantina di punti, e non si vede che manchino. */
.gal-live-tuttinsieme .gal-live-campo{margin-top:11px}
.gal-live-tuttinsieme .gal-live-indirizzo{margin:9px 0}
.gal-live-tuttinsieme .gal-live-qr{padding:11px; gap:14px}
.gal-live-tuttinsieme .gal-scelta-carte{margin-top:8px}
.gal-live-tuttinsieme .gal-live-riepilogo{margin-top:8px}

/* Le due levette accanto invece che una sotto l'altra. Restano alte
   quanto prima: il bersaglio da toccare non si tocca. */
/* Il riquadro che tiene insieme le due date e la loro nota: non
   aggiunge aria, serve solo a non far staccare la nota dalle date
   quando su schermo largo si va su due colonne. */
.gal-live-blocco{margin-top:0}

.gal-live-due-levette{display:flex; gap:10px 26px; flex-wrap:wrap}
.gal-live-due-levette .gal-toggle{margin:0}

/* Il numero rosso che stava sul quarto pallino, adesso accanto al
   titolo: era l'unica cosa che faceva notare le foto in attesa la sera
   del matrimonio, e i pallini non ci sono piu'. */
.gal-live-avviso-titolo{margin-left:2px}

/* SU SCHERMO LARGO LE REGOLE VANNO SU DUE COLONNE.
   Undici campi uno sotto l'altro, ognuno largo tutta la pagina, per
   scriverci dentro una data o quattro cifre: su una pagina sola quella
   aria si paga tutta in scorrimento. Le cose che hanno bisogno della
   riga intera restano larghe: le note (<p>) e quello che porta
   .gal-live-larga, cioe' i gruppi di riquadri da scegliere e i limiti
   fini. Sotto i 1000 punti la griglia sparisce e torna tutto in
   colonna, com'era. */
@media (min-width:1000px){
  .gal-live-parte-regole{display:grid; grid-template-columns:1fr 1fr;
    gap:0 24px; align-items:start}
  .gal-live-parte-regole > p,
  .gal-live-parte-regole > h4,
  .gal-live-parte-regole > .gal-live-larga{grid-column:1 / -1}
}

/* Sul telefono si stringe ancora: li' la pagina e' lunga il doppio. */
@media (max-width:560px){
  .gal-live-tuttinsieme .card-body{padding:14px}
  .gal-live-parte{margin-top:15px; padding-top:15px}
  .gal-live-tuttinsieme .gal-live-campo{margin-top:10px}
}
/* ===== fine blocco 25503 ===== */

/* ===== inizio blocco 25505: LE FOTO CARICATE, IN FONDO ===============
   "sempre all'ultimo step si deve vedere la galleria delle foto
    caricate" -- Giovanni, 6 settembre 2026.
   Una striscia che scorre di lato e non una griglia: il passo 5 e' gia'
   lungo, e ventiquattro foto in griglia gli avrebbero aggiunto piu' di
   novecento punti. Cosi' ne costa 217 su schermo grande e 241 sul
   telefono -- misurati sul banco con 24 foto -- e si vedono tutte lo
   stesso, scorrendo di lato.
   ==================================================================== */
.gal-fine-testa{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:10px}
.gal-fine-quante{font-size:12.5px; color:var(--ink-3); font-weight:600}

/* -webkit-overflow-scrolling: sul telefono lo scorrimento laterale
   senza questa riga si ferma di colpo invece di scivolare. */
.gal-fine-striscia{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.gal-fine-tessera{
  position:relative; flex:0 0 auto;
  width:116px; height:116px; padding:0; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; background:var(--sunken);
  cursor:pointer; display:block;
}
.gal-fine-tessera:hover{border-color:var(--accent)}
.gal-fine-tessera:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gal-fine-tessera img{width:100%; height:100%; object-fit:cover; display:block}
.gal-fine-senza{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:11px; color:var(--ink-3); padding:6px; text-align:center;
}
.gal-fine-play{
  position:absolute; right:6px; bottom:6px;
  width:24px; height:24px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.58); color:#fff; font-size:11px; line-height:1;
}
@media (max-width:560px){
  .gal-fine-tessera{width:104px; height:104px}
}
/* ===== fine blocco 25505 ===== */

/* ===== inizio blocco 25509: «VEDI» E «ANTEPRIMA» SCRITTI ============
   "l'icona per vedere la galleria scrivi proprio vedi e anteprima
    senno non si capisce" -- Giovanni, 6 settembre 2026.
   La parola sta SOTTO il disegno e non accanto: accanto, a 360 punti,
   tre parole in fila spingevano il nome della galleria fuori dalla
   riga. Sotto costano pochi punti di larghezza e nessuna riga in piu'.
   Misurato a 360: la riga non va a capo, niente scorrimento laterale,
   e i tre bersagli sono alti 44 punti. ============================== */
.gal-riga-tasto{
  display:inline-flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px;
  padding:4px 6px; line-height:1.1;
  min-width:54px; min-height:44px;
}
.gal-riga-parola{
  font-size:10.5px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; line-height:1;
}
/* Il cestino diventa rosso passandoci sopra: la parola lo segue, come
   fa gia' il disegno (prendono tutti e due il colore del testo). */
.gal-riga-cestino.gal-riga-tasto:hover .gal-riga-parola{color:inherit}

/* SUL TELEFONO I TRE TASTI VANNO SULLA LORO RIGA, SOTTO IL NOME.
   E' l'unica cosa di questa consegna che cambia la forma della riga, e
   c'e' un motivo misurato: con le parole scritte i tre tasti sono
   larghi 168 punti invece di 108. A 360 punti al nome della galleria
   ne restavano 100, e il nome finiva SOTTO i tasti -- 50 punti di
   sovrapposizione, misurati sul banco, con "banco 25500" scritto
   dietro la parola "Anteprima".
   Su una riga loro il nome si legge tutto, i tasti si toccano comodi e
   niente esce dal bordo. Su schermo grande non cambia niente: restano
   in fondo alla riga come sempre.
   Qui si disfa anche la regola vecchia che li schiacciava a 36 punti
   quadrati, cioe' sotto la misura minima per il pollice. */
@media (max-width:640px){
  .gal-riga{flex-wrap:wrap}
  .gal-riga-apri{flex:1 1 calc(100% - 46px)}
  .gal-riga .btn-cestino.gal-riga-tasto{
    min-width:52px; width:auto; min-height:44px; height:auto;
    padding:4px 5px; margin-bottom:6px;
  }
  /* i tre tasti si allineano a destra, sotto il nome */
  .gal-riga .gal-riga-anteprima.gal-riga-tasto{margin-left:auto}
}
@media (max-width:760px){
  .btn-cestino.gal-riga-tasto{min-width:52px; min-height:44px}
}
/* ===== fine blocco 25509 ===== */


/* ===== blocco 25901: i fogli gia' pronti da stampare ===== */
.gal-stampabili{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.gal-stampabili-elenco{
  display:grid; gap:12px; margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.gal-stampabile{
  display:flex; flex-direction:column; gap:5px;
  padding:14px; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--surface); color:inherit; text-decoration:none;
  transition:border-color .15s, transform .15s;
}
.gal-stampabile:hover{border-color:var(--accent); transform:translateY(-1px)}
.gal-stampabile-testa{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.gal-stampabile-nome{font-weight:700; color:var(--ink-strong)}
.gal-stampabile-formato{
  font-size:11px; padding:2px 7px; border-radius:999px;
  background:var(--sunken); color:var(--ink-soft); white-space:nowrap;
}
.gal-stampabile-sotto{font-size:12.5px; color:var(--ink-soft)}
.gal-stampabile-desc{font-size:12px; color:var(--ink-soft); line-height:1.45}
.gal-stampabile-scarica{
  margin-top:6px; font-size:12.5px; font-weight:600; color:var(--accent);
}
/* ===== fine blocco 25901 ===== */
/* ===== blocco 33500: la figurina al posto della descrizione =====
   La riga del modello adesso e' un disegnino a sinistra e le parole a
   destra. Le regole del blocco 25901 qui sopra restano tutte: questo
   blocco aggiunge il guscio della figurina e la disposizione in riga,
   e non ne riscrive nessuna. */
.gal-stampabile-riga{display:flex; gap:12px; align-items:flex-start}
.gal-stampabile-parole{
  display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto;
}
/* Il guscio ha una misura fissa cosi' i nomi dei sei modelli partono
   tutti dalla stessa colonna, anche se un A6 coricato e' piu' basso di
   un A4 in piedi. */
.gal-stampabile-figura-guscio{
  flex:0 0 auto; width:56px; height:58px;
  display:flex; align-items:center; justify-content:center;
}
.gal-stampabile-figura{display:block; max-width:100%; height:auto}
.gal-stampabile .gal-stampabile-scarica{margin-top:2px}
@media (max-width:420px){
  .gal-stampabile-riga{gap:10px}
}
/* ===== fine blocco 33500 ===== */


/* ===== inizio blocco 36100: MARCA_36100_ANTEPRIMA =====
   L'ANTEPRIMA GRANDE ACCANTO ALLE CASELLINE DEL COLORE.

   La regola che conta e' UNA: la roba che sta sotto non si deve
   spostare. Se comparendo un riquadro nuovo l'elenco dei sei fogli
   scende di mezzo schermo, chi stava guardando perde il posto.
   Percio' a schermo largo l'anteprima NON va in una riga sua: va
   nello spazio che a destra era gia' vuoto (misurato: 245 pixel
   liberi su 946 di sezione). Se ne prende 118 piu' 14 di stacco, e
   ai paragrafi ne restano 814: alla prova non guadagnano nemmeno
   una riga, e quello che sta sotto non si muove.

   E' FUORI DAL FLUSSO di proposito. La prima strada provata era una
   griglia a due colonne: la colonna dell'anteprima allargava la
   prima riga e la sezione cresceva di 198 pixel -- il contrario di
   quello che serviva. Fuori dal flusso l'anteprima puo' essere alta
   quanto vuole senza spingere giu' niente.

   IL min-height NON E' UN NUMERO A CASO: e' l'altezza che l'anteprima
   occupa. Fuori dal flusso, se la sezione fosse piu' corta di lei
   (succede quando nessun avviso e' acceso) l'anteprima sporgerebbe
   sotto e finirebbe addosso all'elenco dei sei fogli. Con questo,
   la sezione non e' mai piu' corta della sua anteprima.

   MISURATO SUL BROWSER PILOTATO, NON STIMATO LEGGENDO IL CODICE. */
.gal-stampa-stile{ position:relative; padding-right:132px; min-height:165px }
.gal-stampa-stile > .gal-stile-anteprima{
  position:absolute; top:0; right:0; width:118px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.gal-stile-anteprima-foglio{
  display:flex; align-items:center; justify-content:center;
  max-width:100%;
}
.gal-stile-anteprima-foglio .gal-stampabile-figura{
  max-width:100%; max-height:140px; width:auto; height:auto;
}
.gal-stile-anteprima-dice{
  font-size:11px; line-height:1.3; text-align:center; color:var(--ink-soft);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* SUL TELEFONO due colonne non ci stanno: a 390 la sezione e' larga
   328 pixel e le caselline del colore vanno gia' a capo da sole.
   Allora la griglia si scioglie e l'anteprima torna in fila, SUBITO
   sotto le caselline -- che e' il posto giusto: il pannello del
   colore sul telefono si apre dal basso e copre la meta' bassa dello
   schermo, quindi quello che deve restare in vista va sopra, non
   sotto. Piu' piccola, perche' qui l'altezza si paga. */
@media (max-width:720px){
  .gal-stampa-stile{ padding-right:0 }
  .gal-stampa-stile > .gal-stile-anteprima{
    position:static; width:auto;
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:10px; margin:2px 0 4px;
  }
  .gal-stile-anteprima-foglio .gal-stampabile-figura{ max-height:96px }
  .gal-stile-anteprima-dice{ align-items:flex-start; text-align:left }
}
/* ===== fine blocco 36100 ===== */


/* ====================================================================
   === inizio blocco 24901 ===
   LA BARRA DEI PASSI NON FINISCE PIU' SOTTO L'INTESTAZIONE

   MISURATO SUL BROWSER PILOTATO, NON STIMATO LEGGENDO IL CODICE.

   Sotto i 480 punti la barra in cima al CRM va su due righe (il
   titolo della pagina scende sotto la fila delle icone) e diventa
   alta 98 punti invece di 67. La barra dei passi della galleria,
   pero', continuava a fermarsi a 64 punti dal bordo -- il numero
   giusto quando l'intestazione era alta 67.

     a 390, 375 e 360 punti
       l'intestazione del CRM finisce a  98
       la barra dei passi cominciava a   64
       -------------------------------------
       34 punti di barra dietro l'intestazione

   E i 34 punti che sparivano erano la riga di sopra: «Tutte le
   gallerie», l'occhio dell'anteprima e il tasto «Avanti», cioe' il
   gesto principale del passo, tagliato a meta'.

   Anche fra 481 e 760 punti c'era un pelo di sovrapposizione:
   intestazione alta 67, barra a 64, tre punti coperti.

   I NUMERI NUOVI NON SONO INVENTATI. Su schermo grande la barra si
   ferma a 76 sotto un'intestazione alta 67: 9 punti d'aria. Qui si
   tengono gli stessi 9 punti:
     76  = 67 + 9   (fra 481 e 760)
     107 = 98 + 9   (sotto i 480)

   NON E' UN DIFETTO DELLE CONSEGNE DI OGGI: la barra appiccicata col
   64 e l'intestazione a due righe vengono da due lavori piu' vecchi,
   e nessuno dei due e' sbagliato da solo. Si pestano i piedi quando
   ci sono tutti e due. Trovato guardando la pagina con le consegne
   di oggi tutte insieme.

   IN CODA AL FOGLIO, cosi' nessuna riga di nessun altro lavoro viene
   riscritta: queste due regole arrivano dopo quella che dice 64 e la
   vincono per ordine, a parita' di forza.
   ==================================================================== */
@media (max-width:760px){
  .gal-passi-fissa{top:76px}
}
@media (max-width:480px){
  .gal-passi-fissa{top:107px}
}
/* === fine blocco 24901 === */

/* === inizio blocco 28501 =================================================
   LA COPERTINA SI LEGGE SEMPRE

   Il blocco col nome dello studio, il nome dell evento e la data stava
   al centro della copertina, cioe' esattamente dove sta il soggetto
   della fotografia. Sulla galleria del 18esimo il titolo finiva sopra
   le lettere luccicanti della torta.

   Il contrasto pero' era gia' a posto (misurato 7,6 a 1 contro un
   minimo di 4,5): il problema non era il buio, era la CONFUSIONE.
   Percio' non basta scurire: il blocco va spostato.

   Va in basso a sinistra, e la macchia scura del velo si sposta con
   lui. Le due cose vanno insieme: spostare il testo lasciando la
   macchia al centro lo rende PEGGIO leggibile (misurato: su copertina
   chiara si scendeva a 4,9 a 1, contro i 7,6 di prima).
   ========================================================================= */

.gal-apertura{place-items:end start}

/* Lo spazio sotto non e' un numero a caso. La barra in alto e'
   appiccicata (sticky) e occupa spazio: la copertina, alta quanto lo
   schermo, finisce percio' 78 punti sotto il bordo sul computer e 141
   sul telefono. Un blocco appoggiato al fondo della copertina cadrebbe
   fuori dallo schermo. Questi valori lasciano il posto alla barra e
   sono stati verificati misurando dove finisce l ultima riga. */
.gal-apertura-testo{align-items:flex-start;text-align:left;gap:16px;
  padding:0 clamp(22px,5vw,72px) clamp(96px,19vh,200px);
  padding-bottom:clamp(96px,19svh,200px);
  max-width:min(760px,86vw)}
.gal-apertura-nome{max-width:18ch}

/* LA MACCHIA SEGUE IL TESTO. Le tre tappe della sfumatura dall alto
   restano quelle di prima; cambia dove sta la macchia tonda, e il
   fondo si scurisce da .30 a .44 perche' adesso e' li' che appoggia il
   testo. La sfumatura verso il colore della pagina (blocco 12501) sta
   sopra questo velo e sotto il testo, e adesso che il testo e' in
   basso lavora anche lei a tenerlo leggibile.

   Il 74% non e' a occhio: e' l altezza a cui finisce davvero il testo
   dentro la copertina, misurata. Una prima versione metteva la macchia
   all 84%, cioe' SOTTO le lettere, e la meta' alta del titolo restava
   fuori dalla protezione: sulla copertina della torta dava 12,4 a 1
   invece dei 14,0 di adesso, e sul telefono 10,6 invece di 16,9. */
.gal-apertura-velo{background:
  radial-gradient(ellipse 72% 46% at 24% 74%,
    rgba(0,0,0,.64) 0%, rgba(0,0,0,.32) 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,.30) 64%, rgba(0,0,0,.44) 100%)}

/* DAL TELEFONO. La barra in alto e' alta quasi il doppio (141 punti
   contro 78), quindi sotto ci vuole piu' aria. E la copertina e'
   tagliata verticale: il soggetto riempie tutto il quadro e in basso a
   sinistra resta comunque della roba, percio' li' la macchia e' piu'
   larga e piu' scura. */
@media (max-width:640px){
  .gal-apertura-testo{padding-bottom:clamp(150px,26vh,230px);
    padding-bottom:clamp(150px,26svh,230px)}
  .gal-apertura-nome{max-width:15ch}
  .gal-apertura-velo{background:
    radial-gradient(ellipse 140% 44% at 28% 68%,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.40) 52%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 30%,
      rgba(0,0,0,.34) 62%, rgba(0,0,0,.54) 100%)}}

/* SCHERMO BASSO (telefono girato di lato): tutto torna com era.
   Li' la copertina e' alta almeno 520 punti dentro uno schermo di 390,
   e QUALUNQUE cosa messa in basso finisce sotto il bordo. Succede gia'
   oggi ed e' un difetto piu' vecchio, che non riguarda questa
   consegna: qui ci si limita a non peggiorarlo. */
@media (max-height:640px){
  .gal-apertura{place-items:center}
  .gal-apertura-testo{align-items:center;text-align:center;
    padding:30px 24px;max-width:none}
  .gal-apertura-nome{max-width:16ch}
  .gal-apertura-velo{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,.30) 100%)}}
/* === fine blocco 28501 === */


/* ================================================================
   == inizio consegna-35301: i provini della copertina tengono la loro forma == */
/*
   IN CODA AL FOGLIO, come sempre: non si tocca il blocco di nessun
   altro lavoro, e queste righe vincono su quelle di riga 2225-2242
   perche' pesano uguale e vengono dopo.

   QUI SI TOCCA SOLO LA SCELTA COPERTINA. modern-theme.css e' il
   foglio di tutte le pagine: ogni riga qui sotto comincia per
   .gal-scelte-copertina, che vive in un punto solo del programma
   (gallerie.html, passo 2 - Copertina). Nessun'altra pagina cambia.

   IL DIFETTO. Il provino era alto 78 punti fissi e RITAGLIATO al
   centro: una foto verticale 1368x2048 diventava una striscia
   orizzontale 102x78, identica a una orizzontale. E siccome la
   copertina si sceglie in quattro caselle separate - foto
   orizzontale, foto verticale, video orizzontale, video verticale -
   quando il pannello chiede la VERTICALE e tutti i provini si
   presentano orizzontali, la scelta chiesta non si puo' fare.

   COSA FA QUESTO BLOCCO. La foto ci sta dentro tutta invece di
   essere tagliata (contain), in una casella quadrata. La verticale
   si vede alta e stretta, l'orizzontale larga e bassa: si
   riconoscono a colpo d'occhio. La griglia resta regolare - righe
   allineate, nessun buco - perche' la casella e' quadrata per tutti
   e cambia solo la foto che ci sta dentro.

   PERCHE' LE COLONNE SI STRINGONO. La casella quadrata e' piu' alta
   di quella schiacciata di prima e da sola ne farebbe entrare meno
   in una schermata. Stringendo le colonne il conto torna in attivo,
   misurato sulla galleria "18esimo" (34 foto orizzontali e 34
   verticali vere):
       computer 1280x800 : 48 provini prima -> 54 dopo
       telefono  390x844 : 24 provini prima -> 32 dopo

   IL FONDO DIETRO LA FOTO. Con la foto intera dentro una casella
   quadrata resta dello spazio ai lati (o sopra e sotto). Quello
   spazio prende --sunken, che e' il fondo gia' usato dal pannello:
   in chiaro e in scuro segue il tema da solo, e non e' un buco
   bianco in mezzo alle foto.
*/
.gal-scelte-copertina-griglia{
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.gal-scelte-copertina-cella img{
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  background:var(--sunken)}
@media (max-width:640px){
  .gal-scelte-copertina-griglia{
    grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
  /* height:auto anche qui: se no vince il 64px di riga 2241, che sta
     dentro la stessa finestra e quindi pesa uguale. */
  .gal-scelte-copertina-cella img{height:auto}
}
/* == fine consegna-35301 == */

/* ===== inizio blocco 39101: IL TESTO DEL PASSO 5 LARGO COME IL RIQUADRO ====
   «step 5 ospiti live, vedo il testo sempre formattato a sinistra stretto,
    correggilo» -- Giovanni, 7 settembre 2026.

   IL DIFETTO, MISURATO sul banco (galleria di prova, passo 5 «Ospiti live»,
   stessi numeri in tema chiaro e in tema scuro):
     a 1280 punti  riquadro largo 946,  testo fermo a 468 -> 478 di vuoto
     a 1600 punti  riquadro largo 1266, testo fermo a 468 -> 798 di vuoto
   Titolo, pulsante e cornice arrivavano in fondo; solo il testo no.

   Cinque regole lo stringevano, e nessuna stringeva quanto credeva chi
   l'aveva scritta (fra parentesi le lettere vere, contate a schermo):
     .gal-live-invito .gal-nota-stato   62ch  (87 lettere)
     .gal-live-condizione               72ch
     .gal-live-condizioni-chiusa        72ch  (100 lettere)
     .gal-live-condizioni-guida         72ch  (106 lettere)
     .gal-live-spazio-pieno             70ch  (98 lettere)
   Un «ch» e' largo quanto uno zero, e nel carattere del CRM lo zero e' piu'
   largo della lettera media: 1 ch = 1,40 lettere. Quei numeri promettevano
   62 e 72 lettere e ne lasciavano passare 87 e 106: erano gia' sbagliati
   per conto loro, e vanno riscritti in punti, non in «ch».

   COSA FA QUESTO BLOCCO. Un tetto solo per tutte e cinque: la larghezza
   piena del riquadro, e non oltre 950 punti.
     - fino a 1280 il testo riempie il riquadro: vuoto a destra ZERO;
     - sopra i 1280 il tetto tiene, e la riga non diventa un muro;
     - a 390 (telefono) vince il 100% e il tetto non morde: niente cambia;
     - essendo in punti e non in «ch», i cinque testi finiscono tutti alla
       STESSA distanza dal bordo, anche se hanno corpi diversi (12, 13 e
       13,5). Prima finivano a 468, 589, 594 e 611: quattro bordi diversi
       nella stessa pagina.

   PERCHE' NON SI TOGLIE OGNI LIMITE. Una riga da duecento lettere su un
   monitor grande si legge male davvero: tornando a capo l'occhio sbaglia
   riga. Il tetto non sparisce, si alza e si allinea.

   DOVE MORDE. Solo classi .gal-live-* del passo 5 delle gallerie. Questo
   foglio lo usano tutte le pagine del CRM, ma quelle classi compaiono solo
   in frontend/templates/gallerie.html dentro il passo 5.
   ========================================================================= */
.gal-live-invito .gal-nota-stato{max-width:min(100%,950px)}
.gal-live-condizione{max-width:min(100%,950px)}
.gal-live-condizioni-chiusa{max-width:min(100%,950px)}
.gal-live-condizioni-guida{max-width:min(100%,950px)}
.gal-live-spazio-pieno{max-width:min(100%,950px)}
/* ===== fine blocco 39101 ===== */


/* ===== inizio blocco 39700: MARCA_39700_QR_VERO_CLICCABILE ================
   «per l'anteprima del PDF fallo cliccabile, ma il QR code mostralo vero,
    non con sfondo nero che sembra errato» -- Giovanni, 7 settembre 2026.

   IL MAGAZZINO DEL CODICE non si vede e non occupa spazio. Non si usa
   display:none: un disegno nascosto cosi', in qualche browser, i pezzi
   che lo richiamano non riescono piu' a leggerlo. Si mette invece fuori
   dal flusso e largo zero, che e' il modo che funziona ovunque.

   LA FIGURINA CHE SI CLICCA e' un collegamento vero, non un disegno con
   sopra un gestore: percio' il dito cambia da solo, il tabulatore ci
   arriva e il tasto invio la apre, senza che qui si scriva una riga per
   ognuna di quelle cose. Qui sotto si aggiunge soltanto quello che si
   VEDE: il bordo che compare passandoci sopra, e l'anello quando ci
   arriva il tabulatore.

   IL BERSAGLIO NON SCENDE SOTTO I 44 PUNTI: e' la misura sotto la quale
   un dito sul telefono sbaglia. Il guscio ne misura gia' 56 per 58, ma
   il minimo va scritto lo stesso: il giorno che qualcuno stringe il
   guscio, si ferma qui.
   ========================================================================= */
.gal-qr-magazzino{
  position:absolute; width:0; height:0; overflow:hidden; pointer-events:none;
}

.gal-figurina-apre{
  display:flex; align-items:center; justify-content:center;
  color:inherit; text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:8px;
  transition:border-color .15s, background-color .15s;
}
.gal-figurina-apre:hover{ border-color:var(--accent); background:var(--sunken) }
.gal-figurina-apre:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.gal-stampabile-figura-guscio.gal-figurina-apre{ min-width:44px; min-height:44px }
a.gal-stile-anteprima-foglio{ min-width:44px; min-height:44px; padding:2px }

/* Le parole restano il collegamento di prima, e continuano a SCARICARE:
   chi cliccava sul nome per portare il foglio in tipografia non si
   accorge di niente. La figurina e' una strada in piu', non al posto. */
a.gal-stampabile-parole{ color:inherit; text-decoration:none }
/* ===== fine blocco 39700 ===== */

/* =========================================================================
   ===== inizio blocco 43700: MARCA_43700_RIQUADRO =====
   IL RIQUADRO DEL FOGLIO.

   TRE NUMERI, E DA DOVE VENGONO.

   z-index 880. Sotto ci sono le pagine e le barre (fino a 220), sopra
   restano il visore delle foto a tutto schermo (900) e le domande
   «sei sicuro?» (935). E' l'ordine giusto: una domanda deve poter
   comparire SOPRA questo riquadro, se no chi la fa non la vede.

   max-width 760. Il foglio piu' largo dei sei, coricato, sta in 620
   punti; con i margini fa 760. Piu' largo il riquadro si allargherebbe
   senza far vedere niente di piu'.

   100dvh e non 100vh. Sul telefono la barra dell'indirizzo si ritira
   mentre si scorre: con vh il riquadro resta alto come se la barra ci
   fosse ancora, e in fondo avanza una striscia vuota.

   IL FOGLIO SI RIMPICCIOLISCE DA SOLO ma non si sgrana: e' un disegno,
   non un'immagine. Il max-width serve alle finestre strette, dove il
   numero calcolato dal programma e' gia' giusto ma un carattere piu'
   grande del solito puo' spingere.
   ========================================================================= */

/* Le due figurine adesso sono <button>: senza questo il browser ci
   mette il suo sfondo grigio e il suo bordo, e la figurina che ieri
   era pulita oggi sembra un pulsante di sistema. */
button.gal-figurina-apre{
  background:none; padding:0; margin:0; font:inherit;
  -webkit-appearance:none; appearance:none;
}
button.gal-stile-anteprima-foglio{ min-width:44px; min-height:44px; padding:2px }

.gal-foglio-fondo{
  position:fixed; inset:0; z-index:880;
  background:rgba(15,14,13,.62);
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow:auto;
}
.gal-foglio-riquadro{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.34);
  width:100%; max-width:760px; max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column; overflow:hidden;
}
.gal-foglio-testata{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.gal-foglio-testata h3{ margin:0; font-size:16px; line-height:1.3 }
.gal-foglio-testata p{ margin:3px 0 0; font-size:12px; color:var(--ink-2) }
.gal-foglio-chiudi{
  margin-left:auto; flex:0 0 auto; min-width:44px; min-height:44px;
}
.gal-foglio-corpo{ padding:14px 16px; overflow:auto; flex:1 1 auto }
.gal-foglio-carta{ display:flex; justify-content:center }
.gal-foglio-carta svg{ display:block; max-width:100%; height:auto }
.gal-foglio-parole{ text-align:center; margin:8px 0 0 }
.gal-foglio-manopole{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  margin:14px 0 4px;
}
.gal-foglio-manopole label{ display:flex; flex-direction:column; gap:4px }
.gal-foglio-manopole input[type=color]{ width:64px; height:34px; padding:2px }
.gal-foglio-piede{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:12px 16px; border-top:1px solid var(--line);
  background:var(--sunken); flex:0 0 auto;
}
.gal-foglio-piede .gal-foglio-prendi{ margin-left:auto }

/* SUL TELEFONO i margini si stringono e i due pulsanti del piede
   vanno in fila piena: a 390 punti, affiancati, «Scarica il PDF»
   finirebbe a mandare a capo la freccia da sola. */
@media (max-width:720px){
  .gal-foglio-fondo{ padding:8px }
  .gal-foglio-riquadro{ max-height:calc(100dvh - 16px) }
  .gal-foglio-testata{ padding:12px }
  .gal-foglio-corpo{ padding:12px }
  .gal-foglio-piede{ padding:10px 12px }
  .gal-foglio-piede > *{ flex:1 1 100% }
  .gal-foglio-piede .gal-foglio-prendi{ margin-left:0 }
}
/* ===== fine blocco 43700 ===== */

/* == inizio consegna-39301: l'elenco dei file scelti ==
   I COLORI SONO QUELLI DEL TEMA, non colori scritti a mano: --surface,
   --line, --ink, --accent cambiano da soli quando si passa allo sfondo
   scuro. La prima stesura usava nomi inventati (--bordo, --sfondo-2) che
   in questo foglio non esistono: il risultato era un riquadro chiaro
   dentro la pagina scura, con il titolo quasi illeggibile. Trovato
   guardandolo, non leggendolo.

   content-visibility sulle righe: con 186 file il browser non calcola la
   posizione di quelle fuori schermo, e l'elenco compare in un battito. */
.gal-fila{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink);
  margin:12px 0; overflow:hidden;
}
.gal-fila-testa{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.gal-fila-testa strong{font-size:14px; color:var(--ink-strong)}
.gal-fila-conto{font-size:13px; color:var(--ink-3)}
.gal-fila-tasti{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap}
.gal-fila-righe{max-height:340px; overflow-y:auto}
.gal-fila-riga{
  display:flex; align-items:center; gap:10px; padding:5px 14px;
  font-size:13px; color:var(--ink); border-bottom:1px solid var(--line-soft);
  content-visibility:auto; contain-intrinsic-size:auto 30px;
}
.gal-fila-riga:last-child{border-bottom:0}
.gal-fila-segno{color:var(--ink-3); font-size:11px; flex-shrink:0}
.gal-fila-nome{
  flex:1 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.gal-fila-peso{
  flex:0 0 auto; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.gal-fila-barra{
  flex:0 0 90px; height:6px; border-radius:3px;
  background:var(--track); overflow:hidden;
}
.gal-fila-barra i{
  display:block; height:100%; width:0;
  background:var(--accent); transition:width .18s linear;
}
.gal-fila-x{
  flex:0 0 auto; border:0; background:transparent; cursor:pointer;
  font-size:19px; line-height:1; padding:0 6px; color:var(--ink-3);
}
.gal-fila-x:hover{color:var(--bad)}
.gal-fila-esito{flex:0 0 18px; text-align:center; font-weight:700}
.gal-fila-fatto .gal-fila-nome{color:var(--ink-3)}
.gal-fila-fatto .gal-fila-esito{color:var(--ok)}
.gal-fila-errore .gal-fila-esito{color:var(--bad)}
.gal-fila-errore .gal-fila-barra i{background:var(--bad)}
@media (max-width:640px){
  .gal-fila-barra{flex:0 0 54px}
  .gal-fila-tasti{margin-left:0; width:100%}
  .gal-fila-righe{max-height:260px}
}
/* == inizio consegna-46101: l'elenco regge un matrimonio intero ==

   --gal-riga-h E' LA FONTE UNICA dell'altezza di una riga. Il modello la
   moltiplica con calc() per gli spazi vuoti sopra e sotto, e il javascript
   la legge per sapere a che riga e' arrivato lo scorrimento. Misurata sul
   banco: 30,5 px sia a 1280 sia a 390 -- qui si fissa a 30 tondi perche'
   sui numeri interi il conto dello scorrimento non si sfilaccia lungo
   1.200 righe (mezzo pixel per riga sono 600 px di scarto in fondo).
   Se un giorno cambia, cambia QUI e la seguono da soli tutti e due. */
.gal-fila{--gal-riga-h:30px}
.gal-fila-riga{height:var(--gal-riga-h); box-sizing:border-box; overflow:hidden}
/* Gli spazi vuoti tengono la barra di scorrimento lunga quanto tutto
   l'elenco: senza, si scorrerebbero solo le venti righe disegnate. */
.gal-fila-spazio{flex:0 0 auto}

/* Il tasto che nasconde l'elenco. Sta in fila con gli altri della testa e
   non ruba spazio: e' una parola, non un riquadro. */
.gal-fila-piega{
  border:1px solid var(--line); background:transparent; color:var(--ink-3);
  border-radius:8px; padding:3px 10px; font-size:12px; cursor:pointer;
  flex:0 0 auto; margin-left:auto;
}
.gal-fila-piega:hover{color:var(--ink); border-color:var(--ink-3)}
.gal-fila-tasti + .gal-fila-piega{margin-left:0}

/* Quando l'elenco e' chiuso, a che punto e' si vede lo stesso: qui, e nella
   striscia qui sotto, che dicono lo stesso numero perche' lo prendono
   dallo stesso posto. */
.gal-fila-chiusa{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
/* IL CONTORNO NON E' UN ORNAMENTO. Senza, la pista della barra ha
   quasi lo stesso colore della testa dell'elenco (--track su
   --surface-2) e sparisce: a schermo restava solo il pezzo pieno, un
   trattino di sei pixel che sembrava una svista, non un avanzamento.
   Trovato guardando le schermate, chiaro e scuro, non leggendo il
   codice. Col contorno si vede quanto manca, che e' il punto. */
.gal-fila-chiusa-barra{
  display:block; flex:0 0 110px; width:110px; height:8px; border-radius:4px;
  background:var(--track); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
}
.gal-fila-chiusa-barra i{
  display:block; height:100%; width:0;
  background:var(--accent); transition:width .18s linear;
}
@media (max-width:640px){
  .gal-fila-piega{margin-left:0}
  .gal-fila-chiusa-barra{flex:0 0 70px; width:70px}
}
/* == fine consegna-46101 == */
/* == fine consegna-39301 == */

/* ====================================================================
   L'ANDAMENTO DI UNA GALLERIA NEL TEMPO  (blocco 45901)

   Solo var(--...), mai un colore scritto a mano: e' quello che fa
   funzionare il tema chiaro e quello scuro senza scrivere due volte le
   stesse regole. I tre colori delle linee non sono di gusto:
     aperture  -> il rame del marchio, perche' e' la misura principale;
     download  -> il blu, che nel CRM e' il colore di "vai a vedere";
     preferiti -> il verde del cuore pieno (.gal-cuore-pieno) che il
                  cliente vede dentro la galleria: la stessa cosa e' dello
                  stesso colore in tutte e due le pagine.
   Ognuna ha anche un tratto diverso -- pieno, tratteggiato, punteggiato --
   cosi' si distinguono stampate in bianco e nero e da chi non separa
   bene i colori.

   NIENTE LIBRERIA DI GRAFICI. Il disegno e' un `path` di SVG costruito
   in gallerie-manager.js: e' la stessa strada delle colonnine di prima
   (disegnate a mano), con l'attrezzo giusto -- coi `div` una linea non
   si disegna. La piu' piccola libreria che fa questo lavoro (uPlot)
   pesa 47 KB, Chart.js 210: per tre linee sarebbe la coda che
   scodinzola il cane.
   ==================================================================== */

.gal-and{margin-top:18px}

.gal-and-testa{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px 14px; flex-wrap:wrap;
}
.gal-and-testa .gal-stat-titolo-grafico{margin:0}
.gal-and-comandi{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
/* I pulsanti a segmenti sono quelli del calendario e dei documenti
   (.seg-group), non un modo nuovo di fare la stessa cosa. */
.gal-and-seg .btn{white-space:nowrap}

/* ---- la legenda, che e' fatta di interruttori ---- */
.gal-and-legenda{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 10px}
.gal-and-voce{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; min-height:34px;
  border:1px solid var(--line); border-radius:var(--r-gg);
  background:var(--surface); color:var(--ink-3);
  font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background var(--tr), color var(--tr),
                             border-color var(--tr);
}
.gal-and-voce:hover{border-color:var(--line-strong); color:var(--ink-2)}
.gal-and-voce:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Spenta il segno resta, sbiadito: si deve capire che la linea esiste e
   che e' stata spenta, non che non esiste. */
.gal-and-voce .gal-and-segno{opacity:.35}
.gal-and-voce.accesa{
  background:var(--surface-2); border-color:var(--line-strong);
  color:var(--ink-strong);
}
.gal-and-voce.accesa .gal-and-segno{opacity:1}
.gal-and-tot{font-family:var(--font-display); font-size:14px; font-weight:800}

/* Il segnetto colorato: una riga alta 0, col bordo del tratto giusto. */
.gal-and-segno{
  width:18px; height:0; flex:0 0 18px;
  border-top:2.5px solid var(--c, var(--accent));
}
.gal-and-segno-aperture{--c:var(--accent); border-top-style:solid}
.gal-and-segno-download{--c:var(--info);   border-top-style:dashed}
.gal-and-segno-scelte  {--c:var(--ok);     border-top-style:dotted}

/* ---- il telaio del disegno ---- */
.gal-and-telaio{position:relative}
.gal-and-tela{
  position:relative; height:190px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden;
  cursor:crosshair; touch-action:pan-y;
}
.gal-and-tela:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gal-and-svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}

/* LE LINEE. vector-effect tiene lo spessore uguale a qualsiasi
   larghezza: senza, il disegno stirato le fa diventare capelli su uno
   schermo largo e travi su un telefono. */
.gal-and-tracciato{
  fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.gal-and-t-aperture{stroke:var(--accent)}
.gal-and-t-download{stroke:var(--info); stroke-dasharray:7 4}
.gal-and-t-scelte  {stroke:var(--ok);   stroke-dasharray:2 4; stroke-width:2.4}
.gal-and-area{fill:var(--accent); opacity:.14; stroke:none}
.gal-and-riga{
  stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke;
}
.gal-and-base{
  stroke:var(--line-strong); stroke-width:1; vector-effect:non-scaling-stroke;
}

/* ---- la zona in cui il CRM non contava ancora ----
   Tratteggio obliquo, non un colore pieno: un colore pieno sembrerebbe
   un'altra misura. Il tratteggio dice "qui non c'e' niente da leggere". */
.gal-and-banda{
  position:absolute; left:0; top:0; bottom:0; z-index:1;
  border-right:1px dashed var(--line-strong);
  background:repeating-linear-gradient(-45deg,
    transparent 0 5px, var(--line) 5px 6px);
  /* In BASSO, non in alto: in alto a sinistra c'e' gia' il numero
     della scala, e le due scritte si mangiavano a vicenda. */
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:8px; pointer-events:none; overflow:hidden;
}
.gal-and-banda-testo{
  font-size:10.5px; font-weight:700; letter-spacing:.03em;
  color:var(--ink-3); background:var(--surface-2);
  padding:2px 6px; border-radius:var(--r-s);
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* ---- quando non c'e' proprio niente ---- */
.gal-and-vuoto{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:0 14px; text-align:center;
  font-size:12.5px; font-style:italic; color:var(--ink-3);
  pointer-events:none;
}

/* ---- il filo verticale sotto il dito ---- */
.gal-and-filo{
  position:absolute; top:0; bottom:0; width:1px; z-index:3;
  background:var(--ink-3); opacity:.5; pointer-events:none;
}
.gal-and-pallino{
  position:absolute; left:0; width:9px; height:9px; border-radius:50%;
  transform:translate(-4px, -4.5px);
  background:var(--c, var(--accent));
  border:2px solid var(--surface-2);
}

/* ---- le date sotto ---- */
.gal-and-date{position:relative; height:18px; margin-top:6px}
.gal-and-data{
  position:absolute; top:0; transform:translateX(-50%);
  font-size:11px; color:var(--ink-3); white-space:nowrap;
}
/* Le due estreme non devono uscire dalla carta: si spostano di meno,
   non del mezzo pieno. */
.gal-and-data-inizio{transform:translateX(-22%)}
.gal-and-data-fine{transform:translateX(-78%)}

/* ---- la riga che si legge col dito ----
   Altezza minima fissa: senza, comparendo e sparendo farebbe ballare
   tutta la pagina sotto. */
.gal-and-lettura{
  min-height:34px; margin:9px 0 0; padding:7px 10px;
  font-size:13px; line-height:1.4; color:var(--ink-2);
  background:var(--accent-soft); border-radius:var(--r-s);
}
.gal-and-lettura strong{color:var(--ink-strong)}
.gal-and-lettura-intro{color:var(--ink-3)}
.gal-and-incorso{color:var(--ink-3); font-size:12px}

/* ---- il numero piu' alto del periodo ---- */
.gal-and-scala{
  position:absolute; left:9px; top:7px; z-index:2;
  font-family:var(--font-display); font-size:11.5px; font-weight:800;
  color:var(--ink-3); background:var(--surface-2);
  padding:1px 5px; border-radius:6px;
}

/* ====================== SUL TELEFONO ======================
   Misurato a 390 punti. Tre cose cambiano, e sono tre decisioni:
   1. IL DISEGNO SI ABBASSA a 140 punti: la carta delle statistiche e'
      gia' lunga, e la forma di una curva si legge lo stesso.
   2. LE DATE DIVENTANO TRE. Cinque date da 40 punti l'una dentro 330
      punti si sovrappongono e diventano una riga di trattini: si
      nascondono la seconda e la quarta e restano l'inizio, la meta' e
      la fine. Si fa qui e non in JavaScript apposta: cosi' non c'e'
      niente da ricalcolare quando si gira il telefono.
   3. I PULSANTI VANNO A CAPO E RIEMPIONO LA RIGA, cosi' ognuno resta
      largo abbastanza da centrarlo col pollice.
   Il grafico si legge col dito trascinandolo sopra: e' per questo che
   la riga di lettura sta sotto e non e' un tooltip. */
@media (max-width:640px){
  .gal-and-tela{height:140px}
  .gal-and-comandi{margin-left:0; width:100%}
  .gal-and-seg{flex:1 1 100%}
  .gal-and-seg .btn{flex:1 1 0; justify-content:center; padding:5px 4px}
  .gal-and-data-tra{display:none}
  .gal-and-legenda{gap:6px}
  .gal-and-voce{font-size:12px; padding:5px 9px}
  .gal-and-banda-testo{font-size:9.5px; padding:2px 4px}
}

/* Chi ha chiesto meno animazioni non le vuole nemmeno qui. */
@media (prefers-reduced-motion:reduce){
  .gal-and-voce{transition:none}
}

/* === inizio blocco 47101 =================================================
   IL VESTITO SENZA COPERTINA

   IL PROBLEMA. Una galleria per Live Moments nasce PRIMA della festa:
   zero foto, e quindi nessuna copertina possibile. La copertina pero'
   si disegnava lo stesso: uno schermo intero alto 100svh, di fondo
   --fisso-s-ground (quasi nero, fisso in tutti e due i temi) e sopra
   .gal-apertura-velo, che e' una sfumatura NERA. Quel velo serve a far
   leggere il nome sopra una fotografia; senza fotografia e' solo buio.
   Su una galleria a fondo chiaro il risultato era una lastra nera
   sotto una barra color panna.

   LA COPERTINA NON SI INVENTA. La prima foto degli invitati NON diventa
   la copertina, e non deve: non si sa come sia, e una foto scelta a
   caso si taglia male perche' il riquadro ha proporzioni diverse sul
   telefono e sul computer. Si costruisce invece un vestito che la
   copertina non ce l'ha proprio -- chiaro e scuro, come li ha chiesti
   Giovanni: "sul bianco con logo fotografo, e sul nero sempre con
   sfumatura".

   NON CAMBIA DA SOLO durante la festa: le foto degli invitati stanno
   in live_caricamenti, una tabella tutta loro, e la copertina non le
   guarda nemmeno. Il vestito e' lo stesso prima e durante.

   TUTTO IN VARIABILI GIA' ESISTENTI (--ground, --ink-strong, --ink-3),
   percio' le tre situazioni -- sfondo automatico, "sempre chiaro",
   "sempre scuro" -- funzionano senza una seconda tavolozza da tenere
   allineata a mano: le classi gal-sfondo-chiaro/gal-sfondo-scuro sul
   <body> ridefiniscono gia' quelle variabili.

   IN CODA AL FOGLIO come tutti gli altri blocchi, cosi' vince per
   ordine sulle regole della copertina normale senza riscriverne
   nessuna: una galleria che la copertina ce l'ha non cambia di un
   punto.
   ========================================================================= */

/* NON ALTA UNO SCHERMO INTERO. Una fotografia si merita tutto lo
   schermo; una sfumatura no. Poco piu' di meta' schermo dice "questa
   e' l'apertura" e lascia vedere che sotto la pagina continua -- che
   su una galleria vuota e' proprio l'informazione che serve.
   IL TESTO TORNA AL CENTRO: il blocco 28501 lo mette in basso a
   sinistra perche' li' la fotografia non ha il soggetto. Senza
   fotografia il posto giusto e' il centro, come il frontespizio di un
   libro. */
.gal-apertura-nuda{height:auto;min-height:min(62svh,560px);
  padding:clamp(56px,11vh,110px) 0;
  background:var(--ground);place-items:center}

.gal-apertura-nuda .gal-apertura-testo{align-items:center;text-align:center;
  padding:0 clamp(22px,6vw,48px);max-width:min(680px,88vw);gap:22px}

/* LA SFUMATURA. E' lo stesso elemento del velo, ridipinto: senza
   fotografia sotto non c'e' niente da far leggere, quindi al posto del
   nero ci va la sfumatura che Giovanni ha chiesto. Un alone caldo dal
   basso -- il rame del marchio, appena accennato: --brand e' scritto in
   cima al foglio e NON cambia col tema, percio' la stessa sfumatura sta
   bene sul chiaro e sullo scuro.

   PRIMA I COLORI FISSI, POI color-mix() dentro @supports. Un
   color-mix() che il browser non capisce non ricade sul valore di
   prima: sparisce, e resterebbe il nero della copertina normale --
   cioe' esattamente il difetto da chiudere. E' la stessa cautela
   scritta in cima a questo foglio per le tinte del tema. */
.gal-apertura-nuda .gal-apertura-velo{
  background:radial-gradient(ellipse 118% 60% at 50% 40%,
    rgba(143,97,38,.15) 0%, rgba(143,97,38,.05) 44%, transparent 72%)}
@supports (background:color-mix(in srgb, red 10%, transparent)){
  .gal-apertura-nuda .gal-apertura-velo{
    background:
      radial-gradient(ellipse 118% 60% at 50% 40%,
        color-mix(in srgb, var(--brand) 18%, transparent) 0%,
        color-mix(in srgb, var(--brand) 6%, transparent) 44%,
        transparent 72%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--brand) 7%, transparent) 0%,
        transparent 58%)}}

/* LA SFUMATURA DEL BLOCCO 12501 QUI NON SERVE, e fa danno. Serve a
   dissolvere l'ULTIMO TERZO DELLA FOTOGRAFIA nel colore della pagina:
   senza fotografia dipinge il colore della pagina sopra il colore
   della pagina, e l'unica cosa che riesce a coprire e' meta' della
   sfumatura qui sopra -- che finiva tagliata di netto a mezza altezza,
   con una fascia grigia visibile. Visto sul banco, guardando. */
.gal-apertura-nuda .gal-apertura-sfuma{display:none}

/* IL NOME E LA DATA prendono l'inchiostro della pagina, non il bianco
   fisso della copertina normale: li' il bianco e' obbligatorio perche'
   sotto c'e' una fotografia, qui sotto c'e' il fondo della pagina. Col
   bianco fisso, su "sempre chiaro", il nome dell'evento sparirebbe. */
.gal-apertura-nuda .gal-apertura-nome{color:var(--ink-strong);
  text-shadow:none;max-width:20ch}
.gal-apertura-nuda .gal-apertura-data{color:var(--ink-3);text-shadow:none}

/* IL MARCHIO SENZA LA PASTIGLIA. La pastiglia scura sfocata serve a
   staccare il logo da una fotografia: qui sotto non c'e' nessuna
   fotografia, e una pastiglia nera su fondo panna diventa un adesivo. */
.gal-apertura-nuda .gal-marchio{background:none;border:0;padding:0;
  backdrop-filter:none}
.gal-apertura-nuda .gal-marchio-img{width:min(210px,52vw)}

/* La freccia in fondo: bianca su fondo chiaro non si vede. Prende
   l'inchiostro della pagina come tutto il resto, col colore pieno
   scritto prima per i browser senza color-mix(). */
.gal-apertura-nuda .gal-apertura-giu{background:transparent;
  color:var(--ink);border:1px solid var(--line)}
@supports (background:color-mix(in srgb, red 10%, transparent)){
  .gal-apertura-nuda .gal-apertura-giu{
    background:color-mix(in srgb, var(--ink-strong) 8%, transparent)}
  .gal-apertura-nuda .gal-apertura-giu:hover{
    background:color-mix(in srgb, var(--ink-strong) 16%, transparent)}}

/* Dal telefono la copertina normale prende molta aria in basso (blocco
   28501) perche' il testo sta appoggiato al fondo. Qui il testo sta al
   centro: quell'aria non serve e lascerebbe un buco. */
@media (max-width:640px){
  .gal-apertura-nuda{min-height:min(58svh,480px)}
  .gal-apertura-nuda .gal-apertura-testo{padding-bottom:0;gap:18px}
  .gal-apertura-nuda .gal-apertura-nome{max-width:16ch}}

/* Telefono girato di lato: schermo alto 390 punti. Il minimo di 520
   della copertina normale li' mangia tutto e la freccia finisce fuori. */
@media (max-height:640px){
  .gal-apertura-nuda{min-height:min(80svh,340px);
    padding:clamp(30px,7vh,56px) 0}
  .gal-apertura-nuda .gal-marchio-img{width:min(160px,40vw)}}

/* LA RIGA CHE SI LEGGE SU UNA GALLERIA ANCORA VUOTA. Non e' un
   messaggio d'errore e non deve sembrarlo: e' un'attesa. Sta al centro,
   con l'aria intorno, come la frase della raccolta Live Moments. */
.gal-vuoto-attesa{max-width:44ch;margin:clamp(40px,9vh,90px) auto;
  text-align:center;color:var(--ink-2);line-height:1.6}
/* === fine blocco 47101 === */

/* =========================================================================
   blocco 47303 -- LA RIGA DELLA SCADENZA
   -------------------------------------------------------------------------
   In fondo al foglio di proposito: si aggiunge, non si cambia niente di
   quello che c'e' sopra. Su queste pagine stanno lavorando altre
   consegne oggi.

   NON E' UN AVVISO E NON DEVE SEMBRARLO. Niente fondo colorato, niente
   bordo, niente rosso, nessuna iconcina: e' una riga di testo del colore
   dei testi secondari, come la riga di istruzioni poco piu' sopra. Un
   riquadro giallo sotto i pulsanti del download direbbe «e' successo
   qualcosa», e non e' successo niente -- e' solo un'informazione che
   fino a ieri il cliente non aveva.
   ========================================================================= */
.gal-scadenza{
  /* 480 e non 420: a 420 la frase piu' lunga andava a capo su
     "Ancora 11 giorni / per scaricarle", spezzando in due una cosa che
     si legge in un colpo. Visto a 1280, non calcolato. */
  max-width:480px; margin:12px auto 6px;
  text-align:center; font-size:13px; line-height:1.55;
  color:var(--ink-3);
}


/* =====================================================================
   blocco 47500 -- IL CARTELLO DELLA RACCOLTA (MARCA_47500_LOGO_STATO_TASTO)

   E' la prima cosa del passo 5. Non e' un avviso di errore e non e' un
   comando: e' un cartello, e si legge da lontano perche' durante una
   festa nessuno si mette a leggere.

   I COLORI SONO DUE, non tre: aperta (verde) e chiusa (ambra). Il rosso
   e' tenuto per i guasti veri -- una raccolta chiusa perche' la festa e'
   finita non e' un guasto.
   ===================================================================== */
.gal-live-cartello{display:flex;align-items:flex-start;gap:12px;
  margin:15px 0 0;padding:14px 16px;border-radius:10px;
  border:1px solid transparent}
.gal-live-cartello-pallino{flex:0 0 auto;width:14px;height:14px;
  margin-top:6px;border-radius:50%;background:currentColor}
.gal-live-cartello-testo{min-width:0}
.gal-live-cartello strong{display:block;font-size:20px;line-height:1.25}
.gal-live-cartello-sotto{display:block;margin-top:4px;font-size:14px;
  line-height:1.45;opacity:.9}
.gal-live-cartello-aperta{color:#1c6b3a;background:#e8f6ed;
  border-color:#bfe3cd}
.gal-live-cartello-chiusa{color:#7a4a12;background:#fdf3e3;
  border-color:#f0d9b2}

/* Al buio gli stessi due colori, ma tenuti: un fondo verde chiaro su
   una pagina scura acceca. Le due regole sono quelle di casa -- la
   scelta a mano vince sempre sul telefono (vedi :root in cima). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gal-live-cartello-aperta{
    color:#9be0b4;background:#15291d;border-color:#2c5a3d}
  :root:not([data-theme="light"]) .gal-live-cartello-chiusa{
    color:#f0c88a;background:#2b2113;border-color:#5c4522}
}
:root[data-theme="dark"] .gal-live-cartello-aperta{
  color:#9be0b4;background:#15291d;border-color:#2c5a3d}
:root[data-theme="dark"] .gal-live-cartello-chiusa{
  color:#f0c88a;background:#2b2113;border-color:#5c4522}

/* Sul telefono la scritta scende di tre punti e il riquadro si stringe:
   misurato a 390 px, "La raccolta Live Moments e' APERTA" sta su due
   righe e non tocca i bordi. */
@media (max-width:520px){
  .gal-live-cartello{padding:12px 13px;gap:10px}
  .gal-live-cartello strong{font-size:17px}
  .gal-live-cartello-pallino{width:12px;height:12px;margin-top:4px}
}


/* == inizio blocco 47710: MARCA_47710_LETTERA_AGLI_SPOSI ==================
   LA LETTERA DEL FOTOGRAFO AGLI SPOSI, in cima alla galleria.

   NIENTE COLORI SCELTI A MANO, ED E' UNA SCELTA MISURATA. Il
   concorrente fa scegliere il colore del testo e quello dello sfondo.
   Qui la galleria ha quattro temi per due sfondi, piu' il caso in cui
   segue il dispositivo di chi guarda: nessuna coppia di colori scelta
   una volta sola puo' essere leggibile in tutte e otto le combinazioni.
   E non e' teoria: qui sopra i temi della galleria fissano --accent a
   un colore scuro (.gal-tema-semplice{--accent:#2B2B33}) e lo sfondo
   scuro non lo ridefinisce -- quel colore su --sunken scuro (#2c231a)
   fa circa 1,05 a 1, cioe' non si vede. Se un colore fisso puo' sparire
   da solo, due colori scelti a mano lo faranno di sicuro.

   Quindi qui si usano SOLO le quattro variabili che usa gia' il
   riquadro dell'anteprima -- --ink, --ink-2, --line, --sunken -- che
   sono definite in tutti i temi, in chiaro e in scuro, coi rapporti di
   contrasto scritti accanto (--ink 14,21:1 in scuro, --ink-2 6,90:1).

   DUE FILETTI E BASTA, non una scatola piena. Una scatola colorata in
   mezzo alle fotografie diventa un cartello; due righe sottili sopra e
   sotto sono il modo in cui si stacca un testo dentro un libro.

   white-space:pre-line SERVE: una lettera va a capo dove ha deciso chi
   l'ha scritta -- il saluto sulla sua riga, la firma sulla sua. Senza,
   diventa un paragrafo unico. */
.gal-lettera{max-width:56ch;margin:0 auto 44px;padding:26px 20px 28px;
  text-align:center;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.gal-lettera-titolo{margin:0 0 14px;font-size:11.5px;font-weight:600;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--ink-2)}
.gal-lettera-testo{margin:0;color:var(--ink);font-size:15.5px;
  line-height:1.9;white-space:pre-line;text-wrap:pretty}

/* Sul telefono la lettera sta gia' larga quanto lo schermo: i fianchi
   servono solo a non attaccare il testo al bordo. */
@media (max-width:640px){
  .gal-lettera{margin:0 auto 32px;padding:22px 2px 24px}
  .gal-lettera-titolo{font-size:11px;letter-spacing:.22em;text-indent:.22em}
  .gal-lettera-testo{font-size:14.5px;line-height:1.85}
}
/* == fine blocco 47710 == */


/* == inizio blocco 51705: MARCA_51705_GALLERIA_INCORPORATA ==============
   LA GALLERIA DENTRO LA FINESTRA DI UN ALTRO SITO.

   QUESTO NON E' UN VESTITO: E' LA META' DELLA SICUREZZA. Chi apre una
   pagina dentro una sua finestra puo' metterci sopra dei pulsanti finti
   e far cliccare a un ignaro qualcosa che non voleva. Con display:none
   quei pulsanti non ci sono proprio -- non sono trasparenti, non sono
   coperti: nessun clic li puo' raggiungere.

   Chi vuole scaricare o scegliere apre la galleria vera, dal
   collegamento in cima (.gal-incorporata-uscita).

   NIENTE DI TUTTO QUESTO TOCCA LA GALLERIA NORMALE: la classe
   gal-incorporata sta sul corpo della pagina solo quando l'indirizzo
   dice ?incorpora=1.
   ======================================================================= */

/* Lo scarico, in tutte le forme in cui compare: il pulsante in cima, le
   due tessere grandi e il collegamento sotto un filmato. */
.gal-incorporata .gal-scarica-menu,
.gal-incorporata .gal-scarico,
.gal-incorporata .gal-due-scarichi,
.gal-incorporata .gal-scarica,
.gal-incorporata .gal-scarica-foto{display:none!important}

/* La scelta delle foto del cliente: il cuore sulla tessera, il cuore
   dentro il visore, e -- QUESTA E' LA RIGA TROVATA GUARDANDO -- la
   frase che dice «tocca il cuore sulle foto che vuoi». Nascondere i
   cuori e lasciare l'istruzione vuol dire mandare il cliente a cercare
   un pulsante che non c'e': e' lo stesso difetto che il blocco degli
   invitati aveva gia' avuto una volta, per lo stesso motivo. */
.gal-incorporata .gal-cuore,
.gal-incorporata .gal-visore-cuore,
.gal-incorporata .gal-guida{display:none!important}

/* Il Condividi e la parte degli invitati: dentro la finestra di un
   altro sito non si manda niente a nessuno e non si carica niente. */
.gal-incorporata .gal-condividi-menu,
.gal-incorporata .gal-visore-condividi,
.gal-incorporata .gal-ospiti-apri,
.gal-incorporata .gal-ospiti-carica{display:none!important}

/* La via d'uscita: una riga sottile, non un pulsante. Dentro una
   finestra di 600 punti d'altezza ogni riga in piu' e' una riga di foto
   in meno. */
.gal-incorporata-uscita{margin:0 0 18px;text-align:center;
  font-size:12.5px;letter-spacing:.02em}
.gal-incorporata-uscita a{color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line)}
.gal-incorporata-uscita a:hover{color:var(--ink);border-bottom-color:var(--ink-2)}

/* LA FORMA COMPATTA: niente logo, nomi e data -- e' la differenza fra
   le due tessere del pannello. La copertina resta: senza, la finestra
   comincerebbe con una riga di miniature e non si capirebbe di che
   lavoro si tratta. */
.gal-incorporata-nuda .gal-fissa,
.gal-incorporata-nuda .gal-apertura-nome,
.gal-incorporata-nuda .gal-apertura-data,
.gal-incorporata-nuda .gal-marchio{display:none!important}

/* LA COPERTINA NON SI PRENDE TUTTA LA FINESTRA, ed e' un difetto visto
   con gli occhi, non immaginato. Normalmente .gal-apertura e' alta
   100svh con un minimo di 520 punti: dentro un iframe da 600 punti
   quello vuol dire che si vede LA SOLA COPERTINA, e le fotografie
   stanno sotto una piega che nessuno scorre. Un incorporamento che
   mostra una fotografia sola non serve a niente.

   46svh: poco meno di meta' finestra. Resta abbastanza da capire di che
   lavoro si tratta, e subito sotto comincia la galleria. Il minimo
   scende da 520 a 180 perche' 520 dentro una finestra da 600 e' di
   nuovo tutta la finestra. */
.gal-incorporata .gal-apertura{height:46svh;min-height:180px}
.gal-incorporata .gal-corpo-foto{padding-top:18px}
/* == fine blocco 51705 == */

/* == inizio blocco 67800: MARCA_67800_AUGURI_IFRAME ======================
   "I COMMENTI SONO IN UN IFRAME E SI MUOVONO MALE" -- Giovanni, 9
   settembre 2026.

   IL DIFETTO: .gal-libro-scroll (blocco 67401, piu' su in questo foglio)
   da' alla lista degli auguri un'altezza massima di 60/100 dello schermo
   con uno scorrimento SUO. Dentro un iframe questo crea DUE posti che
   scorrono uno dentro l'altro -- la lista e la finestra dell'iframe, che
   ha quasi sempre un'altezza fissa decisa da chi incorpora, non dal
   contenuto vero. Il dito non sa piu' quale dei due muovere: e' il "si
   muovono male" di Giovanni, riprodotto con un iframe vero (vedi
   67800-appunti.md).

   LA CURA: dentro l'iframe lo scorrimento interno si toglie del tutto.
   Resta un solo posto che scorre: la pagina del sito che ospita. Per non
   tornare pero' alle 14 schermate di solo testo che avevano fatto
   nascere .gal-libro-scroll (SEGNO_33701_auguri) la lista si mostra otto
   auguri alla volta, con un tasto "Carica altri" (galleria-cliente.js,
   augoriMostrati). FUORI dall'iframe (pagina intera, gia' collaudata)
   questa regola non tocca niente: lo scorrimento interno resta com'era. */
.gal-incorporata .gal-libro-scroll{
  max-height:none;overflow-y:visible;overscroll-behavior:auto;
  padding-right:0;-webkit-overflow-scrolling:auto
}
.gal-libro-carica-altri{
  display:block;width:100%;margin-top:10px;padding:10px 16px;
  border:1px solid var(--line);border-radius:999px;background:none;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:border-color .15s ease,color .15s ease
}
.gal-libro-carica-altri:hover{border-color:var(--accent);color:var(--accent)}
.gal-libro-carica-altri:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* == fine blocco 67800 == */


/* == inizio blocco 51703: MARCA_51703_COLORI_DELLA_LETTERA ==============
   LA LETTERA CON I SUOI DUE COLORI.

   SI ACCENDE SOLO QUANDO CI SONO TUTTI E DUE. Senza la classe qui sotto
   la lettera resta identica a prima: due filetti e l'inchiostro del
   tema. E' quello che vedono tutte le gallerie gia' fatte.

   I due valori arrivano dal server come variabili sull'elemento
   (--let-ink e --let-fondo), gia' ripuliti e gia' misurati: sotto 4,5 a
   1 di contrasto non arrivano proprio. Qui non si controlla niente e
   non si corregge niente -- se il colore fosse sbagliato, correggerlo
   di nascosto vorrebbe dire far vedere a Giovanni una cosa e al cliente
   un'altra.

   I FILETTI SPARISCONO e al loro posto c'e' un riquadro: due filetti del
   colore del tema attaccati a un fondo scelto a mano sarebbero l'unica
   cosa della lettera che continua a cambiare col tema di chi guarda.
   Il riquadro e' un'isola: dentro non entra niente.

   NIENTE @media PER LO SCURO, ed e' voluto: sono i colori che Giovanni
   ha scelto guardandoli, e cambiarli sotto il tema scuro vorrebbe dire
   mostrargli una lettera che il cliente non vedra' mai. Il fondo del
   riquadro li tiene leggibili da soli.
   ======================================================================= */
.gal-lettera-tinta{
  background:var(--let-fondo);
  border:0;border-radius:var(--r-m);
  padding:30px 26px 32px}
.gal-lettera-tinta .gal-lettera-titolo{color:var(--let-ink);opacity:.72}
.gal-lettera-tinta .gal-lettera-testo{color:var(--let-ink)}

@media (max-width:640px){
  /* Sul telefono il riquadro sta largo quanto lo schermo meno un dito:
     un fondo colorato attaccato ai bordi sembra un errore di stampa. */
  .gal-lettera-tinta{margin:0 14px 32px;max-width:none;
    padding:24px 18px 26px}
}
/* == fine blocco 51703 == */


/* == inizio blocco 46500: MARCA_46500_TRENTA_SECONDI ======================
   L'INDIRIZZO GRANDE, LA MANOPOLA NUOVA E IL CASSETTO.

   Tutti i colori passano dalle variabili di casa, quelle che cambiano
   da sole col tema scuro: qui dentro non c'e' nemmeno un colore
   scritto a mano. L'unica eccezione e' il fondo bianco del quadratino,
   che sta gia' scritto piu' su e per la stessa ragione -- una
   fotocamera non legge un codice chiaro su fondo scuro.
   ======================================================================= */
.gal-uno-indirizzo{
  margin:12px 0 0; padding:14px 16px;
  border:1.5px solid var(--accent); border-radius:var(--r-m);
  background:var(--accent-soft);
}
.gal-uno-questo{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:7px;
}
/* L'INDIRIZZO SI DEVE LEGGERE DA UN METRO. Era 13.5px dentro una riga
   grigia; qui e' il motivo per cui si e' aperta la pagina. */
.gal-uno-url{
  display:block; width:100%;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:8px; padding:12px 13px;
  font-size:16px; line-height:1.45; word-break:break-all;
  color:var(--ink-strong); font-weight:600;
}
.gal-uno-tasti{display:flex; flex-wrap:wrap; gap:9px; margin-top:11px}
.gal-uno-altro{
  margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--ink-2);
}
.gal-uno-altro code{
  font-size:11.5px; padding:1px 5px; border-radius:5px;
  background:var(--sunken); color:var(--ink-strong);
}
/* Il riquadro del quadratino sta STRETTO intorno a quello che ha
   dentro. Largo tutta la riga con una frase sola diventava un
   rettangolo grigio mezzo vuoto: sembrava che mancasse qualcosa. */
.gal-uno-qr{margin-top:12px; align-items:center; width:fit-content;
  max-width:100%}
.gal-uno-qr .gal-nota-stato{flex:1 1 210px; max-width:330px; margin:0}

/* «Adesso: ...» -- la riga che dice cosa succede davvero, non cosa e'
   stato scelto. Verde quando il pulsante c'e' sul serio. */
.gal-uno-adesso{
  margin-top:11px; padding:9px 12px; border-radius:8px;
  background:var(--sunken); border-left:3px solid var(--line-strong);
}
.gal-uno-adesso-si{border-left-color:var(--ok)}

/* IL CASSETTO. Il tasto e' largo tutta la riga e ha due righe di
   testo: la seconda dice cosa c'e' dentro, se no «Altre impostazioni»
   e' una scatola chiusa e nessuno la apre. */
.gal-live-rifiniture{margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line)}
.gal-rifiniture-tasto{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  width:100%; text-align:left; padding:12px 15px 12px 34px; height:auto;
  position:relative;
  /* I tasti di casa hanno il testo su una riga sola (white-space:nowrap):
     qui dentro ce ne sono due, e la seconda e' lunga. Senza questa riga
     a 390 punti sbordava fuori dallo schermo -- visto, non dedotto. */
  white-space:normal;
}
/* LA FRECCIA. Un riquadro con dentro due righe di testo non si legge
   come un tasto che si apre: la freccia lo dice, e gira quando e'
   aperto. E' disegnata col testo (nessun file, nessun carattere in
   piu') e non la legge il lettore di schermo, che ha gia' la sua
   risposta in aria-expanded. */
.gal-rifiniture-tasto::before{
  content:"\25B8"; position:absolute; left:15px; top:13px;
  font-size:13px; color:var(--accent-ink);
  transition:transform .16s ease;
}
.gal-rifiniture-tasto[aria-expanded="true"]::before{
  transform:rotate(90deg);
}
.gal-rifiniture-sotto{
  font-size:11.5px; font-weight:400; color:var(--ink-3); line-height:1.4;
}
/* Dentro il cassetto il primo riquadro non deve avere la righina in
   cima: ce l'ha gia' il cassetto. */
#gal-rifiniture-dentro > .gal-live-parte:first-child{
  margin-top:16px; padding-top:0; border-top:0;
}
.gal-live-qr-grezzi{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:11px 0;
}
.gal-live-qr-grezzi .gal-nota-stato{margin:0}


/* == inizio blocco 57901: MARCA_57901_INDIRIZZO_IN_PROPORZIONE ============
   L'INDIRIZZO IN PROPORZIONE.

   .gal-uno-indirizzo, .gal-uno-questo, .gal-uno-url e .gal-uno-tasti non
   li usa piu' nessuno: l'indirizzo adesso e' la riga di casa
   (.gal-vetrina-link, definita piu' su). Le loro regole restano dov'erano
   e non danno fastidio a nessuno -- toglierle sarebbe un secondo cambio
   dentro un file che ne sta gia' ricevendo uno.

   QUI SOTTO C'E' SOLO QUELLO CHE SERVE ALLA RIGA NUOVA, e non c'e'
   nemmeno un colore scritto a mano: tutto passa dalle variabili di casa,
   che cambiano da sole col tema scuro.
   ======================================================================= */
.gal-uno-riga{margin-top:12px}
/* Il quadratino e la riga che spiega, AFFIANCATI. In fila prendevano due
   volte l'altezza per dire la stessa cosa. Sotto i 640 punti tornano uno
   sopra l'altro: affiancati sul telefono il quadratino diventerebbe un
   francobollo. */
.gal-uno-sotto{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  margin-top:12px;
}
.gal-uno-sotto > .gal-uno-qr{margin-top:0; flex:0 0 auto}
.gal-uno-sotto > .gal-uno-altro{
  flex:1 1 240px; margin:0; align-self:center;
}
/* Il quadratino della riga: piu' piccolo di quello dei fogli grezzi.
   Qui serve a controllare che porti dove deve, non a essere stampato. */
.gal-uno-qr .gal-live-qr-immagine{width:104px; height:104px}
.gal-uno-qr .gal-nota-stato{flex:1 1 160px; max-width:250px}

@media (max-width:640px){
  .gal-uno-sotto{gap:12px}
  .gal-uno-sotto > .gal-uno-qr{width:100%}
  .gal-uno-sotto > .gal-uno-altro{flex:1 1 100%}
}
/* == fine blocco 57901 == */

@media (max-width:640px){
  .gal-uno-indirizzo{padding:12px 13px}
  .gal-uno-url{font-size:14.5px; padding:11px}
  .gal-uno-tasti .btn{flex:1 1 100%; justify-content:center}
  .gal-uno-qr{gap:12px}
}
/* == inizio blocco 57903: MARCA_57903_ORDINE_DEL_TEMPO ====================
   IL PASSO 2 E' UN CASSETTO, e deve avere lo stesso ritmo degli altri
   tre passi: il titolo numerato in cima, e sotto il tasto largo. Il
   tasto e' quello di casa (.gal-rifiniture-tasto, blocco 46500): non ce
   n'e' uno nuovo, cambia solo il margine di sopra perche' qui ha un
   titolo sopra di se' e li' no.

   IL CASSETTO DENTRO IL PASSO 2 non deve avere la righina in cima al
   primo riquadro: ce l'ha gia' il passo.
   ======================================================================= */
.gal-live-parte-regole-passo .gal-rifiniture-tasto{margin-top:10px}
#gal-regole-dentro > .gal-live-parte:first-child{
  margin-top:16px; padding-top:0; border-top:0;
}
/* == inizio blocco 57905: MARCA_57905_LA_META_VUOTA =====================
   LA META' DI RIGA VUOTA NEL PASSO 1.

   .gal-live-interruttore ha «margin-left:auto», e quel margine e'
   l'avanzo di quando alla sua sinistra c'era la riga «Aperta agli
   ospiti / Chiusa». Il blocco 47500 quella riga l'ha portata in cima
   alla pagina, dentro il cartello grande, e ha lasciato l'auto dov'era:
   da allora l'interruttore galleggia all'estremita' destra con mezza
   riga vuota accanto -- 946 punti di larghezza, di cui piu' di quattro-
   cento di niente. Non sembra una scelta, sembra una cosa non caricata.

   E NON E' UN DETTAGLIO DI GUSTO: l'interruttore e' l'azione per cui
   questa pagina esiste, e stava nell'angolo. Adesso prende la riga
   intera e comincia da sinistra come tutto il resto della carta.

   SOLO DENTRO LA CARTA DEL PASSO 5 (.gal-live-tuttinsieme): la stessa
   classe la usano altre schede dove alla sua sinistra c'e' ancora
   qualcosa, e li' l'auto serve.
   ======================================================================= */
.gal-live-tuttinsieme .gal-live-riepilogo{align-items:stretch}
.gal-live-tuttinsieme .gal-live-interruttore{margin-left:0}
.gal-live-tuttinsieme .gal-live-interruttore.gal-live-grosso{width:100%}

/* IL QUADRATINO E LA RIGA ACCANTO, ALLO STESSO LIVELLO. Il quadratino
   sta in un riquadro incassato, la riga accanto stava sul fondo nudo:
   affiancati sembravano due pezzi di due pagine diverse. Adesso la riga
   accanto sta anche lei in un riquadro incassato -- stesso fondo, stesso
   raggio, stessa imbottitura -- e si leggono come una cosa sola.
   NIENTE display:flex QUI DENTRO: provato, e il <strong> in testa
   diventava una colonna sua larga un dito, con la frase spezzata a
   meta'. E' un paragrafo, e resta un paragrafo. */
.gal-uno-sotto > .gal-uno-altro{
  padding:14px 16px; border-radius:var(--r-m); background:var(--sunken);
  align-self:stretch;
}
/* I TRE TASTI DELL'INDIRIZZO SUL TELEFONO. La riga di casa fa crescere
   i tasti fino a riempire la riga (.gal-vetrina-azioni .btn{flex:1}), e
   con DUE tasti -- quelli della vetrina -- viene bene. Qui sono tre: a
   328 punti due stanno sulla prima riga e il terzo, da solo sulla
   seconda, si allargava a tutti i 298 punti. Un tasto largo quanto lo
   schermo sotto due piccoli sembra quello importante, e «Aprilo» e' il
   meno importante dei tre. Senza crescere restano larghi quanto le loro
   parole: 102 + 158 sopra, 64 sotto (misurati). L'altezza della riga non
   cambia. */
@media (max-width:600px){
  .gal-uno-riga .gal-vetrina-azioni .btn{flex:0 1 auto}
}
/* == fine blocco 57905 == */

/* == fine blocco 57903 == */

/* == fine blocco 46500 == */

/* ==========================================================================
   == blocco 48700 == DALLA GALLERIA ALLA PAGINA DEGLI INVITATI
   ==========================================================================
   Il tasto sta in cima alla scheda «Live Moments», sopra l'indirizzo da
   girare: chi apre quella scheda o vuole vedere le foto degli invitati
   (e le trova qui sotto) o vuole mandare la gente a caricarle -- e per
   quello serviva un tasto, non un indirizzo lungo da selezionare.

   NON E' IL TASTO PIU' IMPORTANTE DELLA PAGINA e non deve sembrarlo: il
   riempimento e' l'accento della galleria a bassa opacita', non
   l'accento pieno, che in questa pagina e' del cuore e dello scarico.
   ========================================================================== */
.gal-vai-live-riga{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin:0 0 16px;
}
.gal-vai-live{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:11px 20px;
  border-radius:var(--r-gg, 999px);
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  border:1.5px solid var(--accent);
  color:var(--accent-ink, var(--ink-strong));
  font-size:14px; font-weight:700; text-decoration:none;
  transition:var(--tr, .16s ease);
}
.gal-vai-live:hover{ background:var(--accent); color:var(--on-accent, #fff) }
.gal-vai-live:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.gal-vai-live-dice{
  flex:1 1 220px; min-width:0;
  font-size:13px; line-height:1.6; color:var(--ink-3);
}

/* L'INDIRIZZO NON E' PIU' AZZURRO DA BROWSER. Era l'unico collegamento
   di tutta la galleria del cliente senza un colore suo: su una pagina
   avorio con l'accento bronzo, un azzurro di sistema si vede da lontano
   ed e' l'unica cosa che non e' stata scelta da nessuno. Guardato a 390
   punti prima di scriverlo.

   IL NOME DELLA CLASSE E' `gal-vai-live-url` E NON `gal-live-url`, e
   non e' pignoleria: `gal-live-url` ESISTE GIA' in questo stesso
   foglio (riga 9248 circa) ed e' il riquadro dell'indirizzo nella
   pagina Gallerie di Giovanni -- fondo incassato, bordo, angoli.
   Chiamando allo stesso modo, l'indirizzo qui dentro si ritrovava un
   riquadro grigio addosso in mezzo a una frase. Trovato guardando la
   pagina, non leggendo il codice. */
.gal-vai-live-url{
  color:var(--accent-ink, var(--ink-strong));
  font-weight:600; text-decoration:underline; text-underline-offset:3px;
}
/* == fine blocco 48700 == */


/* == MARCA_53305_ICONCINA_DEL_FULL == */
/* ================================================================
   53305 — LA PASTIGLIA DEL FULL, E LE SEZIONI CHE SI OSCURANO
   ----------------------------------------------------------------
   Chiesto: «rendere i pulsanti con funzioni solo del pacchetto Full
   inibite, oscurate, con il pulsante per fare upgrade; e accanto ai
   numerini e alle sezioni Full una iconcina del piano Full attivo o
   inattivo».

   LA PASTIGLIA SUL PALLINO NON PUO' OCCUPARE LARGHEZZA. A 390 punti la
   fila dei pallini e' larga 336 e i cinque passi la riempiono tutta:
   66 punti l'uno e' il minimo sotto cui non si scende. Percio'
   position:absolute appoggiata al pallino, come fanno gia' il numerino
   delle foto in attesa (.gal-passo-avviso) e la percentuale dello
   spazio -- che stanno a destra. Questa sta a SINISTRA, se no si
   sovrappongono la sera del matrimonio, quando ci sono tutte e due.

   ACCESA vuol dire «ce l'hai»: e' un premio, non un avviso, quindi il
   colore buono e non l'accento che grida. Spenta vuol dire «si
   accende col Full»: colore dei testi secondari, senza allarme --
   un fotografo che apre il CRM e vede rosso pensa che si sia rotto
   qualcosa, ed e' esattamente il contrario di quello che deve pensare.
   ================================================================ */
.gal-passo-full{
  position:absolute; top:0; right:calc(50% + 7px);
  height:15px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center;
  font-size:9px; font-weight:800; letter-spacing:.03em; line-height:1;
  background:var(--good, #2e7d5b); color:#fff;
  border:2px solid var(--surface);
  pointer-events:none;
}
.gal-passo-full-spenta{
  background:var(--sunken); color:var(--ink-3);
  border-color:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* La stessa pastiglia accanto al titolo di una sezione riservata.
   Qui la larghezza non e' un problema: il titolo ha la sua riga. */
.gal-sezione-full{
  display:inline-flex; align-items:center; margin-left:8px;
  height:17px; padding:0 7px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.03em;
  background:var(--good, #2e7d5b); color:#fff;
  vertical-align:middle;
}
.gal-sezione-full-spenta{
  background:var(--sunken); color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* LA SCHEDA OSCURATA. Si spegne quello che non si puo' usare, MA NON
   il titolo (se no non si capisce di che parla) e NON l'invito con il
   pulsante dell'aggiornamento -- che e' l'unica cosa su cui ha senso
   cliccare li' dentro, e deve restare piena e viva.
   Niente pointer-events:none sui comandi: il divieto vero lo fa gia'
   il 42700 col :disabled, e un doppio divieto e' un divieto che un
   giorno litiga con se' stesso. Qui si dice solo, con gli occhi, che
   non e' roba di adesso. */
.piu-oscurata > .card-body > *:not(.piu-chiusa):not(.gal-titolo-con-info){
  opacity:.42;
}
@media (prefers-reduced-transparency:reduce){
  .piu-oscurata > .card-body > *:not(.piu-chiusa):not(.gal-titolo-con-info){
    opacity:.6;
  }
}
/* == fine MARCA_53305_ICONCINA_DEL_FULL == */


/* == MARCA_55501_COPERTINA_SU_UNA_RIGA == */
/* -----------------------------------------------------------------------
   55501 — LA COPERTINA DEL PASSO 1 SU UNA RIGA SOLA

   "la copertina al punto 1 falla su una riga".

   MISURATO PRIMA, a 1280 punti di finestra: il riquadro
   .gal-copertina-pannello e' largo 946 e la griglia di partenza chiede
   colonne da almeno 300 punti. In 946 ce ne stanno TRE, non quattro:
   le schede andavano 3 + 1, con la quarta orfana sulla riga sotto.

   MISURATO DOPO: quattro colonne da 226, una riga sola, e il riquadro
   scende da 273 punti di altezza a 259.

   PERCHE' LA SCHEDA SI GIRA IN PIEDI. A 226 punti, tenendo il quadretto
   dell'anteprima di fianco al corpo, ai pulsanti resterebbero 107 punti:
   si leggerebbe peggio di adesso. Girata -- anteprima sopra, etichetta,
   pulsanti in fondo -- il corpo ha tutti i 206 punti della scheda.

   DA 1180 IN SU, E SOTTO NIENTE CAMBIA. La soglia non e' a occhio: a
   1180 il riquadro e' largo 846, quindi la scheda misura 201 punti e il
   pulsante piu' largo che ci puo' finire dentro ne misura 178. Sotto
   quella soglia il riquadro si stringe troppo e restano le due colonne
   di prima (2+2, mai 3+1). A 390 punti di telefono il riquadro e' largo
   320: quattro schede in fila sarebbero 69 punti l'una, e il solo
   pulsante «Cambia» ne misura 74 -- una riga sola li' non ci sta, e le
   quattro schede restano incolonnate come oggi.

   PARTE TUTTO DA .gal-copertina-pannello COL FIGLIO DIRETTO (>).
   .gal-copertina-slot e' riusata anche dal pannello del marchio nel
   passo 3, che pero' sta fuori da questo contenitore: cosi' non lo
   sfiora.

   In coda al foglio, come sempre: queste righe vincono su quelle di
   prima senza cancellarle, e nessun altro lavoro viene toccato.

   Provato a 2560, 1920, 1440, 1280, 1180, 1179, 1024, 900, 768, 640,
   430 e 390, tema chiaro e tema scuro.
   ----------------------------------------------------------------------- */
@media (min-width:1180px){
  .gal-copertina-pannello{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* La scheda in piedi: anteprima, etichetta, pulsanti. */
  .gal-copertina-pannello > .gal-copertina-slot{
    flex-direction:column; align-items:stretch; gap:9px}

  /* L'anteprima larga quanto la scheda, ma non oltre 264 punti: su uno
     schermo molto largo la scheda arriva a 500 e passa, e un quadretto
     largo mezzo metro e alto 92 non somiglierebbe piu' a una copertina. */
  .gal-copertina-pannello > .gal-copertina-slot > .gal-copertina-slot-anteprima{
    width:100%; max-width:264px; height:92px; margin-inline:auto}
  /* Il taglio verticale resta verticale: e' la forma della copertina sul
     telefono, ed e' l'unica cosa che distingue le due schede a colpo
     d'occhio. */
  .gal-copertina-pannello > .gal-copertina-slot > .gal-copertina-slot-anteprima.gal-copertina-slot-verticale{
    width:62px}

  /* I pulsanti in fila, e vanno a capo da soli quando non ci stanno.
     NIENTE nowrap: con un'etichetta lunga un pulsante che non va a capo
     esce dalla scheda invece di allargarsi, e non se ne accorge nessuno
     finche' non si guarda la pagina. */
  .gal-copertina-pannello > .gal-copertina-slot > .gal-copertina-slot-corpo{
    display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start}
  .gal-copertina-pannello > .gal-copertina-slot .gal-copertina-slot-etichetta{
    flex:0 0 100%; margin-bottom:0}
}
/* == fine MARCA_55501_COPERTINA_SU_UNA_RIGA == */


/* == MARCA_55905_NIENTE_CUORI_AGLI_INVITATI == */
/* -----------------------------------------------------------------------
   55905 — I CUORI NON SI MOSTRANO A CHI E' UN INVITATO.

   data-codice sul corpo della pagina c'e' SOLO per l'invitato: lo
   stampa galleria_pubblica.html dentro {% if ospite %}. Quindi questa
   riga non tocca ne' gli sposi ne' l'anteprima di Giovanni.

   display:none e non visibility:hidden, di proposito: cosi' il tasto
   esce anche dal giro del tasto di tabulazione, e non ci si arriva
   nemmeno da tastiera.

   Il cuore resta nella pagina per gli sposi esattamente com'era: qui
   non si cambia nessuna regola esistente, si aggiunge un caso.
   ----------------------------------------------------------------------- */
body[data-codice] .gal-cuore,
body[data-codice] .gal-cuore-grande,
body[data-codice] .gal-visore-cuore {
  display: none !important;
}
/* == fine MARCA_55905_NIENTE_CUORI_AGLI_INVITATI == */

/* === inizio blocco 60101: I DUE PANNELLI NON RUBANO PIU' I TOCCHI ====
   Sono le due cose che compaiono DA SOLE sopra la griglia mentre la
   sposa sta toccando i cuori, e sono la causa di otto scelte perse su
   centodiciotto:

     .gal-volante      la pastiglia "1 di 40 foto scelte". Nasce al
                       PRIMO cuore, alta 42 punti in fondo allo schermo,
                       e copre 4 dei 32 cuori che un attimo prima erano
                       toccabili. Chi la tocca credendo di toccare un
                       cuore viene portato in cima alla copertina
                       (scrollY 1572 -> 0): cinque scelte perse in un
                       colpo.
     .gal-avviso-tetto il riquadro alto 112 punti che compare alla
                       quarantunesima foto e resta. Altre tre.

   Con pointer-events:none il dito ci passa ATTRAVERSO e arriva al
   cuore che c'era sotto -- che e' esattamente quello che la sposa
   stava guardando quando ha deciso di toccare.

   LA PILLOLA RESTA UTILE. E' un cartellino che dice quante ne hai
   scelte, ed e' sempre stato il suo mestiere vero; alle preferite si
   va dalle linguette in alto, che ci sono gia'. Con la tastiera si
   raggiunge e si preme ancora come prima: chi usa la tastiera non
   sbaglia mira.

   L'AVVISO non era toccabile nemmeno prima (e' un <p role="status">):
   copriva e basta. */
.gal-cliente .gal-volante{pointer-events:none}
.gal-cliente .gal-avviso-tetto{pointer-events:none}

/* === fine blocco 60101 === */

/* === inizio blocco 60107: LA FASCIA IN ALTO STA IN UNA RIGA =========
   Misurata sul telefono da 390 punti: 168 punti su 844, cioe' il 20%
   dello schermo, sopra le foto, sempre.

   Perche' e' cosi' alta: sotto i 760 punti la fascia va a capo (vedi
   contatti-studio.css) -- il logo tiene la sua riga, e i contatti si
   dispongono sotto, ognuno con l'indirizzo scritto per esteso
   ("fotopapini.it", "+39...", "@fotopapini"): due o tre righe.

   COSA COSTA. Otto foto su 126 non si raggiungono mai in un giro
   normale, e il pollice che scorre preme quello che c'e' sotto:
   "Scarica le foto" sei volte in un giro solo.

   LA CURA: dal telefono si tolgono le SCRITTE, non i contatti. Le
   icone restano tutte, tutte toccabili, e ognuna dice ancora il suo
   nome per esteso a chi non vede (aria-label e title stanno
   sull'icona, non sulla scritta). Cosi' la fila dei contatti ci sta
   accanto al logo e la fascia torna a una riga.

   NON SI NASCONDE NESSUN CONTATTO, e non si mandano a scorrere di
   lato: erano le due strade gia' scartate, e con ragione -- da
   telefono i contatti sono la cosa che serve di piu'.

   SOLO LA PAGINA DEL CLIENTE (.gal-cliente): la colonna laterale del
   computer e la pagina di Giovanni non c'entrano. */
@media (max-width:640px){
  body.gal-cliente .gal-fissa-valore{display:none}
  body.gal-cliente .gal-fissa{padding:8px 12px;gap:6px 8px;flex-wrap:nowrap}
  body.gal-cliente.gal-header-top .gal-fissa{padding:8px 12px}
  body.gal-cliente .gal-fissa-destra{width:auto;flex-wrap:nowrap;
    justify-content:flex-end;gap:8px}
  /* blocco 75549: 10 punti di spazio erano troppo pochi -- il dito ne
     copriva due insieme. 20 e' il massimo che sta su uno schermo da 375
     senza spingere fuori l'ultima icona (misurato, con quattro icone e
     il logo). */
  body.gal-cliente .gal-fissa-contatti{flex-wrap:nowrap;gap:20px}
  body.gal-cliente .gal-fissa-logo img{height:24px;width:auto}
  body.gal-cliente.gal-header-top .gal-fissa-logo img{height:24px;width:auto}
  /* Il nome dello studio non spinge fuori le icone: si accorcia lui,
     con i puntini. Sparire non deve -- e' il nome del fotografo. */
  body.gal-cliente .gal-fissa-logo{min-width:0;flex:0 1 auto}
  body.gal-cliente .gal-fissa-nome{font-size:13px}
  /* "Scarica le foto" e "Condividi" restano, con la sola icona: la
     scritta per esteso occupava mezza riga da sola. Il nome per chi
     non vede e' sul pulsante, non sulla scritta. */
  body.gal-cliente .gal-fissa .gal-scarica-menu span{display:none}
  body.gal-cliente .gal-fissa .gal-scarica-menu{padding:7px 9px}

  /* LE LINGUETTE DELLE CARTELLE IN UNA RIGA SOLA.
     Cinque nomi ("Tutte, Cerimonia, Ricevimento, Ritratti, Festa")
     non ci
     stanno in 390 punti e vanno a capo: l'ultima resta da sola in
     mezzo, staccata dalle altre, e sembra un titolo invece di un
     pulsante. Adesso stanno in fila e si spingono di lato col dito,
     come le linguette di qualunque telefono. La sfumatura sul bordo
     destro dice che ce n'e' ancora: senza, una fila tagliata di netto
     sembra finita. */
  body.gal-cliente .gal-tab{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
  body.gal-cliente .gal-tab::-webkit-scrollbar{display:none}
  body.gal-cliente .gal-tab > *{flex:0 0 auto}
}
/* === fine blocco 60107 === */

/* ===========================================================================
   blocco 75583: MARCA_75583_COMANDI_IN_FONDO
   AI LATI SOLO LE FRECCE, TUTTO IL RESTO IN FONDO.
   Le regole del blocco 14701 (piu' su in questo foglio) restano dove
   sono e non vengono toccate: qui si scrive solo quello che cambia, in
   fondo al foglio, cosi' chi ci sta lavorando non trova niente spostato.
   =========================================================================== */

/* Le colonnine non esistono piu' nel modello. Questa riga e' la rete: se
   un giorno ne tornasse una dimenticata, non deve galleggiare sopra la
   foto intercettando i tocchi. */
.gal-visore .gal-visore-lato{display:none}

/* LE FRECCE TORNANO VICINO AL BORDO. Stavano a 64 punti dentro solo
   perche' le colonnine occupavano i primi 56: tolte quelle, 64 punti di
   vuoto non servono a nessuno e rubano larghezza alla foto. */
.gal-visore .gal-visore-freccia-sx{left:10px}
.gal-visore .gal-visore-freccia-dx{right:10px}
/* Il palco lascia libera la striscia delle frecce (10 + 44, piu' un filo
   di respiro): senza, la freccia si appoggia sopra la foto anche quando
   lo schermo e' largo e ci sarebbe posto. */
.gal-visore .gal-visore-palco{padding:6px 62px 8px}

/* LA PASTIGLIA IN FONDO adesso tiene insieme tondi e tasti con la
   parola: si allineano al centro e il tondo non la sfonda in altezza. */
.gal-visore .gal-visore-pastiglia{gap:4px;padding:4px 6px}
.gal-visore .gal-visore-pastiglia .gal-visore-tondo{width:40px;height:40px;
  font-size:18px;flex:0 0 auto;background:transparent}
.gal-visore .gal-visore-pastiglia .gal-visore-tondo:hover{
  background:rgba(255,255,255,.24)}
.gal-visore .gal-visore-pastiglia .gal-visore-tondo:disabled:hover{
  background:transparent}

/* IL FILO DI STACCO fra i comandi dello scorrere e l'incolonnare: sono
   due mestieri diversi nella stessa pastiglia, e senza il filo il
   pollice li legge come una fila sola di cinque cose uguali. */
.gal-visore .gal-visore-filo{flex:0 0 auto;width:1px;height:22px;margin:0 4px;
  background:rgba(255,255,255,.22)}

/* ---- telefoni (sotto i 700 punti) ----
   Qui i due dell'incolonnare non ci sono: li spegne il programma
   (siPuoAffiancare), non questo foglio. In fila restano tre cose e su
   390 punti ne occupano meno di 190. Percio' il tondo torna a 44, che e'
   la misura minima per un dito: i 38 di prima erano una stretta
   giustificata quando i tondi stavano SOPRA la foto, sui bordi. */
@media (max-width:699.98px){
  .gal-visore .gal-visore-palco{padding:4px 6px 6px}
  .gal-visore .gal-visore-freccia-sx{left:6px}
  .gal-visore .gal-visore-freccia-dx{right:6px}
  .gal-visore .gal-visore-pastiglia{gap:6px;padding:4px}
  .gal-visore .gal-visore-pastiglia .gal-visore-tondo{width:44px;height:44px;
    font-size:18px;background:transparent;color:rgba(255,255,255,.85)}
}
/* Telefono girato, schermo basso: la fila si stringe ma il tondo NON
   scende sotto i 44 -- il dito e' lo stesso anche di traverso. Si toglie
   fiato al testo di Auto, non all'area da toccare. */
@media (max-height:460px){
  .gal-visore .gal-visore-pastiglia .gal-visore-tondo{width:44px;height:44px}
  .gal-visore .gal-visore-tasto{padding:9px 12px;font-size:12px}
}
/* --- blocco 75589: MARCA_75589_TOCCO_NON_CHIUDE ---
   LE FRECCE SI PRENDONO PIU' FACILMENTE, MA SI VEDONO UGUALI.
   Il cerchio resta 44 punti, che e' gia' il minimo consigliato per un
   dito. Quello che cresce e' l'AREA CHE RISPONDE: dodici punti per lato
   in piu', invisibili, con un riquadro trasparente attaccato al tasto.
   Al tocco il tasto e' 68x68, all'occhio resta 44x44.
   NON si ingrandisce il cerchio: su un telefono un tondo da 68 punti
   appoggiato sopra la foto e' un pugno nell'occhio, e qui la cosa da
   guardare e' la fotografia, non i comandi.
   Le due aree non si toccano mai fra loro: anche sullo schermo piu'
   stretto la foto in mezzo resta piu' larga di 24 punti.
   Il tasto e' gia' position:absolute (qui sopra), quindi il riquadro si
   aggancia a lui e non a mezza pagina.
   Sul tasto SPENTO -- prima foto, ultima foto -- l'area grossa non fa
   danni: un tasto disabilitato non manda nessun tocco e non lo lascia
   nemmeno passare a chi sta sotto. Quindi il tocco vicino al bordo
   viene semplicemente ingoiato, che e' esattamente quello che serve:
   prima chiudeva il visore. */
.gal-visore .gal-visore-freccia{overflow:visible}
.gal-visore .gal-visore-freccia::after{
  content:"";
  position:absolute;
  top:-12px;left:-12px;right:-12px;bottom:-12px;
  border-radius:50%;
}
/* E SUL TELEFONO IL CERCHIO TORNA A 44, come gli altri.
   Sotto i 700 punti tutti i tondi del visore scendono a 38 (riga 9241):
   era una stretta giustificata quando galleggiavano sopra la foto, e il
   blocco 75583 l'ha gia' tolta ai tondi della pastiglia in fondo. Alle
   frecce no, ed erano proprio quelle di cui Giovanni dice che si
   prendono male. 44 e' la misura minima per un dito. */
@media (max-width:699.98px){
  .gal-visore .gal-visore-freccia{width:44px;height:44px;font-size:19px}
}

/* === fine blocco 75583 === */