/* assets/css/precedenti.css
   Sezione "Precedenti": bilancio degli scontri ed elenco delle partite (templates/precedenti.php).
   Usata nella scheda partita e in confronto.php. Colori, spaziature e raggi vengono da main.css.
   I selettori sono ripetuti apposta: nelle pagine con i fogli di ritocco devono vincere sulle regole generiche. */

.prec.prec {
    width: 100%;
    max-width: 640px;
    margin: 32px auto 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
html body .prec.prec.prec.prec.prec.prec .prec__titolo {
    margin: 0 0 12px;
    font-family: var(--font-display) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase !important;
    color: var(--text);
}

/* --- Bilancio --- */
.prec .prec__bilancio {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 16px;
}
.prec .prec__numeri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}
.prec .prec__lato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.prec .prec__lato--n {
    align-items: center;
    text-align: center;
    min-width: 64px;
}
.prec .prec__lato--2 {
    align-items: flex-end;
    text-align: right;
}
.prec .prec__chi {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    text-decoration: none;
}
.prec .prec__lato--2 .prec__chi {
    flex-direction: row-reverse;
}
.prec .prec__chi img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: none;
}
.prec .prec__chi img.is-foto {
    object-fit: cover;
    border-radius: 4px;
    background: var(--surface-2);
}
.prec .prec__chi span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.prec a.prec__chi:hover span {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.prec .prec__num {
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-2);
}
.prec .prec__num.is-avanti {
    font-weight: 800;
    color: var(--text);
}
.prec .prec__voce {
    font-size: 12px;
    color: var(--text-2);
}
.prec .prec__barra {
    display: flex;
    gap: 2px;
    height: 4px;
    margin-top: 16px;
}
.prec .prec__barra span {
    display: block;
    height: 100%;
    border-radius: 2px;
}
.prec .prec__barra span[style*="width: 0%"] {
    display: none;
}
/* Chi ha piu vittorie ha il tratto pieno; l'altro attenuato; i pareggi nel colore dei bordi */
.prec .prec__barra-1,
.prec .prec__barra-2 { background: var(--text-2); }
.prec .prec__barra-n { background: var(--line); }
.prec .prec__barra .is-avanti { background: var(--text); }
.prec .prec__gol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.prec .prec__gol div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    min-width: 0;
}
.prec .prec__gol div:last-child {
    align-items: flex-end;
}
.prec .prec__gol .prec__gol-centro {
    align-items: center;
    min-width: 64px;
}
.prec .prec__gol dt {
    font-size: 12px;
    color: var(--text-2);
}
.prec .prec__gol dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

/* --- Elenco delle partite: stessa riga dell'elenco di Partite, con fase e data sopra --- */
.prec .prec__lista {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prec .prec__lista li {
    margin: 0;
    padding: 0;
}
.prec .rp {
    display: block;
    min-height: 48px;
    padding: 8px 14px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--text);
    text-decoration: none;
}
.prec .rp:hover {
    background: var(--surface-2);
}
.prec .rp:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.prec .rp__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-2);
}
.prec .rp__riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.prec .rp--voti .rp__riga {
    grid-template-columns: 34px minmax(0, 1fr) 62px minmax(0, 1fr) 34px;
}
.prec .rp__sq {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.prec .rp__sq--1 {
    justify-content: flex-end;
    text-align: right;
}
.prec .rp__sq img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: none;
}
.prec .rp__nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prec .rp__sigla {
    display: none;
}
.prec .rp__ris {
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}
.prec .rp__sep {
    font-weight: 400;
    color: var(--text-2);
}
.prec .rp__davs {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-2);
}
.prec .is-sotto {
    color: var(--text-2);
}
.prec .rp__ris .is-sotto {
    font-weight: 400;
}
html body .prec.prec.prec.prec .rp__voto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 22px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 599px) {
    .prec.prec {
        margin-top: 24px;
    }
    .prec .prec__bilancio {
        padding: 12px;
    }
    .prec .rp {
        padding: 8px 10px 10px;
    }
    .prec .rp__nome {
        display: none;
    }
    .prec .rp__sigla {
        display: inline;
    }
    .prec .rp__riga,
    .prec .rp--voti .rp__riga {
        gap: 6px;
    }
    .prec .rp__riga {
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    }
    .prec .rp--voti .rp__riga {
        grid-template-columns: 34px minmax(0, 1fr) 56px minmax(0, 1fr) 34px;
    }
}

/* Collegamento alla pagina di confronto, sotto l'elenco */
html body .prec-collegamento {
    max-width: 640px;
    margin: 12px auto 0;
    font-family: var(--font-ui);
    font-size: 13px;
    text-align: center;
}
html body .prec-collegamento a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Nella scheda partita la sezione sta fuori da <main>: qui prende i margini laterali della pagina */
.prec-fuori {
    padding: 0 16px;
    box-sizing: border-box;
}

/* Pronostico nelle partite da giocare (scheda partita): due percentuali e una barra sottile */
.pron {
    width: 100%;
    max-width: 640px;
    margin: 24px auto 0;
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.pron__titolo {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}
.pron__riga {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.pron__num {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-2);
}
.pron__num:last-child {
    text-align: right;
}
.pron__num.is-avanti {
    font-weight: 800;
    color: var(--text);
}
.pron__barra {
    display: flex;
    gap: 2px;
    height: 4px;
}
.pron__barra i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--text-2);
}
.pron__barra i.is-avanti {
    background: var(--text);
}
.pron__nota {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--text-2);
}
.pron__nota a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}