/* Classifica "amichevole" della Formazione (js/classifica.js). Stessa palette del brand
   (#003366 blu, #e67e22 arancio): niente verde/giallo/arancio/rosso decorativo, sono
   riservati ai livelli di allerta altrove nell'app. */

.classifica-panel { max-width: 480px; }
.classifica-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.classifica-header h3 { margin: 0; color: #003366; font-size: 1.1rem; }
.classifica-chiudi { background: transparent; border: none; font-size: 1.4rem; line-height: 1; color: #717171; cursor: pointer; padding: 4px 8px; }

.classifica-intro { font-size: 0.85rem; color: #555; line-height: 1.5; margin: 0 0 14px; }

.classifica-avviso {
    background: #f4f6f8; border-left: 4px solid #003366; border-radius: 8px;
    padding: 10px 14px; font-size: 0.85rem; color: #333; margin: 0 0 14px;
}

.classifica-iscrizione { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.classifica-iscrizione label { font-size: 0.8rem; font-weight: 700; color: #003366; width: 100%; }
.classifica-iscrizione select, #classifica-comune-filtro {
    flex: 1; min-width: 160px; padding: 10px; border-radius: 8px; border: 1px solid #ddd; font-size: 0.85rem;
}

.classifica-btn, .classifica-btn-testo {
    border-radius: 20px; font-weight: 800; font-size: 0.8rem; cursor: pointer; border: none;
}
.classifica-btn { background: #e67e22; color: #fff; padding: 10px 16px; }
.classifica-btn-testo { background: transparent; color: #b03a2e; padding: 4px 8px; text-decoration: underline; }

.classifica-tuo {
    background: #eef4fa; border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; color: #333;
    margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between;
}

.classifica-tua-posizione { font-size: 0.82rem; color: #003366; font-weight: 700; margin: 0 0 14px; }

.classifica-titolo-lista {
    color: #003366; font-size: 0.95rem; margin: 18px 0 8px; display: flex; align-items: center; gap: 8px;
}

.classifica-lista { border: 1px solid #eee; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.classifica-riga {
    display: grid; grid-template-columns: 34px 1fr auto auto; gap: 8px; align-items: center;
    padding: 8px 12px; font-size: 0.82rem; border-bottom: 1px solid #f2f2f2;
}
.classifica-riga:last-child { border-bottom: none; }
.classifica-riga:nth-child(odd) { background: #fafbfc; }
.classifica-pos { font-weight: 900; color: #003366; text-align: center; }
.classifica-nome { font-weight: 700; color: #333; }
.classifica-comune { color: #717171; font-size: 0.75rem; }
.classifica-xp { font-weight: 800; color: #9c5617; white-space: nowrap; }

.classifica-vuota { font-size: 0.82rem; color: #717171; padding: 14px; text-align: center; }

.classifica-nota { font-size: 0.72rem; color: #717171; line-height: 1.5; margin-top: 14px; }