/*
 * design.css — il solo CSS custom del sito esterno.
 *
 * Regola guida (decisione 3): il meno possibile sopra Bootstrap 5. Qui sta
 * unicamente cio' che Bootstrap non copre, o che copre in modo incompatibile
 * con i nostri token. Tutto e' prefissato `.ld-` / `--ld-`.
 *
 * Perche' il prefisso e' obbligatorio: il CSS legacy definisce selettori
 * come `*.blue`, `*.orange`, `*.red` (evo-button.css) che colpiscono
 * QUALSIASI elemento con quella classe. Finche' quei fogli esistono, una
 * classe di colore nuda erediterebbe stili invisibili
 * (02-dipendenze-css-js.md § 5).
 *
 * Questo file NON viene mai caricato insieme a base.css: il layout nuovo e'
 * isolato per costruzione, non per scoping (decisione 6).
 */

/* ====================================================================
   1. FONDAMENTA
   ==================================================================== */

body {
  font-family: var(--ld-font-ui);
  color: var(--ld-testo);
  /* Fondo avorio, non bianco: le superfici (card, navbar, footer)
     restano bianche e si staccano dalla pagina (design-tokens.css). */
  background-color: var(--ld-sfondo-pagina);
  /* Cifre a larghezza fissa: senza, le colonne di prezzi e quantita'
     non si incolonnano. Requisito delle liste e del preventivo.       */
  font-variant-numeric: tabular-nums;
  /* Il footer resta in fondo anche sulle pagine corte, senza il
     position:absolute con altezza fissa del layout legacy.             */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ld-font-display);
  color: var(--ld-testo);
  /* Traccio piu' stretto: si nota solo dai 20px in su, dettaglio
     editoriale della direzione "Ibrido D3". */
  letter-spacing: var(--ld-tracciato-titolo);
  /* Evita che un titolo su due righe lasci una parola orfana. */
  text-wrap: balance;
}

h1 { font-size: var(--ld-dim-h1); font-weight: var(--ld-peso-semi);
     line-height: var(--ld-interlinea-titolo); }
h2 { font-size: var(--ld-dim-h2); font-weight: var(--ld-peso-semi);
     line-height: var(--ld-interlinea-titolo); }
h3 { font-size: var(--ld-dim-h3); font-weight: var(--ld-peso-semi);
     line-height: var(--ld-interlinea-titolo); }

/* Titolo di apertura, solo home e pagine istituzionali. */
.ld-display {
  font-family: var(--ld-font-display);
  font-size: var(--ld-dim-display);
  font-weight: var(--ld-peso-semi);
  line-height: var(--ld-interlinea-display);
  letter-spacing: var(--ld-tracciato-titolo);
  text-wrap: balance;
}

.ld-testo-muted   { color: var(--ld-testo-muted); }
.ld-piccolo       { font-size: var(--ld-dim-piccolo); }
.ld-caption       { font-size: var(--ld-dim-caption);
                    color: var(--ld-testo-muted); }
.ld-mono          { font-family: var(--ld-font-mono); }

/* Blocchi di testo lungo (privacy, chi siamo): riga leggibile, testo
   piu' morbido dell'inchiostro pieno dei titoli — e' il gesto
   editoriale della direzione scelta. */
.ld-prosa { max-width: var(--ld-misura-testo); }
.ld-prosa p { margin-bottom: var(--ld-space-4); color: var(--ld-testo-soft); }

/* Modificatore per i blocchi affiancati a un'immagine (es. chi siamo):
   qui il testo non ha una riga a misura fissa (la colonna la impone
   gia'), quindi la giustificazione non crea buchi come su una riga
   molto larga. */
.ld-testo-giustificato p { text-align: justify; }

/* ====================================================================
   2. ACCESSIBILITA'
   ==================================================================== */

/* Focus visibile e uniforme (WCAG 2.1 AA, 2.4.7). Si usa :focus-visible
   per non mostrare l'anello a chi clicca col mouse.                    */
:focus-visible {
  outline: var(--ld-focus-spessore) solid var(--ld-focus-colore);
  outline-offset: 2px;
  border-radius: var(--ld-radius-sm);
}

/* Salto al contenuto: primo elemento focusabile della pagina, visibile
   solo da tastiera. Serve a non far ripercorrere la navbar a ogni
   pagina a chi naviga con tastiera o screen reader.                    */
.ld-salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: var(--ld-space-3) var(--ld-space-4);
  background: var(--ld-primario);
  color: var(--ld-su-primario);
  border-radius: 0 0 var(--ld-radius-md) 0;
}
.ld-salta-al-contenuto:focus {
  left: 0;
}

/* Visibile solo agli screen reader. Bootstrap ha .visually-hidden: questa
   esiste per i punti in cui non vogliamo dipendere da Bootstrap.        */
.ld-solo-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================================================
   3. LAYOUT
   ==================================================================== */

.ld-contenitore {
  width: 100%;
  max-width: var(--ld-larghezza-contenuto);
  margin-inline: auto;
  padding-inline: var(--ld-space-4);
}

/* Le pagine di lista escono dai 1200px del resto del sito: una tabella
   da 13 colonne che si vede tutta vale piu' dell'allineamento con le
   guide verticali di navbar e footer. Il tetto serve a non stirare la
   tabella su monitor molto larghi. */
.ld-contenitore--largo {
  max-width: 1700px;
}

.ld-sezione {
  padding-block: var(--ld-space-8);
}

/* ====================================================================
   4. NAVBAR
   ==================================================================== */

.ld-navbar {
  background-color: var(--ld-superficie);
  border-bottom: 1px solid var(--ld-bordo-neutro);
  min-height: var(--ld-altezza-navbar);
}

.ld-navbar .navbar-brand img {
  height: var(--ld-logo-altezza);
  width: auto;
  /* Il logo del tenant arriva dal DB con proporzioni variabili:
     si vincola l'altezza e si lascia libera la larghezza.              */
  max-width: 100%;
  object-fit: contain;
}

.ld-navbar .nav-link {
  color: var(--ld-testo-soft);
  font-weight: var(--ld-peso-semi);
  padding: var(--ld-space-2) var(--ld-space-3);
  border-radius: var(--ld-radius-sm);
}
.ld-navbar .nav-link:hover,
.ld-navbar .nav-link:focus {
  color: var(--ld-testo);
  background-color: var(--ld-superficie-2);
}
.ld-navbar .nav-link.active {
  color: var(--ld-primario-testo);
  background-color: var(--ld-primario-chiaro);
  font-weight: var(--ld-peso-semi);
}

/* ====================================================================
   5. SELETTORE DI LINGUA
   ==================================================================== */

.ld-lingua-sigla {
  border: 0;
  background: none;
  padding: var(--ld-space-1) var(--ld-space-2);
  border-radius: var(--ld-radius-pill, 999px);
  font-size: var(--ld-dim-piccolo);
  font-weight: var(--ld-peso-semi);
  color: var(--ld-testo-muted);
  line-height: 1.2;
}
.ld-lingua-sigla:hover,
.ld-lingua-sigla:focus {
  color: var(--ld-testo);
  background-color: var(--ld-superficie-2);
}
.ld-lingua-sigla.attiva {
  color: var(--ld-primario-testo);
  background-color: var(--ld-primario-chiaro);
}

/* Sotto i 992px la navbar diventa l'offcanvas: lingua e blocco
   accedi/registrati, che nella riga orizzontale desktop stanno a
   fianco del resto, qui vanno staccati e centrati (non ha senso un
   gruppo di link allineato a sinistra in un pannello verticale). */
@media (max-width: 991.98px) {
  .ld-lingua {
    justify-content: center;
    margin-top: var(--ld-space-4);
  }

  .ld-menu-conto {
    position: relative;
    margin-top: var(--ld-space-4);
    padding-top: var(--ld-space-4);
  }

  /* Trattino corto e centrato, non un divisore a tutta larghezza:
     serve solo a staccare accedi/registrati dal resto del menu. */
  .ld-menu-conto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 48px;
    height: 1px;
    transform: translateX(-50%);
    background-color: var(--ld-bordo-neutro);
  }
}

/* ====================================================================
   6. FOOTER
   ====================================================================
   Ospita `Sito.footer`, HTML libero salvato nel database e reso con
   |safe (02-dipendenze-css-js.md). Non possiamo prevederne il markup:
   ci limitiamo a contenerlo e a normalizzarne tipografia e link.
   ==================================================================== */

.ld-footer {
  flex-shrink: 0;
  background-color: var(--ld-superficie);
  border-top: 1px solid var(--ld-bordo-neutro);
  padding-block: var(--ld-space-6);
  font-size: var(--ld-dim-piccolo);
  color: var(--ld-testo-muted);
}

.ld-footer-db :is(p, div, span, td) {
  font-size: var(--ld-dim-piccolo);
  color: var(--ld-testo-muted);
}
.ld-footer-db a {
  color: var(--ld-primario-testo);
}
/* L'HTML dal DB puo' contenere tabelle a larghezza fissa. */
.ld-footer-db table {
  max-width: 100%;
}
.ld-footer-db img {
  max-width: 100%;
  height: auto;
}

/* ====================================================================
   7. TABELLE DELLE LISTE
   ====================================================================
   Decisione 8: le 13 pagine con DataTable NON si adattano al mobile.
   Con table-layout: fixed (sotto) le colonne non entrano piu' in
   scroll orizzontale: .ld-tabella-scroll resta solo come hook di
   markup, senza overflow-x. Sotto la larghezza minima pensata per
   la tabella, il contenuto puo' tornare a uscire dal contenitore:
   verificare in collaudo su schermi stretti.
   ==================================================================== */

.ld-tabella-scroll > table {
  margin-bottom: 0;
}

/* table-layout: fixed perche' con quello di default (auto) un
   min-width/max-width non riesce a stringere una colonna sotto la
   larghezza del suo contenuto non spezzabile (un numero come
   "2.860000" e' un unico token senza spazi): il contenuto vince
   sempre sul CSS. Con "fixed" e' il CSS a decidere, e il contenuto
   che non entra va a capo (overflow-wrap sotto) invece di allargare
   la colonna. */
.ld-tabella {
  table-layout: fixed;
}

.ld-tabella th {
  background-color: var(--ld-superficie-3);
  font-weight: var(--ld-peso-semi);
  font-size: var(--ld-dim-piccolo);
  white-space: normal;
  min-width: 4.5rem;
  hyphens: none;
}

.ld-tabella td,
.ld-tabella th {
  padding: var(--ld-densita-riga) var(--ld-space-3);
  vertical-align: middle;
}

/* Larghezza per colonna (piano liste, B3): il floor di 4.5rem sopra
   basta per le colonne non elencate qui; queste invece hanno
   contenuto molto piu' corto (numeri, date, azioni) o piu' lungo
   (titolo, autore, ISBN) della media e vanno pilotate a mano. Le
   classi sono assegnate in tabella.js via columnDefs, non per
   posizione: l'indice di colonna cambia fra le varianti
   (rivenditore/agente ne aggiungono una). Con table-layout: fixed la
   larghezza va sulla <th> (prima riga): e' quella che decide la
   colonna, non serve ripeterla sulla <td>. */
.ld-tabella .ld-col-azioni {
  width: 120px;
  white-space: nowrap;
}

.ld-tabella .ld-col-stretta {
  width: 75px;
  min-width: 0;
  overflow-wrap: break-word;
}

.ld-tabella .ld-col-data {
  width: 100px;
  min-width: 0;
  overflow-wrap: break-word;
}

.ld-tabella .ld-col-larga {
  width: 160px;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Colonna delle azioni: icone in riga, non a capo. */
.ld-azioni {
  white-space: nowrap;
  display: flex;
  gap: var(--ld-space-2);
  align-items: center;
}
.ld-azioni a {
  color: var(--ld-primario-testo);
  text-decoration: none;
  line-height: 1;
}
.ld-azioni a:hover,
.ld-azioni a:focus {
  color: var(--ld-primario-scuro);
}

/* ====================================================================
   8. STATI: VUOTO, CARICAMENTO, ERRORE
   ====================================================================
   Ogni lista e ogni form devono avere tutti e tre gli stati progettati,
   non lasciati al default (07-piano-di-sviluppo.md § A8).
   ==================================================================== */

.ld-stato-vuoto {
  text-align: center;
  padding: var(--ld-space-10) var(--ld-space-4);
  color: var(--ld-testo-muted);
}
.ld-stato-vuoto .ld-stato-icona {
  font-size: 2.5rem;
  color: var(--ld-testo-disabilitato);
  margin-bottom: var(--ld-space-3);
  display: block;
}
.ld-stato-vuoto .ld-stato-titolo {
  font-weight: var(--ld-peso-semi);
  color: var(--ld-testo);
  margin-bottom: var(--ld-space-2);
}

.ld-spinner {
  display: inline-block;
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--ld-bordo-neutro);
  border-top-color: var(--ld-primario);
  border-radius: 50%;
  animation: ld-gira 0.7s linear infinite;
}
@keyframes ld-gira { to { transform: rotate(360deg); } }

/* Segnaposto di caricamento per liste e schede. */
.ld-skeleton {
  background: linear-gradient(90deg,
              var(--ld-grigio-100) 25%,
              var(--ld-grigio-50)  37%,
              var(--ld-grigio-100) 63%);
  background-size: 400% 100%;
  animation: ld-skeleton 1.4s ease infinite;
  border-radius: var(--ld-radius-sm);
  min-height: 1rem;
}
@keyframes ld-skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ====================================================================
   9. DETTAGLIO CHIAVE-VALORE
   ====================================================================
   Archetipo di dettaglio_ordine / dettaglio_preventivo / conferma_*.
   Due colonne su desktop, impilate sotto i 576px.
   ==================================================================== */

.ld-cv {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: var(--ld-space-2) var(--ld-space-4);
}
.ld-cv dt {
  color: var(--ld-testo-muted);
  font-weight: var(--ld-peso-normale);
  font-size: var(--ld-dim-piccolo);
}
.ld-cv dd {
  margin: 0;
  font-weight: var(--ld-peso-medio);
}
@media (max-width: 575.98px) {
  .ld-cv { grid-template-columns: 1fr; gap: 0; }
  .ld-cv dd { margin-bottom: var(--ld-space-3); }
}

/* ====================================================================
   10. RIEPILOGO PREZZO APPICCICATO (form preventivo, mobile-first)
   ====================================================================
   Il totale deve restare visibile mentre si compila il form da telefono.
   ==================================================================== */

.ld-riepilogo-sticky {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  background-color: var(--ld-superficie);
  border-top: 1px solid var(--ld-bordo-neutro);
  box-shadow: var(--ld-ombra-3);
  padding: var(--ld-space-3) var(--ld-space-4);
}

@media (min-width: 992px) {
  /* Su desktop non serve appiccicarlo in fondo: torna nel flusso, in
     colonna a fianco del form.                                        */
  .ld-riepilogo-sticky {
    position: sticky;
    top: var(--ld-space-4);
    bottom: auto;
    border: 1px solid var(--ld-bordo-neutro);
    border-radius: var(--ld-radius-lg);
    box-shadow: var(--ld-ombra-1);
  }
}

/* ====================================================================
   11. HOME — HERO
   ====================================================================
   Niente piu' immagine di sfondo: il centraggio (orizzontale e
   verticale) e' affidato alle utility flex di Bootstrap sul markup
   (d-flex align-items-center justify-content-center), qui resta solo
   l'altezza del blocco. Bottoni e tipografia usano le utility standard
   di Bootstrap (btn-lg, lead, d-grid/d-flex) sul modello dell'esempio
   "Heroes" di Bootstrap. Colori di testo e bottoni sono quelli standard
   del resto del sito.

   .ld-hero-home resta cosi' com'e': la usano anche chi_siamo.html e
   dove_siamo.html per centrare verticalmente la loro card. La home
   smette di usarla (vedi sezione 11bis), non e' la regola a cambiare.
   ==================================================================== */

.ld-hero-home {
  min-height: calc(100vh - var(--ld-altezza-navbar));
}

/* Il blocco titolo/lead/bottoni sta in una card cosi' si stacca dal
   fondo avorio della pagina, invece di restare a contatto diretto col
   fondo (altrimenti sparirebbe visivamente, senza alcun contrasto).
   max-width qui combatterebbe con la larghezza della colonna di
   griglia (sezione 11bis): il vincolo di larghezza sta sulla griglia,
   non piu' sulla card. Classe usata solo da index.html: modificarla
   non tocca chi_siamo.html / dove_siamo.html. */
.ld-hero-card {
  max-width: none;
  background-color: var(--ld-superficie);
  border-radius: var(--ld-radius-lg);
}

/* ====================================================================
   11bis. HOME — GRIGLIA A DUE COLONNE
   ====================================================================
   Sinistra: benvenuto e call to action (.ld-hero-card, invariata nei
   contenuti). Destra: comunicazioni. align-items:start, non stretch:
   le due card sono alte quanto il loro contenuto e allineate in alto.
   Forzarle alla stessa altezza lascerebbe mezza card vuota quando le
   notizie sono poche.
   ==================================================================== */

.ld-home-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ld-space-6);
  align-items: start;
}

@media (min-width: 992px) {
  .ld-home-griglia {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

/* Senza comunicazioni la home torna monocolonna centrata, come prima. */
.ld-home-griglia--sola {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

/* --- Elenco comunicazioni ------------------------------------------ */

.ld-comunicazioni {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ld-comunicazione {
  padding-block: var(--ld-space-3);
  border-bottom: 1px solid var(--ld-bordo-neutro);
}

.ld-comunicazione:last-child {
  border-bottom: 0;
}

.ld-comunicazione__titolo {
  font-family: var(--ld-font-display);
  margin-bottom: 2px;
}

.ld-comunicazione__testo {
  margin-bottom: 0;
}

.ld-comunicazione__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--ld-space-2);
}

/* ====================================================================
   12. AVVISI E NOTIFICHE
   ====================================================================
   Un solo linguaggio grafico per due comportamenti diversi:

     .alert       messaggio nel flusso della pagina — django.contrib.
                  messages, errori non di campo dei form. Resta dov'e' e
                  non sparisce da solo: e' contesto, non un evento.
     .ld-avviso   notifica flottante in alto a destra, creata da
                  sito/js/notifiche.js. E' un evento: compare, si legge,
                  se ne va.

   Sostituisce common/css/flonot.css sul perimetro esterno: blocco a
   fondo pieno saturo, testo bianco in grassetto con letter-spacing 1px,
   nessuna icona, "x" da 17px in un angolo. Quel foglio NON si tocca
   (10 template interni lo caricano) e la sua dismissione e' prevista
   nello Sprint 6 (09-piano-di-sviluppo.md § B2).

   Qui c'e' solo l'anatomia. La palette di stato e il cablaggio sulle
   variabili --bs-* stanno in bootstrap-ponte.css, accanto agli altri
   componenti Bootstrap.
   ==================================================================== */

/* --- Anatomia condivisa --------------------------------------------- */

.alert,
.ld-avviso {
  position: relative;
  /* Il filetto e' il segnale di stato piu' economico che esista e non
     dipende dal fondo — che sui toast e' quasi bianco. Bootstrap disegna
     gia' un bordo su tutti e quattro i lati (--bs-alert-border): questo
     ne ispessisce uno solo, quindi non c'e' doppio contorno. */
  border-inline-start: 4px solid var(--ld-stato, var(--ld-bordo-neutro));
  /* Incavo dell'icona: larghezza FISSA, cosi' avvisi di stato diverso
     hanno il testo incolonnato sulla stessa verticale anche quando sono
     impilati uno sull'altro. */
  padding-inline-start: calc(var(--ld-space-4) + 1.75rem);
  font-family: var(--ld-font-ui);
  font-weight: var(--ld-peso-normale);
  /* Il legacy scriveva le notifiche in grassetto con letter-spacing 1px.
     Spaziare le lettere di un testo corrente lo rende piu' lento da
     leggere, non piu' importante: il segnale lo porta il colore. */
  letter-spacing: normal;
}

/* Icona: pseudo-elemento e non markup, cosi' i template esistenti non
   cambiano e un alert con dentro piu' <p> non si scompone. E' fuori dal
   flusso apposta — con display:grid o flex ogni figlio dell'alert
   diventerebbe una cella, e i cicli {% for error %} dei form ne
   producono uno per errore. */
.alert::before,
.ld-avviso::before {
  content: var(--ld-stato-glifo, "\f430");   /* bi-info-circle-fill */
  position: absolute;
  inset-inline-start: var(--ld-space-4);
  /* Stesso valore del padding verticale di entrambi i componenti
     (--bs-alert-padding-y e --bs-toast-padding-y in bootstrap-ponte.css,
     tutti e due --ld-space-3). */
  top: var(--ld-space-3);
  font-family: bootstrap-icons;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: normal;
  /* Altezza di linea pari a quella del corpo, in valore assoluto: cosi'
     il centro del glifo cade sul centro della PRIMA riga di testo e non
     a meta' del blocco, che su un messaggio di tre righe sarebbe
     evidentemente storto. */
  line-height: calc(var(--ld-interlinea-corpo) * var(--ld-dim-corpo));
  color: var(--ld-stato, var(--ld-testo-muted));
  -webkit-font-smoothing: antialiased;
}

/* Il testo dell'avviso e' gia' del colore di stato: un link dello stesso
   colore non si distinguerebbe, e il colore da solo non basta comunque
   (WCAG 1.4.1). La sottolineatura e' il segnale. */
.alert a,
.ld-avviso a {
  color: inherit;
  font-weight: var(--ld-peso-semi);
  text-decoration: underline;
}

/* --- Notifiche flottanti -------------------------------------------- */

/* La colonna in cui si impilano. La crea notifiche.js alla prima
   notifica: nessuna pagina la porta nel markup. */
.ld-notifiche {
  position: fixed;
  /* La navbar non e' sticky, quindi questo margine serve solo a non
     coprirla quando si e' in cima alla pagina — che e' il momento in cui
     arrivano quasi tutte le notifiche. */
  top: calc(var(--ld-altezza-navbar) + var(--ld-space-3));
  inset-inline-end: var(--ld-space-4);
  /* Sopra il velo del modale destinazioni, che sta a 1050
     (pagine/destinazioni.css): gli errori di validazione delle
     destinazioni nascono a modale aperto. 1090 e' lo z-index che
     Bootstrap riserva ai toast. */
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ld-space-2);
  width: min(26rem, calc(100vw - 2 * var(--ld-space-4)));
  /* Il contenitore e' alto quanto la sua colonna: senza questo
     intercetterebbe i clic diretti alla pagina sotto. I singoli avvisi
     se li riprendono. */
  pointer-events: none;
}

.ld-notifiche > * {
  pointer-events: auto;
}

.ld-avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--ld-space-3);
  /* Bootstrap mette il padding su .toast-body, che qui non si usa: il
     toast e' una riga sola di testo, non ha intestazione. */
  padding-block: var(--ld-space-3);
  padding-inline-end: var(--ld-space-3);
  width: 100%;
}

.ld-avviso__testo {
  flex: 1 1 auto;
  min-width: 0;
  /* Alcune notifiche del flusso ordine sono il corpo della risposta del
     server: possono essere lunghe e senza spazi. */
  overflow-wrap: anywhere;
}

.ld-avviso .btn-close {
  flex: 0 0 auto;
  /* Allinea la "x" alla prima riga di testo invece che al bordo. */
  margin-block-start: 0.125rem;
}

/* Il bottone di chiusura di Bootstrap e' una SVG nera dentro un
   background-image: su un blocco verde o rosso tenue resta l'unica nota
   estranea. Riusare la stessa SVG come maschera lo fa diventare del
   colore di stato, senza duplicare il data URI ne' aggiungere un file.

   @supports perche' senza mascheratura il background-color qui sotto
   dipingerebbe un quadratino pieno: in quel caso si preferisce la "x"
   nera di serie, che e' brutta ma e' una "x". */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .alert .btn-close,
  .ld-avviso .btn-close {
    /* .btn-close impone color:#000, quindi currentColor sarebbe nero
       lo stesso: qui torna a ereditare il colore di stato dell'avviso. */
    color: inherit;
    background-color: currentColor;
    background-image: none;
    -webkit-mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
    mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
    --bs-btn-close-opacity: .55;
    --bs-btn-close-hover-opacity: 1;
  }
}

.alert .btn-close,
.ld-avviso .btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.2rem var(--ld-focus-anello);
}

/* .fade di Bootstrap anima la sola opacita'. Lo scorrimento verso il
   basso aggiunge l'informazione "e' appena arrivato", che su una
   notifica silenziosa e' l'unica che c'e'. La classe .showing la mette e
   la toglie bootstrap.Toast, in entrata e in uscita. */
.ld-avviso.fade {
  transition: opacity .2s linear, transform .2s ease-out;
}

.ld-avviso.showing {
  transform: translateY(-0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .ld-avviso.fade { transition: none; }
  .ld-avviso.showing { transform: none; }
}

/* ====================================================================
   13. STAMPA
   ==================================================================== */

@media print {
  .ld-navbar,
  .ld-footer,
  .ld-lingua,
  .ld-azioni,
  .ld-riepilogo-sticky,
  .ld-notifiche,
  .ld-salta-al-contenuto { display: none !important; }

  body { min-height: auto; }
  .ld-tabella-scroll { overflow: visible; }
}