/* =========================================================================
   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;
}

/* ---------- Elenco documenti ---------- */

.f2ar-elenco { list-style: none; margin: 0; padding: 0; }

.f2ar-doc {
  border: 1px solid #d9dadb;
  border-radius: 4px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: #fff;
  /* 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;
}

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

.f2ar-doc-titolo {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  line-height: 1.35;
  color: #17324d;
}

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

.f2ar-doc-dove {
  margin: 0 0 10px;
  font-size: .875rem;
  color: #5c6f82;
}

.f2ar-doc-dove a { color: #5c6f82; text-decoration: underline; }

.f2ar-doc-testo {
  margin: 0 0 14px;
  color: #5c6f82;
  line-height: 1.55;
}

.f2ar-tutti { margin: 20px 0 0; }
.f2ar-tutti a { font-weight: 700; text-decoration: underline; }

/* ---------- 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; }

.f2ar-doc-file { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.f2ar-scarica {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 20px;
  min-height: 48px;
  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: 1rem; text-decoration: underline; }
.f2ar-scarica-nome { font-size: .9375rem; }
.f2ar-scarica-meta { font-size: .8125rem; }

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

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

/* ---------- 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-scarica { width: 100%; }
  .f2ar-barra { flex-direction: column; align-items: flex-start; }
}

/* ---------- 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 ---------- */

.f2ar-doc-nuovo {
  margin: 6px 0 0;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 40px;
  background: #e8f4ee;
  color: #0a6847;
  font-size: .8rem;
  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; }
.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; } }