:root{
    --sfondo:#F4F5F8; --carta:#fff; --incavo:#EEF0F4;
    --testo:#161A1F; --tenue:#5C6672; --debole:#8A929C; --riga:#DEE2E7;
    --marchio:#172040; --accento:#172040; --accento-tenue:#E7EBF4;
    --allarme:#9C3A2E; --allarme-tenue:#F7E9E6;
    --buono:#3F6B44; --buono-tenue:#E8F0E9;
    --barra-l:18.5rem; --testata-h:3.75rem;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --sfondo:#0F1216; --carta:#171B21; --incavo:#1F242B;
      --testo:#E8EBEF; --tenue:#9AA4AF; --debole:#79828D; --riga:#282F38;
      --marchio:#141B33; --accento:#8FA6D0; --accento-tenue:#1E2540;
      --allarme:#DE8474; --allarme-tenue:#2E1C19;
      --buono:#8FBE95; --buono-tenue:#1B2A1D;
    }
  }
  *{box-sizing:border-box}
  /* Un elemento marcato come nascosto resta nascosto: senza questa riga
     basta una regola con display:flex per farlo ricomparire, e ci si
     ritrova riquadri vuoti che nessuno sa spiegare. */
  [hidden]{display:none !important}
  html,body{height:100%}
  body{margin:0;background:var(--sfondo);color:var(--testo);
       font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  a{color:var(--accento)}

  /* ───────────────────────────── testata ───────────────────────────── */
  .testata{height:var(--testata-h);background:var(--marchio);color:#fff;
           display:flex;align-items:center;justify-content:space-between;
           padding:0 1.25rem;position:sticky;top:0;z-index:30}
  .testata .identita{display:flex;align-items:center;gap:.85rem;min-width:0}
  .testata img{height:1.55rem;width:auto;display:block}
  .testata .sistema{font-size:.9rem;font-weight:600;letter-spacing:.01em;
                    padding-left:.85rem;border-left:1px solid rgba(255,255,255,.22);
                    white-space:nowrap;opacity:.92;overflow:hidden;
                    text-overflow:ellipsis;min-width:0}
  /* Con un nome lungo accanto al logo lo spazio finisce presto: sotto una
     certa larghezza si tiene il marchio e l'ora, che servono sempre. */
  @media (max-width:64rem){ .testata .sistema{display:none} }
  /* Due righe, non tre: in una testata di 3,75rem la terza esce dal bordo
     e viene tagliata. La data sta accanto all'ora del server. */
  .orologio{display:flex;flex-direction:column;align-items:flex-end;
            justify-content:center;line-height:1.35;
            font-variant-numeric:tabular-nums;white-space:nowrap}
  .orologio .riga{display:flex;align-items:baseline;gap:.55rem}
  .orologio .etichetta{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
            opacity:.5;font-weight:600}
  .orologio .ora{font-size:.95rem;font-weight:600;letter-spacing:.02em;
            min-width:4.4rem;text-align:right}
  .orologio .locale .ora{font-size:.82rem;font-weight:500;opacity:.75}
  .orologio .locale .etichetta{opacity:.45}
  .orologio .giorno{font-size:.7rem;opacity:.55;text-transform:capitalize;
            min-width:5.6rem;text-align:right}
  @media (max-width:52rem){ .orologio .giorno{display:none} }

  /* ────────────────────────── impianto a due colonne ───────────────── */
  /* Nessuno scorrimento di pagina, mai: l'altezza è quella dello
     schermo e il contenuto si adatta dentro. */
  .impianto{display:grid;grid-template-columns:var(--barra-l) minmax(0,1fr);
            height:calc(100vh - var(--testata-h));overflow:hidden}
  .fianco{background:var(--carta);border-right:1px solid var(--riga);
          display:flex;flex-direction:column;min-height:0;overflow-y:auto}
  .menu{flex:1;overflow-y:auto;padding:1rem .7rem}

  /* Un colore per gruppo: serve a distinguerli a colpo d'occhio, non a
     decorare. È la tinta dell'icona, non del testo, che resta leggibile. */
  .gruppo,.solitaria{--tinta:var(--accento)}
  .blu{--tinta:#1F5C8B}     .indaco{--tinta:#4C63B6}  .ambra{--tinta:#A96C13}
  .verde{--tinta:#3F7A52}   .neutro{--tinta:#5C6672}
  @media (prefers-color-scheme:dark){
    .blu{--tinta:#6FAFD8}   .indaco{--tinta:#8FA6D0} .ambra{--tinta:#D9A441}
    .verde{--tinta:#7FB58F} .neutro{--tinta:#9AA4AF}
  }

  .gruppo{margin-bottom:.5rem}
  /* L'intestazione ha un fondo suo, nella tinta del gruppo: senza, resta
     una scritta grigia sul bianco della sidebar e non separa niente. */
  .gruppo > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
        gap:.5rem;padding:.5rem .65rem;border-radius:6px;font-size:.72rem;
        font-weight:800;letter-spacing:.07em;text-transform:uppercase;
        color:var(--tinta);user-select:none;
        background:color-mix(in srgb, var(--tinta) 11%, transparent);
        border:1px solid color-mix(in srgb, var(--tinta) 18%, transparent)}
  .gruppo > summary::-webkit-details-marker{display:none}
  .gruppo > summary:hover{background:color-mix(in srgb, var(--tinta) 18%, transparent)}
  .gruppo > summary .frec{margin-left:auto;transition:transform .15s ease;opacity:.7;
        flex:0 0 auto}
  .gruppo[open] > summary .frec{transform:rotate(90deg)}

  .voci{padding:.1rem 0 .2rem;margin-left:.55rem;
        border-left:1px solid var(--riga)}
  .voci a{display:flex;align-items:center;gap:.6rem;padding:.46rem .6rem;
        margin-left:-1px;border-left:2px solid transparent;
        color:var(--tenue);text-decoration:none;font-size:.875rem;line-height:1.25;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .voci a svg{flex:0 0 auto;color:var(--tinta);opacity:.85}
  .voci a:hover{color:var(--testo);background:var(--incavo);border-radius:0 6px 6px 0}
  .voci a.viva{color:var(--testo);font-weight:600;border-left-color:var(--tinta);
        background:var(--incavo);border-radius:0 6px 6px 0}
  .voci a.viva svg{opacity:1}

  /* Il numero delle cose che aspettano. Sta sia sulla testa del gruppo —
     perché chiuso l'accordion non si vedrebbe — sia sulla voce. */
  .badge{margin-left:auto;display:inline-flex;align-items:center;
        justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;
        border-radius:99px;background:var(--allarme);color:#fff;
        font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;
        line-height:1;flex:0 0 auto}
  .gruppo > summary .badge{margin-left:auto;margin-right:.4rem}
  .gruppo > summary .frec{margin-left:0}
  .gruppo > summary:has(.badge) .frec{margin-left:0}

  /* La voce alterna il proprio colore col rosso: un numero fermo si
     confonde col resto del menù, e questo deve farsi notare finché
     qualcuno non ci mette mano. */
  .voci a.chiama span:first-of-type{animation:chiama 1.8s ease-in-out infinite}
  @keyframes chiama{
    0%, 100%{color:inherit}
    50%{color:var(--allarme)}
  }
  /* Chi ha chiesto al proprio computer di non animare niente non viene
     ignorato: il colore resta, fermo sul rosso. */
  @media (prefers-reduced-motion:reduce){
    .voci a.chiama span:first-of-type{animation:none;color:var(--allarme)}
  }

  .solitaria{display:flex;align-items:center;gap:.5rem;padding:.5rem .65rem;
        border-radius:6px;color:var(--tinta);text-decoration:none;font-size:.72rem;
        font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-top:.9rem;
        background:color-mix(in srgb, var(--tinta) 11%, transparent);
        border:1px solid color-mix(in srgb, var(--tinta) 18%, transparent)}
  .solitaria:first-child{margin-top:0;margin-bottom:.9rem}
  .solitaria svg{color:var(--tinta);flex:0 0 auto}
  .solitaria:hover{background:color-mix(in srgb, var(--tinta) 18%, transparent)}
  .solitaria.viva{background:color-mix(in srgb, var(--tinta) 20%, transparent)}

  /* chi è entrato, in fondo al fianco */
  .conto{border-top:1px solid var(--riga);position:relative}
  .conto > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
        gap:.65rem;padding:.75rem .9rem;user-select:none}
  .conto > summary::-webkit-details-marker{display:none}
  .conto > summary:hover{background:var(--incavo)}
  .conto .tondo{width:1.9rem;height:1.9rem;flex:0 0 1.9rem;border-radius:50%;
        background:var(--accento-tenue);color:var(--accento);display:flex;
        align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
  .conto .nome{flex:1;min-width:0;font-size:.88rem;font-weight:600;white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
  .conto .frecciaSu{flex:0 0 auto;color:var(--debole);transition:transform .15s ease}
  .conto[open] .frecciaSu{transform:rotate(180deg)}

  .tendina{position:absolute;bottom:calc(100% + .35rem);left:.5rem;right:.5rem;
        background:var(--carta);border:1px solid var(--riga);border-radius:9px;
        box-shadow:0 8px 28px rgba(0,0,0,.16);padding:.35rem;z-index:40}
  .tendina .utente{padding:.45rem .6rem .55rem;font-size:.76rem;color:var(--debole);
        word-break:break-all}
  .tendina a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;
        border-radius:6px;text-decoration:none;color:var(--testo);font-size:.87rem}
  .tendina a:hover{background:var(--incavo)}
  .tendina a svg{width:1rem;height:1rem;flex:0 0 auto;color:var(--debole)}
  .tendina .voceLingua{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;
        font-size:.87rem}
  .tendina .voceLingua > svg{width:1rem;height:1rem;flex:0 0 auto;color:var(--debole)}
  .tendina .voceLingua > span:first-of-type{flex:1}
  .tendina .riga{height:1px;background:var(--riga);margin:.3rem .3rem}
  .lingue{display:inline-flex;gap:.2rem}
  .lingue button{display:inline-block;padding:.1rem .35rem;font-size:.7rem;font-weight:700;
        letter-spacing:.04em;border-radius:4px;border:0;background:none;cursor:pointer;
        color:var(--debole);font-family:inherit}
  .lingue button:hover{background:var(--incavo);color:var(--testo)}
  .lingue button.viva{background:var(--accento-tenue);color:var(--accento)}
  .lingue button[disabled]{opacity:.5;cursor:default}

  /* ─────────────────────────── area di lavoro ──────────────────────── */
  /* L'area di lavoro prende tutto quello che c'è: niente larghezza massima
     decisa a occhio, che su uno schermo largo lascerebbe mezzo display
     vuoto. Le pagine che hanno bisogno di una misura di lettura se la
     impongono da sole, con .stretto. */
  .lavoro{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
  .foglio{flex:1;min-height:0;width:100%;padding:1.6rem 1.9rem 1.2rem;
          display:flex;flex-direction:column;overflow:hidden}
  .stretto{max-width:52rem}

  /* intestazione di pagina */
  .capo{display:flex;align-items:flex-start;justify-content:space-between;
        gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
  h1{font-size:1.4rem;margin:0 0 .2rem;letter-spacing:-.015em}
  .sottotitolo{color:var(--tenue);margin:0;font-size:.92rem}

  h2{font-size:1.02rem;margin:1.8rem 0 .6rem}
  .carta{background:var(--carta);border:1px solid var(--riga);border-radius:8px;
         padding:1.15rem 1.3rem;margin-bottom:1.1rem}
  table{width:100%;border-collapse:collapse;font-size:.92rem}
  th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
     color:var(--debole);font-weight:700;padding:0 .8rem .55rem 0;
     border-bottom:1px solid var(--riga)}
  td{padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--riga);vertical-align:middle}
  tr:last-child td{border-bottom:none}
  .num{font-variant-numeric:tabular-nums;white-space:nowrap}
  input,select,button,textarea{font:inherit}
  input[type=text],input[type=email],input[type=password],input[type=number],select{
    width:100%;padding:.5rem .65rem;border:1px solid var(--riga);border-radius:6px;
    background:var(--carta);color:var(--testo)}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--accento);
    outline-offset:1px;border-color:transparent}
  .bottone{display:inline-block;padding:.5rem 1rem;border-radius:6px;
           border:1px solid var(--accento);background:var(--accento);color:#fff;
           cursor:pointer;text-decoration:none;font-size:.9rem;font-weight:500}
  .bottone.tenue{background:transparent;color:var(--accento)}
  .bottone.allarme{background:transparent;border-color:var(--allarme);color:var(--allarme)}
  .bottone:hover{opacity:.88}
  .bottone[disabled]{opacity:.45;cursor:default}
  .campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
         gap:.8rem;align-items:end}
  .campo label{display:block;font-size:.78rem;color:var(--tenue);margin-bottom:.25rem}
  .pillola{display:inline-block;font-size:.72rem;padding:.15rem .5rem;border-radius:99px;
           background:var(--incavo);color:var(--tenue)}
  .pillola.ok{background:var(--buono-tenue);color:var(--buono)}
  .pillola.no{background:var(--allarme-tenue);color:var(--allarme)}
  .avviso{padding:.85rem 1rem;border-radius:6px;margin-bottom:1.2rem;font-size:.92rem;
          background:var(--allarme-tenue);color:var(--allarme);
          border:1px solid var(--allarme)}
  .avviso.buono{background:var(--buono-tenue);color:var(--buono);border-color:var(--buono)}
  .cifre{display:flex;flex-wrap:wrap;gap:1.6rem;padding:.9rem 1.2rem;
         background:var(--carta);border:1px solid var(--riga);border-radius:8px;
         margin-bottom:1.2rem}
  .cifra b{font-size:1.15rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .cifra span{font-size:.78rem;color:var(--tenue);margin-left:.4rem}
  code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:var(--incavo);
       padding:.12em .35em;border-radius:3px;word-break:break-all}
  .tenue{color:var(--tenue)}
  .piccolo{font-size:.82rem}

  @media (max-width:52rem){
    .impianto{grid-template-columns:1fr;height:auto;overflow:visible}
    .fianco{width:auto;flex:none;height:auto;position:static;
            border-right:none;border-bottom:1px solid var(--riga)}
    .menu{max-height:none}
    .foglio{padding:1.2rem 1.1rem 2rem}
    .testata .sistema{display:none}
  }