/* =====================================================================
   ENOVA LEGALE — Gestione fascicoli legali di gruppo — foglio di stile unico
   Stessa famiglia visiva di ENOVA APT: blu profondo, blu elettrico,
   verde acqua. Neutri con leggera dominante blu.
   ===================================================================== */
:root {
  --blu:        #0b2e9e;
  --blu-scuro:  #071c63;
  --blu-chiaro: #1547d6;
  --acqua:      #0fc0aa;
  --ciano:      #14bee0;
  --verde:      #1a7f37;  --verde-bg: #e4f5e9;
  --rosso:      #c0392b;  --rosso-bg: #fdecea;
  --giallo:     #a8760a;  --giallo-bg: #fdf4de;
  --arancio:    #c2670f;  --arancio-bg: #fdeede;
  --viola:      #6d28d9;  --viola-bg: #efe7fb;
  --sfondo:     #f3f5f9;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --linea:      #e3e8ef;
  --linea-2:    #c1cad6;
  --testo:      #1b2530;
  --testo-2:    #5f6f80;
  --blu-bg:     #e6ecfa;
  --ombra:      0 1px 3px rgba(16,32,52,.10), 0 1px 2px rgba(16,32,52,.06);
  --ombra-alta: 0 10px 30px rgba(16,32,52,.18);
  --raggio:     10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blu: #7d9bff; --blu-scuro: #a9bcff; --blu-chiaro: #6f8fff; --acqua: #2fd6c1; --ciano: #38cdea;
    --verde: #5fcf82; --verde-bg: #14301d; --rosso: #f0857a; --rosso-bg: #3a1d1a;
    --giallo: #e2b24a; --giallo-bg: #33290f; --arancio: #f0a05a; --arangio-bg: #33220f; --arancio-bg: #33220f;
    --viola: #b995f5; --viola-bg: #2a1c44;
    --sfondo: #0f141b; --superficie: #171e27; --superficie-2: #1d2530; --linea: #2a3441; --linea-2: #3b4757;
    --testo: #e6ebf2; --testo-2: #98a6b6; --blu-bg: #1c2742;
    --ombra: 0 1px 3px rgba(0,0,0,.4); --ombra-alta: 0 10px 30px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --blu: #7d9bff; --blu-scuro: #a9bcff; --blu-chiaro: #6f8fff; --acqua: #2fd6c1; --ciano: #38cdea;
  --verde: #5fcf82; --verde-bg: #14301d; --rosso: #f0857a; --rosso-bg: #3a1d1a;
  --giallo: #e2b24a; --giallo-bg: #33290f; --arancio: #f0a05a; --arancio-bg: #33220f;
  --viola: #b995f5; --viola-bg: #2a1c44;
  --sfondo: #0f141b; --superficie: #171e27; --superficie-2: #1d2530; --linea: #2a3441; --linea-2: #3b4757;
  --testo: #e6ebf2; --testo-2: #98a6b6; --blu-bg: #1c2742;
  --ombra: 0 1px 3px rgba(0,0,0,.4); --ombra-alta: 0 10px 30px rgba(0,0,0,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--sfondo); color: var(--testo);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--blu-chiaro); }
:focus-visible { outline: 2px solid var(--acqua); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------ LOGO */
.logo-login { text-align: center; margin-bottom: 8px; }
.logo-login img { width: 260px; max-width: 84%; height: auto; display: inline-block; }
.barra-alta .marchio img { height: 38px; width: auto; display: block; }
/* ------------------------------------------------------------- LOGIN */
#schermata-login {
  min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(1000px 520px at 82% 6%, rgba(20,190,224,.35), transparent 62%),
    radial-gradient(760px 460px at 8% 96%, rgba(15,192,170,.30), transparent 60%),
    linear-gradient(146deg, #071c63 0%, #0a2a92 52%, #1547d6 100%);
}
#schermata-login.attiva { display: flex; }
.box-login {
  background: #ffffff; color: #1b2530; width: 100%; max-width: 420px;
  border-radius: 16px; padding: 34px 32px 30px; box-shadow: 0 20px 50px rgba(4,16,60,.34);
}
.box-login .sottotitolo { text-align: center; font-size: 13px; color: #5f6f80; margin-bottom: 26px; }
.box-login .campo input { background: #fff; color: #1b2530; border-color: #c1cad6; }
.box-login .campo label { color: #5f6f80; }
.box-login .btn-primario { background: #0b2e9e; }
.box-login .piede { margin-top: 18px; font-size: 12.5px; color: #5f6f80; text-align: center; }
.box-login .piede b { color: #0b2e9e; }

/* ------------------------------------------------------------- FORM */
.campo { margin-bottom: 14px; min-width: 0; }
.campo label { display: block; font-size: 12px; font-weight: 700; color: var(--testo-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea-2); border-radius: 8px;
  background: var(--superficie); color: var(--testo); transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--blu-chiaro); box-shadow: 0 0 0 3px rgba(21,71,214,.14); }
.campo textarea { min-height: 78px; resize: vertical; }
.campo .aiuto { font-size: 12px; color: var(--testo-2); margin-top: 4px; }
.griglia { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.griglia-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.griglia > *, .griglia-2 > * { min-width: 0; }

/* ---------------------------------------------------------- PULSANTI */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border: 1px solid transparent; border-radius: 8px;
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .06s, box-shadow .15s; background: none;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--blu); color: #fff; }
.btn-primario:hover { filter: brightness(.92); }
.btn-acqua { background: var(--acqua); color: #052b26; }
.btn-chiaro { background: var(--superficie); color: var(--testo); border-color: var(--linea-2); }
.btn-chiaro:hover { background: var(--superficie-2); }
.btn-rosso { background: var(--rosso-bg); color: var(--rosso); }
.btn-piccolo { padding: 6px 11px; font-size: 13px; }
.btn-largo { width: 100%; }
.btn .ico { font-size: 15px; line-height: 1; }

/* ------------------------------------------------------- STRUTTURA */
#schermata-app { display: none; min-height: 100vh; }
#schermata-app.attiva { display: block; }
.barra-alta {
  background: var(--superficie); padding: 0 20px; height: 62px;
  display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--linea); box-shadow: 0 1px 4px rgba(11,46,158,.07);
}
.barra-alta .spazio { flex: 1; }
.barra-alta .cerca {
  display: flex; align-items: center; gap: 8px; background: var(--superficie-2); border: 1px solid var(--linea);
  border-radius: 8px; padding: 7px 12px; min-width: 260px; color: var(--testo-2); font-size: 13.5px;
}
.barra-alta .cerca kbd { margin-left: auto; font-size: 11px; border: 1px solid var(--linea-2); border-radius: 4px; padding: 0 5px; }
.campanella { position: relative; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; font-size: 17px; }
.campanella .pallino { position: absolute; top: -6px; right: -6px; background: var(--rosso); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--superficie); }
.utente-info { font-size: 13px; text-align: right; line-height: 1.3; }
.utente-info b { display: block; color: var(--blu); }
.utente-info small { color: var(--testo-2); }
.barra-alta .esci { background: var(--superficie-2); color: var(--blu); border: 1px solid var(--linea); padding: 7px 13px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; }

.menu { background: var(--superficie); border-bottom: 1px solid var(--linea); padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; position: sticky; top: 62px; z-index: 40; }
.menu button { background: none; border: none; padding: 13px 15px; font-weight: 600; font-size: 14px; color: var(--testo-2); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.menu button:hover { color: var(--blu); }
.menu button.attivo { color: var(--blu); border-bottom-color: var(--acqua); }
.menu .conta { background: var(--rosso-bg); color: var(--rosso); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 10px; }

.contenuto { padding: 22px 20px 90px; max-width: 1400px; margin: 0 auto; }
.pagina { display: none; }
.pagina.attiva { display: block; animation: entra .18s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.titolo-pagina { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.titolo-pagina h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; text-wrap: balance; }
.titolo-pagina .sub { font-size: 13px; color: var(--testo-2); }
.titolo-pagina .azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------- CARD */
.card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); margin-bottom: 18px; min-width: 0; }
.card-testa { padding: 13px 18px; border-bottom: 1px solid var(--linea); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-testa .link { font-size: 13px; font-weight: 600; color: var(--blu-chiaro); cursor: pointer; }
.card-corpo { padding: 16px 18px; }
.card-corpo.stretto { padding: 0; }

/* --------------------------------------------------------- CRUSCOTTO */
.kpi-griglia { display: grid; gap: 14px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 15px 16px; box-shadow: var(--ombra); border-left: 4px solid var(--blu-chiaro); min-width: 0; cursor: pointer; }
.kpi .etichetta { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--testo-2); font-weight: 700; margin-bottom: 6px; }
.kpi .valore { font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .nota { font-size: 12px; color: var(--testo-2); margin-top: 4px; }
.kpi.rosso { border-left-color: var(--rosso); } .kpi.rosso .valore { color: var(--rosso); }
.kpi.giallo { border-left-color: var(--giallo); }
.kpi.viola { border-left-color: var(--viola); }
.kpi.verde { border-left-color: var(--verde); }
.kpi.acqua { border-left-color: var(--acqua); }

.colonne-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.colonne-2 > * { min-width: 0; }

.barra-grafico { display: flex; flex-direction: column; gap: 9px; }
.barra-riga { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 10px; font-size: 13.5px; }
.barra-riga .etich { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-riga .traccia { background: var(--linea); border-radius: 5px; height: 18px; overflow: hidden; }
.barra-riga .riemp { background: var(--blu-chiaro); height: 100%; border-radius: 5px; }
.barra-riga .riemp.acqua { background: var(--acqua); }
.barra-riga .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- SCADENZE */
.elenco { display: flex; flex-direction: column; gap: 9px; }
.riga-scad {
  background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--linea-2);
  border-radius: var(--raggio); padding: 11px 14px; display: grid; gap: 2px 14px;
  grid-template-columns: 74px 1fr auto; align-items: center; cursor: pointer; transition: box-shadow .15s;
}
.riga-scad:hover { box-shadow: var(--ombra-alta); }
.riga-scad.scaduta { border-left-color: var(--rosso); background: color-mix(in srgb, var(--rosso-bg) 40%, var(--superficie)); }
.riga-scad.urgente { border-left-color: var(--rosso); }
.riga-scad.presto { border-left-color: var(--giallo); }
.riga-scad.ok { border-left-color: var(--acqua); }
.riga-scad.fatta { opacity: .6; }
.riga-scad.fatta .titolo { text-decoration: line-through; }
.rs-quando { text-align: center; border-right: 1px solid var(--linea); padding-right: 10px; }
.rs-quando .giorno { font-size: 20px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.rs-quando .mese { font-size: 10.5px; text-transform: uppercase; color: var(--testo-2); font-weight: 700; letter-spacing: .5px; }
.rs-quando .ora { font-size: 12px; font-weight: 700; color: var(--blu-chiaro); margin-top: 2px; }
.rs-centro { min-width: 0; }
.rs-centro .titolo { font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rs-centro .dettagli { font-size: 12.5px; color: var(--testo-2); display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; }
.rs-destra { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.conto { font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conto.rosso { background: var(--rosso-bg); color: var(--rosso); }
.conto.giallo { background: var(--giallo-bg); color: var(--giallo); }
.conto.acqua { background: color-mix(in srgb, var(--acqua) 18%, var(--superficie)); color: var(--verde); }
.conto.grigio { background: var(--linea); color: var(--testo-2); }

.perentorio { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--rosso); border: 1px solid var(--rosso); border-radius: 4px; padding: 0 5px; }

/* ------------------------------------------------------------ BADGE */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; line-height: 1.4; }
.badge.grigio { background: var(--linea); color: var(--testo-2); }
.badge.blu { background: var(--blu-bg); color: var(--blu); }
.badge.verde { background: var(--verde-bg); color: var(--verde); }
.badge.rosso { background: var(--rosso-bg); color: var(--rosso); }
.badge.giallo { background: var(--giallo-bg); color: var(--giallo); }
.badge.arancio { background: var(--arancio-bg); color: var(--arancio); }
.badge.viola { background: var(--viola-bg); color: var(--viola); }
.badge.acqua { background: color-mix(in srgb, var(--acqua) 18%, var(--superficie)); color: var(--verde); }

/* Sigla azienda: stessa forma ovunque, colore per società */
.az { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 900; letter-spacing: .3px; padding: 2px 7px; border-radius: 5px; color: #fff; white-space: nowrap; min-width: 34px; }
.az-sei { background: #0b2e9e; } .az-fe { background: #0fa58f; } .az-rei { background: #1547d6; } .az-eai { background: #2e8b57; }
.az-gne { background: #5b3cc4; } .az-p4u { background: #d9762b; } .az-eq { background: #1b2530; } .az-m4u { background: #b03a5b; }
:root[data-theme="dark"] .az-eq { background: #4a5a6e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .az-eq { background: #4a5a6e; } }

/* ------------------------------------------------------------ FILTRI */
.filtri { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 12px 16px; margin-bottom: 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; box-shadow: var(--ombra); }
.filtri .campo { margin: 0; }
.filtri .azioni { display: flex; gap: 8px; }
.segmenti { display: inline-flex; border: 1px solid var(--linea-2); border-radius: 8px; overflow: hidden; }
.segmenti button { background: var(--superficie); border: none; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--testo-2); cursor: pointer; }
.segmenti button + button { border-left: 1px solid var(--linea-2); }
.segmenti button.attivo { background: var(--blu); color: #fff; }

/* ------------------------------------------------------------ TABELLA */
.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th { text-align: left; padding: 10px 12px; background: var(--superficie-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--testo-2); font-weight: 700; border-bottom: 1px solid var(--linea); white-space: nowrap; }
table.tab td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.tab tr:last-child td { border-bottom: none; }
table.tab tbody tr { cursor: pointer; }
table.tab tbody tr:hover { background: var(--superficie-2); }
table.tab .t-tit { font-weight: 700; }
table.tab .t-sub { font-size: 12.5px; color: var(--testo-2); }
table.tab .num { text-align: right; }

/* Rischio: tre tacche */
.rischio { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; vertical-align: middle; margin-right: 6px; }
.rischio i { width: 5px; background: var(--linea-2); border-radius: 1px; display: block; }
.rischio i:nth-child(1) { height: 6px; } .rischio i:nth-child(2) { height: 10px; } .rischio i:nth-child(3) { height: 14px; }
.rischio.basso i:nth-child(1) { background: var(--verde); }
.rischio.medio i:nth-child(-n+2) { background: var(--giallo); }
.rischio.alto i { background: var(--rosso); }


/* ------------------------------------------------------------ FASCICOLI */
.fascicolo {
  position: relative; margin: 30px 0 14px; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 0 10px 10px 10px; box-shadow: var(--ombra); display: grid; grid-template-columns: 1fr 330px;
  cursor: pointer; transition: box-shadow .15s;
}
.fascicolo:hover { box-shadow: var(--ombra-alta); }
.fascicolo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--blu-chiaro); border-radius: 0 0 0 10px; }
.fascicolo.evidenza::before { background: var(--rosso); }
.fascicolo.chiuso::before { background: var(--verde); }
.fascicolo.chiuso { opacity: .75; }
.fascicolo .linguetta {
  position: absolute; top: -27px; left: -1px; height: 28px; background: var(--superficie); border: 1px solid var(--linea); border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 0 12px 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
  display: flex; align-items: center; gap: 8px; color: var(--testo); max-width: calc(100% - 20px); white-space: nowrap;
}
.fascicolo .linguetta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--superficie); }
.fascicolo .linguetta .data { color: var(--testo-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.fascicolo .corpo { padding: 14px 16px 14px 20px; min-width: 0; }
.fascicolo .tit { font-weight: 700; font-size: 15.5px; text-wrap: balance; margin-bottom: 6px; }
.fascicolo .riga-meta { font-size: 13px; color: var(--testo-2); display: flex; flex-wrap: wrap; gap: 3px 16px; }
.fascicolo .riga-meta b { color: var(--testo); font-weight: 600; }
.fascicolo .riga-stato { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.fascicolo .scad-legali { border-left: 1px dashed var(--linea); background: var(--superficie-2); padding: 12px 14px; border-radius: 0 10px 10px 0; min-width: 0; }
.fascicolo .scad-legali .et { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--testo-2); font-weight: 800; margin-bottom: 6px; }
.fascicolo .scad-legali .vuota { font-size: 13px; color: var(--testo-2); }
.fascicolo .sl { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--linea); }
.fascicolo .sl:last-child { border-bottom: none; }
.fascicolo .sl .d { font-weight: 800; color: var(--blu); }
.fascicolo .sl.urg .d { color: var(--giallo); }
.fascicolo .sl.scad .d { color: var(--rosso); }
.fascicolo .sl .t { min-width: 0; overflow-wrap: anywhere; }
.fascicolo .sl .conto { font-size: 11px; padding: 2px 7px; }
@media (max-width: 900px) { .fascicolo { grid-template-columns: 1fr; } .fascicolo .scad-legali { border-left: none; border-top: 1px dashed var(--linea); border-radius: 0 0 10px 10px; } }

/* ------------------------------------------------------ SCHEDA PRATICA */
.testa-pratica { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px 20px; margin-bottom: 18px; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: start; }
.testa-pratica .codice { font-size: 12.5px; color: var(--testo-2); font-weight: 700; letter-spacing: .5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.testa-pratica h1 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 4px 0 8px; text-wrap: balance; }
.testa-pratica .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--testo-2); }
.testa-pratica .meta b { color: var(--testo); font-weight: 600; }
.testa-pratica .azioni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.marchio-azienda { height: 28px; width: auto; display: inline-block; vertical-align: middle; background: #fff; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--linea); }

.layout-pratica { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.layout-pratica > * { min-width: 0; }
.info-lista { display: flex; flex-direction: column; }
.info-voce { padding: 9px 0; border-bottom: 1px dashed var(--linea); }
.info-voce:last-child { border-bottom: none; }
.info-voce .et { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--testo-2); font-weight: 700; margin-bottom: 1px; }
.info-voce .vl { font-size: 14px; font-weight: 600; word-break: break-word; }

.tab-pratica { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); margin-bottom: 16px; overflow-x: auto; }
.tab-pratica button { background: none; border: none; padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--testo-2); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tab-pratica button.attivo { color: var(--blu); border-bottom-color: var(--acqua); }
.tab-pratica .n { font-size: 11px; font-weight: 800; background: var(--linea); color: var(--testo-2); padding: 0 6px; border-radius: 9px; }
.tab-pratica .n.viola { background: var(--viola-bg); color: var(--viola); }
.pannello { display: none; }
.pannello.attivo { display: block; }

/* Fasi: sequenza verticale, ordine = ordine del procedimento */
.fasi { position: relative; padding-left: 4px; }
.fase { display: grid; grid-template-columns: 30px 1fr; gap: 12px; position: relative; padding-bottom: 20px; }
.fase::before { content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; width: 2px; background: var(--linea); }
.fase:last-child::before { display: none; }
.fase .pallino { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--linea-2); background: var(--superficie); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--testo-2); z-index: 1; }
.fase.fatta .pallino { background: var(--verde); border-color: var(--verde); color: #fff; }
.fase.fatta::before { background: var(--verde); }
.fase.corrente .pallino { background: var(--blu); border-color: var(--blu); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--blu) 18%, transparent); }
.fase .corpo { background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 11px 14px; }
.fase.corrente .corpo { border-color: var(--blu-chiaro); background: color-mix(in srgb, var(--blu-bg) 55%, var(--superficie)); }
.fase .corpo .nome { font-weight: 700; font-size: 14.5px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.fase .corpo .quando { font-size: 12.5px; color: var(--testo-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.fase .corpo .note { font-size: 13.5px; margin-top: 7px; }
.fase .corpo ul { margin: 6px 0 0 18px; font-size: 13px; color: var(--testo-2); }

/* Documenti */
.doc { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); margin-bottom: 8px; }
.doc .icona { width: 42px; height: 42px; border-radius: 8px; background: var(--superficie-2); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--testo-2); border: 1px solid var(--linea); letter-spacing: .3px; }
.doc .nome { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc .dett { font-size: 12.5px; color: var(--testo-2); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.doc .az-doc { display: flex; gap: 6px; }
.doc.bozza { border: 1.5px dashed var(--viola); background: color-mix(in srgb, var(--viola-bg) 45%, var(--superficie)); }
.doc.bozza .icona { border-style: dashed; border-color: var(--viola); color: var(--viola); background: transparent; }
.cartella { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--testo-2); margin: 16px 0 8px; }
.cartella::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.cartella:first-child { margin-top: 0; }
.cartella.viola { color: var(--viola); }

.bozze-avviso { border: 1.5px dashed var(--viola); background: color-mix(in srgb, var(--viola-bg) 55%, var(--superficie)); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.bozze-avviso b { color: var(--viola); }

.zip-contenuto { margin: -4px 0 10px 54px; border-left: 2px solid var(--linea); padding-left: 12px; }
.zip-contenuto .zf { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; font-size: 12.5px; padding: 4px 0; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.zip-contenuto .zf .tipo { font-weight: 800; font-size: 10.5px; color: var(--testo-2); }
.zip-contenuto .zf span:nth-child(2) { color: var(--testo); overflow-wrap: anywhere; }
.zona-carica { border: 2px dashed var(--linea-2); border-radius: 10px; padding: 26px 18px; text-align: center; background: var(--superficie-2); margin-bottom: 16px; }
.zona-carica .grande { font-size: 15px; font-weight: 700; }
.zona-carica .tipi { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.zona-carica .tipi span { font-size: 11px; font-weight: 800; border: 1px solid var(--linea-2); border-radius: 5px; padding: 2px 7px; color: var(--testo-2); }
.zona-carica .tipi span.zip { border-color: var(--acqua); color: var(--verde); }
.zona-carica .nota { font-size: 12.5px; color: var(--testo-2); margin-top: 10px; }
.file-scelto { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--linea); border-radius: 8px; padding: 9px 12px; background: var(--superficie); margin-bottom: 14px; }

/* Diario */
.diario-voce { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--linea); font-size: 13.5px; }
.diario-voce:last-child { border-bottom: none; }
.diario-voce .quando { color: var(--testo-2); font-variant-numeric: tabular-nums; font-size: 12.5px; line-height: 1.35; }
.diario-voce .quando b { display: block; color: var(--testo); font-size: 13px; }
.diario-voce .chi { font-size: 12px; color: var(--testo-2); margin-top: 2px; }
.diario-voce .tipo { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-right: 6px; color: var(--blu); }

/* Persone */
.persona { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.persona:last-child { border-bottom: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blu-bg); color: var(--blu); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.persona .n { font-weight: 700; font-size: 14px; }
.persona .r { font-size: 12.5px; color: var(--testo-2); }

/* Calendario mese */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario .intest { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--testo-2); font-weight: 700; text-align: center; padding: 4px 0; }
.calendario .g { min-height: 74px; border: 1px solid var(--linea); border-radius: 6px; padding: 5px 6px; font-size: 12px; background: var(--superficie); min-width: 0; }
.calendario .g .d { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--testo-2); }
.calendario .g.oggi { border-color: var(--acqua); box-shadow: inset 0 0 0 1px var(--acqua); }
.calendario .g.oggi .d { color: var(--verde); }
.calendario .g.fuori { opacity: .35; }
.calendario .ev { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--blu-bg); color: var(--blu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario .ev.rosso { background: var(--rosso-bg); color: var(--rosso); }
.calendario .ev.giallo { background: var(--giallo-bg); color: var(--giallo); }
.calendario .ev.viola { background: var(--viola-bg); color: var(--viola); }
.calendario .ev.verde { background: var(--verde-bg); color: var(--verde); }

/* Impostazioni */
.modello-fasi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.modello-fasi .passo { font-size: 12.5px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 6px; padding: 3px 9px; font-weight: 600; }
.modello-fasi .freccia { color: var(--linea-2); font-size: 13px; }
.modello-fasi .passo small { color: var(--testo-2); font-weight: 600; }

/* ------------------------------------------------------------ MODALE */
.sfondo-modale { position: fixed; inset: 0; background: rgba(16,32,52,.55); display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 24px 16px; overflow-y: auto; backdrop-filter: blur(2px); }
.sfondo-modale.aperto { display: flex; }
.modale { background: var(--superficie); border-radius: 14px; width: 100%; max-width: 760px; box-shadow: var(--ombra-alta); animation: sali .2s ease; margin: auto 0; }
@keyframes sali { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modale-testa { padding: 16px 22px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modale-testa h2 { font-size: 18px; font-weight: 700; }
.modale-testa .chiudi { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--testo-2); }
.modale-corpo { padding: 20px 22px; }
.modale-piede { padding: 14px 22px; border-top: 1px solid var(--linea); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sezione-form { margin-bottom: 20px; }
.sezione-form > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--blu); font-weight: 800; margin-bottom: 12px; padding-bottom: 7px; border-bottom: 2px solid var(--linea); }
.passi-wizard { display: flex; gap: 6px; margin-bottom: 18px; }
.passi-wizard span { flex: 1; height: 5px; border-radius: 3px; background: var(--linea); }
.passi-wizard span.fatto { background: var(--acqua); }
.scelta-tipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.scelta-tipo label { border: 1px solid var(--linea-2); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; display: flex; gap: 9px; align-items: flex-start; text-transform: none; letter-spacing: 0; color: var(--testo); font-weight: 600; }
.scelta-tipo label small { display: block; color: var(--testo-2); font-weight: 500; font-size: 12px; }
.scelta-tipo label:has(input:checked) { border-color: var(--acqua); background: color-mix(in srgb, var(--acqua) 12%, var(--superficie)); }
.scelta-tipo input { margin-top: 3px; accent-color: var(--blu); }
.anteprima-fasi { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; }

.risultato-termine { background: var(--blu-bg); border-radius: 8px; padding: 14px 16px; margin-top: 6px; }
.risultato-termine .grande { font-size: 24px; font-weight: 800; color: var(--blu); font-variant-numeric: tabular-nums; }
.risultato-termine .spiega { font-size: 13px; color: var(--testo-2); margin-top: 4px; }
.interruttore { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--testo); cursor: pointer; }
.interruttore input { accent-color: var(--blu); width: 16px; height: 16px; }

/* ------------------------------------------------------ AVVISI/VUOTO */
.avviso { padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.avviso.info { background: var(--blu-bg); color: var(--blu); }
.avviso.attenzione { background: var(--giallo-bg); color: var(--giallo); }
.vuoto { text-align: center; padding: 36px 20px; color: var(--testo-2); font-size: 14px; }

/* ------------------------------------------------------------ MOBILE */
@media (max-width: 900px) {
  .colonne-2 { grid-template-columns: 1fr; }
  .layout-pratica { grid-template-columns: 1fr; }
  .testa-pratica { grid-template-columns: 1fr; }
  .testa-pratica .azioni { justify-content: flex-start; }
}
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .contenuto { padding: 16px 16px 90px; }
  .barra-alta { padding: 0 14px; gap: 10px; height: 56px; }
  .barra-alta .cerca, .utente-info { display: none; }
  .menu { top: 56px; padding: 0 8px; }
  .menu button { padding: 12px 11px; font-size: 13.5px; }
  .riga-scad { grid-template-columns: 64px 1fr; }
  .rs-destra { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--linea); margin-top: 6px; }
  .griglia-2 { grid-template-columns: 1fr; }
  .modale-piede .btn { flex: 1; }
  .kpi .valore { font-size: 24px; }
  .calendario .g { min-height: 54px; padding: 3px 4px; }
  .calendario .ev { font-size: 9.5px; padding: 0 3px; }
  .doc { grid-template-columns: 42px 1fr; }
  .doc .az-doc { grid-column: 1 / -1; }
  .diario-voce { grid-template-columns: 1fr; gap: 2px; }
}

/* ===================================================== AGGIUNTE APP */
.campo select[multiple] { min-height: 110px; }
.scelta-chip { display: flex; flex-wrap: wrap; gap: 7px; }
.scelta-chip label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea-2); border-radius: 20px; padding: 5px 11px 5px 7px; cursor: pointer; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--testo); font-weight: 600; margin: 0; }
.scelta-chip label:has(input:checked) { border-color: var(--blu); background: var(--blu-bg); }
.scelta-chip input { accent-color: var(--blu); margin: 0; width: 15px; height: 15px; }

/* Avvisi (campanella) */
.avvisi-tendina { position: absolute; top: 50px; right: 0; width: min(420px, calc(100vw - 24px)); background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--ombra-alta); z-index: 80; display: none; max-height: 70vh; overflow-y: auto; }
.avvisi-tendina.aperta { display: block; }
.avvisi-tendina .testa { padding: 11px 14px; border-bottom: 1px solid var(--linea); font-weight: 700; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.avviso-riga { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linea); cursor: pointer; font-size: 13.5px; }
.avviso-riga:hover { background: var(--superficie-2); }
.avviso-riga .pt { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--linea-2); }
.avviso-riga.rosso .pt { background: var(--rosso); } .avviso-riga.giallo .pt { background: var(--giallo); } .avviso-riga.viola .pt { background: var(--viola); } .avviso-riga.blu .pt { background: var(--blu-chiaro); }
.avviso-riga.letto { opacity: .55; }
.avviso-riga small { display: block; color: var(--testo-2); font-size: 12px; }
.campanella-box { position: relative; }

/* Fascicolo: chip società con colore dinamico */
.az { background: var(--blu); }

/* Pulsanti riga */
.azioni-riga { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-icona { background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 7px; cursor: pointer; color: var(--testo-2); font-size: 14px; }
.btn-icona:hover { background: var(--superficie-2); color: var(--testo); border-color: var(--linea); }

/* Stato fase: bottoni */
.fase .stato-btn { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.fase .stato-btn .btn { padding: 4px 9px; font-size: 12px; }

/* File input */
.zona-carica input[type=file] { display: none; }
.zona-carica.trascina { border-color: var(--acqua); background: color-mix(in srgb, var(--acqua) 10%, var(--superficie)); }
.barra-avanzamento { height: 6px; background: var(--linea); border-radius: 3px; overflow: hidden; margin-top: 10px; display: none; }
.barra-avanzamento div { height: 100%; background: var(--acqua); width: 0; transition: width .2s; }

/* Dettaglio chiuso */
.testa-pratica.chiuso { border-left: 5px solid var(--verde); }
.testa-pratica.sospeso { border-left: 5px solid var(--giallo); }

/* Tabelle strette */
table.tab td.azioni { white-space: nowrap; text-align: right; }
.piccolo { font-size: 12.5px; color: var(--testo-2); }
.link-blu { color: var(--blu-chiaro); cursor: pointer; font-weight: 600; text-decoration: none; }
.link-blu:hover { text-decoration: underline; }
.pre { white-space: pre-wrap; }
.colore-quadro { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 6px; }

/* Ricerca globale */
.barra-alta .cerca { cursor: text; }
.barra-alta .cerca input { border: none; background: transparent; outline: none; width: 100%; font-size: 13.5px; color: var(--testo); }

/* Login: avviso password */
.box-login .avviso { margin-top: 12px; margin-bottom: 0; }

/* Cambio password obbligatorio */
#schermata-password { min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--sfondo); }
#schermata-password.attiva { display: flex; }

/* Sospeso */
.fascicolo.sospeso::before { background: var(--giallo); }

/* Versioni documento */
.versioni { margin: -4px 0 10px 54px; border-left: 2px solid var(--linea); padding-left: 12px; font-size: 12.5px; }
.versioni div { padding: 3px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

@media (max-width: 720px) {
  .barra-alta .marchio img { height: 30px; }
  .avvisi-tendina { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; }
}

/* ===================================================== v1.1 */
.badge.cls { color: #fff; letter-spacing: .5px; }
.logo-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; background: var(--superficie-2); }
.logo-anteprima { max-height: 48px; max-width: 220px; background: #fff; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--linea); }
.albero-voce { padding: 5px 0; font-size: 13.5px; border-bottom: 1px dashed var(--linea); }
.albero-voce:last-child { border-bottom: none; }
.albero-linea { color: var(--linea-2); margin-right: 6px; }
.lista-fasc { max-height: 320px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 12px; background: var(--superficie); }
.fasc-voce { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--testo); font-weight: 500; cursor: pointer; }
.fasc-voce input { accent-color: var(--blu); }
.msg { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 14px; background: var(--superficie); }
.msg.nuovo { border-left: 4px solid var(--blu-chiaro); background: color-mix(in srgb, var(--blu-bg) 40%, var(--superficie)); cursor: pointer; }
.msg.urgente { border-left: 4px solid var(--rosso); }
.msg-testa { font-size: 12.5px; color: var(--testo-2); margin-bottom: 4px; }
.msg-tit { font-weight: 700; margin-bottom: 4px; }
#btn-avviso { background: var(--blu); color: #fff; border-color: var(--blu); }
@media (max-width: 720px) { #btn-avviso { padding: 7px 8px; font-size: 12px; } }

/* ===================================================== v1.2 */
[hidden] { display: none !important; }
/* Login: occhio sulla password, Face ID, recupero */
.campo-occhio { position: relative; }
.campo-occhio input { padding-right: 44px; width: 100%; }
.campo-occhio .occhio { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 17px; padding: 4px 6px; border-radius: 6px; opacity: .55; }
.campo-occhio .occhio:hover, .campo-occhio .occhio.attivo { opacity: 1; background: rgba(11,46,158,.08); }
.btn-faceid { margin-top: 10px; background: #fff; color: #0b2e9e; border: 1.5px solid #0b2e9e; }
.btn-faceid:hover { background: #eef2ff; }
.login-link { text-align: center; margin-top: 14px; font-size: 13px; }
.login-link a { color: #0b2e9e; font-weight: 600; text-decoration: none; }
.login-link a:hover { text-decoration: underline; }
#schermata-reimposta { min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(146deg, #071c63 0%, #0a2a92 52%, #1547d6 100%); }
#schermata-reimposta.attiva { display: flex; }
button.utente-info { background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-family: inherit; }
button.utente-info:hover { border-color: var(--linea); background: var(--superficie-2); }
.dispositivo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--linea); font-size: 13.5px; }
.dispositivo:last-child { border-bottom: none; }
.dispositivo .quando { color: var(--testo-2); font-size: 12px; margin-left: auto; }

/* Documenti: email, PEC, immagini, allegati */
.doc .icona.img { padding: 0; overflow: hidden; }
.doc .icona img { width: 100%; height: 100%; object-fit: cover; }
.doc.email { border-left: 4px solid var(--ciano); }
.doc.email.pec { border-left-color: var(--viola); }
.doc .email-meta { font-size: 12.5px; color: var(--testo-2); display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin-top: 4px; }
.doc .email-meta b { color: var(--testo); font-weight: 600; overflow-wrap: anywhere; }
.doc .anteprima-testo { font-size: 12.5px; color: var(--testo-2); margin-top: 4px; white-space: pre-wrap; max-height: 3.6em; overflow: hidden; }
.doc .anteprima-testo.aperta { max-height: none; }
.badge.ricevuta { background: color-mix(in srgb, var(--ciano) 18%, var(--superficie)); color: #0b6b80; }
.badge.spedita { background: var(--blu-bg); color: var(--blu); }
.badge.pec { background: var(--viola-bg); color: var(--viola); }
.allegati { margin: -4px 0 10px 54px; border-left: 2px solid var(--linea); padding-left: 12px; }
.allegati .doc { margin-bottom: 6px; padding: 7px 10px; grid-template-columns: 32px 1fr auto; }
.allegati .doc .icona { width: 32px; height: 32px; font-size: 10px; }
.allegati .doc .nome { font-size: 13px; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.galleria .foto { border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--superficie); cursor: pointer; }
.galleria .foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--superficie-2); }
.galleria .foto .did { font-size: 12px; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-lista { margin-top: 10px; display: grid; gap: 6px; }
.file-riga { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 10px; background: var(--superficie); font-size: 13px; }
.file-riga .ext { width: 38px; height: 38px; border-radius: 7px; background: var(--superficie-2); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: var(--testo-2); border: 1px solid var(--linea); }
.file-riga .n { font-weight: 600; overflow-wrap: anywhere; }
.file-riga .i { color: var(--testo-2); font-size: 12px; }
.file-riga.email { border-left: 4px solid var(--ciano); }
.file-riga.pec { border-left: 4px solid var(--viola); }
.aiuto-mail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.aiuto-mail div { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--testo-2); }
.aiuto-mail b { color: var(--testo); display: block; margin-bottom: 3px; }

/* Caricamento ZIP */
.zip-tab td { vertical-align: middle; }
.zip-tab select, .zip-tab input { padding: 6px 8px; font-size: 13px; min-width: 120px; }
.zip-tab td:nth-child(2) { min-width: 240px; }
.zip-tab .nomefile { font-weight: 600; overflow-wrap: anywhere; font-size: 13px; }
.zip-tab .cartella-zip { font-size: 11.5px; color: var(--testo-2); }
.esito-ok { color: var(--verde); font-weight: 700; }
.esito-err { color: var(--rosso); font-weight: 700; }
.riga-default { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }

/* Archivio */
.fascicolo.archiviato { opacity: 1; }
.fascicolo.archiviato .riga-stato { align-items: center; }
.fascicolo.archiviato::before { background: var(--verde); }
.anno-archivio { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.anno-archivio h2 { font-size: 20px; margin: 0; color: var(--blu); }
.anno-archivio .n { font-size: 12.5px; color: var(--testo-2); font-weight: 600; }
.btn-riporta { white-space: nowrap; }
@media (max-width: 720px) { .allegati { margin-left: 20px; } .doc .az-doc { flex-wrap: wrap; } }
.campo label.dest-voce { display: flex; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--testo); margin: 0; border-bottom: 1px dashed var(--linea); padding-top: 7px; padding-bottom: 7px; }
.dest-voce:last-child { border-bottom: none; }
.dest-voce b { font-weight: 600; }
.campo .dest-voce input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--blu); }
.campo .dest-voce { justify-content: flex-start; align-items: center; gap: 8px; cursor: pointer; }
.campo .dest-voce b, .campo .dest-voce span { flex: 0 0 auto; }