/* ============================================================
   Riepilogo — "Le tre letture". Tre colonne numerate sotto il quadro
   generale. Dipende da frontend.css solo per le variabili --dm-*.
   ============================================================ */

.dmrl{
  --rl-ink:var(--dm-heading,#0f2244);
  --rl-mut:var(--dm-text-muted,#66708a);
  --rl-line:var(--dm-border,#e6e9f0);
  border-radius:12px;background:var(--dm-card,#ffffff);
  box-shadow:0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
  padding:24px 28px 22px;
}
.dmrl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 34px}
.dmrl-col{min-width:0}

/* ---------- intestazione di colonna ---------- */

.dmrl-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.dmrl-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;
  padding:2px 5px;border-radius:5px;background:#c3ec2e;font-size:11px;
  font-weight:700;font-variant-numeric:tabular-nums;color:#0f2244;
}
.dmrl-lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rl-mut)}
.dmrl-meta{margin-left:auto;font-size:12px;font-weight:700;color:var(--rl-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- righe con barra ----------
   Etichetta e valore sulla stessa riga, barra sotto a piena larghezza: cosi'
   il valore non comprime l'etichetta quando la colonna si stringe. */

.dmrl-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px;row-gap:4px;align-items:baseline;
}
.dmrl-row + .dmrl-row{margin-top:13px}
.dmrl-row-l{
  min-width:0;font-size:13.5px;font-weight:600;color:var(--rl-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dmrl-row-l b{font-weight:500;color:var(--rl-mut)}
.dmrl-row-v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--rl-ink)}
.dmrl-bar{grid-column:1 / -1;height:5px;border-radius:3px;background:#f4f2ec;overflow:hidden;margin-top:2px}
.dmrl-bar>i{display:block;height:5px;border-radius:3px;transform-origin:left}

/* ---------- segnalazioni ---------- */

.dmrl-alerts{display:flex;flex-direction:column;gap:11px}
.dmrl-alert{display:flex;align-items:baseline;gap:9px;font-size:13.5px;line-height:1.45}
.dmrl-alert>i{flex-shrink:0;width:8px;height:8px;border-radius:2px;transform:translateY(-1px)}
.dmrl-alert>span{min-width:0;font-weight:500;color:var(--rl-mut);text-wrap:pretty}
.dmrl-alert b{font-weight:700;color:var(--rl-ink)}
.dmrl-empty{font-size:13px;font-weight:500;color:var(--rl-mut);line-height:1.5}

/* ---------- responsive ----------
   Tre colonne reggono finche' ognuna tiene etichetta e valore sulla stessa
   riga. Sotto, meglio due e poi una. */

@media (max-width:1080px){
  .dmrl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px}
  .dmrl-col:last-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .dmrl{padding:20px 18px 18px}
  .dmrl-grid{grid-template-columns:1fr;gap:24px}
  .dmrl-col:last-child{grid-column:auto}
}
@media print{.dmrl{box-shadow:none;border:1px solid var(--rl-line)}}