/* Scene della demo; testata, didascalia e comandi sono in comune.css. */
.app-report { border: 1px solid var(--sc-bordo); border-radius: 1rem; background: var(--sc-superficie); overflow: hidden; }
.app-testata { display: flex; justify-content: space-between; padding: .8rem 1.4rem; background: var(--sc-superficie-2); font-weight: 750; }
.app-testata span:last-child, .soprattitolo, p { color: var(--sc-testo-secondario); }
.app-contenuto { padding: 1.4rem 2rem; min-height: 26rem; }
h2 { font-size: 1.8rem; margin: 1.2rem 0; }
h3 { margin: 1.4rem 0 .8rem; }
p { line-height: 1.5; }
.campo { padding: 1rem; border: 1px solid var(--sc-bordo); border-radius: .5rem; background: var(--sc-superficie-2); }
.flusso, .metriche, .fasi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.flusso > div, article { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem; border: 1px solid var(--sc-bordo); border-radius: .7rem; background: var(--sc-superficie-2); }
.flusso small { color: var(--sc-testo-secondario); }
.metriche { grid-template-columns: repeat(2, 1fr); }
.fasi { grid-template-columns: repeat(3, 1fr); }
article strong { font-size: 2.8rem; }
article strong small { font-size: 1rem; font-weight: 400; }
article.attenzione { border: 2px solid var(--sc-azione); }
article.attenzione b { color: var(--sc-azione); }
.sintesi { padding: 1rem; border-left: .3rem solid var(--sc-azione); background: var(--sc-superficie-2); color: var(--sc-testo); }
.sintesi strong { font-size: 2rem; margin-right: 1rem; }
svg { display: block; max-height: 7rem; width: 100%; }
svg text { fill: var(--sc-testo); font-size: 16px; }
svg rect { fill: var(--sc-azione); }
svg .precedente { fill: var(--sc-testo-secondario); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .9rem .6rem; border-bottom: 1px solid var(--sc-bordo); }

/* Misure compatte: anche al proiettore la scena lascia spazio alla didascalia. */
.app-testata { padding: .5rem 1rem; }
.app-contenuto { padding: .65rem 1.2rem; min-height: 0; }
.app-report h2 { margin: .5rem 0; font-size: 1.6rem; }
.app-report h3 { margin: .7rem 0 .5rem; }
.app-report p { margin: .6rem 0; }
.app-report .flusso > div, .app-report article { padding: .7rem 1rem; gap: .35rem; }
.app-report .sintesi, .app-report .campo { padding: .6rem; }
.app-report svg { max-height: 5rem; }
.sc-tempi .app-contenuto { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.sc-tempi .app-contenuto > :not(.metriche):not(svg) { grid-column: 1 / -1; }
.sc-tempi .metriche { grid-column: 1; grid-row: 4; }
.sc-tempi svg { grid-column: 2; grid-row: 4; align-self: center; max-height: 8rem; }
.sc-tempi article strong { font-size: 2.2rem; line-height: 1.15; }
.app-report th, .app-report td { padding: .6rem; }