/* CondoFox — foglio di stile unico. Palette dal logo (§1.1), layout ispirato a PivotHR. */
:root {
  --cf-arancio: #EA6012;
  --cf-arancio-hover: #D15410;
  --cf-arancio-chiaro: #FDEFE6;
  --cf-nero: #29323B;
  --cf-nero-scuro: #1C232A;
  --cf-grigio-700: #4B5563;
  --cf-grigio-400: #9CA3AF;
  --cf-grigio-200: #E5E7EB;
  --cf-grigio-100: #F3F4F6;
  --cf-bianco: #FFFFFF;
  --cf-verde: #16A34A;
  --cf-giallo: #D97706;
  --cf-rosso: #DC2626;
  --cf-blu: #2563EB;

  --raggio: 8px;
  /* contorno dei box: arancione (richiesta di Roberto, 27-09-2026: il grigio chiaro non si vedeva) */
  --cf-bordo-box: var(--cf-arancio);
  --ombra: 0 1px 2px rgba(41, 50, 59, .06), 0 1px 3px rgba(41, 50, 59, .04);
  --sidebar: 248px;
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; font-weight: 400;
  color: var(--cf-nero); background: var(--cf-grigio-100); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 700; margin: 0; color: var(--cf-nero); line-height: 1.25; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
a { color: var(--cf-arancio); text-decoration: none; }
a:hover { color: var(--cf-arancio-hover); text-decoration: underline; }
small, .small { font-size: .85rem; }
.muted { color: var(--cf-grigio-700); }
.spento { color: var(--cf-grigio-400); }
.ico { flex-shrink: 0; vertical-align: -3px; }
:focus-visible { outline: 2px solid var(--cf-arancio); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--cf-grigio-200); margin: 16px 0; }

/* ---------- Struttura ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar); flex-shrink: 0; background: var(--cf-nero); color: #fff;
  position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 40;
  overflow-y: auto;
}
.sidebar .logo {
  display: block; margin: 18px 16px 14px; background: #fff; border-radius: 10px; padding: 8px 12px;
}
.sidebar .logo img { display: block; width: 100%; height: auto; }
.sidebar nav { padding: 6px 0; flex: 1; }
.sidebar .gruppo { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cf-grigio-400); padding: 14px 22px 6px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 22px; color: #E5E7EB;
  border-left: 3px solid transparent; font-size: .95rem;
}
.sidebar nav a:hover { background: var(--cf-nero-scuro); color: #fff; text-decoration: none; }
.sidebar nav a.attiva { background: var(--cf-nero-scuro); border-left-color: var(--cf-arancio); color: #fff; font-weight: 600; }
.sidebar nav a.attiva .ico { color: var(--cf-arancio); }
.sidebar nav a .conta {
  margin-left: auto; background: var(--cf-arancio); color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.sidebar .utente {
  border-top: 1px solid rgba(255, 255, 255, .08); padding: 14px 18px; display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--cf-arancio); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.sidebar .utente .nome { font-size: .88rem; font-weight: 600; }
.sidebar .utente .ruolo { font-size: .75rem; color: var(--cf-grigio-400); }
.sidebar .utente a { margin-left: auto; color: var(--cf-grigio-400); }
.sidebar .utente a:hover { color: #fff; }

.principale { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--cf-bianco); border-bottom: 1px solid var(--cf-grigio-200); padding: 14px 28px;
  display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 30;
}
.topbar .titoli { min-width: 0; }
.topbar .titoli h1 { font-size: 1.2rem; }
.topbar .titoli p { margin: 0; font-size: .85rem; color: var(--cf-grigio-700); }
.topbar .cerca { margin-left: auto; position: relative; }
.topbar .cerca input { padding-left: 34px; width: 280px; background: var(--cf-grigio-100); border-color: transparent; }
.topbar .cerca .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cf-grigio-400); }
.hamburger { display: none; background: none; border: 0; padding: 4px; color: var(--cf-nero); cursor: pointer; }
.contenuto { padding: 24px 28px 40px; flex: 1; }
.piede { padding: 14px 28px; font-size: .78rem; color: var(--cf-grigio-400); }

/* ---------- Banner e flash ---------- */
.banner { border-radius: var(--raggio); padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; border: 1px solid; }
.banner-rosso { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.banner-verde { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.banner-giallo { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.banner-blu { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }
.banner-arancio { background: var(--cf-arancio-chiaro); border-color: #F9C9A8; color: #9A3A07; }
.banner a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Card ---------- */
.card {
  background: var(--cf-bianco); border: 1px solid var(--cf-bordo-box); border-radius: var(--raggio);
  box-shadow: var(--ombra); margin-bottom: 20px;
}
.card-testa {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cf-grigio-200);
}
.card-testa h2 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.card-testa h2 .ico { color: var(--cf-grigio-700); }
.card-testa .azioni { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-corpo { padding: 18px; }
.card-corpo.stretto { padding: 0; }
.card-piede { padding: 12px 18px; border-top: 1px solid var(--cf-grigio-200); }

.griglia { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.griglia > .card { margin-bottom: 0; }
.spazio { margin-bottom: 20px; }

/* Contatori */
.contatore { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; color: inherit; }
a.contatore:hover { text-decoration: none; border-color: var(--cf-arancio); }
.contatore .testa { display: flex; align-items: center; gap: 8px; color: var(--cf-grigio-700); font-size: .85rem; font-weight: 500; }
.contatore .icona-tonda { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.contatore .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.contatore .sotto { font-size: .8rem; color: var(--cf-grigio-700); }
.tono-arancio { background: var(--cf-arancio-chiaro); color: var(--cf-arancio); }
.tono-giallo { background: #FEF3C7; color: var(--cf-giallo); }
.tono-blu { background: #DBEAFE; color: var(--cf-blu); }
.tono-rosso { background: #FEE2E2; color: var(--cf-rosso); }
.tono-verde { background: #DCFCE7; color: var(--cf-verde); }
.tono-nero { background: var(--cf-grigio-200); color: var(--cf-nero); }

/* ---------- Tabelle ---------- */
.tabella-wrap { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th {
  text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cf-grigio-700); background: #FAFAFB; padding: 10px 14px; border-bottom: 1px solid var(--cf-grigio-200);
  white-space: nowrap;
}
.tabella td { padding: 11px 14px; border-bottom: 1px solid var(--cf-grigio-200); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: #FCFCFD; }
.tabella tr.evidenza { background: var(--cf-arancio-chiaro); }
.tabella .num, .tabella td.num, .tabella th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella .link-riga { color: var(--cf-nero); font-weight: 600; }
.tabella .link-riga:hover { color: var(--cf-arancio); }
.tabella tfoot td { font-weight: 700; background: #FAFAFB; }
.vuoto { padding: 28px; text-align: center; color: var(--cf-grigio-400); }
.oggetto-riga { display: flex; flex-direction: column; }
.oggetto-riga small { color: var(--cf-grigio-700); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; line-height: 1.6;
}
.badge-arancio { background: var(--cf-arancio); color: #fff; }
.badge-giallo { background: #FEF3C7; color: #92400E; }
.badge-blu { background: #DBEAFE; color: #1E40AF; }
.badge-blu-chiaro { background: #EFF6FF; color: var(--cf-blu); border: 1px solid #BFDBFE; }
.badge-verde { background: #DCFCE7; color: #166534; }
.badge-rosso { background: #FEE2E2; color: #991B1B; }
.badge-grigio { background: var(--cf-grigio-200); color: var(--cf-grigio-700); }
.badge-nero { background: var(--cf-nero); color: #fff; }
.badge-contorno { background: #fff; border: 1px solid var(--cf-grigio-200); color: var(--cf-grigio-700); }

.conf { display: inline-block; width: 60px; height: 6px; background: var(--cf-grigio-200); border-radius: 3px; vertical-align: middle; overflow: hidden; }
.conf span { display: block; height: 100%; }
.conf-verde span { background: var(--cf-verde); }
.conf-giallo span { background: var(--cf-giallo); }
.conf-rosso span { background: var(--cf-rosso); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid var(--cf-nero);
  background: var(--cf-bianco); color: var(--cf-nero); white-space: nowrap; line-height: 1.3;
}
.btn:hover { background: var(--cf-grigio-100); text-decoration: none; color: var(--cf-nero); }
.btn-primario { background: var(--cf-arancio); border-color: var(--cf-arancio); color: #fff; }
.btn-primario:hover { background: var(--cf-arancio-hover); border-color: var(--cf-arancio-hover); color: #fff; }
.btn-pericolo { background: var(--cf-rosso); border-color: var(--cf-rosso); color: #fff; }
.btn-pericolo:hover { background: #B91C1C; color: #fff; }
.btn-leggero { border-color: var(--cf-grigio-200); color: var(--cf-grigio-700); }
.btn-piccolo { padding: 4px 10px; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Form ---------- */
label { display: block; font-size: .85rem; font-weight: 700; color: var(--cf-nero); margin-bottom: 5px; letter-spacing: .01em; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], input[type=tel], select, textarea {
  width: 100%; font: inherit; font-size: .92rem; color: var(--cf-nero); background: #fff;
  border: 1.5px solid var(--cf-nero); border-radius: 6px; padding: 8px 10px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cf-arancio); box-shadow: 0 0 0 3px rgba(234, 96, 18, .15); }
input::placeholder, textarea::placeholder { color: var(--cf-grigio-400); }
textarea { min-height: 90px; resize: vertical; }
.campi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.campo { grid-column: span 6; }
.c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; }
.c-6 { grid-column: span 6; } .c-8 { grid-column: span 8; } .c-9 { grid-column: span 9; } .c-12 { grid-column: span 12; }
.aiuto { font-size: .78rem; color: var(--cf-grigio-700); margin-top: 3px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--cf-nero); }
.check input { width: auto; }
.azioni-form { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.errore-campo { color: var(--cf-rosso); font-size: .8rem; }

/* Filtri */
.filtri { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--cf-grigio-200); background: #FCFCFD; border-radius: var(--raggio) var(--raggio) 0 0; }
.filtri > div { min-width: 140px; flex: 1; }
.filtri > div.largo { flex: 2; min-width: 200px; }
.filtri label { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.filtri .btn { height: 38px; }

/* ---------- Tab ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--cf-grigio-200); margin-bottom: 20px; overflow-x: auto; }
.tabs a {
  padding: 10px 14px; color: var(--cf-grigio-700); font-weight: 500; font-size: .92rem; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.tabs a:hover { color: var(--cf-nero); text-decoration: none; }
.tabs a.attiva { color: var(--cf-arancio); border-bottom-color: var(--cf-arancio); font-weight: 600; }

/* ---------- Scheda (intestazione pagina dettaglio) ---------- */
.intestazione { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.intestazione .indietro { color: var(--cf-grigio-700); font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.intestazione h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intestazione .sotto { color: var(--cf-grigio-700); margin-top: 4px; font-size: .92rem; }
.intestazione .azioni { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

dl.dati { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; margin: 0; font-size: .92rem; }
dl.dati dt { color: var(--cf-grigio-700); }
dl.dati dd { margin: 0; font-weight: 500; word-break: break-word; }

/* Lista stile "Things to do" */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--cf-grigio-200); }
.lista li:last-child { border-bottom: 0; }
.lista .icona-tonda { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.lista .testo { flex: 1; min-width: 0; }
.lista .testo strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .testo small { color: var(--cf-grigio-700); }
.lista .dx { text-align: right; font-size: .8rem; color: var(--cf-grigio-700); white-space: nowrap; }

/* Condomini: riquadri */
.riquadro-cond { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; color: inherit; }
a.riquadro-cond:hover { text-decoration: none; border-color: var(--cf-arancio); }
.riquadro-cond .nome { font-weight: 700; }
.riquadro-cond .numeri { display: flex; gap: 14px; font-size: .82rem; color: var(--cf-grigio-700); }
.riquadro-cond .numeri b { color: var(--cf-nero); font-size: 1rem; }

/* Thread messaggi */
.thread { display: flex; flex-direction: column; gap: 14px; }
.msg { border: 1px solid var(--cf-grigio-200); border-radius: var(--raggio); padding: 12px 14px; max-width: 88%; }
.msg.in { background: #fff; align-self: flex-start; }
.msg.out { background: var(--cf-grigio-100); align-self: flex-end; }
.msg.out.sistema { background: #EFF6FF; border-color: #BFDBFE; }
.msg .meta { font-size: .78rem; color: var(--cf-grigio-700); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.msg .corpo { white-space: pre-wrap; font-size: .92rem; word-break: break-word; }
.msg .allegati { margin-top: 8px; font-size: .8rem; }

.ia-box { background: #FAFAFB; border: 1px dashed var(--cf-grigio-200); border-radius: var(--raggio); padding: 14px; }
pre.json { background: var(--cf-nero); color: #E5E7EB; padding: 12px; border-radius: 6px; font-size: .78rem; overflow-x: auto; margin: 10px 0 0; max-height: 280px; }

/* Barre statistiche */
.barre { display: flex; flex-direction: column; gap: 10px; }
.barra { display: grid; grid-template-columns: 170px 1fr 60px; gap: 10px; align-items: center; font-size: .85rem; }
.barra .traccia { display: block; height: 10px; background: var(--cf-grigio-100); border-radius: 5px; overflow: hidden; }
.barra .riemp { display: block; height: 100%; background: var(--cf-arancio); border-radius: 5px; }
.barra .riemp.nero { background: var(--cf-nero); }
.barra .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.colonne { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 10px; }
.colonne .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.colonne .col .pila { width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; }
.colonne .col .pila span { display: block; }
.colonne .col small { font-size: .72rem; color: var(--cf-grigio-700); white-space: nowrap; }
.colonne .col b { font-size: .78rem; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--cf-grigio-700); margin-top: 10px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Paginazione */
.paginazione { display: flex; gap: 4px; align-items: center; padding: 12px 18px; flex-wrap: wrap; }
.paginazione .muted { margin-right: auto; font-size: .85rem; }
.paginazione a { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--cf-grigio-200); color: var(--cf-nero); font-size: .85rem; }
.paginazione a.attiva { background: var(--cf-arancio); border-color: var(--cf-arancio); color: #fff; }

/* Modale */
dialog { border: 0; border-radius: 10px; padding: 0; width: min(560px, 94vw); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(28, 35, 42, .45); }
dialog .card-testa { border-bottom: 1px solid var(--cf-grigio-200); }
dialog .chiudi { margin-left: auto; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--cf-grigio-700); }

/* Login */
.login-pagina { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--cf-grigio-100); }
.login-box { width: min(400px, 100%); background: #fff; border: 1px solid var(--cf-bordo-box); border-radius: 12px; box-shadow: var(--ombra); padding: 32px 30px; }
.login-box img { display: block; width: 190px; margin: 0 auto 18px; }
.login-box h1 { font-size: 1.15rem; text-align: center; margin-bottom: 20px; }
.login-box .campo-l { margin-bottom: 14px; }
.login-box .btn { width: 100%; justify-content: center; padding: 10px; }

.pill-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-nav a { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--cf-grigio-200); color: var(--cf-grigio-700); font-size: .85rem; }
.pill-nav a.attiva { background: var(--cf-nero); color: #fff; border-color: var(--cf-nero); }
.pill-nav a:hover { text-decoration: none; }

.anteprima-mail { white-space: pre-wrap; background: var(--cf-grigio-100); border-radius: 6px; padding: 12px; font-size: .85rem; font-family: ui-monospace, Menlo, monospace; }
.nascosto { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  body.menu-aperto .sidebar { transform: none; }
  body.menu-aperto::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 35; }
  .principale { margin-left: 0; }
  .hamburger { display: block; }
  .g-2, .g-3, .g-2-1 { grid-template-columns: minmax(0, 1fr); }
  .topbar .cerca input { width: 180px; }
  .contenuto { padding: 18px 16px 32px; }
  .topbar { padding: 12px 16px; }
}
@media (max-width: 640px) {
  .g-4, .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo, .c-2, .c-3, .c-4, .c-6, .c-8, .c-9 { grid-column: span 12; }
  .topbar .cerca { display: none; }
  dl.dati { grid-template-columns: 1fr; gap: 2px; }
  dl.dati dd { margin-bottom: 8px; }
  .barra { grid-template-columns: 110px 1fr 50px; }
  .msg { max-width: 100%; }
}

/* ---------- Documenti (come in Verde in Comune: cartelle + schede per file) ---------- */
.doc-impianto { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.cartelle { display: flex; flex-direction: column; gap: 8px; }
.cartella {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--cf-bordo-box);
  border-radius: var(--raggio); color: var(--cf-nero); box-shadow: var(--ombra);
}
.cartella:hover { text-decoration: none; border-color: var(--cf-arancio); color: var(--cf-nero); }
.cartella.aperta { border-color: var(--cf-arancio); background: var(--cf-arancio-chiaro); }
.cartella .ca-icona { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--cf-grigio-100); color: var(--cf-nero); flex-shrink: 0; }
.cartella.aperta .ca-icona { background: var(--cf-arancio); color: #fff; }
.cartella .ca-testa { display: flex; flex-direction: column; min-width: 0; }
.cartella .ca-testa strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartella .ca-testa small { color: var(--cf-grigio-700); font-size: .75rem; }
.cartella .ca-conta { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--cf-grigio-700); }
.doc-crea {
  display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--raggio); background: var(--cf-nero);
  color: #fff; font-weight: 700;
}
.doc-drop {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px dashed var(--cf-grigio-200);
  border-radius: var(--raggio); background: #fff; cursor: pointer; font-weight: 400; color: var(--cf-grigio-700); margin: 0;
}
.doc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.doc-scheda {
  background: #fff; border: 1px solid var(--cf-bordo-box); border-radius: var(--raggio); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--ombra); --doc: var(--cf-grigio-700);
}
.doc-pdf { --doc: var(--cf-rosso); }
.doc-img { --doc: var(--cf-blu); }
.doc-doc { --doc: #1D4ED8; }
.doc-xls { --doc: var(--cf-verde); }
.doc-alt { --doc: var(--cf-grigio-700); }
.doc-testa { display: flex; flex-direction: column; min-width: 0; }
.doc-testa strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-testa small { color: var(--cf-grigio-700); font-size: .75rem; }
.doc-icona { display: grid; place-items: center; height: 96px; background: var(--cf-grigio-100); border-radius: 6px; color: var(--doc); }
.doc-icona:hover { text-decoration: none; background: var(--cf-arancio-chiaro); }
.doc-foglio { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.doc-foglio b { font-size: .78rem; letter-spacing: .04em; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: .78rem; }
.doc-note { width: 100%; color: var(--cf-grigio-700); }
.doc-tag { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: var(--cf-grigio-100); color: var(--cf-grigio-700); border: 1px solid var(--cf-grigio-200); }
.tag:hover { border-color: var(--cf-arancio); color: var(--cf-arancio); text-decoration: none; }
.doc-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.doc-sezione { margin: 18px 0 10px; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.doc-sezione:first-child { margin-top: 0; }
.zona-file { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--cf-grigio-200); border-radius: var(--raggio); padding: 14px; font-weight: 400; cursor: pointer; margin: 0; }
.zona-file:hover { border-color: var(--cf-arancio); }
.zona-file input { width: auto; }
@media (max-width: 960px) {
  .doc-impianto, .doc-azioni-top { grid-template-columns: minmax(0, 1fr); }
  .cartelle { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .cartella { min-width: 200px; }
}

/* Stampa (report) */
@media print {
  .sidebar, .topbar .cerca, .hamburger, .filtri .btn, .piede, .azioni-form { display: none !important; }
  .principale { margin-left: 0; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ---------- Risposta con box FORNITORI ---------- */
.risposta-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.risposta-griglia textarea { min-height: 300px; }
.box-fornitori { border: 1px solid var(--cf-bordo-box); border-radius: var(--raggio); background: #FCFCFD; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bf-testa { font-weight: 700; font-size: .8rem; letter-spacing: .06em; color: var(--cf-nero); display: flex; align-items: center; gap: 6px; }
.bf-testa .ico { color: var(--cf-arancio); }
.box-fornitori select[size] { padding: 4px; font-size: .85rem; }
.box-fornitori select[size] optgroup { font-size: .72rem; color: var(--cf-grigio-700); }
.box-fornitori select[size] option { font-size: .85rem; color: var(--cf-nero); padding: 3px 4px; }
.bf-dettaglio { background: #fff; border: 1px solid var(--cf-bordo-box); border-radius: 6px; padding: 8px 10px; font-size: .85rem; }
.bf-nome { font-weight: 700; }
.bf-riga { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 4px; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--cf-grigio-200); }
.bf-riga b { font-weight: 600; word-break: break-all; }
.bf-riga .btn { padding: 2px 6px; font-size: .72rem; }
.bf-contatto { margin-top: 8px; font-size: .82rem; }
.bf-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Note interne (cronologia) ---------- */
.note-lista { list-style: none; margin: 0; padding: 0; }
.note-lista > li { padding: 14px 18px; border-bottom: 1px solid var(--cf-grigio-200); }
.note-lista > li:last-child { border-bottom: 0; }
.nota-meta { display: flex; align-items: center; gap: 8px; font-size: .85rem; flex-wrap: wrap; }
.nota-testo { margin: 8px 0 0 36px; font-size: .92rem; white-space: normal; word-break: break-word; }
.nota-allegati { margin: 8px 0 0 36px; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1200px) { .risposta-griglia { grid-template-columns: minmax(0, 1fr); } .risposta-griglia textarea { min-height: 200px; } }

/* Mail in lingua straniera */
details.originale { margin-top: 8px; font-size: .85rem; }
details.originale summary { cursor: pointer; color: var(--cf-blu); font-weight: 500; }
details.originale .corpo { margin-top: 6px; padding: 10px 12px; background: #EFF6FF; border: 1px dashed #BFDBFE; border-radius: 6px; white-space: pre-wrap; word-break: break-word; }

/* ---------- Panoramica visuale (§4.1, dal prototipo) ---------- */
.pv-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pv-kpi a { background: #fff; border: 1px solid var(--cf-bordo-box); border-radius: 10px; padding: 12px 14px; color: inherit; }
.pv-kpi a:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(41, 50, 59, .10); }
.pv-kpi b { display: block; font-size: 26px; line-height: 1.1; }
.pv-kpi small { color: var(--cf-grigio-700); font-size: 12px; }
.pv-kpi .r b { color: var(--cf-rosso); } .pv-kpi .a b { color: var(--cf-arancio); } .pv-kpi .g b { color: var(--cf-giallo); } .pv-kpi .v b { color: var(--cf-verde); } .pv-kpi .bl b { color: var(--cf-blu); }
.pv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pv-toolbar input[type=search], .pv-toolbar select { width: auto; font-size: 14px; }
.pv-toolbar input[type=search] { min-width: 220px; }
.pv-toolbar label { font-size: 13px; color: var(--cf-grigio-700); display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.pv-toolbar label input { width: auto; }
.pv-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; padding-top: 6px; }
.pv-card { position: relative; background: #fff; border: 1px solid var(--cf-bordo-box); border-left: 5px solid var(--cf-verde); border-radius: 10px; padding: 14px 14px 12px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.pv-card:hover, .pv-card:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(41, 50, 59, .12); }
.pv-card.giallo { border-left-color: var(--cf-giallo); } .pv-card.rosso { border-left-color: var(--cf-rosso); }
.pv-card h3 { margin: 0 0 2px; font-size: 15px; padding-right: 44px; line-height: 1.25; }
.pv-ind { font-size: 12px; color: var(--cf-grigio-700); margin-bottom: 10px; }
.pv-badge { position: absolute; top: -9px; right: -9px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: var(--cf-arancio); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.pv-badge.zero { background: var(--cf-grigio-400); }
.pv-badge.urgente { background: var(--cf-rosso); animation: pv-pulse 1.6s infinite; }
@keyframes pv-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 70% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .pv-badge.urgente { animation: none; } .pv-card { transition: none; } }
.pv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pv-chip { font-size: 11.5px; padding: 3px 8px; border-radius: 12px; background: var(--cf-grigio-100); color: var(--cf-grigio-700); font-weight: 500; }
.pv-chip.n { background: var(--cf-arancio-chiaro); color: var(--cf-arancio-hover); } .pv-chip.c { background: #FEF3C7; color: #92400E; } .pv-chip.au { background: #DBEAFE; color: #1E40AF; } .pv-chip.nr { background: var(--cf-grigio-200); color: var(--cf-nero); }
.pv-ultima { font-size: 12.5px; color: var(--cf-grigio-700); border-top: 1px solid var(--cf-grigio-200); padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; }
.pv-ultima span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-ultima em { font-style: normal; color: var(--cf-grigio-400); white-space: nowrap; }
.pv-icone { display: flex; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--cf-grigio-700); }
.pv-icone span { display: flex; align-items: center; gap: 3px; }
.pv-icone svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-icone .warn { color: var(--cf-rosso); } .pv-icone .ok { color: var(--cf-grigio-400); }
.pv-vuoto { padding: 40px; text-align: center; color: var(--cf-grigio-400); }
.pv-overlay { position: fixed; inset: 0; background: rgba(28, 35, 42, .55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 60; }
.pv-overlay.aperto { display: flex; }
.pv-popup { background: #fff; border: 1px solid var(--cf-bordo-box); border-radius: 14px; width: 100%; max-width: 760px; max-height: 92vh; overflow: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.pv-popup header { padding: 18px 22px 14px; border-bottom: 1px solid var(--cf-grigio-200); display: flex; gap: 14px; align-items: flex-start; position: sticky; top: 0; background: #fff; z-index: 1; }
.pv-popup header .sem { width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; flex: none; }
.pv-popup header h2 { margin: 0; font-size: 19px; }
.pv-popup header p { margin: 2px 0 0; color: var(--cf-grigio-700); font-size: 13px; }
.pv-popup .chiudi { margin-left: auto; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--cf-grigio-400); line-height: 1; }
.pv-popup .chiudi:hover { color: var(--cf-nero); }
.pv-popup section { padding: 14px 22px; }
.pv-popup section + section { border-top: 1px solid var(--cf-grigio-200); }
.pv-popup h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cf-grigio-700); }
.pv-contatori { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pv-contatori div { border-radius: 8px; padding: 10px 12px; background: var(--cf-grigio-100); }
.pv-contatori b { display: block; font-size: 22px; line-height: 1.1; }
.pv-contatori small { font-size: 11.5px; color: var(--cf-grigio-700); }
.pv-contatori .n { background: var(--cf-arancio-chiaro); } .pv-contatori .n b { color: var(--cf-arancio); }
.pv-contatori .c { background: #FEF3C7; } .pv-contatori .c b { color: var(--cf-giallo); }
.pv-contatori .au { background: #DBEAFE; } .pv-contatori .au b { color: var(--cf-blu); }
.pv-ticket { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--cf-grigio-200); border-radius: 8px; margin-bottom: 6px; color: inherit; font-size: 13.5px; }
.pv-ticket:hover { background: var(--cf-grigio-100); text-decoration: none; color: inherit; border-color: var(--cf-arancio); }
.pv-urg { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.pv-urg.alta { background: var(--cf-rosso); } .pv-urg.media { background: var(--cf-giallo); } .pv-urg.bassa { background: var(--cf-grigio-400); }
.pv-ticket .ogg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-ticket .ogg small { display: block; color: var(--cf-grigio-700); font-size: 12px; }
.pv-ticket .eta { color: var(--cf-grigio-400); font-size: 12px; white-space: nowrap; }
.pv-ticket .eta.vecchio { color: var(--cf-rosso); font-weight: 600; }
.pv-stato { font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.pv-stato.nuova { background: var(--cf-arancio-chiaro); color: var(--cf-arancio-hover); } .pv-stato.in_carico { background: #FEF3C7; color: #92400E; } .pv-stato.lock { background: var(--cf-nero); color: #fff; }
.pv-altre { font-size: 13px; color: var(--cf-grigio-700); margin: 6px 0 0; }
.pv-ok { color: var(--cf-verde); font-weight: 600; margin: 0; }
.pv-altro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13.5px; }
.pv-altro div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--cf-grigio-200); }
.pv-altro b.warn { color: var(--cf-rosso); } .pv-altro b.ok { color: var(--cf-verde); }
.pv-popup footer { padding: 14px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--cf-grigio-200); position: sticky; bottom: 0; background: #fff; flex-wrap: wrap; }
@media (max-width: 800px) { .pv-contatori { grid-template-columns: repeat(2, 1fr); } .pv-altro { grid-template-columns: 1fr; } .pv-legenda { margin-left: 0; } }

/* ---------- Lavorazioni ---------- */
.pv-fasi { display: flex; gap: 4px; margin-bottom: 10px; }
.pv-fasi span { flex: 1; height: 5px; border-radius: 3px; background: var(--cf-grigio-200); }
.pv-fasi span.fatta { background: var(--cf-arancio); }
.pv-fasi span.annullata { background: var(--cf-grigio-400); }
.pv-card.verde .pv-fasi span.fatta { background: var(--cf-verde); }
.pv-chip.rit { background: #FEE2E2; color: #991B1B; }
.pv-chip.agg { background: #fff; color: var(--cf-blu); border: 1px solid #BFDBFE; }
.pv-chip.ok { background: #DCFCE7; color: #166534; }
.pv-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; counter-reset: fase; }
.pv-stepper li { flex: 1; position: relative; text-align: center; font-size: 11.5px; color: var(--cf-grigio-400); padding-top: 22px; }
.pv-stepper li span { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--cf-grigio-200); z-index: 1; }
.pv-stepper li::before { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--cf-grigio-200); }
.pv-stepper li:first-child::before { display: none; }
.pv-stepper li.fatta { color: var(--cf-grigio-700); }
.pv-stepper li.fatta span { background: var(--cf-arancio); border-color: var(--cf-arancio); }
.pv-stepper li.fatta::before, .pv-stepper li.corrente::before { background: var(--cf-arancio); }
.pv-stepper li.corrente { color: var(--cf-nero); font-weight: 700; }
.pv-stepper li.corrente span { background: #fff; border-color: var(--cf-arancio); box-shadow: 0 0 0 4px var(--cf-arancio-chiaro); }
.pv-stepper li.annullata span { background: var(--cf-grigio-200); }
.pv-stepper.grande li { font-size: 13px; padding-top: 28px; }
.pv-stepper.grande li span { width: 18px; height: 18px; }
.pv-stepper.grande li::before { top: 12px; }
.fase-azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.card.evidenza-agg { box-shadow: 0 0 0 3px #BFDBFE; }
.check-lista { display: flex; flex-direction: column; gap: 4px; }
.pallino { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex-shrink: 0; }
.pallino.rosso { background: var(--cf-rosso); } .pallino.verde { background: var(--cf-verde); } .pallino.grigio { background: var(--cf-grigio-400); }
.msg.fornitore { border-left: 4px solid var(--cf-arancio); background: #FFF8F3; }
@media (max-width: 640px) { .pv-stepper li { font-size: 0; } .pv-stepper li.corrente { font-size: 11px; } }

/* ---------- Pannello Email ---------- */
.em-lista { display: flex; flex-direction: column; gap: 8px; }
.em-riga { border: 1px solid var(--cf-bordo-box); border-radius: var(--raggio); background: #fff; }
.em-riga > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 120px minmax(160px, 1.1fr) 2.4fr minmax(140px, 1fr); gap: 12px; align-items: start; padding: 10px 14px; }
.em-riga > summary::-webkit-details-marker { display: none; }
.em-riga[open] > summary { border-bottom: 1px solid var(--cf-grigio-200); }
.em-riga.da-assegnare { border: 2px solid var(--cf-rosso); background: #FFF7F7; }
.em-data { font-size: .8rem; color: var(--cf-grigio-700); white-space: nowrap; }
.em-chi small, .em-ogg small { display: block; font-size: .76rem; color: var(--cf-grigio-700); margin-top: 3px; word-break: break-all; }
.em-ogg small { word-break: normal; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.em-rif { font-size: .82rem; text-align: right; }
.em-corpo { padding: 12px 14px; }
.em-corpo .corpo { white-space: pre-wrap; font-size: .9rem; word-break: break-word; }
.em-assegna { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cf-grigio-200); display: flex; flex-direction: column; gap: 12px; }
.em-assegna label { font-size: .8rem; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.em-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.em-inline select { flex: 2; min-width: 220px; }
.em-inline input { flex: 1; min-width: 180px; }
@media (max-width: 800px) {
  .em-riga > summary { grid-template-columns: 1fr; gap: 4px; }
  .em-rif { text-align: left; }
}

/* ---------- Campi e filtri ben distinti dai box (28-09-2026) ---------- */
/* filtro impostato (valore diverso da "Tutti"/vuoto): sfondo nero, scritta bianca */
select.filtro-attivo, input.filtro-attivo { background-color: var(--cf-nero); color: #fff; border-color: var(--cf-nero); font-weight: 600; }
input.filtro-attivo::placeholder { color: #cbd5e1; }
select.filtro-attivo option { background: #fff; color: var(--cf-nero); font-weight: 400; }
.pv-toolbar label.filtro-attivo { background: var(--cf-nero); color: #fff; border-radius: 999px; padding: 4px 10px; }
.pv-toolbar label { border: 1.5px solid var(--cf-nero); border-radius: 999px; padding: 4px 10px; color: var(--cf-nero); font-weight: 600; }
.pill-nav a { border: 1.5px solid var(--cf-nero); color: var(--cf-nero); font-weight: 600; }
input[type=checkbox], input[type=radio] { accent-color: var(--cf-nero); }

/* ---------- Mostra workflow ---------- */
.wf { display: flex; flex-direction: column; align-items: center; padding: 8px 0 24px; }
.wf-riga { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.wf-riga.multipla { padding: 10px; border: 1.5px dashed var(--cf-grigio-400); border-radius: 12px; background: #FCFCFD; }
.wf-freccia { width: 2px; height: 34px; background: var(--cf-nero); position: relative; margin-bottom: 8px; flex-shrink: 0; }
.wf-freccia::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 7px solid transparent; border-top: 9px solid var(--cf-nero); border-bottom: 0; }
.wf-riepilogo { display: block; width: min(560px, 92vw); background: #fff; border: 2px solid var(--cf-arancio); border-radius: 12px; padding: 16px 18px; color: var(--cf-nero); box-shadow: 0 4px 14px rgba(41, 50, 59, .08); }
.wf-riepilogo:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(41, 50, 59, .14); }
.wf-riepilogo h2 { font-size: 1.15rem; margin: 4px 0 6px; display: flex; align-items: center; }
.wf-sub { font-size: .85rem; color: var(--cf-grigio-700); margin-bottom: 8px; }
.wf-nodo { display: block; width: 250px; background: #fff; border: 1.5px solid var(--cf-bordo-box); border-left: 6px solid var(--wf-c, var(--cf-grigio-400)); border-radius: 10px; padding: 10px 12px; color: var(--cf-nero); }
a.wf-nodo:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(41, 50, 59, .12); }
.wf-nodo.evidenza { box-shadow: 0 0 0 3px var(--cf-arancio-chiaro); border-color: var(--cf-arancio); }
.wf-nodo.vuoto { border-left-color: var(--cf-grigio-200); color: var(--cf-grigio-700); text-align: center; }
.wf-eti { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wf-c, var(--cf-grigio-700)); display: flex; align-items: center; gap: 5px; }
.wf-riepilogo .wf-eti { color: var(--cf-arancio); }
.wf-tit { font-weight: 700; font-size: .92rem; margin-top: 4px; line-height: 1.3; }
.wf-txt { font-size: .8rem; color: var(--cf-grigio-700); margin-top: 5px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.wf-data { font-size: .74rem; color: var(--cf-grigio-400); margin-top: 6px; }
.t-condomino, .t-risposta_condomino, .t-telefonata, .t-segnalazione { --wf-c: #EA6012; }
.t-automatica, .t-ia { --wf-c: #2563EB; }
.t-amministratore, .t-nota, .t-manuale, .t-aggiornamento { --wf-c: #29323B; }
.t-fornitore_out, .t-fornitore_in, .t-lavorazione { --wf-c: #7C3AED; }
.t-stato { --wf-c: #D97706; }
.t-documento { --wf-c: #0891B2; }
.t-chiusura { --wf-c: #16A34A; }
.wf-legenda { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; font-size: .78rem; color: var(--cf-grigio-700); }
.wf-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--wf-c); margin-right: 5px; vertical-align: -1px; }
.btn-workflow { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
@media print { .wf-nodo, .wf-riepilogo { break-inside: avoid; } }
/* popup del workflow: sopra la pagina, con la parte sotto schiarita */
#dlg-workflow { width: min(1180px, 96vw); max-height: 92vh; overflow: auto; padding: 18px 22px 10px; background: #F7F8FA; border: 2px solid var(--cf-arancio); }
#dlg-workflow::backdrop { background: rgba(255, 255, 255, .78); backdrop-filter: blur(2px); }
#dlg-workflow .wf-chiudi { position: sticky; top: 0; float: right; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--cf-nero); color: #fff; font-size: 1.4rem; line-height: 1; margin: -6px -8px 0 8px; }
#dlg-workflow .wf-chiudi:hover { background: var(--cf-arancio); }
.wf-testa { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin: 0 40px 14px 0; }
.wf-titolo { font-size: 1.1rem; font-weight: 700; }


/* =====================================================================
   v2.0 — revisione grafica "come formazione.jobfarm.it, ma arancione" (§1)
   Questo blocco viene dopo tutto il resto e ne ridefinisce forme, ombre e spazi.
   ===================================================================== */
:root {
  --cf-arancio-scuro: #B94A0A;
  --cf-nero-sfumato: linear-gradient(180deg, #1C232A 0%, #29323B 60%, #343F4A 100%);
  --sfondo: #EBEBEB; /* 3.0.9: colore pieno di riserva = grigio 8% (cima della sfumatura, usato dalla fascia fissa) */
  --testo: #1D2228; --testo-tenue: #66707A; --testo-nav: rgba(255, 255, 255, .72);
  --bordo: #EBEDF0; --bordo-forte: #CBD2DA;
  --r-xl: 20px; --r: 14px; --r-s: 10px; --r-xs: 8px;
  --ombra-1: 0 1px 3px rgba(20, 23, 28, .09), 0 7px 18px -9px rgba(20, 23, 28, .40);
  --ombra-2: 0 2px 4px rgba(20, 23, 28, .04), 0 12px 30px -14px rgba(20, 23, 28, .22);
  --ombra-3: 0 18px 44px -16px rgba(20, 23, 28, .32);
  --sidebar-w: 262px; --topbar-h: 72px;
  --sidebar: var(--sidebar-w);
  --raggio: var(--r-s);
  --cf-bordo-box: var(--bordo);
  --ombra: var(--ombra-1);
}
body { background: var(--sfondo); color: var(--testo); font-size: 15px; }
h1 { font-size: 23px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
.card-testa h2 { font-size: 16px; font-weight: 600; }
a { color: var(--cf-arancio-scuro); }

/* Sidebar */
.sidebar { width: var(--sidebar-w); background: var(--cf-nero-sfumato); padding: 0 12px 16px; }
.sidebar .logo { margin: 18px 6px 12px; border-radius: var(--r); padding: 10px 14px; box-shadow: var(--ombra-1); }
.sidebar .gruppo { padding: 16px 12px 6px; color: rgba(255, 255, 255, .42); font-size: 11px; font-weight: 600; }
.sidebar nav a { padding: 12px 18px; border-radius: 999px; border-left: 0; color: var(--testo-nav); font-weight: 500; font-size: 14.5px; margin: 1px 0; transition: background .12s; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar nav a.attiva { background: #fff; color: var(--cf-arancio-scuro); font-weight: 600; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.sidebar nav a.attiva .ico { color: var(--cf-arancio); }
.sidebar nav a .conta { background: var(--cf-arancio); }
.nav-riga { display: flex; align-items: center; }
.nav-riga > a { flex: 1; }
.nav-espandi { background: none; border: 0; color: var(--testo-nav); cursor: pointer; padding: 8px; border-radius: 50%; margin-left: 2px; }
.nav-espandi:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-espandi .ico { transition: transform .15s; }
.nav-gruppo.aperto .nav-espandi .ico { transform: rotate(90deg); }
.nav-sotto { display: none; margin: 2px 0 6px 30px; padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, .18); }
.nav-gruppo.aperto .nav-sotto { display: block; }
.sidebar nav .nav-sotto a { padding: 8px 14px; font-size: 13.5px; }

/* Topbar (§2) */
.principale { margin-left: var(--sidebar-w); }
.topbar { height: var(--topbar-h); padding: 0 24px; gap: 14px; border-bottom: 1px solid var(--bordo); }
.tb-saluto { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.tb-saluto b { font-size: 17px; font-weight: 600; }
.tb-saluto small { font-size: 13px; color: var(--testo-tenue); }
.tb-storia { position: relative; display: flex; align-items: center; background: #F1F3F6; border-radius: 999px; padding: 3px; gap: 2px; }
.tb-storia > a, .tb-storia > button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--testo); background: none; border: 0; cursor: pointer; }
.tb-storia > a:hover, .tb-storia > button:hover { background: #fff; box-shadow: var(--ombra-1); color: var(--cf-arancio-scuro); }
.tb-storia > a.spenta { opacity: .3; pointer-events: none; }
.tb-ultime { position: absolute; top: calc(100% + 8px); left: 0; width: 320px; background: #fff; border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-3); padding: 6px; z-index: 60; }
.tb-ultime-testa { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #8B95A1; padding: 8px 10px 4px; }
.tb-ultime a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r-xs); color: var(--testo); }
.tb-ultime a:hover { background: var(--cf-arancio-chiaro); text-decoration: none; }
.tb-ultime a b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-ultime a small { color: var(--testo-tenue); font-size: 12px; }
.tb-cerca { position: relative; flex: 1; max-width: 520px; display: flex; margin: 0 auto; background: #F1F3F6; border-radius: 999px; border: 1px solid transparent; }
.tb-cerca:focus-within { background: #fff; border-color: var(--bordo-forte); box-shadow: 0 0 0 3px rgba(234, 96, 18, .18); }
.tb-cerca select { width: auto; border: 0; background: transparent; border-right: 1px solid var(--bordo-forte); border-radius: 999px 0 0 999px; font-size: 13px; font-weight: 600; padding: 8px 10px 8px 14px; color: var(--testo); }
.tb-cerca select.filtro-attivo { background: transparent; color: var(--testo); }
.tb-cerca-campo { position: relative; flex: 1; display: flex; align-items: center; }
.tb-cerca-campo .ico { position: absolute; left: 12px; color: var(--testo-tenue); }
.tb-cerca-campo input { border: 0; background: transparent; padding: 9px 14px 9px 36px; border-radius: 0 999px 999px 0; }
.tb-cerca-campo input:focus { box-shadow: none; }
.tb-cerca input.filtro-attivo { background: transparent; color: var(--testo); }
.tb-cerca-pannello { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-3); z-index: 60; max-height: 70vh; overflow: auto; padding: 6px; }
.rc-gruppo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #8B95A1; padding: 10px 10px 4px; display: flex; justify-content: space-between; }
.rc-voce { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-xs); color: var(--testo); }
.rc-voce:hover, .rc-voce.attiva { background: var(--cf-arancio-chiaro); text-decoration: none; color: var(--testo); }
.rc-voce .tz-icona { width: 32px; height: 32px; border-radius: 10px; }
.rc-voce b { display: block; font-weight: 600; font-size: 14px; }
.rc-voce small { color: var(--testo-tenue); font-size: 12px; }
.rc-voce mark { background: #FFE2CC; color: inherit; border-radius: 3px; padding: 0 1px; }
.rc-tutti { display: block; text-align: center; padding: 10px; font-weight: 600; border-top: 1px solid var(--bordo); margin-top: 4px; }
.tb-switch { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--testo); cursor: pointer; white-space: nowrap; }
.tb-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tb-switch-traccia { width: 40px; height: 22px; border-radius: 999px; background: var(--bordo-forte); position: relative; transition: background .15s; flex-shrink: 0; }
.tb-switch-traccia span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
.tb-switch input:checked + .tb-switch-traccia { background: var(--cf-arancio); }
.tb-switch input:checked + .tb-switch-traccia span { left: 21px; }
.tb-switch input:focus-visible + .tb-switch-traccia { outline: 2px solid var(--cf-arancio); outline-offset: 2px; }
.tb-utente { display: flex; align-items: center; gap: 10px; }
.tb-utente .avatar { width: 36px; height: 36px; }
.tb-utente-testo { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.tb-utente-testo b { font-size: 13.5px; font-weight: 600; }
.tb-utente-testo small { font-size: 11.5px; color: var(--testo-tenue); }
.tb-esci { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bordo); display: grid; place-items: center; color: var(--testo); }
.tb-esci:hover { background: var(--cf-arancio-chiaro); color: var(--cf-arancio-scuro); }

/* Azioni veloci (§8) */
.azioni-veloci { display: flex; gap: 10px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--bordo); overflow-x: auto; align-items: center; position: sticky; top: var(--topbar-h); z-index: 25; }
.azioni-veloci[hidden] { display: none; }
.av-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--bordo); box-shadow: var(--ombra-1); color: var(--testo); font-weight: 600; font-size: 13.5px; white-space: nowrap; cursor: pointer; list-style: none; }
.av-chip::-webkit-details-marker { display: none; }
.av-chip:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--ombra-2); color: var(--testo); }
.av-chip .tz-icona { width: 30px; height: 30px; border-radius: 50%; }
.av-conta { background: var(--cf-arancio); color: #fff; border-radius: 999px; font-size: 11.5px; padding: 1px 8px; }
.av-altro { position: relative; }
.av-altro-menu { position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-3); padding: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 60; }
.av-altro-menu .av-chip { box-shadow: none; border-color: transparent; }
.av-config { margin-left: auto; color: var(--testo-tenue); padding: 8px; border-radius: 50%; }
.av-config:hover { background: var(--cf-arancio-chiaro); color: var(--cf-arancio-scuro); }

/* Piastrella icona (§1.1) */
.tz-icona { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--cf-arancio); flex-shrink: 0; }
.tz-icona.nero { background: var(--cf-nero); }
.tz-icona.arancio { background: var(--cf-arancio); }
.tz-icona.chiara { background: var(--cf-arancio-chiaro); color: var(--cf-arancio-scuro); }

/* Contenuto e titolo di pagina */
.contenuto { padding: 22px 28px 40px; }
.torna { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--testo-tenue); margin-bottom: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--bordo); }
.torna:hover { color: var(--cf-arancio-scuro); text-decoration: none; border-color: var(--bordo-forte); }
.titolo-pagina { display: flex; align-items: flex-end; gap: 16px; margin: 4px 0 18px; flex-wrap: wrap; }
.titolo-pagina h1 { font-size: 23px; font-weight: 600; }
.titolo-pagina p { margin: 2px 0 0; font-size: 13.5px; color: var(--testo-tenue); max-width: 900px; }
.intestazione { margin-bottom: 16px; }
.intestazione .azioni { align-items: center; }

/* Card (§1.1) */
.card { border-radius: var(--r-xl); border: 1px solid var(--bordo); box-shadow: var(--ombra-1); overflow: visible; }
.card-testa { padding: 16px 18px; border-bottom: 1px solid var(--bordo); }
.card-testa h2 .ico { color: #fff; background: var(--cf-arancio); width: 34px; height: 34px; padding: 8px; border-radius: 10px; }
.card-corpo { padding: 16px 18px; }
.card-piede { border-top: 1px solid var(--bordo); }
.card > .tabella-wrap:last-child, .card > .tabella-wrap:last-child table { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.tessera { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--bordo); box-shadow: var(--ombra-1); color: var(--testo); position: relative; min-height: 104px; transition: transform .12s, box-shadow .12s; }
a.tessera:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombra-2); color: var(--testo); }
.tessera .t-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; }
.tessera .t-num { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--cf-arancio-scuro); }
.tessera .t-sotto { font-size: 12.5px; color: var(--testo-tenue); }
.tessera-arancio { background: var(--cf-arancio); border-color: var(--cf-arancio); color: #fff; }
.tessera-nera { background: var(--cf-nero); border-color: var(--cf-nero); color: #fff; }
.tessera-arancio .t-num, .tessera-nera .t-num, .tessera-arancio .t-sotto, .tessera-nera .t-sotto { color: #fff; }
.tessera-arancio .t-sotto, .tessera-nera .t-sotto { opacity: .85; }
a.tessera-arancio:hover, a.tessera-nera:hover { color: #fff; }
.tessera-arancio .tz-icona, .tessera-nera .tz-icona { background: rgba(255, 255, 255, .14); }
.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.contatore { border-radius: var(--r-xl); }
.contatore .icona-tonda { width: 40px; height: 40px; border-radius: 12px; }

/* Bottoni (§1.1) */
.btn { border-radius: 12px; padding: 10px 18px; font-weight: 600; font-size: 14px; border: 1px solid var(--bordo-forte); transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--ombra-1); background: #fff; }
.btn-primario { background: var(--cf-arancio); border-color: var(--cf-arancio); }
.btn-primario:hover { background: var(--cf-arancio-hover); }
.btn-leggero, .btn-morbido { background: var(--cf-arancio-chiaro); border-color: transparent; color: var(--cf-arancio-scuro); }
.btn-leggero:hover, .btn-morbido:hover { background: #FBE1D0; color: var(--cf-arancio-scuro); }
.btn-pericolo { border-color: var(--cf-rosso); }
.btn-piccolo { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; }
.pill-nav a { border: 1px solid var(--bordo-forte); color: var(--testo); font-weight: 500; padding: 6px 14px; }
.pill-nav a.attiva { background: var(--cf-nero); border-color: var(--cf-nero); color: #fff; }

/* Input (§1.1): bordo grigio forte, anello arancio al focus; etichette nere in grassetto (1.4.1) */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], input[type=tel], select, textarea {
  border: 1px solid var(--bordo-forte); border-radius: 10px; padding: 9px 12px;
}
input:focus, select:focus, textarea:focus { border-color: var(--cf-arancio); box-shadow: 0 0 0 3px rgba(234, 96, 18, .18); }
.filtri { background: transparent; border-bottom: 1px solid var(--bordo); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 16px 18px; }
.filtri .btn { height: 40px; }
.pv-toolbar label { border: 1px solid var(--bordo-forte); }

/* Tabelle (§1.1) */
table.tabella { font-size: 14px; }
.tabella th { font-size: 12px; font-weight: 600; color: #8B95A1; background: transparent; letter-spacing: .04em; padding: 12px 10px; border-bottom: 1px solid var(--bordo-forte); }
.tabella th:first-child, .tabella td:first-child { padding-left: 18px; }
.tabella th:last-child, .tabella td:last-child { padding-right: 18px; }
.tabella tbody td { padding: 14px 10px; border-bottom: 1px solid var(--bordo-forte); }
.tabella tbody tr { transition: background .12s; }
.tabella tbody tr:hover { background: var(--cf-arancio-chiaro); }
.tabella tbody tr.cliccabile { cursor: pointer; }
.tabella tbody td:first-child { font-weight: 600; color: var(--testo); }
.tabella tbody td:first-child .muted, .tabella tbody td:first-child small { font-weight: 400; }
.tabella .link-riga { color: var(--testo); }
.tabella tfoot td { background: transparent; }

/* Badge e chip (§1.1) */
.badge, .pv-chip { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }

/* Tab */
.tabs { border-bottom: 1px solid var(--bordo); gap: 4px; }
.tabs a { font-weight: 500; font-size: 14px; }
.tabs a.attiva { color: var(--cf-arancio-scuro); border-bottom-color: var(--cf-arancio); }

/* Panoramica: card condominio (§1.1 semaforo) */
.pv-card { border-radius: var(--r-xl); box-shadow: var(--ombra-1); border: 1px solid var(--bordo); border-left-width: 4px; }
.pv-card:hover { box-shadow: var(--ombra-2); }
.pv-kpi a { border-radius: var(--r-xl); box-shadow: var(--ombra-1); border-color: var(--bordo); }
.pv-toolbar input[type=search], .pv-toolbar select { border-radius: 999px; }

/* Popup e modali */
dialog { border-radius: var(--r-xl); box-shadow: var(--ombra-3); }
dialog::backdrop { background: rgba(28, 35, 42, .55); }
#dlg-workflow { border-radius: var(--r-xl); }

/* Altri box che avevano il bordo arancio: stesso stile delle card */
.cartella, .doc-scheda, .box-fornitori, .bf-dettaglio, .em-riga, .wf-nodo, .pv-kpi a, .login-box { border-color: var(--bordo); }
.cartella, .doc-scheda { border-radius: var(--r); }
.em-riga { border-radius: var(--r); box-shadow: var(--ombra-1); }
.msg { border-radius: var(--r); }

/* Mobile: sotto 900px sidebar a scomparsa, topbar su due righe */
@media (max-width: 1280px) {
  .tb-utente-testo, .tb-switch-testo { display: none; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  body.menu-aperto .sidebar { transform: none; }
  .principale { margin-left: 0; }
  .hamburger { display: block; }
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 14px; row-gap: 8px; }
  .tb-cerca { order: 10; flex-basis: 100%; max-width: none; }
  .tb-saluto small { display: none; }
  .tb-utente { margin-left: auto; }
  .azioni-veloci { top: 0; position: static; padding: 10px 14px; }
  .contenuto { padding: 16px 14px 32px; }
}
@media (max-width: 640px) {
  .topbar .tb-cerca { display: flex; }
  .tb-cerca select { max-width: 110px; }
}
@media print {
  .topbar, .azioni-veloci, .torna { display: none !important; }
}

/* Documenti v2: sezioni A–E */
.sezioni-doc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sezioni-doc a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bordo-forte); color: var(--testo); font-weight: 500; font-size: 13.5px; background: #fff; }
.sezioni-doc a b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cf-arancio-chiaro); color: var(--cf-arancio-scuro); font-size: 12px; }
.sezioni-doc a .conta { font-size: 12px; font-weight: 600; color: var(--testo-tenue); }
.sezioni-doc a:hover { text-decoration: none; border-color: var(--cf-arancio); }
.sezioni-doc a.attiva { background: var(--cf-nero); border-color: var(--cf-nero); color: #fff; }
.sezioni-doc a.attiva b { background: var(--cf-arancio); color: #fff; }
.sezioni-doc a.attiva .conta { color: rgba(255, 255, 255, .8); }
.card-corpo > .tabella-wrap { margin: 0 -18px; }
.doc-sigla { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 2px 6px; border-radius: 6px; margin-right: 6px; color: #fff; background: var(--doc, var(--cf-grigio-700)); vertical-align: 1px; }
.doc-tag { margin-top: 4px; }

/* Scheda condominio v2 (§4) */
.ic-nome { font-size: 26px; font-weight: 700; color: var(--cf-arancio-scuro); line-height: 1.2; }
.tessere-6 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.lista li.vuoto { padding: 22px; }
.lista .testo small a { font-weight: 500; }

/* Panoramica v2 (§3): card = link alla scheda, badge = link alle segnalazioni aperte */
.pv-card-box { position: relative; }
a.pv-card { display: block; color: var(--testo); height: 100%; }
a.pv-card:hover { text-decoration: none; color: var(--testo); }
.pv-card-box > .pv-badge { z-index: 2; }
.pv-card-box > .pv-badge:hover { text-decoration: none; color: #fff; transform: scale(1.08); }
.pv-icone { flex-wrap: wrap; }
.pv-icone span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pv-icone span.warn { color: var(--cf-rosso); }
.pv-icone span.scad { color: var(--cf-arancio); }
.pv-icone span.ok { color: var(--cf-verde); font-weight: 500; }
.tessere-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tessere-kpi .t-num { font-size: 26px; }
.av-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.av-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--bordo); border-radius: var(--r-s); background: #fff; }
.av-lista li.trascina { opacity: .5; }
.av-lista li:nth-child(8) { border-bottom: 3px solid var(--cf-arancio-chiaro); }
.av-maniglia { cursor: grab; color: var(--testo-tenue); font-weight: 700; letter-spacing: -2px; }
.av-lista .check { flex: 1; margin: 0; }
.av-su-giu { display: flex; gap: 4px; }
/* §9.2 freccia verso la scheda fornitore */
.freccia-bollo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cf-arancio); color: #fff; vertical-align: middle; flex-shrink: 0; }
.freccia-bollo:hover { background: var(--cf-arancio-scuro); color: #fff; }
.freccia-bollo .ico { stroke-width: 2.6; }
.bf-qui { border: 1px solid var(--bordo); border-radius: var(--r-xs); background: #fff; padding: 6px 8px; }
.bf-qui-testa { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8B95A1; margin-bottom: 4px; }
.bf-qui-riga { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.bf-scegli { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--testo); cursor: pointer; text-align: left; flex: 1; }
.bf-scegli:hover { color: var(--cf-arancio-scuro); }
/* §9.1 allegati delle mail */
.allegati-tag { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: flex-end; }
.allegato-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--bordo-forte); color: var(--testo); font-size: 12.5px; }
.allegato-tag b { font-weight: 600; }
.allegato-tag:hover { border-color: var(--cf-arancio); color: var(--cf-arancio-scuro); text-decoration: none; }
.allegato-mini { display: flex; flex-direction: column; gap: 4px; max-width: 160px; font-size: 11.5px; color: var(--testo-tenue); }
.allegato-mini img { max-width: 160px; max-height: 160px; border-radius: var(--r-xs); border: 1px solid var(--bordo); object-fit: cover; background: #fff; }
.allegato-mini:hover { text-decoration: none; }
.allegato-mini:hover img { border-color: var(--cf-arancio); }
.allegato-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ricerca della topbar: il campo sta dentro la pillola, senza bordo proprio */
.tb-cerca .tb-cerca-campo input[type=search] { border: 0; background: transparent; padding: 9px 14px 9px 36px; border-radius: 0 999px 999px 0; box-shadow: none; }
.tb-cerca select { border: 0; box-shadow: none; }
.tb-cerca-campo .ico { pointer-events: none; z-index: 1; }
.tessere-6 .t-num { font-size: 24px; white-space: nowrap; }
.tessera .t-testa { line-height: 1.3; }
.azioni-veloci { flex-wrap: wrap; overflow: visible; }
@media (max-width: 900px) { .azioni-veloci { flex-wrap: nowrap; overflow-x: auto; } }

/* ---------- 2.0.1: scheda condominio a box ---------- */
/* barra delle tab staccata dal resto, grigio chiaro con ombra, ferma in alto quando si scorre */
.switch-vista { display: flex; background: #fff; border: 1px solid var(--bordo-forte); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.switch-vista button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--testo-tenue); cursor: pointer; }
html:not([data-vista="elenco"]) .switch-vista button[data-vista="box"], html[data-vista="elenco"] .switch-vista button[data-vista="elenco"] { background: var(--cf-nero); color: #fff; }
html:not([data-vista="elenco"]) .vista-elenco, html[data-vista="elenco"] .vista-box { display: none; }
.banner-grigio { background: #F1F3F6; border-color: var(--bordo-forte); color: var(--testo); }
.banner-grigio a { color: var(--testo); }
/* box */
.box-griglia { padding-top: 10px; }
.pv-card.grigio { border-left-color: var(--cf-grigio-400); }
.pv-card-box.box-largo { grid-column: span 2; }
.box-eti { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8B95A1; margin-bottom: 4px; }
.box-eti .pallino { margin-right: 0; }
.box-righe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: 12.5px; }
.box-righe dt { color: var(--testo-tenue); }
.box-righe dd { margin: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.riepilogo-righe { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.box-griglia .pv-card h3 { font-size: 14.5px; }
@media (max-width: 900px) { .pv-card-box.box-largo { grid-column: auto; } .riepilogo-righe { grid-template-columns: auto minmax(0, 1fr); } .barra-tab { flex-wrap: wrap; } }
/* 2.0.2: barra delle tab più scura (grigio ~20%) e con un'ombra di stacco più marcata */
/* 2.0.3: "Torna a …" nella barra in alto al posto della freccia ←; grigio sulla barra delle azioni veloci; barra tab bianca con bordo arancione */
.tb-storia > a.tb-torna { width: auto; max-width: 260px; border-radius: 999px; padding: 0 14px 0 10px; gap: 6px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tb-storia > a.tb-torna span { overflow: hidden; text-overflow: ellipsis; }
.azioni-veloci { background: #CFD3D9; border-bottom: 1px solid #BCC2CA; box-shadow: 0 10px 22px -8px rgba(20, 23, 28, .45), 0 2px 4px rgba(20, 23, 28, .12); }
@media (max-width: 1280px) { .tb-storia > a.tb-torna { max-width: 170px; } }
@media (max-width: 640px) { .tb-storia > a.tb-torna span { display: none; } .tb-storia > a.tb-torna { padding: 0 8px; } }
.tb-cerca { min-width: 320px; }
.tb-cerca-campo { min-width: 180px; }
.tb-storia > a.tb-torna { max-width: 210px; }
@media (max-width: 1400px) { .tb-saluto { display: none; } }
@media (max-width: 900px) { .tb-cerca { min-width: 0; } }
@media (max-width: 1600px) { .tb-saluto { display: none; } }
.tb-cerca { min-width: 260px; }
.topbar { min-width: 0; }
/* 2.0.5: header con sfumatura verticale bianco → grigio 20% e ombra di stacco dal resto del sito */
.topbar { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 35%, #CFD3D9 100%); border-bottom: 1px solid #BCC2CA; box-shadow: 0 10px 24px -10px rgba(20, 23, 28, .45), 0 2px 5px rgba(20, 23, 28, .10); z-index: 30; }
.tb-storia { background: rgba(255, 255, 255, .75); }
.tb-cerca { background: rgba(255, 255, 255, .85); }
/* 2.0.6: al passaggio del mouse i controlli della cronologia diventano neri con scritta/icona bianca */
.tb-storia > a:hover, .tb-storia > button:hover, .tb-storia > button[aria-expanded="true"] { background: var(--cf-nero); color: #fff; box-shadow: var(--ombra-1); text-decoration: none; }
/* 2.0.7: ombre dei box più scure dappertutto; pulsante "Nuovo…" sulla riga del titolo */
:root {
  --ombra-1: 0 1px 4px rgba(20, 23, 28, .16), 0 8px 20px -8px rgba(20, 23, 28, .55);
  --ombra-2: 0 3px 6px rgba(20, 23, 28, .10), 0 16px 34px -12px rgba(20, 23, 28, .40);
}
.pv-card, .card, .tessera, .pv-kpi a, .doc-scheda, .cartella, .em-riga { box-shadow: var(--ombra-1); }
.pv-card:hover, a.tessera:hover { box-shadow: var(--ombra-2); }
.titolo-pagina { align-items: center; }
.titolo-azioni { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pv-toolbar .switch-vista { margin-left: 4px; }
/* 2.0.8: occhio sui riquadri della Panoramica: i box sotto mostrano quel contenuto */
.tessera-box { position: relative; display: flex; }
.tessera-box > .tessera { flex: 1; padding-bottom: 46px; }
.occhio { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .12s, background .12s; }
.occhio.negativo { background: rgba(255, 255, 255, .16); color: #fff; border: 1.5px solid rgba(255, 255, 255, .65); }
.occhio.positivo { background: #fff; color: var(--cf-nero); border: 1.5px solid var(--bordo-forte); }
.occhio:hover { transform: scale(1.08); }
.occhio.negativo:hover { background: rgba(255, 255, 255, .3); }
.occhio.positivo:hover { border-color: var(--cf-arancio); color: var(--cf-arancio-scuro); }
.tessera-box.attiva > .tessera { outline: 3px solid var(--cf-arancio); outline-offset: 3px; }
.tessera-box.attiva .occhio.negativo { background: #fff; color: var(--cf-nero); border-color: #fff; }
.tessera-box.attiva .occhio.positivo { background: var(--cf-arancio); color: #fff; border-color: var(--cf-arancio); }
.pv-pannello-testa { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.pv-pannello-testa h2 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.pv-pannello-testa .btn { margin-left: auto; }
.pv-pannello { scroll-margin-top: calc(var(--barra-top, 72px) + 12px); }
.box-testo { font-size: 12.5px; color: var(--testo-tenue); margin: 6px 0 0; }
/* 2.0.9: "Fornitori di questo condominio" a tendina (chiusa di default) */
details.bf-qui > summary.bf-qui-testa { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 0; user-select: none; }
details.bf-qui > summary.bf-qui-testa::-webkit-details-marker { display: none; }
details.bf-qui > summary .ico { margin-left: auto; transform: rotate(90deg); transition: transform .15s; color: var(--testo); }
details.bf-qui[open] > summary .ico { transform: rotate(-90deg); }
details.bf-qui[open] > summary { margin-bottom: 6px; }
details.bf-qui > summary:hover { color: var(--cf-arancio-scuro); }
/* 2.0.11: pulsante "Mostra workflow" in negativo: bianco su arancione */
.btn.btn-workflow { background: var(--cf-arancio); border-color: var(--cf-arancio); color: #fff; }
.btn.btn-workflow:hover { background: var(--cf-arancio-hover); border-color: var(--cf-arancio-hover); color: #fff; }
/* 2.0.13: riquadri delle schede riducibili al solo titolo */
.card-riduci { margin-left: 8px; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bordo-forte); background: #fff; color: var(--testo); display: grid; place-items: center; cursor: pointer; transition: transform .15s, background .12s; }
.card-riduci:hover { background: var(--cf-nero); border-color: var(--cf-nero); color: #fff; }
.card.ridotta > :not(.card-testa) { display: none !important; }
.card.ridotta > .card-testa { border-bottom: 0; }
.card.ridotta .card-riduci svg { transform: rotate(180deg); }
.card.ridotta .card-testa .azioni { display: none; }
body[data-pagina="servizio"] .griglia, body[data-pagina="fornitore"] .griglia, body[data-pagina="struttura"] .griglia,
body[data-pagina="segnalazione"] .griglia, body[data-pagina="lavorazione"] .griglia { align-items: start; }
/* la freccia resta in alto a destra anche col riquadro ridotto; se nella testa non ci sono azioni va comunque a destra */
.card-testa .card-riduci { margin-left: auto; }
.card-testa .azioni + .card-riduci { margin-left: 8px; }
.card.ridotta .card-testa .card-riduci { margin-left: auto; }
/* 2.1.0: risposta alle domande nella ricerca */
.rc-risposta { background: var(--cf-arancio-chiaro); border: 1px solid #F9D5BC; border-radius: var(--r-s); padding: 10px 12px; margin: 4px 4px 8px; }
.rc-risposta > b { display: block; font-size: 15px; font-weight: 700; color: var(--cf-arancio-scuro); }
.rc-risposta p { margin: 4px 0 6px; font-size: 13.5px; }
.rc-risposta-eti { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #8B95A1; margin-bottom: 2px; }
.rc-risposta .rc-voce { background: #fff; margin-top: 4px; }
.rc-apri { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; }
.risposta-card .card-testa h2 { color: var(--cf-arancio-scuro); }
.em-auto { border-top-color: #BFDBFE; background: #F5F9FF; margin: 12px -14px -12px; padding: 12px 14px; border-radius: 0 0 var(--r) var(--r); }
/* 2.1.1: icona mail accanto agli indirizzi (bianca su arancio) */
.mail-icona { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cf-arancio); color: #fff; vertical-align: middle; margin-left: 4px; flex-shrink: 0; }
.mail-icona:hover { background: var(--cf-arancio-scuro); color: #fff; }
.mail-icona .ico { stroke-width: 2.2; }
/* 2.1.2: "powered by IA" in fondo alla barra di ricerca */
.tb-powered { align-self: center; flex-shrink: 0; padding: 0 14px 0 6px; font-size: 9.5px; line-height: 1.05; font-weight: 700; color: var(--cf-arancio); text-transform: uppercase; letter-spacing: .06em; text-align: right; user-select: none; }
@media (max-width: 640px) { .tb-powered { display: none; } }
.tb-powered { text-transform: none; font-size: 10px; letter-spacing: .02em; }
/* 2.2.0: contatore voti */
.voti-testa { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 14px 0 8px; flex-wrap: wrap; }
.voti-comandi { display: flex; gap: 6px; }
.voti-totale { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; background: var(--cf-arancio-chiaro); border-radius: var(--r-s); font-size: 14px; }
.voti-totale b { font-size: 16px; }
#dlg-voti .tabella tr.spento td { opacity: .6; }
/* 2.2.2: colore per condominio nella vista Appartamenti della Panoramica */
.legenda-condomini { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.legenda-condomini span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff; border: 1px solid var(--bordo); border-radius: 999px; }
.legenda-condomini i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pv-card[style*="border-left-color"] { border-left-width: 6px; }
/* 2.2.3: riepilogo del condominio — box giallino con contorno arancione; in elenco riquadro largo a colonne */
.box-riepilogo .pv-card { background: var(--cf-arancio-chiaro); border: 2px solid var(--cf-arancio); }
.box-riepilogo .pv-card:hover { box-shadow: var(--ombra-2); }
.riepilogo-largo { background: var(--cf-arancio-chiaro); border: 2px solid var(--cf-arancio); }
.riepilogo-largo .card-testa { border-bottom-color: #F9D5BC; }
.riepilogo-colonne { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 22px; padding: 16px 18px 18px; }
.riepilogo-colonne > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.riepilogo-colonne small { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8B95A1; }
.riepilogo-colonne b { font-size: 14px; font-weight: 600; color: var(--testo); overflow-wrap: anywhere; }

/* 2.3.0 — filtri a pillole sotto la barra delle schede */
.filtro-pill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtro-pill-tit { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cf-nero); }
.filtro-pill .pill-nav a { border-color: var(--cf-nero); color: var(--cf-nero); }
.filtro-pill .pill-nav a small { opacity: .7; }
.filtro-pill .pill-nav a.attiva { background: var(--cf-nero); color: #fff; }
.filtri .filtro-pill { flex-basis: 100%; }

/* 2.3.2 — avvisi della pagina: campanella accanto al titolo + popup */
html.js .banner.notifica { display: none; }
html.js #dlg-avvisi .banner.notifica { display: flex; margin: 0 0 12px; }
#dlg-avvisi { width: min(620px, 94vw); }
#dlg-avvisi .card-testa { display: flex; align-items: center; padding: 14px 18px; }
#dlg-avvisi .card-testa h2 { margin: 0; font-size: 1.05rem; }
#dlg-avvisi .avvisi-corpo { padding: 16px 18px 6px; }
.avvisi-btn { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 12px; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid; font-family: inherit; font-weight: 700; font-size: .85rem; line-height: 1; cursor: pointer; }
.avvisi-btn svg { display: block; }
.avvisi-btn:hover { background: var(--cf-nero) !important; color: #fff !important; border-color: var(--cf-nero) !important; }
.avvisi-rosso { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.avvisi-arancio { background: var(--cf-arancio-chiaro); border-color: #F9C9A8; color: #9A3A07; }
.avvisi-giallo { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.avvisi-blu { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }
.avvisi-grigio, .avvisi-verde { background: #F1F3F6; border-color: var(--bordo-forte); color: var(--testo); }

/* 2.3.3 — segnalazioni e lavorazioni cliccabili dentro i box e negli elenchi */
.box-collegati { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 2px; padding-top: 8px; border-top: 1px dashed var(--cf-grigio-200); }
.box-link { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; line-height: 1.25; }
.box-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-link svg { flex: 0 0 auto; }
.box-link.lav { background: #EFF6FF; color: #1E40AF; }
.box-link.seg { background: var(--cf-arancio-chiaro); color: #9A3A07; }
.box-link.seg.urgente { background: #FEE2E2; color: #991B1B; }
.box-link:hover, .box-link:focus-visible, .pv-chip.box-link:hover { background: var(--cf-nero); color: #fff; outline: none; }
.pv-chip.box-link { display: inline-flex; cursor: pointer; }
.cella-collegati { display: flex; flex-direction: column; gap: 3px; min-width: 180px; }
.cella-collegati a { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; text-decoration: none; }
.cella-collegati a.lav { color: #1E40AF; }
.cella-collegati a.seg { color: #9A3A07; }
.cella-collegati a.seg.urgente { color: #991B1B; }
.cella-collegati a:hover { text-decoration: underline; }

/* 2.4.0 — relazione dell'assemblea: scelta degli allegati */
.allegati-scelta { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; padding: 10px 12px; border: 1px solid var(--cf-grigio-200); border-radius: 8px; background: #FCFCFD; }
.allegati-scelta label.check { display: flex; align-items: center; gap: 6px; font-size: .88rem; text-transform: none; letter-spacing: 0; margin: 0; }
.allegati-scelta small { margin-left: 4px; }

/* 2.4.1 — Panoramica: 5 riquadri (tolti "Risolti in automatico" e "Senza ticket"), più grandi */
.tessere-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tessere-kpi .tessera { min-height: 150px; padding: 20px 20px 50px; }
.tessere-kpi .t-num { font-size: 34px; }
.tessere-kpi .t-testa { font-size: 15px; }
@media (max-width: 1100px) { .tessere-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tessere-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 2.5.0 — acquisto del pacchetto per un nuovo condominio (pagamento simulato stile Stripe) */
.acq-scaglioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.acq-scaglione { background: #fff; border: 2px solid var(--cf-grigio-200); border-radius: var(--raggio); padding: 16px 18px; box-shadow: 0 2px 8px rgba(16,24,40,.08); transition: .15s; }
.acq-scaglione.attivo { border-color: var(--cf-arancio); background: var(--cf-arancio-chiaro); }
.acq-scaglione-tit { font-weight: 700; font-size: .95rem; }
.acq-prezzo { font-size: 1.7rem; font-weight: 800; color: var(--cf-arancio-scuro, var(--cf-arancio)); margin-top: 6px; }
.acq-prezzo small { font-size: .8rem; font-weight: 500; color: var(--cf-grigio-700); }
.acq-numero { display: flex; gap: 8px; align-items: center; max-width: 260px; }
.acq-numero input { text-align: center; font-size: 1.3rem; font-weight: 700; }
.acq-numero .btn { width: 44px; height: 44px; font-size: 1.3rem; justify-content: center; }
.acq-periodi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acq-periodo { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--cf-grigio-200); border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.acq-periodo:has(input:checked) { border-color: var(--cf-arancio); background: var(--cf-arancio-chiaro); }
.acq-periodo span { display: flex; flex-direction: column; }
.acq-periodo small { color: var(--cf-grigio-700); }
.acq-badge { position: absolute; top: -10px; right: 10px; background: var(--cf-nero); color: #fff; font-style: normal; font-weight: 700; font-size: .75rem; padding: 2px 8px; border-radius: 999px; }
.acq-totale { margin-top: 18px; border-top: 1px dashed var(--cf-grigio-200); padding-top: 12px; }
.acq-totale > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.acq-totale-fin { font-size: 1.25rem; border-top: 2px solid var(--cf-nero); margin-top: 6px; padding-top: 8px !important; }
.acq-totale-fin b { color: var(--cf-arancio); }
.acq-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 0; max-width: 980px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(16,24,40,.18); }
.acq-riepilogo { background: #F6F9FC; padding: 32px; border-right: 1px solid #E3E8EE; }
.acq-rie-tit { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #425466; }
.acq-rie-totale { font-size: 2.2rem; font-weight: 800; margin: 18px 0 2px; color: #0A2540; }
.acq-rie-righe { list-style: none; padding: 0; margin: 22px 0; }
.acq-rie-righe li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #E3E8EE; font-size: .92rem; color: #0A2540; }
.acq-rie-righe li small { display: block; color: #6B7C93; }
.acq-rie-righe .acq-sconto b { color: #0E9F6E; }
.acq-rie-fin { font-weight: 800; font-size: 1.05rem; border-bottom: 0 !important; }
.acq-carta { padding: 32px; display: flex; flex-direction: column; gap: 6px; }
.acq-carta label { margin-top: 8px; color: #425466; font-size: .82rem; text-transform: none; letter-spacing: 0; }
.acq-prova { background: #FFF4E5; color: #8A4B00; border: 1px solid #FFD8A8; border-radius: 8px; padding: 10px 12px; font-size: .82rem; }
.acq-carta-campi { border: 1px solid #D5DBE1; border-radius: 8px; overflow: hidden; }
.acq-carta-campi input { border: 0; border-radius: 0; box-shadow: none; }
.acq-carta-riga { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #D5DBE1; }
.acq-carta-riga input + input { border-left: 1px solid #D5DBE1; }
.acq-paga { margin-top: 16px; height: 48px; font-size: 1.05rem; justify-content: center; background: #635BFF !important; border-color: #635BFF !important; }
.acq-paga:hover { background: #0A2540 !important; border-color: #0A2540 !important; }
@media (max-width: 900px) { .acq-scaglioni { grid-template-columns: 1fr; } .acq-checkout { grid-template-columns: 1fr; } .acq-riepilogo { border-right: 0; border-bottom: 1px solid #E3E8EE; } }
.acq-totale > div[hidden] { display: none; }

/* 2.6.0 — più proprietari e inquilini per appartamento */
.app-aggiungi { display: flex; gap: 8px; align-items: center; }
.app-aggiungi select { flex: 1; min-width: 0; }
.persona-app-riga { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.persona-app-riga select { flex: 1; min-width: 260px; }
.persona-app-riga label.check { margin: 0; text-transform: none; letter-spacing: 0; }
.barra-filtri-azioni { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* 2.7 — menu: elenco dei condomini sotto Condomini */
.sidebar nav .nav-sotto a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sotto { max-height: 50vh; overflow-y: auto; }

/* 2.7 — Panoramica: box dei condomini larghi il doppio, a destra le cose più importanti */
.pv-condomini-larghi { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
.pv-condomini-larghi .pv-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 20px; align-content: start; }
.pv-condomini-larghi .pv-card > * { grid-column: 1; }
.pv-condomini-larghi .pv-card > .pv-importanti { grid-column: 2; grid-row: 1 / span 6; }
.pv-importanti { display: flex; flex-direction: column; gap: 10px; border-left: 1px dashed var(--cf-grigio-200); padding-left: 16px; min-width: 0; }
.pv-imp-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-imp-tit { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cf-grigio-700); margin-bottom: 2px; }
.pv-importanti .box-link { justify-content: space-between; }
.pv-importanti .box-link em { flex: 0 0 auto; font-style: normal; font-weight: 500; font-size: 11px; opacity: .8; }
.pv-importanti .box-link.lav.urgente { background: #FEE2E2; color: #991B1B; }
.pv-imp-vuoto { font-size: 12px; color: var(--cf-grigio-400); }
.pv-icone { font-size: 13.5px; gap: 12px; }
.pv-icone svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .pv-condomini-larghi { grid-template-columns: 1fr; }
  .pv-condomini-larghi .pv-card { grid-template-columns: 1fr; }
  .pv-condomini-larghi .pv-card > .pv-importanti { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; margin-top: 10px; }
}

/* 2.7.2 — riepilogo in vista box tornato alla misura di prima (2 colonne di griglia) */
.pv-pannello-testa[hidden] { display: none !important; }

/* 2.8 — importa/esporta Excel */
.ie-numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ie-numeri > div { background: var(--cf-grigio-100, #F3F4F6); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.ie-numeri b { font-size: 1.8rem; }
.ie-numeri span { font-size: .85rem; color: var(--cf-grigio-700); }
.ie-numeri .rosso b { color: var(--cf-rosso); }
.ie-avvisi { max-height: 300px; overflow: auto; margin: 0; padding-left: 18px; font-size: .88rem; }
.ie-avvisi li { margin: 3px 0; }
.btn-excel { display: inline-flex; gap: 4px; }
@media (max-width: 800px) { .ie-numeri { grid-template-columns: 1fr 1fr; } }

/* 2.9 — guida in linea: pulsante tondo e popup */
.guida-btn { position: fixed; right: 22px; bottom: 18px; z-index: 900; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  filter: drop-shadow(0 8px 16px rgba(234, 88, 12, .35)) drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); transition: transform .15s; }
.guida-btn img { width: 108px; height: auto; display: block; }
.guida-btn:hover { transform: scale(1.07) rotate(-3deg); }
.guida-btn:focus-visible { outline: 3px solid var(--cf-nero); outline-offset: 3px; }
#dlg-guida { width: min(1120px, 96vw); height: min(84vh, 820px); padding: 0; border: 2px solid var(--cf-arancio); border-radius: 18px; overflow: hidden; }
#dlg-guida[open] { display: flex; flex-direction: column; }
#dlg-guida::backdrop { background: rgba(255, 255, 255, .78); backdrop-filter: blur(2px); }
.guida-testa { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--cf-grigio-200); background: var(--cf-arancio-chiaro); }
.guida-testa h2 { margin: 0; font-size: 1.15rem; }
.guida-logo { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--cf-arancio); }
.guida-chiudi { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--cf-nero) !important; color: #fff !important; font-size: 1.4rem; line-height: 1; }
.guida-chiudi:hover { background: var(--cf-arancio) !important; }
.guida-corpo { flex: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.guida-indice { border-right: 1px solid var(--cf-grigio-200); padding: 16px 12px; overflow-y: auto; background: #FAFAFB; }
.guida-cerca { width: 100%; margin-bottom: 12px; }
.guida-indice nav { display: flex; flex-direction: column; gap: 2px; }
.guida-indice a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--cf-grigio-700); font-size: .9rem; font-weight: 500; text-decoration: none; }
.guida-indice a:hover { background: #fff; color: var(--cf-nero); }
.guida-indice a.attiva { background: var(--cf-arancio); color: #fff; }
.guida-indice a[hidden] { display: none; }
.guida-nessuno { font-size: .85rem; color: var(--cf-grigio-700); padding: 6px 10px; }
.guida-testi { overflow-y: auto; padding: 22px 30px 30px; line-height: 1.6; }
.guida-testi h3 { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; font-size: 1.35rem; }
.guida-testi h4 { margin: 18px 0 6px; font-size: 1rem; color: var(--cf-arancio-scuro, var(--cf-arancio)); }
.guida-testi ul, .guida-testi ol { padding-left: 20px; }
.guida-testi li { margin: 4px 0; }
.guida-testi kbd { border: 1px solid var(--cf-grigio-200); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: .85em; }
.guida-testi mark { background: #FDE68A; border-radius: 3px; padding: 0 2px; }
.guida-sezione { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cf-arancio); }
@media (max-width: 760px) {
  .guida-btn { right: 12px; bottom: 10px; } .guida-btn img { width: 80px; }
  .guida-corpo { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .guida-indice { border-right: 0; border-bottom: 1px solid var(--cf-grigio-200); max-height: 34vh; }
}
@media print { .guida-btn { display: none; } }

/* 2.9.1 — Panoramica: riquadri in alto più bassi di un terzo */
.tessere-kpi .tessera { min-height: 0; padding: 12px 16px 12px; }
.tessere-kpi .t-num { font-size: 28px; line-height: 1.1; }
.tessere-kpi .t-testa { font-size: 14px; }
.tessere-kpi .t-testa .tz-icona { width: 32px; height: 32px; }
.tessere-kpi .occhio { right: 10px; bottom: 10px; width: 28px; height: 28px; }

/* 2.9.2 — firma Marco & Robi Development (piè di pagina e login) */
.piede { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-right: 150px; }
.piede-firma { display: inline-flex; align-items: center; gap: 10px; }
.piede-firma img { height: 50px; width: auto; }
.login-pagina { align-content: center; gap: 26px; }
.login-firma { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .78rem; color: var(--cf-grigio-400); }
.login-firma img { width: 260px; height: auto; }
@media (max-width: 760px) { .piede { padding-right: 100px; } .piede-firma img { height: 38px; } }

/* 2.9.3 — icone in fondo ai box: al passaggio diventano bianche su fondo del loro colore */
.pv-icone span { padding: 3px 7px; border-radius: 8px; transition: background .12s, color .12s; }
.pv-icone span.warn:hover { background: var(--cf-rosso); color: #fff; }
.pv-icone span.scad:hover { background: var(--cf-arancio); color: #fff; }
.pv-icone span.ok:hover { background: var(--cf-verde); color: #fff; }

/* 2.9.4 — al passaggio: segnalazioni, lavorazioni ed etichette in negativo (sfondo del colore della scritta, testo bianco) */
.box-link, .pv-chip { transition: background .12s, color .12s, border-color .12s; }
.box-link.seg:hover, .box-link.seg:focus-visible { background: #9A3A07; color: #fff; }
.box-link.seg.urgente:hover, .box-link.seg.urgente:focus-visible { background: #991B1B; color: #fff; }
.box-link.lav:hover, .box-link.lav:focus-visible { background: #1E40AF; color: #fff; }
.box-link.lav.urgente:hover, .box-link.lav.urgente:focus-visible { background: #991B1B; color: #fff; }
.pv-chip:hover { background: var(--cf-grigio-700); color: #fff; }
.pv-chip.n:hover { background: var(--cf-arancio-hover); color: #fff; }
.pv-chip.c:hover { background: #92400E; color: #fff; }
.pv-chip.au:hover, .pv-chip.agg:hover { background: #1E40AF; color: #fff; border-color: #1E40AF; }
.pv-chip.nr:hover { background: var(--cf-nero); color: #fff; }
.pv-chip.rit:hover { background: #991B1B; color: #fff; }
.pv-chip.ok:hover { background: #166534; color: #fff; }

/* 2.9.5 — riepilogo del condominio: i link su fondo giallo (come «contratti in scadenza»), al passaggio negativo arancione */
.riepilogo-righe dd a, .riepilogo-colonne a { display: inline-block; background: #FEF3C7; color: #92400E; padding: 1px 8px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: background .12s, color .12s; }
.riepilogo-righe dd a:hover, .riepilogo-colonne a:hover, .riepilogo-righe dd a:focus-visible, .riepilogo-colonne a:focus-visible { background: var(--cf-arancio); color: #fff; text-decoration: none; }

/* 2.9.7 — "i" nel box del condominio con menu rapido */
.info-cond { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; vertical-align: 2px; border: 2px solid var(--cf-arancio); border-radius: 50%;
  color: var(--cf-arancio); background: #fff; font: italic 700 12px/1 Georgia, 'Times New Roman', serif; cursor: pointer; transition: background .12s, color .12s; }
.info-cond:hover, .info-cond:focus-visible, .info-cond.aperta { background: var(--cf-arancio); color: #fff; outline: none; }
.info-menu { position: absolute; z-index: 30; min-width: 190px; background: #fff; border: 2px solid var(--cf-arancio); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(16, 24, 40, .22); }
.info-menu[hidden] { display: none; }
.info-menu-tit { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cf-grigio-700); padding: 4px 8px 6px; border-bottom: 1px solid var(--cf-grigio-200); margin-bottom: 4px; }
.info-menu a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--cf-nero); font-size: .9rem; font-weight: 500; text-decoration: none; }
.info-menu a:hover, .info-menu a:focus-visible { background: var(--cf-arancio); color: #fff; outline: none; }

/* 3.0 — intestazione fissa dello stabile con il menu delle sezioni (tutte le pagine con contesto) */
.ic-fissa { position: sticky; top: var(--barra-top, var(--topbar-h)); z-index: 24; margin: -6px 0 18px; padding-top: 6px; background: var(--sfondo, #F4F5F7); }
.ic-nome a { color: inherit; text-decoration: none; }
.ic-nome a:hover { text-decoration: underline; }
.pallino.giallo { background: var(--cf-giallo); }
.ic-cambia { position: relative; }
.ic-cambia summary { list-style: none; cursor: pointer; }
.ic-cambia summary::-webkit-details-marker { display: none; }
.ic-cambia-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; background: #fff; border: 2px solid var(--cf-arancio); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(16, 24, 40, .22); text-align: left; }
.ic-cambia-menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--cf-nero); font-weight: 500; text-decoration: none; }
.ic-cambia-menu a:hover { background: var(--cf-arancio); color: #fff; }
@media (max-width: 760px) { .ic-fissa { position: static; } }
.tabella.senza-condominio th:nth-child(2), .tabella.senza-condominio td:nth-child(2) { display: none; }
.doc-impianto.doc-un-stabile { grid-template-columns: minmax(0, 1fr); }

/* 3.0 — box Email nelle schede di condomino e fornitore */
.em-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.em-col { padding: 14px 18px; min-width: 0; }
.em-col + .em-col { border-left: 1px solid var(--cf-grigio-200); }
.em-col h3 { margin: 0 0 10px; font-size: .95rem; }
.em-riga { display: block; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; border: 1px solid transparent; }
.em-riga:hover { background: var(--cf-arancio-chiaro); border-color: #F9C9A8; }
.em-testa { display: flex; justify-content: space-between; gap: 10px; }
.em-testa b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-testa em { font-style: normal; font-size: .78rem; color: var(--cf-grigio-700); flex: 0 0 auto; }
.em-riga small { display: block; color: var(--cf-grigio-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-piede { display: flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--cf-grigio-400); margin-top: 2px; }
.em-periodo { display: flex; gap: 8px; align-items: center; }
.em-periodo label { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .78rem; text-transform: none; letter-spacing: 0; }
.em-periodo input { padding: 4px 6px; height: 30px; }
@media (max-width: 800px) { .em-colonne { grid-template-columns: 1fr; } .em-col + .em-col { border-left: 0; border-top: 1px solid var(--cf-grigio-200); } }
.doc-mini { list-style: none; margin: 0; padding: 0; } .doc-mini li { margin: 2px 0 4px; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rc-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--cf-arancio-chiaro); color: var(--cf-arancio-scuro, var(--cf-arancio)); font-size: .72rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.rc-chip:hover { background: var(--cf-arancio); color: #fff; }
/* 3.0.4 (richiesta di Roberto, 29-09-2026): ombre più scure ma più strette, e box senza la striscia colorata di lato */
:root {
  --ombra-1: 0 1px 2px rgba(20, 23, 28, .22), 0 3px 8px -2px rgba(20, 23, 28, .32);
  --ombra-2: 0 2px 4px rgba(20, 23, 28, .24), 0 6px 14px -4px rgba(20, 23, 28, .38);
}
/* 3.0.5 (richiesta di Roberto, 29-09-2026): sfumatura grigio 15% in alto → grigio 25% in fondo; scritte del piè di pagina in bianco */
/* 3.0.6: in fondo scende fino a grigio 50%, così le scritte bianche del piè di pagina si leggono */
body { background: var(--sfondo) linear-gradient(180deg, #EBEBEB 0%, #808080 100%) fixed; } /* 3.0.9: grigio 8% in alto → 50% in fondo */
.piede, .piede-firma { color: #fff; }
@media print { body { background: #fff; } }
/* 3.0.7 (richiesta di Roberto, 29-09-2026): box senza bordi (trasparenti, così le misure non cambiano), tranne il Riepilogo dello stabile.
   Restano i bordi di stato più specifici (es. .em-riga.da-assegnare, .cartella.aperta, :hover). */
.card, .tessera, .pv-card, .pv-kpi a, .em-riga, .doc-scheda, .cartella, .box-fornitori, .bf-dettaglio, .msg, .pv-ticket, .av-lista li, .wf-nodo { border-color: transparent; }
.pv-card, .pv-card.giallo, .pv-card.rosso, .pv-card.grigio, .pv-card[style*="border-left-color"] { border-left: 1px solid transparent !important; }
.box-riepilogo .pv-card, .box-riepilogo .pv-card[style*="border-left-color"] { border: 2px solid var(--cf-arancio) !important; }
.card.riepilogo-largo { border: 2px solid var(--cf-arancio); }
/* 3.0.8 (richiesta di Roberto, 29-09-2026): senza bordo anche l'intestazione dello stabile e il menu delle sezioni sotto */
/* 3.1.0 (richiesta di Roberto, 29-09-2026): header in alto scuro come il menu a sinistra, scritte in negativo */
.topbar { background: linear-gradient(180deg, #1C232A 0%, #29323B 100%); border-bottom: 1px solid #14191E; color: #fff; }
.tb-saluto b, .tb-utente-testo b, .tb-switch, .tb-switch-testo, .hamburger { color: #fff; }
.tb-saluto small, .tb-utente-testo small { color: rgba(255, 255, 255, .72); }
.tb-storia { background: rgba(255, 255, 255, .12); }
.tb-storia > a, .tb-storia > button { color: #fff; }
.tb-storia > a:hover, .tb-storia > button:hover, .tb-storia > button[aria-expanded="true"] { background: #fff; color: var(--cf-nero); }
.tb-esci { color: #fff; border-color: rgba(255, 255, 255, .45); }
.tb-esci:hover { background: #fff; color: var(--cf-nero); }
.tb-switch-traccia { background: rgba(255, 255, 255, .30); }
.tb-cerca { background: #fff; }
/* 3.1.1 (richiesta di Roberto, 29-09-2026): frecce avanti/indietro su fondo bianco con scritte nere, al passaggio grigio con scritta bianca;
   tendina "Tutto" della ricerca e "powered by IA" su fondo arancio con scritta bianca */
.tb-storia { background: #fff; }
.tb-storia > a, .tb-storia > button { color: var(--cf-nero); }
.tb-storia > a:hover, .tb-storia > button:hover, .tb-storia > button[aria-expanded="true"] { background: #6B7280; color: #fff; box-shadow: none; }
.tb-cerca select, .tb-cerca select.filtro-attivo { background: var(--cf-arancio); color: #fff; border-right: 0; }
.tb-cerca select option { background: #fff; color: var(--cf-nero); }
.tb-powered { align-self: stretch; display: flex; align-items: center; background: var(--cf-arancio); color: #fff; padding: 0 14px; border-radius: 0 999px 999px 0; }
/* 3.1.3 (richiesta di Roberto, 29-09-2026): frecce e scritta della cronologia nell'header più grandi e più marcate */
.tb-storia > a, .tb-storia > button { width: 38px; height: 38px; }
.tb-storia svg { width: 21px; height: 21px; stroke-width: 2.6; }
.tb-storia > a.tb-torna { font-size: 14.5px; font-weight: 700; padding: 0 16px 0 10px; }
/* 3.1.5 (richiesta di Roberto, 29-09-2026): tendina "Tutto" DENTRO la pillola bianca, arrotondata a sinistra come il campo di ricerca.
   Serve appearance:none: su Mac lo stile nativo della select ignora border-radius e impone la sua altezza (sbordava sopra e sotto). */
.tb-cerca { align-items: stretch; }
.tb-cerca select, .tb-cerca select.filtro-attivo {
  -webkit-appearance: none; appearance: none; align-self: stretch; height: auto; margin: 0;
  border-radius: 999px 0 0 999px; padding: 0 30px 0 16px; line-height: 1;
  background-color: var(--cf-arancio); color: #fff; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px;
}
.tb-cerca select:focus { box-shadow: none; outline: none; }
/* 3.1.6 (richiesta di Roberto, 29-09-2026): vista a box delle segnalazioni su fondo giallo chiaro intorno ai box */
/* 3.1.8 (richiesta di Roberto, 29-09-2026): stesso colore dello sfondo del titolo stabile (#FDEFE6) anche sulla legenda sotto ai filtri */
/* 3.1.9 (richiesta di Roberto, 29-09-2026): stesso colore anche sulla parte dei filtri, così tutta la card delle segnalazioni è di un colore */
body[data-pagina="segnalazioni"] .card > .filtri { background: var(--cf-arancio-chiaro); border-bottom: 0; }
/* 3.2.0 (richiesta di Roberto, 29-09-2026): segnalazioni a box come Lavorazioni, box direttamente sul grigio; il riquadro colorato resta solo su filtri e legenda */
body[data-pagina="segnalazioni"] .card > .filtri:first-child { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.card > .tabella-wrap:first-child, .card > .tabella-wrap:first-child table { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.card > .tabella-wrap:only-child, .card > .tabella-wrap:only-child table { border-radius: var(--r-xl); }
/* 3.2.1 (richiesta di Roberto, 29-09-2026): Email senza sottotitolo, filtri subito sotto il titolo, poi le mail direttamente sul grigio */
.email-corpo .vuoto { background: #fff; border-radius: var(--r-xl); box-shadow: var(--ombra-1); }
/* 3.2.2 (richiesta di Roberto, 29-09-2026): in Segnalazioni il riquadro dei filtri in grigio 70% con scritte bianche (i campi restano bianchi) */
body[data-pagina="segnalazioni"] .card > .filtri, body[data-pagina="segnalazioni"] .card > .legenda-pallini { background: #4D4D4D; color: #fff; }
body[data-pagina="segnalazioni"] .card > .filtri label, body[data-pagina="segnalazioni"] .card > .legenda-pallini, body[data-pagina="segnalazioni"] .card > .legenda-pallini span { color: #fff; }
body[data-pagina="segnalazioni"] .card:has(> .filtri) { background: #4D4D4D; border-color: transparent; }
/* 3.2.3 (richiesta di Roberto, 29-09-2026): pulsanti Tutte/Aperte/... subito sotto il riquadro dei filtri */
/* 3.2.4 (richiesta di Roberto, 29-09-2026): ricerca e filtri di Lavorazioni ed Email in un riquadro grigio 70% con scritte bianche, come Segnalazioni */
body[data-pagina="lavorazioni"] .pv-toolbar { background: #4D4D4D; color: #fff; padding: 14px 18px; border-radius: var(--r-xl); box-shadow: var(--ombra-1); margin-bottom: 18px; }
body[data-pagina="lavorazioni"] .pv-toolbar label { color: #fff; border-color: rgba(255, 255, 255, .55); }
body[data-pagina="lavorazioni"] .pv-toolbar label.filtro-attivo { background: #fff; color: var(--cf-nero); border-color: #fff; }
/* 3.2.5 (richiesta di Roberto, 29-09-2026): sotto il riquadro grigio, sulla stessa riga i pulsanti di stato e "Email non riconosciute" + Box/Elenco */
/* 3.2.6 (richiesta di Roberto, 29-09-2026): barra di ricerca e filtri delle sezioni dello stabile (Condomini, Fornitori, Strutture, Riunioni, Altro…) e di Documenti in grigio 70% con scritte bianche */
/* 3.2.7 (richiesta di Roberto, 29-09-2026): in Segnalazioni e Lavorazioni il campo di ricerca diventa una lente all'inizio del riquadro grigio;
   tondo bianco con icona nera, al passaggio arancio, al clic il campo di testo si apre in un popup. Anello arancio = ricerca attiva. */
.cerca-lente { position: relative; flex: 0 0 auto; align-self: center; }
.filtri > .cerca-lente { flex: 0 0 auto; min-width: 0; align-self: flex-end; }
.lente-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--cf-nero); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombra-1); transition: background .12s, color .12s; }
.lente-btn svg { stroke-width: 2.4; }
.lente-btn:hover, .lente-btn[aria-expanded="true"] { background: var(--cf-arancio); color: #fff; }
.lente-btn.attiva { box-shadow: 0 0 0 3px var(--cf-arancio), var(--ombra-1); }
.lente-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: min(380px, 80vw); display: flex; gap: 8px; align-items: center; background: #fff; border-radius: var(--r); box-shadow: var(--ombra-3); padding: 10px; }
.lente-pop[hidden] { display: none; }
.lente-pop input[type=search] { flex: 1; min-width: 0; width: auto; }
.lente-pop .btn { height: 40px; flex-shrink: 0; }
/* 3.2.9 (richiesta di Roberto, 29-09-2026): pulsante "riduci al solo titolo" dei box con un'ombra molto più forte */
.card-riduci { box-shadow: 0 2px 4px rgba(20, 23, 28, .35), 0 6px 14px -2px rgba(20, 23, 28, .55); }
.card-riduci:hover { box-shadow: 0 3px 6px rgba(20, 23, 28, .40), 0 8px 18px -2px rgba(20, 23, 28, .60); }
/* 3.2.10 (richiesta di Roberto, 29-09-2026): spazio tra una griglia di box e il box che la segue (scheda condomino: Anagrafica → box Email) */
.griglia:not(.spazio) + .card { margin-top: 20px; }
/* 3.2.13 (richiesta di Roberto, 29-09-2026): anche in Panoramica la riga con cerca, ordinamento, filtro e legenda in un riquadro grigio 70% con scritte bianche */
body[data-pagina="index"] .pv-toolbar { background: #4D4D4D; color: #fff; padding: 14px 18px; border-radius: var(--r-xl); box-shadow: var(--ombra-1); margin-bottom: 18px; }
body[data-pagina="index"] .pv-toolbar label { color: #fff; border-color: rgba(255, 255, 255, .55); }
body[data-pagina="index"] .pv-toolbar label.filtro-attivo { background: #fff; color: var(--cf-nero); border-color: #fff; }
/* 3.2.16 (richiesta di Roberto, 29-09-2026): dentro i box le scritte scure sono nere, mai grigie.
   Si ridefiniscono i grigi "da testo" dentro i box; il grigio chiaro resta solo per sfondi, pallini e segnaposto dei campi. */
:is(.card, .pv-card, .tessera, .em-riga, .doc-scheda, .cartella, .pv-kpi a, .box-fornitori, .bf-dettaglio, .msg, .pv-ticket, .wf-nodo, .av-lista li, .pv-popup, .login-box, .tb-ultime, .tb-cerca-pannello) {
  --cf-grigio-700: var(--cf-nero); --testo-tenue: var(--cf-nero);
}
:is(.card, .pv-card, .tessera, .em-riga, .doc-scheda, .cartella, .pv-kpi a, .box-fornitori, .bf-dettaglio, .msg, .pv-ticket, .wf-nodo, .av-lista li, .pv-popup, .login-box, .tb-ultime, .tb-cerca-pannello)
  :is(.muted, .spento, .vuoto, .pv-ultima em, .pv-vuoto, .pv-ticket .eta, .pv-stepper li, .wf-data, .tabella th, .box-eti, .riepilogo-colonne small, .pv-imp-vuoto, .em-piede, .bf-qui-testa, .rc-risposta-eti, .tb-ultime-testa, .rc-gruppo, .pv-popup .chiudi) {
  color: var(--cf-nero);
}
/* 3.2.17 (richiesta di Roberto, 29-09-2026): in Segnalazioni i pulsanti Filtra e Azzera più piccoli */
body[data-pagina="segnalazioni"] .filtri > div > .btn { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
/* 3.2.18 (richiesta di Roberto, 29-09-2026): in Segnalazioni "IA incerta" e "Azzera" un po' più staccati da quelli sopra */
body[data-pagina="segnalazioni"] .filtri > div > label.check + label.check { margin-top: 10px; }
body[data-pagina="segnalazioni"] .filtri > div:has(> .btn) { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* 3.2.19 (richiesta di Roberto, 29-09-2026): nel piè di pagina la scritta a sinistra e "Sviluppato da" + logo su fondo bianco con scritta nera */
.piede > span { background: #fff; color: var(--cf-nero); padding: 6px 14px; border-radius: 999px; box-shadow: var(--ombra-1); }
/* 3.3.1 (richiesta di Roberto, 29-09-2026): Stabili come Lavorazioni, box direttamente sul grigio e filtri in negativo su grigio 70% */
/* 3.3.2 (richiesta di Roberto, 29-09-2026): l'interruttore Box/Elenco non si restringe mai, "Elenco" resta dentro la pillola bianca */
.switch-vista { width: max-content; flex-shrink: 0; }
.filtri > div:has(> .switch-vista) { flex: 0 0 auto !important; min-width: max-content; }
/* 3.3.4 (richiesta di Roberto, 29-09-2026): in Appartamenti (elenco) la riga con icona, titolo e filtro staccata in un riquadro grigio 70% in negativo */
.barra-negativa { background: #4D4D4D; border-color: transparent; }
.barra-negativa > .card-testa { border-bottom: 0; }
.barra-negativa h2, .barra-negativa h2 .ico, .barra-negativa .muted, .barra-negativa .small { color: #fff; }
/* 3.3.8: nel riquadro grigio in negativo le scritte restano bianche (la regola "scritte nere nei box" della 3.2.16 è più specifica) */
.barra-negativa h2, .barra-negativa h2 .ico, .barra-negativa .muted, .barra-negativa .small, .barra-negativa .spento { color: #fff !important; }
/* 3.3.10 (richiesta di Roberto, 29-09-2026): Contenziosi con la stessa grafica degli altri elenchi; .filtri-scuri = riquadro filtri grigio 70% in negativo riutilizzabile */
/* 3.3.11 (richiesta di Roberto, 29-09-2026): occhio della Panoramica che al passaggio si inverte;
   box delle viste a box che al passaggio prendono lo stesso chiaro delle righe in vista elenco */
.occhio.negativo:hover { background: #fff; color: var(--cf-nero); border-color: #fff; }
.tessera-box:has(> .tessera-arancio) .occhio.negativo:hover { color: var(--cf-arancio); }
.occhio.positivo:hover { background: var(--cf-arancio); color: #fff; border-color: var(--cf-arancio); }
.tessera-box.attiva .occhio.negativo:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .65); }
.tessera-box.attiva .occhio.positivo:hover { background: #fff; color: var(--cf-nero); border-color: var(--bordo-forte); }
.pv-card:hover, .pv-card:focus-visible, a.tessera:not(.tessera-arancio):not(.tessera-nera):hover { background: var(--cf-arancio-chiaro); }
/* 3.3.12 (richiesta di Roberto, 29-09-2026): in Email le schede sotto il riquadro grigio come i pulsanti di Segnalazioni (pillole) */
/* 3.3.13 (richiesta di Roberto, 29-09-2026): in tutti i riquadri grigio 70% i pulsanti al passaggio diventano arancio con scritta bianca */
:is(.filtri-scuri, .stabili-filtri, .email-filtri, .doc-filtri, .barra-filtri, .barra-negativa, body[data-pagina="segnalazioni"] .card:has(> .filtri), body[data-pagina="lavorazioni"] .pv-toolbar, body[data-pagina="index"] .pv-toolbar)
  :is(.btn, .switch-vista button, .pill-nav a, label:has(> input[type=checkbox])):hover {
  background: var(--cf-arancio) !important; color: #fff !important; border-color: var(--cf-arancio) !important; text-decoration: none;
}
/* 3.3.14 (richiesta di Roberto, 29-09-2026): arancio al passaggio anche per i pulsanti sotto al riquadro grigio (Segnalazioni, Email) */
:is(.seg-riga, .email-stati) :is(.pill-nav a, .btn, .switch-vista button):hover, .email-stati > a:hover {
  background: var(--cf-arancio) !important; color: #fff !important; border-color: var(--cf-arancio) !important; text-decoration: none;
}
/* 3.3.15 (richiesta di Roberto, 29-09-2026): i riquadri con i numeri di Lavorazioni al passaggio col chiaro come gli altri box */
.pv-kpi a:hover { background: var(--cf-arancio-chiaro); text-decoration: none; box-shadow: var(--ombra-2); }
/* 3.3.16 (richiesta di Roberto, 29-09-2026): menu delle sezioni dello stabile, al passaggio scritta arancione; la sezione attuale con contorno arancione invece del fondo */
/* 3.4.0 (richiesta di Roberto, 30-09-2026): icona a sinistra del titolo nelle pagine elenco; scritta in negativo nella barra grigia di Condomini */
.titolo-pagina h1 { display: flex; align-items: center; gap: 12px; }
.ico-titolo { width: 40px; height: 40px; border-radius: 12px; background: var(--cf-arancio); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--ombra-1); }
.ico-titolo svg { stroke: currentColor; }
/* 3.4.2 (richiesta di Roberto, 30-09-2026): in tutti gli elenchi i titoli delle colonne su grigio 70% con scritte bianche */
.tabella thead th { background: #4D4D4D !important; color: #fff !important; border-bottom: 0 !important; }
.card > .tabella-wrap:first-child thead th:first-child { border-top-left-radius: var(--r-xl); }
.card > .tabella-wrap:first-child thead th:last-child { border-top-right-radius: var(--r-xl); }
/* 3.7.0 (richiesta di Roberto, 30-09-2026): stella e cestino delle mail */
.em-cestino:hover { background: var(--cf-rosso); border-color: var(--cf-rosso); }
.em-stella-on { color: #F59E0B; display: inline-flex; vertical-align: -2px; }
.em-stella-on svg { fill: #F59E0B; }
/* 3.7.1: filtri di Email su una riga anche con i tre switch */
/* 3.8.0 (richiesta di Roberto, 30-09-2026): comunicazioni della segnalazione, una mail per box dalla prima all'ultima; automatiche su giallino */
.mail-sezione-testa { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.mail-sezione-testa h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.mail-sezione-testa .btn { margin-left: auto; }
.mail-sequenza { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.mail-box { margin: 0; padding: 14px 18px 16px; }
.mail-box.auto { background: #FEF6D8; }
.mail-box.out:not(.auto) { background: #fff; }
.mail-box.fornitore { box-shadow: inset 4px 0 0 var(--cf-arancio), var(--ombra-1); }
.mail-testa { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.mail-chi { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.mail-quando { font-size: 12.5px; color: var(--cf-nero); white-space: nowrap; }
.mail-ogg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.mail-originale { border: 1px solid var(--bordo-forte); background: #fff; color: var(--cf-arancio-scuro); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mail-originale:hover, .mail-originale.attivo { background: var(--cf-arancio); border-color: var(--cf-arancio); color: #fff; }
.mail-box .corpo { white-space: pre-wrap; font-size: 14px; word-break: break-word; }
/* 3.8.1 (richiesta di Roberto, 30-09-2026): "Risposta automatica" in piccolo sotto le mail automatiche; fornitore nel box della risposta a scomparsa con "Mostra scheda" */
.mail-firma-auto { text-align: right; font-size: 11.5px; font-style: italic; color: var(--cf-nero); margin-top: 8px; }
.bf-apri { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 14px; color: var(--cf-nero); text-align: left; cursor: pointer; }
.bf-apri:hover { color: var(--cf-arancio); }
.bf-freccia { transition: transform .15s; font-size: 13px; }
.bf-apri[aria-expanded="true"] .bf-freccia { transform: rotate(180deg); }
.bf-scheda { display: inline-block; margin: 2px 0 6px; color: var(--cf-arancio); font-size: 12.5px; font-weight: 600; }
.bf-scheda:hover { color: var(--cf-arancio-scuro); }
.bf-altro { margin-top: 4px; }
/* 3.8.2 (richiesta di Roberto, 30-09-2026): frecce per aprire (fornitore scelto e "Fornitori di questo stabile") più grandi, bianche in bollo arancio */
.bf-freccia, details.bf-qui > summary .ico { width: 26px; height: 26px; border-radius: 50%; background: var(--cf-arancio); color: #fff !important; display: inline-grid; place-items: center; flex-shrink: 0; box-shadow: var(--ombra-1); transition: transform .15s, background .12s; }
.bf-freccia svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; }
details.bf-qui > summary .ico { padding: 6px; box-sizing: border-box; stroke: #fff; stroke-width: 3; }
.bf-freccia { transform: rotate(90deg); }
.bf-apri[aria-expanded="true"] .bf-freccia { transform: rotate(-90deg); }
.bf-apri:hover .bf-freccia, details.bf-qui > summary:hover .ico { background: var(--cf-arancio-scuro); }
.bf-freccia, details.bf-qui > summary .ico { width: 28px; height: 28px; }
.bf-freccia svg { width: 20px; height: 20px; stroke-width: 3.2; }
details.bf-qui > summary .ico { padding: 4px; stroke-width: 3.2; }
/* 3.9.0 (richiesta di Roberto, 30-09-2026): nella lavorazione mail una per box e fornitore a scomparsa come nella segnalazione */
details.bf-forn > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
details.bf-forn > summary::-webkit-details-marker { display: none; }
details.bf-forn > summary .bf-apri { width: 100%; }
details.bf-forn[open] .bf-freccia { transform: rotate(-90deg); }
details.bf-forn > summary:hover .bf-freccia { background: var(--cf-arancio-scuro); }
/* 3.9.1 (richiesta di Roberto, 30-09-2026): nella lavorazione il titolo "Mail con i fornitori" bianco, con l'icona, su fondo arancione */
body[data-pagina="lavorazione"] .mail-sezione-testa { background: var(--cf-arancio); color: #fff; padding: 12px 18px; border-radius: var(--r-xl); box-shadow: var(--ombra-1); }
body[data-pagina="lavorazione"] .mail-sezione-testa h2, body[data-pagina="lavorazione"] .mail-sezione-testa h2 .ico { color: #fff; }
/* 3.9.2: anche nella segnalazione il titolo delle comunicazioni bianco su fondo arancione */
body[data-pagina="segnalazione"] .mail-sezione-testa { background: var(--cf-arancio); color: #fff; padding: 12px 18px; border-radius: var(--r-xl); box-shadow: var(--ombra-1); }
body[data-pagina="segnalazione"] .mail-sezione-testa h2, body[data-pagina="segnalazione"] .mail-sezione-testa h2 .ico { color: #fff; }
body[data-pagina="segnalazione"] .mail-sezione-testa .btn:hover { background: #fff; color: var(--cf-arancio-scuro); border-color: #fff; }
/* 3.4.1 → 4.0: Dashboard, box sempre di misura media (tolto il selettore Piccolo / Medio / Grande) */
@media (min-width: 1000px) {
  body[data-pagina="index"] .pv-condomini-larghi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-pagina="index"] .pv-pannello .box-griglia { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body[data-pagina="index"] .pv-pannello .box-griglia > .pv-card-box { zoom: .9; }
}
/* 3.5.1 (richiesta di Roberto, 30-09-2026): quando la pagina scorre, ombra scura sotto la fascia fissa con titolo dello stabile e menu delle sezioni */
.ic-fissa { transition: box-shadow .15s; }
/* 3.5.2 (richiesta di Roberto, 30-09-2026): pulsanti sotto le mail non spedite */
.ns-azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bordo-forte); }
.ns-azioni form { margin: 0; }
.ns-eti { font-size: 12px; font-weight: 700; color: var(--cf-rosso); margin-right: auto; }
.ns-cancella:hover { background: var(--cf-rosso) !important; border-color: var(--cf-rosso) !important; color: #fff !important; }
/* 3.5.3 (richiesta di Roberto, 30-09-2026): campi per allegare file con bordo arancione e pulsante "Scegli file" arancione con scritta bianca */
input[type=file] { border: 1.5px solid var(--bordo-forte); border-radius: 10px; padding: 6px; background: #fff; width: 100%; box-sizing: border-box; font-size: 13px; color: var(--cf-nero); }
input[type=file]::file-selector-button { background: var(--cf-arancio); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; margin-right: 12px; font: inherit; font-weight: 600; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--cf-arancio-scuro); }
/* 3.5.5 (richiesta di Roberto, 30-09-2026): matita arancione per correggere o aggiungere destinatari */
.matita { background: none; border: 0; padding: 2px 4px; margin-left: 6px; color: var(--cf-arancio); cursor: pointer; border-radius: 6px; vertical-align: middle; line-height: 0; }
.matita:hover, .matita.attiva { background: var(--cf-arancio); color: #fff; }
.matita svg { stroke-width: 2.4; }
.matita-campo { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.matita-campo input { width: 100%; }

/* 3.7 — barre: barra arancione dello stabile + barra grigia (Nuovo…, filtri, Box/Elenco, lente), sfondo azzurro */
:root {
  --cf-grigio-barra: #3A444F;
  --conta-totale: #B4BADC;
  --conta-attenzione: #8AA94F;
  --sfondo-su: #C3D6F4;
  --sfondo-giu: #8598B6;
  --sfondo: #C3D6F4;
}
body { background: var(--sfondo) linear-gradient(180deg, var(--sfondo-su) 0%, var(--sfondo-giu) 100%) fixed; }
.topbar { box-shadow: 0 6px 14px -3px rgba(20, 23, 28, .55); z-index: 30; }

/* contenitore fisso: attaccato all'header (tira su il padding di .contenuto), largo quanto i box */
.ic-fissa, .ic-fissa.compatta { position: sticky; top: var(--barra-top, var(--topbar-h)); z-index: 24; margin: -22px 0 20px; padding: 0; background: transparent; container: barre / inline-size; }
@media (max-width: 900px) { .ic-fissa, .ic-fissa.compatta { margin-top: -16px; } }

/* barra arancione */
.barra-stabile { background: var(--cf-arancio); color: #fff; min-height: 56px; padding: 0 18px; border-radius: 0 0 14px 14px; display: flex; align-items: center; gap: 18px;
  position: relative; z-index: 2; box-shadow: 0 8px 16px -6px rgba(20, 23, 28, .50); }
.bs-nome { flex: none; max-width: 320px; min-width: 0; line-height: 1.15; }
.bs-nome b { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; min-width: 0; }
.bs-nome .bs-titolo { color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bs-nome .bs-titolo:hover { text-decoration: underline; }
.bs-nome > span { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-nome .ic-cambia { flex: none; }
.bs-nome .ic-cambia summary { color: #fff; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.bs-nome .ic-cambia summary:hover, .bs-nome .ic-cambia[open] summary { background: rgba(255, 255, 255, .22); }
.bs-nome .ic-cambia summary svg { stroke-width: 2.6; }
.bs-nome .ic-cambia-menu { left: 0; right: auto; text-transform: none; letter-spacing: 0; font-size: 14px; }
.bs-menu { margin-left: auto; display: flex; align-items: center; gap: 1px; min-width: 0; }
.bs-menu a { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 8px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.bs-menu a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.bs-menu a.attiva { background: #fff; color: var(--cf-arancio); font-weight: 700; padding: 0 14px; margin: 0 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
.bs-menu .conta, .bg-dx .conta, .bs-nome .conta { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #111; background: var(--conta-totale); line-height: 1; }
.bs-menu .conta.attenzione, .bg-dx .conta.attenzione { background: var(--conta-attenzione); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.bs-nome .conta { text-transform: none; font-weight: 600; }

/* due righe quando il menu non ci sta (container query sul contenitore delle barre) */
@container barre (max-width: 1420px) {
  .barra-stabile { flex-wrap: wrap; padding: 7px 18px 8px; row-gap: 3px; min-height: 0; }
  .bs-nome { flex: 1 0 100%; max-width: none; display: flex; align-items: baseline; gap: 10px; }
  .bs-nome b { font-size: 16px; max-width: 60%; }
  .bs-menu { margin-left: -9px; flex: 1 1 100%; justify-content: space-between; }
  .bs-menu a { height: 30px; }
  .bs-menu a.attiva { margin: 0; }
  .bs-nome > span { min-width: 0; }
  /* rete di sicurezza: se il menu non ci sta nemmeno su due righe scorre, non esce dalla barra */
  .bs-menu { overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .bs-menu::-webkit-scrollbar { display: none; }
}
@container barre (max-width: 1100px) {
  .bs-menu { flex-wrap: wrap; justify-content: flex-start; overflow: visible; row-gap: 2px; }
  .bs-menu a { padding: 0 6px; font-size: 12px; gap: 4px; height: 28px; }
  .bs-menu a.attiva { padding: 0 10px; }
}
@container barre (max-width: 860px) {
  .bs-menu { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: 0; }
  .bs-menu::-webkit-scrollbar { display: none; }
  .bs-nome { flex-wrap: wrap; row-gap: 0; }
  .bs-nome b { max-width: 100%; }
}

/* barra grigia */
.barra-grigia { background: var(--cf-grigio-barra); color: #fff; height: 46px; margin: 0 16px; padding: 0 14px; border-radius: 0 0 14px 14px; display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 1; box-shadow: 0 10px 16px -8px rgba(20, 23, 28, .60); }
.bg-nuovo { flex: none; height: 32px; padding: 0 16px; border-radius: 999px; background: transparent; border: 2px solid var(--cf-arancio); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; white-space: nowrap; margin-right: 4px; text-decoration: none; }
.bg-nuovo:hover { background: var(--cf-arancio); color: #fff; text-decoration: none; }
.bg-sep { flex: none; width: 1.5px; height: 24px; border-radius: 2px; background: rgba(255, 255, 255, .55); margin: 0 8px 0 6px; }
.bg-filtri { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; display: flex; align-items: center; }
.bg-filtri::-webkit-scrollbar { display: none; }
.barra-grigia .pill-nav { flex-wrap: nowrap; gap: 6px; }
.barra-grigia .pill-nav a { height: 30px; padding: 0 13px; border-radius: 999px; background: transparent; border: 1px solid rgba(255, 255, 255, .38); color: #fff; font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; }
.barra-grigia .pill-nav a small { opacity: .75; font-size: inherit; }
.barra-grigia .pill-nav a:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.barra-grigia .pill-nav a.attiva { background: #fff; border-color: #fff; color: var(--cf-arancio); font-weight: 700; }
.bg-dx { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bg-dx form { margin: 0; }
.bg-extra { height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .38); background: transparent; color: #fff; font: inherit; font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; text-decoration: none; list-style: none; }
.bg-extra::-webkit-details-marker { display: none; }
.bg-extra:hover { border-color: #fff; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .1); }
.bg-menu { position: relative; }
.bg-menu-voci { position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; min-width: 200px; background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 14px 30px -8px rgba(20, 23, 28, .55); }
.bg-menu-voci a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--cf-nero); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.bg-menu-voci a:hover { background: var(--cf-arancio); color: #fff; }
.barra-grigia .switch-vista { background: rgba(255, 255, 255, .14); border: 0; border-radius: 999px; padding: 3px; }
.barra-grigia .switch-vista button { height: 24px; padding: 0 11px; color: #fff; font-size: 12px; font-weight: 500; }
html:not([data-vista="elenco"]) .barra-grigia .switch-vista button[data-vista="box"], html[data-vista="elenco"] .barra-grigia .switch-vista button[data-vista="elenco"] { background: #fff; color: var(--cf-arancio); font-weight: 700; }

/* lente e popup */
.barra-grigia .cerca-lente { position: static; }
.barra-grigia .lente-btn { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 0; color: var(--cf-arancio); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.barra-grigia .lente-btn:hover { background: #fff; color: var(--cf-arancio); }
.barra-grigia .lente-btn[aria-expanded="true"], .barra-grigia .lente-btn.attiva { background: #fff; color: var(--cf-arancio); box-shadow: 0 0 0 3px rgba(234, 96, 18, .55), 0 1px 4px rgba(0, 0, 0, .4); }
.barra-grigia .lente-pop { position: absolute; top: calc(100% + 10px); right: 14px; left: auto; width: 360px; max-width: calc(100vw - 32px); display: block; background: #fff; color: var(--cf-nero);
  border-radius: 14px; padding: 12px; z-index: 5; box-shadow: 0 14px 30px -8px rgba(20, 23, 28, .55), 0 2px 6px rgba(20, 23, 28, .18); }
.barra-grigia .lente-pop[hidden] { display: none; }
.barra-grigia .lente-pop.con-date { width: 400px; }
.barra-grigia .lente-pop::before { content: ""; position: absolute; top: -6px; right: 12px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.lp-cerca { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 12px; border: 2px solid var(--cf-arancio); border-radius: 999px; color: var(--cf-arancio); margin: 0; }
.lp-cerca input { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; padding: 0 !important; height: 100%; background: transparent; font: inherit; font-size: 14.5px; color: var(--cf-nero); }
.lp-cerca input::-webkit-search-cancel-button { display: none; }
.lp-svuota { border: 0; background: none; color: var(--cf-arancio); cursor: pointer; padding: 4px; line-height: 0; border-radius: 50%; }
.lp-svuota:hover { background: var(--cf-arancio-chiaro); }
.lp-tit { margin: 12px 2px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-nero); }
.lp-date { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-date label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--bordo-forte); border-radius: 10px; padding: 0 8px; margin: 0; }
.lp-date label span { font-size: 12px; color: var(--cf-nero); }
.lp-date input { border: 0 !important; box-shadow: none !important; padding: 7px 0 !important; min-width: 0; width: 100%; font: inherit; font-size: 13.5px; background: transparent; }
.lp-rapide { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lp-rapide button { border: 1px solid var(--bordo-forte); background: #fff; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; color: var(--cf-nero); cursor: pointer; }
.lp-rapide button:hover, .lp-rapide button.attiva { background: var(--cf-arancio); border-color: var(--cf-arancio); color: #fff; font-weight: 600; }
.lp-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.lp-campi label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12px; font-weight: 600; color: var(--cf-nero); }
.lp-campi label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; }
.lp-campi select { width: 100%; font-size: 13px; padding: 6px 8px; }
.lp-piede { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.lp-azzera { color: var(--cf-arancio); font-weight: 700; font-size: 13px; text-decoration: none; }
.lp-azzera:hover { text-decoration: underline; }
.lp-applica { margin-left: auto; border: 0; background: var(--cf-arancio); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.lp-piede small { color: var(--cf-nero); font-size: 12px; }

/* pagine generali Segnalazioni e Lavorazioni: una barra sola, arancione, larga quanto i box */
.barra-grigia.arancio { background: var(--cf-arancio); margin: 0; padding: 0 18px; height: 52px; z-index: 2; box-shadow: 0 8px 16px -6px rgba(20, 23, 28, .50); }
.barra-grigia.arancio .bg-nuovo { border-color: var(--cf-nero-scuro); }
.barra-grigia.arancio .bg-nuovo:hover { background: var(--cf-nero-scuro); }
.barra-grigia.arancio .bg-sep { background: rgba(255, 255, 255, .7); }
.barra-grigia.arancio .pill-nav a, .barra-grigia.arancio .bg-extra { border-color: rgba(255, 255, 255, .75); }
.barra-grigia.arancio .switch-vista { background: rgba(28, 35, 42, .22); }

/* sotto i 760px: barre non più fisse, la grigia rientra di meno */
@media (max-width: 760px) {
  .ic-fissa, .ic-fissa.compatta { position: static; }
  .barra-grigia, .barra-grigia.arancio { margin: 0 8px; padding: 7px 10px 8px; height: auto; flex-wrap: wrap; row-gap: 7px; }
  .barra-grigia.arancio { margin: 0; }
  .barra-grigia .bg-sep { display: none; }
  .barra-grigia .bg-filtri { order: 5; flex: 1 0 100%; }
  .bg-nuovo { padding: 0 12px; }
  .barra-grigia .switch-vista button { padding: 0 8px; font-size: 0; gap: 0; }
  .barra-grigia .switch-vista button svg { width: 14px; height: 14px; }
  .bg-extra { padding: 0 10px; }
}

/* legende fuori dai vecchi riquadri filtri */

/* titoli di colonna ordinabili */
.tabella th.ord a, .tabella th.ord button { all: unset; cursor: pointer; white-space: nowrap; color: inherit; }
.tabella th.ord .freccia { margin-left: 4px; color: #C2C8D0; font-weight: 700; }
.tabella th.ord.attiva, .tabella th.ord.attiva a, .tabella th.ord.attiva button, .tabella th.ord.attiva .freccia { color: var(--cf-arancio) !important; }
.tabella th.ord a:focus-visible, .tabella th.ord button:focus-visible { outline: 2px solid var(--cf-arancio); outline-offset: 2px; border-radius: 4px; }
.bs-menu a:focus-visible, .barra-grigia a:focus-visible, .barra-grigia button:focus-visible, .barra-grigia summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 3.7 — piede: legenda dei pallini a sinistra, firma e versione a destra (§10) */
.piede { align-items: flex-end; }
.piede-legenda { background: #fff; color: var(--cf-nero); border-radius: 999px; padding: 7px 16px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; box-shadow: var(--ombra-1); max-width: 100%; }
.piede-legenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.piede-legenda i, .piede-legenda .pallino { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin: 0; flex: none; }
.piede-destra { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.piede-versione { font-size: 11.5px; font-weight: 500; color: var(--cf-nero-scuro); padding-right: 14px; background: none; box-shadow: none; text-align: right; }
@media (max-width: 1100px) { .piede-legenda { border-radius: 14px; } }
@media (max-width: 760px) { .piede { flex-direction: column; align-items: stretch; } .piede-destra { align-items: flex-end; } }

/* 3.7 — barre dello stabile che si accorciano scorrendo (§11) */
#ic-fissa .barra-grigia { transition: transform .15s ease, opacity .15s ease; }
#ic-fissa .barra-stabile { transition: min-height .15s ease, padding .15s ease; }
#ic-fissa.scorre .barra-stabile { min-height: 44px; padding: 0 14px; flex-wrap: nowrap; row-gap: 0; }
#ic-fissa.scorre .bs-nome { display: none; }
#ic-fissa.scorre .bs-menu { margin-left: 0; flex: 1 1 100%; justify-content: space-between; flex-wrap: nowrap; overflow-x: auto; }
#ic-fissa.scorre .bs-menu a { height: 32px; }
#ic-fissa.scorre .bs-menu a.attiva { margin: 0; }
#ic-fissa.scorre .barra-grigia { transform: translateY(-100%); opacity: 0; visibility: hidden; height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #ic-fissa .barra-grigia, #ic-fissa .barra-stabile { transition: none; } }
html { scroll-padding-top: calc(var(--barra-top, 72px) + var(--barre-h, 0px) + 12px); }

/* 3.7 — «Nuova…» con la scritta nera nella barra arancione unica (§12) */
.barra-grigia.arancio .bg-nuovo { border-color: var(--cf-nero-scuro); color: var(--cf-nero-scuro); background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.barra-grigia.arancio .bg-nuovo:hover { background: var(--cf-nero-scuro); color: #fff; }

/* 3.7 — schede di dettaglio: barra grigia con «‹ Sezione», numero e titolo, stato, pulsanti */
.barra-grigia.scheda { height: auto; min-height: 46px; padding: 7px 14px; flex-wrap: wrap; row-gap: 7px; }
.bg-indietro { flex: none; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; color: var(--cf-nero); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; text-decoration: none; white-space: nowrap; }
.bg-indietro:hover { color: var(--cf-arancio); text-decoration: none; }
.bg-titolo { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; margin-left: 8px; }
.bg-titolo small { font-size: 13px; color: rgba(255, 255, 255, .8); font-weight: 500; flex: none; }
.bg-titolo b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bg-titolo .badge { flex: none; }
.barra-grigia.scheda .bg-dx { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.barra-grigia.scheda .bg-dx form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.barra-grigia.scheda .bg-dx .btn { height: 30px; padding: 0 13px; border-radius: 999px; background: transparent; border: 1px solid rgba(255, 255, 255, .45); color: #fff !important; font-size: 12.5px; font-weight: 500; box-shadow: none; }
.barra-grigia.scheda .bg-dx .btn:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.barra-grigia.scheda .bg-dx .btn-primario { background: var(--cf-arancio); border-color: var(--cf-arancio); font-weight: 700; }
.barra-grigia.scheda .bg-dx .btn-primario:hover { background: var(--cf-arancio-scuro, #C94F0C); border-color: var(--cf-arancio-scuro, #C94F0C); }
.barra-grigia.scheda .bg-dx .btn svg { stroke: currentColor; }

/* 3.7 — pagina Email a tre colonne */
.bg-azioni { display: flex; align-items: center; gap: 8px; }
.barra-grigia.arancio .bg-azione { height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .75); background: transparent; color: #fff; font: inherit;
  font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.barra-grigia.arancio .bg-azione:hover { background: rgba(255, 255, 255, .16); }
.barra-grigia.arancio .bg-azione[disabled] { opacity: .45; pointer-events: none; }
.barra-grigia.arancio .bg-azione[hidden] { display: none; }
.barra-grigia.arancio .bg-azione.piena svg { fill: #FFD84D; stroke: #FFD84D; }
body[data-pagina="email"] .contenuto { height: calc(100dvh - var(--barra-top, 72px)); display: flex; flex-direction: column; padding-bottom: 16px; overflow: clip; min-height: 0; flex: none; }
body[data-pagina="email"] .contenuto > .banner { flex: none; }
body[data-pagina="email"] .piede { display: none; }
.posta { display: flex; gap: 12px; min-height: 0; flex: 1; container: posta / inline-size; }
.posta > .col { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(41, 50, 59, .12); min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* cartelle */
.posta-cartelle { flex: 0 0 222px; padding: 4px 10px 12px; font-size: 13px; overflow-y: auto !important; }
.pc-tit { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: #8A94A0; margin: 12px 8px 5px; text-transform: uppercase; }
.posta-cartelle a { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 9px; border-radius: 9px; font-weight: 500; color: var(--cf-nero); text-decoration: none; flex: none; }
.posta-cartelle a:hover { background: #F3F4F6; text-decoration: none; }
.posta-cartelle a svg { color: #8A94A0; flex: none; }
.posta-cartelle a .lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posta-cartelle a .n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--cf-grigio-700); }
.posta-cartelle a .da { margin-left: auto; background: var(--cf-arancio); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; }
.posta-cartelle a .da + .n { margin-left: 7px; }
.posta-cartelle a.attiva { background: var(--cf-arancio-chiaro); color: var(--cf-arancio); font-weight: 700; }
.posta-cartelle a.attiva .n, .posta-cartelle a.attiva svg { color: var(--cf-arancio); }
.posta-cartelle a:focus-visible, .em-voce:focus-visible, .em-el-testa a:focus-visible { outline: 2px solid var(--cf-arancio); outline-offset: -2px; }
/* elenco */
.em-elenco-col { flex: 0 0 392px; }
.em-el-testa { display: flex; align-items: center; gap: 18px; padding: 0 16px; height: 44px; border-bottom: 1px solid var(--cf-grigio-200); flex: none; }
.em-el-testa a { font-size: 13px; font-weight: 500; color: var(--cf-grigio-700); height: 44px; display: flex; align-items: center; gap: 4px; border-bottom: 2.5px solid transparent; text-decoration: none; white-space: nowrap; }
.em-el-testa a small { font-size: inherit; opacity: .8; }
.em-el-testa a.attiva { color: var(--cf-nero); font-weight: 700; border-bottom-color: var(--cf-arancio); }
.em-el-testa a:hover { text-decoration: none; color: var(--cf-nero); }
.em-el-testa .em-ordine { margin-left: auto; border-bottom: 0; }
.em-el-scorri { flex: 1; min-height: 0; overflow-y: auto; }
.em-elenco { display: block; max-height: none; overflow: visible; padding: 0; outline: 0; }
.em-gruppo { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--cf-grigio-700); padding: 7px 14px 5px; background: #F6F7F9; cursor: pointer; position: sticky; top: 0; z-index: 1; }
.em-gruppo[aria-expanded="false"] svg { transform: rotate(-90deg); }
.em-voce { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 10px; padding: 9px 12px 9px 11px; border-left: 3px solid transparent; border-bottom: 1px solid #EEF0F2; text-align: left; cursor: pointer; color: var(--cf-nero); background: #fff; }
.em-voce:hover { background: #FAFAFB; }
.em-voce.da-seguire { border-left-color: var(--cf-arancio); }
.em-voce.scelta { background: var(--cf-arancio-chiaro); }
.em-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.em-avatar.grande { width: 38px; height: 38px; font-size: 13px; }
.em-v-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.em-v-riga { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.em-voce .chi { font-size: 13.5px; font-weight: 500; flex: 1; min-width: 0; }
.em-voce .segni { flex: none; display: inline-flex; gap: 4px; color: var(--cf-grigio-700); }
.em-voce .ogg { font-size: 12.5px; flex: 1; min-width: 0; }
.em-voce .ora { font-size: 11.5px; color: var(--cf-grigio-700); flex: none; }
.em-voce .inizio { font-size: 12px; color: var(--cf-grigio-700); }
.em-voce .chi, .em-voce .ogg, .em-voce .inizio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-voce.da-seguire .chi { font-weight: 700; }
.em-voce.da-seguire .ogg, .em-voce.da-seguire .ora { color: var(--cf-arancio); font-weight: 700; }
.em-v-eti { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.em-eti { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 7px; white-space: nowrap; line-height: 1.6; }
.em-eti.stabile { background: #EEF0F3; color: var(--cf-grigio-700); font-weight: 500; }
.em-eti.seguire { background: var(--cf-arancio); color: #fff; }
.em-stella-on { color: #F59E0B; display: inline-flex; }
.em-stella-on svg { fill: #F59E0B; }
/* lettura */
.em-lettura { flex: 1; min-width: 0; position: relative; }
.em-anteprima { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; }
.em-anteprima[hidden] { display: none; }
.em-torna { display: none; }
.em-le-vuoto { margin: auto; text-align: center; color: var(--cf-grigio-700); }
.em-le-testa { padding: 16px 22px 12px; border-bottom: 1px solid var(--cf-grigio-200); flex: none; display: flex; flex-direction: column; gap: 10px; }
.em-le-testa h2 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; word-break: break-word; }
.em-le-chi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.em-le-chi-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.em-le-chi-testo b { font-size: 14.5px; }
.em-le-chi-testo small, .em-le-quando small { font-size: 12.5px; color: var(--cf-grigio-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-le-quando { flex: none; text-align: right; font-size: 13px; display: flex; flex-direction: column; }
.em-le-rif { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.em-le-rif > a, .em-le-rif > span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cf-grigio-200); font-size: 12px; font-weight: 500; color: var(--cf-nero); text-decoration: none; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.em-le-rif > a svg, .em-le-rif > span svg { color: var(--cf-arancio); flex: none; }
.em-le-rif > a:hover { border-color: var(--cf-arancio); text-decoration: none; }
.em-le-corpo { padding: 18px 22px; font-size: 14px; line-height: 1.6; flex: 1; min-height: 0; overflow-y: auto; }
.em-le-corpo > .corpo { white-space: pre-wrap; word-break: break-word; }
.em-originale { margin-top: 10px; }
.em-allegati .allegati-tag { margin-top: 16px; gap: 10px; }
.em-allegati .allegato-tag { border-radius: 10px; padding: 7px 12px 7px 9px; font-size: 12.5px; font-weight: 500; border-color: var(--cf-grigio-200); }
.em-allegati .allegato-tag svg { color: var(--cf-arancio); }
.em-lettura .em-assegna { margin-top: 18px; background: var(--cf-arancio-chiaro); border: 1.5px solid var(--cf-arancio); border-top-style: solid; border-radius: 12px; padding: 13px 15px; font-size: 13px; gap: 10px; }
.em-as-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.em-as-tit svg { color: var(--cf-arancio); }
.em-crea summary, .em-link { color: var(--cf-arancio); font-weight: 700; font-size: 13px; cursor: pointer; }
.em-crea summary { list-style: none; }
.em-crea summary::-webkit-details-marker { display: none; }
.em-crea[open] summary { margin-bottom: 6px; }
.em-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; }
.em-link:hover, .em-crea summary:hover { text-decoration: underline; }
.em-ignora { margin: 0; }
.em-ns { margin-top: 16px; }
.em-le-rispondi { margin: 0 22px 18px; border: 1.5px solid var(--cf-grigio-200); border-radius: 14px; padding: 8px 10px 8px 16px; display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--cf-grigio-400); flex: none; }
.em-le-rispondi > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.em-le-rispondi .btn { border-radius: 999px; }
/* finestra stretta: sotto ~1200px di contenuto le cartelle restano in colonna a sole icone (3.7.1); sotto ~800px elenco o lettura, uno alla volta */
/* 3.7.1: con poco spazio la colonna delle cartelle non sparisce, diventa a sole icone */
.posta-cartelle a .ini { display: none; }
@container posta (max-width: 1200px) {
  .posta-cartelle { flex: 0 0 56px; padding: 4px 6px 10px; align-items: stretch; }
  .posta-cartelle a { justify-content: center; padding: 0; min-height: 38px; position: relative; gap: 0; }
  .posta-cartelle a .lab, .posta-cartelle a .n { display: none; }
  .posta-cartelle a svg { width: 19px; height: 19px; }
  .posta-cartelle a .da { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
  .posta-cartelle a.con-ini svg { display: none; }
  .posta-cartelle a .ini { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #EEF0F3; color: var(--cf-grigio-700); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
  .posta-cartelle a.attiva .ini { background: var(--cf-arancio); color: #fff; }
  .pc-tit { font-size: 0; height: 1px; background: #E5E7EB; margin: 8px 6px; letter-spacing: 0; }
  .em-el-testa { gap: 10px; padding: 0 10px; }
  .em-el-testa a { font-size: 12.5px; }
  .em-el-testa .em-ordine { font-size: 0; gap: 0; }
  .em-elenco-col { flex-basis: 360px; }
}
@container posta (max-width: 800px) {
  .em-elenco-col { flex: 1 1 auto; min-width: 0; }
  .em-lettura { display: none !important; }
  .posta.leggendo .em-elenco-col { display: none !important; }
  .posta.leggendo .em-lettura { display: flex !important; flex: 1 1 auto; }
  .em-torna { display: inline-flex; align-items: center; gap: 4px; margin: 12px 22px 0; background: none; border: 0; color: var(--cf-arancio); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; align-self: flex-start; }
  .em-le-quando { display: none; }
}
@media (max-width: 760px) {
  body[data-pagina="email"] .barra-grigia.arancio .bg-azione span { display: none; }
  body[data-pagina="email"] .contenuto { height: auto; min-height: calc(100dvh - var(--barra-top, 72px)); }
  .posta { height: calc(100dvh - var(--barra-top, 72px) - 140px); flex: none; }
}
/* il pulsante del tutorial (fisso in basso a destra) non deve coprire «Rispondi» */
body[data-pagina="email"] .em-le-rispondi { margin-right: 104px; }
@media (max-width: 760px) { body[data-pagina="email"] .em-le-rispondi { margin-right: 84px; } }

/* 3.7.2 — barra laterale: «Riduci a icone» sotto il logo; ridotta = stretta, sole icone, logo con la sola volpe */
.sidebar .logo .logo-volpe { display: none; }
.nav-riduci { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 12px); margin: 0 6px 4px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: rgba(255, 255, 255, .78); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.nav-riduci:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .4); }
.nav-riduci:focus-visible { outline: 2px solid var(--cf-arancio); outline-offset: 2px; }
.nav-riduci .nr-riduci { display: inline-flex; align-items: center; gap: 6px; }
.nav-riduci .nr-espandi { display: none; }
@media (max-width: 900px) { .nav-riduci { display: none; } }
@media (min-width: 901px) {
  html[data-menu="ridotto"] { --sidebar-w: 78px; }
  html[data-menu="ridotto"] .sidebar { padding: 0 8px 16px; overflow-x: hidden; }
  html[data-menu="ridotto"] .sidebar .logo { margin: 14px 2px 10px; padding: 4px; display: grid; place-items: center; }
  html[data-menu="ridotto"] .sidebar .logo .logo-pieno { display: none; }
  html[data-menu="ridotto"] .sidebar .logo .logo-volpe { display: block; width: 46px; height: 46px; }
  html[data-menu="ridotto"] .nav-riduci { width: 40px; margin: 0 auto 4px; padding: 0; }
  html[data-menu="ridotto"] .nav-riduci .nr-riduci { display: none; }
  html[data-menu="ridotto"] .nav-riduci .nr-espandi { display: inline-flex; }
  html[data-menu="ridotto"] .sidebar .gruppo { font-size: 0; height: 1px; padding: 0; margin: 12px 10px; background: rgba(255, 255, 255, .16); }
  html[data-menu="ridotto"] .sidebar nav a { justify-content: center; padding: 11px 0; position: relative; gap: 0; }
  html[data-menu="ridotto"] .sidebar nav a > span:not(.conta) { display: none; }
  html[data-menu="ridotto"] .sidebar nav a .conta { position: absolute; top: 3px; right: 6px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; line-height: 16px; }
  html[data-menu="ridotto"] .sidebar .nav-riga { justify-content: center; }
  html[data-menu="ridotto"] .sidebar .nav-riga a { flex: 1; }
  html[data-menu="ridotto"] .sidebar .nav-espandi { display: none !important; }
  /* 4.0.5: Stabili aperto → sotto, le icone degli stabili con le iniziali */
  html[data-menu="ridotto"] .sidebar .nav-sotto { display: none; margin: 2px 0 6px; padding: 0; border-left: 0; max-height: none; overflow: visible; }
  html[data-menu="ridotto"] .sidebar .nav-gruppo.aperto .nav-sotto { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  html[data-menu="ridotto"] .sidebar nav .nav-sotto a { padding: 4px 0; width: 100%; justify-content: center; }
  html[data-menu="ridotto"] .sidebar nav .nav-sotto a > span.nav-ini { display: grid; }
  html[data-menu="ridotto"] .sidebar nav a.dentro .ico { color: var(--cf-arancio); }
}

/* 3.7.3 — Documenti: colonna «Comprendi con IA», riassunto, testo trovato */
.doc-ia-th small { display: block; font-size: 10px; font-weight: 500; opacity: .85; text-transform: none; letter-spacing: 0; }
.doc-ia { min-width: 150px; }
.doc-ia-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.doc-ia-switch { flex: none; cursor: pointer; }
.doc-ia-switch .tb-switch-traccia { background: #CBD1D8; }
.doc-ia-switch input:checked + .tb-switch-traccia { background: var(--cf-arancio); }
.doc-ia-switch input:disabled + .tb-switch-traccia { opacity: .4; cursor: not-allowed; }
.doc-ia-info { font-size: 11.5px; line-height: 1.35; color: var(--cf-nero); }
.doc-ia-no { color: #B42318; font-weight: 600; }
.doc-ia-attesa { display: none; font-size: 11.5px; color: var(--cf-arancio); font-weight: 700; }
.doc-ia-form.in-corso .doc-ia-info { display: none; }
.doc-ia-form.in-corso .doc-ia-attesa { display: inline; }
.doc-riassunto { margin-top: 6px; font-size: 12.5px; }
.doc-riassunto summary { cursor: pointer; color: var(--cf-arancio); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.doc-riassunto p { margin: 6px 0 0; padding: 8px 10px; background: var(--cf-arancio-chiaro); border-radius: 8px; color: var(--cf-nero); max-width: 520px; }
.doc-trovato { display: block; margin-top: 4px; font-size: 12px; color: var(--cf-nero); background: #FFF6D6; border-radius: 6px; padding: 3px 7px; max-width: 520px; }

/* 4.0 — logo MarcoRoby.it chiaro nel piede, direttamente sullo sfondo (niente pillola bianca) */
.piede-destra .piede-firma { background: none; box-shadow: none; padding: 0; border-radius: 0; color: var(--cf-nero-scuro); font-size: 12px; font-weight: 500; gap: 12px; display: inline-flex; align-items: center; }
.piede-firma img { height: 46px; width: auto; }
@media (max-width: 760px) { .piede-firma img { height: 38px; } }

/* 4.0 — Dashboard: logo CondoFox e ricerca al centro */
.dash-logo { display: flex; justify-content: center; margin: 20px 0 40px; }
.dash-logo img { height: 74px; width: auto; max-width: 100%; display: block; object-fit: contain; }
.dash-cerca-zona { display: flex; justify-content: center; margin: 38px 0; position: relative; z-index: 5; }
.tb-cerca.grande { flex: none; width: min(820px, 100%); max-width: none; min-width: 0; height: 56px; margin: 0; border: 2px solid var(--cf-arancio); border-radius: 999px; background: #fff; box-shadow: 0 10px 26px -10px rgba(20, 23, 28, .45); overflow: visible; }
.tb-cerca.grande select { font-size: 15px; font-weight: 700; padding: 0 34px 0 24px; height: 100%; border-radius: 999px 0 0 999px; }
.tb-cerca.grande .tb-cerca-campo .ico { width: 20px; height: 20px; left: 18px; color: var(--cf-arancio); }
.tb-cerca.grande .tb-cerca-campo input[type=search] { font-size: 16px; height: 100%; padding-left: 50px; }
.tb-cerca.grande .tb-powered { font-size: 11.5px; padding: 0 20px; border-radius: 0 999px 999px 0; display: flex; align-items: center; }
.tb-cerca.grande .tb-cerca-pannello { top: calc(100% + 10px); }
@media (max-width: 760px) { .tb-cerca.grande { height: 50px; } .tb-cerca.grande select { max-width: 110px; padding: 0 22px 0 14px; } .tb-cerca.grande .tb-powered { display: none; } .dash-logo img { height: 56px; } .dash-logo { margin: 8px 0 26px; } }

/* 4.0 — Documenti: «Apri su Drive» sulla riga dei filtri, in fondo a destra */
.sezioni-doc { align-items: center; }
.sezioni-doc a.doc-drive { margin-left: auto; background: var(--cf-arancio); border-color: var(--cf-arancio); color: #fff; font-weight: 700; gap: 6px; }
.sezioni-doc a.doc-drive:hover { background: var(--cf-arancio-scuro, #C94F0C); border-color: var(--cf-arancio-scuro, #C94F0C); color: #fff; text-decoration: none; }

/* 4.0 — barra arancione dello stabile: nome e indirizzo più grandi, un po' d'aria sopra e sotto */
.barra-stabile { min-height: 66px; padding-top: 9px; padding-bottom: 9px; }
.bs-nome { max-width: 360px; }
.bs-nome b { font-size: 22px; }
.bs-nome > span { font-size: 14px; margin-top: 3px; }
@container barre (max-width: 1420px) {
  .bs-nome { max-width: none; }
  .barra-stabile { padding: 11px 18px 9px; row-gap: 8px; }
  .bs-nome b { font-size: 19px; }
  .bs-nome > span { font-size: 14px; margin-top: 0; }
}

/* 4.0.1 — header della Dashboard: a sinistra saluto e cronologia, a destra Azioni veloci, utente ed Esci; in mezzo vuoto */
body[data-pagina="index"] .topbar .tb-switch { margin-left: auto; }

/* 4.0.1 — barra dello stabile: nome sempre per intero (se non ci sta, il menu va sotto) e spazio doppio sopra e sotto */
.barra-stabile { flex-wrap: wrap; padding-top: 24px; padding-bottom: 14px; row-gap: 14px; }
.bs-nome { max-width: none; }
.bs-nome b { white-space: normal; }
.bs-nome .bs-titolo { overflow: visible; text-overflow: clip; white-space: normal; }
@container barre (max-width: 1420px) {
  .barra-stabile { padding: 29px 18px 12px; row-gap: 16px; }
  .bs-nome b { max-width: none; }
}

/* 4.0.2 — sfondo: uguale in alto, solo la parte finale un po' più scura */
body { background: var(--sfondo) linear-gradient(180deg, var(--sfondo-su) 0%, var(--sfondo-giu) 72%, #6A7E9F 100%) fixed; }

/* 4.0.4 — piede: «Sviluppato da» e versione in bianco, logo MarcoRoby.it con ombra nera */
.piede-destra .piede-firma, .piede-versione { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.piede-firma img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75)); }

/* 4.0.5 — icone degli stabili nel menu ridotto (nel menu intero le iniziali non si vedono) */
.sidebar nav .nav-sotto a .nav-ini { display: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.sidebar nav .nav-sotto a:hover .nav-ini { background: rgba(255, 255, 255, .22); }
.sidebar nav .nav-sotto a.attiva .nav-ini { background: var(--cf-arancio); }
html[data-menu="ridotto"] .sidebar nav .nav-sotto a.attiva { background: transparent; box-shadow: none; }

/* 4.0.5 — «Nuova…» su fondo arancio al 30% in Segnalazioni e Lavorazioni generali e in Contenziosi */
body:is([data-pagina="segnalazioni"], [data-pagina="lavorazioni"], [data-pagina="contenziosi"], [data-pagina="email"]) .barra-grigia.arancio .bg-nuovo { background: #F9CFB8; color: var(--cf-nero-scuro); border-color: var(--cf-nero-scuro); }
body:is([data-pagina="segnalazioni"], [data-pagina="lavorazioni"], [data-pagina="contenziosi"], [data-pagina="email"]) .barra-grigia.arancio .bg-nuovo:hover { background: #fff; }

/* 4.0.7 — dentro lo stabile (barra grigia): «Nuovo…» su fondo arancio al 30% con testo nero, bordo arancione */
.barra-grigia:not(.arancio) .bg-nuovo { background: #F9CFB8; color: var(--cf-nero-scuro); border-color: var(--cf-arancio); }
.barra-grigia:not(.arancio) .bg-nuovo:hover { background: #fff; color: var(--cf-nero-scuro); }

/* 4.0.8 — Email: Inoltra e Cestino in fondo alla mail, accanto a Rispondi */
.em-le-rispondi .em-le-pulsante { border-radius: 999px; background: #fff; border: 1.5px solid var(--cf-grigio-200); color: var(--cf-nero); font-weight: 600; }
.em-le-rispondi .em-le-pulsante:hover { border-color: var(--cf-arancio); color: var(--cf-arancio); }

/* 4.1 — anteprima dei risultati nel popup della lente */
.lp-anteprima { margin-top: 8px; border: 1px solid var(--cf-grigio-200); border-radius: 12px; overflow: hidden; max-height: 330px; overflow-y: auto; }
.lp-voce { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-bottom: 1px solid #EEF0F2; color: var(--cf-nero); text-decoration: none; cursor: pointer; }
.lp-voce:hover, .lp-voce.scelta { background: var(--cf-arancio-chiaro); text-decoration: none; }
.lp-voce b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-voce small { font-size: 12px; color: var(--cf-grigio-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-voce mark { background: #FFE08A; color: inherit; border-radius: 3px; padding: 0 1px; }
.lp-ant-nota { padding: 7px 12px; font-size: 12px; color: var(--cf-grigio-700); background: #F6F7F9; }

/* 4.1 — Impostazioni → Email: firma HTML per tutti o per stabile */
.firma-stabili { margin-bottom: 10px; }
.firma-stabili .firma-propria { color: var(--cf-arancio); font-size: 10px; vertical-align: 1px; }
.firma-spiega { margin: 0 0 12px; font-size: 13.5px; color: var(--cf-nero); }
.firma-barra { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border: 1px solid var(--bordo-forte); border-bottom: 0; border-radius: 12px 12px 0 0; background: #F6F7F9; }
.firma-barra button, .firma-barra select { height: 30px; min-width: 32px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; color: var(--cf-nero); cursor: pointer; width: auto; }
.firma-barra button:hover, .firma-barra button.attivo { border-color: var(--cf-arancio); color: var(--cf-arancio); }
.firma-sep { width: 1px; height: 20px; background: var(--bordo-forte); margin: 0 4px; }
.firma-colore { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px; border-radius: 8px; background: #fff; font-weight: 700; cursor: pointer; margin: 0; }
.firma-colore input { width: 26px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.firma-editor { min-height: 150px; padding: 14px 16px; border: 1px solid var(--bordo-forte); border-radius: 0 0 12px 12px; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; outline: none; }
.firma-editor:focus { border-color: var(--cf-arancio); box-shadow: 0 0 0 3px rgba(234, 96, 18, .15); }
.firma-codice { width: 100%; border-radius: 0 0 12px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.firma-anteprima { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.firma-anteprima h3 { margin: 0 0 8px; font-size: 14px; }
.firma-anteprima-corpo { padding: 14px 16px; border-radius: 12px; background: #F6F7F9; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #1C232A; }

/* 4.2 — Azioni veloci: fino a 10, tutte su una riga; icona come prima, scritta più piccola anche su due righe */
.azioni-veloci { flex-wrap: nowrap; gap: 8px; overflow-x: auto; }
.azioni-veloci .av-chip { flex: 0 1 auto; min-width: 0; gap: 8px; padding: 5px 12px 5px 5px; font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: normal; position: relative; }
.azioni-veloci .av-testo { max-width: 92px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.azioni-veloci .av-conta { position: absolute; top: -5px; right: -4px; font-size: 10.5px; padding: 0 6px; line-height: 17px; box-shadow: 0 0 0 2px #fff; }
.azioni-veloci .av-config { flex: none; }
.av-lista li.scelta { border-color: var(--cf-arancio) !important; background: var(--cf-arancio-chiaro); }
.av-lista li:has(input:disabled) { opacity: .55; }
.av-lista li:nth-child(8) { border-bottom: 1px solid transparent; }
.av-scelte-num { font-weight: 700; font-size: 13px; color: var(--cf-nero); }
.av-scelte-num.pieno { color: var(--cf-arancio); }

/* 4.1 — pagine pubbliche privacy / termini (richieste da Google) */
.legale-box { width: min(760px, 100%); line-height: 1.55; }
.legale-box h1 { font-size: 1.35rem; margin-bottom: 4px; }
.legale-box > .small { text-align: center; margin-bottom: 18px; }
.legale-box h2 { font-size: 1rem; margin: 20px 0 6px; }
.legale-box p, .legale-box li { font-size: .92rem; }
.legale-box ul { padding-left: 20px; margin: 6px 0; }
.legale-box li { margin-bottom: 4px; }
.legale-link { text-align: center; font-size: .8rem; color: var(--cf-grigio-400); margin-top: 18px; }
.legale-link a { color: inherit; }


/* 4.1 — sincronizzazione Gmail: non lette in grassetto, etichette di Gmail, scelta etichette, avvisi */
.em-voce.non-letta .chi, .em-voce.non-letta .ogg { font-weight: 700; color: var(--cf-nero-scuro, #111); }
.em-voce.non-letta::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--cf-arancio); }
.em-voce { position: relative; }
.em-eti.gmail { background: #EDE7F6; color: #4527A0; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.eti-scelta { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin-bottom: 10px; }
.eti-scelta label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.em-conflitti ul { margin: 6px 0 8px 18px; font-size: .88rem; }