/*
 * La cornice dell'app (lotto 8-bis, 18/09/2026; D108): i blocchi «v4» del PRONTUARIO v4 del chip «🎨 LINGUAGGIO
 * VISIVO 2» (`GRAFICA_AI_WEBAPP/PRONTUARIO_v4_2026-09-18/css/grammatica.css`, 31.140 B, md5 452efe5e…) — la
 * cornice (testata · corpo · piè unico), la soglia (D107), le porte «sul posto» — presi come stanno e montati sui
 * token di `stanze.css` (che è il v2/v3 chiuso in `.saq-stanze`, con i rilievi della Verifica). Il file v4 intero
 * NON si carica tale e quale: i suoi blocchi v2/v3 sono già in `stanze.css`, e caricarli due volte scavalcherebbe
 * i rilievi chiusi lì. In coda: le poche classi del pannello di WordPress che le stanze usano ancora (`.notice`,
 * `.button`, `.widefat`, i campi) e che fuori dal pannello non avrebbero stile; la scheda stretta delle pagine
 * dell'accesso (il codice, l'invito, il nome, la prova), che era lo stile inline di `Accesso::pagina`.
 * La tabella del Quadro «una riga = una carta» (v4 §5, v5 §4) è in coda: F6 chiusa da Dario (D129.4, 18/09 11:55).
 * Dal 19/09 (D153, CODICE INGRESSO) questo foglio è anche **il foglio dello shortcode `[saq_ingresso]`** sul sito: i token valgono
 * pure su `.saq-soglia-sito` (l'involucro dello shortcode, che NON è `.app`: niente 100 vh né fondo carta dentro una pagina del sito),
 * e la veste delle tre porte (`.saq-porta-tre`, prima uno stile inline di `Accesso::paginaPorta`) sta qui, una volta per le due sedi.
 */
.app,.saq-soglia-sito{
  --carta:#f7f3ec;--carta-2:#fffdf9;--ink:#1c1b19;--grigio:#5b5854;--spento:#a29c90;--riga:#e2dccf;
  --arancio:#EC5B26;--giallo:#FAAE40;--verde:#8CC24A;--ciano:#23AAE2;--magenta:#D1135B;
  --nota:#ffe9b3;--ombra:3px 3px 0 rgba(28,27,25,.16);--tessera:12px;--raggio:2px;--ocra:#c99126;
  --font:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
body.saq-app{margin:0;min-height:100vh;background:#f7f3ec;color:#1c1b19;font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.45}   /* SOLO il corpo dell'app: su `html` la regola valeva anche dentro le pagine del sito con lo shortcode (D153, misurato dal brainstorming) */
.app *{box-sizing:border-box}
.app a{color:inherit}

/* ---- v4 · LA CORNICE DELL'APP — testata + corpo + piè unico, su ogni pagina. Nessun elemento di WordPress. ---- */
.app{min-height:100vh;display:flex;flex-direction:column;background:var(--carta);color:var(--ink);font-family:var(--font)}
.app-testata{flex:none;height:64px;border-bottom:1px solid var(--riga);background:var(--carta)}   /* NON fissa: scorre con la pagina; NESSUN gesto sul logo (D80) */
.app-testata .dentro,.app-pie .dentro,.app-corpo{width:100%;max-width:1100px;margin:0 auto;padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}
.app-testata .dentro{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.app-testata .logo-sa{display:block;height:44px;width:auto;flex:none}                 /* logo ScuolArte v11 (`Segni::logoScuolArte`): 44 px, 40 sul telefono, MAI sotto 36 */
.app-testata a.logo-link{display:block;line-height:0;border-radius:var(--raggio);flex:none}   /* dentro l'app il logo porta alla scrivania; nella soglia non è un collegamento */
.app-testata a.logo-link:focus-visible{outline:3px solid var(--ciano);outline-offset:4px}
.app-testata .chi{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px;color:var(--ink);margin:0}
.app-testata .chi b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}   /* il nome dell'Istituto: una riga, si tronca con «…» */
.app-testata .chi .punto{color:var(--grigio);flex:none}
.app-testata .chi a.esci,.app-testata .chi a.profilo{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap;flex:none}   /* «Esci»: una parola, nessuna icona; «Il tuo nome» (il profilo, D129.3) nella stessa veste */
.app-testata .chi a.esci:focus-visible,.app-testata .chi a.profilo:focus-visible{outline:3px solid var(--ciano);outline-offset:3px;border-radius:var(--raggio)}
.app-testata .ente{font-size:13px;line-height:1.3;color:var(--grigio);text-align:right;flex:none;margin:0}   /* fuori dall'accesso: «Extrascuola ETS · Edizione 2026-2027», due righe */
.app-testata .ente b{color:var(--ink);font-weight:700;display:block}
.app-testata .chi.prova{color:var(--grigio)}                                         /* nella prova: il segno «esempio» + l'etichetta di T2 al posto dell'Istituto; «Esci» resta */
.app-testata .chi.prova .segno{width:18px;height:18px;flex:none}
.app-corpo{flex:1;padding-top:28px;padding-bottom:40px}
.app-corpo h1{font-size:clamp(24px,2.6vw,32px);margin:0 0 6px;letter-spacing:-.01em;font-weight:700}
.app-corpo .sotto{color:var(--grigio);margin:0 0 22px;font-size:16px;max-width:60ch}
.app-pie{flex:none;border-top:1px solid var(--riga);background:var(--carta);margin-top:auto}
.app-pie .dentro{padding-top:18px;padding-bottom:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--grigio)}
.app-pie .ente-riga{margin:0}.app-pie .ente-riga b{color:var(--ink)}
.app-pie nav{display:flex;gap:6px 22px;flex-wrap:wrap;flex:none;align-items:baseline}
.app-pie nav a,.app-pie.saq-stanze.saq-piede nav details.saq-segnala > summary.migliora{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap;border-bottom:0}   /* «Migliora lo strumento →» · «I tuoi dati personali»: inchiostro, MAI ocra (regola v4) */
.app-pie nav a:focus-visible{outline:3px solid var(--ciano);outline-offset:3px;border-radius:var(--raggio)}
@media (max-width:600px){.app-testata{height:56px}.app-testata .logo-sa{height:40px}.app-testata .chi{font-size:14px;gap:8px}.app-testata .ente{font-size:12px}.app-corpo{padding-top:20px}
  .app-testata .chi a.profilo .ruolo{display:none}}   /* D163.3: sul telefono resta «Il tuo nome» (TESTI 4 §C: mai «DS»); con la funzione la pagina si allargava a 395 px [MISURATO a 375] */

/* ---- le stanze dentro la cornice: la carta è già della pagina, la colonna è già `.app-corpo` (1100 px) ---- */
.app-corpo.saq-stanze{margin:0 auto;padding-top:28px;padding-bottom:40px}
.app-corpo .saq-stanze{margin:0;padding-left:0;padding-right:0;padding-top:0}
.app-corpo .saq-stanze > .pagina{max-width:none}
.app-pie.saq-stanze{margin:0;padding:0;display:block}
.app-pie.saq-stanze.saq-piede .dentro{padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px)}
.app-pie.saq-stanze .marchio-striscia .frase{max-width:none}
@media (max-width:600px){.app-corpo.saq-stanze{padding-top:20px}}

/* ---- v4 · LA SOGLIA DELL'APP (D107) → L'INGRESSO (D153, 19/09): una porta sola che gira sul cardine sinistro e si allontana (S5), dietro le tre porte dei ruoli
   che compaiono sfumando dopo il giro (DI-3.1); ogni porta fa lo stesso gesto al clic (DI-4). È IL gesto della schermata. Un componente per app e sito (`Cornice::soglia`). ---- */
/* Sulla porta (dalla prima opzione del foglio della Sperimentazione, `35_soglia/soglia_v3.html` e `37_home_v3/home_v3.html`, DI-10a): il logo ScuolArte
   dentro, grande (128 px, 96 sul telefono: DI-2.2); la riga di fase «FASE 1 · Analisi di fattibilità partecipata» (S6); la scritta «INGRESSI» (la stringa è
   «Ingressi»: il maiuscolo è una veste, sta qui); i tre ruoli; «Entra →». Nella pagina della soglia la testata cede il logo alla porta finché la porta non ha girato (`body.con-soglia`). */
/* Rilievo 4 dei lettori del 19/09 (addendum al mandato): NESSUN SALTO all'apertura. La porta e il blocco delle porte stanno nella stessa cella di una
   griglia (`.scena-ingresso`): la cella è alta quanto il più alto dei due; aprendo, l'anta esce di scena senza lasciare il flusso (visibility, non display),
   il blocco cresce in altezza in 0,3 s mentre sfuma (`.cresce`, l'altezza la mette lo script); con «riduci il movimento» il blocco occupa la sua altezza
   fin dall'inizio (spazio riservato: nessuno scatto, nemmeno senza transizioni). */
.scena-ingresso{display:grid}
.scena-ingresso>.soglia,.scena-ingresso>.dentro-soglia{grid-area:1/1;min-width:0}
.soglia{perspective:1400px;perspective-origin:0 50%;margin:0 0 18px}
.porta-unica{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;align-items:end;gap:18px;width:min(100%,560px);min-height:320px;padding:22px 26px 26px 30px;background:var(--carta-2);border-radius:var(--raggio);box-shadow:var(--ombra);border-left:6px solid var(--ink);text-align:left;font:inherit;color:inherit;text-decoration:none;cursor:pointer;transform-origin:0 50%;transform:rotateY(0);opacity:1;transition:transform .7s cubic-bezier(.215,.61,.355,1),opacity .2s linear .55s}
.porta-unica .marchio{grid-column:1/-1;align-self:start;display:block;margin:0 0 6px;line-height:0}
.porta-unica .marchio .logo-sa{display:block;height:128px;width:auto}                   /* DI-2.2: ≈128 px a computer, 96 sul telefono (era 72, S3) */
.porta-unica .porta-fase{grid-column:1/-1;align-self:start;display:block;margin:-2px 0 14px;font-size:14px;color:var(--grigio);letter-spacing:.02em}   /* S6: la riga di fase sotto il logo (`porta-fase`, non `fase`: `.fase` è il riquadro di fase della sala docenti in stanze.css) */
.porta-unica .porta-fase b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-right:2px;color:var(--ink)}
.porta-unica .nome{display:block;font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;margin:0 0 8px}   /* «INGRESSI» */
.saq-app.con-soglia .app-testata .logo-sa{display:none}                                  /* la testata cede il logo alla porta chiusa */
.saq-app.con-soglia .app-testata .ente{margin-left:auto}                                 /* «Extrascuola ETS · Edizione» resta a destra (D136) */
.porta-unica .ruoli{display:block;margin:0;color:var(--grigio);font-size:15px}
.porta-unica .entra{font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:var(--ink);color:#fff;border-radius:var(--raggio);white-space:nowrap}
.porta-unica.invito{animation:porta-invito .6s cubic-bezier(.215,.61,.355,1) 1 both}  /* l'invito: −10° UNA volta per ingresso del puntatore o del fuoco; si posa */
@keyframes porta-invito{from{transform:rotateY(0)}50%{transform:rotateY(-10deg)}to{transform:rotateY(0)}}
.porta-unica:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.soglia.gira .porta-unica{transform:rotateY(90deg);opacity:0;pointer-events:none}   /* il giro: 0,7 s, easing di casa, una volta; +90° con il cardine a sinistra = l'anta si allontana (S5, misurato dalla Sperimentazione) */
.soglia.ferma .porta-unica{transition:none}                                           /* `?giro=N`: la porta ferma a N gradi, per le catture */
.soglia.aperta{visibility:hidden;pointer-events:none}                              /* fatto il giro l'anta non c'è più, ma la cella resta: nessun salto */
.dentro-soglia{display:block;visibility:hidden;opacity:0;height:0;overflow:hidden}   /* chiuso: senza altezza e invisibile (con reduced-motion: alto da subito, sotto) */
.dentro-soglia.cresce{visibility:visible;overflow:hidden;transition:height .3s ease-out,opacity .3s ease-out;opacity:1}   /* DI-3.1: le tre porte compaiono sfumando DOPO il giro, in ≈0,3 s, mentre il blocco cresce */
.dentro-soglia.visibile{visibility:visible;opacity:1;height:auto;overflow:visible}
.dentro-soglia .titolo-porte:focus{outline:none}
@media (max-width:760px){.porta-unica{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;min-height:240px;width:100%}.porta-unica .entra{justify-self:start}.porta-unica .marchio .logo-sa{height:96px}}
@media (hover:none){.porta-unica.invito{animation:none}}
@media (prefers-reduced-motion:reduce){.porta-unica,.porta-unica.invito,.soglia.gira .porta-unica{transition:none;animation:none;transform:none}.dentro-soglia{height:auto;overflow:visible}.dentro-soglia.cresce{transition:none}}

/* ---- D161 (20/09, PD-19): «TORNA AL SITO» — il pulsante chiaro accanto a «Entra →», stessa misura, **solo nel contesto app** (`Cornice::soglia` con il
   collegamento alla home del sito: porta chiusa in /app-scuolarte/, dietro l'anta, pagina del codice; nello shortcode del sito il pulsante non c'è: il menu
   del sito c'è già). Stile: il secondario del prontuario v5 §2 (bordo d'inchiostro su carta). Il pulsante è un `<a>` FUORI dall'anta (dentro un `<a>` non
   può stare un altro `<a>`) ma nella stessa cella della griglia e nello stesso spazio prospettico: sta in basso a destra, a sinistra di «Entra →» (lo
   scostamento lo misura lo script: `--dopo-entra`; senza script, il valore di riserva), e GIRA CON L'ANTA — l'invito a −10° e il giro a +90° — perché il suo
   asse di rotazione è il cardine dell'anta (`transform-origin` negativo, misurato dallo script). Con «riduci il movimento» è fermo come l'anta. ---- */
.soglia.con-ritorno{position:relative;display:grid;grid-template-columns:min(100%,560px)}
.soglia.con-ritorno>.porta-unica,.soglia.con-ritorno>.torna-sito{grid-area:1/1}
.soglia.con-ritorno .porta-unica .voce{padding-right:var(--largh-torna,150px)}   /* la riga «INGRESSI · i ruoli» lascia il posto al pulsante (va a capo se serve) */
.soglia .torna-sito{align-self:end;justify-self:end;z-index:1;margin:0 var(--dopo-entra,144px) 26px 0;display:inline-flex;align-items:center;padding:11px 18px;font-size:16px;font-weight:700;line-height:1.45;color:var(--ink);background:var(--carta-2);border:1.5px solid var(--ink);border-radius:var(--raggio);text-decoration:none;white-space:nowrap;box-sizing:border-box;transform-origin:var(--cardine,-380px) 50%;transform:rotateY(0);opacity:1;transition:transform .7s cubic-bezier(.215,.61,.355,1),opacity .2s linear .55s}
.soglia .torna-sito:hover{background:var(--carta)}
.soglia .torna-sito:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.soglia.invito-anta .torna-sito{animation:porta-invito .6s cubic-bezier(.215,.61,.355,1) 1 both}
.soglia.gira .torna-sito{transform:rotateY(90deg);opacity:0;pointer-events:none}
.soglia.ferma .torna-sito{transition:none}
@media (max-width:760px){.soglia .torna-sito{justify-self:start;margin:0 0 26px var(--dopo-entra-tel,148px)}.soglia.con-ritorno .porta-unica .voce{padding-right:0}}   /* sul telefono «Entra →» sta a sinistra, su una riga sua: il ritorno alla sua destra, i ruoli sopra a tutta larghezza */
@media (hover:none){.soglia.invito-anta .torna-sito{animation:none}}
@media (prefers-reduced-motion:reduce){.soglia .torna-sito,.soglia.invito-anta .torna-sito,.soglia.gira .torna-sito{transition:none;animation:none;transform:none}}
/* dietro l'anta (le tre porte aperte) e nella pagina del codice: lo stesso pulsante in una riga di azioni, accanto al primario */
.saq-porta-tre .azioni-porte{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.app .bottone.torna-sito{background:var(--carta-2);color:var(--ink);border:1.5px solid var(--ink);padding:12px 18px;font-size:16px;font-weight:700;line-height:1.45}
.app .bottone.torna-sito:hover{background:var(--carta)}
.app .bottone.torna-sito:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.saq-scatola .azioni-codice{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.app .saq-scatola .azioni-codice button,.app .saq-scatola .azioni-codice .bottone.torna-sito{margin-top:1.2rem;padding:.7rem 1.4rem;font-size:1rem;font-weight:inherit;line-height:1.25;border-radius:.3rem;display:inline-flex;align-items:center}   /* la coppia della stessa misura (D161) */
@media (max-width:600px){.saq-porta-tre .azioni-porte{justify-content:stretch}.saq-porta-tre .azioni-porte .bottone,.saq-scatola .azioni-codice .bottone{flex:1 1 auto;text-align:center}}

/* ---- le tre porte dei ruoli (`.saq-porta-tre`: il corpo dell'app o l'involucro dello shortcode), dal prototipo v2 delle porte; era lo stile inline di `Accesso::paginaPorta` fino al 18/09 ---- */
.saq-porta-tre h1{font-size:clamp(26px,3vw,34px);letter-spacing:-.01em}
.saq-porta-tre .sotto{font-size:16px;line-height:1.45;max-width:60ch;margin-bottom:24px}
.saq-porta-tre .porte{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:row dense;gap:16px;margin:0 0 22px;padding:0;list-style:none;perspective:1400px;perspective-origin:0 50%}
.saq-porta-tre .porte>li{display:contents}
.saq-porta-tre .porta{background:#fff;border-radius:8px;padding:18px 18px 16px 24px;display:flex;flex-direction:column;gap:8px;min-height:150px;position:relative;text-align:left;color:inherit;text-decoration:none;box-shadow:3px 3px 0 #a88a74;border-left:14px solid var(--ciano);height:100%;transform-origin:0 50%;transition:transform .7s cubic-bezier(.215,.61,.355,1),opacity .2s linear .55s}
.saq-porta-tre .porta[data-porta=studenti]{border-left-color:var(--magenta)}.saq-porta-tre .porta[data-porta=enti]{border-left-color:var(--verde)}
.saq-porta-tre .porta h2{margin:0;font-size:20px;line-height:1.2;text-decoration:none}.saq-porta-tre .porta p{margin:0;font-size:14.5px;color:var(--grigio);line-height:1.45;flex:1}
.saq-porta-tre .porta .stato{font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center;color:var(--ink)}.saq-porta-tre .porta .stato::before{content:"→";font-weight:700}
.saq-porta-tre .porta.aperta{outline:3px solid var(--ink);outline-offset:2px}.saq-porta-tre .porta.aperta .stato::before{content:"↓"}
.saq-porta-tre .porta:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.saq-porta-tre .porta.gira{transform:rotateY(90deg);opacity:0;pointer-events:none}   /* DI-4: la porta scelta fa lo stesso gesto dell'anta, poi si entra */
.saq-porta-tre .pannello{grid-column:1/-1;background:#fff;border-radius:8px;box-shadow:3px 3px 0 #a88a74;padding:22px 24px 24px;margin:6px 0 10px;border-top:6px solid var(--ciano)}
.saq-porta-tre .pannello[data-porta=studenti]{border-top-color:var(--magenta)}.saq-porta-tre .pannello[data-porta=enti]{border-top-color:var(--verde)}
.saq-porta-tre .pannello h3{margin:0 0 4px;font-size:19px}.saq-porta-tre .pannello .riga{margin:0 0 16px;color:var(--grigio);font-size:15px;line-height:1.45;max-width:64ch}
.saq-porta-tre .pannello .riservata{margin:0 0 16px;font-size:15px;line-height:1.45;max-width:70ch;color:var(--ink);font-weight:600}.saq-porta-tre .pannello .riservata a{color:var(--ink);font-weight:600;text-decoration:underline;white-space:nowrap}
.saq-porta-tre .pannello .dati{margin:0 0 12px;font-size:13.5px;color:var(--grigio);line-height:1.45;max-width:70ch}.saq-porta-tre .pannello .dati a{color:var(--ink);font-weight:600;text-decoration:underline;white-space:nowrap}   /* A5: la riga sui dati prima del campo */
.saq-porta-tre .campi{display:grid;grid-template-columns:minmax(220px,420px) auto;gap:12px;align-items:end}
.saq-porta-tre .campo label{display:block;font-size:13.5px;font-weight:600;margin:0 0 5px}
.saq-porta-tre .campo input{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid #8f8a80;border-radius:6px;background:#fff;box-sizing:border-box}
.saq-porta-tre .bottone{display:inline-block;justify-self:start;padding:12px 22px;border-radius:6px;font-weight:600;border:0;font-size:15px;background:var(--ink);color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap}
.saq-porta-tre .bottone.secondo{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.saq-porta-tre .pannello small.nota-porta{display:block;margin-top:12px;color:var(--grigio);font-size:13.5px;line-height:1.45;max-width:70ch}
.saq-porta-tre .pannello .dentro{margin-top:16px;padding-top:10px;border-top:1px dashed #cfc8ba;font-size:13.5px;color:var(--grigio);line-height:1.5}.saq-porta-tre .pannello .dentro b{color:var(--ink)}
.saq-porta-tre .sotto-porte{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 6px}
.saq-porta-tre .sotto-porta{border:1.5px dashed #a29c90;border-radius:8px;padding:14px 16px}
.saq-porta-tre .sotto-porta h4{margin:0 0 4px;font-size:16px}.saq-porta-tre .sotto-porta p{margin:0 0 10px;font-size:14px;color:var(--grigio);line-height:1.45}
.saq-porta-tre .pannello .esempio{font-size:14.5px;color:var(--grigio);margin:14px 0 0}.saq-porta-tre .pannello .esempio a{color:var(--ink);font-weight:600;text-decoration:underline}   /* D154: «Intanto puoi esplorare l'esempio →», sotto il campo del codice */
.saq-porta-tre .pannello details.nota-grado{margin-top:14px}.saq-porta-tre .pannello details.nota-grado>.blocco{padding-top:8px}.saq-porta-tre .pannello details.nota-grado small.nota-porta{margin-top:0}   /* D110: la nota lunga dietro il pulsante di grado */
.saq-porta-tre .saq-errore{padding:.8rem 1rem;background:#fdeceb;border-left:4px solid #c0392b;border-radius:.2rem;margin:0 0 12px}
.saq-porta-tre .saq-contesto{margin:0 0 1rem;padding:.6rem .9rem;background:#eef4ee;border-left:4px solid #4a7a4a;border-radius:.2rem;font-size:.95rem}
.saq-porta-tre .saq-scaduta{margin:0 0 .6rem;padding:.6rem .8rem;border-left:4px solid #996800;background:#fffdf7;font-size:.95rem}
@media (max-width:760px){.saq-porta-tre .porte{grid-template-columns:1fr}.saq-porta-tre .porta{min-height:0}.saq-porta-tre .pannello{margin:-6px 0 12px}}
@media (max-width:640px){.saq-porta-tre .campi{grid-template-columns:1fr}.saq-porta-tre .sotto-porte{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.saq-porta-tre .porta,.saq-porta-tre .porta.gira{transition:none;transform:none;opacity:1}}

/* ---- lo shortcode `[saq_ingresso]` nel sito (D153): l'involucro NON è `.app` — solo i token, il carattere e la scatola; la porta al centro (DI-3.1), le tre porte nella colonna da 1100 px ---- */
.saq-soglia-sito{font-family:var(--font);color:var(--ink);line-height:1.45;max-width:none;margin:0 auto}
.saq-soglia-sito *{box-sizing:border-box}
.saq-soglia-sito a{color:inherit}
.saq-soglia-sito .soglia{width:min(100%,560px);margin:0 auto 18px}
.saq-soglia-sito .dentro-soglia{max-width:1100px;margin:0 auto}
.saq-soglia-sito h3.titolo-porte{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.01em;font-weight:700;margin:6px 0 4px;text-align:center;line-height:1.2}
.saq-soglia-sito .sotto{color:var(--grigio);font-size:16px;text-align:center;margin:0 auto 24px}
.saq-soglia-sito .saq-visita-invito{margin:8px auto 0;font-size:14px;color:var(--grigio);text-align:center}   /* «Guarda come funziona» (a parametro): erano le due regole di `soglia.css`, che non si accoda più */
.saq-soglia-sito .saq-visita-invito a{color:var(--ink);font-weight:600;text-decoration:underline}

/* ---- le classi del pannello di WordPress che le stanze usano ancora: fuori dal pannello hanno bisogno di queste righe ---- */
.app .notice{margin:0 0 16px;padding:10px 14px;background:var(--carta-2);border:1px solid var(--riga);border-left:4px solid var(--ciano);border-radius:var(--raggio);box-shadow:var(--ombra);font-size:14px}
.app .notice p{margin:0}
.app .notice-success{border-left-color:var(--verde)}.app .notice-warning{border-left-color:var(--giallo)}.app .notice-error{border-left-color:var(--magenta)}
.app .notice .notice-dismiss{display:none}
.app .button,.app button.button{display:inline-block;font:inherit;font-size:14px;font-weight:600;padding:7px 14px;border:1.5px solid var(--ink);border-radius:var(--raggio);background:var(--carta-2);color:var(--ink);cursor:pointer;text-decoration:none;line-height:1.3}
.app .button-primary,.app button.button-primary{background:var(--ink);color:#fff}
.app .button-small{font-size:13px;padding:4px 10px}
.app .bottone{display:inline-block;padding:12px 22px;border-radius:6px;font-weight:600;border:0;font-size:15px;background:var(--ink);color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap}
.app .widefat{width:100%;border-collapse:collapse;background:var(--carta-2);font-size:14px}
.app .widefat th,.app .widefat td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--riga);vertical-align:top}
.app .widefat th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--grigio)}
.app input.regular-text,.app input[type=text].regular-text,.app input[type=email].regular-text{width:min(100%,25em)}
.app textarea.large-text{width:100%}
.app .description{color:var(--grigio);font-size:13px}
.app input[type=text],.app input[type=email],.app input[type=number],.app select,.app textarea{font:inherit;font-size:15px;padding:8px 10px;border:1.5px solid #8f8a80;border-radius:6px;background:#fff;color:inherit;max-width:100%}
.app .torna-riga{margin:0 0 10px;font-size:14px}.app .torna-riga .torna{color:var(--grigio);text-decoration:underline}

/* ---- la scheda stretta delle pagine dell'accesso (era lo stile inline di `Accesso::pagina`): il codice, l'invito, il nome, la prova ---- */
.app .saq-scatola{max-width:34rem;margin:1rem auto 2rem;padding:2rem;background:var(--carta-2);border-radius:var(--raggio);box-shadow:var(--ombra);font-size:16px;line-height:1.6}
.app .saq-scatola h1{font-size:1.4rem;margin:0 0 1rem}
.app .saq-scatola label{display:block;font-weight:600;margin:1.2rem 0 .3rem}
.app .saq-scatola input,.app .saq-scatola select{width:100%;box-sizing:border-box;padding:.7rem;font-size:1.1rem;border:1px solid #9a9a94;border-radius:.3rem;background:#fff;color:inherit}
.app .saq-scatola .saq-cifre{letter-spacing:.4em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}
.app .saq-scatola button{margin-top:1.2rem;padding:.7rem 1.4rem;font-size:1rem;background:var(--ink);color:#fff;border:0;border-radius:.3rem;cursor:pointer}
.app .saq-errore{padding:.8rem 1rem;background:#fdeceb;border-left:4px solid #c0392b;border-radius:.2rem}
.app .saq-secondaria{font-size:.9rem;margin-top:1.5rem}
.app .saq-contesto{margin:0 0 1rem;padding:.6rem .9rem;background:#eef4ee;border-left:4px solid #4a7a4a;border-radius:.2rem;font-size:.95rem}
.app .saq-scaduta{margin:0 0 .6rem;padding:.6rem .8rem;border-left:4px solid #996800;background:#fffdf7;font-size:.95rem}
.app .saq-separatore{margin:2.5rem 0 1.5rem;border:0;border-top:1px solid var(--riga)}
.app .saq-scatola h2{font-size:1.1rem;margin:0 0 .8rem}
.app .saq-bottone{display:inline-block;padding:.7rem 1.4rem;background:var(--ink);color:#fff;text-decoration:none;border-radius:.3rem}
.app .saq-scelte{margin-top:1.5rem}
.app .saq-scatola .saq-piede{display:none}   /* il piè della scheda: la cornice ha il piè unico */
/* il profilo (D129.3): i campi della persona (`Persona::campi`, nati per la copertina del Quadro) uno sotto l'altro, come nome e cognome */
.app .saq-scatola .saq-profilo .saq-campo{display:block}
.app .saq-scatola .saq-profilo .saq-campo label{display:block;margin:1.2rem 0 .3rem;font-size:inherit;font-weight:600;white-space:normal;color:inherit}
.app .saq-scatola .saq-profilo .saq-campo input[type=text],.app .saq-scatola .saq-profilo .saq-campo select{width:100%;font-size:1.1rem;padding:.7rem;border:1px solid #9a9a94;border-radius:.3rem;font-family:inherit;color:inherit}
.app .saq-scatola .saq-profilo .saq-campo[hidden]{display:none}
.app .saq-scatola .saq-profilo .saq-aiuto{display:block;margin-top:.4rem;font-size:.9rem;line-height:1.5;color:var(--grigio)}
.app .saq-scatola .sotto{margin:0 0 1rem}

/* ---- la fotografia (D127): una schermata piccola nella colonna ---- */
.app .saq-fotografia{max-width:60ch}
.app .saq-fotografia .ultima{font-weight:600}
.app .saq-fotografie,.saq-fotografie{margin:6px 0 0;padding:0;list-style:none}   /* «Fotografie del Quadro» (D129.6): una riga per fotografia, «Scarica» accanto; anche nel pannello */
.app .saq-fotografie li,.saq-fotografie li{margin:0 0 6px;font-size:14px}

/* ---- v5 §4 · LE CARTE SOTTO 820 PX (F6: sì, D129.4; terzo commit del lotto 8-bis) — le tabelle del Quadro (`Foglio::tabella`, le aree;
   `Foglio::tabellaRighe`, brani/organico/docenti) a schermo largo restano tabelle; sotto 820 px UNA RIGA = UNA CARTA: `display:block`,
   l'intestazione di colonna diventa l'etichetta della cella (`td::before{content:attr(data-label)}`, lo stesso attributo del v5 e della
   prova `10_quadro_riga_carta/` della Produzione). Solo CSS + attributi: la logica e i nomi dei campi non cambiano. Chiuso in `.app`:
   vale nella cornice (il docente); il pannello del coordinamento, che carica `quadro.css` da solo, resta com'è. Vince sul
   `min-width:856px` di `quadro.css` (che a 900 px faceva scorrere il foglio di lato: le carte stanno nella colonna). ---- */
@media (max-width:820px){
  .app .saq-tabella,.app .saq-tabella tbody,.app .saq-tabella tr,.app .saq-tabella td{display:block;min-width:0;width:auto}
  .app .saq-tabella{margin:4px 0 0;table-layout:auto;background:transparent;box-shadow:none;border:0}
  .app .saq-tabella colgroup,.app .saq-tabella thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* le intestazioni restano per chi legge con lo schermo */
  .app .saq-tabella tr{background:var(--carta-2);box-shadow:var(--ombra);border-radius:var(--raggio);padding:12px 14px;margin:0 0 12px;border:1px solid var(--riga)}
  .app .saq-tabella td{padding:6px 0;border:0;background:transparent;text-align:left}
  .app .saq-tabella td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--grigio);font-weight:700;margin:0 0 4px}   /* l'intestazione di colonna, come etichetta della riga */
  .app .saq-tabella td.saq-c-aree{padding-bottom:10px;border-bottom:1px solid var(--riga);margin-bottom:4px}
  .app .saq-tabella td.saq-c-aree::before{display:none}   /* la carta comincia con il nome dell'area: l'etichetta «Aree» sarebbe ridondante */
  .app .saq-tabella .saq-area-nome{text-align:left;font-size:15px}
  .app .saq-tabella .saq-area-icona{margin:6px 0 0}
  .app .saq-tabella .saq-riga-stato,.app .saq-tabella .saq-ultima-area{text-align:left}
  .app .saq-tabella td input[type=text]{text-align:left}
  .app .saq-tabella tr.saq-bozze td{background:transparent}
  .app .saq-tabella td.saq-bozze-etichetta::before,.app .saq-tabella td[colspan]::before{display:none}
  .app .saq-tabella.saq-righe td.saq-c-num{font-weight:700;padding-bottom:2px}
  .app .saq-tabella.saq-righe td.saq-c-num::before{display:inline;margin-right:6px}
}

/* ---- v5 §2 · UN GRADO ALLA VOLTA (D110): il pulsante «di grado» — grande, esplicito, in parole; il grado aperto sta DENTRO il precedente.
   Preso da `PRONTUARIO_v5_2026-09-18/css/grammatica.css` :285-300 (chip 🎨 2, 18/09 12:05), chiuso in `.app`; lotto del completamento minimo
   (CODICE 13, 19/09): «Prepara la proposta», «Mostra la sintesi», «Crea un evento interno». La freccia è tipografica (↓/↑), non un'icona. ---- */
.app details.grado{margin:14px 0 0}
.app details.grado>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:12px 18px;font-size:16px;font-weight:700;line-height:1.25;color:var(--ink);background:var(--carta-2);
  border:1.5px solid var(--ink);border-radius:var(--raggio);box-shadow:var(--ombra);width:100%;max-width:100%;box-sizing:border-box}
.app details.grado>summary::-webkit-details-marker{display:none}
.app details.grado>summary::after{content:"↓";font-weight:700;flex:none}
.app details.grado[open]>summary{background:var(--ink);color:#fff;box-shadow:none}
.app details.grado[open]>summary::after{content:"↑"}
.app details.grado>summary .aperto{display:none}.app details.grado[open]>summary .aperto{display:inline}.app details.grado[open]>summary .chiuso{display:none}
.app details.grado>summary:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}
.app details.grado>summary:hover{background:var(--carta)}.app details.grado[open]>summary:hover{background:var(--ink)}
.app details.grado>.blocco{padding:16px 18px 6px;border-left:3px solid var(--ink);margin:10px 0 0 8px}
.app details.grado details.grado{margin-left:0}
@media (max-width:600px){.app details.grado>summary{min-height:52px;padding:14px 16px}.app details.grado>.blocco{padding:14px 12px 4px;margin-left:4px}}
@media (prefers-reduced-motion:no-preference){.app details.grado>.blocco{animation:grado-apre .2s ease-out both}}
@keyframes grado-apre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* il pulsante piccolo che apre un modulo sul posto («Modifica i tre campi»): un `details` con il summary vestito da bottone secondario */
.app details.piccolo{margin:14px 0 0}
.app details.piccolo>summary{list-style:none;cursor:pointer;display:inline-block}
.app details.piccolo>summary::-webkit-details-marker{display:none}
.app details.piccolo>.blocco{margin:12px 0 0;padding:14px 16px;border:1.5px dashed var(--spento);border-radius:var(--raggio)}

/* ---- il completamento minimo (CODICE 13, 19/09; D114, D116, D118, D131): la lista unica degli Eventi, il modulo a tre campi, la scheda a gradi
   dell'evento interno, «Prepara la proposta», la sintesi con le due copie. Dal prototipo della Sperimentazione 6
   (`prove/34_completamento_minimo/eventi_v3.html`, `evento_interno.html`, `quadro_riga_v3.html`, 18/09 12:07 — il riferimento visivo, D131):
   le classi sono le sue, sui token della cornice. Il segno di origine Percorso/Interno è quello del prototipo (`.origine`: il v5 non lo porta, A13). ---- */
.app .saq-eventi-lista .intest,.app .saq-evento-interno .intest{margin:0 0 22px}
.app .saq-eventi-lista .carta,.app .saq-evento-interno .carta{background:var(--carta-2);border-radius:var(--raggio);box-shadow:var(--ombra);padding:18px 20px 16px;margin:0 0 22px}
.app .saq-eventi-lista .carta h2,.app .saq-evento-interno .carta h2{margin:0 0 4px;font-size:19px}
.app .saq-eventi-lista .carta>p.riga,.app .saq-evento-interno .carta>p.riga{margin:0 0 10px;font-size:14px;color:var(--grigio)}
.app .saq-completamento .elenco{list-style:none;margin:0;padding:0;border-top:1px dashed #cfc8ba}
.app .saq-completamento .elenco li{display:grid;grid-template-columns:auto 1fr auto;gap:8px 16px;align-items:center;padding:12px 0;border-bottom:1px dashed #cfc8ba;font-size:14px}
.app .saq-completamento .elenco li .voce b{display:block;font-size:15.5px}.app .saq-completamento .elenco li .voce small{display:block;color:var(--grigio)}
.app .saq-completamento .elenco .voce a{color:var(--ink);font-weight:600}
.app .saq-completamento .origine,.app .saq-tabella .origine{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.app .saq-completamento .origine i,.app .saq-tabella .origine i{display:inline-block;width:22px;height:16px;border-radius:var(--raggio);transform:skewX(-14deg);border:2px solid var(--ink);background:var(--carta)}
.app .saq-completamento .origine.percorso i{background:var(--ciano);border-color:var(--ciano)}
.app .saq-completamento .carta>.origine{white-space:normal;line-height:1.3}   /* la riga «Evento interno · lo vede solo il tuo Istituto» va a capo sul telefono [MISURATO dal vivo a 375: senza, la pagina si allargava a 401] */
.app .saq-completamento .tessera{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--raggio);background:var(--carta);border:1.5px solid var(--riga);text-align:center;line-height:1.1}
.app .saq-completamento .tessera b{display:block;font-size:20px}.app .saq-completamento .tessera small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grigio)}
.app .saq-completamento .elenco .azioni{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.app .saq-completamento .elenco .azioni .bottone{padding:10px 16px;font-size:14px}
.app .bottone.secondario{background:var(--carta-2);color:var(--ink);border:1.5px solid var(--ink)}
.app .bottone.piccolo{padding:8px 14px;font-size:14px}
.app .saq-completamento .dafare{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--ink);padding:2px 8px;border-radius:var(--raggio);white-space:nowrap;vertical-align:middle}
.app .saq-completamento .crea{margin:14px 0 0}.app .saq-completamento .crea .spiega{font-size:13.5px;color:var(--grigio);margin:8px 0 0}
.app .saq-completamento .nuovo h3{margin:0 0 4px;font-size:18px}.app .saq-completamento .nuovo p.riga{margin:0 0 12px;font-size:14px;color:var(--grigio)}
.app .saq-completamento .campi{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:14px 0 0}
.app .saq-completamento .campi.tre{grid-template-columns:1.6fr 1fr 1.4fr}
.app .saq-completamento .campo{display:flex;flex-direction:column;gap:5px}
.app .saq-completamento .campo.largo{grid-column:1/-1}
.app .saq-completamento .campo label,.app .saq-completamento .campo .etichetta{font-size:13.5px;font-weight:600}
.app .saq-completamento .campo label small{font-weight:400;color:var(--grigio)}
.app .saq-completamento .campo input,.app .saq-completamento .campo select,.app .saq-completamento .campo textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid #8f8a80;border-radius:var(--raggio);background:#fff;color:var(--ink)}
.app .saq-completamento .campo textarea{resize:vertical;min-height:2.6em}
.app .saq-completamento .impegno{display:flex;gap:8px;flex-wrap:wrap}
.app .saq-completamento .impegno label{flex:1 1 auto;display:grid;place-items:center;padding:12px 10px;border:1.5px solid var(--ink);border-radius:var(--raggio);font-weight:600;font-size:15px;cursor:pointer;background:var(--carta-2);text-align:center;position:relative}
.app .saq-completamento .impegno input{position:absolute;opacity:0;width:1px;height:1px}
.app .saq-completamento .impegno label:has(input:checked){background:var(--ink);color:#fff}
.app .saq-completamento .impegno label:has(input:focus-visible){outline:3px solid var(--ciano);outline-offset:2px}
.app .saq-completamento .date{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--grigio)}.app .saq-completamento .date input{flex:1 1 auto;min-width:0}
.app .saq-completamento .date.con-script .al{display:none}.app .saq-completamento .date.con-script.piu .al{display:block}   /* con lo script la seconda data compare con «più giorni»; senza, resta visibile */
.app .saq-completamento .nuovo .vede{font-size:13.5px;color:var(--grigio);margin:10px 0 0}
.app .saq-completamento .nuovo .azioni{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.app .saq-completamento .spazio-appuntamenti{min-height:40px}
.app .saq-completamento .minimo{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 6px}
.app .saq-completamento .minimo div{border-top:2px solid var(--ink);padding:8px 0 0}
.app .saq-completamento .minimo small{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--grigio);margin:0 0 3px}
.app .saq-completamento .minimo b{font-size:16px}
.app .saq-completamento .collegata{margin:14px 0 0;padding:12px 14px;border:1.5px dashed var(--spento);border-radius:var(--raggio);font-size:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.app .saq-completamento .collegata b{font-size:15px}.app .saq-completamento .collegata small{display:block;color:var(--grigio)}
.app .saq-completamento .collegata a{color:var(--ink);font-weight:600;margin-left:auto}
.app .saq-completamento .riga-grado{font-size:13.5px;color:var(--grigio);margin:8px 0 0}
.app .saq-completamento .grado-azioni{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.app .saq-completamento .ruoli{font-size:13.5px;color:var(--ink);background:var(--nota);padding:10px 12px;border-radius:var(--raggio);margin:14px 0 0}
.app .saq-completamento .archivia{margin:16px 0 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.app .saq-completamento .archivia .spiega{font-size:13px;color:var(--grigio)}
.app .saq-completamento .copia-blocco{margin:16px 0 0;border-top:1px solid var(--riga);padding:16px 0 0}
.app .saq-completamento .copia-testa{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.app .saq-completamento .copia-testa h3{margin:0;font-size:17px;flex:1 1 auto}
.app .saq-completamento .copia-testa .dove{font-size:13.5px;color:var(--grigio);flex-basis:100%}
.app .saq-completamento .copia-blocco pre{margin:0;white-space:pre-wrap;font:15px/1.55 var(--font);color:var(--ink);background:var(--carta);padding:14px 16px;border-radius:var(--raggio);border:1px solid var(--riga)}
.app .saq-completamento .conta{font-size:12.5px;color:var(--grigio);margin:6px 0 0;text-align:right}
.app .saq-completamento .esito{font-weight:600;color:#2f7d5b;font-size:14px}
.app .saq-proposta-percorso{margin:0 0 22px}
/* la riga del Quadro (M1, D114): sotto ogni area, «Collega a evento interno →» e l'evento collegato */
.app .saq-tabella .saq-collega-riga{margin:8px 0 0;font-size:13px;text-align:left}
.app .saq-tabella .saq-collega-riga .grado-link{display:inline-block;padding:8px 12px;font-size:13px;white-space:normal}
.app .saq-tabella .saq-collegata{display:block;margin:8px 0 0;color:var(--grigio);line-height:1.5}
.app .saq-tabella .saq-collegata .origine{font-size:11px;margin-right:4px}
.app .saq-tabella .saq-collegata a{color:var(--ink);font-weight:600}
/* la pagina del codice: la casella «ricordami su questo dispositivo» (D150) */
.app .saq-scatola label.saq-ricordami{display:flex;align-items:center;gap:.6rem;font-weight:400;font-size:.95rem;margin:1rem 0 0}
.app .saq-scatola label.saq-ricordami input{width:1.2rem;height:1.2rem;margin:0;padding:0}
.app .saq-scatola .saq-ricordami-riga{font-size:.85rem;color:var(--grigio);margin:.3rem 0 0;line-height:1.5}
.app .saq-completamento .archivia-conferma>.blocco .spiega{display:block;margin:0 0 10px;font-size:14px;color:var(--ink)}
@media (max-width:700px){
  .app .saq-completamento .elenco li{grid-template-columns:1fr}.app .saq-completamento .elenco .azioni{justify-content:flex-start}
  .app .saq-completamento .tessera{width:auto;height:auto;padding:6px 10px;justify-self:start;display:inline-grid}
  .app .saq-completamento .campi,.app .saq-completamento .campi.tre{grid-template-columns:1fr}
  .app .saq-completamento .minimo{grid-template-columns:1fr}.app .saq-completamento .grado-azioni{flex-direction:column}.app .saq-completamento .grado-azioni .bottone{text-align:center}
  .app .saq-completamento .collegata a{margin-left:0}
}

/* ---- Le offerte di tempo e gli appuntamenti (0008, 20/09, CODICE APPUNTAMENTI; PD-28: la voce in «Eventi nel percorso»; D110: a gradi) ---- */
.app .saq-appuntamenti h3{margin:22px 0 6px;font-size:17px}
.app .saq-appuntamenti h3:first-of-type{margin-top:14px}
.app .saq-appuntamenti .avviso{margin:10px 0 0;padding:10px 14px;background:var(--nota);border-radius:var(--raggio);font-size:14.5px}
.app .saq-appuntamenti .avviso a{color:var(--ink);text-decoration:none}.app .saq-appuntamenti .avviso a b{text-decoration:underline}
.app .saq-appuntamenti .elenco li .voce small.stato{font-weight:600;color:var(--ink)}
.app .saq-appuntamenti .elenco li.stato-annullata .voce,.app .saq-appuntamenti .elenco li.stato-scaduta .voce{color:var(--grigio)}
.app .saq-appuntamenti .elenco li.stato-annullata .voce a{color:var(--grigio)}
.app .saq-appuntamenti .inriga{display:inline}
.app .saq-appuntamenti .elenco .azioni .piccolo,.app .saq-appuntamenti .bottone.piccolo{padding:8px 12px;font-size:13.5px}
.app .saq-appuntamenti .elenco .azioni details.piccolo{margin:0}
.app .saq-appuntamenti .offro .sopratitolo{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--grigio);margin:0 0 6px}
.app .saq-appuntamenti .offro-modulo .quanto{display:flex;gap:14px;flex-wrap:wrap}
.app .saq-appuntamenti .offro-modulo .quanto label{display:flex;align-items:center;gap:6px;font-size:14px}
.app .saq-appuntamenti .offro-modulo .quanto input{width:5em}
.app .saq-appuntamenti .offro-modulo .impegno.periodo label,.app .saq-appuntamenti .offro-modulo .impegno.studenti label{padding:10px 12px;font-size:14px}
.app .saq-appuntamenti .offro-modulo .date.entro{margin:8px 0 0}
.app .saq-appuntamenti .offro-modulo .date.entro.con-script{display:none}.app .saq-appuntamenti .offro-modulo .date.entro.con-script.aperto{display:flex}
.app .saq-appuntamenti .offro-modulo .fasce{margin:16px 0 0}
.app .saq-appuntamenti .offro-modulo .fasce>.etichetta{font-size:13.5px;font-weight:600;margin:0}
.app .saq-appuntamenti .offro-modulo .fasce>.etichetta small,.app .saq-appuntamenti .offro-modulo .campo .etichetta small{font-weight:400;color:var(--grigio)}
.app .saq-appuntamenti .offro-modulo .alternativa{margin:10px 0 0;padding:10px 12px;border:1.5px dashed var(--spento);border-radius:var(--raggio)}
.app .saq-appuntamenti .offro-modulo .alternativa>.etichetta{display:flex;justify-content:space-between;align-items:center;margin:0;font-size:13.5px;font-weight:600}
.app .saq-appuntamenti .offro-modulo .alternativa .togli{font:inherit;font-size:13px;background:none;border:0;color:var(--grigio);text-decoration:underline;cursor:pointer}
.app .saq-appuntamenti .offro-modulo .aggiungi-alternativa{margin:12px 0 0}
.app .saq-appuntamenti .offro-modulo .scelte{border:0;padding:0;margin:14px 0 0}
.app .saq-appuntamenti .offro-modulo .scelte legend{font-size:13.5px;font-weight:600;padding:0;margin:0 0 6px}
.app .saq-appuntamenti .offro-modulo .scelte label{display:inline-flex;align-items:center;gap:6px;margin:0 14px 8px 0;font-size:14.5px}
.app .saq-appuntamenti .offro-modulo .scelte label small{color:var(--grigio)}
.app .saq-appuntamenti .offro-modulo .scelte details.piccolo{margin:4px 0 0}
.app .saq-appuntamenti .offro-modulo .scelte .campo{margin:6px 0 0;max-width:32em}
.app .saq-appuntamenti .offro-modulo .campo.spunta{margin:14px 0 0}
.app .saq-appuntamenti .offro-modulo .campo.spunta label{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.app .saq-appuntamenti .offro-modulo .campo small,.app .saq-appuntamenti .offro-modulo .spiega{font-size:13px;color:var(--grigio)}
.app .saq-appuntamenti .offro-modulo .studenti-nota{margin:8px 0 0;max-width:32em}
.app .saq-appuntamenti .offro-modulo .studenti-nota label{font-size:13.5px;font-weight:600;display:block;margin:6px 0 4px}
.app .saq-appuntamenti .offro-modulo .studenti-nota label.spunta{font-weight:400;display:inline-flex;gap:6px}
.app .saq-appuntamenti .offro-modulo details.resto{margin:16px 0 0}
.app .saq-appuntamenti .offro-modulo details.resto>.blocco{padding:4px 0 0}
.app .saq-appuntamenti .offro-modulo>.azioni{margin:18px 0 0}
.app .saq-offerta .fasce-scelta{list-style:none;margin:0;padding:0}
.app .saq-offerta .fasce-scelta li{padding:8px 0;border-bottom:1px dashed #cfc8ba}
.app .saq-offerta .fasce-scelta label{display:flex;align-items:center;gap:10px;font-size:15px;flex-wrap:wrap}
.app .saq-offerta .fasce-scelta label small{color:var(--grigio)}
.app .saq-offerta .pastiglia{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:1px 8px}
.app .saq-offerta .adesione .azioni{margin:12px 0 0}
.app .saq-offerta .saq-tavola{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:14.5px}
.app .saq-offerta .saq-tavola th,.app .saq-offerta .saq-tavola td{text-align:left;padding:8px 10px 8px 0;border-bottom:1px dashed #cfc8ba;vertical-align:top}
.app .saq-offerta .saq-tavola th{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--grigio)}
.app .saq-offerta .saq-tavola tr.fissata td{background:var(--nota)}
.app .saq-offerta .conferma{margin:14px 0 0;max-width:40em}
.app .saq-offerta .conferma label{font-size:13.5px;font-weight:600}.app .saq-offerta .conferma label small{font-weight:400;color:var(--grigio)}
.app .saq-offerta .conferma input{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--riga);border-radius:var(--raggio);margin:4px 0}
.app .saq-offerta .conferma small{font-size:13px;color:var(--grigio)}
.app .saq-offerta .appuntamento .minimo b a{color:var(--ink)}
.app .saq-offerta .grado-azioni small{color:var(--grigio);font-size:13px;align-self:center}
.app .saq-profilo .saq-ruolo-fisso{margin:0;font-size:15px}.app .saq-profilo .saq-visibili{margin:4px 0 12px}
@media (max-width:820px){
  .app .saq-offerta .saq-tavola thead{display:none}
  .app .saq-offerta .saq-tavola tr{display:block;padding:8px 0;border-bottom:1px dashed #cfc8ba}
  .app .saq-offerta .saq-tavola td{display:block;border:0;padding:2px 0}
  .app .saq-appuntamenti .offro-modulo .quanto{flex-direction:column;gap:8px}
}