/* Personal TrAI — lo strato "vetro" del gestionale.
 *
 * Il riferimento e un UI kit in stile vetro smerigliato: pannelli traslucidi
 * e sfocati su un fondo grafite morbido, un filo di luce ciano sul bordo della
 * lastra principale, pulsanti a pillola, un blu pieno per l'azione.
 *
 * PERCHE UN FILE A PARTE E NON DENTRO stile.css
 *
 * `stile.css` e sorvegliato da due suite di test che leggono le sue regole
 * per nome (contrasto dell'accesso, altezza dei bersagli, pesi della barra).
 * Questo file si carica DOPO e ridipinge le superfici senza toccare quelle
 * regole: niente `display` sulla barra o sui veli, nessuna altezza minima
 * abbassata. E se il vetro va tolto, si toglie una riga in index.html.
 *
 * LA SFOCATURA STA SULLE FOGLIE, MAI SUI CONTENITORI
 *
 * `backdrop-filter` su un elemento lo trasforma nel riferimento di posizione
 * di tutti i suoi discendenti `position: fixed`. Messo su #app, la barra, il
 * menu del + e il foglio "Altro" smetterebbero di essere ancorati allo
 * schermo e scorrerebbero via col contenuto. Percio si sfocano solo carte,
 * righe, pannelli e la barra stessa — elementi che dentro non hanno niente
 * di fisso. La lastra del foglio porta la sua sfocatura su uno pseudo-elemento.
 *
 * CHIARO E SCURO
 *
 * Il fondo grafite resta in entrambi i temi, come nel riferimento. Cambia la
 * lastra: in chiaro e argento smerigliato con testo scuro, in scuro e
 * grafite smerigliata con testo chiaro. Il testo resta sempre sopra una
 * lastra quasi opaca, mai direttamente sul fondo scuro, e i token --ink del
 * tema restano validi.
 */

/* ==========================================================================
   ISCRIZIONE — la foto dietro il modulo
   ==========================================================================
   Solo sulla schermata di iscrizione, non su quella di accesso: l'accesso e un
   gesto quotidiano e deve essere asciutto, l'iscrizione e il primo incontro.

   La foto sta su uno pseudo-elemento FISSO: il modulo e piu alto dello schermo
   di un telefono e scorre, lo sfondo no. Il filtro toglie quasi tutto il colore
   e scurisce, poi una velatura notturna del marchio la riporta nella palette:
   la foto deve dire "palestra", non competere col modulo. */
#iscrizione.accesso {
  position: relative;
  isolation: isolate;
  background: #0a0e1f;
}
#iscrizione.accesso::before,
#iscrizione.accesso::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
}
#iscrizione.accesso::before {
  background: url('assets/iscrizione.jpg') center 28% / cover no-repeat;
  filter: grayscale(.75) brightness(.55) contrast(1.05);
  /* Un poco piu grande dello schermo: la sfocatura lieve lascerebbe un bordo
     chiaro sfumato lungo i lati. */
  transform: scale(1.04);
}
#iscrizione.accesso::after {
  background:
    radial-gradient(80% 55% at 50% -5%, color-mix(in srgb, var(--logo-ciano) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(10, 14, 31, .55) 0%, rgba(10, 14, 31, .82) 60%, rgba(10, 14, 31, .92) 100%);
}
/* Su una foto il testo bianco trasparente rischia di posarsi su un punto
   chiaro: un'ombra corta lo tiene leggibile ovunque cada. */
#iscrizione .claim,
#iscrizione .nota { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

@media (prefers-reduced-motion: reduce) {
  #iscrizione.accesso::before { transform: none; }
}

/* ==========================================================================
   I TOKEN DEL GESTIONALE
   ========================================================================== */
#app, #velo {
  --vetro-fondo-1: #0c0e13;
  --vetro-fondo-2: #1b1f28;
  --vetro-blu: #4f7cff;
  --vetro-blu-2: #3a66ee;
  --vetro-luce: rgba(120, 232, 255, .55);

  /* La lastra e le carte: argento smerigliato. */
  --lastra: rgba(236, 240, 246, .86);
  --carta: rgba(255, 255, 255, .72);
  --sheet: rgba(15, 23, 42, .05);
  --sheet-2: rgba(15, 23, 42, .08);
  --bordo: rgba(15, 23, 42, .09);
  --riflesso: rgba(255, 255, 255, .7);

  --r: 22px;
  --r-s: 16px;
  --ombra: 0 1px 1px rgba(10, 14, 22, .04), 0 12px 30px -14px rgba(10, 14, 22, .28);
}
@media (prefers-color-scheme: dark) {
  #app, #velo {
    --lastra: rgba(24, 27, 35, .82);
    --carta: rgba(46, 51, 63, .55);
    --sheet: rgba(255, 255, 255, .05);
    --sheet-2: rgba(255, 255, 255, .08);
    --bordo: rgba(255, 255, 255, .09);
    --riflesso: rgba(255, 255, 255, .1);
    --ombra: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .7);
  }
}

/* ==========================================================================
   IL FONDO
   ==========================================================================
   Grafite con due chiazze di luce fredda, come le ombre morbide dietro il kit
   del riferimento. Su uno pseudo-elemento fisso: #app non deve avere niente
   che crei un contesto di posizione per la barra. */
#app::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 12%, rgba(190, 205, 230, .20), transparent 70%),
    radial-gradient(45% 40% at 88% 78%, rgba(79, 124, 255, .16), transparent 70%),
    radial-gradient(40% 35% at 70% 20%, rgba(120, 232, 255, .08), transparent 70%),
    linear-gradient(160deg, var(--vetro-fondo-2) 0%, var(--vetro-fondo-1) 100%);
}

/* ==========================================================================
   HERO — trasparente sul fondo grafite
   ==========================================================================
   Il gradiente ciano-indaco lascia il posto al fondo: il testo dell'hero e
   bianco e sul grafite regge meglio che sul ciano. */
#app .hero { background: transparent; }
#app .hero::after {
  background: radial-gradient(120% 70% at 82% -8%, rgba(255, 255, 255, .07), transparent 60%);
}

#app .carta-vetro {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}
#app .azioni-rapide button {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .13);
  border-radius: 18px;
}
#app .azioni-rapide .et { text-shadow: none; }

/* ==========================================================================
   LA LASTRA — il foglio diventa il pannello di vetro con il filo di luce
   ========================================================================== */
#app .foglio {
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
#app .foglio::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--lastra);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--riflesso);
  border-bottom: 0;
  /* Il filo di luce: un contorno ciano sfumato che esce dal bordo alto, il
     dettaglio che nel riferimento fa sembrare il pannello illuminato da dietro. */
  box-shadow:
    0 -1px 0 var(--vetro-luce),
    0 -10px 34px -12px rgba(120, 232, 255, .35),
    0 30px 60px -20px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* ==========================================================================
   CARTE, RIGHE, CAMPI
   ========================================================================== */
#app .carta,
#app .riga,
#app .giorno,
#velo .carta,
#velo .riga {
  background: var(--carta);
  border-color: var(--bordo);
  box-shadow: var(--ombra), inset 0 1px 0 var(--riflesso);
  /* NIENTE backdrop-filter qui, ed e una scelta misurata. Carte e righe
     stanno sopra la lastra, che e gia quasi opaca: sfocare cio che hanno
     dietro non cambia niente a vedersi. In compenso ogni sfocatura e un
     passaggio di disegno in piu, e una lista di cinquanta clienti ne faceva
     cinquanta — il browser andava in affanno anche su un portatile, e il
     prodotto si usa da un telefono in palestra. La sfocatura resta dove si
     vede: lastra, barra, pannelli, menu. */
}
#app .riga { border-radius: 18px; }

#app .campo input, #app .campo select, #app .campo textarea,
#velo .campo input, #velo .campo select, #velo .campo textarea {
  background: var(--sheet);
  border-color: var(--bordo);
  border-radius: 14px;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(10, 14, 22, .06);
}
#app .campo input:focus, #app .campo select:focus, #app .campo textarea:focus,
#velo .campo input:focus, #velo .campo select:focus, #velo .campo textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--vetro-blu) 45%, transparent);
  border-color: var(--vetro-blu);
}

#app .cerca {
  background: var(--sheet);
  border-color: var(--bordo);
}

/* ==========================================================================
   PULSANTI — pillole
   ========================================================================== */
#app .bottone,
#velo .bottone {
  border-radius: 99px;
  background: var(--carta);
  border-color: var(--bordo);
  box-shadow: inset 0 1px 0 var(--riflesso), 0 4px 12px -6px rgba(10, 14, 22, .25);
  color: var(--ink);
}
#app .bottone.primario,
#velo .bottone.primario {
  background: linear-gradient(180deg, var(--vetro-blu), var(--vetro-blu-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(79, 124, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
#app .bottone.piccolo, #velo .bottone.piccolo { border-radius: 99px; }
/* Il verde di WhatsApp va ripetuto qui con lo stesso peso delle regole sopra:
   `#app .bottone` vale (1,1,0) e batte `.bottone.whatsapp` di stile.css, che
   vale (0,2,0). Senza questa riga il pulsante che manda la scheda al cliente
   tornava grigio come "Rigenera" — cioe proprio il difetto che doveva
   togliere. */
#app .bottone.whatsapp,
#velo .bottone.whatsapp {
  background: linear-gradient(180deg, #1fa855, #128c4f);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(18, 140, 79, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
}

#app .fogli button {
  background: var(--sheet-2);
  border-radius: 99px;
}
#app .fogli button.attivo {
  background: linear-gradient(180deg, var(--vetro-blu), var(--vetro-blu-2));
  box-shadow: 0 6px 16px -8px rgba(79, 124, 255, .8);
}

#app .traccia > i.denaro { background: linear-gradient(90deg, var(--vetro-luce), var(--vetro-blu)); }
#app .grafico > i { background: linear-gradient(180deg, var(--vetro-blu), var(--vetro-blu-2)); }

/* ==========================================================================
   LA BARRA — vetro grafite
   ==========================================================================
   Sempre scura, in entrambi i temi: sta sul fondo grafite e non sulla lastra.
   Per questo i colori del testo non vengono dai token --ink del tema. */
#app .tabbar {
  background: rgba(16, 18, 24, .72);
  border-top-color: rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .35);
}
#app .tabbar::before {
  background: linear-gradient(to top, rgba(12, 14, 19, .5), transparent);
}
#app .tabbar > button { color: rgba(255, 255, 255, .62); }
#app .tabbar > button.attivo { color: #fff; }
#app .tabbar > button.attivo .ico {
  background: color-mix(in srgb, var(--vetro-blu) 38%, transparent);
}
#app .lato-marchio span { color: #fff; }

#app .fab {
  background: linear-gradient(180deg, var(--vetro-blu), var(--vetro-blu-2));
  box-shadow: 0 10px 26px -6px rgba(79, 124, 255, .8),
              0 0 0 6px rgba(16, 18, 24, .9);
}

/* IL MENU DEL "+" — prima c'era un difetto vero.
 *
 * Le pillole erano semitrasparenti, e da scrivania si aprivano SOPRA le voci
 * della barra laterale, a partire dallo stesso punto del tasto "Nuovo". Sotto
 * "Nuovo pagamento" si leggeva "Agenda", sotto "Crea scheda AI" si leggeva
 * "Scheda AI": due menu uno dentro l'altro, e non si capiva quale fosse aperto.
 *
 * Adesso le voci stanno su un fondo pieno, e tutto il resto della pagina si
 * scurisce con un'ombra larga quanto lo schermo. L'ombra non intercetta i
 * clic: toccare fuori chiude ancora, come prima (e app.js a farlo). */
#app .menu-fab.aperto {
  box-shadow: 0 0 0 100vmax rgba(6, 8, 12, .5);
  border-radius: 22px;
}
#app .menu-fab button {
  background: rgba(26, 30, 39, .97);
  border-color: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}
#app .menu-fab button .icona { color: #9fbcff; }

#app .foglio-altro {
  background: rgba(22, 25, 33, .9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 -1px 0 var(--vetro-luce), 0 -14px 40px rgba(0, 0, 0, .45);
}
#app .foglio-altro > button { color: #fff; }
#app .foglio-altro > button > span:first-child {
  background: rgba(255, 255, 255, .08); color: #9fd8ff;
}
#app .foglio-altro .maniglia { background: rgba(255, 255, 255, .22); }

@media (min-width: 1024px) {
  #app .tabbar {
    border-right-color: rgba(255, 255, 255, .08);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .03), 12px 0 40px -20px rgba(0, 0, 0, .6);
  }
  #app .tabbar > button:hover { background: rgba(255, 255, 255, .06); }
  #app .tabbar > button.attivo {
    background: color-mix(in srgb, var(--vetro-blu) 26%, transparent);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .25);
  }
  /* IL TASTO "NUOVO"
   *
   * Era un rettangolo blu con un "+" e una parola: sembrava un campo, non
   * l'azione principale del prodotto. Adesso ha tre parti leggibili — il
   * segno dentro un tondo, la parola, e una freccia che dice che apre un
   * menu e si gira quando e aperto.
   *
   * La freccia e disegnata con due bordi, non scritta: un carattere dentro
   * `content` e testo che nessuna traduzione raggiunge (vedi il commento su
   * `.fab .et` in stile.css). Due bordi non sono una parola. */
  #app .fab {
    height: 54px;
    padding: 0 16px 0 8px;
    border-radius: 18px;
    grid-template-columns: auto 1fr auto;
    justify-content: stretch;
    justify-items: start;
    gap: 11px;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%),
      linear-gradient(135deg, #5b8cff 0%, #4f7cff 45%, #6a5cff 100%);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 28px -10px rgba(79, 124, 255, .85),
                inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .15s, box-shadow .15s, filter .15s;
  }
  #app .fab:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 16px 34px -10px rgba(79, 124, 255, .95),
                inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  #app .fab:focus-visible {
    outline: 2px solid rgba(160, 190, 255, .9);
    outline-offset: 3px;
  }
  /* Il segno "+" dentro un tondo chiaro. */
  #app .fab > span:first-child {
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .2s;
  }
  #app .fab .et { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
  #app .fab::after {
    content: '';
    width: 8px; height: 8px;
    margin-right: 4px;
    border-right: 2px solid rgba(255, 255, 255, .85);
    border-bottom: 2px solid rgba(255, 255, 255, .85);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s;
  }
  #app .fab.aperto {
    transform: none;
    filter: brightness(.95);
  }
  #app .fab.aperto::after { transform: translateY(2px) rotate(-135deg); }
  #app .fab.aperto > span:first-child { transform: rotate(45deg); }

  /* La barra laterale sta SOPRA il menu aperto, e non e un dettaglio.
     L'ombra che scurisce la pagina parte dal menu (z-index 39): con la barra
     a 30 scuriva anche la barra, compreso il tasto "Nuovo" che l'ha appena
     aperto, che sembrava spento proprio mentre era attivo. A 40 la barra
     resta accesa e si scurisce solo il contenuto. Il menu sta tutto a destra
     della barra, quindi non ci finisce sotto. */
  #app .tabbar { z-index: 40; }

  /* Il menu diventa una tendina che si apre ACCANTO alla barra laterale,
     all'altezza del tasto, invece che sopra le sue voci. */
  #app .menu-fab {
    left: calc(var(--lato) + 10px);
    top: 70px;
    width: 300px;
    padding: 8px;
    gap: 2px;
    background: rgba(22, 25, 33, .97);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
  }
  #app .menu-fab.aperto {
    box-shadow: 0 0 0 100vmax rgba(6, 8, 12, .45),
                0 -1px 0 var(--vetro-luce),
                0 24px 60px -18px rgba(0, 0, 0, .8);
  }
  #app .menu-fab button {
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 0 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
  }
  #app .menu-fab button:hover { background: rgba(255, 255, 255, .06); }
  /* L'icona di ogni voce dentro un riquadro tinto: e cio che fa leggere la
     lista come sei azioni diverse, non come sei righe di testo uguali. */
  #app .menu-fab button > span:first-child {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(79, 124, 255, .18);
    color: #a9c2ff;
  }
  #app .foglio { margin-left: 18px; margin-right: 18px; }
  #app .riga:hover,
  #app .carta.cliccabile:hover {
    border-color: color-mix(in srgb, var(--vetro-blu) 45%, var(--bordo));
  }
}

/* ==========================================================================
   PANNELLI E VELI
   ========================================================================== */
#velo {
  background: rgba(8, 10, 14, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#velo .pannello {
  background: var(--lastra);
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  border: 1px solid var(--riflesso);
  box-shadow: 0 -1px 0 var(--vetro-luce), 0 0 40px -10px rgba(120, 232, 255, .3),
              0 30px 70px -20px rgba(0, 0, 0, .6);
}
#app #velo-altro { background: rgba(8, 10, 14, .5); }

/* ==========================================================================
   NOTIFICHE E GUIDA — aggiunte in fondo alla pagina, fuori da #app
   ========================================================================== */
body > .toast {
  background: rgba(22, 25, 33, .88);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 99px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body > .toast button { color: #8fd0ff; }

/* Browser senza backdrop-filter: la lastra resta quasi opaca e leggibile,
   perde solo la sfocatura. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #app, #velo { --lastra: rgba(236, 240, 246, .97); --carta: rgba(255, 255, 255, .94); }
  @media (prefers-color-scheme: dark) {
    #app, #velo { --lastra: rgba(24, 27, 35, .97); --carta: rgba(40, 44, 55, .95); }
  }
}