/*
 * LA PAGINA /mappa (08/10/2026). Le regole stavano in un <style> dentro la
 * pagina; qui insieme a quelle nuove: filtri in tre gruppi, reti degli
 * operatori, soppressi, pannello per operatore, avvisi su due colonne e le
 * fonti. Le classi bl-mp-* del disegno (pallini, rete, legenda) restano in
 * style.css, perche' le usa anche il laboratorio.
 */

/* ---- l'impianto: mappa grande e pannello accanto (sotto, sul telefono) */
.mp-griglia{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
@media (max-width:991px){.mp-griglia{grid-template-columns:minmax(0,1fr)}}
.mp-mappa{position:relative;min-width:0}
.mp-mappa .bl-mp-box{padding:0;overflow:hidden;position:relative}
.mp-mappa .bl-mp{max-width:none;width:100%;height:auto;display:block;max-height:78vh;margin:0 auto}
.mp-viva .bl-mp{touch-action:pan-y;cursor:grab}
.mp-viva.mp-zoom .bl-mp{touch-action:none}
.mp-viva .bl-mp.mp-tiro{cursor:grabbing}
.mp-viva .bl-mp-rete line,.mp-viva .bl-mp-linee line,.bl-mp-terra path,.bl-mp-vicini path,.bl-mp-rete-op{vector-effect:non-scaling-stroke}
.mp-viva .bl-mp-treni circle{transform-box:fill-box;transform-origin:center;transform:scale(var(--mp-k,1))}
.mp-viva .bl-mp-citta circle,.mp-viva .bl-mp-citta text{transform-box:fill-box;transform-origin:center;transform:scale(var(--mp-kt,1))}
.mp-viva .bl-mp-citta text{transform-origin:left center}

/* ---- le viste: due schede, non due pulsanti gialli */
.mp-viste{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rm-line);border-radius:10px;margin:0 0 6px}
.mp-viste a{padding:6px 14px;border-radius:7px;font-weight:600;font-size:.9rem;text-decoration:none;color:var(--rm-muted,inherit)!important}
.mp-viste a[aria-current="page"]{background:var(--rm-surface);color:var(--rm-ink,inherit)!important;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.mp-vista-sub{color:var(--rm-muted,inherit);font-size:.92rem;margin:0 0 14px;max-width:72ch}

/* ---- i filtri: tre gruppi con la loro etichetta */
.mp-filtri{display:grid;gap:8px;margin:0 0 10px}
.mp-gruppo{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:8px}
@media (max-width:575px){.mp-gruppo{grid-template-columns:minmax(0,1fr);gap:4px}}
.mp-etichetta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rm-muted,inherit)}
.mp-barra{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 12px}
.mp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mp-chips button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rm-line);background:transparent;color:var(--rm-ink);border-radius:999px;padding:5px 12px;font-size:.86rem;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease}
.mp-chips button:hover{border-color:var(--rm-brand,#157BFF)}
.mp-chips button:active{transform:scale(.97)}
.mp-chips button[aria-pressed="true"]{background:var(--rm-brand,#157BFF);border-color:var(--rm-brand,#157BFF);color:#fff}
.mp-chips button:focus-visible{outline:2px solid var(--rm-brand,#157BFF);outline-offset:2px}
.mp-zone button{padding:4px 10px;font-size:.82rem}
.mp-cerca{display:flex;gap:6px;margin-left:auto}
.mp-cerca input{width:150px;border:1px solid var(--rm-line);background:var(--rm-surface);color:var(--rm-ink);border-radius:8px;padding:6px 10px;font-size:.9rem}
.mp-cerca button{border:1px solid var(--rm-line);background:var(--rm-surface);color:var(--rm-ink);border-radius:8px;padding:6px 10px;cursor:pointer}
@media (max-width:575px){.mp-cerca{margin-left:0;width:100%}.mp-cerca input{flex:1}}

/* ---- gli operatori: un colore per riconoscerli nei filtri e sulla rete.
   Tinte fuori dalla scala del ritardo (verde, giallo, arancio, rosso),
   perche' i pallini restano colorati dal ritardo. */
.mp-op-pt{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none;background:var(--mp-op,#7C8DA6)}
.mp-op-trenitalia{--mp-op:#7C8DA6}.mp-op-trenord{--mp-op:#2BB3A6}.mp-op-italo{--mp-op:#B0476B}
.mp-op-eav{--mp-op:#8B6CEF}.mp-op-sta{--mp-op:#4FA3E0}.mp-op-fse{--mp-op:#C9873A}
.bl-mp-rete-op{fill:none;stroke-width:1.1px;stroke-opacity:.6;stroke-linecap:round;stroke-linejoin:round}
.bl-mp-rete-op[data-op="trenord"]{stroke:#2BB3A6}
.bl-mp-rete-op[data-op="eav"]{stroke:#8B6CEF}
.bl-mp-rete-op[data-op="sta"]{stroke:#4FA3E0}
.bl-mp-rete-op[data-op="italo"]{stroke:#B0476B}
.mp-viva:not([data-op="tutti"]) .bl-mp-rete-op{stroke-opacity:.18}

/* ---- i filtri sui pallini (gli operatori: regole scritte dalla pagina) */
.mp-viva[data-filtro="av"] .bl-mp-p-a:not([data-c="av"]),
.mp-viva[data-filtro="ic"] .bl-mp-p-a:not([data-c="ic"]),
.mp-viva[data-filtro="reg"] .bl-mp-p-a:not([data-c="reg"]),
.mp-viva[data-rit="ritardo"] .bl-mp-p-a[data-f="ok"],
.mp-viva[data-rit="soppressi"] .bl-mp-p-a:not([data-s="1"]){display:none}
/* I soppressi si vedono solo chiedendoli: sono fermi all'origine, e in mezzo
   ai treni in viaggio sembrerebbero treni fermi. */
.bl-mp-p-a[data-s="1"]{display:none}
.mp-viva[data-rit="soppressi"] .bl-mp-p-a[data-s="1"]{display:inline}
.bl-mp-p-sopp{fill:transparent;stroke:var(--rm-red,#F0554D)!important;stroke-width:1.6!important;background:transparent;box-shadow:inset 0 0 0 2px var(--rm-red,#F0554D)}

/* ---- comandi, fumetto, legenda */
.mp-comandi{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.mp-comandi button{width:36px;height:36px;border-radius:8px;border:1px solid var(--rm-line);background:var(--rm-surface);color:var(--rm-ink);font:600 18px/1 system-ui,sans-serif;cursor:pointer}
.mp-comandi button:hover,.mp-comandi button:focus-visible{border-color:var(--rm-brand,#157BFF)}
.mp-fumetto{position:absolute;z-index:3;min-width:210px;max-width:280px;background:var(--rm-surface);color:var(--rm-ink);border:1px solid var(--rm-line);border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:.88rem;line-height:1.45;pointer-events:auto}
.mp-fumetto b{font-size:1rem}
.mp-fumetto .mp-f-op{font-size:.78rem;color:var(--rm-muted,inherit)}
.mp-fumetto .mp-f-rit{font-weight:700;font-variant-numeric:tabular-nums}
.mp-fumetto a{display:inline-block;margin-top:6px;font-weight:600}
.mp-trovato{animation:mp-pulsa 1.2s ease-out 3}
@keyframes mp-pulsa{0%{stroke:#fff;stroke-width:6}100%{stroke:transparent;stroke-width:0}}
@media (prefers-reduced-motion:reduce){.mp-trovato{animation:none;stroke:#fff;stroke-width:3}}
.mp-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:.8rem;color:var(--rm-muted,inherit)}
.mp-legenda span{display:inline-flex;align-items:center;gap:6px}
.mp-leg-rete{width:16px;height:2px;border-radius:2px;background:rgba(160,175,200,.5);display:inline-block}
.mp-leg-rete.mp-leg-op{background:linear-gradient(90deg,#2BB3A6,#8B6CEF,#4FA3E0)}
.mp-eta{color:var(--rm-muted,inherit);font-size:.84rem;margin:8px 0 0}

/* ---- il pannello */
.mp-lato{display:grid;gap:20px}
.mp-lato h2{font-size:var(--rm-h3,1.1rem);margin:0 0 8px}
.mp-tot > b{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:2.2rem;line-height:1.05;font-variant-numeric:tabular-nums}
.mp-tot span{color:var(--rm-muted,inherit);font-size:.9rem}
.mp-pila{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:10px 0 8px;background:var(--rm-line)}
.mp-righe{display:grid;gap:4px;font-size:.9rem}
.mp-righe div{display:flex;align-items:center;gap:8px}
.mp-righe b{margin-left:auto;font-variant-numeric:tabular-nums}
.mp-ops{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mp-ops button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 8px;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.mp-ops button:hover,.mp-ops button[aria-pressed="true"]{background:var(--rm-surface)}
.mp-ops button:focus-visible{outline:2px solid var(--rm-brand,#157BFF)}
.mp-ops .mp-op-n{font-weight:600}
.mp-ops b{font-variant-numeric:tabular-nums}
.mp-ops .mp-op-pc{grid-column:2/4;font-size:.8rem;color:var(--rm-muted,inherit)}
.mp-peggio{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mp-peggio li a{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:7px 0;border-bottom:1px solid var(--rm-line);text-decoration:none;color:inherit}
.mp-peggio .mp-pc{font-weight:600}
.mp-peggio .mp-pd{grid-column:1;color:var(--rm-muted,inherit);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-peggio .mp-pr{grid-row:1/3;grid-column:2;align-self:center;font-weight:700;color:var(--rm-red,#F0554D);font-variant-numeric:tabular-nums}

/* ---- che cosa sta succedendo: avvisi a sinistra, infolavori a destra */
.mp-avvisi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:991px){.mp-avvisi{grid-template-columns:minmax(0,1fr)}}
.mp-av-h{display:flex;align-items:baseline;gap:8px;font-size:var(--rm-h3,1.1rem);margin:0 0 10px}
.mp-av-h span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.75rem;color:var(--rm-muted,inherit)}
.mp-av{border:1px solid var(--rm-line);border-left:3px solid var(--rm-amber,#F5B524);border-radius:10px;padding:12px 14px;margin:0 0 10px;background:var(--rm-surface)}
.mp-av h4{font-size:1rem;margin:0 0 4px;line-height:1.3}
.mp-av p{margin:6px 0 0;font-size:.9rem;line-height:1.5;max-width:72ch}
.mp-av-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--rm-muted,inherit)}
.mp-av-reg{border:1px solid var(--rm-line);border-radius:999px;padding:0 8px}
.mp-av-treni{font-size:.84rem}
.mp-av-treni a{margin-right:6px;font-family:"JetBrains Mono",ui-monospace,monospace}
.mp-doc-reg{margin:0 0 10px}
.mp-doc-reg button{padding:3px 10px;font-size:.8rem}
.mp-docs{display:grid;gap:6px}
.mp-doc{border:1px solid var(--rm-line);border-radius:10px;background:var(--rm-surface)}
.mp-doc summary{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.mp-doc summary::-webkit-details-marker{display:none}
.mp-doc summary::before{content:"+";font-weight:700;color:var(--rm-muted,inherit);width:12px;flex:none}
.mp-doc[open] summary::before{content:"\2212"}
.mp-doc-t{flex:1;font-weight:600;font-size:.92rem}
.mp-doc-q{font-size:.78rem;color:var(--rm-muted,inherit);white-space:nowrap}
.mp-doc-corpo{padding:0 14px 12px 34px;font-size:.9rem;line-height:1.5}
.mp-doc-corpo p{margin:6px 0 0;max-width:72ch}
.mp-doc[hidden]{display:none}

/* ---- come e' fatta: le fonti in riquadri, poi tre paragrafi */
.mp-fonti{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:0 0 18px}
.mp-fonte{border:1px solid var(--rm-line);border-radius:10px;padding:12px 14px;background:var(--rm-surface)}
.mp-fonte h3{font-size:.98rem;margin:0 0 4px}
.mp-fonte p{margin:0;font-size:.88rem;line-height:1.45}
.mp-fonte .mp-fonte-chi{margin-top:8px;font-size:.76rem;color:var(--rm-muted,inherit)}
.mp-come{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 28px}
.mp-come h3{font-size:1rem;margin:0 0 6px}
.mp-come p{margin:0;font-size:.92rem;line-height:1.55;color:var(--rm-muted,inherit)}
.mp-sez + .mp-sez{margin-top:36px}
@media (prefers-reduced-motion:reduce){.mp-chips button{transition:none}}