/* ============================================================
   Commodity Hero: Energia, Gas, Acqua.
   Una struttura, tre identita'. L'accento arriva da --acc / --soft, scritte
   sull'elemento radice dal PHP: qui dentro non c'e' un colore di commodity.

   Regola d'oro di questo foglio: nessuna larghezza di griglia e nessun
   flex-direction va scritto inline sull'elemento. A parita' di specificita'
   uno stile inline batte ogni media query, e l'adattamento non parte.
   ============================================================ */

.dmch {
  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);
}

/* ---------- fondo ---------- */

.dmch-bg, .dmch-bg-core, .dmch-glow, .dmch-glow2 { position: absolute; pointer-events: none; }
.dmch-bg { inset: 0; background: radial-gradient(118% 128% at 50% 14%, #133a66 0%, #0e2a4e 44%, #0b1a35 100%); }
.dmch-bg-core {
  left: 30%; top: -14%; width: 44%; height: 122%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 22%, transparent) 0%, rgba(11, 26, 53, 0) 100%);
}
.dmch-glow {
  left: 6%; top: -24%; width: 34%; height: 94%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--soft) 14%, transparent) 0%, rgba(11, 26, 53, 0) 100%);
  animation: dmchGlow 17s ease-in-out infinite;
}
.dmch-glow2 {
  right: 4%; bottom: -20%; width: 38%; height: 90%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 11%, transparent) 0%, rgba(11, 26, 53, 0) 100%);
  animation: dmchGlow2 23s ease-in-out infinite;
}
@keyframes dmchGlow  { 0%,100% { opacity: .55; transform: scale(1) }      50% { opacity: 1;   transform: translate3d(2%,-4%,0) scale(1.1) } }
@keyframes dmchGlow2 { 0%,100% { opacity: .5;  transform: scale(1.06) }   50% { opacity: .95; transform: translate3d(-3%,3%,0) scale(1) } }

.dmch-pad { position: relative; padding: 24px 30px 26px; }

/* ---------- riga superiore ---------- */

.dmch-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px 26px; flex-wrap: wrap;
}
.dmch-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.dmch-id-ico { flex-shrink: 0; margin-top: 2px; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--acc) 45%, transparent)); }
.dmch-id-lab {
  font-size: 24px; line-height: 1.1; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #ffffff;
}
.dmch-id-sub { margin-top: 5px; font-size: 13px; font-weight: 600; color: #9fb4d4; }
.dmch-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* I controlli: ogni etichetta sta insieme al proprio comando, altrimenti al
   ritorno a capo si separano. */
.dmch-ctrl-g { display: flex; align-items: center; gap: 10px; }
.dmch-kic, .dmch-ctrl-g > span {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #7d93b5;
}
.dmch-kic--acc { color: var(--acc); }
.dmch-pillbox {
  display: inline-flex; align-items: center; height: 36px;
  padding: 0 3px; border-radius: 10px; background: rgba(255, 255, 255, .07);
}
.dmch-pillbox--flat { padding: 0 14px; font-size: 13.5px; font-weight: 700; color: #ffffff; }
.dmch-pillbox 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;
}
.dmch-pillbox select:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 7px; }
.dmch-pillbox svg { margin-right: 8px; pointer-events: none; }
.dmch-seg { position: relative; display: flex; height: 36px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.dmch-seg i {
  position: absolute; top: 3px; bottom: 3px; border-radius: 8px;
  background: #ffffff; transition: left .3s cubic-bezier(.16, 1, .3, 1);
}
.dmch-seg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  padding: 0 15px; border: 0; background: transparent; font-family: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer; color: #c3d3e8;
  transition: color .2s ease;
}
.dmch-seg button[aria-pressed="true"] { color: #0f2244; }
.dmch-step { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.dmch-step button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent;
  color: #ffffff; cursor: pointer; transition: background .18s ease;
}
.dmch-step button:hover { background: rgba(255, 255, 255, .12); }
.dmch-step button[disabled] { color: rgba(255, 255, 255, .25); cursor: default; }
.dmch-step button[disabled]:hover { background: transparent; }
.dmch-step select { min-width: 112px; text-align: center; font-size: 13.5px; }

/* ---------- impianto a tre colonne ----------
   Le tracce sono proporzionali: si restringono tutte insieme e si impilano
   solo quando i minimi non stanno piu' nella riga. */

.dmch-main {
  display: grid; gap: 24px 30px; margin-top: 20px; align-items: center;
  grid-template-columns: minmax(190px, 1fr) minmax(290px, 2.15fr) minmax(190px, 1fr);
}
.dmch--acqua .dmch-main {
  grid-template-columns: minmax(190px, 290px) minmax(250px, 370px) minmax(190px, 290px);
  justify-content: center;
}
.dmch-narr { min-width: 0; }
.dmch-vis { position: relative; min-width: 0; width: 100%; max-width: 700px; }
.dmch--acqua .dmch-vis { max-width: 370px; }
/* Lo stato base della colonna laterale sta QUI, prima delle media query. */
.dmch-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- racconto ---------- */

.dmch-h1 {
  margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.03;
  font-weight: 700; letter-spacing: -.034em; color: #ffffff;
}
.dmch-lead {
  margin-top: 14px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.28;
  font-weight: 700; letter-spacing: -.018em; color: #ffffff; text-wrap: pretty;
}
.dmch-desc {
  margin: 10px 0 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6;
  font-weight: 500; color: #a8bcd8; text-wrap: pretty;
}
.dmch-note {
  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;
}
.dmch-note svg { flex-shrink: 0; margin-top: 1px; }

/* ---------- soggetto ---------- */

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

.dmch-bulbbox { position: relative; width: 76%; aspect-ratio: 1223 / 1286; }
.dmch--gas .dmch-bulbbox { aspect-ratio: 1 / 1.05; }
.dmch-haze, .dmch-bloom { position: absolute; pointer-events: none; transition: opacity .5s ease; }
.dmch-haze {
  left: -20%; top: -10%; right: -20%; bottom: -6%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 20%, transparent) 0%, rgba(11, 26, 53, 0) 100%);
}
.dmch-bloom {
  left: 20%; top: 18%; width: 60%; height: 58%; filter: blur(9px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--soft) 46%, transparent) 0%, transparent 100%);
}
.dmch-off, .dmch-lit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
.dmch-off { filter: drop-shadow(0 20px 38px rgba(4, 12, 28, .5)) brightness(.5) saturate(.5); }
.dmch-lit { transition: filter .5s ease, clip-path .8s cubic-bezier(.22, 1, .3, 1); }
.dmch-flame-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Fiamma: i tre strati si muovono su periodi diversi, quindi non si
   riallineano mai e il ciclo non si lascia riconoscere. */
@keyframes dmchInner {
  0%,100% { transform: translateY(0) scaleX(1) scaleY(1) }
  22%  { transform: translateY(calc(var(--amp) * -1)) scaleX(.972) scaleY(1.05) }
  46%  { transform: translateY(calc(var(--amp) * .5)) scaleX(1.026) scaleY(.972) }
  73%  { transform: translateY(calc(var(--amp) * -.62)) scaleX(.986) scaleY(1.028) }
}
@keyframes dmchBody {
  0%,100% { transform: scaleY(1) scaleX(1) }
  26% { transform: scaleY(calc(1 + var(--body))) scaleX(calc(1 - var(--body) * .62)) }
  54% { transform: scaleY(calc(1 - var(--body) * .58)) scaleX(calc(1 + var(--body) * .5)) }
  78% { transform: scaleY(calc(1 + var(--body) * .42)) scaleX(calc(1 - var(--body) * .26)) }
}
@keyframes dmchSway {
  0%,100% { transform: rotate(0) skewX(0) }
  27% { transform: rotate(var(--sway)) skewX(calc(var(--sway) * -.5)) }
  58% { transform: rotate(calc(var(--sway) * -.8)) skewX(calc(var(--sway) * .42)) }
}
@keyframes dmchHi { 0%,100% { opacity: .2; transform: rotate(-16deg) translateY(0) scaleY(1) } 30% { opacity: .46; transform: rotate(-16deg) translateY(-5px) scaleY(1.1) } 62% { opacity: .26; transform: rotate(-16deg) translateY(2px) scaleY(.94) } }
@keyframes dmchLum { 0%,100% { opacity: var(--hi) } 34% { opacity: var(--lo) } 68% { opacity: calc((var(--hi) + var(--lo)) / 2) } }
.dmch-flame-svg [class*="dmch-"] { transform-box: view-box; }
.dmch-inner { transform-origin: 100px 165px; animation-name: dmchInner; animation-timing-function: cubic-bezier(.45,0,.55,1); animation-iteration-count: infinite; }
.dmch-outer { transform-origin: 100px 176px; animation-name: dmchBody; animation-timing-function: cubic-bezier(.45,0,.55,1); animation-iteration-count: infinite; }
.dmch-sway  { transform-origin: 100px 176px; animation-name: dmchSway; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.dmch-hi    { animation-name: dmchHi; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.dmch-lum   { animation-name: dmchLum; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.dmch-flame { transition: filter .5s ease; }

/* Serbatoio. */
.dmch-tank { position: relative; width: 100%; aspect-ratio: 1024 / 1536; }
.dmch-tank-svg, .dmch-tank-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dmch-tank-img { object-fit: contain; pointer-events: none; transition: filter .3s ease; }
.dmch-tank:hover .dmch-tank-img { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--acc) 40%, transparent)); }
.dmch-tank-svg [class*="dmch-"] { transform-box: view-box; }
.dmch-body {
  transform: translateY(calc((1 - var(--lvl)) * 898px));
  transition: transform .95s cubic-bezier(.22, 1, .3, 1);
  /* v5.141.0 — Senza `backwards`. Il keyframe parte da translateY(898px), cioe'
     dalla cisterna vuota: con fill-mode backwards quel valore vale gia' PRIMA
     che l'animazione parta, e ogni volta che la timeline non avanza — stampa,
     scheda in secondo piano, export PDF — il cliente vede una cisterna vuota
     davanti a un consumo che c'e' stato. Non e' un blocco invisibile, e' un
     numero sbagliato, che e' peggio.
     Tolto il fill-mode, prima dell'animazione vale la regola normale qui sopra,
     che e' gia' il livello giusto; l'animazione resta identica quando parte. */
  animation: dmchRise 1.25s cubic-bezier(.22, 1, .3, 1) .35s;
}
@keyframes dmchRise { from { transform: translateY(898px) } }
@keyframes dmchWaveF { from { transform: translateX(0) } to { transform: translateX(-110px) } }
@keyframes dmchWaveM { from { transform: translateX(0) } to { transform: translateX(-170px) } }
@keyframes dmchWaveB { from { transform: translateX(0) } to { transform: translateX(240px) } }
@keyframes dmchBob   { 0%,100% { transform: translateY(0) } 34% { transform: translateY(-6px) } 68% { transform: translateY(3px) } }
@keyframes dmchCur   { from { transform: translateX(0) } to { transform: translateX(-540px) } }
@keyframes dmchCur2  { from { transform: translateX(0) } to { transform: translateX(540px) } }
@keyframes dmchMote  { 0% { opacity: 0; transform: translate(0,0) } 12% { opacity: .5 } 72% { opacity: .34 } 100% { opacity: 0; transform: translate(26px,-520px) } }
@keyframes dmchMoteB { 0% { opacity: 0; transform: translate(0,0) } 14% { opacity: .42 } 70% { opacity: .28 } 100% { opacity: 0; transform: translate(-22px,-470px) } }
.dmch-wf { animation: dmchWaveF 4.4s linear infinite; }
.dmch-wm { animation: dmchWaveM 6.8s linear infinite; }
.dmch-wb { animation: dmchWaveB 9.2s linear infinite; }
.dmch-ring { animation: dmchBob 3.8s ease-in-out infinite; }
.dmch-cur  { animation: dmchCur 14s linear infinite; }
.dmch-cur2 { animation: dmchCur2 19s linear infinite; }
.dmch-motes circle { animation-name: dmchMote; animation-timing-function: linear; animation-iteration-count: infinite; }
.dmch-motes circle:nth-child(even) { animation-name: dmchMoteB; }

.dmch-exp { position: absolute; left: 2%; right: 8%; pointer-events: none; }
.dmch-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);
}
.dmch-exp-dot { position: absolute; right: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; }

/* I valori sul serbatoio: inchiostro scuro dentro l'acqua chiara, chiaro sul
   navy del cilindro vuoto. Colore e posizione nascono dalla stessa condizione,
   quindi non possono discordare. */
.dmch-tank-txt { position: absolute; left: 11%; right: 11%; text-align: center; pointer-events: none; }
.dmch-tank-pct { font-size: clamp(24px, 2.6vw, 34px); line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dmch-tank-mc { margin-top: 7px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmch-tank-su { margin-top: 3px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmch-tank-txt.is-in  .dmch-tank-pct, .dmch-tank-txt.is-in  .dmch-tank-mc { color: #07243f; text-shadow: 0 1px 2px rgba(226, 248, 255, .45); }
.dmch-tank-txt.is-in  .dmch-tank-su { color: #0c3357; text-shadow: 0 1px 2px rgba(226, 248, 255, .45); }
.dmch-tank-txt.is-out .dmch-tank-pct, .dmch-tank-txt.is-out .dmch-tank-mc { color: #ffffff; text-shadow: 0 1px 3px rgba(4, 18, 40, .95), 0 2px 10px rgba(4, 18, 40, .7); }
.dmch-tank-txt.is-out .dmch-tank-su { color: #e2f8ff; text-shadow: 0 1px 3px rgba(4, 18, 40, .95); }

/* ---------- i due valori a confronto ---------- */

.dmch-b { position: absolute; left: 94%; transform: translateY(-50%); padding-left: 9px; min-width: 0; }
.dmch-b--prev { top: 28.5%; }
.dmch-b--now  { top: 58%; }
.dmch-b-v { margin-top: 3px; font-size: 16px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmch-b-v--big { font-size: 18px; letter-spacing: -.02em; }
.dmch-pill {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 6px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dmch-pill.is-up   { background: rgba(255, 120, 120, .24); color: #ff9d9d; }
.dmch-pill.is-down { background: rgba(120, 230, 160, .24); color: #a8ecc0; }
/* Il serbatoio non ha connettori laterali: i valori vanno sotto, in riga. */
.dmch-bench--under { display: flex; gap: 22px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.dmch-bench--under .dmch-b { position: static; transform: none; padding-left: 0; text-align: center; }

/* ---------- schede laterali ---------- */

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

.dmch-qs { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.dmch-qrow {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px;
  border-radius: 9px; transition: background .2s ease;
}
.dmch-qrow:hover { background: rgba(255, 255, 255, .06); }
.dmch-qico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08);
}
/* Il corpo prende lo spazio che resta: senza questo la frase va a capo pur
   avendo la riga mezza vuota. */
.dmch-qbody { flex: 1; min-width: 0; }
.dmch-qv { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.dmch-qv > span { font-size: 18px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: #ffffff; }
.dmch-qv > em { font-style: normal; font-size: 12px; font-weight: 600; color: #9fb4d4; }
.dmch-qlab { margin-top: 3px; font-size: 11.5px; font-weight: 500; color: #8fa6c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmch-qd { margin-top: 2px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmch-qd span { font-weight: 500; color: #8fa6c6; }

/* ---------- ingresso ----------
   I keyframe stanno qui, ma e' il JS ad assegnarli: un fill-mode backwards
   dichiarato nel foglio lascia il blocco invisibile ogni volta che la timeline
   non avanza (stampa, scheda in secondo piano, export PDF). */

@keyframes dmchUp   { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes dmchFade { from { opacity: 0 } to { opacity: 1 } }

/* ---------- responsive ----------
   Tre colonne finche' i minimi ci stanno, poi una sola con le due schede
   affiancate: impilarle allungherebbe la Hero di 140px. */

@media (max-width: 1180px) {
  .dmch-main, .dmch--acqua .dmch-main { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .dmch-vis, .dmch--acqua .dmch-vis { max-width: 620px; margin: 0 auto; }
  .dmch--acqua .dmch-vis { max-width: 300px; }
  .dmch-bulbbox { width: 70%; }
  .dmch-side { flex-direction: row; }
  .dmch-side > .dmch-card { flex: 1; }
  .dmch-pad { padding: 22px 18px 24px; }
  .dmch-ctrl { width: 100%; }
}
@media (max-width: 760px) {
  .dmch-side { flex-direction: column; }
  /* Sotto questa soglia i valori escono da fianco al soggetto e vanno sotto. */
  .dmch-bench { display: flex; gap: 20px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
  .dmch-bench .dmch-b { position: static; transform: none; padding-left: 0; text-align: center; }
}
@media (max-width: 560px) {
  .dmch-vis, .dmch--acqua .dmch-vis { max-width: none; }
  .dmch-bulbbox { width: 82%; margin: 0 auto; }
  .dmch-pillbox select { max-width: 170px; }
}

@media print {
  .dmch { box-shadow: none; }
  .dmch-glow, .dmch-glow2 { display: none; }
  .dmch * { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dmch *, .dmch *::before, .dmch *::after { animation: none !important; transition: none !important; }
  /* Le turbolenze sono elementi SMIL: animation:none non le tocca. */
  .dmch filter animate { display: none; }
}

/* ============================================================
   v5.141.0 — I controlli della sezione dentro la testata
   ============================================================
   Filtri e azioni non vengono riscritti: la Hero ospita il markup che la
   sezione gia' produceva. Quel markup era pensato per il fondo chiaro — la
   barra ha uno sfondo zebra, i select sono crema, il pulsante e' navy pieno.
   Su navy la barra diventerebbe una lastra bianca e il pulsante sparirebbe
   nel fondo. Qui si ridipinge, senza toccare materia.css: fuori dalla Hero
   quelle regole restano quelle di prima.

   Le griglie e gli andate-a-capo stanno qui e non negli attributi style: uno
   style="" sull'elemento batte le media query e il responsive non entra mai
   in funzione. */

.dmch-ctrl-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 0; }

.dmch-ctrl-wrap .dmm-filters,
.dmch-ctrl-wrap .pvm-filters {
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  padding: 11px 13px; border-radius: 11px; gap: 16px;
}
.dmch-ctrl-wrap .dmr-flab,
.dmch-ctrl-wrap .dmm-cap-note,
.dmch-ctrl-wrap .pvm-cap-note { color: #9fb4d4; }
.dmch-ctrl-wrap .dmm-fsep,
.dmch-ctrl-wrap .pvm-fsep { background: rgba(255, 255, 255, .14); }

.dmch-ctrl-wrap select {
  background-color: rgba(255, 255, 255, .09); color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  /* La freccia del select e' un'immagine di sfondo con il tratto navy scritto
     dentro: su fondo scuro va rifatta chiara, non schiarita con un filtro. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cfdcf0' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
}
.dmch-ctrl-wrap select:hover { background-color: rgba(255, 255, 255, .15); }
.dmch-ctrl-wrap select option { background: #0e2a4e; color: #ffffff; }
.dmch-ctrl-wrap select:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.dmch-ctrl-wrap .dmr-pill { background: rgba(255, 255, 255, .08); }
.dmch-ctrl-wrap .dmr-pill-opt { color: #9fb4d4; }
.dmch-ctrl-wrap .dmr-pill-opt:hover { color: #ffffff; }
.dmch-ctrl-wrap .dmr-pill-opt.on { background: var(--acc); color: #0b1a35; }
.dmch-ctrl-wrap .dmr-pill-opt.on:hover { color: #0b1a35; }

/* Il pulsante pieno navy su fondo navy sparisce: qui e' di vetro, con il
   bordo a fare il lavoro che faceva il riempimento. */
.dmch-ctrl-wrap .dmr-cta {
  background: rgba(255, 255, 255, .1); color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  padding: 10px 16px;
}
.dmch-ctrl-wrap .dmr-cta:hover { background: rgba(255, 255, 255, .18); color: #ffffff; }
.dmch-ctrl-wrap .dmr-cta.is-locked { opacity: .55; }

@media (max-width: 1180px) {
  .dmch-ctrl-wrap { align-items: stretch; width: 100%; }
  .dmch-ctrl-wrap .dmr-actions { justify-content: flex-start; }
}
@media print {
  .dmch-ctrl-wrap { display: none; }
}