/* Nuova interfaccia: guscio (barra laterale + contenuto) e componenti comuni nello stile del mockup.
   I colori di identità sono le variabili di app.css (--tinta, --acc): si cambiano solo lì. */
body.nuova{font-size:14px;line-height:1.45}
.nuova a{text-decoration:none}
.nuova a:hover{color:#163A86}
.guscio{display:flex;min-height:100vh;align-items:stretch}

/* barra laterale */
.laterale{flex:0 0 248px;background:var(--sup);border-right:1px solid var(--linea);padding:18px 14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.marchio{display:flex;align-items:center;gap:10px;padding:0 6px;min-width:0}
.marchio-ico{width:32px;height:32px;border-radius:8px;background:var(--tinta);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.marchio-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.marchio-txt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marchio-txt small{font-size:12px;color:var(--muted)}
.etichetta-sez{display:block;font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin:0 6px 6px}
.etichetta-sez.sep{margin:14px 12px 4px}
.cerca{font:inherit;padding:0 12px;border:1px solid #CBD2DA;border-radius:8px;background:#fff;min-height:40px;width:100%}
.nav-lat{display:flex;flex-direction:column;gap:2px}
.nav-lat a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--tinta2);min-height:24px}
.nav-lat a:hover{background:#EBEEF2;color:var(--tinta)}
.nav-lat a.on{background:#E6ECFA;color:var(--acc);font-weight:600}
.cnt{margin-left:auto;font-size:12px;font-weight:600;background:#E4E8ED;color:var(--tinta2);border-radius:999px;padding:1px 8px}
.cnt.rosso{background:var(--err-bg);color:var(--err)}
.cnt.blu{background:var(--acc);color:#fff}
.cnt.agg{background:#DCEBFF;color:#1F5FBF;animation:agg-pulsa 2.4s ease-in-out infinite}
@keyframes agg-pulsa{0%,100%{box-shadow:0 0 0 0 rgba(31,95,191,.35)}50%{box-shadow:0 0 0 4px rgba(31,95,191,0)}}
.laterale-pie{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.laterale-pie .lector-pill{align-self:flex-start;white-space:normal}
.utente{display:flex;align-items:center;gap:8px;padding:8px 4px 0;border-top:1px solid var(--linea2)}
.avatar{width:32px;height:32px;border-radius:50%;background:#E6ECFA;color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
.utente-txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.utente-txt b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.utente-txt small{font-size:12px;color:var(--muted)}
.scelta-lingua select{font:inherit;font-size:12px;padding:3px 4px;border:1px solid var(--linea);border-radius:6px;background:#fff}
.btn-icona{border:none;background:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;display:flex}
.btn-icona:hover{background:#EBEEF2;color:var(--tinta)}
.utente-azioni{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.utente-azioni .scelta-lingua select{font-size:13px;height:30px;padding:0 6px;cursor:pointer}
.btn-esci{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;font:inherit;font-size:13px;color:var(--tinta2);background:#fff;border:1px solid var(--linea);border-radius:6px;cursor:pointer}
.btn-esci:hover{color:var(--err);border-color:currentColor;background:var(--err-bg)}
.btn-menu{display:none;margin-left:auto;border:1px solid var(--linea);background:#fff;border-radius:8px;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.btn-menu span{display:block;width:18px;height:2px;background:var(--tinta);border-radius:1px}

/* contenuto */
.contenuto{flex:1;min-width:0;padding:26px 32px 48px;display:flex;flex-direction:column;gap:20px;max-width:1280px}
.contenuto.largo{max-width:none;padding:12px 18px;gap:10px}
.titolo-pag{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}
.titolo-pag h1{margin:2px 0 0;font-size:26px;font-weight:600}
.titolo-pag .sopra{color:var(--muted)}
.briciole{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.card{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:20px;min-width:0}
.card.senza-pad{padding:0}
.card h2{margin:0 0 12px;font-size:17px;font-weight:600}
.card-tit{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 8px}
.card-tit h2{margin:0}
.lbl{font-size:12px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.numero{color:var(--tinta);display:block}
a.numero:hover{border-color:#B9C6DE;color:var(--tinta)}
.numero b{display:block;font-size:30px;font-weight:600;margin:4px 0}
.numero b.rosso{color:var(--err)}
.card-riga{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-riga h2{margin:0}
.numeri.piccoli{margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.numeri.piccoli .numero{border:1px solid var(--linea2);border-radius:10px;padding:12px 14px}
.numeri.piccoli .numero b{font-size:24px}
.righe{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.righe li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.righe li b{font-family:var(--mono);font-weight:500}
/* due colonne standard: contenuto a sinistra, colonna di destra sempre della stessa larghezza (--col-dx) per le
   funzioni da tenere in vista. Se la colonna stretta viene prima, sta a sinistra; senza, una colonna sola. */
:root{--col-dx:360px}
.colonne{display:grid;grid-template-columns:minmax(0,1fr) var(--col-dx);gap:22px;align-items:start}
.colonne>.larga{min-width:0}
.colonne>.stretta{min-width:0;display:flex;flex-direction:column;gap:22px}
.colonne:has(>.stretta:first-child){grid-template-columns:var(--col-dx) minmax(0,1fr)}
.colonne:not(:has(>.stretta)){grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){.colonne,.colonne:has(>.stretta:first-child){grid-template-columns:minmax(0,1fr)}}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.err{background:var(--err-bg);color:var(--err)}
.pill.neu{background:#EEF0F3;color:var(--tinta2)}.pill.blu{background:#E6ECFA;color:var(--acc)}
.barra-tri{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#E4E8ED}
.barra-tri i{display:block;height:100%}
.barra-tri .v{background:var(--ok)}.barra-tri .r{background:#D9A23A}.barra-tri .p{background:#AEB7C2}
.tabella{width:100%;border-collapse:collapse}
.tabella th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabella td{padding:11px 10px;border-bottom:1px solid var(--linea2);vertical-align:middle}
.tabella tr:last-child td{border-bottom:none}
.tabella .num{text-align:right}
/* intestazioni ordinabili (base/ordina.js) */
.th-ord{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;border-radius:4px;padding:1px 2px;margin:-1px -2px}
.th-ord:hover{color:var(--tinta)}
.th-ord:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.th-ord .freccia{font-size:11px;opacity:.35}
.th-ord:hover .freccia{opacity:.7}
.th-ord.on{color:var(--tinta);font-weight:600}
.th-ord.on .freccia{opacity:1;color:var(--acc)}
.tabella th.num .th-ord{flex-direction:row-reverse}
/* caselle di selezione delle righe: piccole, con i colori del programma */
.tabella input.sel-riga{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin:0;border:1.5px solid var(--linea);border-radius:4px;background:var(--carta,#fff);cursor:pointer;display:inline-grid;place-content:center;vertical-align:middle;transition:background .12s,border-color .12s}
.tabella input.sel-riga:hover{border-color:var(--acc)}
.tabella input.sel-riga:checked,.tabella input.sel-riga:indeterminate{background:var(--acc);border-color:var(--acc)}
.tabella input.sel-riga:checked::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.tabella input.sel-riga:indeterminate::after{content:"";width:8px;height:2px;background:#fff;border-radius:1px}
.tabella input.sel-riga:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tabella th.col-sel,.tabella td.col-sel{width:26px;padding-right:0}
.tabella tr:not(.riga-sel) td.col-sel input.sel-riga:not(:checked){opacity:.55}
.tabella tr:hover td.col-sel input.sel-riga{opacity:1}
.tabella th.num{font-family:inherit;font-size:12px}
.tabella a.nome{font-weight:600;color:var(--tinta)}
.tabella a.nome:hover{color:var(--acc)}
.tabella td.acc{display:table-cell;text-align:right;white-space:nowrap}
.tabella td.acc .btn+.btn{margin-left:6px}
.piccolo{font-size:12px;color:var(--muted)}
.scorre{overflow-x:auto}
.scadenza{display:flex;flex-wrap:wrap;align-items:center;gap:16px;border-color:#F0C988;background:#FFF8EC;color:var(--tinta)}
.scadenza.verde{border-color:#BFDFCB;background:#F3FAF5}
.scadenza-ico{width:44px;height:44px;border-radius:10px;background:var(--warn-bg);color:var(--warn);display:flex;align-items:center;justify-content:center;flex:none}
.scadenza.verde .scadenza-ico{background:var(--ok-bg);color:var(--ok)}
.scadenza b{font-size:16px;font-weight:600}
.schede{display:flex;gap:4px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.schede a{padding:10px 14px;color:var(--tinta2);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.schede a.on{color:var(--acc);border-bottom-color:var(--acc)}
.schede a:hover{color:var(--tinta)}
.vuoto-grande{padding:40px 20px;text-align:center;color:var(--muted)}
.sotto{margin-top:22px!important}
.lettura-classica{display:flex;flex-direction:column;gap:16px}

/* accesso */
/* accesso: a sinistra la «scena» (blu notte, righe di un libro contabile), a destra il modulo */
.accesso{min-height:calc(100vh / var(--z,1));display:grid;grid-template-columns:minmax(0,1.25fr) minmax(400px,1fr);background:#fff}
.acc-scena{position:relative;overflow:hidden;background:#0D1B3D;color:#E9EEF8;padding:44px 56px;display:flex;flex-direction:column;gap:32px;
  background-image:repeating-linear-gradient(to bottom,transparent 0 43px,rgba(160,185,235,.06) 43px 44px)}
.acc-libro{position:absolute;left:0;right:0;bottom:0;max-height:40%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 56px 8px;font-family:var(--mono);font-size:14px;color:rgba(190,208,245,.22);pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%);mask-image:linear-gradient(to bottom,transparent,#000 55%);
  background:linear-gradient(to right,transparent calc(100% - 210px),rgba(160,185,235,.14) calc(100% - 210px) calc(100% - 209px),transparent calc(100% - 209px) calc(100% - 205px),rgba(160,185,235,.14) calc(100% - 205px) calc(100% - 204px),transparent calc(100% - 204px))}
.acc-riga{flex:none;display:grid;grid-template-columns:70px 60px 1fr 140px;height:44px;align-items:center;opacity:0;animation:acc-entra .9s ease forwards}
.acc-riga span:last-child{text-align:right}
@keyframes acc-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.acc-marchio,.acc-centro{position:relative}
.acc-marchio{display:flex;align-items:center;gap:12px}
.acc-ico{width:42px;height:42px;border-radius:11px;background:#2A55C9;color:#fff;display:flex;align-items:center;justify-content:center}
.acc-nome{font-family:'IBM Plex Serif',Georgia,serif;font-size:30px;font-weight:500;letter-spacing:.01em;color:#fff}
.acc-centro{margin-top:clamp(40px,11vh,130px);max-width:600px}
.acc-motto{font-family:'IBM Plex Serif',Georgia,serif;font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:1.12;letter-spacing:-.01em;margin:0 0 28px;color:#fff}
.acc-motto em{font-style:italic;color:#9DB8F2}
.acc-punti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px;color:#C9D5EE}
.acc-punti li{display:flex;align-items:center;gap:12px}
.acc-punti svg{color:#7FD1A6;flex:none}
.acc-studio{margin:0 0 6px;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.acc-lato{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px}
.acc-lingua{position:absolute;top:24px;right:28px}
.accesso-caja{width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px}
.accesso-caja h2{font-family:'IBM Plex Serif',Georgia,serif;font-weight:500;font-size:32px;margin:0;color:var(--tinta)}
.acc-sotto{margin:0 0 22px;color:var(--muted);font-size:15px}
.accesso-caja label{font-size:13px;color:var(--tinta2);font-weight:500;margin-top:8px}
.accesso-caja input{border:1px solid #C6CED8;border-radius:8px;padding:10px 12px;min-height:48px;font-size:15px;background:#fff}
.accesso-caja input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
body.nuova .accesso-caja .btn{height:50px;min-height:50px;justify-content:center;font-size:16px;margin-top:18px;border-radius:8px}
.accesso-caja .error-txt:empty{display:none}
.acc-legale{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted);margin:0;padding:0 20px}
@media (max-width:900px){
  .accesso{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .acc-scena{padding:24px 22px 28px;gap:18px}
  .acc-libro,.acc-punti{display:none}
  .acc-centro{margin:0}
  .acc-motto{font-size:28px;margin:0}
  .acc-nome{font-size:24px}
  .acc-ico{width:36px;height:36px}
  .acc-lato{justify-content:flex-start;padding:32px 22px 70px}
  .acc-lingua{top:auto;bottom:auto;position:static;align-self:flex-end;margin-bottom:8px}
  .accesso-caja h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.acc-riga{animation:none;opacity:1}}

/* telefono e schermi stretti: la barra laterale diventa una barra in alto con menu */
@media (max-width:900px){
  .guscio{flex-direction:column}
  .laterale{position:static;height:auto;flex:none;border-right:none;border-bottom:1px solid var(--linea);padding:10px 14px;gap:10px}
  .btn-menu{display:flex}
  .laterale:not(.aperta) .vai-cliente,.laterale:not(.aperta) .nav-lat,.laterale:not(.aperta) .laterale-pie{display:none}
  .contenuto{padding:18px 16px 40px}
  .titolo-pag h1{font-size:22px}
}

/* ---- Densità compatta (10/2026, richiesta di Yuriy): meno spazio vuoto, più cose in una schermata ---- */
body.nuova{font-size:13.5px;line-height:1.4}
body.nuova .laterale{flex-basis:222px;padding:14px 10px;gap:12px}
body.nuova .nav-lat a{padding:7px 10px;gap:9px}
body.nuova .contenuto{padding:16px 22px 32px;gap:12px;max-width:1600px}
body.nuova .titolo-pag h1{font-size:21px}
body.nuova .card{padding:14px 16px;border-radius:10px}
body.nuova .card.senza-pad{padding:0}
body.nuova .card h2{font-size:15px;margin:0 0 8px}
body.nuova .card-tit{padding:11px 16px 6px}
body.nuova .card-tit h2{margin:0}
body.nuova .numeri{gap:10px}
body.nuova .numero b{font-size:24px;margin:2px 0}
body.nuova .numeri.piccoli{margin-top:10px}
body.nuova .numeri.piccoli .numero{padding:8px 12px}
body.nuova .numeri.piccoli .numero b{font-size:20px}
body.nuova .colonne{gap:12px}
body.nuova .tabella th{padding:6px 8px}
body.nuova .tabella td{padding:6px 8px}
body.nuova .schede a{padding:7px 12px}
body.nuova .btn{min-height:32px;padding:0 12px;gap:6px}
body.nuova .btn.peq{min-height:26px;padding:0 9px;font-size:12.5px}
body.nuova .chip{min-height:28px;padding:0 10px;font-size:12.5px}
body.nuova .cerca{min-height:32px}
body.nuova .sel{min-height:32px}
body.nuova .cli-testa{gap:10px 14px}
body.nuova .cli-avatar{width:42px;height:42px;border-radius:10px;font-size:15px}
body.nuova .cli-nome h1{font-size:20px}
body.nuova .cli-nome{gap:2px}
@media (max-width:900px){body.nuova .contenuto{padding:12px 12px 32px}}

/* ---- Forme uniformi: campi, tendine, bottoni e filtri alla stessa altezza e con gli stessi angoli ---- */
body.nuova .cerca,body.nuova .sel,body.nuova .btn{border-radius:6px}
body.nuova .cerca,body.nuova .sel{min-height:32px;border-color:#C6CED8}
/* filtri a scelta (gruppi di chip): un unico controllo segmentato, rettangolare come i campi */
body.nuova .chips[role=group]{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid #C6CED8;border-radius:6px;background:#fff;overflow:hidden;align-self:center}
body.nuova .chips[role=group] .chip{border:none;border-radius:0;min-height:30px;padding:0 11px;background:transparent;border-right:1px solid #E3E7EC;color:var(--tinta2);text-decoration:none}
body.nuova .chips[role=group] .chip:last-child{border-right:none}
body.nuova .chips[role=group] .chip:hover{background:#F2F4F7;color:var(--tinta)}
body.nuova .chips[role=group] .chip b{color:var(--muted);font-weight:600}
body.nuova .chips[role=group] .chip.on{background:var(--acc);color:#fff}
body.nuova .chips[role=group] .chip.on b{color:#fff}

/* niente riquadro di focus sulle schede cliccate col mouse (resta con la tastiera) */
body.nuova .schede a:focus:not(:focus-visible){outline:none}

@media (max-width:900px){body.nuova .laterale{flex-basis:auto}body.nuova .card-tit{flex-wrap:wrap}body.nuova .card-tit .barra-herr{flex-wrap:wrap}}

/* schermi grandi (2K, 4K a scala 100 %): tutto un po' più grande, come uno zoom del browser */
body.nuova{--z:1}
@media (min-width:1900px){body.nuova{zoom:1.1;--z:1.1}}
@media (min-width:2300px){body.nuova{zoom:1.25;--z:1.25}}
@media (min-width:3000px){body.nuova{zoom:1.5;--z:1.5}}
/* con lo zoom le altezze «a schermo intero» vanno divise per lo zoom, se no escono dallo schermo */
body.nuova .guscio{min-height:calc(100vh / var(--z))}
body.nuova .laterale{height:calc(100vh / var(--z))}
body.nuova .rev-pag{height:calc(100vh / var(--z) - 24px)}
body.nuova .modale{max-height:calc(100vh / var(--z) - 32px)}
body.nuova .pap-img{max-height:calc(100vh / var(--z) - 110px)}
body.nuova .lab-vista{height:calc(100vh / var(--z) - 140px)}
body.nuova .contenuto{max-width:1800px}
body.nuova .contenuto.largo{max-width:none}
@media (max-width:900px){body.nuova .laterale{height:auto}}

/* «Nome o NIF…»: lista compatta (un cliente per riga, NIF a destra); esce dalla barra laterale */
.laterale:has(.cerca-cli-lista){overflow:visible;min-width:0}
.laterale{min-width:0}
.cerca-cli{position:relative}
.cerca-cli .cerca{width:100%}
.cerca-cli-lista{position:absolute;top:calc(100% + 4px);left:0;z-index:60;width:max(100%,400px);max-height:min(60vh,440px);overflow-y:auto;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid var(--linea);border-radius:8px;box-shadow:0 8px 24px rgba(20,30,50,.14)}
.cerca-cli-lista li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 10px;border-radius:5px;cursor:pointer;font-size:14px;line-height:1.35}
.cerca-cli-lista li.on{background:#EAF0FB}
.cerca-cli-lista .cc-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cerca-cli-lista .cc-nif{flex:none;font-size:12.5px;color:var(--muted)}
.cerca-cli-lista.vuota{padding:8px 12px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.cerca-cli-lista{width:100%}}
/* segno di Asienta (foglio con la spunta) nel riquadro del marchio */
.marchio-svg{width:80%;height:80%;display:block}

/* ---- Barra laterale: scura (predefinita, blu notte come il portale del cliente) o chiara; larga o stretta (solo icone).
   I pulsanti sono in fondo alla barra; la scelta resta nel browser (guscio.js). ---- */
.nav-lat svg,.btn-lat svg,.btn-esci svg{flex:none;display:block}
.lat-strumenti{display:flex;gap:6px;flex-wrap:wrap}
.btn-lat{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;font:inherit;font-size:12.5px;color:var(--tinta2);background:none;border:1px solid var(--linea);border-radius:6px;cursor:pointer}
.btn-lat:hover{background:#EBEEF2;color:var(--tinta)}
.laterale.scuro{background:radial-gradient(120% 50% at 0% 0%,#1B3A86 0%,rgba(27,58,134,0) 60%),linear-gradient(180deg,#10224F 0%,#0B1838 100%);border-right-color:#0B1838;color:#E6ECF8}
.laterale.scuro .marchio-txt b{color:#fff}
.laterale.scuro .marchio-txt small,.laterale.scuro .etichetta-sez{color:#8FA3CC}
.laterale.scuro .marchio-ico{background:linear-gradient(135deg,#5B8CFF,#2A55C9);box-shadow:0 4px 12px rgba(42,85,201,.45)}
body.nuova .laterale.scuro .cerca{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.laterale.scuro .cerca::placeholder{color:#8FA3CC}
.nav-lat a{position:relative}
.laterale.scuro .nav-lat a{color:#B9C7E6}
.laterale.scuro .nav-lat a:hover{background:rgba(255,255,255,.07);color:#fff}
.laterale.scuro .nav-lat a.on{background:linear-gradient(90deg,rgba(91,140,255,.28),rgba(91,140,255,.08));color:#fff}
.laterale.scuro .nav-lat a.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:#6F9BFF;box-shadow:0 0 12px #6F9BFF}
.laterale.scuro .nav-lat a.on svg{color:#9DBBFF}
.laterale.scuro .cnt{background:rgba(255,255,255,.12);color:#E6ECF8}
.laterale.scuro .cnt.rosso{background:#E5484D;color:#fff}
.laterale.scuro .cnt.blu{background:#5B8CFF;color:#fff}
.laterale.scuro .cnt.agg{background:rgba(111,155,255,.25);color:#CFDDFF}
.laterale.scuro .utente{border-top-color:rgba(255,255,255,.08)}
.laterale.scuro .avatar{background:linear-gradient(135deg,#5B8CFF,#2A55C9);color:#fff}
.laterale.scuro .utente-txt b{color:#fff}
.laterale.scuro .utente-txt small{color:#8FA3CC}
.laterale.scuro .scelta-lingua select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#E6ECF8}
.laterale.scuro .scelta-lingua option{color:#1B2533}
.laterale.scuro .btn-esci,.laterale.scuro .btn-lat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#D7E0F3}
.laterale.scuro .btn-lat:hover{background:rgba(255,255,255,.12);color:#fff}
.laterale.scuro .btn-esci:hover{background:rgba(229,72,77,.25);border-color:rgba(229,72,77,.5);color:#fff}
.laterale.scuro .lector-pill{background:rgba(255,255,255,.08);color:#B9C7E6}
.laterale.scuro .lector-pill.on{background:rgba(30,127,74,.28);color:#8FDDB3}
.laterale.scuro .lector-pill.pausa{background:rgba(217,162,58,.22);color:#F0C988}
.laterale.scuro .lector-pill.off{background:rgba(229,72,77,.22);color:#FFA3A6}
.laterale.scuro .btn-menu{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.laterale.scuro .btn-menu span{background:#fff}
/* stretta: solo icone (sul computer; sul telefono la barra è già in alto con il menu) */
@media (min-width:901px){
  body.nuova .laterale.stretta{flex-basis:64px;width:64px;padding:14px 8px;align-items:stretch}
  .laterale.stretta .marchio-txt,.laterale.stretta .vai-cliente,.laterale.stretta .nl,.laterale.stretta .utente-txt,.laterale.stretta .scelta-lingua{display:none}
  .laterale.stretta .marchio{padding:0;justify-content:center}
  body.nuova .laterale.stretta .nav-lat a{justify-content:center;padding:10px 0}
  .laterale.stretta .nav-lat .cnt{position:absolute;top:1px;right:2px;margin:0;font-size:10px;line-height:16px;min-width:16px;padding:0 4px;text-align:center}
  .laterale.stretta .etichetta-sez.sep{font-size:0;height:1px;margin:8px 8px;background:currentColor;opacity:.2}
  .laterale.stretta.scuro .nav-lat a.on::before{left:-8px}
  .laterale.stretta .laterale-pie{align-items:center}
  .laterale.stretta .lector-pill{font-size:0;padding:7px;gap:0;align-self:center}
  .laterale.stretta .lat-strumenti{flex-direction:column;align-items:center}
  .laterale.stretta .btn-lat,.laterale.stretta .btn-esci{width:36px;height:32px;padding:0;justify-content:center}
  .laterale.stretta .utente{justify-content:center;padding:8px 0 0;width:100%}
  .laterale.stretta .utente-azioni{justify-content:center;padding:0}
}