/* ============================================================
   stile.css — Stili specifici microtutoring.it
   Caricato DOPO bootstrap-italia.min.css: qui solo integrazioni
   e override. Unità relative per il reflow al 200% di zoom
   (WCAG 1.4.4 / 1.4.10).
   ============================================================ */

:root {
  --mt-blu-istituzionale: #17324d;
  --mt-blu-primario: #0059b3;
  --mt-grigio-chiaro: #f2f5f8;
  --mt-grigio-bordo: #d9dee5;
}

/* ------------------------------------------------------------
   Testata fissa: barra loghi + navigazione restano agganciate
   in alto durante lo scorrimento (emblema UE sempre visibile,
   Reg. UE 2021/1060 art. 47).

   ALTEZZA INVARIANTE. La testata deve occupare sempre lo stesso
   spazio verticale, agganciata o no. Un elemento sticky resta
   nel flusso del documento: se cambia altezza, tutto ciò che
   segue si sposta, il browser corregge la posizione di
   scorrimento per tenere fermo il contenuto (scroll anchoring),
   la correzione riporta la sentinella dentro la finestra,
   l'osservatore toglie la classe, la testata torna alta — e si
   ricomincia a ogni fotogramma. È il tremolio che si vedeva a
   una precisa altezza della pagina, amplificato dalla
   transizione di 0,2 s sulla larghezza del logo, che rendeva il
   cambio di altezza continuo anziché istantaneo.

   Per questo la classe .e-fissata agisce ora solo su proprietà
   che non partecipano al calcolo del layout (l'ombra). La barra
   loghi ha una dimensione sola, scelta come compromesso fra la
   versione estesa e quella compatta di prima.
   ------------------------------------------------------------ */
.testata-sito {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #fff;
}

/* Ombra applicata via JS solo quando la testata è agganciata.
   Nessuna proprietà che modifichi l'altezza: v. nota sopra. */
.testata-sito.e-fissata {
  box-shadow: 0 0.25rem 0.75rem rgba(23, 50, 77, 0.35);
}

/* Marcatore d'appoggio per l'osservatore in js/sito.js. Un pixel
   invece di zero: alcune combinazioni di browser non riportano
   in modo affidabile l'intersezione di un riquadro di area nulla.
   Il margine negativo ne annulla l'ingombro. */
.sentinella-testata {
  height: 1px;
  margin-bottom: -1px;
}

/* ------------------------------------------------------------
   Barra loghi istituzionale
   ------------------------------------------------------------ */
.barra-loghi {
  background-color: #fff;
  border-bottom: 1px solid var(--mt-grigio-bordo);
  padding: 0.75rem 0;
}

.barra-loghi img {
  display: block;
  width: 100%;
  max-width: 44rem; /* 704px: dimensione unica, v. nota sopra */
  height: auto;
  margin: 0 auto;
}

/* Su schermi piccoli l'immagine occupa già tutta la larghezza
   disponibile: si recupera spazio verticale solo sul riempimento.
   Anche qui il valore è costante, agganciata o no la testata. */
@media (max-width: 767px) {
  .barra-loghi {
    padding: 0.5rem 0;
  }

  html {
    scroll-padding-top: 9rem;
  }
}

/* ------------------------------------------------------------
   Navigazione principale — un solo blu su tutta la barra
   ------------------------------------------------------------ */
.navbar-principale {
  background-color: var(--mt-blu-istituzionale);
}

/* Bootstrap Italia colora di blu primario il contenitore interno
   del menu su desktop: lo rendiamo trasparente così l'intera
   barra ha un unico colore. Sotto i 992px il menu è un pannello
   fuori schermo con fondo proprio e non va toccato. */
@media (min-width: 992px) {
  .navbar-principale .navbar-collapsable,
  .navbar-principale .navbar-collapsable .menu-wrapper {
    background-color: transparent;
  }
}

/* Le ancore interne non finiscono nascoste sotto la testata fissa
   (WCAG 2.4.11, contenuto non oscurato). Ora che l'altezza è una
   sola il valore è esatto e non un compromesso: barra loghi
   (0,75rem + 4,4rem d'immagine + 0,75rem + bordo) più il menu. */
html {
  scroll-padding-top: 12rem;
}

.navbar-principale .nav-link {
  color: #fff;
  font-weight: 600;
  /* area di attivazione ampia, oltre i 24px minimi (WCAG 2.5.8) */
  padding: 0.875rem 1.25rem;
}

.navbar-principale .nav-link:hover,
.navbar-principale .nav-link:focus {
  background-color: var(--mt-blu-primario);
  color: #fff;
  text-decoration: underline;
}

.navbar-principale .nav-link.active {
  background-color: var(--mt-blu-primario);
  box-shadow: inset 0 -0.25rem 0 #fff;
}

/* ------------------------------------------------------------
   Hero di pagina
   ------------------------------------------------------------ */
.hero-progetto {
  background-color: var(--mt-grigio-chiaro);
  border-bottom: 0.25rem solid var(--mt-blu-primario);
  padding: 3rem 0;
}

.hero-progetto .occhiello {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mt-blu-primario);
}

.hero-progetto h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  color: var(--mt-blu-istituzionale);
}

.hero-progetto .sottotitolo {
  margin: 0;
  max-width: 50rem;
  font-size: 1.25rem;
}

/* ------------------------------------------------------------
   Carosello hero delle notizie in evidenza (home)
   Scorrimento orizzontale accessibile: frecce, indicatori,
   pausa; nessun movimento con prefers-reduced-motion (gestito
   dalla regola globale in fondo al foglio).
   ------------------------------------------------------------ */
.hero-carosello__viewport {
  overflow: hidden;
}

.hero-carosello__lista {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.45s ease;
}

.hero-carosello__slide {
  flex: 0 0 100%;
  min-width: 100%;
}

/* Le diapositive non attive restano nel flusso (servono alla
   larghezza del nastro) ma sono escluse da lettura e tastiera
   via aria-hidden/tabindex gestiti in js/sito.js */
.hero-carosello__titolo {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  color: var(--mt-blu-istituzionale);
  border: 0;
  padding: 0;
}

.hero-carosello__azione {
  margin: 1.5rem 0 0;
}

.hero-carosello__comandi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-carosello__pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;  /* 44px: target ampio (WCAG 2.5.8) */
  min-height: 2.75rem;
  border: 0.125rem solid var(--mt-blu-primario);
  border-radius: 50%;
  background-color: #fff;
  color: var(--mt-blu-primario);
  cursor: pointer;
  padding: 0;
}

.hero-carosello__pulsante .icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.hero-carosello__pulsante:hover {
  background-color: var(--mt-blu-primario);
  color: #fff;
}

.hero-carosello__indicatori {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hero-carosello__punto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* Il pallino visivo è più piccolo del target di attivazione */
.hero-carosello__punto::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 0.125rem solid var(--mt-blu-primario);
  background-color: #fff;
}

.hero-carosello__punto.e-attivo::before {
  background-color: var(--mt-blu-primario);
}

/* Icona pausa/riproduzione disegnata in CSS (due barre / triangolo) */
.hero-carosello__pausa-icona {
  display: block;
  width: 0.875rem;
  height: 1rem;
  border-left: 0.3125rem solid currentColor;
  border-right: 0.3125rem solid currentColor;
}

.hero-carosello__pausa[aria-pressed="true"] .hero-carosello__pausa-icona {
  width: 0;
  height: 0;
  border-left: 0.875rem solid currentColor;
  border-right: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
}

/* ------------------------------------------------------------
   Contenuti
   ------------------------------------------------------------ */
main h2 {
  color: var(--mt-blu-istituzionale);
  font-size: 1.625rem;
  margin: 2.5rem 0 1rem;
  border-bottom: 0.125rem solid var(--mt-grigio-bordo);
  padding-bottom: 0.5rem;
}

main h2:first-child {
  margin-top: 0;
}

.dichiarazione {
  background-color: var(--mt-grigio-chiaro);
  border-left: 0.375rem solid var(--mt-blu-primario);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-weight: 600;
}

.dichiarazione p {
  margin: 0;
}

.hashtag {
  display: inline-block;
  background-color: var(--mt-grigio-chiaro);
  border: 1px solid var(--mt-grigio-bordo);
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  margin: 0.25rem 0.25rem 0.25rem 0;
  font-weight: 600;
  color: var(--mt-blu-istituzionale);
}

/* ------------------------------------------------------------
   Footer — hover dei link in bianco per la leggibilità
   su sfondo scuro (mai la regola generale a:hover)
   ------------------------------------------------------------ */
.footer-sito {
  background-color: var(--mt-blu-istituzionale);
  color: #fff;
  padding: 2.5rem 0 2rem;
  margin-top: 3rem;
}

/* Logo ENM monocromatico sopra l'intestazione del footer */
.footer-sito .footer-logo-enm {
  display: block;
  width: 100%;
  max-width: 15rem; /* 240px */
  height: auto;
  margin: 0 0 1rem;
}

.footer-sito .footer-titolo {
  font-size: 1.25rem;
  color: #fff;
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}

.footer-sito p {
  margin: 0.5rem 0;
}

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

.footer-sito .footer-elenco li {
  margin: 0.5rem 0;
}

.footer-sito a {
  color: #d3e2f5;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-sito a:hover {
  color: #fff;
}

.footer-sito .footer-dichiarazione {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  font-size: 1rem;
}

/* ------------------------------------------------------------
   Accessibilità
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible {
  outline: 0.1875rem solid #ff9900;
  outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
* --- Elenco avvisi (pagina indice) --- */
.elenco-avvisi {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
 
.elenco-avvisi > li + li {
  margin-top: 1.5rem;
}
 
.scheda-avviso {
  border: 1px solid #d9dadb;
  border-left: 0.375rem solid #0066cc;
  border-radius: 0.25rem;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
}
 
.scheda-avviso__stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}
 
.scheda-avviso__titolo {
  margin: 0 0 0.5rem;
}
 
.scheda-avviso__titolo a {
  display: inline-block;      /* garantisce l'area cliccabile minima */
  min-height: 1.5rem;         /* ≥ 24px con font-size di base 16px */
  text-decoration: underline;
}
 
.scheda-avviso__sintesi {
  margin: 0 0 1rem;
  max-width: 70ch;
}
 
/* --- Badge di stato (mai solo colore: sempre testo esplicito) --- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
 
.badge--aperto {
  background-color: #e5f4ec;
  color: #00552f;             /* contrasto ≥ 7:1 su #e5f4ec */
  border: 1px solid #008758;
}
 
.badge--chiuso {
  background-color: #f2f2f2;
  color: #444;
  border: 1px solid #757575;
}
 
/* --- Definizioni chiave/valore delle schede --- */
.scheda-avviso__dati {
  margin: 0;
}
 
.scheda-avviso__dati > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid #eceeef;
}
 
.scheda-avviso__dati dt {
  font-weight: 600;
  min-width: 12rem;
}
 
.scheda-avviso__dati dd {
  margin: 0;
  flex: 1 1 15rem;
}
 
.scheda-avviso__dati--dettaglio {
  border: 1px solid #d9dadb;
  border-radius: 0.25rem;
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background-color: #f8f9fa;
}
 
/* --- Occhiello istituzionale della pagina di dettaglio --- */
.occhiello-avviso {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #17324d;
  margin-bottom: 0.5rem;
}
 
/* --- Sommario dell'avviso (nav interna con ancore) --- */
.indice-avviso {
  border: 1px solid #d9dadb;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}
 
.indice-avviso h3 {
  margin-top: 0;
}
 
.indice-avviso ol {
  margin: 0;
  padding-left: 1.5rem;
  columns: 2 18rem;           /* due colonne solo se c'è spazio */
  column-gap: 2rem;
}
 
.indice-avviso li {
  margin: 0.25rem 0;
  break-inside: avoid;
}
 
.indice-avviso a {
  display: inline-block;
  min-height: 1.5rem;         /* target minimo 24px */
}
 
/* Scorrimento alle ancore senza finire sotto eventuali header sticky */
.indice-avviso ~ section[id],
section[aria-labelledby] h3[id] {
  scroll-margin-top: 5rem;
}
 
/* --- Note su campi in corso di definizione --- */
.avviso-nota {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 0.25rem solid #995c00;
  background-color: #fff5e5;
  color: #5a3a06;             /* contrasto conforme AA su #fff5e5 */
  font-style: italic;
}
 
/* --- Link di ritorno --- */
.link-ritorno {
  display: inline-block;
  min-height: 1.5rem;
  margin-top: 1rem;
}
 
/* --- Riduzione del movimento: nessuno scroll animato alle ancore --- */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

/* ============================================================
   Sezione "Avvisi e bandi" — componenti aggiuntivi
   Da accodare a css/stile.css
   Palette Design Italia: blu primario #0066CC, verde #008758,
   grigi neutri. Unità relative per il reflow al 200% di zoom
   (WCAG 1.4.10) e target minimi dei link (WCAG 2.5.8).
   ============================================================ */

/* --- Elenco avvisi (pagina indice) --- */
.elenco-avvisi {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.elenco-avvisi > li + li {
  margin-top: 1.5rem;
}

.scheda-avviso {
  border: 1px solid #d9dadb;
  border-left: 0.375rem solid #0066cc;
  border-radius: 0.25rem;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
}

.scheda-avviso__stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.scheda-avviso__titolo {
  margin: 0 0 0.5rem;
}

.scheda-avviso__titolo a {
  display: inline-block;      /* garantisce l'area cliccabile minima */
  min-height: 1.5rem;         /* ≥ 24px con font-size di base 16px */
  text-decoration: underline;
}

.scheda-avviso__sintesi {
  margin: 0 0 1rem;
  max-width: 70ch;
}

/* --- Badge di stato (mai solo colore: sempre testo esplicito) --- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--aperto {
  background-color: #e5f4ec;
  color: #00552f;             /* contrasto ≥ 7:1 su #e5f4ec */
  border: 1px solid #008758;
}

.badge--chiuso {
  background-color: #f2f2f2;
  color: #444;
  border: 1px solid #757575;
}

/* --- Definizioni chiave/valore delle schede --- */
.scheda-avviso__dati {
  margin: 0;
}

.scheda-avviso__dati > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid #eceeef;
}

.scheda-avviso__dati dt {
  font-weight: 600;
  min-width: 12rem;
}

.scheda-avviso__dati dd {
  margin: 0;
  flex: 1 1 15rem;
}

.scheda-avviso__dati--dettaglio {
  border: 1px solid #d9dadb;
  border-radius: 0.25rem;
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background-color: #f8f9fa;
}

/* --- Occhiello istituzionale della pagina di dettaglio --- */
.occhiello-avviso {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #17324d;
  margin-bottom: 0.5rem;
}

/* --- Sommario dell'avviso (nav interna con ancore) --- */
.indice-avviso {
  border: 1px solid #d9dadb;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}

.indice-avviso h3 {
  margin-top: 0;
}

.indice-avviso ol {
  margin: 0;
  padding-left: 1.5rem;
  columns: 2 18rem;           /* due colonne solo se c'è spazio */
  column-gap: 2rem;
}

.indice-avviso li {
  margin: 0.25rem 0;
  break-inside: avoid;
}

.indice-avviso a {
  display: inline-block;
  min-height: 1.5rem;         /* target minimo 24px */
}

/* Scorrimento alle ancore senza finire sotto eventuali header sticky */
.indice-avviso ~ section[id],
section[aria-labelledby] h3[id] {
  scroll-margin-top: 5rem;
}

/* --- Note su campi in corso di definizione --- */
.avviso-nota {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 0.25rem solid #995c00;
  background-color: #fff5e5;
  color: #5a3a06;             /* contrasto conforme AA su #fff5e5 */
  font-style: italic;
}

/* --- Scheda contatti (elemento address) --- */
.scheda-contatti {
  font-style: normal;         /* annulla il corsivo predefinito di <address> */
}

/* --- Link di ritorno --- */
.link-ritorno {
  display: inline-block;
  min-height: 1.5rem;
  margin-top: 1rem;
}

/* --- Riduzione del movimento: nessuno scroll animato alle ancore --- */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
/* ============================================================
   Notizie — carosello con immagine, elenco e dettaglio
   ============================================================ */
.hero-carosello__slide {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hero-carosello__testo {
  flex: 1 1 60%;
  min-width: 0;
}

.hero-carosello__figura {
  flex: 1 1 40%;
  margin: 0;
  display: none;             /* su schermi stretti prevale il testo */
}

.hero-carosello__figura img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid var(--mt-grigio-bordo);
}

@media (min-width: 768px) {
  .hero-carosello__figura {
    display: block;
  }
}

/* --- Elenco notizie --- */
.elenco-notizie {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.elenco-notizie > li + li {
  margin-top: 1.5rem;
}

.scheda-notizia {
  display: flex;
  gap: 1.5rem;
  border: 1px solid var(--mt-grigio-bordo);
  border-left: 0.375rem solid var(--mt-blu-primario);
  border-radius: 0.25rem;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
}

.scheda-notizia__figura {
  flex: 0 0 12rem;
  display: none;
}

.scheda-notizia__figura img {
  display: block;
  width: 100%;
  height: 8rem;
  object-fit: cover;
  border-radius: 0.25rem;
}

@media (min-width: 768px) {
  .scheda-notizia__figura {
    display: block;
  }
}

.scheda-notizia__contenuto {
  min-width: 0;
}

.scheda-notizia__data {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mt-blu-istituzionale);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.scheda-notizia__titolo {
  margin: 0 0 0.5rem;
  border: 0;
  padding: 0;
  font-size: 1.375rem;
}

.scheda-notizia__titolo a {
  display: inline-block;
  min-height: 1.5rem;        /* target ≥ 24px */
  text-decoration: underline;
}

.scheda-notizia__sintesi {
  margin: 0;
  max-width: 70ch;
}

/* --- Dettaglio notizia --- */
.titolo-sezione {
  color: var(--mt-blu-istituzionale);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}

.articolo-notizia__data {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--mt-blu-istituzionale);
}

.articolo-notizia__figura {
  margin: 1.5rem 0;
}

.articolo-notizia__figura img {
  display: block;
  width: 100%;
  max-width: 50rem;
  height: auto;
  border-radius: 0.375rem;
  border: 1px solid var(--mt-grigio-bordo);
}

.articolo-notizia__corpo {
  max-width: 70ch;
  font-size: 1.0625rem;
}

.elenco-allegati {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.elenco-allegati li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mt-grigio-bordo);
}

.elenco-allegati a {
  display: inline-block;
  min-height: 1.5rem;
  font-weight: 600;
  text-decoration: underline;
}

/* ============================================================
   Notizie — carosello con immagine, elenco pubblico, dettaglio
   ============================================================ */

/* Diapositiva con immagine in evidenza: testo a sinistra,
   figura a destra su desktop, impilati su mobile */
.hero-carosello__griglia {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .hero-carosello__griglia.con-immagine {
    grid-template-columns: 3fr 2fr;
  }
}

.hero-carosello__immagine {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: cover;
  border-radius: 0.25rem;
  border: 1px solid var(--mt-grigio-bordo);
}

/* --- Elenco pubblico delle notizie --- */
.elenco-notizie {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.elenco-notizie > li + li {
  margin-top: 1.5rem;
}

.scheda-notizia {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--mt-grigio-bordo);
  border-left: 0.375rem solid var(--mt-blu-primario);
  border-radius: 0.25rem;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
}

@media (min-width: 768px) {
  .scheda-notizia {
    grid-template-columns: 14rem 1fr;
    align-items: start;
  }
}

.scheda-notizia__immagine {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.25rem;
}

.scheda-notizia__data {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mt-blu-istituzionale);
}

.scheda-notizia__titolo {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  border: 0;
  padding: 0;
}

.scheda-notizia__titolo a {
  display: inline-block;
  min-height: 1.5rem;       /* target minimo 24px (WCAG 2.5.8) */
  text-decoration: underline;
}

.scheda-notizia__estratto {
  margin: 0;
  max-width: 70ch;
}

/* --- Dettaglio notizia --- */
.notizia__titolo {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.notizia__immagine {
  display: block;
  width: 100%;
  height: auto;
  max-height: 26rem;
  object-fit: cover;
  border-radius: 0.25rem;
  border: 1px solid var(--mt-grigio-bordo);
  margin: 0 0 1.5rem;
}

.notizia__corpo p {
  max-width: 75ch;
}

.notizia__allegati {
  border: 1px solid var(--mt-grigio-bordo);
  border-radius: 0.25rem;
  background-color: var(--mt-grigio-chiaro);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
}

.notizia__allegati h3 {
  margin-top: 0;
}

.notizia__allegati ul {
  margin: 0;
  padding-left: 1.25rem;
}

.notizia__allegati li {
  margin: 0.5rem 0;
}

.notizia__allegati a {
  display: inline-block;
  min-height: 1.5rem;
}

/* ============================================================
   Area di amministrazione (/admin/)
   ============================================================ */
.pagina-admin {
  background-color: var(--mt-grigio-chiaro);
}

.admin-testata {
  background-color: var(--mt-blu-istituzionale);
  color: #fff;
}

.admin-testata__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.admin-testata__marchio {
  margin: 0;
  font-weight: 700;
}

.admin-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-menu a {
  display: inline-block;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  padding: 0.5rem 0.25rem;   /* target ≥ 24px */
}

.admin-contenuto,
.admin-accesso {
  background-color: #fff;
  border: 1px solid var(--mt-grigio-bordo);
  border-radius: 0.25rem;
  padding: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.admin-accesso {
  max-width: 30rem;
}

.admin-campo {
  margin: 0 0 1.25rem;
}

.admin-campo label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.admin-campo input[type="text"],
.admin-campo input[type="date"],
.admin-campo input[type="password"],
.admin-campo textarea {
  display: block;
  width: 100%;
  max-width: 45rem;
  border: 1px solid #757575;
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  font: inherit;
}

.admin-campo textarea {
  max-width: 100%;
}

.admin-campo--scelta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-campo--scelta input {
  width: 1.25rem;
  height: 1.25rem;
}

.admin-campo--scelta label {
  margin: 0;
  font-weight: 400;
}

.admin-aiuto {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #444;
  max-width: 45rem;
}

.admin-riquadro {
  border: 1px solid var(--mt-grigio-bordo);
  border-radius: 0.25rem;
  padding: 1rem 1.25rem 0.5rem;
  margin: 0 0 1.5rem;
}

.admin-riquadro legend {
  font-weight: 700;
  padding: 0 0.5rem;
  font-size: 1.05rem;
  width: auto;
}

.admin-anteprima {
  display: block;
  max-width: 20rem;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  border: 1px solid var(--mt-grigio-bordo);
}

.admin-elenco-allegati {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.admin-elenco-allegati li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  border-top: 1px solid var(--mt-grigio-bordo);
  padding: 0.5rem 0;
}

.admin-avviso {
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
}

.admin-avviso--ok {
  background-color: #e5f4ec;
  border: 1px solid #008758;
  color: #00552f;
}

.admin-avviso--errore,
.admin-errore {
  background-color: #fce5e8;
  border: 1px solid #b3183a;
  color: #7a1029;
}

.admin-errore {
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
}

.admin-avviso ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.admin-tabella td {
  vertical-align: top;
}

.admin-azioni {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.admin-azioni form {
  margin: 0;
}
.scheda-avviso__azioni { margin-top: 1rem; }

.btn-download {
  display: inline-block;
  min-height: 24px;
  padding: 0.75rem 1.5rem;
  background-color: #0066cc;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.btn-download:hover,
.btn-download:focus-visible { background-color: #004d99; color: #fff; }
.btn-download:focus-visible { outline: 3px solid #ff9900; outline-offset: 2px; }
.btn-download__formato { font-weight: 400; }

.mt-campo-esca {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* --------------------------------------------------------------------------
   Indicatore dei passi della registrazione
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Campo del codice di verifica

   Cifre distanziate e a larghezza fissa: si rileggono a colpo d'occhio per
   confrontarle con quelle ricevute. Non si usa un campo separato per ogni
   cifra, soluzione diffusa ma ostile ai lettori di schermo e all'incolla.

   LARGHEZZA. Il calcolo non torna a occhio e il campo era troppo stretto: con
   letter-spacing ogni cifra occupa la propria larghezza piu' la spaziatura,
   cioe' circa 1,15em, e sei cifre chiedono quasi 7em. A 1,6rem di corpo fanno
   oltre 11rem di solo testo, ai quali va aggiunto il riempimento a sinistra.
   Il limite di 11rem faceva traboccare il contenuto e, con il testo centrato,
   un campo che trabocca viene tagliato a SINISTRA: spariva la prima cifra.

   COMPENSAZIONE. letter-spacing aggiunge lo spazio anche dopo l'ultima cifra,
   quindi il blocco centrato risulta spostato a sinistra di mezza spaziatura.
   Il riempimento a sinistra pari a una spaziatura intera lo riporta in asse,
   perche' con box-sizing: border-box sposta il centro dell'area di contenuto
   di mezza spaziatura verso destra.
   -------------------------------------------------------------------------- */

/* Il gruppo intero va centrato, non solo il campo: l'etichetta di Bootstrap
   Italia e' posizionata in modo assoluto dentro .form-group, quindi centrando
   il campo da solo resterebbe allineata a sinistra. */
.form-group:has(.mt-codice-otp) {
  max-width: 15rem;
  margin-inline: auto;
  text-align: center;
}

.form-group:has(.mt-codice-otp) label,
.form-group:has(.mt-codice-otp) .form-text {
  width: 100%;
  text-align: center;
}

.mt-codice-otp {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 1.6rem;
  letter-spacing: .55em;
  text-align: center;
  width: 100%;
  padding-left: .55em;   /* compensa la spaziatura dopo l'ultima cifra */
}
/* --------------------------------------------------------------------------
   Spaziatura di fieldset e legend nei moduli

   Bootstrap Italia disegna l'etichetta sopra il campo, in posizione assoluta,
   e riserva lo spazio con un margine superiore sul form-group. Dentro un
   fieldset quel margine non basta: la legend occupa la stessa fascia e le due
   scritte si sovrappongono. Qui si aggiunge il respiro mancante.
   -------------------------------------------------------------------------- */
fieldset > legend {
  margin-bottom: 2rem;
  font-weight: 600;
  color: #17324D;
}

fieldset {
  border: 0;
  padding: 0;
  margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   Spazio sopra i campi con etichetta flottante

   Bootstrap Italia posiziona l'etichetta in modo assoluto con top: 0 e, quando
   il campo e' compilato, la solleva con translateY(-85%): l'etichetta finisce
   quindi CIRCA 1,3rem SOPRA il bordo superiore del proprio .form-group, cioe'
   fuori dal riquadro che la contiene. Lo spazio per accoglierla deve arrivare
   da fuori, e Bootstrap Italia lo ottiene con un margine inferiore di 3rem su
   ogni .form-group, mentre il margine superiore lo lascia a zero.

   Il meccanismo regge finche' sopra un campo c'e' un altro campo. Si rompe
   quando sopra c'e' altro — un titolo di sezione, una casella di scelta, un
   paragrafo — perche' quegli elementi hanno margini piccoli: e' il caso in cui
   "Partita IVA" finiva stampato sopra "Dati professionali".

   La correzione e' un margine superiore sul .form-group stesso. I margini
   verticali adiacenti si fondono prendendo il maggiore dei due, quindi fra due
   campi consecutivi la distanza resta quella voluta e non si somma; dopo un
   titolo, invece, garantisce comunque il minimo necessario.
   -------------------------------------------------------------------------- */
.form-group {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* LE TENDINE NON USANO L'ETICHETTA FLOTTANTE.
   Bootstrap Italia posiziona in modo assoluto anche l'etichetta
   di una select, e la solleva sopra il bordo del contenitore:
   di li' finiva stampata sul paragrafo precedente. Aggiungere
   margine sopra sposta il problema di qualche pixel senza
   risolverlo, perche' l'etichetta resta fuori dal flusso e non
   occupa spazio proprio.
   La si riporta quindi nel flusso normale. Su una tendina
   l'etichetta flottante non serve: il campo non e' mai vuoto —
   mostra sempre l'opzione scelta o «Nessuna preferenza» — quindi
   non c'e' nessun segnaposto da far risalire. Nel flusso puo'
   anche essere leggibile, invece di restare in corpo minuscolo
   sopra il bordo. */
.select-wrapper {
  margin-top: 1.5rem;
}

.select-wrapper > label {
  position: static;
  display: flex;
  align-items: center;
  width: auto;
  max-width: none;
  padding: 0;
  margin-bottom: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mt-blu-istituzionale);
  transform: none;
  cursor: pointer;
}

/* Un'opzione gia' scelta in un'altra tendina resta visibile ma
   non selezionabile: nasconderla farebbe cambiare la lunghezza
   dell'elenco a ogni scelta, e chi cerca una regione non
   capirebbe perche' non c'e' piu'. */
.select-wrapper option:disabled {
  color: #75757a;
}

/* Un callout seguito da campi ha bisogno dello stesso respiro:
   e' il caso della nota sulle preferenze non vincolanti, con
   sotto le tre tendine delle regioni. */
.callout + .row,
.callout + .form-group,
.callout + .select-wrapper {
  margin-top: 2rem;
}

/* Titoli di sezione dentro un fieldset.
   La regola precedente indicava soltanto «fieldset > legend» e veniva
   scavalcata da .h5, che ha specificita' maggiore e impone un margine
   inferiore di mezzo rem: da qui la sovrapposizione. Nominando anche la classe
   la specificita' torna a favore di questa regola. */
fieldset > legend,
fieldset > legend.h5,
fieldset > legend.h4 {
  margin-bottom: 2rem;
}

/* Una casella di scelta seguita da campi ha bisogno dello stesso respiro:
   e' il caso di «Sono iscritto all'Elenco nazionale ENM» con sotto la data di
   iscrizione. */
.form-check + .row,
.form-check + .form-group,
.form-check + div > .row {
  margin-top: 1rem;
}
/* --------------------------------------------------------------------------
   Riquadro dei nominativi

   Ogni professionista indicato dalla società occupa un blocco con bordo:
   senza, le tre serie di campi ripetuti si confondono e non si capisce dove
   finisca un nominativo e cominci il successivo. È un aiuto alla comprensione,
   non un ornamento — il criterio 1.3.1 delle WCAG chiede che i raggruppamenti
   percepibili visivamente siano anche determinabili a livello di codice, e il
   fieldset con legend se ne occupa per le tecnologie assistive.
   -------------------------------------------------------------------------- */
.mt-riquadro {
  border: 1px solid #d3d7db;
  border-radius: 4px;
  padding: 1.5rem 1.5rem .5rem;
  background: #fff;
}

.mt-riquadro > legend {
  float: none;
  width: auto;
  padding: 0 .5rem;
  margin-left: -.5rem;
  font-size: 1.05rem;
}
/* --------------------------------------------------------------------------
   Dichiarazioni sostitutive

   Il testo di ciascuna dichiarazione sta dentro l'etichetta della casella:
   serve perché chi usa un lettore di schermo senta che cosa sta dichiarando
   nel momento in cui raggiunge la casella. Ma un'etichetta di sei righe, con
   l'impostazione predefinita, si allinea male rispetto al quadratino e diventa
   faticosa da leggere. Qui si separano visivamente le dichiarazioni e si dà
   respiro al testo.
   -------------------------------------------------------------------------- */
.mt-dichiarazione {
  padding: 1rem 0;
  border-bottom: 1px solid #e9ecef;
}

.mt-dichiarazione:last-child {
  border-bottom: 0;
}

.mt-dichiarazione label {
  display: block;
  text-align: justify;
  line-height: 1.6;
  padding-left: 2.2rem;
  text-indent: 0;
}

/* Il quadratino resta allineato alla prima riga del testo, non centrato
   verticalmente su un blocco alto sei righe. */
.mt-dichiarazione input[type="checkbox"] {
  margin-top: .3rem;
}
/* --------------------------------------------------------------------------
   Collegamento «Modifica» accanto ai titoli del riepilogo

   Sta sulla stessa riga del titolo di sezione ma non ne fa parte: va reso
   visibilmente secondario, altrimenti compete con l'intestazione e sposta
   l'attenzione dal contenuto che l'utente deve rileggere.
   -------------------------------------------------------------------------- */
/* Titolo di sezione e comando «Modifica» sulla stessa riga, ai due estremi.
   Prima il comando era in float: bastava un titolo su due righe perche'
   scivolasse accanto alla seconda invece che allineato alla prima. */
.mt-sezione__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--mt-grigio-bordo);
}

.mt-sezione__testata .mt-riquadro__titolo {
  margin: 0;
}

.mt-modifica {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  min-height: 1.75rem;
  border: 1px solid var(--mt-blu-primario);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.mt-modifica:hover,
.mt-modifica:focus-visible {
  background-color: var(--mt-blu-primario);
  color: #fff;
}

/* Le tabelle dentro un riquadro non ripetono il bordo esterno: il riquadro
   lo fornisce gia', e due cornici concentriche stringono il contenuto senza
   aggiungere nulla. Restano le righe orizzontali, che sono cio' che serve per
   seguire una tabella a due colonne. */
.mt-tabella-dati {
  margin-bottom: 0;
}

.mt-tabella-dati th,
.mt-tabella-dati td {
  border-left: 0;
  border-right: 0;
  padding: 0.625rem 0;
  vertical-align: top;
}

.mt-tabella-dati tr:last-child th,
.mt-tabella-dati tr:last-child td {
  border-bottom: 0;
}

.mt-tabella-dati th[scope="row"] {
  font-weight: 600;
  color: var(--mt-blu-istituzionale);
  background-color: transparent;
}

/* Il riepilogo contiene molte tabelle a due colonne: senza una larghezza fissa
   sulla prima, ciascuna si dimensiona da sé e l'occhio non trova un
   allineamento su cui scorrere. */
.table th[scope="row"] {
  width: 32%;
}

@media (max-width: 576px) {
  .table th[scope="row"] { width: auto; }

  /* Su schermo stretto la testata va a capo da sola grazie a flex-wrap:
     il comando finisce sotto il titolo, allineato a sinistra. */
  .mt-sezione__testata {
    justify-content: flex-start;
  }
}
/* --------------------------------------------------------------------------
   Stato dei documenti al passo del caricamento

   L'indicazione non è affidata al solo colore: il criterio 1.4.1 delle WCAG
   vieta di veicolare informazione con il colore soltanto, e qui la parola
   «caricato» o «da caricare» resta leggibile anche a chi non distingue il
   verde dall'arancione o legge la pagina con un lettore di schermo.
   -------------------------------------------------------------------------- */
.mt-stato-ok,
.mt-stato-manca {
  float: right;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .6rem;
  border-radius: 1rem;
}

.mt-stato-ok {
  color: #00812f;
  background: #e6f4ea;
  border: 1px solid #00812f;
}

.mt-stato-manca {
  color: #a86400;
  background: #fff4e5;
  border: 1px solid #a86400;
}

@media (max-width: 576px) {
  .mt-stato-ok, .mt-stato-manca { float: none; display: inline-block; margin-top: .4rem; }
}

/* --------------------------------------------------------------------------
   Storico delle valutazioni nel back-office

   Un elenco numerato con i provvedimenti dal più recente: la numerazione
   automatica del browser andrebbe in senso opposto alla lettura, quindi si
   rimuove e si lascia che sia la data a ordinare.
   -------------------------------------------------------------------------- */
.mt-storico {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mt-storico li {
  border-left: 3px solid #0066CC;
  padding-left: .75rem;
}

/* Il primo elemento è il provvedimento in vigore: va distinto dai precedenti,
   che restano visibili ma non sono più efficaci. */
.mt-storico li:first-child {
  border-left-color: #00812f;
}

.mt-storico li:not(:first-child) {
  border-left-color: #d3d7db;
  color: #5a6772;
}

/* --------------------------------------------------------------------------
   Campo per il caricamento dei file

   Deliberatamente fuori da .form-group: Bootstrap Italia vi posiziona
   l'etichetta in assoluto sopra il campo, comportamento pensato per gli input
   di testo che su un campo file — dotato di un proprio pulsante nativo —
   produce due elementi sovrapposti e illeggibili.

   Il pulsante nativo non viene sostituito con uno stilizzato: quello del
   browser è già accessibile da tastiera, annuncia correttamente il nome del
   file scelto ai lettori di schermo e si comporta come l'utente si aspetta sul
   proprio sistema. Rifarlo significherebbe rifare anche tutto questo.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Campo per il caricamento dei file

   Deliberatamente fuori da .form-group: Bootstrap Italia vi posiziona
   l'etichetta in assoluto sopra il campo, comportamento pensato per gli input
   di testo che su un campo file — dotato di un proprio pulsante nativo —
   produce due elementi sovrapposti e illeggibili.

   Il pulsante nativo non viene sostituito con uno stilizzato: quello del
   browser è già accessibile da tastiera, annuncia correttamente il nome del
   file scelto ai lettori di schermo e si comporta come l'utente si aspetta sul
   proprio sistema. Rifarlo significherebbe rifare anche tutto questo.
   -------------------------------------------------------------------------- */
/* ------------------------------------------------------------
   Torna su (componente .back-to-top di Bootstrap Italia)
   ------------------------------------------------------------ */

/* Il pulsante resta sotto la testata nell'ordine di
   sovrapposizione e non compare in stampa. */
.back-to-top {
  z-index: 1020;
}

.back-to-top:focus-visible {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

@media print {
  .back-to-top {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   Riquadro delle pagine dell'area riservata (accesso,
   registrazione, recupero password)
   ------------------------------------------------------------ */
.mt-riquadro {
  background-color: #fff;
  border: 1px solid var(--mt-grigio-bordo);
  border-top: 0.25rem solid var(--mt-blu-primario);
  border-radius: 4px;
  padding: 1.75rem 1.25rem;
  box-shadow: 0 0.125rem 0.5rem rgba(23, 50, 77, 0.08);
}

@media (min-width: 768px) {
  .mt-riquadro {
    padding: 2.5rem 2rem;
  }
}

.mt-riquadro__titolo {
  color: var(--mt-blu-istituzionale);
  margin-bottom: 1.5rem;
}

/* Il pulsante mostra/nascondi password di Bootstrap Italia va
   allineato al campo anche dentro il riquadro */
.mt-riquadro .form-group {
  position: relative;
}

.mt-elenco-passi {
  padding-left: 1.25rem;
}

.mt-elenco-passi li {
  margin-bottom: 0.75rem;
}

.mt-elenco-passi li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Campi con suggerimento (comune di nascita, Stato, residenza)
   Modello combobox di ARIA 1.2: l'elenco compare sotto il campo
   e non sposta il contenuto della pagina.
   ------------------------------------------------------------ */
.mt-combobox {
  position: relative;
}

.mt-suggerimenti {
  position: absolute;
  z-index: 1010;
  inset-inline: 0;
  top: 100%;
  margin: 0.125rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid var(--mt-grigio-bordo);
  border-radius: 4px;
  box-shadow: 0 0.25rem 0.75rem rgba(23, 50, 77, 0.18);
}

.mt-suggerimenti__voce {
  padding: 0.5rem 0.75rem;
  min-height: 2.75rem;      /* bersaglio ampio, WCAG 2.5.8 */
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.mt-suggerimenti__voce.e-evidenziata {
  background-color: var(--mt-blu-primario);
  color: #fff;
}

.mt-suggerimenti__dettaglio {
  font-size: 0.875rem;
  color: #5a6772;
}

.mt-suggerimenti__voce.e-evidenziata .mt-suggerimenti__dettaglio {
  color: #e7ecf4;
}

/* Sostituisce lo stile in linea sui campi in maiuscolo: nessun
   attributo style, così la pagina resta compatibile con una
   Content-Security-Policy senza 'unsafe-inline'. */
.mt-maiuscolo {
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Barra di avanzamento della candidatura e della registrazione
   (markup prodotto da includes/mt_passi.php)

   Il passo raggiunto e' un collegamento, quello in corso no, i
   successivi nemmeno. La differenza non e' affidata al solo
   colore: il passo completato porta un segno di spunta, quello
   in corso un numero pieno, e ogni voce annuncia il proprio
   stato ai lettori di schermo (WCAG 1.4.1, l'uso del colore non
   puo' essere l'unico veicolo dell'informazione).
   ------------------------------------------------------------ */
.mt-passi__conteggio {
  font-size: 0.875rem;
  font-weight: 600;
  color: #5a6772;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mt-passi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.mt-passi li {
  flex: 1 1 9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #d3d7db;
  color: #5a6772;
}

.mt-passi__numero {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid currentcolor;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

/* Passo in corso */
.mt-passi li[aria-current="step"],
.mt-passi li.e-corrente {
  color: var(--mt-blu-istituzionale);
  font-weight: 700;
  border-bottom-color: var(--mt-blu-primario);
}

.mt-passi li[aria-current="step"] .mt-passi__numero,
.mt-passi li.e-corrente .mt-passi__numero {
  background-color: var(--mt-blu-primario);
  border-color: var(--mt-blu-primario);
  color: #fff;
}

/* Passo completato */
.mt-passi li.e-completato {
  color: #00812f;
  border-bottom-color: #00812f;
}

.mt-passi li.e-completato .mt-passi__numero {
  background-color: #00812f;
  border-color: #00812f;
  color: #fff;
}

/* Passo completato e riapribile: e' un collegamento, e si vede */
.mt-passi li.e-cliccabile > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;      /* bersaglio ampio, WCAG 2.5.8 */
  color: inherit;
  text-decoration: none;
}

.mt-passi li.e-cliccabile > a:hover .mt-passi__titolo,
.mt-passi li.e-cliccabile > a:focus-visible .mt-passi__titolo {
  text-decoration: underline;
}

.mt-passi li.e-cliccabile > a:focus-visible {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

/* Su schermo stretto i titoli non ci stanno tutti: restano i
   cerchi, che mantengono la posizione nel percorso, e il titolo
   del solo passo in corso. Il conteggio "Passo 3 di 7" sopra la
   barra continua a dire dove si e' arrivati. */
@media (max-width: 767px) {
  .mt-passi li {
    flex: 0 0 auto;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .mt-passi li:not([aria-current="step"]):not(.e-corrente) .mt-passi__titolo {
    display: none;
  }
}

/* Nei riquadri il legend fa da titolo di sezione */
.mt-riquadro > legend.mt-riquadro__titolo {
  float: none;
  width: auto;
}

/* Nota che compare quando il luogo di nascita viene ricavato
   dal codice fiscale */
.mt-avviso-cf {
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--mt-blu-primario);
  background-color: var(--mt-grigio-chiaro);
  color: var(--mt-blu-istituzionale);
}

/* ------------------------------------------------------------
   Piè di pagina — componente footer del Design System Italia
   (it-footer / it-footer-main / it-footer-small-prints)
   con il blu istituzionale del progetto.
   ------------------------------------------------------------ */
.it-footer-main {
  background-color: var(--mt-blu-istituzionale);
  color: #fff;
}

/* Verde acqua della palette: 7,6:1 su #17324d, oltre la soglia
   AAA del criterio WCAG 1.4.3. Il colore vale solo per i
   collegamenti; il testo corrente resta bianco, 13,1:1. */
.it-footer-main a,
.it-footer-main .list-item,
.it-footer-small-prints a {
  color: #6cd8c0;
  text-decoration: none;
}

.it-footer-main a:hover,
.it-footer-main a:focus-visible,
.it-footer-small-prints a:hover,
.it-footer-small-prints a:focus-visible {
  color: #a7ebdc;
  text-decoration: underline;
}

.it-footer-main a:focus-visible,
.it-footer-small-prints a:focus-visible {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

/* Le intestazioni di colonna restano bianche anche quando sono
   collegamenti: sono titoli, non voci di elenco */
.it-footer-main h4,
.it-footer-main h4 a {
  color: #fff;
  font-family: var(--font-titoli, inherit);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.it-footer-main .footer-list .list-item {
  padding: 0.375rem 0;
  min-height: 1.5rem;      /* bersaglio adeguato, WCAG 2.5.8 */
}

/* Marchio dell'ente nella prima fascia */
.it-footer-main .it-brand-wrapper a {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  text-decoration: none;
}

.it-footer-main .it-brand-text h2 {
  font-size: 1.25rem;
  margin: 0;
}

.it-footer-main .it-brand-text h3 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0.25rem 0 0;
  opacity: 0.9;
}

.footer-logo-enm {
  width: auto;
  height: 3.5rem;
}

/* Fascia della dichiarazione di cofinanziamento: obbligo di
   comunicazione, non decorazione (Reg. UE 2021/1060, art. 50) */
.footer-dichiarazione {
  margin-bottom: 0.5rem;
}

.footer-hashtag span {
  display: inline-block;
  margin-right: 0.75rem;
  font-weight: 600;
}

.it-footer-small-prints {
  background-color: #0f2137;
  color: #fff;
  padding: 1rem 0;
}

.it-footer-small-prints .footer-colophon {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
  opacity: 0.9;
}

/* ------------------------------------------------------------
   Elenco delle schede dei professionisti (passo 4)
   ------------------------------------------------------------ */
.mt-elenco-schede td {
  vertical-align: top;
}

.mt-stato {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Lo stato non e' affidato al solo colore: la parola c'e' sempre
   (WCAG 1.4.1) e l'elenco sotto dice che cosa manca. */
.mt-stato--completa {
  background-color: #e0f2e6;
  color: #00812f;
}

.mt-stato--incompleta {
  background-color: #fdf0d5;
  color: #7a5200;
}

.mt-mancanti {
  margin: 0.375rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  color: #5a6772;
}

.mt-elenco-schede tr.e-incompleta {
  background-color: rgba(253, 240, 213, 0.35);
}

/* Il pulsante "Rimuovi" e' dentro un modulo, perche' cancellare
   qualcosa non puo' avvenire con una richiesta GET: basterebbe un
   collegamento visitato per sbaglio, o precaricato dal browser.
   Il modulo non deve pero' andare a capo come un blocco. */
.mt-azione-rimuovi {
  display: inline;
}

.mt-azione-rimuovi .btn-link {
  vertical-align: baseline;
}

/* ------------------------------------------------------------
   Elenco degli adempimenti in testa alla scheda del
   professionista: dati, curriculum, documento di identita'.
   ------------------------------------------------------------ */
.mt-adempimenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--mt-grigio-chiaro);
  border-radius: 4px;
}

.mt-adempimenti li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mt-adempimenti__segno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid currentcolor;
  font-size: 0.875rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.mt-adempimenti li.e-fatto {
  color: #00812f;
}

.mt-adempimenti li.e-fatto .mt-adempimenti__segno {
  background-color: #00812f;
  border-color: #00812f;
  color: #fff;
}

.mt-adempimenti li.e-da-fare {
  color: #7a5200;
}

.mt-adempimenti a {
  color: inherit;
}

/* Un riquadro che aspetta ancora qualcosa si distingue dal bordo,
   non dal solo colore del testo (WCAG 1.4.1). */
.mt-riquadro.e-da-fare {
  border-top-color: #d9a300;
}

.mt-riquadro__titolo .mt-stato {
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   Scelte alternative presentate come riquadri (fascia A / B)

   La casella di scelta resta quella nativa: e' lei a ricevere il
   fuoco, ad annunciarsi come radio e a rispondere alla tastiera.
   Il riquadro e' soltanto l'etichetta, ingrandita fino a coprire
   un bersaglio comodo — un elemento finto costruito con dei div
   avrebbe un aspetto migliore e un comportamento peggiore.
   ------------------------------------------------------------ */
.mt-scelta {
  border: 2px solid var(--mt-grigio-bordo);
  border-radius: 4px;
  padding: 1rem 1rem 1rem 2.75rem;
  margin-bottom: 1rem;
  height: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mt-scelta:hover {
  border-color: var(--mt-blu-primario);
}

/* Lo stato scelto non e' affidato al solo colore: c'e' il bordo
   piu' marcato e il pallino della casella nativa (WCAG 1.4.1). */
.mt-scelta.e-scelta {
  border-color: var(--mt-blu-primario);
  background-color: var(--mt-grigio-chiaro);
}

.mt-scelta:focus-within {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

.mt-scelta label {
  display: block;
  cursor: pointer;
}

.mt-scelta__titolo {
  display: block;
  font-family: var(--font-titoli, inherit);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--mt-blu-istituzionale);
  margin-bottom: 0.25rem;
}

.mt-scelta__nota {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Lettera dell'ordine di preferenza (A, B, C) accanto
   all'etichetta della tendina */
.mt-preferenza__ordine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background-color: var(--mt-blu-primario);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Stati della presa d'atto dei professionisti */
.mt-stato--attesa {
  background-color: #e5eef8;
  color: #17324d;
}

.mt-stato--negata {
  background-color: #fdecea;
  color: #b32626;
}

/* --------------------------------------------------------------------------
   Campo per la scelta di un file

   IL CAMPO RESTA QUELLO NATIVO. Un tentativo precedente lo nascondeva per
   vestire l'etichetta come un pulsante: piu' bello, ma dipendente per intero
   da questo foglio. Bastava una copia in cache, un ordine di caricamento
   diverso o una regola scavalcata perche' restasse un'etichetta trasparente
   su fondo chiaro — un comando invisibile su un modulo che senza quel comando
   non si puo' compilare. Il pulsante nativo lo disegna il browser: non lo si
   puo' intonare al resto del sito, e c'e' sempre. Su un controllo
   indispensabile la seconda proprieta' conta piu' della prima.

   Quello che resta a noi e' la cornice: un riquadro tratteggiato che isola il
   comando dal resto della scheda, e una nota sul formato.
   -------------------------------------------------------------------------- */
.mt-campo-file {
  padding: 1.25rem;
  border: 2px dashed #8a94a0;
  border-radius: 6px;
  background-color: #fff;
}

.mt-campo-file:focus-within {
  border-color: #0059b3;
  border-style: solid;
}

.mt-campo-file.e-errato {
  border-color: #b32626;
  background-color: #fdecea;
}

.mt-campo-file__etichetta {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--font-titoli, inherit);
  font-weight: 700;
  font-size: 1rem;
  color: #17324d;
}

/* Il campo nativo, ingrandito perche' il suo pulsante non sia un francobollo
   in mezzo alla pagina. La regola sul pulsante interno vale su Chrome, Edge e
   Safari; Firefox lo disegna a modo suo e la ignora senza danni. */
.mt-campo-file__campo {
  display: block;
  width: 100%;
  max-width: 34rem;
  padding: 0.75rem;
  border: 1px solid #5a6772;
  border-radius: 4px;
  background-color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.mt-campo-file__campo::file-selector-button {
  margin-right: 1rem;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 4px;
  background-color: #0059b3;
  color: #fff;
  font-family: var(--font-titoli, inherit);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.mt-campo-file__campo::file-selector-button:hover {
  background-color: #17324d;
}

.mt-campo-file__campo:focus-visible {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

.mt-campo-file__nota {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  color: #5a6772;
}

/* Marchio di obbligatorieta' accanto al titolo del documento */
.mt-obbligatorio {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background-color: #fdecea;
  color: #b32626;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.mt-campo-file__nome {
  flex: 1 1 12rem;
  font-weight: 600;
  color: var(--mt-blu-istituzionale);
  word-break: break-word;
}

.mt-campo-file__nome.e-vuoto {
  font-weight: 400;
  color: #5a6772;
}

.mt-campo-file__nota {
  flex: 1 1 100%;
  font-size: 0.875rem;
  color: #5a6772;
}


/* ------------------------------------------------------------
   Conto alla rovescia per l'apertura delle candidature

   SPECIFICITA' RADDOPPIATA, E NON PER VEZZO. tema-italia.css viene
   caricato DOPO questo foglio e contiene «.sezione-home { background-color:
   #fff }» e «.sezione-home h2 { color: ... }». A parita' di specificita'
   vince l'ultimo dichiarato, quindi una regola scritta qui come
   «.sezione-home--conto { ... }» verrebbe scavalcata e la sezione
   resterebbe bianca con il titolo blu — cioe' esattamente uguale a tutte le
   altre. Ripetendo la classe si sale di un livello e la regola tiene.
   L'alternativa sarebbe spostare tutto in tema-italia.css; questa e' la via
   che non richiede di toccare due fogli.
   ------------------------------------------------------------ */
.sezione-home.sezione-home--conto {
  background-color: var(--mt-blu-istituzionale);
  color: #fff;
  text-align: center;
}

.sezione-home--conto .sezione-home__contenuto {
  max-width: 52rem;
  margin-inline: auto;
}

.sezione-home.sezione-home--conto h2 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1.5rem;
}

.sezione-home.sezione-home--conto p {
  color: #e6eef7;
  margin-inline: auto;
}

.sezione-home--conto .occhiello {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-titoli, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* --- le caselle del conto ---------------------------------- */
.sezione-home--conto .mt-conto__cifre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  padding: 0;
}

.sezione-home--conto .mt-conto__gruppo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  padding: 1.25rem 1rem;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.sezione-home--conto .mt-conto__gruppo > span {
  display: block;
  font-family: var(--font-titoli, inherit);
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  /* Cifre a larghezza fissa: senza, il riquadro si allarga e si stringe a
     ogni secondo e l'occhio segue il movimento invece del numero. */
  font-variant-numeric: tabular-nums;
}

.sezione-home--conto .mt-conto__gruppo small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b9cde4;
}

/* --- pulsanti su fondo scuro -------------------------------- */
.sezione-home--conto .mt-conto__azione {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.sezione-home.sezione-home--conto .btn-primary {
  background-color: #fff;
  border-color: #fff;
  color: var(--mt-blu-istituzionale);
  font-weight: 700;
}

.sezione-home.sezione-home--conto .btn-primary:hover,
.sezione-home.sezione-home--conto .btn-primary:focus-visible {
  background-color: #e7ecf4;
  border-color: #e7ecf4;
  color: var(--mt-blu-istituzionale);
}

.sezione-home.sezione-home--conto .btn-outline-primary {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.sezione-home.sezione-home--conto .btn-outline-primary:hover,
.sezione-home.sezione-home--conto .btn-outline-primary:focus-visible {
  background-color: #fff;
  color: var(--mt-blu-istituzionale);
}

.sezione-home--conto a:focus-visible {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .sezione-home--conto .mt-conto__gruppo {
    min-width: 4.5rem;
    padding: 0.875rem 0.5rem;
  }
}

/* ------------------------------------------------------------
   Riquadro con il modulo da scaricare, firmare e ricaricare
   ------------------------------------------------------------ */
.mt-modulo-da-firmare {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--mt-blu-primario);
  background-color: var(--mt-grigio-chiaro);
  border-radius: 0 4px 4px 0;
}

.mt-modulo-da-firmare .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.75rem;
}

.mt-modulo-da-firmare__nota {
  display: inline-block;
  font-size: 0.875rem;
  color: #5a6772;
}

/* Comando di scarico nella tabella dei moduli generati */
.mt-modulo__azione {
  white-space: nowrap;
}

.mt-modulo__azione .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
}

.mt-modulo__azione .icon {
  fill: #fff;
  flex: 0 0 auto;
}

@media (max-width: 575px) {
  .mt-modulo__azione {
    white-space: normal;
  }
}

/* ------------------------------------------------------------
   Riquadri numerici del cruscotto di amministrazione
   ------------------------------------------------------------ */
.mt-dato {
  height: 100%;
  margin-bottom: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--mt-grigio-bordo);
  border-top: 4px solid var(--mt-blu-primario);
  border-radius: 4px;
  background-color: #fff;
}

.mt-dato__cifra {
  margin: 0;
  font-family: var(--font-titoli, inherit);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--mt-blu-istituzionale);
  font-variant-numeric: tabular-nums;
}

.mt-dato__titolo {
  margin: 0.5rem 0 0;
  font-weight: 700;
  color: var(--mt-blu-istituzionale);
}

.mt-dato__nota {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #5a6772;
}

/* ------------------------------------------------------------
   Recapiti con icona ed etichetta (scheda della Commissione)

   L'icona e' decorativa e marcata aria-hidden dal markup: accanto
   c'e' sempre la parola — Telefono, E-mail, PEC — perche' un
   simbolo da solo non dice a un lettore di schermo di che
   recapito si tratti, e nemmeno a chi non conosce quel simbolo.
   ------------------------------------------------------------ */
.mt-recapito {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}

.mt-recapito:last-child {
  margin-bottom: 0;
}

.mt-recapito .icon {
  flex: 0 0 auto;
  fill: var(--mt-blu-primario);
  align-self: center;
}

.mt-recapito__etichetta {
  flex: 0 0 5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6772;
}

/* Comandi di apertura dei documenti */
.mt-documento__azione .btn,
.mt-documenti-professionista .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  margin: 0 0.5rem 0.5rem 0;
}

.mt-documento__azione .icon,
.mt-documenti-professionista .icon {
  fill: #fff;
  flex: 0 0 auto;
}

.mt-documenti-professionista .mt-stato {
  margin-right: 0.5rem;
}

.mt-recapito__vuoto {
  color: #5a6772;
  font-style: italic;
}