/*
 * Aspetto della schermata di compilazione, ripreso dall'Allegato 3.
 *
 * Ogni colore, ogni misura e ogni proporzione qui sotto è LETTA dal modello certificato
 * (descrittore/template_2026_A3.pdf), non scelta a occhio. Fra parentesi il dato misurato.
 * Solo per la versione da computer: il telefono è un discorso a parte e non è affrontato qui.
 */

:root {
  /* Colori del documento (misurati sui riempimenti e sul testo della pagina dell'Ambito A) */
  --saq-azzurro:  #0b98cb;   /* Ambito A: titolo e fascia della tabella */
  --saq-magenta:  #c41b5b;   /* Ambito B: titolo e fascia della tabella */
  --saq-testo:    #1a1a25;   /* testo del documento */
  --saq-grigio:   #5f5f69;   /* testo secondario (7,5 pt nel documento) */
  --saq-etichetta:#555555;   /* etichette piccole (6,5 pt grassetto) */
  --saq-bordo:    #d0cdc8;   /* filetti della tabella */
  --saq-bordo-2:  #8a8c96;   /* filetti più marcati */
  --saq-carta:    #fcfcfb;   /* fondo carta */
  /* Il documento è composto in Arial: la prima famiglia disponibile lo rispetta. */
  --saq-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.saq-foglio {
  font-family: var(--saq-font);
  color: var(--saq-testo);
  background: var(--saq-carta);
  border: 1px solid var(--saq-bordo);
  max-width: 1180px;          /* il documento è A3 orizzontale: 842 pt di larghezza */
  margin: 12px 0;
  padding: 0 0 18px;
}

/* --- intestazione: titolo al centro, marchio a destra ------------------- */
.saq-testata { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 6px; }
.saq-testata-vuoto { width: 120px; }
.saq-testata h1 { font-size: 17px; font-weight: 700; margin: 0; text-align: center; letter-spacing: .01em; color: var(--saq-testo); }
.saq-testata .saq-sottotitolo { font-size: 11px; text-align: center; color: var(--saq-grigio); margin: 2px 0 0; }
.saq-testata img { width: 120px; height: auto; }

/* La fascia sotto l'intestazione: due metà esatte, azzurra e magenta (misurato:
   due rettangoli da 420,9 pt su 842, alti 3 pt). */
.saq-fascia { height: 4px; display: flex; }
.saq-fascia i { flex: 1 1 50%; display: block; }
.saq-fascia i:first-child { background: var(--saq-azzurro); }
.saq-fascia i:last-child  { background: var(--saq-magenta); }

/* --- riga dell'identità ------------------------------------------------- */
.saq-identita { display: flex; gap: 18px; padding: 10px 22px; border-bottom: 1px solid var(--saq-bordo); }
.saq-identita div { flex: 1; }
.saq-identita span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .06em;
                     text-transform: uppercase; color: var(--saq-etichetta); margin-bottom: 3px; }
.saq-identita strong { font-weight: 400; font-size: 13px; color: var(--saq-testo); }
.saq-identita .saq-vuoto { color: #9a9aa2; font-style: italic; }

/* --- titolo dell'ambito ------------------------------------------------- */
.saq-ambito { padding: 14px 22px 8px; }
.saq-ambito h2 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: .01em; }
.saq-ambito.saq-a h2 { color: var(--saq-azzurro); }
.saq-ambito.saq-b h2 { color: var(--saq-magenta); }
.saq-ambito p { font-size: 11px; color: var(--saq-grigio); margin: 3px 0 0; max-width: 70em; }

/* --- la tabella, colonne nelle proporzioni del documento ---------------- */
.saq-tabella { width: calc(100% - 44px); margin: 4px 22px 0; border-collapse: collapse; table-layout: fixed; }
/* Le larghezze NON sono più quelle del documento, ed è una scelta di Dario dell'8/09:
   «la fedeltà vale per il documento che esce ed è garantita dal PDF». Sul foglio stampato un
   campo è una riga vuota; a schermo ha bordo, spaziatura e un testo di segnaposto che sulla
   carta non esiste — con le proporzioni esatte la tendina usciva troncata («— Selez») e la
   colonna del numero nascondeva il valore scritto. Accanto, fra parentesi, la misura del
   documento, che resta il riferimento per il PDF. */
.saq-tabella col.saq-c-aree   { width: 14%; }   /* documento: 11,5% — nomi lunghi da non spezzare */
.saq-tabella col.saq-c-sotto  { width: 22%; }   /* documento: 23,8% */
.saq-tabella col.saq-c-desc   { width: 28%; }   /* documento: 33,0% — la più capiente, cede spazio */
.saq-tabella col.saq-c-stato  { width: 14%; }   /* documento: 11,5% — deve contenere «— Seleziona —» */
.saq-tabella col.saq-c-n      { width:  7%; }   /* documento:  5,0% — deve mostrare il numero scritto */
.saq-tabella col.saq-c-cand   { width: 15%; }   /* documento: 15,2% */

.saq-tabella thead th {
  background: var(--saq-azzurro); color: #fff; font-size: 11px; font-weight: 700;
  text-align: center; padding: 5px 4px; border: none; letter-spacing: .02em;
}
.saq-b .saq-tabella thead th, .saq-tabella.saq-b thead th { background: var(--saq-magenta); }
.saq-tabella td { border: 1px solid var(--saq-bordo); padding: 7px 8px; vertical-align: top; background: #fff; }

/* colonna delle aree: nome sopra, icona sotto, come nel documento */
/* I nomi delle aree vanno a capo FRA le parole, mai dentro: «Amministrazio / e Marketing»
   non è un nome, è un errore di lettura. */
.saq-area-nome { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.25;
                 color: var(--saq-testo); overflow-wrap: break-word; word-break: normal; hyphens: none; }
.saq-area-icona { display: block; margin: 6px auto 0; width: 34px; height: 34px; }

/* sottocategorie: una per riga, tutta la riga è cliccabile */
.saq-sotto label { display: block; font-size: 12px; line-height: 1.45; padding: 2px 0; cursor: pointer; }
.saq-sotto label:hover { background: #f2f8fc; }
.saq-b .saq-sotto label:hover { background: #fdf2f6; }
.saq-sotto input[type=checkbox] { margin: 0 6px 0 0; vertical-align: -1px; }

/* campi: bordo leggero come le caselle del documento */
/* Il campo del numero è stretto per forza: niente padding orizzontale che rubi spazio al testo. */
.saq-tabella td input[type=text] { padding-left: 3px; padding-right: 3px; text-align: center; }
.saq-tabella textarea, .saq-tabella input[type=text], .saq-tabella select {
  width: 100%; box-sizing: border-box; font-family: var(--saq-font); font-size: 12px;
  color: var(--saq-testo); background: #fff; border: 1px solid var(--saq-bordo-2);
  border-radius: 2px; padding: 4px 6px; margin: 0;
}
.saq-tabella textarea { min-height: 74px; resize: vertical; line-height: 1.4; }
.saq-tabella textarea:focus, .saq-tabella input:focus, .saq-tabella select:focus {
  outline: 2px solid var(--saq-azzurro); outline-offset: 0; border-color: var(--saq-azzurro);
}
.saq-b .saq-tabella textarea:focus, .saq-b .saq-tabella input:focus, .saq-b .saq-tabella select:focus {
  outline-color: var(--saq-magenta); border-color: var(--saq-magenta);
}
.saq-capienza { font-size: 10px; color: var(--saq-etichetta); margin: 3px 0 0; }

/* stato di compilazione dell'area, e revisione */
.saq-riga-stato { font-size: 10px; color: var(--saq-etichetta); margin-top: 6px; text-align: center; }
.saq-aderente { color: var(--saq-azzurro); font-weight: 700; }
.saq-b .saq-aderente { color: var(--saq-magenta); }

/* --- code della pagina --------------------------------------------------- */
.saq-coda { margin: 16px 22px 0; }
.saq-coda label { display: block; font-size: 11px; font-weight: 700; color: var(--saq-testo); margin-bottom: 4px; }
.saq-coda textarea, .saq-coda input[type=text] {
  width: 100%; box-sizing: border-box; font-family: var(--saq-font); font-size: 12px;
  border: 1px solid var(--saq-bordo-2); border-radius: 2px; padding: 5px 7px;
}
.saq-totale { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 12px 22px 0; }
/* Nel documento questa riga è composta normalmente: il maiuscolo era mio. */
.saq-totale label { font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.saq-totale input { width: 70px; text-align: center; font-family: var(--saq-font); font-size: 12px;
                    border: 1px solid var(--saq-bordo-2); border-radius: 2px; padding: 5px; }

/* --- barra delle azioni -------------------------------------------------- */
.saq-azioni { margin: 18px 22px 0; padding-top: 14px; border-top: 1px solid var(--saq-bordo);
              display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.saq-non-salvato { color: var(--saq-magenta); font-weight: 700; font-size: 12px; }
.saq-piede { display: flex; align-items: center; justify-content: space-between;
             margin: 20px 22px 0; padding-top: 10px; border-top: 1px solid var(--saq-bordo);
             font-size: 10px; color: var(--saq-etichetta); }
.saq-piede img { width: 92px; height: auto; opacity: .85; }

/* Navigazione fra le pagine del documento */
.saq-pagine { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
.saq-pagine a { text-decoration: none; font-size: 12px; padding: 6px 12px; border-radius: 3px;
                border: 1px solid var(--saq-bordo-2); color: var(--saq-testo); background: #fff; }
.saq-pagine a.saq-corrente { background: var(--saq-azzurro); border-color: var(--saq-azzurro); color: #fff; font-weight: 700; }
.saq-pagine a.saq-corrente.saq-corrente-b { background: var(--saq-magenta); border-color: var(--saq-magenta); }
.saq-pagine a:focus { outline: 2px solid var(--saq-testo); outline-offset: 1px; }

/* Nota sull'adesione: spiega che «aderente» non è una casella ma un campo derivato. */
.saq-nota { font-size: 11px; color: var(--saq-etichetta); margin: 8px 22px 0; line-height: 1.5; }

/* ======================================================================
   Le due schede: musicale e docenti.
   Nel documento queste pagine NON hanno l'intestazione di tabella colorata:
   sono riquadri con filetto #d0cdc8 e testo nero grassetto (misurato), e il
   titolo della sezione è nero e non azzurro o magenta.
   ====================================================================== */

.saq-scheda .saq-ambito h2 { color: var(--saq-testo); }

/* righe di campi affiancati, come «n. max sul palco: … Categoria: …» */
.saq-blocco { margin: 6px 22px 0; }
.saq-riga { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.saq-campo { display: flex; align-items: baseline; gap: 8px; }
.saq-campo label, .saq-campo .saq-etichetta {
  font-size: 11px; font-weight: 700; color: var(--saq-testo); white-space: nowrap;
}
.saq-campo input[type=text], .saq-campo select {
  font-family: var(--saq-font); font-size: 12px; color: var(--saq-testo);
  border: 1px solid var(--saq-bordo-2); border-radius: 2px; padding: 4px 6px; min-width: 9em;
}
.saq-campo.saq-largo { flex: 1 1 26em; }
.saq-campo.saq-largo input[type=text] { flex: 1; width: 100%; }
.saq-campo.saq-stretto input[type=text] { max-width: 6em; }
.saq-campo input:focus, .saq-campo select:focus { outline: 2px solid var(--saq-azzurro); border-color: var(--saq-azzurro); }

/* gruppi di caselle affiancate (Categoria, Tipologia gruppo) */
.saq-spunte { align-items: flex-start; }
.saq-spunte > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.saq-spunte label { font-size: 12px; font-weight: 400; white-space: nowrap; cursor: pointer; padding: 2px 0; }
.saq-spunte input[type=checkbox] { margin: 0 5px 0 0; vertical-align: -1px; }

/* titoli dei blocchi: «ELENCO BRANI / PERFORMANCE», «FORMAZIONE / ORGANICO» */
.saq-titolo-blocco { font-size: 12px; font-weight: 700; margin: 16px 22px 4px; letter-spacing: .02em; color: var(--saq-testo); }

/* tabelle a righe numerate: filetto chiaro, intestazione nera su bianco */
.saq-righe { width: calc(100% - 44px); margin: 0 22px; border-collapse: collapse; }
.saq-righe thead th {
  background: #fff; color: var(--saq-testo); font-size: 10px; font-weight: 700;
  text-align: center; padding: 5px 4px; border: 1px solid var(--saq-bordo);
}
.saq-righe thead th.saq-th-vuoto { color: #9a9aa2; font-weight: 400; }
.saq-righe td { border: 1px solid var(--saq-bordo); padding: 3px 4px; }
.saq-righe .saq-c-num { width: 2.4em; text-align: center; font-size: 11px; color: var(--saq-etichetta); }
.saq-righe input[type=text], .saq-righe select {
  width: 100%; box-sizing: border-box; font-family: var(--saq-font); font-size: 12px;
  border: 1px solid transparent; border-radius: 2px; padding: 3px 5px; background: #fff; color: var(--saq-testo);
}
.saq-righe input[type=text]:hover, .saq-righe select:hover { border-color: var(--saq-bordo); }
.saq-righe input[type=text]:focus, .saq-righe select:focus { outline: 2px solid var(--saq-azzurro); border-color: var(--saq-azzurro); }
/* campi che in questa fase restano vuoti per contratto: si vedono ma non si scrivono */
.saq-righe input.saq-non-in-fase { background: repeating-linear-gradient(45deg, #f6f6f4, #f6f6f4 4px, #efefec 4px, #efefec 8px);
                                   border-color: var(--saq-bordo); cursor: not-allowed; }

/* riquadro dell'avviso in fondo alla scheda musicale */
.saq-avviso { margin: 16px 22px 0; border: 1px solid var(--saq-bordo-2); border-radius: 2px; padding: 10px 14px; text-align: center; }
.saq-avviso strong { display: block; font-size: 12px; margin-bottom: 4px; }
.saq-avviso p { font-size: 11px; color: var(--saq-grigio); margin: 0; line-height: 1.5; }

/* campi che scrive il sistema, mostrati spenti */
.saq-derivati { margin: 14px 22px 0; gap: 40px; }
.saq-derivati span { display: block; font-size: 11px; font-weight: 700; }
.saq-derivati em { font-size: 11px; color: var(--saq-etichetta); font-style: normal; }

/* coda della scheda docenti: scadenze, recapiti, informativa */
.saq-progressiva { margin: 18px 22px 0; }
.saq-progressiva h3 { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.saq-progressiva p { font-size: 11px; color: var(--saq-grigio); margin: 0 0 4px; line-height: 1.5; }
.saq-recapiti { margin: 16px 22px 0; text-align: center; }
.saq-recapiti .saq-marchio { width: 130px; height: auto; display: block; margin: 0 auto 6px; }
.saq-recapiti p { margin: 0; font-size: 11px; color: var(--saq-grigio); }
.saq-recapiti span { margin: 0 10px; }
.saq-informativa { margin: 16px 22px 0; text-align: center; }
.saq-informativa strong { font-size: 11px; letter-spacing: .04em; }
.saq-informativa p { font-size: 10px; color: var(--saq-grigio); margin: 4px 0 0; line-height: 1.5; }

/* ======================================================================
   La prima pagina: la copertina del documento.
   La copertina del modello è una sola immagine (titoli e marchi dipinti
   dentro, misurato: zero testo estraibile, zero campi): si mostra com'è
   invece di ricostruirla.
   ====================================================================== */

.saq-copertina-foglio { padding-top: 0; }
.saq-copertina { display: block; width: 100%; height: auto; }

/* cartiglio con Istituto ed edizione, subito sotto la copertina */
.saq-cartiglio { border-top: 1px solid var(--saq-bordo); border-bottom: 1px solid var(--saq-bordo); background: #fff; }
.saq-cartiglio dl { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
.saq-cartiglio div { flex: 1 1 12em; padding: 10px 22px; border-right: 1px solid var(--saq-bordo); }
.saq-cartiglio div:last-child { border-right: none; }
.saq-cartiglio dt { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                    color: var(--saq-etichetta); margin: 0 0 3px; }
.saq-cartiglio dd { margin: 0; font-size: 13px; color: var(--saq-testo); }

.saq-copertina-foglio .saq-titolo-blocco { margin-top: 18px; }
.saq-copertina-foglio .saq-nota { margin-top: 0; margin-bottom: 8px; }
.saq-copertina-foglio .saq-riga { gap: 18px; }
.saq-copertina-foglio .saq-campo { flex-direction: column; align-items: stretch; gap: 3px; }
.saq-copertina-foglio .saq-campo label { white-space: normal; }

/* A chi si consegna il Quadro: riga stampata sul documento, tenuta in evidenza. */
.saq-destinatario { font-size: 12px; font-weight: 700; color: var(--saq-testo); margin: 0 0 6px; }

/* Testo respinto da un conflitto: si mostra perché si possa recuperare, non si reinserisce
   da solo — sovrascriverebbe di nascosto il lavoro dell'altra persona. */
.saq-respinto { margin-top: 8px; padding: 7px 8px; border: 1px solid var(--saq-magenta);
                border-radius: 2px; background: #fdf6f8; text-align: left; }
.saq-respinto strong { display: block; font-size: 10px; color: var(--saq-magenta); margin-bottom: 3px; }
.saq-respinto p { font-size: 10px; color: var(--saq-grigio); margin: 0 0 5px; line-height: 1.4; }
.saq-respinto dl { margin: 0; font-size: 11px; }
.saq-respinto dt { font-weight: 700; color: var(--saq-etichetta); font-size: 9px;
                   text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.saq-respinto dd { margin: 0; color: var(--saq-testo); word-break: break-word; }

/* ======================================================================
   Riga di sistema: l'ultima modifica, e con un clic tutta la storia.
   Non fa parte del documento — carattere piccolo, colore attenuato, fuori
   dalla cornice della pagina — perché la grafica del modello non si tocca.
   ====================================================================== */

.saq-sistema { margin: 14px 22px 0; padding-top: 10px; border-top: 1px dotted var(--saq-bordo);
               font-size: 11px; color: var(--saq-etichetta); }
.saq-sistema > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.saq-sistema > summary::-webkit-details-marker { display: none; }
.saq-sistema > summary::before { content: '▸'; display: inline-block; width: 1em; color: var(--saq-bordo-2); }
.saq-sistema[open] > summary::before { content: '▾'; }
.saq-sistema > summary:hover .saq-apri { text-decoration: underline; }
.saq-sistema > summary:focus-visible { outline: 2px solid var(--saq-azzurro); outline-offset: 2px; }
.saq-etichetta-sistema { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 9px; margin-right: .4em; }
.saq-apri { color: var(--saq-bordo-2); }

.saq-storico { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 11px; }
.saq-storico th { text-align: left; font-weight: 700; font-size: 9px; text-transform: uppercase;
                  letter-spacing: .04em; color: var(--saq-etichetta); padding: 4px 8px 4px 0;
                  border-bottom: 1px solid var(--saq-bordo); }
.saq-storico td { padding: 4px 8px 4px 0; border-bottom: 1px solid #f0efec; color: var(--saq-testo); }
.saq-storico tr:last-child td { border-bottom: none; }
.saq-nota-storico { font-size: 10px; color: var(--saq-etichetta); margin: 8px 0 0; line-height: 1.5; }

/* ultima modifica della singola area, nella colonna delle aree */
.saq-ultima-area { font-size: 9px; color: var(--saq-etichetta); margin-top: 4px; line-height: 1.35; }

/* Chi sta compilando: funzione e titolo. Dati della persona, non del documento. */
.saq-campo .saq-aiuto { display: block; font-size: 10px; color: var(--saq-etichetta); margin-top: 3px; line-height: 1.4; }
.saq-campo abbr { text-decoration: none; color: var(--saq-magenta); }

/* Da dove viene un blocco di campi: del documento, o del sistema. Serve a non confondere il
   «Ruolo nel progetto» (stampato) con la «funzione nella scuola» (dato dell'applicazione). */
.saq-provenienza { font-weight: 400; font-size: 10px; color: var(--saq-etichetta); text-transform: none; letter-spacing: 0; }

/* ======================================================================
   Pagina d'ingresso: le tre porte e la visita a schermate.
   È la prima cosa che un Dirigente vede: nessuna informazione dietro un
   passaggio del mouse che sia necessaria per decidere dove andare.
   ====================================================================== */

.saq-ingresso, .saq-visita { font-family: var(--saq-font); color: var(--saq-testo); max-width: 900px; margin: 0 auto; }
.saq-ingresso h1 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 18px; color: var(--saq-testo); }
.saq-occhiello { font-size: 15px; line-height: 1.6; margin: 0 0 14px; color: var(--saq-testo); }

.saq-porte { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.saq-porta { flex: 1 1 15em; display: flex; flex-direction: column; gap: 8px; }
.saq-porta p { font-size: 13px; color: var(--saq-grigio); margin: 0; line-height: 1.5; }

.saq-bottone { display: inline-block; background: var(--saq-azzurro); color: #fff; text-decoration: none;
               font-size: 15px; font-weight: 700; padding: 12px 18px; border-radius: 3px; text-align: center;
               border: 1px solid var(--saq-azzurro); }
.saq-bottone:hover, .saq-bottone:focus { background: #0a86b4; color: #fff; }
.saq-bottone:focus-visible { outline: 3px solid var(--saq-testo); outline-offset: 2px; }
.saq-bottone.saq-chiaro { background: #fff; color: var(--saq-azzurro); }
.saq-bottone.saq-chiaro:hover { background: #f2f8fc; }

/* la visita */
.saq-visita-img { display: block; width: 100%; height: auto; border: 1px solid var(--saq-bordo); border-radius: 3px; }
.saq-visita-titolo { font-size: 17px; font-weight: 700; margin: 16px 0 6px; }
.saq-visita-testo { font-size: 14px; line-height: 1.6; color: var(--saq-grigio); margin: 0 0 16px; }
.saq-visita-comandi { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.saq-esci { font-size: 13px; color: var(--saq-etichetta); text-decoration: underline; margin-left: auto; }
.saq-visita-conta { font-size: 12px; color: var(--saq-etichetta); margin: 10px 0 0; }

/* Il benvenuto in copertina: è la prima cosa che si legge, e spiega a che serve il Quadro. */
.saq-benvenuto { padding: 20px 22px 4px; }
.saq-benvenuto h2 { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: var(--saq-testo); }
.saq-benvenuto p { font-size: 14px; line-height: 1.65; margin: 0 0 10px; color: var(--saq-testo); max-width: 62em; }

/* «Non serve inventare nulla»: sotto il titolo dell'ambito, prima della tabella. */
.saq-incoraggia { font-size: 13px; line-height: 1.55; margin: 8px 0 0; color: var(--saq-testo); }

/* Il cartiglio ha ora un suggerimento per voce: lo si deve capire. */
.saq-cartiglio div[title] { cursor: help; }

/* ======================================================================
   Finestre strette: sotto i 900 px la tabella non si stringe, scorre.
   Le colonne in percentuale di f323b8a sono state verificate pulite a
   900 px (misurato l'8/09/2026: a 732 px «Amministrazione» si spezza
   dentro la parola, «— Seleziona —» esce troncato, la colonna delle aree
   misura 96 px). Sotto quella larghezza la tabella tiene la misura che
   avrebbe a 900 px e il foglio scorre di lato: chi compila da una
   finestra stretta o da un telefono vede le stesse colonne di chi sta al
   computer, non una versione schiacciata. Il resto del foglio resta
   fluido.
   ====================================================================== */
@media (max-width: 899px) {
  .saq-foglio { overflow-x: auto; }
  .saq-tabella, .saq-righe { min-width: 856px; }   /* 900 px di finestra meno i margini del foglio */
}

/* Lotto 3: le bozze dei docenti sotto l'area — una riga di sistema, non del documento: fondo carta,
   testo secondario, e il pulsante «Porta nella riga» accanto a ogni bozza (lotto 3 pieno). */
.saq-tabella tr.saq-bozze td { background: var(--saq-carta); font-size: 11px; color: var(--saq-grigio); }
.saq-bozze-etichetta { font-weight: 700; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--saq-etichetta); }
.saq-bozze-elenco { margin: 0; padding: 0; list-style: none; }
.saq-bozze-elenco li { margin: 0 0 4px; line-height: 1.5; }
.saq-bozze-elenco li:last-child { margin-bottom: 0; }
.saq-bozze-elenco strong { color: var(--saq-testo); }
.saq-bozza-desc { font-style: italic; }
.saq-porta-bozza { margin-left: 6px; vertical-align: baseline; }

/* L'esempio separato (13/09): il pulsante che apre la bozza con i campi vuoti, sotto le azioni. */
.saq-comincia-bozza { margin: 8px 0 0; }
.saq-comincia-bozza .description { margin-left: 8px; }