/*
 * Personalizzazioni del progetto. I sorgenti Metronic in ../metronic/ non
 * vengono mai modificati: qui solo variabili e override mirati.
 */

/* --------------------------------------------------------------------------
 * Identità visiva. Unico punto da toccare per cambiare la palette: i valori
 * sono poi ridichiarati sulle variabili Bootstrap/Metronic subito sotto.
 * -------------------------------------------------------------------------- */
:root {
  /* Azzurro dei link e della voce di menu attiva */
  --app-primario: #2F6FD6;
  --app-primario-attivo: #2459B8;
  --app-primario-chiaro: #EAF1FC;

  --app-successo: #1FA971;
  --app-successo-attivo: #198C5E;
  --app-successo-chiaro: #E6F6EF;

  /* Blu notte: sidebar, titoli, bottoni "pieni" delle card promozionali */
  --app-info: #1B3A6B;
  --app-info-attivo: #152E56;
  --app-info-chiaro: #E8EDF5;

  --app-attenzione: #F5A524;
  --app-attenzione-attiva: #D98C0F;
  --app-attenzione-chiara: #FEF5E4;

  --app-pericolo: #EF4444;
  --app-pericolo-attivo: #D63333;
  --app-pericolo-chiaro: #FDECEC;

  /* Colore extra (comunicazioni) */
  --app-viola: #7C5CD6;
  --app-viola-chiaro: #F1EDFC;

  --app-sfondo-pagina: #F4F7FB;
  --app-bordo-card: #E6ECF4;

  --app-sidebar-sfondo: #13294B;
  --app-sidebar-sfondo-fine: #0F2140;
  --app-sidebar-testo: #C9D4E5;
  --app-sidebar-separatore: rgba(255, 255, 255, 0.12);
}

/*
 * Ridichiarazione delle variabili Bootstrap/Metronic: quasi tutte le
 * utility (text-*, bg-*, bg-light-*, alert-*, badge-*, i link del menu)
 * le leggono a runtime, quindi da qui in poi bastano i valori sopra.
 */
:root {
  --bs-primary: var(--app-primario);
  --bs-primary-active: var(--app-primario-attivo);
  --bs-primary-light: var(--app-primario-chiaro);
  --bs-primary-rgb: 47, 111, 214;
  --bs-text-primary: var(--app-primario);
  --bs-menu-link-color-hover: var(--app-primario);
  --bs-menu-link-color-show: var(--app-primario);
  --bs-menu-link-color-here: var(--app-primario);
  --bs-menu-link-color-active: var(--app-primario);

  --bs-success: var(--app-successo);
  --bs-success-active: var(--app-successo-attivo);
  --bs-success-light: var(--app-successo-chiaro);
  --bs-success-rgb: 31, 169, 113;
  --bs-text-success: var(--app-successo);

  --bs-info: var(--app-info);
  --bs-info-active: var(--app-info-attivo);
  --bs-info-light: var(--app-info-chiaro);
  --bs-info-rgb: 27, 58, 107;
  --bs-text-info: var(--app-info);

  --bs-warning: var(--app-attenzione);
  --bs-warning-active: var(--app-attenzione-attiva);
  --bs-warning-light: var(--app-attenzione-chiara);
  --bs-warning-rgb: 245, 165, 36;
  --bs-text-warning: var(--app-attenzione);

  --bs-danger: var(--app-pericolo);
  --bs-danger-active: var(--app-pericolo-attivo);
  --bs-danger-light: var(--app-pericolo-chiaro);
  --bs-danger-rgb: 239, 68, 68;
  --bs-text-danger: var(--app-pericolo);
}

/*
 * I componenti Bootstrap (bottoni in primis) fissano il colore in variabili
 * locali al momento della build del CSS, non lo leggono da --bs-primary a
 * runtime: vanno ridichiarati esplicitamente qui, sempre a partire dalle
 * stesse variabili sopra.
 */
.btn-primary {
  --bs-btn-bg: var(--app-primario);
  --bs-btn-border-color: var(--app-primario);
  --bs-btn-hover-bg: var(--app-primario-attivo);
  --bs-btn-hover-border-color: var(--app-primario-attivo);
  --bs-btn-active-bg: var(--app-primario-attivo);
  --bs-btn-active-border-color: var(--app-primario-attivo);
}
.btn-success {
  --bs-btn-bg: var(--app-successo);
  --bs-btn-border-color: var(--app-successo);
  --bs-btn-hover-bg: var(--app-successo-attivo);
  --bs-btn-hover-border-color: var(--app-successo-attivo);
  --bs-btn-active-bg: var(--app-successo-attivo);
  --bs-btn-active-border-color: var(--app-successo-attivo);
}
.btn-info {
  --bs-btn-bg: var(--app-info);
  --bs-btn-border-color: var(--app-info);
  --bs-btn-hover-bg: var(--app-info-attivo);
  --bs-btn-hover-border-color: var(--app-info-attivo);
  --bs-btn-active-bg: var(--app-info-attivo);
  --bs-btn-active-border-color: var(--app-info-attivo);
}
.btn-warning {
  --bs-btn-bg: var(--app-attenzione);
  --bs-btn-border-color: var(--app-attenzione);
  --bs-btn-hover-bg: var(--app-attenzione-attiva);
  --bs-btn-hover-border-color: var(--app-attenzione-attiva);
  --bs-btn-active-bg: var(--app-attenzione-attiva);
  --bs-btn-active-border-color: var(--app-attenzione-attiva);
}
.btn-danger {
  --bs-btn-bg: var(--app-pericolo);
  --bs-btn-border-color: var(--app-pericolo);
  --bs-btn-hover-bg: var(--app-pericolo-attivo);
  --bs-btn-hover-border-color: var(--app-pericolo-attivo);
  --bs-btn-active-bg: var(--app-pericolo-attivo);
  --bs-btn-active-border-color: var(--app-pericolo-attivo);
}

/* Colore extra "viola" (comunicazioni): Metronic non ha la variante. */
.text-viola { color: var(--app-viola) !important; }
.bg-light-viola { background-color: var(--app-viola-chiaro) !important; }
.badge-viola {
  color: #ffffff;
  background-color: var(--app-viola);
}
.btn.btn-light-viola {
  color: var(--app-viola);
  background-color: var(--app-viola-chiaro);
}
.btn.btn-light-viola:hover {
  color: #ffffff;
  background-color: var(--app-viola);
}

/* --------------------------------------------------------------------------
 * Layout comune alle due aree (vedi views/{admin,condomini}/layout/head.php):
 * sidebar blu notte (variante nativa Metronic "dark-sidebar" ricolorata),
 * header bianco, sfondo pagina grigio-azzurro, card a bordi morbidi.
 * -------------------------------------------------------------------------- */
[data-bs-theme="light"] {
  --bs-app-bg-color: var(--app-sfondo-pagina);
  /*
   * Metronic rende l'header trasparente di default (pensato per scorrere su
   * una "hero" colorata, poi diventare bianco allo scroll): qui lo fissiamo
   * bianco con un bordo sottile, sempre.
   */
  --bs-app-header-base-bg-color: #ffffff;
  --bs-app-header-base-box-shadow: 0 1px 0 var(--app-bordo-card);
  --bs-app-header-minimize-bg-color: #ffffff;
  --bs-app-header-minimize-box-shadow: 0 1px 0 var(--app-bordo-card);
}

.card {
  --bs-card-border-radius: 0.9rem;
  --bs-card-inner-border-radius: 0.9rem;
  border: 1px solid var(--app-bordo-card);
  box-shadow: 0 1px 3px rgba(19, 41, 75, 0.04);
}

/* Header: avatar + nome + freccia come un unico elemento cliccabile. */
.header-utente {
  padding: 0.35rem 0.5rem;
  border-radius: 0.65rem;
  transition: background-color 0.15s ease;
}
.header-utente:hover {
  background-color: var(--app-sfondo-pagina);
}

/* Sidebar ----------------------------------------------------------------- */
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
  background: linear-gradient(180deg, var(--app-sidebar-sfondo) 0%, var(--app-sidebar-sfondo-fine) 100%);
  border-right: 0;
}

/* Marchio in testa alla sidebar (studio o condominio attivo). */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .sidebar-marchio {
  border-bottom: 0;
}
.sidebar-marchio-icona {
  font-size: 2.4rem;
  color: #ffffff;
}
.sidebar-marchio-titolo {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 180px;
}
.sidebar-marchio-sottotitolo {
  color: var(--app-sidebar-testo);
  font-size: 0.8rem;
}

/* Voci di menu: testo e icone chiari, voce attiva a "pillola" azzurra. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link {
  padding: 0.8rem 1rem;
  margin-bottom: 0.35rem;
  border-radius: 0.65rem;
  color: var(--app-sidebar-testo);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-title {
  color: var(--app-sidebar-testo);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: var(--app-sidebar-testo);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon {
  margin-right: 0.9rem;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
  background-color: var(--app-sidebar-testo);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
  background: linear-gradient(90deg, var(--app-primario-attivo) 0%, var(--app-primario) 100%);
  box-shadow: 0 4px 12px rgba(47, 111, 214, 0.35);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
  color: #ffffff;
}

/* Piede della sidebar (area condòmino): selettore condominio, illustrazione, Esci. */
.sidebar-piede {
  padding-top: 1.5rem;
}
.sidebar-piede-etichetta {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
}
.sidebar-condominio {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.65rem;
  color: #ffffff;
}
.sidebar-condominio i {
  color: #ffffff;
}
.sidebar-condominio.cursor-pointer:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
.sidebar-condominio-nome {
  font-size: 0.85rem;
  font-weight: 600;
}
.sidebar-condominio-indirizzo {
  font-size: 0.75rem;
  color: var(--app-sidebar-testo);
}
/* Area amministrazione: condominio attivo in testa al menu e gruppi di voci. */
.sidebar-condominio-attivo .sidebar-condominio:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
/* Il riquadro del condominio attivo è anche il selettore (menu a discesa). */
.sidebar-condominio-selettore {
  background: transparent;
  cursor: pointer;
}
.sidebar-condominio-selettore:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--app-primario);
}
.sidebar-condominio-triangolo {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-left: 0.6rem;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #ffffff;
  transition: transform 0.15s ease;
}
.sidebar-condominio-selettore[aria-expanded="true"] .sidebar-condominio-triangolo {
  transform: rotate(180deg);
}
.menu-condomini {
  margin-top: 0.35rem !important;
  border-radius: 0.65rem;
  box-shadow: 0 10px 30px rgba(15, 33, 64, 0.25);
}
.menu-condomini-elenco {
  max-height: 320px;
  overflow-y: auto;
}
.menu-condomini-voce {
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  white-space: normal;
}
.menu-condomini-voce .menu-condomini-indirizzo {
  color: var(--bs-gray-600);
}
.menu-condomini-voce.active,
.menu-condomini-voce:active {
  background-color: var(--app-primario-chiaro);
  color: var(--app-primario);
}
.sidebar-cambia-condominio {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding-left: 0.25rem;
  color: var(--app-sidebar-testo);
  font-size: 0.8rem;
  font-weight: 500;
}
.sidebar-cambia-condominio i {
  color: inherit;
}
.sidebar-cambia-condominio:hover {
  color: #ffffff;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-heading.sidebar-intestazione-gruppo {
  color: rgba(201, 212, 229, 0.6) !important;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Pagina Utenti: elenco dei condomini assegnabili, scorrevole. */
.elenco-assegnazioni {
  max-height: 260px;
  overflow-y: auto;
  padding: 0.5rem 1rem;
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.65rem;
  column-width: 220px;
}

/*
 * Selettore dell'unità: <select> nativo (su mobile apre il selettore del
 * sistema) reso trasparente dentro il riquadro, con la freccia disegnata.
 */
.sidebar-selettore-unita {
  position: relative;
  padding: 0;
}
.sidebar-selettore-unita > .ki-home-3 {
  position: absolute;
  left: 0.9rem;
  pointer-events: none;
}
.sidebar-selettore-unita select {
  width: 100%;
  min-width: 0;
  padding: 0.85rem 2.4rem 0.85rem 3.4rem;
  border: 0;
  border-radius: 0.65rem;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.sidebar-selettore-unita select:focus-visible {
  box-shadow: 0 0 0 2px var(--app-primario);
}
.sidebar-selettore-unita select option,
.sidebar-selettore-unita select optgroup {
  color: var(--bs-gray-900);
  background-color: #ffffff;
}
.sidebar-selettore-freccia {
  position: absolute;
  right: 0.9rem;
  pointer-events: none;
}
.sidebar-esci.btn.btn-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1rem;
  color: var(--app-sidebar-testo);
  font-weight: 500;
}
.sidebar-esci.btn.btn-link i {
  color: var(--app-sidebar-testo);
}
.sidebar-esci.btn.btn-link:hover,
.sidebar-esci.btn.btn-link:hover i {
  color: #ffffff;
}

/* Header: ricerca a pillola e contatore delle notifiche sulla campanella. */
.header-ricerca {
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 420px;
  padding: 0.6rem 1rem;
  background-color: var(--app-sfondo-pagina);
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.65rem;
}
.header-ricerca i {
  color: var(--bs-gray-600);
}
.header-ricerca input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bs-gray-900);
  font-size: 0.95rem;
}
.header-notifiche-contatore {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background-color: var(--app-pericolo);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* --------------------------------------------------------------------------
 * Componenti delle pagine
 * -------------------------------------------------------------------------- */

/*
 * Righe di elenco compatte (dashboard, ricerca): icona in un riquadro
 * colorato, titolo e sottotitolo, freccia. Separate da un filetto.
 */
.elenco-riga {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0;
  color: inherit;
}
.elenco-riga + .elenco-riga {
  border-top: 1px solid var(--app-bordo-card);
}
a.elenco-riga:hover .elenco-riga-titolo {
  color: var(--app-primario);
}
.elenco-riga-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 0.6rem;
}
.elenco-riga-icona i {
  color: inherit;
}
.elenco-riga-titolo {
  color: var(--bs-gray-900);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.15s ease;
}
.elenco-riga-sottotitolo {
  color: var(--bs-gray-600);
  font-size: 0.8rem;
}
.attivita-punto {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin: 0 0.4rem;
  border-radius: 50%;
}
.bg-viola { background-color: var(--app-viola) !important; }

.card-header-elenco {
  min-height: 60px;
  border-bottom: 0;
}
.card-header-elenco .card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-gray-900);
}

/* Dashboard condòmino: intestazione con la foto del condominio. */
.dashboard-hero {
  min-height: 190px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(234, 241, 252, 0.97) 0%, rgba(234, 241, 252, 0.85) 35%, rgba(234, 241, 252, 0) 60%),
    url("img/dashboard-condominio.jpg") right center / cover no-repeat;
}
.dashboard-hero .card-body {
  padding: 1.75rem 2rem;
}
.dashboard-hero-saluto {
  color: var(--app-info);
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
@media (max-width: 767.98px) {
  /* Su schermi stretti la foto resta sullo sfondo, schiarita, dietro al testo. */
  .dashboard-hero {
    background:
      linear-gradient(0deg, rgba(234, 241, 252, 0.92), rgba(234, 241, 252, 0.92)),
      url("img/dashboard-condominio.jpg") 70% center / cover no-repeat;
  }
  .dashboard-hero-saluto {
    font-size: 1.6rem;
  }
}

/*
 * Dashboard amministrazione: stessa intestazione, con la foto dell'ufficio.
 * La metà sinistra della foto è già chiara: basta una velatura leggera.
 */
.dashboard-hero.dashboard-hero-admin {
  background:
    linear-gradient(90deg, rgba(244, 247, 251, 0.85) 0%, rgba(244, 247, 251, 0.5) 35%, rgba(244, 247, 251, 0) 50%),
    url("img/dashboard-ufficio.jpg") right center / cover no-repeat;
}
@media (max-width: 767.98px) {
  .dashboard-hero.dashboard-hero-admin {
    background:
      linear-gradient(0deg, rgba(244, 247, 251, 0.92), rgba(244, 247, 251, 0.92)),
      url("img/dashboard-ufficio.jpg") 75% center / cover no-repeat;
  }
}

/* Card di riepilogo numerico: tutta la card è un link. */
.card-statistica {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-statistica:hover {
  box-shadow: 0 0.4rem 1.2rem rgba(19, 41, 75, 0.1);
  transform: translateY(-2px);
}
.card-statistica .card-body {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
.card-statistica-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
}
.card-statistica-icona i {
  color: inherit;
  font-size: 1.9rem;
}
.card-statistica-titolo {
  color: var(--bs-gray-900);
  font-size: 1.1rem;
  font-weight: 700;
}
.card-statistica-numero {
  color: var(--app-info);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.card-statistica-piede {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--bs-gray-600);
  font-size: 0.9rem;
}

/* Riquadro "Da fare": rosato se ci sono azioni, verde se è tutto in ordine. */
.card-da-fare {
  background-color: #FFF6F6;
  border-color: #F9D4D4;
}
.card-da-fare-ok {
  background-color: var(--app-successo-chiaro);
  border-color: #C4EAD8;
}
.card-da-fare-segnale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.card-da-fare-riga {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  background-color: #ffffff;
  border-radius: 0.65rem;
  color: inherit;
  transition: box-shadow 0.15s ease;
}
.card-da-fare-riga:hover {
  box-shadow: 0 0.2rem 0.8rem rgba(19, 41, 75, 0.08);
}

/* Colonna destra della dashboard. */
.dashboard-promo {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0.6) 75%, rgba(255, 255, 255, 0.2) 100%),
    url("img/dashboard-condominio.jpg") 72% bottom / auto 170% no-repeat;
}
.dashboard-aiuto {
  background-color: var(--app-primario-chiaro);
  border-color: #D6E4FA;
}
.dashboard-fascia {
  background: linear-gradient(90deg, #ffffff 0%, var(--app-primario-chiaro) 100%);
}

/*
 * Mappe dei condomini (Leaflet + OpenStreetMap, vedi assets/custom/mappe.js).
 * isolation: i livelli di Leaflet hanno z-index alti e, senza un contesto
 * proprio, scorrerebbero sopra l'header fisso della pagina.
 */
.mappa-condomini {
  position: relative;
  isolation: isolate;
  height: 380px;
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--app-bordo-card);
}
.mappa-condomini-scheda {
  height: 320px;
}
@media (max-width: 767.98px) {
  .mappa-condomini {
    height: 300px;
  }
}
/* Segnaposto a goccia blu notte con l'icona del condominio. */
.marcatore-mappa {
  background: transparent;
  border: 0;
}
.marcatore-mappa-punto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 3px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  background-color: var(--app-info);
  box-shadow: 0 3px 8px rgba(19, 41, 75, 0.35);
  transform: rotate(-45deg);
}
.marcatore-mappa-punto i {
  color: #ffffff;
  font-size: 1.1rem;
  transform: rotate(45deg);
}
.leaflet-marker-draggable .marcatore-mappa-punto {
  background-color: var(--app-primario);
  cursor: grab;
}
.mappa-popup {
  min-width: 190px;
  font-family: Inter, sans-serif;
}
.mappa-popup-titolo {
  color: var(--app-info);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.mappa-popup-indirizzo,
.mappa-popup-dettaglio {
  color: var(--bs-gray-700);
  font-size: 0.8rem;
}
.mappa-popup-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Scelta del condominio (admin/scegli-condominio.php). */
/* "Riprendi da dove eri rimasto", dentro la card del saluto. */
.scelta-ultimo {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 560px;
  padding: 0.85rem 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #D6E4FA;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(19, 41, 75, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.scelta-ultimo:hover {
  box-shadow: 0 0.4rem 1.2rem rgba(19, 41, 75, 0.12);
  transform: translateY(-1px);
}

/* Area condòmino: schede delle unità (profilo) e contatti dei consiglieri. */
.scheda-unita {
  padding: 1.5rem;
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.9rem;
}
.dato-unita {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.85rem;
  background-color: var(--app-sfondo-pagina);
  border-radius: 0.65rem;
}
.dato-unita-etichetta {
  color: var(--bs-gray-600);
  font-size: 0.75rem;
}
.dato-unita-valore {
  color: var(--bs-gray-900);
  font-size: 0.95rem;
  font-weight: 600;
}
.consigliere-contatto {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.75rem;
}

/* Scheda condominio: riepilogo numerico nella card Anagrafica. */
.riepilogo-scheda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  background-color: var(--app-sfondo-pagina);
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.85rem;
}
.riepilogo-scheda .elenco-riga-icona {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
}
.riepilogo-scheda .elenco-riga-icona i {
  font-size: 1.6rem !important;
}
.riepilogo-scheda-valore {
  color: var(--app-info);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.riepilogo-scheda-etichetta {
  margin-top: 0.3rem;
  color: var(--bs-gray-700);
  font-size: 0.9rem;
  font-weight: 600;
}
.elenco-scelta {
  max-height: 520px;
  overflow-y: auto;
}
/* Le righe filtrate restano nel DOM: il filetto va solo tra quelle visibili. */
.elenco-scelta .elenco-riga.d-none + .elenco-riga,
.elenco-scelta .elenco-riga:first-child {
  border-top: 0;
}
.mappa-condomini-scelta {
  height: 100%;
  min-height: 420px;
}

/* Pagamenti: riepilogo importi, tabella delle rate con righe espandibili. */
.riepilogo-importo {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
}
.riepilogo-importo-etichetta {
  color: var(--bs-gray-600);
  font-size: 0.85rem;
  font-weight: 600;
}
.riepilogo-importo-valore {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
.riepilogo-importo-allerta {
  background-color: #FFF6F6;
  border-color: #F9D4D4;
}
.tabella-rate .riga-rata-scaduta > td {
  background-color: #FFF6F6;
}
.tabella-rate .riga-totale-esercizio > td {
  border-top: 2px solid var(--bs-gray-300);
}
.tabella-rate .riga-esercizio > td {
  padding-top: 1.25rem;
  color: var(--app-info);
  font-size: 0.95rem;
  font-weight: 700;
  background-color: var(--app-sfondo-pagina);
}
.tabella-rate .riga-dettaglio-rata > td {
  padding-top: 0;
  border-top: 0;
}
.dettaglio-rata {
  padding: 1rem 1.25rem;
  background-color: var(--app-sfondo-pagina);
  border-radius: 0.65rem;
}
.bottone-espandi .icona-comprimi,
.bottone-espandi:not(.collapsed) .icona-espandi {
  display: none;
}
.bottone-espandi:not(.collapsed) .icona-comprimi {
  display: inline-block;
}

/*
 * Pagine di accesso (views/partials/auth-head.php): modulo su bianco a
 * sinistra, foto del condominio a destra con una velatura blu notte in
 * basso per il testo; su mobile la foto è una fascia sopra il modulo.
 */
.auth-pagina {
  background-color: #ffffff;
}
.auth-radice {
  min-height: 100vh;
}
.auth-foto {
  position: relative;
  min-height: 180px;
  background:
    linear-gradient(180deg, rgba(19, 41, 75, 0) 55%, rgba(19, 41, 75, 0.85) 100%),
    url("img/login-condominio.jpg?v=2") center 40% / cover no-repeat;
}
.auth-foto-testo {
  position: absolute;
  left: 3rem;
  right: 3rem;
  bottom: 3rem;
}
.auth-foto-titolo {
  color: #ffffff;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.auth-foto-sottotitolo {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
}
@media (min-width: 992px) {
  .auth-foto {
    min-height: 100vh;
    position: sticky;
    top: 0;
  }
}
@media (max-width: 991.98px) {
  /* Su mobile la fascia non ha testo: niente velatura. */
  .auth-foto {
    background: url("img/login-condominio.jpg?v=2") center 45% / cover no-repeat;
  }
}

/* --------------------------------------------------------------------------
 * Ricerca dell'area condòmino: barra grande (dashboard, pagina Cerca) e
 * pannello dei suggerimenti in tempo reale (assets/custom/ricerca-live.js),
 * usato anche dalla ricerca compatta nell'header.
 * -------------------------------------------------------------------------- */
.dashboard-ricerca {
  border-color: #D6E4FA;
  background: linear-gradient(90deg, #ffffff 0%, var(--app-primario-chiaro) 100%);
  overflow: visible;
}
.dashboard-ricerca .card-body {
  padding: 1.5rem 2rem;
}
.dashboard-ricerca-titolo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  color: var(--app-info);
  font-size: 1.35rem;
  font-weight: 700;
}
.ricerca-grande {
  position: relative;
}
.ricerca-grande-campo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.4rem 0.4rem 1.25rem;
  background-color: #ffffff;
  border: 2px solid #C9DAF5;
  border-radius: 1rem;
  box-shadow: 0 4px 14px rgba(47, 111, 214, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ricerca-grande-campo:focus-within {
  border-color: var(--app-primario);
  box-shadow: 0 0 0 4px rgba(47, 111, 214, 0.15);
}
.ricerca-grande-campo > i {
  color: var(--app-primario);
  font-size: 1.6rem;
}
.ricerca-grande-campo input {
  flex-grow: 1;
  min-width: 0;
  height: 3.2rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bs-gray-900);
  font-size: 1.2rem;
}
.ricerca-grande-campo .btn {
  height: 3.2rem;
  padding: 0 1.75rem;
  border-radius: 0.75rem;
  font-size: 1.05rem;
}
.ricerca-grande-esempi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (max-width: 575.98px) {
  .dashboard-ricerca .card-body {
    padding: 1.25rem;
  }
  .ricerca-grande-campo input {
    font-size: 1.05rem;
  }
  .ricerca-grande-campo .btn {
    padding: 0 1rem;
  }
}
.header-ricerca {
  position: relative;
}

/* Pannello dei suggerimenti */
.ricerca-live-pannello {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 110;
  width: 100%;
  min-width: min(560px, 92vw);
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid var(--app-bordo-card);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(19, 41, 75, 0.18);
}
.ricerca-live-pannello.ricerca-live-due-colonne {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 0 1.5rem;
}
.ricerca-live-due-colonne .ricerca-live-tutti,
.ricerca-live-due-colonne .ricerca-live-attesa {
  grid-column: 1 / -1;
}
.ricerca-live-due-colonne .ricerca-live-colonna:first-child:not(.ricerca-live-colonna-risultati) {
  padding-right: 1.5rem;
  border-right: 1px solid var(--app-bordo-card);
}
.ricerca-live-gruppo + .ricerca-live-gruppo {
  margin-top: 0.75rem;
}
.ricerca-live-titolo {
  margin: 0.25rem 0.5rem 0.4rem;
  color: var(--bs-gray-600);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ricerca-live-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 0.5rem;
}
.ricerca-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid #D6E4FA;
  border-radius: 2rem;
  background-color: #ffffff;
  color: var(--app-info);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ricerca-live-chip i {
  color: var(--app-primario);
}
.ricerca-live-chip:hover,
.ricerca-live-chip.attiva {
  border-color: var(--app-primario);
  background-color: var(--app-primario-chiaro);
  color: var(--app-info);
}
.ricerca-live-suggerimento {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--bs-gray-800);
  font-size: 0.95rem;
  text-align: left;
}
.ricerca-live-suggerimento i {
  color: var(--bs-gray-500);
}
.ricerca-live-risultato {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  color: inherit;
}
.ricerca-live-suggerimento:hover,
.ricerca-live-suggerimento.attiva,
.ricerca-live-risultato:hover,
.ricerca-live-risultato.attiva {
  background-color: var(--app-sfondo-pagina);
}
.ricerca-live-risultato.attiva,
.ricerca-live-suggerimento.attiva {
  box-shadow: inset 3px 0 0 var(--app-primario);
}
/* Anteprima visiva: riquadro colorato con icona, o con il tipo di file. */
.ricerca-live-anteprima {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 0.75rem;
}
.ricerca-live-anteprima i {
  color: inherit;
  font-size: 1.5rem;
}
.ricerca-live-anteprima-file {
  flex-direction: column;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(19, 41, 75, 0.18);
}
.ricerca-live-anteprima-file i {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
}
.ricerca-live-anteprima-etichetta {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ricerca-live-testi {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ricerca-live-risultato-titolo {
  color: var(--bs-gray-900);
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ricerca-live-risultato-dettaglio {
  color: var(--bs-gray-600);
  font-size: 0.8rem;
}
.ricerca-live-risultato-estratto {
  display: -webkit-box;
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--bs-gray-700);
  font-size: 0.82rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ricerca-live-pannello mark {
  padding: 0 0.1rem;
  border-radius: 0.2rem;
  background-color: #FFF1C2;
  color: inherit;
}
.ricerca-live-tutti {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-top: 1px solid var(--app-bordo-card);
  color: var(--app-primario);
  font-weight: 600;
}
.ricerca-live-tutti i {
  color: inherit;
}
.ricerca-live-tutti.attiva,
.ricerca-live-tutti:hover {
  background-color: var(--app-primario-chiaro);
  border-radius: 0.6rem;
}
.ricerca-live-vuoto,
.ricerca-live-attesa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  color: var(--bs-gray-700);
}

/* Dashboard condòmino: comunicazioni in evidenza, accanto a "Da fare". */
.card-comunicazioni-evidenza {
  background-color: #FAF8FE;
  border-color: #E4DCF7;
}
.comunicazione-evidenza {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem;
  background-color: #ffffff;
  border-radius: 0.65rem;
  color: inherit;
  transition: box-shadow 0.15s ease;
}
.comunicazione-evidenza:hover {
  box-shadow: 0 0.2rem 0.8rem rgba(19, 41, 75, 0.08);
}
.comunicazione-evidenza-nuova {
  box-shadow: inset 3px 0 0 var(--app-viola);
}
.comunicazione-evidenza-estratto {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
 * Elenchi con categorie e archivio (ticket; in seguito comunicazioni).
 * -------------------------------------------------------------------------- */

/* Schede "In corso" / "Archivio". */
.schede-vista {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background-color: #ffffff;
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.85rem;
}
.scheda-vista {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.65rem;
  color: var(--bs-gray-700);
  font-weight: 600;
}
.scheda-vista i {
  color: inherit;
  font-size: 1.2rem;
}
.scheda-vista:hover {
  color: var(--app-primario);
}
.scheda-vista.attiva {
  background-color: var(--app-primario);
  color: #ffffff;
}

/* Campo di ricerca dentro le pagine (ticket, comunicazioni, FAQ). */
.ricerca-pagina {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 260px;
  padding: 0 1rem;
  background-color: var(--app-sfondo-pagina);
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.65rem;
}
.ricerca-pagina:focus-within {
  border-color: var(--app-primario);
  background-color: #ffffff;
}
.ricerca-pagina i {
  color: var(--app-primario);
  font-size: 1.3rem;
}
.ricerca-pagina input {
  flex-grow: 1;
  min-width: 0;
  height: 2.9rem;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
}

/* Filtri a pulsante per categoria, con conteggio. */
.filtro-categoria {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--app-bordo-card);
  border-radius: 2rem;
  background-color: #ffffff;
  color: var(--bs-gray-700);
  font-size: 0.9rem;
  font-weight: 500;
}
.filtro-categoria i {
  font-size: 1.05rem;
}
.filtro-categoria:hover {
  border-color: var(--app-primario);
  color: var(--app-info);
}
.filtro-categoria.attivo {
  border-color: var(--app-info);
  background-color: var(--app-info);
  color: #ffffff;
}
.filtro-categoria.attivo i {
  color: #ffffff !important;
}
.filtro-categoria-conteggio {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 1rem;
  background-color: var(--app-sfondo-pagina);
  color: var(--bs-gray-700);
  font-size: 0.75rem;
  text-align: center;
}
.filtro-categoria.attivo .filtro-categoria-conteggio {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.filtro-categoria-primary i { color: var(--app-primario); }
.filtro-categoria-info i { color: var(--app-info); }
.filtro-categoria-success i { color: var(--app-successo); }
.filtro-categoria-warning i { color: var(--app-attenzione); }
.filtro-categoria-danger i { color: var(--app-pericolo); }
.filtro-categoria-viola i { color: var(--app-viola); }

/* Riga di un ticket: riquadro della categoria, testi, stato, archivia. */
.ticket-riga {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  background-color: #ffffff;
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.9rem;
  transition: box-shadow 0.15s ease;
}
.ticket-riga:hover {
  box-shadow: 0 0.3rem 1rem rgba(19, 41, 75, 0.08);
}
.ticket-riga-link {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 0.5rem;
  color: inherit;
}
.ticket-riga-categoria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 0.85rem;
}
.ticket-riga-categoria i {
  color: inherit;
  font-size: 1.7rem;
}

/* Scelta della categoria all'apertura di un ticket: grandi pulsanti. */
.scelta-categorie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.scelta-categoria,
.scelta-colore,
.scelta-icona {
  position: relative;
  display: block;
}
.scelta-categoria input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scelta-categoria-riquadro {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.65rem;
  border: 2px solid var(--app-bordo-card);
  border-radius: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.scelta-categoria-riquadro .ticket-riga-categoria {
  width: 42px;
  height: 42px;
}
.scelta-categoria-riquadro .ticket-riga-categoria i {
  font-size: 1.4rem;
}
.scelta-categoria:hover .scelta-categoria-riquadro {
  border-color: #C9DAF5;
}
.scelta-categoria input:checked + .scelta-categoria-riquadro {
  border-color: var(--app-primario);
  background-color: var(--app-primario-chiaro);
}
.scelta-categoria input:focus-visible + .scelta-categoria-riquadro {
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.25);
}

/* Gestione categorie: scelta del colore e dell'icona. */
.scelta-colore input,
.scelta-icona input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scelta-colore-campione {
  display: block;
  width: 34px;
  height: 34px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--app-bordo-card);
  cursor: pointer;
}
.scelta-colore input:checked + .scelta-colore-campione {
  box-shadow: 0 0 0 3px var(--app-info);
}
.scelta-icona-riquadro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.65rem;
  color: var(--bs-gray-700);
  cursor: pointer;
}
.scelta-icona-riquadro i {
  color: inherit;
}
.scelta-icona input:checked + .scelta-icona-riquadro {
  border-color: var(--app-primario);
  background-color: var(--app-primario-chiaro);
  color: var(--app-primario);
}
.scelta-colore input:focus-visible + .scelta-colore-campione,
.scelta-icona input:focus-visible + .scelta-icona-riquadro {
  outline: 2px solid var(--app-primario);
  outline-offset: 2px;
}

/* Parole cercate evidenziate (FAQ, ricerca). */
mark {
  padding: 0 0.1rem;
  border-radius: 0.2rem;
  background-color: #FFF1C2;
  color: inherit;
}
/* Comunicazione non ancora letta nell'elenco: filetto viola a sinistra. */
/* Riga da leggere: bordo colorato tutto intorno, fondo tenue ed etichetta
   "Da leggere" ben visibile (utenti non sempre abituati ai segnali sottili). */
.ticket-riga.riga-da-leggere {
  border: 2px solid var(--app-viola);
  background-color: var(--app-viola-chiaro);
}
.etichetta-da-leggere {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: 2rem;
  background-color: var(--app-viola);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
}
.etichetta-da-leggere i {
  color: #ffffff;
  font-size: 1rem;
}
/* Pulsante Archivia/Ripristina: icona con la scritta sotto. */
.pulsante-archivia {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 84px;
  padding: 0.55rem 0.6rem !important;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.1;
}
.pulsante-archivia i {
  margin: 0 !important;
  padding: 0 !important;
}
/* Pulsante "indietro" accanto al titolo di pagina (area condòmino). */
.pulsante-indietro {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Scritta in corsivo "a mano" (Google Font Caveat, caricato solo dove serve). */
.scritta-a-mano {
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--app-info);
  text-align: right;
  transform: rotate(-6deg);
}

/*
 * Elenchi a righe colorate (documenti, comunicazioni): a riposo il colore
 * di ogni riga è chiaro (bg-light-*) con testo scuro; al passaggio del
 * mouse (bg-hover-*, Metronic) lo sfondo passa al colore pieno, quindi il
 * testo/le icone al suo interno passano al bianco per restare leggibili.
 * Eccezione: su warning (giallo) il bianco non basta, serve testo scuro.
 */
.riga-colorata-hover {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.riga-colorata-hover:hover,
.riga-colorata-hover:hover *:not(.badge) {
  color: #fff !important;
}
.riga-colorata-hover.bg-hover-warning:hover,
.riga-colorata-hover.bg-hover-warning:hover *:not(.badge) {
  color: var(--app-info) !important;
}

/*
 * FAQ (area condòmino): ogni voce ha un colore diverso (ciclico tra le 4
 * varianti sotto, assegnato in faq.php), per distinguerle a colpo d'occhio
 * anche prima di aprirle, e per marcare bene lo stato aperto.
 */
.faq-item {
  border: 1px solid var(--bs-border-color);
  border-left-width: 4px;
  border-radius: 0.65rem;
  overflow: hidden;
  background-color: #fff;
}
.faq-item + .faq-item {
  margin-top: 0.75rem;
}
.faq-item .accordion-button {
  font-weight: 600;
  box-shadow: none !important;
}
.faq-item .accordion-button::after {
  display: none;
}
.faq-item .accordion-icon-meno {
  display: none;
}
.faq-item .accordion-button:not(.collapsed) .accordion-icon-piu {
  display: none;
}
.faq-item .accordion-button:not(.collapsed) .accordion-icon-meno {
  display: inline-block;
}
.faq-item .accordion-body {
  border-top: 1px dashed var(--bs-border-color);
}

.faq-item-primary { border-left-color: var(--app-primario); }
.faq-item-primary .accordion-button:not(.collapsed) { background-color: var(--app-primario-chiaro); color: var(--app-primario-attivo); }
.faq-item-primary .accordion-icon-piu, .faq-item-primary .accordion-icon-meno { color: var(--app-primario); }

.faq-item-info { border-left-color: var(--app-info); }
.faq-item-info .accordion-button:not(.collapsed) { background-color: var(--app-info-chiaro); color: var(--app-info); }
.faq-item-info .accordion-icon-piu, .faq-item-info .accordion-icon-meno { color: var(--app-info); }

.faq-item-success { border-left-color: var(--app-successo); }
.faq-item-success .accordion-button:not(.collapsed) { background-color: var(--app-successo-chiaro); color: var(--app-successo-attivo); }
.faq-item-success .accordion-icon-piu, .faq-item-success .accordion-icon-meno { color: var(--app-successo); }

.faq-item-warning { border-left-color: var(--app-attenzione); }
.faq-item-warning .accordion-button:not(.collapsed) { background-color: var(--app-attenzione-chiara); color: var(--app-attenzione-attiva); }
.faq-item-warning .accordion-icon-piu, .faq-item-warning .accordion-icon-meno { color: var(--app-attenzione-attiva); }

/* Nuova segnalazione: scelta "Riservato allo studio" ben visibile */
.avviso-riservatezza {
  padding: 1rem 1.1rem;
  background-color: var(--app-attenzione-chiara);
  border: 1px dashed var(--app-attenzione);
  border-radius: 0.75rem;
}

/* Titolo del gruppo di menu "Gestione studio <nome>": il nome resta come scritto. */
.sidebar-intestazione-gruppo .sidebar-intestazione-nome {
  text-transform: none;
  letter-spacing: normal;
  color: #ffffff;
}

/* Area condòmino: la barra di ricerca grande sta nella riga dell'header
   (accanto a campanella e profilo), con lo sfondo sfumato della vecchia card. */
.header-ricerca-sfondo {
  flex-grow: 1;
  align-items: center;
  max-width: 900px;
  margin: 0.3rem 1rem 0.3rem 0;
  padding: 0.35rem 0.5rem;
  background: linear-gradient(90deg, #ffffff 0%, var(--app-primario-chiaro) 100%);
  border: 1px solid #D6E4FA;
  border-radius: 1rem;
}
.header-ricerca-grande {
  flex-grow: 1;
  min-width: 0;
}
.header-ricerca-grande .ricerca-grande-campo {
  padding: 0.2rem 0.25rem 0.2rem 1rem;
  border-radius: 0.8rem;
}
.header-ricerca-grande .ricerca-grande-campo > i {
  font-size: 1.35rem;
}
.header-ricerca-grande .ricerca-grande-campo input {
  height: 2.5rem;
  font-size: 1.05rem;
}
.header-ricerca-grande .ricerca-grande-campo .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: 0.65rem;
  font-size: 1rem;
}
.header-ricerca-grande .ricerca-grande-campo .btn i {
  color: #ffffff;
}

/* Menu a discesa con caselle a selezione multipla (es. condomini destinatari). */
.scelta-multipla-pulsante {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scelta-multipla-elenco {
  max-height: 300px;
  overflow-y: auto;
}
.scelta-multipla .dropdown-menu {
  box-shadow: 0 10px 30px rgba(15, 33, 64, 0.18);
}

/* Riquadri di riepilogo della Panoramica condominio: portano alla scheda di gestione. */
a.riepilogo-scheda-link {
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.riepilogo-scheda-link:hover {
  border-color: var(--app-primario);
  box-shadow: 0 0.3rem 1rem rgba(19, 41, 75, 0.08);
}

/* Gestione del condominio: schede grandi e ben leggibili. */
.schede-gestione {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #ffffff;
  border: 1px solid var(--app-bordo-card);
  border-radius: 0.9rem;
}
.schede-gestione .scheda-gestione {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--bs-gray-700);
  font-size: 1rem;
  font-weight: 600;
}
.schede-gestione .scheda-gestione i {
  color: inherit;
}
.schede-gestione .scheda-gestione:hover {
  background-color: var(--app-sfondo-pagina);
  color: var(--app-primario);
}
.schede-gestione .scheda-gestione.active {
  background-color: var(--app-primario);
  color: #ffffff;
}
.schede-gestione .scheda-gestione.active .badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Campo di ricerca sopra gli elenchi (views/partials/ricerca-elenco.php). */
.ricerca-elenco {
  position: relative;
  width: 300px;
  max-width: 100%;
}
.ricerca-elenco i {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  color: var(--bs-gray-600);
}
.ricerca-elenco input {
  padding-left: 2.6rem;
}

/* Caricamento condominio (views/partials/caricamento-condominio.php): i piani
   compaiono uno dopo l'altro dal basso, poi il tetto; l'intero ciclo dura
   --cc-durata e ricomincia. */
.caricamento-condominio {
  --cc-durata: 3.2s;
  --cc-piani: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.caricamento-condominio-sagoma {
  width: 170px;
  height: auto;
  overflow: visible;
}
.cc-terreno {
  fill: #C9D4E5;
}
.cc-muro {
  fill: var(--app-sidebar-sfondo, #13294B);
}
.cc-portone {
  fill: var(--app-attenzione, #F5A524);
}
.cc-finestra {
  fill: #9EC0F2;
}
.cc-balcone {
  fill: #ffffff;
  opacity: 0.55;
}
.cc-falda {
  fill: var(--app-primario, #2F6FD6);
}
.cc-comignolo {
  fill: var(--app-sidebar-sfondo, #13294B);
}
.cc-piano {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cc-costruisci var(--cc-durata) ease-out infinite;
  animation-delay: calc(var(--cc-ordine) * (var(--cc-durata) / 10));
}
/* Le finestre si "accendono" subito dopo che il piano è comparso. */
.cc-piano .cc-finestra {
  animation: cc-accendi var(--cc-durata) ease-out infinite;
  animation-delay: calc(var(--cc-ordine) * (var(--cc-durata) / 10) + 0.15s);
}
@keyframes cc-costruisci {
  0% { opacity: 0; transform: translateY(14px) scaleY(0.2); }
  8% { opacity: 1; transform: translateY(0) scaleY(1); }
  80% { opacity: 1; transform: translateY(0) scaleY(1); }
  92%, 100% { opacity: 0; transform: translateY(0) scaleY(1); }
}
@keyframes cc-accendi {
  0%, 6% { fill: #9EC0F2; }
  12%, 80% { fill: #FFD76A; }
  100% { fill: #9EC0F2; }
}
.caricamento-condominio-testo {
  color: var(--app-info, #1B3A6B);
  font-size: 1.15rem;
  font-weight: 600;
}
/* Chi ha chiesto meno animazioni vede il condominio già costruito. */
@media (prefers-reduced-motion: reduce) {
  .cc-piano, .cc-piano .cc-finestra {
    animation: none;
    opacity: 1;
  }
}
/* Sovrapposizione a tutto schermo, per l'uso dopo il login. */
.caricamento-condominio-schermo {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--app-primario-chiaro, #EAF1FC) 100%);
}

/* Area condòmino: header più alto da tablet in su, per la ricerca con le
   ricerche frequenti sotto il campo. */
@media (min-width: 768px) {
  body.area-condomini {
    --bs-app-header-height: 128px;
    --bs-app-header-height-actual: 128px;
  }
  body.area-condomini .app-header {
    height: var(--bs-app-header-height);
  }
}
.header-ricerca-sfondo {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin: 0.6rem 1rem 0.6rem 0 !important;
  padding: 0.6rem 0.75rem !important;
}
.header-ricerca-esempi {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
}
.header-ricerca-esempi-etichetta {
  flex-shrink: 0;
  color: var(--bs-gray-600);
  font-size: 0.85rem;
  font-weight: 600;
}
.header-ricerca-esempi .ricerca-live-chip {
  flex-shrink: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 0.85rem;
}

/* Area amministrazione: barra in alto con "Scegli il condominio" e "Riprendi". */
.header-scegli-condominio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem !important;
  font-weight: 600;
}
.header-scegli-condominio i {
  color: #ffffff;
}
.scelta-ultimo-header {
  max-width: 480px;
  padding: 0.45rem 0.6rem 0.45rem 0.9rem;
  gap: 0.75rem;
}
.scelta-ultimo-etichetta {
  color: var(--bs-gray-600);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}
.sidebar-nessun-condominio {
  color: var(--app-sidebar-testo);
  font-size: 0.8rem;
}

/* Assistente AI dell'area condòmino: pulsante fisso e pannello di chat
   (views/partials/assistente-chat.php). Caratteri grandi, alto contrasto. */
.assistente-pulsante {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  border: 0;
  border-radius: 3rem;
  background: linear-gradient(135deg, var(--app-primario) 0%, var(--app-info) 100%);
  box-shadow: 0 10px 30px rgba(19, 41, 75, 0.35);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.assistente-pulsante i {
  color: #ffffff;
  font-size: 1.8rem;
}
.assistente-pulsante:hover,
.assistente-pulsante:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(19, 41, 75, 0.45);
  outline: 0;
}
.assistente-pannello {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 2rem));
  height: min(640px, calc(100vh - 3rem));
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid var(--app-bordo-card);
  border-radius: 1.1rem;
  box-shadow: 0 20px 50px rgba(15, 33, 64, 0.3);
}
.assistente-pannello[hidden] {
  display: none;
}
.assistente-testata {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, var(--app-primario) 0%, var(--app-info) 100%);
  color: #ffffff;
}
.assistente-testata-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
}
.assistente-testata-icona i,
.assistente-chiudi i {
  color: #ffffff;
  font-size: 1.5rem;
}
.assistente-titolo {
  font-size: 1.15rem;
  font-weight: 700;
}
.assistente-sottotitolo {
  font-size: 0.85rem;
  opacity: 0.85;
}
.assistente-chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
}
.assistente-chiudi:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.assistente-messaggi {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  background-color: var(--app-sfondo-pagina);
}
.assistente-messaggio {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.9rem;
}
.assistente-messaggio-condomino {
  align-items: flex-end;
}
.assistente-bolla {
  max-width: 88%;
  padding: 0.75rem 0.95rem;
  border-radius: 1rem;
  background-color: #ffffff;
  border: 1px solid var(--app-bordo-card);
  color: var(--bs-gray-900);
  font-size: 1.02rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.assistente-messaggio-condomino .assistente-bolla {
  background-color: var(--app-primario);
  border-color: var(--app-primario);
  color: #ffffff;
}
.assistente-messaggio-avviso .assistente-bolla {
  background-color: var(--app-attenzione-chiara);
  border-color: var(--app-attenzione);
}
.assistente-in-attesa .assistente-bolla {
  color: var(--bs-gray-600);
  font-style: italic;
}
.assistente-esempi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}
.assistente-esempi-titolo {
  color: var(--bs-gray-700);
  font-size: 0.9rem;
  font-weight: 600;
}
.assistente-esempio {
  padding: 0.5rem 0.85rem;
  border: 1px solid #C9DAF5;
  border-radius: 2rem;
  background-color: #ffffff;
  color: var(--app-primario);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
}
.assistente-esempio:hover {
  background-color: var(--app-primario-chiaro);
}
.assistente-fonti {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 88%;
  margin-top: 0.5rem;
}
.assistente-fonti-titolo {
  color: var(--bs-gray-700);
  font-size: 0.85rem;
  font-weight: 700;
}
.assistente-fonte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #C9DAF5;
  border-radius: 0.65rem;
  background-color: #ffffff;
  color: var(--bs-gray-900);
  font-size: 0.95rem;
  font-weight: 600;
}
.assistente-fonte:hover {
  border-color: var(--app-primario);
  color: var(--app-primario);
}
.assistente-fonte-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--app-primario-chiaro);
  color: var(--app-primario);
  font-size: 0.8rem;
}
.assistente-fonte-tipo {
  color: var(--bs-gray-600);
  font-size: 0.8rem;
  font-weight: 500;
}
.assistente-modulo {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--app-bordo-card);
}
.assistente-modulo textarea {
  flex-grow: 1;
  min-height: 3rem;
  max-height: 8rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid #C9DAF5;
  border-radius: 0.75rem;
  outline: 0;
  font-size: 1.02rem;
  resize: vertical;
}
.assistente-modulo textarea:focus {
  border-color: var(--app-primario);
}
.assistente-invia {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 3rem;
}
.assistente-invia i {
  color: #ffffff;
}
.assistente-piede {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0 0.9rem 0.7rem;
  color: var(--bs-gray-600);
  font-size: 0.78rem;
}
@media (max-width: 575.98px) {
  .assistente-pulsante {
    right: 1rem;
    bottom: 1rem;
    padding: 0.85rem 1.1rem;
  }
  .assistente-pannello {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
}

/* Pannello studio: scelta del fornitore dell'assistente. */
.scelta-fornitore {
  display: block;
  cursor: pointer;
}
.scelta-fornitore input {
  position: absolute;
  opacity: 0;
}
.scelta-fornitore-riquadro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--app-bordo-card);
  border-radius: 0.75rem;
}
.scelta-fornitore input:checked + .scelta-fornitore-riquadro {
  border-color: var(--app-primario);
  background-color: var(--app-primario-chiaro);
}
.scelta-fornitore input:focus-visible + .scelta-fornitore-riquadro {
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.25);
}
fieldset:disabled .scelta-fornitore {
  cursor: default;
}

/* Area condòmino: blocco "Le mie unità immobiliari" sotto il nome del condominio. */
.sidebar-unita-attiva .sidebar-piede-etichetta {
  margin-bottom: 0.5rem;
}
.sidebar-contatore-unita {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.35rem;
  border-radius: 11px;
  background-color: var(--app-attenzione);
  color: var(--app-sidebar-sfondo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}
/* Data di oggi nella bacheca. */
.data-odierna {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--app-info);
  font-size: 0.9rem;
  font-weight: 600;
}
.data-odierna i {
  color: var(--app-primario);
}
/* Profilo unità: l'unità che si sta consultando è evidenziata. */
.scheda-unita.scheda-unita-attiva {
  border: 2px solid var(--app-successo);
  background-color: #efefef;
}

/* Area condòmino: l'illustrazione del condominio è uno sfondo in fondo
   alla barra laterale, dietro al menu: non toglie spazio verticale. */
.sidebar-illustrazione-sfondo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 200px;
  background: url("img/sidebar-illustrazione.svg") no-repeat center bottom 3.5rem / 85% auto;
  opacity: 0.55;
  pointer-events: none;
}
.area-condomini .app-sidebar > :not(.sidebar-illustrazione-sfondo) {
  position: relative;
  z-index: 1;
}
.area-condomini .sidebar-piede {
  padding-top: 0.75rem;
}

/* Barra di scorrimento del menu laterale (entrambe le aree): visibile ma
   discreta sullo sfondo blu scuro. Stesso selettore di Metronic (con
   data-kt-app-layout), altrimenti il suo "transparent" prevale. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .scroll-y,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .hover-scroll-overlay-y {
  scrollbar-color: #93878736 transparent;
  scrollbar-width: thin;
}
/* Browser che non supportano scrollbar-color. */
.app-sidebar .scroll-y::-webkit-scrollbar,
.app-sidebar .hover-scroll-overlay-y::-webkit-scrollbar {
  width: 8px;
}
.app-sidebar .scroll-y::-webkit-scrollbar-track,
.app-sidebar .hover-scroll-overlay-y::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar .scroll-y::-webkit-scrollbar-thumb,
.app-sidebar .hover-scroll-overlay-y::-webkit-scrollbar-thumb {
  background-color: #93878736;
  border-radius: 4px;
}

/* Mobile: pulsante del menu laterale ben visibile, con la scritta MENU. */
.pulsante-menu-mobile {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.95rem !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pulsante-menu-mobile i {
  color: #ffffff;
}

/* Area condòmino, mobile: la ricerca resta nella riga dell'header, tra
   MENU e campanella/profilo, in versione compatta. */
@media (max-width: 767.98px) {
  .header-ricerca-sfondo {
    margin: 0 0.5rem 0 0 !important;
    padding: 0 !important;
    background: none;
    border: 0;
  }
  .header-ricerca-grande .ricerca-grande-campo {
    gap: 0.4rem;
    padding: 0.15rem 0.15rem 0.15rem 0.6rem;
    border-width: 2px;
    border-radius: 0.65rem;
  }
  .header-ricerca-grande .ricerca-grande-campo > i {
    display: none;
  }
  .header-ricerca-grande .ricerca-grande-campo input {
    height: 2.4rem;
    font-size: 1rem;
  }
  .header-ricerca-grande .ricerca-grande-campo .btn {
    height: 2.4rem;
    padding: 0 0.7rem;
  }
  .header-ricerca-grande .ricerca-live-pannello {
    position: fixed;
    top: calc(var(--bs-app-header-height, 60px) + 0.25rem);
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    min-width: 0;
  }
  .pulsante-menu-mobile {
    padding: 0.55rem 0.7rem !important;
  }
}

/* --------------------------------------------------------------------------
 * Log di sicurezza: fondo tenue per tipo di operazione, filetto più deciso a
 * sinistra. Le righe sono "schede" separate da un piccolo spazio.
 * -------------------------------------------------------------------------- */
.log-op-accesso      { --log-fondo: #EEF6FF; --log-filetto: #8DBDF0; }
.log-op-creazione    { --log-fondo: #EDF8F1; --log-filetto: #86CFA3; }
.log-op-modifica     { --log-fondo: #FFF8E6; --log-filetto: #F2CC6B; }
.log-op-eliminazione { --log-fondo: #FFF1E8; --log-filetto: #F4AE84; }
.log-op-attenzione   { --log-fondo: #FDEDF0; --log-filetto: #EE97A6; }
.log-op-sistema      { --log-fondo: #F3F4F6; --log-filetto: #B5BAC2; }

[data-bs-theme="dark"] .log-op-accesso      { --log-fondo: rgba(141, 189, 240, 0.12); }
[data-bs-theme="dark"] .log-op-creazione    { --log-fondo: rgba(134, 207, 163, 0.12); }
[data-bs-theme="dark"] .log-op-modifica     { --log-fondo: rgba(242, 204, 107, 0.12); }
[data-bs-theme="dark"] .log-op-eliminazione { --log-fondo: rgba(244, 174, 132, 0.12); }
[data-bs-theme="dark"] .log-op-attenzione   { --log-fondo: rgba(238, 151, 166, 0.14); }
[data-bs-theme="dark"] .log-op-sistema      { --log-fondo: rgba(181, 186, 194, 0.10); }

table.log-tabella {
  border-collapse: separate;
  border-spacing: 0 0.4rem;
}
table.log-tabella tr.log-riga > td {
  padding: 0.75rem 1rem;
  background-color: var(--log-fondo);
  border: 0;
}
table.log-tabella tr.log-riga > td:first-child {
  padding-left: 1.1rem;
  border-radius: 0.55rem 0 0 0.55rem;
  box-shadow: inset 4px 0 0 var(--log-filetto);
}
table.log-tabella tr.log-riga > td:last-child {
  border-radius: 0 0.55rem 0.55rem 0;
}
table.log-tabella thead th:first-child {
  padding-left: 1.1rem;
}

/* --------------------------------------------------------------------------
 * Ruoli e permessi ("Chi fa cosa").
 * -------------------------------------------------------------------------- */
.ruolo-scheda {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.75rem;
  background-color: var(--bs-gray-100);
}
.tabella-permessi tr.tabella-permessi-gruppo > td {
  padding-top: 1.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--bs-gray-300);
  color: var(--bs-gray-600);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tabella-permessi tbody tr:not(.tabella-permessi-gruppo) > td {
  border-bottom: 1px dashed var(--bs-gray-200);
}
.tabella-permessi .form-check-input:disabled:checked {
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
 * Checklist di avvio del condominio: percorso verticale a passaggi numerati.
 * Lo stato della voce (data-stato: da_fare, fatto, non_applicabile) decide
 * colori, segno nel cerchio e pulsanti visibili.
 * -------------------------------------------------------------------------- */
.checklist-barra {
  display: block;
  height: 10px;
  border-radius: 1rem;
  background-color: var(--bs-gray-200);
  overflow: hidden;
}
.checklist-barra-sottile {
  height: 6px;
}
.checklist-barra-riempimento {
  display: block;
  height: 100%;
  border-radius: 1rem;
  background: linear-gradient(90deg, #F2CC6B, #86CFA3);
  transition: width 0.35s ease;
}
.checklist-barra-completa {
  background: #86CFA3;
}
.checklist-conteggio {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bs-gray-900);
}

.checklist-elenco {
  position: relative;
}
.checklist-voce {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.85rem;
  background-color: var(--bs-body-bg);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Filetto che unisce i cerchi dei passaggi. */
.checklist-voce:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.5rem + 19px);
  top: calc(1.25rem + 40px);
  bottom: calc(-0.9rem - 1.25rem);
  width: 2px;
  background-color: var(--bs-gray-200);
  z-index: 0;
}
.checklist-segno {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #F2CC6B;
  background-color: #FFF8E6;
  color: #9A6B00;
  font-weight: 700;
  font-size: 1.05rem;
}
.checklist-segno i {
  display: none;
  font-size: 1.4rem;
}
.checklist-corpo {
  flex-grow: 1;
  min-width: 0;
}
.checklist-titolo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bs-gray-900);
}
.checklist-etichetta-fatto,
.checklist-etichetta-na {
  display: none;
}
.checklist-rilevamento {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #FFF1E8;
  color: #9C4A1A;
  font-size: 0.85rem;
  font-weight: 500;
}
.checklist-rilevamento i {
  color: inherit;
  margin-top: 0.1rem;
}
.checklist-rilevamento-ok {
  background-color: #EDF8F1;
  color: #1F7A4D;
}
.checklist-azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
.checklist-solo-chiusa {
  display: none;
}

/* Voce fatta: verde, segno di spunta. */
.checklist-voce[data-stato="fatto"] {
  background-color: #F5FBF7;
  border-color: #CDEBD8;
}
.checklist-voce[data-stato="fatto"] .checklist-segno {
  border-color: #86CFA3;
  background-color: #86CFA3;
  color: #ffffff;
}
.checklist-voce[data-stato="fatto"] .checklist-segno-fatto,
.checklist-voce[data-stato="fatto"] .checklist-etichetta-fatto {
  display: inline-block;
}
/* Le icone ki-outline hanno un colore proprio: il bianco va dato all'icona. */
.checklist-voce[data-stato="fatto"] .checklist-segno i.ki-outline {
  color: #ffffff;
}
/* Voce non applicabile: grigia, un trattino. */
.checklist-voce[data-stato="non_applicabile"] {
  background-color: var(--bs-gray-100);
}
.checklist-voce[data-stato="non_applicabile"] .checklist-segno {
  border-color: var(--bs-gray-400);
  background-color: var(--bs-gray-300);
  color: var(--bs-gray-700);
}
.checklist-voce[data-stato="non_applicabile"] .checklist-segno-na,
.checklist-voce[data-stato="non_applicabile"] .checklist-etichetta-na {
  display: inline-block;
}
/* Voce chiusa (fatta o non applicabile): niente numero né rilevamento, solo "Riapri". */
.checklist-voce:not([data-stato="da_fare"]) .checklist-segno-numero,
.checklist-voce:not([data-stato="da_fare"]) .checklist-rilevamento,
.checklist-voce:not([data-stato="da_fare"]) .checklist-solo-da-fare {
  display: none;
}
.checklist-voce:not([data-stato="da_fare"]) .checklist-solo-chiusa {
  display: inline-flex;
}

@media (max-width: 767.98px) {
  .checklist-voce {
    flex-wrap: wrap;
  }
  .checklist-azioni {
    width: 100%;
    justify-content: flex-start;
    padding-left: calc(40px + 1.25rem);
  }
  .checklist-voce:not(:last-child)::after {
    display: none;
  }
}

/* Richiamo alla checklist nella Panoramica del condominio. */
.checklist-richiamo {
  border: 1px solid #F8E3A8;
  background-color: #FFFBF0;
  transition: box-shadow 0.2s ease;
}
.checklist-richiamo:hover {
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.06);
}

/* Pagina "Avvio condomini": righe con barra di avanzamento. */
.avvio-riga {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 0.5rem;
  border-bottom: 1px dashed var(--bs-gray-200);
  color: inherit;
}
.avvio-riga:hover {
  background-color: var(--bs-gray-100);
}
.avvio-riga-nome {
  flex: 1 1 auto;
}
.avvio-riga-avanzamento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 240px;
}
.avvio-riga-avanzamento .checklist-barra {
  flex-grow: 1;
}
.avvio-separatore {
  margin-top: 1.5rem;
  padding: 0.5rem;
  color: var(--bs-gray-600);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 575.98px) {
  .avvio-riga-avanzamento {
    flex-basis: 110px;
  }
}

/* Scheda utente: "Cosa può vedere e gestire". Le sezioni diverse dal ruolo
   hanno fondo giallo tenue e l'etichetta "personalizzato". */
.elenco-permessi-utente {
  max-height: 340px;
  overflow-y: auto;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.6rem;
}
.elenco-permessi-gruppo {
  padding: 0.75rem 0.25rem 0.25rem;
  color: var(--bs-gray-600);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.permesso-utente {
  align-items: flex-start;
  padding: 0.55rem 0.5rem;
  margin: 0;
  border-radius: 0.45rem;
  cursor: pointer;
}
.permesso-utente .form-check-input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.permesso-utente .permesso-personalizzato {
  display: none;
}
.permesso-utente.permesso-diverso-dal-ruolo {
  background-color: #FFF8E6;
}
.permesso-utente.permesso-diverso-dal-ruolo .permesso-personalizzato {
  display: inline-block;
}

/* --------------------------------------------------------------------------
 * Guida dello staff (documentazione.php): pagina bianca in stile
 * documentazione tecnica. Indice a sinistra, testo al centro, sommario a
 * destra; barra in alto fissa.
 * -------------------------------------------------------------------------- */
body.doc-pagina {
  --doc-barra-altezza: 64px;
  --doc-accento: #2563EB;
  --doc-bordo: #E5E7EB;
  --doc-testo: #1F2937;
  --doc-tenue: #6B7280;
  background-color: #ffffff;
  color: var(--doc-testo);
  font-family: Inter, system-ui, sans-serif;
}
.doc-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--doc-barra-altezza);
  padding: 0 1.5rem;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--doc-bordo);
}
.doc-barra-menu {
  display: none;
  border: 0;
  background: none;
  padding: 0.25rem;
  color: var(--doc-testo);
}
.doc-marchio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--doc-testo);
  text-decoration: none;
}
.doc-marchio i {
  color: var(--doc-accento);
}
.doc-marchio-testo {
  font-size: 1.1rem;
  font-weight: 700;
}
.doc-marchio-sottotitolo {
  margin-left: 0.25rem;
  color: var(--doc-tenue);
  font-weight: 500;
}
.doc-versione {
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  background-color: #EFF6FF;
  color: var(--doc-accento);
  font-size: 0.75rem;
  font-weight: 600;
}
.doc-ricerca {
  position: relative;
  flex: 0 1 420px;
  margin-left: auto;
}
.doc-ricerca-icona {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--doc-tenue);
}
.doc-ricerca-campo {
  width: 100%;
  height: 40px;
  padding: 0 2.5rem 0 2.4rem;
  border: 1px solid var(--doc-bordo);
  border-radius: 0.6rem;
  background-color: #F9FAFB;
  font-size: 0.95rem;
  outline: none;
}
.doc-ricerca-campo:focus {
  border-color: var(--doc-accento);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.doc-ricerca-tasto {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--doc-bordo);
  border-radius: 0.3rem;
  background: #ffffff;
  color: var(--doc-tenue);
  font-size: 0.75rem;
  box-shadow: none;
}
.doc-risultati {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--doc-bordo);
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.doc-risultato {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--doc-testo);
  text-decoration: none;
}
.doc-risultato:hover,
.doc-risultato.selezionato {
  background-color: #EFF6FF;
}
.doc-risultato-percorso {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--doc-accento);
}
.doc-risultato-testo {
  display: block;
  font-size: 0.85rem;
  color: var(--doc-tenue);
}
.doc-risultato mark {
  padding: 0;
  background-color: #FEF3C7;
  color: inherit;
}
.doc-risultati-vuoto {
  padding: 0.75rem;
  color: var(--doc-tenue);
  font-size: 0.9rem;
}
.doc-torna {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--doc-bordo);
  border-radius: 0.6rem;
  color: var(--doc-testo);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.doc-torna:hover {
  border-color: var(--doc-accento);
  color: var(--doc-accento);
}

.doc-corpo {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 3rem;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.doc-indice {
  position: sticky;
  top: var(--doc-barra-altezza);
  align-self: start;
  max-height: calc(100vh - var(--doc-barra-altezza));
  overflow-y: auto;
  padding: 2rem 0.5rem 2rem 0;
  border-right: 1px solid var(--doc-bordo);
}
.doc-indice-gruppo {
  margin-bottom: 1.5rem;
}
.doc-indice-titolo {
  margin-bottom: 0.4rem;
  padding: 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--doc-testo);
}
.doc-indice-voce {
  display: block;
  padding: 0.3rem 0.75rem;
  border-radius: 0.4rem;
  color: var(--doc-tenue);
  font-size: 0.92rem;
  text-decoration: none;
}
.doc-indice-voce:hover {
  color: var(--doc-testo);
  background-color: #F3F4F6;
}
.doc-indice-voce.attiva {
  color: var(--doc-accento);
  background-color: #EFF6FF;
  font-weight: 600;
}

.doc-principale {
  min-width: 0;
  padding: 2.5rem 0 4rem;
}
.doc-articolo {
  max-width: 780px;
  font-size: 1rem;
  line-height: 1.7;
}
.doc-gruppo-pagina {
  margin-bottom: 0.25rem;
  color: var(--doc-accento);
  font-size: 0.85rem;
  font-weight: 600;
}
.doc-titolo {
  margin-bottom: 0.75rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}
.doc-articolo .doc-sottotitolo {
  margin-bottom: 2rem;
  font-size: 1.2rem;
  color: var(--doc-tenue);
  line-height: 1.6;
}
.doc-articolo h2 {
  margin: 2.75rem 0 0.9rem;
  padding-top: 0.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
  scroll-margin-top: calc(var(--doc-barra-altezza) + 1rem);
}
.doc-articolo h3 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  scroll-margin-top: calc(var(--doc-barra-altezza) + 1rem);
}
.doc-articolo p,
.doc-articolo ul,
.doc-articolo ol {
  margin-bottom: 1rem;
}
.doc-articolo li {
  margin-bottom: 0.35rem;
}
.doc-articolo a {
  color: var(--doc-accento);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc-articolo strong {
  font-weight: 650;
  color: #111827;
}
.doc-articolo table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.doc-articolo th,
.doc-articolo td {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--doc-bordo);
  text-align: left;
  vertical-align: top;
}
.doc-articolo th {
  background-color: #F9FAFB;
  font-weight: 650;
}
/* Passaggi numerati con il cerchio. */
.doc-articolo ol.doc-passi {
  counter-reset: passo;
  list-style: none;
  padding-left: 0;
}
.doc-articolo ol.doc-passi > li {
  position: relative;
  counter-increment: passo;
  padding-left: 2.6rem;
  margin-bottom: 0.9rem;
}
.doc-articolo ol.doc-passi > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #EFF6FF;
  color: var(--doc-accento);
  font-size: 0.85rem;
  font-weight: 700;
}
/* Percorso nel menu: Gestione studio › Ruoli e permessi */
.doc-percorso {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--doc-bordo);
  border-radius: 0.35rem;
  background-color: #F9FAFB;
  font-size: 0.88em;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.doc-percorso-freccia {
  color: var(--doc-tenue);
  font-weight: 400;
}
/* Riquadri: suggerimento (blu), attenzione (giallo), importante (rosso). */
.doc-nota {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid #93C5FD;
  border-radius: 0 0.5rem 0.5rem 0;
  background-color: #EFF6FF;
}
.doc-nota > :last-child {
  margin-bottom: 0;
}
.doc-nota-titolo {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
  color: #1E40AF;
}
.doc-nota-attenzione {
  border-left-color: #FCD34D;
  background-color: #FFFBEB;
}
.doc-nota-attenzione .doc-nota-titolo {
  color: #92400E;
}
.doc-nota-importante {
  border-left-color: #FCA5A5;
  background-color: #FEF2F2;
}
.doc-nota-importante .doc-nota-titolo {
  color: #991B1B;
}
/* Riquadri cliccabili verso altre pagine (introduzione). */
.doc-schede {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0 1.5rem;
}
.doc-scheda {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--doc-bordo);
  border-radius: 0.65rem;
  text-decoration: none !important;
  color: var(--doc-testo) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.doc-scheda:hover {
  border-color: var(--doc-accento);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1);
}
.doc-scheda-titolo {
  display: block;
  font-weight: 700;
  color: #111827;
}
.doc-scheda-testo {
  display: block;
  font-size: 0.88rem;
  color: var(--doc-tenue);
  line-height: 1.5;
}

.doc-vicine {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--doc-bordo);
}
.doc-vicina {
  display: flex;
  flex-direction: column;
  max-width: 48%;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--doc-bordo);
  border-radius: 0.65rem;
  text-decoration: none !important;
}
.doc-vicina:hover {
  border-color: var(--doc-accento);
}
.doc-vicina-successiva {
  margin-left: auto;
  text-align: right;
}
.doc-vicina-etichetta {
  font-size: 0.8rem;
  color: var(--doc-tenue);
}
.doc-vicina-titolo {
  font-weight: 650;
  color: var(--doc-accento);
}

.doc-sommario {
  position: sticky;
  top: var(--doc-barra-altezza);
  align-self: start;
  padding: 2.5rem 0 2rem;
}
.doc-sommario-titolo {
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.doc-sommario-voce {
  display: block;
  padding: 0.2rem 0 0.2rem 0.75rem;
  border-left: 2px solid var(--doc-bordo);
  color: var(--doc-tenue);
  font-size: 0.85rem;
  line-height: 1.4;
  text-decoration: none;
}
.doc-sommario-voce:hover {
  color: var(--doc-testo);
}
.doc-sommario-voce.attiva {
  border-left-color: var(--doc-accento);
  color: var(--doc-accento);
  font-weight: 600;
}
.doc-piede {
  padding: 1.5rem;
  border-top: 1px solid var(--doc-bordo);
  color: var(--doc-tenue);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 1199.98px) {
  .doc-corpo {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .doc-sommario {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .doc-corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .doc-barra {
    gap: 0.6rem;
    padding: 0 1rem;
  }
  .doc-barra-menu {
    display: block;
  }
  .doc-marchio-sottotitolo,
  .doc-versione,
  .doc-torna span,
  .doc-ricerca-tasto {
    display: none;
  }
  .doc-indice {
    display: none;
    position: fixed;
    top: var(--doc-barra-altezza);
    left: 0;
    bottom: 0;
    z-index: 15;
    width: 280px;
    max-height: none;
    padding: 1.5rem 1rem;
    background-color: #ffffff;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
  }
  .doc-indice.aperto {
    display: block;
  }
  .doc-titolo {
    font-size: 1.9rem;
  }
}

/* Link alla guida nell'header dell'admin. */
.header-guida {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Campo password con l'occhio per mostrarla (pagine di accesso, auth.js). */
.campo-password {
  position: relative;
}
.campo-password .form-control {
  padding-right: 3rem;
}
/* L'icona di errore di Bootstrap si sposta a sinistra dell'occhio. */
.campo-password .form-control.is-invalid {
  padding-right: 4.75rem;
  background-position: right 3rem center;
}
.campo-password-occhio {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  cursor: pointer;
}
.campo-password-occhio i {
  color: var(--bs-gray-500);
}
.campo-password-occhio:hover i,
.campo-password-occhio:focus-visible i {
  color: var(--bs-primary);
}
.campo-password-occhio:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}

/* Versione del software (pagine di accesso e piè di pagina dell'admin). */
.versione-software {
  color: var(--bs-gray-500);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Avviso fluttuante in basso a destra (esito di azioni immediate). */
.avviso-fluttuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1090;
  max-width: 380px;
  padding: 0.8rem 1.1rem;
  border-radius: 0.6rem;
  background-color: #1F7A4D;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.avviso-fluttuante.avviso-errore {
  background-color: #B42335;
}
.avviso-fluttuante.visibile {
  opacity: 1;
  transform: translateY(0);
}

.log-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.log-legenda-voce {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem 0.25rem 0.6rem;
  border-radius: 2rem;
  background-color: var(--log-fondo);
  box-shadow: inset 3px 0 0 var(--log-filetto);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-gray-700);
}