/* ---------------------------------------------------------------------------
   Windows 95. Tre colori e due bordi: il rilievo si fa col chiaro in alto a
   sinistra e lo scuro in basso a destra, l'incavo al contrario. Non serve
   nient'altro, ed e' il motivo per cui quell'interfaccia si disegnava con
   quattro pixel.
   --------------------------------------------------------------------------- */
:root{
  --faccia:#c0c0c0; --luce:#ffffff; --chiaro:#dfdfdf; --ombra:#808080;
  --buio:#000000; --scrivania:#008080; --titolo:#000080; --titolo-spento:#808080;
  --selezione:#000080; --testo:#000000; --campo:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  background:var(--scrivania); color:var(--testo); overflow:hidden;
  font-family:"MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif; font-size:12px;
  -webkit-font-smoothing:none;
}
body.attesa,body.attesa *{cursor:wait !important}

.rilievo{border:2px solid;border-color:var(--luce) var(--buio) var(--buio) var(--luce);
  box-shadow:inset 1px 1px 0 var(--chiaro),inset -1px -1px 0 var(--ombra);
  background:var(--faccia)}
.incavo{border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  box-shadow:inset 1px 1px 0 var(--buio),inset -1px -1px 0 var(--chiaro);
  background:var(--campo)}
.incavo-piatto{border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  background:var(--faccia)}

/* --- scrivania e icone --- */
#scrivania{position:absolute;inset:0 0 30px 0;overflow:hidden}
/* Una colonna sola non basta piu': quando le icone superano l'altezza dello
   schermo devono andare a capo in una seconda colonna, come su una scrivania
   vera, invece di finire sotto la barra delle applicazioni. Il wrap in
   direzione colonna fa esattamente questo, e non serve calcolare niente. */
#icone,#icone-destra{position:absolute;top:8px;z-index:1;display:flex;
  flex-flow:column wrap;max-height:calc(100% - 92px);gap:4px 8px}
#icone{left:8px;align-content:flex-start}
#icone-destra{right:8px;align-content:flex-end}
/* Il cestino sta in fondo a destra, come su ogni scrivania. */
#cestino-icona{position:absolute;right:8px;bottom:8px;z-index:1}
.icona{width:88px;padding:4px 2px;text-align:center;cursor:default;
  color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.7);user-select:none}
.icona .dis{font-size:30px;line-height:34px;display:block}
.icona .et{display:inline-block;padding:1px 3px;font-size:11px;line-height:13px}
.icona:hover .et{background:rgba(0,0,128,.45)}
.icona.viva .et{background:var(--selezione);color:#fff;outline:1px dotted #fff}

/* --- finestre --- */
.finestra{position:absolute;min-width:260px;display:flex;flex-direction:column;
  background:var(--faccia);
  border:2px solid;border-color:var(--luce) var(--buio) var(--buio) var(--luce);
  box-shadow:inset 1px 1px 0 var(--chiaro),inset -1px -1px 0 var(--ombra);
  padding:2px}
.barra-titolo{display:flex;align-items:center;gap:4px;padding:2px 2px 2px 3px;
  background:var(--titolo-spento);color:#fff;font-weight:bold;cursor:default;
  user-select:none;flex:none}
.finestra.fronte .barra-titolo{
  background:linear-gradient(90deg,var(--titolo),#1084d0)}
.barra-titolo .tit{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-titolo .dis{font-size:12px}
.bottoni{display:flex;gap:2px;flex:none}
.bottoni button{width:18px;height:16px;padding:0;font-size:10px;line-height:10px;
  font-family:inherit;font-weight:bold;background:var(--faccia);color:#000;
  border:2px solid;border-color:var(--luce) var(--buio) var(--buio) var(--luce);
  box-shadow:inset 1px 1px 0 var(--chiaro),inset -1px -1px 0 var(--ombra);
  cursor:default}
.bottoni button:active{border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  box-shadow:inset 1px 1px 0 var(--buio)}
.menu-finestra{display:flex;gap:2px;padding:1px 2px;flex:none}
.menu-finestra span{padding:1px 6px;cursor:default}
.menu-finestra span:hover{background:var(--selezione);color:#fff}
.corpo{flex:1;overflow:auto;margin:2px;padding:8px;
  border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  box-shadow:inset 1px 1px 0 var(--buio),inset -1px -1px 0 var(--chiaro);
  background:var(--campo)}
.corpo.faccia{background:var(--faccia)}
.stato{display:flex;gap:2px;padding:0 2px 1px;flex:none}
.stato div{padding:2px 5px;font-size:11px;
  border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra)}
.stato div:first-child{flex:1}
.maniglia{position:absolute;right:1px;bottom:1px;width:14px;height:14px;
  cursor:nwse-resize}

/* --- barra delle applicazioni --- */
#barra{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;
  align-items:center;gap:4px;padding:2px 3px;background:var(--faccia);
  border-top:2px solid var(--luce);z-index:9000}
#avvio{display:flex;align-items:center;gap:4px;height:23px;padding:0 6px;
  font-family:inherit;font-size:12px;font-weight:bold;background:var(--faccia);
  border:2px solid;border-color:var(--luce) var(--buio) var(--buio) var(--luce);
  box-shadow:inset 1px 1px 0 var(--chiaro),inset -1px -1px 0 var(--ombra);
  cursor:default}
#avvio.aperto{border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  box-shadow:inset 1px 1px 0 var(--buio)}
#attivita{flex:1;display:flex;gap:3px;overflow:hidden}
.taskbtn{max-width:170px;min-width:0;flex:1 1 130px;height:22px;padding:0 6px;
  display:flex;align-items:center;gap:4px;font-family:inherit;font-size:11px;
  background:var(--faccia);cursor:default;overflow:hidden;white-space:nowrap;
  border:2px solid;border-color:var(--luce) var(--buio) var(--buio) var(--luce)}
.taskbtn.giu{border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  background:repeating-conic-gradient(var(--faccia) 0 25%,var(--chiaro) 0 50%) 0 0/2px 2px;
  font-weight:bold}
.taskbtn .et{overflow:hidden;text-overflow:ellipsis}
#orologio{padding:3px 8px;font-size:11px;
  border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra)}

/* --- menu avvio --- */
#menu{position:absolute;left:3px;bottom:30px;width:230px;display:none;
  background:var(--faccia);z-index:9500;padding:2px;
  border:2px solid;border-color:var(--luce) var(--buio) var(--buio) var(--luce);
  box-shadow:inset 1px 1px 0 var(--chiaro),inset -1px -1px 0 var(--ombra)}
#menu.aperto{display:flex}
#menu .costola{width:22px;flex:none;
  background:linear-gradient(180deg,#000080,#1084d0);position:relative}
#menu .costola span{position:absolute;bottom:8px;left:50%;
  transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  color:#fff;font-size:15px;font-weight:bold;letter-spacing:1px;white-space:nowrap}
/* Venti voci non ci stanno su uno schermo basso: la lista scorre
   invece di sfondare sotto la barra. */
#menu ul{list-style:none;margin:0;padding:2px 0;flex:1;
  max-height:calc(100vh - 84px);overflow-y:auto}
#menu li{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:default}
#menu li:hover{background:var(--selezione);color:#fff}
#menu li.riga{padding:0;margin:3px 2px;height:2px;
  border-top:1px solid var(--ombra);border-bottom:1px solid var(--luce)}
#menu li.riga:hover{background:none}
#menu li .dis{font-size:18px;width:22px;text-align:center}

/* --- contenuti --- */
h1,h2,h3{margin:0 0 6px;font-size:13px}
h1{font-size:14px}
p{margin:0 0 8px;line-height:1.45}
a{color:#0000c0}
a:hover{color:#c00000}
.clic{color:#0000c0;text-decoration:underline;cursor:pointer}
.clic:hover{color:#c00000}
table{border-collapse:collapse;width:100%;font-size:12px}
th{position:sticky;top:-8px;background:var(--faccia);text-align:left;
  padding:3px 6px;font-weight:bold;z-index:2;
  border:2px solid;border-color:var(--luce) var(--ombra) var(--ombra) var(--luce);
  cursor:default;white-space:nowrap}
td{padding:2px 6px;border-bottom:1px solid #e6e6e6;vertical-align:top}
tr.riga:hover td{background:#e8e8f8}
tr.riga{cursor:default}
tr.riga a.nome{color:inherit;text-decoration:none}
a.clic{color:#0000c0}
/* visibile solo a chi legge con un lettore di schermo e ai motori: il titolo
   vero della pagina, che graficamente e' gia' nella barra della finestra */
.solo-lettori{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.morto{color:#606060}
.pill{display:inline-block;padding:0 5px;margin:1px 2px 1px 0;color:#fff;
  font-size:11px;line-height:16px;white-space:nowrap;
  border:1px solid rgba(0,0,0,.35)}
.pill.chiara{color:#000}
.quadro{width:10px;height:10px;display:inline-block;vertical-align:-1px;
  margin-right:4px;border:1px solid rgba(0,0,0,.4)}
.gruppone{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:6px}
.riquadro{padding:8px;background:var(--faccia);
  border:2px solid;border-color:var(--luce) var(--ombra) var(--ombra) var(--luce)}
.riquadro .grande{font-size:22px;font-weight:bold;line-height:26px}
.cartella{display:inline-flex;flex-direction:column;align-items:center;
  width:104px;padding:6px 2px;text-align:center;cursor:default}
.cartella:hover{background:#e8e8f8}
.cartella .dis{font-size:28px;line-height:30px}
.piede{margin-top:10px;padding-top:6px;border-top:1px solid var(--ombra);
  font-size:11px;color:#404040}
.avviso{padding:6px 8px;margin:0 0 8px;background:#ffffe1;
  border:1px solid var(--buio);font-size:11px}
input[type=text],select{font-family:inherit;font-size:12px;padding:2px 4px;
  background:var(--campo);
  border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  box-shadow:inset 1px 1px 0 var(--buio)}
button.p95{font-family:inherit;font-size:12px;padding:3px 12px;min-width:70px;
  background:var(--faccia);cursor:default;
  border:2px solid;border-color:var(--luce) var(--buio) var(--buio) var(--luce);
  box-shadow:inset 1px 1px 0 var(--chiaro),inset -1px -1px 0 var(--ombra)}
button.p95:active{border-color:var(--ombra) var(--luce) var(--luce) var(--ombra);
  box-shadow:inset 1px 1px 0 var(--buio)}

/* --- la striscia del tempo di una persona --- */
.striscia{position:relative;height:26px;margin:6px 0 2px;background:#e0e0e0;
  border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra)}
.striscia i{position:absolute;top:0;bottom:0;overflow:hidden;font-style:normal;
  font-size:10px;line-height:22px;color:#fff;text-align:center;
  text-shadow:0 0 2px rgba(0,0,0,.8);border-right:1px solid rgba(0,0,0,.35)}
.tacche{position:relative;height:14px;font-size:10px;color:#404040}
.tacche span{position:absolute;transform:translateX(-50%);white-space:nowrap}

/* --- scheda persona --- */
.scheda{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ritratto{width:120px;flex:none;background:var(--faccia);padding:3px;
  border:2px solid;border-color:var(--ombra) var(--luce) var(--luce) var(--ombra)}
.ritratto img{width:100%;display:block;image-rendering:auto}
.ritratto .vuoto{height:150px;display:flex;align-items:center;justify-content:center;
  font-size:44px;color:var(--ombra);background:#e8e8e8}
.dati{flex:1;min-width:220px}
.dati dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0}
.dati dt{font-weight:bold;white-space:nowrap}
.dati dd{margin:0}

/* --- salvaschermo e schermata blu --- */
#salvaschermo{position:fixed;inset:0;background:#000;z-index:9800;display:none}
#salvaschermo.acceso{display:block}
#salvaschermo b{position:absolute;color:#00ff66;font-size:26px;white-space:nowrap;
  font-weight:bold;text-shadow:0 0 12px #00ff66}
#bsod{position:fixed;inset:0;background:#0000aa;color:#fff;z-index:9900;
  display:none;padding:8vh 8vw;font-family:"Courier New",monospace;font-size:15px;
  line-height:1.6}
#bsod.acceso{display:block}
#bsod .cap{background:#c0c0c0;color:#0000aa;padding:0 8px;font-weight:bold}

@media (max-width:768px){
  body{font-size:14px}
  #icone,#icone-destra,#cestino-icona{position:static;max-height:none;
    flex-flow:row wrap;align-content:flex-start;gap:2px;padding:6px}
  .icona{width:78px}
  .finestra{position:static !important;width:auto !important;
    height:auto !important;margin:6px;max-height:none}
  .corpo{max-height:none;padding:8px 6px}
  #scrivania{overflow:auto;-webkit-overflow-scrolling:touch}
  .maniglia{display:none}
  .bottoni button:not(.chiudi){display:none}
  th{position:static}
}