/* ==============================================================
   SISTEMA CORREZIONI MMC — Stile per i satelliti
   --------------------------------------------------------------
   Questo file contiene SOLO le regole per la trasparenza
   editoriale delle correzioni.
   
   Si appoggia al file principale (magazine.css) senza modificarlo.
   Da includere nell'header con:
       <link rel="stylesheet" href="/css/correzioni.css">
   
   v1.0 — 8 maggio 2026
   ============================================================== */


/* --------------------------------------------------------------
   PALETTE — 5 colori a rotazione (poi cicla)
   Ogni colore è abbastanza tenue da non disturbare la lettura
   ma abbastanza visibile da segnalare l'intervento editoriale.
   -------------------------------------------------------------- */
:root {
    --corretto-1: #b8e0c4;   /* verde menta */
    --corretto-2: #a8d4ff;   /* azzurro cielo */
    --corretto-3: #ffe599;   /* giallo paglia */
    --corretto-4: #d0bce6;   /* lilla */
    --corretto-5: #ffc9b8;   /* rosa salmone */
}


/* --------------------------------------------------------------
   MARK NEL CORPO — testo corretto evidenziato
   Usa il colore di fondo corrispondente alla classe corretto-N
   -------------------------------------------------------------- */
mark.corretto-1,
mark.corretto-2,
mark.corretto-3,
mark.corretto-4,
mark.corretto-5 {
    padding: 1px 3px;
    border-radius: 2px;
    color: inherit;
    font-style: inherit;
    cursor: help;
}

mark.corretto-1 { background: var(--corretto-1); }
mark.corretto-2 { background: var(--corretto-2); }
mark.corretto-3 { background: var(--corretto-3); }
mark.corretto-4 { background: var(--corretto-4); }
mark.corretto-5 { background: var(--corretto-5); }


/* --------------------------------------------------------------
   BLOCCO ELENCO CORREZIONI — in fondo all'articolo
   -------------------------------------------------------------- */
.elenco-correzioni {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #d8d0c0;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}


/* --------------------------------------------------------------
   RIGA SINGOLA CORREZIONE — quadratino + testo
   -------------------------------------------------------------- */
.riga-correzione {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    font-style: italic;
}

/* Quadratino: prende il colore della classe corretto-N applicata
   alla riga stessa */
.riga-correzione .quadratino {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.riga-correzione.corretto-1 .quadratino { background: var(--corretto-1); }
.riga-correzione.corretto-2 .quadratino { background: var(--corretto-2); }
.riga-correzione.corretto-3 .quadratino { background: var(--corretto-3); }
.riga-correzione.corretto-4 .quadratino { background: var(--corretto-4); }
.riga-correzione.corretto-5 .quadratino { background: var(--corretto-5); }