/* =====================================================================
   Area riservata — tema Cultura per Crescere sopra Bootstrap 5.3
   Stessa palette ufficiale del sito pubblico (vedi site.css): il pannello
   e il sito sono la stessa cosa vista da due lati.
   ===================================================================== */

:root {
  --cxc-rosa: #e52a7b;
  --cxc-rosa-scuro: #c01f66;
  /* Il rosa che regge il testo bianco sopra: quello della palette si ferma a
     4.24:1 e per il testo normale ne servono 4.5. Stessa scelta fatta sul
     sito pubblico, stesso valore — i due lati devono restare identici. */
  --cxc-rosa-piena: #d62470;
  --cxc-rosa-tenue: #fdeef5;
  --cxc-azzurro: #179dd8;
  /* L'azzurro dei collegamenti. Un filo più scuro di quello del sito
     pubblico (#0f7aab): lì il fondo è bianco e basta, qui è grigio, e sul
     grigio quello si ferma a 4.39:1. Stessa tinta, un gradino più giù. */
  --cxc-azzurro-scuro: #0d6b93;
  --cxc-azzurro-tenue: #eaf6fc;
  /* --- i grigi del pannello ------------------------------------------
     Grigi neutri, senza una goccia di rosa dentro: sono quelli che tengono
     insieme le interfacce Apple, e servono a far sparire la cornice — nel
     pannello si passano le ore, e a farsi notare dev'essere il lavoro, non
     lo sfondo. Il rosa resta dov'è un'azione da compiere.
     Il grigio dei testi secondari è più scuro di quello Apple (#6e6e73):
     quello si ferma a 4.15:1 sulla voce attiva, sotto il minimo di 4.5. */
  --cxc-crema: #fcfcfc;          /* lo sfondo di tutto */
  --cxc-inchiostro: #1d1d1f;     /* il testo */
  --cxc-tenue: #636366;          /* i testi secondari — 5.84:1 sullo sfondo */
  --cxc-bordo: #e6e6e8;          /* le righe che separano: si vedono e basta */
  --cxc-grigio-attivo: #f0f0f3;  /* la voce del menù dove ti trovi */
  --cxc-grigio-tenue: #f5f5f7;   /* etichette e riquadri di servizio */
  /* I bordi dei campi da compilare non seguono gli altri: una casella si deve
     riconoscere come casella anche a chi ci vede poco, e per quello ci vuole
     3:1 contro il bianco. Un grigio tenue come quello delle righe si fermerebbe
     a 1.2 e la casella sparirebbe nella pagina. */
  --cxc-bordo-campo: #86868b;

  --bs-body-bg: var(--cxc-crema);
  --bs-body-color: var(--cxc-inchiostro);
  --bs-primary: var(--cxc-rosa-piena);
  --bs-link-color-rgb: 13, 107, 147;   /* l'azzurro qui sopra, in cifre: Bootstrap i collegamenti li vuole così */
  --bs-border-color: var(--cxc-bordo);
  --cxc-rosso: #b3261e;
  /* Bootstrap non deriva da solo il colore delle «pillole» di navigazione. */
  --bs-nav-pills-link-active-bg: var(--cxc-rosa-piena);
  /* Anche le pillole di navigazione e i badge seguono il raggio comune:
     un solo angolo in tutto il pannello. */
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-badge-border-radius: var(--bs-border-radius);
  /* 10px come sul sito: campi, menù a tendina e pulsanti hanno tutti lo
     stesso raggio, dentro e fuori dal pannello. */
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
}

body {
  font-size: .935rem;
  -webkit-font-smoothing: antialiased;
}

/* --- i grigi e i blu di Bootstrap, un gradino più giù -----------------
   Le tinte che Bootstrap porta di suo sono tarate sul bianco: sul nostro
   sfondo crema il grigio dei testi secondari si ferma a 4.45:1 e l'azzurro
   delle schede a 4.27, sotto il minimo di 4.5 per essere letti da chi ci
   vede poco. Sono le stesse tinte, scurite quanto basta. Vanno impostate
   qui e non fra i token in cima: Bootstrap le ridichiara dentro .nav e
   .btn-outline-*, e da lì in poi il valore di :root non conta più. */
/* Questa versione di Bootstrap disegna .text-secondary con --bs-secondary-rgb,
   non con --bs-secondary-color-rgb: si impostano tutt'e due, così la riga
   regge anche a un aggiornamento della libreria. */
.text-secondary {
  --bs-secondary-rgb: 99, 99, 102;
  --bs-secondary-color-rgb: 99, 99, 102;
}
.btn-link { --bs-btn-color: var(--cxc-azzurro-scuro); --bs-btn-hover-color: var(--cxc-rosa-scuro); }
.nav {
  --bs-nav-link-color: var(--cxc-azzurro-scuro);
  --bs-nav-link-hover-color: var(--cxc-rosa-scuro);
  /* Il filtro scelto negli elenchi: grigio scurissimo, come un interruttore
     premuto. Il blu di serie di Bootstrap qui non c'entra niente. */
  --bs-nav-pills-link-active-bg: var(--cxc-inchiostro);
}
.btn-outline-secondary {
  --bs-btn-color: var(--cxc-tenue);
  --bs-btn-border-color: #b4b4b4;
  --bs-btn-hover-bg: var(--cxc-tenue);
  --bs-btn-hover-border-color: var(--cxc-tenue);
  --bs-btn-active-bg: var(--cxc-tenue);
  --bs-btn-active-border-color: var(--cxc-tenue);
}
.btn-outline-danger {
  --bs-btn-color: var(--cxc-rosso);
  --bs-btn-border-color: #d3948f;
  --bs-btn-hover-bg: var(--cxc-rosso);
  --bs-btn-hover-border-color: var(--cxc-rosso);
  --bs-btn-active-bg: var(--cxc-rosso);
  --bs-btn-active-border-color: var(--cxc-rosso);
}

/* Il rosa che Bootstrap usa per il codice sta esattamente sul limite (4.5:1)
   e lo supera solo sul bianco puro: sulle nostre schede grigie scende sotto.
   Questo è lo stesso rosa, un gradino più giù. */
code { color: var(--cxc-rosa-scuro); }

.salta {
  position: absolute; top: .5rem; left: .5rem; z-index: 2000;
  background: #fff; padding: .5rem 1rem; border-radius: .5rem;
}

/* --- pulsanti nei colori del progetto -------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--cxc-rosa-piena);
  --bs-btn-border-color: var(--cxc-rosa-piena);
  --bs-btn-hover-bg: var(--cxc-rosa-scuro);
  --bs-btn-hover-border-color: var(--cxc-rosa-scuro);
  --bs-btn-active-bg: var(--cxc-rosa-scuro);
  --bs-btn-active-border-color: var(--cxc-rosa-scuro);
  --bs-btn-disabled-bg: var(--cxc-rosa-piena);
  --bs-btn-disabled-border-color: var(--cxc-rosa-piena);
}
.btn-outline-primary {
  --bs-btn-color: var(--cxc-rosa-scuro);
  --bs-btn-border-color: var(--cxc-rosa);
  /* Col dito sopra il pulsante si riempie, e sopra ci va del bianco: serve il
     rosa che regge il testo bianco (4.83:1), non quello della palette, che si
     ferma a 4.24. */
  --bs-btn-hover-bg: var(--cxc-rosa-piena);
  --bs-btn-hover-border-color: var(--cxc-rosa-piena);
  --bs-btn-active-bg: var(--cxc-rosa-scuro);
  --bs-btn-active-border-color: var(--cxc-rosa-scuro);
}
.form-control, .form-select { border-color: var(--cxc-bordo-campo); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--cxc-azzurro);
  box-shadow: 0 0 0 .2rem rgb(90 169 214 / 25%);
}
.form-check-input:checked {
  background-color: var(--cxc-rosa);
  border-color: var(--cxc-rosa);
}

/* --- barra in alto --------------------------------------------------- */
.cxc-topbar {
  background: #fff;
  border-bottom: 1px solid var(--cxc-bordo);
  min-height: 58px;
  padding-block: .35rem;
}
/* Il marchio è l'SVG originale, lo stesso del sito pubblico: contiene già la
   scritta «Cultura per Crescere Asti», quindi non va ripetuta a testo. */
.cxc-marchio { padding: 0; }
.cxc-marchio img { height: 40px; width: auto; display: block; }
.cxc-avatar {
  display: inline-grid; place-items: center;
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  /* L'iniziale di chi è entrato: un cerchio grigio, non un bollino colorato.
     Serve a riconoscersi in un colpo d'occhio, non a farsi guardare. */
  background: var(--cxc-grigio-attivo);
  color: var(--cxc-inchiostro);
  font-weight: 700; font-size: .78rem;
}
.cxc-badge-superadmin { background: #f0e6f7; color: #6b3b86; }
.cxc-badge-admin      { background: var(--cxc-azzurro-tenue); color: var(--cxc-azzurro-scuro); }
.cxc-badge-ente       { background: var(--cxc-grigio-tenue); color: var(--cxc-tenue); }

/* --- impianto -------------------------------------------------------- */
.cxc-guscio { display: flex; align-items: flex-start; }

.cxc-laterale {
  flex: 0 0 240px;
  background: #fff;
  border-right: 1px solid var(--cxc-bordo);
}
@media (min-width: 992px) {
  .cxc-laterale {
    position: sticky;
    top: 58px;
    height: calc(100vh - 58px);
    overflow-y: auto;
  }
}

.cxc-gruppo {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--cxc-tenue);
  margin: .35rem .5rem .5rem;
}

.cxc-laterale .nav-link {
  color: var(--cxc-inchiostro);
  border-radius: var(--bs-border-radius);
  padding: .45rem .7rem;
  font-weight: 500;
}
.cxc-laterale .nav-link:hover { background: var(--cxc-crema); }
/* La voce dove sei: un rettangolo grigio e il grassetto, niente colore. Il
   colore da solo non basterebbe comunque a dirlo — chi non distingue le tinte
   legge aria-current — e il grassetto lo dice a tutti. */
.cxc-laterale .nav-link.active {
  background: var(--cxc-grigio-attivo);
  color: var(--cxc-inchiostro);
  font-weight: 700;
}
.voce-icona { width: 1.05rem; height: 1.05rem; flex: none; opacity: .85; }

.cxc-nota-ente {
  background: var(--cxc-grigio-tenue);
  color: var(--cxc-tenue);
  line-height: 1.4;
}

.cxc-contenuto {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem;
  max-width: 1180px;
}
@media (max-width: 575.98px) { .cxc-contenuto { padding: 1rem; } }

/* --- intestazione di pagina ------------------------------------------ */
.cxc-testata {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: .75rem; margin-bottom: 1.25rem;
}
.cxc-testata h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.cxc-testata p { margin: .2rem 0 0; color: var(--cxc-tenue); font-size: .9rem; }
.cxc-testata .azioni { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- schede ---------------------------------------------------------- */
.card { border-color: var(--cxc-bordo); }
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--cxc-bordo);
  font-weight: 600;
  padding: .85rem 1.1rem;
}

/* --- riquadri numerici ----------------------------------------------- */
.cxc-numero {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--cxc-bordo);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem 1.1rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cxc-numero:hover {
  transform: translateY(-2px);
  box-shadow: 0 .4rem 1.2rem rgb(44 42 51 / 8%);
}
.cxc-numero .valore {
  display: block;
  font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  color: var(--cxc-rosa);
}
.cxc-numero .etichetta {
  display: block;
  font-size: .82rem; line-height: 1.25;
  color: var(--cxc-tenue);
  margin-top: .15rem;
}
.cxc-numero.attenzione { border-color: #e8b64c; }
.cxc-numero.attenzione .valore { color: #b7791f; }

/* --- tabelle --------------------------------------------------------- */
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cxc-tenue); font-weight: 700;
  border-bottom-width: 1px;
}
/* Le locandine sono A4: in un quadratino ritagliato non si riconosce niente,
   in un rettangolo in piedi si capisce almeno quale manifesto è. */
.cxc-miniatura {
  width: 40px; height: 56px; object-fit: contain;
  border-radius: .45rem; background: var(--cxc-crema);
}
.cxc-miniatura-vuota {
  width: 40px; height: 56px; border-radius: .45rem;
  background: var(--cxc-crema); border: 1px dashed var(--cxc-bordo);
  display: grid; place-items: center;
  font-size: .6rem; color: var(--cxc-tenue); text-align: center; line-height: 1;
}

/* --- stati ----------------------------------------------------------- */
.stato { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--bs-border-radius); }
.stato-pubblicato, .stato-pubblicata { background: #e7f4ec; color: #1e6b41; }
.stato-bozza        { background: #eeecea; color: #5c5750; }
.stato-in_revisione { background: #fdf1dc; color: #96631a; }
.stato-sospeso, .stato-annullato, .stato-archiviata { background: #fbeae8; color: #9d2f22; }

/* --- media ----------------------------------------------------------- */
/* 210px e non 150: nella scheda adesso c'è anche il campo del testo
   alternativo, e in 150 pixel ci stavano tre parole. */
.cxc-media-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.cxc-media-scheda { border: 1px solid var(--cxc-bordo); border-radius: var(--bs-border-radius); background: #fff; padding: .5rem; }
.cxc-media-scheda img { width: 100%; height: 110px; object-fit: contain; background: var(--cxc-crema); border-radius: .35rem; }
.cxc-media-doc { height: 110px; display: grid; place-items: center; background: var(--cxc-crema); border-radius: .35rem; font-weight: 700; color: var(--cxc-tenue); }
.cxc-media-nome { font-size: .72rem; word-break: break-all; margin-top: .4rem; }
.cxc-media-meta { font-size: .7rem; color: var(--cxc-tenue); }

/* --- righe ripetibili (servizi, sedi, allegati) ---------------------- */
.cxc-riga {
  border: 1px solid var(--cxc-bordo);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  margin-bottom: .75rem;
  background: #fff;
  position: relative;
}
.cxc-riga .rimuovi { position: absolute; top: .5rem; right: .5rem; }
.cxc-riga-numero {
  font-size: .7rem; font-weight: 700; color: var(--cxc-tenue);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem;
}

/* --- pagina di accesso ----------------------------------------------- */
.cxc-auth {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 1.5rem;
  /* Un grigio solo, senza sfumature: la pagina di accesso è una porta, non
     una vetrina. Il colore ce l'ha già il marchio, in mezzo al riquadro. */
  background: var(--cxc-crema);
}
.cxc-auth-riquadro {
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: 1.1rem;
  padding: 2.2rem;
  box-shadow: 0 1rem 3rem rgb(44 42 51 / 10%);
}
/* La richiesta di accesso ha più campi e sta su due colonne: le serve più
   larghezza della schermata di accesso, che ne ha due. */
.cxc-auth-riquadro--largo { max-width: 640px; }
.cxc-auth-logo { text-align: center; margin-bottom: 1.75rem; }
.cxc-auth-logo img { height: 72px; width: auto; margin: 0 auto; }

/* --- aiuto veloce dentro l'avatar ------------------------------------ */
.cxc-aiuto {
  padding: .35rem 1rem .85rem;
  font-size: .84rem; line-height: 1.5;
  max-width: 22rem;
}
.cxc-aiuto-titolo {
  font-weight: 700; margin: 0 0 .4rem; color: var(--cxc-inchiostro);
}
.cxc-aiuto ul { margin: 0 0 .6rem; padding-left: 1.1rem; color: var(--cxc-tenue); }
.cxc-aiuto li { margin-bottom: .3rem; }
.cxc-aiuto strong { color: var(--cxc-inchiostro); }
.cxc-aiuto-piu { font-weight: 600; text-decoration: none; }

/* --- manuale ---------------------------------------------------------- */
.cxc-manuale-indice { position: sticky; top: 74px; }
.cxc-manuale-indice .nav-link { color: var(--cxc-inchiostro); font-size: .87rem; border-radius: var(--bs-border-radius); }
.cxc-manuale-indice .nav-link:hover { background: #fff; }

/* Il manuale si legge: colonna stretta, righe alte, titoli che si vedono. */
.cxc-manuale { max-width: 44rem; }
.cxc-manuale .card-body { line-height: 1.65; }
.cxc-manuale h3 {
  font-size: 1.02rem; font-weight: 700; color: var(--cxc-azzurro-scuro);
  margin: 1.6rem 0 .5rem;
}
.cxc-manuale p, .cxc-manuale ul, .cxc-manuale ol { margin-bottom: .9rem; }
.cxc-manuale li { margin-bottom: .3rem; }
.cxc-manuale code {
  background: var(--cxc-crema); border: 1px solid var(--cxc-bordo);
  border-radius: 5px; padding: .05rem .3rem; font-size: .86em; color: var(--cxc-inchiostro);
}
.cxc-manuale pre {
  background: var(--cxc-crema); border: 1px solid var(--cxc-bordo);
  border-radius: var(--bs-border-radius); padding: .8rem 1rem;
  font-size: .84rem; overflow-x: auto; margin-bottom: .9rem;
}
.cxc-manuale kbd {
  background: var(--cxc-inchiostro); color: #fff; border-radius: 4px;
  padding: .05rem .35rem; font-size: .8em;
}
/* Le quattro righe in cima a ogni sezione: quello che serve adesso. */
.cxc-veloce {
  list-style: none; margin: 0 0 1.4rem; padding: .9rem 1.1rem;
  background: var(--cxc-azzurro-tenue); border-radius: var(--bs-border-radius);
  font-size: .89rem;
}
.cxc-veloce li { position: relative; padding-left: 1.1rem; margin-bottom: .3rem; }
.cxc-veloce li::before { content: "›"; position: absolute; left: 0; color: var(--cxc-azzurro-scuro); font-weight: 700; }
.cxc-veloce li:last-child { margin-bottom: 0; }
/* Gli schermi del pannello dentro al manuale: un bordo leggero e l'ombra li
   staccano dal testo, così si capisce al volo che è una fotografia e non un
   pezzo della pagina che stai leggendo. */
.cxc-manuale figure { margin: 1.2rem 0 1.4rem; }
/* Le schermate sono tutte larghe 1100 e alte al massimo 780 (le rifà
   tests/normalizza-schermate.py). Il tetto qui sotto è una rete di sicurezza:
   se un domani ne entra una fuori misura, si rimpicciolisce invece di
   sfondare la pagina. Il fondo bianco serve a quelle che, essendo più strette,
   vengono centrate. */
.cxc-manuale figure img {
  display: block; width: 100%; height: auto;
  max-height: 34rem; object-fit: contain; background: #fff;
  border: 1px solid var(--cxc-bordo); border-radius: var(--bs-border-radius);
  box-shadow: 0 .3rem 1rem rgb(44 42 51 / 8%);
}
.cxc-manuale figcaption {
  font-size: .82rem; color: var(--cxc-tenue); margin-top: .5rem; line-height: 1.45;
}

/* Una nota a margine: un avvertimento che non va perso nel testo. */
.cxc-manuale .nota {
  border-left: 3px solid var(--cxc-azzurro);
  background: var(--cxc-azzurro-tenue);
  padding: .8rem 1rem; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  margin: 1.2rem 0;
}
.cxc-manuale .nota p:last-child { margin-bottom: 0; }

@media print {
  .cxc-topbar, .cxc-laterale, .cxc-testata .azioni, .d-print-none { display: none !important; }
  .cxc-contenuto { padding: 0; max-width: none; }
  .cxc-manuale { max-width: none; }
  .cxc-manuale .card { border: 0; break-inside: auto; }
  .cxc-manuale .card-header { background: none; border-bottom: 2px solid var(--cxc-rosa); font-size: 1.2rem; padding-left: 0; }
  .cxc-manuale .card-body { padding-left: 0; padding-right: 0; }
  .cxc-manuale section { break-before: page; }
  .cxc-manuale figure { break-inside: avoid; }
  .cxc-manuale section:first-child { break-before: avoid; }
}

.vuoto {
  text-align: center; padding: 2.5rem 1rem; color: var(--cxc-tenue);
}
.vuoto svg { width: 2.5rem; height: 2.5rem; opacity: .35; margin-bottom: .75rem; }

/* --- paginazione degli elenchi ---------------------------------------
   Sotto ogni tabella lunga: quante righe stai vedendo, quante per pagina,
   e i numeri. I bersagli sono da 40px: sotto quella misura, su un telefono,
   si sbaglia numero. */
.cxc-paginazione {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-top: 1rem;
}
.cxc-paginazione .conteggio {
  margin: 0; color: var(--cxc-tenue); font-size: .86rem;
}
.cxc-paginazione .per-pagina {
  display: flex; align-items: center; gap: .5rem;
  font-size: .86rem; color: var(--cxc-tenue);
}
.cxc-paginazione .per-pagina select {
  border: 1px solid var(--cxc-bordo-campo);
  border-radius: var(--bs-border-radius);
  padding: .25rem 1.6rem .25rem .5rem;
  background: #fff;
  color: var(--cxc-inchiostro);
}
.cxc-paginazione .numeri {
  display: flex; flex-wrap: wrap; gap: .25rem;
  list-style: none; margin: 0 0 0 auto; padding: 0;
}
.cxc-paginazione .numeri a,
.cxc-paginazione .numeri .corrente,
.cxc-paginazione .numeri .salto {
  display: inline-grid; place-items: center;
  min-width: 40px; min-height: 40px; padding: 0 .5rem;
  border-radius: var(--bs-border-radius);
  text-decoration: none; font-size: .9rem;
}
.cxc-paginazione .numeri a {
  color: var(--cxc-azzurro-scuro);
  border: 1px solid var(--cxc-bordo);
  background: #fff;
}
.cxc-paginazione .numeri a:hover { background: var(--cxc-grigio-tenue); }
.cxc-paginazione .numeri .corrente {
  background: var(--cxc-inchiostro); color: #fff; font-weight: 700;
}
.cxc-paginazione .numeri .salto { color: var(--cxc-tenue); min-width: 1.5rem; }

@media (max-width: 575.98px) {
  .cxc-paginazione .numeri { margin-left: 0; }
}


/* ---------------------------------------------------------------------
   L'editor dei testi
   Deve sembrare una casella di testo normale, perché è quello che è per
   chi lo usa: la barra sopra è l'unica differenza, e sta lì solo quando
   serve davvero — grassetto, elenco, link.
   --------------------------------------------------------------------- */
.cxc-editor { margin-bottom: .25rem; }

.cxc-editor-barra {
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: .35rem .4rem;
  background: var(--cxc-grigio-tenue);
  border: 1px solid var(--cxc-bordo-campo);
  border-bottom: 0;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.cxc-editor-bottone {
  min-width: 36px; min-height: 36px;      /* un dito ci arriva senza mirare */
  padding: 0 .5rem;
  background: #fff; color: var(--cxc-inchiostro);
  border: 1px solid var(--cxc-bordo);
  border-radius: var(--bs-border-radius);
  font-size: .9rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
/* Il segno del pulsante lo disegna il CSS, non il testo: così il nome del
   pulsante è uno solo, quello dell'aria-label. Vedi il commento in
   public/assets/js/editor.js, dove si mette data-segno. */
.cxc-editor-bottone::before { content: attr(data-segno); }
.cxc-editor-bottone:hover { background: var(--cxc-grigio-attivo); }
.cxc-editor-bottone:focus-visible { outline: 3px solid var(--cxc-azzurro); outline-offset: 2px; }

.cxc-editor-foglio {
  min-height: 9rem; max-height: 28rem; overflow-y: auto;
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  background: #fff;
}
/* La descrizione dell'ente è il testo più lungo che si scrive nel pannello:
   dargli l'altezza di un foglio vero evita di scrivere dentro una feritoia. */
.cxc-editor-foglio--alto { min-height: 18rem; }
.cxc-editor-foglio:focus { outline: 3px solid var(--cxc-azzurro); outline-offset: -1px; }
.cxc-editor-foglio p { margin: 0 0 .75rem; }
.cxc-editor-foglio p:last-child { margin-bottom: 0; }
/* I rientri degli elenchi: è la cosa che nel testo incollato si perdeva. */
.cxc-editor-foglio ul,
.cxc-editor-foglio ol { margin: 0 0 .75rem; padding-left: 1.6rem; }
.cxc-editor-foglio li { margin-bottom: .2rem; }
.cxc-editor-foglio a { color: var(--cxc-azzurro); }

.cxc-editor-link {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem;
  margin-top: .4rem; padding: .6rem;
  background: var(--cxc-grigio-tenue); border: 1px solid var(--cxc-bordo);
  border-radius: var(--bs-border-radius);
}
.cxc-editor-link label { flex: 1 1 18rem; margin: 0; }

/* --- la fototeca della scheda ente ------------------------------------
   Una griglia di provini con la casella sopra: si sceglie guardando, non
   leggendo nomi di file. Le miniature sono quadrate e ritagliate al centro
   perché le fotografie arrivano in tutti i formati e una griglia a scalini
   si legge peggio di un ritaglio.
   -------------------------------------------------------------------- */
.cxc-fototeca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .75rem;
  max-height: 26rem; overflow-y: auto;
  padding: .25rem;
}
.cxc-fototeca-voce {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--cxc-bordo); border-radius: var(--bs-border-radius);
  background: #fff; overflow: hidden;
}
.cxc-fototeca-voce img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; background: var(--cxc-grigio-tenue);
}
.cxc-fototeca-voce span {
  display: block; padding: .4rem .5rem;
  font-size: .75rem; line-height: 1.3; color: var(--cxc-tenue);
  /* il nome del file su una riga sola: a capo renderebbe le celle diverse */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cxc-fototeca-voce input {
  position: absolute; top: .4rem; left: .4rem; z-index: 1;
  width: 1.3rem; height: 1.3rem;
  box-shadow: 0 0 0 2px #fff;
}
/* Spuntata si vede da lontano: il bordo colorato, non solo la casella. */
.cxc-fototeca-voce:has(input:checked) {
  border-color: var(--cxc-azzurro);
  box-shadow: 0 0 0 2px var(--cxc-azzurro);
}
.cxc-fototeca-voce:has(input:focus-visible) {
  outline: 3px solid var(--cxc-azzurro); outline-offset: 2px;
}

/* --- il testo alternativo, sotto a ogni immagine della libreria --------
   Campo e bottone su una riga sola: è una correzione al volo, non un
   modulo da compilare. Il bottone non si stringe mai, il campo prende
   quello che resta.
   -------------------------------------------------------------------- */
.cxc-media-alt {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-top: .5rem;
}
/* Il campo prende tutta la riga e il bottone scende sotto: in una cella
   stretta, affiancati, al campo restavano tre parole visibili. */
.cxc-media-alt input[type="text"] { flex: 1 1 100%; min-width: 0; font-size: .8rem; }
.cxc-media-alt button { flex: 0 0 auto; margin-left: auto; }

/* Il pulsante che manda via il file. Staccato dal resto da una riga e
   spinto a destra: è l'unica cosa irreversibile del riquadro, e non deve
   stare appiccicata al campo del testo alternativo, che si preme spesso. */
.cxc-media-elimina {
  display: flex; justify-content: flex-end;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--cxc-bordo);
}

/* Le caselle delle fasce d'età dentro la riga di un servizio: stanno su
   una riga sola e vanno a capo da sole quando lo schermo è stretto. */
.cxc-fasce { display: flex; flex-wrap: wrap; gap: .15rem 1rem; }
.cxc-fasce .form-check-inline { margin-right: 0; }

/* Il pulsante di salvataggio dentro il riquadro delle fotografie. Separato
   da una riga, se no sembra un terzo campo del modulo invece del comando
   che chiude il discorso. Vedi il commento nel modulo dell'ente. */
.cxc-salva-foto {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--cxc-bordo);
}
.cxc-salva-foto .form-text { margin-top: .5rem; }

/* Il riquadro dei filtri della libreria: stesso respiro delle schede. */
.cxc-filtri-media .card-body { padding-block: 1rem; }

/* A che cosa è attaccata un'immagine, sotto il provino. Piccolo e tenue:
   è un'informazione da leggere quando serve, non da guardare sempre. */
.cxc-media-usi {
  margin-top: .35rem;
  font-size: .72rem; line-height: 1.35; color: var(--cxc-tenue);
}