/* Quiz 3ª PIAs — componenti
   Professore e fumetti, pulsanti, pillole, finestre modali. */

/* ---------- il professore ---------- */
.prof { width: 150px; height: 150px; flex: none; }
.prof img { width: 100%; height: 100%; object-fit: contain; }
.prof-piccolo { width: 110px; height: 110px; }
.prof-mini { width: 86px; height: 86px; }

.prof-hero { display: flex; align-items: center; gap: 4px; margin: 4px 0 18px; }
.fumetto {
  position: relative; flex: 1;
  background: var(--foglio); border-radius: var(--raggio);
  padding: 12px 14px; font-size: 1rem; line-height: 1.35;
  box-shadow: var(--ombra);
  font-family: var(--font-titoli); font-weight: 500; color: var(--inchiostro);
}
.fumetto::before {
  content: ""; position: absolute; left: -9px; top: 50%; margin-top: -9px;
  border: 9px solid transparent; border-right-color: var(--foglio); border-left: 0;
}
.fumetto-sx::before { left: -9px; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 13px 18px;
  background: var(--foglio); color: var(--inchiostro);
  font-family: var(--font-titoli); font-weight: 600; font-size: 1.02rem;
  transition: transform .1s, background .2s;
}
.btn:active { transform: translateY(2px); }
.btn:focus-visible, .card-materia:focus-visible, .card-modalita:focus-visible, .opzione:focus-visible { outline: 3px solid var(--evidenziatore); outline-offset: 2px; }
.btn-primario { background: var(--materia); color: #fff; }
.btn-ombra { box-shadow: var(--ombra); }
.btn-largo { width: 100%; margin-top: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.riga-azioni { display: flex; gap: 10px; margin-top: 22px; }
.riga-azioni .btn { flex: 1; }
.riga-azioni-2 .btn { flex: 1 1 0; min-width: 0; }
.pillola {
  background: var(--papillon); color: #fff; border-radius: 99px;
  font-size: .8rem; padding: 2px 8px; min-width: 24px; text-align: center; font-weight: 700;
}
.pillola:empty, .pillola[data-zero] { background: var(--carta-scura); color: var(--inchiostro-2); }
.nota-piede { font-size: .85rem; color: var(--inchiostro-2); text-align: center; margin: 26px 10px 0; }

/* ---------- finestre ---------- */
.velo { position: fixed; inset: 0; background: rgba(23,51,59,.55); display: grid; place-items: end center; z-index: 50; padding: 16px; }
.finestra {
  width: 100%; max-width: var(--larghezza); background: var(--foglio);
  border-radius: 22px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 88vh; max-height: 88dvh; overflow: auto; animation: sale .25s ease-out;
}
@keyframes sale { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.finestra h3 { font-family: var(--font-titoli); font-weight: 600; font-size: 1.3rem; margin: 0 0 10px; }
.finestra p { margin: 8px 0; }
.finestra img.anteprima { width: 100%; border-radius: 12px; border: 1px solid var(--carta-scura); margin: 10px 0; }
.finestra .riga-azioni { margin-top: 16px; }
.finestra label.campo { display: block; margin: 12px 0; font-weight: 700; }
.finestra input[type=text] {
  display: block; width: 100%; margin-top: 6px; font: inherit; padding: 11px 12px;
  border: 2px solid var(--carta-scura); border-radius: 12px;
}
.finestra .interr { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: 400; }
.finestra .interr input { width: 22px; height: 22px; accent-color: var(--petrolio); }