/*
  scheda-40ore.css – stile della scheda «40+40» di Orario Facile (scheda-40ore.js).
  Usa i tasti (.btn) e i colori di Orario Facile (--line, --surface, --bad…): il tema chiaro/scuro funziona da solo.
*/
.q40-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.q40-barra a.btn { text-decoration: none; }
.q40-tutti { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 600; }
.q40-errore { color: var(--bad); font-weight: 600; }
.q40-avvisi { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--warn); border-radius: var(--r-sm); background: var(--warn-soft); }
.q40-avvisi summary { cursor: pointer; font-weight: 600; }
.q40-avvisi ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }

/* La tabella del prospetto: su telefono scorre di lato, con la colonna dei nomi ferma */
.q40-tabella-box { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.q40-tabella { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.q40-tabella caption { text-align: left; font-weight: 700; padding: 8px 10px; }
.q40-tabella caption .hint { font-weight: 400; }
.q40-tabella th, .q40-tabella td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.q40-tabella thead th { background: var(--surface-2); font-size: 12.5px; position: sticky; top: 0; }
.q40-tabella tbody th { position: sticky; left: 0; background: var(--surface); min-width: 190px; font-weight: 400; }
.q40-tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q40-oltre { color: var(--bad); font-weight: 700; }
.q40-apri { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.q40-apri:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.q40-codice { display: block; font-size: 11.5px; color: var(--text-3); }
.q40-riga.aperta > * { background: var(--accent-soft); }
.q40-vis { text-align: center !important; }
.q40-vis input { width: 18px; height: 18px; }
.q40-dettaglio > td { background: var(--surface-3); padding: 8px 12px 12px; }

/* Il dettaglio degli impegni di un docente */
.q40-mini { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.q40-mini th, .q40-mini td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.q40-mini .q40-no td { color: var(--text-3); }

.q40-scuole { margin-top: 16px; }
.q40-scuole ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.q40-scuole li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

@media print {
  .q40-tabella-box { overflow: visible; border: 0; }
  .q40-tabella { font-size: 10px; }
  .q40-tabella tbody th, .q40-tabella thead th { position: static; }
  .q40-vis { display: none; }
}

/* Ore di formazione obbligatoria scritte nel prospetto e impegni esonerati nel dettaglio */
.q40-form input { width: 64px; padding: 3px 4px; text-align: right; font: inherit; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }
.q40-esonerato td { text-decoration: line-through; color: var(--text-3); }
/* Proposte di esonero in attesa di approvazione */
.q40-proposto td { background: var(--warn-soft); }
.q40-attesa { color: var(--warn); font-weight: 600; }
.q40-mini .btn.piccolo { padding: 1px 6px; font-size: 12px; margin-left: 4px; }
.q40-esoneri { margin-top: 16px; }
.q40-esoneri label { display: inline-flex; gap: 6px; align-items: center; }
.q40-esoneri input[type="search"] { min-width: 240px; padding: 4px 6px; font: inherit; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }

/* Piano di esoneri (simulazione): criteri, scaletta dei tipi di impegno, risultato */
.q40-piano { margin: 18px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.q40-piano summary { cursor: pointer; }
.q40-piano summary h3 { display: inline; margin: 0; }
.q40-criteri { display: grid; gap: 8px; margin: 10px 0; }
.q40-criterio { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.q40-criterio input[type="checkbox"] { margin-top: 4px; }
.q40-num { padding: 2px 4px; }
.q40-scaletta { list-style: none; margin: 0 0 0 26px; padding: 0; display: grid; gap: 6px; }
.q40-tipo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.q40-tipo-reg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q40-sintesi { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.q40-elenco { margin: 0; padding-left: 16px; }
.q40-piano-tab td { vertical-align: top; }
.q40-protetti { margin-left: 26px; }
.q40-protetti summary { cursor: pointer; font-weight: 600; }
.q40-protetti-elenco { list-style: none; margin: 6px 0 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.q40-protetti-elenco li { padding: 3px 8px; border-bottom: 1px solid var(--line); }
.q40-protetti-elenco li:last-child { border-bottom: 0; }
.q40-togli-proposta { padding: 0 6px; line-height: 1.4; margin-left: 2px; }
/* incontro già svolto a cui il docente era assente (scheda «Presenze»): non conta */
.q40-assente td { text-decoration: line-through; font-style: italic; opacity: .75; }

/* Prospetto per docente: si contrae toccando il titolo */
.q40-prospetto { margin: 12px 0; }
.q40-prospetto > summary { cursor: pointer; padding: 6px 0; }
.q40-prospetto > summary h3 { display: inline; margin: 0 8px 0 0; }
/* testo letto solo dai lettori di schermo (la didascalia della tabella, già scritta nel titolo) */
.q40 .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Le sezioni della scheda (Prospetto, Piano di esoneri, Esoneri per impegno, Scuole di completamento) sono tutte uguali:
   un riquadro che si apre e si chiude toccando il titolo (▸ chiusa, ▾ aperta); all'apertura della scheda sono chiuse */
.q40-sezione { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, transparent); }
.q40-sezione > summary { cursor: pointer; list-style: none; padding: 4px 0; }
.q40-sezione > summary::-webkit-details-marker { display: none; }
.q40-sezione > summary h3 { display: inline; margin: 0 6px 0 0; font-size: 1.05rem; }
.q40-sezione > summary h3::before { content: '▸ '; color: var(--text-3); }
.q40-sezione[open] > summary h3::before { content: '▾ '; }
.q40-sezione[open] > summary { margin-bottom: 8px; }
/* Scuole di completamento: una riga per scuola con il nome e i due tasti */
.q40-scuole-elenco { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.q40-scuola { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.q40-scuola-nome input { width: 220px; max-width: 100%; }
.q40-scuola .btn.disabilitato { opacity: .5; pointer-events: none; }
.q40-num-scuole { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 4px 0; }
/* verifica di compatibilità con il piano di una scuola: occupa tutta la riga sotto i tasti */
.q40-scuola > .q40-verifica, .q40-scuola > .q40-ok, .q40-scuola > p.hint { flex-basis: 100%; margin: 4px 0 0; }
.q40-ok { color: var(--ok, #2e7d32); }
.q40-verifica > summary { cursor: pointer; color: var(--bad, #b3261e); font-weight: 600; }
.q40-verifica .btn { margin-top: 6px; }
.q40-inc-sovrapposizione td { background: color-mix(in srgb, var(--bad, #b3261e) 14%, transparent); }
.q40-inc-vicini td { background: color-mix(in srgb, var(--warn, #b26a00) 14%, transparent); }
.q40-inc-senzaOrario td { color: var(--text-3, #666); }
/* impegni presso le altre scuole nel dettaglio di un docente in COE */
.q40-sottotitolo { margin: 12px 0 4px; font-size: 1rem; }
.q40-esterno td { font-style: italic; }
.q40-sovrapposto td { background: color-mix(in srgb, var(--bad, #b3261e) 14%, transparent); }