/* Scene della demo; testata, didascalia e comandi sono in comune.css. */
.cc-app { pointer-events: auto; background: var(--sc-superficie); border: 1px solid var(--sc-bordo); border-radius: 1rem; box-shadow: var(--sc-ombra-3); overflow: visible; }
.cc-contesto, .cc-testata, .cc-periodo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.5rem; }
.cc-contesto { background: var(--sc-superficie-2); font-size: .9rem; }
.cc-contesto b { color: var(--sc-info); }
.cc-testata { padding-top: 1.2rem; }
.cc-testata small, .cc-periodo span, .cc-dettaglio small { color: var(--sc-testo-secondario); }
.cc-testata h1 { margin: .2rem 0; font-size: 2rem; }
.cc-vista { border: 1px solid var(--sc-bordo-controllo); border-radius: .4rem; padding: .6rem; }
.cc-periodo { border-bottom: 1px solid var(--sc-bordo); }
.cc-contenuto { padding: 1rem 1.5rem; }
.cc-griglia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 2rem repeat(3, minmax(3.8rem, 1fr)); gap: .45rem; background: var(--sc-superficie); }
.cc-giorno { border-bottom: 1px solid var(--sc-bordo); color: var(--sc-testo-secondario); font-size: .9rem; }
.cc-evento { display: flex; flex-direction: column; justify-content: center; gap: .3rem; border-left: .25rem solid var(--sc-info); background: var(--sc-info-tenue); border-radius: .3rem; padding: .6rem; }
.cc-evento small { font-size: .8rem; }
.cc-primo { grid-column: 1 / 3; grid-row: 2; }
.cc-secondo { grid-column: 2 / 4; grid-row: 3; border-color: var(--sc-ok); background: var(--sc-ok-tenue); }
.cc-terzo { grid-column: 4 / 6; grid-row: 4; border-color: var(--sc-testo-secondario); background: var(--sc-superficie-3); }
.cc-occupato { grid-column: 4 / 6; grid-row: 2; padding: 1rem; border: 1px dashed var(--sc-testo-secondario); background: repeating-linear-gradient(135deg, var(--sc-superficie-2), var(--sc-superficie-2) 7px, var(--sc-superficie-3) 7px, var(--sc-superficie-3) 9px); }
.cc-cella-scelta { grid-column: 3; grid-row: 4; border: 2px solid var(--sc-azione); color: var(--sc-azione); display: grid; place-items: center; font-size: 1.4rem; }
.cc-diviso { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; }
.cc-dettaglio { padding: 1rem; background: var(--sc-superficie-2); border: 1px solid var(--sc-bordo-controllo); border-radius: .6rem; }
.cc-dettaglio h2 { margin: .5rem 0; font-size: 1.3rem; }
/* Etichetta e valore sulla stessa riga lasciano spazio a date, Crea e legenda al proiettore. */
.cc-dettaglio dl { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .3rem .6rem; margin: .5rem 0; }
.cc-dettaglio dt { color: var(--sc-testo-secondario); font-size: .8rem; }
.cc-dettaglio dd { margin: 0; }
.cc-date { display: flex; gap: 1rem; font-size: .85rem; }
.cc-date b { display: block; margin-top: .3rem; }
.cc-azione-finta { display: inline-block; background: var(--sc-azione); color: var(--sc-su-azione); padding: .45rem 1rem; border-radius: .4rem; margin-top: .9rem; font-weight: 700; }
.cc-esito { color: var(--sc-ok); visibility: hidden; }
.cc-spostato .cc-primo { grid-column: 3 / 5; }
.cc-spostato .cc-esito { visibility: visible; }
.cc-legenda { display: flex; flex-wrap: wrap; gap: 1rem; padding: .5rem 1.5rem 1rem; color: var(--sc-testo-secondario); font-size: .85rem; }
.cc-legenda span:last-child { margin-left: auto; }
.cc-asse { display: grid; grid-template-columns: 16rem repeat(5, 1fr); padding-bottom: 1rem; color: var(--sc-testo-secondario); }
.cc-riga { display: grid; grid-template-columns: 16rem 1fr; align-items: center; min-height: 4rem; border-top: 1px solid var(--sc-bordo); }
.cc-riga small { display: block; color: var(--sc-testo-secondario); margin-bottom: .3rem; }
.cc-linea { display: grid; grid-template-columns: repeat(5, 1fr); }
.cc-linea b { border-radius: .3rem; padding: .7rem; font-size: .9rem; background: var(--sc-info-tenue); border-left: .25rem solid var(--sc-info); }
.cc-barra-uno { grid-column: 3 / 5; }
.cc-linea .cc-barra-due { grid-column: 2 / 4; background: var(--sc-ok-tenue); border-color: var(--sc-ok); }
.cc-linea .cc-barra-tre { grid-column: 4 / 6; background: var(--sc-superficie-3); border-color: var(--sc-testo-secondario); }

/* Misure compatte: anche al proiettore la scena lascia spazio alla didascalia. */
.cc-contesto { padding: .5rem 1rem; }
.cc-testata, .cc-periodo { padding: .5rem 1rem; }
.cc-testata h1 { font-size: 1.6rem; }
.cc-contenuto { padding: .6rem 1rem; }
.cc-griglia { grid-template-rows: 1.5rem repeat(3, minmax(3rem, 1fr)); }
.cc-evento { padding: .4rem .6rem; gap: .15rem; }
.cc-dettaglio { padding: .6rem; }
.cc-legenda { padding: .3rem 1rem .6rem; }
.cc-riga { min-height: 3.3rem; }