/* WebGIS Calabria «Popolazione e territorio». Base grafica: Atlante Calabria (verde #05CB63, navy #0f2540, sidebar a sinistra 350px, pannello risultati a destra). Tema chiaro/scuro con variabili CSS, attivato da [data-theme="dark"] su . */ :root{ --verde:#05CB63; --verde-scuro:#04AA52; --navy:#0f2540; --navy-2:#173a5e; --ambra:#f2a541; --corallo:#e4572e; --azzurro:#3d7fee; --bg:#f8f9fa; --panel:#fff; --panel-2:#f8f9fa; --line:#e9ecef; --text:#212529; --muted:#646d75; --shadow:0 2px 12px rgba(0,0,0,.12); --maschi:#2f6fb3; --femmine:#d9577a; --zonaA:#05CB63; --zonaB:#f2a541; } [data-theme="dark"]{ --bg:#0b1624; --panel:#12213a; --panel-2:#0f1c31; --line:#223656; --text:#e7edf5; --muted:#93a4bb; --shadow:0 2px 14px rgba(0,0,0,.45); --maschi:#6aa7ea; --femmine:#f08aa6; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:13px} a{color:var(--verde-scuro)} [data-theme="dark"] a{color:var(--verde)} button{font:inherit;color:inherit} .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* ---- testata ---- */ .testata{position:relative;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff; background:linear-gradient(0deg,rgba(6,14,26,.62),rgba(6,14,26,.18) 45%,rgba(6,14,26,.62)),url('../img/header.webp') center 38%/cover no-repeat; box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:20} .testata .lato{display:flex;align-items:center;gap:12px;min-width:0;flex:1} .testata .lato.dx{justify-content:flex-end} .testata .titolo{font-size:16px;font-weight:700;line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.8)} .testata .sotto{font-size:11px;opacity:.95;text-shadow:0 1px 5px rgba(0,0,0,.85)} .testata .logo-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:72px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))} .btn-t{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:32px;padding:0 10px;border-radius:8px; background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;text-decoration:none;font-size:12px} .btn-t:hover{background:rgba(255,255,255,.3)} [data-theme="dark"] a.btn-t{color:#fff} select.btn-t{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%); background-position:calc(100% - 13px) 14px,calc(100% - 8px) 14px;background-size:5px 5px;background-repeat:no-repeat;background-color:rgba(15,37,64,.55)} select.btn-t option{color:#212529} /* ---- layout mappa ---- */ .corpo{position:absolute;top:84px;left:0;right:0;bottom:0} #mappa{position:absolute;inset:0} .barra{position:absolute;top:10px;left:10px;bottom:10px;width:340px;background:var(--panel);border-radius:12px;box-shadow:var(--shadow); display:flex;flex-direction:column;z-index:5;transition:transform .3s ease} .barra.chiusa{transform:translateX(calc(-100% - 12px))} .barra-scroll{flex:1;overflow-y:auto;padding:14px} .apri-barra{position:absolute;top:10px;left:360px;width:36px;height:36px;border:none;border-radius:8px;background:var(--panel);box-shadow:var(--shadow); cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;transition:left .3s ease} .barra.chiusa + .apri-barra{left:10px} .sez{margin-bottom:18px} .sez-titolo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px} .cerca{position:relative} .cerca input{width:100%;padding:9px 12px;border:2px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text)} .cerca input:focus{outline:none;border-color:var(--verde)} .risultati{position:absolute;left:0;right:0;top:40px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow); max-height:260px;overflow-y:auto;z-index:30;display:none} .risultati div{padding:7px 10px;cursor:pointer;display:flex;justify-content:space-between;gap:8px} .risultati div:hover,.risultati div.on{background:var(--panel-2)} .risultati small{color:var(--muted)} .segmenti{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px} .segmenti.tre{grid-template-columns:repeat(3,1fr)} .segmenti button{border:none;background:none;padding:7px 4px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted)} .segmenti button.on{background:var(--verde);color:var(--navy)} .segmenti button:disabled{opacity:.35;cursor:not-allowed} .campo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px} .campo select,.campo input[type=range]{flex:1} .campo select{padding:7px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text)} input[type=range]{accent-color:var(--verde)} .voce{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);margin-bottom:6px;cursor:pointer} .voce:hover{border-color:var(--verde)} .interruttore{position:relative;width:40px;height:22px;background:#ced4da;border-radius:11px;flex-shrink:0;transition:background .3s} .interruttore::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,.25)} .voce.on .interruttore{background:var(--verde)} .voce.on .interruttore::after{transform:translateX(18px)} .legenda{font-size:11px;color:var(--muted);margin-top:8px} .legenda .classe{display:flex;align-items:center;gap:7px;line-height:1.55} .legenda .classe i{width:14px;height:11px;border-radius:2px;border:1px solid var(--line);flex:none} .legenda .nota a{color:inherit} .nota{font-size:11px;color:var(--muted);line-height:1.45;margin-top:6px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2); cursor:pointer;font-weight:600;font-size:12px} .btn:hover{border-color:var(--verde)} .btn.pieno{background:var(--verde);border-color:var(--verde);color:var(--navy)} .btn.pieno:hover{background:var(--verde-scuro)} .btn:disabled{opacity:.45;cursor:not-allowed} .riga-btn{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .riga-btn .btn{flex:1} .piede{padding:10px 14px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);line-height:1.45} .piede img{height:22px;vertical-align:middle;margin-right:6px} /* ---- pannello risultati (destra) ---- */ .pannello{position:absolute;top:10px;right:10px;bottom:10px;width:400px;border-radius:12px;box-shadow:var(--shadow);z-index:5;display:flex;flex-direction:column; background:var(--panel);overflow:hidden;transform:translateX(calc(100% + 20px));transition:transform .3s ease} .pannello.aperto{transform:none} .pannello-testa{flex-shrink:0;padding:12px 14px;color:#fff;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 55%,var(--verde-scuro) 140%);display:flex;align-items:flex-start;gap:10px} .pannello-testa img{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #fff;object-fit:cover;flex-shrink:0} .pannello-testa h2{font-size:15px;line-height:1.25} .pannello-testa .tipo{font-size:11px;opacity:.85;margin-top:2px} .pannello-testa .chiudi{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:6px;cursor:pointer;flex-shrink:0} .schede{display:flex;border-bottom:1px solid var(--line);flex-shrink:0} .schede button{flex:1;border:none;background:none;padding:9px 4px;cursor:pointer;font-weight:600;font-size:12px;color:var(--muted);border-bottom:2px solid transparent} .schede button.on{color:var(--text);border-bottom-color:var(--verde)} .pannello-corpo{flex:1;overflow-y:auto;padding:14px} .cifre{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px} .cifra{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 10px} .cifra b{display:block;font-size:19px;font-variant-numeric:tabular-nums} .cifra span{font-size:11px;color:var(--muted)} .cifra.grande{grid-column:span 2;display:flex;align-items:baseline;gap:10px;border-left:4px solid var(--verde)} .cifra.grande b{font-size:26px} .blocco{margin-bottom:16px} .blocco h3{font-size:12px;font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline} .blocco h3 small{font-weight:500;color:var(--muted)} .grafico svg{width:100%;height:auto;display:block} .grafico text{fill:var(--muted);font-size:10px} .grafico .val{fill:var(--text);font-weight:600} .chiavi{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:4px} .chiavi i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px} .tab-kv{width:100%;border-collapse:collapse} .tab-kv td{padding:6px 0;border-bottom:1px solid var(--line)} .tab-kv td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums} .tab-kv tr.gruppo td{padding-top:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border-bottom:none} .fonte{font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.45} .vuoto{padding:40px 10px;text-align:center;color:var(--muted)} .ab{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ab .col{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel-2)} .ab .col h4{font-size:12px;display:flex;align-items:center;gap:6px;margin-bottom:4px} .ab .col h4 i{width:12px;height:12px;border-radius:50%} .tab-ab{width:100%;border-collapse:collapse;margin-top:10px;font-variant-numeric:tabular-nums} .tab-ab th,.tab-ab td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right} .tab-ab th:first-child,.tab-ab td:first-child{text-align:left;color:var(--muted);font-weight:500} .tab-ab .d{font-size:11px;color:var(--muted)} /* ---- controlli sulla mappa ---- */ .maplibregl-ctrl-group{border-radius:8px!important;box-shadow:var(--shadow)!important} [data-theme="dark"] .maplibregl-ctrl-group{background:var(--panel)} [data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)} [data-theme="dark"] .maplibregl-ctrl-attrib{background:rgba(18,33,58,.85);color:var(--muted)} [data-theme="dark"] .maplibregl-ctrl-attrib a{color:var(--text)} [data-theme="dark"] .maplibregl-ctrl-attrib-button{filter:invert(1)} .maplibregl-popup-content{background:var(--panel);color:var(--text);border-radius:8px;box-shadow:var(--shadow);padding:8px 10px;font-size:12px} .maplibregl-popup-tip{border-top-color:var(--panel)!important;border-bottom-color:var(--panel)!important} /* suggerimento dello strumento: in alto al centro, mai sopra i controlli e trasparente ai clic (T131) */ .info-mappa{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:7px 12px;border-radius:8px;font-size:12px; box-shadow:var(--shadow);z-index:4;display:none;max-width:min(70%,440px);pointer-events:none;text-align:center} .centro-raggio{width:22px;height:22px;border-radius:50%;background:var(--verde);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:grab} .caricamento{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,37,64,.35);color:#fff;font-weight:700;z-index:40} .caricamento{background:radial-gradient(circle at 50% 50%,rgba(15,37,64,.92) 0,rgba(15,37,64,.92) 110px,rgba(15,37,64,.35) 111px)} /* ---- finestra Info ---- */ .velo{position:fixed;inset:0;background:rgba(6,14,26,.55);display:none;align-items:center;justify-content:center;z-index:100} .velo.aperto{display:flex} .finestra{background:var(--panel);color:var(--text);width:min(620px,92vw);max-height:84vh;overflow-y:auto;border-radius:14px;box-shadow:var(--shadow);padding:20px 22px} .finestra h2{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:10px} .finestra h3{font-size:13px;margin:14px 0 6px} .finestra p,.finestra li{line-height:1.55;font-size:13px} .finestra ul{padding-left:18px} .finestra .chiudi-f{float:right} /* ---- pagina iniziale ---- */ .home{min-height:100%;display:flex;flex-direction:column} .home .testata{height:150px;flex-shrink:0} .home .testata .logo-centro{height:110px} .home main{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:26px 18px} .home .intro{max-width:760px;line-height:1.6;color:var(--muted);margin-bottom:22px} .home .intro h1{font-size:24px;color:var(--text);margin-bottom:6px} .province{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} .provincia{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--text);box-shadow:var(--shadow); display:flex;flex-direction:column;gap:8px;transition:transform .15s ease,border-color .15s ease;position:relative;overflow:hidden} .provincia:hover{transform:translateY(-3px);border-color:var(--verde)} .provincia::before{content:'';position:absolute;left:0;top:0;right:0;height:5px;background:var(--c,var(--verde))} .provincia img{width:64px;height:64px;object-fit:contain} .provincia h2,.provincia h3{font-size:17px} .provincia .sigla{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px} .provincia dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12px} .provincia dt{color:var(--muted)} .provincia dd{text-align:right;font-weight:600;font-variant-numeric:tabular-nums} .home footer{padding:16px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);text-align:center;line-height:1.6} .home footer a{color:inherit;text-decoration:underline} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* titoli di sezione della home, fonti (carousel infinito), firma, FAQ (T126) */ .home .titolo-sez{font-size:18px;color:var(--text);margin:0 0 12px} .fonti-home{margin-top:34px} .carosello{position:relative;overflow:hidden;padding:4px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .binario{display:flex;width:max-content;animation:nastro 48s linear infinite} /* pausa: al passaggio del mouse, al focus e con il pulsante (WCAG 2.2.2) */ .carosello:hover .binario,.carosello:focus-within .binario,.carosello.fermo .binario{animation-play-state:paused} .nastro{display:flex;gap:14px;padding-right:14px;list-style:none;flex-shrink:0} @keyframes nastro{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marchio{display:flex;flex-direction:column;align-items:center;justify-content:center;height:58px;min-width:120px;padding:0 18px;border:1px solid var(--line); border-radius:10px;background:var(--panel);color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s,box-shadow .2s} .marchio b{font-size:16px;font-weight:800;letter-spacing:.6px;line-height:1.1} .marchio small{font-size:10.5px;margin-top:3px} /* loghi ufficiali (T128): altezza uniforme, forma e colori originali; fondo sempre chiaro perché i loghi restino leggibili anche nel tema scuro */ .marchio.logo{height:66px;padding:0 16px;background:#fff;color:#4f5861} .marchio.logo img{height:34px;width:auto} .marchio.logo small{margin-top:4px} .marchio .emblema{display:flex;align-items:center;gap:8px} .marchio .ente{font:600 12px/1.15 'Titillium Web',Inter,sans-serif;color:#1c2b3a;text-align:left} /* loghi pubblicati dagli enti solo in bianco: sul colore della testata del loro sito */ .marchio.logo.blu{background:#0066cc;border-color:#0066cc;color:#fff} .marchio.logo.blu.salute,.marchio.logo.blu.gse{background:#004d99;border-color:#004d99} .marchio.logo.blu .ente{color:#fff} [data-theme="dark"] a.marchio{color:var(--muted)} [data-theme="dark"] a.marchio.logo{color:#4f5861;border-color:#fff} [data-theme="dark"] a.marchio.logo.blu{color:#fff;border-color:#0066cc} .marchio:hover,.marchio:focus-visible{color:var(--navy);border-color:var(--verde);box-shadow:var(--shadow)} .marchio:hover b,.marchio:focus-visible b{color:var(--verde-scuro)} [data-theme="dark"] a.marchio:hover,[data-theme="dark"] a.marchio:focus-visible{color:var(--text)} [data-theme="dark"] .marchio:hover b,[data-theme="dark"] .marchio:focus-visible b{color:var(--verde)} .marchio.logo:hover,.marchio.logo:focus-visible,[data-theme="dark"] a.marchio.logo:hover,[data-theme="dark"] a.marchio.logo:focus-visible{color:#1c2b3a;border-color:var(--verde)} .marchio.logo.blu:hover,.marchio.logo.blu:focus-visible,[data-theme="dark"] a.marchio.logo.blu:hover,[data-theme="dark"] a.marchio.logo.blu:focus-visible{color:#fff;border-color:var(--verde)} .marchio:focus-visible{outline:2px solid var(--verde);outline-offset:2px} /* da tastiera il nastro si ferma e si dispone su più righe: ogni fonte resta visibile */ .carosello:has(a:focus-visible){-webkit-mask-image:none;mask-image:none} .carosello:has(a:focus-visible) .binario{animation:none;width:auto} .carosello:has(a:focus-visible) .nastro{flex-wrap:wrap;flex-shrink:1;padding:4px;width:auto!important} .carosello:has(a:focus-visible) .nastro[aria-hidden]{display:none} /* «riduci movimento»: il nastro scorre comunque, a velocità dimezzata (decisione del titolare) */ @media (prefers-reduced-motion:reduce){ .binario{animation-duration:96s} } .comandi-carosello{margin-top:8px;text-align:right} .btn-nastro{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel); color:var(--text);font-size:12px;cursor:pointer} .btn-nastro:hover{border-color:var(--verde)} .btn-nastro:focus-visible{outline:2px solid var(--verde);outline-offset:2px} .ico-nastro{font-size:10px;letter-spacing:-1px;width:12px;text-align:center} .nota-indipendenza{font-size:11px;font-style:italic;color:var(--muted);line-height:1.55;margin-top:10px;max-width:900px} .nota-indipendenza a{color:inherit} .nota-fonti{font-size:11px;color:var(--muted);line-height:1.5;margin-top:10px;max-width:900px} .nota-fonti a{color:inherit} .firma{margin-top:18px;text-align:center} .firma a{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel); color:var(--text);font-weight:700;font-size:14px;text-decoration:none;box-shadow:var(--shadow);transition:border-color .2s} .firma a:hover,.firma a:focus-visible{border-color:var(--verde)} [data-theme="dark"] .firma a{color:var(--text)} .firma img{width:28px;height:28px;object-fit:contain} .faq{margin-top:34px;max-width:860px} .faq details{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:8px} .faq summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:14px} .faq summary:hover{color:var(--verde-scuro)} .faq details p{padding:0 14px 12px;line-height:1.6;color:var(--muted)} @media (max-width:820px){ .testata{height:64px;padding:0 10px} .testata .logo-centro{display:none} .testata .sotto{display:none} .corpo{top:64px} .barra{width:auto;right:10px;top:auto;height:52%} .apri-barra{display:none} /* pannello = foglio dal basso; aperto, nasconde la barra (nessuna sovrapposizione) */ .pannello{width:auto;left:10px;top:auto;bottom:10px;height:62%} .corpo:has(.pannello.aperto) .barra{display:none} } /* ---- avviso all'avvio (prima visita) ---- */ .avviso-velo{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px; background:radial-gradient(ellipse at 50% 35%,rgba(15,37,64,.92),rgba(6,14,26,.97));animation:avvisoIn .3s ease} @keyframes avvisoIn{from{opacity:0}to{opacity:1}} .avviso-scheda{width:100%;max-width:540px;max-height:92vh;overflow-y:auto;background:var(--panel);color:var(--text);border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45);animation:avvisoSu .4s ease} @keyframes avvisoSu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .avviso-testa{padding:24px 24px 16px;text-align:center;color:#fff; background:linear-gradient(0deg,rgba(6,14,26,.55),rgba(6,14,26,.15)),linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--verde-scuro) 130%)} .avviso-testa img{height:78px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))} .avviso-testa h2{font-size:21px;margin-top:8px;letter-spacing:-.3px} .avviso-sotto{font-size:11px;opacity:.85;margin-top:2px} .avviso-corpo{padding:18px 24px 6px;font-size:13px;line-height:1.65} .avviso-corpo p{margin:0 0 10px} .avviso-corpo strong{color:var(--navy)} [data-theme="dark"] .avviso-corpo strong{color:var(--verde)} .avviso-date{list-style:none;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);margin:4px 0 12px;padding:4px 12px} .avviso-date li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px} .avviso-date li:last-child{border-bottom:none} .avviso-date span{color:var(--muted)} .avviso-nota{font-size:11.5px;color:var(--muted)} .avviso-piede{padding:8px 24px 22px;text-align:center} .avviso-piede .btn{padding:12px 28px;font-size:14px} /* ---- sfumatura intorno alla Calabria: vignettatura sopra la mappa ---- */ .vignetta{position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(ellipse 75% 70% at 55% 50%,transparent 60%,rgba(15,37,64,.16) 88%,rgba(15,37,64,.3) 100%)} [data-theme="dark"] .vignetta{background:radial-gradient(ellipse 75% 70% at 55% 50%,transparent 58%,rgba(0,0,0,.3) 88%,rgba(0,0,0,.5) 100%)} /* ---- stemmi ---- */ .stemma{width:22px;height:22px;object-fit:contain;flex-shrink:0;vertical-align:middle} .stemma.seg{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#c9d1d9;color:#0f2540;font-size:8.5px;font-weight:800;letter-spacing:.2px} .stemmi-testa{display:flex;flex-shrink:0} .stemmi-testa .stemma{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #fff;object-fit:contain;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.3)} .stemmi-testa .stemma.seg{font-size:14px;padding:0} .stemmi-testa.molti .stemma{width:34px;height:34px;margin-right:-10px} .stemmi-testa.molti .stemma.seg{font-size:10px} .elenco-comuni{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)} .elenco-comuni div{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:pointer;border-bottom:1px solid var(--line)} .elenco-comuni div:last-child{border-bottom:none} .elenco-comuni div:hover{background:var(--panel)} .elenco-comuni span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .elenco-comuni small{color:var(--muted);font-variant-numeric:tabular-nums} .risultati .stemma{width:18px;height:18px;margin-right:6px} .risultati div span{display:flex;align-items:center} .sez-titolo small{font-weight:600;text-transform:none;letter-spacing:0} .voce small{color:var(--muted);font-size:11px} .pallino{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(15,37,64,.35);vertical-align:-1px} /* ---- servizi ---- */ .tab-prezzi{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12px} .tab-prezzi th,.tab-prezzi td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right} .tab-prezzi th:first-child,.tab-prezzi td:first-child{text-align:left} .tab-prezzi th{font-size:11px;color:var(--muted);font-weight:600} .elenco-breve{font-size:12px;line-height:1.5;padding-left:16px;color:var(--text)} .elenco-breve li{margin-bottom:2px} details.piu summary{cursor:pointer;color:var(--verde-scuro);font-size:12px;font-weight:600;margin:4px 0} .pop-punto{max-width:260px} .pop-punto h4{font-size:13px;margin-bottom:2px} .pop-punto .fonte{margin-top:6px} /* ---- dashboard di confronto (confronto.html) ---- */ .confronto main{max-width:1280px} .cf-comandi{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px} .cf-cerca{max-width:620px} .cf-cerca .risultati{top:42px} .cf-elementi{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} .cf-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 5px;border:1px solid var(--line);border-left:5px solid var(--c);border-radius:9px;background:var(--panel-2);font-weight:600} .cf-chip b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--c);color:#fff;font-size:11px} .cf-chip small{color:var(--muted);font-weight:500} .cf-chip button{border:none;background:none;cursor:pointer;color:var(--muted);padding:0 4px;font-size:12px;min-width:24px;min-height:24px} .cf-chip button:hover{color:var(--corallo)} .cf-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} .cf-spunta{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer} .cf-spunta input{accent-color:var(--verde);width:18px;height:18px;margin:3px} .cf-raggio{display:inline-flex;align-items:center;gap:6px;font-size:12px} .cf-raggio input{width:80px;padding:6px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text)} .cf-griglia{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cf-scheda{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px} .cf-scheda h2,.cf-scheda h3{font-size:13px;margin-bottom:10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px} .cf-scheda h2 small,.cf-scheda h3 small{font-weight:500;color:var(--muted)} .cf-scheda h2 select,.cf-scheda h3 select{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text);font-size:12px;max-width:340px} .cf-scheda svg{width:100%;height:auto;font-size:10px;fill:var(--text)} .cf-scheda svg .val{fill:var(--muted)} .cf-tab-wrap{overflow-x:auto} .cf-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12px} .cf-tab th,.cf-tab td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top} .cf-tab thead th{position:sticky;top:0;background:var(--panel);border-bottom:3px solid var(--c,var(--line));font-size:12px;text-align:right;min-width:120px} .cf-tab thead th:first-child,.cf-tab tbody th{text-align:left;font-weight:500} .cf-tab thead th b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--c);color:#fff;font-size:10px} .cf-tab thead th.rif{color:var(--muted)} .cf-tab th small,.cf-tab td small{display:block;color:var(--muted);font-size:10.5px;font-weight:400} .cf-tab tbody th small{display:inline} .cf-tab tr.gruppo td{text-align:left;padding-top:14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border-bottom:2px solid var(--line)} .cf-tab td.d{color:var(--muted)} .cf-stima{color:var(--ambra);font-weight:700;margin-right:3px;cursor:help} .info-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:50%;border:1px solid var(--muted); background:none;color:var(--muted);font-size:10px;font-weight:700;font-style:italic;cursor:pointer;vertical-align:1px} .info-i:hover{border-color:var(--verde);color:var(--verde)} .cf-pop{position:absolute;z-index:50;width:360px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:12px 14px;font-size:12px;line-height:1.5} .cf-pop h4{font-size:13px;margin:0 20px 6px 0} .cf-pop p{margin-bottom:6px} .cf-pop .chiudi{position:absolute;right:8px;top:6px;border:none;background:none;cursor:pointer;color:var(--muted)} .cf-classifica-ctl{display:flex;gap:6px;flex-wrap:wrap} .cf-posizioni{font-size:12px;line-height:1.7;margin-bottom:8px} .cf-classifica{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;position:relative} .cf-riga{display:grid;grid-template-columns:40px 1fr 30% 110px;gap:8px;align-items:center;padding:3px 8px;border-bottom:1px solid var(--line);font-size:12px} .cf-riga .n{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums} .cf-riga .nome small{color:var(--muted)} .cf-riga .barra-c{height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden} .cf-riga .barra-c i{display:block;height:100%;background:#8fd9b1} .cf-riga .v{text-align:right;font-variant-numeric:tabular-nums} .cf-riga.sel{background:color-mix(in srgb,var(--c) 16%,transparent);font-weight:700;border-left:4px solid var(--c)} .cf-riga.sel .barra-c i{background:var(--c)} @media (max-width:900px){.cf-griglia{grid-template-columns:1fr}} @media print{ .testata{height:70px !important;print-color-adjust:exact;-webkit-print-color-adjust:exact} .testata .btn-t,.cf-cerca,.cf-azioni,.cf-chip button,.info-i,.cf-pop,.avviso-velo,#cfNota{display:none !important} .home main{max-width:none;padding:10px 0} .cf-scheda,.cf-comandi{box-shadow:none;break-inside:avoid} .cf-scheda:has(.cf-tab){break-inside:auto} .cf-classifica{max-height:none;overflow:visible} .cf-tab thead th{position:static} body{background:#fff} *{print-color-adjust:exact;-webkit-print-color-adjust:exact} } /* ---- punti d'interesse e scheda Servizi (T121) ---- */ .ico-poi{width:16px;height:16px;margin-right:7px;vertical-align:-3px} .chiavi.marchi{margin:-2px 0 8px 4px;gap:8px 10px} .chiavi.marchi img{width:14px;height:14px;margin-right:3px;vertical-align:-3px} .gruppo-poi{border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--panel-2)} .gruppo-poi summary{display:flex;align-items:center;gap:4px;padding:8px 10px;cursor:pointer;list-style:none;font-weight:600} .gruppo-poi summary::-webkit-details-marker{display:none} .gruppo-poi summary::before{content:'▸';color:var(--muted);margin-right:4px;transition:transform .15s} .gruppo-poi[open] summary::before{transform:rotate(90deg)} .gruppo-poi summary small{color:var(--muted);font-weight:400;font-size:11px} .gruppo-poi summary .interruttore{margin-left:auto} .gruppo-poi .voce{margin:0 6px 6px;background:var(--panel)} .voce-gruppo.on{background:var(--verde)} .voce-gruppo.on::after{transform:translateX(18px)} .voce-gruppo.parziale{background:linear-gradient(90deg,var(--verde) 50%,var(--line) 50%)} .pop-punto h4 .ico-marchio{width:16px;height:16px;margin-right:5px;vertical-align:-3px} .avviso-pos{color:#b3261e;font-weight:600} .riquadri-servizi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .riquadro{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 9px;color:var(--text);font:inherit;cursor:pointer} .riquadro:hover,.riquadro.on{border-color:var(--verde)} .riquadro.on{box-shadow:inset 0 0 0 1px var(--verde)} .riquadro b{font-size:19px;font-variant-numeric:tabular-nums} .riquadro span{font-size:11px;color:var(--muted);line-height:1.2} .riquadro small{font-size:10.5px;color:var(--muted)} .riquadro .cfr.sopra{color:#1f9c78} .riquadro .cfr.sotto{color:#c0582b} .elenco-servizi ul{max-height:260px;overflow:auto} @media (max-width:520px){.riquadri-servizi{grid-template-columns:repeat(2,1fr)}} /* Sicurezza e rischi (T124): barre semplici con tacca della Calabria */ .rb-sintesi{margin:8px 0;font-size:13px;color:var(--text)} .rb-sintesi b{font-size:17px;font-variant-numeric:tabular-nums} .rb-riga{margin:10px 0} .rb-testa{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);line-height:1.25} .rb-testa b{color:var(--text);font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums} .rb-barra{position:relative;height:10px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);margin:4px 0 2px;overflow:visible} .rb-barra i{display:block;height:100%;border-radius:5px} .rb-barra em{position:absolute;top:-3px;width:2px;height:16px;background:var(--text);opacity:.7} .rb-riga small{font-size:10.5px;color:var(--muted)} .rb-nota{font-size:12px;color:#c0582b;margin:4px 0} .rb-anni th{font-size:11px;color:var(--muted);text-align:right;font-weight:600} .rb-anni th:first-child,.rb-anni td:first-child{text-align:left} .rb-anni td{text-align:right;font-variant-numeric:tabular-nums} /* ---- controlli sulla mappa (T131) ---- Desktop: due gruppi comprimibili agli angoli di sinistra, accanto alla barra (in alto tematismo, legenda, ricerca e accensione rapida; in basso livello, strumenti e A/B). Mobile (≤ 820 px): una barra compatta in basso; tematismo e livello in un popover. */ .cm-gruppo{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);width:252px;font-size:12px} .cm-alto{position:absolute;top:10px;left:406px;z-index:4;transition:left .3s ease} .cm-pila{position:absolute;left:360px;bottom:28px;z-index:4;display:flex;flex-direction:column;gap:6px;align-items:flex-start;transition:left .3s ease} .corpo:has(.barra.chiusa) .cm-alto{left:56px} .corpo:has(.barra.chiusa) .cm-pila{left:10px} .cm-testa{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 6px 5px 10px;font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.7px;color:var(--muted)} .cm-comprimi{border:none;background:none;cursor:pointer;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted)} .cm-comprimi:hover{background:var(--panel-2);color:var(--text)} .cm-comprimi .ico{transition:transform .2s} .compresso .cm-comprimi .ico{transform:rotate(180deg)} .compresso .cm-corpo{display:none} .cm-corpo{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px} .cm-cerca input{padding:6px 9px;border-width:1px;font-size:12px} .cm-cerca .risultati{top:32px;max-height:220px} #cmTema{width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--text);font-size:12px} .cm-legenda{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px;font-size:10.5px;color:var(--muted);max-height:150px;overflow-y:auto} .cm-legenda .classe{display:flex;align-items:center;gap:5px;line-height:1.35;min-width:0} .cm-legenda .classe i{width:11px;height:9px;border-radius:2px;border:1px solid var(--line);flex:none} .cm-rapidi{display:flex;flex-wrap:wrap;gap:4px} .cm-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2); cursor:pointer;font-size:11px;font-weight:600;color:var(--muted)} .cm-chip i{width:8px;height:8px;border-radius:50%;opacity:.45} .cm-chip.on{color:var(--text);border-color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde)} .cm-chip.on i{opacity:1} .cm-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:2px} .cm-seg button,.cm-pop button{border:none;background:none;padding:5px 2px;border-radius:6px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--muted)} .cm-seg button.on,.cm-pop button.on{background:var(--verde);color:var(--navy)} .cm-seg button:disabled,.cm-pop button:disabled{opacity:.35;cursor:not-allowed} .cm-riga{display:flex;align-items:center;gap:4px} .cm-ico,.cm-ab{height:30px;min-width:30px;padding:0 6px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:4px;font-weight:700;font-size:11.5px;color:var(--text)} .cm-ico:hover,.cm-ab:hover:not(:disabled){border-color:var(--verde)} .cm-ico.on{background:var(--verde);border-color:var(--verde);color:var(--navy)} .cm-ab i{width:9px;height:9px;border-radius:50%} .cm-ab.on{box-shadow:inset 0 0 0 2px var(--verde)} .cm-ab:disabled{opacity:.45;cursor:not-allowed} .cm-sep{width:1px;height:20px;background:var(--line);margin:0 2px} .cm-ctx{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow); padding:6px 9px;font-size:12px;width:252px} .cm-ctx[hidden],.cm-pop[hidden]{display:none} .cm-ctx{flex-wrap:wrap} .cm-nota{flex-basis:100%;font-size:10.5px;color:var(--muted);line-height:1.3} /* le istruzioni dello strumento sono nella riga del controllo sulla mappa */ .corpo:has(.cm) .info-mappa{display:none!important} .cm-ctx input[type=range]{flex:1;min-width:0} .cm-ctx b{min-width:58px;text-align:right;font-variant-numeric:tabular-nums} .cm-ctx .btn{padding:5px 9px} .cm-ctx span{flex:1;color:var(--muted)} .cm-mobile,.cm-pop{display:none} /* valori negativi (T131): pastiglia col colore della classe; il nero ha il bordo chiaro sul tema scuro */ .neg{display:inline-block;padding:0 5px;border-radius:4px;font-weight:700;line-height:1.55} [data-theme="dark"] .neg[data-neg="3"],[data-theme="dark"] .cf-riga .barra-c i[data-neg="3"]{box-shadow:0 0 0 1px rgba(231,237,245,.75)} [data-theme="dark"] .legenda .classe i,[data-theme="dark"] .cm-legenda .classe i{border-color:rgba(231,237,245,.45)} [data-theme="dark"] .cf-scheda svg rect[data-neg="3"]{stroke-width:2} @media (max-width:820px){ .cm-alto{display:none;left:10px!important;right:10px;top:auto;bottom:66px;width:auto;z-index:8} .cm-alto.aperto-mobile{display:block} .cm-alto .cm-testa{display:none} .cm-alto .cm-corpo{display:flex!important;padding-top:8px} .cm-legenda{max-height:120px} .cm-pila{left:10px!important;right:10px;bottom:10px;align-items:stretch;z-index:7} .cm-basso{display:none} .cm-ctx{width:auto} .cm-mobile{display:flex;align-items:center;justify-content:space-between;gap:3px;background:var(--panel);border:1px solid var(--line); border-radius:12px;box-shadow:var(--shadow);padding:5px 6px;height:48px} .cm-mobile .cm-ico,.cm-mobile .cm-ab{height:36px;min-width:36px;padding:0 5px} .cm-mobile .cm-liv{min-width:44px} .cm-pop{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px} .cm-pop button{padding:9px 4px;font-size:13px} .barra{bottom:66px} .barra.chiusa{transform:translateY(calc(100% + 80px))} .pannello{bottom:66px;height:calc(62% - 56px)} /* riga del raggio o del poligono visibile: il pannello sale sopra di essa */ .corpo:has(.cm-ctx:not([hidden])) .pannello{bottom:128px} .info-mappa{top:8px;max-width:calc(100% - 80px);font-size:11.5px} .maplibregl-ctrl-bottom-right{bottom:60px} .maplibregl-ctrl-bottom-left{bottom:60px} } /* Terremoti (T127): avviso «Sisma Rilevato» come su sinocloud.it, scheda e card */ .sisma-avviso{position:fixed;left:24px;bottom:90px;width:min(330px,calc(100vw - 32px));z-index:60;background:var(--panel);color:var(--text); border:2px solid #e63946;border-radius:14px;box-shadow:0 10px 30px rgba(230,57,70,.3);opacity:0;transform:translateY(40px);transition:opacity .3s,transform .3s} .sisma-avviso.mostra{opacity:1;transform:none} .sisma-testa{display:flex;justify-content:space-between;align-items:center;background:#e63946;color:#fff;padding:9px 13px;border-radius:11px 11px 0 0;font-weight:700;font-size:14px} .sisma-chiudi{background:none;border:0;color:#fff;font-size:16px;cursor:pointer;padding:2px 6px} .sisma-campana{display:inline-block;animation:sisma-suona 2s infinite} @keyframes sisma-suona{0%,50%,100%{transform:rotate(0)}10%{transform:rotate(15deg)}20%{transform:rotate(-15deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-10deg)}} .sisma-corpo{padding:10px 13px 12px;font-size:13px} .sisma-evento{padding:7px 0;border-bottom:1px solid var(--line)} .sisma-riga{display:flex;justify-content:space-between;align-items:center;gap:8px} .sisma-mag{font-size:18px;font-variant-numeric:tabular-nums} .sisma-livello{color:#0f2540;font-weight:700;font-size:11px;padding:2px 8px;border-radius:999px} .sisma-quando,.sisma-meta{color:var(--muted);font-size:12px} .sisma-luogo{font-weight:600;margin:2px 0} .sisma-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .sisma-azioni a,.sisma-notifiche{font:inherit;font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;text-decoration:none} .sisma-nota{margin:8px 0 0;font-size:11px;color:var(--muted)} .sisma-ultimo{margin:8px 0;padding:9px 11px;border:1px solid var(--line);border-left:4px solid #e63946;border-radius:10px;background:var(--panel-2);font-size:13px;line-height:1.45} .sisma-ultimo .sisma-riga span:first-child{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .nota-sisma{text-align:center;margin-top:10px} .provincia .ultimo-sisma small{color:var(--muted);font-weight:400} @media (prefers-reduced-motion:reduce){.sisma-campana{animation:none}.sisma-avviso{transition:none}} @media (max-width:560px){.sisma-avviso{left:16px;bottom:76px}}