/* ==========================================================================
   Matteo Dutto — stile della plancia
   Staccato da prototipo.html, sette giri di revisione: l'aspetto NON si
   ridisegna qui. Ogni colore usato e' gia' nel prototipo approvato (o e' un
   suo tono derivato); niente di nuovo e' stato aggiunto oltre a quanto serve
   per le pagine mancanti (Sentinella) e per i casi vuoti.
   ========================================================================== */
:root{
  --blu:#0532D3; --blu-soft:rgba(5,50,211,.07); --blu-line:rgba(5,50,211,.22);
  --giallo:#FFEA32; --scuro:#1C1C1C; --chiaro:#F9F9F9;
  --bg:var(--chiaro); --sup:#FFFFFF; --sup2:#F2F3F7;
  --testo:var(--scuro); --testo2:#5C6070; --testo3:#8A8F9E;
  --bordo:#E3E5EC; --bordo2:#CFD3DE;
  --rosso:#C62B12; --rosso-soft:rgba(198,43,18,.09);
  --verde:#0E7A4F; --verde-soft:rgba(14,122,79,.10);
  --r:8px; --pad:11px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blu:#5C86FF; --blu-soft:rgba(92,134,255,.14); --blu-line:rgba(92,134,255,.32);
    --bg:#101116; --sup:#191B22; --sup2:#20232C;
    --testo:#F1F2F6; --testo2:#AEB4C4; --testo3:#7D8496;
    --bordo:#272A34; --bordo2:#3A3F4D;
    --rosso:#FF8264; --rosso-soft:rgba(255,130,100,.14);
    --verde:#4ECD94; --verde-soft:rgba(78,205,148,.14);
  }
}
:root[data-theme="dark"]{
  --blu:#5C86FF; --blu-soft:rgba(92,134,255,.14); --blu-line:rgba(92,134,255,.32);
  --bg:#101116; --sup:#191B22; --sup2:#20232C;
  --testo:#F1F2F6; --testo2:#AEB4C4; --testo3:#7D8496;
  --bordo:#272A34; --bordo2:#3A3F4D;
  --rosso:#FF8264; --rosso-soft:rgba(255,130,100,.14);
  --verde:#4ECD94; --verde-soft:rgba(78,205,148,.14);
}
:root[data-densita="compatto"]{ --pad:6px; }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--testo);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}

/* ---------- testata ---------- */
header{background:var(--sup);border-bottom:1px solid var(--bordo);position:sticky;top:0;z-index:50}
.hin{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;min-height:56px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.logo i{width:26px;height:26px;border-radius:6px;background:var(--blu);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;font-style:normal}
nav{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap}
.tab{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;font-size:14px;color:var(--testo2);padding:7px 11px;border-radius:var(--r);display:flex;align-items:center;gap:6px}
.tab:hover{background:var(--sup2);color:var(--testo)}
.tab[aria-selected="true"]{background:var(--blu);color:#fff}
.tab b{font-weight:600;font-size:12px;padding:1px 6px;border-radius:20px;background:var(--blu-soft);color:var(--blu)}
.tab[aria-selected="true"] b{background:rgba(255,255,255,.24);color:#fff}
.tab.rosso b{background:var(--rosso-soft);color:var(--rosso)}
.icone{display:flex;gap:4px}
.ico{appearance:none;border:1px solid var(--bordo2);background:none;color:var(--testo3);cursor:pointer;height:32px;min-width:32px;padding:0 8px;border-radius:var(--r);font:inherit;font-size:13px;font-weight:600}
.ico:hover{color:var(--blu);border-color:var(--blu)}

main{max-width:1240px;margin:0 auto;padding:22px 20px 90px}
.view[hidden]{display:none}

/* ---------- intestazione ---------- */
.testa{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.testa h1{margin:0;font-size:clamp(22px,3.2vw,30px);font-weight:800;line-height:1.15}
.testa p{margin:6px 0 0;color:var(--testo2);max-width:60ch;font-size:14.5px}
.quando{font-size:13.5px;color:var(--testo3);text-align:right}

/* da ieri */
.ieri{display:flex;gap:0;flex-wrap:wrap;background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.ieri div{padding:12px 16px;border-right:1px solid var(--bordo);flex:1 1 150px;min-width:0}
.ieri div:last-child{border-right:0}
.ieri .v{font-size:20px;font-weight:800;line-height:1.1}
.ieri .v.giu{color:var(--verde)} .ieri .v.su{color:var(--rosso)}
.ieri .k{font-size:12.5px;color:var(--testo2);margin-top:3px}

.barra{display:flex;height:10px;gap:2px;border-radius:3px;overflow:hidden;margin:16px 0 8px}
.barra i{display:block;transition:flex-grow .4s ease}
.barra i.a{background:var(--rosso)} .barra i.b{background:var(--blu)} .barra i.c{background:var(--bordo2)}
.legenda{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--testo2)}
.legenda span{display:flex;align-items:center;gap:7px}
.legenda i{width:9px;height:9px;border-radius:2px;display:block}
.legenda i.a{background:var(--rosso)} .legenda i.b{background:var(--blu)} .legenda i.c{background:var(--bordo2)}

/* ---------- sezioni ---------- */
.sez{margin-top:30px}
.sez-t{display:flex;align-items:center;gap:11px;margin-bottom:11px;flex-wrap:wrap}
.sez-t h2{margin:0;font-size:19px;font-weight:800}
.sez-t .c{font-size:13.5px;color:var(--testo3);font-weight:500}
.sez-t .az{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.sez-t p{margin:0;flex:1 1 100%;font-size:13.5px;color:var(--testo2);max-width:72ch}

.pila{display:flex;flex-direction:column;gap:8px}
.tessera{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:calc(var(--pad) + 3px) 16px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;transition:opacity .25s,border-color .15s}
.tessera:hover{border-color:var(--bordo2)}
.tessera.via{opacity:0}
.tessera .cifra{min-width:58px;text-align:center;flex:0 0 auto}
.tessera .cifra .v{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tessera .cifra .v.caldo{color:var(--rosso)}
.tessera .cifra .u{font-size:11.5px;color:var(--testo3);margin-top:3px;line-height:1.2}
.tessera .cor{flex:1 1 300px;min-width:0}
.tessera .cor h3{margin:0;font-size:15.5px;font-weight:700}
.tessera .cor h3 span{font-weight:400;color:var(--testo2)}
.tessera .cor p{margin:5px 0 0;font-size:13.5px;color:var(--testo2)}
.tessera .cor p b{color:var(--rosso)}
.tessera .cor .fonte{margin-top:6px;font-size:12.5px;color:var(--testo3)}
.tessera .cor .fonte a{color:var(--blu);text-decoration:none;border-bottom:1px solid var(--blu-line)}
.tessera .az{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}

/* ---------- pulsanti ---------- */
.p{appearance:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:7px 12px;border-radius:6px;border:1px solid var(--bordo2);background:var(--sup);color:var(--testo);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.p:hover{border-color:var(--blu);color:var(--blu);background:var(--blu-soft)}
.p.pieno{background:var(--blu);border-color:var(--blu);color:#fff}
.p.pieno:hover{background:var(--blu);color:#fff;filter:brightness(1.1)}
.p.lieve{border-color:transparent;background:transparent;color:var(--testo3)}
.p.lieve:hover{background:var(--sup2);color:var(--testo)}
.p.pic{padding:5px 9px;font-size:12.5px}
.p.gr{padding:11px 18px;font-size:15px}
.p:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
.p:disabled{opacity:.5;cursor:default;pointer-events:none}

/* ---------- etichette: cinque, fisse ---------- */
.tg{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:20px;margin-right:7px;vertical-align:1px;white-space:nowrap}
.tg.attesa{background:var(--rosso-soft);color:var(--rosso)}
.tg.data{background:var(--blu-soft);color:var(--blu)}
.tg.fattura{background:var(--giallo);color:#1C1600}
.tg.mucchio{background:var(--sup2);color:var(--testo2);border:1px solid var(--bordo)}
.tg.calma{background:transparent;color:var(--blu);border:1px solid var(--blu-line)}
/* etichetta senza dato: l'API non l'ha mandato. Si vede, non si inventa (vedi CLAUDE.md) */
.tg.mancante{background:transparent;color:var(--testo3);border:1px dashed var(--bordo2)}

/* ---------- blocco giallo ---------- */
.impara{margin-top:14px;background:var(--giallo);color:#1C1600;border-radius:var(--r);padding:16px 18px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;transition:opacity .25s}
.impara.via{opacity:0}
.impara .t{font-size:16px;font-weight:700;max-width:52ch}
.impara .d{font-size:13px;margin-top:5px;color:rgba(28,22,0,.72)}
.impara .az{display:flex;gap:7px;flex-wrap:wrap}
.impara .p{background:rgba(28,22,0,.09);border-color:rgba(28,22,0,.28);color:#1C1600}
.impara .p:hover{background:#1C1600;color:var(--giallo);border-color:#1C1600}
.impara .p.pieno{background:#1C1600;border-color:#1C1600;color:var(--giallo)}

/* ---------- consolle posta ---------- */
.consolle{position:sticky;top:56px;z-index:40;background:var(--bg);padding:10px 0 12px;border-bottom:1px solid var(--bordo);margin-bottom:4px}
.riga-cmd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.campo{flex:1 1 320px;display:flex;align-items:center;gap:9px;background:var(--sup);border:1px solid var(--bordo2);border-radius:var(--r);padding:0 12px;min-height:40px}
.campo:focus-within{border-color:var(--blu);box-shadow:0 0 0 3px var(--blu-soft)}
.campo i{color:var(--testo3);font-style:normal;font-size:15px}
.campo input{flex:1;border:0;background:none;font:inherit;font-size:14.5px;color:var(--testo);outline:none;min-width:0;padding:9px 0}
.campo input::placeholder{color:var(--testo3)}
.campo kbd{font:inherit;font-size:11.5px;font-weight:600;color:var(--testo3);border:1px solid var(--bordo2);border-radius:4px;padding:2px 6px}
.filtri{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
.f{appearance:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 11px;border-radius:20px;border:1px solid var(--bordo2);background:var(--sup);color:var(--testo2)}
.f:hover{border-color:var(--blu);color:var(--blu)}
.f[aria-pressed="true"]{background:var(--blu);border-color:var(--blu);color:#fff}
.f b{font-weight:600;opacity:.7;margin-left:4px}
.sep{width:1px;height:22px;background:var(--bordo);margin:0 4px}
.selbar{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;background:var(--blu);color:#fff;border-radius:var(--r);padding:9px 12px}
.selbar.on{display:flex}
.selbar .q{font-weight:700;font-size:14px;margin-right:4px}
.selbar .p{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff}
.selbar .p:hover{background:#fff;color:var(--blu);border-color:#fff}
.selbar .p.lieve{border-color:transparent;background:transparent;color:rgba(255,255,255,.85)}
.selbar .sp{margin-left:auto}

/* ---------- comando su singola mail ---------- */
.cmdriga{border-bottom:1px solid var(--bordo);background:var(--blu-soft);padding:12px 13px 13px}
.cmdriga .campo{background:var(--sup)}
.esempi{margin-top:8px;font-size:12.5px;color:var(--testo2)}
.esempi b{font-weight:500;color:var(--blu);cursor:pointer;border-bottom:1px solid var(--blu-line)}
.capito{margin-top:10px;background:var(--sup);border:1px solid var(--blu-line);border-radius:var(--r);padding:12px 14px}
.capito .tit{font-size:13.5px;color:var(--testo2);margin-bottom:8px}
.capito ol{margin:0 0 11px;padding-left:19px;font-size:14px}
.capito .no{color:var(--rosso);font-size:13.5px;margin-bottom:10px}
.capito .az{display:flex;gap:7px;flex-wrap:wrap}

/* ---------- elenco ---------- */
.gruppo{margin-top:22px}
.g-t{display:flex;align-items:center;gap:10px;padding:0 0 8px;flex-wrap:wrap}
.g-t h3{margin:0;font-size:16px;font-weight:800}
.g-t .c{font-size:13px;color:var(--testo3);font-weight:500}
.g-t .az{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.g-t p{margin:0;flex:1 1 100%;font-size:13px;color:var(--testo2);max-width:76ch}
.lista{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);overflow:hidden}
.riga{display:grid;grid-template-columns:26px 180px 1fr auto;gap:12px;align-items:center;padding:var(--pad) 13px;border-bottom:1px solid var(--bordo);transition:background .1s,opacity .25s}
.riga[hidden]{display:none}
.riga:last-child{border-bottom:0}
.riga:hover{background:var(--sup2)}
.riga.scelta{background:var(--blu-soft)}
.riga.via{opacity:0}
.riga.qui{box-shadow:inset 3px 0 0 var(--blu)}
.spunta{width:18px;height:18px;border:1.5px solid var(--bordo2);border-radius:5px;cursor:pointer;display:grid;place-items:center;color:transparent;font-size:12px;font-weight:700;flex:0 0 auto}
.spunta:hover{border-color:var(--blu)}
.spunta[aria-checked="true"]{background:var(--blu);border-color:var(--blu);color:#fff}
.mitt{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitt .casella{display:block;font-weight:400;font-size:12px;color:var(--testo3)}
.ogg{min-width:0;cursor:pointer}
.ogg .s{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ogg .eta{color:var(--testo3);font-size:12.5px;margin-left:8px}
.ogg .motivo{font-size:12.5px;color:var(--testo2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-densita="compatto"] .ogg .motivo{display:none}
:root[data-densita="compatto"] .mitt .casella{display:none}
.strumenti{display:flex;gap:4px;opacity:0}
.riga:hover .strumenti,.riga:focus-within .strumenti,.riga.qui .strumenti{opacity:1}
@media (hover:none){.strumenti{opacity:1}}

/* conversazioni */
.conv{border-bottom:1px solid var(--bordo);padding:14px 16px}
.conv:last-child{border-bottom:0}
.conv .cap{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.conv h4{margin:0;font-size:15.5px;font-weight:700}
.conv .chi{font-size:12.5px;color:var(--testo3)}
.conv .ria{margin:7px 0 0;font-size:13.5px;color:var(--testo2);max-width:78ch}
.conv .ria b{color:var(--testo);font-weight:600}
.conv .az{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}

.nota{margin-top:14px;font-size:13px;color:var(--testo3);max-width:76ch;padding-left:13px;border-left:2px solid var(--bordo2)}

/* ---------- imparato ---------- */
.reg{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);overflow:hidden}
.rg{display:grid;grid-template-columns:1fr 130px auto;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--bordo)}
.rg:last-child{border-bottom:0}
.rg .q{font-size:14.5px;font-weight:600}
.rg .da{font-size:12.5px;color:var(--testo3);margin-top:3px}
.rg .n{font-size:13px;color:var(--testo2)}
.rg.attesa{background:rgba(255,234,50,.16)}

/* ---------- pannello lettura ---------- */
.velo{position:fixed;inset:0;background:rgba(28,28,28,.34);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.velo.on{opacity:1;pointer-events:auto}
.lettore{position:fixed;top:0;right:0;bottom:0;width:min(680px,100vw);background:var(--sup);border-left:1px solid var(--bordo);z-index:80;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.lettore.on{transform:translateX(0)}
.lettore[hidden]{display:none}
.let-t{padding:15px 20px 12px;border-bottom:1px solid var(--bordo)}
.let-t .capo{display:flex;align-items:flex-start;gap:12px}
.let-t h2{margin:0;font-size:18px;font-weight:800;line-height:1.25;flex:1;min-width:0}
.let-t .nav2{display:flex;gap:4px;flex:0 0 auto}
.let-t .da{margin-top:9px;font-size:13.5px;color:var(--testo2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.let-t .da b{font-weight:600;color:var(--testo)}
.let-t .da .pin{background:var(--sup2);border-radius:20px;padding:1px 8px;font-size:12px}
.let-az{display:flex;gap:6px;flex-wrap:wrap;padding:11px 20px;border-bottom:1px solid var(--bordo);background:var(--sup2)}
.let-corpo{padding:20px;overflow-y:auto;flex:1;font-size:14.5px;line-height:1.62}
.let-corpo p{margin:0 0 13px}
.let-corpo .cit{border-left:3px solid var(--bordo2);padding-left:13px;color:var(--testo2);font-size:13.5px}
.let-corpo .alleg{margin-top:18px;border-top:1px solid var(--bordo);padding-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.let-corpo .alleg .file{border:1px solid var(--bordo2);border-radius:6px;padding:7px 11px;font-size:13px;font-weight:500}
.let-corpo .alleg .file span{color:var(--testo3);font-weight:400}
.let-corpo .perche{margin-top:18px;background:var(--blu-soft);border-radius:var(--r);padding:12px 14px;font-size:13.5px;color:var(--testo2)}
.let-corpo .perche b{color:var(--blu);font-weight:600}
.cmd-lettore{padding:12px 20px;border-top:1px solid var(--bordo);background:var(--sup2)}

/* ---------- smaltimento ---------- */
.smalt{position:fixed;inset:0;background:var(--bg);z-index:90;display:none;flex-direction:column}
.smalt.on{display:flex}
.sm-t{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--bordo);background:var(--sup)}
.sm-t .avz{flex:1;height:5px;background:var(--sup2);border-radius:3px;overflow:hidden}
.sm-t .avz i{display:block;height:100%;background:var(--blu);transition:width .25s}
.sm-t .cn{font-size:13.5px;color:var(--testo2);font-weight:600;white-space:nowrap}
.sm-c{flex:1;overflow-y:auto;padding:22px 18px;max-width:640px;margin:0 auto;width:100%}
.sm-c .mit{font-size:13.5px;color:var(--testo3)}
.sm-c h2{margin:6px 0 0;font-size:22px;font-weight:800;line-height:1.25}
.sm-c .why{margin:12px 0 0;background:var(--blu-soft);border-radius:var(--r);padding:12px 14px;font-size:13.5px;color:var(--testo2)}
.sm-c .txt{margin-top:18px;font-size:14.5px;line-height:1.6;color:var(--testo2)}
.sm-b{padding:14px 18px 20px;border-top:1px solid var(--bordo);background:var(--sup);display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:640px;margin:0 auto;width:100%}
.sm-b .p{justify-content:center;padding:15px 12px;font-size:15px}
.sm-b .largo{grid-column:1 / -1}
.sm-fine{text-align:center;padding:60px 20px}
.sm-fine .big{font-size:44px;font-weight:800;color:var(--verde)}
.sm-fine p{color:var(--testo2);margin:10px auto 0;max-width:44ch}

/* ---------- scorciatoie ---------- */
.scorc{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(28,28,28,.44)}
.scorc.on{display:flex}
.scorc .box{background:var(--sup);border-radius:12px;max-width:520px;width:100%;padding:22px 24px;max-height:84vh;overflow-y:auto}
.scorc h3{margin:0 0 4px;font-size:18px;font-weight:800}
.scorc .sub{font-size:13.5px;color:var(--testo2);margin-bottom:16px}
.scorc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:baseline}
.scorc dt{text-align:right}
.scorc dd{margin:0;font-size:14px}
kbd.k{display:inline-block;font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--bordo2);border-bottom-width:2px;border-radius:5px;padding:2px 7px;background:var(--sup2)}

/* ---------- fine giornata ---------- */
.fine{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:34px 24px;text-align:center;margin-top:12px}
.fine .big{font-size:38px;font-weight:800;color:var(--verde);line-height:1}
.fine h3{margin:12px 0 0;font-size:19px;font-weight:800}
.fine p{margin:9px auto 0;color:var(--testo2);max-width:52ch;font-size:14.5px}
.fine .az{margin-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- avviso con annulla ---------- */
.avviso{position:fixed;left:20px;bottom:20px;background:var(--scuro);color:#fff;padding:11px 13px 11px 15px;border-radius:var(--r);font-size:13.5px;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:none;z-index:100;max-width:calc(100vw - 40px);display:flex;align-items:center;gap:12px}
:root[data-theme="dark"] .avviso{background:#F1F2F6;color:#101116}
.avviso.on{opacity:1;transform:translateY(0);pointer-events:auto}
.avviso button{appearance:none;border:1px solid rgba(255,255,255,.4);background:none;color:inherit;font:inherit;font-size:13px;font-weight:700;padding:5px 11px;border-radius:6px;cursor:pointer;white-space:nowrap}
:root[data-theme="dark"] .avviso button{border-color:rgba(16,17,22,.35)}
.avviso button:hover{background:rgba(255,255,255,.16)}
:root[data-theme="dark"] .avviso button:hover{background:rgba(16,17,22,.12)}
.avviso .sec{font-variant-numeric:tabular-nums;opacity:.65;font-size:12.5px}

/* ---------- casi vuoti (Allarmi, Sentinella, mucchi finiti) ----------
   Fase 2: /api/allarmi torna vuoto quasi sempre, e la sentinella deve
   TACERE quando va tutto bene (decisione 32). Un buco bianco sembrerebbe
   rotto: qui invece si dice esplicitamente che va tutto bene. */
.vuoto{background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:40px 24px;text-align:center}
.vuoto .ic{font-size:30px;line-height:1}
.vuoto h3{margin:10px 0 0;font-size:17px;font-weight:800}
.vuoto p{margin:8px auto 0;color:var(--testo2);max-width:48ch;font-size:14px}

/* ---------- sentinella: il semaforo ---------- */
.semaforo{display:flex;align-items:center;gap:10px;background:var(--sup);border:1px solid var(--bordo);border-radius:var(--r);padding:14px 18px;margin-bottom:18px}
.semaforo .luce{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.semaforo .luce.verde{background:var(--verde)}
.semaforo .luce.giallo{background:var(--giallo)}
.semaforo .luce.rosso{background:var(--rosso)}
.semaforo .luce.sconosciuto{background:var(--bordo2)}
.semaforo .testo{font-weight:700;font-size:15px}
.semaforo .quando{margin-left:auto;font-weight:400;font-size:13px;color:var(--testo3)}

/* ---------- login (il server vero tiene un cookie di sessione) ---------- */
.login{position:fixed;inset:0;background:var(--bg);z-index:110;display:flex;align-items:center;justify-content:center;padding:20px}
.login[hidden]{display:none}
.login-box{background:var(--sup);border:1px solid var(--bordo);border-radius:12px;padding:32px 28px;max-width:340px;width:100%;display:flex;flex-direction:column;gap:14px;text-align:center}
.login-box p{margin:0;color:var(--testo2);font-size:13.5px}
.login-box .campo{text-align:left}
.login-errore{color:var(--testo);background:var(--sup2);border-radius:6px;padding:8px 10px;font-size:13px}
.login-errore[hidden]{display:none}

/* ---------- installazione da telefono ---------- */
.installa{display:none;gap:10px;align-items:center;background:var(--blu-soft);border:1px solid var(--blu-line);border-radius:var(--r);padding:10px 14px;margin-bottom:14px;font-size:13.5px;color:var(--testo2)}
.installa.on{display:flex;flex-wrap:wrap}
.installa b{color:var(--testo)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:860px){
  .riga{grid-template-columns:26px 1fr;gap:6px 10px}
  .mitt,.ogg{grid-column:2}
  .strumenti{grid-column:2;opacity:1;padding-top:4px;flex-wrap:wrap}
  .consolle{top:0}
  nav{margin-left:0;width:100%;overflow-x:auto;padding-bottom:6px}
  .tessera .az{margin-left:0;width:100%}
  .lettore{width:100vw;border-left:0}
  .rg{grid-template-columns:1fr}
  .semaforo .quando{margin-left:0;flex:1 1 100%}
}