/* Blu Tecna - Suite di elaborazione
   Tinte riprese dalla pagina di ingresso del GeoPortal, cosi' la suite
   non sembra un pezzo staccato. */

:root{
  --fondo:#031831;
  --pannello:rgba(4,29,57,.90);
  --bordo:rgba(255,255,255,.18);
  --blu:#0c65d7;
  --testo:#eaf1f8;
  --tenue:#a9bccd;
  --verde:#35dd8a;
  --ambra:#f0a92b;
  --testata:64px;
}

*{box-sizing:border-box}

/* L'attributo hidden funziona perche' il browser applica display:none, ma
   qualunque display dichiarato qui dentro lo scavalca: .scheda e .legenda
   sono flex, e restavano visibili anche da nascoste. Questa riga rimette le
   cose a posto una volta per tutte, invece di ricordarsene regola per regola. */
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--testo);background:var(--fondo);overflow:hidden;
}

/* --- testata --------------------------------------------------------- */
.testata{
  height:var(--testata);display:flex;align-items:center;gap:14px;
  padding:0 18px;background:rgba(3,20,41,.96);
  border-bottom:1px solid var(--bordo);
}
.ritorno{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--bordo);border-radius:10px;
  color:var(--testo);text-decoration:none;font-size:17px;
}
.ritorno:hover{background:rgba(255,255,255,.09)}
.logo{height:34px}
.titolo strong{display:block;font-size:15px}
.titolo span{display:block;font-size:11.5px;color:var(--tenue)}
.conteggio{margin-left:auto;font-size:11.5px;color:var(--tenue);text-align:right}

/* --- impianto -------------------------------------------------------- */
.guscio{display:flex;height:calc(100% - var(--testata))}
.pannello{
  width:310px;flex:0 0 auto;overflow-y:auto;
  padding:14px;background:var(--pannello);
  border-right:1px solid var(--bordo);
}
.area{position:relative;flex:1 1 auto}
#mappa{position:absolute;inset:0;background:#0a1a2c}

/* --- blocchi del pannello -------------------------------------------- */
.blocco{margin-bottom:18px}
.blocco h2{
  margin:0 0 9px;font-size:11px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:var(--tenue);
}
.blocco h2 em{font-style:normal;color:var(--blu)}
.nota{margin:0 0 10px;font-size:11.5px;color:var(--tenue)}
.attesa,.vuoto{margin:0;font-size:12px;color:var(--tenue)}

/* --- comuni ----------------------------------------------------------- */
.comune{
  margin-bottom:9px;border:1px solid var(--bordo);border-radius:12px;
  background:rgba(255,255,255,.04);overflow:hidden;
}
.comune > header{
  display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
}
.comune > header:hover{background:rgba(255,255,255,.06)}
.comune .nome{font-weight:700;font-size:13.5px;flex:1 1 auto}
.comune .quanti{
  font-size:10px;padding:2px 7px;border-radius:999px;
  background:rgba(12,101,215,.30);color:#bcd9ff;
}
.comune .vai{
  flex:0 0 auto;border:0;border-radius:8px;padding:4px 8px;cursor:pointer;
  background:var(--blu);color:#fff;font-size:11px;
}
.comune .vai:hover{filter:brightness(1.15)}
.comune .corpo{padding:2px 11px 10px;border-top:1px solid var(--bordo)}

/* --- voce di livello --------------------------------------------------- */
.dato{display:flex;align-items:flex-start;gap:8px;padding:5px 0}
.dato input{margin:3px 0 0;flex:0 0 auto;accent-color:var(--blu)}
.dato .testi{flex:1 1 auto;min-width:0}
.dato .eti{display:block;font-size:12.5px;cursor:pointer}
.dato .sotto{display:block;font-size:10.5px;color:var(--tenue);margin-top:1px}
.dato .badge{
  display:inline-block;margin-right:5px;padding:1px 6px;border-radius:999px;
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.b-raster{background:rgba(53,221,138,.20);color:#8ff0bf}
.b-vector{background:rgba(12,101,215,.28);color:#bcd9ff}
.b-remoto{background:rgba(240,169,43,.20);color:#f7cd86}
.dato .opac{width:100%;margin-top:4px;accent-color:var(--blu)}

/* --- campi e bottoni --------------------------------------------------- */
.campo{display:block;margin-bottom:8px}
.campo span{display:block;font-size:10.5px;color:var(--tenue);margin-bottom:3px}
.campo select{
  width:100%;padding:6px 8px;border-radius:9px;
  border:1px solid var(--bordo);background:#0a2440;color:var(--testo);font-size:12.5px;
}
.bottone{
  width:100%;padding:7px;border:1px solid var(--bordo);border-radius:9px;
  background:rgba(255,255,255,.07);color:var(--testo);font-size:12px;cursor:pointer;
}
.bottone:hover{background:rgba(255,255,255,.13)}

/* --- sfondi ------------------------------------------------------------ */
#listaSfondi .voce{padding:3px 0;font-size:12.5px}
#listaSfondi label{margin-left:6px;cursor:pointer}

/* --- barra di stato ---------------------------------------------------- */
.barra{
  position:absolute;left:0;right:0;bottom:0;z-index:600;
  display:flex;gap:18px;align-items:center;
  padding:5px 12px;font-size:11.5px;color:var(--tenue);
  background:rgba(3,20,41,.88);border-top:1px solid var(--bordo);
}
.avviso{margin-left:auto;color:var(--ambra)}

/* --- tendina del confronto --------------------------------------------- */
.tendina{
  position:absolute;top:0;bottom:22px;left:50%;z-index:650;
  width:26px;margin-left:-13px;cursor:ew-resize;
}
.tendina .asta{
  position:absolute;top:0;bottom:0;left:12px;width:2px;
  background:rgba(255,255,255,.85);box-shadow:0 0 6px rgba(0,0,0,.6);
}
.tendina .maniglia{
  position:absolute;top:50%;left:0;width:26px;height:44px;margin-top:-22px;
  display:grid;place-items:center;border-radius:8px;
  background:rgba(3,20,41,.95);border:1px solid rgba(255,255,255,.5);
  color:#fff;font-size:15px;letter-spacing:2px;
}
/* il livello "sopra" viene tagliato alla posizione della tendina */
.taglia img{clip-path:inset(0 calc(100% - var(--taglio,50%)) 0 0)}

/* --- schermi stretti ---------------------------------------------------- */
@media(max-width:820px){
  .pannello{width:250px}
  .titolo span{display:none}
}

/* --- territorio: tendina provincia ed elenco comuni --------------------- */
.legenda{display:flex;gap:14px;margin:2px 0 8px;font-size:10.5px;color:var(--tenue)}
.legenda i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.pallino.verde{background:var(--verde)}
.pallino.rosso{background:#d9534f}
.elenco{max-height:230px;overflow-y:auto;border:1px solid var(--bordo);border-radius:10px}
.elenco:empty{display:none}
.riga-comune{
  display:flex;align-items:center;gap:8px;padding:5px 9px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px;
}
.riga-comune:last-child{border-bottom:0}
.riga-comune:hover{background:rgba(255,255,255,.07)}
.riga-comune .pallino{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
.riga-comune .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riga-comune .cod{font-size:9.5px;color:var(--tenue);font-family:Consolas,monospace}
.riga-comune.con-dati .n{font-weight:600}

/* --- scheda del comune -------------------------------------------------- */
.scheda{
  position:absolute;top:12px;right:12px;bottom:34px;width:330px;z-index:700;
  display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:rgba(4,29,57,.96);border:1px solid var(--bordo);
  box-shadow:0 18px 44px rgba(0,0,0,.45);backdrop-filter:blur(10px);
}
.scheda > header{
  display:flex;align-items:flex-start;gap:8px;padding:11px 13px;
  border-bottom:1px solid var(--bordo);background:rgba(255,255,255,.05);
}
.scheda header strong{display:block;font-size:14px}
.scheda header span{display:block;font-size:10.5px;color:var(--tenue);margin-top:2px}
.scheda header button{
  margin-left:auto;flex:0 0 auto;width:24px;height:24px;border:0;border-radius:7px;
  background:rgba(255,255,255,.10);color:var(--testo);font-size:16px;cursor:pointer;
}
.scheda header button:hover{background:rgba(255,255,255,.20)}
.scheda .corpo{padding:11px 13px;overflow-y:auto}
.scheda h3{
  margin:12px 0 6px;font-size:10px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:var(--tenue);
}
.scheda h3:first-child{margin-top:0}
.voce-dato{display:flex;gap:8px;padding:3px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.voce-dato .et{flex:0 0 108px;color:var(--tenue)}
.voce-dato .vl{flex:1 1 auto;min-width:0;word-break:break-word}
.scheda .assente{font-size:11.5px;color:var(--tenue);font-style:italic}
.scheda .promemoria{
  margin-top:12px;padding:9px 10px;border-radius:9px;font-size:11px;line-height:1.45;
  background:rgba(240,169,43,.12);border-left:2.4px solid var(--ambra);color:#f0d5a8;
}
@media(max-width:1100px){.scheda{width:290px}}

/* --- campi dei recapiti nella scheda ------------------------------------ */
.campo-r{display:block;margin-bottom:7px}
.campo-r span{display:block;font-size:10px;color:var(--tenue);margin-bottom:2px}
.campo-r input,.campo-r textarea{
  width:100%;padding:5px 7px;border-radius:8px;font:inherit;font-size:12px;
  border:1px solid var(--bordo);background:#0a2440;color:var(--testo);resize:vertical;
}
.campo-r input:focus,.campo-r textarea:focus{outline:none;border-color:var(--blu)}
.bottone.primario{margin-top:6px;background:var(--blu);border-color:transparent;font-weight:600}
.bottone.primario:hover{filter:brightness(1.15)}
.bottone.primario:disabled{opacity:.55;cursor:default;filter:none}
.esito{margin:6px 0 0;font-size:11px;min-height:14px;color:var(--tenue)}
.esito.ok{color:var(--verde)}
.esito.no{color:#ff9d97}
.scrivi{margin:6px 0 0;font-size:11.5px}
.scrivi a{color:#7fb6ff}

/* --- intestazione con azioni ------------------------------------------- */
.blocco h2{display:flex;align-items:center;gap:8px}
.blocco h2 .azioni{margin-left:auto;display:flex;gap:5px}
.mini{
  border:1px solid var(--bordo);border-radius:7px;padding:2px 8px;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--testo);
  font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:none;
}
.mini:hover{background:var(--blu);border-color:transparent}

/* --- elaborazione ------------------------------------------------------
   Il blocco compare solo agli amministratori: il servizio risponde 403 agli
   altri e la pagina non lo mostra affatto. */
.stato-elab{
  border:1px solid var(--bordo);border-radius:12px;
  background:rgba(255,255,255,.04);padding:8px 11px;margin-bottom:9px;
}
.riga-stato{
  display:flex;gap:10px;align-items:baseline;
  padding:3px 0;font-size:12px;
}
.riga-stato + .riga-stato{border-top:1px solid rgba(255,255,255,.07)}
.riga-stato .et{
  flex:0 0 78px;color:var(--tenue);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;
}
.riga-stato .vl{flex:1 1 auto;text-align:right;word-break:break-word}
.riga-stato .tenue{color:var(--tenue);font-size:11px}

.condizione{
  display:inline-block;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:999px;letter-spacing:.04em;
}
.condizione.completo{background:rgba(53,221,138,.22);color:var(--verde)}
.condizione.parziale{background:rgba(240,169,43,.22);color:var(--ambra)}
.condizione.da-fare{background:rgba(255,255,255,.10);color:var(--tenue)}

/* Cosa manca, in parole: e' la parte che evita di premere il bottone per
   scoprire che cosa sarebbe successo. */
.manca{
  margin:0 0 10px;padding:0 0 0 16px;
  font-size:11.5px;color:var(--tenue);line-height:1.5;
}
.manca li{margin:2px 0}
.tuttoapposto{margin:0 0 10px;font-size:11.5px;color:var(--verde)}

.bottoni-elab{display:flex;flex-direction:column;gap:7px}
.bottoni-elab .bottone{width:100%}
.bottoni-elab .bottone:disabled{opacity:.45;cursor:not-allowed}
.bottoni-elab .nota{margin:2px 0 0}

/* --- registro di un lavoro ---------------------------------------------
   Sopra la mappa, non nel pannello: le righe degli script sono larghe e in
   una colonna da 310 px si leggerebbero a fisarmonica. */
.registro{
  position:absolute;left:14px;right:14px;bottom:30px;z-index:900;  /* sopra la barra della scala, che sta a bottom:0 */
  max-height:46%;display:flex;flex-direction:column;
  border:1px solid var(--bordo);border-radius:14px;
  background:rgba(3,20,41,.97);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.registro > header{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-bottom:1px solid var(--bordo);
}
.registro > header strong{font-size:13px}
.registro > header span{
  display:inline-block;margin-left:9px;font-size:10.5px;
  padding:2px 8px;border-radius:999px;letter-spacing:.04em;
  background:rgba(255,255,255,.10);color:var(--tenue);
}
.registro > header span.in-corso{background:rgba(12,101,215,.32);color:#bcd9ff}
.registro > header span.ok{background:rgba(53,221,138,.22);color:var(--verde)}
.registro > header span.no{background:rgba(255,105,105,.22);color:#ff9d9d}
.registro > header button{
  margin-left:auto;width:26px;height:26px;flex:0 0 auto;
  border:1px solid var(--bordo);border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--testo);font-size:15px;line-height:1;
}
.registro > header button:hover{background:rgba(255,255,255,.13)}
.registro pre{
  margin:0;padding:10px 12px;overflow:auto;flex:1 1 auto;
  font:11.5px/1.55 "Cascadia Mono",Consolas,"Courier New",monospace;
  color:#cfe0f0;white-space:pre;
}
.registro footer{
  padding:9px 12px;border-top:1px solid var(--bordo);
  font-size:11.5px;color:var(--tenue);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.registro footer .bottone{width:auto;flex:0 0 auto}

/* --- famiglie di livelli ------------------------------------------------
   Piu' tavole dello stesso oggetto stanno in una tendina invece che in una
   fila di caselle: il PAI da solo occupava sette righe, e chi guarda doveva
   leggerle tutte per capire che erano lo stesso tema. */
.dato.gruppo{align-items:flex-start}
.dato.gruppo .testi.larghi{width:100%}
.dato.gruppo .eti{cursor:default;margin-bottom:5px}
.dato.gruppo .quanti{
  display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;
  background:rgba(12,101,215,.30);color:#bcd9ff;font-size:9.5px;font-weight:700;
}
.scelta{
  width:100%;margin:0 0 4px;padding:5px 7px;
  border:1px solid var(--bordo);border-radius:8px;
  background:rgba(255,255,255,.06);color:var(--testo);font-size:12px;
}
.scelta:focus{outline:none;border-color:var(--blu)}
.scelta option{background:#0a2038;color:var(--testo)}

/* --- tinte dei livelli ---------------------------------------------------
   Il filtro porta il tratto al colore scelto e rende trasparente la carta
   bianca: e' la trasparenza che permette di leggere due carte sovrapposte.
   La classe la riapplica il livello a ogni ridisegno. */
.filtri-tinta{position:absolute;width:0;height:0;overflow:hidden}
.tinta-nero{filter:url(#t-nero)}
.tinta-rosso{filter:url(#t-rosso)}
.tinta-blu{filter:url(#t-blu)}
.tinta-verde{filter:url(#t-verde)}
.tinte{display:flex;gap:6px;align-items:center;margin-top:7px}
.tinte .et{font-size:11px;color:var(--fioco,#7b8ba0);margin-right:2px}
.tinta{width:17px;height:17px;border-radius:50%;border:1px solid rgba(0,0,0,.28);
  padding:0;cursor:pointer;background:transparent}
.tinta:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.tinta[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}
.tinta.originale{background:linear-gradient(135deg,#fff 0 50%,#c9c9c9 50% 100%)}