/* ============================================================
   Kesva — la vista telefono delle sezioni cliente (v5.159.0)
   ============================================================
   Prefisso .kmv-. Il disegno di partenza viene dal pacchetto di Claude Design;
   le tre collisioni di nome che quel pacchetto si portava dietro sono sciolte,
   e la ragione di ognuna sta in testa a includes/class-dm-kesva-mobile.php.

   LO SCAMBIO FRA LE DUE VERSIONI

   Desktop e telefono sono stampati entrambi nel markup, e questo foglio ne
   mostra uno solo. La soglia e' 820 px: sotto comanda il telefono, sopra il
   desktop. Non e' una larghezza di dispositivo, e' la larghezza sotto la quale
   il disegno desktop smette di avere lo spazio che gli serve — le tre colonne
   della testata collassano proprio li'.

   Perche' non un interruttore lato server: con una cache di pagina la
   rilevazione e' inaffidabile, il primo visitatore fissa la versione per tutti
   quelli dopo, e un cliente da telefono riceve la pagina fatta per il computer.
   Il doppio di HTML si paga volentieri per non avere quel guasto.

   L'elemento nascosto e' nascosto davvero — display:none, non un'opacita' o
   una posizione fuori schermo — cosi' non lo leggono nemmeno i lettori di
   schermo, che altrimenti sentirebbero due volte lo stesso blocco.

   v5.153.0 — SCORRIMENTO UNICO. Via i blocchi richiudibili e via i divisori di
   sezione: la pagina telefono scorre e basta. Il che sposta il problema dove
   andava affrontato — la pagina dev'essere corta davvero, non compressa
   chiudendola — e lascia alla testata scura il compito di dire dove comincia
   una sezione, perche' e' rimasta l'unica cosa che lo dice.
   ============================================================ */

.kmv { display: none; }

@media (max-width: 820px) {
  .kmv { display: block; }
  /* Stessa ragione dell'etichetta "Confronta con": sotto gli 820 px comanda il
     telefono, e li' niente scende sotto gli 11 px. */
  .dmv-atag { font-size: 11px; }
  /* Le etichette dei filtri del Riepilogo: stesso motivo, sono 9,5 px. */
  .kmv-eroe-ctrl .riv-kic { font-size: 11px; }
  /* Il gemello desktop dello stesso blocco si spegne. La classe la mette il
     PHP sul blocco desktop che ha una controparte telefono, o su quello che su
     telefono non si stampa affatto: cosi' un blocco senza gemello resta
     visibile su tutti gli schermi invece di sparire. */
  .kmv-desk { display: none !important; }
}

/* ============================================================
   Vocabolario comune
   ============================================================ */

.kmv-card { border: 1px solid var(--dm-border, #e6e9f0); border-radius: 14px;
            background: var(--dm-surface, #ffffff);
            box-shadow: 0 1px 2px rgba(15,34,68,.05); padding: 15px 14px; }
.kmv-blk { width: 100%; }

.kmv-note { margin: 9px 0 0; font-size: 12px; font-weight: 500; line-height: 1.5;
            color: var(--dm-text-muted, #66708a); text-wrap: pretty; }
.kmv-note-l { margin: 13px 0 0; }

/* La pillola dello scostamento. Tre stati, e il terzo non e' un abbellimento:
   senza un anno di confronto caricato non esiste ne' aumento ne' calo, e una
   pillola verde direbbe "siete migliorati" dove non c'e' niente con cui
   confrontarsi. */
.kmv-pill { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
            padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 700;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.kmv-su  { background: #fdecec; color: #c81e1e; }
.kmv-giu { background: #e9f7ee; color: #127a33; }
.kmv-nd  { background: #f1f3f7; color: #66708a; }

/* Le stesse tre, su fondo scuro. I colori chiari non sono gli stessi
   schiariti a caso: su #12264a il rosso #c81e1e sta sotto il 3:1 e si legge
   come marrone. */
.kmv-su-d  { background: rgba(220,38,38,.18);  color: #fca5a5; }
.kmv-giu-d { background: rgba(22,163,74,.22);  color: #86efac; }
.kmv-nd-d  { background: rgba(255,255,255,.1); color: #9fb4d4; }

/* ============================================================
   La testata telefono
   ============================================================
   Una sola per tutte le sezioni. L'ordine — nome, filtri, numero, scostamento,
   cause — e' l'ordine delle domande: dove sono, cosa sto guardando, quanto,
   rispetto a cosa, perche'.

   I filtri stanno in alto e non in fondo perche' cambiano tutto quello che c'e'
   sotto: metterli dopo vuol dire scorrere una pagina intera, cambiare periodo e
   risalire.

   Il fondo scuro non e' decorazione. Da quando la pagina telefono non ha piu'
   ne' blocchi ne' divisori, questo rettangolo e' l'unica cosa che dice "qui
   comincia una sezione". */

.kmv-eroe { position: relative; overflow: hidden; border-radius: 18px;
            background: #0f2244; color: #ffffff;
            box-shadow: 0 10px 28px rgba(15,34,68,.18); }

/* Il velo colorato prende la tinta della materia dalla variabile che il PHP
   stampa sul contenitore della sezione: cosi' Energia, Gas, Acqua e
   Fotovoltaico hanno la stessa testata con la propria luce, e non quattro
   testate.

   L'altezza e' fissa e si ferma sopra i numeri. A inset:0 la luce arrivava in
   fondo e passava sotto le barre delle cause: su un velo lime la legenda
   "fa scendere la spesa", che e' azzurra chiara, spariva. Una decorazione che
   cancella una parola non e' una decorazione. */
/* L'opacita' sul velo intero, e non nelle due tinte: --acc-soft arriva gia'
   miscelata dal PHP ed e' calibrata su una testata desktop larga 1.200 px.
   Concentrata su una colonna da 390 la stessa tinta diventa una macchia. */
.kmv-eroe-bg { position: absolute; left: 0; right: 0; top: 0; height: 240px;
               pointer-events: none; opacity: .55;
               background:
                 radial-gradient(135% 100% at 84% 0%, var(--acc-soft, rgba(163,230,53,.17)), transparent 66%),
                 radial-gradient(90% 100% at 6% 0%, rgba(255,255,255,.07), transparent 72%); }

.kmv-eroe-in { position: relative; padding: 16px 15px 18px; }

/* --- identita' ---
   L'icona si allinea alla PRIMA riga, non al centro del blocco: sotto il nome
   c'e' la riga della struttura, e con align-items:center il simbolo finiva a
   meta' strada fra le due, dove sembra appartenere alla seconda. */
.kmv-eroe-id { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.kmv-eroe-ico { flex: 0 0 auto; margin-top: -1px; }
.kmv-eroe-idt { min-width: 0; }
.kmv-eroe-nome { font-size: 17px; font-weight: 800; letter-spacing: .06em;
                 text-transform: uppercase; line-height: 1.1; }
.kmv-eroe-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
                margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #9fb4d4; }
.kmv-eroe-sep { opacity: .55; padding: 0 2px; }

/* --- filtri ---
   Una colonna di tre righe: la pillola del periodo, il passo avanti/indietro
   con il mese, l'anno di confronto. In riga non ci stanno senza schiacciare il
   mese a meta' parola — e "Luglio 20" e' successo davvero. */
.kmv-eroe-ctrl { display: flex; flex-wrap: wrap; align-items: center;
                 gap: 9px; margin-top: 14px; }
.kmv-eroe-ctrl .dmv-winpill { flex: 1 0 100%; }
.kmv-eroe-ctrl .dmv-winpill a { flex: 1; justify-content: center; }
.kmv-eroe-ctrl .dmv-step { flex: 1 0 100%; justify-content: space-between; }
.kmv-eroe-ctrl .dmv-step select,
.kmv-eroe-ctrl .dmv-step > b { flex: 1; text-align: center; }
/* "Periodo" sparisce: una pillola che dice Mese / Trimestre / Anno si spiega da
   sola. "Confronta con" resta, perche' un 2025 da solo non vuol dire niente —
   e sta sulla riga del suo menu, non sopra: da solo si prendeva un rigo per
   due parole. */
.kmv-eroe-ctrl .dmv-kic--periodo { display: none; }
/* La terza riga — "Confronta con" e il suo menu — e' UNA scatola piena come le
   due sopra, non un'etichetta appoggiata a sinistra con accanto un menu. E'
   proprio quello che si vedeva come un disallineamento: le due righe sopra
   partivano dal bordo e arrivavano al bordo, questa cominciava con del testo
   nudo. Il contenitore .dmv-cmp qui diventa la scatola; su computer e'
   display:contents e non esiste.

   11 px e non 10: fra 641 e 820 px il foglio desktop non arriva alla sua regola
   dei 640 e l'etichetta restava sotto la soglia che questa vista si e' data. */
.kmv-eroe-ctrl .dmv-cmp { display: flex; align-items: center; flex: 1 0 100%;
                          border-radius: 12px; background: rgba(255,255,255,.06); }
.kmv-eroe-ctrl .dmv-cmp .dmv-kic { flex: 0 0 auto; padding: 0 12px; font-size: 11px; }
.kmv-eroe-ctrl .dmv-cmp .dmv-sel { flex: 1 1 auto; background: none; }
.kmv-eroe-ctrl .dmv-cmp .dmv-sel select { flex: 1 1 auto; text-align: right; }
/* v5.166.0 — I due pulsanti del file, Energia e Gas: una riga piena come le
   tre sopra, meta' ciascuno. Il separatore verticale su una colonna sola non
   separa niente e se ne va. */
.kmv-eroe-ctrl .dmv-ctrl-sep { display: none; }
.kmv-eroe-ctrl .dmv-ctrl-a { flex: 1 0 100%; display: flex; gap: 9px; }
.kmv-eroe-ctrl .dmv-ctrl-a .dmr-cta { flex: 1 1 0; justify-content: center; min-height: 44px;
                                      padding-top: 0; padding-bottom: 0; }

/* Le righe etichetta + comando, per le sezioni che arrivano qui con i filtri a
   coppie invece che gia' impaginati (oggi solo Acqua). Etichetta a sinistra,
   comando a destra che prende lo spazio che resta: in colonna ogni filtro
   costerebbe due righe, e i filtri sono fino a quattro. */
.kmv-f { display: flex; align-items: center; gap: 10px; flex: 1 0 100%;
         min-height: 46px; }
.kmv-f-l { flex: 0 0 auto; min-width: 82px; font-size: 11px; font-weight: 700;
           letter-spacing: .1em; text-transform: uppercase; color: #9fb4d4; }
.kmv-f-c { flex: 1 1 auto; min-width: 0; }
.kmv-f-c > .aqv-sel, .kmv-f-c > .dmv-sel { width: 100%; }
/* La targhetta dell'anno non e' un comando e non deve sembrarlo: resta larga
   quanto il testo invece di allargarsi come un menu. */
.kmv-f-c > .aqv-chip { display: inline-flex; align-items: center; }

/* --- il numero, su una scheda bianca ---
   Sul blu una cifra bianca si legge ma non si stacca: e' una delle tante cose
   chiare su fondo scuro. Sollevata su una scheda bianca e' l'unica cosa chiara
   dentro un rettangolo scuro, e diventa la prima che l'occhio trova. */
.kmv-eroe-card { margin-top: 18px; padding: 15px 15px 16px; border-radius: 16px;
                 background: #ffffff; color: var(--dm-heading, #0f2244);
                 box-shadow: 0 6px 18px rgba(4,12,28,.24); }
.kmv-eroe-lab { font-size: 13px; font-weight: 700; letter-spacing: -.005em;
                color: var(--dm-text-muted, #66708a); }
.kmv-eroe-v { display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
              font-size: clamp(34px, 10.5vw, 44px); line-height: 1.05; font-weight: 800;
              letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.kmv-eroe-v > i { font-style: normal; font-size: .5em; font-weight: 700;
                  letter-spacing: 0; color: var(--dm-text-muted, #66708a); }
.kmv-eroe-d { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
              margin-top: 10px; font-size: 13px; font-weight: 600;
              color: var(--dm-text-muted, #66708a); font-variant-numeric: tabular-nums; }
.kmv-eroe-dt { line-height: 1.3; }
/* La pillola qui e' piu' grande delle altre: e' il confronto principale della
   schermata, non un'annotazione a margine. */
.kmv-eroe-d .kmv-pill { padding: 7px 11px; font-size: 13.5px; }

/* La riga di sintesi. Verde quando la spesa scende, rossa quando sale: non e'
   un complimento, e' un fatto che cambia di segno. */
.kmv-eroe-nota { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px;
                 padding: 11px 12px; border-radius: 11px; background: #eef9f1;
                 font-size: 13px; font-weight: 600; line-height: 1.4; color: #145c30;
                 text-wrap: pretty; }
.kmv-eroe-nota-i { flex: 0 0 auto; display: flex; align-items: center;
                   justify-content: center; width: 22px; height: 22px; margin-top: -1px;
                   border-radius: 50%; background: #cdeed8; color: #127a33; }
.kmv-eroe-nota-su { background: #fdefef; color: #8d1b1b; }
.kmv-eroe-nota-su .kmv-eroe-nota-i { background: #f8d6d6; color: #c81e1e; }

.kmv-eroe-vuoto { margin: 8px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5;
                  color: var(--dm-text-muted, #66708a); text-wrap: pretty; }
.kmv-eroe-p { margin: 12px 2px 0; font-size: 12px; font-weight: 500; line-height: 1.5;
              color: #9fb4d4; text-wrap: pretty; }

/* ============================================================
   Cosa e' cambiato: le due cause
   ============================================================
   Una riga per causa: pallino con la freccia, etichetta, valore col segno, e
   sotto da dove viene. Le barre con lo zero al centro non ci sono piu' — il
   perche' sta in testa a kmv_cause() nel PHP. */

.kmv-cambio-t { font-size: 15px; font-weight: 800; letter-spacing: -.012em;
                color: var(--dm-heading, #0f2244); margin-bottom: 2px; }
.kmv-cz { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0 3px; }
.kmv-cz + .kmv-cz { border-top: 1px solid var(--dm-border, #e6e9f0); }
.kmv-cz-i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; border-radius: 50%;
            background: #e9f7ee; color: #127a33; }
.kmv-cz-i-su { background: #fdecec; color: #c81e1e; }
.kmv-cz-b { flex: 1 1 auto; min-width: 0; }
.kmv-cz-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kmv-cz-t { font-size: 14px; font-weight: 700; color: var(--dm-heading, #0f2244);
            text-wrap: pretty; min-width: 0; }
.kmv-cz-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
            white-space: nowrap; flex-shrink: 0; }
.kmv-cz-s { margin-top: 3px; font-size: 12.5px; font-weight: 500; line-height: 1.4;
            color: var(--dm-text-muted, #66708a); text-wrap: pretty; }

/* Su schermo molto stretto l'etichetta e il suo valore non stanno sulla stessa
   riga senza spezzare una delle due parole. */
@media (max-width: 360px) {
  .kmv-cz-h { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ============================================================
   L'elenco che porta ai blocchi pesanti
   ============================================================ */

/* NIENTE display qui. Lo da' .kmv dentro la media query del telefono: un
   display scritto su questa classe, fuori dalla query, batte il display:none di
   .kmv (stessa specificita', regola successiva) e l'elenco si stampa anche su
   computer. E' la stessa trappola dell'attributo hidden, e mi ha gia' fregato
   una volta in questo stesso foglio. */
.kmv-idx { border: 1px solid var(--dm-border, #e6e9f0);
           border-radius: 16px; background: var(--dm-surface, #ffffff);
           box-shadow: 0 1px 2px rgba(15,34,68,.05); overflow: hidden; }
.kmv-idx-r { display: flex; align-items: center; gap: 12px; min-height: 64px;
             padding: 11px 14px; text-decoration: none;
             color: var(--dm-heading, #0f2244);
             -webkit-tap-highlight-color: transparent; }
.kmv-idx-r + .kmv-idx-r { border-top: 1px solid var(--dm-border, #e6e9f0); }
.kmv-idx-r:active { background: #f7f8fa; }
.kmv-idx-i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
             width: 38px; height: 38px; border-radius: 11px; background: #f3f5f9;
             color: #5a6480; }
.kmv-idx-b { flex: 1 1 auto; min-width: 0; }
.kmv-idx-l { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.kmv-idx-s { display: block; margin-top: 2px; font-size: 12px; font-weight: 500;
             line-height: 1.35; color: var(--dm-text-muted, #66708a);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmv-idx-n { flex: 0 0 auto; display: inline-flex; align-items: center;
             justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
             border-radius: 11px; background: #dc2626; color: #ffffff;
             font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kmv-idx-v { flex: 0 0 auto; color: #a8b2c6; }

/* Il blocco raggiunto non si incolla al bordo alto dello schermo: sopra c'e' la
   barra del tema, e senza questo margine il titolo del blocco ci finisce sotto. */
.kmv-anc { scroll-margin-top: 72px; }

/* Lo scorrimento morbido vale SOLO sotto la soglia del telefono. Scritto su
   html senza media query cambierebbe anche il comportamento delle ancore del
   desktop — per esempio "vedi la scomposizione" nella testata — che non e' una
   cosa chiesta e non va fatta di straforo.
   L'altra condizione e' per chi ha chiesto meno animazioni: a chi soffre di
   cinetosi una pagina che scorre da sola per tremila pixel fa stare male. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   Il Riepilogo su telefono
   ============================================================ */

/* --- una carta per materia --- */
/* Come sopra: il display lo da' .kmv. Qui pero' serve anche la direzione, che
   si mette dentro la query insieme al resto. */
@media (max-width: 820px) {
  .kmv-mat { display: flex; flex-direction: column; gap: 10px; }
}
.kmv-mat-r { display: block; padding: 13px 14px 14px; text-decoration: none;
             border: 1px solid var(--dm-border, #e6e9f0); border-radius: 14px;
             background: var(--dm-surface, #ffffff);
             box-shadow: 0 1px 2px rgba(15,34,68,.05);
             color: var(--dm-heading, #0f2244);
             -webkit-tap-highlight-color: transparent; }
a.kmv-mat-r:active { background: #f7f8fa; }
.kmv-mat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kmv-mat-n { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
             font-size: 15px; font-weight: 800; letter-spacing: -.012em; }
.kmv-mat-i { flex: 0 0 auto; }
.kmv-mat-v { font-size: 17px; font-weight: 800; white-space: nowrap;
             font-variant-numeric: tabular-nums; }
.kmv-mat-v > i { font-style: normal; font-size: .72em; font-weight: 700;
                 color: var(--dm-text-muted, #66708a); }
.kmv-mat-vo { font-size: 13px; font-weight: 700; color: var(--dm-text-muted, #66708a); }
.kmv-mat-b { height: 7px; margin-top: 11px; border-radius: 4px; background: #eef1f6;
             overflow: hidden; }
.kmv-mat-b > i { display: block; height: 100%; border-radius: 4px; }
.kmv-mat-f { display: flex; align-items: center; justify-content: space-between;
             gap: 10px; margin-top: 9px; font-size: 12px; font-weight: 600;
             color: var(--dm-text-muted, #66708a); }
/* Spenta: si vede che c'e' e che non ha ancora niente dentro. Toglierla
   direbbe "questa materia non esiste per lei", che e' un'altra cosa. */
.kmv-mat-off { background: #fafbfc; box-shadow: none; }
.kmv-mat-off .kmv-mat-n { color: var(--dm-text-muted, #66708a); font-weight: 700; }
.kmv-mat-off .kmv-mat-i { opacity: .45; }

/* --- dove si spende di piu' --- */
.kmv-cls-t, .kmv-seg-t { font-size: 11px; font-weight: 700; letter-spacing: .12em;
                         text-transform: uppercase; color: var(--dm-text-muted, #66708a);
                         margin-bottom: 10px; }
.kmv-cls-r { display: flex; align-items: center; gap: 11px; min-height: 52px;
             padding: 7px 0; text-decoration: none; color: var(--dm-heading, #0f2244);
             -webkit-tap-highlight-color: transparent; }
.kmv-cls-r + .kmv-cls-r { border-top: 1px solid var(--dm-border, #e6e9f0); }
.kmv-cls-p { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
             width: 24px; height: 24px; border-radius: 7px; background: #f3f5f9;
             font-size: 12px; font-weight: 800; color: #5a6480; }
.kmv-cls-n { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700;
             line-height: 1.25; }
.kmv-cls-n > em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px;
                  font-weight: 600; color: var(--dm-text-muted, #66708a); }
.kmv-cls-v { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
             gap: 4px; font-size: 14px; font-weight: 800; white-space: nowrap;
             font-variant-numeric: tabular-nums; }

/* --- da tenere d'occhio --- */
.kmv-seg-r { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
             font-size: 12.5px; font-weight: 500; line-height: 1.45;
             color: var(--dm-text, #33415c); text-wrap: pretty; }
.kmv-seg-r + .kmv-seg-r { border-top: 1px solid var(--dm-border, #e6e9f0); }
.kmv-seg-r > i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px;
                 border-radius: 50%; }
.kmv-seg-r b { font-weight: 800; color: var(--dm-heading, #0f2244); }

/* ============================================================
   La barra in basso
   ============================================================
   Fissata allo schermo, non in fondo alla pagina: una pagina da tremila pixel
   con la navigazione in fondo e' una navigazione che non c'e'.

   L'imbottitura in basso somma env(safe-area-inset-bottom): sui telefoni senza
   tasto fisico l'ultima striscia di schermo e' occupata dalla barra di sistema,
   e senza quella somma i comandi ci finiscono sotto. */

@media (max-width: 820px) {

  /* ============================================================
     v5.158.0 — LA BARRA, RIFATTA SUL DISEGNO NUOVO
     ============================================================
     Non e' piu' una striscia attaccata al bordo: e' una pillola che galleggia,
     con un margine intorno. La differenza non e' estetica soltanto — staccata
     dal bordo si legge come un oggetto sopra la pagina invece che come la fine
     della pagina, ed e' quello che e'.

     Il cerchio dell'AI non e' appoggiato sopra la barra: la barra gli si apre
     intorno. La tacca e' una maschera radiale sul bordo alto, cosi' il buco e'
     vero e non un anello dipinto del colore del fondo — che sarebbe del colore
     sbagliato appena sotto ci passa qualcosa. */

  /* v5.159.0 — Attaccata ai lati e al fondo, non piu' una pillola che
     galleggia. Galleggiando si leggeva come un oggetto staccato dalla pagina —
     "sembra diviso, non coeso" — e attraverso i margini si vedeva scorrere il
     contenuto sotto, che toglieva alla barra l'aria di essere parte del guscio.
     Attaccata, con i due angoli alti arrotondati, e' il pavimento della
     schermata: fissa, piena, sempre la stessa. */
  .kmv-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: stretch; justify-content: space-around;
    padding: 10px 4px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* Il fondo su uno strato dietro, PIENO: niente piu' maschera.
     La tacca la fa il bordo del cerchio, che e' dello stesso blu della barra —
     dove i due si toccano il colore e' lo stesso e si fondono, quindi la barra
     sembra gonfiarsi intorno al cerchio; sopra la barra lo stesso bordo diventa
     l'anello blu che lo avvolge contro la pagina.

     La maschera faceva il buco davvero, ed e' la ragione per cui il cerchio si
     vedeva "spezzato": il centro del buco stava sul bordo alto della barra
     mentre il centro del cerchio sta quindici pixel piu' in basso, e fra i due
     restava una falce trasparente da cui passava la pagina. Allinearli si
     poteva, ma il bordo colorato fa la stessa cosa senza un buco da tenere
     sincronizzato con tre misure. */
  .kmv-bar::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    border-radius: 26px 26px 0 0;
    background: #12264a;
    box-shadow: 0 -6px 26px rgba(4,12,28,.30), 0 1px 0 rgba(255,255,255,.06) inset;
  }

  .kmv-bar-v {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 5px; padding: 0; border: 0; background: none;
    font-family: inherit; color: #8ba2c4; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
  }
  /* La piastrella dietro l'icona. C'e' sempre, trasparente: se comparisse solo
     sull'attiva, l'icona si sposterebbe di qualche pixel a ogni cambio di
     sezione, ed e' il genere di scatto che si nota senza capire cosa sia. */
  .kmv-bar-i { display: flex; align-items: center; justify-content: center;
               width: 46px; height: 36px; border-radius: 13px;
               background: transparent;
               transition: transform .14s cubic-bezier(.16,1,.3,1); }
  /* v5.162.0 — 10 px e non 11: con Kesva AI dentro la fila i posti sono cinque,
     e a 360 px "Panoramica" a 11 px chiede 73 px mentre la casella ne offre 66.
     Le alternative erano troncare il nome di una sezione o togliere una
     destinazione dalla barra. Dieci e' la misura delle barre di sistema, e qui
     l'etichetta non e' mai l'unico indizio. */
  .kmv-bar-l { font-size: 10px; font-weight: 700; letter-spacing: -.005em;
               line-height: 1.1; max-width: 100%; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap;
               transition: color .22s ease; }

  /* v5.162.0 — La piastrella dell'attiva: una sola, e SCORRE.
     Prima l'attiva portava tre segnali insieme — piastrella, colore e trattino
     sotto — e cambiando sezione si accendevano e spegnevano tutti e tre in
     posti diversi: un lampeggio, non un movimento. Ora c'e' una cosa sola che
     si sposta, e il tragitto dice da dove viene la selezione.
     Il posto lo misura il JS: le voci cambiano di numero da cliente a cliente. */
  .kmv-bar-ind {
    position: absolute; left: 0; top: 0; z-index: 0;
    width: 46px; height: 36px; border-radius: 13px;
    background: rgba(163,222,30,.17);
    box-shadow: inset 0 0 0 1px rgba(163,222,30,.28);
    transform: translate3d(0, 0, 0); opacity: 0;
    transition: transform .22s cubic-bezier(.34,1.28,.5,1), opacity .22s ease;
    pointer-events: none;
  }
  .kmv-bar-ind[data-kmv-pronto] { opacity: 1; }
  /* Al primo disegno non scorre: una pagina che si apre non sta cambiando
     selezione, e animare quel momento racconterebbe un passaggio mai avvenuto. */
  .kmv-bar-ind[data-kmv-muto] { transition: none; }

  .kmv-bar-on { color: #c3ec2e; }
  .kmv-bar-on .kmv-bar-l { font-weight: 800; color: #c3ec2e; }
  .kmv-bar-v:active .kmv-bar-i { transform: scale(.86); }

  /* --- Kesva AI, dentro la fila --- */
  /* L'unica casella piena della barra. E' il pieno a dire che e' l'azione
     principale: non la sporgenza, che la faceva sembrare un oggetto appoggiato
     sopra la navigazione, e nemmeno la larghezza, che le avrebbe rubato spazio
     alle destinazioni. */
  .kmv-bar-a { color: #0f2244; }
  .kmv-bar-a .kmv-bar-l { color: #ffffff; font-weight: 800; }
  .kmv-bar-a-i {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 36px; border-radius: 13px;
    background: linear-gradient(155deg, #9fe870 0%, #c3ec2e 55%, #a7d117 100%);
    color: #0f2244;
    box-shadow: 0 4px 12px rgba(140,220,40,.28);
    transition: transform .14s cubic-bezier(.16,1,.3,1);
  }
  /* Una luce che attraversa il pieno ogni sette secondi. E' l'unico ciclo
     continuo rimasto nella barra, sta su un pulsante e non sotto dei numeri, e
     dice una cosa sola: questo risponde. L'alone che respirava intorno al
     cerchio non ha piu' senso su una casella squadrata. */
  .kmv-bar-a-i::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    animation: kmv-luce 7s ease-in-out infinite;
  }
  @keyframes kmv-luce {
    0%, 62% { transform: translateX(0); }
    82%, 100% { transform: translateX(400%); }
  }
  .kmv-bar-a:active .kmv-bar-a-i { transform: scale(.94); }

  /* La pallina galleggiante dell'assistente si spegne: il suo comando ora sta
     nella barra, e due pulsanti per la stessa cosa sullo stesso schermo sono
     uno di troppo — quello che galleggia, per giunta, copriva il contenuto. */
  .asi-fab { display: none !important; }

  /* ============================================================
     Via l'hamburger e la colonna laterale
     ============================================================
     Due navigazioni sullo stesso schermo sono una di troppo, e quella in alto
     e' anche la meno raggiungibile col pollice. La colonna che apriva non
     contiene piu' niente che non sia nella barra o nel suo pannello — le
     comunicazioni, che erano l'unica cosa rimasta li' dentro, ora si stampano
     in cima al contenuto, dove si vedono senza cercarle.

     Il resto della barra in alto RESTA: marchio, nome della sezione e
     avatar non sono navigazione, sono il "dove sono" — e su una pagina che
     scorre per quattromila pixel serve. */
  .dm-er.v2 .dm-burger { display: none !important; }
  .dm-er.v2 .sidebar { display: none !important; }
  .dm-er.v2 .dm-topbar-brand { padding-left: 2px; }
  /* L'immagine del cliente in alto non dice niente a chi e' gia' dentro il
     proprio portale: sa chi e'. Occupava trentaquattro pixel della riga che
     porta il nome della sezione, che invece serve. */
  .dm-er.v2 .dm-topbar-user, .dm-er.v2 .dm-topbar-sp { display: none !important; }

  .kmv-notebox { margin-bottom: 14px; }

  /* Il contenuto non finisce sotto la barra: altezza della pillola, piu' i
     10 px di stacco dal bordo, piu' la sporgenza del cerchio. */
  /* v5.162.0 — Da 114 a 86. I 114 tenevano conto della sporgenza del cerchio
     dell'assistente, che ora sta dentro la fila: senza quella sporgenza
     restavano quaranta pixel di vuoto in fondo a ogni pagina.
     86 = 74 di barra, misurati a 390 px, piu' dodici d'aria perche' l'ultima
     riga di contenuto non finisca appiccicata al bordo alto della barra. */
  .dm-er { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

  /* --- il pannello "Altro" ---
     v5.159.0 — Scuro come la barra da cui esce. Bianco era un secondo menu:
     apri una barra blu e ti si apre sopra un foglio bianco con le piastrelle
     chiare, e sembrano due cose di due prodotti diversi. Stesso blu, stesse
     icone smorzate, stesso lime sulla voce in cui ti trovi: il foglio e' la
     barra che si allunga, non un'altra schermata.

     La regola [hidden] e' obbligatoria e non una precauzione: display:flex su
     una classe batte il display:none che il browser da' all'attributo hidden,
     e il pannello si stamperebbe aperto sopra la pagina. */
  .kmv-altro { position: fixed; inset: 0; z-index: 70; display: flex;
               flex-direction: column; justify-content: flex-end; }
  .kmv-altro[hidden] { display: none !important; }
  .kmv-altro-v { position: absolute; inset: 0; background: rgba(4,12,28,.55);
                 -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

  /* Mentre il dito trascina, la posizione la detta il dito: la transizione si
     accende solo quando lo si stacca, per l'ultimo tratto — verso il basso se
     ha vinto il gesto, verso l'alto se e' rimbalzato. Con la transizione sempre
     accesa il pannello insegue il dito con un ritardo e il gesto sembra rotto. */
  .kmv-altro-p[data-kmv-torna] { transition: transform .26s cubic-bezier(.2,.9,.3,1); }
  .kmv-altro-p { position: relative; max-height: 82vh; overflow-y: auto;
                 padding: 4px 14px calc(18px + env(safe-area-inset-bottom, 0px));
                 border-radius: 26px 26px 0 0; background: #12264a; color: #ffffff;
                 box-shadow: 0 -10px 40px rgba(4,12,28,.5);
                 animation: kmv-su .24s cubic-bezier(.2,.9,.3,1); }
  @keyframes kmv-su { from { transform: translateY(18px); opacity: .4; } }
  .kmv-altro-p:focus, .kmv-altro-p:focus-visible { outline: none; }

  /* La maniglia: un'area da toccare larga e alta abbastanza, con dentro il
     trattino. Il trattino da solo sarebbe un bersaglio da 44x5 px, che non si
     centra col pollice. */
  .kmv-altro-m { display: block; width: 100%; padding: 10px 0 12px; border: 0;
                 background: none; cursor: grab; touch-action: none;
                 -webkit-tap-highlight-color: transparent; }
  .kmv-altro-m > i { display: block; width: 44px; height: 5px; margin: 0 auto;
                     border-radius: 3px; background: rgba(255,255,255,.28);
                     transition: background .18s ease, width .18s ease; }
  .kmv-altro-m:active { cursor: grabbing; }
  .kmv-altro-m:active > i { background: rgba(255,255,255,.5); width: 54px; }

  .kmv-altro-t { font-size: 11px; font-weight: 700; letter-spacing: .12em;
                 text-transform: uppercase; color: #8ba2c4;
                 padding: 0 2px 6px; }
  .kmv-altro-l { display: flex; flex-direction: column; }
  .kmv-altro-l2 { margin-top: 10px; padding-top: 10px;
                  border-top: 1px solid rgba(255,255,255,.1); }
  .kmv-altro-r { display: flex; align-items: center; gap: 13px; min-height: 54px;
                 padding: 0 4px; border-radius: 14px;
                 font-size: 15px; font-weight: 600; color: #dbe5f2;
                 text-decoration: none;
                 -webkit-tap-highlight-color: transparent;
                 transition: background .16s ease, color .16s ease; }
  .kmv-altro-i { flex: 0 0 auto; display: flex; align-items: center;
                 justify-content: center; width: 38px; height: 38px;
                 border-radius: 12px; background: rgba(255,255,255,.07);
                 color: #8ba2c4;
                 transition: background .16s ease, color .16s ease; }
  /* La voce in cui ci si trova: stesso lime della barra, cosi' il foglio dice
     dove sei con lo stesso segno con cui lo dice la barra sotto. */
  .kmv-altro-on { color: #c3ec2e; font-weight: 800; }
  .kmv-altro-on .kmv-altro-i { background: rgba(163,222,30,.16); color: #c3ec2e; }
  .kmv-altro-r:active { background: rgba(255,255,255,.07); }
}

/* Sopra gli 820 px la barra non esiste: la spegne gia' .kmv, come ogni altro
   blocco della vista telefono. C'e' la colonna laterale, che li' ha lo spazio
   per stare sempre aperta. */

/* ============================================================
   Chi ha chiesto meno movimento
   ============================================================
   L'alone che respira, il trattino che si allarga, il foglio che scorre: tutte
   cose che aggiungono e nessuna che serve. A chi soffre di cinetosi un anello
   che pulsa in fondo allo schermo, sempre, e' un fastidio continuo — e lo
   schermo non si puo' guardare altrove. Restano gli stati (acceso, premuto),
   che sono informazione e non movimento. */
@media (prefers-reduced-motion: reduce) {
  .kmv *, .kmv *::before, .kmv *::after,
  .kmv-bar *, .kmv-bar *::before, .kmv-bar *::after {
    animation: none !important;
    transition: none !important;
  }
  .kmv-altro-p { animation: none !important; }
}