/* ============================================================
   Sezioni materia — Energia, Gas, Acqua
   Dipende da riepilogo.css: riusa il vocabolario .dmr-* (card, tabelle,
   chip, grafici, righe, popover) e aggiunge solo ciò che è nuovo.
   ============================================================ */

/* ---- barra filtri ---- */
.dmm-filters {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 10px; background: var(--dmr-zebra);
}
.dmm-filters label { display: flex; align-items: center; gap: 9px; }
.dmm-fgroup { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dmm-fsep { width: 1px; align-self: stretch; background: var(--dmr-line); }
.dmm-cap-note { font-size: 12.5px; font-weight: 600; color: var(--dmr-mut); white-space: nowrap; }
.dmm select {
  appearance: none; border: 0; border-radius: 8px; background-color: var(--dmr-cream);
  color: var(--dmr-ink); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 8px 30px 8px 12px; cursor: pointer; max-width: 260px;
  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='%230f2244' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: background-color .2s ease;
}
.dmm select:hover { background-color: var(--dmr-cream-2); }
.dmm select:focus-visible { outline: 2px solid var(--dmr-ink); outline-offset: 2px; }
.dmm-head { align-items: flex-start; }
.dmm-axnote { color: var(--dmr-mut); }

/* ---- coppia testa: spesa + previsionale ---- */
.dmm-duo-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; }
.dmm-duo-hero > .dmr-card { padding: 26px 28px; }
.dmm-duo-hero .dmr-big span { font-size: 58px; }
.dmm-duo-hero .dmr-big b { font-size: 22px; }
.dmm-duo-hero .dmr-stats { width: 100%; }
.dmm-duo-hero .dmr-stat:first-child { padding-left: 0; }

/* ---- card previsionale ---- */
.dmm-prev {
  position: relative; overflow: hidden; border-radius: 12px; background: #f7fce8;
  box-shadow: var(--dmr-shadow); padding: 24px 26px;
}
.dmm-prev-t {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dmr-lime-ink);
}
.dmm-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #5f7a10; flex-shrink: 0; }
.dmm-dot i {
  position: absolute; inset: -4px; border-radius: 50%; background: #5f7a10;
  animation: dmmPulse 2.6s ease-in-out infinite;
}
@keyframes dmmPulse { 0%, 100% { opacity: .25; transform: scale(1) } 50% { opacity: .8; transform: scale(1.7) } }
.dmm-prev-v { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.dmm-prev-v span {
  font-size: 34px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em;
  color: var(--dmr-ink); font-variant-numeric: tabular-nums;
}
.dmm-prev-v b { font-size: 16px; font-weight: 600; color: var(--dmr-lime-ink); }
.dmm-prev-band { position: relative; height: 6px; border-radius: 3px; background: #e7edd4; margin-top: 18px; }
.dmm-prev-fill {
  position: absolute; left: 0; top: 0; height: 6px; width: 100%; border-radius: 3px;
  transform-origin: left; background: linear-gradient(90deg, #e2f2a8, #8db600, #e2f2a8);
}
.dmm-prev-mark {
  position: absolute; top: -4px; width: 3px; height: 14px; border-radius: 2px;
  background: var(--dmr-lime-ink);
}
.dmm-prev-lab {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-size: 12px; font-weight: 500; color: var(--dmr-mut); font-variant-numeric: tabular-nums;
}
.dmm-prev-note {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #e2e9cd;
  font-size: 12.5px; font-weight: 500; color: #5c6478; line-height: 1.5;
}
.dmm-prev-note b { color: var(--dmr-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- voci di costo ---- */
.dmm-voci {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px; margin-top: 20px;
}
.dmm-voce { padding: 14px 16px; border-radius: 10px; background: var(--dmr-zebra); }
.dmm-voce-t { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--dmr-ink); }
.dmm-voce-t i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.dmm-voce-v { display: flex; align-items: baseline; gap: 5px; margin-top: 10px; }
.dmm-voce-v span {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  color: var(--dmr-ink); font-variant-numeric: tabular-nums;
}
.dmm-voce-v b { font-size: 12px; font-weight: 600; color: var(--dmr-mut); }
.dmm-voce-d {
  display: flex; align-items: center; gap: 9px; margin-top: 8px;
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.dmm-voce-d span { font-weight: 700; }
.dmm-voce-d em { font-style: normal; color: var(--dmr-mut); }

/* ---- fasce orarie ---- */
.dmm-bands {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px; height: 160px;
}
.dmm-band-col {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; height: 160px;
}
.dmm-band-col i { display: block; transform-origin: bottom; }

/* ---- per contatore ---- */
.dmm-plist { display: flex; flex-direction: column; gap: 14px; }
.dmm-p-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dmm-p-n { min-width: 0; }
.dmm-p-n b {
  display: block; font-size: 13px; font-weight: 700; color: var(--dmr-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dmm-p-v { text-align: right; white-space: nowrap; }
.dmm-p-v b { display: block; font-size: 14px; font-weight: 700; color: var(--dmr-ink); font-variant-numeric: tabular-nums; }
.dmm-p-v em {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700;
  font-style: normal; font-variant-numeric: tabular-nums;
}
.dmm-p-bar { height: 8px; border-radius: 3px; background: #eef1f8; margin-top: 9px; }
.dmm-p-bar i { display: block; height: 8px; border-radius: 3px; transform-origin: left; }
.dmm-p-sub { margin-top: 6px; font-size: 11.5px; font-weight: 500; color: var(--dmr-mut); font-variant-numeric: tabular-nums; }

/* ---- confronto strutture ---- */
.dmm-slist { display: flex; flex-direction: column; gap: 2px; min-width: 330px; }
.dmm-srow { grid-template-columns: minmax(96px, 1fr) 88px 66px 16px; gap: 10px; padding: 11px 12px; }
.dmm-s-n { min-width: 0; }
.dmm-s-n b {
  display: block; font-size: 13px; color: var(--dmr-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dmm-s-bar { display: block; height: 6px; border-radius: 3px; background: #eef1f8; margin-top: 7px; }
.dmm-s-bar i { display: block; height: 6px; border-radius: 3px; transform-origin: left; }
.dmm-srow .num { font-size: 13px; font-weight: 700; }

/* ---- segnalazioni ---- */
.dmm-anom {
  grid-template-columns: 104px minmax(0, 1.15fr) minmax(0, 1fr) 130px;
  gap: 14px; padding: 13px 12px;
}
.dmm-tag {
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
  justify-self: start; white-space: nowrap;
}
.dmm-a-t { min-width: 0; }
.dmm-a-t b {
  display: block; font-size: 13px; font-weight: 700; color: var(--dmr-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dmm-a-t em {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500;
  font-style: normal; color: var(--dmr-mut); font-variant-numeric: tabular-nums;
}
.dmm-a-m { font-size: 12.5px; font-weight: 500; color: var(--dmr-txt); line-height: 1.4; text-wrap: pretty; }
.dmm-anom .num { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .dmm-duo-hero { grid-template-columns: minmax(0, 1fr); }
  .dmm-filters { gap: 14px; }
  .dmm-fsep { display: none; }
  .dmm select { max-width: 100%; }
  .dmm-anom { grid-template-columns: 90px minmax(0, 1fr) 100px; }
  .dmm-a-m { display: none; }
  .dmm-bands { height: 130px; }
  .dmm-band-col { height: 130px; }
}
@media (max-width: 480px) {
  .dmm-duo-hero .dmr-big span { font-size: 38px; }
  .dmm-voci { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   v5.99.0 — Analisi e Report
   Le due viste documentali riusano .dmr-row e .dmm-slist: qui solo la
   griglia delle colonne e i pochi elementi che non esistevano.
   ================================================================ */

.dma-row {
  grid-template-columns: 66px minmax(0, 1fr) auto 16px;
  gap: 14px; padding: 13px 12px; align-items: center;
}
.dma-post { grid-template-columns: 66px minmax(0, 1fr) 16px; }

/* Data a sinistra: mese sopra, anno sotto, come una costola di calendario. */
.dma-when { display: block; text-align: center; line-height: 1.2; }
.dma-when b {
  display: block; font-size: 13px; font-weight: 800; color: var(--dmr-ink);
  letter-spacing: -.01em;
}
.dma-when em {
  display: block; font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--dmr-mut); font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* Titolo e riga di contesto. L'estratto sta su due righe e poi taglia:
   una riga d'elenco che cresce a piacere rompe il ritmo della lista. */
.dma-t { min-width: 0; }
.dma-t b {
  display: block; font-size: 14px; font-weight: 700; color: var(--dmr-ink);
  line-height: 1.35; overflow-wrap: anywhere;
}
.dma-t em {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-style: normal; font-size: 12px; font-weight: 500;
  color: var(--dmr-mut); line-height: 1.45; margin-top: 3px;
}

/* Etichetta del formato: dice cosa si apre prima di cliccare. */
.dma-act {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap;
  background: var(--dmr-cream); color: var(--dmr-mut);
  transition: background .2s ease, color .2s ease;
}
.dmr-row:hover .dma-act { background: var(--dmr-ink); color: #fff; }

/* Separatore d'anno, visibile solo quando gli anni sono mescolati. */
.dma-yhead {
  padding: 16px 12px 7px; font-size: 11px; font-weight: 800;
  letter-spacing: var(--dm-tracking-label, .1em); text-transform: uppercase;
  color: var(--dmr-mut); font-variant-numeric: tabular-nums;
}
.dma-yhead:first-child { padding-top: 4px; }

.dma-pag {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--dmr-line);
}

@media (max-width: 640px) {
  .dma-row  { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; }
  .dma-post { grid-template-columns: 54px minmax(0, 1fr); }
  .dma-row .dmr-chev { display: none; }
}

/* ------------------------------------------------------------------
   v5.120.0 — Il segno della materia
   Fulmine, fiamma o goccia accanto al titolo di sezione e nella
   legenda. Non e' decorazione: Energia e Gas si distinguevano solo
   per la parola nel titolo, mentre l'Acqua aveva gia' la sua
   identita'. Il colore lo eredita dal contesto (currentColor), cosi'
   segue il colore di materia senza doverlo ripetere.
   ------------------------------------------------------------------ */
.dmr-kicker.dmm-kicker { display: inline-flex; align-items: center; gap: 7px; }
.dmm-glyph { display: inline-block; vertical-align: -1px; }
.dmr-legend .dmm-glyph { margin-right: 5px; }