/* Stile condiviso da più pagine del sito.

   Qui sta ciò che NON appartiene a una pagina sola: l'ossatura comune (header, briciole di
   pane, hero, contenitori), i moduli (`.portale-form-*`, la pagina di login), e le regole di
   confine — quelle che agganciano classi di pagine diverse e non possono stare in nessuna
   delle due.

   Il criterio è meccanico e non opinabile: una classe usata da UN solo template va nel file
   di quel template; usata da PIÙ template, va qui. Vedi la regola CSS in CLAUDE.md.

   Va caricato PRIMA dei file di pagina: quelli sovrascrivono ciò che serve, e a parità di
   specificità vince l'ultimo. Sta in base.html, quindi arriva a ogni pagina.
*/

/* Override del portale — regole nostre, separate dai CSS originali del template. */

/* Base: i controlli di form sono gli unici elementi che NON ereditano il font della pagina
   (il browser gli impone il proprio di sistema). Questa regola sola li riallinea al font del
   sito — combobox, campi di ricerca, modali e ogni campo futuro — evitando pezze sparse. */
input, textarea, select, button { font-family: inherit; }

/* Sticky footer: il wrapper è alto almeno quanto il viewport e in colonna; il contenuto
   (main) cresce per riempire lo spazio, così il footer resta ancorato in fondo anche
   quando la pagina ha poco contenuto (es. i form) invece di risalire a metà. */
.body-innerwrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body-innerwrapper #sp-main-body { flex: 1 0 auto; }

.body-innerwrapper #sp-footer { flex: 0 0 auto; }

/* Numero di versione accanto al copyright: si legge quando lo si cerca — serve a chi
   segnala un problema, non a chi visita il sito — quindi più piccolo e più tenue del testo
   che lo precede, senza andare a capo per conto suo. */
.sp-copyright .sp-versione {
  font-size: 0.85em;
  opacity: 0.6;
  margin-left: 6px;
  white-space: nowrap;
}

/* Home e pagine interne: il contenuto (carousel/hero) è a filo dell'header
   (niente padding sul main, che di default nel template è 100px). L'header scorre col
   contenuto (non fisso), come il sito originale: nessuna compensazione necessaria. */
body.home-page #sp-main-body,
body.pagina-interna #sp-main-body {
  padding: 0;
}

/* Home — blocco "CIVA / FAQ": sfondo verde-grigio a tutta larghezza + respiro verticale
   (nell'originale era uno stile inline della sezione #blocco). */
#blocco {
  background-color: #6a6c5e;
  padding: 50px 0;
}

/* ── Menu mobile a cassetto (sotto 992px) ──
   Il menu desktop (.sp-megamenu-parent) è nascosto da Bootstrap (d-none d-lg-block) sotto
   992px. Qui, quando l'hamburger apre il menu (#sp-menu.menu-aperto), lo mostriamo come
   cassetto verticale. Implementazione nostra, semplice e robusta (niente offcanvas Helix). */
@media (max-width: 991px) {
  /* Hamburger ancorato a destra (il float:right di Helix viene sovrascritto altrove). */
  #sp-menu .sp-megamenu-wrapper {
    text-align: right;
  }
  #offcanvas-toggler.offcanvas-toggler-right {
    float: none;
    display: inline-block;
    margin: 0;
  }

  /* Cassetto mobile: pannello di 300px fisso ancorato a destra sotto l'header (come
     l'originale Helix). Ancorato al viewport (fixed), non a #sp-menu (col-4 = 1/3 larghezza,
     che troncava le voci). Su schermi < 300px si adatta con max-width. */
  #sp-menu.menu-aperto .sp-megamenu-parent {
    display: block !important;      /* vince su d-none di Bootstrap */
    position: fixed;
    right: 0;
    top: 105px;                     /* altezza dell'header */
    width: 300px;
    max-width: 100%;                /* non sfora su telefoni molto stretti */
    max-height: calc(100vh - 105px);
    overflow-y: auto;               /* se le voci superano l'altezza schermo, scrolla */
    background: #2a2a2a;
    padding: 10px 0;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }
  #sp-menu.menu-aperto .sp-megamenu-parent > li {
    display: block;
    width: 100%;
  }
  #sp-menu.menu-aperto .sp-megamenu-parent > li > a {
    display: block;
    padding: 12px 20px;
    color: #e6e6e6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  #sp-menu.menu-aperto .sp-megamenu-parent > li > a:hover {
    color: #52bdec;
  }
  /* Sottomenu (Servizi, Area condomini): mostrati sempre, rientrati. */
  #sp-menu.menu-aperto .sp-megamenu-parent .sp-dropdown {
    display: block !important;
    position: static;
    width: auto !important;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.2);
  }
  #sp-menu.menu-aperto .sp-megamenu-parent .sp-dropdown a {
    color: #cfcfcf;
    padding: 10px 20px 10px 35px;
  }
  /* L'header deve poter mostrare la tendina che esce sotto di lui. */
  #sp-header { position: relative; }
}

/* Hero delle pagine interne: immagine di sfondo cover + titolo bianco sovrapposto.
   Riproduce lo stile inline che il page builder generava per la sezione titolo. */
.pagina-hero {
  padding: 150px 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 75%; /* default; sovrascrivibile inline per pagina */
}

/* Mobile: hero più compatto e titolo più piccolo (l'originale non li scalava, qui sì). */
@media (max-width: 767px) {
  .pagina-hero {
    padding: 80px 0;
  }
  .pagina-hero .sppb-addon-title {
    font-size: 28px;
  }
}

.pagina-hero .sppb-addon-title {
  color: #fff;
  font-size: 46px;
  font-weight: 500;
  margin: 0;
  text-shadow: 1px 1px 2px #000;   /* ombra che stacca il titolo dallo sfondo, come l'originale */
}

/* Contenuto testuale delle pagine interne: spaziatura verticale come l'originale. */
.pagina-contenuto {
  padding: 50px 0;
}

/* L'ultima riga del form chiude la card: il suo margine lascerebbe un vuoto in fondo. */
.ricerca-pubblica-intro .portale-form-riga:last-child {
  margin-bottom: 0;
}

/* Tabelle larghe (es. Norme e Leggi): scroll orizzontale su mobile invece di sfondare
   la pagina, così il body non scrolla mai in orizzontale. */
.tabella-scroll {
  overflow-x: auto;
}

/* Pagine legali (Privacy Policy, Politica dei Cookie): titolo grande nero + testo,
   senza hero immagine. Il main mantiene il suo padding di default (100px). */
.pagina-legale .sppb-row-container {
  padding-left: 15px;
  padding-right: 15px;
}

.pagina-legale h1 {
  font-size: 48px;
  font-weight: 500;
  color: #252525;
  margin-bottom: 30px;
}

/* Banner di consenso (riprodotto dal plugin spcookieconsent dell'originale). */
#sp-cookie-consent {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10001;
  background-color: #4a13d6;
  color: #ffffff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  line-height: 1.4;
}

/* Solo i link informativi nel testo (privacy, cookie): chiari e sottolineati sul fondo viola.
   Il tasto "Accetto" è un <a> ma è escluso, se no questa regola (specificità da ID) vincerebbe
   su .btn-neutro e gli dipingerebbe il testo di bianco → invisibile sul bottone bianco. */
#sp-cookie-consent a:not(.btn) {
  color: #f5f5f5;
  text-decoration: underline;
}

#sp-cookie-consent .sp-cookie-consent-action {
  flex: 0 0 auto;
}

/* Il tasto "Accetto" è `.btn .btn-neutro` di componenti/bottoni.css: bianco su fondo scuro,
   come gli altri comandi secondari del sito. Aveva misure proprie (raggio 3px, 8px 22px),
   ereditate dal plugin Joomla da cui il banner è stato riprodotto. */
@media (max-width: 767px) {
  #sp-cookie-consent {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Stampa: mostra solo il contenuto dell'articolo (titolo + testo),
   nascondi header, menu, footer, banner e i pulsanti stampa/email. */
@media print {
  #sp-top-bar,
  #sp-header,
  #sp-footer,
  #sp-cookie-consent,
  .article-print-email {
    display: none !important;
  }
  body,
  .body-innerwrapper {
    background: #fff !important;
    box-shadow: none !important;
  }
  #sp-main-body {
    padding: 0 !important;
  }
}

/* Font delle voci di menu a 17px: leggermente più grande di 16px ma il menu resta comodo
   su una riga anche su schermi non larghissimi (l'override di custom.css era 18px). */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  font-size: 17px;
}

/* Voce del menu principale della pagina corrente: grassetto + verde salvia (lo stesso
   dell'hover), che spicca sull'header scuro. */
.sp-megamenu-parent > li.voce-attiva > a {
  font-weight: 700;
  color: #b3d88c;
}

/* Voce nel sottomenu (sfondo chiaro): grassetto, senza cambiare colore
   — il bianco sparirebbe sul fondo chiaro del dropdown. */
.sp-megamenu-parent .sp-dropdown li.voce-attiva > a {
  font-weight: 700;
}

/* ── Sottomenu (Servizi, Area condomini): stessa grammatica del menu utente "Esci" ──
   I dropdown Helix erano squadrati con hover azzurro pieno; qui li portiamo allo stile del
   menu login: card arrotondata con ombra morbida e voci con hover azzurro soft. Selettori
   specifici per vincere sulle regole di custom.css/default.css originali del template. */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #fff;
  border: 1px solid #e3e3df;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 6px;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-items { margin: 0; }

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 17px;   /* come le voci del menu principale */
  color: #333;
  background: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background: #b3d88c;   /* verde salvia dell'hover del menu principale */
  color: #1a1a1a;
}

/* ── Blocco accesso nell'header: distinto dal menu, ancorato a destra ──
   Palette derivata dal sito: accent azzurro brand #52bdec, testo chiaro #e6e6e6
   su header scuro. Componente utilitario, curato ma discreto. */
#sp-menu .sp-column {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Recupera lo spazio sprecato a destra: il .container Joomla ha ~75px di padding-right
   e la colonna menu 15px. Riavvicino il blocco accesso al bordo destro dell'header. */
@media (min-width: 992px) {
  #sp-header .container { padding-left: 40px; padding-right: 40px; }
  #sp-menu.col-lg-9 { padding-right: 0; }
  /* Colonna logo ridotta (l'immagine è 220px, il 25% ne lasciava ~113 vuoti): il menu resta
     a ~40px dal logo. La colonna menu recupera il 25% ceduto dal logo, così arriva fino al
     bordo destro (email a ~40px dal bordo) senza toccare il flex interno del menu. */
  #sp-header #sp-logo { flex: 0 0 275px; max-width: 275px; }
  #sp-header #sp-menu { flex: 0 0 calc(100% - 275px); max-width: calc(100% - 275px); }
}

.header-accesso {
  display: flex;
  align-items: center;
  margin-left: 40px;
  flex: 0 0 auto;
}

/* Sotto 992px l'accesso qui è nascosto: entra nel menu a tendina dell'hamburger. */
@media (max-width: 991px) {
  .header-accesso { display: none; }
}

/* Utente NON loggato: "Accedi" è una voce di menu come le altre — stesso colore azzurro,
   stesso hover verde salvia, stesso font, senza bordo/pillola. */
.header-accedi-btn {
  display: inline-flex;
  align-items: center;
  color: #52bdec;
  font-size: 17px;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.header-accedi-btn:hover,
.header-accedi-btn:focus-visible {
  color: #b3d88c;
  outline: none;
}

/* Utente loggato: l'email è una voce di menu come le altre (email + freccia ▾), senza
   pillola/bordo: colore azzurro, hover verde salvia come le voci del menu principale. */
.header-utente { position: relative; }

.header-utente-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 17px;
  color: #52bdec;
  transition: color 0.18s ease;
}

.header-utente-chip:hover,
.header-utente:hover .header-utente-chip,
.header-utente.aperto .header-utente-chip {
  color: #b3d88c;
}

.header-utente-chip:focus-visible {
  outline: 2px solid #52bdec;
  outline-offset: 2px;
}

/* L'icona persona rende riconoscibile il login; eredita il colore del chip (azzurro→verde
   in hover) via currentColor, restando coerente con le voci di menu. */
.header-utente-icona {
  flex: 0 0 auto;
}

.header-utente-nome {
  white-space: nowrap;
}

.header-utente-freccia {
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform 0.18s ease;
}

.header-utente.aperto .header-utente-freccia,
.header-utente:hover .header-utente-freccia { transform: rotate(180deg); }

/* Dropdown "Esci": card chiara, staccata dal chip. */
.header-utente-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 170px;
  background: #fff;
  border: 1px solid #e3e3df;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 1002;
}

/* Il menu utente si apre al passaggio del mouse (come i sottomenu Servizi/Area condomini);
   il click (classe .aperto, gestito dal JS) resta come fallback per touch/tastiera. */
.header-utente.aperto .header-utente-menu,
.header-utente:hover .header-utente-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Voci identiche ai sottomenu Servizi/Area condomini: solo testo, hover azzurro soft.
   «Esci» è un <button> dentro un form (il logout richiede POST, vedi LogoutPagina), quindi
   va spogliato dell'aspetto che il browser dà ai bottoni per stare in fila con i link. */
.header-utente-menu a,
.header-utente-menu button {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 17px;   /* come le voci del menu principale */
  color: #333;
}

.header-utente-menu button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.header-utente-menu a:hover,
.header-utente-menu button:hover {
  background: #b3d88c;   /* verde salvia dell'hover del menu principale */
  color: #1a1a1a;
}

@media (prefers-reduced-motion: reduce) {
  .header-accedi-btn, .header-utente-chip, .header-utente-freccia, .header-utente-menu {
    transition: none;
  }
}

/* Pagina di login: box centrato nella pagina, senza hero/immagine. */
.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 50px 15px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid #e3e3df;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  padding: 36px 34px;
}

.login-titolo {
  font-size: 28px;
  font-weight: 600;
  color: #252525;
  text-align: center;
  margin: 0 0 6px;
}

.login-sottotitolo {
  text-align: center;
  color: #6a6c5e;
  font-size: 14.5px;
  margin: 0 0 26px;
}

.login-btn {
  width: 100%;
}

/* Chi può accedere: informazione di servizio, sotto il form e in tono minore rispetto
   al sottotitolo, separata da una riga sottile. */
.login-nota {
  text-align: center;
  color: #8a8c80;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid #eceef0;
}

.login-nota a { color: #6a6c5e; text-decoration: underline; }

.login-nota a:hover { color: #252525; }

/* Pagina tecnica (GDPR/GSA per i loggati): niente hero, titolo sobrio in testa. */
.pagina-tecnica { padding-top: 20px; padding-bottom: 0; }

.combobox-opzione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 14px;
}

.combobox-opzione:hover {
  background: #f0f7fb;
  color: #1a1a1a;
}

/* Conteggio condomìni a destra nell'opzione: discreto, cifre allineate. */
.combobox-conteggio {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: #6a6c5e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bottoni azione (palette per ruolo). */
/* I bottoni azione sono `.btn .btn-piccolo` di componenti/bottoni.css. */

/* Nota che spiega come usare la selezione (visibile finché non si spunta nulla). */
/* Nota aiuto e barra selezione si scambiano di posto e partono da questo box comune (bordo,
   raggio, padding laterale, stacco dall'alto). Le altezze restano però diverse di proposito:
   la nota è una riga di testo e sta bassa, la barra si alza quanto le serve per i bottoni —
   ciascuna sovrascrive più sotto ciò che la riguarda. Il bordo trasparente non si vede mai:
   resta perché fa parte dell'ingombro su cui sono calibrate le due altezze. */
.pannello-aiuto-selezione,
.barra-selezione {
  min-height: 40px;               /* altezza di base, che la nota abbassa per conto suo */
  box-sizing: border-box;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
}

/* cerchio pieno azzurro con "i" bianca (colori nell'SVG) */

/* Riga 2 — barra della selezione: appare solo quando si spuntano dei condomìni.
   Altezza, bordo e padding laterale condivisi con la nota aiuto (regola sopra); qui il
   layout interno, lo stacco dall'alto e il padding verticale ridotto.

   Niente sfondo né bordo colorato: la barra prende il posto della nota d'aiuto, e un
   riquadro azzurro che appare alla prima spunta segnalerebbe un cambiamento più grosso di
   quello che è. I bottoni bastano da sé a dire che c'è una selezione attiva. */
.barra-selezione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  /* Più vicina ai controlli sopra di quanto non stia la nota: il riquadro coi bottoni ha già
     un suo ingombro, e con lo stesso stacco della nota risulterebbe troppo distanziato. */
  margin-top: 2px;
  /* Spazio verticale ridotto al minimo attorno ai bottoni, che hanno già un proprio padding
     interno: quel filo basta a non farli toccare il bordo del riquadro. Restano i 14px ai
     lati della regola condivisa. */
  padding-top: 2px;
  padding-bottom: 2px;
}

.trasferimento-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 280px;
  background: #fff;
  border: 1px solid #e3e3df;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 8px;
  z-index: 60;
}

.trasferimento-cerca {
  width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 13.5px;
}

.trasferimento-lista {
  list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto;
}

.trasferimento-lista li {
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px;
}

.trasferimento-lista li:hover { background: #f0f7fb; }

/* Box di ricerca: sua scatola bordata sopra la lista, staccata di 5px. Filtra le righe già
   caricate (puro frontend), niente ricaricamento. */
.pannello-cerca {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #fafbfc;
  border: 1px solid #e4e7eb; border-radius: 10px;
  margin-bottom: 10px;
}

.pannello-cerca-input {
  width: 100%; padding: 9px 36px 9px 12px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 14px; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pannello-cerca-input:focus {
  outline: none; border-color: #52bdec; box-shadow: 0 0 0 3px rgba(82, 189, 236, 0.2);
}

.pannello-cerca-vuoto { margin: 10px 2px 0; font-size: 13px; color: #6a6c5e; }

/* Lista condomìni: il riquadro che scorre e l'intestazione ferma sono di
   componenti/tabella-scroll.css. Qui l'altezza — ~48px per riga × 10 più la testata — e i
   colori, che qui sono più caldi di quelli del componente.
   Il margine va sul wrapper, non sulla tabella: un margin-top sulla tabella creerebbe uno
   spazio dentro l'area scrollabile in cui le righe passano SOPRA l'header sticky. */
#pannello-tabella-wrap {
  max-height: 520px;
  margin-top: 0;                  /* lo stacco lo dà il margin-bottom del box di ricerca */
}

/* Cella azioni per riga: 'Modifica' e 'Più dettagli' come due link affiancati, separati. */
.col-azioni-riga { white-space: nowrap; }

/* Comandi di riga: icona + testo affiancati, separati da divisori sottili. */
.col-azioni-riga .link-modifica,
.col-azioni-riga .link-dettagli,
.col-azioni-riga .link-elimina {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 14px;
  vertical-align: middle;
  transition: color 0.15s ease;
}

.col-azioni-riga .link-modifica { color: #52bdec; }

.col-azioni-riga .link-modifica:hover { color: #3aa9db; }

.col-azioni-riga .link-dettagli,
.pannello-staff-tabella .col-azioni-riga .link-dettagli {
  color: #52bdec;
}

/* Il separatore (bordo/margine a sinistra) solo se 'Più dettagli' segue un altro link. */
.col-azioni-riga .link-dettagli:not(:first-child) {
  margin-left: 14px; padding-left: 14px; border-left: 1px solid #e3e3df;
}

.col-azioni-riga .link-dettagli:hover { color: #3aa9db; }

/* 'Elimina' per riga: rosso semantico, ultimo, separato. */
.col-azioni-riga .link-elimina {
  background: none; border: none; cursor: pointer;
  color: #b00020;
  margin-left: 14px; padding-left: 14px; border-left: 1px solid #e3e3df;
}

.col-azioni-riga .link-elimina:hover { color: #8a0019; }

.col-azioni-riga svg { flex: 0 0 auto; }

/* Form del portale (es. Reclami): impaginazione pulita dei campi. */
.portale-form-riga {
  margin-bottom: 16px;
}

.portale-form-riga label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.portale-form .errorlist,
.portale-form-errore {
  color: #b00020;
  font-size: 13px;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

/* ══ Area Ministero (MISE): documentazione istituzionale riservata, a timeline per anno ══
   Palette: accent brand #52bdec, blu istituzionale profondo #1a3d52 (gravità), neutro freddo
   #f7f8f9, testo #252525, secondario #6a6c5e. Layout: anno-ancora a sinistra, card a destra. */

/* Intestazione istituzionale: testo a sinistra, azione "aggiungi" (staff) a destra. */
.mise-testata {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 20px 24px;
  padding-bottom: 22px; margin-bottom: 32px;
  border-bottom: 2px solid #eceae6;   /* linea di separazione, come la riga risultato di GDPR */
}

.mise-testata-testo { flex: 1 1 340px; }

.mise-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #52bdec; margin-bottom: 10px;
}

.mise-titolo {
  font-size: 30px; font-weight: 700; line-height: 1.15; color: #1a3d52;
  margin: 0 0 14px; text-wrap: balance; max-width: 20ch;
}

.mise-intro { font-size: 15px; line-height: 1.6; color: #6a6c5e; margin: 0; max-width: 60ch; }

.mise-dialog {
  background: #fff; border-radius: 12px; padding: 26px 28px; max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* I bottoni dei documenti sono `.btn .btn-piccolo` di componenti/bottoni.css. */

.mise-vuoto { color: #6a6c5e; }

/* ══ Form "Aggiungi condominio": colonna centrata, sezioni logiche (anagrafica/indirizzo/doc) ══
   Palette brand: blu istituzionale #1a3d52, accent #52bdec, neutri freddi #f7f8f9/#e3e8ec. */
.cond-wrap { max-width: 560px; margin: 0 auto; padding-bottom: 48px; }

/* Intestazione: a chi si aggiunge il condominio (avatar-iniziale + nome). */
.cond-testa {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 11px; margin-bottom: 0; border-bottom: 1px solid #e3e8ec;
}

.cond-avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #1a3d52; color: #fff; font-size: 18px; font-weight: 700; line-height: 1;
}

.cond-testa-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cond-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #52bdec;
}

.cond-titolo { font-size: 19px; font-weight: 700; color: #252525; margin: 0; word-break: break-word; }

.cond-avatar svg { display: block; }

.cond-avatar-ok { background: #2f7d54; }

/* Sezioni: raggruppano campi affini, separate da linee sottili. */
.cond-form { display: flex; flex-direction: column; }

.cond-sezione { padding: 11px 0; border-bottom: 1px solid #eceef0; display: flex; flex-direction: column; gap: 7px; }

.cond-sezione-titolo {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #1a3d52; margin: 0;
}

.cond-campo { display: flex; flex-direction: column; gap: 3px; }

.cond-campo label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #6a6c5e; }

/* L'asterisco del campo obbligatorio è passato a componenti/form.css (`.obbligatorio`). */
.cond-campo input[type="text"],
.cond-campo input[type="email"],
.cond-campo input[type="url"],
.cond-campo input[type="tel"],
.cond-campo select,
.cond-campo textarea {
  width: 100%; padding: 7px 12px; border: 1px solid #d4dbe0; border-radius: 8px;
  font-size: 14px; color: #252525; background: #fff; font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* L'altezza la decide il widget (vedi ReclamoForm): qui solo il minimo sotto cui non
   scendere se l'utente rimpicciolisce il campo trascinandolo. */
.cond-campo textarea { min-height: 60px; resize: vertical; }

.cond-campo input:focus,
.cond-campo select:focus,
.cond-campo textarea:focus { outline: none; border-color: #52bdec; box-shadow: 0 0 0 3px rgba(82, 189, 236, 0.18); }

/* Griglie per l'indirizzo: via+civico, città+cap+prov. */
.cond-griglia { display: grid; gap: 12px; }

.cond-griglia-citta { grid-template-columns: 1fr 110px 90px; }

/* Azioni: annulla (outline) + crea (accent), allineate a destra. */
.cond-azioni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* I bottoni sono `.btn` di componenti/bottoni.css. */

/* Errori di modulo e di campo, nota sotto un campo e selettore file sono passati a
   componenti/form.css: `.errore`, `.errorlist`, `.nota`, `input[type=file]`. */

@media (max-width: 520px) {
  .cond-griglia-citta, .cond-griglia-contatti { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cond-campo input, .cond-doc { transition: none; }
}

/* Modale eliminazione amministratore. */
.admin-dialog-overlay {
  position: fixed; inset: 0; z-index: 100050;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(26, 61, 82, 0.45);
}

/* `display: flex` qui sopra batte l'attributo `hidden`, che il browser rende come
   `display: none` a specificità zero: senza questa riga un dialogo con `hidden` resta
   visibile. Serve a tutti e tre i dialoghi, che si aprono e chiudono proprio con
   quell'attributo. */
.admin-dialog-overlay[hidden] { display: none; }

.admin-dialog {
  background: #fff; border-radius: 12px; padding: 26px 28px; max-width: 480px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.admin-dialog-titolo { font-size: 19px; font-weight: 700; color: #1a3d52; margin: 0 0 12px; }

.admin-dialog-azioni { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Variante "esito di una ricerca": avviso informativo, non una conferma da dare ──────
   Il dialogo condiviso è tarato sulle conferme dello staff, che chiedono una decisione. Qui
   invece si comunica soltanto com'è andata, quindi la card è più stretta, centrata e aperta
   da un'icona che dice l'esito prima ancora che si legga il titolo. */
.dialogo-esito .admin-dialog {
  max-width: 400px;
  padding: 28px 28px 24px;
  text-align: center;
  animation: dialogo-esito-entra 0.22s ease-out;
}

.dialogo-esito .admin-dialog-titolo { margin-bottom: 8px; }

/* Il bottone occupa la riga: è l'unica cosa da fare, e a tutta larghezza si preme senza
   mirare — soprattutto da telefono. */
.dialogo-esito .admin-dialog-azioni { justify-content: stretch; }

.dialogo-esito .admin-dialog-azioni .btn { flex: 1; justify-content: center; }

/* Entrata breve: il dialogo compare al ricaricamento della pagina, e comparire di colpo
   sembra un errore del browser più che una risposta alla ricerca. */
@keyframes dialogo-esito-entra {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dialogo-esito .admin-dialog { animation: none; }
}

@keyframes art-appari { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Anteprima: riquadro "foglio bianco" che mostra il testo come apparirà sul sito. */
.art-anteprima {
  border: 1px solid #e3e8ec; border-radius: 12px; padding: 22px 24px; background: #fff;
  font-size: 14.5px; line-height: 1.65; color: #252525; min-height: 120px; overflow-y: auto;
  box-shadow: 0 1px 3px rgba(26,61,82,0.05);
}

.art-anteprima > *:first-child { margin-top: 0; }

.art-anteprima > *:last-child { margin-bottom: 0; }

.art-anteprima p { margin: 0 0 14px; }

.art-anteprima ul, .art-anteprima ol { margin: 0 0 14px; padding-left: 22px; }

.art-anteprima li { margin-bottom: 6px; }

.art-anteprima strong { color: #1a3d52; font-weight: 700; }

.art-anteprima a { color: #52bdec; }

.art-anteprima a:hover { color: #3aa9db; }

.art-anteprima:empty::before { content: 'L\2019anteprima appare qui mentre scrivi.'; color: #b0b2a8; font-size: 13.5px; }

/* Tasto "Modifica questo testo" in cima alle pagine editabili (solo editor/superuser). */
/* "Modifica questo testo" è `.btn .btn-piccolo .btn-neutro` di componenti/bottoni.css.
   Era azzurro tenue con misure sue: ora ha la stessa forma degli altri comandi minori. */

/* Occhio password: campo con il bottone per mostrarla in chiaro. Riusabile ovunque
   (account, login, imposta-password, ecc.). */
.campo-pwd { position: relative; }

.campo-pwd input { padding-right: 44px; }

.pwd-occhio {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #6a6c5e;
  border-radius: 6px; transition: color 0.15s ease, background-color 0.15s ease;
}

.pwd-occhio:hover { color: #1a3d52; background: #eceef0; }

.pwd-occhio:focus-visible { outline: 2px solid #52bdec; outline-offset: 1px; }

.pwd-occhio::before {
  content: ''; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--occhio) center / contain no-repeat; mask: var(--occhio) center / contain no-repeat;
  --occhio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
}

.pwd-occhio.mostra::before {
  --occhio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.5-6.5 10-6.5c1.7 0 3.2.4 4.5 1M22 12s-3.5 6.5-10 6.5c-1.7 0-3.2-.4-4.5-1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4 4l16 16' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Triangolo (caret-down) accanto alle voci di menu con sottomenu — Servizi, Area condomini.
   Il template Helix minificato ha la regola .sp-has-child>a:after ma col glifo perso in import
   (content vuoto): qui ripristiniamo il triangolino pieno di Font Awesome. */
.sp-megamenu-parent > li.sp-has-child > a::after {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 7px;
}

/* Breadcrumb (briciole di pane): percorso di navigazione in cima alle pagine interne.
   Discreto: testo piccolo grigio, separatori '›', link azzurri, pagina corrente in evidenza. */
.briciole {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px 0;
  font-size: 14px;
  color: #8a94a6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.briciole a { color: #52bdec; text-decoration: none; }

.briciole a:hover { text-decoration: underline; }

.briciole-sep { color: #c2cad4; }

.briciole-inerte { color: #8a94a6; }

.briciole-corrente { color: #4b5563; font-weight: 600; }

.pagina-contenuto:has(.reclamo-wrap) { padding-bottom: 20px; }

/* Pagine legali (privacy, cookie). I testi arrivavano da Word via Joomla e portavano la
   formattazione del documento su ogni paragrafo: font Calibri, corpi in punti, margini in
   centimetri — 230 attributi style inline che ripetevano ciò che questo foglio già decide.
   Qui restano solo le poche regole che portano un significato: i titoli colorati, la
   tabella delle istruzioni per i browser, il centraggio. */
.legale-titolo { color: #365f91; }

.testo-centrato { text-align: center; }

.tabella-browser {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  margin: 12px 0 20px;
}

.tabella-browser td { border: 1px solid #ccc; padding: 8px 10px; vertical-align: top; }

.tabella-browser td p { margin: 0 0 4px; }

.tabella-browser td p:last-child { margin-bottom: 0; }

/* Prima colonna: il nome del browser, stretto; la seconda prende lo spazio restante. */
.cella-browser { width: 26%; }

.cella-istruzioni { width: 74%; }

@media (max-width: 720px) {
  /* Su schermo stretto la tabella scorre invece di far scorrere tutta la pagina. */
  .tabella-browser { display: block; overflow-x: auto; }
}