@import url('fonts.css');

:root {
  --viola: #5A1196;
  --viola-scuro: #3E0B6B;
  --viola-chiaro: #F1EAFB;
  --viola-medio: #8B5CC9;
  --rosa: #D6337F;
  --inchiostro: #1C0B3B;
  --testo: #3B3350;
  --grigio: #776E8C;
  --bordo: #E6E0F0;
  --sfondo: #F7F5FC;
  --bianco: #FFFFFF;
  --verde: #15803D;
  --verde-chiaro: #DCFCE7;
  --rosso: #C2263B;
  --rosso-chiaro: #FDE4E8;
  --ambra: #B45309;
  --ambra-chiaro: #FEF3C7;
  --blu: #1D4ED8;
  --blu-chiaro: #DBEAFE;
  --raggio: 14px;
  --ombra: 0 1px 2px rgba(28, 11, 59, .04), 0 6px 24px rgba(28, 11, 59, .06);
  --sidebar: 260px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  color: var(--testo);
  background: var(--sfondo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--viola); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--inchiostro); margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 30px; font-weight: 600; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
small, .muted { color: var(--grigio); }
hr { border: 0; border-top: 1px solid var(--bordo); margin: 20px 0; }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar); flex-shrink: 0; background: var(--bianco); border-right: 1px solid var(--bordo);
  position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 30; padding: 18px 14px 30px;
  transition: transform .2s ease;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--inchiostro); }
.brand:hover { text-decoration: none; }
.brand img, .brand svg { width: 38px; height: 38px; object-fit: contain; }
.brand .nome { font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.brand .nome b { color: var(--viola); font-weight: 700; }
.brand .sotto { display: block; font-size: 11px; color: var(--grigio); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; margin-top: -2px; }
.nav-gruppo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--grigio); padding: 16px 12px 6px; font-weight: 500; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--testo);
  font-weight: 500; font-size: 14.5px;
}
.nav a svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; }
.nav a:hover { background: var(--viola-chiaro); text-decoration: none; color: var(--viola); }
.nav a.attivo { background: var(--viola); color: #fff; }
.nav a .conta { margin-left: auto; background: var(--rosa); color: #fff; font-size: 11px; border-radius: 99px; padding: 1px 7px; }

.principale { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 66px; background: var(--bianco); border-bottom: 1px solid var(--bordo); display: flex; align-items: center;
  gap: 14px; padding: 0 28px; position: sticky; top: 0; z-index: 20;
}
.topbar form.ricerca { flex: 1; max-width: 520px; position: relative; }
.topbar form.ricerca input { width: 100%; padding: 10px 14px 10px 40px; border-radius: 12px; border: 1px solid var(--bordo); background: var(--sfondo); font: inherit; }
.topbar form.ricerca svg { position: absolute; left: 13px; top: 11px; width: 18px; height: 18px; stroke: var(--grigio); }
.topbar .destra { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13px; }
.menu-utente { position: relative; }
.menu-utente > button { display: flex; align-items: center; gap: 9px; background: none; border: 0; font: inherit; cursor: pointer; color: var(--inchiostro); font-weight: 500; padding: 4px 6px; border-radius: 10px; }
.menu-utente > button:hover { background: var(--sfondo); }
.menu-utente .tendina { display: none; position: absolute; right: 0; top: 46px; background: #fff; border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra); min-width: 210px; padding: 6px; }
.menu-utente.aperto .tendina { display: block; }
.tendina a, .tendina button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--testo); background: none; border: 0; font: inherit; cursor: pointer; }
.tendina a:hover, .tendina button:hover { background: var(--viola-chiaro); text-decoration: none; }
.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.hamburger svg { width: 24px; height: 24px; stroke: var(--inchiostro); }

.contenuto { padding: 28px 32px 60px; max-width: 1500px; width: 100%; }
.intestazione { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.intestazione h1 { margin: 0; }
.intestazione .sottotitolo { color: var(--grigio); margin-top: 4px; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Card & griglie ---------- */
.card { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; box-shadow: var(--ombra); }
.card + .card { margin-top: 18px; }
.griglia > .card + .card, .griglia > form.card + .card, .griglia > .card + form.card { margin-top: 0; }
.card-titolo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.card-titolo h2, .card-titolo h3 { margin: 0; }
.griglia { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mt { margin-top: 18px; }

.kpi { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 18px 20px; box-shadow: var(--ombra); }
.kpi .etichetta { color: var(--grigio); font-size: 13px; font-weight: 500; }
.kpi .valore { font-size: 25px; font-weight: 600; color: var(--inchiostro); margin-top: 4px; letter-spacing: -.02em; white-space: nowrap; }
.kpi .nota { font-size: 12.5px; color: var(--grigio); margin-top: 2px; }
.kpi.evidenza { background: linear-gradient(135deg, var(--viola) 0%, var(--viola-scuro) 100%); border: 0; }
.kpi.evidenza .etichetta, .kpi.evidenza .nota { color: rgba(255,255,255,.75); }
.kpi.evidenza .valore { color: #fff; }

.azioni-rapide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.azioni-rapide a { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; color: var(--inchiostro); font-weight: 500; }
.azioni-rapide a:hover { border-color: var(--viola); background: var(--viola-chiaro); text-decoration: none; }
.azioni-rapide svg { width: 18px; height: 18px; stroke: var(--viola); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--bordo);
  background: var(--bianco); color: var(--inchiostro); font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; border-color: var(--viola); color: var(--viola); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; }
.btn-primario { background: var(--viola); border-color: var(--viola); color: #fff; }
.btn-primario:hover { background: var(--viola-scuro); color: #fff; }
.btn-pericolo { color: var(--rosso); }
.btn-pericolo:hover { border-color: var(--rosso); color: var(--rosso); background: var(--rosso-chiaro); }
.btn-piccolo { padding: 5px 11px; font-size: 13px; }
.btn-link { background: none; border: 0; color: var(--viola); padding: 0; font: inherit; cursor: pointer; }
form.inline { display: inline; }

/* ---------- Tabelle ---------- */
.tabella-wrap { overflow-x: auto; margin: 0 -22px; }
table.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font-weight: 500; color: var(--grigio); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tabella td { padding: 11px 14px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella th:first-child, .tabella td:first-child { padding-left: 22px; }
.tabella th:last-child, .tabella td:last-child { padding-right: 22px; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: #FBF9FE; }
.tabella .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella tfoot td { font-weight: 600; border-top: 2px solid var(--bordo); color: var(--inchiostro); }
.tabella tr.cliccabile { cursor: pointer; }
.vuoto { text-align: center; color: var(--grigio); padding: 30px 10px !important; }
.pos { color: var(--verde); font-weight: 500; }
.neg { color: var(--rosso); font-weight: 500; }

/* ---------- Badge ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge-neutral { background: #F0EDF5; color: var(--testo); }
.badge-success { background: var(--verde-chiaro); color: var(--verde); }
.badge-danger { background: var(--rosso-chiaro); color: var(--rosso); }
.badge-warning { background: var(--ambra-chiaro); color: var(--ambra); }
.badge-info { background: var(--blu-chiaro); color: var(--blu); }
.badge-viola { background: var(--viola-chiaro); color: var(--viola); }

/* ---------- Form ---------- */
.form-griglia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo.col-full { grid-column: span 6; }
.campo.col-half { grid-column: span 3; }
.campo.col-third { grid-column: span 2; }
label { font-size: 13px; font-weight: 500; color: var(--inchiostro); }
label .obbl { color: var(--rosa); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local],
input[type=search], input[type=url], input[type=tel], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--bordo); border-radius: 10px; font: inherit; font-size: 14.5px;
  background: var(--bianco); color: var(--inchiostro);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--viola-medio); box-shadow: 0 0 0 3px var(--viola-chiaro); }
textarea { min-height: 90px; resize: vertical; }
input[type=color] { width: 50px; height: 38px; border: 1px solid var(--bordo); border-radius: 10px; padding: 3px; background: #fff; }
.check { display: flex; align-items: center; gap: 9px; padding-top: 22px; font-weight: 500; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--viola); }
.aiuto { font-size: 12px; color: var(--grigio); }
.form-azioni { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 22px; flex-wrap: wrap; }

.filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtri .campo { min-width: 150px; }
.filtri input[type=search] { min-width: 230px; }

/* ---------- Flash ---------- */
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.flash-success { background: var(--verde-chiaro); color: var(--verde); }
.flash-error { background: var(--rosso-chiaro); color: var(--rosso); }
.flash-info, .flash-message { background: var(--blu-chiaro); color: var(--blu); }
.avviso { background: var(--ambra-chiaro); color: var(--ambra); padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bordo); margin-bottom: 18px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--grigio); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--viola); text-decoration: none; }
.tabs a.attivo { color: var(--viola); border-bottom-color: var(--viola); }

/* ---------- Liste compatte ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--bordo); }
.lista li:last-child { border-bottom: 0; }
.lista .punto { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.lista .data { color: var(--grigio); font-size: 13px; min-width: 92px; }
.lista .dx { margin-left: auto; text-align: right; white-space: nowrap; }

.dati { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 14px; }
.dati dt { color: var(--grigio); }
.dati dd { margin: 0; color: var(--inchiostro); word-break: break-word; }

.barra { height: 8px; background: var(--viola-chiaro); border-radius: 99px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--viola); border-radius: 99px; }
.barra.oltre > span { background: var(--rosso); }

/* ---------- Righe documento ---------- */
table.righe td { padding: 6px 4px; vertical-align: top; }
table.righe input, table.righe select, table.righe textarea { padding: 7px 8px; font-size: 14px; }
table.righe textarea { min-height: 38px; height: 38px; }
table.righe .rimuovi { background: none; border: 0; color: var(--grigio); cursor: pointer; font-size: 20px; padding: 6px; }
table.righe .rimuovi:hover { color: var(--rosso); }
.totali { margin-left: auto; width: 320px; max-width: 100%; }
.totali div { display: flex; justify-content: space-between; padding: 6px 0; }
.totali .grande { font-size: 20px; font-weight: 600; color: var(--inchiostro); border-top: 2px solid var(--bordo); padding-top: 10px; margin-top: 4px; }

/* ---------- Piano editoriale ---------- */
.settimana { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; }
.giorno { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 12px; min-height: 260px; padding: 10px; }
.giorno.oggi { border-color: var(--viola); box-shadow: 0 0 0 2px var(--viola-chiaro); }
.giorno h4 { font-size: 13px; color: var(--grigio); font-weight: 500; margin-bottom: 8px; display: flex; justify-content: space-between; }
.post { border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--sfondo); border-left: 3px solid var(--rosa); font-size: 13px; }
.post .titolo { font-weight: 500; color: var(--inchiostro); }
.post.pubblicato { opacity: .6; border-left-color: var(--verde); }

/* ---------- Calendario ---------- */
#calendario { --fc-border-color: var(--bordo); --fc-today-bg-color: var(--viola-chiaro); --fc-button-bg-color: var(--viola); --fc-button-border-color: var(--viola); --fc-button-hover-bg-color: var(--viola-scuro); --fc-button-active-bg-color: var(--viola-scuro); --fc-button-active-border-color: var(--viola-scuro); font-size: 14px; }
#calendario .fc-toolbar-title { font-size: 20px; color: var(--inchiostro); text-transform: capitalize; }
#calendario .fc-button { border-radius: 99px; text-transform: capitalize; font-weight: 500; }
#calendario .fc-col-header-cell a, #calendario .fc-daygrid-day-number { color: var(--inchiostro); }
#calendario .fc-daygrid-dot-event { color: var(--testo); }
#calendario .completato { opacity: .5; text-decoration: line-through; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.legenda label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.legenda .pallino { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.popover { position: fixed; z-index: 100; background: #fff; border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra); padding: 14px 16px; max-width: 320px; display: none; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth .lato { background: linear-gradient(150deg, var(--viola) 0%, var(--viola-scuro) 70%, #2A0650 100%); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth .lato h1 { color: #fff; font-size: 46px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; max-width: 480px; }
.auth .lato p { color: rgba(255,255,255,.75); font-size: 17px; max-width: 420px; }
.auth .lato .cerchio { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); }
.auth .modulo { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth .modulo > div { width: 100%; max-width: 400px; }
.auth .campo { margin-bottom: 14px; }

/* ---------- Errore ---------- */
.errore { text-align: center; padding: 80px 20px; }
.errore .codice { font-size: 90px; font-weight: 700; color: var(--viola); letter-spacing: -.04em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g-2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--ombra); }
  body.menu-aperto .sidebar { transform: translateX(0); }
  .principale { margin-left: 0; }
  .hamburger { display: block; }
  .contenuto { padding: 20px 16px 50px; }
  .topbar { padding: 0 16px; }
  .g2 { grid-template-columns: minmax(0, 1fr); }
  .campo.col-half, .campo.col-third { grid-column: span 6; }
  .auth { grid-template-columns: 1fr; }
  .auth .lato { display: none; }
  .menu-utente .nome-utente { display: none; }
  .dati { grid-template-columns: 1fr; gap: 2px; }
  .dati dd { margin-bottom: 8px; }
  h1 { font-size: 24px; }
}
@media (max-width: 520px) {
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .azioni-rapide { grid-template-columns: 1fr; }
}

/* ---------- Pannello a widget ---------- */
.grid-stack { margin: 0 -9px; }
.grid-stack-item-content.widget {
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
  display: flex; flex-direction: column; overflow: hidden; inset: 9px !important;
}
.widget-head { padding: 16px 20px 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.widget-head h3 { margin: 0; font-size: 15.5px; }
.widget-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 16px; display: flex; flex-direction: column; }
.widget-body > .lista { margin-top: -4px; }
.widget-kpi .widget-body { padding: 0; overflow: hidden; }
.w-kpi { padding: 18px 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; }
.w-kpi .etichetta { color: var(--grigio); font-size: 13px; font-weight: 500; }
.w-kpi .valore { font-size: 26px; font-weight: 600; color: var(--inchiostro); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.w-kpi .nota { font-size: 12.5px; color: var(--grigio); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-kpi.evidenza { background: linear-gradient(135deg, var(--viola) 0%, var(--viola-scuro) 100%); }
.w-kpi.evidenza .etichetta, .w-kpi.evidenza .nota { color: rgba(255,255,255,.78); }
.w-kpi.evidenza .valore { color: #fff; }
.w-kpi.evidenza .pos { color: #9EF0B8; } .w-kpi.evidenza .neg { color: #FFB3C1; }
.widget-kpi:has(.evidenza) { border: 0; }
.w-link { position: absolute; inset: 0; }
.w-grafico { position: relative; flex: 1; min-height: 120px; }
.w-grafico canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.w-vuoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--grigio); font-size: 14px; }
.w-vuoto[hidden] { display: none; }
.w-sotto { font-size: 12.5px; color: var(--grigio); padding-top: 6px; }
.widget-body .azioni-rapide a { padding: 10px 12px; }

.widget-rimuovi { display: none; position: absolute; top: 8px; right: 8px; z-index: 5; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--bordo); background: #fff; color: var(--rosso); font-size: 18px; line-height: 1; cursor: pointer; }
.modo-modifica { display: none !important; }
body.pannello-modifica .modo-modifica { display: inline-flex !important; }
body.pannello-modifica div.modo-modifica { display: block !important; }
body.pannello-modifica .modo-normale { display: none !important; }
body.pannello-modifica .widget-rimuovi { display: block; }
body.pannello-modifica .grid-stack-item-content.widget { outline: 2px dashed var(--viola-medio); outline-offset: -2px; cursor: move; }
body.pannello-modifica .grid-stack-item-content.widget * { user-select: none; }
body.pannello-modifica .widget-body form, body.pannello-modifica .widget-body button:not(.widget-rimuovi) { pointer-events: none; }
.grid-stack-placeholder > .placeholder-content { background: var(--viola-chiaro) !important; border: 2px dashed var(--viola-medio); border-radius: var(--raggio); inset: 9px !important; }
.grid-stack > .grid-stack-item > .ui-resizable-se { width: 18px; height: 18px; right: 12px; bottom: 12px; opacity: .6; }

.modale { position: fixed; inset: 0; background: rgba(28, 11, 59, .45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modale[hidden] { display: none; }
.modale-box { width: 100%; max-width: 680px; max-height: 85vh; overflow-y: auto; }
.elenco-widget { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scelta-widget { text-align: left; border: 1px solid var(--bordo); background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; }
.scelta-widget:hover { border-color: var(--viola); background: var(--viola-chiaro); }
.scelta-widget b { color: var(--inchiostro); font-weight: 600; }
.scelta-widget small { color: var(--grigio); }
@media (max-width: 760px) { .elenco-widget { grid-template-columns: 1fr; } }

/* ---------- Menu compatto e presenze ---------- */
.hamburger { display: block; }
.sidebar, .principale { transition: width .2s ease, margin-left .2s ease, transform .2s ease; }
html.sidebar-compatta .sidebar { width: 76px; padding: 18px 10px 30px; overflow-x: hidden; }
html.sidebar-compatta .principale { margin-left: 76px; }
html.sidebar-compatta .brand { justify-content: center; padding: 4px 0 18px; }
html.sidebar-compatta .brand > span, html.sidebar-compatta .nav a > span { display: none; }
html.sidebar-compatta .nav a { justify-content: center; padding: 10px 0; }
html.sidebar-compatta .nav a svg { width: 20px; height: 20px; }
html.sidebar-compatta .nav-gruppo { font-size: 0; padding: 10px 0 6px; margin: 0 10px; border-top: 1px solid var(--bordo); }
.presenze > button { gap: 6px; }
.pill-presenza { display: inline-flex; align-items: center; gap: 6px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 99px; padding: 5px 11px; font-size: 13px; font-weight: 600; color: var(--inchiostro); }
.pallino-verde, .pallino-viola { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.pallino-viola { background: var(--viola); box-shadow: 0 0 0 3px var(--viola-chiaro); }
.testo-pill { font-weight: 400; color: var(--grigio); }
@media (max-width: 860px) {
  html.sidebar-compatta .sidebar { width: var(--sidebar); padding: 18px 14px 30px; }
  html.sidebar-compatta .principale { margin-left: 0; }
  html.sidebar-compatta .brand > span, html.sidebar-compatta .nav a > span { display: inline; }
  html.sidebar-compatta .nav a { justify-content: flex-start; padding: 9px 12px; }
  html.sidebar-compatta .nav-gruppo { font-size: 11px; border: 0; margin: 0; padding: 16px 12px 6px; }
  .testo-pill { display: none; }
}
.w-kpi .nota-valute { font-size: 11.5px; margin-top: 1px; }
.w-kpi.evidenza .nota-valute { color: rgba(255,255,255,.7); }
.ricerca-azienda { grid-column: span 6; background: var(--viola-chiaro); border-radius: 12px; padding: 12px 14px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 6px; }
.ricerca-azienda .riga { display: flex; gap: 8px; }
.ricerca-azienda .esito { font-size: 13px; }
.ricerca-azienda .esito:empty { display: none; }
.dropzone { border: 2px dashed var(--viola-medio); background: var(--viola-chiaro); border-radius: var(--raggio); padding: 18px 20px; text-align: center; color: var(--inchiostro); margin-bottom: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.dropzone small { color: var(--grigio); }
.dropzone .dz-icona { font-size: 26px; color: var(--viola); line-height: 1; }
.dropzone.lavoro { opacity: .7; pointer-events: none; }
.dropzone.lavoro .dz-icona { animation: pulsa 1s infinite alternate; }
@keyframes pulsa { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.dz-stato { font-weight: 500; margin-top: 6px; }
.dz-overlay { position: fixed; inset: 0; background: rgba(90, 17, 150, .82); z-index: 300; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 600; pointer-events: none; }
.dz-overlay[hidden] { display: none; }
.letto-auto { background: var(--blu-chiaro); color: var(--blu); padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; }
.mov-banca { border-bottom: 1px solid var(--bordo); padding: 12px 0; }
.mov-banca:last-child { border-bottom: 0; }
.mb-testa { display: flex; gap: 14px; align-items: flex-start; }
.mb-testa .data { color: var(--grigio); font-size: 13px; min-width: 86px; }
.mb-descr { flex: 1; min-width: 0; word-break: break-word; }
.mb-importo { font-weight: 600; white-space: nowrap; font-size: 15px; }
.mb-azioni { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0 0 100px; }
.mb-scelta { display: flex; gap: 6px; flex: 1 1 360px; }
.mb-scelta select, .mb-pn select { padding: 5px 8px; font-size: 13px; }
.mb-altre { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mb-pn { display: inline-flex; gap: 4px; }
.mb-pn select { width: auto; }
@media (max-width: 760px) { .mb-azioni { margin-left: 0; } .mb-testa { flex-wrap: wrap; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: #fff; z-index: 250; box-shadow: -10px 0 40px rgba(28,11,59,.15);
  transform: translateX(105%); transition: transform .22s ease; overflow-y: auto; padding: 26px 26px 30px; }
.drawer.aperto { transform: translateX(0); }
.drawer-sfondo { position: fixed; inset: 0; background: rgba(28,11,59,.25); z-index: 240; }
.drawer-sfondo[hidden] { display: none; }
.drawer-chiudi { position: absolute; top: 14px; right: 16px; border: 0; background: var(--sfondo); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; cursor: pointer; color: var(--testo); }
.anteprima-testa { margin-bottom: 16px; padding-right: 36px; }
.anteprima-testa h2 { margin-top: 10px; font-size: 21px; }
.drawer .dati { grid-template-columns: 110px 1fr; }
.anteprima-testo { white-space: pre-line; background: var(--sfondo); border-radius: 12px; padding: 12px 14px; margin-top: 16px; font-size: 14px; }
.anteprima-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* ---------- Impostazioni a sezioni ---------- */
.impostazioni { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.imp-menu { position: sticky; top: 86px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.imp-menu a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--testo); font-weight: 500; font-size: 14px; }
.imp-menu a svg { width: 18px; height: 18px; stroke: currentColor; flex-shrink: 0; }
.imp-menu a:hover { background: var(--viola-chiaro); color: var(--viola); text-decoration: none; }
.imp-menu a.attivo { background: var(--viola); color: #fff; }
.imp-contenuto > section > .card + .card { margin-top: 18px; }
.barra-salva { position: sticky; bottom: 0; z-index: 15; margin-top: 18px; background: rgba(247,245,252,.92); backdrop-filter: blur(6px); border-top: 1px solid var(--bordo); padding: 12px 0; display: flex; justify-content: flex-end; gap: 14px; align-items: center; }
.colore-campo { display: flex; gap: 6px; align-items: center; }
.colore-campo input[type=color] { flex: 0 0 44px; }
.colore-campo .hex { width: 96px; flex: 0 0 96px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; text-transform: uppercase; }
.layout-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.layout-controlli > .card + .card { margin-top: 18px; }
.layout-anteprima { position: sticky; top: 86px; }
.cornice-anteprima { position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid var(--bordo); border-radius: 8px; background: #fff; }
.cornice-anteprima iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; }
.modelli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modello { display: flex; gap: 10px; align-items: center; text-align: left; border: 2px solid var(--bordo); background: #fff; border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; font-size: 13px; color: var(--inchiostro); font-weight: 500; }
.modello:hover { border-color: var(--viola-medio); }
.modello.attivo { border-color: var(--viola); box-shadow: 0 0 0 3px var(--viola-chiaro); }
.m-anteprima { width: 46px; height: 62px; flex-shrink: 0; border: 1px solid var(--bordo); border-radius: 4px; position: relative; overflow: hidden; background: #fff; }
.m-anteprima i { position: absolute; left: 5px; right: 5px; display: block; }
.m-anteprima .m-fascia { left: 0; right: 0; top: 0; height: 10px; background: var(--c); }
.m-anteprima .m-linea { left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.m-anteprima .m-r1 { top: 17px; height: 3px; background: #CBD5E1; width: 20px; }
.m-anteprima .m-r2 { top: 24px; height: 6px; background: var(--b); }
.m-anteprima .m-box { top: 36px; height: 14px; border: 1px solid #CBD5E1; border-radius: 2px; }
.m-anteprima b { position: absolute; right: 4px; bottom: 2px; font-size: 10px; color: var(--c); }
@media (max-width: 1250px) { .layout-editor { grid-template-columns: minmax(0, 1fr); } .layout-anteprima { position: static; } }
@media (max-width: 900px) { .impostazioni { grid-template-columns: minmax(0, 1fr); } .imp-menu { position: static; flex-direction: row; overflow-x: auto; } .imp-menu a { white-space: nowrap; } }

/* ---------- Totali per valuta ---------- */
.schede-valuta { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 18px; }
.scheda-valuta .conv { font-size: 13px; color: var(--grigio); margin-top: 2px; }
.scheda-valuta .conv span { font-size: 11.5px; }
.sv-righe { margin-top: 12px; border-top: 1px solid var(--bordo); padding-top: 8px; display: grid; gap: 4px; }
.sv-righe > div { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.sv-righe > div span { color: var(--grigio); flex: 1; }
.sv-righe > div b { font-weight: 600; color: var(--inchiostro); white-space: nowrap; }
.sv-righe > div small { color: var(--grigio); white-space: nowrap; min-width: 0; }
.kpi-valute { justify-content: flex-start; padding-top: 16px; gap: 1px; }
.kpi-valute .etichetta { margin-bottom: 4px; }
.kv-riga { display: flex; flex-direction: column; line-height: 1.2; margin-top: 3px; }
.kv-valore { font-size: 21px; font-weight: 600; color: var(--inchiostro); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv-conv { font-size: 12px; color: var(--grigio); }
.w-kpi.evidenza .kv-valore { color: #fff; }
.w-kpi.evidenza .kv-conv { color: rgba(255,255,255,.75); }
.kpi-valute .nota { margin-top: auto; padding-top: 4px; }

/* ---------- Linguette Gestionale / CRM ---------- */
.linguette-area { display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px; padding: 8px 28px 0; background: var(--bianco);
  border-bottom: 3px solid var(--viola); position: sticky; top: 66px; z-index: 19; }
.linguetta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px 8px; border-radius: 11px 11px 0 0; font-weight: 600; font-size: 13px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--testo); background: var(--sfondo); border: 1px solid var(--bordo); border-bottom: 0; }
.linguetta svg { width: 16px; height: 16px; stroke: currentColor; }
.linguetta:hover { text-decoration: none; color: var(--viola); background: var(--viola-chiaro); }
.linguetta.attiva { background: var(--viola); color: #fff; border-color: var(--viola); padding-top: 11px; }
.linguetta-conta { background: var(--rosa); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; letter-spacing: 0; }
.area-crm .linguette-area { border-bottom-color: var(--rosa); }
.area-crm .linguetta.attiva { background: var(--rosa); border-color: var(--rosa); }
.area-crm .nav a.attivo { background: var(--rosa); }
.area-crm .nav a:hover { background: #FCE7F1; color: var(--rosa); }
.brand-crm { font-size: 11px; font-weight: 700; color: #fff; background: var(--rosa); border-radius: 6px; padding: 2px 6px; vertical-align: 3px; letter-spacing: .05em; }
@media (max-width: 860px) { .linguette-area { padding: 6px 12px 0; } .linguetta { padding: 8px 12px 7px; } }

/* ---------- Mini calendario (widget agenda) ---------- */
.minical { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.mc-testa { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 4px; }
.mc-titolo { font-size: 16px; color: var(--inchiostro); font-weight: 600; }
.mc-nav { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--grigio); cursor: pointer; padding: 2px 10px; border-radius: 8px; }
.mc-nav:hover { background: var(--sfondo); color: var(--viola); }
.mc-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; transition: opacity .15s; }
.mc-gs { font-size: 12.5px; color: var(--grigio); font-weight: 500; padding: 4px 0 6px; }
.mc-g { position: relative; background: none; border: 2px solid transparent; border-radius: 10px; font: inherit; font-size: 14px; color: var(--inchiostro);
  height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.mc-g:hover { background: var(--sfondo); }
.mc-g.oggi { border-color: #A3336F; font-weight: 600; }
.mc-g.pieno { font-weight: 600; }
.mc-g.scelto { background: var(--viola); color: #fff; border-color: var(--viola); }
.mc-punti { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.mc-punti i { width: 4px; height: 4px; border-radius: 50%; }
.mc-g.scelto .mc-punti i { background: #fff !important; }
.mc-intesta-lista { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--inchiostro); padding-top: 6px; }
.mc-intesta-lista[hidden] { display: none; }
.mc-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; }
.mc-lista li a { display: flex; flex-direction: column; gap: 2px; border-left: 4px solid var(--c, var(--viola)); border-radius: 2px; padding: 3px 0 3px 14px; color: var(--testo); }
.mc-lista li a:hover { text-decoration: none; background: var(--sfondo); }
.mc-lista li.fatto a { opacity: .55; }
.mc-lista li.fatto b { text-decoration: line-through; }
.mc-quando { font-size: 13px; color: var(--grigio); }
.mc-lista b { color: var(--inchiostro); font-size: 15px; font-weight: 600; }
.mc-cliente { font-size: 12.5px; color: var(--grigio); text-transform: uppercase; letter-spacing: .02em; }
.mc-vuoto { color: var(--grigio); font-size: 13.5px; padding: 4px 0; }
.mc-piede { display: flex; gap: 22px; border-top: 1px solid var(--bordo); padding-top: 12px; margin-top: 4px; }
.mc-piede a { font-weight: 600; color: #2F7FC1; }

/* ---------- CRM ---------- */
.btn-successo { background: var(--verde); color: #fff; border-color: var(--verde); }
.btn-successo:hover { background: #116632; color: #fff; border-color: #116632; }
.kpi-link { display: block; color: inherit; transition: transform .12s, box-shadow .12s; }
.kpi-link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(28,11,59,.1); }
.segmenti { display: inline-flex; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; padding: 3px; }
.segmenti a { padding: 6px 12px; border-radius: 8px; color: var(--grigio); font-size: 13.5px; font-weight: 500; }
.segmenti a:hover { text-decoration: none; color: var(--viola); }
.segmenti a.attivo { background: #fff; color: var(--inchiostro); box-shadow: 0 1px 3px rgba(28,11,59,.1); }
.grafico-box { position: relative; height: 230px; }
.grafico-box.alto { height: 280px; }
.grafico-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.barra { height: 12px; border-radius: 99px; background: var(--sfondo); overflow: hidden; border: 1px solid var(--bordo); }
.barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--viola), var(--rosa)); border-radius: 99px; }
.obiettivo h3 svg { width: 18px; height: 18px; stroke: var(--viola); vertical-align: -3px; }
.fase-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fase-pill i, .pallino { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pipe-tabs a { display: inline-flex; align-items: center; gap: 8px; }
.riga-campi { display: flex; gap: 8px; }
.barra-salva { display: flex; justify-content: flex-end; }

/* timeline attività */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-gruppo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--grigio); font-weight: 600; margin: 14px 0 4px; }
.tl-gruppo:first-child { margin-top: 0; }
.tl-gruppo.neg { color: var(--rosso); }
.tl-voce { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bordo); align-items: flex-start; }
.tl-voce:last-child { border-bottom: 0; }
.att-ico { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); font-size: 15px; font-weight: 700; }
.lista .att-ico { width: 28px; height: 28px; font-size: 13px; }
.tl-corpo { flex: 1; min-width: 0; }
.tl-riga1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-riga1 a { color: var(--inchiostro); }
.tl-meta { font-size: 12.5px; color: var(--grigio); margin-top: 2px; }
.tl-testo { font-size: 13.5px; margin-top: 5px; white-space: pre-line; color: var(--testo); }
.tl-voce.fatta .tl-riga1 b { color: var(--grigio); font-weight: 500; }
.spunta { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bordo); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.spunta svg { width: 15px; height: 15px; stroke: transparent; }
.spunta:hover { border-color: var(--verde); }
.spunta:hover svg { stroke: var(--verde); }
.spunta.on { background: var(--verde); border-color: var(--verde); }
.spunta.on svg { stroke: #fff; }

/* registrazione rapida */
.att-rapida { margin-bottom: 18px; }
.att-tipi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.att-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.att-tipo span { display: inline-block; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--bordo); font-size: 13px; cursor: pointer; color: var(--testo); background: #fff; }
.att-tipo span:hover { border-color: var(--c); color: var(--c); }
.att-tipo input:checked + span { background: var(--c); border-color: var(--c); color: #fff; }
.att-tipo input:focus-visible + span { outline: 2px solid var(--c); outline-offset: 2px; }

/* barra fasi nella scheda opportunità */
.fasi-barra { display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; }
.fasi-barra form { flex: 1; min-width: 110px; }
.fase { width: 100%; padding: 10px 16px; border: 0; background: #ECE7F4; color: var(--grigio); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); white-space: nowrap; }
.fasi-barra form:first-child .fase { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 10px 0 0 10px; }
.fase.fatta { background: var(--viola-medio); color: #fff; }
.fase.corrente { background: var(--viola); color: #fff; font-weight: 600; }
.fase:disabled { cursor: default; }
div.fase { flex: 0 0 auto; width: auto; min-width: 100px; text-align: center; border-radius: 0 10px 10px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
.fase.esito-vinta { background: var(--verde); color: #fff; }
.fase.esito-persa { background: var(--rosso); color: #fff; }
.vinta-box { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--verde-chiaro); border-color: #B7EBC8; margin-bottom: 18px; }
.vinta-box b svg { width: 18px; height: 18px; stroke: var(--verde); vertical-align: -3px; }

/* kanban */
.pipe-barra { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pipe-barra .tabs { margin-bottom: 0; border-bottom: 0; }
.pipe-totali { display: flex; gap: 18px; font-size: 13.5px; color: var(--grigio); flex-wrap: wrap; padding-bottom: 8px; }
.pipe-totali b { color: var(--inchiostro); }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; min-height: 60vh; }
.kb-col { flex: 0 0 272px; background: #F0ECF7; border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 250px); border-top: 4px solid var(--c); transition: background .15s; }
.kb-col.sopra { background: var(--viola-chiaro); box-shadow: inset 0 0 0 2px var(--viola-medio); }
.kb-testa { padding: 12px 14px 8px; }
.kb-nome { display: flex; justify-content: space-between; align-items: center; color: var(--inchiostro); }
.kb-n { background: #fff; border-radius: 99px; padding: 1px 9px; font-size: 12px; color: var(--grigio); font-weight: 600; }
.kb-tot { font-size: 13px; color: var(--testo); font-weight: 600; margin-top: 2px; }
.kb-tot small { font-weight: 400; }
.kb-lista { padding: 4px 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kb-card { background: #fff; border-radius: 12px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(28,11,59,.06), 0 2px 8px rgba(28,11,59,.05); border: 1px solid #EAE5F2; cursor: grab; }
.kb-card:hover { border-color: var(--viola-medio); }
.kb-card.trascina { opacity: .45; transform: rotate(1.5deg); }
.kb-titolo { display: block; font-weight: 600; color: var(--inchiostro); line-height: 1.25; }
.kb-cliente { font-size: 12.5px; color: var(--grigio); margin-top: 2px; }
.kb-riga { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 14px; color: var(--inchiostro); }
.kb-piede { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--grigio); }
.kb-piede .avatar { margin-left: auto; }
.avatar.mini { width: 22px; height: 22px; font-size: 9.5px; }
.avviso-att { color: var(--ambra); }
.kb-vuoto { display: none; border: 2px dashed #D8CFE8; border-radius: 12px; padding: 16px; text-align: center; color: var(--grigio); font-size: 13px; }
.kb-lista:not(:has(.kb-card)) .kb-vuoto { display: block; }
.kb-esiti { position: fixed; left: calc(var(--sidebar) + 24px); right: 24px; bottom: -110px; display: flex; gap: 14px; z-index: 40; transition: bottom .18s ease; }
html.sidebar-compatta .kb-esiti { left: 100px; }
.kb-esiti.visibile { bottom: 18px; }
.kb-esito { flex: 1; height: 74px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 600; color: #fff; box-shadow: 0 10px 30px rgba(28,11,59,.25); }
.kb-esito svg { width: 22px; height: 22px; stroke: #fff; }
.kb-esito.persa { background: var(--rosso); }
.kb-esito.vinta { background: var(--verde); }
.kb-esito.sopra { transform: scale(1.03); filter: brightness(1.1); }

/* ticket */
.ticket-msg { border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.ticket-msg:last-child { margin-bottom: 0; }
.ticket-msg.interno { background: var(--ambra-chiaro); border-color: #F6DE9A; }
.tm-testa { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tm-testa small { margin-left: auto; }
.tm-testo { margin-top: 6px; white-space: pre-line; }
@media (max-width: 860px) { .kb-esiti { left: 12px; right: 12px; } .kb-col { flex-basis: 250px; } }
.mc-quando.neg { color: var(--rosso); }
input[type=color] { width: 70px; height: 40px; padding: 3px; border: 1px solid var(--bordo); border-radius: 10px; background: #fff; cursor: pointer; }
.g-2-1 > div:last-child .lista .data { min-width: 78px; }