/* ============================================================
   Acqua — la vista cliente, dal prototipo Acqua.dc.html
   ============================================================
   Quattro blocchi: testata navy con la cisterna, l'ultima fattura,
   la timeline dei periodi, le segnalazioni.

   Perche' un foglio e non gli attributi style del prototipo: uno
   style="grid-template-columns" sull'elemento batte qualunque media query e
   il responsive non entra mai in funzione. Nel PHP restano inline solo i
   valori che vengono dai dati — larghezze, posizioni, colori di stato.

   Dipende da riepilogo.css per le variabili --dm-*, ma ognuna ha il suo
   ripiego: il foglio regge anche da solo.
   ============================================================ */

.aqv { --aqv-ink: var(--dm-heading, #0f2244);
       --aqv-mut: var(--dm-text-muted, #66708a);
       --aqv-txt: var(--dm-text, #3c4760);
       --aqv-line: var(--dm-border, #e6e9f0);
       --aqv-hover: #f1f4fa; }

/* ---------- intestazione di sezione ---------- */
.aqv-sect { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.aqv-sect > i { width: 3px; height: 14px; border-radius: 2px; background: #c3ec2e; }
.aqv-sect > span { font-size: 11px; font-weight: 700; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--aqv-ink); }
.aqv-sect > b { flex: 1; height: 1px; background: var(--aqv-line); }

/* ============================================================
   1 · Testata navy con la cisterna
   ============================================================ */

.aqv-hero {
  position: relative; overflow: hidden; border-radius: 16px; background: #0b1a35;
  box-shadow: 0 1px 2px rgba(11,26,53,.2), 0 26px 60px -20px rgba(11,26,53,.55);
}
.aqv-hero-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 128% at 50% 14%, #113a63 0%, #0e2a4e 44%, #0b1a35 100%); }
.aqv-glow  { position: absolute; left: 8%; top: -26%; width: 34%; height: 96%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(56,189,248,.13) 0%, rgba(56,189,248,0) 100%);
  animation: aqvGlow 21s ease-in-out infinite; }
.aqv-glow2 { position: absolute; right: 4%; bottom: -22%; width: 38%; height: 92%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(125,211,252,.1) 0%, rgba(125,211,252,0) 100%);
  animation: aqvGlow 27s ease-in-out infinite reverse; }
.aqv-core  { position: absolute; left: 34%; top: -12%; width: 40%; height: 118%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(56,189,248,.3) 0%, rgba(47,159,224,.12) 52%, rgba(11,26,53,0) 100%); }

/* Le onde di fondo: tre strati che scorrono a velocita' diverse, e i periodi
   non sono multipli fra loro, cosi' non tornano mai in fase. */
.aqv-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 104px; width: 100%; pointer-events: none; }
.aqv-wsc  { animation: aqvDrift linear infinite; }
.aqv-wsc2 { animation: aqvDrift2 linear infinite; }
@keyframes aqvDrift  { from { transform: translateX(0) } to { transform: translateX(-600px) } }
@keyframes aqvDrift2 { from { transform: translateX(0) } to { transform: translateX(600px) } }
@keyframes aqvGlow   { 0%,100% { opacity: .75; transform: none }
                       50%     { opacity: 1;   transform: translateY(-8px) scale(1.04) } }

.aqv-pad { position: relative; padding: 24px 30px 26px; }
.aqv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 26px; flex-wrap: wrap; }
.aqv-id  { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.aqv-id-ico { flex-shrink: 0; margin-top: 2px; filter: drop-shadow(0 0 12px rgba(56,189,248,.5)); }
.aqv-id-lab { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: .05em;
              text-transform: uppercase; color: #ffffff; }
.aqv-id-sub { margin-top: 5px; font-size: 13px; font-weight: 600; color: #9fb4d4; }

/* Tutti i controlli sullo stesso schema: etichetta a fianco del comando, mai
   sopra. Mescolare i due allineamenti sulla stessa riga e' quello che la faceva
   sembrare buttata li'. Le azioni stanno in fondo, dopo un separatore, perche'
   non sono filtri. */
.aqv-ctrl { display: flex; align-items: center; justify-content: flex-end;
            gap: 10px 14px; flex-wrap: wrap; }
.aqv-ctrl-g { display: flex; align-items: center; gap: 9px; }
.aqv-ctrl-sep { width: 1px; align-self: stretch; min-height: 26px;
                background: rgba(255,255,255,.16); }
.aqv-ctrl-a { display: flex; align-items: center; gap: 9px; }

/* Il pulsante di .dmr-cta e' navy pieno con testo bianco: su una testata navy
   spariva nel fondo. Qui e' di vetro, col bordo a fare il lavoro che faceva il
   riempimento. Fuori dalla Hero la regola non esiste e riepilogo.css resta
   quello che e'. */
.aqv-ctrl-a .dmr-cta {
  background: rgba(255,255,255,.1); color: #ffffff; padding: 9px 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: 12.5px; border-radius: 9px;
}
.aqv-ctrl-a .dmr-cta:hover { background: rgba(255,255,255,.18); color: #ffffff; }
.aqv-ctrl-a .dmr-cta.is-locked { opacity: .5; }
.aqv-kic { font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
           text-transform: uppercase; color: #7d93b5; }
.aqv-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
            border-radius: 10px; background: rgba(255,255,255,.07);
            font-size: 13.5px; font-weight: 700; color: #ffffff; }
.aqv-sel { display: inline-flex; align-items: center; height: 36px; padding: 0 3px;
           border-radius: 10px; background: rgba(255,255,255,.07); max-width: 100%; }
.aqv-sel select {
  appearance: none; border: 0; background: transparent; font-family: inherit; cursor: pointer;
  outline: none; color: #ffffff; padding: 0 9px; font-size: 13px; font-weight: 700;
  max-width: 230px; text-overflow: ellipsis;
}
.aqv-sel select option { color: #0f2244; background: #ffffff; }
.aqv-sel select:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.aqv-sel svg { margin-right: 8px; pointer-events: none; flex-shrink: 0; }
.aqv-chip--q { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
               font-weight: 600; white-space: nowrap; }

/* Le due colonne esterne hanno lo stesso peso, e non 1.05 contro .82 come
   prima: con pesi diversi il centro della colonna di mezzo non e' il centro
   della sezione, e la cisterna finiva spostata a destra di circa il 5%. A
   occhio si legge come "storta", non come "asimmetrica". */
.aqv-main { display: grid; gap: 24px 30px; margin-top: 20px; align-items: center;
            grid-template-columns: minmax(0,1fr) minmax(250px,.58fr) minmax(0,1fr); }
.aqv-vis { position: relative; justify-self: center; width: 100%; max-width: 330px; min-width: 0; }
.aqv-narr h1 { margin: 0; font-size: clamp(26px,2.8vw,38px); line-height: 1.05;
               font-weight: 700; letter-spacing: -.032em; color: #ffffff; }
.aqv-narr p  { margin: 13px 0 0; max-width: 44ch; font-size: 13.5px; line-height: 1.6;
               font-weight: 500; color: #a8bcd8; text-wrap: pretty; }
.aqv-nota { display: flex; gap: 11px; margin-top: 20px; padding: 13px 15px; border-radius: 11px;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
            font-size: 12px; font-weight: 500; line-height: 1.55; color: #a8bcd8; text-wrap: pretty; }
.aqv-nota svg { flex-shrink: 0; margin-top: 1px; }

.aqv-rif { text-align: center; margin-bottom: 6px; }
.aqv-rif-v { margin-top: 4px; font-size: 15px; font-weight: 700; color: #ffffff;
             font-variant-numeric: tabular-nums; }

.aqv-tank { position: relative; width: 100%; aspect-ratio: 1024 / 1536; }
.aqv-tank-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aqv-tank-img { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: contain; pointer-events: none; }
/* Il livello: nessun fill-mode sull'ingresso. Il keyframe parte da cisterna
   vuota, e con `backwards` quel valore varrebbe gia' prima che l'animazione
   parta — in stampa e in export PDF si vedrebbe zero davanti a un consumo che
   c'e' stato. Senza fill-mode vale la regola qui sotto, che e' il livello
   giusto, e l'animazione resta identica quando parte. */
.aqv-body { transform: translateY(calc((1 - var(--lvl)) * 898px));
            transition: transform .95s cubic-bezier(.22,1,.3,1);
            animation: aqvRise 1.25s cubic-bezier(.22,1,.3,1) .35s; }
@keyframes aqvRise { from { transform: translateY(898px) } }

.aqv-wb  { animation: aqvWaveF 7.3s linear infinite; }
.aqv-wm  { animation: aqvWaveM 9.7s linear infinite; }
.aqv-wf  { animation: aqvWaveB 13.1s linear infinite; }
@keyframes aqvWaveF { from { transform: translateX(0) } to { transform: translateX(-110px) } }
@keyframes aqvWaveM { from { transform: translateX(0) } to { transform: translateX(-170px) } }
@keyframes aqvWaveB { from { transform: translateX(0) } to { transform: translateX(240px) } }
.aqv-cur  { animation: aqvCur 16.3s linear infinite; }
.aqv-cur2 { animation: aqvCur2 21.7s linear infinite; }
@keyframes aqvCur  { from { transform: translateX(0) } to { transform: translateX(-540px) } }
@keyframes aqvCur2 { from { transform: translateX(0) } to { transform: translateX(540px) } }
.aqv-ring { animation: aqvBob 5.9s ease-in-out infinite; }
@keyframes aqvBob { 0%,100% { transform: translateY(0) } 34% { transform: translateY(-6px) } 68% { transform: translateY(3px) } }

/* Le bolle nascono e muoiono alla stessa quota, cosi' il ciclo si richiude
   senza scatto, e si spengono prima della superficie: sedimento in
   sospensione, non un acquario. */
.aqv-motes circle { animation: aqvMote linear infinite; }
@keyframes aqvMote {
  0%   { opacity: 0;   transform: translateY(0) }
  16%  { opacity: .55 }
  74%  { opacity: .35 }
  100% { opacity: 0;   transform: translateY(-190px) }
}

.aqv-exp { position: absolute; left: 2%; right: 8%; pointer-events: none; }
.aqv-exp-line { position: absolute; left: 0; right: 0; top: -1px; height: 2px; opacity: .8;
  background: repeating-linear-gradient(90deg,#ffffff 0 7px,transparent 7px 13px); }
.aqv-exp-dot { position: absolute; right: -4px; top: -4px; width: 8px; height: 8px;
               border-radius: 50%; background: #ffffff; }
.aqv-tank-txt { position: absolute; left: 11%; right: 11%; text-align: center; pointer-events: none; }
.aqv-tank-pct { font-size: clamp(24px,2.6vw,34px); line-height: 1; font-weight: 700;
                letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.aqv-tank-mc { margin-top: 7px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aqv-tank-su { margin-top: 3px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aqv-expbox { margin-top: 8px; text-align: center; }
.aqv-expbox-v { margin-top: 4px; display: inline-flex; align-items: baseline; gap: 8px;
                flex-wrap: wrap; justify-content: center; }
.aqv-expbox-v > span:first-child { font-size: 14px; font-weight: 700; color: #ffffff;
                                   font-variant-numeric: tabular-nums; }
.aqv-pill { padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700;
            font-variant-numeric: tabular-nums; white-space: nowrap; }

.aqv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aqv-card { border: 1px solid rgba(255,255,255,.13); border-radius: 13px;
            background: #102a4e; padding: 15px 16px; min-width: 0; }
.aqv-card-t { font-size: 12.5px; font-weight: 700; color: #ffffff; }
.aqv-ring-row { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.aqv-ringbox { position: relative; display: inline-flex; align-items: center; justify-content: center;
               flex-shrink: 0; width: 64px; height: 64px; }
.aqv-ringbox svg { position: absolute; inset: 0; }
.aqv-ringbox svg circle { transition: stroke-dasharray .7s cubic-bezier(.22,1,.3,1); }
.aqv-ringbox > span { position: relative; font-size: 14px; font-weight: 700; color: #ffffff;
                      font-variant-numeric: tabular-nums; }
.aqv-card-lab { font-size: 13px; font-weight: 700; color: #ffffff; }
.aqv-card-note { margin-top: 4px; font-size: 11.5px; font-weight: 500; line-height: 1.5;
                 color: #9fb4d4; text-wrap: pretty; }

.aqv-qs { display: flex; flex-direction: column; gap: 2px; margin-top: 11px; }
.aqv-qrow { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px;
            border-radius: 9px; transition: background .2s ease; }
.aqv-qrow:hover { background: rgba(255,255,255,.06); }
.aqv-qico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
            width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.08); }
.aqv-qbody { flex: 1; min-width: 0; }
.aqv-qv { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.aqv-qv > span { font-size: 17px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em;
                 font-variant-numeric: tabular-nums; color: #ffffff; }
.aqv-qv > em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #9fb4d4; }
.aqv-qlab { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: #8fa6c6;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   2 · L'ultima fattura
   ============================================================ */

.aqv-doc {
  position: relative; overflow: hidden; border-radius: 12px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
  padding: 26px 28px 22px;
}
.aqv-doc-head { display: flex; align-items: flex-start; justify-content: space-between;
                gap: 16px; flex-wrap: wrap; }
.aqv-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
           color: var(--aqv-mut); }
.aqv-doc-sub { margin-top: 7px; font-size: 13.5px; font-weight: 500; color: var(--aqv-mut);
               font-variant-numeric: tabular-nums; }
.aqv-tags { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.aqv-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
           border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.aqv-tag > i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.aqv-tag--q { padding: 6px 11px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.aqv-avviso { margin-top: 14px; padding: 12px 14px; border-radius: 9px;
              font-size: 12.5px; font-weight: 500; line-height: 1.5; }

.aqv-doc-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
                gap: 34px; align-items: flex-start; margin-top: 18px; }
.aqv-big { display: flex; align-items: baseline; gap: 8px; }
.aqv-big > span { font-size: 52px; line-height: 1.04; font-weight: 700; letter-spacing: -.035em;
                  font-variant-numeric: tabular-nums; color: var(--aqv-ink); }
.aqv-big > b { font-size: 21px; font-weight: 600; color: var(--aqv-mut); }
.aqv-delta { display: flex; align-items: center; gap: 11px; margin-top: 14px; flex-wrap: wrap; }
.aqv-chipd { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px;
             font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aqv-delta > em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--aqv-mut); }

.aqv-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.aqv-stat { padding: 0 18px; }
.aqv-stat + .aqv-stat { border-left: 1px solid var(--aqv-line); }
.aqv-stat-l { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
              color: var(--aqv-mut); }
.aqv-stat-v { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.aqv-stat-v > span { font-size: 19px; font-weight: 700; letter-spacing: -.02em;
                     color: var(--aqv-ink); font-variant-numeric: tabular-nums; }
.aqv-stat-v > b { font-size: 11.5px; font-weight: 600; color: var(--aqv-mut); }
.aqv-stat-d { margin-top: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.aqv-segs { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--aqv-line); }
.aqv-segs-scroll { overflow-x: auto; margin-top: 14px; }
.aqv-segs-list { display: flex; flex-direction: column; gap: 2px; min-width: 640px; }
.aqv-seg { position: relative; display: grid;
           grid-template-columns: minmax(130px,1.3fr) 112px 60px 84px 96px 92px;
           gap: 12px; align-items: center; padding: 12px; border-radius: 8px; }
.aqv-seg:hover { background: var(--aqv-hover) !important; }
.aqv-seg > i.ind { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px; border-radius: 2px; }
.aqv-seg-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aqv-seg-l svg { flex-shrink: 0; }
.aqv-seg-l > span { font-size: 12.5px; font-weight: 700; color: var(--aqv-ink);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aqv-seg-p { font-size: 12px; font-weight: 500; color: var(--aqv-mut);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.aqv-seg-r { text-align: right; font-variant-numeric: tabular-nums; }
.aqv-seg-r.mut { font-size: 12px; font-weight: 500; color: var(--aqv-mut); }
.aqv-seg-r.ink { font-size: 13px; font-weight: 700; color: var(--aqv-ink); }
.aqv-seg-r.col { font-size: 13px; font-weight: 700; }

/* ============================================================
   3 · La timeline dei periodi
   ============================================================ */

.aqv-tl { border-radius: 12px; background: #ffffff;
          box-shadow: 0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
          padding: 24px 28px 20px; }
.aqv-tl-head { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.aqv-tl-story { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--aqv-mut);
                max-width: 700px; text-wrap: pretty; }
.aqv-tl-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aqv-leg { display: flex; align-items: center; gap: 13px; font-size: 12px; font-weight: 600;
           color: var(--aqv-mut); flex-wrap: wrap; }
.aqv-leg span { display: inline-flex; align-items: center; gap: 6px; }
.aqv-tog { padding: 7px 13px; border: 0; border-radius: 8px; background: var(--dm-surface-3,#f4f2ec);
           color: var(--aqv-ink); font-family: inherit; font-size: 12px; font-weight: 700;
           cursor: pointer; text-decoration: none; display: inline-block; }
.aqv-tog:hover { background: #e8e5db; color: var(--aqv-ink); }

.aqv-tl-mesi { display: grid; grid-template-columns: repeat(12,minmax(0,1fr));
               padding-left: 132px; margin-bottom: 8px; }
.aqv-tl-mesi > div { text-align: center; font-size: 10.5px; font-weight: 600;
                     color: var(--aqv-mut); border-left: 1px solid #f0f2f7; }
.aqv-lane-row { display: flex; align-items: stretch; margin-bottom: 9px; }
.aqv-lane-l { width: 132px; flex-shrink: 0; padding-right: 12px;
              display: flex; flex-direction: column; justify-content: center; }
.aqv-lane-n { font-size: 12px; font-weight: 700; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.aqv-lane-s { font-size: 11px; font-weight: 600; color: var(--aqv-mut); font-variant-numeric: tabular-nums; }
.aqv-lane { position: relative; flex: 1; min-width: 0; height: 74px;
            background: linear-gradient(180deg,#fcfdfe 0%,#f5f9fd 100%);
            border-radius: 6px; overflow: hidden; }
.aqv-lane > i.grid { position: absolute; top: 0; bottom: 0; width: 1px; background: #f0f2f7; }
.aqv-lane > i.base { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,rgba(125,184,232,.15),rgba(47,109,184,.5),rgba(125,184,232,.15)); }
.aqv-gap { position: absolute; top: 6px; bottom: 6px; border-radius: 4px; border: 1px solid #f0b8b8;
  background: repeating-linear-gradient(45deg,#fdecec,#fdecec 3px,#ffffff 3px,#ffffff 6px); }
.aqv-seg-bar { position: absolute; bottom: 0; min-height: 3px; border-radius: 3px 3px 0 0;
               border-top: 1.5px solid rgba(255,255,255,.75); border-right: 1px solid #ffffff;
               transform-origin: bottom; }
/* Il fumetto compare solo al passaggio e sta sopra la barra. width:max-content
   perche' con una larghezza in percentuale su una barra di due giorni il testo
   uscirebbe su una colonna di due caratteri. */
.aqv-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
           margin-bottom: 7px; padding: 9px 12px; border-radius: 9px; background: #0f2244;
           color: #ffffff; font-size: 11.5px; font-weight: 500; line-height: 1.55;
           width: max-content; max-width: 260px; font-variant-numeric: tabular-nums;
           opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 5; }
.aqv-seg-bar:hover .aqv-tip, .aqv-gap:hover .aqv-tip { opacity: 1; }
.aqv-tl-note { margin-top: 12px; padding-left: 132px; font-size: 11.5px; font-weight: 500;
               color: var(--aqv-mut); line-height: 1.5; }

/* Le gocce che scendono lungo la corsia: decorative, ma legate al fatto che la
   corsia abbia dati. Se la corsia e' vuota non ce ne sono. */
.aqv-drip { position: absolute; top: 0; border-radius: 999px;
            background: linear-gradient(180deg, rgba(56,189,248,0) 0%, rgba(56,189,248,.45) 100%);
            animation: aqvDrip linear infinite; }
@keyframes aqvDrip { 0% { transform: translateY(-20px); opacity: 0 }
                     18% { opacity: .8 } 100% { transform: translateY(80px); opacity: 0 } }

.aqv-tbl-scroll { overflow-x: auto; }
.aqv-tbl { display: grid; align-items: center; }
.aqv-tbl > span { font-variant-numeric: tabular-nums; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   4 · Da verificare
   ============================================================ */

.aqv-an { border-radius: 12px; background: #ffffff;
          box-shadow: 0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
          padding: 24px 26px 20px; }
.aqv-an-intro { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--aqv-mut);
                max-width: 730px; text-wrap: pretty; }
.aqv-an-list { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.aqv-an-row { position: relative; display: grid;
              grid-template-columns: 112px minmax(0,1.05fr) minmax(0,1.4fr) 116px;
              gap: 14px; align-items: center; padding: 13px 12px; border-radius: 8px; }
.aqv-an-row:hover { background: var(--aqv-hover) !important; }
.aqv-an-row > i.ind { position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px; border-radius: 2px; }
.aqv-an-tag { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px;
              justify-self: start; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.aqv-an-t { display: block; font-size: 13px; font-weight: 700; color: var(--aqv-ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aqv-an-d { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500;
            color: var(--aqv-mut); font-variant-numeric: tabular-nums;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aqv-an-m { font-size: 12.5px; font-weight: 500; color: var(--aqv-txt); line-height: 1.4; text-wrap: pretty; }
.aqv-an-v { font-size: 13px; font-weight: 700; text-align: right;
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.aqv-empty { padding: 16px; border-radius: 9px; background: #f0fdf4; color: #15803d;
             font-size: 13px; font-weight: 600; }

/* ============================================================
   Responsive — ogni soglia nasce da un contenuto che non ci sta piu',
   non da un numero tondo scelto a caso.
   ============================================================ */

@media (max-width: 1180px) {
  /* Sotto questa larghezza tre colonne non ci stanno senza schiacciare la
     cisterna. Si impila, e la cisterna resta centrata: e' il soggetto, non un
     elemento di colonna. */
  .aqv-main { grid-template-columns: minmax(0,1fr); }
  .aqv-vis { max-width: 320px; margin: 0 auto; }
  .aqv-side { flex-direction: row; flex-wrap: wrap; }
  .aqv-side > .aqv-card { flex: 1 1 260px; }
  .aqv-ctrl { width: 100%; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .aqv-vis { max-width: 290px; }
  .aqv-pad { padding: 22px 18px 24px; }
  .aqv-doc-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  /* Sotto questa larghezza la corsia diventa piu' stretta della sua etichetta:
     l'etichetta va sopra e la corsia prende tutta la riga. */
  .aqv-lane-row { flex-direction: column; }
  .aqv-lane-l { width: auto; padding: 0 0 6px; flex-direction: row; gap: 10px; align-items: baseline; }
  .aqv-tl-mesi, .aqv-tl-note { padding-left: 0; }
  .aqv-an-row { grid-template-columns: 96px minmax(0,1fr); }
  .aqv-an-m { grid-column: 1 / -1; }
  .aqv-an-v { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 640px) {
  .aqv-stats { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .aqv-stat { padding: 0; }
  .aqv-stat + .aqv-stat { border-left: 0; border-top: 1px solid var(--aqv-line); padding-top: 12px; }
  .aqv-doc, .aqv-tl, .aqv-an { padding-left: 18px; padding-right: 18px; }
}

@media print {
  .aqv-hero, .aqv-doc, .aqv-tl, .aqv-an { box-shadow: none; border: 1px solid var(--aqv-line); }
  .aqv-ctrl, .aqv-tog { display: none; }
  .aqv-glow, .aqv-glow2, .aqv-wave { display: none; }
  .aqv-tip { display: none; }
}

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