/*
Theme Name: Registro Suore Domenicane
Description: Tema del registro anagrafico della Congregazione delle Suore Domenicane di Santa Caterina da Siena. Console chiara: barra fissa, navigazione laterale con icone, contenuto su schede, tabelle dense con intestazione fissa.
Version: 2.0
Author: Mediacor
Requires at least: 6.5
Tested up to: 7.0
*/

/* ==========================================================================
   1. Caratteri, ospitati sul dominio

   Non si caricano da servizi esterni: il sistema tratta dati personali e una
   richiesta a un server terzo a ogni visita sarebbe un trasferimento non
   necessario. Tutti i caratteri hanno licenza SIL Open Font.
   ========================================================================== */

/* Inter e' distribuita come font variabile: un solo file copre l'intero
   intervallo di pesi, quindi due file invece di sei. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cardo resta solo nel marchio: un filo di continuita' a costo di un file. */
@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/cardo-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono per date, conteggi e numeri di registro. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Token

   Dichiarati una volta. Chi cambia l'aspetto tocca qui, non le regole.
   ========================================================================== */

:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-tenue: #fafbfc;

  --bordo: #e4e7ec;
  --bordo-forte: #d0d5dd;

  --testo: #101828;
  --testo-tenue: #667085;
  --testo-fioco: #98a2b3;

  /* Il mattone di Albi, dove la Congregazione e' nata nel 1852 e dove sta
     ancora la casa madre. E' l'unico segno d'identita' che resta dalla
     direzione precedente, e in una console chiara funziona come accento. */
  --accento: #a24c3b;
  --accento-forte: #8b3f31;
  --accento-tenue: #fbf1ee;
  --accento-bordo: #eccec5;

  --verde: #067647;
  --verde-tenue: #ecfdf3;
  --ambra: #b54708;
  --ambra-tenue: #fffaeb;
  --neutro-tenue: #f2f4f7;

  --raggio: 8px;
  --raggio-piccolo: 6px;
  --raggio-tondo: 999px;

  --ombra: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.1);
  --ombra-alta: 0 4px 6px -2px rgb(16 24 40 / 0.03), 0 12px 16px -4px rgb(16 24 40 / 0.08);

  --barra: 56px;
  --laterale: 15rem;
  --laterale-ridotta: 4rem;

  --ui: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --marchio: "Cardo", Georgia, serif;
  --dato: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "cv05" 1, "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accento);
  text-decoration: none;
}

a:hover {
  color: var(--accento-forte);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
  border-radius: var(--raggio-piccolo);
}

.sd-solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   4. Guscio: barra fissa in alto, navigazione a sinistra, contenuto a destra
   ========================================================================== */

/* La barra di amministrazione di WordPress occupa 32 px in cima per chi ha
   il backend: senza questo scostamento si sovrappone alla barra fissa. */
body {
  --scostamento: 0px;
}

body.admin-bar {
  --scostamento: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --scostamento: 46px;
  }
}

.sd-barra {
  position: fixed;
  top: var(--scostamento);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--barra);
  padding: 0 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.sd-laterale {
  position: fixed;
  top: calc(var(--barra) + var(--scostamento));
  bottom: 0;
  left: 0;
  z-index: 40;
  width: var(--laterale);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.625rem 0.5rem;
  overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--bordo);
}

.sd-principale {
  min-height: calc(100vh - var(--barra) - var(--scostamento));
  margin-left: var(--laterale);
  padding: 1rem 1.5rem 2.5rem;
  padding-top: calc(var(--barra) + var(--scostamento) + 1rem);
}

.sd-chiusa {
  margin-left: var(--laterale);
  padding: 1rem 1.5rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--testo-fioco);
}

/* Barra ridotta: restano le sole icone, l'etichetta compare al passaggio. */
body.sd-ridotta .sd-laterale {
  width: var(--laterale-ridotta);
}

body.sd-ridotta .sd-principale,
body.sd-ridotta .sd-chiusa {
  margin-left: var(--laterale-ridotta);
}

/* ==========================================================================
   5. Barra superiore
   ========================================================================== */

.sd-marchio {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  color: var(--testo);
}

.sd-marchio:hover {
  color: var(--testo);
  text-decoration: none;
}

.sd-scudo {
  flex: none;
  width: 18px;
  height: 24px;
}

.sd-marchio-nome {
  font-family: var(--marchio);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.06em;
}

/* La briciola dice dove si e': ha preso il posto dell'occhiello, che era una
   riga a se' stante e costava 43 px di altezza a ogni pagina. */
.sd-briciola:empty {
  display: none;
}

.sd-briciola {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.sd-briciola::before {
  content: "";
  width: 1px;
  height: 20px;
  background: var(--bordo);
}

.sd-briciola span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sd-spinta {
  margin-left: auto;
}

/* Comandi della barra: pulsanti quadrati senza contorno finche' non servono */
.sd-comando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: transparent;
  color: var(--testo-tenue);
  cursor: pointer;
}

.sd-comando:hover {
  background: var(--neutro-tenue);
  color: var(--testo);
}

.sd-pannello-apri {
  display: none;
}

/* --- Menu utente --- */

.sd-utente {
  position: relative;
  flex: none;
}

.sd-utente-apri {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 0.5rem 0 0.3125rem;
  border: 0;
  border-radius: var(--raggio-tondo);
  background: transparent;
  font-family: inherit;
  color: var(--testo);
  cursor: pointer;
}

.sd-utente-apri:hover {
  background: var(--neutro-tenue);
}

.sd-iniziali {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--raggio-tondo);
  background: var(--accento);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.sd-utente-chi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}

.sd-utente-nome {
  font-size: 0.8125rem;
  font-weight: 500;
}

.sd-utente-ruolo {
  font-size: 0.6875rem;
  color: var(--testo-tenue);
}

.sd-tendina {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: none;
  min-width: 13rem;
  padding: 0.3125rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
}

.sd-tendina[data-aperta="1"] {
  display: block;
}

.sd-tendina a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--raggio-piccolo);
  font-size: 0.875rem;
  color: var(--testo);
}

.sd-tendina a:hover {
  background: var(--neutro-tenue);
  text-decoration: none;
}

/* Le icone della tendina non hanno una classe propria — `sd_icona()` la
   riceve solo dove serve — e senza una misura esplicita si disegnavano alla
   dimensione naturale dell'SVG, spingendo il testo a capo tre volte. */
.sd-tendina a svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--testo-fioco);
}

.sd-tendina a:hover svg {
  color: var(--accento);
}

.sd-tendina {
  white-space: nowrap;
}

.sd-tendina hr {
  margin: 0.3125rem 0;
  border: 0;
  border-top: 1px solid var(--bordo);
}

/* ==========================================================================
   6. Navigazione laterale
   ========================================================================== */

.sd-gruppo + .sd-gruppo {
  margin-top: 1rem;
}

.sd-gruppo-titolo {
  margin: 0 0 0.25rem;
  padding: 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-fioco);
}

.sd-laterale ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-voce {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--raggio-piccolo);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--testo-tenue);
  white-space: nowrap;
}

.sd-voce:hover {
  background: var(--neutro-tenue);
  color: var(--testo);
  text-decoration: none;
}

.sd-voce svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--testo-fioco);
}

.sd-voce:hover svg {
  color: var(--testo-tenue);
}

.sd-voce[aria-current="page"] {
  background: var(--accento-tenue);
  color: var(--accento-forte);
}

.sd-voce[aria-current="page"] svg {
  color: var(--accento);
}

.sd-riduci {
  margin-top: auto;
  padding-top: 0.5rem;
}

.sd-riduci button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--testo-fioco);
  white-space: nowrap;
  cursor: pointer;
}

.sd-riduci button:hover {
  background: var(--neutro-tenue);
  color: var(--testo);
}

.sd-riduci svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Ridotta: spariscono le etichette, l'icona si centra, e il nome compare
   come suggerimento nativo del browser (attributo title). */
body.sd-ridotta .sd-laterale .sd-etichetta,
body.sd-ridotta .sd-gruppo-titolo {
  display: none;
}

body.sd-ridotta .sd-voce,
body.sd-ridotta .sd-riduci button {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

body.sd-ridotta .sd-gruppo + .sd-gruppo {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bordo);
}

body.sd-ridotta .sd-riduci svg {
  transform: rotate(180deg);
}

/* --- Su schermo stretto la barra esce dal flusso e diventa un pannello --- */

.sd-velo {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: none;
  background: rgb(16 24 40 / 0.4);
}

@media (max-width: 60rem) {
  .sd-pannello-apri {
    display: inline-flex;
  }

  .sd-laterale {
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: var(--ombra-alta);
  }

  body.sd-pannello .sd-laterale {
    transform: none;
  }

  body.sd-pannello .sd-velo {
    display: block;
  }

  .sd-principale,
  .sd-chiusa,
  body.sd-ridotta .sd-principale,
  body.sd-ridotta .sd-chiusa {
    margin-left: 0;
  }

  .sd-riduci {
    display: none;
  }

  .sd-utente-chi {
    display: none;
  }
}

@media (max-width: 30rem) {
  .sd-briciola {
    display: none;
  }

  .sd-principale {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-laterale {
    transition: none;
  }
}

/* ==========================================================================
   7. Testata di pagina

   Prima erano tre elementi impilati — occhiello, titolo grande, spazio — per
   circa 285 px. Ora e' una riga sola: titolo a sinistra, azioni a destra.
   ========================================================================== */

.sd-testa-pagina {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
}

.sd-titolo-pagina {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--testo);
}

.sd-sottotitolo {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

.sd-azioni-pagina {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* ==========================================================================
   8. Componenti comuni
   ========================================================================== */

.sd-scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.sd-scheda + .sd-scheda {
  margin-top: 1rem;
}

.sd-scheda-testa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bordo);
  font-size: 0.9375rem;
  font-weight: 600;
}

.sd-scheda-corpo {
  padding: 1rem;
}

/* Pulsanti */
.sd-bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 36px;
  padding: 0 0.875rem;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--testo);
  cursor: pointer;
}

.sd-bottone:hover {
  background: var(--neutro-tenue);
  color: var(--testo);
  text-decoration: none;
}

.sd-bottone svg {
  width: 16px;
  height: 16px;
}

.sd-bottone-primario {
  border-color: var(--accento);
  background: var(--accento);
  color: #fff;
}

.sd-bottone-primario:hover {
  border-color: var(--accento-forte);
  background: var(--accento-forte);
  color: #fff;
}

/* Pastiglie: stato religioso, tipologia di entita', esito. */
.sd-pastiglia {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--raggio-tondo);
  background: var(--neutro-tenue);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--testo-tenue);
  white-space: nowrap;
}

.sd-pastiglia-verde {
  background: var(--verde-tenue);
  color: var(--verde);
}

.sd-pastiglia-ambra {
  background: var(--ambra-tenue);
  color: var(--ambra);
}

.sd-pastiglia-accento {
  background: var(--accento-tenue);
  color: var(--accento-forte);
}

.sd-vuoto {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--testo-tenue);
}

/* ==========================================================================
   9. Prospetti di CiviCRM

   CiviCRM porta Bootstrap e un proprio foglio: cornice attorno alla tabella,
   righe zebrate, intestazioni azzurre su fondo celeste, link blu e un
   evidenziato giallo. Sovrapposti alla console darebbero due sistemi di
   lettura contemporanei, e vanno spenti con `!important` perche' CiviCRM li
   imposta in piu' punti e da fogli caricati dopo il nostro.

   NON RIMUOVERE questo blocco riscrivendo il foglio: e' gia' successo, e
   sono tornate righe zebrate, link blu e titoli azzurri.
   ========================================================================== */

/* Il contenitore che Afform genera diventa la scheda che contiene filtri,
   tabella e piede: e' il gruppo naturale, e mettere i filtri dentro invece
   che sopra fa cominciare le righe piu' in alto di una cinquantina di pixel. */
.sd-corpo [af-fieldset] {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
}

/* Le pagine con piu' prospetti — le statistiche — dichiarano `sd-blocchi` sul
   contenitore: li' la scheda non e' il fieldset, che ne conterrebbe cinque,
   ma ciascun blocco titolo-piu-tabella al suo interno. */
.sd-corpo [af-fieldset].sd-blocchi {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.sd-corpo .sd-blocco {
  margin-bottom: 1rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
}

/* CiviCRM dipinge i propri `h3` di azzurro su fondo celeste. Qui sono i
   titoli delle schede e prendono lo stesso trattamento di `.sd-scheda-testa`. */
.sd-corpo .crm-container h3,
.sd-corpo .sd-blocco h3 {
  margin: 0 !important;
  padding: 0.875rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bordo) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--ui) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--testo) !important;
}

.sd-corpo .crm-container,
.sd-corpo .crm-search-display {
  font-family: var(--ui);
  font-size: 0.9375rem;
  color: var(--testo);
}

/* --- Tabella --- */

.sd-corpo .crm-container table {
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
}

.sd-corpo .crm-container thead tr,
.sd-corpo .crm-container th {
  border: 0 !important;
  color: var(--testo-tenue) !important;
}

/* Intestazione fissa: i nomi delle colonne restano mentre si scorrono
   centinaia di righe. Serve uno sfondo pieno, altrimenti le righe che
   passano sotto si vedono in trasparenza. */
.sd-corpo .crm-container th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  padding: 0 0.75rem 0 1.75rem !important;
  background: var(--superficie-tenue) !important;
  border-bottom: 1px solid var(--bordo) !important;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.sd-corpo .crm-container th:first-child {
  padding-left: 2rem !important;
}

.sd-corpo .crm-container th:hover {
  color: var(--testo) !important;
}

/* La freccia di ordinamento e' in `position: absolute` con `margin-left`
   negativo: CiviCRM la fa sporgere di proposito nell'imbottitura sinistra
   della cella, davanti all'etichetta. Con -11 px resta a tre pixel dal testo
   e sembra attaccata. Si allarga il margine negativo e si allarga di
   altrettanto l'imbottitura, cosi' la freccia ha dove stare. */
.sd-corpo .crm-container th i,
.sd-corpo .crm-container th .crm-search-table-column-sort-icon {
  margin-left: -1.5rem !important;
  color: var(--testo-fioco);
}

.sd-corpo .crm-container th:hover i {
  color: var(--accento) !important;
}

/* Zebratura ed evidenziato giallo non si spengono con `background`: Bootstrap
   e CiviCRM li dipingono con `box-shadow: inset` sulle celle. La zebratura si
   toglie alla fonte non mettendo `table-striped` fra le classi del prospetto
   (vedere `prospetto()` in tools/configura_frontend.py); qui si copre quel
   che resta. */
.sd-corpo .crm-container tbody tr,
.sd-corpo .crm-container tbody tr.odd,
.sd-corpo .crm-container tbody tr.even,
.sd-corpo .crm-container tbody tr:nth-child(odd),
.sd-corpo .crm-container tbody tr:nth-child(even),
.sd-corpo .crm-container tbody td {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sd-corpo .crm-container tbody td {
  height: 38px;
  padding: 0 0.75rem 0 1.75rem !important;
  border-bottom: 1px solid var(--bordo) !important;
  vertical-align: middle;
}

/* Stessa imbottitura sinistra dell'intestazione: allargando quella per fare
   posto alla freccia, i valori sarebbero rimasti rientrati rispetto ai nomi
   di colonna. */
.sd-corpo .crm-container tbody td:first-child {
  padding-left: 2rem !important;
}

.sd-corpo .crm-container tbody tr:last-child td {
  border-bottom: 0 !important;
}

.sd-corpo .crm-container tbody tr:hover td {
  background: var(--accento-tenue) !important;
}

.sd-corpo .crm-container a {
  color: var(--testo) !important;
  font-weight: 500;
}

.sd-corpo .crm-container tbody tr:hover a {
  color: var(--accento-forte) !important;
}

/* Date e conteggi incolonnano. */
.sd-corpo .crm-container td {
  font-variant-numeric: tabular-nums;
}

/* Lo stato religioso come pastiglia.

   `cssClass` sulla colonna non produce nulla sulle celle — verificato sul DOM
   reale — mentre `cssRules` sì: sono regole condizionali che SearchKit valuta
   riga per riga e che aggiungono la classe alla cella. Le condizioni stanno in
   `configura_frontend.py`, non qui, perché dipendono dai valori dei dati. */
.sd-corpo .crm-container td[class*="sd-stato-"] span {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--raggio-tondo);
  background: var(--neutro-tenue);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--testo-tenue);
}

.sd-corpo .crm-container td.sd-stato-perpetua span {
  background: var(--verde-tenue);
  color: var(--verde);
}

.sd-corpo .crm-container td.sd-stato-tempo span,
.sd-corpo .crm-container td.sd-stato-forma span {
  background: var(--ambra-tenue);
  color: var(--ambra);
}

/* --- Filtri: una riga sola sopra la tabella --- */

.sd-corpo .crm-container .sd-filtri {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid var(--bordo);
}

/* L'etichetta sopra ogni campo costava 172 px di altezza; ora e' il
   segnaposto dentro il campo, dichiarato in `filtro()` lato Python. */
.sd-corpo .crm-container .sd-filtri label,
.sd-corpo .crm-container .sd-filtri .crm-af-field-label {
  display: none !important;
}

/* Ma un gruppo di pulsanti radio non ha segnaposto: senza etichetta restavano
   due cerchietti anonimi accanto alla tabella dei governi, e nessuno poteva
   sapere che significassero «in carica». Li' l'etichetta resta, in linea. */
.sd-corpo .crm-container .sd-filtri af-field:has(input[type="radio"]),
.sd-corpo .crm-container .sd-filtri af-field:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: none;
}

.sd-corpo .crm-container .sd-filtri af-field:has(input[type="radio"]) label:first-child,
.sd-corpo .crm-container .sd-filtri af-field:has(input[type="checkbox"]) label:first-child,
.sd-corpo .crm-container .sd-filtri af-field:has(input[type="radio"]) .crm-af-field-label,
.sd-corpo .crm-container .sd-filtri af-field:has(input[type="checkbox"]) .crm-af-field-label {
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap;
  color: var(--testo-tenue);
}

.sd-corpo .crm-container .sd-filtri input[type="radio"],
.sd-corpo .crm-container .sd-filtri input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0 0.25rem 0 0;
  accent-color: var(--accento);
}

.sd-corpo .crm-container .sd-filtri af-field {
  margin: 0 !important;
  min-width: 11rem;
  max-width: 15rem;
}

.sd-corpo .crm-container .sd-filtri af-field:first-child {
  flex: 1 1 14rem;
  max-width: 22rem;
}

/* --- Campi --- */

.sd-corpo .crm-container input[type="text"],
.sd-corpo .crm-container input[type="number"],
.sd-corpo .crm-container input[type="email"],
.sd-corpo .crm-container select,
.sd-corpo .crm-container .select2-container .select2-choice,
.sd-corpo .crm-container .select2-container .select2-choices,
.sd-corpo .crm-container .crm-form-select {
  width: 100%;
  min-height: 34px;
  padding: 0.25rem 0.625rem !important;
  border: 1px solid var(--bordo-forte) !important;
  border-radius: var(--raggio-piccolo) !important;
  background: var(--superficie) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: var(--ui);
  font-size: 0.875rem;
  color: var(--testo) !important;
}

.sd-corpo .crm-container input:focus,
.sd-corpo .crm-container select:focus,
.sd-corpo .crm-container .select2-container-active .select2-choice,
.sd-corpo .crm-container .select2-container-active .select2-choices {
  border-color: var(--accento) !important;
  box-shadow: 0 0 0 3px var(--accento-tenue) !important;
  outline: 0;
}

.sd-corpo .crm-container ::placeholder {
  color: var(--testo-fioco);
}

.sd-corpo .crm-container textarea {
  width: 100%;
  max-width: 34rem;
  padding: 0.5rem 0.625rem !important;
  border: 1px solid var(--bordo-forte) !important;
  border-radius: var(--raggio-piccolo) !important;
  background: var(--superficie) !important;
  box-shadow: none !important;
  font-family: var(--ui);
  font-size: 0.875rem;
}

/* SearchKit rende sopra la tabella una barra dei comandi che qui e' sempre
   vuota, perche' i prospetti sono creati con `actions: false`. Vuota costava
   32 px di nulla fra i filtri e la prima riga. Si azzera l'imbottitura invece
   di nasconderla: se un giorno i comandi servissero, comparirebbero. */
.sd-corpo .crm-container .crm-search-display > .form-inline:first-child {
  padding: 0 !important;
  min-height: 0;
}

/* --- Piede del prospetto --- */

.sd-corpo .crm-container .crm-search-display-pager,
.sd-corpo .crm-container .crm-search-display-pager-count,
.sd-corpo .crm-container .form-inline {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.sd-corpo .crm-container .crm-search-display > *:last-child {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--bordo);
  background: var(--superficie-tenue);
}

/* Le tappe dell'avanzamento sono `button` dentro `.crm-container` e
   prendevano questa cornice: si vedevano tre pastiglie staccate invece di un
   avanzamento. Vanno escluse qui, alla fonte: alzare la specificita' dall'altra
   parte sarebbe una gara fra due regole nostre. */
.sd-corpo .crm-container .btn,
.sd-corpo .crm-container button:not(.sd-passo-tappa) {
  height: 32px;
  padding: 0 0.625rem !important;
  border: 1px solid var(--bordo-forte) !important;
  border-radius: var(--raggio-piccolo) !important;
  background: var(--superficie) !important;
  box-shadow: none !important;
  font-family: var(--ui);
  font-size: 0.8125rem;
  color: var(--testo) !important;
}

.sd-corpo .crm-container .btn:hover,
.sd-corpo .crm-container button:not(.sd-passo-tappa):hover {
  background: var(--neutro-tenue) !important;
}

.sd-corpo .crm-container .btn.active,
.sd-corpo .crm-container .btn-primary {
  border-color: var(--accento) !important;
  background: var(--accento) !important;
  color: #fff !important;
}

/* --- Moduli di inserimento (Afform) --- */



.sd-corpo .crm-container af-field {
  display: block;
  margin-bottom: 1rem;
  max-width: 26rem;
}

.sd-corpo .crm-container .crm-af-field-label,
.sd-corpo .crm-container label {
  display: block;
  margin-bottom: 0.3125rem;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
}

/* Il fieldset porta un bordo in cui la legend ritaglia una tacca: a destra
   del titolo restava un secondo filetto che sembrava un errore. */
.sd-corpo .crm-container fieldset,
.sd-corpo .crm-container fieldset.af-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.sd-corpo .crm-container legend.af-title {
  width: 100%;
  margin: 1.75rem 0 1rem;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--bordo);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
}

.sd-corpo .crm-container fieldset.af-container:first-of-type legend.af-title {
  margin-top: 0;
}

/* Il campo data e' composto: un input nascosto per il valore ISO e uno
   visibile largo 89 px, che non si legge come un campo da compilare. */
.sd-corpo .crm-container input.crm-form-date,
.sd-corpo .crm-container .crm-form-date-wrapper input {
  min-width: 9rem;
}

.sd-corpo .crm-container button[type="submit"],
.sd-corpo .crm-container .af-button {
  height: 38px !important;
  padding: 0 1.125rem !important;
  border: 0 !important;
  border-radius: var(--raggio-piccolo) !important;
  background: var(--accento) !important;
  font-weight: 500;
  font-size: 0.9375rem;
  color: #fff !important;
}

.sd-corpo .crm-container button[type="submit"]:hover,
.sd-corpo .crm-container .af-button:hover {
  background: var(--accento-forte) !important;
}

/* Su schermo stretto la tabella scorre: va detto, altrimenti le colonne di
   destra sembrano non esistere. */
@media (max-width: 60rem) {
  /* La tabella deve traboccare e scorrere, non stringersi: senza una larghezza
     minima le colonne si comprimono e «Sr. Aparecida» va a capo su due righe,
     che in un elenco di nomi e' illeggibile. */
  .sd-corpo .crm-search-display {
    overflow-x: auto;
  }

  .sd-corpo .crm-container table {
    min-width: 46rem;
  }

  .sd-corpo .crm-container td,
  .sd-corpo .crm-container th {
    white-space: nowrap;
  }

  .sd-corpo [af-fieldset]::after {
    content: "Scorri in orizzontale per vedere le altre colonne";
    display: block;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--bordo);
    font-size: 0.75rem;
    color: var(--testo-fioco);
  }

  /* I filtri impilati occupano mezza schermata: su telefono stanno su due
     colonne, che e' quanto serve a leggerli. */
  .sd-corpo .crm-container .sd-filtri af-field,
  .sd-corpo .crm-container .sd-filtri af-field:first-child {
    flex: 1 1 9rem;
    min-width: 9rem;
    max-width: none;
  }
}

/* ==========================================================================
   10. Cruscotto
   ========================================================================== */

.sd-numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
}

.sd-numero {
  padding: 1rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.sd-numero-etichetta {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-tenue);
}

.sd-numero-valore {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sd-numero-nota {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--testo-fioco);
}

.sd-ripartizione {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* Le due colonne del cruscotto: entita' a sinistra, parti del registro a
   destra. Sotto i 70 rem si impilano. */
.sd-due-colonne {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 70rem) {
  .sd-due-colonne {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tabella scritta da noi, non da CiviCRM: entita' e voci della scheda. */
.sd-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.sd-tabella th {
  padding: 0.5rem 1rem;
  background: var(--superficie-tenue);
  border-bottom: 1px solid var(--bordo);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  color: var(--testo-tenue);
}

.sd-tabella th:last-child,
.sd-tabella td:last-child {
  text-align: right;
}

.sd-tabella td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bordo);
}

.sd-tabella tr:last-child td {
  border-bottom: 0;
}

.sd-tabella tbody tr:hover {
  background: var(--superficie-tenue);
}

.sd-tabella .sd-quante {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.sd-tabella .sd-zero {
  color: var(--testo-fioco);
  font-weight: 400;
}

/* Il rientro dice la discendenza nella gerarchia della Congregazione. */
.sd-livello-1 .sd-ente-nome {
  padding-left: 1.25rem;
}

.sd-livello-2 .sd-ente-nome {
  padding-left: 2.5rem;
}

/* Le parti del registro, come voci cliccabili invece del rotolo lungo. */
.sd-parti {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-parti li + li {
  border-top: 1px solid var(--bordo);
}

.sd-parte {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  color: var(--testo);
}

.sd-parte:hover {
  background: var(--superficie-tenue);
  text-decoration: none;
}

.sd-parte svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--testo-fioco);
}

.sd-parte:hover svg {
  color: var(--accento);
}

.sd-parte-nome {
  font-size: 0.9375rem;
  font-weight: 500;
}

.sd-parte-glossa {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--testo-tenue);
}

.sd-parte-freccia {
  margin-left: auto;
  color: var(--testo-fioco);
}

/* ==========================================================================
   11. Scheda della suora
   ========================================================================== */

.sd-intestazione-suora {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.sd-ritratto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--raggio-tondo);
  background: var(--accento-tenue);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accento);
}

.sd-azioni-scheda {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.sd-sezioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.sd-sezione-scheda {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
}

.sd-sezione-scheda h2 {
  margin: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bordo);
  font-family: var(--ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
}

.sd-elenco-scheda {
  margin: 0;
  padding: 0.25rem 0;
}

.sd-voce-scheda {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.4375rem 1rem;
}

.sd-voce-scheda dt {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.sd-voce-scheda dd {
  margin: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.sd-larga {
  grid-column: 1 / -1;
}

/* Righe di relazioni: assegnazioni, incarichi, storico. */
.sd-sezione-scheda .sd-tabella td,
.sd-sezione-scheda .sd-tabella th {
  padding: 0.4375rem 1rem;
  font-size: 0.875rem;
}

.sd-conclusa {
  color: var(--testo-tenue);
}

/* ==========================================================================
   12. Avvisi
   ========================================================================== */

.sd-avviso {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--accento);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  font-size: 0.875rem;
}

.sd-avviso-verde {
  border-left-color: var(--verde);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Le sezioni che contengono una tabella occupano l'intera larghezza: con
   cinque colonne, in una delle due colonne della griglia si strizzerebbero. */
.sd-sezione-larga {
  grid-column: 1 / -1;
}

/* Le informazioni riservate portano un segno: chi le vede deve sapere che
   sta guardando qualcosa che alle segreterie non compare. */
.sd-riservato {
  border-color: var(--accento-bordo);
}

.sd-riservato h2 {
  background: var(--accento-tenue);
  border-bottom-color: var(--accento-bordo);
  color: var(--accento-forte);
}

.sd-corrente {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--raggio-tondo);
  background: var(--verde-tenue);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--verde);
}

/* ==========================================================================
   13. Moduli di inserimento

   Afform rende ogni sezione come un `fieldset.af-container` a se', con la
   `legend` per titolo. Erano quaranta campi impilati in colonna singola su
   2850 px: il pulsante di salvataggio stava sotto tre schermate di modulo.
   Qui ogni sezione diventa una scheda e i campi vanno su griglia.
   ========================================================================== */

/* Il modulo respira piu' largo dell'elenco: due colonne di campi ci stanno
   solo sopra i 60 rem. */
.sd-modulo {
  max-width: 58rem;
}

/* La scheda non e' piu' il contenitore esterno — che qui non esiste, i
   fieldset sono nove fratelli — ma ciascun fieldset. */
.sd-corpo.sd-modulo [af-fieldset] {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.sd-modulo .crm-container fieldset.af-container {
  display: grid !important;
  /* Due colonne, non tre. Con tre, campi che vanno letti insieme finivano su
     righe diverse: «Data di battesimo» in seconda colonna e «Parrocchia di
     battesimo» in terza, ma «Data di cresima» tornava in prima. */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  /* `align-items: start`, non il valore predefinito: senza, un elemento alto
     — il blocco dei campi personalizzati, 502 px — stira alla propria altezza
     tutti i vicini di riga, e due campi data diventavano riquadri da 486 px
     con dentro un campo da 34. Era il buco da 300 x 580 di `/assegnazione/`. */
  align-items: start;
  /* Lo spazio fra le righe sta nella `gap`, non nel margine dei campi: con il
     margine, l'ultima riga ne lasciava uno morto in fondo alla scheda. */
  gap: 1rem 1.25rem;
  margin: 0 0 1rem !important;
  padding: 0 1.25rem 1.25rem !important;
  background: var(--superficie);
  border: 1px solid var(--bordo) !important;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* Afform apre il modulo con un fieldset che contiene solo il campo nascosto
   dell'id: senza questa regola resta una scheda vuota alta 16 px.

   La condizione deve essere esatta — «un solo figlio, ed e' nascosto». Con la
   forma piu' larga `:not(:has(af-field:not(.af-field-type-hidden)))` sono
   sparite anche Recapiti, Rinnovi dei voti, Lingue e Formazione: quelle
   sezioni non hanno `af-field` diretti ma blocchi ripetibili, e non si
   potevano piu' aggiungere indirizzi ne lingue. */
.sd-modulo .crm-container fieldset.af-container:has(> af-field.af-field-type-hidden:only-child) {
  display: none !important;
}

/* `legend` non accetta il margine negativo come un elemento normale: con
   `margin: 0 -1.25rem` il filetto restava corto di tredici pixel a destra.
   Si allarga con `width` e si sposta con il solo margine sinistro. */
/* Due cose insieme.

   `legend` ritaglia una tacca nel bordo del `fieldset` che la contiene: a
   destra del titolo restava un buco nella cornice della scheda. Con `float`
   l'elemento perde quel trattamento speciale e il bordo si chiude.

   E non accetta il margine negativo come un elemento normale: con
   `margin: 0 -1.25rem` il filetto restava corto di tredici pixel a destra.
   Si allarga con `width` e si sposta con il solo margine sinistro. */
.sd-modulo .crm-container legend.af-title {
  float: left;
  grid-column: 1 / -1;
  width: calc(100% + 2.5rem);
  margin: 0 0 1rem -1.25rem !important;
  padding: 0.875rem 1.25rem !important;
  border-bottom: 1px solid var(--bordo) !important;
}

/* Il campo `id`, nascosto, e' comunque un elemento della griglia: lasciava
   vuota la prima casella di `/assegnazione/` e di `/incarico/`, e il modulo
   sembrava cominciare storto. */
.sd-modulo .crm-container af-field.af-field-type-hidden {
  display: none !important;
}

/* I campi riempiono la cella della griglia: prima erano larghi 416 px dentro
   un contenitore da 736, cioe' meta' spazio buttato. */
.sd-modulo .crm-container af-field {
  max-width: none;
  min-width: 0;
  margin-bottom: 0;
}

.sd-modulo .crm-container af-field input[type="text"],
.sd-modulo .crm-container af-field input[type="number"],
.sd-modulo .crm-container af-field input[type="email"],
.sd-modulo .crm-container af-field select,
.sd-modulo .crm-container af-field textarea,
.sd-modulo .crm-container af-field .select2-container {
  width: 100% !important;
  max-width: none;
}

/* Note e testi lunghi prendono tutta la riga: su una colonna sola sarebbero
   una feritoia. */
.sd-modulo .crm-container af-field:has(textarea) {
  grid-column: 1 / -1;
}

/* CiviCRM genera per ogni gruppo di campi personalizzati una direttiva
   `afblock-custom-...` che contiene tutti i campi del gruppo. In griglia e'
   un elemento solo: i suoi cinque campi finivano impilati dentro una colonna
   larga 314 px mentre due terzi della riga restavano vuoti. Prende tutta la
   larghezza e diventa griglia a sua volta. */
.sd-modulo .crm-container [class*="afblock-"],
.sd-modulo .crm-container [af-repeat] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: start;
  gap: 1rem 1.25rem;
}

.sd-modulo .crm-container af-field textarea {
  min-height: 5.5rem;
}

/* Il campo data e' composto: un input nascosto per il valore ISO e uno
   visibile largo 89 px. Riempie la cella come gli altri — larghezze diverse
   nella stessa griglia davano un margine destro a zig-zag.

   In piu' il contenitore impila i propri pezzi e il campo diventa alto 85 px
   contro i 57 di un campo di testo: in griglia le righe con una data erano
   visibilmente piu' alte delle altre. Con `flex` i pezzi tornano in linea. */
.sd-modulo .crm-container .crm-form-date-wrapper {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  /* Il contenitore misura 60 px contro i 34 dell'input che contiene: dentro
     c'e' un elemento alto che non serve mostrare. Si fissa l'altezza del
     campo. Il calendario non ne risente: jQuery UI lo appende al `body`,
     non qui dentro. */
  height: 34px;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  overflow: visible;
}

.sd-modulo .crm-container input.crm-form-date {
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
}

/* select2 disegna il bordo su un elemento interno — `.select2-choice` per i
   campi a valore singolo, `ul.select2-choices` per i multivalore come la
   nazionalita'. Bordando anche il contenitore esterno se ne vedevano due,
   uno dentro l'altro. */
.sd-modulo .crm-container .select2-container {
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.sd-modulo .crm-container .select2-container .select2-choice,
.sd-modulo .crm-container .select2-container ul.select2-choices {
  width: 100% !important;
  min-height: 34px;
  border: 1px solid var(--bordo-forte) !important;
  border-radius: var(--raggio-piccolo) !important;
  background: var(--superficie) !important;
}

/* Dentro il multivalore c'e' un `input` di ricerca, che la regola generica
   sui campi di testo bordava a sua volta: si vedeva una seconda cornice
   dentro la prima. E' un dettaglio interno del widget, non un campo. */
.sd-modulo .crm-container .select2-container input,
.sd-modulo .crm-container li.select2-search-field input {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* I blocchi ripetibili con il solo pulsante — Recapiti, Rinnovi, Lingue,
   Formazione — sono quattro schede che contengono un pulsante ciascuna. La
   scheda si stringe attorno al pulsante invece di lasciare mezzo riquadro
   vuoto. Non si tocca il layout interno: quando si aggiunge una riga, i campi
   compaiono normalmente sotto. */
.sd-modulo .crm-container fieldset.af-container:not(:has(> af-field)) {
  padding-bottom: 1rem !important;
}

/* --- Blocchi ripetibili: indirizzi, lingue, rinnovi, formazione --- */

.sd-modulo .crm-container .af-repeat-add,
.sd-modulo .crm-container [ng-click*="addItem"],
.sd-modulo .crm-container button.af-repeat-add {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Una riga ripetuta e' un gruppo: senza un segno che la delimiti, tre lingue
   di seguito diventano dodici campi indistinguibili. */
.sd-modulo .crm-container [af-repeat] > div,
.sd-modulo .crm-container .af-repeat-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 1rem;
  grid-column: 1 / -1;
  padding: 0.875rem 1rem 0;
  margin-bottom: 0.75rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie-tenue);
}

/* --- Barra di salvataggio, sempre a portata --- */

/* Il pulsante di salvataggio resta in fondo al modulo.

   Provato a renderlo fisso in basso con `position: sticky`: e' figlio diretto
   di `af-form` e non ha un contenitore proprio da trasformare in barra, quindi
   restava un pulsante solo, appoggiato sopra il modulo, che copriva il campo
   «Codice fiscale». Coprire un campo e' peggio che scorrere: il guadagno vero
   e' stato accorciare il modulo da 2850 a 2066 px mettendo i campi in griglia. */
.sd-modulo .crm-container button.af-button {
  margin-top: 0.5rem;
}

@media (max-width: 40rem) {
  .sd-modulo .crm-container fieldset.af-container {
    padding: 0 1rem 1rem !important;
  }

  .sd-modulo .crm-container legend.af-title {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ==========================================================================
   14. Modulo scritto a mano: creazione degli account

   `/account/` non e' un Afform ma uno shortcode di `sd-gestione.php`, perche'
   crea un utente WordPress e lo collega al contatto CiviCRM — cose che un
   Afform non fa. Non passa quindi da `.crm-container`, e con il foglio 2.0
   era rimasto senza stile: bordi di fieldset nativi e pulsante di sistema.
   Riceve qui lo stesso trattamento dei moduli di CiviCRM.
   ========================================================================== */

form.sd-modulo {
  max-width: 44rem;
}

form.sd-modulo .sd-sezione {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
  gap: 0 1.25rem;
  margin: 0 0 1rem;
  padding: 0 1.25rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* `float` per lo stesso motivo dei moduli di CiviCRM: senza, la legend
   ritaglia una tacca nel bordo della scheda. */
form.sd-modulo .sd-sezione legend {
  float: left;
  grid-column: 1 / -1;
  width: calc(100% + 2.5rem);
  margin: 0 0 1rem -1.25rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--bordo);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--testo);
}

form.sd-modulo .sd-campo {
  margin: 0 0 1rem;
}

form.sd-modulo .sd-campo label {
  display: block;
  margin-bottom: 0.3125rem;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--testo);
}

form.sd-modulo input[type="text"],
form.sd-modulo input[type="email"],
form.sd-modulo select {
  width: 100%;
  height: 34px;
  padding: 0 0.625rem;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  font-family: var(--ui);
  font-size: 0.875rem;
  color: var(--testo);
}

form.sd-modulo input:focus,
form.sd-modulo select:focus {
  border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-tenue);
  outline: 0;
}

/* Il collegamento alla scheda e la scelta dell'entita' hanno bisogno di una
   riga intera: le loro etichette sono frasi, non parole. */
form.sd-modulo .sd-campo:has(#sd_suora),
form.sd-modulo .sd-campo:has(#sd_entita) {
  grid-column: 1 / -1;
}

form.sd-modulo .sd-aiuto {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

form.sd-modulo .sd-nota {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--accento);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

form.sd-modulo .sd-pulsante {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 1.125rem;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: var(--accento);
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.9375rem;
  color: #fff;
  cursor: pointer;
}

form.sd-modulo .sd-pulsante:hover {
  background: var(--accento-forte);
}

/* Esito della creazione: verde se riuscita, mattone se respinta. */
.sd-avviso-esito {
  border-left-color: var(--verde);
}

.sd-avviso-esito,
.sd-avviso-errore {
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--accento);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  font-size: 0.875rem;
}

.sd-avviso-esito {
  border-left-color: var(--verde);
  background: var(--verde-tenue);
}

.sd-avviso-esito p,
.sd-avviso-errore p {
  margin: 0;
}

.sd-avviso-esito code {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: var(--superficie);
  font-family: var(--dato);
  font-size: 0.8125rem;
  word-break: break-all;
}

/* ==========================================================================
   15. Moduli a passi

   La scheda della suora ha quaranta campi in otto sezioni. `sd-passi.js` ne
   mostra un passo per volta; qui la barra di avanzamento e il piede.
   Le sezioni nascoste restano nel modulo — si invia una volta sola — quindi
   si nascondono con `display: none`, non si rimuovono.
   ========================================================================== */

.sd-passi {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.sd-passi li {
  flex: 1 1 0;
  min-width: 0;
}

/* La barra sta dentro `.crm-container`, quindi le tappe ereditavano la
   cornice dei pulsanti di CiviCRM e sembravano tre pastiglie staccate invece
   di un avanzamento. Ogni regola va con `!important`: il nostro foglio si
   carica prima dei loro. */
.sd-passi .sd-passo-tappa {
  display: flex !important;
  align-items: center;
  gap: 0.625rem;
  width: 100% !important;
  height: auto !important;
  padding: 0.75rem 0.875rem !important;
  border: 0 !important;
  border-top: 3px solid var(--bordo) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  color: var(--testo-fioco) !important;
  cursor: pointer;
}

.sd-passi .sd-passo-tappa:hover {
  background: var(--superficie) !important;
  color: var(--testo-tenue) !important;
}

.sd-passo-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-tondo);
  background: var(--superficie);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.sd-passo-nome {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Il passo fatto porta il filetto pieno: il colore dice quanta strada resta. */
.sd-passi .sd-tappa-fatta {
  border-top-color: var(--accento-bordo) !important;
  color: var(--testo-tenue) !important;
}

.sd-passi .sd-tappa-fatta .sd-passo-numero {
  border-color: var(--accento-bordo);
  background: var(--accento-tenue);
  color: var(--accento-forte);
}

.sd-passi .sd-tappa-corrente {
  border-top-color: var(--accento) !important;
  color: var(--testo) !important;
}

.sd-passi .sd-tappa-corrente .sd-passo-numero {
  border-color: var(--accento);
  background: var(--accento);
  color: #fff;
}

/* Le sezioni fuori dal passo corrente restano nel modulo, nascoste: i loro
   campi devono comunque arrivare al salvataggio, che e' uno solo. */
.sd-modulo .crm-container fieldset[class*="sd-passo-"]:not(.sd-passo-visibile) {
  display: none !important;
}

.sd-passi-piede {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.sd-passi-conta {
  margin-right: auto;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-fioco);
}

/* Su schermo stretto i nomi dei passi non ci stanno: resta il numero, e la
   riga sotto dice per esteso a che punto si e'. */
@media (max-width: 45rem) {
  .sd-passo-nome {
    display: none;
  }

  .sd-passo-tappa {
    justify-content: center;
    padding: 0.5rem;
  }
}

/* La fotografia della suora prende il posto delle iniziali, nello stesso
   tondo: cosi' la scheda non cambia altezza a seconda che ci sia o no. */
.sd-ritratto-foto {
  object-fit: cover;
  padding: 0;
  background: var(--neutro-tenue);
}

/* Le tabelle sotto i grafici stanno dietro una riga da aprire: con i dati
   reali portavano la pagina delle statistiche a 11 238 px. */
.sd-numeri-esatti {
  padding: 0;
}

.sd-numeri-esatti > summary {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--testo-tenue);
  cursor: pointer;
  list-style: none;
}

.sd-numeri-esatti > summary::-webkit-details-marker {
  display: none;
}

/* Il triangolo lo disegniamo noi, perche' quello nativo cambia da browser a
   browser e non segue il colore del testo. */
.sd-numeri-esatti > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.5rem;
  border: 5px solid transparent;
  border-left-color: currentColor;
  vertical-align: 1px;
  transition: transform 0.15s ease;
}

.sd-numeri-esatti[open] > summary::before {
  transform: rotate(90deg);
}

.sd-numeri-esatti > summary:hover {
  color: var(--testo);
}

.sd-numeri-esatti[open] > summary {
  border-bottom: 1px solid var(--bordo);
}