/* Modulo "Formazione": hub moduli, motore scenari, simulatore RCP a sensori.
   Pagina standalone (formazione.html), stesso linguaggio visivo di
   impatto.css/app.css: blu primario #003366, card bianche radius 16px,
   oro #f1c40f per i badge (gia' usato dal badge "Cittadino Sicuro"). */

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f4f6f8;
    color: #333;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* .sos-overlay/.sos-panel: stessa regola di css/app.css (non caricato qui, la pagina e'
   standalone) cosi' anche la finestra della classifica (js/classifica.js) ha lo sfondo
   scuro a schermo intero e il pannello centrato, e js/a11y.js (gia' caricato in questa
   pagina) le da' gratis focus trap ed Escape riconoscendola dalla classe. */
.sos-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sos-panel { background: rgba(255, 255, 255, 0.95); width: 100%; max-width: 350px; border-radius: 24px; padding: 25px; box-shadow: 0 15px 50px rgba(0,0,0,0.2); text-align: left; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-height: 90vh; overflow-y: auto; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.5); }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Pulsante generico per aprire una finestra dell'hub (Classifica, Modalità Scuola,
   Materiali per l'insegnante): un solo posto per lo stile, condiviso da tutti e tre. */
.form-azione-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #003366; border: 2px solid #003366;
    border-radius: 24px; padding: 10px 18px; font-weight: 800; font-size: 0.85rem;
    cursor: pointer; margin: 0 0 14px; text-decoration: none;
}

/* --- Header, stesso pattern di storia.html/mappa.html --- */
.form-header {
    background: #003366; color: white; padding: 15px 20px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); position: sticky; top: 0; z-index: 100;
}
.form-back-btn { color: white; text-decoration: none; font-size: 1.2rem; flex-shrink: 0; }
.form-header-title { font-weight: 800; font-size: 1.1rem; margin: 0; text-transform: uppercase; }

.form-main { padding: 16px; max-width: 640px; margin: 0 auto; }

/* --- Card rango complessivo (XP aggregato su tutti i moduli/livelli) --- */
.rango-card {
    background: linear-gradient(135deg, #003366, #005599); color: white;
    border-radius: 16px; padding: 16px 18px; margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0,51,102,0.25); display: flex; align-items: center; gap: 14px;
}
.rango-icona { font-size: 2.2rem; color: #f1c40f; flex-shrink: 0; }
.rango-testo { flex: 1; min-width: 0; }
.rango-titolo { font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.rango-barra { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.25); overflow: hidden; }
.rango-barra-fill { height: 100%; background: #f1c40f; border-radius: 4px; transition: width 0.4s ease; }
.rango-sub { font-size: 0.72rem; opacity: 0.9; margin-top: 6px; }

/* --- Bottone attestato PDF --- */
.attestato-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: white; color: #003366; border: 2px solid #003366; border-radius: 12px;
    padding: 10px; font-size: 0.82rem; font-weight: 700; cursor: pointer; margin-bottom: 16px; font-family: inherit;
}

/* --- Suggerimento modulo in base al rischio del comune preferito --- */
.suggerimento-rischio {
    background: #fff8e6; border: 1px solid #f1c40f; border-radius: 14px; padding: 12px 14px;
    margin-bottom: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.suggerimento-rischio i { font-size: 1.6rem; color: #d68910; flex-shrink: 0; }
.suggerimento-titolo { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; color: #b8860b; letter-spacing: 0.03em; }
.suggerimento-testo { font-size: 0.85rem; color: #444; margin-top: 2px; }

/* --- Rischi rilevanti per il comune preferito (chip che aprono il modulo) --- */
.profilo-rischio { margin: -6px 0 16px 0; }
.profilo-titolo { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; color: #5d6d7e; letter-spacing: 0.03em; margin-bottom: 6px; }
.profilo-chip-riga { display: flex; flex-wrap: wrap; gap: 6px; }
.profilo-chip {
    border: 1px solid #d5dbdb; background: #fff; color: #2c3e50; border-radius: 999px;
    padding: 6px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.profilo-chip i { margin-right: 4px; color: #d68910; }
.profilo-chip.completato { background: #eafaf1; border-color: #a9dfbf; color: #1e8449; }
.profilo-chip.completato i { color: #1e8449; }
.profilo-chip:focus-visible { outline: 2px solid #2471a3; outline-offset: 2px; }

/* --- Sezione Formazione Operatori --- */
.sezione-operatori-titolo { font-size: 1rem; color: #34495e; margin: 26px 0 6px 0; }
.sezione-operatori-titolo i { margin-right: 6px; }

/* --- Attestato PDF, catturato da html2pdf.js/html2canvas --- */
/* Nascosto con display:none finche' non serve: html2canvas cattura in modo
   inaffidabile (spesso una pagina bianca) gli elementi posizionati fuori
   dal viewport con left negativo — va reso davvero visibile (anche solo per
   l'istante della cattura) invece che nascosto con un trucco CSS. Vedi
   Formazione.scaricaAttestato() in js/formazione.js: lo mostra come overlay
   a schermo intero solo durante la generazione del PDF, poi lo richiude. */
.attestato-template {
    display: none; position: fixed; top: 0; left: 0; width: 297mm; height: 210mm;
    z-index: 99999; background: white;
}
.attestato-cornice {
    width: 100%; height: 100%; box-sizing: border-box; border: 10px solid #003366; padding: 30px 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333;
}
.attestato-logo { font-size: 3rem; color: #003366; margin-bottom: 10px; }
.attestato-logo-img { height: 96px; width: 96px; margin-bottom: 10px; }
.attestato-ente { font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; color: #666; margin-bottom: 20px; }
.attestato-titolo-doc { font-size: 2rem; font-weight: 800; color: #003366; margin-bottom: 24px; }
.attestato-corpo { font-size: 1.1rem; line-height: 2; max-width: 700px; }
.attestato-nome { font-size: 1.6rem; font-weight: 800; color: #003366; margin: 6px 0; }
.attestato-rango { font-size: 1.4rem; font-weight: 800; color: #f39c12; margin: 6px 0; }
.attestato-xp { font-size: 0.95rem; color: #666; }
.attestato-data { margin-top: 30px; font-size: 0.9rem; color: #666; }
.attestato-nota { margin-top: 20px; font-size: 0.7rem; color: #6b6b6b; max-width: 600px; }

/* --- Navigazione secondaria (torna a livelli/moduli) --- */
.sotto-nav { margin-bottom: 10px; }
.sotto-nav-back {
    background: none; border: none; color: #003366; font-weight: 700; font-size: 0.85rem;
    padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}

.livelli-titolo { font-size: 1.05rem; color: #003366; margin: 0 0 14px 0; }
.livelli-titolo i { margin-right: 6px; }

/* --- Pallini livelli sulla card modulo --- */
.modulo-livelli-dots { display: flex; justify-content: center; gap: 5px; margin: 8px 0 4px 0; }
.modulo-livelli-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #dfe4e8; }
.modulo-livelli-dots .dot.fatto { background: #f1c40f; }

/* --- Lista livelli di un modulo --- */
.livello-riga {
    background: white; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06); display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; gap: 10px;
}
.livello-riga.bloccato { opacity: 0.55; cursor: default; }
/* Indicatore di focus per le card/righe rese interattive con tabindex via JS
   (formazione.js): un <div> non ha un focus ring nativo come un <button>. */
.livello-riga:focus-visible, .modulo-card:focus-visible, .suggerimento-rischio:focus-visible {
    outline: 2px solid #2471a3; outline-offset: 2px;
}
.livello-riga.completato { border-left: 4px solid #f1c40f; }
.livello-riga-titolo { font-weight: 800; color: #003366; font-size: 0.95rem; }
.livello-riga-xp { font-size: 0.72rem; color: #6b6b6b; margin-top: 2px; }
.livello-riga-dx { font-size: 0.78rem; color: #555; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.livello-riga.completato .livello-riga-dx { color: #d68910; }
.livello-riga.bloccato .livello-riga-dx { color: #6b6b6b; }

/* --- Hub: griglia moduli --- */
.modulo-intro { font-size: 0.88rem; color: #555; line-height: 1.5; margin: 0 0 18px 0; }
.modulo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; }
.modulo-card {
    background: white; border-radius: 16px; padding: 18px 12px; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06); border: 2px solid transparent;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.modulo-card.completato { border-color: #f1c40f; }
.modulo-card .modulo-icona { font-size: 2.1rem; margin-bottom: 8px; color: #003366; }
.modulo-card.completato .modulo-icona { color: #f39c12; }
.modulo-card .modulo-titolo { font-weight: 800; font-size: 0.92rem; color: #003366; }
.modulo-card .modulo-stato { font-size: 0.72rem; color: #6b6b6b; margin-top: 6px; font-weight: 600; }
.modulo-card .modulo-stato.completato { color: #d68910; }
.modulo-card .modulo-stato.completato i { color: #f1c40f; }

/* --- Vista scenario --- */
.scenario-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.scenario-progress span { flex: 1; height: 5px; border-radius: 3px; background: #dfe4e8; }
.scenario-progress span.fatto { background: #27ae60; }
.scenario-progress span.attivo { background: #3498db; }

.scenario-step-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.scenario-step-icona { font-size: 2.4rem; color: #003366; margin-bottom: 10px; text-align: center; }
.scenario-step-testo { font-size: 1rem; font-weight: 700; color: #003366; line-height: 1.4; margin-bottom: 16px; text-align: center; }

.scelta-btn {
    display: block; width: 100%; text-align: left; background: #f4f6f8; border: 2px solid #e5e9ec;
    border-radius: 12px; padding: 12px 14px; font-size: 0.88rem; color: #333; margin-bottom: 10px;
    cursor: pointer; font-family: inherit;
}
.scelta-btn:disabled { cursor: default; }
.scelta-btn.corretta { background: #eafaf1; border-color: #27ae60; color: #1e7e42; font-weight: 700; }
.scelta-btn.errata { background: #fdecea; border-color: #e74c3c; color: #a93226; }

.scenario-spiegazione {
    background: #eef4fb; border-left: 4px solid #3498db; border-radius: 8px;
    padding: 12px 14px; font-size: 0.85rem; color: #234; line-height: 1.5; margin: 14px 0;
}

.form-btn {
    /* Stesso fix di contrasto di .gps-btn in app.css: vedi il commento li'. */
    background: linear-gradient(135deg, #2471a3, #1f618d); color: white; border: none;
    padding: 14px; width: 100%; border-radius: 12px; font-size: 0.95rem; font-weight: 800;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.form-btn.arancio { background: linear-gradient(135deg, #f39c12, #d35400); }
.form-btn.verde { background: linear-gradient(135deg, #27ae60, #229954); }
.form-btn:disabled { opacity: 0.5; cursor: default; }

/* --- Risultato modulo --- */
.risultato-box { background: white; border-radius: 16px; padding: 28px 20px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.risultato-box i { font-size: 3.6rem; margin-bottom: 14px; }
.risultato-box h3 { margin: 0 0 8px 0; }
.risultato-box p { font-size: 0.88rem; color: #555; margin: 0 0 18px 0; }

/* --- Simulatore RCP --- */
.rcp-checklist { list-style: none; padding: 0; margin: 0 0 16px 0; }
.rcp-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; padding: 8px 0; border-bottom: 1px solid #f0f2f4; }
.rcp-checklist li i { color: #27ae60; margin-top: 2px; }

.rcp-disclaimer { font-size: 0.72rem; color: #6b6b6b; font-style: italic; line-height: 1.4; margin-top: 10px; text-align: center; }

.rcp-sim-panel { text-align: center; }
.rcp-metronomo {
    width: 130px; height: 130px; border-radius: 50%; margin: 10px auto 18px auto;
    background: radial-gradient(circle, #eaf3fc, #d6e8fb); display: flex; align-items: center; justify-content: center;
    flex-direction: column; box-shadow: inset 0 0 0 4px #3498db;
}
.rcp-metronomo.pulse { animation: rcpPulse 0.18s ease-out; }
@keyframes rcpPulse { 0% { transform: scale(1.12); box-shadow: inset 0 0 0 4px #27ae60; } 100% { transform: scale(1); box-shadow: inset 0 0 0 4px #3498db; } }
.rcp-metronomo .conteggio { font-size: 2.2rem; font-weight: 800; color: #003366; }
.rcp-metronomo .etichetta { font-size: 0.68rem; color: #666; text-transform: uppercase; letter-spacing: 0.04em; }

.rcp-bpm-live { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.rcp-bpm-live.in-range { color: #27ae60; }
.rcp-bpm-live.fuori-range { color: #9c5617; }
.rcp-bpm-sub { font-size: 0.75rem; color: #6b6b6b; margin-bottom: 18px; }

.rcp-tap-zone {
    width: 100%; padding: 26px; border-radius: 16px; border: none;
    background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; font-weight: 800; font-size: 1rem;
    cursor: pointer; margin-bottom: 14px; -webkit-tap-highlight-color: transparent; user-select: none;
}
.rcp-tap-zone:active { transform: scale(0.97); }

.rcp-timer { font-size: 0.8rem; color: #6b6b6b; margin-bottom: 14px; }
.rcp-fallback-note { font-size: 0.72rem; color: #6b6b6b; margin-bottom: 14px; }