/* ============================================================
   Il ponte dei costi. Dipende da frontend.css solo per le variabili --dm-*;
   ogni valore ha il proprio fallback.
   ============================================================ */

.dmpc{
  --pc-ink:var(--dm-heading,#0f2244);
  --pc-mut:var(--dm-text-muted,#66708a);
  --pc-line:var(--dm-border,#e6e9f0);
  border-radius:12px;background:var(--dm-card,#ffffff);padding:24px 26px 22px;
  box-shadow:0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14);
}

/* ---------- intestazione ---------- */

.dmpc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.dmpc-head-l{min-width:0}
.dmpc-head h2{margin:0;font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--pc-ink)}
.dmpc-head p{margin:7px 0 0;font-size:13px;font-weight:500;line-height:1.55;color:var(--pc-mut);text-wrap:pretty}
.dmpc-tot{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:8px;
  font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dmpc-tot.up{background:#fdecec;color:var(--dm-danger,#dc2626)}
.dmpc-tot.down{background:#e9f7ee;color:var(--dm-success,#16a34a)}

/* ---------- corpo ---------- */

.dmpc-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:26px 28px;align-items:end}
.dmpc-chart-wrap{min-width:0}

/* Quattro colonne di uguale larghezza: i due passi galleggiano fra i livelli
   dei totali, collegati da filetti, cosi' si legge la catena invece di quattro
   barre accostate. */
.dmpc-chart{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;height:186px;align-items:end;
}
.dmpc-col{position:relative;height:100%;min-width:0}
.dmpc-bar{
  position:absolute;left:0;right:0;min-height:3px;border-radius:5px 5px 0 0;
  transform-origin:bottom;
  transition:height .45s cubic-bezier(.16,1,.3,1),bottom .45s cubic-bezier(.16,1,.3,1);
}
.dmpc-bar.step{border-radius:4px}
.dmpc-link{position:absolute;left:0;right:-10px;height:1px;background:#dfe3ea}
.dmpc-flag{
  position:absolute;left:0;right:0;padding-bottom:7px;text-align:center;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}

.dmpc-axis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--pc-line);
}
.dmpc-axis-c{min-width:0;text-align:center}
.dmpc-axis-v{font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dmpc-axis-l{margin-top:4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pc-mut)}
.dmpc-axis-s{margin-top:3px;font-size:11.5px;font-weight:500;line-height:1.45;color:var(--pc-mut);text-wrap:pretty}

/* ---------- le due quote ---------- */

.dmpc-side{min-width:0;border-left:1px solid var(--pc-line);padding-left:26px}
.dmpc-cap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pc-mut)}
.dmpc-quotes{display:flex;flex-direction:column;gap:18px;margin-top:16px}
.dmpc-quote{display:flex;align-items:center;gap:14px}
.dmpc-ring{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;width:62px;height:62px;
}
.dmpc-ring svg{position:absolute;inset:0;width:62px;height:62px}
.dmpc-ring circle{transition:stroke-dasharray .5s cubic-bezier(.16,1,.3,1)}
/* La percentuale e' HTML, non <text> SVG: un <text> con contenuto dinamico non
   si impagina in tutti i motori e le glifi non vengono disegnate. */
.dmpc-ring b{position:relative;font-size:14px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--pc-ink)}
.dmpc-quote-t{min-width:0}
.dmpc-quote-t span{display:block;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--pc-mut)}
.dmpc-quote-t b{display:block;margin-top:2px;font-size:14px;font-weight:700;color:var(--pc-ink)}
.dmpc-quote-t i{display:block;margin-top:3px;font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}

.dmpc-insight{display:flex;gap:10px;margin-top:18px;padding:12px 13px;border-radius:9px;background:#f6fbe4}
.dmpc-insight svg{flex-shrink:0;margin-top:1px}
.dmpc-insight span{font-size:12px;font-weight:500;line-height:1.5;color:#3c4760;text-wrap:pretty}

/* ---------- animazioni d'ingresso ----------
   Le regole ci sono, ma e' il JS che le assegna: un fill-mode backwards
   dichiarato qui lascerebbe il blocco invisibile in stampa e in PDF. */

@keyframes dmpcUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dmpcFade{from{opacity:0}to{opacity:1}}
@keyframes dmpcRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- responsive ---------- */

@media (max-width:1080px){
  .dmpc-body{grid-template-columns:1fr}
  .dmpc-side{border-left:0;border-top:1px solid var(--pc-line);padding-left:0;padding-top:22px}
}
@media (max-width:640px){
  .dmpc{padding:20px 18px 18px}
  .dmpc-chart{height:150px;gap:6px}
  .dmpc-axis{gap:6px}
  .dmpc-axis-v{font-size:13px}
  .dmpc-axis-l{font-size:10px;letter-spacing:.04em}
  .dmpc-axis-s{display:none}
  .dmpc-flag{font-size:11.5px}
  .dmpc-quote{gap:11px}
}
@media print{.dmpc{box-shadow:none;border:1px solid var(--pc-line)}}
@media (prefers-reduced-motion: reduce){.dmpc *{transition:none !important}}

/* v5.141.0 — Il pannello "Come si legge" resta dal riquadro precedente: il
   ponte non ne porta uno, e quella spiegazione e' la risposta alla domanda che
   i clienti fanno per prima. Prima stava dentro la testata della card, ora e'
   una riga a se' sotto il ponte. Posizione relativa perche' .dmr-help si apre
   in assoluto agganciandosi al genitore. */
.dmpc-help-wrap { position: relative; display: flex; justify-content: flex-end; margin-top: -6px; }
@media print { .dmpc-help-wrap { display: none; } }