/* wwwroot/css/quiz-mmg.css — esercitazione ai quiz del concorso MMG */

.qz { max-width: 960px; }

.qz-card {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(5, 39, 103, 0.05);
}

.qz-h2 { font-size: 1.15rem; font-weight: 700; color: #052767; margin-bottom: 0.75rem; }
.qz-h3 { font-size: 1rem; font-weight: 700; color: #052767; margin-bottom: 0.5rem; }

/* ── Contatori della sessione ─────────────────────────────── */
.qz-contatori {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.qz-range { font-weight: 600; color: #052767; margin-right: 0.5rem; }
.qz-chip {
    background: #eef2f8;
    color: #33415c;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.875rem;
}
.qz-chip--ok { background: #e3f6ea; color: #17663a; }
.qz-chip--ko { background: #fde8e8; color: #a12020; }

/* ── Domanda ──────────────────────────────────────────────── */
.qz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.85rem;
    color: #5b6b85;
    margin-bottom: 0.75rem;
}
.qz-num {
    background: #052767;
    color: #fff;
    border-radius: 6px;
    padding: 0.05rem 0.45rem;
    font-weight: 700;
    font-size: 0.8rem;
}
.qz-testo { font-size: 1.08rem; font-weight: 600; color: #1d2433; margin-bottom: 1rem; }

.qz-opzioni { display: flex; flex-direction: column; gap: 0.5rem; }
.qz-opzione {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
    background: #f7f9fc;
    border: 1.5px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.97rem;
    color: #1d2433;
    transition: border-color 0.12s, background 0.12s;
}
.qz-opzione:not(:disabled):hover { border-color: #1b6ec2; background: #eef5fd; cursor: pointer; }
.qz-opzione:disabled { cursor: default; color: #1d2433; }
.qz-lettera {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #c5d0e0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.qz-opzione--giusta { background: #e3f6ea; border-color: #2e9e5b; }
.qz-opzione--giusta .qz-lettera { background: #2e9e5b; border-color: #2e9e5b; color: #fff; }
.qz-opzione--sbagliata { background: #fde8e8; border-color: #d64545; }
.qz-opzione--sbagliata .qz-lettera { background: #d64545; border-color: #d64545; color: #fff; }
.qz-opzione--spenta { opacity: 0.6; }

.qz-esito { margin-top: 1rem; font-weight: 700; }
.qz-esito--ok { color: #17663a; }
.qz-esito--ko { color: #a12020; }

/* La motivazione è testo semplice: gli a capo del testo di riferimento
   (paragrafi, elenchi puntati) vanno mantenuti. */
.qz-spiegazione {
    margin-top: 0.75rem;
    background: #f4f6fa;
    border-left: 4px solid #1b6ec2;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    white-space: pre-line;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #2a3346;
}
.qz-spiegazione-titolo { font-weight: 700; color: #052767; margin-bottom: 0.25rem; white-space: normal; }

/* ── Risultato ────────────────────────────────────────────── */
.qz-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.qz-stat { background: #f4f6fa; border-radius: 10px; padding: 0.75rem; text-align: center; }
.qz-stat-num { font-size: 1.6rem; font-weight: 800; color: #052767; }
.qz-stat-label { font-size: 0.8rem; color: #5b6b85; text-transform: uppercase; letter-spacing: 0.03em; }
.qz-stat--ok .qz-stat-num { color: #17663a; }
.qz-stat--ko .qz-stat-num { color: #a12020; }

.qz-errore { border-top: 1px solid #e3e8f0; padding: 0.6rem 0; }
.qz-errore summary { cursor: pointer; display: flex; gap: 0.5rem; align-items: flex-start; }
.qz-errore-corpo { padding: 0.5rem 0 0 0.25rem; font-size: 0.95rem; }

/* ── Nuova sessione ───────────────────────────────────────── */
.qz-ordine {
    display: inline-flex;
    border: 1.5px solid #dbe3ee;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.qz-ordine-btn {
    background: #f7f9fc;
    border: none;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    color: #33415c;
}
.qz-ordine-btn + .qz-ordine-btn { border-left: 1.5px solid #dbe3ee; }
.qz-ordine-btn--attivo { background: #052767; color: #fff; font-weight: 600; }

.qz-fonti { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.qz-fonte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #f7f9fc;
    border: 1.5px solid #dbe3ee;
    border-radius: 10px;
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
    color: #1d2433;
}
.qz-fonte:hover { border-color: #1b6ec2; }
.qz-fonte span { font-size: 0.8rem; color: #5b6b85; }

.qz-range-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.qz-range-form label { display: flex; flex-direction: column; font-size: 0.85rem; color: #5b6b85; gap: 0.2rem; }
.qz-range-form input { width: 7rem; }

@media (max-width: 600px) {
    .qz-card { padding: 1rem; }
    .qz-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}