:root{--al-bg:#eef4f8;--al-card:#fff;--al-ink:#203448;--al-muted:#5a7084;--al-stroke:#d7e2eb;--al-blue:#23547f}html[data-mp-theme=dark]{--al-bg:#0b111b;--al-card:#182434;--al-ink:#e5eff8;--al-muted:#a9becd;--al-stroke:#304457;--al-blue:#94c9ee}
html,body{min-height:100%;margin:0;background:var(--al-bg);color:var(--al-ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.al-wrap{max-width:1130px;margin:auto;padding:24px 18px 60px}.al-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.al-back{display:inline-block;margin-bottom:17px;color:var(--al-blue);text-decoration:none;font-weight:750}.al-eyebrow{font-size:11px;letter-spacing:1.5px;color:var(--al-muted);font-weight:800}.al-head h1{font-size:clamp(28px,4vw,42px);margin:8px 0}.al-head p{margin:0;color:var(--al-muted)}.al-zone{font-size:12px;white-space:nowrap;padding:11px 13px;border:1px solid var(--al-stroke);border-radius:13px;font-weight:800;background:var(--al-card)}.al-status{padding:12px 15px;background:var(--al-card);border:1px solid var(--al-stroke);border-radius:13px;margin:12px 0 23px;color:var(--al-muted);font-size:13px}.al-sectiontop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:26px 0 13px}.al-sectiontop h2,.al-summary h2{font-size:20px;margin:0}.al-sectiontop span{color:var(--al-muted);font-size:12px}.al-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.al-alert{border:1px solid var(--al-stroke);border-top:7px solid var(--risk,#6d8795);background:var(--al-card);border-radius:17px;padding:20px;box-shadow:0 5px 20px rgba(0,0,0,.04)}.al-alert h3{margin:12px 0 7px;font-size:20px}.al-alert p{font-size:14px;line-height:1.5;color:var(--al-muted)}.al-chip{display:inline-block;font-size:12px;padding:6px 10px;background:var(--riskbg,#e9eef1);border-radius:9px;color:var(--risktext,#203448);font-weight:850}.al-alert small{color:var(--al-muted)}.al-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}.al-metric{background:var(--al-card);border:1px solid var(--al-stroke);border-radius:15px;padding:18px}.al-metric small{display:block;color:var(--al-muted);font-size:12px}.al-metric strong{display:block;font-size:29px;margin:9px 0}.al-metric p{font-size:12px;color:var(--al-muted);margin:0}.al-summary{background:var(--al-card);border:1px solid var(--al-stroke);border-radius:17px;padding:24px;margin-top:25px}.al-summary p{line-height:1.7;margin-bottom:0}.al-foot{font-size:12px;color:var(--al-muted);line-height:1.7;margin-top:23px}.al-foot a{color:var(--al-blue)}@media(max-width:640px){.al-wrap{padding:15px 12px 38px}.al-head{display:block}.al-zone{display:inline-block;margin-top:13px}.al-sectiontop{display:block}.al-sectiontop span{display:block;margin-top:5px}.al-grid{grid-template-columns:1fr}.al-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.al-metric strong{font-size:23px}}

/* V1.1: header rosso come fascia allerte home, card colorate dark-friendly. */
.al-header-main{flex:1;min-width:0}
.al-title-banner{border-radius:16px;padding:20px 24px;background:linear-gradient(120deg,#8d202e 0%,#ba3040 55%,#801b28 100%);border:1px solid #e66b78;color:#fff;box-shadow:0 8px 24px rgba(102,13,30,.18)}
.al-title-banner .al-eyebrow,.al-title-banner p{color:#f9dce0}
.al-title-banner h1{color:#fff}
.al-head{align-items:flex-end}
.al-alert{border-color:color-mix(in srgb,var(--risk) 60%,var(--al-stroke));background:linear-gradient(135deg,var(--riskwash),var(--al-card) 80%)}
.al-alert[data-risk="giallo"]{--riskwash:rgba(209,158,31,.23)}
.al-alert[data-risk="arancione"]{--riskwash:rgba(223,107,26,.24)}
.al-alert[data-risk="rosso"]{--riskwash:rgba(199,49,67,.27)}
html[data-mp-theme="dark"] .al-alert[data-risk="giallo"]{--riskwash:rgba(192,142,26,.28)}
html[data-mp-theme="dark"] .al-alert[data-risk="arancione"]{--riskwash:rgba(218,103,22,.29)}
html[data-mp-theme="dark"] .al-alert[data-risk="rosso"]{--riskwash:rgba(204,45,66,.32)}
.al-alert h3{color:var(--al-ink)}
.al-summary strong{font-weight:850;color:var(--al-ink)}
@media(max-width:640px){.al-title-banner{padding:17px 15px}.al-title-banner h1{font-size:27px}.al-zone{margin-top:12px}}

/* V1.2: la testata condivisa con le altre pagine di MeteoPutignano. */
.mp-alert-page .site-header{position:relative;z-index:100;height:86px;background:rgba(247,252,255,.78);border-bottom:1px solid rgba(9,55,87,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.mp-alert-page .site-header .shell{width:min(1280px,calc(100% - 40px));margin:auto}
.mp-alert-page .site-header .header-inner{height:100%;display:flex;align-items:center;gap:34px}
.mp-alert-page .site-header .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0b2034;min-width:max-content}
.mp-alert-page .site-header .brand strong{display:block;font-size:20px;letter-spacing:-.55px}
.mp-alert-page .site-header .brand small{display:block;font-size:12px;color:#687d89;margin-top:2px}
.mp-alert-page .site-header .brand-mark{width:43px;height:43px;position:relative;flex:none}
.mp-alert-page .site-header .brand-sun{position:absolute;width:25px;height:25px;border-radius:50%;background:#ffc83d;right:1px;top:2px;box-shadow:0 0 24px rgba(255,183,0,.45)}
.mp-alert-page .site-header .brand-cloud{position:absolute;width:32px;height:13px;border-radius:20px;background:#fff;left:1px;bottom:7px;box-shadow:0 4px 10px rgba(28,79,111,.15)}
.mp-alert-page .site-header .brand-cloud:before,.mp-alert-page .site-header .brand-cloud:after{content:"";position:absolute;border-radius:50%;background:#fff}
.mp-alert-page .site-header .brand-cloud:before{width:16px;height:16px;left:5px;top:-8px}
.mp-alert-page .site-header .brand-cloud:after{width:12px;height:12px;right:3px;top:-5px}
.mp-alert-page .site-header .top-nav{display:flex;gap:6px;margin-left:auto}
.mp-alert-page .site-header .top-nav a{padding:9px 13px;border-radius:7px;text-decoration:none;color:#53697b;font-size:13px;font-weight:700}
.mp-alert-page .site-header .top-nav a:hover{background:rgba(125,180,211,.16);color:#0b75d1}
.mp-alert-page .site-header .live-pill{font-size:11px;font-weight:800;letter-spacing:.8px;background:#fff;padding:9px 12px;border-radius:999px;white-space:nowrap;color:#0b2034}
.mp-alert-page .site-header .live-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20c77a;margin-right:6px}
.mp-alert-page .site-header .live-pill span{font-weight:600;color:#6b7d8e;margin-left:4px}
html[data-mp-theme="dark"] .mp-alert-page .site-header{background:rgba(13,22,34,.96);border-bottom-color:#314457}
html[data-mp-theme="dark"] .mp-alert-page .site-header .brand,html[data-mp-theme="dark"] .mp-alert-page .site-header .top-nav a{color:#e4eef8}
html[data-mp-theme="dark"] .mp-alert-page .site-header .brand small{color:#8ea8b5}
html[data-mp-theme="dark"] .mp-alert-page .site-header .live-pill{background:#172639;color:#e4eef8}
@media(max-width:900px){.mp-alert-page .site-header .header-inner{gap:10px;position:relative}.mp-alert-page .site-header .mp-menu-toggle{display:flex;order:3;margin-left:4px}.mp-alert-page .site-header .live-pill{margin-left:auto;order:2}.mp-alert-page .site-header .top-nav{display:none!important;position:absolute;top:calc(100% + 8px);right:0;left:0;margin:0!important;padding:9px;flex-direction:column;gap:4px;background:#0c2636;border:1px solid rgba(255,255,255,.15);border-radius:15px;box-shadow:0 18px 38px rgba(2,19,32,.35);z-index:101}.mp-alert-page .site-header .top-nav.mp-menu-open{display:flex!important}.mp-alert-page .site-header .top-nav a{display:block;padding:13px 15px;color:#dbeaf2!important;font-size:15px!important}.mp-alert-page .site-header .brand small{display:none}}
@media(max-width:620px){.mp-alert-page .site-header{height:72px}.mp-alert-page .site-header .shell{width:calc(100% - 24px)}.mp-alert-page .site-header .brand strong{font-size:17px}.mp-alert-page .site-header .brand-mark{transform:scale(.86)}.mp-alert-page .site-header .live-pill span{display:none}}

/* Centro Allerte: radar VMI fisso, colonna destra riservata per la prossima sezione. */
.al-radar-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:17px;align-items:start}
.al-radar-card{min-width:0;border:1px solid var(--al-stroke);border-radius:17px;background:var(--al-card);padding:15px;box-shadow:0 5px 20px rgba(0,0,0,.04)}
.al-radar-cardhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline;margin-bottom:10px}
.al-radar-cardhead strong{font-size:15px}.al-radar-cardhead span{font-size:11px;color:var(--al-muted)}
#alRadarCanvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:#101e30}
.al-radar-legend{display:flex;justify-content:center;align-items:center;gap:5px;padding-top:12px;font-size:11px;color:var(--al-muted)}
.al-radar-legend i{display:block;flex:1;max-width:40px;min-width:8px;height:9px;border-radius:3px}
.al-radar-status{font-size:12px;color:var(--al-muted);text-align:center;margin:10px 0 0}
.al-radar-reserved{min-height:1px}
@media(max-width:700px){.al-radar-grid{grid-template-columns:minmax(0,1fr)}.al-radar-card{padding:10px}.al-radar-reserved{display:none}}

/* V1.5: secondo radar fulmini, stesse dimensioni del radar precipitazioni. */
#alLightningCanvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:#101e30}
.al-lightning-legend{display:flex;justify-content:center;gap:16px;align-items:center;flex-wrap:wrap;padding-top:12px;font-size:11px;color:var(--al-muted)}
.al-lightning-legend span{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.al-lightning-legend i{display:inline-block;width:10px;height:10px;border-radius:50%}
.al-bolt-new{background:#fff19e}.al-bolt-mid{background:#ffb64d}.al-bolt-old{background:#f17d63}

/* V1.6: elenchi geolocalizzati sotto i due radar */
.al-nearby{border-top:1px solid var(--al-stroke);margin-top:16px;padding-top:13px}
.al-nearby-title{font-size:13px;font-weight:800;margin-bottom:10px;color:var(--al-ink)}
.al-nearby-list{list-style:decimal;margin:0;padding-left:26px;display:grid;gap:7px;color:var(--al-muted);font-size:13px}
.al-nearby-list li{padding:7px 9px 7px 2px;border-bottom:1px solid var(--al-stroke);line-height:1.35}
.al-nearby-list li:last-child{border-bottom:0}
.al-nearby-list strong{color:var(--al-ink);font-weight:750}
.al-nearby-list .al-nearby-meta{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--al-muted)}
@media(max-width:700px){.al-nearby-list{font-size:12px}}

/* V1.7: classifiche radar leggere, senza testi in grassetto. */
.al-nearby-list,.al-nearby-list li,.al-nearby-list strong{font-weight:400}
.al-nearby-list strong{color:inherit}
.al-nearby-list .al-nearby-rain{font-weight:400;color:var(--al-muted);font-variant-numeric:tabular-nums}

/* V1.8: classifiche tabellari, tipografia leggera e scrolling mobile localizzato. */
.al-nearby-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid var(--al-stroke)}
.al-nearby-scroll:focus-visible{outline:2px solid var(--al-blue);outline-offset:2px}
.al-nearby-table{border-collapse:collapse;width:100%;font-size:12px;color:var(--al-ink);font-weight:400;line-height:1.4}
.al-nearby-rain-table{min-width:0}
.al-nearby-table:not(.al-nearby-rain-table){min-width:0}
.al-nearby-table thead{background:color-mix(in srgb,var(--al-blue) 10%,var(--al-card))}
.al-nearby-table th{font-weight:600;color:var(--al-muted);font-size:11px;text-align:left;white-space:nowrap}
.al-nearby-table th,.al-nearby-table td{padding:9px 7px;border-bottom:1px solid var(--al-stroke);vertical-align:top}
.al-nearby-table tbody tr:last-child td{border-bottom:none}
.al-nearby-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--al-ink) 3%,transparent)}
.al-nearby-table td{font-weight:400}
.al-nearby-table .al-nearby-rank{width:23px;color:var(--al-muted)}
.al-nearby-table .al-nearby-place{width:22%;min-width:0;overflow-wrap:anywhere}
.al-nearby-table .al-nearby-value{white-space:nowrap;font-variant-numeric:tabular-nums}
.al-nearby-table .al-nearby-phenomenon{min-width:0;white-space:normal;overflow-wrap:break-word}
.al-nearby-table .al-nearby-empty{text-align:center;color:var(--al-muted);padding:17px 8px}
@media(max-width:700px){.al-nearby-table{font-size:12px}.al-nearby-table th,.al-nearby-table td{padding:9px 6px}}

/* V1.10: compatta la colonna comune, evitando la larghezza minima che forzava lo scroll sui radar. */
.al-nearby-table th,.al-nearby-table td{padding-left:5px;padding-right:5px}
.al-nearby-rain-table .al-nearby-place{width:22%}
.al-nearby-table:not(.al-nearby-rain-table) .al-nearby-place{width:42%}
@media(max-width:420px){.al-nearby-rain-table{min-width:410px}}

/* V1.11 | Light mode: navigazione mobile e selettore tema ad alto contrasto. */
html[data-mp-theme="light"] .mp-alert-page .site-header .mp-theme-switch{background:#e8f1f6;border-color:#b9ccda}
html[data-mp-theme="light"] .mp-alert-page .site-header .mp-theme-switch button[data-choice]{color:#17394e!important;opacity:1}
html[data-mp-theme="light"] .mp-alert-page .site-header .mp-theme-switch button[aria-pressed="true"]{background:#237ea5!important;color:#fff!important}
@media(max-width:900px){
 html[data-mp-theme="light"] .mp-alert-page .site-header .top-nav{background:#f4f9fc;border-color:#c4d8e5;box-shadow:0 15px 35px rgba(13,55,81,.16)}
 html[data-mp-theme="light"] .mp-alert-page .site-header .top-nav a{color:#163c56!important}
 html[data-mp-theme="light"] .mp-alert-page .site-header .top-nav a:hover{background:#e4f2fa;color:#085c90!important}
 html[data-mp-theme="light"] .mp-alert-page .site-header .top-nav .mp-theme-switch{width:max-content;max-width:100%;margin:6px 0 2px}
}
/* I canvas sono ridisegnati da JS al cambio tema. Sfondo di cortesia prima del rendering. */
html[data-mp-theme="light"] #alRadarCanvas,html[data-mp-theme="light"] #alLightningCanvas{background:#e9f3fa}