/* Il carico dello studio (passo 5, D21). Solo i gettoni di app.css.
   Una barra di capienza per giorno: inchiostro per le ore previste, un tappo fucsia (allerta) oltre
   le ore che la persona ha. Tratteggio = non c'e' (senza motivo). Bordo tratteggiato = ore non
   segnate. Il giorno libero resta bianco: nessuna parola ripetuta. */

.cc {min-width:0; padding-bottom:var(--s2);}
.cc-spiega {margin:0 0 var(--s3); max-width:760px; font-size:var(--t-13); line-height:1.5; color:var(--ink-2);}
.cc-scorri {max-width:100%; overflow-x:auto; background:var(--piano); border:1px solid var(--linea-2);
  border-radius:var(--r-piano); overscroll-behavior-x:contain;}
.cc-scorri:focus-visible {outline:2px solid var(--accento); outline-offset:2px;}
.cc-tab {border-collapse:collapse; width:100%; min-width:760px; font-size:var(--t-13); color:var(--ink);}
.cc-tab th, .cc-tab td {padding:0; border-bottom:1px solid var(--linea-2); text-align:left; vertical-align:middle;}
.cc-tab thead th {padding:8px 8px; font-size:var(--t-12); font-weight:500; color:var(--ink-2); white-space:nowrap;}
.cc-tab thead th.cc-oggi {color:var(--ink); box-shadow:inset 0 2px 0 var(--marchio);}
.cc-tab .cc-chi {position:sticky; left:0; z-index:1; min-width:132px; max-width:180px; padding:6px 12px;
  background:var(--piano); border-right:1px solid var(--linea-2); font-weight:500; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.cc-gruppo th {padding:10px 12px 4px; font-size:var(--t-12); font-weight:600; color:var(--ink-2); background:var(--piano);
  position:sticky; left:0;}
.cc-tab tbody tr:last-child > * {border-bottom:0;}

/* ── Il giorno ── */
.cc-g {min-width:62px;}
.cc-tasto {display:flex; flex-direction:column; justify-content:center; gap:4px; width:100%; height:44px;
  padding:6px 8px; border:0; background:transparent; font:inherit; color:inherit; text-align:left; cursor:pointer;}
.cc-tasto:hover {background:var(--piano-2);}
.cc-tasto:focus-visible {outline:2px solid var(--accento); outline-offset:-2px;}
.cc-g.cc-oggi {box-shadow:inset 1px 0 0 var(--linea), inset -1px 0 0 var(--linea);}
.cc-barra {position:relative; display:flex; width:100%; max-width:64px; height:6px; border-radius:3px;
  background:var(--piano-2); overflow:hidden;}
.cc-barra i {display:block; height:100%; background:var(--ink-2);}
.cc-barra b {position:absolute; right:0; top:0; width:6px; height:100%; background:var(--allerta);}
.cc-barra.cc-ignota {box-sizing:border-box; background:transparent; border:1px dashed var(--bordo-ctl);}
.cc-piccola {display:inline-flex; width:36px; height:4px; vertical-align:middle;}
.cc-cifra {font:var(--t-12) var(--cifre); color:var(--ink-2); line-height:1; white-space:nowrap;}
.cc-cifra small {margin-left:1px; color:var(--ink-3);}
.cc-oltre {color:var(--allerta); font-weight:600;}
.cc-via, .cc-campione.cc-via {background:repeating-linear-gradient(135deg,var(--piano-2) 0 2px,transparent 2px 7px);}

/* ── La colonna dei giorni della settimana ── */
.cc-sett {min-width:84px; padding:6px 12px !important; border-left:1px solid var(--linea-2);}
.cc-sett .cc-barra {margin-bottom:4px;}
.cc-tab thead th.cc-sett {padding:8px 12px !important;}

.cc-legenda {display:flex; flex-wrap:wrap; gap:6px 18px; margin:var(--s2) 0 0; font-size:var(--t-12); color:var(--ink-2);}
.cc-legenda > span {display:inline-flex; align-items:center; gap:6px;}
.cc-campione {display:inline-block; width:18px; height:12px; border-radius:2px; border:1px solid var(--linea);}

@media (max-width:640px) {
  .cc-tab .cc-chi {min-width:96px; max-width:112px; padding:6px 8px;}
}