/*
 * FindMe brillante — versione commentata.
 * Ogni proprietà è spiegata e ogni regola è separata.
 * Palette FindMe.pet: gradienti originali chiari, arancione e blu per le azioni.
 * Ordine, selettori, misure, media query e priorità restano invariati.
 * Le regole successive possono correggere o completare quelle precedenti.
 */

/* 1. Variabili condivise del tema. */
:root:root {
  /* Colore blu delle azioni, richiamabile con var(--blu). */
  --blu: #2563eb;
  /* Tonalità scura del blu usata dal tema. */
  --blu-scuro: #14213d;
  /* Variabile storica delle azioni principali: in questo tema contiene arancione. */
  --verde: #ff6b35;
  /* Variante scura della variabile storica verde: qui contiene arancione. */
  --verde-scuro: #f36b2c;
  /* Colore principale condiviso dei testi. */
  --testo: #1f2937;
  /* Colore condiviso dei testi secondari. */
  --grigio: #64748b;
  /* Colore di sfondo condiviso. */
  --sfondo: #f7fbff;
  /* Colore condiviso dei bordi. */
  --bordo: #e5e7eb;
  /* Larghezza massima condivisa dei contenitori. */
  --larghezza: 1240px;
  /* Ombra condivisa dei componenti. */
  --ombra: 0 14px 38px rgba(25,77,112,.08);
}

/* 2. Stili condivisi del sito. */
html body {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: linear-gradient(180deg,#fff 0%,#fffaf5 46%,#f7fbff 100%);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: var(--testo);
  /* Famiglie di caratteri e alternative disponibili sul dispositivo. */
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* 3. Stili condivisi del sito. */
html body main {
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
}

/* 4. Stili condivisi del sito. */
html body .contenitore {
  /* Larghezza del componente. */
  width: min(calc(100% - 48px),var(--larghezza));
}

/* 5. Testata del sito. */
html body .testata {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Spessore, stile e colore del bordo inferiore. */
  border-bottom: 1px solid #eef6ff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 3px 20px #14213d08;
}

/* 6. Testata del sito. */
html body .testata-interno {
  /* Limite minimo dell’altezza. */
  min-height: 118px;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 26px;
}

/* 7. Marchio FindMe. */
html body .marchio {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
  flex: 0 0 174px;
  /* Larghezza del componente. */
  width: 174px;
  /* Altezza del componente. */
  height: 106px;
  /* Limite massimo della larghezza. */
  max-width: 174px;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: url("assets/brand/findme-logo-numi.png") center/contain no-repeat;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 0;
}

/* 8. Marchio FindMe. */
/* Elemento decorativo generato dal CSS. */
html body .marchio>span,
html body .marchio::before,
html body .marchio::after {
  /* Modalità di impaginazione o visibilità del componente. */
  display: none;
}

/* 9. Menu di navigazione. */
html body .navigazione {
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 4px;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
}

/* 10. Menu di navigazione. */
html body .navigazione>a,
html body .nav-gruppo>summary {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Spessore delle lettere. */
  font-weight: 700;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .91rem;
  /* Spazio interno tra contenuto e bordo. */
  padding: 11px 13px;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
}

/* 11. Menu di navigazione. */
/* Stato al passaggio del puntatore. */
html body .navigazione>a:hover,
html body .nav-gruppo>summary:hover,
html body .navigazione a[aria-current="page"] {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #1d4ed8;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
}

/* 12. Menu di navigazione. */
html body .navigazione .nav-pubblica {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: linear-gradient(135deg,#ff6b35,#ff8a3d);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px 18px;
  /* Spazio esterno a sinistra. */
  margin-left: 10px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 6px 18px #ff6b3524;
}

/* 13. Menu di navigazione. */
/* Stato al passaggio del puntatore. */
html body .navigazione .nav-pubblica:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f36b2c;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
}

/* 14. Menu di navigazione. */
html body .nav-tendina {
  /* Colore dei bordi. */
  border-color: #eef6ff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 16px 48px #14213d20;
  /* Arrotondamento degli angoli. */
  border-radius: 16px;
}

/* 15. Menu di navigazione. */
/* Stato al passaggio del puntatore. */
html body .nav-tendina a:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #1d4ed8;
}

/* 16. Menu di navigazione. */
html body .nav-logout button {
  /* Colore dei bordi. */
  border-color: #eef6ff;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 17. Pulsante del menu su smartphone. */
html body .menu-pulsante {
  /* Limite minimo dell’altezza. */
  min-height: 46px;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 10px 15px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #2563eb;
  /* Colore dei bordi. */
  border-color: #dbeafe;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
}

/* 18. Indicatore dell’ambiente di prova. */
html body .ambiente-test {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Colore dei bordi. */
  border-color: #eef6ff;
}

/* 19. Indicatore dell’ambiente di prova. */
html body .ambiente-test .contenitore {
  /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
  padding-block: 9px;
}

/* 20. Indicatore dell’ambiente di prova. */
html body .ambiente-test i {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #d66626;
}

/* 21. Indicatore dell’ambiente di prova. */
html body .ambiente-test a {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 22. Introduzione della home. */
html body .hero {
  /* Sistema di posizionamento del componente. */
  position: relative;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 12% 18%,rgba(255,209,102,.40),transparent 28%),
    radial-gradient(circle at 88% 30%,rgba(37,99,235,.10),transparent 24%),
    linear-gradient(135deg,#fff9f2 0%,#fff 52%,#eef7ff 100%);
  /* Spazio interno tra contenuto e bordo. */
  padding: 52px 0 56px;
  /* Gestione del contenuto che supera i limiti del riquadro. */
  overflow: hidden;
}

/* 23. Introduzione della home. */
html body .hero-interno {
  /* Modalità di impaginazione o visibilità del componente. */
  display: grid;
  /* Numero e dimensioni delle colonne della griglia. */
  grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr);
  /* Limite minimo dell’altezza. */
  min-height: 0;
  /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
  padding-block: 0;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 42px;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
}

/* 24. Introduzione della home. */
html body .hero h1 {
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: clamp(2.8rem,4.3vw,4.6rem);
  /* Spessore delle lettere. */
  font-weight: 850;
  /* Altezza delle righe di testo. */
  line-height: 1.06;
  /* Spazio aggiuntivo tra le lettere. */
  letter-spacing: -.055em;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 22px 0;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Limite massimo della larghezza. */
  max-width: 590px;
}

/* 25. Introduzione della home. */
html body .hero h1 span {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #ff6b35;
}

/* 26. Stili condivisi del sito. */
html body .etichetta {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-flex;
  /* Spazio interno tra contenuto e bordo. */
  padding: 8px 12px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #efd3b3;
  /* Arrotondamento degli angoli. */
  border-radius: 24px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff8ed;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #7f4719;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .68rem;
  /* Spazio aggiuntivo tra le lettere. */
  letter-spacing: .11em;
  /* Spessore delle lettere. */
  font-weight: 800;
}

/* 27. Introduzione della home. */
html body .hero-descrizione {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Limite massimo della larghezza. */
  max-width: 500px;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 1.05rem;
  /* Altezza delle righe di testo. */
  line-height: 1.75;
}

/* 28. Introduzione della home. */
html body .hero-azioni {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Permette o impedisce ai figli Flexbox di andare a capo. */
  flex-wrap: wrap;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
  /* Spazio esterno sopra al componente. */
  margin-top: 26px;
}

/* 29. Introduzione della home. */
html body .hero-visual {
  /* Sistema di posizionamento del componente. */
  position: relative;
  /* Limite minimo dell’altezza. */
  min-height: 0;
  /* Trasformazione visiva, ad esempio spostamento o rotazione. */
  transform: none;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Spessore, stile e colore del bordo. */
  border: 7px solid #ffffffd9;
  /* Arrotondamento degli angoli. */
  border-radius: 30px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 24px 56px #4755691f;
  /* Gestione del contenuto che supera i limiti del riquadro. */
  overflow: hidden;
}

/* 30. Introduzione della home. */
html body .hero-visual img {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Larghezza del componente. */
  width: 100%;
  /* Altezza del componente. */
  height: auto;
  /* Limite minimo dell’altezza. */
  min-height: 0;
  /* Limite massimo dell’altezza. */
  max-height: none;
  /* Rapporto tra larghezza e altezza del riquadro. */
  aspect-ratio: 16/9;
  /* Modo in cui l’immagine entra nel riquadro: contain la mostra intera, cover può ritagliarla. */
  object-fit: contain;
  /* Posizione dell’immagine all’interno del riquadro. */
  object-position: center;
}

/* 31. Introduzione della home. */
html body .fm-hero-caption {
  /* Spazio interno tra contenuto e bordo. */
  padding: 13px 16px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .83rem;
  /* Spessore delle lettere. */
  font-weight: 700;
}

/* 32. Collegamenti alle specie animali. */
html body .fm-specie {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Spessore, stile e colore del bordo inferiore. */
  border-bottom: 1px solid #eef6ff;
}

/* 33. Collegamenti alle specie animali. */
html body .fm-specie .contenitore {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Permette o impedisce ai figli Flexbox di andare a capo. */
  flex-wrap: wrap;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
  /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
  padding-block: 18px;
}

/* 34. Collegamenti alle specie animali. */
html body .fm-specie-label {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #64748b;
  /* Spessore delle lettere. */
  font-weight: 650;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .85rem;
  /* Spazio esterno a destra. */
  margin-right: 8px;
}

/* 35. Collegamenti alle specie animali. */
html body .fm-specie a {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-flex;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 7px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 8px 13px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 24px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Decorazione del testo, ad esempio la sottolineatura. */
  text-decoration: none;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .84rem;
  /* Spessore delle lettere. */
  font-weight: 650;
}

/* 36. Collegamenti alle specie animali. */
/* Stato al passaggio del puntatore. */
html body .fm-specie a:hover {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Colore dei bordi. */
  border-color: #dbeafe;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
}

/* 37. Pulsanti condivisi. */
html body .pulsante {
  /* Limite minimo dell’altezza. */
  min-height: 48px;
  /* Arrotondamento degli angoli. */
  border-radius: 13px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 13px 21px;
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Proprietà animate e durata del passaggio tra gli stati. */
  transition: box-shadow .18s,background .18s,transform .18s;
}

/* 38. Pulsanti condivisi. */
/* Stato al passaggio del puntatore. */
html body .pulsante:hover {
  /* Trasformazione visiva, ad esempio spostamento o rotazione. */
  transform: translateY(-2px);
}

/* 39. Pulsanti condivisi. */
html body .pulsante-verde {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: linear-gradient(135deg,#ff6b35,#ff8a3d);
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 6px 20px #ff6b3520;
}

/* 40. Pulsanti condivisi. */
/* Stato al passaggio del puntatore. */
html body .pulsante-verde:hover {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f36b2c;
}

/* 41. Pulsanti condivisi. */
html body .pulsante-blu {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: linear-gradient(135deg,#2563eb,#3b82f6);
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 6px 20px #2563eb1c;
}

/* 42. Pulsanti condivisi. */
/* Stato al passaggio del puntatore. */
html body .pulsante-blu:hover {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #1d4ed8;
}

/* 43. Introduzione della home. */
html body .pulsante-chiaro,
html body .pulsante-bordo,
html body .pulsante-secondario,
html body .hero .pulsante-chiaro {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: none;
}

/* 44. Pulsanti condivisi. */
/* Stato al passaggio del puntatore. */
html body .pulsante-chiaro:hover,
html body .pulsante-bordo:hover,
html body .pulsante-secondario:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 45. Stili condivisi del sito. */
html body button:disabled {
  /* Aspetto del puntatore del mouse. */
  cursor: not-allowed;
  /* Opacità dell’intero componente, da zero a uno. */
  opacity: .55;
  /* Trasformazione visiva, ad esempio spostamento o rotazione. */
  transform: none;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: none;
}

/* 46. Ricerca degli annunci. */
html body .ricerca-area {
  /* Spazio esterno sopra al componente. */
  margin-top: 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 28px 0 0;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: transparent;
}

/* 47. Ricerca degli annunci. */
html body .ricerca-box {
  /* Spazio interno tra contenuto e bordo. */
  padding: 26px 30px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 22px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 12px 38px #47556910;
}

/* 48. Ricerca degli annunci. */
html body .ricerca-box h2 {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 1.08rem;
  /* Spessore delle lettere. */
  font-weight: 750;
}

/* 49. Ricerca degli annunci. */
html body .ricerca-form {
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
}

/* 50. Ricerca degli annunci. */
html body .ricerca-form input {
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore dei bordi. */
  border-color: #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Limite minimo dell’altezza. */
  min-height: 48px;
}

/* 51. Sezioni condivise delle pagine. */
html body .sezione {
  /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
  padding-block: 46px;
}

/* 52. Sezioni condivise delle pagine. */
html body .sezione-titolo {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: clamp(1.5rem,2.5vw,2.1rem);
  /* Spessore delle lettere. */
  font-weight: 800;
  /* Spazio aggiuntivo tra le lettere. */
  letter-spacing: -.04em;
}

/* 53. Sezioni condivise delle pagine. */
html body .sezione-intro {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 54. Riquadro novità della home. */
html body .novita-home {
  /* Spazio interno sotto al contenuto. */
  padding-bottom: 8px;
}

/* 55. Area personale e moduli dell’account. */
html body .novita-account {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #475569;
  /* Arrotondamento degli angoli. */
  border-radius: 26px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 15px 36px #4755691c;
  /* Spazio interno tra contenuto e bordo. */
  padding: 32px 38px;
}

/* 56. Area personale e moduli dell’account. */
html body .novita-account h2 {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 57. Area personale e moduli dell’account. */
html body .novita-account p {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 58. Riquadro novità della home. */
html body .novita-badge {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #ffdcaa;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #663712;
  /* Arrotondamento degli angoli. */
  border-radius: 8px;
}

/* 59. Riquadro novità della home. */
html body .novita-azioni>a:not(.pulsante) {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
}

/* 60. Scorciatoie della home. */
html body .scorciatoie {
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 16px;
  /* Spazio esterno sopra al componente. */
  margin-top: 22px;
}

/* 61. Scorciatoie della home. */
html body .scorciatoie a {
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 19px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 8px 28px #47556910;
}

/* 62. Scorciatoie della home. */
html body .scorciatoie a:nth-child(2) {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
}

/* 63. Scorciatoie della home. */
html body .scorciatoie a:nth-child(3) {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff7ec;
}

/* 64. Scorciatoie della home. */
html body .scorciatoie a:nth-child(4) {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #effaf4;
}

/* 65. Scorciatoie della home. */
/* Stato al passaggio del puntatore. */
html body .scorciatoie a:hover {
  /* Colore dei bordi. */
  border-color: #dbeafe;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 14px 32px #4755691a;
}

/* 66. Scorciatoie della home. */
html body .scorciatoie small {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 67. Griglia dei miei annunci. */
html body .griglia-annunci,
html body .griglia-miei-annunci {
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 24px;
}

/* 68. Schede dei miei annunci. */
html body .scheda,
html body .mio-annuncio {
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #e5e7eb;
  /* Arrotondamento degli angoli. */
  border-radius: 22px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 10px 32px #14213d10;
  /* Gestione del contenuto che supera i limiti del riquadro. */
  overflow: hidden;
}

/* 69. Schede dei miei annunci. */
/* Stato al passaggio del puntatore. */
html body .scheda:hover,
html body .mio-annuncio:hover {
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 16px 40px #14213d20;
}

/* 70. Schede degli annunci. */
html body .scheda-immagine {
  /* Altezza del componente. */
  height: 210px;
  /* Limite minimo dell’altezza. */
  min-height: 0;
  /* Gestione del contenuto che supera i limiti del riquadro. */
  overflow: hidden;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Spazio interno tra contenuto e bordo. */
  padding: 0;
}

/* 71. Schede degli annunci. */
html body .scheda-immagine img {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Larghezza del componente. */
  width: 100%;
  /* Altezza del componente. */
  height: 100%;
  /* Limite minimo dell’altezza. */
  min-height: 0;
  /* Modo in cui l’immagine entra nel riquadro: contain la mostra intera, cover può ritagliarla. */
  object-fit: cover;
}

/* 72. Schede degli annunci. */
html body .scheda-corpo {
  /* Spazio interno tra contenuto e bordo. */
  padding: 22px;
}

/* 73. Schede degli annunci. */
html body .scheda-etichetta {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-block;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Spazio interno tra contenuto e bordo. */
  padding: 4px 10px;
  /* Arrotondamento degli angoli. */
  border-radius: 16px;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .73rem;
}

/* 74. Schede degli annunci. */
html body .scheda-corpo h3 {
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 1.3rem;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 12px 0 8px;
}

/* 75. Schede degli annunci. */
html body .scheda-corpo a {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Spessore delle lettere. */
  font-weight: 750;
}

/* 76. Filtri degli annunci. */
html body .filtro {
  /* Colore dei bordi. */
  border-color: #eef6ff;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Arrotondamento degli angoli. */
  border-radius: 24px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 10px 18px;
  /* Limite minimo dell’altezza. */
  min-height: 44px;
}

/* 77. Filtri degli annunci. */
html body .filtro[aria-current="true"],
html body .filtro[aria-pressed="true"] {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore dei bordi. */
  border-color: #2563eb;
}

/* 78. Sezione Come funziona. */
html body .come-funziona {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
}

/* 79. Passaggi della sezione Come funziona. */
html body .passaggio {
  /* Arrotondamento degli angoli. */
  border-radius: 22px;
  /* Colore dei bordi. */
  border-color: #eef6ff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 10px 32px #47556912;
  /* Spazio interno tra contenuto e bordo. */
  padding: 28px;
}

/* 80. Passaggi della sezione Come funziona. */
html body .passaggio-numero {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 15px;
}

/* 81. Passaggi della sezione Come funziona. */
html body .passaggio:nth-child(2) .passaggio-numero {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #ffebd7;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #8b4312;
}

/* 82. Passaggi della sezione Come funziona. */
html body .passaggio:nth-child(3) .passaggio-numero {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #e2f6e9;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #216741;
}

/* 83. Banda di invito della home. */
html body .invito {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
  padding-block: 48px;
}

/* 84. Banda di invito della home. */
html body .invito h2 {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 85. Banda di invito della home. */
html body .invito p {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 86. Introduzione delle pagine. */
html body .pagina-intro,
html body .pagina-intro-centrata {
  /* Sistema di posizionamento del componente. */
  position: relative;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Spazio interno tra contenuto e bordo. */
  padding: 42px 0;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Spessore, stile e colore del bordo inferiore. */
  border-bottom: 1px solid #eef6ff;
  /* Gestione del contenuto che supera i limiti del riquadro. */
  overflow: hidden;
}

/* 87. Scheda pubblica dell’annuncio. */
html body .pagina-intro h1,
html body .wallet-page .pagina-intro h1 {
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: clamp(1.8rem,3.5vw,2.8rem);
  /* Altezza delle righe di testo. */
  line-height: 1.14;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
}

/* 88. Introduzione delle pagine. */
html body .pagina-intro p,
html body .pagina-intro-centrata p {
  /* Spazio esterno sui lati dell’asse di scrittura. */
  margin-inline: auto;
  /* Limite massimo della larghezza. */
  max-width: 750px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 89. Introduzione delle pagine. */
html body .pagina-intro .pagina-occhiello {
  /* Colore del testo o di currentColor, usato anche da alcune icone. La priorità !important prevale sulle dichiarazioni normali. */
  color: #96501e !important;
  /* Spazio aggiuntivo tra le lettere. */
  letter-spacing: .12em;
}

/* 90. Introduzione delle pagine. */
html body .pagina-intro .avviso-demo {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff9f0;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #efdbc3;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #875321;
}

/* 91. Area personale e moduli dell’account. */
html body .account-pannello,
html body .pannello-notifiche,
html body .pannello-prova,
html body .mappa-pannello,
html body .modulo-inserzione fieldset,
html body .moderazione-scheda,
html body .scheda-dati,
html body .scheda-contatto,
html body .scheda-condivisione,
html body .prova-card {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 22px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 12px 36px #47556914;
}

/* 92. Area personale e moduli dell’account. */
html body .account-pannello {
  /* Spessore, stile e colore del bordo superiore. */
  border-top: 4px solid #475569;
}

/* 93. Area personale e moduli dell’account. */
html body .account-pannello h1,
html body .account-pannello h2,
html body .modulo-inserzione legend {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 94. Area personale e moduli dell’account. */
html body .account-form input,
html body .account-form select,
html body .modulo-inserzione input,
html body .modulo-inserzione select,
html body .modulo-inserzione textarea {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore dei bordi. */
  border-color: #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 11px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 95. Area personale e moduli dell’account. */
/* Stato di focus per la navigazione da tastiera. */
html body .account-form input:focus,
html body .modulo-inserzione input:focus,
html body .modulo-inserzione select:focus,
html body .modulo-inserzione textarea:focus {
  /* Colore dei bordi. */
  border-color: #475569;
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #eef6ff;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 1px;
}

/* 96. Area personale e moduli dell’account. */
html body .profilo-novita,
html body .pubblicazione-account,
html body .password-criteri,
html body .riquadro-attivazione {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Colore dei bordi. */
  border-color: #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 17px;
}

/* 97. Area personale e moduli dell’account. */
html body .account-errore,
html body .esito-modulo.errore {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff0ef;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #9b2925;
  /* Colore dei bordi. */
  border-color: #efc4c0;
}

/* 98. Area personale e moduli dell’account. */
html body .account-successo,
html body .esito-modulo.successo,
html body .moderazione-esito {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eaf8ef;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #21653e;
  /* Colore dei bordi. */
  border-color: #bee5cc;
}

/* 99. Area personale e moduli dell’account. */
html body .account-dati {
  /* Spazio interno tra contenuto e bordo. */
  padding: 20px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Arrotondamento degli angoli. */
  border-radius: 14px;
}

/* 100. Area personale e moduli dell’account. */
html body .account-dati dt {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 101. Area personale e moduli dell’account. */
html body .account-dati dd {
  /* Permette di spezzare parole o indirizzi troppo lunghi. */
  overflow-wrap: anywhere;
}

/* 102. Mappa degli annunci. */
html body .mappa-elenco li {
  /* Colore dei bordi. */
  border-color: #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 16px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 6px 20px #4755690b;
}

/* 103. Scheda pubblica dell’annuncio. */
html body .wallet-card {
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 24px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 20px 60px #4755691a;
}

/* 104. Scheda pubblica dell’annuncio. */
html body .wallet-card-header {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
}

/* 105. Badge di allarme della scheda annuncio. */
html body .wallet-alert-label {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff0dd;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #894410;
}

/* 106. Scheda pubblica dell’annuncio. */
html body .wallet-seen {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: linear-gradient(135deg,#ff6b35,#ff8a3d);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 8px 22px #ff6b3525;
}

/* 107. Scheda pubblica dell’annuncio. */
/* Stato al passaggio del puntatore. */
html body .wallet-seen:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #a43b07;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
}

/* 108. Pagina del punto di smarrimento. */
html body .wallet-location {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore dei bordi. */
  border-color: #eef6ff;
}

/* 109. Scheda pubblica dell’annuncio. */
html body .wallet-card-footer {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 110. Guida FindMe. */
html body .fm-guide-launcher,
html body .fm-guide-heading {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
}

/* 111. Guida FindMe. */
html body .fm-guide-launcher {
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 8px 26px #47556940;
}

/* 112. Guida FindMe. */
html body .fm-guide-panel {
  /* Colore dei bordi. */
  border-color: #dbeafe;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 18px 55px #14213d30;
}

/* 113. Guida FindMe. */
html body .fm-guide-message {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
}

/* 114. Guida FindMe. */
/* Stato al passaggio del puntatore. */
html body .fm-guide-actions button:hover,
html body .fm-guide-actions a:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff4e8;
  /* Colore dei bordi. */
  border-color: #daa67a;
}

/* 115. Piè di pagina. */
html body .piede {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #14213d;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #eef6ff;
}

/* 116. Piè di pagina. */
html body .piede-interno p {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #dbeafe;
}

/* 117. Marchio FindMe. */
html body .piede-marchio span {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #ffc38a;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (min-width:1001px) {

  /* 118. Menu di navigazione. */
  html body .navigazione {
    /* Modalità di impaginazione o visibilità del componente. */
    display: flex;
  }

  /* 119. Pulsante del menu su smartphone. */
  html body .menu-pulsante {
    /* Modalità di impaginazione o visibilità del componente. */
    display: none;
  }

}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width:1000px) {

  /* 120. Testata del sito. */
  html body .testata-interno {
    /* Limite minimo dell’altezza. */
    min-height: 96px;
    /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
    padding-block: 6px;
    /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
    gap: 10px;
  }

  /* 121. Marchio FindMe. */
  html body .marchio {
    /* Dimensione iniziale del figlio lungo l’asse principale Flexbox. */
    flex-basis: 145px;
    /* Larghezza del componente. */
    width: 145px;
    /* Limite massimo della larghezza. */
    max-width: 145px;
    /* Altezza del componente. */
    height: 88px;
  }

  /* 122. Pulsante del menu su smartphone. */
  html body .menu-pulsante {
    /* Modalità di impaginazione o visibilità del componente. */
    display: block;
    /* Spazio esterno a sinistra. */
    margin-left: auto;
  }

  /* 123. Menu di navigazione. */
  html body .navigazione {
    /* Modalità di impaginazione o visibilità del componente. */
    display: none;
    /* Larghezza del componente. */
    width: 100%;
    /* Sistema di posizionamento del componente. */
    position: static;
    /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
    align-items: stretch;
    /* Spazio interno tra contenuto e bordo. */
    padding: 12px 0;
    /* Direzione di disposizione dei figli Flexbox. */
    flex-direction: column;
  }

  /* 124. Menu di navigazione. */
  html body .navigazione.aperta {
    /* Modalità di impaginazione o visibilità del componente. */
    display: flex;
  }

  /* 125. Menu di navigazione. */
  html body .navigazione>a,
  html body .nav-gruppo>summary {
    /* Limite minimo dell’altezza. */
    min-height: 44px;
    /* Spazio interno tra contenuto e bordo. */
    padding: 12px 14px;
  }

  /* 126. Menu di navigazione. */
  html body .navigazione .nav-pubblica {
    /* Spazio esterno a sinistra. */
    margin-left: 0;
    /* Allineamento del testo e dei contenuti inline. */
    text-align: center;
  }

  /* 127. Menu di navigazione. */
  html body .nav-tendina {
    /* Sistema di posizionamento del componente. */
    position: static;
    /* Larghezza del componente. */
    width: 100%;
    /* Sfondo del componente: colore, immagine o gradiente. */
    background: #f8fafc;
    /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
    box-shadow: none;
  }

  /* 128. Introduzione della home. */
  html body .hero-interno {
    /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
    gap: 26px;
  }

  /* 129. Introduzione della home. */
  html body .hero h1 {
    /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
    font-size: clamp(2.5rem,5.5vw,3.8rem);
  }

  /* 130. Introduzione della home. */
  html body .hero-azioni .pulsante {
    /* Spazio interno tra contenuto e bordo. */
    padding: 12px 16px;
  }

  /* 131. Area personale e moduli dell’account. */
  html body .novita-account {
    /* Spazio interno tra contenuto e bordo. */
    padding: 28px;
  }

}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width:700px) {

  /* 132. Stili condivisi del sito. */
  html body .contenitore {
    /* Larghezza del componente. */
    width: calc(100% - 32px);
  }

  /* 133. Introduzione della home. */
  html body .hero {
    /* Spazio interno tra contenuto e bordo. */
    padding: 32px 0 34px;
  }

  /* 134. Introduzione della home. */
  html body .hero-interno {
    /* Numero e dimensioni delle colonne della griglia. */
    grid-template-columns: minmax(0,1fr);
    /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
    gap: 24px;
  }

  /* 135. Introduzione della home. */
  html body .hero h1 {
    /* Spazio esterno; auto può centrare il componente. */
    margin: 18px 0;
    /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
    font-size: clamp(2.5rem,9.5vw,3.5rem);
  }

  /* 136. Introduzione della home. */
  html body .hero-descrizione {
    /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
    font-size: 1rem;
  }

  /* 137. Introduzione della home. */
  html body .hero-azioni {
    /* Spazio esterno sopra al componente. */
    margin-top: 20px;
  }

  /* 138. Introduzione della home. */
  html body .hero-azioni .pulsante {
    /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
    flex: 1 1 180px;
  }

  /* 139. Introduzione della home. */
  html body .hero-visual {
    /* Spessore dei bordi. */
    border-width: 5px;
    /* Arrotondamento degli angoli. */
    border-radius: 22px;
  }

  /* 140. Introduzione della home. */
  html body .hero-visual img {
    /* Limite minimo dell’altezza. */
    min-height: 0;
    /* Limite massimo dell’altezza. */
    max-height: none;
    /* Rapporto tra larghezza e altezza del riquadro. */
    aspect-ratio: 16/9;
    /* Modo in cui l’immagine entra nel riquadro: contain la mostra intera, cover può ritagliarla. */
    object-fit: contain;
  }

  /* 141. Collegamenti alle specie animali. */
  html body .fm-specie .contenitore {
    /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
    gap: 8px;
    /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
    padding-block: 16px;
  }

  /* 142. Collegamenti alle specie animali. */
  html body .fm-specie-label {
    /* Larghezza del componente. */
    width: 100%;
    /* Allineamento del testo e dei contenuti inline. */
    text-align: center;
    /* Spazio esterno; auto può centrare il componente. */
    margin: 0 0 4px;
  }

  /* 143. Collegamenti alle specie animali. */
  html body .fm-specie a {
    /* Spazio interno tra contenuto e bordo. */
    padding: 7px 10px;
    /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
    font-size: .78rem;
  }

  /* 144. Ricerca degli annunci. */
  html body .ricerca-box {
    /* Spazio interno tra contenuto e bordo. */
    padding: 22px;
  }

  /* 145. Ricerca degli annunci. */
  html body .ricerca-form {
    /* Numero e dimensioni delle colonne della griglia. */
    grid-template-columns: minmax(0,1fr);
  }

  /* 146. Sezioni condivise delle pagine. */
  html body .sezione {
    /* Spazio interno sull’asse verticale nella scrittura orizzontale. */
    padding-block: 32px;
  }

  /* 147. Area personale e moduli dell’account. */
  html body .novita-account {
    /* Spazio interno tra contenuto e bordo. */
    padding: 25px;
  }

  /* 148. Scorciatoie della home. */
  html body .scorciatoie {
    /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
    gap: 12px;
  }

  /* 149. Scorciatoie della home. */
  html body .scorciatoie a {
    /* Spazio interno tra contenuto e bordo. */
    padding: 18px;
  }

  /* 150. Griglia dei miei annunci. */
  html body .griglia-annunci,
  html body .griglia-miei-annunci {
    /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
    gap: 20px;
  }

  /* 151. Introduzione delle pagine. */
  html body .pagina-intro,
  html body .pagina-intro-centrata {
    /* Spazio interno tra contenuto e bordo. */
    padding: 30px 0;
  }

  /* 152. Introduzione delle pagine. */
  html body .pagina-intro h1 {
    /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
    font-size: clamp(1.65rem,6.5vw,2.4rem);
  }

  /* 153. Area personale e moduli dell’account. */
  html body .account-pannello,
  html body .pannello-notifiche,
  html body .pannello-prova {
    /* Spazio interno tra contenuto e bordo. */
    padding: 22px;
  }

  /* 154. Scheda pubblica dell’annuncio. */
  html body .wallet-page .scheda-animale {
    /* Larghezza del componente. */
    width: calc(100% - 32px);
  }

}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (prefers-reduced-motion:reduce) {

  /* 155. Pulsanti condivisi. */
  html body .pulsante,
  html body .scheda {
    /* Proprietà animate e durata del passaggio tra gli stati. */
    transition: none;
  }

  /* 156. Pulsanti condivisi. */
  /* Stato al passaggio del puntatore. */
  html body .pulsante:hover {
    /* Trasformazione visiva, ad esempio spostamento o rotazione. */
    transform: none;
  }

}

/* 157. Stili condivisi del sito. */
html body .fm-preview-note {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 9px 16px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff3d8;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #745013;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 12px;
}

/* 158. Guida FindMe. */
html body .fm-guide {
  /* Distanza dal riferimento inferiore per un elemento posizionato. */
  bottom: max(12px,env(safe-area-inset-bottom));
  /* Distanza dal riferimento destro per un elemento posizionato. */
  right: max(12px,env(safe-area-inset-right));
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
}

/* 159. Guida FindMe. */
html body .fm-guide-launcher {
  /* Limite minimo dell’altezza. */
  min-height: 44px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 9px 13px;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 7px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(247,251,255,.88);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid rgba(104,148,180,.35);
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 3px 12px #14213d14;
  /* Effetto sullo sfondo visibile dietro al componente, con prefisso WebKit. */
  -webkit-backdrop-filter: blur(12px);
  /* Effetto sullo sfondo visibile dietro al componente semitrasparente. */
  backdrop-filter: blur(12px);
}

/* 160. Guida FindMe. */
/* Stato al passaggio del puntatore. */
html body .fm-guide-launcher:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(237,246,255,.96);
}

/* 161. Guida FindMe. */
html body .fm-guide-panel {
  /* Larghezza del componente. */
  width: 310px;
  /* Limite massimo della larghezza. */
  max-width: calc(100vw - 24px);
  /* Limite massimo dell’altezza. */
  max-height: min(480px,60dvh);
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(250,252,255,.87);
  /* Colore dei bordi. */
  border-color: rgba(146,175,197,.4);
  /* Arrotondamento degli angoli. */
  border-radius: 18px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 8px 24px #14213d1f;
  /* Effetto sullo sfondo visibile dietro al componente, con prefisso WebKit. */
  -webkit-backdrop-filter: blur(16px);
  /* Effetto sullo sfondo visibile dietro al componente semitrasparente. */
  backdrop-filter: blur(16px);
}

/* 162. Guida FindMe. */
html body .fm-guide-heading {
  /* Spazio interno tra contenuto e bordo. */
  padding: 10px 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(230,242,253,.8);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 163. Guida FindMe. */
html body .fm-guide-heading strong {
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 15px;
}

/* 164. Guida FindMe. */
html body .fm-guide-heading small {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 12px;
}

/* 165. Guida FindMe. */
html body .fm-guide-close {
  /* Larghezza del componente. */
  width: 44px;
  /* Altezza del componente. */
  height: 44px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255,255,255,.5);
  /* Colore dei bordi. */
  border-color: rgba(104,148,180,.3);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 166. Guida FindMe. */
html body .fm-guide-body {
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px;
  /* Limite minimo dell’altezza. */
  min-height: 0;
}

/* 167. Guida FindMe. */
html body .fm-guide-message {
  /* Sistema di posizionamento del componente. */
  position: relative;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px 13px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 0 15px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(231,242,254,.9);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid rgba(104,148,180,.2);
  /* Arrotondamento degli angoli. */
  border-radius: 14px 14px 14px 3px;
  /* Altezza delle righe di testo. */
  line-height: 1.5;
}

/* 168. Guida FindMe. */
/* Elemento decorativo generato dal CSS. */
html body .fm-guide-message::after {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "";
  /* Sistema di posizionamento del componente. */
  position: absolute;
  /* Distanza dal riferimento inferiore per un elemento posizionato. */
  bottom: -6px;
  /* Distanza dal riferimento sinistro per un elemento posizionato. */
  left: 12px;
  /* Larghezza del componente. */
  width: 10px;
  /* Altezza del componente. */
  height: 10px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Trasformazione visiva, ad esempio spostamento o rotazione. */
  transform: rotate(45deg);
  /* Spessore, stile e colore del bordo destro. */
  border-right: 1px solid rgba(104,148,180,.2);
  /* Spessore, stile e colore del bordo inferiore. */
  border-bottom: 1px solid rgba(104,148,180,.2);
  /* Controlla se il componente può intercettare clic o tocchi. */
  pointer-events: none;
}

/* 169. Guida FindMe. */
html body .fm-guide-actions {
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 7px;
}

/* 170. Guida FindMe. */
html body .fm-guide-actions button,
html body .fm-guide-actions a {
  /* Sistema di posizionamento del componente. */
  position: relative;
  /* Limite minimo dell’altezza. */
  min-height: 44px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px 34px 10px 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255,245,193,.9);
  /* Spessore, stile e colore del bordo. */
  border: 1px solid rgba(145,125,50,.22);
  /* Arrotondamento degli angoli. */
  border-radius: 4px 5px 13px 5px;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 3px 6px #14213d0a;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Gestione degli spazi e degli a capo nel testo. */
  white-space: normal;
  /* Permette di spezzare parole o indirizzi troppo lunghi. */
  overflow-wrap: anywhere;
}

/* 171. Guida FindMe. */
/* Elemento decorativo generato dal CSS. */
html body .fm-guide-actions button::before,
html body .fm-guide-actions a::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "";
  /* Sistema di posizionamento del componente. */
  position: absolute;
  /* Distanza dal riferimento superiore per un elemento posizionato. */
  top: -3px;
  /* Distanza dal riferimento sinistro per un elemento posizionato. */
  left: 16px;
  /* Larghezza del componente. */
  width: 23px;
  /* Altezza del componente. */
  height: 7px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255,255,255,.6);
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #fff8;
  /* Trasformazione visiva, ad esempio spostamento o rotazione. */
  transform: rotate(-5deg);
  /* Controlla se il componente può intercettare clic o tocchi. */
  pointer-events: none;
}

/* 172. Guida FindMe. */
/* Elemento decorativo generato dal CSS. */
html body .fm-guide-actions button::after,
html body .fm-guide-actions a::after {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "↗";
  /* Sistema di posizionamento del componente. */
  position: absolute;
  /* Distanza dal riferimento destro per un elemento posizionato. */
  right: 11px;
  /* Distanza dal riferimento superiore per un elemento posizionato. */
  top: 50%;
  /* Trasformazione visiva, ad esempio spostamento o rotazione. */
  transform: translateY(-50%);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 17px;
  /* Controlla se il componente può intercettare clic o tocchi. */
  pointer-events: none;
}

/* 173. Guida FindMe. */
html body .fm-guide-actions :nth-child(3n+2) {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(221,243,235,.9);
  /* Colore dei bordi. */
  border-color: rgba(82,133,117,.22);
}

/* 174. Guida FindMe. */
html body .fm-guide-actions :nth-child(3n+3) {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(253,229,218,.9);
  /* Colore dei bordi. */
  border-color: rgba(160,112,89,.22);
}

/* 175. Guida FindMe. */
/* Stato al passaggio del puntatore. */
html body .fm-guide-actions button:hover,
html body .fm-guide-actions a:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255,247,212,.98);
  /* Colore dei bordi. */
  border-color: #bc7a35;
}

/* 176. Guida FindMe. */
html body .fm-guide-hint {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 177. Guida FindMe. */
html body .fm-guide-footer {
  /* Spazio interno tra contenuto e bordo. */
  padding: 5px 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(239,245,250,.65);
}

/* 178. Guida FindMe. */
html body .fm-guide-reset {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 179. Guida FindMe. */
/* Elemento decorativo generato dal CSS. */
html body .fm-guide-heading strong::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "";
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-block;
  /* Larghezza del componente. */
  width: 16px;
  /* Altezza del componente. */
  height: 13px;
  /* Spazio esterno a destra. */
  margin-right: 7px;
  /* Spessore, stile e colore del bordo. */
  border: 2px solid #bc5b28;
  /* Arrotondamento degli angoli. */
  border-radius: 8px 8px 8px 2px;
  /* Allineamento verticale degli elementi inline o delle celle. */
  vertical-align: -2px;
  /* Trasformazione visiva, ad esempio spostamento o rotazione. */
  transform: rotate(-6deg);
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width:600px) {

  /* 180. Guida FindMe. */
  html body .fm-guide-panel {
    /* Larghezza del componente. */
    width: 290px;
    /* Limite massimo dell’altezza. */
    max-height: 48dvh;
  }

  /* 181. Guida FindMe. */
  html body .fm-guide-launcher {
    /* Spazio interno tra contenuto e bordo. */
    padding: 8px 12px;
  }

}

/* 182. Guida FindMe. */
html body .fm-guide[data-sticky-ready] .fm-guide-panel {
  /* Sistema di posizionamento del componente. */
  position: fixed;
  /* Larghezza del componente. */
  width: 290px;
  /* Limite massimo della larghezza. */
  max-width: calc(100vw - 20px);
  /* Limite massimo dell’altezza. */
  max-height: 48dvh;
  /* Arrotondamento degli angoli. */
  border-radius: 6px 6px 16px 6px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255,248,211,.94);
}

/* 183. Guida FindMe. */
html body .fm-guide[data-sticky-ready] .fm-guide-heading {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255,245,188,.8);
}

/* 184. Guida FindMe. */
html body .fm-guide[data-sticky-ready] .fm-guide-body {
  /* Limite minimo dell’altezza. */
  min-height: 0;
}

/* 185. Guida FindMe. */
html body .fm-guide[data-sticky-ready] .fm-guide-panel[data-side="above"] {
  /* Spessore, stile e colore del bordo inferiore. */
  border-bottom: 3px solid #e29446;
}

/* 186. Guida FindMe. */
html body .fm-guide[data-sticky-ready] .fm-guide-panel[data-side="below"] {
  /* Spessore, stile e colore del bordo superiore. */
  border-top: 3px solid #e29446;
}

/* 187. Guida FindMe. */
html body .fm-guide[data-sticky-ready] .fm-guide-panel[data-side="left"] {
  /* Spessore, stile e colore del bordo destro. */
  border-right: 3px solid #e29446;
}

/* 188. Guida FindMe. */
html body .fm-guide[data-sticky-ready] .fm-guide-panel[data-side="right"] {
  /* Spessore, stile e colore del bordo sinistro. */
  border-left: 3px solid #e29446;
}

/* 189. Guida FindMe con post-it. */
html body .fm-guide.fm-sticky-fields .fm-guide-message,
html body .fm-guide.fm-sticky-fields .fm-guide-actions {
  /* Modalità di impaginazione o visibilità del componente. */
  display: none;
}

/* 190. Guida FindMe con post-it. */
html body .fm-sticky-instruction {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #1f2937;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 15px;
  /* Altezza delle righe di testo. */
  line-height: 1.5;
}

/* 191. Guida FindMe con post-it. */
/* Elemento decorativo generato dal CSS. */
html body .fm-sticky-instruction::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "↪";
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-block;
  /* Spazio esterno a destra. */
  margin-right: 7px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #ad4d18;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 22px;
  /* Allineamento verticale degli elementi inline o delle celle. */
  vertical-align: -1px;
}

/* 192. Guida FindMe con post-it. */
html body .fm-sticky-controls {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 6px;
  /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
  flex: 0 0 auto;
  /* Spazio interno tra contenuto e bordo. */
  padding: 8px 10px 10px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255,248,211,.7);
}

/* 193. Guida FindMe con post-it. */
html body .fm-sticky-controls button {
  /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
  flex: 1;
  /* Limite minimo dell’altezza. */
  min-height: 44px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 8px 6px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 9px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #ffffffbf;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 13px;
  /* Aspetto del puntatore del mouse. */
  cursor: pointer;
}

/* 194. Guida FindMe con post-it. */
html body .fm-sticky-controls button:disabled {
  /* Opacità dell’intero componente, da zero a uno. */
  opacity: .5;
  /* Aspetto del puntatore del mouse. */
  cursor: default;
}

/* 195. Guida FindMe con post-it. */
html body .fm-sticky-target {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px dashed #c76a27;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 4px;
  /* Spazio di rispetto sui lati verticali quando si scorre verso questo elemento. */
  scroll-margin-block: 20px;
}

/* 196. Guida FindMe con post-it. */
html body .fm-guide.fm-sticky-in-flow {
  /* Sistema di posizionamento del componente. */
  position: static;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 12px 0;
}

/* 197. Guida FindMe con post-it. */
html body .fm-guide[data-sticky-ready] .fm-guide-panel.fm-sticky-inline {
  /* Sistema di posizionamento del componente. */
  position: relative;
  /* Limite massimo dell’altezza. */
  max-height: none;
  /* Larghezza del componente. */
  width: min(290px,100%);
}

/* 198. Indicatore dell’ambiente di prova. */
html body .ambiente-test {
  /* Modalità di impaginazione o visibilità del componente. La priorità !important prevale sulle dichiarazioni normali. */
  display: none !important;
}

/* 199. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a::before,
html body .navigazione .nav-gruppo>summary::before,
html body .navigazione .nav-logout button::before {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-block;
  /* Larghezza del componente. */
  width: 1.2em;
  /* Spazio esterno a destra. */
  margin-right: 7px;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 1em;
  /* Altezza delle righe di testo. */
  line-height: 1;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Allineamento verticale degli elementi inline o delle celle. */
  vertical-align: -1px;
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐾" / "";
  /* Controlla se il componente può intercettare clic o tocchi. */
  pointer-events: none;
}

/* 200. Menu di navigazione. */
html body .navigazione>a {
  /* Spazio interno sull’asse orizzontale nella scrittura orizzontale. */
  padding-inline: 10px;
}

/* 201. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="index.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🏠" / "";
}

/* 202. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="inserzioni.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐾" / "";
}

/* 203. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="mappa.html"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "📍" / "";
}

/* 204. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="notifiche.html"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🔔" / "";
}

/* 205. Menu di navigazione. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
/* Elemento decorativo generato dal CSS. */
html body .navigazione .nav-gruppo:has(a[href^="login.php"])>summary::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "👤" / "";
}

/* 206. Menu di navigazione. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
/* Elemento decorativo generato dal CSS. */
html body .navigazione .nav-gruppo:has(a[href^="prove.html"])>summary::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🧪" / "";
}

/* 207. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="login.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🔑" / "";
}

/* 208. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="register.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "📝" / "";
}

/* 209. Area personale e moduli dell’account. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="account.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "👤" / "";
}

/* 210. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="admin.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🛡️" / "";
}

/* 211. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="miei-annunci.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "📋" / "";
}

/* 212. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="prove.html"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🧪" / "";
}

/* 213. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="inserzione-test.html"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "📝" / "";
}

/* 214. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="diagnosi-notifiche.html"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🩺" / "";
}

/* 215. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="prova-click.html"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "👆" / "";
}

/* 216. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="moderazione.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "✅" / "";
}

/* 217. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="verifica.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🔧" / "";
}

/* 218. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione a[href^="nuova-inserzione.php"]::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "📣" / "";
}

/* 219. Menu di navigazione. */
/* Elemento decorativo generato dal CSS. */
html body .navigazione .nav-logout button::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🚪" / "";
}

/* 220. Selezione e caricamento delle foto. */
html body .fm-photo-dropzone {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Limite minimo dell’altezza. */
  min-height: 230px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 18px 0 12px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 28px;
  /* Spessore, stile e colore del bordo. */
  border: 2px dashed #94a3b8;
  /* Arrotondamento degli angoli. */
  border-radius: 22px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
}

/* 221. Selezione e caricamento delle foto. */
html body .fm-photo-dropzone legend {
  /* Affianca l’elemento sul lato indicato. */
  float: left;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 0 12px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 0;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: clamp(20px, 3vw, 25px);
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Altezza delle righe di testo. */
  line-height: 1.3;
}

/* 222. Selezione e caricamento delle foto. */
/* Elemento decorativo generato dal CSS. */
html body .fm-photo-dropzone legend::before {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Spazio esterno sotto al componente. */
  margin-bottom: 12px;
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "📷" / "";
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 38px;
  /* Altezza delle righe di testo. */
  line-height: 1.2;
}

/* 223. Selezione e caricamento delle foto. */
html body .fm-photo-dropzone > p {
  /* Controlla l’affiancamento agli elementi con float. */
  clear: both;
  /* Limite massimo della larghezza. */
  max-width: 480px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 auto 20px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 15px;
  /* Altezza delle righe di testo. */
  line-height: 1.55;
}

/* 224. Selezione e caricamento delle foto. */
html body .fm-photo-dropzone input[type="file"] {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite massimo della larghezza. */
  max-width: 420px;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 auto;
  /* Spazio interno tra contenuto e bordo. */
  padding: 10px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Impostazione abbreviata delle proprietà tipografiche. */
  font: inherit;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
  /* Aspetto del puntatore del mouse. */
  cursor: pointer;
}

/* 225. Selezione e caricamento delle foto. */
html body .fm-photo-dropzone input[type="file"]::file-selector-button {
  /* Limite minimo dell’altezza. */
  min-height: 44px;
  /* Spazio esterno a destra. */
  margin-right: 10px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 10px 16px;
  /* Spessore, stile e colore del bordo. */
  border: 0;
  /* Arrotondamento degli angoli. */
  border-radius: 9px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Impostazione abbreviata delle proprietà tipografiche. */
  font: inherit;
  /* Spessore delle lettere. */
  font-weight: 700;
  /* Aspetto del puntatore del mouse. */
  cursor: pointer;
}

/* 226. Selezione e caricamento delle foto. */
/* Stato di focus per la navigazione da tastiera. */
html body .fm-photo-dropzone:focus-within,
html body .fm-photo-dropzone.fm-photo-dragover {
  /* Colore dei bordi. */
  border-color: #2563eb;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 0 0 4px rgba(18, 96, 174, .13);
}

/* 227. Selezione e caricamento delle foto. */
/* Stato di focus per la navigazione da tastiera. */
html body .fm-photo-dropzone input:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #2563eb;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 3px;
}

/* 228. Selezione e caricamento delle foto. */
html body .fm-photo-count {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 0 14px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
  /* Spessore delle lettere. */
  font-weight: 650;
}

/* 229. Selezione e caricamento delle foto. */
html body .fm-photo-selected {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 16px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
}

/* 230. Selezione e caricamento delle foto. */
html body .fm-photo-selected img {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite massimo della larghezza. */
  max-width: 240px;
  /* Altezza del componente. */
  height: 150px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 auto;
  /* Arrotondamento degli angoli. */
  border-radius: 10px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Modo in cui l’immagine entra nel riquadro: contain la mostra intera, cover può ritagliarla. */
  object-fit: contain;
}

/* 231. Selezione e caricamento delle foto. */
html body .fm-photo-selected p {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 10px 0;
  /* Permette di spezzare parole o indirizzi troppo lunghi. */
  overflow-wrap: anywhere;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
}

/* 232. Selezione e caricamento delle foto. */
html body .fm-photo-remove {
  /* Limite minimo dell’altezza. */
  min-height: 44px;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Gestione degli spazi e degli a capo nel testo. */
  white-space: normal;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 233. Selezione e caricamento delle foto. */
  html body .fm-photo-dropzone {
    /* Limite minimo dell’altezza. */
    min-height: 210px;
    /* Spazio interno tra contenuto e bordo. */
    padding: 20px 14px;
    /* Arrotondamento degli angoli. */
    border-radius: 18px;
  }

  /* 234. Selezione e caricamento delle foto. */
  html body .fm-photo-dropzone input[type="file"] {
    /* Spazio interno tra contenuto e bordo. */
    padding: 8px;
    /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
    font-size: 13px;
  }

}

/* 235. Gestione delle foto dell’annuncio. */
html body .listing-photo-grid {
  /* Modalità di impaginazione o visibilità del componente. */
  display: grid;
  /* Numero e dimensioni delle colonne della griglia. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 20px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 24px 0;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: start;
}

/* 236. Gestione delle foto dell’annuncio. */
html body .listing-photo-card {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 16px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 20px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 6px 20px rgba(30, 67, 98, .07);
}

/* 237. Gestione delle foto dell’annuncio. */
html body .listing-photo-card > img {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Larghezza del componente. */
  width: 100%;
  /* Altezza del componente. */
  height: 210px;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Modo in cui l’immagine entra nel riquadro: contain la mostra intera, cover può ritagliarla. */
  object-fit: contain;
}

/* 238. Gestione delle foto dell’annuncio. */
html body .listing-photo-card > p {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-block;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 14px 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 6px 12px;
  /* Arrotondamento degli angoli. */
  border-radius: 30px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
  /* Spessore delle lettere. */
  font-weight: 750;
}

/* 239. Gestione delle foto dell’annuncio. */
html body .listing-photo-card:first-child {
  /* Spessore, stile e colore del bordo. */
  border: 2px solid #2563eb;
}

/* 240. Gestione delle foto dell’annuncio. */
html body .listing-photo-card:first-child > p {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
}

/* 241. Gestione delle foto dell’annuncio. */
html body .listing-photo-main,
html body .listing-photo-remove form {
  /* Modalità di impaginazione o visibilità del componente. */
  display: grid;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
}

/* 242. Gestione delle foto dell’annuncio. */
html body .listing-photo-card button,
html body .listing-photo-remove > summary {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite minimo dell’altezza. */
  min-height: 46px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
  /* Spessore delle lettere. */
  font-weight: 700;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Gestione degli spazi e degli a capo nel testo. */
  white-space: normal;
  /* Aspetto del puntatore del mouse. */
  cursor: pointer;
}

/* 243. Gestione delle foto dell’annuncio. */
html body .listing-photo-main button {
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #2563eb;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 244. Gestione delle foto dell’annuncio. */
html body .listing-photo-remove {
  /* Spazio esterno sopra al componente. */
  margin-top: 12px;
}

/* 245. Gestione delle foto dell’annuncio. */
html body .listing-photo-remove > summary {
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #ddbac0;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff5f5;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #922e3c;
  /* Aspetto dei marcatori di un elenco. */
  list-style: none;
}

/* 246. Gestione delle foto dell’annuncio. */
html body .listing-photo-remove > summary::-webkit-details-marker {
  /* Modalità di impaginazione o visibilità del componente. */
  display: none;
}

/* 247. Gestione delle foto dell’annuncio. */
/* Elemento decorativo generato dal CSS. */
html body .listing-photo-remove > summary::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "−";
  /* Spazio esterno a destra. */
  margin-right: 8px;
}

/* 248. Gestione delle foto dell’annuncio. */
html body .listing-photo-remove[open] > summary {
  /* Spazio esterno sotto al componente. */
  margin-bottom: 12px;
}

/* 249. Gestione delle foto dell’annuncio. */
html body .listing-photo-remove form {
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #ebccd0;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff9f9;
}

/* 250. Gestione delle foto dell’annuncio. */
html body .listing-photo-remove button {
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #922e3c;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #922e3c;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
}

/* 251. Gestione delle foto dell’annuncio. */
html body .listing-photo-card .edit-confirm,
html body .listing-photo-card .listing-state-check,
html body .listing-photo-upload .edit-confirm {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 10px;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: flex-start;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 10px;
  /* Arrotondamento degli angoli. */
  border-radius: 10px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff5e7;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #634017;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
  /* Altezza delle righe di testo. */
  line-height: 1.5;
}

/* 252. Gestione delle foto dell’annuncio. */
html body .listing-photo-manager input[type="checkbox"] {
  /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
  flex: 0 0 20px;
  /* Larghezza del componente. */
  width: 20px;
  /* Altezza del componente. */
  height: 20px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 1px 0 0;
  /* Colore dei controlli nativi, come la casella di conferma. */
  accent-color: #1260ae;
}

/* 253. Gestione delle foto dell’annuncio. */
html body .listing-photo-upload {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Modalità di impaginazione o visibilità del componente. */
  display: grid;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 18px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 28px 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 24px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 20px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
}

/* 254. Gestione delle foto dell’annuncio. */
html body .listing-photo-upload > .campo > label {
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 20px;
  /* Spessore delle lettere. */
  font-weight: 750;
}

/* 255. Gestione delle foto dell’annuncio. */
html body .listing-photo-upload > button {
  /* Allineamento orizzontale di questo elemento nella propria cella Grid. */
  justify-self: start;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Gestione degli spazi e degli a capo nel testo. */
  white-space: normal;
}

/* 256. Gestione delle foto dell’annuncio. */
/* Stato di focus per la navigazione da tastiera. */
html body .listing-photo-manager summary:focus-visible,
html body .listing-photo-manager button:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #2563eb;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 3px;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 900px) {

  /* 257. Gestione delle foto dell’annuncio. */
  html body .listing-photo-grid {
    /* Numero e dimensioni delle colonne della griglia. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 258. Gestione delle foto dell’annuncio. */
  html body .listing-photo-grid {
    /* Numero e dimensioni delle colonne della griglia. */
    grid-template-columns: minmax(0, 1fr);
    /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
    gap: 16px;
  }

  /* 259. Gestione delle foto dell’annuncio. */
  html body .listing-photo-card > img {
    /* Altezza del componente. */
    height: 240px;
  }

  /* 260. Gestione delle foto dell’annuncio. */
  html body .listing-photo-upload {
    /* Spazio interno tra contenuto e bordo. */
    padding: 16px;
  }

  /* 261. Gestione delle foto dell’annuncio. */
  html body .listing-photo-upload > button {
    /* Allineamento orizzontale di questo elemento nella propria cella Grid. */
    justify-self: stretch;
    /* Larghezza del componente. */
    width: 100%;
  }

}

/* 262. Gestione delle foto dell’annuncio. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.listing-photo-manager) {
  /* Limite massimo della larghezza. */
  max-width: none;
  /* Larghezza del componente. */
  width: 100%;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
}

/* 263. Gestione delle foto dell’annuncio. */
html body .listing-photo-card {
  /* Spessore dei bordi. */
  border-width: 2px;
}

/* 264. Gestione delle foto dell’annuncio. */
html body .listing-photo-card > p,
html body .listing-photo-card:first-child > p {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
}

/* 265. Gestione delle foto dell’annuncio. */
html body .listing-photo-primary-status {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite minimo dell’altezza. */
  min-height: 46px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #2563eb;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 14px;
  /* Spessore delle lettere. */
  font-weight: 700;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
}

/* 266. Gestione delle foto dell’annuncio. */
html body .listing-photo-card .listing-photo-remove > summary {
  /* Spazio esterno sopra al componente. */
  margin-top: 0;
}

/* 267. Gestione delle foto dell’annuncio. */
html body .listing-photo-manager > .listing-photo-limit {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 24px 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 18px 22px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #e4b77d;
  /* Arrotondamento degli angoli. */
  border-radius: 16px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff4e5;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #754015;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 16px;
  /* Spessore delle lettere. */
  font-weight: 650;
  /* Altezza delle righe di testo. */
  line-height: 1.6;
}

/* 268. Gestione delle foto dell’annuncio. */
html body .listing-photo-manager > .account-azioni {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: stretch;
  /* Permette o impedisce ai figli Flexbox di andare a capo. */
  flex-wrap: wrap;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 14px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 28px 0 8px;
}

/* 269. Gestione delle foto dell’annuncio. */
html body .listing-photo-manager > .account-azioni > a {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-flex;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Limite minimo dell’altezza. */
  min-height: 50px;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 220px;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Spazio interno tra contenuto e bordo. */
  padding: 14px 22px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #2563eb;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Decorazione del testo, ad esempio la sottolineatura. */
  text-decoration: none;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 15px;
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 5px 14px rgba(18, 96, 174, .14);
}

/* 270. Gestione delle foto dell’annuncio. */
/* Stato al passaggio del puntatore. */
html body .listing-photo-manager > .account-azioni > a:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #14213d;
}

/* 271. Gestione delle foto dell’annuncio. */
/* Stato di focus per la navigazione da tastiera. */
html body .listing-photo-manager > .account-azioni > a:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #2563eb;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 4px;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 272. Gestione delle foto dell’annuncio. */
  html body .listing-photo-manager > .account-azioni > a {
    /* Larghezza del componente. */
    width: 100%;
    /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
    min-width: 0;
  }

}

/* 273. Area personale e moduli dell’account. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(#modulo-modifica) {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite massimo della larghezza. */
  max-width: none;
}

/* 274. Stili condivisi del sito. */
html body #modulo-modifica {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite massimo della larghezza. */
  max-width: none;
  /* Spazio esterno sui lati dell’asse di scrittura. */
  margin-inline: 0;
}

/* 275. Schede dei miei annunci. */
html body .mio-annuncio {
  /* Sistema di posizionamento del componente. */
  position: relative;
}

/* 276. Schede dei miei annunci. */
html body .mio-annuncio-badge-attesa {
  /* Sistema di posizionamento del componente. */
  position: absolute;
  /* Livello di sovrapposizione negli elementi a cui questa proprietà si applica. */
  z-index: 1;
  /* Distanza dal riferimento superiore per un elemento posizionato. */
  top: 12px;
  /* Distanza dal riferimento sinistro per un elemento posizionato. */
  left: 12px;
  /* Distanza dal riferimento destro per un elemento posizionato. */
  right: 12px;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Spazio interno tra contenuto e bordo. */
  padding: 9px 12px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #e4b77d;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(255, 244, 229, .97);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #754015;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 3px 12px rgba(67, 44, 20, .12);
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 13px;
  /* Spessore delle lettere. */
  font-weight: 700;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Controlla se il componente può intercettare clic o tocchi. */
  pointer-events: none;
}

/* 277. Gestione delle foto dell’annuncio. */
html body .listing-photo-manager label[hidden] {
  /* Modalità di impaginazione o visibilità del componente. La priorità !important prevale sulle dichiarazioni normali. */
  display: none !important;
}

/* 278. Popup di conferma della moderazione. */
html body .fm-review-dialog {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: min(460px, calc(100% - 32px));
  /* Limite massimo dell’altezza. */
  max-height: calc(100dvh - 32px);
  /* Spazio esterno; auto può centrare il componente. */
  margin: auto;
  /* Spazio interno tra contenuto e bordo. */
  padding: 28px;
  /* Gestione del contenuto che supera i limiti del riquadro. */
  overflow: auto;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 22px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 20px 70px rgba(16, 47, 80, .25);
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
}

/* 279. Popup di conferma della moderazione. */
html body .fm-review-dialog::backdrop {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: rgba(16, 47, 80, .45);
}

/* 280. Popup di conferma della moderazione. */
html body .fm-review-icon {
  /* Modalità di impaginazione o visibilità del componente. */
  display: grid;
  /* Allineamento dei figli sui due assi della griglia. */
  place-items: center;
  /* Larghezza del componente. */
  width: 48px;
  /* Altezza del componente. */
  height: 48px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 auto 16px;
  /* Arrotondamento degli angoli. */
  border-radius: 50%;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff0d9;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #875017;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 28px;
  /* Spessore delle lettere. */
  font-weight: 800;
}

/* 281. Popup di conferma della moderazione. */
html body .fm-review-dialog h2 {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 0 14px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 23px;
  /* Altezza delle righe di testo. */
  line-height: 1.3;
}

/* 282. Popup di conferma della moderazione. */
html body .fm-review-dialog p {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 16px;
  /* Altezza delle righe di testo. */
  line-height: 1.6;
}

/* 283. Popup di conferma della moderazione. */
html body .fm-review-actions {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
  /* Spazio esterno sopra al componente. */
  margin-top: 24px;
}

/* 284. Popup di conferma della moderazione. */
html body .fm-review-actions button {
  /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
  flex: 1;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Limite minimo dell’altezza. */
  min-height: 48px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #2563eb;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Impostazione abbreviata delle proprietà tipografiche. */
  font: inherit;
  /* Spessore delle lettere. */
  font-weight: 700;
  /* Aspetto del puntatore del mouse. */
  cursor: pointer;
}

/* 285. Popup di conferma della moderazione. */
html body .fm-review-actions [data-review-cancel] {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #2563eb;
}

/* 286. Popup di conferma della moderazione. */
/* Stato di focus per la navigazione da tastiera. */
html body .fm-review-actions button:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #2563eb;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 3px;
}

/* 287. Griglia dei miei annunci. */
html body .griglia-miei-annunci {
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: stretch;
}

/* 288. Schede dei miei annunci. */
html body .mio-annuncio {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Direzione di disposizione dei figli Flexbox. */
  flex-direction: column;
}

/* 289. Schede dei miei annunci. */
html body .mio-annuncio-foto,
html body .mio-annuncio-segnaposto {
  /* Possibilità del figlio Flexbox di restringersi. */
  flex-shrink: 0;
}

/* 290. Schede dei miei annunci. */
html body .mio-annuncio-corpo {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
  flex: 1;
  /* Direzione di disposizione dei figli Flexbox. */
  flex-direction: column;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: stretch;
}

/* 291. Schede dei miei annunci. */
html body .mio-annuncio-corpo > .stato-annuncio {
  /* Allineamento di questo elemento, indipendente dagli altri figli. */
  align-self: flex-start;
}

/* 292. Schede dei miei annunci. */
html body .mio-annuncio-corpo > a,
html body .mio-annuncio-corpo > .mio-annuncio-aiuto {
  /* Spazio esterno sotto al componente. */
  margin-bottom: 16px;
}

/* 293. Schede dei miei annunci. */
html body .mio-annuncio-azioni {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Direzione di disposizione dei figli Flexbox. */
  flex-direction: column;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 8px;
  /* Spazio esterno sopra al componente. */
  margin-top: auto;
  /* Spazio interno sopra al contenuto. */
  padding-top: 16px;
}

/* 294. Schede dei miei annunci. */
html body .mio-annuncio-azioni .pulsante {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Limite minimo dell’altezza. */
  min-height: 50px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
}

/* 295. Schede dei miei annunci. */
/* Elemento decorativo generato dal CSS. */
html body .mio-annuncio-corpo h2::before {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-block;
  /* Spazio esterno a destra. */
  margin-right: 8px;
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐾" / "";
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .9em;
  /* Allineamento verticale degli elementi inline o delle celle. */
  vertical-align: baseline;
  /* Controlla se il componente può intercettare clic o tocchi. */
  pointer-events: none;
}

/* 296. Schede dei miei annunci. */
/* Elemento decorativo generato dal CSS. */
html body .mio-annuncio:nth-child(5n + 2) .mio-annuncio-corpo h2::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐰" / "";
}

/* 297. Schede dei miei annunci. */
/* Elemento decorativo generato dal CSS. */
html body .mio-annuncio:nth-child(5n + 3) .mio-annuncio-corpo h2::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🦜" / "";
}

/* 298. Schede dei miei annunci. */
/* Elemento decorativo generato dal CSS. */
html body .mio-annuncio:nth-child(5n + 4) .mio-annuncio-corpo h2::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐢" / "";
}

/* 299. Schede dei miei annunci. */
/* Elemento decorativo generato dal CSS. */
html body .mio-annuncio:nth-child(5n) .mio-annuncio-corpo h2::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐹" / "";
}

/* 300. Area personale e moduli dell’account. */
html body .account-contenitore > .account-pannello {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite massimo della larghezza. */
  max-width: none;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Spazio esterno sui lati dell’asse di scrittura. */
  margin-inline: 0;
}

/* 301. Avvistamenti e mappa. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.sighting-history-intro) > p {
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
}

/* 302. Avvistamenti e mappa. */
html body .sighting-history-intro {
  /* Limite massimo della larghezza. */
  max-width: 850px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 16px auto;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
  /* Altezza delle righe di testo. */
  line-height: 1.65;
}

/* 303. Avvistamenti e mappa. */
html body .sighting-history {
  /* Modalità di impaginazione o visibilità del componente. */
  display: grid;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 24px;
  /* Spazio esterno sopra al componente. */
  margin-top: 24px;
}

/* 304. Avvistamenti e mappa. */
html body .sighting-card {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 30px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 24px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 8px 24px rgba(28, 83, 122, .08);
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Spazio di rispetto superiore quando si scorre verso questo elemento. */
  scroll-margin-top: 140px;
}

/* 305. Avvistamenti e mappa. */
html body .sighting-card.sighting-selected {
  /* Spessore, stile e colore del bordo. */
  border: 2px solid #dc681f;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 0 0 4px rgba(242, 157, 63, .13), 0 8px 24px rgba(28, 83, 122, .08);
}

/* 306. Avvistamenti e mappa. */
html body .sighting-card h2 {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 0 20px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: clamp(22px, 3vw, 28px);
  /* Altezza delle righe di testo. */
  line-height: 1.35;
}

/* 307. Avvistamenti e mappa. */
/* Elemento decorativo generato dal CSS. */
html body .sighting-card h2::before {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Spazio esterno sotto al componente. */
  margin-bottom: 12px;
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐾" / "";
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 34px;
}

/* 308. Avvistamenti e mappa. */
html body .sighting-card p {
  /* Limite massimo della larghezza. */
  max-width: 780px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 12px auto;
  /* Permette di spezzare parole o indirizzi troppo lunghi. */
  overflow-wrap: anywhere;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 16px;
  /* Altezza delle righe di testo. */
  line-height: 1.65;
}

/* 309. Avvistamenti e mappa. */
html body .sighting-card p strong {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-block;
  /* Spazio interno tra contenuto e bordo. */
  padding: 5px 10px;
  /* Arrotondamento degli angoli. */
  border-radius: 9px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff0d8;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #754015;
}

/* 310. Avvistamenti e mappa. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .sighting-card > a:has(.sighting-photo) {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Larghezza del componente. */
  width: fit-content;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 22px auto;
}

/* 311. Avvistamenti e mappa. */
html body .sighting-photo {
  /* Modalità di impaginazione o visibilità del componente. */
  display: block;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: min(420px, 100%);
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Altezza del componente. */
  height: auto;
  /* Limite massimo dell’altezza. */
  max-height: 380px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 auto;
  /* Spazio interno tra contenuto e bordo. */
  padding: 6px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 20px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 8px 24px rgba(28, 83, 122, .12);
  /* Modo in cui l’immagine entra nel riquadro: contain la mostra intera, cover può ritagliarla. */
  object-fit: contain;
}

/* 312. Avvistamenti e mappa. */
html body .sighting-maps-link {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-flex;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Limite minimo dell’altezza. */
  min-height: 50px;
  /* Spazio esterno sopra al componente. */
  margin-top: 8px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 14px 24px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #2563eb;
  /* Arrotondamento degli angoli. */
  border-radius: 13px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Decorazione del testo, ad esempio la sottolineatura. */
  text-decoration: none;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 16px;
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 6px 16px rgba(18, 96, 174, .18);
}

/* 313. Avvistamenti e mappa. */
/* Elemento decorativo generato dal CSS. */
html body .sighting-maps-link::before {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "📍" / "";
  /* Spazio esterno a destra. */
  margin-right: 8px;
}

/* 314. Avvistamenti e mappa. */
/* Stato al passaggio del puntatore. */
html body .sighting-maps-link:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #14213d;
}

/* 315. Avvistamenti e mappa. */
/* Stato di focus per la navigazione da tastiera. */
html body .sighting-card a:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #2563eb;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 4px;
}

/* 316. Avvistamenti e mappa. */
html body #sighting-history-map {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Altezza del componente. */
  height: 360px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 24px 0;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 20px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
}

/* 317. Avvistamenti e mappa. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.sighting-history-intro) > nav {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Permette o impedisce ai figli Flexbox di andare a capo. */
  flex-wrap: wrap;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 14px;
  /* Spazio esterno sopra al componente. */
  margin-top: 28px;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 318. Avvistamenti e mappa. */
  html body .sighting-card {
    /* Spazio interno tra contenuto e bordo. */
    padding: 22px 16px;
    /* Arrotondamento degli angoli. */
    border-radius: 18px;
  }

  /* 319. Avvistamenti e mappa. */
  html body .sighting-maps-link {
    /* Larghezza del componente. */
    width: 100%;
    /* Spazio interno sull’asse orizzontale nella scrittura orizzontale. */
    padding-inline: 14px;
  }

  /* 320. Avvistamenti e mappa. */
  html body #sighting-history-map {
    /* Altezza del componente. */
    height: 300px;
  }

}

/* 321. Avvistamenti e mappa. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.sighting-history-intro) > p:first-child > a[href="miei-annunci.php"] {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-flex;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Limite minimo dell’altezza. */
  min-height: 48px;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px 22px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 14px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 16px;
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Decorazione del testo, ad esempio la sottolineatura. */
  text-decoration: none;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 4px 12px rgba(18, 96, 174, .1);
}

/* 322. Avvistamenti e mappa. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
/* Elemento decorativo generato dal CSS. */
html body .account-pannello:has(.sighting-history-intro) > p:first-child > a[href="miei-annunci.php"]::after {
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "🐾" / "";
  /* Spazio esterno a sinistra. */
  margin-left: 12px;
}

/* 323. Avvistamenti e mappa. */
/* Stato al passaggio del puntatore. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.sighting-history-intro) > p:first-child > a[href="miei-annunci.php"]:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Colore dei bordi. */
  border-color: #2563eb;
}

/* 324. Avvistamenti e mappa. */
/* Stato di focus per la navigazione da tastiera. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.sighting-history-intro) > p:first-child > a[href="miei-annunci.php"]:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #2563eb;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 4px;
}

/* 325. Badge di allarme della scheda annuncio. */
html body .wallet-alert-label {
  /* Sistema di posizionamento del componente. */
  position: relative;
  /* Controlla l’isolamento del componente in un proprio contesto di sovrapposizione. */
  isolation: isolate;
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-grid;
  /* Allineamento dei figli sui due assi della griglia. */
  place-items: center;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Limite minimo dell’altezza. */
  min-height: 64px;
  /* Limite massimo della larghezza. */
  max-width: 100%;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 8px 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 20px 30px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: transparent;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #a92032;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 12px;
  /* Spessore delle lettere. */
  font-weight: 850;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Spazio aggiuntivo tra le lettere. */
  letter-spacing: .06em;
  /* Trasformazione visiva in maiuscolo o minuscolo. */
  text-transform: uppercase;
}

/* 326. Badge di allarme della scheda annuncio. */
/* Elemento decorativo generato dal CSS. */
html body .wallet-alert-label::before,
html body .wallet-alert-label::after {
  /* Sistema di posizionamento del componente. */
  position: absolute;
  /* Contenuto generato da uno pseudo-elemento, ad esempio un simbolo decorativo. */
  content: "";
  /* Controlla se il componente può intercettare clic o tocchi. */
  pointer-events: none;
  /* Sagoma che ritaglia la superficie del componente. */
  clip-path: polygon(0% 18%, 12% 18%, 8% 0%, 25% 12%, 34% 0%, 44% 12%, 57% 0%, 64% 12%, 83% 0%, 83% 18%, 100% 12%, 93% 38%, 100% 52%, 92% 66%, 100% 88%, 84% 82%, 88% 100%, 68% 88%, 58% 100%, 47% 88%, 33% 100%, 24% 87%, 7% 100%, 12% 78%, 0% 84%, 7% 61%, 0% 48%, 8% 34%);
}

/* 327. Badge di allarme della scheda annuncio. */
/* Elemento decorativo generato dal CSS. */
html body .wallet-alert-label::before {
  /* Livello di sovrapposizione negli elementi a cui questa proprietà si applica. */
  z-index: -2;
  /* Distanze dai quattro lati del riferimento per un elemento posizionato. */
  inset: 0;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #c92b3e;
}

/* 328. Badge di allarme della scheda annuncio. */
/* Elemento decorativo generato dal CSS. */
html body .wallet-alert-label::after {
  /* Livello di sovrapposizione negli elementi a cui questa proprietà si applica. */
  z-index: -1;
  /* Distanze dai quattro lati del riferimento per un elemento posizionato. */
  inset: 3px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff4f2;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 329. Badge di allarme della scheda annuncio. */
  html body .wallet-alert-label {
    /* Limite minimo dell’altezza. */
    min-height: 58px;
    /* Spazio interno tra contenuto e bordo. */
    padding: 18px 24px;
    /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
    font-size: 11px;
  }

}

/* 330. Introduzione della home. */
html body .hero h1 {
  /* Ombra o alone applicato alle lettere. */
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
               1px -1px 0 #fff, -1px 1px 0 #fff,
               0 4px 12px rgba(76, 43, 19, .12);
  /* Spessore e colore del contorno delle lettere. */
  -webkit-text-stroke: .65px #123451;
  /* Ordine con cui vengono disegnati contorno e riempimento. */
  paint-order: stroke fill;
}

/* 331. Introduzione della home. */
html body .hero h1 span {
  /* Spessore e colore del contorno delle lettere. */
  -webkit-text-stroke: .65px #993509;
}

/* 332. Introduzione della home. */
html body .hero .hero-azioni {
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 16px;
}

/* 333. Introduzione della home. */
html body .hero .hero-azioni > .pulsante {
  /* Limite minimo dell’altezza. */
  min-height: 60px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 16px 24px;
  /* Spessore, stile e colore del bordo. */
  border: 2px solid transparent;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 1rem;
  /* Spessore delle lettere. */
  font-weight: 800;
  /* Altezza delle righe di testo. */
  line-height: 1.35;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
}

/* 334. Introduzione della home. */
html body .hero .hero-azioni > .pulsante-verde {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: linear-gradient(135deg,#ff6b35,#ff8a3d);
  /* Colore dei bordi. */
  border-color: #913009;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(169, 58, 10, .24);
}

/* 335. Introduzione della home. */
/* Stato al passaggio del puntatore. */
html body .hero .hero-azioni > .pulsante-verde:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #963107;
  /* Colore dei bordi. */
  border-color: #792705;
}

/* 336. Introduzione della home. */
html body .hero .hero-azioni > .pulsante-chiaro {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore dei bordi. */
  border-color: #14213d;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Ombra del riquadro: spostamento, sfocatura, estensione e colore. */
  box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(18, 96, 174, .24);
}

/* 337. Introduzione della home. */
/* Stato al passaggio del puntatore. */
html body .hero .hero-azioni > .pulsante-chiaro:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #1d4ed8;
  /* Colore dei bordi. */
  border-color: #14213d;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
}

/* 338. Introduzione della home. */
/* Stato di focus per la navigazione da tastiera. */
html body .hero .hero-azioni > .pulsante:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #14213d;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 6px;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 520px) {

  /* 339. Introduzione della home. */
  html body .hero .hero-azioni > .pulsante {
    /* Larghezza del componente. */
    width: 100%;
  }

}

/* 340. Pagina del punto di smarrimento. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.location-selector) {
  /* Larghezza del componente. */
  width: 100%;
  /* Limite massimo della larghezza. */
  max-width: none;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
}

/* 341. Pagina del punto di smarrimento. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.location-selector) > h1,
html body .account-pannello:has(.location-selector) > h2 {
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Altezza delle righe di testo. */
  line-height: 1.25;
  /* Permette di spezzare parole o indirizzi troppo lunghi. */
  overflow-wrap: anywhere;
}

/* 342. Pagina del punto di smarrimento. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.location-selector) > p {
  /* Limite massimo della larghezza. */
  max-width: 850px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 16px auto;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Altezza delle righe di testo. */
  line-height: 1.65;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 343. Pagina del punto di smarrimento. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.location-selector) > p:has(> a),
html body .account-pannello:has(.location-selector) > .account-azioni {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Permette o impedisce ai figli Flexbox di andare a capo. */
  flex-wrap: wrap;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 22px auto;
}

/* 344. Pagina del punto di smarrimento. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.location-selector) > p > a,
html body .account-pannello:has(.location-selector) > .account-azioni > a {
  /* Modalità di impaginazione o visibilità del componente. */
  display: inline-flex;
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: center;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Limite minimo dell’altezza. */
  min-height: 48px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px 20px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Decorazione del testo, ad esempio la sottolineatura. */
  text-decoration: none;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
}

/* 345. Pagina del punto di smarrimento. */
/* Stato al passaggio del puntatore. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.location-selector) > p > a:hover,
html body .account-pannello:has(.location-selector) > .account-azioni > a:hover {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #eef6ff;
  /* Colore dei bordi. */
  border-color: #2563eb;
}

/* 346. Pagina del punto di smarrimento. */
html body #location-form {
  /* Larghezza del componente. */
  width: 100%;
  /* Limite massimo della larghezza. */
  max-width: none;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
}

/* 347. Pagina del punto di smarrimento. */
html body #location-form > p:not(#location-status) {
  /* Spazio interno tra contenuto e bordo. */
  padding: 16px 20px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 14px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
  /* Altezza delle righe di testo. */
  line-height: 1.65;
}

/* 348. Pagina del punto di smarrimento. */
html body #location-map {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Altezza del componente. */
  height: 360px;
  /* Limite minimo dell’altezza. */
  min-height: 320px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 20px 0;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 18px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Gestione del contenuto che supera i limiti del riquadro. */
  overflow: hidden;
  /* Controlla l’isolamento del componente in un proprio contesto di sovrapposizione. */
  isolation: isolate;
}

/* 349. Pagina del punto di smarrimento. */
html body #location-lat,
html body #location-lng {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite minimo dell’altezza. */
  min-height: 48px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px 14px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 11px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Impostazione abbreviata delle proprietà tipografiche. */
  font: inherit;
}

/* 350. Pagina del punto di smarrimento. */
html body #location-gps,
html body #location-form button[type="submit"] {
  /* Limite minimo dell’altezza. */
  min-height: 50px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 13px 20px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #1d4ed8;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #2563eb;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #fff;
  /* Impostazione abbreviata delle proprietà tipografiche. */
  font: inherit;
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Altezza delle righe di testo. */
  line-height: 1.4;
  /* Aspetto del puntatore del mouse. */
  cursor: pointer;
}

/* 351. Pagina del punto di smarrimento. */
html body #location-form button[type="submit"][value="set"] {
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #ff6b35;
  /* Colore dei bordi. */
  border-color: #f36b2c;
}

/* 352. Pagina del punto di smarrimento. */
/* Stato al passaggio del puntatore. */
html body #location-gps:hover:not(:disabled),
html body #location-form button[type="submit"]:hover:not(:disabled) {
  /* Effetto visivo applicato al componente, ad esempio variazione della luminosità. */
  filter: brightness(.92);
}

/* 353. Pagina del punto di smarrimento. */
html body #location-gps:disabled {
  /* Opacità dell’intero componente, da zero a uno. */
  opacity: .55;
  /* Aspetto del puntatore del mouse. */
  cursor: not-allowed;
}

/* 354. Pagina del punto di smarrimento. */
html body #location-status {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 16px 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 14px 18px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Altezza delle righe di testo. */
  line-height: 1.6;
}

/* 355. Pagina del punto di smarrimento. */
html body #location-status:empty {
  /* Modalità di impaginazione o visibilità del componente. */
  display: none;
}

/* 356. Pagina del punto di smarrimento. */
/* Stato di focus per la navigazione da tastiera. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body #location-form :is(button, input):focus-visible,
html body .account-pannello:has(.location-selector) > p > a:focus-visible,
html body .account-pannello:has(.location-selector) > .account-azioni > a:focus-visible {
  /* Contorno esterno che non modifica lo spazio occupato dal componente. */
  outline: 3px solid #2563eb;
  /* Distanza tra il contorno esterno e il bordo. */
  outline-offset: 3px;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 357. Pagina del punto di smarrimento. */
  /* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
  html body .account-pannello:has(.location-selector) > p > a,
  html body .account-pannello:has(.location-selector) > .account-azioni > a {
    /* Larghezza del componente. */
    width: 100%;
  }

  /* 358. Pagina del punto di smarrimento. */
  html body #location-form > p:not(#location-status) {
    /* Spazio interno tra contenuto e bordo. */
    padding: 14px;
  }

  /* 359. Pagina del punto di smarrimento. */
  html body #location-gps,
  html body #location-form button[type="submit"] {
    /* Larghezza del componente. */
    width: 100%;
  }

}

/* 360. Pagina del punto di smarrimento. */
html body .location-selector {
  /* Modalità di impaginazione o visibilità del componente. */
  display: grid;
  /* Numero e dimensioni delle colonne della griglia. */
  grid-template-columns: minmax(0, 1fr) auto;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: end;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px 16px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 24px 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 22px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 18px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
}

/* 361. Pagina del punto di smarrimento. */
html body .location-selector > label {
  /* Colonne occupate dall’elemento nella griglia. */
  grid-column: 1 / -1;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Spessore delle lettere. */
  font-weight: 750;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 1rem;
}

/* 362. Pagina del punto di smarrimento. */
html body #location-listing {
  /* Con border-box, larghezza e altezza comprendono padding e bordo. */
  box-sizing: border-box;
  /* Larghezza del componente. */
  width: 100%;
  /* Limite minimo della larghezza; zero consente di restringere gli elementi. */
  min-width: 0;
  /* Limite minimo dell’altezza. */
  min-height: 50px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 12px 14px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #dbeafe;
  /* Arrotondamento degli angoli. */
  border-radius: 11px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #fff;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Impostazione abbreviata delle proprietà tipografiche. */
  font: inherit;
}

/* 363. Pagina del punto di smarrimento. */
html body .location-selector > button {
  /* Limite minimo dell’altezza. */
  min-height: 50px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 13px 22px;
  /* Gestione degli spazi e degli a capo nel testo. */
  white-space: normal;
}

/* 364. Pagina del punto di smarrimento. */
/* Stato di focus per la navigazione da tastiera. */
html body .location-selector:focus-within {
  /* Colore dei bordi. */
  border-color: #475569;
}

/* 365. Pagina del punto di smarrimento. */
/* Si applica al contenitore quando contiene gli elementi indicati in :has(). */
html body .account-pannello:has(.location-selector) > .pagina-occhiello {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #96501e;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .8rem;
  /* Spessore delle lettere. */
  font-weight: 800;
  /* Spazio aggiuntivo tra le lettere. */
  letter-spacing: .09em;
}

/* 366. Pagina del punto di smarrimento. */
html body #location-form .edit-confirm {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Allineamento dei figli sull’asse trasversale in Flexbox o sull’asse verticale in Grid. */
  align-items: flex-start;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 16px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 12px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: #f8fafc;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Altezza delle righe di testo. */
  line-height: 1.55;
}

/* 367. Pagina del punto di smarrimento. */
html body #location-form .edit-confirm input[type="checkbox"] {
  /* Crescita, riduzione e dimensione iniziale del figlio Flexbox. */
  flex: 0 0 20px;
  /* Larghezza del componente. */
  width: 20px;
  /* Altezza del componente. */
  height: 20px;
  /* Limite minimo dell’altezza. */
  min-height: 20px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 2px 0 0;
  /* Spazio interno tra contenuto e bordo. */
  padding: 0;
  /* Colore dei controlli nativi, come la casella di conferma. */
  accent-color: #1260ae;
}

/* 368. Pagina del punto di smarrimento. */
html body #location-form .azioni-modulo {
  /* Modalità di impaginazione o visibilità del componente. */
  display: flex;
  /* Permette o impedisce ai figli Flexbox di andare a capo. */
  flex-wrap: wrap;
  /* Distribuzione dei figli sull’asse principale Flexbox o sull’asse orizzontale Grid. */
  justify-content: center;
  /* Distanza tra gli elementi di una griglia o di un contenitore Flexbox. */
  gap: 12px;
  /* Spazio esterno sopra al componente. */
  margin-top: 24px;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 369. Pagina del punto di smarrimento. */
  html body .location-selector {
    /* Numero e dimensioni delle colonne della griglia. */
    grid-template-columns: minmax(0, 1fr);
    /* Spazio interno tra contenuto e bordo. */
    padding: 16px;
  }

  /* 370. Pagina del punto di smarrimento. */
  html body .location-selector > button,
  html body #location-form .azioni-modulo > .pulsante {
    /* Larghezza del componente. */
    width: 100%;
  }

}

/* 371. Pagina del punto di smarrimento. */
html body .fm-location-intro {
  /* Limite massimo della larghezza. */
  max-width: 900px;
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 auto 24px;
  /* Spazio interno tra contenuto e bordo. */
  padding: 22px 26px;
  /* Spessore, stile e colore del bordo. */
  border: 1px solid #eef6ff;
  /* Arrotondamento degli angoli. */
  border-radius: 18px;
  /* Sfondo del componente: colore, immagine o gradiente. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Allineamento del testo e dei contenuti inline. */
  text-align: center;
}

/* 372. Pagina del punto di smarrimento. */
html body .fm-location-intro .pagina-occhiello {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0 0 12px;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #96501e;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: .8rem;
  /* Spessore delle lettere. */
  font-weight: 800;
  /* Spazio aggiuntivo tra le lettere. */
  letter-spacing: .09em;
}

/* 373. Pagina del punto di smarrimento. */
html body .fm-location-intro > p:last-child {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 0;
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #14213d;
  /* Dimensione delle lettere; clamp adatta la misura entro limiti minimi e massimi. */
  font-size: 1rem;
  /* Altezza delle righe di testo. */
  line-height: 1.7;
}

/* 374. Pagina del punto di smarrimento. */
html body .fm-location-intro strong {
  /* Colore del testo o di currentColor, usato anche da alcune icone. */
  color: #475569;
}

/* 375. Pagina del punto di smarrimento. */
html body .location-listing-title {
  /* Spazio esterno; auto può centrare il componente. */
  margin: 28px 0 10px;
}

/* 376. Pagina del punto di smarrimento. */
html body .location-listing-area {
  /* Spazio esterno sopra al componente. */
  margin-top: 0;
}

/* Adattamento per gli schermi che rispettano questa condizione. */
@media (max-width: 600px) {

  /* 377. Pagina del punto di smarrimento. */
  html body .fm-location-intro {
    /* Spazio interno tra contenuto e bordo. */
    padding: 18px 16px;
  }

}


/* 378. Conferma avvistamento: tutta l’etichetta è cliccabile grazie al label HTML. */
html body #modulo-avvistamento .sighting-confirm {
  /* Dispone la casella e il testo fianco a fianco. */
  display: flex;
  /* Allinea la casella con l’inizio del testo. */
  align-items: flex-start;
  /* Distanza tra casella e testo. */
  gap: 14px;
  /* Spazio interno del riquadro cliccabile. */
  padding: 18px 20px;
  /* Distanza dagli altri controlli del modulo. */
  margin: 18px 0;
  /* Bordo ben visibile della conferma ancora da selezionare. */
  border: 2px solid #dbeafe;
  /* Angoli coerenti con i pannelli del sito. */
  border-radius: 14px;
  /* Sfondo chiaro che separa la conferma dal resto del modulo. */
  background: #f8fafc;
  /* Colore scuro per la leggibilità del testo. */
  color: #14213d;
  /* Indica che l’intero riquadro può essere cliccato. */
  cursor: pointer;
  /* Altezza delle righe della spiegazione. */
  line-height: 1.55;
  /* Allinea il testo a sinistra anche se il contenitore è centrato. */
  text-align: left;
}

/* 379. Casella di conferma: mantiene il controllo nativo e il requisito obbligatorio. */
html body #modulo-avvistamento .sighting-confirm input[type="checkbox"] {
  /* Mantiene una casella nativa riconoscibile sul dispositivo. */
  appearance: auto;
  /* Impedisce alla casella di crescere o restringersi nel riquadro. */
  flex: 0 0 26px;
  /* Larghezza della casella, distinta dalla larghezza dei campi di testo. */
  width: 26px;
  /* Altezza della casella. */
  height: 26px;
  /* Neutralizza la larghezza minima dei normali campi del modulo. */
  min-width: 26px;
  /* Neutralizza l’altezza minima dei normali campi del modulo. */
  min-height: 26px;
  /* Allinea la casella alla prima riga senza margini laterali. */
  margin: 1px 0 0;
  /* Elimina lo spazio interno previsto per i campi di testo. */
  padding: 0;
  /* Colore blu della spunta selezionata. */
  accent-color: #1260ae;
  /* Indica che la casella può essere cliccata. */
  cursor: pointer;
}

/* 380. Testo della conferma: titolo breve e spiegazione su righe separate. */
html body #modulo-avvistamento .sighting-confirm-copy {
  /* Organizza titolo e spiegazione in verticale. */
  display: grid;
  /* Distanza tra il titolo e la spiegazione. */
  gap: 5px;
  /* Permette al testo di adattarsi agli schermi piccoli. */
  min-width: 0;
}

/* 381. Titolo della conferma, ben distinto dalla spiegazione. */
html body #modulo-avvistamento .sighting-confirm-copy > strong {
  /* Dimensione del titolo della conferma. */
  font-size: 1rem;
  /* Spessore del titolo per renderlo riconoscibile. */
  font-weight: 800;
  /* Colore scuro coerente con il tema. */
  color: #14213d;
}

/* 382. Spiegazione di ciò che viene autorizzato. */
html body #modulo-avvistamento .sighting-confirm-copy > span {
  /* Dimensione della spiegazione, leggibile anche su smartphone. */
  font-size: .95rem;
  /* Spessore normale per distinguere la spiegazione dal titolo. */
  font-weight: 400;
  /* Colore scuro del testo secondario. */
  color: #475569;
}

/* 383. Dopo la spunta, il riquadro cambia colore per confermare visivamente la scelta. */
html body #modulo-avvistamento .sighting-confirm:has(input:checked) {
  /* Bordo blu che evidenzia la scelta effettuata. */
  border-color: #2563eb;
  /* Sfondo leggermente più intenso della conferma selezionata. */
  background: #eef6ff;
}

/* 384. Contorno di focus quando la casella riceve il focus da tastiera. */
html body #modulo-avvistamento .sighting-confirm:has(input:focus-visible) {
  /* Evidenzia il riquadro senza modificarne le dimensioni. */
  outline: 3px solid #2563eb;
  /* Separa il contorno di focus dal bordo. */
  outline-offset: 3px;
}

/* Adattamento del riquadro agli schermi piccoli. */
@media (max-width: 600px) {
  /* 385. Conferma avvistamento su smartphone. */
  html body #modulo-avvistamento .sighting-confirm {
    /* Riduce lo spazio interno conservando una superficie comoda da toccare. */
    padding: 16px;
    /* Riduce la distanza tra spunta e testo per lasciare spazio alla spiegazione. */
    gap: 12px;
  }
}

/* 386. Moderazione: elenco verticale di schede ampie. */
html body .moderazione-griglia {
  /* Mantiene ogni annuncio su una riga distinta. */
  display: grid;
  /* Usa tutta la larghezza disponibile per ciascuna scheda. */
  grid-template-columns: minmax(0, 1fr);
  /* Separa le schede senza accumulare margini. */
  gap: 26px;
  /* Distanza dal titolo dell’elenco. */
  margin-top: 24px;
}

/* 387. Scheda di moderazione con foto: immagine e dati affiancati. */
html body .moderazione-scheda {
  /* Comprende padding e bordi nella larghezza della scheda. */
  box-sizing: border-box;
  /* Occupa la larghezza disponibile. */
  width: 100%;
  /* Permette alla scheda di adattarsi anche a testi lunghi. */
  min-width: 0;
  /* Dispone foto e dati in due colonne. */
  display: grid;
  /* Colonna foto flessibile e colonna dati senza larghezza minima implicita. */
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  /* Allinea foto e dati dall’alto. */
  align-items: start;
  /* Spazio tra foto e contenuto. */
  gap: 28px;
  /* Spazio interno della scheda. */
  padding: 26px;
  /* Fondo luminoso con una lieve sfumatura. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Bordo azzurro coerente con il sito. */
  border: 1px solid #eef6ff;
  /* Accento arancione che identifica la scheda da valutare. */
  border-top: 5px solid #ff6b35;
  /* Angoli arrotondati della scheda. */
  border-radius: 22px;
  /* Ombra discreta per separare la scheda dallo sfondo. */
  box-shadow: 0 10px 30px rgba(31,41,55, .09);
}

/* 388. Senza foto, i dati usano tutta la larghezza invece della sola colonna immagine. */
html body .moderazione-scheda:not(:has(img)) {
  /* Elimina la colonna riservata a una foto assente. */
  grid-template-columns: minmax(0, 1fr);
}

/* 389. Foto dell’annuncio da controllare. */
html body .moderazione-scheda img {
  /* L’immagine occupa la propria colonna. */
  width: 100%;
  /* Impedisce foto troppo alte rispetto ai dati. */
  max-height: 340px;
  /* Mostra la foto intera per consentire di valutarla. */
  object-fit: contain;
  /* Sfondo neutro negli spazi intorno alla foto. */
  background: #eef6ff;
  /* Angoli coerenti con la scheda. */
  border-radius: 16px;
}

/* 390. Contenuto della scheda: evita restringimenti causati da testi lunghi. */
html body .moderazione-corpo {
  /* Consente al contenuto di restringersi dentro la griglia. */
  min-width: 0;
}

/* 391. Titolo dell’annuncio, separato visivamente dai dettagli. */
html body .moderazione-corpo > h3 {
  /* Spazio sotto il titolo, senza margine superiore. */
  margin: 0 0 18px;
  /* Spazio interno del riquadro del titolo. */
  padding: 16px 18px;
  /* Dimensione del titolo adattabile allo schermo. */
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  /* Titolo ben riconoscibile. */
  font-weight: 800;
  /* Altezza delle righe per i nomi lunghi. */
  line-height: 1.35;
  /* Colore blu scuro, leggibile sul fondo chiaro. */
  color: #14213d;
  /* Fondo azzurro leggero. */
  background: #f8fafc;
  /* Angoli arrotondati del titolo. */
  border-radius: 13px;
  /* Spezza eventuali testi molto lunghi per evitare overflow. */
  overflow-wrap: anywhere;
}

/* 392. Dettagli dell’annuncio con spazi regolari e divisori discreti. */
html body .moderazione-corpo > p {
  /* Spazio esterno uniforme. */
  margin: 0;
  /* Spazio interno sopra e sotto ogni gruppo di dati. */
  padding: 12px 4px;
  /* Separa i gruppi di informazioni. */
  border-bottom: 1px solid #eef6ff;
  /* Colore leggibile dei dettagli. */
  color: #14213d;
  /* Dimensione coerente con i testi del sito. */
  font-size: 1rem;
  /* Lascia spazio tra le righe delle descrizioni. */
  line-height: 1.65;
  /* Gestisce indirizzi e contatti lunghi. */
  overflow-wrap: anywhere;
}

/* 393. Azioni di moderazione: spazio tra i pulsanti e dal testo. */
html body .moderazione-form {
  /* Dispone le azioni fianco a fianco quando c’è spazio. */
  display: flex;
  /* Porta i pulsanti su una nuova riga se necessario. */
  flex-wrap: wrap;
  /* Spazio tra le azioni, senza pulsanti attaccati. */
  gap: 14px;
  /* Distanza dai dettagli dell’annuncio. */
  margin-top: 24px;
  /* Allinea i pulsanti in altezza. */
  align-items: stretch;
}

/* 394. Pulsanti della scheda: dimensioni comode e testo sempre leggibile. */
html body .moderazione-form button {
  /* Distribuisce lo spazio tra le azioni e consente di andare a capo. */
  flex: 1 1 240px;
  /* Permette al pulsante di adattarsi alla larghezza dello schermo. */
  min-width: 0;
  /* Altezza minima adatta a clic e tocchi. */
  min-height: 56px;
  /* Spazio interno intorno al testo. */
  padding: 15px 20px;
  /* Angoli arrotondati. */
  border-radius: 13px;
  /* Dimensione leggibile delle azioni. */
  font-size: 1rem;
  /* Testo evidente senza modificarne il contenuto. */
  font-weight: 800;
  /* Altezza delle righe quando il testo va a capo. */
  line-height: 1.4;
  /* Consente testi lunghi su più righe. */
  white-space: normal;
  /* Centra l’etichetta del pulsante. */
  text-align: center;
}

/* 395. Azione principale: approva e invia gli avvisi. */
html body .moderazione-form .pulsante-verde {
  /* Arancione FindMe per l’azione principale. */
  background: linear-gradient(135deg,#ff6b35,#ff8a3d);
  /* Bordo più scuro per rendere il pulsante definito. */
  border: 2px solid #f36b2c;
  /* Testo bianco sul fondo arancione. */
  color: #fff;
  /* Ombra che evidenzia l’azione principale. */
  box-shadow: 0 6px 18px rgba(195, 76, 16, .18);
}

/* 396. Altre azioni: pulsanti chiari e distinti dall’approvazione. */
html body .moderazione-form button:not(.pulsante-verde) {
  /* Fondo bianco per differenziare l’azione secondaria. */
  background: #fff;
  /* Bordo blu ben visibile. */
  border: 2px solid #2563eb;
  /* Testo blu coerente con il bordo. */
  color: #2563eb;
  /* Evita ombre più forti dell’azione principale. */
  box-shadow: none;
}

/* 397. Evidenzia il focus dei controlli da tastiera. */
html body .moderazione-form button:focus-visible {
  /* Contorno visibile senza spostare il layout. */
  outline: 3px solid #2563eb;
  /* Distanza dal bordo del pulsante. */
  outline-offset: 4px;
}

/* 398. Titolo dell’elenco nella pagina moderazione. */
html body .contenitore:has(> .moderazione-griglia) > .sezione-titolo {
  /* Centra il titolo dell’elenco rispetto alle schede. */
  text-align: center;
}

/* Adattamento delle schede di moderazione a smartphone e schermi piccoli. */
@media (max-width: 700px) {
  /* 399. Foto e dettagli su una sola colonna. */
  html body .moderazione-scheda {
    /* Usa una colonna unica sui dispositivi piccoli. */
    grid-template-columns: minmax(0, 1fr);
    /* Spazio interno proporzionato alla larghezza dello schermo. */
    padding: 18px;
    /* Distanza tra foto e dettagli. */
    gap: 18px;
  }

  /* 400. Azioni in righe separate su smartphone. */
  html body .moderazione-form button {
    /* Ogni pulsante occupa una riga intera. */
    flex-basis: 100%;
    /* Conserva tutta la larghezza disponibile. */
    width: 100%;
  }
}

/* 401. Pagina mancata approvazione: introduzione centrata e distinta dal modulo. */
html body .fm-rejection-intro {
  /* Limita la lunghezza delle righe senza restringere il pannello della pagina. */
  max-width: 940px;
  /* Centra l’introduzione e la separa dal modulo. */
  margin: 0 auto 28px;
  /* Spazio interno della banda introduttiva. */
  padding: 24px;
  /* Fondo chiaro con i colori iniziali di FindMe. */
  background: radial-gradient(circle at 88% 12%,rgba(255,209,102,.40),transparent 30%),
    linear-gradient(135deg,#fff3e9 0%,#ffffff 52%,#edf7ff 100%);
  /* Bordo leggero del riquadro. */
  border: 1px solid #eef6ff;
  /* Angoli arrotondati. */
  border-radius: 18px;
  /* Centra titolo e testi della presentazione. */
  text-align: center;
}

/* 402. Etichetta della sezione Moderazione. */
html body .fm-rejection-intro .pagina-occhiello {
  /* Distanza dal titolo principale. */
  margin: 0 0 12px;
  /* Colore blu della sezione. */
  color: #2563eb;
  /* Dimensione dell’etichetta. */
  font-size: .8rem;
  /* Evidenzia l’etichetta. */
  font-weight: 800;
  /* Separa leggermente le lettere. */
  letter-spacing: .09em;
}

/* 403. Titolo breve della decisione di moderazione. */
html body .fm-rejection-intro h1 {
  /* Spazio sotto al titolo. */
  margin: 0 0 16px;
  /* Dimensione adattabile allo schermo. */
  font-size: clamp(1.5rem, 3vw, 2rem);
  /* Colore leggibile del titolo. */
  color: #14213d;
  /* Centra il titolo anche quando altre regole lo allineano a sinistra. */
  text-align: center;
  /* Spazio tra le righe. */
  line-height: 1.3;
}

/* 404. Numero e nome dell’annuncio separati dal titolo della pagina. */
html body .fm-rejection-intro .rejection-listing {
  /* Spazio interno del badge. */
  padding: 10px 16px;
  /* Distanza dalla spiegazione successiva. */
  margin: 0 0 16px;
  /* Fondo bianco del riferimento all’annuncio. */
  background: #fff;
  /* Bordo chiaro del badge. */
  border: 1px solid #eef6ff;
  /* Angoli arrotondati. */
  border-radius: 12px;
  /* Evidenzia il nome senza ingrandire tutto il titolo. */
  font-weight: 750;
  /* Colore blu scuro del nome. */
  color: #14213d;
  /* Gestisce nomi molto lunghi. */
  overflow-wrap: anywhere;
}

/* 405. Spiegazione degli effetti della mancata approvazione. */
html body .fm-rejection-intro > p:last-child {
  /* Evita margini finali dentro il riquadro. */
  margin: 0;
  /* Colore leggibile della spiegazione. */
  color: #475569;
  /* Spazio tra le righe. */
  line-height: 1.65;
}

/* 406. Modulo del motivo della mancata approvazione. */
html body .moderation-rejection-form {
  /* Dispone ogni parte del modulo su una riga separata. */
  display: grid;
  /* Colonna unica che può adattarsi agli schermi piccoli. */
  grid-template-columns: minmax(0, 1fr);
  /* Distanza regolare tra i controlli. */
  gap: 14px;
  /* Limita la lunghezza delle righe del modulo. */
  max-width: 940px;
  /* Centra il modulo dentro il pannello. */
  margin: 0 auto;
}

/* 407. Etichetta sopra il campo del motivo. */
html body .moderation-rejection-form > label[for="rejection-reason"] {
  /* Posiziona l’etichetta come blocco distinto. */
  display: block;
  /* Colore del testo dell’etichetta. */
  color: #14213d;
  /* Evidenzia la domanda. */
  font-weight: 800;
  /* Dimensione leggibile della domanda. */
  font-size: 1.05rem;
  /* Spazio tra le righe se la domanda va a capo. */
  line-height: 1.4;
}

/* 408. Campo del motivo: ampio, leggibile e ridimensionabile in verticale. */
html body #rejection-reason {
  /* Include spazio interno e bordi nella larghezza. */
  box-sizing: border-box;
  /* Occupa tutta la larghezza del modulo. */
  width: 100%;
  /* Permette di adattarsi agli schermi piccoli. */
  min-width: 0;
  /* Altezza comoda per scrivere un motivo completo. */
  min-height: 170px;
  /* Spazio interno intorno al testo digitato. */
  padding: 16px 18px;
  /* Bordo riconoscibile del campo. */
  border: 2px solid #dbeafe;
  /* Angoli coerenti con il sito. */
  border-radius: 14px;
  /* Fondo chiaro che distingue il campo dalla pagina. */
  background: #f8fafc;
  /* Colore leggibile del testo digitato. */
  color: #14213d;
  /* Usa il carattere del sito invece di quello predefinito delle textarea. */
  font: inherit;
  /* Dimensione del testo, leggibile su smartphone. */
  font-size: 1rem;
  /* Altezza delle righe del testo digitato. */
  line-height: 1.6;
  /* Consente di aumentare l’altezza senza alterare la larghezza della pagina. */
  resize: vertical;
}

/* 409. Campo del motivo durante la scrittura. */
html body #rejection-reason:focus {
  /* Bordo blu che indica il campo attivo. */
  border-color: #2563eb;
  /* Contorno chiaro di focus. */
  outline: 3px solid #eef6ff;
  /* Separa il contorno dal bordo. */
  outline-offset: 2px;
}

/* 410. Indicazioni sulla lunghezza e sul contenuto del motivo. */
html body #rejection-help {
  /* Mantiene il testo vicino al campo. */
  margin: 0;
  /* Colore secondario leggibile. */
  color: #64748b;
  /* Dimensione delle indicazioni. */
  font-size: .95rem;
  /* Spazio tra le righe delle indicazioni. */
  line-height: 1.55;
}

/* 411. Conferma della decisione: tutto il riquadro è cliccabile. */
html body .moderation-rejection-form .rejection-confirm {
  /* Dispone spunta e spiegazione fianco a fianco. */
  display: flex;
  /* Allinea la spunta all’inizio del testo. */
  align-items: flex-start;
  /* Spazio tra spunta e testo. */
  gap: 14px;
  /* Spazio interno comodo per il tocco. */
  padding: 18px;
  /* Distanza dalle indicazioni del campo. */
  margin-top: 8px;
  /* Bordo caldo per distinguere la decisione dalle istruzioni. */
  border: 2px solid #efcfad;
  /* Fondo arancione molto chiaro. */
  background: #fff7ed;
  /* Angoli arrotondati. */
  border-radius: 14px;
  /* Indica che il riquadro è cliccabile. */
  cursor: pointer;
  /* Altezza delle righe della spiegazione. */
  line-height: 1.55;
}

/* 412. Spunta nativa della conferma della mancata approvazione. */
html body .moderation-rejection-form .rejection-confirm input[type="checkbox"] {
  /* Mantiene il controllo nativo del dispositivo. */
  appearance: auto;
  /* Impedisce alla spunta di crescere o restringersi. */
  flex: 0 0 26px;
  /* Larghezza della spunta. */
  width: 26px;
  /* Altezza della spunta. */
  height: 26px;
  /* Neutralizza la larghezza minima dei normali campi del modulo. */
  min-width: 26px;
  /* Neutralizza l’altezza minima dei normali campi del modulo. */
  min-height: 26px;
  /* Allinea la spunta alla prima riga di testo. */
  margin: 1px 0 0;
  /* Evita lo spazio interno previsto per i campi di testo. */
  padding: 0;
  /* Arancione per la decisione confermata. */
  accent-color: #c34c10;
  /* Indica che la casella può essere selezionata. */
  cursor: pointer;
}

/* 413. Titolo e spiegazione della conferma su righe distinte. */
html body .rejection-confirm-copy {
  /* Impila titolo e spiegazione. */
  display: grid;
  /* Separa il titolo dalla spiegazione. */
  gap: 5px;
  /* Consente al testo di adattarsi al riquadro. */
  min-width: 0;
  /* Colore scuro del testo. */
  color: #14213d;
}

/* 414. Titolo della conferma. */
html body .rejection-confirm-copy > strong {
  /* Dimensione del titolo. */
  font-size: 1rem;
  /* Titolo ben riconoscibile. */
  font-weight: 800;
}

/* 415. Spiegazione dell’effetto della conferma. */
html body .rejection-confirm-copy > span {
  /* Dimensione leggibile della spiegazione. */
  font-size: .95rem;
  /* Distingue la spiegazione dal titolo in grassetto. */
  font-weight: 400;
  /* Colore del testo secondario. */
  color: #475569;
}

/* 416. Stato selezionato del riquadro di conferma. */
html body .rejection-confirm:has(input:checked) {
  /* Bordo arancione che conferma visivamente la scelta. */
  border-color: #ff6b35;
  /* Fondo più intenso della conferma selezionata. */
  background: #ffecd8;
}

/* 417. Evidenzia la conferma durante la navigazione da tastiera. */
html body .rejection-confirm:has(input:focus-visible) {
  /* Contorno visibile senza cambiare le dimensioni del riquadro. */
  outline: 3px solid #2563eb;
  /* Separa il contorno dal bordo. */
  outline-offset: 3px;
}

/* 418. Conferma e annullamento separati e allineati. */
html body .moderation-rejection-form .rejection-actions {
  /* Dispone le azioni fianco a fianco. */
  display: flex;
  /* Permette alle azioni di andare a capo quando manca spazio. */
  flex-wrap: wrap;
  /* Distanza tra i pulsanti. */
  gap: 14px;
  /* Distanza dal riquadro di conferma. */
  margin: 12px 0 0;
}

/* 419. Dimensioni uniformi delle azioni. */
html body .rejection-actions > .pulsante {
  /* Distribuisce lo spazio in modo uniforme fra le due azioni. */
  flex: 1 1 240px;
  /* Impedisce alle etichette di forzare la larghezza minima. */
  min-width: 0;
  /* Altezza minima comoda per clic e tocchi. */
  min-height: 54px;
  /* Centra il contenuto anche nel collegamento Annulla. */
  display: inline-flex;
  /* Centra verticalmente il testo. */
  align-items: center;
  /* Centra orizzontalmente il testo. */
  justify-content: center;
  /* Spazio interno dei pulsanti. */
  padding: 14px 20px;
  /* Angoli arrotondati. */
  border-radius: 13px;
  /* Dimensione del testo delle azioni. */
  font-size: 1rem;
  /* Consente al testo lungo di andare a capo. */
  white-space: normal;
  /* Allinea al centro eventuali righe multiple. */
  text-align: center;
}

/* 420. Azione di conferma evidenziata in arancione FindMe. */
html body .rejection-actions > button.pulsante-blu {
  /* Colore dell’azione da confermare. */
  background: #ff6b35;
  /* Bordo più scuro del pulsante. */
  border: 2px solid #f36b2c;
  /* Testo bianco leggibile sul fondo arancione. */
  color: #fff;
}

/* 421. Collegamento Annulla distinto dalla conferma. */
html body .rejection-actions > a.pulsante-bordo {
  /* Fondo bianco dell’azione secondaria. */
  background: #fff;
  /* Bordo blu ben visibile. */
  border: 2px solid #2563eb;
  /* Testo blu dell’azione secondaria. */
  color: #2563eb;
  /* Elimina la sottolineatura dal pulsante. */
  text-decoration: none;
}

/* Adattamento del modulo di mancata approvazione su smartphone. */
@media (max-width: 600px) {
  /* 422. Introduzione più compatta. */
  html body .fm-rejection-intro {
    /* Riduce lo spazio interno sugli schermi piccoli. */
    padding: 18px 16px;
  }

  /* 423. Pulsanti su righe separate. */
  html body .rejection-actions > .pulsante {
    /* Ogni azione occupa una riga intera. */
    flex-basis: 100%;
  }
}

/* SEZIONE 424 · Emoji occhio sulle schede degli annunci. */
.scheda-avvistamento > svg {
  /* Nasconde il disegno precedente nel solo pulsante di avvistamento. */
  display: none;
}

/* SEZIONE 425 · Occhio emoji centrato nel pulsante esistente. */
.scheda-avvistamento::before {
  /* Mostra l’emoji occhio con la variante grafica a colori. */
  content: "👁️";
  /* Mantiene l’emoji in un riquadro proprio. */
  display: block;
  /* Usa i caratteri emoji disponibili sul dispositivo. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  /* Rende il simbolo grande e riconoscibile. */
  font-size: 38px;
  /* Evita spazi verticali aggiuntivi. */
  line-height: 1;
  /* Mantiene attivo il collegamento del pulsante sottostante. */
  pointer-events: none;
}

/* SEZIONE 426 · Azioni delle schede: dettagli sopra, condivisione e occhio sotto. */
.scheda-corpo .scheda-azioni {
  /* Dispone le azioni su due colonne senza sovrapporle. */
  display: grid;
  /* Lascia spazio al testo e riserva un riquadro per l’occhio. */
  grid-template-columns: minmax(0, 1fr) 64px;
  /* Allinea i pulsanti alla stessa altezza. */
  align-items: center;
  /* Separa chiaramente le azioni. */
  gap: 12px;
  /* Distanzia i pulsanti dai dati dell’animale. */
  margin-top: 16px;
}

/* SEZIONE 427 · Collegamento ai dettagli della scheda. */
.scheda-corpo .scheda-azioni > a:first-child {
  /* Mantiene il collegamento ai dettagli su una riga separata. */
  grid-column: 1 / -1;
}

/* SEZIONE 428 · Pulsante Condividi ben visibile e utilizzabile al tocco. */
.scheda-corpo .scheda-condividi {
  /* Centra emoji e testo del pulsante. */
  display: inline-flex;
  /* Allinea verticalmente il contenuto. */
  align-items: center;
  /* Centra il contenuto nel riquadro. */
  justify-content: center;
  /* Separa l’emoji dal testo. */
  gap: 8px;
  /* Include bordo e padding nelle dimensioni. */
  box-sizing: border-box;
  /* Mantiene un’area di tocco ampia come il pulsante occhio. */
  min-height: 64px;
  /* Consente alla colonna di adattarsi agli schermi stretti. */
  min-width: 0;
  /* Aggiunge spazio interno al testo. */
  padding: 12px;
  /* Evidenzia il pulsante con il blu FindMe. */
  background: #2563eb;
  /* Mantiene il testo leggibile sul fondo blu. */
  color: #ffffff;
  /* Definisce il contorno del pulsante. */
  border: 2px solid #14213d;
  /* Riprende gli angoli arrotondati del sito. */
  border-radius: 14px;
  /* Rende evidente il testo dell’azione. */
  font-weight: 800;
  /* Mantiene una dimensione leggibile sui telefoni. */
  font-size: 1rem;
  /* Elimina la sottolineatura del collegamento. */
  text-decoration: none;
}

/* SEZIONE 429 · Occhio emoji nel riquadro circolare già previsto. */
.scheda-corpo .scheda-avvistamento {
  /* Centra l’emoji nel pulsante. */
  display: inline-flex;
  /* Allinea verticalmente il simbolo. */
  align-items: center;
  /* Allinea orizzontalmente il simbolo. */
  justify-content: center;
  /* Conserva la larghezza precedente del pulsante. */
  width: 64px;
  /* Conserva un’area di tocco di 64 pixel. */
  min-height: 64px;
  /* Include il bordo nelle dimensioni. */
  box-sizing: border-box;
  /* Mantiene il bordo riconoscibile. */
  border: 2px solid currentColor;
  /* Conserva la forma circolare. */
  border-radius: 50%;
  /* Mantiene lo spazio interno del simbolo. */
  padding: 8px;
  /* Elimina la sottolineatura del collegamento. */
  text-decoration: none;
}

/* SEZIONE 430 · Condivisione a tutta larghezza quando l’avvistamento non è disponibile. */
.scheda-corpo .scheda-azioni:not(:has(.scheda-avvistamento)) .scheda-condividi {
  /* Utilizza entrambe le colonne se il pulsante occhio è assente. */
  grid-column: 1 / -1;
}

/* SEZIONE 431 · Evidenza del pulsante Condividi al passaggio del mouse. */
.scheda-corpo .scheda-condividi:hover {
  /* Scurisce il blu per rendere percepibile l’interazione. */
  background: #14213d;
  /* Conserva il contrasto del testo. */
  color: #ffffff;
}

/* SEZIONE 432 · Evidenza della navigazione da tastiera. */
.scheda-corpo .scheda-condividi:focus-visible {
  /* Evidenzia il pulsante attivo con l’arancio FindMe. */
  outline: 3px solid #ff6b35;
  /* Separa il contorno dal bordo del pulsante. */
  outline-offset: 3px;
}

/* SEZIONE 433 · Animali scomparsi: prima voce del menu, in evidenza. */
html body .navigazione > a.nav-animali-scomparsi {
  /* Evidenzia la ricerca con un fondo rosso evidente. */
  background: #c62828;
  /* Mantiene leggibile il testo sul fondo rosso. */
  color: #ffffff;
  /* Delimita chiaramente il pulsante. */
  border: 2px solid #a61b1b;
  /* Riprende gli angoli arrotondati del menu. */
  border-radius: 12px;
  /* Lascia spazio intorno alla voce principale. */
  padding: 11px 16px;
  /* Mantiene una buona area di tocco. */
  min-height: 48px;
  /* Include bordo e spazio interno nelle dimensioni. */
  box-sizing: border-box;
  /* Rende evidente la scritta. */
  font-weight: 800;
  /* Conserva una dimensione coerente con le altre voci. */
  font-size: 1rem;
  /* Centra la scritta verticalmente. */
  align-items: center;
  /* Dà risalto al pulsante senza cambiare le misure delle pagine. */
  box-shadow: 0 4px 12px rgba(198, 40, 40, .25);
}

/* SEZIONE 434 · Icona riconoscibile davanti alla voce principale. */
html body .navigazione > a.nav-animali-scomparsi::before {
  /* Usa la zampa come simbolo della ricerca. */
  content: "🐾";
  /* Mantiene l’icona evidente e proporzionata. */
  font-size: 1.2rem;
}

/* SEZIONE 435 · Interazione del pulsante Animali scomparsi. */
html body .navigazione > a.nav-animali-scomparsi:hover {
  /* Scurisce il rosso al passaggio del mouse. */
  background: #a61b1b;
  /* Mantiene il testo bianco durante l’interazione. */
  color: #ffffff;
}

/* SEZIONE 436 · Evidenza per chi naviga con la tastiera. */
html body .navigazione > a.nav-animali-scomparsi:focus-visible {
  /* Evidenzia il collegamento selezionato. */
  outline: 3px solid #2563eb;
  /* Separa il contorno dal pulsante. */
  outline-offset: 3px;
}


/* SEZIONE 437 · Spazio stabile per il pulsante Account in entrambe le sessioni. */
html body .navigazione > .nav-gruppo:has(a[href^="login.php"]) {
  /* Riserva la stessa larghezza prima e dopo la verifica dell’accesso. */
  flex: 0 0 200px;
  /* Mantiene la larghezza indipendente dalla dicitura. */
  width: 200px;
  /* Include lo spazio interno nelle dimensioni. */
  box-sizing: border-box;
}

html body .navigazione > .nav-gruppo:has(a[href^="login.php"]) > summary {
  /* Utilizza tutto lo spazio già riservato. */
  width: 100%;
  /* Include lo spazio interno nella larghezza. */
  box-sizing: border-box;
  /* Evita che la dicitura cambi l’altezza del menu. */
  white-space: nowrap;
}

/* SEZIONE 438 · Due azioni principali con rosso semitrasparente. */
html body .navigazione > a.nav-pubblica,
html body .navigazione > a.nav-animali-scomparsi {
  /* Colora delicatamente il fondo lasciando visibile la base sottostante. */
  background: rgba(198, 40, 40, .14);
  /* Mantiene il testo leggibile sul fondo chiaro. */
  color: #8b2424;
  /* Delimita i pulsanti con un bordo rosso semitrasparente. */
  border: 1px solid rgba(198, 40, 40, .30);
  /* Uniforma l’altezza delle due azioni. */
  min-height: 48px;
  /* Include bordi e spazi interni nell’altezza. */
  box-sizing: border-box;
  /* Elimina l’ombra forte della versione precedente. */
  box-shadow: none;
  /* Rimuove lo spazio riservato in precedenza al pulsante finale. */
  margin-left: 0;
  /* Uniforma le scritte alle altre voci del menu. */
  font-size: .91rem;
}

html body .navigazione > a.nav-animali-scomparsi {
  /* Usa il peso normale richiesto, senza grassetto. */
  font-weight: 400;
}

html body .navigazione > a.nav-pubblica {
  /* Mantiene riconoscibile l’azione principale senza un fondo opaco. */
  font-weight: 600;
}

html body .navigazione > a.nav-pubblica:hover,
html body .navigazione > a.nav-animali-scomparsi:hover,
html body .navigazione > a.nav-animali-scomparsi[aria-current="page"],
html body .navigazione > a.nav-pubblica[aria-current="page"] {
  /* Evidenzia l’interazione conservando la trasparenza. */
  background: rgba(198, 40, 40, .22);
  /* Conserva il contrasto del testo. */
  color: #8b2424;
}

/* SEZIONE 439 · Esci è l’ultima voce della tendina Account. */
html body .nav-tendina > form.nav-logout {
  /* Separa l’uscita dai collegamenti del profilo. */
  margin-top: 8px;
  /* Aggiunge una distanza dal bordo superiore di separazione. */
  padding-top: 8px;
  /* Distingue l’uscita dalle altre azioni dell’account. */
  border-top: 1px solid #eef6ff;
  /* Occupa la larghezza della tendina. */
  width: 100%;
}

html body .nav-tendina > form.nav-logout > button {
  /* Allinea il pulsante alle altre voci della tendina. */
  width: 100%;
  /* Include bordo e spazio interno nella larghezza. */
  box-sizing: border-box;
  /* Allinea la scritta Esci ai collegamenti soprastanti. */
  text-align: left;
}

/* SEZIONE 440 · Account si adatta al menu verticale su smartphone. */
@media (max-width:1000px) {
  html body .navigazione > .nav-gruppo:has(a[href^="login.php"]) {
    /* Evita che la larghezza desktop diventi altezza nel menu verticale. */
    flex: 0 0 auto;
    /* Allinea la voce Account alle altre voci del menu. */
    width: 100%;
  }
}


/* SEZIONE 441 · Analisi è un sottomenu interno all’Account. */
html body .nav-tendina .nav-sottomenu {
  /* Separa il gruppo riservato dalle voci del profilo. */
  margin-top: 6px;
  /* Delimita il gruppo senza creare una tendina sovrapposta. */
  border-top: 1px solid #eef6ff;
  /* Lascia spazio sopra il comando Analisi. */
  padding-top: 6px;
}

html body .nav-sottomenu > .nav-sottomenu-titolo {
  /* Offre un’area di tocco comoda su smartphone. */
  min-height: 44px;
  /* Allinea il comando alle altre voci della tendina. */
  padding: 12px;
  /* Mantiene il colore FindMe delle voci secondarie. */
  color: #14213d;
  /* Rende riconoscibile il titolo del gruppo. */
  font-weight: 700;
  /* Riprende gli angoli delle voci del menu. */
  border-radius: 8px;
  /* Separa il titolo dai collegamenti sottostanti. */
  margin: 0 0 6px;
  /* Include lo spazio interno nelle dimensioni. */
  box-sizing: border-box;
}

html body .nav-sottomenu > .nav-sottomenu-titolo::before {
  /* Identifica visivamente il gruppo Analisi. */
  content: "🧪 ";
}

html body .nav-sottomenu > .nav-sottomenu-titolo:hover,
html body .nav-sottomenu > .nav-sottomenu-titolo {
  /* Evidenzia il gruppo aperto o sotto il puntatore. */
  background: #eef6ff;
}

html body .nav-sottomenu-voci {
  /* Indenta i collegamenti per mostrare la gerarchia. */
  padding-left: 12px;
  /* Separa visivamente il gruppo dalle voci principali. */
  border-left: 2px solid #eef6ff;
  /* Allinea il bordo all’interno della tendina. */
  margin-left: 12px;
}

html body .nav-tendina:has(.nav-sottomenu) {
  /* Mantiene raggiungibile Esci anche con Analisi aperto su schermi bassi. */
  max-height: 70vh;
  /* Permette di scorrere i collegamenti senza allargare la tendina. */
  overflow-y: auto;
  /* Include bordi e spazi interni nella larghezza. */
  box-sizing: border-box;
}

/* SEZIONE 442 · Ricerca utenti ampia, leggibile e con azioni separate. */
html body.fm-utenti .utenti-filtri {
  /* Allinea campo e azioni in una griglia stabile. */
  display: grid;
  /* Riserva lo spazio principale alla ricerca e distingue le due azioni. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  /* Separa etichetta, campo e pulsanti. */
  gap: 12px;
  /* Allinea tutte le azioni alla base del campo. */
  align-items: end;
  /* Estende il riquadro alla larghezza del contenitore del sito. */
  width: 100%;
  /* Include bordo e spazio interno nella larghezza. */
  box-sizing: border-box;
  /* Dà spazio al contenuto del riquadro. */
  padding: 24px;
  /* Stacca la ricerca dal conteggio degli account. */
  margin-bottom: 22px;
  /* Riprende il fondo chiaro delle schede FindMe. */
  background: #ffffff;
  /* Delimita delicatamente il riquadro. */
  border: 1px solid #eef6ff;
  /* Riprende gli angoli arrotondati del sito. */
  border-radius: 20px;
  /* Evidenzia la ricerca senza appesantire la pagina. */
  box-shadow: 0 8px 24px rgba(31,41,55, .06);
}

html body.fm-utenti .utenti-filtri > label {
  /* Posiziona l’etichetta sopra il campo e i pulsanti. */
  grid-column: 1 / -1;
  /* Mantiene leggibile il nome del campo. */
  font-weight: 700;
  /* Riprende il blu dei titoli FindMe. */
  color: #14213d;
}

html body.fm-utenti .utenti-filtri > input {
  /* Riempie lo spazio disponibile per la ricerca. */
  width: 100%;
  /* Consente di adattarsi anche agli schermi stretti. */
  min-width: 0;
  /* Rende il campo comodo da toccare. */
  min-height: 54px;
  /* Separa il testo dai bordi. */
  padding: 14px 16px;
  /* Include bordo e spazio interno nella larghezza. */
  box-sizing: border-box;
  /* Uniforma il carattere al resto del sito. */
  font: inherit;
  /* Mantiene leggibile il testo ed evita lo zoom automatico su iPhone. */
  font-size: 16px;
  /* Usa il colore del testo FindMe. */
  color: #14213d;
  /* Riprende il fondo azzurro chiaro dei campi. */
  background: #f8fafc;
  /* Rende riconoscibile l’area di inserimento. */
  border: 1px solid #dbeafe;
  /* Riprende gli angoli dei pulsanti. */
  border-radius: 12px;
}

html body.fm-utenti .utenti-filtri > input:focus-visible {
  /* Evidenzia il campo durante la scrittura da tastiera. */
  outline: 3px solid #2563eb;
  /* Separa il contorno dal bordo del campo. */
  outline-offset: 2px;
}

html body.fm-utenti .utenti-filtri > button,
html body.fm-utenti .utenti-mostra-tutti {
  /* Uniforma l’altezza delle due azioni al campo. */
  min-height: 54px;
  /* Centra testo e icona nella stessa riga. */
  display: inline-flex;
  /* Allinea verticalmente il contenuto. */
  align-items: center;
  /* Centra il contenuto del pulsante. */
  justify-content: center;
  /* Separa l’icona dal testo. */
  gap: 8px;
  /* Lascia spazio intorno alle scritte. */
  padding: 12px 20px;
  /* Include bordo e spazio interno nelle dimensioni. */
  box-sizing: border-box;
  /* Mantiene il carattere uniforme. */
  font: inherit;
  /* Rende evidenti le azioni. */
  font-weight: 700;
  /* Riprende gli angoli dei campi. */
  border-radius: 12px;
  /* Evita il ritorno a capo nei pulsanti desktop. */
  white-space: nowrap;
  /* Presenta Mostra tutti come un pulsante. */
  text-decoration: none;
}

html body.fm-utenti .utenti-filtri > button::before {
  /* Identifica la ricerca con una lente. */
  content: "🔍";
}

html body.fm-utenti .utenti-mostra-tutti {
  /* Distingue il ripristino dal pulsante principale Cerca. */
  background: #f8fafc;
  /* Mantiene leggibile l’azione secondaria. */
  color: #14213d;
  /* Delimita il pulsante secondario. */
  border: 1px solid #dbeafe;
}

html body.fm-utenti .utenti-mostra-tutti::before {
  /* Identifica il ripristino dell’elenco completo. */
  content: "↻";
}

html body.fm-utenti .utenti-mostra-tutti:hover {
  /* Evidenzia il ripristino sotto il puntatore. */
  background: #eef6ff;
}

html body.fm-utenti .utenti-mostra-tutti:focus-visible {
  /* Evidenzia il collegamento durante la navigazione da tastiera. */
  outline: 3px solid #2563eb;
  /* Separa il contorno dal bordo. */
  outline-offset: 2px;
}

/* SEZIONE 443 · Ricerca utenti su smartphone. */
@media (max-width:650px) {
  html body.fm-utenti .utenti-filtri {
    /* Affianca soltanto le due azioni sotto il campo. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Riduce lo spazio interno senza restringere il campo. */
    padding: 18px;
  }

  html body.fm-utenti .utenti-filtri > input {
    /* Riserva tutta la larghezza alla ricerca. */
    grid-column: 1 / -1;
  }

  html body.fm-utenti .utenti-filtri > button,
  html body.fm-utenti .utenti-mostra-tutti {
    /* Mantiene i pulsanti entro le rispettive colonne. */
    min-width: 0;
    /* Riduce lo spazio orizzontale per schermi piccoli. */
    padding-inline: 8px;
    /* Consente al testo di adattarsi quando necessario. */
    white-space: normal;
    /* Centra eventuali righe aggiuntive. */
    text-align: center;
  }
}


/* SEZIONE 444 · Account mantiene la propria icona anche se contiene Analisi. */
html body .navigazione > .nav-gruppo > summary[data-account-label]::before {
  /* Identifica il profilo senza ereditare l’icona del sottomenu Analisi. */
  content: "👤";
}

/* SEZIONE 445 · Barra inferiore: elementi allineati, altezza massima 2 cm CSS. */
html body .piede {
  /* Include spazi interni e bordo nell’altezza della barra. */
  box-sizing: border-box;
  /* Mantiene compatta la barra inferiore. */
  max-height: 2cm;
  /* Elimina lo spazio verticale del vecchio footer. */
  padding-block: 0;
  /* Mantiene una separazione discreta dal contenuto. */
  border-top: 1px solid rgba(255,255,255,.12);
  /* Stabilizza l’altezza del testo. */
  line-height: 1.3;
}

html body .piede-interno {
  /* Dedica uno spazio distinto a marchio, payoff, collegamenti e copyright. */
  display: grid;
  /* Evita che il copyright sottragga tutta la larghezza alle altre voci. */
  grid-template-columns: auto minmax(0,1fr) auto auto;
  /* Centra tutti gli elementi sulla stessa linea. */
  align-items: center;
  /* Separa i gruppi con uno spazio uniforme. */
  gap: 24px;
  /* Annulla l’altezza minima ereditata. */
  min-height: 0;
  /* Lascia una fascia sottile intorno al contenuto. */
  padding-block: 8px;
  /* Include lo spazio interno nelle misure della barra. */
  box-sizing: border-box;
}

html body .piede-marchio {
  /* Mantiene leggibile il marchio senza ingrandire la barra. */
  font-size: 21px;
  /* Allinea la scritta alle altre voci. */
  line-height: 1;
  /* Evita la compressione del marchio. */
  white-space: nowrap;
}

html body .piede-interno p {
  /* Annulla i margini dei paragrafi. */
  margin: 0;
  /* Mantiene uniformi le scritte secondarie. */
  font-size: 13px;
}

html body .piede-interno > p:not(.piede-copyright) {
  /* Mantiene il payoff su una sola riga negli schermi ampi. */
  white-space: nowrap;
  /* Distingue il payoff dai collegamenti principali. */
  color: #c7d6e5;
}

html body .piede-interno nav {
  /* Allinea orizzontalmente i collegamenti. */
  display: flex;
  /* Mantiene il gruppo compatto su una riga. */
  flex-wrap: nowrap;
  /* Centra verticalmente ogni collegamento. */
  align-items: center;
  /* Separa le voci in modo uniforme. */
  gap: 20px;
}

html body .piede-interno nav a {
  /* Mantiene un’area cliccabile comoda anche sul telefono. */
  min-height: 44px;
  /* Centra la scritta nell’area cliccabile. */
  display: inline-flex;
  /* Allinea verticalmente il collegamento. */
  align-items: center;
  /* Uniforma le dimensioni delle voci. */
  font-size: 13px;
  /* Evita righe spezzate nei collegamenti. */
  white-space: nowrap;
  /* Elimina gli spazi verticali ereditati. */
  padding-block: 0;
  /* Elimina eventuali margini del collegamento. */
  margin: 0;
}

html body .piede-interno .piede-copyright {
  /* Il copyright occupa soltanto lo spazio del proprio testo. */
  width: auto;
  /* Rimuove la linea della precedente disposizione su due sezioni. */
  border: 0;
  /* Rimuove lo spazio che disallineava il copyright. */
  padding: 0;
  /* Mantiene il copyright nella stessa riga. */
  white-space: nowrap;
  /* Allinea il copyright al margine destro. */
  text-align: right;
  /* Presenta il copyright come informazione secondaria. */
  color: #c7d6e5;
}

/* SEZIONE 446 · Schermi intermedi: mantiene la barra su una sola riga. */
@media (max-width: 1000px) {
  html body .piede-interno {
    /* Distribuisce marchio, collegamenti e copyright senza compressioni. */
    grid-template-columns: auto minmax(0,1fr) auto;
    /* Riduce soltanto lo spazio fra i gruppi. */
    gap: 16px;
  }

  html body .piede-interno > p:not(.piede-copyright) {
    /* Riserva lo spazio ai collegamenti negli schermi intermedi. */
    display: none;
  }

  html body .piede-interno nav {
    /* Centra il gruppo fra marchio e copyright. */
    justify-content: center;
    /* Mantiene leggibili tutte le voci. */
    gap: 14px;
  }
}

/* SEZIONE 447 · Smartphone: due righe ordinate entro i 2 cm. */
@media (max-width: 600px) {
  html body .piede-interno {
    /* Affianca marchio e copyright nella prima riga. */
    grid-template-columns: minmax(0,1fr) auto;
    /* Non aggiunge spazio verticale fra le due righe. */
    gap: 0 12px;
    /* Mantiene le due righe entro l’altezza richiesta. */
    padding-block: 4px;
  }

  html body .piede-marchio {
    /* Posiziona il marchio a sinistra nella prima riga. */
    grid-column: 1;
    /* Mantiene il marchio sopra i collegamenti. */
    grid-row: 1;
    /* Contiene l’altezza della prima riga. */
    font-size: 20px;
  }

  html body .piede-interno .piede-copyright {
    /* Posiziona il copyright a destra nella prima riga. */
    grid-column: 2;
    /* Mantiene il copyright sopra i collegamenti. */
    grid-row: 1;
  }

  html body .piede-interno nav {
    /* Riserva tutta la seconda riga ai collegamenti. */
    grid-column: 1 / -1;
    /* Mantiene i collegamenti sotto marchio e copyright. */
    grid-row: 2;
    /* Centra tutte le voci nella seconda riga. */
    justify-content: center;
    /* Separa i collegamenti anche sui telefoni stretti. */
    gap: 14px;
  }
}

html body .piede-interno nav a[hidden] {
  /* Conserva la visibilità delle voci riservate decisa dal motore. */
  display: none;
}

/* SEZIONE 448 · Mostra password: casella nativa compatta e testo affiancato. */
html body form:has(input[type="password"]) input[type="checkbox"],
html body form:has(input[autocomplete="current-password"]) input[type="checkbox"],
html body form:has(input[autocomplete="new-password"]) input[type="checkbox"] {
  /* Mantiene la casella nella stessa riga della scritta. */
  display: inline-block;
  /* Impedisce di ereditare la larghezza dei campi di testo. */
  width: 22px;
  /* Contiene l’altezza della casella. */
  height: 22px;
  /* Annulla l’altezza minima ereditata dai campi password. */
  min-height: 22px;
  /* Evita che Flexbox ingrandisca o restringa la casella. */
  flex: 0 0 22px;
  /* Elimina lo spazio interno ereditato dai campi. */
  padding: 0;
  /* Elimina la centratura automatica della casella. */
  margin: 0 8px 0 0;
  /* Allinea la casella al centro della scritta. */
  vertical-align: middle;
  /* Conserva il controllo nativo accessibile da tastiera. */
  appearance: auto;
  /* Evidenzia la selezione con il colore FindMe. */
  accent-color: #2563eb;
}

html body form:has(input[type="password"]) label:has(> input[type="checkbox"]),
html body form:has(input[autocomplete="current-password"]) label:has(> input[type="checkbox"]),
html body form:has(input[autocomplete="new-password"]) label:has(> input[type="checkbox"]) {
  /* Mantiene casella e testo affiancati in un’unica area cliccabile. */
  display: flex;
  /* Centra verticalmente la casella rispetto al testo. */
  align-items: center;
  /* Separa il controllo dalla descrizione. */
  gap: 10px;
  /* Rende riconoscibile il comando senza allargarlo inutilmente. */
  width: fit-content;
  /* Consente al riquadro di adattarsi allo smartphone. */
  max-width: 100%;
  /* Offre un’area comoda da toccare. */
  min-height: 48px;
  /* Include spazi interni e bordo nelle dimensioni del riquadro. */
  box-sizing: border-box;
  /* Lascia spazio intorno a casella e testo. */
  padding: 12px 16px;
  /* Mantiene il riquadro allineato ai campi del modulo. */
  margin: 8px 0 16px;
  /* Riprende lo sfondo delicato del sito. */
  background: linear-gradient(135deg,#eef6ff,#f8fbff);
  /* Delimita chiaramente il comando. */
  border: 1px solid #bfdbfe;
  /* Riprende gli angoli arrotondati dei campi. */
  border-radius: 12px;
  /* Mantiene leggibile la descrizione. */
  color: #1f2937;
  /* Evita scritte troppo piccole su smartphone. */
  font-size: 16px;
  /* Rende riconoscibile l’azione. */
  font-weight: 650;
  /* Stabilizza l’altezza delle eventuali righe. */
  line-height: 1.4;
  /* Indica che tutta l’etichetta è cliccabile. */
  cursor: pointer;
}

/* Il campo può diventare type=text: autocomplete mantiene stabile lo stile. */
html body form:has(input[autocomplete="current-password"]) label:has(> input[type="checkbox"]:checked),
html body form:has(input[autocomplete="new-password"]) label:has(> input[type="checkbox"]:checked),
html body form:has(input[type="password"]) label:has(> input[type="checkbox"]:checked) {
  /* Evidenzia quando il comando è attivo. */
  background: #dbeafe;
  /* Rende ben visibile il bordo dello stato selezionato. */
  border-color: #2563eb;
}

/* SEZIONE 449 · Pulsanti secondari riconoscibili anche sulle schede bianche. */
html body :is(.pulsante-chiaro, .pulsante-bordo, .pulsante-secondario):not(.hero .pulsante-chiaro),
html body .utenti-mostra-tutti {
  /* Il fondo azzurro distingue il pulsante dalla scheda bianca. */
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  /* Il bordo blu definisce chiaramente l’area dell’azione. */
  border-color: #7aa5ec !important;
  /* Il testo scuro resta leggibile su entrambe le estremità del gradiente. */
  color: #14213d !important;
  /* Una lieve ombra separa il pulsante dal piano della pagina. */
  box-shadow: 0 3px 10px rgba(37,99,235,.12);
}

html body :is(.pulsante-chiaro, .pulsante-bordo, .pulsante-secondario):not(.hero .pulsante-chiaro):hover,
html body .utenti-mostra-tutti:hover {
  /* Rinforza lo sfondo durante il passaggio del puntatore. */
  background: #bfdbfe !important;
  /* Evidenzia il bordo senza modificare le dimensioni del pulsante. */
  border-color: #2563eb !important;
  /* Conserva il contrasto del testo nello stato di passaggio. */
  color: #14213d !important;
}

html body :is(.pulsante-chiaro, .pulsante-bordo, .pulsante-secondario):not(.hero .pulsante-chiaro):focus-visible,
html body .utenti-mostra-tutti:focus-visible {
  /* Rende riconoscibile il pulsante selezionato dalla tastiera. */
  outline: 3px solid #2563eb;
  /* Separa il contorno dal bordo del pulsante. */
  outline-offset: 3px;
}

html body :is(.pulsante-chiaro, .pulsante-bordo, .pulsante-secondario):disabled {
  /* Mantiene lo stato disabilitato distinto da quello disponibile. */
  box-shadow: none;
}

/* 450. Pulsante posizione dell’avvistamento: grande e centrato. */
html body #sighting-position {
  /* Centra il testo all’interno del rettangolo. */
  display: flex;
  /* Allineamento orizzontale del testo. */
  justify-content: center;
  /* Allineamento verticale del testo. */
  align-items: center;
  /* Rende evidente il pulsante senza occupare tutta la riga. */
  width: 420px;
  /* Mantiene il pulsante entro la cornice anche su smartphone. */
  max-width: 100%;
  /* Include bordo e spazi interni nella larghezza. */
  box-sizing: border-box;
  /* Aumenta l’area da toccare. */
  min-height: 80px;
  /* Centra il rettangolo e lo distanzia dai contenuti vicini. */
  margin: 18px auto 22px;
  /* Lascia spazio intorno alla scritta. */
  padding: 20px 24px;
  /* Usa angoli leggermente arrotondati. */
  border-radius: 12px;
  /* Evidenzia il contorno. */
  border: 2px solid #1d4ed8;
  /* Conserva il gradiente blu FindMe. */
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  /* Mantiene il testo leggibile sullo sfondo blu. */
  color: #ffffff;
  /* Rende più grande la scritta. */
  font-size: 21px;
  /* Evidenzia l’azione. */
  font-weight: 700;
  /* Evita righe troppo distanti su schermi stretti. */
  line-height: 1.3;
  /* Centra anche il testo eventualmente disposto su due righe. */
  text-align: center;
  /* Separa visivamente il pulsante dal riquadro. */
  box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
}

/* 451. Evidenzia la posizione quando si usa la tastiera. */
html body #sighting-position:focus-visible {
  /* Mostra un contorno esterno ben riconoscibile. */
  outline: 3px solid #14213d;
  /* Separa il contorno dal pulsante. */
  outline-offset: 4px;
}

/* 452. Allinea i tre pulsanti delle schede. */
html body .scheda .scheda-azioni {
  /* Dispone le azioni sulla stessa riga. */
  display: flex;
  /* Allinea i pulsanti al centro verticalmente. */
  align-items: center !important;
  /* Lascia spazio tra le tre azioni. */
  gap: 8px !important;
}

/* 453. Dimensioni comuni dei pulsanti Dettagli e Condividi. */
html body .scheda-azioni :is(.fm-scheda-dettagli, .fm-scheda-condividi) {
  /* Centra la scritta nel pulsante. */
  display: inline-flex;
  /* Centra il testo orizzontalmente. */
  justify-content: center;
  /* Centra il testo verticalmente. */
  align-items: center;
  /* Distribuisce lo spazio tra i due pulsanti. */
  flex: 1 1 0;
  /* Permette di adattarsi anche alle schede strette. */
  min-width: 0;
  /* Mantiene un’area comoda da toccare. */
  min-height: 48px;
  /* Include gli spazi interni nelle dimensioni. */
  box-sizing: border-box;
  /* Lascia spazio attorno alla scritta. */
  padding: 10px 8px;
  /* Disegna un bordo ben visibile. */
  border: 1px solid #93c5fd;
  /* Arrotonda leggermente il rettangolo. */
  border-radius: 10px;
  /* Usa uno sfondo azzurro per Dettagli. */
  background: #dbeafe;
  /* Usa testo scuro e leggibile. */
  color: #14213d;
  /* Mantiene la scritta proporzionata alla scheda. */
  font-size: 14px;
  /* Evidenzia l’azione. */
  font-weight: 650;
  /* Mantiene una riga compatta. */
  line-height: 1.3;
  /* Evita la sottolineatura dei normali link. */
  text-decoration: none;
}

/* 454. Condivisione verde semitrasparente. */
html body .scheda-azioni .fm-scheda-condividi {
  /* Verde trasparente sullo sfondo della scheda. */
  background: rgba(34, 197, 94, .18);
  /* Rende riconoscibile il contorno verde. */
  border-color: rgba(22, 163, 74, .55);
  /* Mantiene il testo verde scuro leggibile. */
  color: #14532d;
}

/* 455. Mantiene spazio per l’occhio anche su smartphone. */
html body .scheda-azioni:has(.fm-scheda-condividi) .scheda-avvistamento {
  /* Riserva una larghezza fissa all’avvistamento. */
  flex: 0 0 48px !important;
  /* Riduce il cerchio alla dimensione degli altri pulsanti. */
  width: 48px !important;
  /* Allinea le altezze delle azioni. */
  min-height: 48px !important;
}

/* 456. Evidenzia la navigazione da tastiera. */
html body .scheda-azioni :is(.fm-scheda-dettagli, .fm-scheda-condividi):focus-visible {
  /* Disegna il contorno di selezione. */
  outline: 3px solid #2563eb;
  /* Separa il contorno dal bordo. */
  outline-offset: 3px;
}

/* 457. Dettagli e Condividi sopra, avvistamento centrato sotto. */
html body .scheda .scheda-azioni {
  /* Dispone i pulsanti in una griglia di due colonne. */
  display: grid !important;
  /* Assegna lo stesso spazio alle prime due azioni. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Separa le righe e i pulsanti. */
  gap: 12px 8px !important;
}

/* 458. Pulsante rosso semitrasparente per segnalare l’avvistamento. */
html body .scheda .scheda-azioni .scheda-avvistamento {
  /* Posiziona il pulsante sotto entrambe le colonne. */
  grid-column: 1 / -1;
  /* Centra il pulsante nella seconda riga. */
  justify-self: center;
  /* Imposta una larghezza proporzionata alla scheda. */
  width: 210px !important;
  /* Mantiene il pulsante entro la scheda su smartphone. */
  max-width: 100%;
  /* Mantiene un’area comoda da toccare. */
  min-height: 48px !important;
  /* Sostituisce la forma circolare con un rettangolo arrotondato. */
  border-radius: 10px !important;
  /* Imposta gli spazi interni del nuovo pulsante. */
  padding: 12px 16px !important;
  /* Usa rosso semitrasparente sullo sfondo della scheda. */
  background: rgba(239, 68, 68, .16);
  /* Evidenzia il contorno rosso. */
  border: 1px solid rgba(220, 38, 38, .55) !important;
  /* Rende leggibile il testo sul fondo chiaro. */
  color: #991b1b;
  /* Mantiene la scritta proporzionata agli altri pulsanti. */
  font-size: 14px;
  /* Evidenzia l’azione. */
  font-weight: 700;
  /* Centra la scritta. */
  text-align: center;
  /* Mantiene l’altezza della riga compatta. */
  line-height: 1.3;
}

/* 459. Avvistamento selezionato con la tastiera. */
html body .scheda-azioni .fm-scheda-io-visto:focus-visible {
  /* Evidenzia il pulsante attivo. */
  outline: 3px solid #991b1b;
  /* Separa il contorno dal bordo. */
  outline-offset: 3px;
}

/* 460. Mantiene la segnalazione sulla seconda riga. */
html body .scheda .scheda-azioni .scheda-avvistamento {
  /* Impone la seconda riga anche se le azioni hanno altre regole. */
  grid-row: 2;
  /* Rimuove margini precedenti che spostano il pulsante. */
  margin: 0 !important;
  /* Mantiene la scritta su una sola riga. */
  white-space: nowrap;
}

/* 461. Rimuove le vecchie icone dell’occhio contenute nel pulsante. */
html body .scheda .scheda-azioni .scheda-avvistamento :is(svg, img) {
  /* Nasconde la precedente icona grafica. */
  display: none !important;
}

/* 462. Dettagli occupa solo la prima colonna della prima riga. */
html body .scheda .scheda-azioni > a:first-child {
  /* Annulla la vecchia regola che occupava entrambe le colonne. */
  grid-column: 1 !important;
  /* Mantiene Dettagli nella riga superiore. */
  grid-row: 1 !important;
}

/* 463. Condividi accanto a Dettagli, nella riga superiore. */
html body .scheda .scheda-azioni :is(.fm-scheda-condividi, .scheda-condividi) {
  /* Assegna la seconda colonna alla condivisione. */
  grid-column: 2 !important;
  /* Impone la stessa riga di Dettagli. */
  grid-row: 1 !important;
  /* Rende uguali le altezze dei primi due pulsanti. */
  min-height: 48px;
  /* Usa il verde semitrasparente richiesto. */
  background: rgba(34, 197, 94, .18);
  /* Mantiene leggibile il testo. */
  color: #14532d;
  /* Evidenzia il contorno verde. */
  border: 1px solid rgba(22, 163, 74, .55);
}

/* 464. Avvistamento da solo sotto le due azioni. */
html body .scheda .scheda-azioni .scheda-avvistamento {
  /* Riserva entrambe le colonne della seconda riga. */
  grid-column: 1 / -1 !important;
  /* Impone la seconda riga. */
  grid-row: 2 !important;
  /* Centra il pulsante rispetto all’intera scheda. */
  justify-self: center !important;
}

/* 465. Elimina l’occhio inserito dalle vecchie regole CSS. */
html body .scheda .scheda-azioni .scheda-avvistamento::before,
html body .scheda .scheda-azioni .scheda-avvistamento::after {
  /* Rimuove le icone generate senza modificare il collegamento. */
  content: none !important;
  /* Elimina anche lo spazio riservato ai simboli. */
  display: none !important;
}

/* 466. Evidenzia la posizione con un segnaposto riconoscibile. */
html body #sighting-position {
  /* Separa il simbolo dalla scritta. */
  gap: 12px;
  /* Evidenzia il pulsante sul fondo bianco. */
  box-shadow: 0 8px 22px rgba(37, 99, 235, .3);
}

/* 467. Segnaposto accanto a Usa la mia posizione. */
html body #sighting-position::before {
  /* Aggiunge il simbolo di posizione senza cambiare il testo del pulsante. */
  content: "📍";
  /* Mantiene il simbolo in un riquadro autonomo. */
  display: inline-block;
  /* Rende il segnaposto ben visibile. */
  font-size: 30px;
  /* Evita spazi verticali aggiuntivi. */
  line-height: 1;
  /* Impedisce al simbolo di restringersi sugli schermi piccoli. */
  flex-shrink: 0;
  /* Lascia il clic al pulsante. */
  pointer-events: none;
}

/* 468. Testata compatta del registro moderazione. */
html body .pagina-intro:has(+ .sezione .registro-filtri) {
  /* Dà spazio al titolo senza creare una fascia troppo alta. */
  padding: 32px 20px;
}

/* 469. Contenuto ordinato del registro. */
html body .sezione:has(.registro-filtri) {
  /* Riduce lo spazio prima dei filtri. */
  padding: 28px 0;
}

/* 470. Filtri con campo ampio e due azioni evidenti. */
html body .registro-filtri {
  /* Dispone campo e azioni in una griglia. */
  display: grid;
  /* Lascia più spazio al numero dell’annuncio. */
  grid-template-columns: minmax(180px, 1fr) auto auto;
  /* Separa i controlli. */
  gap: 12px;
  /* Allinea i controlli. */
  align-items: center;
  /* Dà respiro al modulo. */
  padding: 22px;
  /* Definisce il riquadro. */
  border: 1px solid #bfdbfe;
  /* Riprende gli angoli del sito. */
  border-radius: 16px;
  /* Distingue i filtri dal resto della pagina. */
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
}

/* 471. Etichetta sopra il campo. */
html body .registro-filtri label {
  /* Posiziona l’etichetta sopra i controlli. */
  grid-column: 1 / -1;
  /* Rende leggibile la funzione del campo. */
  font-weight: 650;
  /* Mantiene contrasto sul fondo chiaro. */
  color: #14213d;
}

/* 472. Campo ID comodo da usare. */
html body .registro-filtri input {
  /* Occupa la colonna disponibile. */
  width: 100%;
  /* Evita overflow su smartphone. */
  min-width: 0;
  /* Aumenta l’area di inserimento. */
  min-height: 52px;
  /* Include il bordo nella larghezza. */
  box-sizing: border-box;
  /* Lascia spazio al numero inserito. */
  padding: 12px 14px;
  /* Evidenzia il contorno. */
  border: 1px solid #94a3b8;
  /* Uniforma il campo ai pulsanti. */
  border-radius: 10px;
  /* Distingue l’area da compilare. */
  background: #ffffff;
  /* Usa il carattere del sito. */
  font: inherit;
}

/* 473. Filtra e Mostra tutti come pulsanti allineati. */
html body .registro-filtri :is(button, a) {
  /* Rende Mostra tutti un vero pulsante visivo. */
  display: inline-flex;
  /* Centra verticalmente il testo. */
  align-items: center;
  /* Centra orizzontalmente il testo. */
  justify-content: center;
  /* Uniforma le altezze. */
  min-height: 52px;
  /* Include il bordo nell’altezza. */
  box-sizing: border-box;
  /* Crea un’area comoda da toccare. */
  padding: 12px 20px;
  /* Uniforma la forma. */
  border-radius: 10px;
  /* Elimina la sottolineatura del link. */
  text-decoration: none;
  /* Evidenzia l’azione. */
  font-weight: 650;
  /* Mantiene il testo su una riga. */
  white-space: nowrap;
}

/* 474. Mostra tutti evidente sullo sfondo. */
html body .registro-filtri a {
  /* Usa un fondo azzurro riconoscibile. */
  background: #dbeafe;
  /* Definisce il pulsante. */
  border: 1px solid #93c5fd;
  /* Mantiene la scritta leggibile. */
  color: #14213d;
}

/* 475. Riepilogo del numero di decisioni. */
html body .registro-filtri ~ p[role="status"] {
  /* Separa il conteggio dai filtri. */
  margin: 22px 0 14px;
  /* Rende evidente il numero di risultati. */
  font-weight: 650;
  /* Usa un testo secondario leggibile. */
  color: #475569;
}

/* 476. Messaggio quando il registro è vuoto. */
html body .registro-filtri ~ p:not([role]) {
  /* Dà spazio al messaggio. */
  padding: 28px 20px;
  /* Evita spazi esterni irregolari. */
  margin: 0;
  /* Centra il messaggio. */
  text-align: center;
  /* Usa il fondo caldo FindMe. */
  background: #fff9f2;
  /* Rende riconoscibile lo stato vuoto. */
  border: 1px dashed #e2c5aa;
  /* Uniforma il riquadro. */
  border-radius: 14px;
  /* Mantiene contrasto e leggibilità. */
  color: #475569;
}

/* 477. Distanza tra le decisioni registrate. */
html body .registro-eventi {
  /* Dispone le decisioni una sotto l’altra. */
  display: grid;
  /* Separa gli eventi. */
  gap: 18px;
}

/* 478. Evidenziazione dei filtri da tastiera. */
html body .registro-filtri :is(input, button, a):focus-visible {
  /* Mostra il controllo selezionato. */
  outline: 3px solid #2563eb;
  /* Separa il contorno dal controllo. */
  outline-offset: 3px;
}

/* 479. Filtri del registro su smartphone. */
@media (max-width: 600px) {
  html body .registro-filtri {
    /* Mantiene le due azioni affiancate sotto il campo. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Riduce gli spazi interni sugli schermi stretti. */
    padding: 16px;
  }
  html body .registro-filtri input {
    /* Assegna tutta la larghezza al campo ID. */
    grid-column: 1 / -1;
  }
  html body .registro-filtri :is(button, a) {
    /* Adatta i pulsanti alle due colonne. */
    padding: 12px 8px;
    /* Mantiene il testo leggibile senza allargare la pagina. */
    font-size: 14px;
  }
}

/* 480. Approvazione: larghezza del pulsante secondario, centrata nella scheda. */
html body .moderazione-corpo > .moderazione-form {
  /* Il modulo occupa una sola colonna di dimensione controllata. */
  display: block;
  /* Mantiene la larghezza richiesta, adattandola agli schermi piccoli. */
  width: 550px;
  /* Evita di superare il contenitore. */
  max-width: 100%;
  /* Centra il modulo e separa le due azioni. */
  margin: 24px auto 12px;
}

/* 481. Le due azioni hanno identiche misure e testo centrato. */
html body .moderazione-corpo > .moderazione-form > button.pulsante,
html body .moderazione-corpo > .moderation-reject-link.pulsante {
  /* Allinea simbolo e testo al centro. */
  display: flex;
  /* Centra verticalmente il contenuto. */
  align-items: center;
  /* Centra orizzontalmente il contenuto. */
  justify-content: center;
  /* Separa il simbolo dal testo. */
  gap: 8px;
  /* Assegna la medesima larghezza alle due azioni. */
  width: 550px;
  /* Adatta la larghezza al dispositivo. */
  max-width: 100%;
  /* Include bordo e padding nella larghezza. */
  box-sizing: border-box;
  /* Offre un bersaglio comodo anche su telefono. */
  min-height: 56px;
  /* Evita l’espansione del pulsante nel vecchio layout flex. */
  flex: none;
  /* Centra entrambe le azioni nella scheda. */
  margin-inline: auto;
  /* Mantiene spazio per i testi senza allargare il pulsante. */
  padding: 12px 14px;
  /* Uniforma gli angoli. */
  border-radius: 13px;
  /* Uniforma la dimensione del testo. */
  font-size: 14px;
  /* Rende le etichette evidenti. */
  font-weight: 700;
  /* Conserva leggibilità se il testo va a capo. */
  line-height: 1.4;
  /* Centra anche il testo su più righe. */
  text-align: center;
  /* Consente l’adattamento su schermi stretti. */
  white-space: normal;
  /* Elimina la sottolineatura del collegamento. */
  text-decoration: none;
}

/* 482. Approva: riprende l’azzurro del precedente pulsante Non approvare. */
html body .moderazione-corpo > .moderazione-form > button.pulsante {
  /* Usa l’azzurro già presente nel sito. */
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  /* Definisce il contorno azzurro. */
  border: 2px solid #7aa5ec !important;
  /* Mantiene il testo scuro leggibile. */
  color: #14213d !important;
  /* Mantiene una lieve ombra coerente con il sito. */
  box-shadow: 0 4px 12px rgba(37, 99, 235, .12) !important;
}

/* 483. Non approvare: rosso semitrasparente, sotto l’approvazione. */
html body .moderazione-corpo > .moderation-reject-link.pulsante {
  /* Usa un fondo rosso leggero ma distinto. */
  background: rgba(239, 68, 68, .18) !important;
  /* Evidenzia il bordo rosso. */
  border: 2px solid rgba(220, 38, 38, .60) !important;
  /* Mantiene contrasto con il fondo chiaro. */
  color: #991b1b !important;
  /* Conserva una lieve ombra rossa. */
  box-shadow: 0 4px 12px rgba(220, 38, 38, .12) !important;
}

/* 484. Simboli visivi: le etichette testuali restano complete e comprensibili. */
html body .moderazione-corpo > .moderazione-form > button.pulsante::before {
  /* Aggiunge la spunta verde senza intervenire sulla logica di approvazione. */
  content: "✅";
  /* Rende il simbolo ben visibile. */
  font-size: 19px;
  /* Impedisce che venga schiacciato dal testo. */
  flex-shrink: 0;
}
html body .moderazione-corpo > .moderation-reject-link.pulsante::before {
  /* Aggiunge la X rossa senza modificare il collegamento. */
  content: "❌";
  /* Usa la stessa dimensione della spunta. */
  font-size: 19px;
  /* Impedisce che venga schiacciata dal testo. */
  flex-shrink: 0;
}

/* 485. Popup annuncio approvato: più ampio e contenuto nel viewport. */
html body #fm-approval-whatsapp {
  /* Aumenta lo spazio disponibile mantenendo margini sui telefoni. */
  width: min(720px, calc(100vw - 32px));
  /* Include lo spazio interno nella larghezza dichiarata. */
  box-sizing: border-box;
  /* Consente di raggiungere tutte le azioni anche con schermi bassi. */
  max-height: calc(100dvh - 32px);
  /* Mantiene lo scorrimento dentro il popup. */
  overflow-y: auto;
  /* Lascia respiro intorno al contenuto. */
  padding: 30px;
  /* Rende il testo principale più leggibile. */
  font-size: 17px;
  /* Separa le righe senza sprecare spazio. */
  line-height: 1.6;
}

/* 486. Titolo e spunta confermano chiaramente l’esito. */
html body #fm-approval-whatsapp h2 {
  /* Evidenzia il titolo del popup. */
  font-size: 28px;
  /* Mantiene compatto il titolo su più righe. */
  line-height: 1.25;
  /* Separa titolo e descrizione. */
  margin: 16px 0;
}
html body #fm-approval-whatsapp .conferma-icona {
  /* Distingue il successo dalle altre finestre di conferma. */
  background: #dcfce7;
  /* Colora di verde la spunta già presente nel file PHP. */
  color: #15803d;
}
html body #fm-approval-whatsapp .conferma-nome {
  /* Consente ai nomi lunghi di restare dentro il popup. */
  overflow-wrap: anywhere;
}

/* 487. Messaggio: etichetta su una riga propria e casella a tutta larghezza. */
html body #fm-approval-whatsapp label[for="fm-approval-message"] {
  /* Evita che l’etichetta si affianchi alla casella. */
  display: block;
  /* Distingue l’etichetta dal contenuto. */
  font-weight: 700;
  /* Separa questa sezione dai dettagli dell’annuncio. */
  margin: 20px 0 8px;
}
html body #fm-approval-whatsapp #fm-approval-message {
  /* Porta la casella su una riga propria. */
  display: block;
  /* Usa tutto lo spazio disponibile. */
  width: 100%;
  /* Impedisce al padding di allargare la casella. */
  box-sizing: border-box;
  /* Mostra diverse righe del messaggio senza il piccolo riquadro precedente. */
  min-height: 160px;
  /* Lascia spazio intorno al testo. */
  padding: 16px;
  /* Usa il carattere leggibile del sito al posto del monospace del browser. */
  font-family: inherit;
  /* Mantiene il messaggio leggibile anche su smartphone. */
  font-size: 17px;
  /* Separa bene le righe del messaggio. */
  line-height: 1.6;
  /* Distingue la casella dal fondo del popup. */
  background: #f8fafc;
  /* Mantiene un contrasto elevato. */
  color: #14213d;
  /* Delimita chiaramente la casella. */
  border: 1px solid #94a3b8;
  /* Riprende gli angoli del sito. */
  border-radius: 12px;
  /* Consente di allargare la casella solo in verticale. */
  resize: vertical;
}

/* 488. Copia messaggio: separato dalla casella, facile da toccare. */
html body #fm-approval-whatsapp [data-copy-approval-message] {
  /* Separa il pulsante dalla casella. */
  margin-top: 12px;
  /* Mantiene un’area di tocco comoda. */
  min-height: 50px;
}
html body #fm-approval-whatsapp [data-copy-approval-status]:empty {
  /* Evita spazio vuoto quando non c’è ancora una conferma di copia. */
  display: none;
}

/* 489. WhatsApp e SMS affiancati; spiegazione e chiusura in righe separate. */
html body #fm-approval-whatsapp .conferma-azioni {
  /* Evita che testo, collegamenti e chiusura si mescolino nel vecchio flex. */
  display: grid;
  /* Assegna lo stesso spazio alle due azioni di invio. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Separa bene le azioni. */
  gap: 14px;
  /* Separa l’invio dalla copia del messaggio. */
  margin-top: 22px;
}
html body #fm-approval-whatsapp .conferma-azioni > .pulsante {
  /* Centra il testo dei pulsanti. */
  display: flex;
  /* Allinea il testo in altezza. */
  align-items: center;
  /* Centra il testo in larghezza. */
  justify-content: center;
  /* Evita espansioni oltre la colonna. */
  min-width: 0;
  /* Mantiene tutti i pulsanti comodi da premere. */
  min-height: 54px;
  /* Lascia respiro alle etichette. */
  padding: 12px 16px;
  /* Usa testo leggibile e coerente. */
  font-size: 16px;
  /* Centra le etichette su più righe. */
  text-align: center;
  /* Consente alle etichette di adattarsi su smartphone. */
  white-space: normal;
  /* Mantiene la larghezza comprensiva dei bordi. */
  box-sizing: border-box;
}
html body #fm-approval-whatsapp .conferma-azioni > a.pulsante-verde {
  /* Rende riconoscibile il pulsante WhatsApp. */
  background: linear-gradient(135deg, #15803d, #166534) !important;
  /* Mantiene il contorno verde. */
  border-color: #166534 !important;
  /* Assicura contrasto sul fondo verde. */
  color: #fff !important;
}
html body #fm-approval-whatsapp .conferma-azioni > p,
html body #fm-approval-whatsapp [data-close-approval-whatsapp] {
  /* Separa la spiegazione e la chiusura dalle due azioni di invio. */
  grid-column: 1 / -1;
}
html body #fm-approval-whatsapp .conferma-azioni > p {
  /* Distingue le istruzioni aggiuntive. */
  background: #f1f5f9;
  /* Lascia spazio al testo di supporto. */
  padding: 14px 16px;
  /* Riprende gli angoli della casella del messaggio. */
  border-radius: 12px;
  /* Mantiene leggibile il testo di supporto. */
  font-size: 15px;
  /* Evita margini duplicati dentro la griglia. */
  margin: 0;
}

/* 490. Su smartphone le azioni rimangono leggibili in una sola colonna. */
@media (max-width: 520px) {
  html body #fm-approval-whatsapp {
    /* Riduce lo spazio interno senza stringere troppo il testo. */
    padding: 22px 18px;
  }
  html body #fm-approval-whatsapp h2 {
    /* Adatta il titolo alla larghezza del telefono. */
    font-size: 25px;
  }
  html body #fm-approval-whatsapp .conferma-azioni {
    /* Ogni azione ha una riga dedicata. */
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 491. Animali scomparsi: prima voce visiva del menu, con rosso semitrasparente. */
html body .navigazione > a.nav-animali-scomparsi,
html body .navigazione > a[href="inserzioni.php"] {
  /* Porta questa voce prima degli altri elementi del menu flex. */
  order: -1;
  /* Mantiene visibile il fondo della pagina sotto il rosso. */
  background: rgba(198, 40, 40, .18);
  /* Usa un testo rosso scuro leggibile. */
  color: #8b2424;
  /* Delimita la voce con un bordo semitrasparente. */
  border: 1px solid rgba(198, 40, 40, .38);
  /* Conserva la scritta senza grassetto. */
  font-weight: 400;
  /* Elimina eventuali margini laterali che sposterebbero la prima voce. */
  margin-left: 0;
}

/* 492. Hover e pagina attiva mantengono il rosso semitrasparente. */
html body .navigazione > a.nav-animali-scomparsi:hover,
html body .navigazione > a.nav-animali-scomparsi[aria-current="page"],
html body .navigazione > a[href="inserzioni.php"]:hover,
html body .navigazione > a[href="inserzioni.php"][aria-current="page"] {
  /* Aumenta leggermente il rosso al passaggio del puntatore. */
  background: rgba(198, 40, 40, .25);
  /* Mantiene leggibile il testo. */
  color: #8b2424;
}

/* 493. Pubblica annuncio: verde semitrasparente, distinto dalla ricerca. */
html body .navigazione > a.nav-pubblica {
  /* Colora il fondo senza renderlo opaco. */
  background: rgba(34, 197, 94, .18);
  /* Mantiene il testo leggibile sul verde chiaro. */
  color: #14532d;
  /* Definisce il contorno verde. */
  border: 1px solid rgba(22, 163, 74, .48);
}
html body .navigazione > a.nav-pubblica:hover,
html body .navigazione > a.nav-pubblica[aria-current="page"] {
  /* Aumenta leggermente il verde durante l’interazione. */
  background: rgba(34, 197, 94, .27);
  /* Conserva il contrasto del testo. */
  color: #14532d;
}

/* 494. Animali scomparsi: più visibile, nella stessa riga del menu. */
html body .navigazione > a.nav-animali-scomparsi,
html body .navigazione > a[href="inserzioni.php"] {
  /* Mantiene il rosso semitrasparente, leggermente più evidente. */
  background: rgba(220, 38, 38, .22);
  /* Usa un rosso scuro per il testo. */
  color: #991b1b;
  /* Rende il contorno riconoscibile. */
  border: 1px solid rgba(220, 38, 38, .55);
  /* Aumenta moderatamente il testo senza creare una seconda riga. */
  font-size: 16px;
  /* Dà risalto alla scritta senza un grassetto pesante. */
  font-weight: 600;
  /* Centra verticalmente simbolo e testo. */
  display: inline-flex;
  /* Allinea il contenuto in altezza. */
  align-items: center;
  /* Centra il contenuto anche nel menu mobile. */
  justify-content: center;
  /* Conserva il testo su una riga. */
  white-space: nowrap;
}
html body .navigazione > a.nav-animali-scomparsi::before,
html body .navigazione > a[href="inserzioni.php"]::before {
  /* Sostituisce la piccola zampa con il simbolo della ricerca. */
  content: "🔎";
  /* Rende l’icona più grande e riconoscibile. */
  font-size: 25px;
  /* Evita lo spazio fisso ereditato dalla precedente icona. */
  width: auto;
  /* Separa l’icona dalla scritta. */
  margin-right: 9px;
  /* Impedisce alla lente di restringersi. */
  flex-shrink: 0;
}
html body .navigazione > a.nav-animali-scomparsi:hover,
html body .navigazione > a.nav-animali-scomparsi[aria-current="page"],
html body .navigazione > a[href="inserzioni.php"]:hover,
html body .navigazione > a[href="inserzioni.php"][aria-current="page"] {
  /* Evidenzia l’interazione mantenendo la trasparenza. */
  background: rgba(220, 38, 38, .30);
  /* Conserva un testo ben contrastato. */
  color: #991b1b;
}


/* 495. Titolo delle inserzioni: pulsante largo che porta all’elenco. */
html body .pagina-intro .fm-titolo-animali {
  /* Separa il pulsante dall’occhiello e dalla descrizione. */
  margin: 20px 0;
}
html body .pagina-intro .fm-pulsante-animali {
  /* Dispone icona e scritta sulla stessa riga. */
  display: flex;
  /* Centra verticalmente il contenuto. */
  align-items: center;
  /* Centra orizzontalmente il contenuto. */
  justify-content: center;
  /* Separa l’icona dal titolo. */
  gap: 14px;
  /* Crea il pulsante largo richiesto. */
  width: 680px;
  /* Adatta il pulsante allo spazio disponibile. */
  max-width: 100%;
  /* Include padding e bordo nella larghezza. */
  box-sizing: border-box;
  /* Centra il pulsante nel contenitore. */
  margin-inline: auto;
  /* Mantiene un’altezza ben visibile. */
  min-height: 84px;
  /* Lascia respiro intorno al titolo. */
  padding: 18px 24px;
  /* Usa il rosso semitrasparente del menu. */
  background: rgba(220, 38, 38, .20);
  /* Delimita il pulsante con un bordo evidente. */
  border: 2px solid rgba(220, 38, 38, .48);
  /* Riprende gli angoli arrotondati del sito. */
  border-radius: 18px;
  /* Mantiene elevato il contrasto del titolo. */
  color: #991b1b;
  /* Adatta la dimensione del titolo fra telefono e desktop. */
  font-size: clamp(24px, 3.5vw, 36px);
  /* Evidenzia la voce principale. */
  font-weight: 750;
  /* Impedisce interlinea eccessiva se il testo va a capo. */
  line-height: 1.2;
  /* Elimina la spaziatura negativa ereditata dal titolo. */
  letter-spacing: normal;
  /* Centra il testo anche su più righe. */
  text-align: center;
  /* Elimina la sottolineatura del collegamento. */
  text-decoration: none;
  /* Dà rilievo al pulsante. */
  box-shadow: 0 6px 18px rgba(153, 27, 27, .12);
}
html body .pagina-intro .fm-pulsante-animali span {
  /* Rende ben visibile il simbolo di ricerca. */
  font-size: 1.15em;
  /* Mantiene intatta l’icona sui telefoni. */
  flex-shrink: 0;
}
html body .pagina-intro .fm-pulsante-animali:hover {
  /* Rende evidente che il titolo è cliccabile. */
  background: rgba(220, 38, 38, .28);
}
html body .pagina-intro .fm-pulsante-animali:focus-visible {
  /* Mostra il focus a chi usa la tastiera. */
  outline: 3px solid #991b1b;
  /* Separa il contorno dal bordo. */
  outline-offset: 4px;
}
@media (max-width: 520px) {
  html body .pagina-intro .fm-pulsante-animali {
    /* Riduce lo spazio interno lasciando leggibile il titolo. */
    padding: 16px 12px;
    /* Avvicina icona e testo su schermi stretti. */
    gap: 10px;
  }
}

/* 496. Collegamenti personali: due pulsanti ordinati e centrati. */
html body .fm-avvistamenti-link {
  /* Allinea i pulsanti sulla stessa riga quando c’è spazio. */
  display: flex;
  /* Consente il ritorno a capo sui telefoni. */
  flex-wrap: wrap;
  /* Centra i collegamenti sopra la spiegazione. */
  justify-content: center;
  /* Separa i due pulsanti. */
  gap: 12px;
  /* Dà respiro alla navigazione. */
  margin: 20px 0;
}
html body .fm-avvistamenti-link > a {
  /* Assegna dimensioni coerenti ai due pulsanti. */
  min-width: 190px;
  /* Mantiene una superficie comoda da toccare. */
  min-height: 50px;
  /* Include padding e bordo nelle dimensioni. */
  box-sizing: border-box;
  /* Centra la scritta. */
  text-align: center;
}

/* 497. Spiegazione: riquadro leggibile con larghezza controllata. */
html body .fm-avvistamenti-info {
  /* Evita righe di testo troppo lunghe. */
  max-width: 860px;
  /* Include lo spazio interno nella larghezza. */
  box-sizing: border-box;
  /* Centra il riquadro nella pagina. */
  margin: 0 auto 22px;
  /* Lascia spazio intorno al testo. */
  padding: 20px 24px;
  /* Riprende i colori chiari del sito. */
  background: linear-gradient(135deg, #fff9f2, #eef6ff);
  /* Delimita il riquadro senza appesantirlo. */
  border: 1px solid #cbd5e1;
  /* Mantiene gli angoli coerenti con gli altri pannelli. */
  border-radius: 16px;
  /* Mantiene il testo leggibile. */
  color: #334155;
  /* Aumenta la dimensione delle istruzioni. */
  font-size: 16px;
  /* Separa bene le righe. */
  line-height: 1.7;
}

/* 498. Riepilogo: stato da leggere e totale allineati e ben distinti. */
html body .fm-avvistamenti-riepilogo {
  /* Dispone conteggi e pagina su una riga ordinata. */
  display: flex;
  /* Consente l’adattamento agli schermi piccoli. */
  flex-wrap: wrap;
  /* Centra i dati sopra gli avvistamenti. */
  justify-content: center;
  /* Mantiene gli elementi allineati in altezza. */
  align-items: center;
  /* Separa il badge dal totale. */
  gap: 14px 22px;
  /* Lascia spazio prima delle schede. */
  margin: 0 0 26px;
}
html body .fm-avvistamenti-da-leggere {
  /* Allinea campanella e conteggio. */
  display: inline-flex;
  /* Centra il contenuto in altezza. */
  align-items: center;
  /* Separa simbolo e testo. */
  gap: 10px;
  /* Elimina i margini predefiniti del paragrafo. */
  margin: 0;
  /* Crea un badge ampio e leggibile. */
  padding: 12px 20px;
  /* Evidenzia il conteggio con rosso semitrasparente. */
  background: rgba(220, 38, 38, .16);
  /* Delimita il badge con un bordo rosso. */
  border: 1px solid rgba(220, 38, 38, .40);
  /* Mantiene il testo ben contrastato. */
  color: #991b1b;
  /* Usa una forma morbida, coerente con il sito. */
  border-radius: 12px;
  /* Rende evidente il numero da leggere. */
  font-size: 20px;
}
html body .fm-avvistamenti-totale {
  /* Elimina margini che disallineerebbero i conteggi. */
  margin: 0;
  /* Mantiene leggibile totale e pagina. */
  font-size: 16px;
  /* Usa il blu scuro del sito. */
  color: #14213d;
  /* Centra il testo quando va a capo. */
  text-align: center;
  /* Separa le righe se lo schermo è stretto. */
  line-height: 1.6;
}

/* 499. Smartphone: pulsanti e riquadro proporzionati alla pagina. */
@media (max-width: 600px) {
  html body .fm-avvistamenti-link > a {
    /* Consente ai pulsanti di occupare lo spazio disponibile. */
    flex: 1 1 180px;
    /* Evita larghezze minime eccessive su schermi stretti. */
    min-width: 0;
  }
  html body .fm-avvistamenti-info {
    /* Adatta lo spazio interno al telefono. */
    padding: 18px;
  }
  html body .fm-avvistamenti-riepilogo {
    /* Distingue il badge dal totale su due righe. */
    flex-direction: column;
  }
}

/* 500. Processo email: collegamenti chiari e contenuto leggibile. */
html body .fm-processo-email {
  /* Consente ai campi di restringersi anche dentro contenitori flex. */
  min-width: 0;
  /* Mantiene una lettura confortevole dei testi. */
  line-height: 1.65;
}
html body .fm-processo-link {
  /* Ordina i collegamenti come pulsanti. */
  display: flex;
  /* Permette il ritorno a capo su schermi piccoli. */
  flex-wrap: wrap;
  /* Centra il gruppo nella pagina. */
  justify-content: center;
  /* Separa i pulsanti senza puntini nel testo. */
  gap: 12px;
  /* Separa navigazione e descrizione. */
  margin: 0 0 24px;
}
html body .fm-processo-link > a {
  /* Allinea le etichette al centro del pulsante. */
  display: inline-flex;
  /* Centra il testo in verticale. */
  align-items: center;
  /* Centra il testo in orizzontale. */
  justify-content: center;
  /* Garantisce un bersaglio comodo al tocco. */
  min-height: 50px;
  /* Dà aria alle etichette. */
  padding: 12px 20px;
  /* Include bordi e padding nelle dimensioni. */
  box-sizing: border-box;
  /* Centra anche le etichette su più righe. */
  text-align: center;
}
html body .fm-processo-intro {
  /* Evidenzia lo scopo del processo. */
  background: linear-gradient(135deg, #fffaf5, #f7fbff);
  /* Delimita la spiegazione. */
  border: 1px solid #cbd5e1;
  /* Riprende le forme del sito. */
  border-radius: 16px;
  /* Migliora la leggibilità del testo. */
  padding: 20px 24px;
  /* Separa il testo dagli avvisi. */
  margin: 0 0 24px;
}
/* 501. Collegamento cron: etichetta sopra e campo a tutta larghezza. */
html body .fm-processo-collegamento {
  /* Separa il collegamento dal riepilogo. */
  margin: 24px 0;
  /* Crea un riquadro chiaramente riconoscibile. */
  padding: 22px;
  /* Include il padding nella larghezza disponibile. */
  box-sizing: border-box;
  /* Mantiene il riquadro entro la pagina. */
  width: 100%;
  /* Evidenzia il campo con un fondo chiaro. */
  background: #f7fbff;
  /* Delimita il riquadro. */
  border: 1px solid #bfdbfe;
  /* Ammorbidisce gli angoli. */
  border-radius: 16px;
}
html body .fm-processo-collegamento > label {
  /* Mette l'etichetta su una riga separata dal campo. */
  display: block;
  /* Separa etichetta e collegamento. */
  margin-bottom: 12px;
  /* Evidenzia il titolo del campo. */
  font-weight: 700;
  /* Usa il blu scuro del sito. */
  color: #14213d;
}
html body .fm-processo-email #fm-cron-url {
  /* Evita l'allineamento del campo accanto all'etichetta. */
  display: block;
  /* Occupa tutta la larghezza del riquadro. */
  width: 100%;
  /* Annulla eventuali limiti dei moduli condivisi. */
  max-width: none;
  /* Consente al campo di adattarsi al telefono. */
  min-width: 0;
  /* Include bordi e spazi interni nella larghezza. */
  box-sizing: border-box;
  /* Lascia spazio al collegamento completo. */
  min-height: 130px;
  /* Allontana il testo dai bordi. */
  padding: 16px;
  /* Elimina margini ereditati dai moduli. */
  margin: 0;
  /* Rende leggibili i caratteri del collegamento. */
  font-family: ui-monospace, monospace;
  /* Mantiene il testo leggibile anche su smartphone. */
  font-size: 16px;
  /* Separa le righe del collegamento. */
  line-height: 1.6;
  /* Usa un fondo bianco per il campo. */
  background: #ffffff;
  /* Garantisce contrasto al testo. */
  color: #14213d;
  /* Rende evidente il perimetro del campo. */
  border: 2px solid #93b5e5;
  /* Ammorbidisce gli angoli del campo. */
  border-radius: 12px;
  /* Permette di ingrandire il campo solo in verticale. */
  resize: vertical;
  /* Spezza visivamente URL lunghi senza modificarne il valore. */
  overflow-wrap: anywhere;
}
html body .fm-processo-email #fm-cron-url:focus-visible {
  /* Indica chiaramente il campo selezionato da tastiera. */
  outline: 3px solid #2563eb;
  /* Separa l'indicatore dal bordo. */
  outline-offset: 3px;
}
html body .fm-processo-email #fm-cron-aiuto {
  /* Separa le istruzioni dal campo. */
  margin: 14px 0 0;
  /* Mantiene leggibile la nota di riservatezza. */
  font-size: 15px;
}
/* 502. Riepilogo e azioni: stessa larghezza del contenuto. */
html body .fm-processo-email .fm-processo-stato {
  /* Evita un pannello più stretto del resto della pagina. */
  width: 100%;
  /* Rimuove eventuali limiti di larghezza condivisi. */
  max-width: none;
  /* Include gli spazi interni nella larghezza. */
  box-sizing: border-box;
  /* Separa il riepilogo dalle azioni. */
  margin: 24px 0;
}
html body .fm-processo-email .fm-processo-azione {
  /* Centra ciascun pulsante operativo. */
  display: flex;
  /* Centra il pulsante in orizzontale. */
  justify-content: center;
  /* Mantiene la larghezza uniforme. */
  width: 100%;
  /* Elimina limiti dei moduli condivisi. */
  max-width: none;
  /* Separa le azioni una dall'altra. */
  margin: 12px 0;
}
html body .fm-processo-azione > button {
  /* Dà alle azioni una larghezza coerente. */
  width: 560px;
  /* Mantiene il pulsante dentro lo schermo. */
  max-width: 100%;
  /* Include padding e bordo nella larghezza. */
  box-sizing: border-box;
  /* Rende comoda l'interazione. */
  min-height: 54px;
  /* Lascia spazio alle etichette lunghe. */
  padding: 14px 20px;
  /* Permette alle etichette lunghe di andare a capo. */
  white-space: normal;
  /* Centra le righe del testo. */
  text-align: center;
  /* Migliora la leggibilità delle etichette. */
  line-height: 1.5;
}
html body .fm-processo-azione > button.pulsante-bordo {
  /* Evidenzia la disattivazione senza cambiare le altre azioni. */
  border-width: 2px;
}
html body .fm-processo-aruba {
  /* Distingue le istruzioni dalle azioni. */
  margin-top: 30px;
  /* Crea un blocco leggibile. */
  padding: 22px;
  /* Usa il fondo caldo del sito. */
  background: #fffaf5;
  /* Delimita le istruzioni. */
  border: 1px solid #fed7aa;
  /* Riprende le forme degli altri riquadri. */
  border-radius: 16px;
}
html body .fm-processo-aruba > h2 {
  /* Elimina spazio eccessivo prima del titolo. */
  margin-top: 0;
}
html body .fm-processo-aruba li {
  /* Separa i passaggi di configurazione. */
  margin: 10px 0;
}
/* 503. Smartphone: pulsanti e spazi proporzionati allo schermo. */
@media (max-width: 600px) {
  html body .fm-processo-link > a {
    /* Distribuisce i pulsanti sulle righe disponibili. */
    flex: 1 1 180px;
    /* Evita larghezze minime eccessive. */
    min-width: 0;
  }
  html body .fm-processo-intro,
  html body .fm-processo-collegamento,
  html body .fm-processo-aruba {
    /* Riduce gli spazi interni sui telefoni. */
    padding: 16px;
  }
}

/* Chat AI FindMe: stili isolati dal motore e dalla vecchia guida. */
#fm-ai-chat {
  /* Mantiene il fumetto vicino al bordo senza spostare il contenuto. */
  position: fixed;
  /* Rispetta il bordo sicuro dello smartphone. */
  right: max(14px, env(safe-area-inset-right));
  /* Lascia spazio alla zona sicura inferiore. */
  bottom: calc(16px + env(safe-area-inset-bottom));
  /* Resta sopra le schede e sotto le finestre modali del sito. */
  z-index: 85;
  /* Conserva la tipografia FindMe. */
  font-family: inherit;
  /* Usa il blu scuro del marchio. */
  color: #14213d;
  /* Separa le righe per facilitarne la lettura. */
  line-height: 1.5;
}
#fm-ai-chat *, #fm-ai-chat *::before, #fm-ai-chat *::after {
  /* Include padding e bordi nelle dimensioni del componente. */
  box-sizing: border-box;
}
#fm-ai-chat [hidden] {
  /* Mantiene chiusa la chat fino al clic dell’utente. */
  display: none !important;
}
#fm-ai-chat .fm-ai-launcher {
  /* Permette di disegnare la punta del fumetto. */
  position: relative;
  /* Allinea icona e parola. */
  display: flex;
  /* Centra il contenuto in verticale. */
  align-items: center;
  /* Separa icona e parola. */
  gap: 7px;
  /* Mantiene comodo il tocco. */
  min-height: 48px;
  /* Rende compatto il fumetto. */
  padding: 10px 16px;
  /* Elimina i margini dei pulsanti condivisi. */
  margin: 0;
  /* Disegna il contorno arancione FindMe. */
  border: 1px solid rgba(255, 107, 53, .65);
  /* Dà al pulsante la forma di un fumetto. */
  border-radius: 18px 18px 4px 18px;
  /* Riprende il gradiente arancione del sito. */
  background: linear-gradient(135deg, rgba(255,107,53,.92), rgba(255,138,61,.92));
  /* Mantiene leggibile la scritta. */
  color: #14213d;
  /* Evita caratteri diversi da quelli del sito. */
  font: inherit;
  /* Rende la breve etichetta leggibile. */
  font-size: 16px;
  /* Evidenzia l’azione. */
  font-weight: 700;
  /* Separa il fumetto dal fondo. */
  box-shadow: 0 5px 16px rgba(20,33,61,.16);
  /* Indica che il fumetto si può aprire. */
  cursor: pointer;
}
#fm-ai-chat #fm-ai-panel {
  /* Organizza la chat in sezioni verticali. */
  display: flex;
  /* Mette messaggi e modulo uno sotto l’altro. */
  flex-direction: column;
  /* Mantiene compatto il pannello su desktop. */
  width: 370px;
  /* Mantiene il pannello dentro lo schermo. */
  max-width: calc(100vw - 28px);
  /* Lascia visibile una parte della pagina. */
  height: min(580px, 76dvh);
  /* Mantiene accessibile la chiusura sul telefono. */
  max-height: calc(100dvh - 48px - env(safe-area-inset-bottom));
  /* Distingue il pannello dal fondo. */
  border: 1px solid rgba(147,197,253,.75);
  /* Riprende le forme morbide del sito. */
  border-radius: 20px;
  /* Mantiene i contenuti entro gli angoli. */
  overflow: hidden;
  /* Usa un fondo leggermente semitrasparente e leggibile. */
  background: rgba(255,255,255,.94);
  /* Sfoca il fondo sottostante. */
  backdrop-filter: blur(10px);
  /* Separa la chat dalla pagina. */
  box-shadow: 0 12px 36px rgba(20,33,61,.22);
}
#fm-ai-chat .fm-ai-heading {
  /* Allinea titolo e chiusura. */
  display: flex;
  /* Centra gli elementi della testata. */
  align-items: center;
  /* Porta la chiusura sul lato destro. */
  justify-content: space-between;
  /* Separa il titolo dalla chiusura. */
  gap: 8px;
  /* Mantiene la testata compatta. */
  padding: 12px 14px;
  /* Riprende il gradiente blu FindMe. */
  background: linear-gradient(135deg,#2563eb,#3b82f6);
  /* Garantisce contrasto sul blu. */
  color: #ffffff;
  /* Mantiene visibile la testata quando i messaggi crescono. */
  flex-shrink: 0;
}
#fm-ai-chat .fm-ai-heading strong {
  /* Mette il nome della chat su una riga propria. */
  display: block;
  /* Rende evidente il titolo. */
  font-size: 18px;
}
#fm-ai-chat .fm-ai-heading small {
  /* Separa il sottotitolo dal titolo. */
  display: block;
  /* Mantiene compatta la testata. */
  font-size: 12px;
}
#fm-ai-chat .fm-ai-close {
  /* Offre una chiusura facile da toccare. */
  width: 44px;
  /* Mantiene il bersaglio quadrato. */
  height: 44px;
  /* Impedisce che la chiusura venga compressa. */
  flex: 0 0 44px;
  /* Centra il simbolo. */
  padding: 0;
  /* Elimina margini ereditati. */
  margin: 0;
  /* Rende evidente il contorno. */
  border: 1px solid rgba(255,255,255,.6);
  /* Riprende gli angoli del pannello. */
  border-radius: 12px;
  /* Mantiene la chiusura semitrasparente. */
  background: rgba(255,255,255,.18);
  /* Rende visibile il simbolo. */
  color: #ffffff;
  /* Rende la croce riconoscibile. */
  font-size: 28px;
  /* Evita spostamenti verticali del simbolo. */
  line-height: 1;
  /* Indica la possibilità di chiudere. */
  cursor: pointer;
}
#fm-ai-chat .fm-ai-privacy {
  /* Evita spazi eccessivi. */
  margin: 0;
  /* Separa la nota dai messaggi. */
  padding: 9px 14px;
  /* Mantiene la nota breve e leggibile. */
  font-size: 12px;
  /* Usa il fondo caldo del sito. */
  background: #fffaf5;
  /* Mantiene visibile l’informazione sul servizio AI. */
  flex-shrink: 0;
}
#fm-ai-chat .fm-ai-messages {
  /* Riserva ai messaggi lo spazio restante. */
  flex: 1 1 auto;
  /* Consente al pannello di ridursi senza espandere la pagina. */
  min-height: 50px;
  /* Fa scorrere soltanto la conversazione. */
  overflow-y: auto;
  /* Evita di trascinare la pagina durante lo scorrimento della chat. */
  overscroll-behavior: contain;
  /* Dà spazio ai fumetti. */
  padding: 12px;
}
#fm-ai-chat .fm-ai-message {
  /* Separa i messaggi. */
  margin: 0 0 10px;
  /* Allontana il testo dai bordi. */
  padding: 10px 12px;
  /* Disegna piccoli fumetti. */
  border-radius: 14px;
  /* Mantiene leggibile il testo su smartphone. */
  font-size: 14px;
  /* Evita che parole lunghe allarghino il pannello. */
  overflow-wrap: anywhere;
  /* Mantiene i ritorni a capo senza interpretare HTML. */
  white-space: pre-wrap;
}
#fm-ai-chat .fm-ai-message strong {
  /* Distingue il mittente dal testo. */
  display: block;
  /* Mantiene discreta l’etichetta del mittente. */
  font-size: 12px;
  /* Separa il mittente dal messaggio. */
  margin-bottom: 3px;
}
#fm-ai-chat .fm-ai-assistant {
  /* Usa il fondo azzurro per FindMe. */
  background: #edf5ff;
  /* Delimita il fumetto dell’assistente. */
  border: 1px solid #dbeafe;
  /* Distingue visivamente il lato dell’assistente. */
  margin-right: 16px;
}
#fm-ai-chat .fm-ai-user {
  /* Usa il fondo caldo per l’utente. */
  background: #fff0e5;
  /* Delimita il fumetto dell’utente. */
  border: 1px solid #fed7aa;
  /* Distingue visivamente il lato dell’utente. */
  margin-left: 16px;
}
#fm-ai-chat .fm-ai-prompts {
  /* Dispone le domande rapide in una riga. */
  display: flex;
  /* Permette il ritorno a capo. */
  flex-wrap: wrap;
  /* Separa i suggerimenti. */
  gap: 6px;
  /* Mantiene compatta l’area dei suggerimenti. */
  padding: 0 12px 8px;
  /* Evita che i messaggi comprimano i suggerimenti. */
  flex-shrink: 0;
}
#fm-ai-chat .fm-ai-prompts button {
  /* Mantiene la tipografia condivisa. */
  font: inherit;
  /* Mantiene compatte le domande rapide. */
  font-size: 12px;
  /* Mantiene i suggerimenti toccabili. */
  min-height: 36px;
  /* Separa il testo dal bordo. */
  padding: 6px 9px;
  /* Evidenzia il contorno. */
  border: 1px solid #93b5e5;
  /* Riprende la forma dei fumetti. */
  border-radius: 10px;
  /* Rende visibili i pulsanti sul fondo chiaro. */
  background: #eff6ff;
  /* Mantiene contrasto al testo. */
  color: #14213d;
  /* Elimina margini globali. */
  margin: 0;
  /* Indica che la domanda può essere inviata. */
  cursor: pointer;
}
#fm-ai-chat .fm-ai-status {
  /* Mantiene compatta la riga di stato. */
  margin: 0;
  /* Separa lo stato dal modulo. */
  padding: 0 14px 7px;
  /* Mantiene leggibili errori e attesa. */
  font-size: 12px;
  /* Evidenzia gli errori senza coprire il sito. */
  color: #7f1d1d;
  /* Mantiene visibile lo stato. */
  flex-shrink: 0;
}
#fm-ai-chat .fm-ai-status:empty {
  /* Elimina la riga quando non ci sono avvisi. */
  display: none;
}
#fm-ai-chat .fm-ai-form {
  /* Mantiene il modulo largo quanto la chat. */
  width: 100%;
  /* Annulla i limiti dei moduli del sito. */
  max-width: none;
  /* Evita margini esterni. */
  margin: 0;
  /* Lascia spazio al campo. */
  padding: 10px 12px;
  /* Separa campo e conversazione. */
  border-top: 1px solid #dbeafe;
  /* Mantiene accessibile l’invio. */
  flex-shrink: 0;
}
#fm-ai-chat .fm-ai-form label {
  /* Mette l’etichetta sopra il campo. */
  display: block;
  /* Mantiene compatta l’etichetta. */
  font-size: 12px;
  /* Rende identificabile il campo. */
  font-weight: 700;
  /* Separa etichetta e campo. */
  margin: 0 0 5px;
}
#fm-ai-chat .fm-ai-form > div {
  /* Affianca il campo e il pulsante di invio. */
  display: flex;
  /* Separa campo e pulsante. */
  gap: 7px;
}
#fm-ai-chat textarea {
  /* Occupa lo spazio disponibile. */
  flex: 1 1 auto;
  /* Consente al campo di restringersi. */
  min-width: 0;
  /* Mantiene il campo proporzionato al modulo. */
  width: 100%;
  /* Annulla i margini ereditati. */
  margin: 0;
  /* Separa il testo dai bordi. */
  padding: 9px;
  /* Evidenzia il campo. */
  border: 1px solid #93b5e5;
  /* Riprende le forme del sito. */
  border-radius: 10px;
  /* Mantiene il campo leggibile. */
  background: #ffffff;
  /* Garantisce contrasto al testo. */
  color: #14213d;
  /* Mantiene la tipografia del sito. */
  font: inherit;
  /* Evita l’ingrandimento automatico del campo su iPhone. */
  font-size: 16px;
  /* Mantiene ordinate le righe. */
  line-height: 1.4;
  /* Evita che il campo sposti la struttura della chat. */
  resize: none;
}
#fm-ai-chat .fm-ai-form button {
  /* Mantiene visibile il pulsante di invio. */
  flex: 0 0 70px;
  /* Mantiene compatto il pulsante. */
  padding: 8px;
  /* Elimina margini ereditati. */
  margin: 0;
  /* Evita bordi doppi. */
  border: 0;
  /* Riprende gli angoli del campo. */
  border-radius: 10px;
  /* Riprende il blu FindMe. */
  background: linear-gradient(135deg,#2563eb,#3b82f6);
  /* Mantiene contrasto alla scritta. */
  color: #ffffff;
  /* Mantiene la tipografia condivisa. */
  font: inherit;
  /* Mantiene il testo proporzionato. */
  font-size: 13px;
  /* Evidenzia l’invio. */
  font-weight: 700;
  /* Indica l’azione disponibile. */
  cursor: pointer;
}
#fm-ai-chat .fm-ai-links {
  /* Affianca le scorciatoie. */
  display: flex;
  /* Consente il ritorno a capo. */
  flex-wrap: wrap;
  /* Centra i collegamenti. */
  justify-content: center;
  /* Separa i collegamenti. */
  gap: 7px 12px;
  /* Separa le scorciatoie dal bordo. */
  padding: 0 12px 12px;
  /* Mantiene i collegamenti disponibili. */
  flex-shrink: 0;
}
#fm-ai-chat .fm-ai-links a {
  /* Mantiene leggibili le scorciatoie. */
  color: #14213d;
  /* Mantiene compatta la riga. */
  font-size: 12px;
  /* Rende riconoscibili i collegamenti. */
  text-decoration: underline;
}
#fm-ai-chat button:disabled {
  /* Distingue le azioni temporaneamente non disponibili. */
  opacity: .55;
  /* Evita di suggerire un’azione attiva. */
  cursor: default;
}
#fm-ai-chat :focus-visible {
  /* Rende visibile la selezione da tastiera. */
  outline: 3px solid #ff8a3d;
  /* Separa l’indicatore dal bordo. */
  outline-offset: 2px;
}


/* GRAFICA 3 · Intestazione su due righe, 09-10-2026. */
html body .fm-header-due-righe .testata-interno {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr) 174px;
  align-items: start;
  gap: 0;
  min-height: 0;
  padding-block: 8px 22px;
}
html body .fm-header-due-righe .marchio {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  align-self: start;
}
html body .fm-header-due-righe .navigazione {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
  position: static;
}
html body .fm-header-due-righe .fm-nav-servizi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 106px;
  padding-inline: 190px;
  box-sizing: border-box;
}
html body .fm-header-due-righe .fm-nav-servizi > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  color: #14213d;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
}
html body .fm-header-due-righe .fm-nav-servizi > a:hover,
html body .fm-header-due-righe .fm-nav-servizi > a[aria-current="page"] {
  background: #edf5ff;
  color: #1d4ed8;
}
html body .fm-header-due-righe .fm-nav-azioni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 0;
}
html body .fm-header-due-righe .fm-nav-azioni > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 15px 20px;
  margin: 0;
  border: 2px solid rgba(220, 38, 38, .72);
  border-radius: 18px;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  box-sizing: border-box;
  box-shadow: 0 5px 14px rgba(20, 33, 61, .06);
  transition: background .18s ease, box-shadow .18s ease;
}
html body .fm-header-due-righe .fm-nav-azioni > .nav-pubblica {
  background: rgba(34, 197, 94, .18);
  color: #14532d;
}
html body .fm-header-due-righe .fm-nav-azioni > .nav-animali-scomparsi {
  background: rgba(220, 38, 38, .16);
  color: #991b1b;
}
html body .fm-header-due-righe .fm-nav-azioni > .nav-pubblica:hover,
html body .fm-header-due-righe .fm-nav-azioni > .nav-pubblica[aria-current="page"] {
  background: rgba(34, 197, 94, .27);
  color: #14532d;
  box-shadow: 0 7px 18px rgba(20, 83, 45, .12);
}
html body .fm-header-due-righe .fm-nav-azioni > .nav-animali-scomparsi:hover,
html body .fm-header-due-righe .fm-nav-azioni > .nav-animali-scomparsi[aria-current="page"] {
  background: rgba(220, 38, 38, .24);
  color: #991b1b;
  box-shadow: 0 7px 18px rgba(153, 27, 27, .1);
}
html body .fm-header-due-righe .fm-nav-azioni > a::before {
  width: auto;
  margin: 0;
  font-size: 24px;
  flex: 0 0 auto;
}
html body .fm-header-due-righe .fm-nav-azioni > .nav-animali-scomparsi::before {
  content: "🔎";
}
html body .fm-header-due-righe .fm-nav-azioni > .nav-pubblica::before {
  content: "📣";
}
html body .fm-header-due-righe .navigazione a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}
@media (max-width: 1000px) {
  html body .fm-header-due-righe .testata-interno {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
    padding-block: 6px;
  }
  html body .fm-header-due-righe .menu-pulsante {
    grid-column: 2;
    grid-row: 1;
  }
  html body .fm-header-due-righe .navigazione {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    padding-block: 10px 16px;
    gap: 16px;
  }
  html body .fm-header-due-righe .navigazione.aperta {
    display: grid;
  }
  html body .fm-header-due-righe .fm-nav-servizi {
    min-height: 0;
    padding: 0;
    gap: 6px;
  }
  html body .fm-header-due-righe .fm-nav-azioni {
    gap: 12px;
  }
}
@media (max-width: 600px) {
  html body .fm-header-due-righe .fm-nav-servizi > a {
    padding: 10px 12px;
    font-size: 15px;
  }
  html body .fm-header-due-righe .fm-nav-servizi .fm-session-slot {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }
  html body .fm-header-due-righe .fm-nav-azioni {
    grid-template-columns: minmax(0, 320px);
    gap: 10px;
  }
  html body .fm-header-due-righe .fm-nav-azioni > a {
    min-height: 60px;
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .fm-header-due-righe .fm-nav-azioni > a {
    transition: none;
  }
}


/* GRAFICA 3 · Conferme annuncio: azioni centrate e della stessa misura. */
html body .listing-state-confirm .listing-state-form .account-azioni {
 display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:24px;width:100%;margin:30px auto 8px;
}
html body .listing-state-confirm .listing-state-form .account-azioni > .pulsante {
 display:flex;align-items:center;justify-content:center;flex:0 1 280px;width:280px;max-width:100%;min-width:0;min-height:60px;margin:0;padding:16px 24px;box-sizing:border-box;border:2px solid;border-radius:16px;font:inherit;font-size:17px;font-weight:750;line-height:1.3;text-align:center;text-decoration:none;position:relative;
}
html body .listing-state-confirm .listing-state-form .account-azioni > button {
 background:rgba(34,197,94,.19);border-color:rgba(22,163,74,.7);color:#14532d;
}
html body .listing-state-confirm .listing-state-form .account-azioni > a,
html body .listing-delete-confirm .listing-state-form .account-azioni > button {
 background:rgba(239,68,68,.17);border-color:rgba(220,38,38,.65);color:#991b1b;
}
html body .listing-delete-confirm .listing-state-form .account-azioni > a {
 background:rgba(34,197,94,.19);border-color:rgba(22,163,74,.7);color:#14532d;
}
html body .listing-state-confirm .listing-state-form .account-azioni > .pulsante:hover {box-shadow:0 7px 18px rgba(20,33,61,.12)}
html body .listing-state-confirm .listing-state-form[action*="azione=found"] .account-azioni > button {overflow:visible;isolation:isolate;}
html body .listing-state-confirm .listing-state-form[action*="azione=found"] .account-azioni > button::after {
 content:"";display:block;position:absolute;inset:-8px;border-radius:18px;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m4%2020%205-13%208%208z%22%20fill%3D%22%23fbbf24%22%20stroke%3D%22%23b77912%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m7%2012%207%206m-9-1%205%204%22%20stroke%3D%22%23f97316%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22m14%203-2%204m8-1-3%204m5%203-4%201%22%20stroke%3D%22%2316a34a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%224%22%20r%3D%221.4%22%20fill%3D%22%23ef4444%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%221.4%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m4%2020%205-13%208%208z%22%20fill%3D%22%23fbbf24%22%20stroke%3D%22%23b77912%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m7%2012%207%206m-9-1%205%204%22%20stroke%3D%22%23f97316%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22m14%203-2%204m8-1-3%204m5%203-4%201%22%20stroke%3D%22%2316a34a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%224%22%20r%3D%221.4%22%20fill%3D%22%23ef4444%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%221.4%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m4%2020%205-13%208%208z%22%20fill%3D%22%23fbbf24%22%20stroke%3D%22%23b77912%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m7%2012%207%206m-9-1%205%204%22%20stroke%3D%22%23f97316%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22m14%203-2%204m8-1-3%204m5%203-4%201%22%20stroke%3D%22%2316a34a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%224%22%20r%3D%221.4%22%20fill%3D%22%23ef4444%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%221.4%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m4%2020%205-13%208%208z%22%20fill%3D%22%23fbbf24%22%20stroke%3D%22%23b77912%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22m7%2012%207%206m-9-1%205%204%22%20stroke%3D%22%23f97316%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22m14%203-2%204m8-1-3%204m5%203-4%201%22%20stroke%3D%22%2316a34a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%224%22%20r%3D%221.4%22%20fill%3D%22%23ef4444%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%221.4%22%20fill%3D%22%232563eb%22%2F%3E%3C%2Fsvg%3E");background-position:top center,bottom center,left center,right center;background-size:24px 18px,24px 18px,18px 24px,18px 24px;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;animation:none!important;transform:none;translate:none;opacity:1;
}
@media(max-width:640px){html body .listing-state-confirm .listing-state-form .account-azioni{flex-direction:column;align-items:center;gap:24px}html body .listing-state-confirm .listing-state-form .account-azioni > .pulsante{flex:none;width:min(280px,100%)}}

/* Ritrovato: pulsante verde, senza cornice decorata. */
html body .listing-state-confirm .listing-state-form[action*="azione=found"] .account-azioni > button::after{content:none;display:none}
/* Conferma avvistamento: pannello compatto e centrale. */
html body .account-pannello:has(.sighting-success){max-width:740px;margin-inline:auto;padding:44px 36px;border-top:4px solid #35a573;border-radius:28px;background:linear-gradient(155deg,#ffffff,#f4fbf7);box-shadow:0 20px 60px rgba(26,75,52,.09)}
html body .account-pannello:has(.sighting-success) .sighting-intro{display:none}
html body .sighting-success{text-align:center;max-width:580px;margin:auto}
html body .sighting-success::before{content:"✓";display:grid;place-items:center;width:80px;height:80px;margin:0 auto 24px;border-radius:50%;background:#ddf5e7;color:#198251;font-size:42px;font-weight:800;box-shadow:0 0 0 10px rgba(34,197,94,.06)}
html body .sighting-success h2{font-size:clamp(27px,4vw,36px);line-height:1.2;color:#173c2e;margin:0 0 18px;letter-spacing:-.6px}
html body .sighting-success p{max-width:520px;margin:0 auto 28px;font-size:17px;line-height:1.75;color:#506b60}
html body .sighting-success > .pulsante{display:flex;align-items:center;justify-content:center;width:min(280px,100%);min-height:56px;margin:0 auto;padding:14px 22px;border-radius:15px;text-decoration:none;box-sizing:border-box}
@media(max-width:600px){html body .account-pannello:has(.sighting-success){padding:32px 20px}html body .sighting-success p{font-size:16px}}

/* Colori delle conferme: prevalgono sul tema generale pulsante-bordo. */
html body #modulo-stato-annuncio .account-azioni > button,
html body .listing-delete-confirm #modulo-stato-annuncio .account-azioni > a {
 background:rgba(34,197,94,.23)!important;border-color:#30a568!important;color:#14532d!important;
}
html body #modulo-stato-annuncio .account-azioni > a,
html body .listing-delete-confirm #modulo-stato-annuncio .account-azioni > button {
 background:rgba(239,68,68,.18)!important;border-color:#dc6464!important;color:#991b1b!important;
}
html body #modulo-stato-annuncio .account-azioni > button:hover,
html body .listing-delete-confirm #modulo-stato-annuncio .account-azioni > a:hover {background:rgba(34,197,94,.34)!important}
html body #modulo-stato-annuncio .account-azioni > a:hover,
html body .listing-delete-confirm #modulo-stato-annuncio .account-azioni > button:hover {background:rgba(239,68,68,.28)!important}
html body #modulo-stato-annuncio .listing-state-check {
 display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;box-sizing:border-box;margin:26px auto 0;padding:16px 20px;border:1px solid #d7e8df;border-radius:14px;background:#f3faf6;font-size:16px;line-height:1.5;cursor:pointer;text-align:left;
}
html body #modulo-stato-annuncio .listing-state-check > input[type="checkbox"] {
 appearance:auto;-webkit-appearance:checkbox;display:block;position:static;flex:0 0 24px;width:24px;min-width:24px;max-width:24px;height:24px;min-height:24px;margin:0;padding:0;accent-color:#198754;cursor:pointer;box-shadow:none;
}
html body #modulo-stato-annuncio .listing-state-check:has(input:checked){border-color:#30a568;background:#e4f6eb}
html body #modulo-stato-annuncio .listing-state-check > input:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
@media(max-width:600px){html body #modulo-stato-annuncio .listing-state-check{align-items:flex-start;padding:14px;font-size:15px}}

/* Marchio nella scheda animale: contrasto sul fondo chiaro. */
html body .wallet-card .wallet-card-header .wallet-card-brand {
 color:#164b78!important;font-weight:800;opacity:1!important;text-shadow:none!important;-webkit-text-fill-color:#164b78!important;background:none!important;background-clip:initial!important;-webkit-background-clip:initial!important;
}
html body .wallet-card .wallet-card-header .wallet-card-brand > span {
 color:#e96c22!important;opacity:1!important;-webkit-text-fill-color:#e96c22!important;text-shadow:none!important;
}

/* Logo NÜMI nel piede di tutte le pagine. */
html body .piede-marchio { display:block; width:132px; height:88px; flex:0 0 132px; background:url("assets/brand/findme-logo-numi.png") center/contain no-repeat; font-size:0; }
html body .piede-marchio span { display:none; }

/* Il logo NÜMI resta interamente dentro il fondo pagina. */
html body .piede { max-height:none; height:auto; }
html body .piede-interno { padding-block:12px; }
@media (max-width:600px) {
  html body .piede-interno { row-gap:8px; padding-block:12px; }
}

/* Regola comune: gruppi di azioni centrati su desktop e telefono. */
html body :is(.azioni-modulo,.account-azioni,.scheda-azioni,.mio-annuncio-azioni,.hero-azioni,.novita-azioni,.conferma-azioni,.rejection-actions,.fm-payment-actions,.fm-plan-footer,.fm-donation-actions,.fm-invio-azioni,.fm-found-donation-actions,.fm-manage-actions,.fm-manage-top-actions,.fm-admin-remove-actions,.fm-moderation-actions,.fm-photo-actions,.fm-staff-actions,.fm-email-actions,.fm-push-actions,.fm-blocked-actions,.fm-percorso-actions,.wallet-secondary-actions){justify-content:center!important;justify-items:center!important;text-align:center;gap:16px;}
html body .account-azioni>a{flex:0 1 auto;}
html body .fm-payment-actions{width:100%;}