/* =========================================================================
   AREA RISERVATA
   Un solo criterio: deve poterla usare una maestra che non usa il computer.
   Quindi caratteri grandi, un bottone solo per cosa, bersagli da toccare
   larghi anche sul telefono, contrasti alti. Niente icone da interpretare.
   Palette e misure prese dal tema (`--f2-acc*`, hairline #d9dadb, raggio 4px).
   ========================================================================= */

.f2ar .f2ar-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #17324d;
}

/* `height: auto` non e' cosmesi: Bootstrap Italia impone ai campi un'altezza fissa di 40px,
   che su un telefono e' un bersaglio piu' piccolo dei 44-48px raccomandati. Misurato: 40px
   prima, 52px dopo. */

.f2ar-form .btn { width: 100%; }

/* ---------- Barra di chi è dentro ---------- */

.f2ar-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #d9dadb;
  padding-bottom: 14px;
}

.f2ar-saluto { margin: 0; font-size: 1.0625rem; color: #17324d; }
.f2ar-ok { color: #0a6847; font-weight: 700; }

.f2ar-azioni { margin: 0; display: flex; gap: 20px; align-items: baseline; }
.f2ar-azioni a { font-weight: 700; text-decoration: underline; }
.f2ar-esci { color: #af2127 !important; }

/* ---------- Ricerca ---------- */

.f2ar-cerca label {
  display: block;
  font-weight: 700;
  font-size: 1.125rem;
  color: #17324d;
  margin-bottom: 8px;
}

.f2ar-cerca-riga { display: flex; gap: 10px; max-width: 46em; }

.f2ar-cerca input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.0625rem;
  padding: 12px 14px;
  height: auto;
  min-height: 52px;
  border: 1px solid #5c6f82;
  border-radius: 4px;
  color: #17324d;
}

.f2ar-cerca .btn { flex: 0 0 auto; padding-left: 26px; padding-right: 26px; }

/* ---------- Cartelle ---------- */

.f2ar-cartelle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.f2ar-cartelle > li { margin: 0; }

.f2ar-cartelle a {
  display: block;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid #d9dadb;
  border-left: 5px solid var(--f2-acc, #0d00ff);
  border-radius: 4px;
  background: #fff;
  color: #17324d;
  text-decoration: none;
  transition: transform .22s var(--f2-ease, ease), box-shadow .22s var(--f2-ease, ease);
}

.f2ar-cartelle a:hover,
.f2ar-cartelle a:focus {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -22px rgba(15, 15, 40, .55);
  text-decoration: none;
}

.f2ar-cartella-nome {
  display: block;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--f2-acc-scuro, #0a00c6);
  text-decoration: underline;
}

.f2ar-cartella-desc {
  display: block;
  margin-top: 6px;
  font-size: .9375rem;
  line-height: 1.45;
  color: #5c6f82;
}

.f2ar-cartella-n {
  display: block;
  margin-top: 12px;
  font-size: .875rem;
  font-weight: 700;
  color: #5c6f82;
}

/* ---------- I documenti: la scheda del sito, con la pagina del documento a lato ----------

   Rifatto due volte il 14/09/2026. La prima versione aveva un'anteprima grande in cima e una
   scheda disegnata qui; la richiesta era invece «card come nelle altre anteprime all'interno del
   sito», cioe' `card-vertical-thumb` — la stessa delle notizie e delle circolari.

   🔴 QUESTO BLOCCO E' CORTO APPOSTA. La scheda, la miniatura a destra, le misure e il
   comportamento a ogni larghezza li porta il TEMA PADRE, perche' le classi sono le sue. Ogni
   riga scritta qui e' una riga che il giorno dell'aggiornamento del tema padre puo' litigare con
   la sua: si scrive solo quello che il padre non puo' sapere. Il blocco che ha sostituito ne
   aveva centoquaranta. */

.f2ar-schede { margin-bottom: 8px; }

/* Il titolo del gruppo porta alla cartella da sola. Resta nero come un titolo, perche' e' un
   titolo: la sottolineatura compare quando ci si passa sopra o quando prende il fuoco. */
.f2ar-gruppo-tit a { color: inherit; text-decoration: none; }
.f2ar-gruppo-tit a:hover,
.f2ar-gruppo-tit a:focus-visible { color: var(--f2-acc-scuro, #af2127); text-decoration: underline; }

.f2ar-doc {
  position: relative;
  /* Chi arriva dalla ricerca ci arriva con l'ancora #doc-123: senza questo margine il titolo
     finisce sotto la testata fissa e sembra che il collegamento abbia sbagliato documento. */
  scroll-margin-top: 90px;
  transition: box-shadow .2s var(--f2-ease, ease);
}

.f2ar-doc:hover { box-shadow: 0 4px 16px rgba(23,50,77,.12); }

/* Il documento su cui la ricerca ha portato: si distingue per un attimo, altrimenti in una
   griglia di venti schede uguali non si capisce quale sia quello cercato. */
.f2ar-doc:target { box-shadow: 0 0 0 3px rgba(216,51,58,.22); }

/* 🔴 IL TITOLO SI ALLARGA A COPRIRE LA SCHEDA. Cosi' si clicca sulla miniatura, sul bianco
   accanto, ovunque — e resta **un collegamento solo per documento**, quindi un fermo solo per
   chi va con la tastiera e una voce sola per chi ascolta. La strada alternativa (un secondo
   collegamento sulla miniatura, tolto dal percorso con `aria-hidden`) funzionava, ma nascondere
   un doppione e' peggio che non farlo. */
.f2ar-doc-titolo { margin-bottom: 6px; }
.f2ar-doc-titolo a { text-decoration: none; }
.f2ar-doc-titolo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.f2ar-doc-titolo a:hover,
.f2ar-doc-titolo a:focus-visible { text-decoration: underline; }

/* Il fuoco si vede sulla SCHEDA, non sulle due righe del titolo: e' la scheda intera che si
   apre, e un contorno su meta' riquadro sembra un errore di disegno. */
.f2ar-doc:focus-within { box-shadow: 0 0 0 3px rgba(13,0,255,.35); }
.f2ar-doc-titolo a:focus { outline: none; }

.f2ar-doc-sotto {
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  color: #5c6f82;
}

.f2ar-doc-badge {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 700;
  color: #af2127;
  background: #fcf0f1;
  border: 1px solid #f6d2d4;
  border-radius: 4px;
}

/* La miniatura: il riquadro e le misure sono del tema padre (95 × 145, misurati).

   🔴 IL FONDO VA SULL'IMMAGINE, NON SULLA COLONNA. La prima stesura lo metteva su
   `.f2ar-vista`, che e' la colonna destra della scheda ed e' alta quanto la scheda: sotto la
   miniatura restava un rettangolo grigio alto duecento pixel, uno per scheda, e sulla griglia
   sembravano nove buchi. Un filo di contorno basta a staccare una pagina bianca dalla scheda
   bianca; il grigio serve solo dietro il contrassegno, dove non c'e' nessuna pagina. */
.f2ar-vista { background: transparent; }

/* Nessuna misura qui dentro: la da' il tema padre, e il file e' gia' tagliato al suo stesso
   rapporto (440 × 672 contro 190 × 290 — 0,6548 contro 0,6552). Forzare `width:100%` voleva
   dire scavalcare il padre per riottenere il numero che il padre gia' dava. */
.f2ar-vista img {
  display: block;
  background: #fff;
  border: 1px solid #e3e4e6;
  border-radius: 4px;
}

.f2ar-vista-sigla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 145px;
  background: #eef1f4;
  border-radius: 4px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #8b98a5;
}

/* 🔴 LA PRESA VISIONE STA SOPRA IL COLLEGAMENTO CHE COPRE LA SCHEDA. Senza `z-index`, il
   riquadro invisibile del titolo le passa davanti e il pulsante non si preme piu': la persona
   clicca «Dichiaro di aver preso visione» e le si apre il documento. Un difetto che non si vede
   guardando, e che si trova solo provando a premere. */
.f2ar-doc .f2vis-form,
.f2ar-doc .f2vis-fatta {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 12px 24px 16px;
  border-top: 1px solid #e3e4e6;
}

.f2ar-doc .f2vis-form { gap: 6px; }
.f2ar-doc .f2vis-btn { width: 100%; padding: 11px 14px; font-size: .9375rem; }
.f2ar-doc .f2vis-nota { font-size: .75rem; line-height: 1.4; }
.f2ar-doc .f2vis-fatta { font-size: .875rem; }

/* ---------- La regola in cima ---------- */

.f2ar-regola {
  border: 1px solid #d9dadb;
  border-left: 5px solid #17324d;
  border-radius: 0 4px 4px 0;
  background: #f7f8f9;
  padding: 20px 24px;
  margin-bottom: 32px;
}

.f2ar-regola h2 { margin-top: 0; margin-bottom: 10px; }
.f2ar-regola p { margin-bottom: 10px; line-height: 1.55; color: #17324d; }
.f2ar-regola-azione { margin: 16px 0 0 !important; }

/* ---------- Servizi con accesso proprio ---------- */

.f2ar-servizi {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.f2ar-servizi > li { margin: 0; }

.f2ar-servizi a {
  display: block;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid #d9dadb;
  border-radius: 4px;
  background: #fff;
  color: #17324d;
  text-decoration: none;
}

.f2ar-servizi a:hover, .f2ar-servizi a:focus { border-color: #17324d; text-decoration: none; }

.f2ar-servizio-nome {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--f2-acc-scuro, #0a00c6);
  text-decoration: underline;
}

.f2ar-servizio-che { display: block; margin-top: 5px; font-size: .9375rem; color: #5c6f82; line-height: 1.45; }
.f2ar-servizio-fuori { display: block; margin-top: 8px; font-size: .8125rem; color: #5c6f82; }

/* 🔴 IL BOTTONE NON E' PIU' UN RETTANGOLO PIENO LARGO QUANTO IL NOME DEL FILE.
   Era la causa misurata del disordine: un blocco rosso pieno, con dentro
   `mod.-2-DICHIARAZIONE-SOSTITUTIVE-DI-CERTIFICAZIONI-1.rtf` a caratteri grandi, largo quanto
   quel nome. Nove documenti, nove larghezze diverse, e in nove casi su nove la cosa piu'
   vistosa della schermata era un dettaglio che non serve a nessuno finche' non serve.
   Adesso: un bottone di larghezza fissa che dice «Scarica», il tipo e il peso accanto, e il
   nome del file sotto, piccolo. */
.f2ar-doc-file { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

.f2ar-scarica {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  min-height: 44px;
  border-radius: 4px;
  background: var(--f2-acc, #0d00ff);
  color: #fff !important;
  text-decoration: none;
  transition: background-color .2s var(--f2-ease, ease);
}

.f2ar-scarica:hover,
.f2ar-scarica:focus {
  background: var(--f2-acc-scuro, #0a00c6);
  color: #fff !important;
  text-decoration: none;
}

/* Niente `opacity` sul testo dentro il bottone: misurato con axe, la riga «PDF · 1 KB» a
   opacity .9 su fondo blu scendeva sotto il rapporto di contrasto richiesto (testo piccolo,
   serve 4.5:1). Il bianco pieno su --f2-acc sta a 8,6:1. */
.f2ar-scarica-testo { font-weight: 700; font-size: .9375rem; text-decoration: underline; }
.f2ar-scarica-meta { font-size: .8125rem; }

/* Il nome vero del file: serve solo a chi controlla di aver consegnato proprio quello, quindi
   sta sotto e piccolo. `anywhere` perche' un nome di sessanta caratteri senza spazi, su una
   scheda larga trecento pixel, senza questo esce dal riquadro. */
.f2ar-scarica-nome {
  flex: 1 0 100%;
  margin-top: 2px;
  font-size: .75rem;
  line-height: 1.35;
  color: #5c6f82;
  overflow-wrap: anywhere;
  /* 🔴 DUE RIGHE ANCHE QUANDO NE BASTA UNA, e non e' spazio sprecato: e' l'allineamento.
     Misurato sulla griglia resa: `mod.-5-…rtf` sta in una riga e
     `MOD.-7-DICHIARAZIONE-ABILITAZIONE-LINGUA-INGLESE-PER-LA-PRIMARIA.rtf` in due, quindi il
     piede della terza scheda era piu' alto e il suo bottone «Scarica» finiva diciotto pixel
     sopra quello dei vicini. Tre bottoni rossi a tre altezze diverse sulla stessa riga sono
     esattamente il disordine che questa riscrittura doveva togliere. */
  min-height: 2.1em;
}

.f2ar-scarica-link { background: #17324d; }
.f2ar-scarica-link:hover, .f2ar-scarica-link:focus { background: #0b1c2c; }

.f2ar-doc-nofile { color: #5c6f82; font-style: italic; font-size: .9375rem; }

/* ---------- Vuoti e ritorni ---------- */

.f2ar-vuoto {
  background: #f7f8f9;
  border: 1px dashed #b1b4b6;
  border-radius: 4px;
  padding: 18px 22px;
  color: #17324d;
  line-height: 1.55;
}

/* Un collegamento dentro un blocco di prosa non puo' distinguersi dal solo colore (WCAG
   1.4.1): va sottolineato. Rilevato da axe come `link-in-text-block` sulla frase della
   cartella vuota. */
.f2ar-vuoto a,
.f2ar-lead a,
.f2ar-doc-testo a,
.f2ar-nota p a { text-decoration: underline; }

.f2ar-torna { margin-bottom: 12px; }
.f2ar-torna a { font-weight: 700; text-decoration: underline; }

/* ---------- Telefono ---------- */

@media (max-width: 575.98px) {
  .f2ar-cerca-riga { flex-direction: column; }
  .f2ar-cerca .btn { width: 100%; }
  .f2ar-barra { flex-direction: column; align-items: flex-start; }

  /* Sulla scheda del telefono non c'e' niente da correggere: il tema padre tiene il testo a
     sinistra e la miniatura a destra a tutte le larghezze (misurato, 95 × 145 anche a 390 px),
     ed e' il motivo per cui questo blocco e' rimasto di tre righe. */
}

/* ---------- Scorciatoia al piano annuale delle attivita' ---------- */

.f2ar-piano {
  display: block;
  border: 1px solid #d9dadb;
  border-left: 5px solid var(--f2-acc, #0d00ff);
  border-radius: 0 4px 4px 0;
  padding: 18px 22px;
  background: #fff;
  text-decoration: none;
  transition: transform .22s var(--f2-ease, ease), box-shadow .22s var(--f2-ease, ease);
}

.f2ar-piano:hover,
.f2ar-piano:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px rgba(15, 15, 40, .55);
  text-decoration: none;
}

.f2ar-piano-et {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a768a;
}

.f2ar-piano-tit {
  display: block;
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--f2-acc-scuro, #0a00c6);
}

.f2ar-piano-sot {
  display: block;
  margin-top: 4px;
  color: #43536b;
}

/* =========================================================================
   LA SCRIVANIA — chi e' entrato, che cosa e' arrivato, dove si va
   Aggiunta del 27/08/2026. Il criterio e' rimasto quello di prima (caratteri
   grandi, bersagli larghi, nessuna icona da interpretare): cambia l'ORDINE.
   Chi entra deve leggere in un colpo d'occhio tre cose — chi e' per il sito,
   che cosa gli spetta vedere, dove si preme — e solo dopo il resto.
   ========================================================================= */

.f2ar-barra { align-items: flex-start; }
.f2ar-chi { min-width: 0; }

/* La riga della categoria: e' la risposta alla domanda muta di chi entra in
   un'area riservata, «e io che cosa vedo qui dentro?». Sta sotto il nome
   perche' e' una spiegazione, non un titolo. */
.f2ar-ruolo {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: .95rem;
}

.f2ar-ruolo-et {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--f2-acc, #d8333a);
  border-radius: 40px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--f2-acc-scuro, #af2127);
  white-space: nowrap;
}

.f2ar-ruolo-che { color: #43536b; }

/* ---------- Le porte: le tre cose che si fanno sempre ---------- */

.f2ar-porte {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.f2ar-porta {
  display: block;
  border: 1px solid #d9dadb;
  border-left: 5px solid #5c6f82;
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  background: #fff;
  text-decoration: none;
  transition: transform .22s var(--f2-ease, ease), box-shadow .22s var(--f2-ease, ease);
}

/* Il piano delle attivita' e' la porta che si apre piu' spesso: prende
   l'accento, le altre restano grigie. Un solo elemento colorato per riga,
   altrimenti non ne risalta nessuno. */
.f2ar-porta--piano { border-left-color: var(--f2-acc, #d8333a); }

.f2ar-porta:hover,
.f2ar-porta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px rgba(15, 15, 40, .55);
  text-decoration: none;
}

.f2ar-porta-et {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a768a;
}

.f2ar-porta-tit {
  display: block;
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #17324d;
}

.f2ar-porta--piano .f2ar-porta-tit { color: var(--f2-acc-scuro, #af2127); }

.f2ar-porta-sot {
  display: block;
  margin-top: 4px;
  font-size: .94rem;
  line-height: 1.45;
  color: #43536b;
}

/* ---------- Le novita' e i destinatari ---------- */

/* «Nuovo» e' la prima parola del sottotitolo, non un'etichetta a parte: su una scheda alta
   centottantotto pixel una riga di una parola e' una riga persa. Verde, che e' l'unico colore
   della scheda oltre al rosso del titolo, quindi si vede senza gridare. */
.f2ar-doc-nuovo { color: #0a6847; font-weight: 700; }

.f2ar-cartella-dest {
  margin: 0 0 14px;
  font-size: .9rem;
  font-weight: 700;
  color: #5c6f82;
}

/* ---------- Accesso con l'account della scuola ---------- */

.f2ar-google { margin-bottom: 4px; }

.f2ar-google__nota {
  margin: 8px 0 0;
  font-size: .86rem;
  line-height: 1.45;
  color: #5c6f82;
}

/* Il bottone di Google: bianco con il filo grigio, come le sue regole di
   marchio richiedono. Non si colora di rosso per farlo somigliare al sito:
   e' proprio il fatto che sia riconoscibile a rassicurare chi lo preme. */
.f2goo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #fff;
  color: #17324d !important;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .16s var(--f2-ease, ease), box-shadow .16s var(--f2-ease, ease);
}

.f2goo-btn:hover,
.f2goo-btn:focus-visible {
  background: #f3f4f6;
  box-shadow: 0 1px 3px rgba(23, 50, 77, .18);
}

.f2goo-btn__g { display: inline-flex; flex: 0 0 auto; }

/* Il separatore fra i due modi di entrare: una riga con la parola in mezzo.
   Serve a dire che sono ALTERNATIVE, non due passaggi in sequenza. */
.f2ar-oppure {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: #5c6f82;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.f2ar-oppure::before,
.f2ar-oppure::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #d9dadb;
}

@media (prefers-reduced-motion: reduce) {
  .f2ar-porta,
  .f2goo-btn { transition: none; }
  .f2ar-porta:hover,
  .f2ar-porta:focus-visible { transform: none; }
}

/* Sul telefono i due comandi della barra («Aggiungi un documento», «Esci») sono collegamenti di
   testo alti 24 punti: misurato a 375, e sotto il pollice sono pochi. Si allarga l'area toccabile
   senza cambiare l'aspetto, che e' l'unico modo di rispettare i 44 punti raccomandati su un
   comando che deve restare un collegamento e non diventare un bottone. */
@media (max-width: 767px) {
  .f2ar-azioni { gap: 8px; }

  .f2ar-azioni a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }
}

/* Con Google acceso: il bottone di Google a tutta larghezza, il modulo con la password ripiegato
   sotto un «Ha un nome utente e una password del sito?» (05/09/2026). */
.f2goo-btn--grande { display: flex; width: 100%; justify-content: center; padding: 14px 18px; font-size: 18px; }

/* Dall'11/09/2026 il modulo della password non c'e' piu' e al suo posto resta questa riga sola.
   Serve a chiudere la domanda invece di lasciarla aperta: senza, sotto il bottone di Google c'e'
   il vuoto, e chi non trova il campo della password lo cerca. Tono basso, corpo piccolo, filo
   sopra: e' una nota a margine, non un avviso. */
.f2ar-solog { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #d9dadb; font-size: 15px; line-height: 1.5; color: #5c6f82; }
.f2ar-altrimenti { margin-top: 18px; padding-top: 12px; border-top: 1px solid #d9dadb; }
.f2ar-altrimenti > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: #17324d; list-style: none; }
.f2ar-altrimenti > summary::-webkit-details-marker { display: none; }
.f2ar-altrimenti > summary::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.f2ar-altrimenti[open] > summary::before { transform: rotate(45deg); }
.f2ar-altrimenti[open] > summary { margin-bottom: 14px; }
.f2ar-altrimenti > summary:focus-visible { outline: 2px solid #17324d; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .f2ar-altrimenti > summary::before { transition: none; } }

/* ============================================================
   LA GERARCHIA DI COLORE DELL'AREA RISERVATA
   ============================================================
   🔴 Il difetto, visto guardando la pagina resa e non il foglio di stile: tre famiglie di
   riquadri che facevano tre cose diverse portavano tutte lo stesso filo rosso. Le cartelle
   riservate, i documenti pubblicati sul sito e le porte in cima leggevano l'accento dalla
   stessa variabile `--f2-acc` della sezione, che su questa pagina vale il rosso dell'istituto.
   Il colore non distingueva niente: era decorazione.

   LA REGOLA, UNA SOLA E DETTA A PAROLE nella riga sotto la ricerca:
   il colore dice DOVE PORTA.

     rosso     #d8333a   dentro l'area riservata: si vede solo dopo l'accesso
     petrolio  #51758d   una pagina pubblica di questo sito
     inchiostro #17324d  un servizio fuori da qui, con altre credenziali

   Perché proprio questi tre: sono i colori del modello ministeriale già in uso sul sito, non
   tinte inventate per questa pagina. Il rosso è quello dell'istituto, il petrolio è il quinto
   colore del modello, e l'inchiostro è quello dei titoli di tutto il sito.

   E la distinzione non sta MAI nel solo colore: la legenda la dice a parole, i titoli di
   sezione la dicono, e la riga di conteggio delle scorciatoie dice «anche senza accesso».
   ============================================================ */
.f2ar {
  --f2ar-ris: #d8333a;
  --f2ar-ris-scuro: #af2127;
  --f2ar-pub: #51758d;
  --f2ar-pub-scuro: #3f5b6e;
  /* 🔴 #17324d e non un altro grigio-azzurro. MISURATO: il candidato naturale era #5c6f82,
     l'inchiostro tenue delle note, ma contro il petrolio ha 1,06 di contrasto, cioè la stessa
     chiarezza. Due fili accanto sarebbero sembrati lo stesso filo, e la gerarchia sarebbe
     rimasta scritta nel foglio di stile invece che negli occhi di chi guarda. #17324d, che è
     l'inchiostro dell'istituto, contro il petrolio fa 2,67: si vede che è un altro. */
  --f2ar-fuori: #17324d;
  --f2ar-fuori-scuro: #17324d;
}

/* ---- la legenda ---- */
.f2ar-legenda {
  margin: 18px 0 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: #43536b;
}
.f2ar-legenda-v {
  display: inline-block;
  padding-left: 11px;
  border-left: 5px solid var(--f2ar-fuori);
  white-space: nowrap;
}
.f2ar-legenda-v--ris { border-left-color: var(--f2ar-ris); }
.f2ar-legenda-v--pub { border-left-color: var(--f2ar-pub); }
.f2ar-legenda-v--fuori { border-left-color: var(--f2ar-fuori); }

/* ---- le cartelle: riservate in rosso, scorciatoie in petrolio ---- */
.f2ar-cartelle--riservate a { border-left-color: var(--f2ar-ris); }
.f2ar-cartelle--riservate .f2ar-cartella-nome { color: var(--f2ar-ris-scuro); }
.f2ar-cartelle--scorciatoie a { border-left-color: var(--f2ar-pub); }
.f2ar-cartelle--scorciatoie .f2ar-cartella-nome { color: var(--f2ar-pub-scuro); }

/* La cartella vuota resta in elenco ma si smorza, e il conteggio lo dice. Non si nasconde:
   chi carica i documenti deve continuare a vederla. */
.f2ar-cartella--vuota a { background: #fafbfb; }
.f2ar-cartella--vuota .f2ar-cartella-nome,
.f2ar-cartella--vuota .f2ar-cartella-desc { opacity: .72; }

/* ---- i servizi esterni: ardesia, e il filo ce l'hanno anche loro ---- */
.f2ar-servizi.f2ar-fuori a {
  border-left: 5px solid var(--f2ar-fuori);
  border-radius: 0 4px 4px 0;
}
.f2ar-servizi.f2ar-fuori .f2ar-servizio-nome { color: var(--f2ar-fuori-scuro); }

/* ---- le porte in cima: due portano dentro, una a una pagina pubblica ---- */
.f2ar-porta--ris { border-left-color: var(--f2ar-ris); }
.f2ar-porta--ris .f2ar-porta-tit { color: var(--f2ar-ris-scuro); }
.f2ar-porta--pub { border-left-color: var(--f2ar-pub); }
/* Vince sulla regola del piano scritta piu' su, che gli dava il rosso. */
.f2ar-porta--pub .f2ar-porta-tit,
.f2ar-porta--pub.f2ar-porta--piano .f2ar-porta-tit { color: var(--f2ar-pub-scuro); }

/* ============================================================
   LA PRESA VISIONE
   ============================================================
   Il pulsante sta sotto il file, dove finisce di leggere chi ha appena scaricato: è l'ordine
   in cui si fanno le due cose. Non è un pulsante primario rosso, perché non è l'azione
   principale della pagina, ma non è nemmeno un collegamento smorzato: è una dichiarazione, e
   deve sembrarlo.
   ============================================================ */
.f2vis-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e3e4e6;
}
.f2vis-btn {
  /* 48px di altezza: è un bersaglio da premere col dito su un telefono in corridoio, e le
     WCAG 2.2 ne chiedono almeno 24. Qui si sta larghi perché si preme una volta sola e non
     si torna indietro. */
  min-height: 48px;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--f2ar-ris, #d8333a);
  border: 1px solid var(--f2ar-ris-scuro, #af2127);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .18s var(--f2-ease, ease);
}
.f2vis-btn:hover,
.f2vis-btn:focus-visible {
  background: var(--f2ar-ris-scuro, #af2127);
}
.f2vis-nota {
  font-size: .875rem;
  color: #5c6f82;
  line-height: 1.45;
}
/* Fatta: verde, e con la data. Il verde qui non è una quarta famiglia di colore, è lo stato
   «a posto» che il modello usa già per i messaggi riusciti. */
.f2vis-fatta {
  margin: 14px 0 0;
  padding: 10px 14px;
  font-weight: 600;
  color: #0a6847;
  background: #f0f8f4;
  border-left: 4px solid #0e865c;
}
@media (prefers-reduced-motion: reduce) {
  .f2vis-btn { transition: none; }
}