/* NEON — 04 Documento. Finestra da scrivania, nastro da suite d'ufficio. */
:root{
  --chrome:#f3f2f1;
  --chrome-2:#fbfaf9;
  --chrome-3:#eceae7;
  --filo:#dedcd8;
  --filo-2:#eceae7;
  --testo:#1b1b1f;
  --tenue:#63615f;
  --blu:#185abd;
  --blu-2:#2b6bc9;
  --blu-soft:#e8effa;
  --verde:#0e7a4a;
  --scrivania:#e4e4e5;
  --rosso:#c42b1c;
  --sans:"Plex Sans",system-ui,sans-serif;
  --serif:"Plex Serif",Georgia,serif;
  --mono:"Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;overflow:hidden;color:var(--testo);font-family:var(--sans);font-size:13px;
  background:
    radial-gradient(120% 80% at 12% 0%,#cfd8e6 0%,transparent 55%),
    radial-gradient(100% 70% at 100% 100%,#c8d1c9 0%,transparent 60%),
    linear-gradient(160deg,#dfe4ea,#d3d9df 60%,#e2e5e3);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,dl,dd,dt,figure,blockquote{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--blu);outline-offset:1px}

/* ---------- scrivania di sistema ---------- */
.sistema{position:fixed;right:18px;bottom:10px;display:flex;align-items:center;gap:14px;
  font-size:10px;color:rgba(30,36,44,.55);pointer-events:none}
.sistema-icone{display:flex;gap:6px}
.sistema-ico{width:9px;height:9px;border:1px solid rgba(30,36,44,.35)}
.sistema-ico:nth-child(2){transform:rotate(45deg)}
.sistema-ico:nth-child(3){border-radius:50%}

/* ---------- finestra ---------- */
.finestra{
  position:fixed;inset:22px;display:flex;flex-direction:column;min-height:0;
  background:var(--chrome-2);border:1px solid rgba(0,0,0,.22);
  box-shadow:0 26px 70px rgba(20,28,40,.35),0 2px 6px rgba(0,0,0,.2);
  z-index:10;
}
.finestra.pieno{inset:0;border:0}
.finestra.nascosta{display:none}

/* ---------- barra del titolo ---------- */
.barra-titolo{
  display:flex;align-items:center;gap:10px;height:40px;padding-left:12px;flex:none;
  background:var(--chrome);border-bottom:1px solid var(--filo);
}
.app-ico{
  display:grid;place-items:center;width:22px;height:22px;flex:none;background:var(--verde);
  color:#eafff3;font-family:var(--mono);font-weight:600;font-size:12px;
}
.doc-identita{display:flex;align-items:baseline;gap:10px;min-width:0}
.doc-nome{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.doc-stato{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);white-space:nowrap}
.doc-stato.salvando{color:var(--blu)}
.doc-stato.modificato{color:#a15c00}
.ricerca-rapida{
  margin-left:auto;display:flex;align-items:center;gap:6px;width:230px;height:26px;padding:0 8px;
  background:var(--chrome-2);border:1px solid var(--filo);color:var(--tenue);
}
.ricerca-rapida input{flex:1;min-width:0;border:0;background:none;font-family:var(--sans);font-size:11.5px;
  color:var(--testo);outline:none}
.barra-destra{display:flex;align-items:center;gap:10px;height:100%}
.lab-link{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-decoration:none;color:var(--tenue);
  padding:4px 8px;border:1px solid transparent}
.lab-link span{color:var(--verde)}
.lab-link:hover{border-color:var(--filo);color:var(--testo)}
.avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--blu);
  color:#fff;font-size:11px;font-weight:600}
.finestra-controlli{display:flex;height:100%}
.finestra-controlli button{width:44px;height:40px;display:grid;place-items:center;background:none;border:0;
  cursor:pointer;color:var(--testo)}
.finestra-controlli button:hover{background:rgba(0,0,0,.07)}
.finestra-controlli .chiudi:hover{background:var(--rosso);color:#fff}
.ico-riduci{width:10px;height:1px;background:currentColor}
.ico-ingrandisci{width:9px;height:9px;border:1px solid currentColor}
.ico-chiudi{position:relative;width:10px;height:10px}
.ico-chiudi::before,.ico-chiudi::after{content:"";position:absolute;left:0;top:4.5px;width:10px;height:1px;
  background:currentColor;transform:rotate(45deg)}
.ico-chiudi::after{transform:rotate(-45deg)}

/* ---------- linguette e nastro ---------- */
.linguette{
  display:flex;align-items:flex-end;gap:2px;height:32px;padding:0 10px;flex:none;
  background:var(--chrome);border-bottom:1px solid var(--filo);
}
.lingua{
  height:30px;padding:0 14px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  font-size:12px;color:var(--tenue);
}
.lingua:hover{background:rgba(0,0,0,.05);color:var(--testo)}
.lingua[aria-selected="true"]{color:var(--blu);border-bottom-color:var(--blu);font-weight:500}
.lingua-file{color:var(--testo)}
.lingua-file:hover{background:var(--blu);color:#fff}
.linguette-titolo{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--tenue);padding-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}

.nastri{flex:none;background:var(--chrome-2);border-bottom:1px solid var(--filo)}
.nastro{display:flex;align-items:stretch;height:92px;padding:6px 4px 0;overflow-x:auto;overflow-y:hidden}
.gruppo{display:flex;flex-direction:column;justify-content:space-between;padding:0 10px 4px;
  border-right:1px solid var(--filo-2);flex:none}
.gruppo-nome{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);text-align:center;padding-top:3px}
.gruppo-riga{display:flex;align-items:center;gap:3px;flex-wrap:wrap;max-width:330px}
.gruppo-riga + .gruppo-riga{margin-top:4px}
.gruppo-nota{justify-content:center;max-width:300px}
.nastro-nota{font-size:11px;line-height:1.45;color:var(--tenue);max-width:32ch}

button.tondo{
  width:27px;height:26px;display:grid;place-items:center;background:transparent;border:1px solid transparent;
  cursor:pointer;color:var(--testo);
}
button.tondo:hover{background:#e9eef6;border-color:#cdd9ea}
button.tondo:active{background:#dbe6f5}
button.tondo.attivo{background:var(--blu-soft);border-color:#b9cdea;color:var(--blu)}
.carattere{width:27px;height:26px;background:transparent;border:1px solid transparent;cursor:pointer;
  font-family:var(--serif);font-size:15px;line-height:1;color:var(--testo)}
.carattere:hover{background:#e9eef6;border-color:#cdd9ea}
.carattere.attivo{background:var(--blu-soft);border-color:#b9cdea;color:var(--blu)}
.grassetto{font-weight:700}
.corsivo{font-style:italic}
.sottolineato{text-decoration:underline}
.barrato{text-decoration:line-through}
.stile,.comando{
  height:26px;padding:0 9px;background:transparent;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;color:var(--testo);
}
.stile:hover,.comando:hover{background:#e9eef6;border-color:#cdd9ea}
.stile:active,.comando:active{background:#dbe6f5}
.comando[aria-pressed="true"]{background:var(--blu-soft);border-color:#b9cdea;color:var(--blu)}
.tendina{height:26px;background:var(--chrome-2);border:1px solid var(--filo);color:var(--testo);
  font-family:var(--sans);font-size:11.5px;padding:0 4px;outline:none}
.tendina-larga{width:132px}
.colore-btn{position:relative;width:27px;height:26px;display:grid;place-items:center;cursor:pointer;
  border:1px solid transparent}
.colore-btn:hover{background:#e9eef6;border-color:#cdd9ea}
.colore-ante{font-family:var(--serif);font-size:15px;border-bottom:3px solid #1a1a1a;line-height:1.1;
  padding-bottom:0}
.colore-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.trova{display:flex;align-items:center;gap:4px;height:26px;border:1px solid var(--filo);
  background:var(--chrome-2);padding:0 6px}
.trova input{width:120px;border:0;background:none;font-size:11.5px;outline:none;color:var(--testo)}
.trova-conteggio{font-family:var(--mono);font-size:9.5px;color:var(--tenue);min-width:16px;text-align:right}

/* ---------- area di lavoro ---------- */
.area{flex:1;display:grid;grid-template-columns:212px minmax(0,1fr);min-height:0;background:var(--scrivania)}
.navigazione{
  background:var(--chrome-2);border-right:1px solid var(--filo);padding:12px 10px;overflow:auto;
  display:flex;flex-direction:column;
}
.navigazione-testa{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);padding-bottom:8px;border-bottom:1px solid var(--filo-2)}
.navigazione-lista{margin-top:8px;display:flex;flex-direction:column;gap:1px}
.navigazione-lista button{
  display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;
  padding:5px 7px;font-size:11.5px;line-height:1.35;color:var(--testo);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.navigazione-lista button:hover{background:var(--blu-soft);border-left-color:var(--blu)}
.navigazione-lista .n2{padding-left:18px;font-size:11px;color:var(--tenue)}
.navigazione-lista .n3{padding-left:30px;font-size:10.5px;color:var(--tenue)}
.navigazione-vuota{font-size:11px;color:var(--tenue);margin-top:10px;line-height:1.5}

.scrivania{overflow:auto;padding:26px 24px 60px;display:flex;justify-content:center;align-items:flex-start}
.foglio-blocco{width:794px;flex:none;transform-origin:top center}
.righello{
  position:relative;height:22px;margin-bottom:8px;background:#fbfaf9;border:1px solid #d6d4d0;
  overflow:hidden;
}
.righello-cm{display:flex;justify-content:space-between;height:100%;padding:0 0 0 1px}
.righello-cm span{position:relative;flex:1;font-family:var(--mono);font-size:8px;color:#8d8b88;
  padding-top:11px;text-align:left}
.righello-cm span::before{content:"";position:absolute;left:0;top:2px;width:1px;height:7px;background:#b9b6b1}
.righello-margine{position:absolute;top:0;bottom:0;width:1px;background:#c3b7a8}
.righello-margine.sin{left:94px}
.righello-margine.des{right:94px}

.foglio{
  width:794px;min-height:1123px;padding:72px 94px 96px;background:#fff;color:#17171a;
  font-family:var(--serif);font-size:15px;line-height:1.68;outline:none;caret-color:var(--blu);
  box-shadow:0 1px 3px rgba(0,0,0,.18),0 12px 34px rgba(0,0,0,.10);
  overflow-wrap:break-word;
}
.foglio:focus{box-shadow:0 1px 3px rgba(0,0,0,.18),0 12px 34px rgba(0,0,0,.10),0 0 0 2px rgba(24,90,189,.18)}
.foglio h1{font-size:27px;line-height:1.2;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
.foglio h2{font-size:19px;line-height:1.25;font-weight:600;margin:26px 0 8px}
.foglio h3{font-size:16px;font-weight:600;margin:20px 0 6px}
.foglio p{margin:0 0 11px}
.foglio ul,.foglio ol{margin:0 0 12px;padding-left:26px}
.foglio li{margin-bottom:4px}
.foglio blockquote{margin:16px 0;padding:4px 0 4px 18px;border-left:3px solid var(--blu);
  color:#3f3f46;font-style:italic}
.foglio a{color:var(--blu);text-decoration:underline}
.foglio mark{background:#fff2a8;color:inherit}
.foglio table{border-collapse:collapse;width:100%;margin:14px 0;font-family:var(--sans);font-size:13px}
.foglio th,.foglio td{border:1px solid #c9c7c2;padding:6px 8px;text-align:left;vertical-align:top}
.foglio th{background:#f2f4f7;font-weight:600}
.foglio hr{border:0;border-top:1px solid #d6d4d0;margin:20px 0}
.foglio:empty::before{content:"Inizia a scrivere…";color:#a3a19d}
.foglio code{font-family:var(--mono);font-size:.9em;background:#f1f1ef;padding:1px 4px}
.foglio sup.nota{font-size:.72em;color:var(--blu)}
::highlight(trova){background:#ffe27a;color:#17171a}

/* ---------- barra di stato ---------- */
.barra-stato{
  display:flex;align-items:center;gap:14px;height:26px;padding:0 12px;flex:none;
  background:var(--chrome);border-top:1px solid var(--filo);font-family:var(--mono);font-size:10px;
  color:var(--tenue);white-space:nowrap;
}
.separatore{width:1px;height:12px;background:var(--filo)}
.barra-stato-fondo{margin-left:auto;display:flex;align-items:center;gap:10px}
.stato-azione{background:none;border:1px solid transparent;padding:2px 6px;font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);cursor:pointer}
.stato-azione:hover{border-color:var(--filo);color:var(--testo)}
.stato-azione[aria-pressed="true"]{background:var(--blu-soft);color:var(--blu);border-color:#b9cdea}
#zoom{width:96px;accent-color:var(--blu);height:14px}

/* ---------- backstage ---------- */
.backstage{position:absolute;inset:0;z-index:40;display:grid;grid-template-columns:220px minmax(0,1fr);
  background:var(--chrome-2)}
.backstage-colonna{background:var(--blu);color:#fff;padding:22px 0;display:flex;flex-direction:column}
.backstage-titolo{font-family:var(--sans);font-size:30px;font-weight:300;padding:0 22px 18px}
.backstage-nav{display:flex;flex-direction:column}
.backstage-voce{background:none;border:0;text-align:left;padding:9px 22px;font-size:12.5px;color:#dfe8f7;
  cursor:pointer;border-left:3px solid transparent}
.backstage-voce:hover{background:rgba(255,255,255,.1);color:#fff}
.backstage-voce.attiva{background:rgba(255,255,255,.14);border-left-color:#fff;color:#fff}
.backstage-chiudi{margin-top:auto;margin-left:22px;margin-right:22px;background:none;border:1px solid rgba(255,255,255,.45);
  color:#fff;padding:7px 10px;font-size:11px;cursor:pointer}
.backstage-chiudi:hover{background:rgba(255,255,255,.14)}
.backstage-contenuto{padding:36px 44px;overflow:auto}
.backstage-sezione h2{font-family:var(--sans);font-size:24px;font-weight:400;margin-bottom:10px}
.backstage-sezione p{font-size:13.5px;line-height:1.6;color:#3f3f46;max-width:62ch;margin-bottom:16px}
.backstage-nota{font-family:var(--mono);font-size:10.5px;color:var(--tenue)}
.bottone-primario{background:var(--blu);color:#fff;border:1px solid var(--blu);padding:8px 14px;
  font-family:var(--sans);font-size:12px;cursor:pointer}
.bottone-primario:hover{background:var(--blu-2)}
.info-lista{display:flex;flex-direction:column;max-width:620px}
.info-lista div{display:flex;gap:20px;padding:7px 0;border-bottom:1px solid var(--filo-2);font-size:12.5px}
.info-lista dt{flex:0 0 130px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue);padding-top:2px}
.info-lista dd{color:#3f3f46}

/* ---------- taskbar ---------- */
.taskbar{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:12px;padding:6px 10px;background:rgba(32,34,38,.92);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.taskbar-voce{display:flex;align-items:center;gap:8px;background:none;border:0;color:#f1f3f5;
  font-family:var(--sans);font-size:11.5px;cursor:pointer;padding:3px 4px}
.taskbar-voce:hover{background:rgba(255,255,255,.1)}
.taskbar-ico{display:grid;place-items:center;width:16px;height:16px;background:var(--verde);color:#eafff3;
  font-family:var(--mono);font-size:9px;font-weight:600}
.taskbar-nota{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}

/* ---------- dialogo ---------- */
dialog.dialogo{padding:0;border:1px solid #b9b6b1;background:var(--chrome-2);color:var(--testo);
  box-shadow:0 24px 60px rgba(0,0,0,.35);width:min(420px,92vw)}
dialog::backdrop{background:rgba(20,24,30,.35)}
.dialogo-form{padding:0;display:flex;flex-direction:column}
.dialogo-form h2{font-family:var(--sans);font-size:15px;font-weight:600;padding:12px 16px;
  border-bottom:1px solid var(--filo)}
.dialogo-corpo{padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.dialogo-corpo label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--tenue)}
.dialogo-corpo input,.dialogo-corpo select{height:28px;border:1px solid #c9c7c2;background:#fff;
  padding:0 8px;font-family:var(--sans);font-size:12.5px;color:var(--testo);outline:none}
.dialogo-corpo input:focus,.dialogo-corpo select:focus{border-color:var(--blu)}
.dialogo-corpo .riga{display:flex;gap:10px}
.dialogo-corpo .riga > label{flex:1}
.dialogo-azioni{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;margin:0;
  border-top:1px solid var(--filo)}
.dialogo-annulla{background:var(--chrome);border:1px solid #c9c7c2;padding:7px 14px;font-size:12px;cursor:pointer}
.dialogo-annulla:hover{background:#e7e5e2}

/* ---------- avvisi ---------- */
.avvisi{position:fixed;right:26px;bottom:44px;z-index:60;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none}
.avviso{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;min-width:240px;max-width:340px;
  padding:10px 12px;background:#323232;color:#f4f4f4;box-shadow:0 12px 30px rgba(0,0,0,.3);
  font-size:12px;line-height:1.45;animation:entra .18s ease-out}
.avviso b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#8ab4f8;margin-bottom:2px;font-weight:400}
.avviso.esce{animation:esce .18s ease-in forwards}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
@keyframes esce{to{opacity:0;transform:translateY(8px)}}

/* ---------- modalità lettura ---------- */
body.lettura .nastri,body.lettura .linguette,body.lettura .navigazione{display:none}
body.lettura .area{grid-template-columns:minmax(0,1fr)}
body.lettura .foglio{box-shadow:none;background:#fdfbf7}
body.lettura .scrivania{background:#efece6}
body.senza-nav .area{grid-template-columns:minmax(0,1fr)}
body.senza-nav .navigazione{display:none}

/* ---------- tema scuro del chrome ---------- */
body.chrome-scuro{
  --chrome:#202124;--chrome-2:#292a2d;--chrome-3:#202124;--filo:#3c4043;--filo-2:#363a3e;
  --testo:#e8eaed;--tenue:#9aa0a6;--blu:#8ab4f8;--blu-2:#a8c7fa;--blu-soft:#2b3a55;
  --scrivania:#3a3b3e;
}
body.chrome-scuro .finestra{border-color:#000}
body.chrome-scuro .foglio{background:#fff;color:#17171a}
body.chrome-scuro .tendina,body.chrome-scuro .ricerca-rapida,body.chrome-scuro .trova{background:#3a3b3e}
body.chrome-scuro .app-ico{background:#1f8a5c}
body.chrome-scuro .righello{background:#3a3b3e;border-color:#4a4d51}
body.chrome-scuro .righello-cm span{color:#9aa0a6}
body.chrome-scuro .gruppo{border-right-color:#363a3e}

/* ---------- stampa ---------- */
@media print{
  body{overflow:visible;background:#fff}
  .sistema,.barra-titolo,.linguette,.nastri,.navigazione,.barra-stato,.taskbar,.avvisi,.righello,.backstage{display:none!important}
  .finestra{position:static;inset:auto;border:0;box-shadow:none}
  .area{display:block;background:#fff}
  .scrivania{display:block;padding:0;overflow:visible;background:#fff}
  .foglio-blocco{width:auto}
  .foglio{box-shadow:none;padding:0;width:auto;min-height:0;font-size:11pt}
  .foglio h1{font-size:20pt}
}

/* ---------- adattamenti ---------- */
@media (max-width:1080px){
  .area{grid-template-columns:minmax(0,1fr)}
  .navigazione{display:none}
  .ricerca-rapida{width:170px}
}
@media (max-width:820px){
  .finestra{inset:0;border:0}
  .sistema{display:none}
  .barra-titolo{height:44px}
  .doc-stato,.ricerca-rapida,.lab-link,.avatar{display:none}
  .nastro{height:auto;min-height:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .gruppo{min-height:86px}
  .linguette{overflow-x:auto}
  .scrivania{padding:14px 10px 40px}
  .foglio-blocco{width:100%;max-width:620px}
  .foglio{width:100%;padding:34px 26px;min-height:0}
  .righello-margine.sin{left:26px}
  .righello-margine.des{right:26px}
  .barra-stato{font-size:9px;gap:8px;overflow-x:auto}
  .backstage{grid-template-columns:minmax(0,1fr)}
  .backstage-colonna{padding:14px 0 10px}
  .backstage-titolo{font-size:20px;padding-bottom:8px}
  .backstage-nav{flex-direction:row;overflow-x:auto;gap:0}
  .backstage-voce{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:8px 12px}
  .backstage-voce.attiva{border-left:0;border-bottom-color:#fff}
  .backstage-chiudi{margin:10px 12px 0;align-self:flex-start}
  .backstage-contenuto{padding:20px}
}
@media (max-width:520px){
  .barra-stato #conteggio-caratteri{display:none}
  .foglio{font-size:14px;padding:24px 18px}
  .righello-margine{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}