/*
  scheda-compresenze.css – stile della scheda «Compresenze» di Orario Facile (scheda-compresenze.js).
  Usa i riquadri (.card), i tasti (.btn, .iconbtn), le etichette (.tag) e i colori di Orario Facile (--line, --surface…),
  quindi il tema chiaro/scuro funziona da solo. Qui solo i pezzi nuovi: le righe della maschera e il sostegno.
*/
.comp-scheda > .row.spread { margin-bottom: 6px; }
.comp-scheda h3 { margin: 0; }
.comp-azioni { margin-top: 8px; }
.comp-messaggio { margin: 6px 0 0; font-size: 13px; font-weight: 600; min-height: 1.2em; }
.comp-messaggio:empty { display: none; }
.comp-avviso { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--bad); }
.comp-docenti { gap: 6px; margin: 4px 0; }

/* Le righe: una per ogni ora di compresenza */
.comp-righe { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.comp-riga { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.comp-riga.da-completare { border-style: dashed; border-color: var(--warn); }
.comp-riga.da-completare .comp-avviso { color: var(--text-3); font-weight: 500; }   /* da completare non è un errore */
.comp-riga.con-avvisi { border-color: var(--bad); }
/* Schermi stretti: due campi per riga (docente e note su tutta la larghezza) */
.comp-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.comp-campo { min-width: 0; }
.comp-codice, .comp-note, .comp-tipo { grid-column: 1 / -1; }
.comp-campi .iconbtn { justify-self: end; }

/* Riquadro «Gruppi e ore previste»: si apre e si chiude toccando il titolo */
.comp-gruppi summary { cursor: pointer; list-style: revert; }
.comp-gruppi summary h3 { display: inline; }
.comp-gruppi[open] summary { margin-bottom: 6px; }

/* Sostegno: una riga per classe, con spunta, ore previste ed esito */
.comp-classi-sost { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.comp-sost { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.comp-sost.attivo { background: var(--surface-2); }
.comp-spunta { gap: 8px; min-width: 70px; min-height: 36px; cursor: pointer; }
.comp-ore-sost { width: 130px; }
.comp-problemi summary { cursor: pointer; font-weight: 600; color: var(--bad); margin-top: 8px; }
.comp-problemi ul { margin: 4px 0 0; padding-left: 20px; font-size: 12.5px; }

/* Schermi larghi: tutti i campi di un'ora sulla stessa riga */
@media (min-width: 900px) {
  .comp-campi { grid-template-columns: minmax(180px, 2.2fr) .9fr 1.2fr 1fr 1.3fr 1.8fr auto; }
  .comp-campi:has(.comp-tipo) { grid-template-columns: minmax(160px, 2fr) .9fr 1.1fr .9fr 1.2fr 1.2fr 1.4fr auto; }
  .comp-campi.comp-campi-gruppo { grid-template-columns: minmax(170px, 1.6fr) .8fr 1.1fr 1.4fr 2fr auto; }
  .comp-codice, .comp-note, .comp-tipo { grid-column: auto; }
}

/* Alternativa: disponibilità dei docenti, criteri e bozza di copertura */
.comp-alt summary { cursor: pointer; list-style: revert; }
.comp-alt summary h3 { display: inline; }
.comp-alt[open] summary { margin-bottom: 6px; }
.comp-alt h4 { margin: 14px 0 4px; }
.alt-file { cursor: pointer; }
.alt-ore { gap: 6px; margin: 4px 0; }
.alt-doc .alt-criteri-doc { margin-top: 6px; }
.alt-criteri { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.alt-criterio { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.alt-opzioni { margin-top: 8px; }
.alt-bozza { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.alt-sintesi { gap: 6px; margin: 4px 0 8px; }
@media (min-width: 700px) {
  .alt-criteri-doc { grid-template-columns: repeat(3, 1fr); }
  .alt-opzioni { grid-template-columns: 1fr 1fr 2fr; }
}
.alt-esclusioni { display: grid; gap: 6px; margin: 6px 0; }
/* il riquadro dell'Alternativa sta DENTRO la scheda del gruppo, separato da una riga */
.comp-alt { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.comp-alt summary h4 { display: inline; margin: 0; font-size: 1.05em; }

/* Le schede dei gruppi (Alternativa, Potenziamento L2…) si contraggono toccando la testata */
.comp-testata { cursor: pointer; margin-bottom: 0; }
.comp-contrai[open] > .comp-testata { margin-bottom: 6px; }
.comp-testata h3::before { content: '▾ '; color: var(--text-3); }
.comp-contrai:not([open]) > .comp-testata h3::before { content: '▸ '; }
.comp-testata::-webkit-details-marker { display: none; }
.alt-riga-bozza { gap: 6px 8px; }
.alt-riga-bozza select { max-width: 100%; }
.alt-modifiche { gap: 6px; margin: 6px 0; }

/* Tutte le schede della pagina uguali (Gruppi, Potenziamento L2, Alternativa, …, Sostegno): si aprono e si chiudono toccando
   la testata; all'apertura della pagina sono chiuse. Il triangolino dice se sono aperte (▾) o chiuse (▸) */
.comp-blocco > summary { cursor: pointer; list-style: none; gap: 8px; }
.comp-blocco > summary::-webkit-details-marker { display: none; }
.comp-blocco > summary h3 { margin: 0; font-size: 1.05rem; }
.comp-blocco > summary h3::before { content: '▸ '; color: var(--text-3); }
.comp-blocco[open] > summary h3::before { content: '▾ '; }
.comp-blocco[open] > summary { margin-bottom: 8px; }