/* 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;
  --ombra: 0 1px 2px rgba(41, 50, 59, .06), 0 1px 3px rgba(41, 50, 59, .04);
  --sidebar: 248px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 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-grigio-200); 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: .83rem; font-weight: 600; color: var(--cf-grigio-700); margin-bottom: 4px; }
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: 1px solid var(--cf-grigio-200); 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: .75rem; }
.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-grigio-200); 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: 960px) {
  .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-grigio-200);
  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-azioni-top { display: grid; grid-template-columns: 240px 1fr; gap: 16px; margin-bottom: 20px; }
.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-crea:hover { background: var(--cf-nero-scuro); color: #fff; text-decoration: none; }
.doc-crea .piu { width: 36px; height: 36px; border-radius: 50%; background: var(--cf-arancio); display: grid; place-items: center; }
.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-drop:hover, .doc-drop.sopra { border-color: var(--cf-arancio); background: var(--cf-arancio-chiaro); }
.doc-drop strong { color: var(--cf-nero); }
.doc-drop .ico { color: var(--cf-arancio); }
.doc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.doc-scheda {
  background: #fff; border: 1px solid var(--cf-grigio-200); 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; }
}