/* Tre piani (Davide, 29/09/2026): funzione chiusa, pagina per pagare la differenza, limite dei clienti.
   Riproduce le immagini approvate «proposta passa a Studio 29-09» con i colori e gli spazi di interfaccia.css. */

/* ---- menu: voce di una funzione chiusa, col lucchetto e il nome del piano */
.voce.voce-chiusa > span:not(.piano-lucchetto):not(.numerello) { color:var(--grigio); }
.piano-lucchetto { margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; line-height:1.4; font-weight:700; color:var(--giallo); background:var(--giallo-chiaro);
  border-radius:999px; padding:1px 7px; white-space:nowrap; }
.piano-lucchetto svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.menu-account-voce .piano-lucchetto { margin-left:auto; }
.barra-studio .voce .piano-lucchetto { flex:0 0 auto; margin-left:auto; font-size:10px; padding:1px 5px; gap:2px; }
/* Le parole lunghe della voce non si tagliano sotto il bollino: vanno a capo fra le parole, mai dentro. */
.barra-studio .voce.voce-chiusa { gap:8px; }
.barra-studio .voce.voce-chiusa > span:not(.piano-lucchetto):not(.numerello):not(.solo-lettori) { min-width:auto; }
/* Nelle sottovoci (menu rientrato, più stretto) resta il solo lucchetto: la parola «Completo» è nel titolo e per i
   lettori di schermo, e sulla pagina «Funzione del piano Completo». */
.barra-studio .voce-figlio .piano-lucchetto { font-size:0; padding:3px 5px; gap:0; }
.barra-studio .voce .piano-lucchetto svg, .menu-account-voce .piano-lucchetto svg { width:10px; height:10px; flex:0 0 10px; }
@media (max-width:760px) {
  /* Nella barra in basso resta solo il lucchetto, in alto a destra della voce. */
  .barra-studio .menu .voce .piano-lucchetto { position:absolute; top:3px; right:4px; margin:0; padding:2px 4px; font-size:0; gap:0; }
  .barra-studio .menu .voce .piano-lucchetto svg { width:10px; height:10px; flex:0 0 10px; }
}

/* ---- pagina della funzione chiusa: anteprima sfocata dietro, riquadro davanti */
.piano-chiuso { position:relative; min-height:560px; }
.piano-chiuso-dietro { filter:blur(3px); opacity:.55; pointer-events:none; user-select:none; }
.piano-chiuso-dietro .riga-finta { display:flex; justify-content:space-between; gap:12px; background:var(--bianco);
  border:1px solid var(--linea); border-radius:10px; padding:12px 14px; margin-bottom:8px; font-size:13.5px; }
.piano-chiuso-dietro .riga-finta b { font-weight:600; }
.piano-chiuso-dietro .ambra { color:var(--giallo); font-weight:600; }
.piano-sblocca { position:absolute; left:50%; top:24px; transform:translateX(-50%); width:min(540px, 100%);
  background:var(--bianco); border-radius:18px; padding:26px 28px 24px;
  box-shadow:0 24px 60px rgb(16 24 40 / 18%), 0 0 0 1px rgb(16 24 40 / 6%); }
.piano-bollino { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ui-blu);
  background:var(--ui-blu-tenue); border-radius:999px; padding:4px 10px; margin:0 0 12px; }
.piano-bollino svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.piano-sblocca h2 { font-size:22px; line-height:1.25; letter-spacing:-.01em; margin:0 0 6px; }
.piano-sblocca .piano-sotto { color:var(--grigio); margin:0 0 14px; }
.piano-spunte { list-style:none; padding:0; margin:0 0 16px; }
.piano-spunte li { display:flex; gap:10px; padding:5px 0; font-size:14.5px; line-height:1.45; }
.piano-spunte svg { width:18px; height:18px; flex:0 0 18px; margin-top:2px; fill:none; stroke:var(--ui-blu); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.piano-prezzo { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; background:var(--carta);
  border-radius:12px; padding:12px 14px; margin:0 0 16px; }
.piano-prezzo b { font-size:22px; letter-spacing:-.01em; }
.piano-prezzo span { color:var(--grigio); font-size:13.5px; }
.piano-prezzo em { font-style:normal; margin-left:auto; font-size:13px; font-weight:700; color:var(--ui-blu); }
/* Il pulsante grande dell'immagine approvata (50px): più forte della regola comune dei pulsanti in pagina. */
.app > main a.btn-pieno.piano-grande:not(.x), .app > main button.btn-pieno.piano-grande:not(.x) { display:flex; align-items:center;
  justify-content:center; gap:8px; width:100%; min-height:50px; font-size:16px; border-radius:12px; text-decoration:none; }
.piano-grande svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.piano-demo { margin:12px 0 0; text-align:center; }
.piano-demo button { background:none; border:0; padding:6px 4px; min-height:44px; font:inherit; font-size:14px; font-weight:600;
  color:var(--ui-blu); cursor:pointer; }
.piano-demo button:hover, .piano-demo button:focus-visible { text-decoration:underline; }
.piano-nota { font-size:12.5px; color:var(--grigio); text-align:center; margin:8px 0 0; }
.piano-errore { margin:0 0 14px; }

/* ---- pagina per pagare la differenza: il conto a sinistra, cosa si apre a destra */
.piano-paga-griglia { display:grid; grid-template-columns:minmax(0,620px) minmax(0,420px); gap:32px; align-items:start; }
.piano-cosa-apre { padding:26px 4px 0; }
.piano-cosa-apre h2 { font-size:15px; color:var(--grigio); margin:0 0 10px; }
.piano-paga { background:var(--bianco); border:1px solid var(--linea); border-radius:16px; padding:28px 30px; }
.piano-paga h1 { font-size:24px; margin:0 0 6px; }
.piano-cambio { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin:18px 0; }
.piano-scheda { border:1px solid var(--linea); border-radius:12px; padding:14px; }
.piano-scheda.nuova { border:1.5px solid var(--ui-blu); box-shadow:0 0 0 3px rgb(34 84 197 / 8%); }
.piano-scheda small { display:block; color:var(--grigio); font-size:12.5px; }
.piano-scheda b { display:block; font-size:17px; }
.piano-freccia { font-size:22px; color:var(--grigio); }
.piano-conto { border-top:1px solid var(--linea); padding-top:14px; margin:4px 0 0; }
.piano-conto div { display:flex; justify-content:space-between; gap:16px; padding:4px 0; font-size:14.5px; }
.piano-conto dt, .piano-conto dd { margin:0; }
.piano-conto dd { white-space:nowrap; text-align:right; }
.piano-conto .grigio { color:var(--grigio); }
.piano-conto .totale { font-weight:750; font-size:17px; border-top:1px dashed var(--linea); margin-top:6px; padding-top:10px; }
.piano-fiducia { font-size:12.5px; color:var(--grigio); text-align:center; margin:12px 0 0; }
.piano-conferma { margin-top:18px; }

/* ---- Clienti: barra «N di 30 clienti» e banner del limite */
.barra-limite { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:13px; color:var(--grigio); margin:0 0 14px; }
.barra-limite .traccia { flex:0 0 220px; max-width:100%; height:8px; border-radius:999px; background:#eceff4; overflow:hidden; }
.barra-limite .pieno { height:100%; background:var(--ui-blu); border-radius:999px; }
.barra-limite.al-limite .pieno { background:var(--rosso); }
.barra-limite.al-limite b { color:var(--rosso); }
.banner-limite { display:flex; align-items:center; gap:14px; background:var(--rosso-chiaro); border:1px solid #f3c7c7;
  border-left:5px solid var(--rosso); border-radius:12px; padding:14px 16px; margin:0 0 16px; }
.banner-limite .icona-limite { width:36px; height:36px; border-radius:10px; background:#fde3e3; color:var(--rosso);
  display:grid; place-items:center; flex:0 0 36px; }
.banner-limite .icona-limite svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.banner-limite .testo-limite { flex:1; min-width:0; }
.banner-limite .testo-limite b { display:block; font-size:15.5px; color:var(--inchiostro); }
.banner-limite .testo-limite span { color:var(--grigio); font-size:13.5px; }
.banner-limite .btn-pieno { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; min-height:44px; }
.banner-limite .btn-pieno svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cliente-non-aggiunto { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border:1px dashed #f3c7c7;
  background:#fffafa; color:var(--rosso-scuro); border-radius:10px; padding:12px 14px; margin:0 0 8px; font-size:14px; }

/* ---- Abbonamento: il piano dello studio */
.piano-abbonamento h2 { margin-top:0; }
.piano-abbonamento .piano-funzioni { columns:2; column-gap:24px; padding-left:18px; margin:8px 0 12px; }
.piano-cambi { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0; }
.piano-cambi form { margin:0; }

@media (max-width:700px) {
  .piano-chiuso { min-height:0; }
  .piano-chiuso-dietro { display:none; }
  /* Telefono: niente riquadro dentro la pagina, il modulo usa tutta la larghezza. */
  .piano-sblocca { position:static; transform:none; width:auto; padding:4px 0 0; box-shadow:none; background:none; border-radius:0; }
  .piano-paga-griglia { grid-template-columns:1fr; gap:8px; }
  .piano-cosa-apre { padding:8px 0 0; }
  /* Telefono: il modulo usa tutta la larghezza, senza riquadro. */
  .piano-paga { padding:0; border:0; border-radius:0; background:none; }
  .piano-cambio { gap:8px; }
  .piano-scheda { padding:12px; }
  .banner-limite { flex-wrap:wrap; }
  .banner-limite .btn-pieno { width:100%; justify-content:center; }
  .barra-limite .traccia { flex-basis:100%; }
  .piano-abbonamento .piano-funzioni { columns:1; }
}
.piano-abbonamento .piano-cambi + .piccolo { margin-top:12px; }

/* ---- pagina di attivazione: la scelta del piano sopra Annuale/Mensile (immagine approvata «proposta codice
   sconto 29-09»). Tre schede affiancate, Completo consigliato; al telefono una sotto l'altra. */
.ap-piani { border:0; padding:0; margin:0 0 14px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.ap-carta { position:relative; display:flex; flex-direction:column; gap:3px; border:1px solid var(--linea); border-radius:12px;
  padding:16px 12px 14px; background:var(--bianco); cursor:pointer; min-width:0; }
.ap-carta:has(input:checked) { border:1.5px solid var(--ui-blu); box-shadow:0 0 0 3px rgb(34 84 197 / 8%); padding:15.5px 11.5px 13.5px; }
.ap-carta:focus-within { outline:3px solid rgb(34 84 197 / 25%); outline-offset:1px; }
.ap-pillola { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--ui-blu-tenue); color:var(--ui-blu);
  font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; white-space:nowrap; border:1px solid #c9d8f5; }
.ap-testa { display:flex; align-items:center; gap:8px; }
.ap-testa input { width:18px; height:18px; margin:0; accent-color:var(--ui-blu); flex:0 0 18px; }
.ap-nome { font-weight:700; font-size:15.5px; color:var(--inchiostro); line-height:1.25; }
.ap-clienti { color:var(--grigio); font-size:13px; }
.ap-prezzo { margin:8px 0 4px; font-size:19px; font-weight:750; letter-spacing:-.01em; color:var(--inchiostro); line-height:1.2; }
.ap-prezzo small { font-size:12.5px; font-weight:600; color:var(--grigio); letter-spacing:0; }
.ap-prezzo s { font-size:12.5px; font-weight:600; color:#8a94a6; margin-right:3px; }
.ap-breve { color:var(--grigio); font-size:12.5px; line-height:1.45; }
.ap-nota { color:var(--rosso-scuro); font-size:12.5px; font-weight:600; margin-top:4px; }
.ap-non-disponibile { cursor:not-allowed; opacity:.6; }
/* Codice applicato: nella scheda scelta il prezzo barrato e quello scontato; nelle altre il listino. */
.ap-carta .ap-scontato { display:none; }
.ap-carta:has(input:checked) .ap-scontato { display:inline; }
.ap-carta:has(input:checked) .ap-listino { display:none; }
/* Nelle tre schede affiancate il prezzo barrato va sopra: «55,88 € /mese» resta su una riga. */
@media (min-width:521px) { .ap-scontato s { display:block; margin:0 0 1px; } }
.ap-modulo .ciclo-nota span[data-piano] { white-space:nowrap; }
@media (max-width:520px) {
  .ap-piani { grid-template-columns:1fr; gap:14px; }
  .ap-carta { display:grid; grid-template-columns:1fr auto; column-gap:10px; padding:14px 14px 12px; }
  .ap-carta:has(input:checked) { padding:13.5px 13.5px 11.5px; }
  .ap-pillola { left:auto; right:14px; transform:none; }
  .ap-testa { grid-column:1; grid-row:1; }
  .ap-clienti { grid-column:1; grid-row:2; padding-left:26px; }
  .ap-prezzo { grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; text-align:right; white-space:nowrap; }
  .ap-breve, .ap-nota { grid-column:1 / span 2; padding-left:26px; margin-top:4px; }
}

/* Mensile | Annuale come interruttore in cima, uguale alla sezione prezzi del sito (Davide, 29/09/2026 notte:
   «non si capisce così»). Il prezzo lo dicono le schede dei piani e il riquadro sotto: qui solo la scelta. */
.ap-modulo .scelta-ciclo { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:0 0 6px;
  border:1px solid #e3e6ec; border-radius:12px; background:#f1f3f7; }
.ap-modulo .scelta-ciclo .ciclo-opzione { position:relative; display:flex; align-items:center; justify-content:center;
  gap:8px; min-height:44px; padding:8px 10px; border:0; border-radius:9px; background:transparent; box-shadow:none;
  cursor:pointer; text-align:center; }
.ap-modulo .scelta-ciclo .ciclo-opzione:has(input[value="mensile"]) { order:-1; }
.ap-modulo .scelta-ciclo .ciclo-opzione:has(input:checked) { background:#fff; border:0;
  box-shadow:0 1px 3px rgba(17,24,39,.12); }
.ap-modulo .scelta-ciclo .ciclo-opzione:has(input:focus-visible) { outline:2px solid #2254c5; outline-offset:2px; }
.ap-modulo .scelta-ciclo input { position:absolute; opacity:0; pointer-events:none; }
.ap-modulo .scelta-ciclo .ciclo-nome { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px; font-weight:600; }
.ap-modulo .scelta-ciclo .ciclo-prezzo, .ap-modulo .scelta-ciclo .ciclo-nota { display:none; }
.ap-modulo .ap-ciclo-riga { margin:0 0 18px; color:#2254c5; font-size:14px; }
/* «Puoi fare meglio» (Davide, 29/09/2026 notte): le due linguette alte uguali, il regalo come etichetta sopra
   «Annuale»; la scheda scelta con un fondo appena azzurro; sopra il totale «Paghi oggi» e, con l'annuale, il risparmio. */
.ap-modulo .scelta-ciclo { margin-top:14px; }
.ap-modulo .scelta-ciclo .ciclo-opzione { overflow:visible; }
.ap-modulo .scelta-ciclo .ciclo-regalo { position:absolute; top:-12px; right:8px; margin:0; padding:2px 8px;
  font-size:11.5px; font-weight:700; white-space:nowrap; border-radius:999px; background:#e8f5ec; color:#1e7a3c;
  border:1px solid #cfe9d8; }
.ap-modulo .ap-ciclo-riga { text-align:center; color:var(--grigio); font-size:13.5px; margin:8px 0 20px; }
.ap-carta:has(input:checked) { background:#f7f9ff; }
.ap-totale-titolo { margin:18px 0 6px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--grigio);
  text-transform:uppercase; }
.ap-risparmio { margin:6px 0 0; font-size:13.5px; color:#1e7a3c; font-weight:600; }
.ap-risparmio s { color:#8a94a6; font-weight:500; }
.ap-totale .ap-risparmio { margin:4px 0 2px; }
/* Webinar del 15/10/2026 (Davide, 02/10/2026; audit «acquisto a bottone», B2 e B3): sopra i moduli di /registrati e
   /dati-studio il piano scelto dal link; lì e accanto al prezzo di /attiva il regalo «avvio fatto da noi», con lo stesso
   verde del risparmio. Una riga, nessun riquadro dentro il riquadro. */
.piano-scelto-riga { margin:0 0 10px; font-size:15px; font-weight:600; color:var(--inchiostro); }
.avvio-regalo-riga { margin:10px 0 14px; padding:10px 14px; border-radius:10px; background:#eaf6ee; color:#1e5f32;
  font-size:14.5px; line-height:1.45; }
.avvio-regalo-riga b { color:#1e7a3c; }