/* Blu Tecna - Suite di elaborazione
   Stesse tinte della VisualSuite, ma impianto diverso: qui non c'e' una mappa
   da guardare, c'e' un lavoro da seguire. */

: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}
[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);
}

/* --- 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);position:sticky;top:0;z-index:10;
}
.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)}
.altrove{
  margin-left:auto;padding:7px 13px;border-radius:9px;font-size:12.5px;
  border:1px solid var(--bordo);color:var(--testo);text-decoration:none;
}
.altrove:hover{background:rgba(255,255,255,.09)}

/* --- impianto -------------------------------------------------------- */
.guscio{display:flex;align-items:flex-start;min-height:calc(100% - var(--testata))}
.colonna{
  width:320px;flex:0 0 auto;padding:14px;background:var(--pannello);
  border-right:1px solid var(--bordo);
  position:sticky;top:var(--testata);
  height:calc(100vh - var(--testata));overflow-y:auto;
}
.area{flex:1 1 auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0}

.blocco h2{
  margin:0 0 9px;font-size:11px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:var(--tenue);
}
.campo{display:block;margin-bottom:10px}
.campo span{display:block;margin-bottom:4px;font-size:11px;color:var(--tenue)}
.campo select{
  width:100%;padding:7px 8px;border:1px solid var(--bordo);border-radius:9px;
  background:rgba(255,255,255,.06);color:var(--testo);font-size:13px;
}
.campo select option{background:#0a2038}
.attesa,.vuoto{margin:0;font-size:12px;color:var(--tenue)}

/* --- elenco dei comuni ------------------------------------------------ */
.legenda{display:flex;gap:14px;margin:0 0 8px;font-size:10.5px;color:var(--tenue)}
.pallino{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.pallino.verde{background:var(--verde)}
.pallino.rosso{background:#ff6b6b}
.lista{max-height:calc(100vh - 260px);overflow-y:auto}
.riga{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  cursor:pointer;font-size:12.5px;
}
.riga:hover{background:rgba(255,255,255,.07)}
.riga.scelto{background:rgba(12,101,215,.30)}
.riga .n{flex:1 1 auto}
.riga .cod{font-size:10px;color:var(--tenue)}
.riga.con-dati .n{font-weight:600}

/* --- schede ----------------------------------------------------------- */
.scheda{
  border:1px solid var(--bordo);border-radius:14px;
  background:rgba(4,29,57,.72);overflow:hidden;
}
.scheda > header{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-bottom:1px solid var(--bordo);background:rgba(255,255,255,.03);
}
.scheda > header strong{display:block;font-size:14px}
.scheda > header span{display:block;font-size:11px;color:var(--tenue);margin-top:2px}
.mini{
  margin-left:auto;border:1px solid var(--bordo);border-radius:7px;
  padding:4px 10px;cursor:pointer;background:rgba(255,255,255,.08);
  color:var(--testo);font-size:10.5px;font-weight:600;
}
.mini:hover{background:var(--blu);border-color:transparent}
.corpo{padding:12px 14px}

/* --- stato ------------------------------------------------------------ */
.stato{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2px 18px;margin-bottom:10px;
}
.riga-stato{display:flex;gap:10px;align-items:baseline;padding:4px 0;font-size:12.5px}
.riga-stato .et{
  flex:0 0 82px;color:var(--tenue);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;
}
.riga-stato .vl{flex:1 1 auto;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)}
.corpo h3{
  margin:12px 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue);
}
.manca{margin:0;padding:0 0 0 17px;font-size:12px;color:var(--tenue);line-height:1.55}
.manca li{margin:3px 0}
.tuttoapposto{margin:6px 0 0;font-size:12.5px;color:var(--verde)}

/* --- lavorazioni ------------------------------------------------------- */
.bottoni{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.azione{
  display:flex;flex-direction:column;gap:9px;padding:12px;
  border:1px solid var(--bordo);border-radius:12px;background:rgba(255,255,255,.04);
}
.azione .descrizione{flex:1 1 auto}
.azione strong{display:block;font-size:13.5px;margin-bottom:5px}
.azione p{margin:0 0 5px;font-size:11.5px;color:var(--tenue);line-height:1.45}
.azione .avviso{color:#d9c08a;font-style:italic}
.bottone{
  width:100%;padding:9px 14px;text-align:center;cursor:pointer;
  border:1px solid var(--bordo);border-radius:9px;
  background:rgba(255,255,255,.07);color:var(--testo);font-size:12.5px;font-weight:600;
}
.bottone:hover:not(:disabled){background:rgba(255,255,255,.14)}
.bottone.primario{background:var(--blu);border-color:transparent}
.bottone.primario:hover:not(:disabled){filter:brightness(1.15)}
.bottone:disabled{opacity:.45;cursor:not-allowed}

/* --- tavole scansionate ------------------------------------------------
   Una riga per foglio, non una scheda: quattordici schede riempirebbero lo
   schermo e quello che conta - a che punto sta e che tasto premere - sta in
   una riga sola. */
.tavole{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.tavola{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  padding:9px 12px;border:1px solid var(--bordo);border-radius:11px;
  background:rgba(255,255,255,.04);
}
.tavola .tf{display:flex;align-items:center;gap:9px}
.tavola .tf strong{font-size:13px;font-variant-numeric:tabular-nums}
.tavola .tm{grid-column:1;font-size:11px;color:var(--tenue);
  font-variant-numeric:tabular-nums}
.tavola .tp{grid-column:1;font-size:11px;color:#d9c08a;font-style:italic}
.tavola .tt{
  grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:column;gap:6px;
  min-width:172px;
}
.tavola .tt .bottone{padding:6px 10px;font-size:11.5px;text-decoration:none;
  display:block;box-sizing:border-box}
.scheda > header .mini{text-decoration:none;line-height:1.6}

/* --- registro ---------------------------------------------------------- */
.scheda.registro > header span{
  display:inline-block;margin-top:0;padding:2px 8px;border-radius:999px;
  font-size:10.5px;background:rgba(255,255,255,.10);color:var(--tenue);
}
.scheda.registro > header span.in-corso{background:rgba(12,101,215,.32);color:#bcd9ff}
.scheda.registro > header span.ok{background:rgba(53,221,138,.22);color:var(--verde)}
.scheda.registro > header span.no{background:rgba(255,105,105,.22);color:#ff9d9d}
.registro pre{
  margin:0;padding:12px 14px;max-height:44vh;overflow:auto;
  font:11.5px/1.55 "Cascadia Mono",Consolas,"Courier New",monospace;
  color:#cfe0f0;white-space:pre;
}
.registro footer{
  padding:10px 14px;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}

/* --- accesso negato ---------------------------------------------------- */
.negato{margin:60px auto;max-width:560px;padding:26px 30px;text-align:center;
  border:1px solid var(--bordo);border-radius:16px;background:rgba(4,29,57,.72)}
.negato h1{margin:0 0 12px;font-size:19px}
.negato p{margin:0 0 10px;font-size:13px;color:var(--tenue);line-height:1.55}
.negato a{color:#7fd4ff}

@media(max-width:900px){
  .guscio{flex-direction:column}
  .colonna{width:100%;height:auto;position:static;border-right:0;
           border-bottom:1px solid var(--bordo)}
  .lista{max-height:300px}
}